/*MAIN CONTENT*/
.wrapper {
    margin-left: var(--sidebar-width);
    padding-top: calc(var(--topnav-minheight) + var(--topnav-sidebar-space));
    padding-right: var(--spacing-8);
    padding-left: var(--spacing-10);
    transition: margin-left 400ms ease-in-out, margin-right var(--transition-timing-push-offcanvas);
    --transition-timing-push-offcanvas: 300ms ease-in-out;
}

/*SIDEBAR*/
.sidebar {
    width: var(--sidebar-width);
    position: fixed;
    left: 0;
    top: calc(var(--topnav-minheight) + var(--topnav-sidebar-space));
    transition: width 400ms ease-in-out; 
    z-index: 100;
    height: 100%; /*to avoid height issue even on small screens or when ui is distorted because of an internal component overflow*/
}
.sidebar-main {
    background-color: var(--white);
    border-radius: 0px var(--border-radius-default) var(--border-radius-default) 0px;
    padding: 16px 8px;
    height: calc(100% - var(--topnav-minheight) - 2 * var(--topnav-sidebar-space)); /*use 100% or 100dvh instead of 100vh for solving issues on mobile screen like ui change on scrolling*/
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.sidebar .nav-sidebar{
    flex-direction: column;
    gap: 8px;
}

.sidebar .nav-link {
    /*width: 215px;*/ /*to avoid mini sidebar error*/
    width: calc(var(--sidebar-width) - 2 * 8px); /*to avoid mini sidebar error*/
}
.sidebar .nav-link span {
    white-space: nowrap;
    transition: margin-left 400ms linear, opacity 500ms ease, visibility 500ms ease;
}
.sidebar .nav-link i:last-child {
    margin-left: auto;
    transition: margin-left 700ms linear, opacity 700ms ease, visibility 700ms ease;
}

.sidebar .nav-header {
    font-size: 12px;
    line-height: 16px;
    font-weight: var(--font-weight-regular);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: calc(var(--sidebar-width) - 2 * 8px);
}

/*collapsed state*/
body.sidebar-mini.sidebar-collapsed {
    --sidebar-width: 68px;
}
/*.sidebar-mini.sidebar-collapsed .sidebar .nav-link {
    width: 52px;*/ /*to avoid mini sidebar error*/
/*}*/
.sidebar-mini.sidebar-collapsed .sidebar .nav-link span{
    visibility: hidden;
    opacity: 0;
    margin-left: -8px;
}

/* Ensure nav-header content is visible even when collapsed */
.sidebar-mini.sidebar-collapsed .sidebar .nav-header .d-flex {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.sidebar-mini.sidebar-collapsed .sidebar .nav-header .btn-sidebar-hide {
    display: none; /* Keep hidden in collapsed state */
}
.sidebar-mini.sidebar-collapsed .sidebar .nav-link.btn-nav-collapse span{
    display: none; 
}
.sidebar-mini.sidebar-collapsed .sidebar .nav-link i:last-child {
    visibility: hidden;
    opacity: 0;
    margin-left: 0px;
}

/*collapse-hover state*/
.sidebar-mini.sidebar-collapsed.sidebar-hoverable .sidebar:hover {
    --sidebar-width: 231px;
}
/*.sidebar-mini.sidebar-collapsed.sidebar-hoverable .sidebar:hover {*/
    /*width: 231px;*/
    /*box-shadow: 0px 4px 20px 10px rgba(0, 0, 0, 0.2);*/
    /*box-shadow: var(--shadow-dropdown);
}*/
.sidebar-mini.sidebar-collapsed.sidebar-hoverable .sidebar-main:hover {
    box-shadow: var(--shadow-dropdown);
}
/*.sidebar-mini.sidebar-collapsed.sidebar-hoverable .sidebar:hover .nav-link {
    width: 215px;
}*/
.sidebar-mini.sidebar-collapsed.sidebar-hoverable .sidebar:hover .nav-link span {
    visibility: visible;
    opacity: 1;
    margin-left: 0px;
}
.sidebar-mini.sidebar-collapsed.sidebar-hoverable .sidebar:hover .nav-link.btn-nav-collapse span {
    display: block;
}

/* Show nav-header toggle button on hover when collapsed - but not when mobile sidebar is open */
/* Only on mobile screens */
@media (max-width: 575px) {
    .sidebar-mini.sidebar-collapsed.sidebar-hoverable .sidebar:hover .nav-header .btn-sidebar-hide {
        display: flex;
    }

    /* Ensure mobile sidebar open state takes precedence over hover */
    body.sidebar-mini.sidebar-mobile-open .sidebar:hover .nav-header .btn-sidebar-hide {
        display: flex !important;
    }
}
.sidebar-mini.sidebar-collapsed.sidebar-hoverable .sidebar:hover .nav-link i:last-child {
    visibility: visible;
    opacity: 1;
    margin-left: auto;
}

@media(min-width:576px) and (max-width: 992px) {

    #btn-sidebar-min {
        color: var(--text-color-subdued);
        opacity: 0.4;
        pointer-events: none;
    }

    /*collapsed state*/
    body.sidebar-mini {
        --sidebar-width: 68px;
    }
    /*.sidebar-mini .sidebar .nav-link {
        width: 52px;*/ /*to avoid mini sidebar error*/
    /*}*/
    .sidebar-mini .sidebar .nav-link span {
        visibility: hidden;
        opacity: 0;
        margin-left: -8px;
    }
    .sidebar-mini .sidebar .nav-link.btn-nav-collapse span {
        display: none;
    }
    .sidebar-mini .sidebar .nav-link i:last-child {
        visibility: hidden;
        opacity: 0;
        margin-left: 0px;
    }

    /*collapse-hover state*/
    .sidebar-mini .sidebar:hover {
        --sidebar-width: 231px;
    }
    /*.sidebar-mini .sidebar:hover {*/
        /*width: 231px;*/
        /*box-shadow: 0px 4px 20px 10px rgba(0, 0, 0, 0.2);*/
        /*box-shadow: var(--shadow-dropdown);
    }*/
    .sidebar-mini .sidebar-main:hover {
        /*width: 231px;*/
        /*box-shadow: 0px 4px 20px 10px rgba(0, 0, 0, 0.2);*/
        box-shadow: var(--shadow-dropdown);
    }
/*    .sidebar-mini .sidebar:hover .nav-link {
        width: 215px;
    }*/
    .sidebar-mini .sidebar:hover .nav-link span {
        visibility: visible;
        opacity: 1;
        margin-left: 0px;
    }
    .sidebar-mini .sidebar:hover .nav-link.btn-nav-collapse span {
        display: block;
    }
    
    /* Show nav-header toggle button on hover for mobile responsive - but not when mobile sidebar is open */
    .sidebar-mini .sidebar:hover .nav-header .btn-sidebar-hide {
        display: flex;
    }
    
    /* Ensure mobile sidebar open state takes precedence over hover in mobile responsive */
    body.sidebar-mini.sidebar-mobile-open .sidebar:hover .nav-header .btn-sidebar-hide {
        display: flex !important;
    }
    
    .sidebar-mini .sidebar:hover .nav-link i:last-child {
        visibility: visible;
        opacity: 1;
        margin-left: auto;
    }

}

.nav-sidebar-subnav{
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
}
/*.nav-sidebar-subnav i{
    visibility: hidden;
}*/

.nav-child.btn-nav-collapse.active {
    background-color: var(--rgba-hover-light);
}
.btn-nav-collapse::after {
    --icon-size: 12px;
    content: "";
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M10.0155 4.76552L6.26552 8.51552C6.23069 8.55039 6.18934 8.57805 6.14381 8.59692C6.09829 8.61579 6.04949 8.6255 6.00021 8.6255C5.95093 8.6255 5.90213 8.61579 5.85661 8.59692C5.81108 8.57805 5.76972 8.55039 5.7349 8.51552L1.9849 4.76552C1.91453 4.69516 1.875 4.59972 1.875 4.50021C1.875 4.4007 1.91453 4.30526 1.9849 4.2349C2.05526 4.16453 2.1507 4.125 2.25021 4.125C2.34972 4.125 2.44516 4.16453 2.51552 4.2349L6.00021 7.72005L9.4849 4.2349C9.51974 4.20005 9.5611 4.17242 9.60662 4.15356C9.65214 4.1347 9.70094 4.125 9.75021 4.125C9.79948 4.125 9.84827 4.1347 9.8938 4.15356C9.93932 4.17242 9.98068 4.20005 10.0155 4.2349C10.0504 4.26974 10.078 4.3111 10.0969 4.35662C10.1157 4.40214 10.1254 4.45094 10.1254 4.50021C10.1254 4.54948 10.1157 4.59827 10.0969 4.64379C10.078 4.68932 10.0504 4.73068 10.0155 4.76552Z" fill="%23717171"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M10.0155 4.76552L6.26552 8.51552C6.23069 8.55039 6.18934 8.57805 6.14381 8.59692C6.09829 8.61579 6.04949 8.6255 6.00021 8.6255C5.95093 8.6255 5.90213 8.61579 5.85661 8.59692C5.81108 8.57805 5.76972 8.55039 5.7349 8.51552L1.9849 4.76552C1.91453 4.69516 1.875 4.59972 1.875 4.50021C1.875 4.4007 1.91453 4.30526 1.9849 4.2349C2.05526 4.16453 2.1507 4.125 2.25021 4.125C2.34972 4.125 2.44516 4.16453 2.51552 4.2349L6.00021 7.72005L9.4849 4.2349C9.51974 4.20005 9.5611 4.17242 9.60662 4.15356C9.65214 4.1347 9.70094 4.125 9.75021 4.125C9.79948 4.125 9.84827 4.1347 9.8938 4.15356C9.93932 4.17242 9.98068 4.20005 10.0155 4.2349C10.0504 4.26974 10.078 4.3111 10.0969 4.35662C10.1157 4.40214 10.1254 4.45094 10.1254 4.50021C10.1254 4.54948 10.1157 4.59827 10.0969 4.64379C10.078 4.68932 10.0504 4.73068 10.0155 4.76552Z" fill="%23717171"/></svg>');
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: var(--text-color-subdued);
    margin-left: auto;
    height: var(--icon-size);
    width: var(--icon-size);
    transform: rotate(180deg);
    transition: 400ms ease;
}
.btn-nav-collapse.collapsed::after {
    transform: rotate(0deg);
}
.btn-nav-collapse.active::after {
    background-color: var(--text-color-main);
}

/*sidebar logo*/
.logo-sidebar {
    display: none;
    text-align: center;
}
/*It only hide/show logout button on the mini sidebar (not grid sidebar)*/
/*aside:first-of-type .logout-btn-div{
    display:none;
}*/
nav:has(.nav-sidebar) ~ .logout-btn-div {
    display: none;
}
body.topnav-none .logo-sidebar, body.topnav-none .logout-btn-div {
    display: block;
}


.logo-sidebar img {
    margin-bottom: 1rem;
    height: auto;
}
body.sidebar-mini .logo-sidebar img {
    width: 80%;
}
body.sidebar-grid .logo-sidebar img {
    width: 90%;
}

.logo-sidebar img:first-of-type {
    display: inline;
}
.logo-sidebar img.logo-mini-optional {
    display: none;
    width: calc(var(--sidebar-width) - 24px) !important;
}

/*collapsed state*/
body.sidebar-collapsed .logo-sidebar img:has(~.logo-mini-optional) {
    display: none;
}
body.sidebar-collapsed .logo-sidebar img.logo-mini-optional {
    display: inline;
}

/*collapse - hover state - sidebar mini*/
.sidebar-mini.sidebar-collapsed.sidebar-hoverable .sidebar:hover .logo-sidebar img:has(~.logo-mini-optional) {
    display: inline;
}
.sidebar-mini.sidebar-collapsed.sidebar-hoverable .sidebar:hover .logo-sidebar img.logo-mini-optional {
    display: none;
}

@media (min-width:576px) and (max-width: 992px){
    /*collapsed state*/
    .logo-sidebar img:has(~.logo-mini-optional) {
        display: none;
    }
    .logo-sidebar img.logo-mini-optional {
        display: inline;
    }

    /*collapse - hover state - sidebar mini*/
    .sidebar-mini .sidebar:hover .logo-sidebar img:has(~.logo-mini-optional) {
        display: inline;
    }
    .sidebar-mini .sidebar:hover .logo-sidebar img.logo-mini-optional {
        display: none;
    }
}


/*Grid Sidebar*/
body.sidebar-grid {
    --sidebar-width: 233px;
}

body.sidebar-grid .sidebar-main {
    /*border-radius: 0px;*/
    padding: 24px 8px 8px 8px;
    gap: 18px;
}

.user-profile-div {
    display: flex;
    border-bottom: 1px solid var(--color-grey-medium);
}
.user-profile-div div:has(img) {
    position: relative;
    margin-bottom: 18px;
}
.user-profile-div img{
    --size: 34px;
    transition: all 400ms linear;
}
.user-name {
    font-size: var(--font-size-large);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-semibold);
    transition-property: opacity, margin-left;
    transition-duration: 400ms;
    transition-timing-function: ease-in-out;
    margin-left: 0px;
    white-space: nowrap;
}
.user-role {
    position: absolute;
    left: 100%;
    top: 20px;
    font-size: var(--font-size-smaller);
    line-height: var(--line-height-small);
    font-weight: var(--font-weight-regular);
    color: var(--text-color-subdued);
    transition: all 400ms linear;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 140px;
}
#btn-sidebar-grid-min {
    /*margin: auto 0px auto auto;*/
    transition: all 400ms linear;
    --size: 30px;
    position: absolute;
    right: 8px;
}
#btn-sidebar-grid-min .icon {
    transition: all 400ms linear;
    border-radius: var(--border-radius-default);
}

