@font-face {
    font-family: 'cairo-semibold';
    src: url('../fonts/Cairo-VariableFont_slnt,wght.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

html, body, ::placeholder, span, h1, h2, h3, h4, header, thead, div, label, input, svg, li, ul, p, tr, a, button, tbody, input
{
    font-family: 'cairo-semibold';
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

.backgroundWhite {
    background-color: white;
    padding: 30px;
}

#sidenav-main.bg-white {
    background-color: #f2f2f2 !important; /* Set the desired background color */
}

#navbar.navbar-collapse {
    flex-grow: 0;
}

.pagination {
    --bs-pagination-color: #1990ce;
    --bs-pagination-hover-color: #1990ce;
    --bs-pagination-focus-color: #1990ce;
    --bs-pagination-active-bg: #1990ce;
    --bs-pagination-active-border-color: #1990ce;
}

.text-sidebar {
    color: #636466 !important
}

.logo {
    width: 40%;
    height: 40%;
    margin-left: 25%;
    margin-right: 30%;
}

#sidenav-main {
    background-color: #f2f2f2 !important;
    box-shadow: 0 4px 3px -1px #636466, 0 2px 4px -1px rgba(0,0,0,.06) !important;
}

.table-head {
    background-color: #1990ce !important;
    color: white !important;
}

.accordion-button {
    font-size: 17px !important;
    font-weight: bold !important;
    color: #0a1a29 !important;
}

.accordion-button .nav-link.active {
    color: #1990ce !important;
}

.card-header {
    background-color: #f1f1f4;
}

.card-header .icon-shape {
    background-color: #1990ce;
}

.card-header .text-end {
    color: #0a1a29 !important;
} 
.card-header .text-center {
    color: #0a1a29 !important;
}

.card-header h3 {
    color: #1990ce !important;
}

.dropmenu-custom {
    position: relative;
    border: 2px solid #adb5bd !important;
    border-radius: 5px;
    padding: 12.5px;
    width: 100%;
    color: #7b809a
}

.dropmenu-custom option {
    color: #7b809a
}


.textbox-border {
    border: 2px solid #adb5bd !important;
}

@media (min-width: 500px) {
    .dropmenu-custom {
        margin-bottom: 10px !important
    }
}

.export-excel-button {
    font-size: 25px !important;
    width: 15px !important;
}
.card-header h3{
    color:#1990ce !important;
}

.localization-btn {
    margin-left: 20px;
}

.login-card {
    height: 70vh;
}

.login-card .card-header {
    font-size: 25px;
}

#loginForm .form-control,
#registerform .form-control,
#resetPasswordForm .form-control,
#searchCandForm .form-control,
#startexamform .form-control,
#reportform .form-control,
#addnewroleForm .form-control,
#usersettingsform .form-control,
#editUserSettingsForm .form-control{
    border: 2px solid #adb5bd;
}

.toast-btn {
    color: black;
}

.register-card .card-header {
    font-size: 25px;
    padding: 0.75rem !important
}

#registerform .card-footer {
    padding: 0 !important;
}

#registerform .card-footer .form-btns {
    width:60%;
}

.resetpassword-card {
    height: 70vh;
}

.resetpassword-card .card-header,
.viewProfile-Card .card-header
{
    font-size: 25px;
}

.viewProfile-Card {
    width: 900px;
}

.search-btn {
    width: 20%;
}

.pg-header {
    font-family: 'cairo-semibold';
}

.checklst {
    display: inline;
    min-width: 50px
}

.copyright {
    width: fit-content;
}

.account-icon {
    cursor: pointer;
    padding-right: 5px;
    padding-left: 5px;
}

.expand-icon {
    color: #0a1a29;
    font-size: 22px;
}

.nav-link {
    color: #1990ce !important;
}

.sidebar-item-icon {
    color: #1990ce !important;
}

.logout-btn {
    background-color: #1990ce;
}

.addnewrole {
    height: 100%;
}

.addnewrole-body {
    display: contents;
}

.edit-icon {
    color: #636466;
}

.editprivilagecard .card-header {
    font-size: 25px;
    padding: 0.75rem !important;
}

#editRolesform .card-body {
    padding: 0 !important;
    padding-top: 26px !important;
}

#editRolesform .card-footer {
    padding: 0 !important;
}

#registerform .form-btns,
#resetPasswordForm .form-btns,
#editUserSettingsForm .form-btns{
    width: 40%;
}

