.side-nav{
    z-index: 20;
    position: relative;
    margin-right: 16px;
}

.side-nav-scroll-wrapper {
    height: 100%;
    width: 75px;
    position: relative;
    z-index: 10;
    transition: transform .3s ease;
  }


/*Scroll button*/
.nav-scroll-btn{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75px;
    z-index: 19;
    border: 1px solid var(--border);
    border-left: none;
}

.nav-scroll-up {
    top: 0;
    background: linear-gradient(180deg, var(--secondBackground) 0 44%, transparent );
    border-radius: 0px 6px 0px 0px;
    border-bottom: none;
    fill: var(--primary);
  }
  
  .nav-scroll-down {
    bottom: 0;
    background: linear-gradient(180deg, transparent , var(--secondBackground) 60%);
    border-radius: 0px 0px 6px 0px;
    border-top: none;
    fill: var(--primary);
  }

.nav-scroll-btn button {
    width: 100%;
    height: 20px;
    background-color: #ffffff00;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  /* side nav  */
.side-nav-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--secondBackground);
    /* box-shadow: 0 2px 4px var(--secondBackgroundShadow); */
    border: 1px solid var(--border);
    border-left: none;
    height: 100%;
    width: 75px;
    position: relative;
    z-index: 10;
    padding: 12px 0px;
    border-radius: 0px 6px 6px 0px;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    -webkit-user-select: none;
    user-select: none;
}

.side-nav-wrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }


.side-nav-items {
    width: 100%;
    justify-content: center;
    display: flex;
}

.side-nav-items a{
    text-decoration: none;
}


.side-nav-item-container {
    width: 64px;
    height: 64px;
    font-size: .6rem;
    font-weight: 500;
    padding: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 6px;
    cursor: pointer;
    color: var(--onSecondBackground);
    fill: var(--onSecondBackground);
    transition: color 0.2s ease, fill 0.2s ease;
}

.side-nav-item-container:hover {
    fill: var(--onSecondBackgroundHover);
    color: var(--onSecondBackgroundHover);
}

.active-side-nav-item-container {
    background-color: var(--tertiary);
    color: var(--onTertiary);
    fill: var(--onTertiary);
    border: 1px solid var(--border);
}

.active-side-nav-item-container:hover{
    background-color: var(--tertiaryHover) !important;
    color: var(--onTertiaryHover) !important;
    fill: var(--onTertiaryHover) !important;
}


.side-nav-icons svg{
    width: 24px;
    height: 24px;
}

.side-nav-item-name {
    text-transform: uppercase;
    text-align: center;
}


/* sub menu  */
.side-nav-sub-menu{
    position: absolute;
    top: 0;
    height: 100%;
    width: 260px;
    background-color: var(--secondBackground);
    z-index: 5;
    border-radius: 0 6px 6px 0;
    /* box-shadow: 0 2px 4px var(--secondBackgroundShadow); */
    border: 1px solid var(--border);
    padding: 0 0px 0px 80px;
    -webkit-user-select: none;
    user-select: none;
}



.side-nav-sub-menu-close{
    display: flex;
}

.side-nav-sub-menu-close svg {
    width: 16px;
    height: 16px;
    margin: 8px 8px 8px auto;
    cursor: pointer;
    padding: 2px;
    background-color: var(--secondary);
    border-radius: 50%;
    fill: var(--onSecondary);
}

.side-nav-sub-menu-close svg:hover {
    background-color: var(--secondaryHover);
    fill: var(--onSecondaryHover);
}

.side-nav-sub-menu h1{
   font-size: 1rem;
   font-weight: 600;
   padding: 4px 4px 20px 8px;
   margin: 0;
   color: var(--onSecondBackground);
   text-transform: uppercase;
}

.side-nav-sub-menu-item{
    color: var(--onSecondBackground) ;
    text-decoration: none;
    font-size: .75rem;
    padding: 4px 4px 4px 16px;
    width: 100%;
    display: flex;
    position: relative;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.side-nav-sub-menu-item:hover{
    color: var(--onSecondBackgroundHover);
}

.side-nav-sub-menu-item-active{    
    border-radius: 16px 0px 0px 16px;
    background-color: var(--secondary);
    color: var(--onSecondary);
}

.side-nav-sub-menu-item-active:hover{    
    background-color: var(--secondaryHover);
    color: var(--onSecondaryHover);
}

.side-nav-width-lg{
    width: 260px;
}

.side-nav-width-sm{
    width: 75px;
}

.sidenav-toggle {
    display: none;
    position: fixed;
    z-index: 10;
    top: 0;
    /* right: -22px; */
    /* background-color: var(--primary); */
    border-radius: 0px 4px 4px 0px;
    width: 50px;
    height: 7%;
    justify-content: end;
    align-items: center;
}

.sidenav-toggle svg {
    width: 24px;
    height: 24px;
    fill: var(--onSecondBackground);
}

@media (max-width: 767px) {
    .side-nav{
        margin-right: 8px;
    }
}

@media (max-width: 800px) {
    .side-nav-width-lg{
        width: 0px;
    }

    .side-nav-width-sm{
        width: 0px;
    }

    .sidenav-toggle {
        display: flex;
    }

    .side-nav-scroll-wrapper-sm-visible{
        transform: translateX(0px);
    }

    .side-nav-scroll-wrapper-sm-hidden{
        transform: translateX(-100%);
    }
}


/* Tooltip  */
.side-nav-tooltip .tooltip-arrow::before{
    border-right-color: var(--primary) !important;
}

.side-nav-tooltip .tooltip-inner{
    background-color: var(--primary) !important;
    color: var(--onPrimary) !important;
}