.sidebar .grid-header {
    font-size: 11px;
    line-height: 16px;
    font-weight: var(--font-weight-regular);
    margin-bottom: 12px;
    padding-left: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: calc(var(--sidebar-width) - 2 * 8px);
}

.nav-grid-group {
    display: flex;
    height: 111px;
    position: relative;
    transition: all 400ms ease-in-out;
}
.nav-grid-link {
    color: var(--text-color-subdued);
    text-decoration: none;
    display: inline-block;
    width: 67px;
    height: 95px;
    margin-right: 8px;
    margin-bottom: 16px;
    position: absolute;
    transition: all 400ms ease-in-out;
}
.nav-grid-link:last-child{
    margin-right: 0px;
}
.nav-grid-group:last-child .nav-grid-link{
    margin-bottom: 0px;
}

.nav-grid-link:hover, .nav-grid-link:focus-visible {
    color: var(--text-color-main);
    outline: none;              
}
.nav-grid-link.active {
    color: var(--text-color-main);
}
.nav-grid-link.active .block {
    background-color: var(--menu-selected-color);
}

.nav-grid-link:nth-child(1){
    left: 0px;
    top: 0px;
}
.nav-grid-link:nth-child(2){
    left: calc(67px + 8px);
    top: 0px;
}
.nav-grid-link:nth-child(3){
    left: calc(2 * (67px + 8px));
    top: 0px;
}

