body.o_web_client{
  .nav-wrapper-bits{
    display: none ;
    &.toggle-show{ 
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background-color: #282828;
      height: 100%;
      z-index: 999;
      header{
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
      }
      .sytray-container-bits{
        margin: 5px 5px;
        background-color: none !important;
        button{
          width: 100%;
          border: none !important;
          box-shadow: none !important;
          background: #343434;
          border-radius: 10px; 
          img{
            width: 35px;
            border-radius: 30px !important;
          } 
        }
        mark{
          font-size: 14px;
          margin-top: 8px;
          background: #fff !important;
          padding: 7px;
          border-radius: 8px;
        } 
        .o_user_menu{
          .o-dropdown--menu{
            min-width: 15rem !important;
            .dropdown-item{
              padding: 5px 20px !important;
            }
            // @media (max-width: 768px) {
            //  width: 100%;
            //  height: 100%;
            //  display: flex;
            //  justify-content: center;
            //  align-items: center;
             
            // }
          }
        }
        
        .powered-by{
         display: none;
        }
        &:hover{
          .powered-by{
            display: block !important; 
            color: #fff;
            a{
              color: #aab6ff !important;
            } 
           }  
        }
      }
    } 
    .btm-user-menu{
      z-index: 999;
      width: 250px;
    }
    @media (max-width: 768px) {
      position: absolute;
      top: 0;
      bottom: 0;
      height: 100%;
      z-index: 11;
    }
  }
  header.o_navbar{ 
    nav{
      background-color: transparent !important;
      border-bottom: none !important;
      height: 100%;
    }
    .o-mail-DiscussSystray-class{
      background-color: #282828 !important;
      margin: 0px 4px;
      width: 35px;
      height: 35px;
      text-align: center;
      justify-content: center;
      border-radius: 6px;
    }
    .o_company_logo{
      padding: 8px 20px !important;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #343434;
      border-radius: 10px;
      margin: 5px 5px;
      i{
        color: #fff !important;
        font-size: 20px;
        display: none;
        @media (max-width: 768px) {
          display: block;
        }
      }  
      img{
        width: 150px;
        height: 70px;
        object-fit: contain;
      }
    }
  }
  .primary-nav{
    flex: 1 1 0 !important;
    overflow-y: auto;
    .overflow-container{
      .main_link{
        .app_icon{
          height: 25px !important;
          width: 25px !important;
          display: inline-flex; 
          img{
            object-fit: contain;
          }
        }
      }
    }
    ul#menu-dropdown{
      list-style-type: none !important;
      padding-left: 5px !important;
      li a.main_link{
        display: flex;
        align-items: center !important; 
        padding: 1em;
        font-size: 14px;
      }
      ul.header-sub-menus.main{
        list-style-type: none !important;  
        z-index: 3;
        position: absolute;
        left: 0;
        background-color: #282828 !important;
        height: 100%;
        top: 0;
        width: 100%; 
        padding: 0px 12px; 
        // &:not(.show){
        // left: 100% !important;
        // }
        &:not(.show){
            display: none;
            width: 0% ;
        }
        .back_main_menu{
          position: relative;
          margin-left: -18px;
          h3{
            color: #ffff !important;
            cursor: pointer;
          }
        }
        li{ 
          margin-left: 10px ;
          background: #282828;
          .header-sub-menus{
            list-style-type: none !important;
            border-left: 1px solid #717171;
            padding: 0;
          }
          .sub-main-menu{
            cursor: pointer !important;
            font-size: 14px;
            color: #fff;
            font-weight: 600;
            background: #282828;
          }
        }
        // @media (max-width: 768px) {
        //   position: relative !important;
        //   .back_main_menu{
        //     display: none !important;
        //   }
        // }
        // &.show{
        //   li{  
            // .collapse{
            //   display: block;
            // }
        //   }
        // }
        a{
          padding: 0.5rem !important;
          font-size: 12px !important;
        }
        &.show{
          li{ 
            .sub-main-menu{
              background: #eeeeee14;
              padding: 5px 10px !important;
              border-radius: 8px;
              margin: 8px 0px;
            }
          }
        }
      }
    }
    ::-webkit-scrollbar-track
    {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      background-color: #F5F5F5;
    }

    ::-webkit-scrollbar
    {
      width: 6px;
      background-color: #F5F5F5;
    }

    ::-webkit-scrollbar-thumb
    {
      background-color: #575757;
    }
  }  
}
.button_bg_hover:hover {
  background-color: gray;
  color:black;
}
.menu-hasdropdown {
  .button_bg_hover {
    margin-right: 7%; 
  }
}

.header-sub-menus .button_bg_hover {
  margin-right: 0; 
}

.sidebar-toggler {
  .sidebar-toggle-bits {
    .chevron-toggle {
      transition: transform 0.3s ease;
    }

    &.sidebar-open .chevron-toggle {
      transform: rotate(180deg); 
    }

    &:not(.sidebar-open) .chevron-toggle {
      transform: rotate(0deg);
    }
  }
}

.sub-main-menu {
  .chevron-toggle {
    transition: transform 0.3s ease;
  }

  &[aria-expanded="true"] .chevron-toggle {
    transform: rotate(90deg);
  }

  &[aria-expanded="false"] .chevron-toggle {
    transform: rotate(0deg);
  }
}
.o_user_avatar{
  height: 15%;
  width: 15%;
}
.user-avtar-bits {
  position: relative;
  overflow: hidden;
  transition: max-height 0.3s ease;
  max-height: 100px; 
}

.user-avtar-bits:hover {
  max-height: 120px; 
}

.powered-by {
  opacity: 0;
  transform: translateY(10px); 
  transition: opacity 0.3s ease, transform 0.3s ease; 
  pointer-events: none; 
  margin-top: 5px;
}

.user-avtar-bits:hover .powered-by {
  opacity: 1;
  transform: translateY(0); 
  pointer-events: auto; 
}
