html, body {
    height: 100%;
    overflow: hidden; 
    font-size: 0.9em;
}


#main-wrapper {
    display: flex;
    height: 100%; 
    padding-bottom: 35px;
}


#content {
    flex-grow: 1; 
    display: flex;
    flex-direction: column; 
    overflow: hidden; 
}

main#page-content {
    flex-grow: 1; /* Takes up all available vertical space, pushing the footer down */
    overflow-y: auto; /* Enables vertical scrolling ONLY for this element */
    padding: 20px;
}

/* The footer, which will remain fixed at the bottom */
footer {
    flex-shrink: 0; /* Prevents the footer from shrinking */
    background-color: #f8f9fa;
    text-align: center;
    padding: 10px;
    font-size: 0.9rem;
    border-top: 1px solid #dee2e6;
}

.navbar {
    background-color: #f8f9fa;
    padding: 10px;
}
.navbar-brand {
    color: black;
}

#sidebar {
    flex-shrink: 0;
    width: 225px;
    background: #343a40;
    color: white;
    transition: all 0.3s;
    margin-top: -60px;
}
#sidebar.collapsed {
    width: 65px;
}
#sidebar.collapsed .nav-link span, 
#sidebar.collapsed .dropdown-toggle::after,
#sidebar.collapsed h5 span {
    display: none;
}

/* Re-show text for links inside the floating sub-menu */
#sidebar.collapsed .collapse .nav-link span {
    display: inline;
}

/* Style for floating sub-menu on collapsed sidebar */
#sidebar.collapsed li {
    position: relative;
    
}
/* Hide the sub-menu by default in collapsed mode */
#sidebar.collapsed .collapse {
    display: none;
}
/* On hover, display the sub-menu as a floating block */
#sidebar.collapsed li:hover > .collapse {
    display: block;
    position: absolute;
    left: 100%; /* Position to the right of the parent li */
    top: 0;
    z-index: 1050; /* Ensure it's above other content */
    min-width: 160px; /* Give the floating menu a minimum width */
    white-space: nowrap; /* Prevent text from wrapping */
    background-color: #343a40; /* Match sidebar background */
    border-radius: 0 0.25rem 0.25rem 0;
    padding: .5rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
}

#sidebar .nav-link {
    color: white;
}
#sidebar .nav-link:hover {
    background-color: transparent;
    text-decoration: underline;
}


.bg{
  background-image: url('/static/img/Depositphotos_9749897_XL.jpg');
  background-size: cover;
  width: 100%;
  overflow: hidden;
} 
.bg2{
  background-image: url('/static/img/Depositphotos_48816261_XL.jpg');
  background-size: cover;
  width: 100%;
  overflow: hidden;
}

.bg3{
  background-image: url('/static/img/Depositphotos_619212968_L.jpg');
  background-size: cover;
  width: 100%;
  overflow: hidden;
}

.bg4{
  background-image: url('/static/img/Depositphotos_174808014_L.jpg');
  background-size: cover;
  width: 100%;
  overflow: hidden;
}

.bg5{
  background-image: url('/static/img/Depositphotos_333947920_L.jpg');
  background-size: cover;
  width: 100%;
  overflow: hidden;
}

/* =================================
   Custom Button Styles
==================================== */

/* Override for btn-outline-primary to match the theme's primary color */
.btn-outline-primary {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Hover, focus, and active states for btn-outline-primary */
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: #fff;
    background-color: var(--bs-primary-hover);
    border-color: var(--bs-primary-hover);
}