/* Dark mode + Foxy layout styles */
/* Comment out the styles below to recover the default status page styles. */

.layout-content {
  background-color: #1b262c;
}

body.status,
.color-primary,
.color-primary:hover,
.layout-content.status-index .status-day .update-title.impact-none a,
.layout-content.status-index .status-day .update-title.impact-none a:hover,
.layout-content.status-index .timeframes-container .timeframe.active,
.layout-content.status-full-history .month .incident-container .impact-none,
.layout-content.status.status-index
  .incidents-list
  .incident-title.impact-none
  a,
.incident-history .impact-none,
.layout-content.status .grouped-items-selector.inline .grouped-item.active,
.layout-content.status.status-full-history .history-nav a.current,
.layout-content.status.status-full-history .history-nav a:not(.current):hover,
div[id^="subscribe-modal"] .modal-header .close,
.grouped-item-label,
#uptime-tooltip
  .tooltip-box
  .tooltip-content
  .related-events
  .related-event
  a.related-event-link {
  color: #fff;
}

small,
.layout-content.status .table-row .date,
.color-secondary,
.layout-content.status .grouped-items-selector.inline .grouped-item,
.layout-content.status.status-full-history
  .history-footer
  .pagination
  a.disabled,
.layout-content.status.status-full-history .history-nav a,
#uptime-tooltip
  .tooltip-box
  .tooltip-content
  .related-events
  #related-event-header {
  color: #c8c8c8;
}

.layout-content.status.status-index .page-status.status-none {
  background-color: #38b25f;
  border-radius: 8px;
}

a,
a:hover,
.layout-content.status-index .page-footer span a:hover,
.layout-content.status-index
  .timeframes-container
  .timeframe:not(.active):hover,
.layout-content.status-incident .subheader a:hover {
  color: #6aa1ee;
}

.components-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.component-container {
  border: none !important;
  background-color: #121c21;
  border-radius: 8px !important;
}

.layout-content.status.status-index
  .components-section
  .components-container.one-column
  .component-container:first-child {
  border-radius: 8px !important;
}

.layout-content.status
  .shared-partial.uptime-90-days-wrapper
  .legend
  .legend-item {
  color: white;
}

.layout-content.status
  .shared-partial.uptime-90-days-wrapper
  .legend
  .legend-item.light {
  color: #becacf;
}

.layout-content.status .shared-partial.uptime-90-days-wrapper .legend .spacer {
  background: transparent;
}

body.status .layout-content.status .border-color,
hr,
.tooltip-base,
.markdown-display table,
div[id^="subscribe-modal"],
#uptime-tooltip .tooltip-box {
  border-color: #68747b;
  color: white;
}

.layout-content.status.status-index
  .components-section
  .components-uptime-link {
  margin-bottom: 8px;
}

.layout-content.status.status-index
  .components-section
  .components-container.one-column
  .component-container:last-child {
  border-radius: 8px !important;
}

.layout-content.status.status-index
  .components-section
  .components-container.one-column
  .component-container:nth-last-child(2) {
  border-radius: 8px !important;
}

.layout-content.status.status-index
  .components-section
  .components-container.one-column
  .component-container:nth-last-child(3) {
  border-radius: 8px !important;
}

body.status .layout-content.status .border-color,
hr,
.tooltip-base,
.markdown-display table,
div[id^="subscribe-modal"],
#uptime-tooltip .tooltip-box {
  border-color: #31424b;
}

small,
.layout-content.status .table-row .date,
.color-secondary,
.layout-content.status .grouped-items-selector.inline .grouped-item,
.layout-content.status.status-full-history
  .history-footer
  .pagination
  a.disabled,
.layout-content.status.status-full-history .history-nav a,
#uptime-tooltip
  .tooltip-box
  .tooltip-content
  .related-events
  #related-event-header {
  color: #becacf;
}

.layout-content.status.status-index
  .custom-metrics-container
  .metrics-container
  .metric {
  border: none;
  border-radius: 8px !important;
  background-color: #121c21;
}

.highcharts-background {
  fill: transparent;
}

body,
.layout-content.status.status-api
  .section
  .example-container
  .example-opener
  .color-secondary,
.grouped-items-selector,
.layout-content.status.status-full-history .history-nav a.current,
div[id^="subscribe-modal"] .modal-footer,
div[id^="subscribe-modal"],
div[id^="updates-dropdown"] .updates-dropdown-section,
#uptime-tooltip .tooltip-box {
  background-color: #0b1618;
  border-color: #313a3f;
  border-radius: 8px;
}

html {
  background: #1b262c;
}

.masthead {
  display: flex;
  justify-content: space-between;

  .clearfix {
    display: none;
  }
}

.layout-content.status.status-index .page-status {
  margin-bottom: 32px;
}

.layout-content.status.status-index .page-status .status {
  top: 0px;
  margin-bottom: 0;
}