:root {
    --admin-default-color: #1c3faa;
    --user-default-color: #ed1f24;
    --primary-color: #e7002a;

    --dossier-color: #1c3faa;
    --financial-color: #1c3faa;
    --health-expert-color: #1c3faa;
    --audiometry-color: #1c3faa;
    --optometry-color: #1c3faa;
    --spirometry-color: #1c3faa;
    --examinations-color: #1c3faa;
    --ecg-color: #1c3faa;
    --tst-color: #1c3faa;
    --radiology-color: #1c3faa;
    --laboratory-color: #1c3faa;
    --addiction-color: #1c3faa;
    --consultation-color: #1c3faa;
    --specialist-color: #1c3faa;
    --accountancy-color: #1c3faa;
    --contract-color: #1c3faa;
    --reporting-color: #1c3faa;
    --organization-color: #1c3faa;

    --dashboard-dossier-card: #1c3faa;
    --dashboard-dossier-card-before: rgb(118, 150, 243);
    --dashboard-awaiting-print-dossier-card: #1c3faa;
    --dashboard-awaiting-print-dossier-card-before: rgb(118, 150, 243);
    --dashboard-incomplete-dossier-card: #1c3faa;
    --dashboard-incomplete-dossier-card-before: rgb(118, 150, 243);
    --dashboard-awaiting-referral-print-card: #1c3faa;
    --dashboard-awaiting-referral-print-card-before: rgb(118, 150, 243);
    --dashboard-awaiting-referral-answer-card: #1c3faa;
    --dashboard-awaiting-referral-answer-card-before: rgb(118, 150, 243);
    --dashboard-financial-card: #1c3faa;
    --dashboard-financial-card-before: rgb(118, 150, 243);
    --dashboard-health-expert-card: #1c3faa;
    --dashboard-health-expert-card-before: rgb(118, 150, 243);
    --dashboard-audiometry-card: #1c3faa;
    --dashboard-audiometry-card-before: rgb(118, 150, 243);
    --dashboard-optometry-card: #1c3faa;
    --dashboard-optometry-card-before: rgb(118, 150, 243);
    --dashboard-spirometry-card: #1c3faa;
    --dashboard-spirometry-card-before: rgb(118, 150, 243);
    --dashboard-examinations-card: #1c3faa;
    --dashboard-examinations-card-before: rgb(118, 150, 243);
    --dashboard-ecg-card: #1c3faa;
    --dashboard-ecg-card-before: rgb(118, 150, 243);
    --dashboard-tst-card: #1c3faa;
    --dashboard-tst-card-before: rgb(118, 150, 243);
    --dashboard-radiology-card: #1c3faa;
    --dashboard-radiology-card-before: rgb(118, 150, 243);
    --dashboard-laboratory-card: #1c3faa;
    --dashboard-laboratory-card-before: rgb(118, 150, 243);
    --dashboard-addiction-card: #1c3faa;
    --dashboard-addiction-card-before: rgb(118, 150, 243);
    --dashboard-consultation-card: #1c3faa;
    --dashboard-consultation-card-before: rgb(118, 150, 243);
    --dashboard-tst-card: #1c3faa;
    --dashboard-tst-card-before: rgb(118, 150, 243);
    --dashboard-radiology-card: #1c3faa;
    --dashboard-radiology-card-before: rgb(118, 150, 243);
    --dashboard-evaluation-card: #1c3faa;
    --dashboard-evaluation-card-before: rgb(118, 150, 243);
    --dashboard-specialist-card: #1c3faa;
    --dashboard-specialist-card-before: rgb(118, 150, 243);
    --dashboard-theme-card-1: #1c3faa;
    --dashboard-theme-card-1-before: rgb(118, 150, 243);
    --dashboard-theme-card-2: #1c3faa;
    --dashboard-theme-card-2-before: rgb(118, 150, 243);
    --dashboard-theme-card-3: #1c3faa;
    --dashboard-theme-card-3-before: rgb(118, 150, 243);
    --dashboard-theme-card-4: #1c3faa;
    --dashboard-theme-card-4-before: rgb(118, 150, 243);

    /* طب کار ابرانیان */
    /*
    --dossier-color: rgb(216, 1, 216);
    --financial-color: rgb(255, 123, 0);
    --health-expert-color: rgb(0, 153, 255);
    --audiometry-color: rgb(255, 0, 0);
    --optometry-color: rgb(0, 155, 155);
    --spirometry-color: rgb(255, 52, 136);
    --examinations-color: rgb(98, 0, 255);
    --ecg-color: rgb(27, 116, 0);
    --tst-color: rgb(155, 152, 16);
    --radiology-color: rgb(31, 128, 2);
    --laboratory-color: rgb(177, 9, 9);
    --addiction-color: rgb(217, 70, 239);
    --consultation-color: rgb(143, 107, 57);
    --specialist-color: rgb(77, 89, 175);
    --accountancy-color: rgb(155, 152, 16);
    --contract-color: rgb(2, 68, 122);
    --reporting-color: rgb(177, 49, 145);
    --organization-color: rgb(31, 128, 2);

    --dashboard-dossier-card-before: rgb(216, 1, 216, 0.4);
    --dashboard-dossier-card: rgb(216, 1, 216);
    --dashboard-awaiting-print-dossier-card-before: rgb(77, 89, 175, 0.4);
    --dashboard-awaiting-print-dossier-card: rgb(77, 89, 175);
    --dashboard-incomplete-dossier-card-before: rgb(217, 70, 239, 0.4);
    --dashboard-incomplete-dossier-card: rgb(217, 70, 239);
    --dashboard-awaiting-referral-print-card-before: rgba(36, 148, 2, 0.4);
    --dashboard-awaiting-referral-print-card: rgba(36, 148, 2);
    --dashboard-awaiting-referral-answer-card-before: rgba(187, 0, 0, 0.4);
    --dashboard-awaiting-referral-answer-card: rgba(187, 0, 0);
    --dashboard-financial-card-before: rgb(255, 123, 0, 0.4);
    --dashboard-financial-card: rgb(255, 123, 0);
    --dashboard-health-expert-card-before: rgb(0, 153, 255, 0.4);
    --dashboard-health-expert-card: rgb(0, 153, 255);
    --dashboard-audiometry-card-before: rgb(255, 0, 0, 0.4);
    --dashboard-audiometry-card: rgb(255, 0, 0);
    --dashboard-optometry-card-before: rgb(0, 155, 155, 0.4);
    --dashboard-optometry-card: rgb(0, 155, 155);
    --dashboard-spirometry-card-before: rgb(255, 52, 136, 0.4);
    --dashboard-spirometry-card: rgb(255, 52, 136);
    --dashboard-examinations-card-before: rgb(98, 0, 255, 0.4);
    --dashboard-examinations-card: rgb(98, 0, 255);
    --dashboard-ecg-card-before: rgb(27, 116, 0, 0.4);
    --dashboard-ecg-card: rgb(27, 116, 0);
    --dashboard-laboratory-card-before: rgb(177, 9, 9, 0.4);
    --dashboard-laboratory-card: rgb(177, 9, 9);
    --dashboard-addiction-card-before: rgb(217, 70, 239, 0.4);
    --dashboard-addiction-card: rgb(217, 70, 239);
    --dashboard-consultation-card-before: rgb(143, 107, 57, 0.4);
    --dashboard-consultation-card: rgb(143, 107, 57);
    --dashboard-specialist-card-before: rgb(77, 89, 175, 0.4);
    --dashboard-specialist-card: rgb(77, 89, 175);
    --dashboard-theme-card-1-before: rgb(98, 0, 255, 0.4);
    --dashboard-theme-card-1: rgb(98, 0, 255);
    --dashboard-theme-card-2-before: rgb(0, 155, 155, 0.4);
    --dashboard-theme-card-2: rgb(0, 155, 155);
    --dashboard-theme-card-3-before: rgb(0, 153, 255, 0.4);
    --dashboard-theme-card-3: rgb(0, 153, 255);
    --dashboard-theme-card-4-before: rgb(255, 0, 0, 0.4);
    --dashboard-theme-card-4: rgb(255, 0, 0);
    */
}

