@font-face {
    font-family: "Tajawal-Medium";
    src: url("../fonts/Tajawal/Tajawal-Medium.ttf");
}

@font-face {
    font-family: "Tajawal-Bold";
    src: url("../fonts/Tajawal/alfont_com_Tajawal-Bold.ttf");
}

@font-face {
    font-family: "Tajawal-ExtraBold";
    src: url("../fonts/Tajawal/alfont_com_Tajawal-ExtraBold.ttf");
}

@font-face {
    font-family: "digital-regular";
    src: url("../fonts/digital/digital-7.ttf");
}

@font-face {
    font-family: "digital-mono";
    src: url("../fonts/digital/digital-7 (mono).ttf");
}

body {
    font-family: "Tajawal-Medium", sans-serif !important;
}


/* General */
.font-family-medium {
    font-family: "Tajawal-Medium", sans-serif !important;
}

.font-family-bold {
    font-weight: 900 !important;
    font-family: "Tajawal-Bold", sans-serif !important;
}

.font-family-ExtraBold {
    font-weight: 900 !important;
    font-family: "Tajawal-ExtraBold", sans-serif !important;
}

.font-family-digital-regular {
    font-family: "digital-regular", sans-serif !important;
}

.font-family-digital-mono {
    font-family: "digital-mono", sans-serif !important;
}

.form-select {
    background-image: url('../images/site/arrow-down.svg') !important;
}

.form-check-input:checked[type=checkbox] {
    background-image: url('../images/site/check.svg') !important;
}

.form-group {
    margin-bottom: 1rem;
}

.max-h-50vh {
    max-height: 50vh;
}

.h-700 {
    height: 700px !important;
}

@media (max-width: 499px) {
    .h-700 {
        height: 500px !important;
    }
}

.h-200 {
    height: 200px !important;
}



.border-solid {
    border-style: solid !important;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}




.out-line-0 {
    outline: none !important;
}

.dir-rtl {
    direction: rtl !important;
}

.bg-none {
    background: none !important;
}

.btn-delete-site {
    padding: 1px 6px !important;
    margin-right: 10px;
}

.circle-image-menu {
    border-radius: 50%;
    overflow: hidden;
    width: 50px;
    height: 50px;
    border: 3px solid #9870b6;
}

.group-name {
    position: absolute;
    right: 91px;
    top: 60px;
    font-size: 13px;
    font-weight: 600;
    color: gray;
    opacity: 0.7;
}

table thead th {
    text-align: right !important;
}

#example_filter {
    text-align: left;
}

@media (max-width: 768px) {
    #example_filter {
        text-align: center;
    }
}


@media (min-width: 769px) {
    .body-vh-100 {
        min-height: 100vh !important
    }
}

#example_filter .form-control-sm {
    padding: 0.5rem 2.5rem !important;
    font-size: 1rem !important;
    border-radius: .4rem !important;
}


.w-fit-content {
    width: fit-content !important;
}

.select2-dropdown {
    z-index: 1071 !important;
}

@media (max-width: 499px) {
    .overflow-remodal::-webkit-scrollbar {
        width: 3px !important;
        border-radius: 5px
    }
}

.scroll-site::-webkit-scrollbar {
    height: 0;
    width: 7px;
    background: rgb(1,1,1,0.1);
}

.scroll-site::-webkit-scrollbar-thumb {
    background: rgb(1,1,1,0.2);
}

    .scroll-site::-webkit-scrollbar-thumb:hover {
        background: rgb(1, 1, 1, 0.3);
    }

.right-0 {
    right: 0 !important;
}

.certificate {
    position: absolute;
    left: 2%;
    bottom: 27%;
}

    .certificate img {
        width: 85px;
    }

.certificate-signin {
    position: fixed;
    left: 2%;
    bottom: 2%;
}

    .certificate-signin img {
        width: 135px;
    }

.logo-text-second {
    position: absolute;
    bottom: -27px;
    right: 79px;
}

.footer {
    height: auto !important;
}

@media (max-width: 675px) {
    .certificate {
        position: relative;
        text-align: center
    }
}

