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

.sidebar {
    /*margin-top: 16px;*/ /*for topnav*/
    width: var(--sidebar-width);
    position: fixed;
    left: 0;
    top: calc(var(--topnav-minheight) + var(--topnav-sidebar-space));
    border-radius: 0px var(--border-radius-default) var(--border-radius-default) 0px;
    transition: width 400ms ease-in-out;
    z-index: 1009;
}

.sidebar-main {
    background-color: var(--white);
    border-radius: 0px var(--border-radius-default) var(--border-radius-default) 0px;
    padding: 16px 8px;
    height: calc(100vh - var(--topnav-minheight) - 2 * var(--topnav-sidebar-space));
    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;
    }

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;
    }

.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;
    }

/*.sidebar-mini.sidebar-collapsed.sidebar-hoverable .sidebar:hover {
    width: 231px;
    box-shadow: 0px 4px 20px 10px rgba(0, 0, 0, 0.2);
}*/

.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;
        }

.sidebar-mini.sidebar-collapsed.sidebar-hoverable .sidebar:hover .nav-link i:last-child {
            visibility: visible;
            opacity: 1;
            margin-left: auto;
        }
.sidebar .nav-link.active {
    background-color: #2DB9F0; /* Change to your preferred color */
    color: #fff; /* Set the text color for the active link */
    font-weight: bold;
}
.sidebar .nav-link.active {
    background-color: #2DB9F0; /* Change to your preferred color */
    color: #fff; /* Set the text color for the active link */
    font-weight: bold;
}

.sidebar .nav-link.active i {
        color: #fff; /* Optionally, change icon color when active */
    }


.hamburger {
    cursor: pointer;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

/* Hamburger inner lines */
.hamburger__inner {
    width: 25px;
    height: 3px;
    background: black;
    margin: 3px 0;
    transition: transform 0.3s ease, background 0.3s ease;
}

/* Transform hamburger icon to 'X' on active */
.hamburger.active .one {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active .two {
    opacity: 0;
}

.hamburger.active .three {
    transform: rotate(-45deg) translate(5px, -5px);
}

@media (max-width: 992px) {

    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;
        }

    .sidebar-mini .sidebar:hover {
        width: 231px;
        box-shadow: 0px 4px 20px 10px rgba(0, 0, 0, 0.2);
    }

        .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;
            }

            .sidebar-mini .sidebar:hover .nav-link i:last-child {
                visibility: visible;
                opacity: 1;
                margin-left: auto;
            }

    .sidebar-mini:not(.sidebar-collapsed) .search-filter-collapse-icon {
        justify-content: flex-start; /* left */
        margin-left:11px;
    }

    /* When minimized, push icon to the right */
    .sidebar-mini.sidebar-collapsed .search-filter-collapse-icon {
        justify-content: flex-end !important; /* right */
        margin-right: 4px !important;
    }

/*    #btn-sidebar-min {
        color: var(--subdued);
        opacity: 0.4;
        pointer-events: none;
        cursor: default;
    }*/
}


.search-filter-collapse-icon {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Align to the right */
}

/* Sidebar styles */
.sidebar-main {
    width: auto; /* Default width */
    transition: width 0.3s;
    background: #ffffff; /* Background color */
}

.sidebar-main.minimized {
        width: 60px; /* Width when minimized */
 }

  /* Hide text in minimized state */
.sidebar-main.minimized .nav-link span {
            display: none; /* Hide text labels */
  }

/* Hamburger icon styles */
.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end; /* Align bars to the right */
}

/* Individual bars with specific widths */
.hamburger__inner .one {
    width: 15px; /* Short bar */
    height: 4px;
    background: black;
    margin: 3px 0;
    transition: all 0.3s ease;
}

.hamburger__inner .two {
    width: 25px; /* Medium bar */
    height: 4px;
    background: black;
    margin: 3px 0;
    transition: all 0.3s ease;
}

.hamburger__inner .three {
    width: 30px; /* Long bar */
    height: 4px;
    background: black;
    margin: 3px 0;
    transition: all 0.3s ease;
}

/* Expanded state styles */
.hamburger__inner.active .one,
.hamburger__inner.active .two,
.hamburger__inner.active .three {
    background: red; /* Change color on active state */
    box-shadow: 0px 0px 5px red; /* Red shadow on active */
}

@media (max-width: 768px) {
    .sidebar-main {
        width: 100px; /* Width for smaller screens */
    }

        .sidebar-main.minimized {
            width: 50px; /* Minimized width for smaller screens */
        }

    .search-filter-collapse-icon {
        padding: 5px; /* Adjust padding for smaller screens */
    }

    .nav-link span {
        font-size: 12px; /* Adjust font size for nav links */
    }
}
.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 {
    content: 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>');
    margin-left: auto;
    height: 12px;
    width: 12px;
    transform: rotate(0deg);
    transition: 400ms ease;
}
.btn-nav-collapse.collapsed::after {
    transform: rotate(90deg);
}
.btn-nav-collapse.active::after {
    content: 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="%23212121"/></svg>');
}


/*TOPNAV*/
.topnav {
    /*position: sticky;
    position: -webkit-sticky;*/ /* Safari older versions */
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1010;
    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 {
        margin: auto;
        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(--subdued);
}
.nav-child:focus {
    color: var(--subdued);
}
.nav-child:hover, .nav-child:focus-visible {
    background-color: var(--rgba-hover-light);
    color: var(--subdued);
    outline: none;
}
.nav-child.active {
    background-color: var(--whispering-blush);
    color: var(--black);
}
.nav-child.active:focus-visible {
    background-color: var(--whispering-blush-hover);
}
/*.nav-child.active:hover {
    background-color: var(--whispering-blush-hover);
}*/

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

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

/*stop 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");
}
*/

.notification-title {
    font-size: 14px; /* Title font size */
    font-weight: bold; /* Title font weight */
    margin-bottom: 8px; /* Space below the title */
    color: #333; /* Title color */
}
.fa-stack[data-count]:after {
    position: absolute;
    right: 0%;
    top: 1%;
    content: attr(data-count);
    font-size: 30%;
    padding: .6em;
    border-radius: 999px;
    line-height: .75em;
    color: white;
    background: rgba(255,0,0,.85);
    text-align: center;
    min-width: 2em;
    font-weight: bold;
}