.modal-content {
    padding: 14px;
    width: 800px;
    /* height: 685px; */
    border-radius: 20px;
}

.modal-header {
    border-bottom: unset;
}

.modal-header.forgot-password {
    padding-bottom: unset;
}

.sub-header {
    width: 100%;
}

.sub-header > p {
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    line-height: 33px;
    margin: unset;
    color: #7c7c7c;
}

.modal-title {
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
}

.btn-close {
    color: red;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff0000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    opacity: unset;
    width: 5px;
    height: 5px;
    background-color: transparent !important;
    position: relative;
    top: -8px;
}

.modal-header:not(:has(.back-btn.hide)) .btn-close {
    margin-left: 63px !important;
}

.modal-body {
    display: flex;
    justify-content: center;
}

#SignupModal  #signup-flow-register-patient-modal .modal-body{
    overflow: auto;
    height: calc(100vh - 220px);
}

.modal-body input {
    height: 40px;
}

.main-body-content, .main-footer-content {
    width: 342px;
    display: flex;
    /* justify-content: center; */
    flex-direction: column;
    gap: 10px;
}

.main-body-content > .input-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.main-body-content > .input-wrapper.forgot-password {
    align-items: flex-end;
}

.main-body-content > .input-wrapper > div {
    position: relative;
}

.main-body-content > .input-wrapper > div > svg{
    position: absolute;
    top: 15px;
    right: 15px;
}

.modal-footer {
    border-top: unset;
    justify-content: center;
    margin-top: 100px;
}

.main-footer-content > p {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    line-height: 21.6px;
    margin: unset;
}

.separator {
    width: 100%;
    display: flex;
    align-items: center;
}

hr {
    border: 1px solid #A6A7A8;
    margin: unset;
}

.btn.social-btn {
    background-color: #F5F6F8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
}

/* resned otp */
 
.resend-btn {
    color: var(--primary-color);
}

.resend-btn > span {
    color: inherit;
}



/* forgot password screen*/

.back-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: fit-content !important;
    height: fit-content !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.back-btn > button {
    background-color: #ffffff !important;
    box-shadow: unset !important;
    width: 40px !important;
    height: 40px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: none;
}

.back-btn > span {
    font-size: 14px;
    line-height: 18.23px;
}

.modal-footer .existing-account-message {
    font-size: 16px;
    line-height: 23.44px;
    text-align: center;
    color: #585858;
    margin-bottom: 0px;
}

.modal-footer .existing-account-message > span {
    color: #585858;
}

.modal-footer .existing-account-message > a {
    text-decoration: none;
    font-weight: 700;
    color: var(--primary-color);
}

.modal-footer .main-footer-content > button[type='submit'] {
    width: 100%;
    padding: 10px !important;
    border: none !important;
    border-radius: 58px !important;
    background-color: var(--primary-color) !important;
    height: 46px;
}

.modal-footer .main-footer-content > button[type='submit'] .btn-text{
    color: #ffffff !important;
}

.modal-footer .main-footer-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 342px;
    gap: 5px;
}

.modal-footer .main-footer-content > p {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    line-height: 21.6px;
    margin: unset;
}

.modal-footer .main-footer-content > p a{
    color: var(--primary-color) !important;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    line-height: 21.6px;
}  

.modal-footer {
    margin-top: unset;
}

/* verify otp screen  */ 

.code-inputs {
    display: flex;
    gap: 20px !important;
    justify-content: center;
    direction: ltr;
    flex-direction: row !important;
}

.code-inputs > input {
    text-align: center;
    width: 62px;
    height: 48px;
    /* width: 50px;
    height: 50px; */
}

.filled-input {
    border: 1px solid var(--primary-color) !important;
    background: #F3EFFA;
    color: var(--primary-color) !important;
}

.iti__selected-flag {
    border-radius: 8px 0px 0px 8px;
    direction: ltr;
}

.iti.iti--allow-dropdown.iti--separate-dial-code {
    width: 100%;
}

.iti__flag-container {
    right: unset;
    left: 0;
}

input[name='email'] {
    direction: ltr !important;
}


.hospital-checkbox-terms-and-conditions .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.hospital-checkbox-terms-and-conditions input[type='checkbox'] {
   height: unset !important;
   margin-top: 0px;
}
.hospital-checkbox-terms-and-conditions span {
    font-size: 12px;
    font-weight: 400;
    line-height: 14.8px;
    color: var(--sub-heading-color);
}
.hospital-checkbox-terms-and-conditions a {
    color: var(--primary-color);
    text-decoration: underline;
    font-weight: 600;
    font-size: 12px;
}

.iti__country-list {
    z-index: 1000 !important;
}

#SignupModal .modal-footer {
    margin-top: unset;
}

@media screen and (max-width: 768px) {
    .modal-header:not(:has(.back-btn.hide)) .btn-close {
        margin-left: 15px !important;
    }
    .btn-close {
        top: 0px !important;
    }

    #SignupModal .modal-content {
        width: 100%;
    }

    #SignupModal .modal-header {
        padding-bottom: 15px !important;
    }

    #SignupModal #signup-flow-register-patient-modal .modal-body {
        overflow: auto;
        height: unset;
    }
    
    #SignupModal.show {
        justify-content: center;
    }

}


[lang = "ar"] {
    .iti__flag-container {
        right: unset !important;
        left: 0 !important;
    }
    .show-hide-icon {
        /* left: 15px; */
        right: 15px !important;
    }
    input[data-type='password'] {
        /* padding-left: 35px !important; */
        direction: ltr;
    }

    input[name='email'] {
        direction: ltr;
    }

    button.back-btn {
        transform: rotate(180deg);
    }
    .modal-header:not(:has(.back-btn.hide)) .btn-close {
        margin-left: unset !important;
        margin-right: 15px !important;
    }
    .modal-header.forgot-password 
    {
          padding-bottom: 10px !important;
     }
     .back-btn > button svg {
        transform: rotate(180deg);
        width: 25px;
        height: 50px;
        flex-shrink: 0;
     }
     .btn-close {
        top: 0px !important;
     }
     .form-check {
        display: flex;
        gap: 30px;
        align-items: flex-start;
        min-height: unset !important;
    }

}

/* 
[lang= "ar"] {
    .main-body-content > .input-wrapper > div > svg {
        position: absolute;
        top: 15px;
        left: 15px;
        right: unset;
    }
    .back-btn {
        transform: rotate(180deg);
    }
    .iti__selected-flag {
        border-radius: 0px 8px 8px 0px !important;
    }
    input#phone{
        direction: rtl !important;
        padding-right: 60px !important;
    }
} */