/* Hide /history link */
.history-footer-link { 
    display: none; 
  }
  
  /* Hide black bar with text over image */
  .text-container { 
    display: none !important; 
  }
  
  /* Hide incidents older than the first 5 days */
  .status-day:nth-child(n+7) { 
    display: none; 
  }
  
  /* Hide "No incidents" messages */
  .no-incidents { 
    display: none; 
  }
  
  /* Conditionally display the "Past Incidents" header only if there are incidents within the first 5 days */
  .incidents-list:has(.status-day:nth-child(-n+6):not(.no-incidents)) #past-incidents {
    display: block;
  }
  
  /* Default: hide the "Past Incidents" header */
  #past-incidents {
    display: none;
  }
  
  /* Container for columns */
  .components-container {
    display: flex; /* Changed to flex for column distribution */
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    gap: 10px; /* Space between columns */
    margin-top: 30px; /* Add top margin for space after the legend */
  }
  
  /* Style for the columns */
  .status-container {
    display: grid; /* Enable grid layout */
    grid-template-columns: repeat(2, 1fr); /* Create 2 equal columns */
    gap: 10px; /* Space between columns */
  }
  
  /* Ensure each component is a grid item */
  .status-column {
    display: contents; /* Allow the children to behave as direct children of the grid container */
  }
  
  /* Style for each component item */
  .component-inner-container {
    margin-bottom: 3px; /* Space between component items */
    border: 2px solid #e3e3e3; /* Optional: add border for better visibility */
    padding: 10px; /* Optional: add padding for better spacing */
    border-radius: 5px; /* Optional: add rounded corners */
    background-color: white; /* White background */
    position: relative;
    flex: 1 1 calc(50% - 10px); /* Ensure two columns of equal size with space */
  }
  
  /* Operational Status */
  .component-inner-container.status-green {
      border-color: #1E8542; /* Green */
  }
  
  /* Degraded Performance Status */
  .component-inner-container.status-yellow {
      border-color: #f1c40f; /* Yellow */
  }
  
  /* Partial Outage Status */
  .component-inner-container.status-orange {
      border-color: #B35E14; /* Orange */
  }
  
  /* Major Outage Status */
  .component-inner-container.status-red {
      border-color: #DE2F1B; /* Red */
  }
  
  /* Under Maintenance Status */
  .component-inner-container.status-blue {
      border-color: #207AB6; /* Blue */
  }
  
  /* Select the icon and adjust its position */
  .component-inner-container .tool.icon-indicator {
    position: absolute;
    top: 1px;              /* Moves the icon to the top of the container */
    left: 0;               /* Aligns the icon to the left */
    margin: 8px;          /* Adds a little margin around the icon */
    font-size: 25px;
  }
  
  /* Style for the name text */
  .component-inner-container .name {
    -webkit-text-size-adjust: 100%;
    font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
    -webkit-font-smoothing: subpixel-antialiased;
    color: #333333;
    font-size: 1rem;
    line-height: 1.5rem;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 500;
    margin-left: 30px;   /* Adjusts the space for the icon */
    display: inline-block; /* Keeps name and icon on the same line */
  }
  
  /* Style for the description text */
  .component-inner-container .description {
    display: block; /* Ensure it starts on a new line */
    color: #666; /* Gray color for description text */
    margin-top: 5px; /* Space between name and description */
    width: 100%; /* Ensure description fits within the box */
    word-wrap: normal; /* Ensure text breaks within box */
    box-sizing: border-box; /* Prevent overflow */
  }
  
  /* Two columns layout */
  .components-container.two-columns .component-container {
    flex: 1 1 calc(50% - 10px); /* Adjust width for two columns */
  }
  
  .legend-wrapper {
    margin-top: 0rem; /* Space above the legend */
    text-align: center; /* Center the legend text */
  }
  
  .component-statuses-legend {
    -webkit-text-size-adjust: 100%;
    font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
    font-weight: 400;
    -webkit-font-smoothing: subpixel-antialiased;
    color: #333333;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
    font-size: 0.999rem; /* Font size */
    line-height: 1.334375rem; /* Line height */
    overflow: hidden; /* Prevent overflow */
  }
  
  .legend-item {
    display: inline-block; /* Display items inline */
    margin: 0 10px; /* Space between legend items */
  }
  
  .legend-item .icon-indicator {
    margin-right: 5px; /* Add space to the right of the icon */
    vertical-align: middle; /* Align the icon with the text */
  }
  
  .page-status {
    margin-bottom: 28px !important; /* Closer spacing to the legend */
  }
  
  .unresolved-incidents {
    margin-bottom: 28px !important; /* Closer spacing to the legend */
  }
  
  .masthead {
    margin-bottom: 28px !important;
  }
  
  .component-status {
    display: none; /* Remove the component status text */
  }
  
  /* Responsive adjustment for smaller screens */
  @media (max-width: 900px) {
    .components-container {
      flex-direction: column; /* Stack columns on smaller screens */
      width: 100%; /* Full width */
    }
  
    .component-inner-container {
      flex: 1 1 100%; /* Full width for each component on smaller screens */
    }
  }
  
  /* Small screen adjustments only */
  @media (max-width: 775px) {
    /* Set the body and main containers to avoid overflow */
    body, .components-container, .status-container {
      width: 100%; /* Full width of viewport */
      max-width: 100vw; /* Prevents overflow beyond the viewport */
      overflow-x: hidden; /* Hides any horizontal overflow */
      padding: 0; /* Removes any unnecessary padding that might cause overflow */
      box-sizing: border-box; /* Ensures padding/margins are inside container bounds */
    }
  
    /* Stack items into a single column */
    .status-container {
      display: block; /* Stack items vertically */
    }
    
    /* Ensure each component takes full width */
    .component-inner-container {
      width: 100%; /* Full width of container */
      margin-bottom: 10px; /* Space between items */
      box-sizing: border-box; /* Include padding in width */
    }
  
    /* Optional: Adjust text and icon positioning for better fit */
    .component-inner-container .name {
      font-size: 0.9rem; /* Slightly smaller text */
      margin-left: 30px; /* Space for icon */
    }
    
    .component-inner-container .description {
      font-size: 0.85rem; /* Slightly smaller text */
      width: 100%; /* Full width */
      word-wrap: break-word; /* Prevents overflow */
      overflow-wrap: break-word;
    }
  
  }

  @media (max-width: 775px) { 
    .customized-footer {
      left:0 !important;
      right:0px;
	      bottom:20px !important;
      font-size: 10px !important;
      text-align:left;
   }

}


.customized-footer {
  position:absolute;
  bottom:45px;
  font-size:12px;
}
.cst-container {
 position: relative;
}