/* Hover effect for the "Subscribe to Updates" button */
/* Change the text color of the group names */
.component-group-name {
    color: #002854 !important; /* Replace with your desired color */
}

/* Change the text color of the component names */
.component-inner-container .name {
    color: #002854 !important; /* Replace with your desired color */
    font-weight: normal; /* You can adjust this to bold if desired */
}

/* Targeting the "View Historical Uptime" link */
a[href*="uptime"] {
    color: #002854 !important; /* Change the text color */
    text-decoration: none !important; /* Remove underline */
}

/* Optional: Change the color on hover */
a[href*="uptime"]:hover {
    font-weight: bold; /* Optional: Make the text bold */
    text-decoration: underline !important; /* Add underline on hover */
}


/***********************************************/



/* Style for the masthead container */
.dev.masthead-container.basic {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Center items vertically */
    justify-content: space-between; /* Space out elements evenly */
    padding: 10px 20px; /* Padding around the container */
}

/* Style for the logo */
.logo img {
    max-height: 80px; /* Ensure the logo is not too tall */
    height: auto; /* Maintain aspect ratio */
    width: auto; /* Maintain aspect ratio */
    display: block; /* Ensures the image is treated as a block element */
}

/* Style for the button container */
.masthead-buttons {
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack buttons vertically */
    align-items: flex-end; /* Align buttons to the end */
}

/* Style for the existing subscribe button */
#show-updates-dropdown {
    background-color: white; /* Default color for the subscribe button */
    color: white; /* Text color */
}

.region-btn {
    background-color: #28a745; /* Button background color (green) */
    color: white; /* Button text color */
    margin-top: 5px;
    padding: 10px 15px; /* Padding inside the button */
    border-radius: 5px; /* Rounded corners */
    text-decoration: none; /* Remove underline */
    font-size: 13px;
    font-weight: bold; /* Bold text */
    cursor: pointer; /* Pointer on hover */
    border: none; /* Remove button border */
}

/* Dropdown content (hidden by default) */
.region-content {
    display: none; /* Hidden by default */
    position: absolute;
    background-color: #f9f9f9; /* Light background for dropdown items */
    min-width: 160px; /* Minimum width for the dropdown */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Add shadow to the dropdown */
    z-index: 1; /* Ensure the dropdown appears on top */
}

/* Dropdown links */
.region-content a {
    color: black; /* Link text color */
    padding: 12px 16px; /* Padding inside the dropdown items */
    text-decoration: none; /* Remove underline */
    display: block; /* Block-level links for full width */
}

/* Change color on hover */
.region-content a:hover {
    background-color: #f1f1f1; /* Light gray hover effect */
}

/* Show the dropdown when hovering over the button */
.region:hover .region-content {
    display: block; /* Show the dropdown on hover */
}

.region-btn:hover {
    background-color: #218838; /* Darker green on hover */
}


/* Adjust the margin below the .page-status indicator */
.page-status {
  margin-top: 0 !important; /* Reduce this value to decrease the space */
  margin-bottom: 0 !important; /* Reduce this value to decrease the space */
  padding-bottom: 0 !important; /* Optional: remove bottom padding from .page-status */
  padding-top: 0 !important;    /* Optional: remove top padding from .custom-below-status */
}

/* Adjust the margin at the top of the custom content */
.custom-footer-content {
    margin-top: 10 !important; /* Reduce this value to bring it closer to .page-status */
  padding-bottom: 0 !important; /* Optional: remove bottom padding from .page-status */
    padding-top: 0 !important;    /* Optional: remove top padding from .custom-below-status */
}