.nav-grid-link .block {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 67px;
    height: 67px;
    border-radius: 16px;
    background-color: var(--rgba-hover-light);
    margin-bottom: 8px;
}
.nav-grid-link .text{
    font-size: 8px;
    line-height: 10px;
    font-weight: var(--font-weight-medium);
    text-align: center;
}
.nav-grid-link .icon{
    --size : 30px;
}

.logout-btn-div{
    margin-top: auto;
    padding: 0px 4px;
}
.logout-btn{
    width: 100%;
}

/*collapsed state*/
body.sidebar-grid.sidebar-collapsed {
    --sidebar-width: 83px;
}

/*.sidebar-collapsed .user-profile-div div:has(img) {
    width: 100%;
}*/
.sidebar-collapsed .user-profile-div img {
    --size: 100%;
}
.sidebar-collapsed .user-name {
    opacity: 0;
    margin-left: -200px;
}
.sidebar-collapsed .user-role {
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    width: 65px;
    text-align: center;
}
.sidebar-collapsed #btn-sidebar-grid-min {
    --min-btn-width: 32px;
    width: var(--min-btn-width);
    height: 30px;
    /*margin-right: calc(0px - 8px - var(--min-btn-width));*/
    right: calc(0px - var(--min-btn-width));
    top: 20px;
    border-radius: 0px var(--border-radius-round) var(--border-radius-round) 0px;
    background-color: var(--color-grey-light);
}
.sidebar-collapsed #btn-sidebar-grid-min .icon {
    --size: 24px;
    margin: auto 3px auto auto;
}

