<style>
/* 1. IMMEDIATE HIDE GUARD: Prevents the "Vertical Bars" from ever appearing */
svg.availability-time-line-graphic,
svg[id^="uptime-component"] {
    opacity: 0 !important;
    visibility: hidden !important;
    height: 34px !important;
    transition: opacity 0.2s ease-in-out;
}

/* 2. REVEAL ONLY AFTER CUSTOMIZATION: Triggered by JS adding the .customized class */
svg.availability-time-line-graphic.customized,
svg[id^="uptime-component"].customized {
    opacity: 1 !important;
    visibility: visible !important;
    width: 100% !important;
    display: block !important;
}

/* 3. SQUARE BAR STYLING & COLORS */
svg.availability-time-line-graphic rect,
svg[id^="uptime-component"] rect {
    pointer-events: all !important;
    fill: #1e8542 !important; /* Force Green */
}

/* 4. HIDE DEFAULT ELEMENTS IMMEDIATELY */
.page-component-uptime-header,
.component-uptime-header,
.uptime-header,
.uptime-percent,
.component-uptime-text,
.legend,
.shared-partial-uptime-legend,
.availability-time-line-legend,
.historical-uptime-link,
a[href*="uptime"] {
    display: none !important;
}

/* 5. HEADER TEXT CUSTOMIZATION */
.components-uptime-link::before,
.component-uptime-header::before {
    content: "Uptime over the past 14 days" !important;
    font-size: 11px !important;
    color: #999 !important;
}

/* 6. LOGO & BANNER STYLING */
#hid-logo-banner {
  max-width: 1080px;
  margin: 22px auto 10px;
  padding: 0 24px;
}
#hid-logo-banner img {
  width: 260px;
  transform: translateX(90px) !important;
}
.hid-page-title {
  margin: 34px 0 0;
  color: #333;
  font-size: 36px !important;
  transform: translateX(90px);
}
</style>