:root {

    --theme-default: #021861;
    --theme-secondary: #049142;

}

body,
button,
input,
select,
textarea,
.table,
.card,
.nav-link,
.dropdown-item {
    font-family: 'Roboto', sans-serif !important;
}
#pageWrapper{
    background-color: #FFFFFF !important;
}
.page-body{
    background-color: #FFFFFF !important;
}


.btn{
    min-height:44px;
}

.btn-sm{
    min-height:36px;
}

.btn-lg{
    min-height:52px;
}
.login-card{
    background: #f3eaea;
}

.validation-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    pointer-events: none; /* So it doesn't interfere with typing */
}

.otp-modal{

    border:none;
    border-radius:20px;

}
.otp-modal .modal-body{

    padding:2rem;

}

.otp-logo{

    width:100%;
    max-width:180px;
    height:auto;
    object-fit:contain;
}

.otp-inputs{

    display:flex;

    justify-content:center;

    gap:10px;

    flex-wrap:nowrap;

}

.otp-input{

    width:58px;
    height:58px;

    border:1px dashed #d9d9d9;

    border-radius:8px;

    background:#fff;

    text-align:center;

    font-size:24px;

    font-weight:600;

    transition:.25s;


}

.otp-input:focus{

    outline:none;

    border-color:var(--theme-default);

    box-shadow:none;

}

.success-circle{

    width:90px;
    height:90px;
    margin:auto;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#16A34A;

}

.success-circle svg{

    width:40px;
    height:40px;
    color:#fff;

}

@media(max-width:576px){

    .otp-input{

        width:42px;

        height:42px;

        font-size:18px;

    }

    .otp-inputs{

        gap:6px;

    }

    .modal-dialog{

        margin:15px;

    }

    .otp-modal .modal-body{

        padding:1.5rem;

    }
    .otp-logo{

        max-width:140px;

    }

    .status-lottie{

        width:130px;

        height:130px;

    }
    .status-title{

        font-size:24px;

    }

}


.status-lottie{

    width:170px;

    height:170px;

    margin:auto;

}

.status-lottie svg{

    width:100% !important;

    height:100% !important;

}
.status-title{

    font-size:20px;

}

.modal-body p{

    max-width:380px;

    margin:auto;

}



/**=======================================================
Custom CSS By Own
==========================================================
 */

@media (max-width: 1428px) {
    .page-wrapper .page-header
{
    padding: 5px 4px !important;
}
}

.lan-1,
.lan-8{
    text-transform: capitalize!important;
}