@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap');

:root {
  --10u: 40px;
  --9u: 36px;
  --8u: 32px;
  --7u: 28px;
  --6u: 24px;
  --5u: 20px;
  --4u: 16px;
  --3u: 12px;
  --2u: 8px;
  --1u: 4px;
  --rounding-s: 4px;
  --rounding-m: 12px;
  --rounding-l: 16px;
  --stroke-primary: 1px solid #26364D;
  --color-transparent: transparent;
  --color-primary-1: #2DD4BF;
  --color-primary-2: #14B8A6;
  --color-primary-3: #0F766E;
  --color-secondary-1: #818CF8;
  --color-black-1: #050B14;
  --color-black-2: #08111F;
  --color-black-3: #111C2E;
  --color-black-4: #17253A;
  --color-black-5: #26364D;
  --color-black-6: #52647D;
  --color-black-7: #8CA0BA;
  --color-black-8: #AAB9CC;
  --color-black-9: #D3DEEC;
  --color-black-10: #F3F7FC;
  --color-green-1: #34D399;
  --color-green-2: #12392F;
  --color-red-1: #FB7185;
  --color-red-2: #BE3E5A;
  --color-red-3: #442331;
  --color-red-4: #351D29;
  --color-yellow-1: #FBBF24;
  --color-yellow-2: #B7791F;
  --color-yellow-3: #40331D;
  --color-yellow-4: #332A1B;
  --color-dirty-yellow: #D4A017;
  --color-blue-1: #60A5FA;
  --color-orange-1: #FB923C;
  --color-button-text: #F8FAFC;
  --shadow-1: 0 18px 50px rgba(1, 7, 16, 0.28);
  --shadow-2: 0 8px 24px rgba(1, 7, 16, 0.24);
  --font-family: "Onest", sans-serif;
  --font-logo: 500 20px/32px var(--font-family);
  --font-h1: 700 36px/normal var(--font-family);
  --font-h2: 500 24px/34px var(--font-family);
  --font-h3: 500 20px/normal var(--font-family);
  --font-primary: 400 16px/normal var(--font-family);
  --font-description: 400 16px/normal var(--font-family);
  --font-button-l: 500 24px/normal var(--font-family);
  --font-button-m: 500 16px/normal var(--font-family);
  --font-button-s: 500 13px/normal var(--font-family);
}

.font-sans-light {
  font-family: 96px/112px "Onest", sans-serif;
  font-weight: 200;
}

.font-sans-regular {
  font-family: 96px/112px "Onest", sans-serif;
  font-weight: 400;
}

.font-sans-semibold {
  font-family: 96px/112px "Onest", sans-serif;
  font-weight: 700;
}

.font-sans-bold {
  font-family: 96px/112px "Onest", sans-serif;
  font-weight: bold;
}

body {
  font-family: "Onest", sans-serif;
  font-size: 14px;
  min-height: 100vh;
  background: var(--color-black-2);
  color: var(--color-black-10);
  -webkit-font-smoothing: antialiased;
}

* {
  font-weight: normal;
  margin: 0;
  padding: 0;
}

a,
button {
  outline: 0 none;
}

a {
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  cursor: pointer;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-primary-1);
  outline-offset: 3px;
}

.clear {
  display: block !important;
  clear: both !important;
}

.wrapper {
  width: min(1040px, calc(100% - 48px));
  max-width: 1040px;
  margin: 0 auto;
  display: block;
}

.badge {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}

.badge.badge-default {
  width: 20px;
  height: 20px;
}

.badge.badge-large {
  width: 42px;
  height: 42px;
}

.has-tooltip {
  cursor: crosshair;
  position: relative;
}

.has-tooltip .tooltip {
  line-height: 19px;
  text-align: center;
  cursor: default;
  pointer-events: none;
  width: 500px;
  margin-left: -250px;
  margin-top: 6px;
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 100;
}

