/* @import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');

* {
    font-family: "Almarai", sans-serif !important;

} */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');
* {
    font-family: "Tajawal", sans-serif !important;
}
:root {
    --primary-color: #006A86;
    --primary-color-dark: #006A86;
    --text-color: #212529FF;
    --white-color: #FFFFFF;
}
.form-label {
    font-weight: 500;
}
a {
    text-decoration: none;
    font-weight: 500 !important;
}

i {
    font-family: "Font Awesome 5 Free" !important
}

p {
    margin: 0;
}

ul {
    padding: 0;
    margin: 0;
}

.form-control:active, .form-control:focus {
    outline: none !important;
    box-shadow: none !important;
}

a:hover {
    text-decoration: none;

}

ul li {
    list-style-type: none;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #FFF;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #006A86 !important;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #006A86 !important
}

.main-container {
    min-height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.sidebar-wrapper {
    width: 270px;
    position: fixed;
    top: 0;
    right: 0;
    transition: .600s;
    min-height: 100vh;
    touch-action: none;
    user-select: none;
    padding: 0;
    z-index: 999;
    -webkit-user-drag: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#content {
    position: relative;
    width: 50%;
    flex-grow: 8;
    background-color: var(--primary-light);
    margin-right: 270px;
    transition: .600s;
}

.sidebar {
    width: 100%;
    background: var(--primary-color);
    height: auto;
    border-radius: 20px;
    background: var(--white-color);
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    padding: 15px 0px;
}

.sidebar .user {
    display: flex;
    align-items: center;
    padding-bottom: 15px;
    margin-bottom: 20px;
    justify-content: center;
    border-bottom: 1px solid #F4F7FE;

}

.sidebar .user img {
    margin-left: 0;
    border-radius: 4px;
    height: 60px;
}

.sidebar .user p {
    color: #10508D;
    font-size: 11pt;
}

.sidebar__title {
    color: #10508D;
    font-size: 8pt;
    font-weight: 500;
    margin-bottom: 7px;
    padding: 0px 13px;
}

.sidebar__list {
    padding: 0px 20px;
}

.sidebar__list li {
    position: relative;
}

.sidebar__list li a {
    color: white;
    font-size: 13.7px;
    display: block;
    margin-bottom: 0px;

    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 12px 13px;
    padding-left: 9px;
    border-radius: 8px;
    transition: .600s;
    position: relative;
    z-index: 1;
}

.sidebar__list li a svg {
    width: 23px;
    height: revert;
    margin-left: 5px;
}

.menu_active__image {
    position: absolute;
    top: -24px;
    height: 100%;
    left: -15px;
    width: 105%;
    height: auto;
    opacity: 0;
}

.sidebar__list li a i {
    margin-left: 0px;
    width: auto;
    text-align: center;
    font-size: 13pt;
    width: 23px;
}
.dropdown-item i {
    width: 18px;
    margin: 0;
    text-align: center;
}
.dropdown-item svg {
    /* width: 20px; */
}
.dropdown li a {
    display: flex
;
    align-items: center;
    gap: 5px;
}
.dropdown li a:active, .dropdown li a:focus {
    color: #1e2125;
    background-color: #e9ecef;
}
.text-primary {
    color: #006A86 !important;
}
.dropdown__wrapper {
    padding-right: 40px;
    display: none;
}

.dropdown {
    /* border-right: 3px solid #F6F6F6; */
    padding-right: 0px;
}

.dropdown li a {
    font-size: 14px;
    width: 100%;
    padding: 7px 13px;
}

.dropdown li {
    display: flex;
    align-items: center;
}

.dropdown__toggle {
    margin-right: auto;
    font-size: 9.5pt;
}

.sidebar__list li a:hover {
    /* background: #F6F6F6;
    color: #3182CE; */
}

.sidebar__list li.active a {
    color: var(--primary-color);
    /* background: white; */
}

.sidebar__list li.active .menu_active__image {
    opacity: 1;
}

.sidebar__list li.active a svg, .sidebar__list li.active a svg path {
    /* fill: var(--primary-color); */
}

.sidebar__list li.active a svg {

    padding: 4px;

}

.sidebar__list li .dropdown li a {
    color: white;
}

.sidebar__logout {
    display: block;
    padding: 15px;
    font-size: 14px;
    color: white;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 15px;
    margin-top: 10px;
    border-top: 1px solid rgba(173, 174, 181, 0.22);
}

.sidebar__logout:hover {
    color: white;
}

.content__top {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    background: var(--primary-color);
    border-radius: 17px;
    padding: 15px 25px;
}

.content__top_title p {
    color: white;
    font-size: 9pt;
    margin-bottom: 5px;
}

.content__top_title h2 {
    font-weight: 600;
    color: white;
    font-size: 10pt;
}

.content__top_left {
    margin-right: auto;
}

.content__top_left ul {
    display: flex;
    align-items: center;
    gap: 15px;
}

.content__top_left ul li a {
    color: white;
    font-size: 10pt;
}

.search__input {
    position: relative;
}

.search__input svg.search-ic {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #2D3748;
    width: 17px;
    z-index: 9;
}

.search__input input.form-control {
    width: auto;
    padding: 10px 30px;
    padding-right: 40px;
    height: auto !important;
    color: #A0AEC0;
    font-size: 10pt;
    border-radius: 8px;
    border: none;
    font-weight: 400;
    color: #4386C8;
    border-radius: 30px;
    font-weight: 600;
}

.search__input input.form-control::placeholder {
    color: #4386C8;

}

.stat__item {
    width: 100%;
    padding: 10px;
    background: white;
    border-radius: 12px;
    display: flex;
    align-items: stretch;
    gap: 15px;
    margin-bottom: 7px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

}

.stat__item .stat__icon {
    background: #3182CE;
    border-radius: 6px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 5px;
}

.stat__item .stat__icon i {
    color: white;
    font-size: 26pt;
}

.stat__item .stat__content {
    flex: 3;
    padding: 10px 0px;
}

.stat__item .stat__content p {
    font-weight: bold;
    color: #2D3748;
    margin-bottom: 11px;
    font-size: 10pt;
}

.stat__item .stat__content h3 {
    color: #A0AEC0;
    font-weight: bold;
    font-size: 16pt;
    margin: 0;

}

.card {
    box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
    border-radius: 12px;
    border: none;
}

.card .card-body {
    box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
    border-radius: 12px;
    border: 1px solid #E2E8F0;
}

.card .card-header {
    background: white;
    color: #030229;
    font-weight: 600;
    border-radius: 12px;
    border: none;
    font-size: 14pt;
    display: flex;
    align-items: center;
    padding: 20px;
    gap: 10px;
}

.card .card-header i {
    color: #10508D;
}

.mt-20 {
    margin-top: 20px;
}

.table thead {
    background: #226BB2;
}

.table thead tr td {
    color: white;
    text-align: center;
}

.table tbody tr td {
    color: #718096;
    text-align: center;
    vertical-align: middle;
}

.content__top_left ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.content__top_left ul li a svg {
    width: 24px;
    height: auto;
}

.header__user_profile {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header__user_profile img {
    height: 32px;
}

.header__user_profile h3 {
    font-size: 13px;
    margin: 0;
    color: white;
    font-weight: bold;
    margin-bottom: 1px;
}

.header__user_profile p {
    font-size: 11px;
    color: white;
    margin: 0;
    font-weight: bold;
}

.slider_stat_item {
    display: flex;
    align-items: center;
    width: 350px;
    border: 1px solid rgba(34, 107, 178, 0.22);
    border-radius: 22px;
    padding: 10px 0px;
    margin: 5px 0px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.slider_stat_item__column {
    flex: 1;
    padding: 10px 25px;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
}

.column-border {
    border-left: 1px solid rgba(40, 120, 132, 0.22);
}

.slider_stat_item__column_title {
    display: flex;
    align-items: center;
    gap: 13px;
}

.slider_stat_item__column_title h3 {
    margin: 0;
    font-weight: bold;
    font-size: 21px;
}

.slider_stat_item__column_title svg {
    width: 26px;
    height: auto;
}

.slider_stat_item__column p {
    font-size: 14px;
}

.slider_stat_item__column span {
    position: absolute;
    font-weight: bold;
    color: #FF4B55;
    top: 14px;
    font-weight: bold;
    font-size: 12pt;
    direction: ltr;
}

.FF4B55 span {
    color: #FF4B55;
}

.FFAE3E span {
    color: #FFAE3E;
}

.blue span {
    color: #3694D8;
}

.FFAE3E .slider_stat_item__column_title svg path {

}

.section__title {
    color: #06263D;
    font-size: 19px;
    margin-bottom: 15px;
    font-weight: bold;
}

.bg-gradient {
    background: rgb(255, 255, 255);
    background: linear-gradient(300deg, rgba(255, 255, 255, 1) 0%, rgba(224, 239, 254, 1) 100%);
}

.select-period, select.select-period:active, select.select-period:focus {
    display: inline-block;
    width: fit-content;
    border: 1px solid #DFDEED !important;
    color: #04085E;
    font-size: 10pt;
    height: auto;
    font-weight: 500;
    border-radius: 9px;
}

.section__title {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.section__title select {
    margin-right: auto;
}

.table thead tr td:first-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.table thead tr td:last-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.table tbody tr td:first-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.table tbody tr td:last-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.table thead tr td {
    font-weight: bold;
    font-size: 13px;
}

.table td, .table th {
    padding: .95rem .90rem;
}

/* #E4EDF6, #F2F5FA */
.table tbody tr {
    background: #E4EDF6;
}

.table tbody tr:nth-child(odd) {
    background: #F2F5FA;
}

.table tbody tr td {
    color: #061C31;
    font-weight: 400;
    font-size: 14px;
}

.table {
    border-collapse: separate;
    margin: 0;
    white-space: nowrap;
    border-spacing: 0 15px; /* Adds 10px vertical space between rows */
}

.table__scroll {
    overflow-x: auto;
    width: 100%;
}

.table__scroll::-webkit-scrollbar {
    height: 8px;
}

.table__scroll::-webkit-scrollbar-thumb {
    border-radius: 15px;
}

.sidebar__toggler {
    display: none;
    cursor: pointer;
}

.sidebar__toggler i {
    color: white;
    font-size: 15pt;
}

.card {
    margin-bottom: 20px;
}

.table-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
}

.table-actions svg {
    height: 18px;
    width: auto;
}

.page__title {
    margin-top: 0;
    margin-bottom: 20px;
}

.table__image {
    width: 50px;
    border-radius: 4px;
}

td .badge-success {
    background: rgba(20, 161, 42, 0.21);
    color: #14A12A;
}

.badge {
    font-size: 14px;
    font-weight: 400;
    padding: 6px 18px;
    border-radius: 10px;
}

.large-svg svg {
    height: 22px;
}

.content_left__actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    justify-content: center;
    width: 120px;
    padding: 50px 20px;
    padding-left: 0;
}

.content_left__actions a {
    border: 1px solid #CEDEEE;
    color: #0B2947;
    font-weight: bold;
    padding: 15px 10px;
    background: white;
    border-radius: 12px;
    text-align: center;
    display: block;
    width: 100%;
    font-size: 11pt;
    line-height: 1.2;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.content__with_left_actions {
    display: flex;
    align-items: flex-start
}

.filter {
    width: 100%;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid #F1F1F4;
    display: flex;
    align-items: center;
    margin-bottom: 15px
}

.filter .filter_group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.filter__right {
    margin-left: auto;
}

.filter .filter_group .filter_group__item {
    height: 100%;
}

.filter .filter_group .filter_group__item .form-control {
    border: 1px solid #DFDEED !important;
    padding: 8px 17px;
    padding-left: 40px;
    height: auto;
    border-radius: 22px;
    color: #103050;
    font-size: 11pt;
    min-width: 135px;
}

.filter_group__item svg {
    height: 25px;
    width: auto;
    position: relative;
    top: 2px;
}

.filter select {
    background-image: url('../images/icons/select.svg') !important;
    background-repeat: no-repeat !important;
    -webkit-appearance: none;
    background-position-x: 12px;
    background-position-y: 51%;
}

.filter__left {
    margin-right: auto;
}

.outer__content {
    overflow-x: auto;
    width: 100%;
}

.btn {
    border: 1px solid #DFDEED !important;
    padding: 7px 20px;
    height: auto;
    border-radius: 12px;

    font-size: 11pt;


}

.btn-primary {
    background: white;
    color: #103050;
}

.btn:hover, .btn:active, .btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    background: white !important;
    color: #103050 !important;
}

.btn i {
    margin-left: 5px;
}

.btn-primary i {
    color: #226BB2;
}

.btn-secondary {
    background: #14A12A;
    color: white;
    font-size: 10pt !important;
    padding: 7px 15px;
    border-radius: 8px;
}

.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus {
    background: #14A12A !important;
    color: white !important;
}

.btn svg {
    height: 16px;
    width: auto;
    margin-left: 5px;
}

select.select-form-rounded {
    border-radius: 12px !important;
    min-width: unset !important;
    padding-left: 25px !important;
}

.form__layout {
    padding: 10px 15px;
}

.form__label {
    font-size: 16px;
    font-weight: bold;
    color: #103050;
    margin-bottom: 30px;
}

.form-group label span {
    color: #DF362F;
}

.form-group label {
    font-size: 14px;
    font-weight: bold;
    padding-right: 4px;
    margin-bottom: 7px;
}

.form-group .form-control {
    background: white;
    border: 1px solid #006A86;
    border-radius: 22px;
    border: none;
    padding: 11px 20px;
    height: auto !important;
    font-size: 14px;
    resize: none;
}

.form-group {
    margin-bottom: 16px;
}

.input__file {
    width: 100%;
    border-radius: 16px;
    border: 3px dashed rgba(16, 48, 80, 0.5);
    padding: 20px;
    height: 120px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
}

.input__file input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 99;
}

.input__file svg {
    height: 65px;
    width: auto;
}

.form-switch label {
    font-size: 15px;
}

.form-switch {
    /* margin-top: 20px; */
    margin-bottom: 16px;
}

.form-group textarea {
    min-height: 110px;
    /* resize: none; */
}

.form__layout_border {
    border-left: 1px solid rgba(16, 48, 80, 0.33);
    padding-left: 50px;
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.form__layout_title {
    font-weight: bold;
    font-size: 17px;
    color: #103050;
    margin-top: 30px;
    margin-bottom: 20px;
}

.form-btn {
    background: #226BB2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 15px 0px;
    color: white;
    border: none;
    padding: 11px 25px;
    border-radius: 12px;
    font-size: 14px;
    gap: 5px;
}

.form-btn svg {
    height: 18px;
    width: auto;
}

.m-0 {
    margin: 0;
}

.form__section_title {
    display: flex;
    align-items: center;
    font-size: 17px;
    font-weight: bold;
    color: #103050;
    gap: 10px;
}

.form__section_title svg {
    height: 22px;
}

td .form-group .form-control {
    /* width: fit-content; */
}

td .form-group {
    text-align: center;
}

td .form-group {
    margin: 0;
}

.form__layout_page_header h4 {
    margin-bottom: 10px;
}

.form__btns {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 10px;
}

.form-btn-green {
    background: #14A12A;
}

.form-btn-default {
    background: #226BB2;
}

.form-btn-danger {
    background: #A40F0F;
}

.form-btn-default:hover, .form-btn-default:active, .form-btn-default:focus {
    background: #226BB2 !important;
}

.ptb-0 {

    padding-top: 0;
    padding-bottom: 0;
}

.btn-close {
    /* background: #226BB2; */
    opacity: 1 !important;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    font-size: 8pt;
    color: white !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-close i {
    opacity: 0.8;
    position: relative;
    top: 0.5px;
}

.modal__filter_form p {
    font-weight: 600;
    font-size: 17px;
    color: #103050;
    margin-bottom: 3px;
}

.modal__filter_form .form-control {
    border: 1px solid rgba(34, 107, 178, 0.22);
    border-radius: 4px;
    margin-bottom: 15px;
}

.modal__filter_form label {
    color: #103050;
    margin-bottom: 7px;
}

.modal-footer {
    border: none;
    padding: 0rem 2rem;
    padding-top: 0;
    padding-bottom: 1.2rem;
    flex-wrap: nowrap;
}

.modal-header {
    padding: 1rem 2rem;
}

.modal-footer .btn {
    display: block;
    width: 100%;
    font-size: 14px !important;
    border-radius: 4px;
    padding: 10px 15px;
    font-weight: bold;
}

.modal-body {
    padding: 1rem 2rem;
}

.modal-dialog {
    max-width: 550px;
}

.gold-color {
    color: #FDC36B;
    margin-left: 5px;
}

.filter__with_label .filter_group__item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.filter__with_label {
    padding-right: 15px;
}

.filter__with_label .filter_group {
    gap: 25px;
}

.filter__with_label .filter_group__item .form-btn {
    margin: 0;
    padding: 8px 20px;
}

.form-control {
    position: relative;
    background-color: #177B8D05;
    padding: 15px 20px;
    border-radius: 12px;
    border-color: #177B8D38;
    background: white;
    border: 1px solid #006A86 !important;
    /* color: var(--primary-color); */
    /* box-shadow: 0 0 7px 0 #0000001F inset; */
    text-align: right;

}

.form-control::placeholder {
    color: #23272E61;
    /* position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%); */
}

.form-control:focus::placeholder {
    color: transparent;
}

.form-control:focus {
    background-color: #177B8D05;
    border-color: #177B8D38;
    box-shadow: 0 0 0 .25rem rgba(48, 115, 127, 0.25);
    background-color: white !important;
    border: 1px solid #006A86 !important;
}

.upload-box {
    border: 2px dashed #177B8D38;
    border-radius: 20px;
    padding: 20px;
    background-color: #177B8D05;
    min-height: 245px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.upload-box button {
    width: max-content;
    margin-inline: auto;
}

.upload-box p {
    color: #8A8A8A;
}

.rounded-half {
    border-radius: 30px;
}

.custom-btn-primary {
    border-color: var(--primary-color-dark);
    background-color: var(--primary-color-dark);
    color: #ffffff !important;
    padding: 10px 20px;
}

.custom-btn-primary i {
    color: #ffffff !important;
}

.custom-btn-primary-light {
    border-color: var(--primary-color-dark) !important;
    background-color: #ffffff;
    color: var(--primary-color-dark) !important;
    padding: 10px 20px;
    border-width: 2px !important;
}

.custom-btn-white {
    border-color: var(--primary-color-dark) !important;
    color: var(--primary-color-dark) !important;
    background-color: #ffffff;
    padding: 10px 20px;
}

.custom-btn-white:focus {
    background-color: #ffffff;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.custom-btn-gray {
    border-color: var(--primary-color-dark) !important;
    color: var(--primary-color-dark) !important;
    background-color: rgba(255, 250, 255, 1);
    padding: 10px 20px;
}

.custom-btn-brown {
    border-color: #8A8A8A !important;
    color: #8A8A8A !important;
    background-color: white !important;
    padding: 10px 20px;
}

.text-color {
    color: var(--text-color) !important;
}

.primary-dark-color {
    color: var(--primary-color-dark) !important;
}

.border-primary-light-color {
    border-color: #177B8D38 !important;
}

.custom-button-width {
    min-width: 120px;
}

.custom-btn-primary:focus,
.custom-btn-white:focus {
    box-shadow: none;
}

.filter .filter-box form button {
    padding-block: 10px;
    min-width: 75px;
}

.filter .filter-box form button.filter-button {
    padding-block: 10px;
    min-width: 75px;
}

.filter .filter-box form.search label {
    position: relative;
}

.filter .filter-box form.search label img {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    z-index: 9;
    height: 20px;
}

.filter .filter-box form.search label input {
    padding-right: 45px;
    padding-block: 10px;
    box-shadow: none;
}

.filter .filter-box form.search label input::placeholder {
    right: 45px;
    color: var(--primary-color-dark);
    font-weight: bold;
}

.filter .filter-box form.search label input:focus::placeholder {
    color: transparent;
}

.pagination {
    justify-content: center;
}

.pagination li {
    margin-inline: 5px;
}

.pagination .page-item .page-link {
    border: 1px solid var(--body-bg-color);
    background-color: inherit;
    color: #8A8A8A;
    font-weight: 600;
}

.pagination .page-item.active .page-link,
.pagination .page-item:hover .page-link {
    color: #006A86;
    border: 1px solid #006A86;
    border-radius: .25rem;
}

.pagination .page-item:first-of-type .page-link,
.pagination .page-item:last-of-type .page-link {
    background-color: #ffffff;
    border: 1px solid #DADCE3;
    border-radius: .25rem;
}

.form-switch .form-check-input {
    width: 45px;
    height: 22px;
    border-color: rgba(112, 101, 240, 20%);
    border-width: 2px;
    /* background-image: url('../images/icons/switch_bullet.svg'); */
    cursor: pointer;
}

.form-check .form-check-input:checked {
    background-color: #177B8D38;
    border-color: rgba(112, 101, 240, 20%);
    border-width: 0;
}

.form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%23C49A6C'/></svg>");
}

.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%23C49A6C'/></svg>");
    box-shadow: none;
    border-color: rgba(112, 101, 240, 20%)
}

.form-switch .form-check-input:focus {

}

td .form-switch {
    margin: 0
}

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

.file-uploader {
    width: 400px;
    max-width: 100%;
    height: 180px;
    border-radius: 14px;
    background: rgba(23, 123, 141, 2%);
    border: 2px dashed rgba(23, 123, 141, 0.22) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

.file-uploader__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.file-uploader__label .btn, .file-uploader__label .btn:hover, .file-uploader__label .btn:active, .file-uploader__label .btn:focus {
    background: #0E4954 !important;
    font-size: 11pt !important;
    padding: 6px 20px;
}

.file-uploader__label svg {
    width: 45px;
    height: auto;
}

.file-uploader input {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.form-btns {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px
}

/* dalia */
.filter_group__item .btn:hover {
    background-color: #177B8D05;
}

.modal-footer button {
    width: auto;
    height: 50px;
    padding-inline: 70px;
    border-radius: 20px;
    /* background-color: #006A86; */
    /* color: #ffffff; */
}

.pages__search {
    position: absolute;
    background: white;
    width: 100%;
    border: 1px solid rgba(23, 123, 141, 0.22) !important;
    padding: 10px;
    border-radius: 6px;
    z-index: 999999;
    display: none;
}

.pages__search li a, .pages__search li a:hover {
    color: #737791;
}

.pages__search li a {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pages__search li {
    padding: 5px 5px;
}

.pages__search li a svg {
    width: 20px;
    height: 20px;
}

.ministry-selector {
    display: none
}
.sidebar__list li a {
    font-weight: 500;
}
.dropdown i {
    color: var(--primary-color)
}
.nav-tabs .nav-link {
    color: var(--primary-color);
    font-weight: 500;
}
.nav-tabs .nav-link.active {
    background-color: var(--primary-color);
    color: white;
}
.file-grid-container {
    background-color: #ffffff;
    border-radius: 12px;
    /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); */
    padding: 0px;
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
}

.file-grid-container h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
    font-weight: 600;
    font-size: 2.2em;
}

.file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 25px;
    justify-content: center;
    align-items: stretch;
}

.file-item {
    background-color: #ffffff;
    border: 1px solid #e0e6ed;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
    overflow: hidden;
}

.file-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.file-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    font-size: 2.5em;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Specific icon colors */
.file-icon.folder { background-color: #ffb100; } /* Yellow */
.file-icon.file-doc { background-color: #2980b9; } /* Blue */
.file-icon.file-pdf { background-color: #e74c3c; } /* Red */
.file-icon.file-img { background-color: #27ae60; } /* Green */
.file-icon.file-zip { background-color: #8e44ad; } /* Purple */
.file-icon.file-code { background-color: #f39c12; } /* Orange */
.file-icon.file-ppt { background-color: #d35400; } /* Dark Orange */
.file-icon.file-audio { background-color: #3498db; } /* Light Blue */


.file-info h3 {
    margin: 0 0 8px;
    
     color: #777;
    font-size: 1.1em;
    
    word-wrap: break-word; /* Allows long file names to wrap */
    overflow: hidden;
    text-overflow: ellipsis; /* Adds "..." for overflowed text */
    white-space: nowrap; /* Prevents text from wrapping initially */
    max-width: 100%; /* Ensures ellipsis works within the item width */
}

.file-info span {
    color: #777;
    font-size: 0.9em;
    color: #333;
    font-weight: 600;
}
.file-actions {
    width: 100%; /* Ensure the button spans the width if needed */
    text-align: center;
    margin-top: 10px; /* Space above the button */
}
.file-actions .btn {
    width: 90px;
}
.file-actions .btn i {
    margin:0
}
.file-info span {
    font-weight: 600;
}
.download-btn {
    display: inline-flex; /* Use flex to align icon and text (if you add text) */
    align-items: center;
    justify-content: center;
    background-color: #007bff; /* Primary blue for download */
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 500;
    transition: background-color 0.2s ease-in-out;
}

.download-btn:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

.download-btn i {
    margin-right: 0; /* No margin if only icon */
    font-size: 1.1em;
}
.form-select {
    appearance: auto;
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .file-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 20px;
    }

    .file-grid-container {
        padding: 25px;
    }

    .file-grid-container h2 {
        font-size: 2em;
        margin-bottom: 25px;
    }

    .file-item {
        padding: 18px;
    }

    .file-icon {
        width: 60px;
        height: 60px;
        font-size: 2.2em;
    }
}

@media (max-width: 480px) {
    .file-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 15px;
    }

    .file-grid-container {
        padding: 20px;
    }

    .file-grid-container h2 {
        font-size: 1.8em;
        margin-bottom: 20px;
    }

    .file-item {
        padding: 15px;
    }

    .file-icon {
        width: 50px;
        height: 50px;
        font-size: 1.8em;
    }

    .file-info h3 {
        font-size: 1em;
    }

    .file-info span {
        font-size: 0.8em;
    }

    .download-btn {
        padding: 7px 10px;
        font-size: 0.8em;
    }
}