* {
    box-sizing: border-box;
    font-family: 'Shabwa', sans-serif !important;
    direction: rtl;
}

:root {
    --title: #1e4f99;
    --body: #f6f7f98b;
    --htitle: #1c5690;
    --hbody: #dee8ffdb;
    --primal: #276dd6;
    --primal_dark: #1e4f99;
}

@font-face {
    font-family: 'Shabwa';
    font-weight: 400; /* Regular */
    font-style: normal;
    src: url('../fonts/Shabwa.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Shabwa';
    font-weight: 600; /* Medium */
    font-style: normal;
    src: url('../fonts/Shabwa-Medium.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Shabwa';
    font-weight: 800; /* Bold */
    font-style: normal;
    src: url('../fonts/Shabwa-Bold.woff2') format('woff2');
    font-display: swap;
}

.btn-primary {
    background-color: var(--primal) !important;
    border-color: var(--primal) !important;
}

.btn-primary:hover {
    background-color: var(--primal_dark) !important;
    border-color: var(--primal_dark) !important;
}

.btn-outline-primary {
    border-color: var(--primal) !important;
    color: var(--primal) !important;
}

.btn-outline-primary:hover {
    background-color: var(--primal) !important;
    color: white !important;
}

.text-bg-primary {
    background-color: var(--primal) !important;
    border-color: var(--primal) !important;
}

.list-group-item.active{
    background-color: var(--primal) !important;
    border-color: var(--primal) !important;
}

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

.primal:hover {
    color: var(--primal_dark) !important;
}

.pagination {
    --bs-pagination-active-bg: var(--primal) !important;
    --bs-pagination-active-border-color: var(--primal) !important;
    --bs-pagination-color: var(--primal) !important;
}

input[dir="rtl"] {
    text-align: right;
    direction: rtl;
    unicode-bidi: plaintext;
}

input[dir="rtl"]::placeholder {
    text-align: right;
    color: #484848;
}

input[type="number"] {
    text-align: right !important;
    direction: rtl !important;
    unicode-bidi: plaintext !important;
}

input[type="email"] {
    text-align: right !important;
    direction: rtl !important;
    unicode-bidi: plaintext !important;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100% !important;
    background-color: var(--body);
}

.titlebar {
    background-color: var(--title);
    /* height: 7vh; */
    min-height: 45px;
    max-height: 60px;
    display: flex;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.titlebar p {
    color: white;
    transition: all 0.3s;
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
    font-size: clamp(19px, 2vw, 3rem);
    /* line-height: 1; */
}

.titlebar img {
    /* height: clamp(20px, 5.5vh, 60px); */
    height: 6vh;
    min-height: 32px;
    width: auto;
    transition: all 0.3s;
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}

.sidebar-toggle {
    background-color: inherit;
    color: white;
    border: none;
    transition: background-color 0.3s, transform 0.1s;
    min-width: 5vh;
    min-height: 5vh;
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}

.sidebar-toggle:hover {
    background-color: var(--body);
    color: var(--title);
}

.sidebar-toggle:active {
    transform: scale(0.95);
}

@media print {
    .no-print {
        display: none !important;
    }
    .new-page {
        page-break-inside: avoid;
    }
}

@media print {
    *, .shadow {
        box-shadow: none !important;
        text-shadow: none !important;
        border-color: rgba(0, 0, 0, var(--bs-border-opacity)) !important;    }
}

.list-group {
    border-radius: 0 !important;
}

.sidebar {
    z-index: 900;
    transition: width 0.15s ease-in-out;
    background-color: white;
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0; /* Sticks the sidebar at the top of the parent container */
}

.sidebar.collapsed {
    width: 52px !important;
}
.sidebar.collapsed .list-group-item span {
    display: none !important;
}
.sidebar.collapsed .accordion-button span {
    display: none !important;
}
.sidebar.collapsed .accordion-button::after {
    background-image: none;
}

@media (max-width: 1100px) {
    .sidebar {
        position: fixed;
        top: 7vh;
        right: 0;
        width: 250px;
        transition: none;
    }
    .sidebar.collapsed {
        position: relative;
        top: 0
    }
}
.sidebar .list-group-item {
    border: none !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    height: 60px !important;
    white-space: nowrap;
    overflow: hidden;
    padding: 12px;
    align-items: center;
}

.sidebar .accordion-button {
    font-size: 18px !important;
    font-weight: 600 !important;
    border: none !important;
    height: 60px !important;
    white-space: nowrap;
    overflow: hidden;
    padding: 12px;
    align-items: center;
}

.sidebar .accordion-button:not(.collapsed) {
    background-color: var(--body) !important;
}

.tooltip-custom .tooltip-inner {
    font-size: 1.2rem;
    background-color: var(--title);
    color: white;
    padding: 8px 12px;
    border-radius: 5px;
}

.button-group{
    padding: 10px;
}

.checkbox-inline {
    display:inline-flex;
    margin-left: 5px;
    margin-right: 10px;
}

.alert {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

#id_year {
    direction: rtl;
}

.option-separator {
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}

.option-separator:last-of-type {
    border-bottom: none;
}

.card {
    --bs-card-border-radius: 0px !important;
}
.icard {
    transition: all 0.3s ease-in-out;
}
.icard:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1) !important;
}

.dropdown-menu.show{
    --bs-dropdown-min-width: 94px;
    overflow-x:visible;
}

.table>tbody>tr:nth-child(odd)>td, 
.table>tbody>tr:nth-child(odd)>th {
    --bs-table-bg-type: white;
}

.table>tbody>tr:nth-child(even)>td, 
.table>tbody>tr:nth-child(even)>th {
    --bs-table-bg-type: whitesmoke;
}

.table thead th {
    background-color: whitesmoke;
    font-size: 20px;
    transition: font-size 0.3s;
}

@media (max-width: 900px) {
    .table thead th {
        font-size: 14px;
    }
}

@media (max-width: 900px) {
    .table tbody tr td {
        font-size: 14px !important;
    }
}

.table tbody tr td {
    border-style: none;
    font-size: 20px;
    transition: font-size 0.3s;
}

/* Target the text element inside Plotly's hover layer for RTL correction */
.hoverlayer .hovertext text {
    text-anchor: end !important;
    direction: rtl !important;
    font-size: 15px !important;
    font-family: 'Shabwa', sans-serif !important;
}

/* Set the location of modebar on chart */
.modebar {
    top: 330px !important;
}

th a {
    text-decoration: none;
    color: inherit;
}

th a::after {
    font-family: "bootstrap-icons";
    content: "\F238";
    font-size: 14px;
    margin-right: 3px;
}

th.asc a::after {
    content: "\F235";
}

th.desc a::after {
    content: "\F229";
}

#modelTabsContent {
    visibility: hidden;
}

