/* General Styles */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
  color: #333; /* text color */
  line-height: 1.6; 
}
h1 {
  text-align: center; /* Centers the text for h1 elements */
  color: #333; /* Text color for h1 elements */
  font-size: 28px;
  margin-top: 20px;
  margin-bottom: 20px;
}
/* Tabs Styles */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #fff;
  border-radius: 10px; /* Adds some rounded corners */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adds shadow for depth */
  margin: 20px 0; /* Adds some space around the tabs */
}
/* Adjusted tab button styles for a less bulky appearance */
.tab button.tablinks {
  display: inline-block; /* Keeps tabs in a line */
  width: 100px; /* Reduced width for a sleeker look */
  height: 80px; /* Reduced height */
  margin-right: 2px; /* Reduced spacing between tabs for a more compact look */
  vertical-align: middle; /* Ensures tabs are aligned in the middle */
  text-align: center; /* Centers the content */
  padding: 5px; /* Reduced padding */
  font-size: 12px; /* Smaller font size for text */
}
/* Adjustments for images within tab buttons for uniformity and less bulky look */
.tab button.tablinks img {
  width: 40px; /* Smaller width for images */
  height: 40px; /* Smaller height for images */
  margin-bottom: 3px; /* Reduced space between image and text */
}
/* Tab button hover and active styles */
.tab button.tablinks:hover {
  background-color: #e7e7e7;
  color: #222; /* Changes tab text color on hover */
  border-bottom: 2px solid #555; /* Adds underline effect on hover */
}
/* Tab content */
.tabcontent {
  display: flex; /* Sets a flex layout for tab content */
  padding: 20px;
  border: 1px solid #ccc;
  border-top: none;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 10px; /* Adds some rounded corners */
  margin-top: 20px; /* Adds some space above the tab content */
}

/* Vendor Flex Container */
.vendorFlexContainer {
  display: flex; /* Sets a flex layout for vendor content */
  align-items: column; /* Aligns items at the start of the container */
  flex-wrap: wrap; /* Allows content to wrap to the next line if needed */
}

/* Status Content CF */
.statusContent {
  flex: 2; /* Adjusts flex ratio for status content */
  padding: 16px 30px;
  border-right: 1px solid #ccc; /* Adds a border between status and incidents */
}
/* Incidents Container CF */
.incidentsContainer {
  flex: 1; /* Adjusts flex ratio for incidents container */
  padding: 16px;
}
/* Incidents Header CF */
.incidentsHeader, .maintainanceHeader {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc; /* bottom border for clean separation */
}

.status-message {
  padding: 10px;
  background-color: #f5f5f5;
  border: 1px solid #ccc; 
  border-radius: 5px; /* Example border radius */
  /* Add any other necessary styling for the message */
  margin-left: 10px; /* Adds a space to the left of the status message */
}
summary {
  margin-right: 10px; /* Adds a space to the right of the drop-down label */
}


.status-container {
  display: flex;
  flex-direction: column;
}

/* A line break between the Incidents and Maintenance */
.incidents {
  margin-bottom: 20px; 
}

/* Flex container to align items inline and center */
.status-header {
  display: flex;
  align-items: center; /* Vertical alignment */
}

/* Style the refresh button to fit seamlessly */
.refresh-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 5px; /* Minimal padding around the icon */
  margin-left: 10px; /* Space between the heading and button */
  display: flex; /* Center the icon vertically inside the button */
  align-items: center;
}

.refresh-button i {
  font-size: 20px; /* Adjust the icon size */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin {
  animation: spin 1s linear infinite;
}

.spin {
  animation: spin 1s linear infinite;
}

h3 a {
  color: inherit; /* Ensures the link color matches the surrounding text */
  text-decoration: none; /* Removes underline */
  transition: color 0.3s ease; /* Smooth color transition for hover effect */
}

h3 a:hover, h3 a:focus {
  color: #00aaff; /* Change to your desired hover color */
  text-decoration: underline; /* Optional: adds underline on hover for clarity */
}

.minor-service-outage {
  color: #FFA500 !important; 
}

.identified {
  color: #FFA500; /* Replace #someColor with the actual color code you want to use */
}

.degraded-performance {
  color: #FFC107; /* Text color for degraded performance */
}

.rerouted {
  color: #FFA500; /* Text color for rerouted status */
}

.minor {
  color: #FF9800; /* Text color for minor incidents */
}

.major {
  color: #F44336; /* Text color for major incidents */
}

.critical {
  color: #B71C1C; /* Text color for critical incidents */
}

.none {
  color: #4CAF50; /* Text color for no incidents */
}

.operational {
  color: #4CAF50; /* Text color for operational status */
}

.service-degradation {
  color: #FFA500; /* Text color for service degradation */
}

.maintenance {
  color: #FFC107; /* text color for maintenance status */
}

.partial-outage {
  color: #FFA500; /* text color for maintenance status */
}

.maintenance-scheduled {
  color: #ff7605; /* Yellow color for "Scheduled" status */
}

.maintenance-inprogress {
  color: #4CAF50; /* Green color for "In Progress" or "Verifying" status */
}

.maintenance-completed {
  color: #4CAF50; /* Green color for "Completed" status */
  font-weight: bold; /* BOLD */
}

.maintenance-other {
  color: #F44336; /* Red color for any other status */
}

.maintenance-active {
  color: #F44336; /* Red for Active */
}

/* Add more styles here. */