html[dir=rtl] .logo-img img {
    transform: scaleX(1);
    width: 64px;
}

.logo-img img {
    transform: scaleX(1);
    width: 64px;
}

* {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

html[dir=rtl] * {
    font-family: "Noto Sans Arabic", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

/* Keep icon fonts readable — global RTL * { font-weight: 300 } breaks Tabler glyphs */
.ti,
[class^="ti-"],
[class*=" ti-"] {
    font-family: tabler-icons !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

iconify-icon {
    display: inline-block;
    vertical-align: middle;
    speak: none;
}



.site-title {
    font-size: 1.1rem;
    font-weight: 600;


}

.nav-link {
    margin: 0px 8px;
    font-size: 0.5rem;
    line-height: 1.75;
    font-family: "Noto Sans Arabic", sans-serif;
    color: #2d5a98 !important;
    ;
    font-weight: 300;
    text-decoration: none;
    transition: 0.2s ease-in-out;
}

.link-primary {
    margin: 0px 8px;
    font-size: 0.5rem;
    line-height: 1.75;
    font-family: "Noto Sans Arabic", sans-serif;
    color: #2d5a98 !important;
    ;
    font-weight: 300;
    text-decoration: none;
    transition: 0.2s ease-in-out;
}

.link-primary:hover {
    color: #09121f !important;

}


.header-menu-button {
    font-size: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    appearance: none;
    font-weight: 400;
    line-height: 1.75;
    min-width: 64px;
    color: rgb(255, 255, 255);
    background-color: #2d5a98;
    box-shadow: none;
    text-transform: none;
    font-size: 15px;
    outline: 0px;
    border-width: 0px;
    border-style: initial;
    border-color: initial;
    border-image: initial;
    margin: 0px 8px;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1);
    padding: 8px 20px;
}

.header-menu-button:hover {
    background-color: rgb(26, 25, 25);
}

.card {
    border: 1px solid var(--bs-border-color);
    box-shadow: none;
}

.card:hover {
    box-shadow: 3px 3px 5px rgba(41, 25, 44, 0.1);
    /* ------ 2/11/2025------ */
}

.patt-bg {
    /* background: url(../images/logos/pattern-02.png) 0% 0% / 510px 400px; */
    opacity: 1;
    /* Adjust transparency (0.0 to 1.0) */
    z-index: -1;
    /* Places the background behind the content */
}

.add-shadow {
    box-shadow: 1px 0px 4px rgba(0, 0, 0, 0.2);
}

.vh-80 {
    min-height: calc(100vh - 240px);
}

.footer {

    bottom: 0;
    left: 0;
    /* Optional: to make it span the full width */
    width: 100%;
    /* Optional: to make it span the full width */
    /* Add other styling properties like background-color, padding, etc. */

}


/* ------ 16/10/25------ */

html[dir=rtl] .breadcrumb {
    direction: ltr;
}



.side-padding {
    padding: 0 5rem !important;
}

.header-sticky {
    padding: 0 5rem !important;
}

.header-fp.header-sticky .navbar {
    padding: 6px 5rem !important;
}

/* Spacing helpers used in submitting step layouts (Zanko reference) */
.mt-10 {
    margin-top: 2.5rem !important;
}

.mb-12 {
    margin-bottom: 3rem !important;
}

/* Step info accents: slightly thicker top bar reads like Zanko mockups (2px can look faint on rounded cards) */
.card.card-body.card-required,
.card-required {
    border-top: 3px solid red !important;
}

.card.card-body.card-success,
.card-success {
    border-top: 3px solid rgb(3, 124, 27) !important;
}

.card.card-body.card-warning,
.card-warning {
    border-top: 3px solid rgb(248, 194, 9) !important;
}

.card.card-body.card-progress,
.card-progress {
    border-top: 3px solid #635BFF !important;
}



/* PrimeVue overlays above Bootstrap modal (z-index only, no forced positioning) */
.p-treeselect-panel,
.p-treeselect-panel.p-component,
.p-treeselect .p-treeselect-panel,
.p-treeselect-panel[data-pc-name="treeselectpanel"],
.p-treeselect-panel[data-pc-section="panel"],
.p-component[data-pc-name="treeselectpanel"],
.p-component[data-pc-section="panel"],
.modal .p-treeselect-panel,
.modal .p-treeselect .p-treeselect-panel,
.modal-dialog .p-treeselect-panel,
.modal-dialog .p-treeselect .p-treeselect-panel {
    z-index: 2000 !important;
}

/* TreeSelect scrolling fixes for modals */
.p-treeselect-panel {
    max-height: 300px !important;
    overflow-y: auto !important;
}

.p-treeselect-panel .p-treeselect-items {
    max-height: 250px !important;
    overflow-y: auto !important;
}

/* Prevent modal from closing when clicking on TreeSelect panel */
.modal .p-treeselect-panel {
    pointer-events: auto !important;
}

/* Ensure TreeSelect panel stays above modal backdrop */
.modal.show .p-treeselect-panel {
    z-index: 10000 !important;
}

/* TreeSelect item hover and selection fixes */
.p-treeselect-panel .p-treeselect-item {
    cursor: pointer !important;
}

.p-treeselect-panel .p-treeselect-item:hover {
    background-color: #f8f9fa !important;
}

/* Prevent scroll events from bubbling up to modal */
.p-treeselect-panel .p-treeselect-items {
    overscroll-behavior: contain !important;
}


/* ------ 2/11/2025--------------- */
.no-border {
    border: none;
    box-shadow: none;
}

.no-border:hover {
    border: none;
    box-shadow: none;
}


/* ---------13/11/2025--------- */
.no-shadow {
    box-shadow: none;
}

.no-shadow:hover {
    box-shadow: none;
}



/* ---------------------ZANKOLINE---------------------- */

.logo-img img {
    width: 250px;
}

html[dir=rtl] .logo-img img {
    width: 250px;
}

.bg-blue-subtle {
    background-color: #d4e9f7 !important;
}

.select-table-card {
    height: 90vh;
}

.step-wizard-item {
    width: 100px !important;
}

.bg-primary-st {
    background-color: #4871aa !important;
    background-image: url('../images/backgrounds/st01.png') !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.bg-primary-dg {
    background-color: #bdfbb4 !important;
    background-image: url('../images/backgrounds/st02.png') !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.disabled-gradient {
    /* background: linear-gradient(180deg, rgba(20, 20, 20, .12) 0, rgba(10, 10, 10, .03) 100%); */
    background: rgb(239, 239, 239);
}

[data-bs-theme="dark"] .disabled-gradient {
    /* background: linear-gradient(180deg, rgba(20, 20, 20, .12) 0, rgba(10, 10, 10, .03) 100%); */
    background: rgb(133, 133, 133);
}

.text-bg-disabled {
    background-color: rgba(78, 78, 78, 0.12) !important;

}

@media (max-width: 500px) {
    .mobile-no-padding {
        padding: 1rem !important;
    }
}

.jstree-default-large.jstree-rtl .jstree-node {
    margin-right: 8px !important;
}

.jstree-closed {
    margin-right: 8px !important;
}

.jstree-open {
    margin-right: 8px !important;
}

.jstree-default>.jstree-striped {
    background: none !important;
}

.js-striped-new>li:nth-of-type(odd) {
    /* background: rgb(244, 244, 244) !important; */
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(248, 253, 255) 30%, rgb(248, 253, 255) 90%, rgba(255, 255, 255, 0) 100%) !important;
    /* padding: 0 14px; */
    border-radius: .5em;
}

.js-striped-new>li:nth-of-type(even) {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(243, 243, 243) 30%, rgb(243, 243, 243) 90%, rgba(255, 255, 255, 0) 100%) !important;
    /* padding: 0 14px; */
    border-radius: .5em;
}

.hover-icon {
    display: none;
}

/* When the link (parent) is hovered, hide the default icon and show the hover icon */
.icon-swap-link:hover .default-icon {
    display: none;
}

.icon-swap-link:hover .hover-icon {
    display: inline;
    /* Or inline-block, depending on layout */
}

.jstree-default-large .jstree-icon:empty {
    width: 20px !important;
    height: 24px;
    line-height: 32px;
}

.round-120 {
    width: 120px;
    height: 120px;
}

.progress-label {
    margin-top: 20px !important;
    font-size: 12px !important;
}

.step-wizard-list {
    margin: 10px 0 !important;
}

.jstree-children {
    width: 300px;
}


/* Tabs design */

.tab-new {
    --tabGirth: 12px;
    width: 100px;

    clip-path: shape(from bottom left,
            curve to var(--tabGirth) calc(100% - var(--tabGirth)) with var(--tabGirth) 100%,
            vline to var(--tabGirth),
            curve to calc(var(--tabGirth) * 2) 0 with var(--tabGirth) 0,
            hline to calc(100% - calc(var(--tabGirth) * 2)),
            curve to calc(100% - var(--tabGirth)) var(--tabGirth) with calc(100% - var(--tabGirth)) 0,
            vline to calc(100% - var(--tabGirth)),
            curve to 100% 100% with calc(100% - var(--tabGirth)) 100%);
    text-align: center;

}

.tab-new > .active > span {
    font-weight: 700 !important;
}

/* Inactive tab color comes from per-tab utilities (e.g. bg-*-subtle); do not override. */

/* _________________________________________ */

.h-fit {
    height: fit-content !important;
}

.just-print {
    display: none !important;
}

/* ------- new 8/5/2024 ------- */

.grades-width {
    min-width: 170px !important;
}

.info-width {
    min-width: 300px !important;
}


.z-header {
    background: rgb(224, 238, 255);
    padding: .4rem 1rem .2rem;
    margin-top: 0;
    box-shadow: 0px 1px 1px 00px rgba(54, 100, 191, 0.20);
    border-radius: .5rem .5rem 0 0;
    border-color: black !important;
    border-width: 2px;
}
.z-header>.card-title {
    background: rgb(238, 245, 254);
    padding: 0 1rem;
    margin-top: 0;
}

.z-header>.d-flex {
    border-bottom : 2px solid rgb(156, 160, 210);
}

#print-watermark {
  display: none;
}

/*------------ 22/5/2026 -----------------*/
.progress-count-waiting {
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 600;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    color: transparent;
}

.progress-count-waiting:after {
    content: "";
    height: 40px;
    width: 40px;
    background: rgb(246, 154, 26);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: -10;
}

.progress-count-waiting:before {
    height: 10px;
    width: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: center center;
}

.round-96 {
    width: 96px;
    height: 96px;
}