/* start scrollbar overrides */

/* width */
#app-menu::-webkit-scrollbar {
    width: 7px;
}

/* Track */
#app-menu::-webkit-scrollbar-track {
    background: var(--cap_silvergray);
}

/* Handle */
#app-menu::-webkit-scrollbar-thumb {
    background: var(--eservices_darkblue);
}

    /* Handle on hover */
    #app-menu::-webkit-scrollbar-thumb:hover {
        background: var(--eservices_darkblue);
    }

/* end scrollbar overrides */


/* start bootstrap overrides */

.card {
    border-radius: 0 !important;
}

.card-header {
    border-radius: 0 !important;
}

#eservices-menu button {
    background-color: var(--cap_navyblue);
    color: #ffffff;
}

.accordion-button:after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}

.btn-eservices {
    background-color: var(--eservices_darkblue) !important;
    border-radius: 0;
    border: 0;
    color: white !important;
}

    .btn-eservices:hover {
        background-color: var(--cap_skyblue) !important;
        color: var(--cap_navyblue) !important;
    }

/* end bootstrap overrides */

/* regular view styles */
html {
    height: 100%;
}

body {
    font-family: 'Ubuntu', sans-serif;
    margin: 0;
}

header {
    background-color: var(--eservices_darkblue);
    height: var(--eservices-header-height);
    /*line-height: 3rem;*/
    color: white;
}

nav#nav-app-menu {
    display: none;
    background-color: var(--cap_skyblue);
}

#icon-slide-menu {
    color: var(--cap_navyblue);
}

#app-menu {
    background-color: var(--cap_skyblue);
}

#app-menu-footer {
    background-color: var(--cap_silvergray);
    border-top: 1px solid var(--eservices_darkblue) !important;
    position: absolute;
    bottom: 0;
    width: 100%;
}

button#slide-app-menu::after {
    color: var(--cap_navyblue) !important;
}

#eservices-content {
    padding: 1rem;
    margin-left: 0;
    /*transition: margin-left 1s;*/
}

footer {
    background-color: var(--eservices_darkblue);
    margin-top: 1rem;
    border-top: 1px solid var(--eservices_gold);
    padding: 1rem;
}

    footer h5 {
        color: var(--cap_skyblue);
        font-weight: bold;
    }

    footer a {
        color: rgba(255, 255, 255, 1);
    }

        footer a:hover, footer span#footer-warning {
            color: var(--cap_scarletred);
        }

/*.accordion .list-group-item {
    text-indent: .5rem;
}*/

#eservices-menu a, #offcanvas-settings-menu a {
    color: var(--cap_navyblue);
}

    #eservices-menu a:hover, #offcanvas-settings-menu a:hover {
        color: var(--cap_scarletred);
    }

#eservices-menu div.accordion-body h6 {
    color: var(--cap_scarletred);
}

#offcanvas-settings-menu .card-header:first-child, #app-menu .card-header:first-child {
    background-color: var(--cap_navyblue);
    border-radius: 0;
    color: #ffffff;
}

/*@@media screen and (min-width: 768px) {

}*/

/* large viewport styles */
@media screen and (min-width: 992px) {
    header {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        background-color: var(--eservices_darkblue);
        height: var(--eservices-header-height);
        line-height: 3rem;
        color: white;
        z-index: 100; /*might need to change this.*/
    }

    nav#nav-app-menu {
        position: fixed;
        top: var(--eservices-header-height);
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--eservices-header-height));
        width: var(--eservices-20rem);
        /*background-color: var(--eservices_darkblue);*/
        /*transition: width 1s;*/
        margin-left: 0;
    }

    /*nav#nav-app-menu h5#nav-app-title {
            margin-left: 0;*/
    /*transition: margin-left 1s;*/
    /*}*/

    #app-menu {
        margin-bottom: 66px; /*size of the app-menu-footer*/
        overflow-y: auto;
    }

    /*#eservices-content, footer {
        padding: 1rem;
        margin-left: var(--eservices-20rem);
        margin-top: var(--eservices-header-height);*/
        /*transition: margin-left 1s;*/
    /*}*/

    #eservices-content-container {
        min-height: 60vh;
    }

    #cap-layout.mini-menu nav#nav-app-menu {
        width: var(--eservices-5rem);
    }

        #cap-layout.mini-menu nav#nav-app-menu #app-menu {
            height: 100%;
        }

    #cap-layout.mini-menu button#slide-app-menu::after {
        content: '';
    }

    #cap-layout.mini-menu #eservices-content, #cap-layout.mini-menu footer {
        margin-left: var(--eservices-5rem);
    }

    #cap-layout.mini-menu nav#nav-app-menu div.app-menu-card-body {
        display: none;
    }

    #cap-layout.mini-menu nav#nav-app-menu span.app-menu-card-header-span {
        display: none;
    }

    /*Nav hover expand*/
    .show-app-menu {
        width: var(--eservices-20rem) !important;
        z-index: 1;
        background-color: rgba(255, 255, 255, 1);
    }
}

.menu-togglers {
    line-height: 1;
    border: 0;
    color: rgba(255, 255, 255, 1);
    background-color: transparent;
    border-radius: 0.375rem;
    /*transition: box-shadow 0.15s ease-in-out;*/
    padding: 0.25rem 0.75rem;
}

#eservices-home {
    text-decoration: none;
    color: rgba(255, 255, 255, 1);
}

    #eservices-home:hover, #eservices-home:visited {
        color: rgba(255, 255, 255, 1);
    }

footer a {
    text-decoration: none;
}

.form-label {
    font-weight: bold;
}

.modal-content, .modal-header, .modal-footer {
    border-radius: 0;
}

input[type=button], input[type=submit], button {
    background-color: var(--eservices_darkblue);
    border-radius: 0;
    border: 0;
    color: white;
}

    input[type=button]:hover, input[type=submit]:hover {
        background-color: var(--cap_skyblue);
        color: black;
    }

#offcanvas-eservices-menu, #offcanvas-eservices-menu button {
    font-weight: bold;
}

    #offcanvas-settings-menu a, #offcanvas-eservices-menu a {
        text-decoration: none;
        font-weight: bold;
    }

.grid th {
    background-color: var(--eservices_darkblue);
    background-image: none;
    color: white;
}

.grid tbody tr:hover {
    background-color: var(--cap_airforceyellow);
}

.toast-top-right {
    top: 65px !important;
}

.home_page_link_icon {
    /*display:none;*/
    color: white;
}

.table-cap {
    --bs-table-color: #000;
    --bs-table-bg: var(--cap_silvergray);
    --bs-table-border-color: #373b3e;
    --bs-table-striped-bg: #2c3034;
    --bs-table-striped-color: #fff;
    --bs-table-active-bg: #373b3e;
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: #323539;
    --bs-table-hover-color: #fff;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}