.sidebar-collapsed .nav-grid-group:has(> :nth-child(1)) {
    height: 111px;
}
.sidebar-collapsed .nav-grid-group:has(> :nth-child(2)) {
    height: 222px;
}
.sidebar-collapsed .nav-grid-group:has(> :nth-child(3)) {
    height: 333px;
}

.sidebar-collapsed .nav-grid-link:nth-child(2) {
    left: 0px;
    top: 111px;
}
.sidebar-collapsed .nav-grid-link:nth-child(3) {
    left: 0px;
    top: 222px;
}

.sidebar-collapsed .logout-btn span{
    display: none;
}
.sidebar-collapsed.sidebar-hoverable .sidebar:hover .logout-btn span{
    display: block;
}

/*collapse-hover state*/
/*.sidebar-grid.sidebar-collapsed.sidebar-hoverable .sidebar:hover {
    width: 233px;
    box-shadow: var(--shadow-dropdown);
}

.sidebar-grid.sidebar-collapsed.sidebar-hoverable .sidebar:hover .user-name {
    opacity: 1;
    margin-left: 0px;
}
.sidebar-grid.sidebar-collapsed.sidebar-hoverable .sidebar:hover .user-role {
    left: 100%;
    top: 20px;
}

.sidebar-grid.sidebar-collapsed.sidebar-hoverable .sidebar:hover .nav-grid-group {
    height: 111px;
}
.sidebar-grid.sidebar-collapsed.sidebar-hoverable .sidebar:hover .nav-grid-link:nth-child(2) {
    left: calc(67px + 8px);
    top: 0px;
}
.sidebar-grid.sidebar-collapsed.sidebar-hoverable .sidebar:hover .nav-grid-link:nth-child(3) {
    left: calc(2 * (67px + 8px));
    top: 0px;
}

.sidebar-grid.sidebar-collapsed.sidebar-hoverable .sidebar:hover .logout-btn span {
    display: block;
}*/

