/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin-bottom: 60px; /* Margin bottom by footer height */
  font-family: 'Greycliff';
  font-weight: 400;
}

.container {
  max-width: 960px;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px; /* Fixed height of the footer */
  line-height: 60px; /* Vertically center the text */
  background-color: #f5f5f5;
  text-align: center; /* Center-align text */
  z-index: 1000; /* Ensure the footer stays on top */
}

#copyright-info {
  color: #21517C;
}

/* Default styles for topBanner */
#topBanner {
  padding: 1rem 2rem; /* Default padding */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  background-color: rgba(0,138,207,0.04);
  border-radius: 15px;
}



.navbrand-line-1 {
  font-family: 'Greycliff';
  font-weight: 400;
  font-size: 14px;
  line-height: 119%;
  color: #008ACF;
}

.navbrand-line-2 {
  font-family: 'Greycliff';
  font-weight: 500;
  font-size: 29px;
  line-height: 119%;
  color: rgba(0, 138, 207, 1);
}

/* Apply flexbox layout only when the collapse is shown */
#dashboard-submenu.collapse.show {
  display: block; /* Ensure block display when shown */
  padding-left: 0;
}

/* Ensure that each item occupies 100% width when shown */
#dashboard-submenu .nav-item {
  width: 100%; /* 100% width for each item */
}

#dashboard-nav .nav-link {
  color: rgba(33, 81, 124, 1); /* Default color */
  font-weight: 400;
  font-size: 20px;
}
#dashboard-nav .nav-link.active {
  color: rgba(0, 138, 207, 1); /* Active link color */
  font-weight: 600;
  font-size: 20px;
  text-decoration: underline;
  text-decoration-color: rgba(0, 138, 207, 1); /* Same color as text */
  text-underline-offset: 15px; 
  text-decoration-thickness: 3px
}
#dashboard-nav .nav-link:hover {
  color: rgba(0, 138, 207, 1); /* Hover color */
  font-weight: 600;
  font-size: 20px;
}

.page-title {
  color: rgba(33, 81, 124, 1);
  font-size: 30px; /* Adjust the font size */
  font-weight: 400; /* Make the text bold */
  color: #21517C; /* Set the text color */
}

#periodSelect {
  display: flex;
  justify-content: center;
  background-color: rgba(33, 81, 124, 0.05);
  border-radius: 10px;
}

#periodSelect .btn {
  font-size: 16px;
  font-weight: 500;
  width: 150px;
  border-radius: 10px;
  transition: all 0.3s ease;
  border: 0px;
  color: rgba(33, 81, 124, 1); /* Hover text color for inactive buttons */
}

#periodSelect .btn.active {
  background-color: rgba(0,138,207,0.1); /* Active button background */
}

#periodSelect .btn:not(.active):hover {
  background-color: rgba(0,138,207,0.1); /* Hover background for inactive buttons */
}

/* Ensure the offcanvas menu takes up the full height of the screen */
.offcanvas {
  height: 100vh; /* Full viewport height */
  max-height: 100vh; /* Prevent overflow */
  overflow-y: auto; /* Enable scrolling if content overflows */
}

/* Adjust the offcanvas body to fill available space */
.offcanvas-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Align content to the top */
  padding-bottom: 1rem; /* Add some padding at the bottom */
}

/* Ensure the menu items are properly spaced */
#menu .nav-link {
  padding: 10px 15px;
  font-size: 16px;
  color: #21517C; /* Default link color */
  transition: color 0.3s ease;
}

#menu .nav-link:hover {
  color: #008ACF; /* Hover link color */
}

#menu .nav-link.active {
  color: #008ACF; /* Active link color */
  font-weight: bold;
}


/* Target the entire scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

/* Background of the track */
::-webkit-scrollbar-track {
  background: rgba(33, 81, 124, 0.1);
}

/* Scrollbar thumb (the draggable part) */
::-webkit-scrollbar-thumb {
  background: rgba(33, 81, 124, 1);     /* Bootstrap primary */
  border-radius: 10px;
}

/* On hover */
::-webkit-scrollbar-thumb:hover {
  background: rgba(33, 81, 124, 1);
}

/* Firefox uses a different syntax */
* {
  scrollbar-width: auto;               /* or 'auto' or 'none' */
  scrollbar-color: rgba(33, 81, 124, 1) rgba(33, 81, 124, 0.1);    /* thumb color and track color */
}