 @keyframes swing {

     0%,
     30%,
     50%,
     70%,
     100% {
         transform: rotate(0deg);
     }

     10% {
         transform: rotate(10deg);
     }

     40% {
         transform: rotate(-10deg);
     }

     60% {
         transform: rotate(5deg);
     }

     80% {
         transform: rotate(-5deg);
     }
 }

 .side-bar-menu li.menu-item:hover svg,
 .side-bar-menu li.sub-menu-item:hover svg {
     animation: swing 0.5s ease-in-out 1 alternate;
     color: #4CCEAC;
     font-size: 1.3em;
 }

 .side-bar-menu li.menu-item:hover .ps-menu-label,
 .side-bar-menu li.sub-menu-item:hover .ps-menu-label {
     color: #4CCEAC
 }

 .side-bar-menu li.menu-item,
 .side-bar-menu li.sub-menu-item {
     transition: color 0.4s ease, font-size 0.4s ease;
     /* Only transition relevant properties */
 }

 .side-bar-menu li.menu-item:hover .ps-menu-label,
 .side-bar-menu li.sub-menu-item:hover .ps-menu-label {
     letter-spacing: 0.1rem;
     transition: letter-spacing 0.4s ease;
 }

 .menu-anchor:hover {
     font-weight: bolder;
 }

 .menu-item,
 .sub-menu {
     color: #e0e0e0;
 }

 .menu-label {
     font-size: 13px;
 }

 button {
     right: 20px;
 }

 hr {
     margin-top: 0px;
     margin-bottom: 0px;
     opacity: 0.15;
 }

 .ps-menu-button:hover {
     background-color: #082440 !important;
 }

 .side-bar-menu {
     border-color: unset !important;
 }






 .main-content {
     transition: margin-left 0.7s ease, width 0.7s ease;
     margin-left: 240px;
     width: 100%;
 }

 .main-content.collapsed {
     margin-left: 80px;
 }


 .side-bar-menu {
     position: fixed;
     height: 100%;
     z-index: 10;
     transition: width 0.7s ease;
 }

 .app.toggled {
     transition: margin-left 0.7s ease;
 }

 .side-bar-menu .sub-menu {
     transition: padding-left 0.7s ease;
 }


 /* @media only screen and (max-width: 800px) {
    .collapsed.side-bar-menu {
        width: 60px !important;  
        min-width: 60px !important;
    }
} */

 @media only screen and (max-width: 800px) {

     aside.ps-sidebar-root.ps-collapsed.app.side-bar-menu.css-1dabzo2,
     .collapsed.side-bar-menu {
         width: 0px !important;
         min-width: 0px !important;
     }

     .main-content,
     .main-content.collapsed {
         margin-left: 0;
     }

     

 }

