@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Poppins", sans-serif;
}
.validation-summary-errors ul {
    list-style: none !important;
    text-align: center;
    font-size: clamp(14px,0.85vw,16px);
}
input:autofill{
    background-color:red !important;
}
html[dir="rtl"] body {
    font-family: "Tajawal", sans-serif !important;
}

#image-section {
    border-radius: 32px 32px 0 0 !important;
    overflow: hidden;
}


.login-card {
    border-radius: 32px;
    border: none;
}

#image-section img {
    object-fit: cover;
}

#image-section .overlay {
    background-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(clamp(1.5px, 0.3vw, 20px));
}
.modal {
    backdrop-filter: blur(8px) !important;
}
.lock-icon-confirm {
    width: clamp(60px,5.1vw,97px);
    height: clamp(100px,8.8vw,169px);
    object-fit: cover;
}
.check-icon {
    width: clamp(50px,5.1vw,90px);
    height: auto;
    object-fit: cover;
}
#image-section .content {
    z-index: 1;
    background: #0000007A;
    width: 84%;
    backdrop-filter: blur(3vw);
    padding: clamp(15px,1.46vw,28px);
    border-radius: 20px;
    max-width: 650px;
}
#modalMessage {
    font-size: clamp(18px,1.25vw,24px);
    font-weight: 700;
    max-width: 309px;
    color: #2a2a2a;
   
}
.reset-h2{
    max-width:80%;
}
#image-section .content h1 {
    font-size: clamp(20px,2vw,40px);
    font-weight: 600;
    text-align: center;
}

    #image-section .content p {
        font-size: clamp(14px,1vw,20px);
        color: rgba(246, 246, 248,0.9);
        font-weight: 400;
        margin-top: 0.8vw;
        display: none;
        text-align: center;
    }

.login-form-section h2 {
    font-size: clamp(22px,1.66vw,32px);
    font-weight: 700;
    color: #2a2a2a;
}
.login-form-section .action-btn {
  font-weight:600;
}
.ai-icon {
    width: clamp(24px,2vw,40px);
    height: auto;
    margin-top: -2.2vw;
}

.form-body label {
    font-weight: 500 !important;
}

.form-body {
    gap: clamp(20px,1.3vw,32px) !important;
}

form {
    width: 90% !important;
}

.link-base {
    color: #2A2A2A !important;
    font-weight: 400 !important;
    transition: all 0.3s linear;
    font-size: clamp(12px,0.9vw,18px) !important;
}


    .link-base:hover {
        color: #006154 !important;
    }

.link-accent {
    color: var(--primary-brand-color);
    transition: all 0.3s linear;
    text-decoration: none !important;
}

    .link-accent:hover {
        color: var(--stop-color-ai-icon);
    }

.icon-res {
    width: clamp(18px,1.25vw,24px);
    height: auto;
}

.eye-icon {
    width: clamp(18px, 1vw, 24px);
    height: clamp(18px, 1vw, 24px);
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.d-none {
    display: none;
}

.icon-eye {
    display: inline-block;
}

.lock-icon {
    width: clamp(60px,4.3vw,81px);
    height: clamp(70px,5.2vw,101px);
    object-fit: cover;
}

#image-section {
    aspect-ratio: 2/1 !important;
}

.custom-login-container {
    max-width: 95% !important;
}

.font-size-res-16 {
    font-size: clamp(14px,0.6vw,16px) !important;
}
.font-size-res-14 {
    font-size: clamp(12px,0.6vw,14px) !important;
}
.font-weight-700 {
    font-weight: 700;
}

.font-weight-600 {
    font-weight: 600;
}

.container-fluid .row {
    margin: 0;
    margin-top: 20px;
    margin-bottom: 20px;
    height: auto;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0px 371px 149px rgba(0, 0, 0, 0.01), 0px 209px 125px rgba(0, 0, 0, 0.05), 0px 93px 93px rgba(0, 0, 0, 0.09), 0px 23px 51px rgba(0, 0, 0, 0.1) !important;
}

.code-input {
    width: clamp(35px,2.7vw,50px);
    height: clamp(35px,2.7vw,50px);
    border: 2px solid #2a2a2a !important;
    font-size: clamp(14px,0.6vw,16px) !important;
}
#errorMessage ul{
    width:100%;
    padding:0;
    list-style:none;
    margin:0;
}
.error-border {
    border-color: #dc3746 !important;
}

@media (min-width: 410px) {
    #image-section .content p {
        display: block;
    }
}

@media (min-width: 992px) {

    #image-section .content h1 {
        text-align: initial;
    }

    #image-section .content p {
        text-align: initial;
    }

    .border-raduis-bottom-card {
        border-radius: 0 !important;
    }

    .custom-login-container {
        max-width: 100% !important;
    }

    #image-section {
        border-radius: 60px 0 0 60px !important;
    }

    #image-section {
        aspect-ratio: auto;
    }

    .container-fluid .row {
        height: 100vh;
        margin-top: 0px;
        border-radius: 0;
        margin-bottom: 0px;
        box-shadow: none !important;
    }

    #image-section .content {
        width: 54%;
    }

    .container-fluid {
        padding: 0px;
    }

    form {
        width: 70% !important;
    }

    [dir="rtl"] #image-section {
        border-radius: 0 60px 60px 0 !important;
    }
}
@media  (min-width:500px){
    .reset-h2 {
        max-width: 60%;
    }
}