#publication-details {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.9s ease, transform 0.9s ease;
    display: none;
}

#publication-details.show {
    opacity: 1;
    transform: translateY(0);
    display: block;
}

form label {
    font-weight: 600;
    font-size: 1.2rem;
}

.is-placeholder {
    background-color: rgba(255, 0, 0, 0.1);
    font-weight: bold;
}


.card_text_big {
    font-size: 24px;
}

.bi-font {
    font-size: 16px;
}


/* Replace "next" with "➡ Next" */
.pagination .next .page-link::before {
    content: ">>";
    font-size: 16px; /* Match the font size */
}

/* Replace "previous" with "⬅ Previous" */
.pagination .previous .page-link::before {
    content: "<<";
    font-size: 16px;
}

/* Hide the original "next" and "previous" text but keep the arrow */
.pagination .next .page-link,
.pagination .previous .page-link {
    font-size: 0; /* Hide original text */
}

/* Restore font size for the arrows */
.pagination .next .page-link span,
.pagination .previous .page-link span {
    font-size: 16px;
}

.pagination .next .page-link span,
.pagination .previous .page-link span {
    font-size: 0; /* Adjust size as needed */
}

.missing-numbers-table {
    width: 100%;
    table-layout: fixed;
    word-wrap: break-word;
    display: flex;
    flex-wrap: wrap;
}

.missing-numbers-table tr {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.missing-numbers-table td {
    padding: 5px 5px 15px 5px;
    text-align: center;
    min-width: 80px; /* Adjust to fit your needs */
    border-style: solid !important;
}

@media print {
    .missing-numbers-table td {
        padding: 1px 1px 0px 1px;   
    }
}

@media (max-width: 570px) {
    .flex-forit {
        flex-grow: 1 !important;
    }
    .login-title-btn {
        font-size: 0;
        
    }
    .login-title-btn i {
        font-size: 13px;
    }
    .vanishor {
        display: none !important;
    }
    li.nav-item {
        font-size: 15px !important;
    }
    .pagination {
        justify-content: start !important;
    }
}

a.dropdown-item.per-page-option {
    cursor: pointer !important;
}

#mainContent {
    height: 100%;
    overflow-y: auto;
}

.disabler {
    pointer-events: none !important;
    cursor: not-allowed !important;
}