@media (min-width:576px) and (max-width: 992px) {

    #btn-sidebar-grid-min {
        color: var(--text-color-subdued);
        opacity: 0.4;
        pointer-events: none;
    }
    .joint-topnav #btn-sidebar-grid-min {
        top: 70px !important;
    }
    /*collapsed state*/
    body.sidebar-grid {
        --sidebar-width: 83px;
    }

    /*.user-profile-div div:has(img) {
        width: 100%;
    }*/
    .user-profile-div img {
        --size: 100%;
    }
    .user-name {
        opacity: 0;
        margin-left: -200px;
    }
    .user-role {
        left: 50%;
        top: 100%;
        transform: translateX(-50%);
        width: 65px;
        text-align: center;
    }
    #btn-sidebar-grid-min {
        --min-btn-width: 32px;
        width: var(--min-btn-width);
        height: 30px;
        /*margin-right: calc(0px - 8px - var(--min-btn-width));*/
        right: calc(0px - var(--min-btn-width));
        top: 20px;
        border-radius: 0px var(--border-radius-round) var(--border-radius-round) 0px;
        background-color: var(--color-grey-light);
    }
    #btn-sidebar-grid-min .icon {
        --size: 24px;
        margin: auto 3px auto auto;
    }

    .nav-grid-group:has(> :nth-child(1)) {
        height: 111px;
    }
    .nav-grid-group:has(> :nth-child(2)) {
        height: 222px;
    }
    .nav-grid-group:has(> :nth-child(3)) {
        height: 333px;
    }

    .nav-grid-link:nth-child(2) {
        left: 0px;
        top: 111px;
    }
    .nav-grid-link:nth-child(3) {
        left: 0px;
        top: 222px;
    }

    .logout-btn span{
        display: none;
    }

    /*collapse-hover state*/
    /*.sidebar-grid .sidebar:hover {
        width: 233px;
        box-shadow: var(--shadow-dropdown);
    }

    .sidebar-grid .sidebar:hover .user-name {
        opacity: 1;
        margin-left: 0px;
    }
    .sidebar-grid .sidebar:hover .user-role {
        left: 100%;
        top: 20px;
    }

    .sidebar-grid .sidebar:hover .nav-grid-group {
        height: 111px;
    }
    .sidebar-grid .sidebar:hover .nav-grid-link:nth-child(2) {
        left: calc(67px + 8px);
        top: 0px;
    }
    .sidebar-grid .sidebar:hover .nav-grid-link:nth-child(3) {
        left: calc(2 * (67px + 8px));
        top: 0px;
    }

    .sidebar-grid .sidebar:hover .logout-btn span {
        display: block;
    }*/
}