@media screen and (max-device-width: 680px) {
    body {
        -webkit-text-size-adjust: 100%;
    }
}

.default-font {
    font-family: IRANYekan-L, ui-monospace, SFMono-Regular, Menlo, Monaco,
        Consolas, Liberation Mono, Courier New, monospace;
}

.text-md {
    font-size: 15px;
}

/* BEGIN: dashboard */
.dashboard-dossier-card:before {
    background: #f9fafc;
}
.dashboard-dossier-card div.box {
    background-color: white;
    color: black;
}
.dashboard-dossier-card svg {
    stroke: rgb(128, 1, 128);
}

.dashboard-awaiting-print-dossier-card:before {
    background: #f9fafc;
}
.dashboard-awaiting-print-dossier-card div.box {
    background-color: white;
    color: black;
}
.dashboard-awaiting-print-dossier-card svg {
    stroke: rgb(186, 0, 186);
}

.dashboard-incomplete-dossier-card:before {
    background: #f9fafc;
}
.dashboard-incomplete-dossier-card div.box {
    background-color: white;
    color: black;
}
.dashboard-incomplete-dossier-card svg {
    stroke: rgb(216, 1, 216);
}

.dashboard-awaiting-referral-print-card:before {
    background: #f9fafc;
}
.dashboard-awaiting-referral-print-card div.box {
    background-color: white;
    color: black;
}
.dashboard-awaiting-referral-print-card svg {
    stroke: rgb(216, 1, 216);
}

