/*
* Navigation Tuning - Background Colors
*/

ul.nav li.open {
    background-color: #353562 !important;
}

ul.nav li.open a.active {
    background-color: #7373de !important;
}

/* Option To Overwrite what bg-dar means /*
/**/
.bg-dark {
    background-color: #262a3b !important;
}

/*
 * Custom Navbar Divider
 */

div.sidebar_main_divider {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 5px;
    border-top: solid #3a3d49 1px;
    padding:0px;
}

div.sidebar_main_divider_very_top {
    padding: 0px;
    margin-top: 20px;
}

/*
 *Navbar Icon coloring  SectionWise Color Icons
 */

.sidebar .nav-link .nav-icon {
    color: #ffffff !important;
}

.sidebar .nav-link .blue-group{
    color: #00beff !important;
}

.sidebar .nav-link .deepblue-group{
    color: #0041fc !important;
}

.sidebar .nav-link .orange-group{
    color: #ff9100 !important;
}

.sidebar .nav-link .deeporange-group{
    color: #ff4d00 !important;
}

.sidebar .nav-link .yellow-group{
    color: #ffdd00 !important;
}

.sidebar .nav-link .purple-group{
    color: #6b2cff !important;
}

.sidebar .nav-link .pink-group{
    color: #d114fa !important;
}

.sidebar .nav-link .red-group{
    color: #ff0000 !important;
}

.sidebar .nav-link .green-group{
    color: #1df504 !important;
}

.sidebar .nav-link .lightgreen-group{
    color: #b9f504 !important;
}

/*Make sure selected dropdown is in bold*/
li.nav-dropdown.open a.nav-link.nav-dropdown-toggle {
    font-weight: bold;
}

/*Add a cool color to the left hand side of the toggled nav bar item and make sure it does not shift left right*/
li.nav-dropdown.open a.nav-link.nav-dropdown-toggle, ul.nav-dropdown-items li.nav-item.open {
    border-left: solid 4px #7373de;
}

li.nav-dropdown a.nav-link.nav-dropdown-toggle, ul.nav-dropdown-items li.nav-item {
    border-left: solid 4px;
    border-color: transparent;
}

@media (max-width: 991.98px){
    /*Change Sidebar Width for small devices ... this one always contains the sidebar-lg-show compared to the bigger screen sizes so we need to differentiate */
    body.sidebar-show div.sidebar {
        flex-basis: 280px !important;
    }

    body.sidebar-show nav.sidebar-nav, body.sidebar-show div.sidebar, body.sidebar-show div.sidebar .nav, body.sidebar-show .navbar-brand {
        width: 280px !important;
    }

    body:not(.sidebar-show) div.sidebar {
        width: 200px !important;
    }
}


/*Change Sidebar Width on Desktop */
@media (min-width: 991.98px) {
    body.sidebar-lg-show div.sidebar {
        flex-basis: 280px !important;
    }

    body.sidebar-lg-show nav.sidebar-nav, body.sidebar-lg-show div.sidebar .nav, body.sidebar-lg-show .navbar-brand {
        width: 280px !important;
    }


    /*Increase Font Size */
    a.navbar-brand, div.sidebar {
        font-size: 17px !important;
    }

    li.nav-title {
        font-size: 90% !important;
    }
}


/*Add Shadows*/

div.sidebar, header, footer {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/*
 * Custom Styles
 */

.small_hint_light {
    color: #b0b0b0;
    font-size: 11px;
    line-height: 5px;
}


/*
 * Purchase Order - Print Dialog Box
 */

#printDialogBoxModal .modal-body .row {
    padding-top: 5px;
    padding-bottom: 5px;
}

/*
 * Hidden class is use for livewire v3 loading not working (workaround)
 */
.hidden {display: none; }