.content {
    margin-left: 4rem; /*keep space for collapsed sidebar*/
    transition: margin-left 0.5s ease-in-out;
    margin-top: 25px;
}
  
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    /* background-color: #001D3D; clark color */
    /* background-color: #090b37; */
    background-color: #000000;
    z-index: 1050;
    transition: width 0.5s ease-in-out; 
    justify-content: center;
}

/* Accordion NavLink active */
/* .sidebar .m_f0824112:where([data-active], [aria-current='page']) {
    background-color: #1090cd;
    color:'white' !important;
} */
.sidebar .m_f0824112 {
    /* --nl-color:white; */
    /* --nl-color:rgba(247, 220, 11, 0.955); */
    /* --nl-color:#f06418; */
    --nl-color:orange;
}
.home-nav-button .m_f0824112:where([data-active], [aria-current='page']) {
    /* border-radius: 10%; */
    background-color: transparent !important;
    color:'white' !important;
}

/* Accordion NavLink hover */
.sidebar .m_87cf2631:hover .iconify {
    /* color : #fc7b0be9 !important; */
    color : orange !important;
}

.sidebar .m_87cf2631:hover {
    /* background-color: #fc0bece9; */
    /* background-color: #022a54; */
    background-color: transparent !important;
    color:white !important;
}

/* Accordion submenus (NavLink) indent */
.sidebar .m_4ba585b8 {
    padding-inline: 3px;
    color: #d8d1c0;
}


.sidebar-header {
    display: flex;
    justify-content: left;
    padding-left: 3rem;
    align-items: center;
    overflow: hidden;
}
.sidebar-header Img {
    margin-bottom: 0;
}
.sidebar-header .m_8d3f4000 {
    margin-top: 1rem;
    margin-left: 1rem;
    margin-bottom: 0;
}
.home-nav {
    padding: 0%;
}
.home-nav-button .m_4ba585b8 {
    /* background-color: #1090cd; */
    /* background-color: #fcbf18f1; */
    color:white;
}


/*  */
/* SIDEBAR COLLAPSABLE */
/*  */

.sidebar-collapsable {
    width: 4rem;
}

.sidebar-collapsable:hover {
    width: 16rem;
    transition: width 0.5s ease-in-out;
}

/* HEADER */
/* GF Logo */
.sidebar-collapsable .sidebar-header Img {
    opacity: 0;
    transition: opacity 0.7s ease-in-out;
}
.sidebar-collapsable:hover .sidebar-header Img {
    opacity: 1;
    transition: opacity 0.9s ease-in-out;
}
/* Pin button */
.sidebar-collapsable .sidebar-header .m_8d3f4000 {
    opacity: 0;
    transition: opacity 0.7s ease-in-out;
  }
.sidebar-collapsable:hover .sidebar-header .m_8d3f4000 {
    opacity: 1;
    transition: opacity 1.2s ease-in-out;
  }

/* ACCORDION */
/* Chevrons */
.sidebar-collapsable .m_3f35ae96 {
    display: none;
}
.sidebar-collapsable:hover .m_3f35ae96 {
    display: block;
}
/* Text AccordionControl */
.sidebar-collapsable .m_b6d8b162 {
    color: transparent !important;
    width:0%;
    /* transition: color 0.5s ease-in-out; */
}
.sidebar-collapsable:hover .m_b6d8b162 {
    color: inherit !important;
    width: inherit;
    transition: color 0.5s ease-in-out;
}

/* NavLinks */
.sidebar-collapsable .m_1f6ac4c4 {
    opacity:0;
    transition: opacity 0.15s ease-in-out;
}
.sidebar-collapsable:hover .m_1f6ac4c4 {
    opacity:1;
    transition: opacity 0.6s ease-in-out;
}
.sidebar-collapsable .m_f07af9d2 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

/* Pill NavLink Active */
.sidebar-collapsable .m_4ba554d4 {
    padding-right: 0%;
}
.sidebar-collapsable:hover .m_4ba554d4 {
    padding-right: var(--mantine-spacing-md);
}

/* Others */
/* Version display */
.sidebar-collapsable .show_on_sidebar_hover {
    display:none;
  }
.sidebar-collapsable:hover .show_on_sidebar_hover {
   display:block;
}


/*  */
/* SIDEBAR FIXED */
/*  */


.sidebar-fixed {
    width: 16rem;
    display:block;
}

/* Page content margin */
.sidebar-fixed ~ .content {
    margin-left: 16rem;
    transition: margin-left 0.9s ease-in-out;
  } 


/*  */
/* TOPBAR */
/*  */
.topbar {
    position:fixed;
    z-index:10;
    right: 12px;
    top:0;
    height:60px;
    border-left:transparent !important;
    border-right:transparent !important;
}
.topbar-full {
    left:4rem;
    transition: all 0.5s ease-in-out;
}
.navbar.bg-light.topbar {
    background-color: #000000 !important;
}
.topbar-margin {
    left:16rem;
    transition: all 0.9s ease-in-out;
  }