.dashboard-awaiting-referral-answer-card:before {
    background: #f9fafc;
}
.dashboard-awaiting-referral-answer-card div.box {
    background-color: white;
    color: black;
}
.dashboard-awaiting-referral-answer-card svg {
    stroke: rgb(240, 71, 240);
}

.dashboard-financial-card:before {
    background: #f9fafc;
}
.dashboard-financial-card div.box {
    background-color: white;
    color: black;
}
.dashboard-financial-card svg {
    fill: rgb(252, 166, 252);
    stroke: rgb(252, 166, 252);
}

.dashboard-health-expert-card:before {
    background: #f9fafc;
}
.dashboard-health-expert-card div.box {
    background-color: white;
    color: black;
}
.dashboard-health-expert-card svg {
    fill: rgb(1, 41, 128);
    stroke: rgb(1, 41, 128);
}

.dashboard-audiometry-card:before {
    background: #f9fafc;
}
.dashboard-audiometry-card div.box {
    background-color: white;
    color: black;
}
.dashboard-audiometry-card svg {
    fill: rgb(0, 77, 186);
    stroke: rgb(0, 77, 186);
}

.dashboard-optometry-card:before {
    background: #f9fafc;
}
.dashboard-optometry-card div.box {
    background-color: white;
    color: black;
}
.dashboard-optometry-card svg {
    fill: rgb(1, 119, 216);
    stroke: rgb(1, 119, 216);
}

.dashboard-spirometry-card:before {
    background: #f9fafc;
}
.dashboard-spirometry-card div.box {
    background-color: white;
    color: black;
}
.dashboard-spirometry-card svg {
    fill: rgb(53, 140, 254);
    stroke: rgb(53, 140, 254);
}

.dashboard-examinations-card:before {
    background: #f9fafc;
}
.dashboard-examinations-card div.box {
    background-color: white;
    color: black;
}
.dashboard-examinations-card svg {
    fill: rgb(71, 141, 240);
    stroke: rgb(71, 141, 240);
}

.dashboard-ecg-card:before {
    background: #f9fafc;
}
.dashboard-ecg-card div.box {
    background-color: white;
    color: black;
}
.dashboard-ecg-card svg {
    fill: rgb(166, 198, 252);
    stroke: rgb(166, 198, 252);
}

.dashboard-laboratory-card:before {
    background: #f9fafc;
}
.dashboard-laboratory-card div.box {
    background-color: white;
    color: black;
}
.dashboard-laboratory-card svg {
    fill: rgb(0, 66, 3);
    stroke: rgb(0, 66, 3);
}

.dashboard-addiction-card:before {
    background: #f9fafc;
}
.dashboard-addiction-card div.box {
    background-color: white;
    color: black;
}
.dashboard-addiction-card svg {
    fill: rgb(1, 88, 14);
    stroke: rgb(1, 88, 14);
}

.dashboard-consultation-card:before {
    background: #f9fafc;
}
.dashboard-consultation-card div.box {
    background-color: white;
    color: black;
}
.dashboard-consultation-card svg {
    fill: rgb(0, 116, 18);
    stroke: rgb(0, 116, 18);
}

.dashboard-tst-card:before {
    background: #f9fafc;
}
.dashboard-tst-card div.box {
    background-color: white;
    color: black;
}
.dashboard-tst-card svg {
    fill: rgb(0, 168, 26);
    stroke: rgb(0, 168, 26);
}

.dashboard-radiology-card:before {
    background: #f9fafc;
}
.dashboard-radiology-card div.box {
    background-color: white;
    color: black;
}
.dashboard-radiology-card svg {
    fill: rgb(3, 230, 37);
    stroke: rgb(3, 230, 37);
}

.dashboard-evaluation-card:before {
    background: #f9fafc;
}
.dashboard-evaluation-card div.box {
    background-color: white;
    color: black;
}
.dashboard-evaluation-card svg {
    fill: rgb(97, 250, 120);
    stroke: rgb(97, 250, 120);
}

.dashboard-specialist-card:before {
    background: #f9fafc;
}
.dashboard-specialist-card div.box {
    background-color: white;
    color: black;
}
.dashboard-specialist-card svg {
    fill: rgb(148, 2, 2);
    stroke: rgb(148, 2, 2);
}

