@font-face {
    font-family: 'Tajawal';
    src: url('../fonts/Tajawal-Medium.woff2') format('woff2'),
        url('../fonts/Tajawal-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

.form-select,
.form-select:focus {
    background-position: left 0.9375rem center;
}

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

.menu-item [class*=active] {
    font-weight: 600;
}

.datatables_filter {
    float: left;
}

.table {
    border-spacing: 0px !important;
    /*--bs-table-color: black;*/
}

.model_button {
    scale: 0.7;
}

.model_button>button {
    padding: 0.25rem !important;
}

.table> :not(caption)>*>* {
    padding: 0.1rem 0.25rem !important;
}

.datatables_filter input {
    margin-right: 0.3rem;
}

.table-responsive {
    padding-bottom: 1rem;
}

.layout-menu {
    transform: translate3d(100%, 0, 0) !important;

}

@media (min-width: 1200px) {
    .layout-menu {
        transform: translate3d(0, 0, 0) !important;
    }

    .layout-menu-toggle {
        display: none !important;
    }
}

.btn-xsm,
.btn-group-xsm>.btn {
    --bs-btn-padding-y: 0.117rem;
    --bs-btn-padding-x: 0.25rem;
    --bs-icon-size: 1rem !important;
    --bs-btn-border-radius: var(--bs-border-radius-sm);
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}

/* Sticky header styles */
thead {
    height: 35px !important;
    vertical-align: middle !important;
}

th {
    background: var(--mosa-main-color) !important;
}

table.dataTable thead th,
table.dataTable thead td,
table.dataTable tfoot th,
table.dataTable tfoot td {
    text-align: center !important;
}

table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order,
table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order {
    right: 0 !important;
}


table.dataTable>thead>tr>th,
table.dataTable>thead>tr>td {
    padding: 10px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.dtr-details>li {
    text-align: right !important;
}

.rotate-icon {
    transition: transform 0.3s ease;
}

.rotated {
    transform: rotate(180deg);
}

.selected {
    background: RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important;
    transition: all 0.5s ease;
}

.selected i {
    color: white;
}

.unselected {
    background: (in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--bs-primary)) !important;
    transition: all 0.5s ease;
}

:root {
    --mosa-main-color: #c6d4ff;
    --mosa-main-color-dark: #e7e7ff;
    --mosa-second-color: #eee19f;
    --mosa-second-color-dark: #d3b22b;
    --mosa-main-gradient: linear-gradient(135deg, var(--mosa-main-color), var(--mosa-main-color-dark));
    --mosa-second-gradient: linear-gradient(135deg, var(--mosa-second-color), var(--mosa-second-color-dark));
}

.bg-mosa-primary {
    background: var(--mosa-main-gradient);
    color: var(--bs-primary);
    font-weight: 800;
}

.bg-mosa-secondary {
    background: var(--mosa-second-gradient);
    font-weight: 800;
    color: black;
}

.card-header {
    --bs-bg-opacity: 1;
    background: var(--mosa-main-gradient);
    font-weight: 800;
    color: var(--bs-primary);
}

.card-header.secondary {
    background: var(--mosa-second-gradient);
    color: black;
}

.accordion-header {
    background: var(--mosa-second-gradient);
}

.table-light {
    background: var(--mosa-main-color);
    --bs-table-bg: transparent;
}

table.dataTable>tbody>tr.child span.dtr-title {
    font-size: 0.8rem;
}

table.dataTable>tbody>tr.child span.dtr-title::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 3px;
    margin-right: 3px;
    vertical-align: middle;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 6px solid var(--mosa-second-color-dark);
}

table.dataTable>tbody>tr.child ul.dtr-details>li {
    border-bottom: 1px solid #efefef;
    padding: 0.25em 0 !important;

}

table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
    margin-left: 0.5em !important;
    rotate: 180deg;
    transition: rotate cubic-bezier(0.075, 0.82, 0.165, 1) 250ms;
}

table.dataTable.dtr-inline.collapsed>tbody>tr.dtr-expanded>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr.dtr-expanded>th.dtr-control:before {
    transition: rotate cubic-bezier(0.075, 0.82, 0.165, 1) 250ms;
    rotate: 0deg;
}

