.code-container{display:block;height:35px;margin:0 auto;padding:0 0 36px;position:relative;width:168px}.code-container:before{background:#fff;content:"";height:-webkit-calc(100% + 3px);height:calc(100% + 3px);position:absolute;right:-36px;top:0;width:37px;z-index:10}.code-underline{background:-webkit-gradient(linear,left top,right top,color-stop(82%,#252630),color-stop(82%,#252630),color-stop(82%,transparent));background:linear-gradient(90deg,#252630 82%,#252630 0,transparent 0);background-size:26.18%;bottom:-10px;height:2px;left:0;opacity:.3;overflow:hidden;position:absolute;-webkit-transition:.2s;transition:.2s;width:100%;z-index:1}.validation-message~div .code-underline{background:-webkit-gradient(linear,left top,right top,color-stop(82%,#e74c3c),color-stop(82%,#e74c3c),color-stop(82%,transparent));background:linear-gradient(90deg,#e74c3c 82%,#e74c3c 0,transparent 0);background-size:26.18%;opacity:1}body .code-container .code-input{border:none!important;-webkit-box-shadow:none!important;box-shadow:none!important;font-size:22px;font-weight:700;left:0;letter-spacing:31px;line-height:35px;outline:none;overflow:hidden;padding:8px 12px;position:absolute;top:0;width:-webkit-calc(100% + 31px);width:calc(100% + 31px)}.code-input:focus+.code-underline,.code-input:focus-within+.code-underline{opacity:.8}