.dashboard-theme-card-1:before {
    background: #f9fafc;
}
.dashboard-theme-card-1 div.box {
    background-color: white;
    color: black;
}
.dashboard-theme-card-1 svg {
    stroke: rgb(1, 41, 128);
}

.dashboard-theme-card-2:before {
    background: #f9fafc;
}
.dashboard-theme-card-2 div.box {
    background-color: white;
    color: black;
}
.dashboard-theme-card-2 svg {
    stroke: rgb(0, 77, 186);
}

.dashboard-theme-card-3:before {
    background: #f9fafc;
}
.dashboard-theme-card-3 div.box {
    background-color: white;
    color: black;
}
.dashboard-theme-card-3 svg {
    stroke: rgb(1, 119, 216);
}

.dashboard-theme-card-4:before {
    background: #f9fafc;
}
.dashboard-theme-card-4 div.box {
    background-color: white;
    color: black;
}
.dashboard-theme-card-4 svg {
    stroke: rgb(53, 140, 254);
}
/* .dashboard-dossier-card:before {
    background: var(--dashboard-dossier-card-before);
}
.dashboard-dossier-card div.box {
    background-color: var(--dashboard-dossier-card);
    color: white;
}
.dashboard-dossier-card svg {
    stroke: white;
}

.dashboard-awaiting-print-dossier-card:before {
    background: var(--dashboard-awaiting-print-dossier-card-before);
}
.dashboard-awaiting-print-dossier-card div.box {
    background-color: var(--dashboard-awaiting-print-dossier-card);
    color: white;
}
.dashboard-awaiting-print-dossier-card svg {
    stroke: white;
}

.dashboard-incomplete-dossier-card:before {
    background: var(--dashboard-incomplete-dossier-card-before);
}
.dashboard-incomplete-dossier-card div.box {
    background-color: var(--dashboard-incomplete-dossier-card);
    color: white;
}
.dashboard-incomplete-dossier-card svg {
    stroke: white;
}

.dashboard-awaiting-referral-print-card:before {
    background: var(--dashboard-awaiting-referral-print-card-before);
}
.dashboard-awaiting-referral-print-card div.box {
    background-color: var(--dashboard-awaiting-referral-print-card);
    color: white;
}
.dashboard-awaiting-referral-print-card svg {
    stroke: white;
}

.dashboard-awaiting-referral-answer-card:before {
    background: var(--dashboard-awaiting-referral-answer-card-before);
}
.dashboard-awaiting-referral-answer-card div.box {
    background-color: var(--dashboard-awaiting-referral-answer-card);
    color: white;
}
.dashboard-awaiting-referral-answer-card svg {
    stroke: white;
}

.dashboard-financial-card:before {
    background: var(--dashboard-financial-card-before);
}
.dashboard-financial-card div.box {
    background-color: var(--dashboard-financial-card);
    color: white;
}
.dashboard-financial-card svg {
    fill: white;
    stroke: white;
}

.dashboard-health-expert-card:before {
    background: var(--dashboard-health-expert-card-before);
}
.dashboard-health-expert-card div.box {
    background-color: var(--dashboard-health-expert-card);
    color: white;
}
.dashboard-health-expert-card svg {
    fill: white;
    stroke: white;
}

.dashboard-audiometry-card:before {
    background: var(--dashboard-audiometry-card-before);
}
.dashboard-audiometry-card div.box {
    background-color: var(--dashboard-audiometry-card);
    color: white;
}
.dashboard-audiometry-card svg {
    fill: white;
    stroke: white;
}

.dashboard-optometry-card:before {
    background: var(--dashboard-optometry-card-before);
}
.dashboard-optometry-card div.box {
    background-color: var(--dashboard-optometry-card);
    color: white;
}
.dashboard-optometry-card svg {
    fill: white;
    stroke: white;
}

.dashboard-spirometry-card:before {
    background: var(--dashboard-spirometry-card-before);
}
.dashboard-spirometry-card div.box {
    background-color: var(--dashboard-spirometry-card);
    color: white;
}
.dashboard-spirometry-card svg {
    fill: white;
    stroke: white;
}

.dashboard-examinations-card:before {
    background: var(--dashboard-examinations-card-before);
}
.dashboard-examinations-card div.box {
    background-color: var(--dashboard-examinations-card);
    color: white;
}
.dashboard-examinations-card svg {
    fill: white;
    stroke: white;
}

.dashboard-ecg-card:before {
    background: var(--dashboard-ecg-card-before);
}
.dashboard-ecg-card div.box {
    background-color: var(--dashboard-ecg-card);
    color: white;
}
.dashboard-ecg-card svg {
    fill: white;
    stroke: white;
}

.dashboard-laboratory-card:before {
    background: var(--dashboard-laboratory-card-before);
}
.dashboard-laboratory-card div.box {
    background-color: var(--dashboard-laboratory-card);
    color: white;
}
.dashboard-laboratory-card svg {
    fill: white;
    stroke: white;
}

.dashboard-addiction-card:before {
    background: var(--dashboard-addiction-card-before);
}
.dashboard-addiction-card div.box {
    background-color: var(--dashboard-addiction-card);
    color: white;
}
.dashboard-addiction-card svg {
    fill: white;
    stroke: white;
}

.dashboard-consultation-card:before {
    background: var(--dashboard-consultation-card-before);
}
.dashboard-consultation-card div.box {
    background-color: var(--dashboard-consultation-card);
    color: white;
}
.dashboard-consultation-card svg {
    fill: white;
    stroke: white;
}

.dashboard-tst-card:before {
    background: var(--dashboard-tst-card-before);
}
.dashboard-tst-card div.box {
    background-color: var(--dashboard-tst-card);
    color: white;
}
.dashboard-tst-card svg {
    fill: white;
    stroke: white;
}

.dashboard-radiology-card:before {
    background: var(--dashboard-radiology-card-before);
}
.dashboard-radiology-card div.box {
    background-color: var(--dashboard-radiology-card);
    color: white;
}
.dashboard-radiology-card svg {
    fill: white;
    stroke: white;
}

.dashboard-evaluation-card:before {
    background: var(--dashboard-evaluation-card-before);
}
.dashboard-evaluation-card div.box {
    background-color: var(--dashboard-evaluation-card);
    color: white;
}
.dashboard-evaluation-card svg {
    fill: white;
    stroke: white;
}

.dashboard-specialist-card:before {
    background: var(--dashboard-specialist-card-before);
}
.dashboard-specialist-card div.box {
    background-color: var(--dashboard-specialist-card);
    color: white;
}
.dashboard-specialist-card svg {
    fill: white;
    stroke: white;
}

.dashboard-theme-card-1:before {
    background: var(--dashboard-theme-card-1-before);
}
.dashboard-theme-card-1 div.box {
    background-color: var(--dashboard-theme-card-1);
    color: white;
}
.dashboard-theme-card-1 svg {
    stroke: white;
}

.dashboard-theme-card-2:before {
    background: var(--dashboard-theme-card-2-before);
}
.dashboard-theme-card-2 div.box {
    background-color: var(--dashboard-theme-card-2);
    color: white;
}
.dashboard-theme-card-2 svg {
    stroke: white;
}

.dashboard-theme-card-3:before {
    background: var(--dashboard-theme-card-3-before);
}
.dashboard-theme-card-3 div.box {
    background-color: var(--dashboard-theme-card-3);
    color: white;
}
.dashboard-theme-card-3 svg {
    stroke: white;
}

.dashboard-theme-card-4:before {
    background: var(--dashboard-theme-card-4-before);
}
.dashboard-theme-card-4 div.box {
    background-color: var(--dashboard-theme-card-4);
    color: white;
}
.dashboard-theme-card-4 svg {
    stroke: white;
} */
/* END: dashboard */