.has-tooltip .tooltip:after {
  content: "";
  border-bottom: 4px solid #020617;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  height: 0;
  width: 0;
  margin-left: -4px;
  position: absolute;
  left: 50%;
  top: -4px;
}

.has-tooltip .tooltip .tooltip-value {
  background-color: #020617;
  border: 1px solid var(--color-black-5);
  box-shadow: var(--shadow-2);
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  text-shadow: none;
  text-transform: initial;
  display: inline-block;
  left: 50%;
  border-radius: var(--rounding-s);
}

.has-tooltip .tooltip .tooltip-value .tooltip-value-text {
  padding: 6px 20px 7px;
  display: block;
}

.has-tooltip .tooltip .tooltip-value .tooltip-value-text .tooltip-main,
.has-tooltip .tooltip .tooltip-value .tooltip-value-text .tooltip-label {
  display: block;
}

.has-tooltip .tooltip .tooltip-value .tooltip-value-text .tooltip-main {
  color: var(--color-black-10);
}

.has-tooltip .tooltip .tooltip-value .tooltip-value-text .tooltip-label {
  color: rgba(255, 255, 255, 0.75);
  margin-top: 1px;
}

.has-tooltip .tooltip .tooltip-value .tooltip-value-details {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: 7px 20px 9px;
  display: block;
}

.has-tooltip .tooltip .tooltip-value .tooltip-value-details .tooltip-detail:after {
  content: "";
  background-color: rgba(255, 255, 255, 0.4);
  vertical-align: sub;
  width: 1px;
  height: 13px;
  margin: 0 8px;
  display: inline-block;
}

.has-tooltip .tooltip .tooltip-value .tooltip-value-details .tooltip-detail:last-child:after {
  display: none;
}

.has-tooltip .tooltip .tooltip-value .tooltip-value-details .tooltip-detail-label {
  text-decoration: underline;
}

.has-tooltip:hover .tooltip {
  color: var(--color-black-10);
  display: block;
  pointer-events: auto;
}

.badge.badge-status-healthy.badge-default {
  background-image: url("/assets/images/badges/icon-healthy-default.svg");
}

.badge.badge-status-healthy.badge-large {
  background-image: url("/assets/images/badges/icon-healthy-large.svg");
}

.status-healthy-background,
.status-healthy-background-before:before {
  background-color: var(--color-green-1);
}

.status-healthy-color {
  color: var(--color-green-1);
}

.status-healthy-background-subtle {
  background-color: rgba(52, 211, 153, 0.11);
}

.status-healthy-border-subtle {
  border-color: rgba(52, 211, 153, 0.24);
}

.badge-status-sick.badge-default {
  background-image: url("/assets/images/badges/icon-sick-default.svg");
}

.badge-status-sick.badge-large {
  background-image: url("/assets/images/badges/icon-sick-large.svg");
}

.status-sick-background,
.status-sick-background-before:before {
  background-color: var(--color-yellow-1);
}

.status-sick-color {
  color: var(--color-yellow-1);
}

.status-sick-background-subtle {
  background-color: rgba(251, 191, 36, 0.11);
}

.status-sick-border-subtle {
  border-color: rgba(251, 191, 36, 0.24);
}

.badge-status-dead.badge-default {
  background-image: url("/assets/images/badges/icon-dead-default.svg");
}

.badge-status-dead.badge-large {
  background-image: url("/assets/images/badges/icon-dead-large.svg");
}

.status-dead-background,
.status-dead-background-before:before {
  background-color: var(--color-red-1);
}

.status-dead-color {
  color: var(--color-red-1);
}

.status-dead-background-subtle {
  background-color: rgba(251, 113, 133, 0.11);
}

.status-dead-border-subtle {
  border-color: rgba(251, 113, 133, 0.24);
}

.alert-announce-background,
.alert-announce-background-before:before {
  background-color: var(--color-blue-1);
}

@media screen and (max-width: 1020px) {
  .wrapper {
    width: calc(100% - 40px);
  }
}

@media screen and (max-width: 480px) {
  .wrapper {
    width: calc(100% - 24px);
  }
}