/* GENERATED by `python scripts/build.py` - do not edit.
   Edit the snippets under snippets/ and rebuild. */

@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;700&display=swap');

/* === 01-page.css === */

/* Page basics: our font, and hiding the stock Statuspage blocks we replace.
 *
 * This snippet must stay first: CSS only honours `@import` before any rule,
 * and scripts/build.py relies on the numeric prefix for ordering. */

body {
  font-family: 'Mulish', arial, sans-serif;
}

/* Everything below is rebuilt by custom-header.html. `.container` is put back
 * with an inline style by custom-header.js on pages other than the home page,
 * where we only keep our top bar and let Statuspage render the rest. */
.container,
.components-section,
.incidents-list,
.scheduled-maintenances-container,
a.font-largest,
.page-status,
.subscribe-button,
.page-footer {
  display: none !important;
}

/* Status icon colours, shared by the hero and the table badges. */
.fa-check-circle {
  color: #008156;
}

.fa-exclamation-circle {
  color: #C10028;
}

.fa-wrench {
  color: #A68E17;
}

/* === 02-top-bar.css === */

/* The Criteo logo bar that replaces Statuspage's masthead.
 *
 * 90% / 850px is the width Statuspage itself uses for `.masthead-container.basic`,
 * so our content lines up with the stock pages (/uptime, /history, /incidents). */

.criteo-top-bar {
  width: 90%;
  max-width: 850px;
  margin: 32px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.criteo-top-bar .criteo-top-bar__logo {
  text-decoration: none;
}

.criteo-top-bar .criteo-top-bar__logo > img {
  height: 24px;
}

.criteo-top-bar .criteo-top-bar__logo > span {
  vertical-align: bottom;
  padding: 0 5px;
  color: #5F6670;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.2;
}

/* === 03-main-column.css === */

/* The column holding the hero, the component tables and the uptime line. */

.criteo-custom-ui {
  width: 90%;
  max-width: 850px;
  margin: 0 auto;
}

/* Big icon + headline telling you whether anything is on fire. */
.criteo-status {
  margin: 60px 0 48px;
  text-align: center;
}

.criteo-status .criteo-status__icon {
  font-size: 128px;
}

.criteo-status .criteo-status__description {
  margin: 60px 0 24px;
  font-size: 36px;
}

/* Group heading above each component table. */
.criteo-custom-ui .criteo-status-table__title {
  font-size: 16px;
  font-weight: bold;
  color: #1F252E;
}

/* "Uptime over the past 90 days" + the button through to /uptime. */
.criteo-custom-ui .criteo-status-info {
  display: flex;
  align-items: center;
}

.criteo-custom-ui .criteo-status-info .criteo-status-info__uptime {
  font-weight: bold;
}

.criteo-custom-ui .criteo-status-info .criteo-status-info__history {
  border-radius: 6px;
  padding: 13px 16px;
  background-color: #F26B4C;
  color: white;
  border: none;
  margin-left: 24px;
  text-decoration: none;
}

.criteo-custom-ui .criteo-status-info .criteo-status-info__history:hover {
  color: white;
  background-color: #f3856b;
  text-decoration: none;
}

/* === 04-component-table.css === */

/* One table per component group, built by custom-header.js.
 *
 * Every selector is anchored on `.criteo-status-table` so we never reach
 * Statuspage's own tables (incident markdown, the uptime calendar, ...). */

.criteo-status-table table {
  width: 100%;
  margin: 24px 0 48px;
  background-color: white;
  border-radius: 6px;
  border: 1px solid #BFC0C0;
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.07), 0 1px 10px 0 rgba(0, 0, 0, 0.06),
    0 2px 4px -1px rgba(0, 0, 0, 0.1);
  border-spacing: 0;
}

.criteo-status-table th {
  padding: 16px;
  color: #5F6670;
}

.criteo-status-table td {
  border-top: 1px solid #BFC0C0;
}

.criteo-status-table .criteo-table-domain {
  width: 70%;
  text-align: left;
}

.criteo-status-table .criteo-table-status {
  width: 30%;
  text-align: right;
}

@media screen and (max-width: 650px) {
  .criteo-status-table .criteo-table-domain {
    width: 60%;
  }

  .criteo-status-table .criteo-table-status {
    width: 40%;
  }
}

.criteo-status-table .criteo-table-domain__value {
  padding: 16px;
  text-align: left;
  color: #1F252E;
}

.criteo-status-table .criteo-table-domain__status {
  padding: 12px 16px;
  text-align: right;
  color: #1F252E;
}

/* The rounded status pill in the right-hand column. */
.criteo-status-table .criteo-status-badge {
  border-radius: 16px;
  padding: 4px 8px 4px 7px;
  width: max-content;
  margin-left: auto;
}

