﻿html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

/*body {
  margin-bottom: 150px;
}
*/

<style >
:root {
    /* 🌑 Backgrounds */
    /*--bg-dark: #076363;*/ /* Elegant deep blue-green base */
    --bg-dark: #076363; /* Elegant deep blue-green base */
    --bg-card: #203A43; /* Muted teal-gray for contrast */
    /* 💠 Accents */
    --accent-primary: #00BCD4; /* Base cyan (main highlight) */
    --accent-secondary: #0097A7; /* Deep teal for depth */
    --accent-hover: #26C6DA; /* Bright shimmer for hover */
    /* ✨ Text Colors */
    --text-primary: #E0F7FA; /* Soft white-blue (main text) */
    --text-secondary: #B0BEC5; /* Subtle silver for subtext */
    /* 🌈 Optional shadows/borders */
    --shadow-color: rgba(0, 188, 212, 0.25);
    --border-light: rgba(255, 255, 255, 0.08);
    --logobg1-light: #e0eff1;
    --logobg2-light: #bcd8dc;
}
body {
    overflow-x: hidden;
    padding-top:0px; /* To avoid overlap with fixed topbar */
    /*padding-top: 56px;*/ /* To avoid overlap with fixed topbar */
}

.sidebar {
    width: 250px;
    height: 100vh;
    background-color: #212529; /* Dark background */
    position: fixed;
    left: 0;
    top: 56px; /* Topbar height */
    bottom: 0;
    transition: margin-left 0.3s ease;
    z-index: 1030;
    overflow-y: auto; /* ? Enables vertical scrolling */
    scroll-behavior: smooth;
    padding-bottom:70px;
}

    .sidebar.collapsed {
        margin-left: -250px;
    }

    .sidebar .nav-link {
        color: #adb5bd;
        padding: 15px 20px;
    }

        .sidebar .nav-link:hover {
            background-color: #343a40;
            color: #fff;
        }
        .sidebar .nav-link.active {
            /*background-color: #e65100;*/
            background-color: var(--bg-dark);
            color: white !important;
            font-weight: 600;
            /*border-radius: 5px;*/
        }
       /* .sidebar .nav-link.active {
            background-color: #e65100 !important;
            color: white !important;
        }*/

.content {
    margin-left: 250px;
    transition: margin-left 0.3s ease;
    width: 100%;
}

    .content.expanded {
        margin-left: 0;
    }

@media (max-width: 768px) {
    .sidebar {
        margin-left: -250px;
        top: 56px;
    }

        .sidebar.show {
            margin-left: 0;
        }

    .content {
        margin-left: 0;
    }
}

footer {
    margin-top: 30px;
}

.dropdown-menu {
    border: none;
    box-shadow: none;
}

.dropdown-item:hover {
    background-color: var(--bg-dark);
    color: white !important;
}




</style >



