:root {
    --app-sidebar-width: 264px;
    --dark1: #017670;
}

.bg-dark1 {
    background-color: var(--dark1);
}
.text-dark1 {
    color: var(--dark1);
}
.border-dark1 {
    border-color: var(--dark1);
}
.btn-dark1 {
    background-color: var(--dark1);
    color: #fff;
}

.app-main > header,
.app-main > header .dropdown-toggle,
.app-main > header h1 {
    background-color: #fff;
    color: var(--bs-body-color);
}

.navbar-light.bg-white {
    background-color: #fff !important;
    color: var(--bs-body-color);
}

.app-sidebar {
    width: var(--app-sidebar-width);
}

.app-sidebar.bg-dark1,
.app-sidebar.bg-dark1.offcanvas {
    background-color: var(--dark1) !important;
    color: #fff;
}

.app-sidebar.bg-dark1 .dropdown-toggle::after {
    border-top-color: rgba(255, 255, 255, 0.75);
}

.app-sidebar .nav-link {
    border-radius: 0.5rem;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
}

.app-sidebar .nav-link .bi {
    font-size: 1.1rem;
}

.app-sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.app-sidebar .nav-link.active {
    background-color: var(--dark1);
    color: #fff;
}

@media (min-width: 992px) {
    .app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1030;
        overflow-y: auto;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
    }

    .app-main {
        margin-left: var(--app-sidebar-width);
    }
}