/*TOP NAVIGATION*/
.topnav {
    /*position: sticky;
    position: -webkit-sticky;*/ /* Safari older versions */
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 101;
    box-shadow: var(--shadow-button);
    /*margin-bottom: 16px;*/
}
.navbar {
    /*padding: 0.75rem 0rem;*/
    padding: 5.5px 0px;
    background-color: var(--white);
    min-height: var(--topnav-minheight);
    transition: box-shadow 300ms ease;
}
.navbar > .container-fluid{
    padding-right: 1rem;
    padding-left: 1rem;
}
.navbar:has( .navbar-collapse.collapsing), .navbar:has( .navbar-collapse.show) {
    box-shadow: 0px 4px 20px 10px rgba(0, 0, 0, 0.2);
}

.navbar-brand {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-right: 2rem;
}
.navbar-brand img {
    object-fit: contain;
}

.navbar-nav {
    column-gap: 48px;
}
@media (min-width: 768px) {
    .navbar-expand-md .navbar-nav {
        align-items: center;
    }
}
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav {
        align-items: center;
    }
}

.navbar-nav .nav-link.nav-child {
    padding: 8px;
}
.nav-child {
    display: flex;
    align-items: center;
    padding: 8px;
    height: 32px;
    gap: 8px;
    border-radius: var(--border-radius-default);
    transition: background-color 600ms ease-out, color 100ms ease-out, width 400ms ease-in-out;
    font-size: 12px;
    line-height: 16px;
    font-weight: var(--font-weight-regular);
    color: var(--text-color-subdued);
}
.nav-child:focus {
    color: var(--text-color-subdued);
}
.nav-child:hover, .nav-child:focus-visible {
    background-color: var(--rgba-hover-light);
    color: var(--text-color-subdued);
    outline: none;
}

.nav-child.active {
    background-color: var(--menu-selected-color);
    color: var(--text-color-main);
}
.nav-child.active:focus-visible {
    background-color: var(--menu-selected-color-hover);
}
.nav-child.active:hover {
    background-color: var(--menu-selected-color-hover);
}

.nav-link.disabled {
    color: var(--text-color-subdued);
    opacity: 0.4;
}

.nav-child > .badge-num {
    font-size: 12px;
    line-height: 16px;
    height: 20px;
    padding: 2px 4px;
}