.accordion {
    --bs-accordion-bg: var(--bs-bg-opacity);
    --bs-accordion-btn-color: black;
}

.accordion-button {
    color: black;
    transition: all 0.25s ease;
    font-size: 12pt;
}

.accordion-button:not(.collapsed) {
    color: black;
    transition: all 0.25s ease;
    font-size: 14pt;
}


form {
    margin-top: 1rem;
}

.mt-6 {
    text-align: center;
    background: #eaeaea;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.fade-in {
    animation: fadeInMove 0.2s ease-out;
}

.fade-up-in {
    animation: fadeUpInMove 0.2s ease-out;
}

@keyframes fadeInMove {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeUpInMove {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.dropdown-menu li {
    position: relative;
}

.dropdown-menu .submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -7px;
}

.dropdown-menu .submenu-left {
    right: 100%;
    left: auto;
}

.dropdown-menu>li:hover {
    background-color: #f1f1f1
}

.dropdown-menu>li:hover>.submenu {
    display: block;
}

/* Reverse direction of Bootstrap 5 switch */
/* Fully reverse the switch toggle direction in RTL */
.form-switch .form-check-input {
    float: right;
    background-position: right center;
    transition: background-position 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.form-switch .form-check-input:checked {
    background-position: left center;
}

.portfolio-image {
    max-height: 18rem;
    max-width: 12rem;
    padding: 10px;
    object-fit: cover;
    /* light gray background */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    aspect-ratio: 4 / 6;
}

.portfolio-image.default {
    filter: grayscale(100%) opacity(0.7);
}

@media (max-width: 1400px) {
    .portfolio-image {
        max-width: 10rem;
    }

}

@media (max-width: 900px) {
    .portfolio-image {
        max-width: 8rem;
    }

}

.portfolio-icon {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.modal .modal-header .custom-btn-close {
    position: absolute;
    max-width: 15px;
    max-height: 15px;
    padding: 15px;
    inset-block-start: -1.9rem;
    inset-inline-end: -1.1rem;
}

.view-emp.custom-btn-close {
    inset-block-start: -1.2rem !important;
}

.modal .custom-btn-close {
    color: #fff !important;
}

.notification {
    position: relative;
    overflow: hidden;
    color: #000;
    border-bottom: 1px solid var(--mosa-second-color-dark);
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    align-items: center;
    border-bottom-left-radius: var(--bs-border-radius-pill);
    border-top-left-radius: var(--bs-border-radius-pill);
}

.notification:hover {
    background: var(--mosa-second-color);
    transition: all 0.5s ease;
}

.hide-element-transition {
    height: 0 !important;
    overflow: hidden;
    opacity: 0 !important;
    filter: blur(50px);
    transition: all 0.3s ease-in-out;
}

.tree {
    width: 100%;
    height: auto;
    text-align: center;
}

.tree ul {
    padding-top: 20px;
    position: relative;
    transition: .5s;
}

.tree li {
    display: inline-table;
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 10px;
    transition: .5s;
}

.tree li:first-child::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    border-left: 1px solid #ccc;
    width: 51%;
    height: 10px;
}

.tree li:first-child::after {
    content: '';
    position: absolute;
    top: 0;
    right: 50%;
    border-top: 1px solid #ccc;
    width: 51%;
    height: 10px;
}

.tree li::before,
.tree li::after {
    content: '';
    position: absolute;
    top: 0;
    right: 50%;
    border-top: 1px solid #ccc;
    width: 51%;
    height: 10px;
}

.tree li::before {
    right: auto;
    left: 50%;
    border-left: 1px solid #ccc;
}

.tree li:only-child::after,
.tree li:only-child::before {
    display: none;
}

.tree li:only-child {
    padding-top: 0;
}

.tree li:first-child::before,
.tree li:last-child::after {
    border: 0 none;
}

.tree li:last-child::before {
    border-left: 1px solid #ccc;
    border-radius: 5px 0 0 0;
}

.tree li:first-child::after {
    border-right: 1px solid #ccc;
    border-radius: 0 5px 0 0;
}

.tree ul ul .has-children::before,
#children-1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    border-left: 1px solid #ccc;
    width: 0;
    height: 20px;
}

.tree li a {
    border: 1px solid #ccc;
    padding: 10px;
    display: inline-grid;
    border-radius: 5px;
    text-decoration-line: none;
    transition: .5s;
}

.tree li a img {
    width: 50px;
    height: 50px;
    margin-bottom: 10px !important;
    border-radius: 100px;
    margin: auto;
}

.tree li a span {
    border: 1px solid #ccc;
    border-radius: 5px;
    color: #666;
    padding: 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

.tree li a:hover,
.tree li a:hover i,
.tree li a:hover span,
.tree li a:hover+ul li a {
    background: #c8e4f8;
    color: #000;
    border: 1px solid #94a0b4;
}

.tree li a:hover+ul li::after,
.tree li a:hover+ul li::before,
.tree li a:hover+ul::before,
.tree li a:hover+ul ul::before {
    border-color: #94a0b4;
}

.scroll {
    white-space: nowrap;
    position: relative;
    overflow-x: scroll;
}

.structure_view {
    background-color: white;
    border: none;
    padding: 0;
}

.avatar-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
}

.note-editor .note-editable {
    direction: rtl;
    text-align: right;
}

.alert {
    padding: 15px;
    border: 1px solid transparent;
    border-radius: 4px;
    margin-bottom: 20px;
}

.alert-warning {
    background-color: #fcf8e3;
    color: #8a6d3b;
    border-color: #faebcc;
}

.alert-dismissible {
    position: relative;
    padding-right: 35px;
}

.alert-dismissible .close {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 20px;
    color: inherit;
    background: none;
    border: none;
}

table.dataTable>tbody>tr.child span.dtr-title {
    font-size: 0.8rem;
}

table.dataTable>tbody>tr.child span.dtr-title::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 3px;
    margin-right: 3px;
    vertical-align: middle;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 6px solid var(--mosa-second-color-dark);
}

