.otp{
    align-items: center;
    background-color: #FFF;
    display: none;
    gap: 32px;
    height: 100vh;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}
    .otp > aside{
        max-width:640px;
        text-align: center;
        width: 100%;
    }

        .otp > aside img{
            max-width:351px;
            width: 100%
        }

    .otp > form{
        max-width:640px;
        width:100%;
    }

        .otp form .content {
            max-width: 416px;
            padding-right: 16px;
            width: 100%;
        }

        .otp > form aside{
            margin-bottom: 32px;
        }

        .otp form .btn-back{
            margin-bottom: 32px;
        }

        .otp form legend{
            margin-bottom:16px;
        }

        .otp form fieldset > ul{
            list-style:none;
            margin:0;
            padding:0;
        }

            .otp form fieldset > ul > li.countdown-over-response > span{
                display:block;
                height: 22px;
            }

            .otp form fieldset > ul > li.countdown-over-response button{
                display:none;
                height: 22px;
            }

            .otp form fieldset > ul > li.countdown-over-response.loading{
                position: relative;
            }

            .otp form fieldset > ul > li.countdown-over-response.loading > *{
                display: none!important;
            }

            .otp form fieldset > ul > li.countdown-over-response.loading::before{
                position: absolute;
                top: 0%;
                left: 0%;
                content: '';
                width: 20px;
                height: 20px;
                border-radius: 50%;
                border: 2px solid #002E6D;
                box-sizing: border-box;
                background-image: none;
                border-bottom: 0;
                animation: 1000ms infinite loadingcircle linear;
                background-color: transparent;
                display: block;
              }

            .otp form fieldset > ul > li:not(:last-child){
                margin-bottom:32px
            }

            .otp form fieldset > ul > li:last-child{
                height:20px;
            }

            .otp form fieldset > ul > li > button{
                width:100%
            }

            .otp form fieldset > ul label{
                display:block;
                margin-bottom:32px;
            }

            .otp-wrap{
                align-items:center;
                display:flex;
                gap:11px;
                position:relative
            }

                .otp-wrap ul {
                    display:flex;
                    gap:8px;
                    max-width: calc((56px * 3) + (8px * 2));
                    padding:0;
                    width:100%;
                }

                    .otp-wrap ul li{
                        align-items:center;
                        background-color:#F7F7F7;
                        border-radius:8px;
                        display:flex;
                        height:56px;
                        justify-content:center;
                        max-width:56px;
                        width:100%;
                    }

                    .otp-wrap ul li.extra{
                        display:none;
                    }

                    .otp-wrap ul li.filled{
                        display:flex;
                    }

                    .otp-wrap ul li.filled::after{
                        background: #333333;
                        border-radius: 100%;
                        content:'';
                        display: block;
                        height: 12px;
                        width: 12px;
                    }

                    .fieldset[data-error] .otp-wrap ul li.filled::after{
                        background:#E71706;
                    }

                    .otp-wrap ul li.focus{
                        border: 1px solid #333;
                    }

                    .otp-wrap ul li.show{
                        color:#333;
                        font:300 18px/56px Cartero, sans-serif;
                    }

                .otp-wrap input{
                    bottom:0;
                    height:100%;
                    opacity:0;
                    position:absolute;
                    width:100%;
                }

.otp.show{
    display: flex;
}

countdown-timer {
  display: block;
  position: relative;
  width: 96px;
  height: 96px;
}

    countdown-timer svg {
        transform: scaleX(-1);
    }

        countdown-timer g.timer-circle {
            fill: none;
            stroke: none;
        }

            countdown-timer .path-elapsed {
                stroke-width: 4px;
                stroke: #EBF4FF;
            }

            countdown-timer .path-remaining {
                color: #002E6D;
                stroke-width: 4px;
                stroke-linecap: round;
                transform: rotate(90deg);
                transform-origin: center;
                transition: 1s linear all;
                fill-rule: nonzero;
                stroke: currentColor;
            }

            countdown-timer .path-remaining.info {
                color: #002E6D;
            }

            countdown-timer .path-remaining.warning {
               color: #002E6D;
            }

            countdown-timer .path-remaining.alert {
                color: #002E6D;
            }

            countdown-timer .path-remaining.finish {
                display: none;
                /*color:red;*/
            }

    countdown-timer span.label {
        font:400 21px/96px Cartero, sans-serif;
        position:absolute;
        left:0;
        text-align: center;
        width:100%;
    }

@media only screen and (max-width: 768px) {

    .otp.show {
        display:block;
    }

        .otp aside{
            display:none
        }

        .otp form{
            max-width: 100%;
            padding:64px 16px 0;
        }

            .otp form .content{
                max-width: none;
                padding-right: 0;
            }

            .otp-wrap ul{
                width:50%;
            }
}