/* BEGIN: side menu style */
.side-nav > ul > li > a .side-menu__icon {
    border-radius: 50%;
    padding: 2px;
}

.side-nav > ul > li > a:not(.side-menu--active) .side-menu__icon {
    background-color: white;
}
.side-nav > ul > li > a:not(.side-menu--active) .side-menu__icon svg {
    stroke: var(--admin-default-color);
}

/* active */
.side-nav > ul > li > a.side-menu--active .side-menu__icon {
    background-color: var(--admin-default-color);
}
.side-nav > ul > li > a.side-menu--active .side-menu__icon svg {
    stroke: white;
}

/* dossier icon */
.side-nav > ul > li > a.side-menu--active .side-menu__icon.dossier-menu__icon {
    background-color: var(--dossier-color) !important;
}
.side-nav
    > ul
    > li
    > a.side-menu--active
    .side-menu__icon.dossier-menu__icon
    svg {
    stroke: white !important;
    fill: white !important;
}
.side-nav
    > ul
    > li
    > a:not(.side-menu--active)
    .side-menu__icon.dossier-menu__icon
    svg {
    stroke: var(--dossier-color) !important;
    fill: var(--dossier-color) !important;
}

/* financial icon */
.side-nav
    > ul
    > li
    > a.side-menu--active
    .side-menu__icon.financial-menu__icon {
    background-color: var(--financial-color) !important;
}
.side-nav
    > ul
    > li
    > a.side-menu--active
    .side-menu__icon.financial-menu__icon
    svg {
    stroke: white !important;
    fill: white !important;
}
.side-nav
    > ul
    > li
    > a:not(.side-menu--active)
    .side-menu__icon.financial-menu__icon
    svg {
    stroke: var(--financial-color) !important;
    fill: var(--financial-color) !important;
}

