@import url("acec.css");

.middle {
  width: 100%;
  text-align: center;
}

.middle input[type="radio"] {
  display: none;
}
.middle .box {
  border: 1px solid rgba(var(--Color-Morado-Oscuro),1);
  width: 50px;
  height: 50px;
  background-color: #fff;
  transition: all 250ms ease;
  will-change: transition;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  position: relative;
  border-radius: 10%;
}
.middle .box:active {
  transform: translateY(-11px);
}
.middle .box span {
  position: absolute;
  transform: translate(0, 10px);
  left: 0;
  right: 0;
  transition: all 300ms ease;
  font-size: 20px;
  user-select: none;
  color: rgba(var(--Color-Morado-Oscuro),1);
}
.middle .box span:before {
  font-size: 20px;
  display: block;
  transform: translateY(10px);
  opacity: 0;
  transition: all 300ms ease-in-out;
  font-weight: normal;
  color: white;
}
.middle input[type="radio"]:checked + .box {
  background-color: rgba(var(--Color-Morado-Oscuro),1);
}
.middle input[type="radio"]:checked + .box span {
  color: white;
  transform: translateY(10px);
}
.middle input[type="radio"]:checked + .box span:before {
  transform: translateY(0px);
  opacity: 1;
}


/*Como se Usa */
/*
<div class="middle">
    <label>
        <input type="radio" class="InusualSospechosoComportaFinanciero OperacionComportaFinancieroB" id="radInSoOperacionActEcoReporS" name="radInSoOperacionActEcoRepor" value="Si" rubricapi_Validacion='{"AlertId":"a-radInSoOperacionActEcoRepor","Descript":"Campo Obligatorio","LongitudMinima":"2","AditionalVerificacion":"radInSoOperacionActEcoReporPAS,radInSoOperacionActEcoReporPBS,radInSoOperacionActEcoReporPCS"}'/>
        <div class="box">
            <span>Si</span>
        </div>
    </label>
    <label>
        <input type="radio" class="InusualSospechosoComportaFinanciero OperacionComportaFinancieroB" id="radInSoOperacionActEcoReporN" name="radInSoOperacionActEcoRepor" value="No" rubricapi_Validacion='{"AlertId":"a-radInSoOperacionActEcoRepor","Descript":"Campo Obligatorio","LongitudMinima":"2","AditionalVerificacion":"radInSoOperacionActEcoReporPAS,radInSoOperacionActEcoReporPBS,radInSoOperacionActEcoReporPCS"}'/>
        <div class="box">
            <span>No</span>
        </div>
    </label>
    <label>
        <input type="radio" class="InusualSospechosoComportaFinanciero OperacionComportaFinancieroB" id="radInSoOperacionActEcoReporNS" name="radInSoOperacionActEcoRepor" value="NS" rubricapi_Validacion='{"AlertId":"a-radInSoOperacionActEcoRepor","Descript":"Campo Obligatorio","LongitudMinima":"2","AditionalVerificacion":"radInSoOperacionActEcoReporPAS,radInSoOperacionActEcoReporPBS,radInSoOperacionActEcoReporPCS"}'/>
        <div class="box">
            <span>No sé</span>
        </div>
    </label>
</div>
*/