:root {
    --ai-primary-color: #ff7602;
    --id-primary-color: #771b66;
    --fdr-primary-color: #1d9424;
    --funddatamining-primary-color: #795548;
    --lea-primary-color: #8c8f0d;
    --trr-primary-color: #ff000066;
    --header-bg-color: #edf2f9;
    --mgmt-primary-color-lightest: #cbc9e4;
    --mgmt-primary-color-lighter: #8681c1;
    --mgmt-primary-color: #524ba6;
    --bg-color: #fafcff;
    --mgmt-primary-color-darker: #393574;
    --mgmt-primary-color-darkest: #191632;
    --primary-bg-color: #edf2f9;
    --pipelines-primary-color: #88bab8;
    --publish-primary-color: #2c7be5;
    --link-text-color-muted: #5e6e82;
    --box-shadow-dark: #888888;
    --app-font-san-serif: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --bs-body-font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --bs-dropdown-link-hover-bg: var(--header-bg-color);
    --bs-dropdown-link-hover-color: #344050;
}

/* override bs utilities mixin  - datatable fixes when updated to bs v5*/

thead.fs-1 {
    font-size: 1.2rem !important;
}

.form-control-sm {
    padding: .3125rem 2rem .3125rem 1rem;
}

a {
    text-decoration: none;
}


header.header {
    height: 3.75rem;
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--primary-bg-color);
    opacity: 0.96;
    margin: 0 -15px 0 -15px;
    padding: 0 15px;
}

/* env identified by header colour */

header.header {
    background-image: linear-gradient(to right, var(--header-bg-color), var(--bg-color) );
}

header.header[data-dg-env="dev"],
header.header[data-dg-env="development"] {
    background-image: linear-gradient(to right, hsl(142 100% 50% / 40%), var(--bg-color) );
}

header.header[data-dg-env="test"] {
    background-image: linear-gradient(to right, hsl(215 100% 50% / 40%), var(--bg-color) );
}

header.header[data-dg-env="parallel"] {
    background-image: linear-gradient(to right, hsl(43 100% 50% / 40%), var(--bg-color) );
}

header .app-logo-link {
    margin-left: 0.5rem;
    margin-right: 0;
    max-width: 8rem;
}

header .app-logo-img {
    width: 7.5rem;
}

header .top-nav-item > a {
    text-decoration: none;
}

header .appmenu-userprofile-wrapper {
    position: relative;
}

header .top-nav-dropdown-menu {
    display: none;
}

header li.top-nav-item {
    border-radius: 50%;
    font-size: 1.2rem;
    padding: 0.25rem 0.25rem;
    max-width: 3rem;
    width: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;

    &.apps {
        margin-right: .25rem;

        .app-menu-icon {
            height: 2rem;
            width: 2rem;
            fill: var(--link-text-color-muted);
        }

        &:hover, &:focus {
            background-color: #d8e2ef;

            .app-menu-icon {
                fill: var(--mgmt-primary-color);
            }
        }
    }

    &.user {
        background-color: var(--mgmt-primary-color);

        > button {
            color: white;
        }

        &:hover, &:focus {
            outline: 1px solid var(--mgmt-primary-color);
            outline-offset: 2px;
        }
    }

}

header button.top-nav-link {
    border-radius: 50%;
    background-color: transparent;
    border-color: transparent;

    &:focus,
    &:hover {
        outline: 0;
    }
}

header .dropdown-item-wrapper {
    font-size: 1rem;
    border-radius: 1rem;
    padding: .25rem;
}

header .dropdown-item:hover {
    border-radius: 1rem;
}

header .top-nav-dropdown-menu.show {
    display: block;
    position: absolute;
    background: white;
    top: 3rem;
    right: 4rem;
    outline: 2px solid #edf2f9;
    box-shadow: 5px 10px 18px var(--box-shadow-dark);
    border-radius: 1rem;

    &.user {
        right: 1.5rem;
        padding-inline: .25rem;
    }

    &.apps {
        padding-inline: .25rem;
    }
}

header .dropdown-item.ai:hover .app-icon {
    color: var(--ai-primary-color);
}

header .dropdown-item.id:hover .app-icon {
    color: var(--id-primary-color);
}

header .dropdown-item.mgmt:hover .app-icon {
    color: var(--mgmt-primary-color);
}

header .dropdown-item.pipelines:hover .app-icon {
    color: var(--pipelines-primary-color);
}

header .dropdown-item.publish:hover .app-icon {
    color: var(--publish-primary-color);
}

header .dropdown-item.funddatamining:hover .app-icon {
    color: var(--funddatamining-primary-color);
}

header .dropdown-item.fdr:hover .app-icon {
    color: var(--fdr-primary-color);
}

header .dropdown-item.lea:hover .app-icon {
    color: var(--lea-primary-color);
}

header .dropdown-item.trr:hover .app-icon {
    color: var(--trr-primary-color);
}

header .dropdown-item.logout:hover .app-icon {
    color: red;
}

header .dropdown-item {
    padding: .25rem 1rem;
    color: var(--link-text-color-muted);
}

main#top {
    display: flex;
    gap: 1rem;
}

main#top .content {
    margin: 0;
    width: calc(100% - 15.25rem);
    margin-left: 15.25rem;
}

main .sidebar-nav-position {
    margin-top: 4rem;
}

th.dt-center, td.dt-center {
    text-align: center;
}

li.active {
    background-color: #dfe1e5;
}

.navbar-vertical .navbar-nav .nav-link {
    padding: .22rem 0;
}

li.nav-item {
    padding-left: .5rem !important;
}

li.nav-item:hover {
    background-color: #eeeeee;
}

li.nav-title {
    padding-bottom: 0.25rem !important;
}

#sidebar-menu {
    position: fixed;
    top: 4.25rem;
}

.navbar-vertical-collapsed #sidebar-menu {
    width: 2.85rem;
}

.navbar-vertical-collapsed .navbar-nav .nav-item {
    display: none;
}

.navbar-vertical-collapsed-hover .navbar-nav .nav-item {
    display: block;
}

.navbar-vertical-collapsed .navbar-nav .issue-indicator {
    height: 7px;
    width: 7px;
    background-color: #f00;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    left: 35px;
    top: 17px;
}

.navbar-vertical-collapsed-hover .navbar-nav .issue-indicator {
    display: none;
}

.navbar-vertical-collapsed main#top .content {
    width: calc(100% - 3.85rem);
    margin-left: 3.85rem;
}

.navbar-toggler-humburger-icon {
    height: 2.5rem;
    width: 2.5rem;
    padding: 0.3125rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 50%;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.modal .close {
    float: right;
    margin: -1rem -1rem -1rem auto;
    padding: 1rem 1rem;
    border: 0;
    background-color: transparent;
    font-size: 1.5rem;
    opacity: .5;
    
    &:hover{
        opacity: .75;
    }
}

@media(max-width: 1199.99px) {
    .navbar-vertical-collapsed main#top .content, main#top .content {
        width: 100%;
        margin-left: 0;
    }
}