/* health expert icon */
.side-nav
    > ul
    > li
    > a.side-menu--active
    .side-menu__icon.health-expert-menu__icon {
    background-color: var(--health-expert-color) !important;
}
.side-nav
    > ul
    > li
    > a.side-menu--active
    .side-menu__icon.health-expert-menu__icon
    svg {
    stroke: white !important;
    fill: white !important;
}
.side-nav
    > ul
    > li
    > a:not(.side-menu--active)
    .side-menu__icon.health-expert-menu__icon
    svg {
    stroke: var(--health-expert-color) !important;
    fill: var(--health-expert-color) !important;
}

/* audiometry icon */
.side-nav
    > ul
    > li
    > a.side-menu--active
    .side-menu__icon.audiometry-menu__icon {
    background-color: var(--audiometry-color) !important;
}
.side-nav
    > ul
    > li
    > a.side-menu--active
    .side-menu__icon.audiometry-menu__icon
    svg {
    stroke: white !important;
    fill: white !important;
}
.side-nav
    > ul
    > li
    > a:not(.side-menu--active)
    .side-menu__icon.audiometry-menu__icon
    svg {
    stroke: var(--audiometry-color) !important;
    fill: var(--audiometry-color) !important;
}

/* optometry icon */
.side-nav
    > ul
    > li
    > a.side-menu--active
    .side-menu__icon.optometry-menu__icon {
    background-color: var(--optometry-color) !important;
}
.side-nav
    > ul
    > li
    > a.side-menu--active
    .side-menu__icon.optometry-menu__icon
    svg {
    stroke: white !important;
    fill: white !important;
}
.side-nav
    > ul
    > li
    > a:not(.side-menu--active)
    .side-menu__icon.optometry-menu__icon
    svg {
    stroke: var(--optometry-color) !important;
    fill: var(--optometry-color) !important;
}

/* spirometry icon */
.side-nav
    > ul
    > li
    > a.side-menu--active
    .side-menu__icon.spirometry-menu__icon {
    background-color: var(--spirometry-color) !important;
}
.side-nav
    > ul
    > li
    > a.side-menu--active
    .side-menu__icon.spirometry-menu__icon
    svg {
    stroke: white !important;
    fill: white !important;
}
.side-nav
    > ul
    > li
    > a:not(.side-menu--active)
    .side-menu__icon.spirometry-menu__icon
    svg {
    stroke: var(--spirometry-color) !important;
    fill: var(--spirometry-color) !important;
}

/* examinations icon */
.side-nav
    > ul
    > li
    > a.side-menu--active
    .side-menu__icon.examinations-menu__icon {
    background-color: var(--examinations-color) !important;
}
.side-nav
    > ul
    > li
    > a.side-menu--active
    .side-menu__icon.examinations-menu__icon
    svg {
    stroke: white !important;
    fill: white !important;
}
.side-nav
    > ul
    > li
    > a:not(.side-menu--active)
    .side-menu__icon.examinations-menu__icon
    svg {
    stroke: var(--examinations-color) !important;
    fill: var(--examinations-color) !important;
}

/* ecg icon */
.side-nav > ul > li > a.side-menu--active .side-menu__icon.ecg-menu__icon {
    background-color: var(--ecg-color) !important;
}
.side-nav > ul > li > a.side-menu--active .side-menu__icon.ecg-menu__icon svg {
    stroke: white !important;
    fill: white !important;
}
.side-nav
    > ul
    > li
    > a:not(.side-menu--active)
    .side-menu__icon.ecg-menu__icon
    svg {
    stroke: var(--ecg-color) !important;
    fill: var(--ecg-color) !important;
}

/* tst icon */
.side-nav > ul > li > a.side-menu--active .side-menu__icon.tst-menu__icon {
    background-color: var(--tst-color) !important;
}
.side-nav > ul > li > a.side-menu--active .side-menu__icon.tst-menu__icon svg {
    stroke: white !important;
    fill: white !important;
}
.side-nav
    > ul
    > li
    > a:not(.side-menu--active)
    .side-menu__icon.tst-menu__icon
    svg {
    stroke: var(--tst-color) !important;
    fill: var(--tst-color) !important;
}

