@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');
body{
    font-family: "Tajawal", sans-serif !important;
}
body.bg {
    background: #F6F6F6;
}
img.img-bg {
    width: 42%;
    height: auto;
}
.header {
background-color: #F6F6F6;
padding: 20px 10px;
}
.card.rounded-form {
border-radius: 33px;
}
.logo-container {
    text-align: center; 
    width: 230px !important;  
    height: 150px;
    object-fit: contain; 
    position: relative;
    z-index: 1; 
    border-radius: 25px;
    margin-top: -50px; 
    margin-bottom: -50px;
}

@media screen and (max-width: 576px) {
    .font-small {
        font-size: 1.25rem !important;
    }
}
.flag-icon {
    width: 20px; 
    height: 15px;
    margin-right: 5px;
  }
button.btn.login-btn{
color: #ffffff;
border-radius: 15px;
}
button.btn.btn-arabic{
font-size: 19px;
cursor: pointer;
} 
button.btn.bt-disable{
border: none;
background: #F6F6F6;
font-size: 19px;
cursor: pointer;
}  

ul.dropdown-menu.show {
    border-radius: 16px !important;
} 
.dropdown-item.active, .dropdown-item:active {
    color: #242424  !important;
    text-decoration: none  !important;
    font-weight: 600  !important;
    background-color: transparent !important;
}
.welcom-text{
font-weight: bolder;
}
.forgot-pass{
font-weight: bolder;
text-decoration: none;
}
.dropdown-toggle::after {
    display: none !important;
}

.forgot-pass-error{
    font-weight: bolder; }
.login{
border: none;
}
.otp-box {
    text-align: center;
    font-size: 24px;
    border-radius: 12px;
}
.otp-box input {
    border: none;
    width: 50px;
    height: 50px;
    background: none;
    border: 1px solid #ced4da;
    text-align: center;
    border-radius: 12px;
 
}
.form-control:focus {
    color: #212529;
    background-color: #fff;
    border-color: #F6F6F6;
    outline: 0;
    box-shadow: 0 0 0 0.25rem #F6F6F6;
}
input.form-control.otp.border-0 {
    background: rgb(255, 255, 255);
}
.otp-box input::placeholder {
    color: #D9D9D9 !important;
    font-size: 90px !important;
}
.btn-check:focus+.btn, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem #F6F6F6;
}
input#email,input#password,input#Username,input#username,input#PhoneNumber,input#type,input#country,input#contact_name,input#confirmpassword,input#fullname,input#phone,input#organization_Name,input#password_confirm,input#organization_name{
    background-color: #F6F6F6;
    border: none;
}
@media (max-width: 280px) {
    .d-flex {
        flex-direction: column;
    }
    .ms-5 {
        margin-left: 0; 
    }
    .mt-5 {
        margin-top: 0; 
    }
}

select#country {
    color: #6c757d !important;
}
.form-check-input:checked {
    background-color: #5A8B41 !important;
    border-color: #5A8B41 !important;
}
.form-check-input:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: #5A8B41 !important;
}    
button#flagCounrty {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background: #F6F6F6;
    border: none;
}
.btn-check:focus+.btn, .btn:focus {
    outline: 0;
    box-shadow: none !important;
}    

.phone {
    border-top-right-radius: 20px !important;
    border-bottom-right-radius: 20px !important;

}

/* css for img rtl _ltr them image */
.image-position {
    bottom: 0;
    margin-bottom: 1rem;
    display: none;
}

/* LTR specific positioning */
[dir="ltr"] .image-position,
.image-position:not([dir="rtl"]) {
    right: 0;
    left: auto;
    display: block;
}

/* RTL specific positioning */
[dir="rtl"] .image-position {
    left: 0;
    right: auto;
    display: block;
}

.position-absolute.top-0.start-0 {
    top: 0;
    left: 20%;
}

/* RTL specific positioning */
[dir="rtl"] .position-absolute.top-0.start-0 {
    right: -150px;
    width: 70%;
    position: absolute;
}
.error-message {
    color: red;
    font-size: 0.875em;
}