.numpad form{width:390px;max-width:100%;margin:50px auto;padding:35px 25px;text-align:center;border-radius:5px}.numpad__display{padding:0 20px;border-radius:5px;width:350px;max-width:100%;margin:auto;border:1px solid #e4dcdc;outline:none;font-size:60px;text-align:center}.numpad input:focus{outline:none}.numpad .pinButton{border:none;background:none;font-size:1.5em;border-radius:50%;height:60px;width:60px;font-weight:550;margin:7px 20px;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.numpad .clear,.numpad .enter{font-size:1em}.numpad .pinButton:focus-visible{outline:2px solid currentColor;outline-offset:2px}.numpad--pin form{background:#fff;box-shadow:0px 5px 5px 0px rgba(0,0,0,0.3)}.numpad--pin .numpad__display{color:transparent;text-shadow:0 0 0 #474747}.numpad--pin .pinButton{color:transparent;text-shadow:0 0 0 #666565}.numpad--pin .pinButton:hover{box-shadow:#506ce8 0 0 1px 1px}.numpad--pin .pinButton:active{background:#506ce8;color:#fff}.numpad--pin .clear:hover{box-shadow:#ff3c41 0 0 1px 1px}.numpad--pin .clear:active{background:#ff3c41;color:#fff}.numpad--pin .enter:hover{box-shadow:#47cf73 0 0 1px 1px}.numpad--pin .enter:active{background:#47cf73;color:#fff}.numpad--numeric .numpad__display{display:none}.numpad--numeric form{width:100%;max-width:520px;margin:22px auto 0;padding:0;background:none;box-shadow:none}.numpad--numeric .pinButton{color:var(--op-respuesta, #fff);text-shadow:none;background-color:rgba(var(--op-respuesta-rgb, 255, 255, 255), 0.08);border:2px solid rgba(var(--op-respuesta-rgb, 255, 255, 255), 0.3);transition:background-color 0.15s ease, border-color 0.15s ease, transform 0.06s ease}.numpad--numeric .pinButton:hover{box-shadow:none;background-color:rgba(var(--op-respuesta-rgb, 255, 255, 255), 0.18);border-color:rgba(var(--op-respuesta-rgb, 255, 255, 255), 0.55)}.numpad--numeric .pinButton:active{background-color:rgba(var(--op-respuesta-rgb, 255, 255, 255), 0.3);color:var(--op-respuesta, #fff);transform:scale(0.94)}.numpad--numeric .clear,.numpad--numeric .enter{border-radius:999px}.numpad--numeric .enter{background-color:var(--op-pregunta, #FCFF3D);border-color:var(--op-pregunta, #FCFF3D);color:var(--op-fondo, #1D271F);font-weight:700}.numpad--numeric .enter:hover{background-color:var(--op-pregunta, #FCFF3D);border-color:var(--op-pregunta, #FCFF3D);filter:brightness(1.12)}.numpad--numeric .enter:active{background-color:var(--op-pregunta, #FCFF3D);color:var(--op-fondo, #1D271F)}.numpad--numeric .clear{background-color:transparent;border-color:rgba(var(--op-respuesta-rgb, 255, 255, 255), 0.22);color:rgba(var(--op-respuesta-rgb, 255, 255, 255), 0.75)}.numpad--numeric .clear:hover{background-color:rgba(var(--op-respuesta-rgb, 255, 255, 255), 0.12);border-color:rgba(var(--op-respuesta-rgb, 255, 255, 255), 0.4)}.numpad--numeric .clear:active{background-color:rgba(var(--op-respuesta-rgb, 255, 255, 255), 0.2);color:rgba(var(--op-respuesta-rgb, 255, 255, 255), 0.9)}#container .number_box .numpad .numpad__form .pinButton{width:64px;height:64px;max-width:none;padding:0;line-height:60px;font-size:26px;margin:6px 14px;box-sizing:border-box}#container .number_box .numpad .numpad__form .clear,#container .number_box .numpad .numpad__form .enter{width:92px;font-size:17px}body.fullscreen-layout #container .number_box .numpad .numpad__form .pinButton{width:92px;height:92px;line-height:88px;font-size:38px;margin:6px 16px}body.fullscreen-layout #container .number_box .numpad .numpad__form .clear,body.fullscreen-layout #container .number_box .numpad .numpad__form .enter{width:126px;font-size:24px}@media only screen and (max-height: 900px){body.fullscreen-layout #container .number_box .numpad .numpad__form .pinButton{width:72px;height:72px;line-height:68px;font-size:30px;margin:5px 12px}body.fullscreen-layout #container .number_box .numpad .numpad__form .clear,body.fullscreen-layout #container .number_box .numpad .numpad__form .enter{width:104px;font-size:20px}}@media only screen and (max-width: 768px){#container .number_box .numpad .numpad__form .pinButton{width:56px;height:56px;line-height:52px;font-size:22px;margin:5px 8px}#container .number_box .numpad .numpad__form .clear,#container .number_box .numpad .numpad__form .enter{width:78px;font-size:15px}}#container .number_box input[type=number]{text-align:center;-moz-appearance:textfield;appearance:textfield}#container .number_box input[type=number]::-webkit-outer-spin-button,#container .number_box input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