/*to make toggler visible without navbar-light class*/
.navbar-toggler {
    color: rgba(0, 0, 0, 0.55);
    border-color: rgba(0, 0, 0, 0.1);
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/*No Top Navigation variant*/
body.topnav-none {
    --topnav-minheight: 0px;
    --topnav-sidebar-space: 0px;
}
body.topnav-none .topnav {
    display: none;
}
body.topnav-none .wrapper {
    padding-top: 24px;
}

body.topnav-none .sidebar-main{
    border-radius: 0px;
}

/*Navigations documentation css*/
.navigations-container .topnav {
    position: relative;
    z-index: 1;
    box-shadow: var(--chart-tooltip-box-shadow);
}

/*-------------------------------------mobile responsive mini sidebar*/
.btn-sidebar-show {
    position: fixed;
    top: 73px;
    /*    left: var(--sidebar-width);*/
    left:0px;
    z-index: 9999;
    display: none;
    padding: var(--spacing-1);
    background-color: var(--color-grey-dark);
    border-radius: 0 18px 18px 0;
    color: var(--white);
/*    height:29px;
    min-width:22px;*/
}

.btn-sidebar-hide {
    background-color: var(--color-grey-dark);
    color: var(--white);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: none;
}

/* Grid sidebar show button */
.btn-sidebar-show-grid {
    position: fixed;
    top: 73px;
    left: 0px;
    /*    left: var(--sidebar-width);*/
    z-index: 9999;
    display: none;
    padding: var(--spacing-1);
    background-color: var(--color-grey-dark);
    border-radius: 0 18px 18px 0;
    color: var(--white);
/*    height: 29px;
    min-width: 22px;*/
}

/* Hide toggle button completely for sidebar-grid */
/*body.sidebar-grid .btn-sidebar-show {
    display: none !important;
}*/

@media (max-width: 575px) {
    /* Only show toggle button for sidebar-mini */
    body.sidebar-mini .btn-sidebar-show {
        display: block;
    }
    
    /* Show toggle button for sidebar-grid */
    body.sidebar-grid .btn-sidebar-show-grid {
        display: block;
    }
    
    body.sidebar-mini .btn-sidebar-hide {
        display: block; /* Show on mobile screens */
        border-radius: 18px 0 0 18px;
        position: absolute;
        background-color: var(--color-grey-dark);
        color: var(--white);
        padding: var(--spacing-1);
        border: none;
        cursor: pointer;
        z-index: 1000;
        min-width: 22px;
        height: 20px;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        width:max-content;
        top:0px;
        right: 0px;
    }
    
    /* Grid sidebar hide button styling */
    body.sidebar-grid .btn-sidebar-hide {
        display: block; /* Show on mobile screens */
        border-radius: 18px 0 0 18px;
        position: absolute;
        background-color: var(--color-grey-dark);
        color: var(--white);
        padding: var(--spacing-1);
        border: none;
        cursor: pointer;
        z-index: 1000;
        min-width: 32px;
        height: 32px;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        width:max-content;
        top:0px;
        right: 0;
    }
    
    /* Hide sidebar for sidebar-mini on mobile */
    body.sidebar-mini, body.sidebar-grid {
        --sidebar-width: 0px;
    }
   
    /* Open state */
    body.sidebar-mini.sidebar-mobile-open .sidebar, body.sidebar-grid.sidebar-mobile-open .sidebar {
        left: 0;
    }

    body.sidebar-mini .sidebar .nav-link span {
        visibility: visible;
        opacity: 1;
        margin-left: 0px;
    }
    
    body.sidebar-mini.sidebar-mobile-open, body.sidebar-grid.sidebar-mobile-open {
        --sidebar-width: 0;
    }

    /* Base state: hidden */
    body.sidebar-mini .sidebar {
      position: fixed;
      top: calc(var(--topnav-minheight) + var(--topnav-sidebar-space));
      left: -231px; /* hide outside the viewport */
      width: 231px;
      height: 100%;
      transition: left 400ms ease-in-out; /* animate left */
      z-index: 100;
    }
    
    body.sidebar-grid .sidebar {
      position: fixed;
      top: calc(var(--topnav-minheight) + var(--topnav-sidebar-space));
      left: -233px; /* hide outside the viewport */
      width: 233px;
      height: 100%;
      transition: left 400ms ease-in-out; /* animate left */
      z-index: 100;
    }
    
    body.sidebar-mini.sidebar-mobile-open .btn-sidebar-hide {
        display: flex !important;
    }

    body.sidebar-mini .sidebar .nav-link.btn-nav-collapse span {
        display: block;
    }
    .sidebar-mini .sidebar-main {
        box-shadow: var(--shadow-dropdown);
    }
    
    /* Grid sidebar specific mobile styles */
    body.sidebar-grid.sidebar-mobile-open .sidebar {
        left: 0;
        width: 233px;
    }
    
    .sidebar-grid .sidebar-main {
        box-shadow: var(--shadow-dropdown);
    }
    
    .wrapper {
        padding-right: var(--spacing-8);
        padding-left: var(--spacing-8);
    }
    body.sidebar-mini.sidebar-collapsed {
        --sidebar-width: 0px;
    }
/*    when sidebar collapsed, form example notifications and Messages page opened*/
    .sidebar-mini.sidebar-collapsed .sidebar .nav-link span {
        visibility: visible;
        opacity: 1;
        margin-left: 0px;
    }
    .sidebar-mini.sidebar-collapsed .sidebar .nav-link.btn-nav-collapse span {
        display: block;
    }
    .sidebar .nav-header {
        overflow: visible;
    }
    .sidebar .nav-link {
        width: 215px;
    }
    #btn-sidebar-min {
        color: var(--text-color-subdued);
        opacity: 0.4;
        pointer-events: none;
    }
    body.joint-topnav .topnav .navbar-brand {
        display: block !important;
    }
/*-----------------------------------------------------------------sidebar grid*/
    #btn-sidebar-grid-min{
        display:none;
    }
    .user-profile-div {
        position:relative; /*for btn hide sidebar position*/
    }
    body.sidebar-collapsed .logo-sidebar img.logo-mini-optional {
        display: none;
    }
    body.sidebar-collapsed .logo-sidebar img:has(~.logo-mini-optional) {
        display: inline;
    }
    body.sidebar-grid.sidebar-collapsed{
        --sidebar-width: 0px;
    }
