Updating CSS

.ac{
 --aceptar-1:#a4d199;
 --aceptar-2:#81996d;
 --proceso-1:#99a4d1;
 --proceso-2:#7481a1;
 --denegada-1:#d199c4;
 --denegada-2:#ad7fa3;
}
.ac{
  width:400px;
  margin:20px auto;
  background:#fafafa;
  border:1px solid #ccc;
  border-radius:2px;
  padding:10px;
  box-sizing:border-box;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
}
.ac i{
  display:flex;
  height:30px;
  width:30px;
  justify-content:center;
  align-items:center;
  color:white;
  border-radius:2px;
  box-sizing:border-box;
  font-size:12px;
  margin-right:10px;
}
.ac span{
  background:#f0f0f0;
  border:1px solid #ddd;
  height:30px;
  box-sizing:border-box;
  font:9px raleway;
  text-transform:uppercase;
  font-weight:900;
  color:#666;
  display:flex;
  justify-content:center;
  align-items:center;
  width:338px;
}
.ac.denied input{
  display:none;
}
.ac.denied label{
  cursor:pointer;
}
.ac p{
  width:380px;
  background:#f0f0f0;
  box-sizing:border-box;
  font:11px raleway;
  font-weight:500;
  color:#111;
  margin: 0 auto;
  transition:ease 0.5s;
  overflow:hidden;
  height:0;
  border:0px solid #ddd;
  padding:0px;
}
.ac input:checked ~ p {
  border:1px solid #ddd;
  padding:10px;
  margin: 10px auto 0;
  height:max-content;
}
.ac.acept i{
  border:1px solid var(--aceptar-2);
  text-shadow:1px 1px var(--aceptar-2), 1px -1px var(--aceptar-2), -1px 1px var(--aceptar-2), -1px -1px var(--aceptar-2);
  background:var(--aceptar-1);
}
.ac.acept span{
  color:var(--aceptar-2);
}
.ac.process i{
  border:1px solid var(--proceso-2);
  text-shadow:1px 1px var(--proceso-2), 1px -1px var(--proceso-2), -1px 1px var(--proceso-2), -1px -1px var(--proceso-2);
  background:var(--proceso-1);
}
.ac.process span{
  color:var(--proceso-2);
}
.ac.denied i{
  border:1px solid var(--denegada-2);
  text-shadow:1px 1px var(--denegada-2), 1px -1px var(--denegada-2), -1px 1px var(--denegada-2), -1px -1px var(--denegada-2);
  background:var(--denegada-1);
}
.ac.denied span{
  color:var(--denegada-2);
}