body {
  background: #fafafa;
  color: #333333;
  margin-top: 0;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
  color: #444444;
}

h5 {
  margin-top: 1.5rem;
}

.bg-demblue {
  background-color: #0038A8;
}

.bg-util {
  background-color: #F4F4F4;
}

.site-header .navbar-nav .nav-link {
  color: #cbd5db;
}

.site-header .navbar-nav .nav-link:hover {
  color: #ffffff;
}

.site-header .navbar-nav .nav-link.active {
  font-weight: 500;
}

/* Make the main container a flex container */
.main-container {
  display: flex;
  flex-direction: row; /* Horizontal layout by default */
  gap: 1rem; /* Space between columns */
  height: 100vh;
}


/* Styles to set columns as scrollable... */
.column-scrollable {
  overflow-y: auto; /* Enable vertical scrolling */  
}

/* Styles to set columns as scrollable... */
.full-height {
  flex: 1;  
}

/* Style the left column */
.left-column {
  flex: 2; /* 2/3 of the width */
  /* background-color: #f8f9fa; /* Light background */
  /* padding-right: 1.5rem; */
  margin-right: 1.5rem;
}

/* Hide scrollbar for WebKit browsers (e.g., Chrome, Safari) */
/* .left-column::-webkit-scrollbar {
  display: none;
} */

/* Hide scrollbar for Firefox */
/* .left-column {
  scrollbar-width: none; 
} */

/* Style the right column */
.right-column {
  flex: 1; /* 1/3 of the width */
  /*background-color: #e9ecef; /* Light background */
  /* padding: 1rem; */
  /*nborder: 1px solid #dee2e6; */
}

/* Hide scrollbar for WebKit browsers (e.g., Chrome, Safari) */
/* .right-column::-webkit-scrollbar {
  display: none;
} */

/* Hide the scrollbar for Firefox */
/* .right-column {
  scrollbar-width: none; 
}  */

.content-section {
  background: #ffffff;
  padding: 10px 20px;
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin-bottom: 20px;
}


main {
  flex: 1; /* This makes the main content expand to take up available space */
}

footer {
  flex-shrink: 0; /* Prevents the footer from shrinking or overlapping */
  margin-top: 2rem;
}



/* Adjust layout for screens smaller than lg (992px) */
@media (max-width: 991.98px) {
  .main-container {
    flex-direction: column; /* Stack columns vertically */
    height: 100%;
  }

  /* Force scollable columns to take default height... */
  .column-scrollable {
    overflow-y: unset; /* Enable vertical scrolling */  
  }
  
  .profile-hero-container {
      margin: 0;
      padding: 0;
      flex-direction: column; /* Stack columns vertically */
    }

  .right-column {
    flex: 1; /* 1/3 of the width */
    /*background-color: #e9ecef; /* Light background */
    overflow-y: auto; /* Enable vertical scrolling */
    /* padding: 1rem; */
    /*nborder: 1px solid #dee2e6; */
  }
  
  /* Stack the right column on top of the left */
  .right-column {
    order: 1; /* Place right column first */
    overflow-y: unset; /* Disable vertical scrolling */
  }

  .left-column {
    order: 2; /* Place left column below */
    padding: 0;
    width: 100%;
  }

  .left-column, .right-column {
    padding: 0;
    overflow: visible;
  }
  
  .footer {
    order: 3; /* Place left column below */
  }
}

.blue-alert
{
    font-size: 28px;
    color: blue;
    margin-right: .3rem;
}