:root {
    --primary-color: #0a55a2;
    --primary-color-light: rgba(10,85,162,0.125);
    --primary-color-variant: #041845;
    --gradient-green-1: #003d2A;
    --body-color: #EFEFEF;
    --success-default-1: #5CB85C;
    --success-default-2: #499349;
    --success-default-5: #6cbf6c;
    --action-color-1: #9f9fa0;
    --action-color-2: #c3c3c4;
    --action-color-3: #e7e7e7;
    --action-color-4: #7f7f80;
    --text-color-1: #0a55a2;
    --text-color-2: #212025;
    --text-color-3: #585564;
    --text-color-4: #7d798a;
    --text-color-5: #9793a1;
    --text-size-0: 20px;
    --text-size-1: 18px;
    --text-size-2: 16px;
    --text-size-3: 15px;
    --text-size-4: 14px;
    --text-size-5: 13px;
    --text-size-6: 12px;
    --tab-corner-radius: 9px;
    --primary-color-variant-2: #ceddec;
    --tab-unselected-color: #ebebeb;
    --tab-unselected-border-color: rgba(164,164,164,0.65);
}

@font-face {
    font-family: PT Sans;
    src: url('../fonts/ptsans.ttf');
}

@font-face {
    font-family: PT Sans;
    font-weight: bold;
    src: url('../fonts/ptsans_bold.ttf');
}

@font-face {
    font-family: PT Sans;
    font-style: italic;
    src: url('../fonts/ptsans_italic.ttf');
}

@font-face {
    font-family: PT Sans;
    font-weight: bold;
    font-style: italic;
    src: url('../fonts/ptsans_bold_italic.ttf');
}

@font-face {
    font-family: Grandview;
    src: url('../fonts/grandview.ttf');
}

@font-face {
    font-family: Grandview;
    src: url('../fonts/grandview_light.ttf');
	font-weight: 200;
}

@font-face {
    font-family: Grandview;
    src: url('../fonts/grandview_light_italic.ttf');
	font-style: italic;
	font-weight: 200;
}

@font-face {
    font-family: Grandview;
    font-weight: bold;
    src: url('../fonts/grandview_bold.ttf');
}

@font-face {
    font-family: Grandview;
    font-style: italic;
    src: url('../fonts/grandview_italic.ttf');
}

@font-face {
    font-family: Grandview;
    font-weight: bold;
    font-style: italic;
    src: url('../fonts/grandview_bold_italic.ttf');
} 


* {
    font-family: 'Grandview' !important;
}

body {
    background-color: #b2b2b2;
    background-size: 142.5px 152.8px;
	background-image: url('../../assets/img/backgrounds/pattern_08.png') !important;
}

.menu-item.active:hover {
    background-color: #ffffff !important;
}

