

#wrapper {
    /*overflow-x: hidden;*/
}

#sidebar-wrapper {
    height: 100%;
    width: 68px;
    position: fixed;
    top: 56px;
    z-index: 1000;
    /* overflow-y: auto; */
    background-color: #003264;
    /* max-width: 5.5rem;
    left: 50%; 
    transform: translateX(-50%);
    position: fixed;
    z-index: 999999;
    overflow-y: auto;
    background-color: var(--dark);
    border-radius: 7px; */
    
}

#mobile_bottom_bar .btn-group .dropdown-item-container {
    flex-direction: column;
    position: fixed !important;
    bottom: 50px;

    background-color:#fff;

    top: unset !important;
    transform: none !important;
    border: 1px solid #ccc;
}
#mobile_bottom_bar .btn-group > div {
    transform: none !important;
    border: none !important;    
    background-color: transparent;
    will-change: unset !important;
}
#mobile_bottom_bar .dropdown-item {
    white-space: normal;
}
#mobile_bottom_bar .btn-group .dropdown-item-container  {
    display: flex !important;
}
#sidebar-wrapper .dropdown-menu {
    position: fixed !important;
    padding: 0 0 0 0 !important;
    transform: none !important;
    z-index: 10002;
}
#sidebar-wrapper .dropright {
    position: static !important;
}

#sidebar-wrapper .dropdown-content-container > div  {
    /* transform: none !important; */
    overflow-y: scroll;
    max-height: 65vh;
    position: fixed !important;
    left: 72px !important;   
    border-radius: 12px;
    background-color: #fff;
    
}

#sidebar-wrapper .mainmenu_link {
    transition: 250ms;
    border-radius: 0;
    position: relative;
    padding: 8px 0;
    color: #90caf9;
}

#sidebar-wrapper .mainmenu_link:hover {
    text-decoration: none;
}

#sidebar-wrapper .hover-enabled .sidemenu-bucket-label {
    display: none;
}

#sidebar-wrapper .hover-enabled:hover .sidemenu-bucket-label {
    display: inline-block;
}

/* .sidebar-margin{
    margin-top:5rem;
} */


@media (max-width: 991px) {
    .dropdown_item_group  {
        animation: dropdownAnimation 150ms ease;
    }
#sidebar_mobile_overlay{
        height: 100%;
        width: 100%;
        background-color: rgba(0,0,0,0.3);
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1052;

    }
     #sidebar-wrapper {
        min-width: 7rem;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        margin-top: 7rem;
        display: none;
        height: 80vh;
        border-radius: 7px;
    }
   
    
    .sidebar-item{
        width: 100% !important;
    }
    .subMenu{
        width: 180px !important;
        top: 0 !important;   
        animation: toggleOpacityWidth 250ms linear;
    }
.subMenu  > * {
animation: toggleOpacity 250ms linear;
}
    .dropdown-content-container-items-heading {
        font-size: 0.7rem;
    }
    #sidebar-wrapper .dropdown-content-container > div{
        min-height: 80vh;
        left: 65px !important;
        
    }
    .dropdown-content-container .subMenu{
        width: 180px;
        
    }
    .dropdown-container-content-width{
        width:135px !important;
    }
    .dropdown-content-container > div{
        left: 50%  !important;
        transform: translateX(-50%) !important;
    }
    .mainmenu_link .sidemenu-bucket-label, .mainmenu_link .sidemenu-bucket-icons{
        color: #000000 !important;
    }
    #sidebar-wrapper{
        background-color: #ffffff !important;
    }
    .sidebar-dropdown-submenu-icons{
        color: #000000 !important;
    }
}
#sidebar-wrapper .list-group {
    /*width: 17rem;*/
}
@media (min-width: 991px) {
    #sidebar_mobile_overlay {
        display: none !important;
    }
   #sidebar-wrapper .dropdown_item_group {
        display: flex !important;
    }
    #sidebar-wrapper .dropdown-content-container{
        animation: popupAnimation 200ms ease;
    }
    #sidebar-wrapper .dropdown-content-container > div {
        box-shadow: 0 1px 5px rgb(0 0 0 / 20%), 0 2px 2px rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%);
    }
}
#sidebar-wrapper .list-group.list-group-root {
    padding: 0;
    overflow: hidden;
}

