:root{
  --dmps-blue:#003B71;   /* PMS 541 */
  --dmps-gold:#F5A800;   /* PMS 130 */
  --dmps-white:#FFFFFF;
  --font-sans:"Lato", trebuchet, Arial, sans-serif;
  --container:1100px;
			  --text-shadow: none;
}
  
.layout-content.status.status-index .unresolved-incidents .unresolved-incident .incident-title {
    text-shadow: none;
  }
.unresolved-incident.impact-minor {
  color: black !important;
}

.unresolved-incident.impact-minor a {
  color: black !important;
}
.component-status{
color: black !important;
  }


.unresolved-incident.impact-major {
  color: black !important;
  text-decoration: none;
}

.unresolved-incident.impact-major a {
  color: black !important;
}
.component-status{
color: black !important;
  }

/* ============== HERO (Blue | Gold split) ============== */
.dmps-hero{
  font-family:var(--font-sans);
  color:var(--dmps-white);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.dmps-hero-inner{
  display:flex;
  width:100%;
  min-height:132px;
  flex-wrap: wrap;            
}
.dmps-color-block{
  flex:1 1 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 16px;
  flex-wrap: wrap;
}
.blue-block{background:var(--dmps-blue);color:var(--dmps-white);}
.gold-block{background:var(--dmps-blue);color:var(--dmps-blue);}
.dmps-hero-title{
  margin:0;
  font-weight:800;

 
  font-size:3rem;
}
                      
#Layer_2{
max-width: 200px;
margin-right: 20px;
Margin-bottom: 10px;                         
}                        
                          
                          
/* ============== STATUS STRIP ============== */
.dmps-status-strip{
  font-family:var(--font-sans);
  background:var(--dmps-white);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.dmps-status-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:16px 20px;
  display:flex;
  align-items:center;
  gap:20px;
}
.dmps-status-col{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Centered STATUS PAGE column */
.dmps-status-col.centered{
  align-items:center;
  text-align:center;
}

/* Right column (text + buttons) */
.dmps-status-col.right{
  align-items:center;
  text-align:center;
}
.status-text{
  text-align:center;
  width:100%;
  max-width:440px;
}

/* Divider line */
.dmps-status-divider{
  width:1px;
  align-self:stretch;
  background:linear-gradient(to bottom,rgba(0,0,0,.12),rgba(0,0,0,.06) 50%,rgba(0,0,0,.12));
  border-radius:1px;
}

/* STATUS PAGE heading */
.status-heading{
  margin:0;
  color:var(--dmps-blue);
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1;
  font-size:clamp(1.3rem,2.5vw,1.8rem);
  position:relative;
  padding-bottom:6px;
  display:inline-block;
}
.status-heading::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:3px;
  background:var(--dmps-gold);
  border-radius:2px;
}

/* Right column text */
.status-lede{
  margin:.1rem 0 .35rem 0;
  color:#1b2b3a;
  font-size:clamp(1rem,1.6vw,1.15rem);
  line-height:1.6;
  font-weight:600;
}
.status-contact{
  margin:0 0 .6rem 0;
  color:#1b2b3a;
  font-size:1rem;
}
.status-contact a{
  color:var(--dmps-blue);
  text-decoration:none;
  font-weight:700;
  border-bottom:2px solid transparent;
  transition:border-color .18s ease;
}
.status-contact a:hover{border-color:var(--dmps-blue);}

/* Buttons (Subscribe + Ticket) */
.subscribe-and-ticket{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  width:100%;
  margin-top:.6rem;
}

/* Style the injected Statuspage subscribe control */
.updates-dropdown-container{display:inline-flex !important;}
#show-updates-dropdown{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.65rem 1.2rem;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
  font-size:.95rem;
  color:var(--dmps-white) !important;
  background:var(--dmps-blue) !important;
  border:2px solid var(--dmps-blue) !important;
  box-shadow:0 2px 8px rgba(0,0,0,.10);
  text-decoration:none !important;
  transition:all .15s ease;
}
#show-updates-dropdown:hover{
  background:var(--dmps-gold) !important;
  color:var(--dmps-blue) !important;
  border-color:var(--dmps-gold) !important;
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(0,0,0,.16);
}
#show-updates-dropdown::before{
  content:"🔔";
  font-size:1.1rem;
  line-height:1;
  display:flex;
  align-items:center;
}

/* Submit a Ticket — visually matches subscribe */
.btn-ticket{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.65rem 1.2rem;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
  font-size:.95rem;
  color:var(--dmps-white);
  background:var(--dmps-blue);
  border:2px solid var(--dmps-blue);
  box-shadow:0 2px 8px rgba(0,0,0,.10);
  text-decoration:none;
  transition:all .15s ease;
}
.btn-ticket:hover{
  background:var(--dmps-gold);
  color:var(--dmps-blue);
  border-color:var(--dmps-gold);
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(0,0,0,.16);
}

/* ============== LEGEND HELPER (optional) ============== */
.legend li, .status-legend li{
  display:inline-flex;
  align-items:center;
  margin-right:18px;
}
.dmps-status-icon{ flex:0 0 auto; }

/* Responsive behavior */
@media (max-width:840px){
  .dmps-hero-inner{flex-direction:column;}
  .dmps-color-block{padding:22px 14px;}
  .dmps-status-inner{flex-direction:column;gap:10px;padding:14px 16px;}
  .dmps-status-divider{display:none;}
  .dmps-status-col.centered,
  .dmps-status-col.right{align-items:center;text-align:center;}
  .status-text{text-align:center;max-width:none;}
  .status-heading::after{left:50%;transform:translateX(-50%);}
}
/* === Two-column component grid (desktop) ===
   Keeps child/expanded lists single-column inside a card. */
@media (min-width: 1024px){

  /* Top-level components container → grid with 2 columns */
  .components-container:not(.child-components-container){
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;   /* space between columns */
    row-gap: 22px;      /* space between rows */
  }

  /* Make each card behave nicely inside the grid */
  .components-container:not(.child-components-container)
    .component-container,
  .components-container:not(.child-components-container)
    .component-group {
    width: 100% !important;
    margin: 0 !important;      /* rely on grid gap for spacing */
  }

  /* Ensure the inner box spans full card width */
  .component-inner-container {
    width: 100%;
    box-sizing: border-box;
  }
}

/* Optional: go back to single column on tablets */
@media (max-width: 1023px){
  .components-container:not(.child-components-container){
    display: block !important;
  }
}