.td-accepted {
    box-shadow: inset 15px 0 0 #00bf4f !important;
}

.td-un-accept {
    box-shadow: inset 15px 0 0 #ce0e0e !important;
}

.td-accepted-rtl {
    box-shadow: inset -15px 0 0 #00bf4f !important;
}

.td-un-accept-rtl {
    box-shadow: inset -15px 0 0 #ce0e0e !important;
}

.card-pag {
    position: relative;
    height: 16.5cm;
    width: 8cm;
    background-image: url(../images/site/bg-baj.png);
    display: none;
}

.qr-img {
    position: absolute;
    left: 68px;
    top: 30px;
    border-radius: 15px;
    border: solid 3px #c3c3c3;
}

.student {
    position: absolute;
    bottom: 15px;
    left: 20px;
    right: 20px;
}

.student-content {
    background: white;
    border-radius: 12px;
    padding: 6px;
    border: 1px solid #c3c3c3;
}


.select2-dropdown {
    z-index: 1071 !important;
    direction: rtl;
}

@media (min-width: 576px) {
    .font-size-lg-17-site {
        font-size: 17px !important;
    }
}

@media (max-width: 576px) {
    .font-size-sm-17 {
        font-size: 13px !important;
    }
}

@media (min-width: 576px) {
    .font-size-lg-site-20 {
        font-size: 20px !important;
    }
}

@media (max-width: 576px) {
    .font-size-sm-site-20 {
        font-size: 14px !important;
    }
}

input.larger-check {
    width: 25px;
    height: 25px;
}

.text-justify {
    text-align: justify !important;
}


/* Exam Page */
.rounded-site-1 {
    border-radius: 19px !important;
}

.rounded-site-2 {
    border-radius: 9px !important;
}

.rounded-site-3 {
    border-radius: 28px !important;
}

.rounded-site-4 {
    border-radius: 12px !important;
}

.bg-exam-area {
    background: #F6F6F6 !important;
}

.bg-question-area {
    background: #f5f5f5 !important;
}

.bg-option-area {
    background: #e4e4e4 !important;
}

.left-15 {
    left: 15px;
}

.left-40 {
    left: 40px;
}

.top-4 {
    top: 4px;
}

.right-15 {
    right: 15px;
}

.input-options {
    position: absolute !important;
    top: 19px;
    width: 16px;
    height: 16px;
}

.i-next {
    font-size: 31px;
    position: absolute !important;
    left: -1px;
    top: 0;
}

.btn-next {
    position: relative !important;
    border-left: 0 !important;
}

.i-previous {
    font-size: 31px;
    position: absolute !important;
    right: -1px;
    top: 0;
}

.btn-previous {
    position: relative !important;
    border-right: 0 !important;
}

.w-btn-pagination {
    width: 110px;
}

.text-answer {
    height: 170px;
}

.w-40px {
    width: 40px;
}

.div-pagination-exam {
    width: 100% !important;
    height: 300px;
    overflow-y: auto;
}

.digital-clock {
    display: flex;
    justify-content: right;
    align-items: center;
    font-size: 70px;
}

@media (max-width: 1200px) {
    .digital-clock {
        font-size: 50px !important;
    }
}

.digital-clock span {
    border-radius: 5px;
    margin: 0 5px;
}

.clock-success {
    color: #008d17;
}

.clock-red {
    color: #c20000;
}

.btn-purple-disabled {
    color: #fff;
    background-color: #7c91c5 !important;
    border-color: #768ecb !important;
    cursor: default !important;
    color: #fff !important;
}

.text-muted-site {
    color: #6C6C6C;
}

.min-vh-85 {
    min-height: 85vh !important;
}

.min-vh-94 {
    min-height: 94vh !important;
}


.backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black */
    z-index: 9999; /* ensure the backdrop appears above other elements */
    display: flex; /* initially hide the backdrop */
}

.spinner-overlay {
    display: flex;
    -o-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
    -ms-align-items: center;
    -o-align-items: center;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.cursor-copy {
    cursor: copy;
}


/* Style Menu */


#menu {
    overflow: hidden;
    width: 100%;
    min-height: 92vh
}

