/*
Replace "x" with the number of days you want to show + 2.
For example, if you wanted to show the last 3 days of history, you would replace x with 5.
Do the replacements described above and then paste the following into your Custom CSS section.
*/

.status-day:nth-child(n+5) { display:none; }

/* -----------------------------------------------------
   Banner principale "All Systems Operational"
   ----------------------------------------------------- */
.page-status {
  color: #17191C !important;
  border: none !important;
  border-radius: 6px !important;
  text-shadow: none !important;
}
.page-status .status,
.page-status span {
  color: #17191C !important;
}

.page-status.status-none        { background-color: #97F24C !important; } /* all operational */
.page-status.status-minor       { background-color: #F4A910 !important; } /* degraded */
.page-status.status-major       { background-color: #FFAF83 !important; } /* partial outage */
.page-status.status-critical    { background-color: #FF6D66 !important; } /* major outage */
.page-status.status-maintenance { background-color: #E7DFFF !important; } /* maintenance */

/* =====================================================
   Badge componenti - base (senza bordo)
   ===================================================== */
.component-container span.component-status,
.components-section span.component-status,
span.component-status {
  display: inline-block !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  border: none !important;
  color: #17191C !important;
}

/* =====================================================
   Colori dei badge
   ===================================================== */
.component-inner-container.status-green   .component-status { background-color: #97F24C !important; }
.component-inner-container.status-yellow  .component-status { background-color: #F4A910 !important; }
.component-inner-container.status-orange  .component-status { background-color: #FFAF83 !important; }
.component-inner-container.status-red     .component-status { background-color: #FF6D66 !important; }
.component-inner-container.status-blue    .component-status { background-color: #E7DFFF !important; }

/* -----------------------------------------------------
   Logo - dimensione ridotta
   ----------------------------------------------------- */
.layout-content.status .masthead-container.basic .masthead .logo-container img,
.masthead .logo-container img,
.logo-container img {
  max-height: 50px !important;
  width: auto !important;
}