.criteo-status-table .criteo-status-badge > span {
  vertical-align: middle;
  font-size: 18px;
  margin-right: 4px;
}

.criteo-status-table .criteo-status-badge__operational {
  background-color: #DFF4ED;
}

.criteo-status-table .criteo-status-badge__degraded-performance,
.criteo-status-table .criteo-status-badge__partial-outage,
.criteo-status-table .criteo-status-badge__major-outage {
  background-color: #FFEBF0;
}

.criteo-status-table .criteo-status-badge__maintenance {
  background-color: #FFFDE6;
}

/* === 05-incidents.css === */

/* Restyling of Statuspage's own unresolved-incident block, which
 * custom-header.js moves into our column instead of re-rendering.
 *
 * `!important` throughout: Statuspage targets these with long descendant
 * selectors (`.layout-content.status.status-index .unresolved-incidents ...`)
 * that we cannot out-specify from the custom CSS field. */

.unresolved-incident {
  border: 1px solid #F7485D !important;
  border-radius: 6px !important;
  margin-bottom: 48px !important;
  padding: 24px !important;
  background-color: #FFEBF0 !important;
}

.unresolved-incident > .incident-title {
  display: flex !important;
  align-items: center;
}

/* margin-left leaves room for the warning icon custom-header.js prepends. */
.incident-title > .actual-title {
  color: #1F252E !important;
  font-size: 16px !important;
  font-weight: bold !important;
  margin-left: 16px;
}

.incident-title > .subscribe {
  color: #1F252E !important;
  font-size: 16px !important;
  text-decoration: underline !important;
  margin-left: auto !important;
}

.updates > .update {
  font-size: 14px !important;
  color: #5F6670 !important;
}

.updates > .update > * {
  font-weight: normal !important;
  color: #5F6670 !important;
}

/* === 06-loading-spinner.css === */

/* Indeterminate spinner shown while custom-header.js assembles the page.
 *
 * The container reserves a full viewport so the page does not collapse to
 * nothing while the stock markup is still hidden. Keyframe names are prefixed
 * because Statuspage defines its own `rotate`/`dash`-style animations. */

.criteo-spinner-container {
  height: 100vh;
}

.criteo-spinner {
  animation: criteo-spinner-rotate 2s linear infinite;
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
  width: 50px;
  height: 50px;
}

.criteo-spinner .path {
  stroke: #F26B4C;
  stroke-linecap: round;
  animation: criteo-spinner-dash 1.5s ease-in-out infinite;
}

@keyframes criteo-spinner-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes criteo-spinner-dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }

  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

/* === 07-footer.css === */

/* Criteo footer, pasted into Statuspage's "Custom footer HTML" field.
 * Statuspage's own `.page-footer` is hidden in 01-page.css. */

.criteo-footer {
  display: flex;
  justify-content: space-between;
  width: 90%;
  max-width: 850px;
  margin: 70px auto;
  font-size: 12px;
  color: #5f6670;
}

@media screen and (max-width: 650px) {
  .criteo-footer {
    flex-direction: column;
  }
}

.criteo-footer .criteo-list-inline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.criteo-footer .criteo-list-inline > li {
  display: inline-block;
  margin: 0 4px;
}

/* Pipe separator between links, except after the last one. */
.criteo-footer .criteo-list-inline > li:after {
  content: "|";
  margin-left: 8px;
}

.criteo-footer .criteo-list-inline > li:last-child:after {
  content: none;
}

.criteo-footer .criteo-list-inline > li > a {
  color: #5f6670;
  text-decoration: none;
}

/* === 08-statuspage-tweaks.css === */

/* Small corrections to stock Statuspage widgets we keep as-is on the
 * secondary pages (/uptime, /history, /incidents/...). */

.uptime-calendar .select-input__control {
  margin-top: -11px;
  border: 1px solid #E0E0E0;
  border-radius: 4px;
}

/* Not currently applied on status.criteo.com: these rules existed in the old
 * SCSS sources but were not wrapped in `:global()`, so the Svelte compiler
 * scoped them to a component, found no match, and silently dropped them from
 * the deployed bundle. Kept here, commented out, so the intent is not lost -
 * uncomment to give the "Subscribe to updates" button the Criteo orange.
 *
 * .updates-dropdown-container {
 *   padding: 13px 16px;
 * }
 *
 * #show-updates-dropdown {
 *   padding: 13px 16px;
 *   border-radius: 6px;
 *   background-color: #F26B4C;
 *   border: none;
 *   color: white;
 * }
 *
 * #show-updates-dropdown:hover {
 *   background-color: #f3856b;
 * }
 */