.logo-resto {
    width: 50px;
    height: 50px;
    -webkit-object-fit: cover;
    object-fit: cover;
    -webkit-object-position: center center;
    object-position: center center;
}

.category-container {
    margin-top: 82px;
}

@media (min-width: 1500px) {
    .container-item {
        width: 1500px !important
    }
}

.swiper-image {
    width: 155px;
    height: 155px;
    -webkit-object-fit: cover;
    object-fit: cover;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    -ms-border-radius: 6px;
    border-radius: 6px;
}

@media (max-width: 780px) {
    .swiper-image {
        width: 150px !important;
        height: 150px !important;
    }
}

@media (max-width: 499px) {
    .swiper-image {
        width: 100px !important;
        height: 100px !important;
    }
}

.swiper-slide {
    display: flex;
    -o-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
    -ms-align-items: center;
    -o-align-items: center;
    -webkit-align-items: center;
    align-items: center;
    -ms-transition: 0.2s all;
    -o-transition: 0.2s all;
    -webkit-transition: 0.2s all;
    transition: 0.2s all;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
}

.slide-content {
    text-align: center;
}

.box-shadow-category {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.swiper-slide:hover, .swiper-slide:focus, .swiper-slide:active {
    -ms-transform: scale(1.07);
    -webkit-transform: scale(1.07);
    transform: scale(1.07);
    -ms-transition: 0.2s all;
    -o-transition: 0.2s all;
    -webkit-transition: 0.2s all;
    transition: 0.2s all;
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    filter: grayscale(0);
}

.filter-none {
    -ms-transition: 0.2s all;
    -o-transition: 0.2s all;
    -webkit-transition: 0.2s all;
    transition: 0.2s all;
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    filter: grayscale(0);
}

.bg-item-section {
    background: #F8F8F8;
}

.div-img-item {
    border: 1px solid rgba(3, 12, 84, 0.26);
    box-shadow: 0 4px 24px rgba(3, 12, 84, 0.1), 0 0 6px rgba(0, 0, 0, 0.12);
    -ms-border-radius: 10px;
    border-radius: 10px;
    min-width: 160px;
    width: 160px;
    min-height: 110px;
    height: 110px;
}




.img-item {
    width: 100%;
    height: 100%;
    -webkit-object-fit: cover;
    object-fit: cover;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

.box-shadow-none {
    -webkit-box-shadow: 0 0 0 !important;
    box-shadow: 0 0 0 !important;
}

.box-information-item {
    position: relative;
    height: 110px;
    border: 1px solid rgba(3, 12, 84, 0.23);
    box-shadow: 0 4px 24px rgba(3, 12, 84, 0.1), 0 0 4px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.desc-item {
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: justify;
    font-size: 13px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #757575;
}

.box-information-item span {
    color: #757575;
    position: absolute;
    left: 8px;
    bottom: 5px;
}


.title-item {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    height: fit-content;
    font-size: 20px;
}

@media (max-width: 550px) {
    .div-img-item {
        min-width: 110px;
        width: 110px;
        min-height: 110px;
        height: 110px;
    }

    .box-information-item {
        height: 110px !important;
    }

    .desc-item {
        font-size: 14px !important;
        line-height: 17px;
    }

    .title-item {
        font-size: 17px !important;
    }
}

@media (max-width: 499px) {
    .title-item {
        font-size: 16px !important;
    }
}


.swiper-pagination-bullet {
    padding: 3px;
    margin: 3px;
}


.filter-invert {
    filter: invert(1);
}


.overflow-x-scroll {
    overflow-x: scroll !important
}

.h-50px {
    height: 50px !important
}

/* Custom scrollbar styles */
.scrollable-pagination::-webkit-scrollbar {
    width: 5px;
    height: 10px;
}

.scrollable-pagination::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
}

.scrollable-pagination::-webkit-scrollbar-thumb {
    background: #c3c3c3;
    border-radius: 5px;
}

    .scrollable-pagination::-webkit-scrollbar-thumb:hover {
        background: #808080;
    }