/* radiology icon */
.side-nav > ul > li > a.side-menu--active .side-menu__icon.radiology-menu__icon {
    background-color: var(--radiology-color) !important;
}
.side-nav > ul > li > a.side-menu--active .side-menu__icon.radiology-menu__icon svg {
    stroke: white !important;
    fill: white !important;
}
.side-nav
    > ul
    > li
    > a:not(.side-menu--active)
    .side-menu__icon.radiology-menu__icon
    svg {
    stroke: var(--radiology-color) !important;
    fill: var(--radiology-color) !important;
}

/* laboratory icon */
.side-nav
    > ul
    > li
    > a.side-menu--active
    .side-menu__icon.laboratory-menu__icon {
    background-color: var(--laboratory-color) !important;
}
.side-nav
    > ul
    > li
    > a.side-menu--active
    .side-menu__icon.laboratory-menu__icon
    svg {
    stroke: white !important;
    fill: white !important;
}
.side-nav
    > ul
    > li
    > a:not(.side-menu--active)
    .side-menu__icon.laboratory-menu__icon
    svg {
    stroke: var(--laboratory-color) !important;
    fill: var(--laboratory-color) !important;
}

/* addiction icon */
.side-nav
    > ul
    > li
    > a.side-menu--active
    .side-menu__icon.addiction-menu__icon {
    background-color: var(--addiction-color) !important;
}
.side-nav
    > ul
    > li
    > a.side-menu--active
    .side-menu__icon.addiction-menu__icon
    svg {
    stroke: white !important;
    fill: white !important;
}
.side-nav
    > ul
    > li
    > a:not(.side-menu--active)
    .side-menu__icon.addiction-menu__icon
    svg {
    stroke: var(--addiction-color) !important;
    fill: var(--addiction-color) !important;
}

/* consultation icon */
.side-nav
    > ul
    > li
    > a.side-menu--active
    .side-menu__icon.consultation-menu__icon {
    background-color: var(--consultation-color) !important;
}
.side-nav
    > ul
    > li
    > a.side-menu--active
    .side-menu__icon.consultation-menu__icon
    svg {
    stroke: white !important;
    fill: white !important;
}
.side-nav
    > ul
    > li
    > a:not(.side-menu--active)
    .side-menu__icon.consultation-menu__icon
    svg {
    stroke: var(--consultation-color) !important;
    fill: var(--consultation-color) !important;
}

/* specialist icon */
.side-nav
    > ul
    > li
    > a.side-menu--active
    .side-menu__icon.specialist-menu__icon {
    background-color: var(--specialist-color) !important;
}
.side-nav
    > ul
    > li
    > a.side-menu--active
    .side-menu__icon.specialist-menu__icon
    svg {
    stroke: white !important;
    fill: white !important;
}
.side-nav
    > ul
    > li
    > a:not(.side-menu--active)
    .side-menu__icon.specialist-menu__icon
    svg {
    stroke: var(--specialist-color) !important;
    fill: var(--specialist-color) !important;
}

/* accountancy icon */
.side-nav
    > ul
    > li
    > a.side-menu--active
    .side-menu__icon.accountancy-menu__icon {
    background-color: var(--accountancy-color) !important;
}
.side-nav
    > ul
    > li
    > a.side-menu--active
    .side-menu__icon.accountancy-menu__icon
    svg {
    stroke: white !important;
}
.side-nav
    > ul
    > li
    > a:not(.side-menu--active)
    .side-menu__icon.accountancy-menu__icon
    svg {
    stroke: var(--accountancy-color) !important;
    /* it is a <i> */
    /* fill: var(--accountancy-colo) !important; */
}

/* contract icon */
.side-nav > ul > li > a.side-menu--active .side-menu__icon.contract-menu__icon {
    background-color: var(--contract-color) !important;
}
.side-nav
    > ul
    > li
    > a.side-menu--active
    .side-menu__icon.contract-menu__icon
    svg {
    stroke: white !important;
    fill: white !important;
}
.side-nav
    > ul
    > li
    > a:not(.side-menu--active)
    .side-menu__icon.contract-menu__icon
    svg {
    stroke: var(--contract-color) !important;
    fill: var(--contract-color) !important;
}

/* reporting icon */
.side-nav
    > ul
    > li
    > a.side-menu--active
    .side-menu__icon.reporting-menu__icon {
    background-color: var(--reporting-color) !important;
}
.side-nav
    > ul
    > li
    > a.side-menu--active
    .side-menu__icon.reporting-menu__icon
    svg {
    stroke: white !important;
}
.side-nav
    > ul
    > li
    > a:not(.side-menu--active)
    .side-menu__icon.reporting-menu__icon
    svg {
    stroke: var(--reporting-color) !important;
    /* it is a <i> */
    /* fill: var(--reporting-colo) !important; */
}