#sidebar-wrapper .list-group.list-group-root .list-group {
    margin-bottom: 0;
}

#sidebar-wrapper .list-group.list-group-root .list-group-item {
    padding: 1rem 1.5rem;
    border-radius: 0;
    border-width: 1px 0 0 0;
}
#sidebar-wrapper .list-group.list-group-root .list-group-item .fas {
    margin-right: 1.2rem !important;
    font-size: 1.2rem;
}
#sidebar-wrapper .list-group.list-group-root .list-group-item .fab {
    margin-right: 1.2rem !important;
    font-size: 1.2rem;
}
#sidebar-wrapper .list-group.list-group-root .list-group-item .far {
    margin-right: 1.2rem !important;
    font-size: 1.2rem;
}



#sidebar-wrapper .list-group.list-group-root > .list-group-item:first-child {
    border-top-width: 0;
}

#sidebar-wrapper .list-group.list-group-root > .list-group > .list-group-item {
    padding-left: 2rem;
    font-size: 0.8rem;
}

#sidebar-wrapper
    .list-group.list-group-root
    > .list-group
    > .list-group
    > .list-group-item {
    padding-left: 1rem;
}

#sidebar-wrapper .list-group .list-group-item {
    color: var(--light);
    background-color: inherit;
    border: none;
    text-decoration: none;
}

#sidebar-wrapper .list-group .list-group-item:hover {
    font-weight: 500;
}

#sidebar-wrapper .list-group .list-group-item.active {
    font-weight: 600;
    background-color: var(--secondary);
}

#page-content-wrapper {
    margin-top: 4.2rem !important;
}


@media (min-width: 720px) {
    #page-content-wrapper {
        margin-left: 4.5rem;
    }
    #sidebar-wrapper {
        margin-left: 0;
        top: 56px;
    }

    #page-content-wrapper {
        min-width: 0;
    }
}

#sidebar-wrapper .mainmenu_link.active-bucket {
    color: #ffffff;
}

/*.mainmenu_link.active-bucket .sidemenu-bucket-label,*/
/*.mainmenu_link.active-bucket .sidemenu-bucket-icons{*/
/*    color: #0277bd;*/
/*}*/

.mainmenu_link .sidemenu-bucket-icons{
    font-size: 20px;
    line-height: 1;
    display: block;
    margin: 0 auto;
}

.sidemenu-bucket-label {
    font-size: 10px;
    line-height: 1;
    margin-top: 4px;
}

.hover-enabled .sidemenu-bucket-label {
    display: none;
}

.hover-enabled:hover .sidemenu-bucket-label {
    display: inline-block;
}

.active-bucket .sidemenu-bucket-label {
    display: inline-block !important;
}

#mainmenu_link_home .sidemenu-bucket-label {
    display: inline-block;
}

@keyframes toggleOpacity {
    0%{
opacity: 0;

    }
    30% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}
@keyframes toggleOpacityWidth {
0% {
    opacity: 0;
    max-width: 112px;
}
30% {
    opacity: 1;
    max-width: 112px;
}
100% {
    width: 180px;
    max-width: 180px;
}
}
@keyframes dropdownAnimation {
    0% {        
        height: 0px ;
        overflow: hidden ;

    }
    100% {
        
        height: 65px;
        overflow: hidden ;
    }
}

@keyframes popupAnimation {
    0% {
        scale: 0.3;
    }
    100% {
        scale: 1;
    }
}

div.scrollmenu {
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
    color: #000000;
  display: inline-block;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: var(--light);
}