.menu-item {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
}

    .menu-item:hover {
        background-color: var(--primary-color-light) !important;
        transition: none !important;
    }

    .menu-item.active > .menu-link {
        margin-top: 0px !important;
        margin-bottom: 0px !important;
        margin-left: 0px !important;
        margin-right: 0px !important;
        transition: none !important;
    }

        .menu-item.active > .menu-link:hover {
            background: linear-gradient(72.47deg, #0A55A2 22.16%, rgba(10, 85, 162, 0.7) 76.47%) !important;
            -webkit-transition: none !important;
            transition: none !important;
        }

.menu-link {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    transition: none !important;
}

    .menu-link:hover {
        background: none !important;
        -webkit-transition: none !important;
        transition: none !important;
    }

.menu-item.active > .menu-link > div {
    color: #ffffff !important;
    font-size: var(--text-size-3) !important;
    font-weight: 400 !important;
}

.menu-item > .menu-link > div {
    color: var(--text-color-3) !important;
    font-size: var(--text-size-3) !important;
    font-weight: 400 !important;
}

.hr-breadcrumb {
    background-color: var(--text-color-2) !important;
}

.card-header {
    color: var(--text-color-1) !important;
    font-size: var(--text-size-1) !important;
    font-weight: 600 !important;
}

.card-title {
    color: var(--text-color-1) !important;
    font-size: var(--text-size-1) !important;
    font-weight: 600 !important;
}

.card-subtitle {
    color: var(--text-color-1) !important;
    font-size: var(--text-size-1) !important;
    font-weight: 600 !important;
}

.form-label {
    color: var(--text-color-1) !important;
    font-size: var(--text-size-2) !important;
    font-weight: 600 !important;
}

input.form-control {
    color: var(--text-color-2) !important;
    font-size: var(--text-size-3) !important;
    font-weight: 400 !important;
    border-color: var(--text-color-5) !important;
}

    input.form-control:focus {
        color: var(--text-color-2) !important;
        font-size: var(--text-size-3) !important;
        font-weight: 400 !important;
        border-color: var(--primary-color) !important;
        box-shadow: 0 0 0 0.25rem rgba(10,85,162,0.25) !important
    }

select.form-select {
    color: var(--text-color-2) !important;
    font-size: var(--text-size-3) !important;
    font-weight: 400 !important;
    border-color: var(--text-color-5) !important;
}

    select.form-select:focus {
        color: var(--text-color-2) !important;
        font-size: var(--text-size-3) !important;
        font-weight: 400 !important;
        border-color: var(--primary-color) !important;
        box-shadow: 0 0 0 0.25rem rgba(10,85,162,0.25) !important
    }

option {
    font-family: 'Grandview' !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.table th {
    letter-spacing: 0px;
    text-transform: capitalize;
    font-size: var(--text-size-4) !important;
}

.table > tbody > tr > td > div > div > p {
    color: var(--text-color-1);
    letter-spacing: 0px;
    text-transform: capitalize;
    font-size: var(--text-size-5) !important;
}

.table > tbody > tr > td > div > div > small {
    color: var(--text-color-4) !important;
    letter-spacing: 0px;
    font-size: var(--text-size-6) !important;
}

.table > tbody > tr > td > div > p {
    color: var(--text-color-3);
    letter-spacing: 0px;
    text-transform: capitalize;
    font-size: var(--text-size-5) !important;
}

.table > tbody > tr > td > div > small {
    color: var(--text-color-4) !important;
    letter-spacing: 0px;
    text-transform: capitalize;
    font-size: var(--text-size-6) !important;
}

p.fw-light {
    color: #000000 !important;
    font-weight: 600 !important;
}

.fw-light > a {
    color: var(--primary-color-variant) !important;
    font-weight: 600 !important;
}

    .fw-light > a:hover {
        color: #2158BF !important;
        font-weight: 600 !important;
    }

.swal2-container {
    z-index: 1100 !important;
}

.shadow {
    box-shadow: 0rem 0.25rem 0.5rem 0.15rem rgba(32,32,32,0.35) !important;
}

.shadow-xxl {
    box-shadow: 0rem 0.25rem 0.5rem 0.15rem rgba(32,32,32,0.35) !important;
}

.shadow-side {
    box-shadow: 0rem 0.25rem 0.5rem 0.05rem rgba(32,32,32,0.35) !important;
}

.z-4 {
    z-index: 4 !important;
}

.nav-item {
    z-index: 0 !important;
}

.btn {
    font-size: var(--text-size-5) !important;
    font-weight: 400 !important;
    padding: 8px 14px !important;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    transition: all 0s ease-in-out;
}

    .btn > span {
        font-size: var(--text-size-5) !important;
        font-weight: 400 !important;
    }

.btn-shadow {
    box-shadow: 0rem 0.25rem 0.25rem 0.05rem rgba(0,0,0,0.35) !important
}

.btn-success {
    color: #fff;
    background-color: #5cb85c;
    background-image: linear-gradient(to bottom,var(--success-default-1) 0%,var(--success-default-2) 100%);
    background-repeat: repeat-x;
    border-color: #408040;
    text-shadow: 0px 1px 0px rgba(150, 150, 150, 1);
}

    .btn-success:hover {
        background: linear-gradient(to bottom, var(--success-default-5) 0%,var(--success-default-1) 100%);
    }

.btn-danger {
    color: #fff;
    background-color: #d9534f;
    background-image: linear-gradient(to bottom,#d9534f 0%,#ad423f 100%);
    background-repeat: repeat-x;
    border-color: #973a37;
    text-shadow: 0px 1px 0px rgba(150, 150, 150, 1);
}

    /*.btn-danger:hover {
        background: linear-gradient(0deg, rgba(217,83,79,1) 0%, rgba(189,103,101,1) 100%);
        border: 1px solid #e00b15;
    }*/

    .btn-danger:hover {
        background: linear-gradient(0deg, rgba(189,103,101,1) 0%, rgba(189,103,101,1) 100%);
        border: 1px solid #e00b15;
    }

    .btn-danger:focus {
        box-shadow: 0 0 0 0.2rem rgba(151,58,55, 0.7) !important;
    }

.btn-primary {
    color: #fff;
    background-color: #337ab7;
    background-image: linear-gradient(to bottom, #2266ab 0%, #084481 100%);
    background-repeat: repeat-x;
    border-color: #235580;
}

    .btn-primary:hover {
        color: #fff !important;
        background-color: #4787be !important;
        background-image: linear-gradient(to bottom, #4787be 0%, #337ab7 100%) !important;
        border-color: #235580 !important;
    }

    .btn-primary:focus {
        box-shadow: 0 0 0 0.2rem rgba(35,85,128, 0.7) !important;
        color: #ffffff !important;
    }

    .btn-primary:disabled, btn-primary[disabled] {
        border: 1px solid #999999;
        background-color: #cccccc;
        background-image: none;
        color: #666666;
    }

.btn-secondary {
    background: linear-gradient(0deg, var(--action-color-1) 0%, var(--action-color-2) 11%, var(--action-color-3) 100%);
    color: var(--text-color-3);
    border-color: #808080;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

    .btn-secondary:hover {
        background: linear-gradient(to bottom, var(--action-color-1) 0%, var(--action-color-4) 100%);
        color: var(--text-color-2) !important;
        border-color: #808080;
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        background-repeat: no-repeat;
    }

    .btn-secondary:focus {
        box-shadow: 0 0 0 0.2rem rgba(159,159,160, 0.8) !important;
        color: var(--text-color-2) !important;
    }

.btn-warning {
    color: #fff;
    background-color: #f0ad4e;
    background-image: linear-gradient(to bottom, #f0ad4e 0%,#c08a3e 100%);
    background-repeat: repeat-x;
    border-color: #a87936;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    text-shadow: 0px 1px 0px rgba(150, 150, 150, 1);
}

    .btn-warning:hover {
        background: linear-gradient(to bottom, #99600f 0%, #99600f 100%);
        border: 1px solid #CE9A01;
    }

    .btn-warning:focus {
        box-shadow: 0 0 0 0.2rem rgba(241,181,95, 0.8) !important;
        background: linear-gradient(to bottom, #f1b55f 0%, #f0ad4e 100%);
        border: 1px solid #CE9A01;
    }

.btn-action {
    background-color: var(--action-color-1) !important;
    background: linear-gradient(0deg, var(--action-color-4) 0%, var(--action-color-2) 66%, var(--action-color-3) 100%);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--text-color-2);
    border-color: var(--action-color-4);
}

    /*.btn-action:hover {
        background: linear-gradient(to bottom, var(--action-color-4) 0%, var(--action-color-1) 100%);
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        color: #000;
        border-color: var(--action-color-4);
    }*/

    .btn-action:hover {
        background: linear-gradient(to bottom, var(--action-color-1) 0%, var(--action-color-1) 100%);
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        color: #000;
        border-color: var(--action-color-4);
    }

    .btn-action:focus {
        box-shadow: 0 0 0 0.2rem rgba(159,159,160, 0.8) !important;
        border-color: var(--action-color-4);
        color: var(--text-color-2) !important;
    }

.btn-outline-danger {
    color: #ad423f;
    border-color: #ad423f;
}

.btn-outline-warning {
    color: #c08a3e;
    border-color: #c08a3e;
}

    .btn-outline-warning:hover {
        background-color: rgba(192,138,62,0.2) !important;
        color: #c08a3e !important;
        border-color: #c08a3e !important;
    }

.fullwidth {
    width: 100% !important;
}

.round-container {
    width: 144px;
    height: 144px;
    background-color: #0A55A2;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.alert-primary {
    border-style: solid;
    border-color: #0a55a2;
    border-width: 1px;
    background-color: #b5cce3;
    color: #0a55a2;
}

.alert-success {
    border-color: #377537;
    border-width: 1px;
    background-color: #99f099;
    color: #377537;
}

.alert-danger {
    border-color: #811f1d;
    border-width: 1px;
    background-color: #efaeac;
    color: #811f1d;
}

.alert-warning {
    border-color: #99600f;
    border-width: 1px;
    background-color: #ffe2ba;
    color: #99600f;
}

.alert-info {
    border-color: #30444b;
    border-width: 1px;
    background-color: #a9e5fa;
    color: #30444b;
}

.hr-sidebar {
    margin-top: 0 !important;
    border: 0.1em solid green !important;
    margin-bottom: 0 !important;
}

.avatar-xl {
    width: auto;
    height: auto;
}

    .avatar-xl > img {
        object-fit: fill;
        width: 144px;
        height: 144px;
    }

.avatar-navbar {
    width: 2.375rem;
    height: 2.375rem;
}

    .avatar-navbar > img {
        object-fit: fill;
        width: 2.375rem;
        height: 2.375rem;
    }

.nav-link {
    transition: color 0s ease-in-out, background-color 0s ease-in-out, border-color 0s ease-in-out;
}

.nav-tabs[role="tablist"] {
    width: fit-content;
    background: none !important;
    border-top-left-radius: var(--tab-corner-radius) !important;
    border-top-right-radius: var(--tab-corner-radius) !important;
}

.nav-tabs {
    border-top-left-radius: var(--tab-corner-radius) !important;
    border-top-right-radius: var(--tab-corner-radius) !important;
}

    .nav-tabs .nav-link {
        border: var(--bs-nav-tabs-border-width) solid transparent !important;
    }

    .nav-tabs > .nav-item > .nav-link {
        padding-top: .7rem !important;
        padding-bottom: .7rem !important;
    }

        .nav-tabs > .nav-item > .nav-link.active {
            background-color: #ffffff !important;
            box-shadow: none !important;
            border-top-left-radius: var(--tab-corner-radius) !important;
            border-top-right-radius: var(--tab-corner-radius) !important;
            color: var(--primary-color) !Important;
            font-weight: bold;
        }

        .nav-tabs > .nav-item > .nav-link:not(.active) {
            background-color: var(--tab-unselected-color) !important;
            border-top-left-radius: var(--tab-corner-radius) !important;
            border-top-right-radius: var(--tab-corner-radius) !important;
            border: 1px solid var(--tab-unselected-border-color) !important;
        }

            .nav-tabs > .nav-item > .nav-link:not(.active):hover {
                background-color: var(--primary-color-variant-2) !important;
                border-top-left-radius: var(--tab-corner-radius) !important;
                border-top-right-radius: var(--tab-corner-radius) !important;
                color: var(--primary-color) !Important;
            }
.card-header > .header-text {
    color: #fff !important;
}

.card-header > .dt-action-buttons {
    margin-top: 0.25rem !important;
    margin-right: 0.25rem !important;
}

    .card-header > .dt-action-buttons > .dt-buttons > .btn-group > .btn.btn-secondary.buttons-collection.dropdown-toggle.btn-label-primary {
        border-radius: inherit;
        border-color: #808080;
    }

        .card-header > .dt-action-buttons > .dt-buttons > .btn-group > .btn.btn-secondary.buttons-collection.dropdown-toggle.btn-label-primary:hover {
            background: linear-gradient(to bottom, var(--action-color-1) 0%, var(--action-color-4) 100%) !important;
            color: #000 !important;
            border-color: #808080 !important;
            background-size: cover !important;
            background-position: center !important;
            background-attachment: fixed !important;
            background-repeat: no-repeat !important;
        }

        .card-header > .dt-action-buttons > .dt-buttons > .btn-group > .btn.btn-secondary.buttons-collection.dropdown-toggle.btn-label-primary:focus {
            background: linear-gradient(0deg, var(--action-color-1) 0%, var(--action-color-2) 11%, var(--action-color-3) 100%);
            box-shadow: 0 0 0 0.2rem rgba(159,159,160, 0.8) !important;
            color: var(--text-color-2) !important;
        }

html:not([dir="rtl"]) .btn-group > .btn-group:first-child > .btn:not([class*="btn-outline-"]):first-child, html:not([dir="rtl"]) .input-group > .btn:not([class*="btn-outline-"]):first-child, html:not([dir="rtl"]) :not(.btn-group):not(.input-group) > .btn-group > .btn:not([class*="btn-outline-"]):first-child, html:not([dir="rtl"]) .input-group > .btn-group:first-child > .btn:not([class*="btn-outline-"]):first-child {
    border-left-color: inherit;
}

html:not([dir="rtl"]) .btn-group > .btn-group:last-child > .btn:not([class*="btn-outline-"]):last-of-type, html:not([dir="rtl"]) .input-group > .btn:not([class*="btn-outline-"]):last-of-type, html:not([dir="rtl"]) :not(.btn-group):not(.input-group) > .btn-group > .btn:not([class*="btn-outline-"]):last-of-type, html:not([dir="rtl"]) .input-group > .btn-group:last-child > .btn:not([class*="btn-outline-"]):last-of-type {
    border-right-color: inherit;
}

.dt-buttons.btn-group button {
    border-color: inherit;
    border-radius:  inherit;
}


.horizontal-timeline .items {
    border-top: 3px solid #e9ecef;
}

    .horizontal-timeline .items .items-list {
        display: block;
        position: relative;
        text-align: center;
        padding-top: 70px;
        margin-right: 0;
    }

        .horizontal-timeline .items .items-list:before {
            content: "";
            position: absolute;
            height: 36px;
            border-right: 2px dashed #dee2e6;
            top: 0;
        }

        .horizontal-timeline .items .items-list .event-date {
            position: absolute;
            top: 36px;
            left: 0;
            right: 0;
            width: 120px;
            margin: 0 auto;
            font-size: 0.9rem;
            padding-top: 8px;
        }

@media (min-width: 1140px) {
    .horizontal-timeline .items .items-list {
        display: inline-block;
        width: 24%;
        padding-top: 45px;
    }

        .horizontal-timeline .items .items-list .event-date {
            top: -40px;
        }
}

.round-container {
    width: 100px; /* Adjust width as needed */
    height: 100px; /* Adjust height as needed */
    background-color: #0A55A2; /* Set background color */
    border-radius: 50%; /* Make the container round */
    display: flex; /* Optional: Use flexbox to center content */
    justify-content: center; /* Optional: Align content horizontally */
    align-items: center; /* Optional: Align content vertically */
}

.bs-stepper-title {
    word-wrap: break-word;
}

.round-top-right {
    border-top-right-radius: 0.375rem !important;
}

.bs-stepper-title {
    white-space: break-spaces;
}

.bs-stepper-subtitle {
    white-space: break-spaces;
}

.fullwidth {
    width: 100%;
}

.hover-apply {
    display: grid;
    background: inherit !important;
}

    .hover-apply:hover {
        background: var(--primary-color-variant-2) !important;
    }

.doc-grid-border {
    grid-area: 1 / 1;
    border-style: solid;
    border-width: 1px;
    border-color: var(--tab-unselected-border-color);
}

.doc-grid-container {
    width: 100%;
    height: 180px;
    overflow: hidden;
    line-height: 180px;
    text-align: center;
}

.doc-grid-img {
    object-fit: cover;
    max-height: 180px;
    width: auto;
    max-width: 100%;
    vertical-align: middle;
    padding-top: 0.25rem !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.doc-grid-overlay {
    background-color: transparent;
    grid-area: 1 / 1;
}

    .doc-grid-overlay:hover {
        background-color: var(--primary-color-light) !important;
    }

.doc-grid-label {
    background: var(--primary-color);
    border-style: solid;
    border-width: 1px;
    border-color: var(--primary-color);
    color: #ffffff !important;
    font-size: var(--text-size-4);
    font-weight: bold;
    text-align: center;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.breadcrumb {
    /*centering*/
    display: inline-block;
    /*box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);*/
    overflow: hidden;
    border-radius: 8px;
    /*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
    counter-reset: flag;
    background-color: transparent !important;
}

    .breadcrumb a {
        text-decoration: none;
        outline: none;
        display: block;
        float: left;
        font-size: 12px;
        line-height: 36px;
        color: white;
        /*need more margin on the left of links to accomodate the numbers*/
        padding: 0 10px 0 30px;
        background: linear-gradient(#333, #111);
        position: relative;
    }
        /*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
        .breadcrumb a:first-child {
            padding-left: 30px;
            border-radius: 8px 0 0 8px; /*to match with the parent's radius*/
        }

            .breadcrumb a:first-child:before {
                left: 14px;
            }

        .breadcrumb a:last-child {
            border-radius: 0 8px 8px 0; /*this was to prevent glitches on hover*/
            padding-right: 20px;
        }

        /*hover/active styles*/
        .breadcrumb a.active, .breadcrumb a:hover {
            background: #111;
            background: linear-gradient(#333, #111);
        }

            .breadcrumb a.active:after, .breadcrumb a:hover:after {
                background: #222;
                background: linear-gradient(145deg, #333, #222);
            }

        /*adding the arrows for the breadcrumbs using rotated pseudo elements*/
        .breadcrumb a:after {
            content: '';
            position: absolute;
            top: 0;
            right: -18px; /*half of square's length*/
            /*same dimension as the line-height of .breadcrumb a */
            width: 36px;
            height: 36px;
            /*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's: 
	length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
	if diagonal required = 1; length = 1/1.414 = 0.707*/
            transform: scale(0.707) rotate(45deg);
            /*we need to prevent the arrows from getting buried under the next link*/
            z-index: 1;
            /*background same as links but the gradient will be rotated to compensate with the transform applied*/
            background: #555;
            background: linear-gradient(135deg, #777, #333);
            /*stylish arrow design using box shadow*/
            box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
            /*
		5px - for rounded arrows and 
		50px - to prevent hover glitches on the border created using shadows*/
            border-radius: 0 8px 0 50px;
        }
        /*we dont need an arrow after the last link*/
        .breadcrumb a:last-child:after {
            content: none;
        }
        /*we will use the :before element to show numbers*/
        .breadcrumb a:before {
            display:none;
            content: counter(flag);
            counter-increment: flag;
            /*some styles now*/
            border-radius: 100%;
            width: 20px;
            height: 20px;
            line-height: 20px;
            margin: 8px 0;
            position: absolute;
            top: 0;
            left: 30px;
            background: #333;
            background: linear-gradient(#333, #300);
            font-weight: bold;
        }


.flat a, .flat a:after {
    background: #333333;
    background: linear-gradient(#474747, #333333);
    /*background: linear-gradient(#707070, #5b5b5b);*/
    color: #eee;
}

    .flat a:before {
        background: #111;
        box-shadow: 0 0 0 1px #00c;
    }

    .flat a:hover, .flat a.active,
    .flat a:hover:after, .flat a.active:after {
        /*background: #3b5998;*/
        background: #5b5b5b;
        /*background: var(--primary-color);*/
    }

.avatar-navbar {
    width: 2.375rem !important;
    height: 2.375rem !important;
}

    .avatar-navbar > img {
        object-fit: fill !important;
        width: 2.375rem !important;
        height: 2.375rem !important;
    }