/* organization icon */
.side-nav
    > ul
    > li
    > a.side-menu--active
    .side-menu__icon.organization-menu__icon {
    background-color: var(--organization-color) !important;
}
.side-nav
    > ul
    > li
    > a.side-menu--active
    .side-menu__icon.organization-menu__icon
    svg {
    stroke: white !important;
    fill: white !important;
}
.side-nav
    > ul
    > li
    > a:not(.side-menu--active)
    .side-menu__icon.organization-menu__icon
    svg {
    stroke: var(--organization-color) !important;
    fill: var(--organization-color) !important;
}
/* END: side menu style */

.bg-hematology {
    background-color: #dc2626;
    color: white;
}
.bg-blood-biochemistry {
    background-color: #d946ef;
    color: white;
}
.bg-immunology {
    background-color: #818cf8;
    color: white;
}
.bg-hormones {
    background-color: #039b3b;
    color: white;
}
.bg-serology {
    background-color: #ff3488;
    color: white;
}
.bg-urine {
    background-color: #facc15;
    /* color: white; */
}
.bg-bacteriology {
    background-color: #644600;
    color: white;
}
.bg-stool {
    background-color: #a16207;
    color: white;
}
.bg-parasitology {
    background-color: #925e97;
    color: white !important;
}

.grid-rows-7{
    grid-template-rows: repeat(7, minmax(0, 1fr));
}

/* this style in for when open modals */
.main {
    padding-right: 32px !important;
}

.print-page-space {
    height: 7.2mm; /* Set the desired top margin height */
}

@media print {
    html, body {
        background-color: white !important;
        width: 100vw !important;
    }
    .no-print {
        display: none;
    }
    .content {
        border: none !important; /* remove border when print page */
    }
    #final-theory-text {
        background-color: white !important;
        border: 1px solid black !important;
    }
}

.text-size-print {
    font-size: 0.75rem !important;
}

.unicode-bidi {
    unicode-bidi: plaintext;
}

.private-tooltip {
    position: relative;
}

.private-tooltip .tooltiptext {
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    width: max-content;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    font-size: 13px;

    /* Position the tooltip */
    position: absolute;
    z-index: 100;
    bottom: 105%;
    left: 0;
    transform: translateX(-30%);
    /* margin-left: -60px; */
}

.private-tooltip:hover .tooltiptext {
    visibility: visible;
}

.tab-content .tab-pane,
.\!tab-content .\!tab-pane {
    transition: none !important;
    visibility: unset !important;
    display: none !important;
    position: unset !important;
}

.tab-content .tab-pane.active,
.\!tab-content .\!tab-pane.\!active {
    transition: none !important;
    visibility: unset !important;
    display: block !important;
    position: unset !important;
}

.form-control:disabled,
.form-control[readonly] {
    cursor: default;
    --tw-bg-opacity: 1;
    background-color: unset;
}

div.top-bar svg#notification-bell-icon {
    animation: shake_bell 1.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both
        infinite;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

@keyframes shake_bell {
    .76%,
    6.84% {
        transform: translate3d(-1px, 0, 0);
    }
    1.52%,
    6.08% {
        transform: translate3d(4px, 0, 0);
    }
    2.28%,
    3.8%,
    5.32% {
        transform: translate3d(-6px, 0, 0);
    }
    3.04%,
    4.56% {
        transform: translate3d(6px, 0, 0);
    }
}

nav[role="navigation"] {
    margin-top: 20px;
    direction: ltr;
}

nav[role="navigation"]:last-child div {
    justify-content: center;
}

nav[role="navigation"]:last-child div:first-child {
    display: none;
}

nav[role="navigation"] span[aria-current="page"] > span {
    background: rgba(0 0 0 / 0.1);
}

.modal {
    padding-left: 0 !important;
}

@media (min-width: 640px) {
    .modal .modal-dialog.modal-fullscreen,
    .modal .modal-dialog.modal-2xl,
    .modal .modal-dialog.modal-3xl {
        width: 600px;
    }
}

@media (min-width: 1024px) {
    .modal .modal-dialog.modal-fullscreen {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    .modal .modal-dialog.modal-fullscreen .modal-content {
        height: auto;
        min-height: 100%;
        border-radius: 0;
    }

    .modal .modal-dialog.modal-2xl {
        width: 1200px;
    }
    .modal .modal-dialog.modal-3xl {
        width: 1500px;
    }
}