:root {
    --arabic-font: "Cairo", sans-serif;
    --english-font: "Raleway", sans-serif;
    --back: #fff;
    --dark: #f2f2f2;
    --sid: #fff;
    --sidtextLight: #e4e7ec;
    --sidtextLightcolor: #000;
    --sidtextLightact: #f3f6fa;
    --mode: #fff;
    --primaryDark: #423868;
    --primary: #17b1ce;
    --primaryLight: #eccf1c;
    --slightPrimary: hsl(45, 38%, 36%, 0.39);
    --textLight: #d1d1d1;
    --text: #444444;
    --percentText: #444444;
    --verySlightGray: hsl(0, 0%, 100%, 0.06);
    --white: #333;
    --petrol95: #dc3545;
    --slight95: hsl(162, 22%, 20%, 0.31);
    --petrol91: #28a745;
    --slight91: hsl(276, 35%, 33%, 0.33);
    --diesel: #0063b2;
    --kerosone: #dddddd;
    --slightDiesel: hsl(207, 65%, 14%, 0.32);
    --dividerColor: #e5e5e5;
    --scrollBackColor: #e5e5e5;
    --scrollColor: #d2d2d2;
    --dropdownShadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
    --boxShadow: 0 2px 8px rgb(40, 40, 40, 0.25);
    --waterBColor: #c7eeff;
    --fixedDarkColor: #171821;
    --dispColumnBack: radial-gradient(lightyellow, #ddcfcc );
    --dispBoxBack: linear-gradient(to bottom, #2c281d,#faf9dd);
    --dispFooter: #333;
    --dispErrorBlur: blur(2px);
    --dispGray: #ddcfcc;
    --dispGrayLight: #afafaf;
    --dispWorking: rgb(16, 183, 16);
    --dispDanger: #dc2f2f;
    --dispDetails: #9b9091;
    --dispshadowColor: #1f1f1f;
    --low-fuel-gradient: linear-gradient(rgb(255, 182, 182), rgba(243, 187, 187, 0.3));
    --alertActiveBackgroundColor: linear-gradient(135deg, #dcf8ce 0%, #457934 100%);
    --alertDangerBackgroundColor: linear-gradient(135deg, #ffb7b7 0%, #e41717 100%);
    --alertWarningBackgroundColor: linear-gradient(135deg, #fff8a9 0%, #cfb630 100%);
}

.dark-mode {
    --back: #30313a;
    --sid: #21222d;
    --sidtextLight: #171821;
    --sidtextLightcolor: #fff;
    --sidtextLightact: #2f303e;
    --dark: var(--fixedDarkColor);
    --mode: #21222d;
    --primaryDark: #423868;
    --primary: #17b1ce;
    --primaryLight: #eccf1c;
    --slightPrimary: hsl(45, 38%, 36%, 0.39);
    --textLight: #87888c;
    --text: #d2d2d2;
    --percentText: #7e7777;
    --verySlightGray: hsl(0, 0%, 100%, 0.06);
    --white: #fff;
    --dividerColor: #2c2d33;
    --dispColumnBack: radial-gradient(#7c7c00, #2c281d);
    --dispBoxBack: linear-gradient(to bottom, var(--primaryLight), #2c281d);
    --dispFooter: #000;
    --low-fuel-gradient: linear-gradient(rgb(243 115 115), rgb(139 118 118 / 30%));
    --alertActiveBackgroundColor: linear-gradient(135deg, #21281e 0%, #457934 100%);
    --alertDangerBackgroundColor: linear-gradient(135deg, #640606 0%, #e41717 100%);
    --alertWarningBackgroundColor: linear-gradient(135deg, #585100 0%, #d2b30c 100%);
}

*, ::after, ::before {
    box-sizing: border-box
}

html {
    font-family: "Inter",sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    scroll-behavior: smooth
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block
}

body {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    background-color: var(--dark);
    color: var(--white)
}

html, body, .wrapper {
    min-height: 100%
}

[tabindex="-1"]:focus:not(:focus-visible) {
    outline: 0 !important
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: .5rem
}

p {
    margin-top: 0;
    margin-bottom: 1rem
}

abbr[data-original-title], abbr[title] {
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
    cursor: help;
    border-bottom: 0;
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none
}

address {
    margin-bottom: 1rem;
    font-style: normal;
    line-height: inherit
}

dl, ol, ul {
    margin-top: 0;
    margin-bottom: 1rem
}

    ol ol, ol ul, ul ol, ul ul {
        margin-bottom: 0
    }

dt {
    font-weight: 700
}

dd {
    margin-bottom: .5rem;
    margin-left: 0
}

blockquote {
    margin: 0 0 1rem
}

b, strong {
    font-weight: bolder
}

small {
    font-size: 80%
}

sub, sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline
}

sub {
    bottom: -0.25em
}

sup {
    top: -0.5em
}

a {
    color: var(--primary);
    text-decoration: none;
    background-color: rgba(0,0,0,0)
}

    a:hover {
        color: var(--primary);
        text-decoration: none
    }

    a:not([href]):not([class]) {
        color: inherit;
        text-decoration: none
    }

        a:not([href]):not([class]):hover {
            color: inherit;
            text-decoration: none
        }

pre {
    margin-top: 0;
    margin-bottom: 1rem;
    overflow: auto;
    -ms-overflow-style: scrollbar
}

figure {
    margin: 0 0 1rem
}

img {
    vertical-align: middle;
    border-style: none
}

svg {
    overflow: hidden;
    vertical-align: middle
}

table {
    border-collapse: collapse
}

caption {
    padding-top: .75rem;
    padding-bottom: .75rem;
    color: #6c757d;
    text-align: left;
    caption-side: bottom
}

th {
    text-align: inherit;
    text-align: -webkit-match-parent
}

label {
    display: inline-block;
    margin-bottom: .5rem
}

button {
    border: 0;
    border-radius: 0
}

    button:focus:not(:focus-visible) {
        outline: 0
    }

button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
}

button, input {
    overflow: visible
}

input {
    border: 1px solid var(--textLight)
}

button, select {
    text-transform: none
}

[role=button] {
    cursor: pointer
}

select {
    word-wrap: normal
}

[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: button
}

    [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
        cursor: pointer
    }

    [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
        padding: 0;
        border-style: none
    }

input[type=checkbox], input[type=radio] {
    box-sizing: border-box;
    padding: 0
}

textarea {
    overflow: auto;
    resize: vertical
}

fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0
}

legend {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin-bottom: .5rem;
    font-size: 1.5rem;
    line-height: inherit;
    color: inherit;
    white-space: normal
}

progress {
    vertical-align: baseline
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    outline-offset: -2px;
    -webkit-appearance: none
}

    [type=search]::-webkit-search-decoration {
        -webkit-appearance: none
    }

::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance: button
}

output {
    display: inline-block
}

summary {
    display: list-item;
    cursor: pointer
}

template {
    display: none
}

[hidden] {
    display: none !important
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: .5rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: inherit
}

.h1, h1 {
    font-size: 2.5rem
}

.h2, h2 {
    font-size: 2rem
}

.h3, h3 {
    font-size: 1.75rem
}

.h4, h4 {
    font-size: 1.5rem
}

.h5, h5 {
    font-size: 1.25rem
}

.h6, h6 {
    font-size: 1rem
}

.lead {
    font-size: 1.25rem;
    font-weight: 300
}

.display-1 {
    font-size: 6rem;
    font-weight: 300;
    line-height: 1.2
}

.display-2 {
    font-size: 5.5rem;
    font-weight: 300;
    line-height: 1.2
}

.display-3 {
    font-size: 4.5rem;
    font-weight: 300;
    line-height: 1.2
}

.display-4 {
    font-size: 3.5rem;
    font-weight: 300;
    line-height: 1.2
}

hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(0,0,0,.1)
}

.small, small {
    font-size: 80%;
    font-weight: 400
}

.mark, mark {
    padding: .2em;
    background-color: #fcf8e3
}

.list-unstyled {
    padding-left: 0;
    list-style: none
}

.list-inline {
    padding-left: 0;
    list-style: none
}

.list-inline-item {
    display: inline-block
}

    .list-inline-item:not(:last-child) {
        margin-right: .5rem
    }

.initialism {
    font-size: 90%;
    text-transform: uppercase
}

.blockquote {
    margin-bottom: 1rem;
    font-size: 1.25rem
}

.blockquote-footer {
    display: block;
    font-size: 80%;
    color: #6c757d
}

    .blockquote-footer::before {
        content: "— "
    }

.img-fluid {
    max-width: 100%;
    height: auto
}

.img-thumbnail {
    padding: .25rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.075);
    max-width: 100%;
    height: auto
}

.figure {
    display: inline-block
}

.figure-img {
    margin-bottom: .5rem;
    line-height: 1
}

.figure-caption {
    font-size: 90%;
    color: #6c757d
}

code {
    font-size: 87.5%;
    color: #e83e8c;
    word-wrap: break-word
}

a > code {
    color: inherit
}

kbd {
    padding: .2rem .4rem;
    font-size: 87.5%;
    color: #fff;
    background-color: #212529;
    border-radius: .2rem;
    box-shadow: inset 0 -0.1rem 0 rgba(0,0,0,.25)
}

    kbd kbd {
        padding: 0;
        font-size: 100%;
        font-weight: 700;
        box-shadow: none
    }

pre {
    display: block;
    font-size: 87.5%;
    color: #212529
}

    pre code {
        font-size: inherit;
        color: inherit;
        word-break: normal
    }

.floatNone {
    float: none !important
}

*[data-toggle] {
    cursor: pointer
}

.scrollbar::-webkit-scrollbar-thumb {
    background: var(--scrollColor);
    border-radius: 5px;
    cursor: -webkit-grab;
    cursor: grab
}

.scrollbar::-webkit-scrollbar-track {
    background-color: rgba(0,0,0,0)
}

.scrollbar::-webkit-scrollbar-corner {
    background-color: rgba(0,0,0,0)
}

.scrollbar::-webkit-scrollbar {
    background-color: var(--scrollBackColor);
    width: 0px;
    border-radius: 5px
}

.scrollbar:hover {
    scrollbar-width: thin
}

    .scrollbar:hover::-webkit-scrollbar {
        width: .5rem;
        height: .5rem
    }

.scrollbar2::-webkit-scrollbar {
    width: 8px;
    background-color: var(--scrollBackColor);
    border-radius: 5px
}

.scrollbar2::-webkit-scrollbar-thumb {
    background: var(--scrollColor);
    border-radius: 5px;
    cursor: -webkit-grab;
    cursor: grab
}

.g-3-2 {
    gap: 2rem 3rem
}

.boxShadow {
    box-shadow: var(--boxShadow)
}

.divider, .dividerFull {
    border-bottom: 1px solid var(--dividerColor);
    margin: 0 auto
}

.divider {
    width: 95%
}

.brimaryBtn {
    background-color: var(--primary);
    padding: .5rem 2rem;
    margin-top:2px;
    margin-bottom:2px;
    border-radius: 5px;
    color: #fff;
    font-weight: 600
}


    .brimaryBtn:hover {
        background-color: var(--primaryDark)
    }

.grayBtn {
    font-weight: 600;
    padding: .5rem 2rem;
    border-radius: 10px
}

.btn-success {
    background-color: #28a745;
    padding: .7rem 2rem;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-left: 10px;
    border-radius: 5px;
    color: #fff;
    font-weight: 600
}
.btn-success:hover {
    background-color: #4ed16c;
}

.btn-outline-success {
    border: 1px solid #28a745;
    background-color: transparent;
    padding: .5rem 2rem;
    margin-top: 2px;
    margin-bottom: 2px;
    border-radius: 5px;
    color: #28a745;
    font-weight: 600
}

    .btn-outline-success:hover {
        background-color: #4ed16c;
        color:#fff;
    }



.bb-0 {
    border-bottom: 0
}

.pt-half {
    padding-top: .5rem
}

.bg-petrol95 {
    background-color: var(--petrol95)
}
.co-petrol95 {
    color: var(--petrol95)
}
.bg-petrol91 {
    background-color: var(--petrol91)
}
.co-petrol91 {
    color: var(--petrol91)
}
.bg-diesel {
    background-color: var(--diesel)
}
.co-diesel {
    color: var(--diesel)
}
.bg-kerosone {
    background-color: var(--kerosone) !important;
}
.co-kerosone {
    color: var(--kerosone) !important;
}
.bg-total {
    background-color: var(--primary)
}
.co-total {
    color: var(--primary)
}

.bg-slight95 {
    background-color: var(--slight95)
}

.bg-slight91 {
    background-color: var(--slight91)
}

.bg-slightDiesel {
    background-color: var(--slightDiesel)
}

.bg-slightTotal {
    background-color: var(--slightPrimary)
}

.clr-text {
    color: var(--text)
}

.clr-textLight {
    color: var(--textLight)
}

.clr-primary {
    color: var(--primary)
}

.menu-open > a {
    background: var(--sidtextLight);
    color: var(--sidtextLightcolor) !important
}

form label {
    font-weight: 600
}

form button[type=submit] {
    float: right
}

.select2-results__options {
    background-color: var(--back)
}

.dark-mode .select2-selection__choice {
    background-color: var(--mode) !important
}

.select2-selection__choice {
    display: flex;
    align-items: center
}

.select2-container--default .select2-results__option[aria-selected=true] {
    color: var(--fixedDarkColor)
}

.petrolType {
    display: inline-flex;
    align-items: center;
    font-size: .85rem;
    color: var(--white)
}

    .petrolType .miniCircle {
        width: 10px;
        height: 10px;
        aspect-ratio: 1/1;
        display: block;
        border-radius: 50%;
        margin-right: .4rem
    }

.sales__state .petrolType {
    margin-bottom: .3rem
}

.overview__types .petrolType {
    margin: 0 .5rem 0 0
}

.tableBtns {
    display: flex;
    align-items: center
}

    .tableBtns button {
        border-radius: 5px;
        background: var(--dark);
        color: var(--text)
    }

        .tableBtns button:hover {
            background-color: var(--slightPrimary)
        }

        .tableBtns button:not(:last-of-type) {
            margin-right: .3rem
        }

    .tableBtns h3 {
        margin-right: 1rem
    }

.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%
}

.input-group-prepend {
    margin-right: -1px
}

.input-group-append, .input-group-prepend {
    display: flex
}

.input-group.has-validation > .input-group-append:nth-last-child(n+3) > .btn, .input-group.has-validation > .input-group-append:nth-last-child(n+3) > .input-group-text, .input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn, .input-group:not(.has-validation) > .input-group-append:not(:last-child) > .input-group-text, .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group > .input-group-append:last-child > .input-group-text:not(:last-child), .input-group > .input-group-prepend > .btn, .input-group > .input-group-prepend > .input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: .375rem .75rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid var(--sidtextLight);
    border-radius: .25rem
}

.input-group > .custom-select:not(:first-child), .input-group > .form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.input-group > .custom-file, .input-group > .custom-select, .input-group > .form-control, .input-group > .form-control-plaintext {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    margin-bottom: 0
}

.dark-mode .daterangepicker {
    background-color: #3f474e;
    border: inherit
}

    .dark-mode .daterangepicker::after, .dark-mode .daterangepicker::before {
        border-bottom-color: #3f474e
    }

    .dark-mode .daterangepicker .calendar-table {
        background-color: #343a40;
        border-color: #4b545c
    }

        .dark-mode .daterangepicker .calendar-table td, .dark-mode .daterangepicker .calendar-table th {
            color: #fff
        }

        .dark-mode .daterangepicker .calendar-table .next span, .dark-mode .daterangepicker .calendar-table .prev span {
            border-color: #fff
        }

    .dark-mode .daterangepicker select.ampmselect, .dark-mode .daterangepicker select.hourselect, .dark-mode .daterangepicker select.minuteselect, .dark-mode .daterangepicker select.secondselect {
        background-color: #343a40;
        border-color: #4b545c
    }

    .dark-mode .daterangepicker .drp-buttons {
        border-color: #4b545c
    }

    .dark-mode .daterangepicker td.off, .dark-mode .daterangepicker td.off.end-date, .dark-mode .daterangepicker td.off.in-range, .dark-mode .daterangepicker td.off.start-date {
        background-color: #292d32;
        color: #fff
    }

    .dark-mode .daterangepicker td.available:hover, .dark-mode .daterangepicker th.available:hover {
        background-color: #3f474e
    }

.daterangepicker .applyBtn {
    background-color: var(--primary);
    font-weight: 600;
    color: var(--fixedDarkColor)
}

    .daterangepicker .applyBtn:disabled {
        background-color: #87888c;
        color: #fff;
        cursor: not-allowed
    }

.dark-mode .daterangepicker td.in-range {
    background-color: #4b545c;
    color: #fff
}

.createBtn {
    position: fixed;
    right: 30px;
    bottom: 70px;
    width: 60px;
    height: 60px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    box-shadow: 0 4px 8px #5e3c08;
    z-index: 10;
    background-color: var(--primaryDark);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer
}

    .createBtn:hover {
        background-color: var(--primary)
    }

.langSwitch {
    position: relative;
    display: inline-block;
    margin: 0 5px
}

    .langSwitch > span {
        position: absolute;
        top: 6px;
        pointer-events: none;
        font-family: "Helvetica",Arial,sans-serif;
        font-weight: bold;
        font-size: 10px;
        text-transform: uppercase;
        text-shadow: 0 1px 0 rgba(0,0,0,.06);
        width: 50%;
        text-align: center
    }

        .langSwitch > span.on {
            left: 0;
            padding-left: 2px;
            color: #fff
        }

        .langSwitch > span.off {
            right: 0;
            padding-right: 4px;
            color: var(--primary)
        }

    .langSwitch input.check-toggle-round-flat:checked ~ .off {
        color: #fff
    }

    .langSwitch input.check-toggle-round-flat:checked ~ .on {
        color: var(--primary)
    }

    .langSwitch .check-toggle {
        position: absolute;
        visibility: hidden
    }

        .langSwitch .check-toggle + label {
            display: block;
            position: relative;
            cursor: pointer;
            outline: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none
        }

    .langSwitch input.check-toggle-round-flat + label {
        padding: 2px;
        width: 50px;
        height: 27px;
        background-color: #e4e7ec;
        border-radius: 60px
    }

        .langSwitch input.check-toggle-round-flat + label:before, .langSwitch input.check-toggle-round-flat + label:after {
            display: block;
            position: absolute;
            content: ""
        }

        .langSwitch input.check-toggle-round-flat + label:before {
            top: 2px;
            left: 2px;
            bottom: 2px;
            right: 2px;
            background-color: var(--mode);
            border-radius: 60px
        }

        .langSwitch input.check-toggle-round-flat + label:after {
            top: 4px;
            left: 4px;
            bottom: 4px;
            width: 43%;
            background-color: var(--primary);
            border-radius: 52px;
            transition: margin .2s
        }

    .langSwitch input.check-toggle-round-flat:checked + label:after {
        margin-left: 21px
    }
/*# sourceMappingURL=global.css.map */


body {
    font-family: var(--arabic-font);
}

@media print {
    header, footer {
        display: none;
        direction: rtl;
    }

    #tableCodeTable {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        overflow: hidden;
    }

    .noprint {
        display: none;
    }
    /* إظهار العناصر التي ترغب في طباعتها */
    .printable {
        display: block;
        direction:rtl;
    }
    /* إخفاء العناصر التي لا ترغب في طباعتها */
    .non-printable {
        display: none;
    }
}
/*Alert CSS Classes*/
.alertActiveBackgroundColor {
    background: var(--alertActiveBackgroundColor) !important;
}
.icon-success {
    background-color: #28a745 !important;
}
.alertDangerBackgroundColor {
    background: var(--alertDangerBackgroundColor) !important;
}
.icon-Danger {
    background-color: #dc3545 !important;
}
.alertWarningBackgroundColor {
    background: var(--alertWarningBackgroundColor) !important;
}
.icon-warning {
    background-color: #ffc107 !important;
}