@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: var(--1u);
  --rounding-m: var(--3u);
  --rounding-l: var(--4u);
  --stroke-primary: 1px solid #3F4249;
  --color-transparent: transparent;
  --color-primary-1: #4289E9;
  --color-primary-2: #0761DC;
  --color-primary-3: #0951B3;
  --color-secondary-1: #B949E2;
  --color-black-1: #212429;
  --color-black-2: #23262B;
  --color-black-3: #2B2E35;
  --color-black-4: #2A3440;
  --color-black-5: #3F4249;
  --color-black-6: #51535F;
  --color-black-7: #7E8392;
  --color-black-8: #8F95A7;
  --color-black-9: #A9AFC2;
  --color-black-10: #FDFBF9;
  --color-green-1: #42E977;
  --color-green-2: #2A382F;
  --color-red-1: #FB6E6E;
  --color-red-2: #A74646;
  --color-red-3: #3D2E2E;
  --color-red-4: #372A2A;
  --color-yellow-1: #FCCB6E;
  --color-yellow-2: #A98749;
  --color-yellow-3: #322D24;
  --color-yellow-4: #2D2922;
  --color-dirty-yellow: #AFAF01;
  --color-blue-1: #6E9BFB;
  --color-orange-1: #DF5D22;
  --color-button-text: #FCFCFC;
  --shadow-1: 0px 1px 23.3px 0px #1C1F23;
  --shadow-2: 0px 4px 20.8px 0px #202328;
  --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: "Onest", sans-serif;
  font-weight: 200;
}

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

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

.font-sans-bold {
  font-family: "Onest", sans-serif;
  font-weight: bold;
}

body {
  font-family: "Onest", sans-serif;
  font-size: 14px;
  background: var(--color-black-2);
  color: rgba(0, 0, 0, 0.95);
}

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

a,
button {
  outline: 0 none !important;
}

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

a:hover {
  cursor: pointer;
}

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

.wrapper {
  width: 980px;
  max-width: 980px;
  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 rgba(0, 0, 0, 0.94);
  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: rgba(0, 0, 0, 0.94);
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  text-shadow: none;
  text-transform: initial;
  display: inline-block;
  left: 50%;
  border-radius: 1px;
}

.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: #FFFFFF;
}

.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 {
  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: #4289E9;
}

.status-healthy-color {
  color: #4289E9;
}

.status-healthy-background-subtle {
  background-color: #4289E947;
}

.status-healthy-border-subtle {
  border-color: #4289E94E;
}

.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: #FCCB6E;
}

.status-sick-color {
  color: #FCCB6E;
}

.status-sick-background-subtle {
  background-color: #FCCB6E47;
}

.status-sick-border-subtle {
  border-color: #FCCB6E4E;
}

.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: #FB6E6E;
}

.status-dead-color {
  color: #FB6E6E;
}

.status-dead-background-subtle {
  background-color: #FB6E6E47;
}

.status-dead-border-subtle {
  border-color: #FB6E6E4E;
}

.alert-announce-background,
.alert-announce-background-before:before {
  background-color: #1972F5;
}

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

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