.lwp_scode_parent{
    position: relative;
    height: 100px;
}
.lwp_scode_parent .lwp_scode:before{
    content: '';
    height: 74px;
    width: 100%;
}
.lwp_scode_parent .lwp_scode{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
}
.lwp_scode_parent input[autocomplete="one-time-code"] {
    --magic-number: 45px !important;
    position: absolute !important;
    background-image: linear-gradient(#fff, #fff),
    url("../images/rounded-rectangle.svg") !important;
    background-size: var(--magic-number) !important;
    background-position-x: right, left !important;
    background-repeat: no-repeat, repeat-x !important;
    border: 0 !important;
    height: var(--magic-number) !important;
/*width: calc(6 * var(--magic-number)) !important;*/
    font-size: calc(0.6 * var(--magic-number)) !important;
    font-family: monospace !important;
    letter-spacing: calc(0.64 * var(--magic-number)) !important;
    padding-inline-start: calc(0.3 * var(--magic-number)) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    max-width: 310px !important;
    width: 310px !important;
    transform: translate(calc(-50% + 20px), calc(50% + 10px)) !important;
    left: 50% !important;
    bottom: 50% !important;
/*transform: translatex(calc(0.5 * var(--magic-number))) !important;*/
}
.lwp_scode_parent input[autocomplete="one-time-code"]:focus {
    outline: none !important;
    background-image: linear-gradient(#fff, #fff),
    url("../images/blue-rounded-rectangle.svg") !important;
    background-size: var(--magic-number) !important;
    background-position-x: right, left !important;
    background-repeat: no-repeat, repeat-x !important;
}