.form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 44px;
}

.form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--Spacing-Gap-Gap-24, 24px);
    align-self: stretch;
    padding:20px !important;
}


@media screen and (max-width: 1440px) {
    .form-container {
        width: 525px;
    }
}

@media screen and (max-width: 640px) {
    .form-container {
        width: 100vw;
    }
}

.res-top-info {
    display: flex;
    justify-content:space-between;
    width:24rem;
    align-items:center
}
@media screen and (max-width: 640px) {
    .res-top-info {
        width: 20rem;
    }
}


@media screen and (min-width: 1440px) {
    .res-top-info {
        display: none;
        width: 100%;
    }
}


.logo-container {
    display:none;
}


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

    .logo-container {
        display: flex;
       height:32px;
    }
}

.logo {
    width:50% !important;
    height:5vh !important
}



.form-title {
    display: flex;
    padding: var(--Spacing-Gap-Gap-8, 8px) var(--Spacing-Gap-Gap-0, 0px);
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}

.header-content {
    display: flex;
    align-items: center;
    align-content:center; justify-content:center;
    margin-top:10px;
}
.login-content {
    color: var(--Neutral-Base-NT-800, #FAFBFB);
        text-align: right;
        /* -Bold/headline/large */
        font-family: "YekanBakh_Bold";
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: 40px;

}

@media screen and (max-width: 1440px) {
    .form-title p {
        font-size: 20px;
    }
}


.form-input {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Spacing-Gap-Gap-8, 8px);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
}
    .form-input input:-webkit-autofill {
        color: white !important;
        background-color: #243757 !important; /* Same background as normal */
        border: var(--Spacing-Gap-Gap-0, 1px) solid var(--Neutral-Base-NT-40, #2563EB) !important;
        box-shadow: 0px 0px 0px 1000px #243757 inset !important; /* Forces the background color */
        -webkit-text-fill-color: white !important; /* Ensure autofilled text is white */
    }

        .form-input input:-webkit-autofill:focus {
            background-color: #243757 !important;
            border: var(--Spacing-Gap-Gap-0, 1px) solid var(--Neutral-Base-NT-40, #2563EB) !important;
            color: white !important;
            -webkit-text-fill-color: white !important; /* Keep autofilled text white on focus */
        }

        .form-input input:-webkit-autofill:hover {
            color: white !important;
            background-color: #243757 !important; /* Same background as normal */
            border: var(--Spacing-Gap-Gap-0, 1px) solid var(--Neutral-Base-NT-40, #2563EB) !important;
            box-shadow: 0px 0px 0px 1000px #243757 inset !important; /* Forces the background color */
            -webkit-text-fill-color: white !important; /* Ensure autofilled text is white */
        }
    .form-input label {
        font-family: "YekanBakh_Medium";
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 20px;
    }

    .form-input input {
        display: flex;
        flex: 1;
        color: white;
        justify-content: flex-start;
        align-items: center;
        align-self: stretch;
        border-radius: var(--Basic-Forms-Input-Border-Radius, 8px);
        background: #243757 !important;
        transition: border 1s ease;
        border: none;
        box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
        height: 48px !important;
        padding-right: 10px;
        padding-left: 10px;
    }

        .form-input input:focus {
            color: white;
            border: var(--Spacing-Gap-Gap-0, 1px) solid var(--Neutral-Base-NT-40, #2563EB) !important;
        }

    .form-input span {
        /*color: var(--Neutral-Base-NT-100, #98A1B0);*/
        color: red;
        text-align: right;
        font-family: "YekanBakh_Medium";
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        letter-spacing: 0.07px;
    }
    .form-input input::placeholder {
        color: rgba(255, 255, 255, 0.7); /* Slightly lightens the placeholder color */
        opacity: 1; /* Ensures placeholder is fully visible */
    }
.pass-keyboard {
    display: flex;
    height: 28px;
    padding: var(--Components-Button-Spacing-Y-SM, 10px) var(--Components-Button-Spacing-X-SM, 12px);
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 8px var(--Utilities-Spacing-2, 8px);
    flex-wrap: wrap;
    border-radius: var(--Components-Button-Border-Radius, 8px);
    position: absolute;
    left: 40px;
}

    .pass-keyboard img {
        width: 20px; /* Control the size of the image */
        height: auto; /* Keep aspect ratio */
    }

.pass-eye {
    display: flex;
    height: 28px;
    padding: var(--Components-Button-Spacing-Y-SM, 10px) var(--Components-Button-Spacing-X-SM, 12px);
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 8px var(--Utilities-Spacing-2, 8px);
    flex-wrap: wrap;
    border-radius: var(--Components-Button-Border-Radius, 8px);
    position: absolute;
    left: 5px;
}

.captcha-image {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius : 15px !important;
    height:48px !important;
}
#CaptchaImage{
    border-radius:8px !important;
    height : 100%;
}
.pass-eye img {
    width: 20px; /* Control the size of the image */
    height: auto; /* Keep aspect ratio */
}

.input-container {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
}

.input-captcha-container {
    display: flex;
    align-items: center; /* Align input and image vertically */
    gap: 10px; /* Adjust gap between input and image */
    flex-grow: 1;
    width: 100%;
}


@media screen and (max-width: 1440px) {
    .input-captcha-container {
        flex-direction: column;
    }
}

.last-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--Spacing-Gap-Gap-0, 0px);
    align-self: stretch;
    padding-right: 20px !important;
    padding-left:20px !important;
}
.submit-button {
    border-radius:  8px;
}
.forget-pass-button {
    display: flex;
    height: 44px;
    padding: var(--Components-Button-Spacing-Y-LG, 22px) var(--Components-Button-Spacing-X-LG, 20px);
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 10px var(--Components-Button-Gap-Between-LG, 10px);
    flex: 1 0 0;
    flex-wrap: wrap;
    border-radius: var(--Components-Button-Border-Radius, 8px);
    font-family: "YekanBakh_Bold";
    font-weight:800;
    font-size:16px;
    background-color : transparent;
    border:none;
}