table.dataTable>tbody>tr.child ul.dtr-details>li {
    border-bottom: 1px solid #efefef;
    padding: 0.25em 0 !important;
}

table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
    margin-left: 0.5em !important;
    rotate: 180deg;
    transition: rotate 250ms cubic-bezier(0.075, 0.82, 0.165, 1);
}

table.dataTable.dtr-inline.collapsed>tbody>tr.dtr-expanded>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr.dtr-expanded>th.dtr-control:before {
    rotate: 0deg;
}

.dropdown-menu li {
    position: relative;
}

.dropdown-menu .submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -7px;
}

.dropdown-menu .submenu-left {
    right: 100%;
    left: auto;
}

.dropdown-menu>li:hover {
    background-color: #f1f1f1;
}

.dropdown-menu>li:hover>.submenu {
    display: block;
}

.form-switch .form-check-input {
    float: right;
    background-position: right center;
    transition: background-position 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.form-switch .form-check-input:checked {
    background-position: left center;
}

.portfolio-icon {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.modal .modal-header .custom-btn-close {
    position: absolute;
    max-width: 15px;
    max-height: 15px;
    padding: 15px;
    inset-block-start: -1.9rem;
    inset-inline-end: -1.1rem;
}

.modal .custom-btn-close {
    color: #fff !important;
}

.notification {
    position: relative;
    overflow: hidden;
    color: #000;
    border-bottom: 1px solid var(--mosa-second-color-dark);
    padding: 2px 5px;
    align-items: center;
    border-bottom-left-radius: var(--bs-border-radius-pill);
    border-top-left-radius: var(--bs-border-radius-pill);
}

.notification:hover {
    background: var(--mosa-second-color);
    transition: all 0.5s ease;
}

.hide-element-transition {
    height: 0 !important;
    overflow: hidden;
    opacity: 0 !important;
    filter: blur(50px);
    transition: all 0.3s ease-in-out;
}

.log-btn-container {
    height: calc(100vh - 76px - 64px - 16px - 18px - 30px - 20px - 95px);
}

.log-btn-container button {
    font-size: 2rem;
    min-height: 25vh;
}

.avatar-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.info-icon {
    position: absolute;
    align-content: center;
    color: white;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    background: rgba(0, 0, 0, 0.3);
    width: 30px !important;
    height: 30px !important;
    display: none;
}

.tree li:hover .info-icon {
    display: block;
}