/*
    Breakpoints Guide
    
    Breakpoint            | Min Size | Max Size |  Media Query        | Bootstrap Name/Class Modifier
    ----------------------+----------+----------+---------------------+------------------------------
    Extra Large (Desktop) | 1600px   | N/A      | (min-width: 1600px) | N/A
    Large (Desktop/Tablet)| 1200px   | 1599px   | (max-width: 1599px) | Extra Large - 'xl'
    Expanded (Tablet)     | 768px    | 1199px   | (max-width: 1199px) | Medium - 'md'
    Medium (Phone/Tablet) | 576px    | 767px    | (max-width: 767px)  | Small - 'sm'
    Compact (Small Phone) | N/A      | 577px    | (max-width: 577px)  | X-Small - (no modifier)

    Please don't deviate from using the above breakpoints, otherwise there will be inconsistencies on certain screen widths.
    Refer to the design figma for more details.
*/

:root {
    --app-height: 90vh;
    --mobile-top-nav-height: 65px;
    --side-nav-width: 290px;
}

body {
    background-color: var(--light-grey-1);
    overflow-y: hidden;
}

.wrapper {
    display: grid;
    grid-template-columns: auto 1fr;
    min-height: 100vh;
}

#sidebar {
    position: fixed;
    width: var(--side-nav-width);
    height: 100%;
    background-color: white;
    overflow-y: auto;
}

    #sidebar.compressed {
        width: 98px;
    }

.hide-expanded {
    display: none;
}

.collapse-btn {
    float: left;
}

#sidebar.compressed .show-expanded {
    display: none;
}

#sidebar.compressed .hide-expanded {
    display: block;
}

#sidebarCollapse {
    margin-left: 21.5px;
}

.nav-link {
    padding: 0;
}

.nav-items {
    list-style: none;
}

.nav-item__link {
    color: black;
    display: grid;
    grid-template-columns: 40px auto;
    align-items: center;
}

.nav-item__link {
    padding: 20px 0 20px 40px;
}

.sidebar__header {
    padding: 10px 0 10px 0px;
    text-align: center;
}

.nav-item__link {
    text-decoration: none;
}

.nav-item__link__icon {
    margin-top: -1px;
    max-width: 25px;
}

.compressed-logo {
    margin-left: -10px;
}

.toggle-collapse-item,
.toggle-side-nav {
    margin-top: 30px;
    margin-bottom: 20px;
}

    .toggle-side-nav button {
        padding-left: 20px;
    }

.nav-item__link--active {
    background-color: rgba(26, 66, 138, 0.1);
    border-left: 6px solid var(--dark-blue);
    padding-left: 34px;
}

    .nav-item__link--active .nav-item__link__text {
        color: var(--dark-blue);
        font-weight: bold;
    }

.active-dropdown a {
    background-color: rgba(26, 66, 138, 0.1);
}

.nav-item__link.sub-active {
    background-color: rgba(26, 66, 138, 0.54);
}

    .nav-item__link.sub-active .nav-item__link__text {
        color: white;
        font-weight: 900;
    }

.navbar {
    background-color: #273043;
    height: 76px;
}

    .navbar > .container-fluid {
        justify-content: flex-end;
    }

.dropdown-icon {
    margin-left: 15px;
    max-width: 10px;
}

#sidebar.compressed .dropdown-icon {
    margin-left: -7px;
}

.dropdown-trigger[aria-expanded="false"] .dropdown-icon {
    transform: rotate(180deg);
    transition: 700ms;
}

.dropdown-trigger[aria-expanded="true"] .dropdown-icon {
    transform: rotate(0);
    transition: 700ms;
}

.nav-item .card {
    border-top: none;
    border-right: none;
    border-left: none;
    border-radius: 0;
    padding: 0;
}

.sub-nav-item .nav-item__link.active {
    color: white;
}

.sub-nav-item .nav-item__link {
    padding-left: 60px;
}

.sub-nav-item .nav-item__link--active > * {
    margin-left: -6px;
}

#collapseable .nav-item__link {
    padding-left: 60px;
}

#sidebar.compressed #collapseable .nav-item__link {
    padding-left: 40px;
}

/* Set icon color to dark blue */

.nav-item__link--active img,
.light-blue-bg img {
    filter: brightness(0) saturate(100%) invert(19%) sepia(22%) saturate(5294%) hue-rotate(202deg) brightness(102%) contrast(92%);
}

/* Set icon color to white */

.sub-active img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(241deg) brightness(103%) contrast(103%);
}

#sidebar.hide {
    display: none;
}

.single-column {
    grid-template-columns: 1fr;
}

#content {
    left: var(--side-nav-width);
    position: absolute;
    margin: 0 auto;
    width: calc(100% - var(--side-nav-width));
}

.content {
    padding: 20px 0 0 0;
    min-height: calc(100vh - 150px);
    margin: 75px auto 0;
}

.container-card {
    background: white;
    padding: 10px;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    max-width: 1100px;
    min-width: 100%;
    margin-bottom: 20px;
}

.card {
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.1);
}

.top-nav {
    position: fixed;
    width: calc(100% - var(--side-nav-width));
    z-index: 100;
}

    .top-nav .nav-item {
        margin: 0 10px;
        width: 33px;
        height: 33px;
    }

        .top-nav .nav-item.dropdown {
            background: white;
            border-radius: 50%;
            text-align: center;
            display: grid;
            justify-content: center;
            align-items: center;
            margin-left: 8px;
        }

            .top-nav .nav-item.dropdown a {
                color: black;
                font-size: 16px;
                font-weight: 400;
                text-decoration: none;
                margin-top: 2px;
            }

.navbar-brand {
    margin: 0;
}

@media (min-width: 768px) {
    .container-card,
    .content {
        padding: 30px 25px;
    }
}


.container-card-sm {
    background: white;
    padding: 25px 50px;
    border: 1px solid #ced4da;
    border-radius: .25rem;
}

@media (max-width: 768px) {
    .wrapper {
        grid-template-columns: 1fr;
    }

    #sidebar {
        display: none;
    }

        #sidebar.show {
            display: block;
            position: fixed;
            z-index: 100000;
            top: 0;
            bottom: 0;
            overflow-x: hidden;
        }

    .toggle-collapse-item {
        display: none;
    }

    .toggle-side-nav {
        display: block;
        margin-left: 25px;
    }

    .top-nav {
        width: 100%;
    }

    #content {
        left: 0;
        width: 100%;
    }
}

/* Style the list */

ul.breadcrumb {
    list-style: none;
    background-color: transparent;
}

    /* Display list items side by side */

    ul.breadcrumb li {
        display: inline;
        font-size: 8px;
    }

        /* Add a slash symbol (/) before/behind each list item */

        ul.breadcrumb li + li:before {
            padding: 6px;
            color: #8A919F;
            content: ">\00a0";
            font-size: 10px;
        }

        /* Add a color to all links inside the list */

        ul.breadcrumb li a {
            font-size: 10px;
            color: #8A919F;
            text-decoration: none;
            text-transform: uppercase;
            cursor: pointer;
        }

            /* Add a color on mouse-over */

            ul.breadcrumb li a:hover {
                color: #8A919F;
                text-decoration: underline;
            }

/* Modal positioning */

.modal,
.rz-dialog-wrapper {
    z-index: 100000;
}

.modal-dialog, .rz-dialog {
    top: 100px;
}