@font-face {
    font-family: 'Ajnadeen';
    src: url('../fonts/ArbFONTS-DGAgnadeen-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ajnadeen';
    src: url('../fonts/ArbFONTS-DGAgnadeen-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

:root {
    --app-dark: #2a3c46;
    --app-primary: #00A9B0;
    --app-pending: #F3CB8A;
    --app-rejected: #ffa440;
    --app-approved: #b0cc36;
    --app-bg: #f7f9fa;
    --app-border: #dee2e6;
}


body, html {
    height: 100%;
}

body {
    background: #F8F9FA;
    font-family: 'Ajnadeen', sans-serif;
}

.left-panel {
    background: linear-gradient(127.87deg, #EAF5F4 4.54%, #F6F8FA 104.75%);
    padding: 60px;
}

.right-panel {
    background: #F8F9FA;
    padding: 60px;
}

.form-control {
    height: 50px;
}

.login-btn {
    height: 50px;
    font-size: 16px;
}

.icon-box {
    width: 48px;
    height: 48px;
    opacity: 1;
    border-radius: 8px;
    background: #5BC0BE29;
    border: 0.5px solid #5BC0BE;
    display: flex; /* enable flexbox */
    align-items: center; /* center vertically */
    justify-content: center; /* center horizontally */
    margin-left: 16px; /* space between icon and text */
}

.icon-box img {
    width: 24px;
    height: 24px;
    opacity: 1;
}

.logo-text {
   
    font-weight: 500;
    font-size: 16px;
    line-height: 40px;
    text-align: right;
    vertical-align: middle;
    text-transform: uppercase;
    color: #4B5563;
}

.private-badge {
    width: 248px;
    height: 32px;
    opacity: 1;
    border-radius: 24px;
    border: 1px solid #5BC0BE;
    background: #5BC0BE14;
   
    font-weight: 700;
    font-size: 12px;
    leading-trim: NONE;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    color: #055160;
}

.text-main {
    color: #5BC0BE;
}

.second-head {
   
    font-weight: 700;
    font-size: 32px;
    line-height: 60px;
    text-align: right;
    vertical-align: middle;
    text-transform: uppercase;
    color: #212529;

}

.second-head span {
   
    font-weight: 700;
    font-size: 32px;
    line-height: 60px;
    text-align: right;
    vertical-align: middle;
    text-transform: uppercase;
    color: #5BC0BE;

}

.login-description {
   
    font-weight: 500;
    font-size: 16px;
    line-height: 40px;
    letter-spacing: 0%;
    text-align: justify;
    vertical-align: middle;
    text-transform: uppercase;
    color: #4B5563;
}

.icon-box-title {
   
    font-weight: 700;
    font-size: 16px;
    line-height: 32px;
    text-align: right;
    vertical-align: middle;
    text-transform: uppercase;
    color: #000000;
}

.icon-box-desc {
   
    font-weight: 500;
    font-size: 12px;
    line-height: 32px;
    text-align: right;
    vertical-align: middle;
    text-transform: uppercase;
    color: #4B5563;

}

.return-btn {
    text-decoration: none;
   
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    text-transform: uppercase;
    color: #999999;
}

.return-btn:hover {
    color: #1C2541;
}


.login-title {
   
    font-weight: 700;
    font-size: 24px;
    line-height: 40px;
    text-align: right;
    vertical-align: middle;
    text-transform: uppercase;
    color: #000000;
}

.login-desc {
   
    font-weight: 500;
    font-size: 16px;
    line-height: 40px;
    text-align: right;
    vertical-align: middle;
    text-transform: uppercase;
    color: #4B5563;
}

.login-form-label {
   
    font-weight: 500;
    font-size: 16px;
    line-height: 40px;
    text-align: right;
    vertical-align: middle;
    text-transform: uppercase;
    color: #000000;

}

#login_form input {
    opacity: 1;
    border-radius: 8px;
    border: 0.5px solid #D9D9D9;

}

#login_form input::placeholder {
   
    font-weight: 500;
    font-size: 12px;
    line-height: 40px;
    text-align: right;
    vertical-align: middle;
    text-transform: uppercase;
    color: #B3B3B3;
}

#togglePassword {
    color: #B3B3B3;
}

#togglePassword:hover {
    color: #1C2541;
}

.log-btn {
    width: 476px;
    height: 48px;
    opacity: 1;
    gap: 10px;
    border-radius: 8px;
    padding: 8px 52px;
    background: #5BC0BE;
    box-shadow: 0px 2px 2px 0px #B1B1B11A;
    color: #fff;
}

.log-btn:hover {
    background: #1C2541;
    color: #fff;
}

.security-hint {
    width: 476px;
    height: 48px;
    opacity: 1;
    display: flex; /* enable flexbox */
    align-items: center; /* vertically center text and image */
    justify-content: center; /* horizontally center content */
    gap: 10px; /* space between icon and text */
    border-radius: 8px;
    padding: 8px 16px; /* adjust padding as needed */
    background: #5BC0BE0A;
    border: 0.5px solid #5BC0BE;
    font-family: Tajawal, sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    text-transform: uppercase;
    color: #555B6D;
}

.validation-text {
    font-size: 12px;
}