div.custom-header {
  background: #600;
  width: 100%;
  height: 100px;
  padding-left: 1rem;
  padding-right: 2rem;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}
.custom-header img {
  max-width: 200px;
}
.custom-header nav ul {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  justify-content: right;
}

.custom-header nav ul li {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

.custom-header nav ul li > span,
.custom-header nav ul li > svg,
.custom-header nav ul li > a,
.custom-header nav ul li > div > a {
  font-size: 1rem;
  color: white !important;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* mobile nav */
@media (max-width: 1000px) {
  .custom-header nav {
    position: absolute; /* Position the nav absolutely */
    top: 100px; /* Place it below the header */
    left: 0;
    width: 100%;
    background: #600; /* Same background as the header */
    display: none; /* Hide the nav by default */
  }

  .custom-header nav.active {
    /* Show the nav when the "active" class is added */
    display: block;
  }

  .custom-header nav ul {
    flex-direction: column; /* Stack the nav items vertically */
    align-items: flex-start; /* Align items to the left */
    padding: 1rem; /* Add some padding */
  }

  .custom-header nav ul li {
    width: 100%; /* Make each list item take full width */
  }

  .custom-header nav ul li a {
    padding: 0.5rem 0; /* Add padding to the links */
    width: 100%;
    box-sizing: border-box; /* Include padding in the width */
  }

  .hamburger {
    display: block; /* Show the hamburger button */
    cursor: pointer;
  }

  .hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 5px 0;
  }

  /* Hide hamburger on desktop */
  .hamburger {
    display: none;
  }

  /* Show hamburger on mobile */
  @media (max-width: 1000px) {
    .hamburger {
      display: block;
    }
  }
}


/* status page default component style overrides */

.container {
  max-width: 90%;
  display: flex; 
  flex-direction: row;
  flex-wrap: wrap; 
  gap: 2rem;
}
 
.container > div { 
  margin-bottom: 0px !important;
  margin-top: 0px !important; 
  flex-basis: 25%;
  flex-grow: 1;
} 
.container > div.unresolved-incidents {
  flex-basis: 100%;
}

.container > div.text-section { 
  flex-basis: 100%;
}

.container > div.page-footer {
  flex-basis: 100%;
}

 
 
input.component-filter {
  width: 100%;
}

.layout-content.status.status-index .components-section .components-container {
  max-height: 600px;
  overflow-y: scroll;
}
 

.layout-content.status.status-index
  .scheduled-maintenances-container
  .scheduled-maintenance
  .incident-title
  a {
  max-width: 100%;
}

.pull-right {
  float: none;
}

.status-full-history .container {
  flex-direction: column;  
}
.status-full-history .container h4 {
  text-align: center;
}


.layout-content.status.status-incident>.container {
  max-width: 90%;
}
.status-incident .container .page-title {
  flex-basis: 100%
}

.layout-content.status.status-incident .components-affected {
 		font-weight: bold; 
  font-size: 1rem;
  color: black;
}

.layout-content.status.status-index .page-status.status-none, .layout-content.status.status-index .page-status.status-minor,
.layout-content.status.status-index .page-status.status-major,
.layout-content.status.status-index .page-status.status-maintenance {
  height: fit-content;
  flex-basis: 100%;
}

.footer {
  display: flex;
  justify-content: flex-end; /* Align icons to the right */
  gap: 15px; /* Space between icons */
  padding: 20px; /* Padding around the footer */
  background-color: #79242F;
}

.footer a {
  padding: 10px; /* Padding around each icon */
  display: inline-block; /* Ensures padding applies properly */
}