@font-face {
    font-family: 'tajawal-regular';
    src: url('../font/tajawal-regular.woff') format('woff'), url('../font/tajawal-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
:root {
    --font-style: 'Open Sans', sans-serif, system-ui, -apple-system,"Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --tajawal-regular: tajawal-regular, system-ui, -apple-system,"Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --primary-color: #1e2047;
    --secondary-color: #122a80;
    --third-color: #ad0600;
}
body {
    background-color: #f8f9fa;
    font-size: 11pt;
    padding-bottom: 50px;
    font-family: var(--tajawal-regular);
}
h1,h2,h3,h4,h5,h6,a,a:active{
    color: var(--primary-color) !important;
}
a, a:active {
    color: var(--primary-color) !important;
    text-decoration:none;
}
    a:hover {
        color: var(--secondary-color) !important;
    }
.dropdown-menu a {
    color: var(--primary-color) !important;
    font-size: 10pt !important;
}
input[type=text], select, textarea, button, .btn {
    font-size: 10pt !important;
}
.page-item a {
    font-size: 10pt !important;
}
.breadcrumb {
    font-size: 10pt !important;
}
label {
    color: #777 !important;
    //font-size:12pt;
}
th {
    background: var(--primary-color) !important;
    color: #fff !important;
    font-weight:normal;
}
.report {
    background: #f6f6f6 !important;
    color: #000 !important;
    font-weight: normal;
    text-align:center;
}
.print {
    background: #f6f6f6 !important;
    color: #000 !important;
    font-weight: normal;
    text-align: right;
    font-weight:bold;
}
@media print {
    * {
        -webkit-print-color-adjust: exact !important; /* Chrome/Edge/Safari */
        print-color-adjust: exact !important; /* المواصفة الحديثة */
    }
}
    table {
    }

    .iconClass {
        position: relative;
    }

        .iconClass span {
            position: absolute;
            top: 0px;
            left: 0px;
            display: block;
            background: red;
            font-size: 10pt;
            padding: 4px;
        }

    /*#region ----Color */
    .btn-primary {
        --bs-btn-color: #fff;
        --bs-btn-bg: var(--primary-color);
        --bs-btn-border-color: var(--primary-color);
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: var(--secondary-color);
        --bs-btn-hover-border-color: var(--secondary-color);
        --bs-btn-focus-shadow-rgb: 1, 96, 150;
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: var(--primary-color);
        --bs-btn-active-border-color: var(--primary-color);
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        --bs-btn-disabled-color: #fff;
        --bs-btn-disabled-bg: var(--primary-color);
        --bs-btn-disabled-border-color: var(--primary-color);
    }

    .dropdown-item.active, .dropdown-item:active {
        background-color: var(--secondary-color) !important; /* Change to your desired color */
        color: var(--primary-color) !important; /* Change to your desired text color */
    }

    .dropdown-item {
        font-size: 9pt;
    }
    /*#endregion */
    /*#region ----Login */
    .login-logo {
        width: 200px;
    }

    .login-panel {
        width: 500px;
    }

    @media (max-width: 575px) {
        .login-panel {
            width: auto;
        }
    }
    /*#endregion */
    /*#region ----Table */
    .td-control-width {
        width: 50px;
        text-align: center;
    }
    /* Row-level backgrounds applied to TDs so Bootstrap table styles don't override them */
    .table tbody tr.row-vacation td {
        background-color: #F8D7DA !important;
    }

    .table tbody tr.row-rest td {
        background-color: #E9ECEF !important;
        color: #6c757d;
    }

    .table tbody tr.row-unseen td {
        background-color: #FFF3CD !important;
    }

    /* optional: keep hover visible */
    .table tbody tr.row-vacation:hover td,
    .table tbody tr.row-rest:hover td,
    .table tbody tr.row-unseen:hover td {
        opacity: 0.95;
    }
    /*#endregion */
    /*#region ----areas */
    header {
    }

    .topbar {
        margin-right: 240px;
    }

    .sidebar {
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        width: 240px;
        overflow-y: auto;
        background: var(--primary-color) !important;
        color: #fff !important;
        //font-size:12pt;
    }

        .sidebar a.active {
            color: #fff !important;
            background-color: var(--secondary-color);
        }

        .sidebar a {
            color: #ddd !important;
        }

            .sidebar a:hover {
                color: #fff !important;
                background-color: #122a809c;
            }

        .sidebar .nav-item ul li {
            padding-right: 26px;
        }

            .sidebar .nav-item ul li a.active {
                color: #fff !important;
                background-color: #122a809c;
            }

    .content {
        margin-top: 80px;
        margin-right: 240px;
        padding-right: 16px;
        padding-left: 16px;
    }

    #map {
        width: 100%;
        height: 500px;
        border: 1px solid #ccc;
    }
    /*#endregion */
    @media (max-width: 992px) {
        .sidebar {
        }

        .topbar {
            margin-right: auto;
        }

        .content {
            margin-right: auto; /* Width of the sidebar + some padding */
            margin-left: auto;
            padding-right: 0px;
            padding-left: 0px;
        }
    }