@media only screen and (max-width: 767px) {
    .card {
        width: 80%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .card {
        width: 70%;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1439px) {
    .card {
        width: 55%;
    }
}

@media only screen and (min-width: 1440px) {
    .card {
        width: 40%;
    }
    .home-card{
        width:auto !important;
    }
}

.password-container {
    position: relative;
}

.password-hint {
    display: none;
    margin-top: 5px;
    color: #86b5e0;
    font-size: 16px;
}

.ltr.info-icon {
    position: absolute;
    top: 67%;
    left: 19px;
    transform: translateX(-100%) translateY(-50%);
    cursor: pointer;
    font-size: 16px;
    color: #86b5e0;
}

.rtl .info-icon {
    position: absolute;
    top: 87%;
    right: -3%;
    cursor: pointer;
    font-size: 16px;
    color: #86b5e0;
    transform: translateX(-100%) translateY(-50%);
}

.button {
    --main-focus: #2d8cf0;
    --font-color: #344767;
    --bg-color-sub: #dedede;
    --bg-color: #eee;
    --main-color: #1990CE;
    position: relative;
    width: 150px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    border: 2px solid var(--main-color);
    box-shadow: 2px 2px var(--main-color);
    background-color: var(--bg-color);
    border-radius: 10px;
    overflow: hidden;
    direction: initial;
    color: #344767;
}

.button, .button__icon, .button__text {
    transition: all 0.3s;
}

.button .button__text {
    transform: translateX(22px);
    color: var(--font-color);
    font-weight: 600;
}

.button .button__icon {
    position: absolute;
    transform: translateX(109px);
    height: 100%;
    width: 39px;
    background-color: var(--bg-color-sub);
    display: flex;
    align-items: center;
    justify-content: center;
}

.button:hover {
    background: var(--bg-color);
}

.button:hover .button__text {
    color: transparent;
}

.button:hover .button__icon {
    width: 148px;
    transform: translateX(0);
}

.button:active {
    transform: translate(3px, 3px);
    box-shadow: 0px 0px var(--main-color);
}

.buttonDownload {
    display: inline-block;
    position: relative;
    padding: 10px 25px;
    background-color: #4CC713;
    color: white;
    font-family: sans-serif;
    text-decoration: none;
    font-size: 0.9em;
    text-align: center;
    text-indent: 15px;
    border: none;
    direction: initial;
}

.buttonDownload:hover {
    background-color: #45a21a;
    color: white;
}

.buttonDownload:before, .buttonDownload:after {
    content: ' ';
    display: block;
    position: absolute;
    left: 15px;
    top: 52%;
}

.buttonDownload:before {
    width: 10px;
    height: 2px;
    border-style: solid;
    border-width: 0 2px 2px;
}

.buttonDownload:after {
    width: 0;
    height: 0;
    margin-left: 1px;
    margin-top: -7px;
    border-style: solid;
    border-width: 4px 4px 0 4px;
    border-color: transparent;
    border-top-color: inherit;
    animation: downloadArrow 1s linear infinite;
    animation-play-state: paused;
}

.buttonDownload:hover:before {
    border-color: #cdefbd;
}

.buttonDownload:hover:after {
    border-top-color: #cdefbd;
    animation-play-state: running;
}

@keyframes downloadArrow {
    0% {
        margin-top: -7px;
        opacity: 1;
    }

    0.001% {
        margin-top: -15px;
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }

    100% {
        margin-top: 0;
        opacity: 0.4;
    }
}

.switch {
    padding-top: 0.5rem;
    padding-bottom: 0.3rem;
    margin-left: -24px;
    margin-right: -22px;
}

#canvas, #captureBtn, #closeCameraBtn { display: none; }

.big-checkbox {
    transform: scale(1.5);
}

.form-switch .form-check-input:checked {
    background-color: #339966 !important;
}

/* OPENING END - SELECT2 SEARCHABLE DROPDOWNS STYLES */

.select2-container--default .select2-selection--single {
    height: 58px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #3f51b5;
    box-shadow: 0 0 8px rgba(63, 81, 181, 0.3);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 58px;
    padding-left: 12px;
    color: #212121;
    font-size: 16px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #757575;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 58px;
    width: 40px;
    right: 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #757575 transparent transparent transparent;
    transition: border-color 0.3s ease;
}

.select2-container--default.select2-container--focus .select2-selection__arrow b {
    border-color: #3f51b5 transparent transparent transparent;
}

.select2-container--default .select2-results__option {
    padding: 12px 16px;
    font-size: 16px;
    color: #212121;
}

.select2-container--default .select2-results__option--highlighted {
    background-color: #e8eaf6;
    color: #212121;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #7E8BE9;
}

.select2-dropdown {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    background-color: #fff;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 16px;
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: #3f51b5;
}

/* CLOSING END - SELECT2 SEARCHABLE DROPDOWNS STYLES */