/*    expands nav grid links horizontally*/
    .sidebar-collapsed .nav-grid-group:has(> :nth-child(1)) {
        height: 111px;
    }
    .nav-grid-link {
        position: static;
    }

    .sidebar-collapsed .user-name {
        opacity: 1;
        margin-left: 0px;
    }
    .sidebar-collapsed .user-role {
        top: 20px;
        left: 100%;
        transform: translateX(0%);
        text-align: left;
    }
    .sidebar .grid-header {
        width: auto;
    }
    .sidebar-collapsed .user-profile-div img {
        --size: 32px;
    }
    .sidebar-collapsed .logout-btn span {
        display: block;
    }
}

/* Hide btn-sidebar-hide on screens larger than 575px */
@media (min-width: 576px) {
    body.sidebar-mini .btn-sidebar-hide, body.sidebar-grid .btn-sidebar-show-grid {
        display: none !important;
    }
}

/*adaptive topnav*/
body.joint-topnav .sidebar {
    --topnav-minheight: 0px;
    --topnav-sidebar-space: 0px;
}
body.joint-topnav .sidebar-main {
    border-radius: 0px;
}
body.joint-topnav .topnav {
    margin-left: var(--sidebar-width);
    border-left: 1px solid var(--rgba-hover-light);
    box-shadow: var(--shadow-button);
    /*    border-bottom:1px solid var(--rgba-hover-light);*/
    transition: margin-left .4s ease-in-out;
}
body.joint-topnav .sidebar{
   z-index: 105;
}

/*sidebar grid collapsed button positioning*/
.joint-topnav.sidebar-collapsed #btn-sidebar-grid-min {
    top: 70px;
}
body.joint-topnav .logo-sidebar, body.joint-topnav .logout-btn-div {
    display: block;
}

body.joint-topnav .topnav .navbar-brand {
    display: none;
}
/*for Topnav links tor reduce column gap*/
@media(min-width:993px) and (max-width:1100px){
    .navbar-nav {
        column-gap: 19px;
    }
}