:root {
  --textColor: #212529;
  --light: #f8f9fa;
  --white-50: #fafafa;
  --blue: #007bff;
  --hover-blue: #1caaff;
  --medium-blue: #C3E1FF;
  --white: #fff;
  --light-blue: #E5F2FF;
  --dark-blue: #205493;
  --very-dark-blue: #083568;
  --very-light-blue: #f4f8fc;
  --midBlue: #7dbcff;
  --beige: #F7F3F3;
  --background: #f2f7fc;
  --black: #202020;
  --darkblack: #202020;
  --highlight: #afd2f5;
  --lightBorder: #e5e5e5;
  --table-border: #e5e5e5;
  --lighter-border: #e0e0e0;
  --border-color: #dee2e6;
  --secondaryBackground: #ccc;
  --connector-gray: #c4c4c4;
  --gray-background: #f8f8f8;
  --gray: #777777;
  --dropdown-gray: #d8d8d8;
  --dark-gray: #6c757d;
  --light-gray: #f0f0f0;
  --red: #b82b2b;
  --orange: #d77806;
  --green: #1eb942;
  --bright-red: #F25959;
  --red2: #e23939;
  --new-red: #F84821;
  --radius: 6px;
  --big-radius: 12px;
  --learn-box-shadow: rgba(169, 194, 219, 0.12);
  --aws: #EC6A10;
  --aws-color: #fff;
  --gcp: #1A73E8;
  --gcp-color: #fff;
  --healthchecks: #0c6131;
  --healthchecks-color: #fff;
  --apex-ping: #202020;
  --apex-ping-color: #fff;
  --uptime-robot: #4CA74C;
  --uptime-robot-color: #fff;
  --pingdom: #fff000;
  --pingdom-color: #181818;
  --sentry: #31293b;
  --sentry-color: #ffffff;
  --twilio: #f22f46;
  --twilio-color: #ffffff;
  --azure: #2665D0;
  --azure-color: #ffffff;
  --honeybadger: #EC6322;
  --honeybadger-color: #ffffff;
  --sematext: #1074BF;
  --sematext-color: #ffffff;
  --travisci: #F3EEAE;
  --travisci-color: #202020;
  --rollbar: #0F4C91;
  --rollbar-color: #ffffff;
  --needle: #D2D6FC;
  --needle-color: #5666EF;
  --webhook: #E8F1FF;
  --webhook-color: #0777FE;
  --heroku: #400099;
  --heroku-color: #ffffff;
  --datadog: #9E7CC1;
  --datadog-color: #ffffff;
  --cronitor: #5AB8D5;
  --cronitor-color: #202020;
  --bugsnag: #031347;
  --bugsnag-color: #ffffff;
  --prometheus: #E6572C;
  --prometheus-color: #ffffff;
  --grafana: #E86D21;
  --grafana-color: #ffffff;
  --influxdata: #ffffff;
  --influxdata-color: #202020;
  --instana: #5BB1AE;
  --instana-color: #202020;
  --zapier: #FF4A00;
  --zapier-color: #ffffff;
  --zapier-alert: #FFC4AC;
  --librato: #377DA5;
  --librato-color: #ffffff;
  --newrelic: #4B959C;
  --newrelic-color: #ffffff;
  --appsignal: #21375A;
  --appsignal-color: #ffffff;
  --checkly: #45C8F1;
  --checkly-color: #ffffff;
  --site24x7: #7EB035;
  --site24x7-color: #313131;
  --stackify: #9CD378;
  --stackify-color: #202020;
  --scout-apm: #F05929;
  --scout-apm-color: #ffffff;
  --ohdear: #e32929;
  --ohdear-color: #ffffff;
  --email: #E8F1FF;
  --email-color: #0777FE;
  --nixstats: #5ABFEF;
  --nixstats-color: #ffffff;
  --serverdensity: #202020;
  --serverdensity-color: #ffffff;
  --raygun: #202020;
  --raygun-color: #ffffff;
  --lightstep: #559948;
  --lightstep-color: #ffffff;
  --runscope: #1B70E0;
  --runscope-color: #ffffff;
  --honeycomb: #f4b827;
  --honeycomb-color: #202020;
  --graylog: #C84B2C;
  --graylog-color: #ffffff;
  --checkmk: #77D589;
  --checkmk-color: #202020;
  --hyperping: #3757FF;
  --hyperping-color: #FFFFFF;
  --epsagon: #A5BCFF;
  --epsagon-color: #515050;
  --uptime: #4E73FE;
  --uptime-color: #202020;
  --splunk: #61A024;
  --splunk-color: #202020;
  --sumologic: #001A9A;
  --sumologic-color: #FFFFFF;
  --thousandeyes: #FB7C32;
  --thousandeyes-color: #202020;
  --loggly: #F99D1C;
  --loggly-color: #202020;
  --elastic: #02B9AD;
  --elastic-color: #202020;
  --appoptics: #F1981B;
  --appoptics-color: #000000;
  --nodeping: #F76300;
  --nodeping-color: #000000;
  --scaylr: #54767F;
  --scaylr-color: #ffffff;
  --moogsoft: #FA385D;
  --moogsoft-color: #000000;
  --appdynamics: #18212A;
  --appdynamics-color: #ffffff;
  --dynatrace: #B4DC00;
  --dynatrace-color: #000000;
  --copperegg: #D5805B;
  --copperegg-color: #000000;
  --coralogix: #69D9AE;
  --coralogix-color: #000000;
  --errorception: #F30F04;
  --errorception-color: #000000;
  --elastalert: #000000;
  --elastalert-color: #ffffff;
  --logdna: #D54158;
  --logdna-color: #000000;
  --zebrium: #007CF7;
  --zebrium-color: #000000;
  --uptimekuma: #cccccc;
  --uptimekuma-color: #000000;
  --uptimekuma: #d23730;
  --uptimekuma-color: #ffffff;
  --operational: #5ABB74;
  --degraded-performance: #FBBC05;
  --partial-outage: #EC8100;
  --critical-outage: #EA4335;
  --planned-maintenance: #093990;
  --green-light: #EAF6F2;
  --beige-light: #FAF5F0;
  --red-pastel: #F7F3F3;
  --green-pastel: #F3F7F6;
  --purple-pastel: #F6F3F7;
  --yellow-pastel: #F7F7F3;
  --blue-pastel: #F3F4F7;
}

@media (prefers-color-scheme: dark) {
  body.system {
    --blue: #3395FF;
    --background: red;
    --white: #242729;
    --black: rgba(255, 255, 255, 0.9);
    --black-no-opacity: rgba(255, 255, 255);
    --beige: #373C3F;
    --textColor: #fff;
    --light: #2D3134;
    --gray: #A7A9B0;
    --light-gray: #474C50;
    --gray-background: #373C3F;
    --highlight: --black-no-opacity;
    --lighter-border: #535353;
    --lightBorder: #363A3E;
    --table-border: #4B4C4F;
    --light-blue: #474C50;
    --dropdown-gray: #45494B;
    --connector-gray: #474C50;
    --very-light-blue: #363A3E;
    --border-color: #535353;
    --learn-box-shadow: rgb(87 88 89 / 12%);
    --fc-neutral-bg-color: var(--dropdown-gray);
    --fc-border-color: var(--border-color);
    --fc-list-event-hover-bg-color: var(--dropdown-gray);
  }
}

.dark {
  --blue: #3395FF;
  --background: #202020;
  --white: #242729;
  --black: rgba(255, 255, 255, 0.9);
  --black-no-opacity: rgba(255, 255, 255);
  --beige: #373C3F;
  --red-pastel: #373C3F;
  --green-pastel: #373C3F;
  --purple-pastel: #373C3F;
  --yellow-pastel: #373C3F;
  --blue-pastel: #373C3F;
  --green-light: #EAF6F2;
  --textColor: #fff;
  --light: #2D3134;
  --gray: #A7A9B0;
  --light-gray: #474C50;
  --gray-background: #373C3F;
  --highlight: --black-no-opacity;
  --lighter-border: #535353;
  --lightBorder: #363A3E;
  --table-border: #4B4C4F;
  --light-blue: #474C50;
  --dropdown-gray: #45494B;
  --connector-gray: #474C50;
  --very-light-blue: #363A3E;
  --border-color: #535353;
  --learn-box-shadow: rgb(87 88 89 / 12%);
  --fc-neutral-bg-color: var(--dropdown-gray);
  --fc-border-color: var(--border-color);
  --fc-list-event-hover-bg-color: var(--dropdown-gray);
}

.dropdown-menu {
  padding: 0.3rem;
  border: 1px solid var(--table-border);
  border-radius: 8px;
  background: var(--white);
  margin-top: 0.6rem;
  box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.2);
}
.dropdown-menu:before {
  content: "";
  position: absolute;
  top: -10px;
  right: 20px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid var(--table-border);
}
.dropdown-menu:after {
  content: "";
  position: absolute;
  top: -9px;
  right: 21px;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 9px solid var(--white);
}

.dropdown-toggle::after {
  border: solid;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 2px;
  margin-left: 5px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.dropdown-item {
  padding: 0.3rem 1rem;
  border-radius: 6px;
}

.dropdown-divider {
  border-top: 1px solid var(--dropdown-gray);
}

.btn-outline-secondary {
  color: var(--black);
}
.btn-outline-secondary:hover, .btn-outline-secondary:active {
  color: #fff !important;
}

.card {
  background-color: var(--white);
  border: 1px solid var(--border-color);
}

.table .table {
  background: var(--white);
}

hr {
  border-color: var(--table-border);
}

a {
  color: var(--blue);
}

a:hover {
  color: var(--blue);
}

a.hover-blue:hover {
  color: var(--blue);
}
a.hover-blue:hover svg {
  fill: var(--blue) !important;
}

.btn-outline-primary:hover svg {
  fill: #fff !important;
}

.badge {
  font-weight: 500;
}

.custom-control-label::before {
  background: var(--gray);
}

.custom-control-input:disabled ~ .custom-control-label::before {
  background-color: var(--connector-gray);
}

.custom-switch .custom-control-label::after {
  background-color: var(--white);
}

.green.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--uptime-robot);
  border: none;
}

.green.custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: #96cf96;
  border: none;
}

.dropdown-menu {
  border: 1px solid var(--table-border);
}

.dropdown-item:focus, .dropdown-item:hover {
  background: var(--light-gray);
  color: var(--black);
}

.navbar-light .navbar-text a {
  color: var(--black);
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
  color: var(--gray);
}

.breadcrumb {
  background-color: var(--light);
}

.breadcrumb-item.active {
  color: var(--black);
}

.remove-caret.dropdown-toggle::after {
  display: none;
}

.border-bottom {
  border-bottom: 1px solid var(--border-color) !important;
}

.well {
  background-color: var(--white);
  border: 1px solid var(--border-color);
}

.text-muted {
  color: var(--gray) !important;
}

.modal-content {
  background: var(--white);
}

.twitter-typeahead {
  display: block !important;
}

.tt-menu {
  display: none !important;
}

.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {
  border-bottom-color: #083568;
}

.bs-tooltip-top .arrow::before, .bs-tooltip-top .arrow::before {
  border-bottom-color: #083568;
}

.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {
  border-bottom-color: #083568;
}

.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before {
  border-bottom-color: #083568;
}

.tooltip-inner {
  background-color: #083568;
}

.tooltip {
  font-family: inherit !important;
}

.tooltip.show {
  opacity: 1 !important;
}

.alert-success {
  border: 0;
  border-radius: 2px;
  border-left: 6px solid #1eb942;
  background-color: #EAF4ED;
}

.alert-danger {
  border: 0;
  border-radius: 2px;
  border-left: 6px solid #E02525;
  background-color: #FAEFEF;
}

.alert-info {
  border: 0;
  border-radius: 2px;
  border-left: 6px solid #46a9bc;
  background-color: #E0F5F9;
}

.alert-warning {
  border: 0;
  border-radius: 2px;
  border-left: 6px solid #e9ca67;
  background-color: #F5EED7;
}

.small-alert-danger {
  padding: 0.5rem;
  color: #E02525;
  background-color: #FAEFEF;
  width: intrinsic;
  width: -moz-max-content;
  width: -webkit-max-content;
}

.form-control::placeholder {
  color: #bdbdbd;
  opacity: 1;
}

.form-control:-ms-input-placeholder {
  color: #bdbdbd;
}

.form-control::-ms-input-placeholder {
  color: #bdbdbd;
}

.select2-dropdown {
  background: var(--white);
  color: var(--black);
  border: 1px solid var(--border-color);
}

.select2-container--default .select2-selection--multiple {
  background: var(--white);
  color: var(--black);
  border: 1px solid var(--border-color);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--light-blue);
  color: var(--blue);
  border: 0;
}

.select2-container--default .select2-selection--single {
  border: 1px solid var(--border-color);
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background: var(--gray);
  color: #fff;
}

.select2-container--default .select2-search--inline .select2-search__field {
  color: var(--black);
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border: solid var(--border-color) 1px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 35px;
  color: var(--black);
}

.select2-container .select2-selection--single {
  height: 38px;
  background: var(--white);
  color: var(--black);
}

.fc .fc-daygrid-day.fc-day-today {
  background-color: var(--travisci) !important;
}

.fc .fc-scroller-liquid {
  background: var(--white);
}

.intl-tel-input .country-list {
  background: var(--white);
  border: 1px solid var(--border-color);
}

.intl-tel-input .country-list .divider {
  border-bottom: 1px solid var(--border-color);
}

.intl-tel-input .country-list .country.highlight {
  background: var(--dropdown-gray);
}

.ql-toolbar {
  border-radius: 6px 6px 0 0 !important;
  background: var(--light-gray);
}

.quill-editor-parent {
  min-height: 6rem !important;
}

.ql-formats svg {
  width: 1rem;
  height: 1rem;
}
.ql-formats .ql-thin, .ql-formats .ql-stroke, .ql-formats .ql-fill {
  stroke: var(--gray) !important;
}
.ql-formats .ql-active .ql-thin, .ql-formats .ql-active .ql-stroke, .ql-formats .ql-active .ql-fill {
  stroke: var(--blue) !important;
}

.ql-container {
  font-size: 1rem !important;
  font-family: inherit !important;
}

.dropdown-menu-center {
  left: 50% !important;
  right: auto !important;
  text-align: center !important;
  transform: translate(-50%, 0) !important;
}

.custom-font-block {
  width: 100%;
  word-wrap: break-word;
}
.custom-font-block h1 {
  font-size: 2rem;
}
.custom-font-block h2 {
  font-size: 1.75rem;
}
.custom-font-block h3 {
  font-size: 1.5rem;
}
.custom-font-block h4 {
  font-size: 1.35rem;
}

.form-control {
  background: var(--white);
  color: var(--black);
  border-color: var(--table-border);
}
.form-control:focus {
  background: var(--white);
  color: var(--black);
}

.form-control:disabled, .form-control[readonly] {
  background-color: var(--border-color);
}

.border {
  border: 1px solid var(--border-color) !important;
}

.input-group-text {
  color: var(--black);
  background-color: var(--light-gray);
  border: 1px solid var(--border-color);
}

.custom-select {
  background: var(--white);
  color: var(--black);
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%2ffffffe6' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
}

.dropdown-menu {
  background: var(--white);
  color: var(--black);
}

.dropdown-item {
  color: var(--black);
}

.modal-header {
  border-bottom: 1px solid var(--border-color);
}

.modal-footer {
  border-top: 1px solid var(--border-color);
}

.extension-title {
  font-weight: 600;
  font-size: 36px;
  line-height: 42px;
  margin-top: 48px;
}

.extension-subtitle {
  font-size: 18px;
  line-height: 24px;
  font-size: 18px;
  line-height: 28px;
  width: 57vw;
}

.extension-link-btn {
  text-decoration: underline;
  color: #426B4B;
  cursor: pointer;
}

.extension-tick-list {
  list-style: none;
  padding: 0;
}

.extension-tick-list-item {
  font-size: 18px;
  line-height: 38px;
}

.alert-div {
  width: 57vw;
}

.sidebar-sticky {
  position: sticky;
  top: 35px;
  height: calc(100vh - 50px);
  padding-top: 0.5rem;
  overflow-x: hidden;
  overflow-y: auto;
}

.sidebar-expanded {
  position: fixed;
  width: 5em;
  left: 0;
  top: 0;
  z-index: 100;
}

.sidebar-collapsed {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
}

.sidebar-group-label {
  margin-left: 2.8em;
  opacity: 0;
}

#fold-pinned-items svg {
  transform: rotate(0deg);
  transition: 250ms all ease-in-out;
}
#fold-pinned-items.folded svg {
  transform: rotate(90deg);
}

#pinned-items .card-body.body {
  transition: 250ms all ease-in-out;
  padding-top: 1rem;
  height: auto;
}
#pinned-items .card-body.body.folded {
  overflow: hidden;
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

#sidebar {
  font-size: 0.875rem;
  width: 5em;
  transition: all 0.25s cubic-bezier(0, -0.38, 0.12, 1.19);
}
@media (max-width: 1000px) {
  #sidebar {
    display: none;
  }
}
#sidebar:hover, #sidebar:focus-within {
  width: 15rem;
}
#sidebar:hover .sidebar-sticky, #sidebar:focus-within .sidebar-sticky {
  overflow-y: auto !important;
  overflow-x: hidden;
}
#sidebar:hover .sidebar-group-label, #sidebar:focus-within .sidebar-group-label {
  opacity: 0.9;
}
#sidebar:hover .sidebar-label, #sidebar:focus-within .sidebar-label {
  opacity: 1;
}
#sidebar:hover .pinned-items-wrapper, #sidebar:focus-within .pinned-items-wrapper {
  opacity: 1;
  display: block;
}
#sidebar:hover .divider, #sidebar:focus-within .divider {
  opacity: 0;
}
#sidebar:hover .new-incident, #sidebar:focus-within .new-incident {
  background: var(--light-blue);
}
#sidebar .nav-link-wrapper.automation:not(.active):hover path {
  fill: var(--black) !important;
}
#sidebar .sidebar-sticky {
  overflow: hidden;
}
#sidebar .escalation-icon:not(.active):hover svg {
  fill: var(--black) !important;
  stroke: var(--black) !important;
}
#sidebar .sidebar-nav-links {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
#sidebar .divider {
  opacity: 1;
}
#sidebar .sidebar-nav {
  color: var(--gray);
  transition: border 250ms ease-in-out;
}
#sidebar .sidebar-nav a {
  color: var(--gray);
  padding: 0rem 1rem;
}
#sidebar .sidebar-nav svg:not(.integrations-icon) {
  fill: var(--gray);
}
#sidebar .sidebar-nav .nav-link-wrapper {
  width: 13rem;
  padding: 0.4rem;
}
#sidebar .sidebar-nav.active .sidebar-label {
  color: var(--blue) !important;
  font-weight: 500 !important;
}
#sidebar .sidebar-nav.active .sidebar-icon svg {
  fill: var(--blue) !important;
}
#sidebar .sidebar-nav.active .sidebar-icon.maintenance svg path, #sidebar .sidebar-nav.active .sidebar-icon.components svg path {
  fill: var(--blue) !important;
  fill-opacity: 1;
}
#sidebar .sidebar-nav.active .sidebar-icon.dashboard svg {
  fill: var(--blue) !important;
  fill-opacity: 1;
}
#sidebar .sidebar-nav.active a {
  color: var(--black);
}
#sidebar .sidebar-nav.active:hover {
  background: transparent;
}
#sidebar .sidebar-nav:not(.active):hover .sidebar-icon svg {
  fill: var(--black) !important;
}
#sidebar .sidebar-nav:not(.active):hover .sidebar-icon.maintenance svg path, #sidebar .sidebar-nav:not(.active):hover .sidebar-icon.components svg path {
  fill: var(--black) !important;
  fill-opacity: 1;
}
#sidebar .sidebar-nav:not(.active):hover .sidebar-icon.dashboard svg {
  fill: var(--black) !important;
  fill-fill-opacity: 1;
}
#sidebar .sidebar-icon {
  width: 35px;
  text-align: center;
}
#sidebar .pinned-items-wrapper {
  opacity: 0;
  display: none;
  overflow-x: hidden;
}
#sidebar .name-of-entity {
  width: 7rem;
}
#sidebar .sidebar-label {
  margin-left: 0.8rem;
  width: 8rem;
  opacity: 0;
  position: absolute;
  color: var(--black);
}
#sidebar .bottom-sidebar {
  display: flex;
  flex-direction: column;
}
#sidebar .bottom-sidebar .sidebar-nav {
  border: 0;
}
#sidebar .bottom-sidebar .sidebar-nav svg {
  fill: var(--white);
}
#sidebar .bottom-sidebar .sidebar-nav:hover {
  border: 0;
}
#sidebar .bottom-sidebar .sidebar-nav:hover svg {
  fill: var(--white);
}

.sidebar-collapsed .nav-item:hover .nav-link {
  background: var(--light-gray);
}

.sidebar-expanded .nav-item:hover .nav-link-wrapper {
  padding: 1rem;
  background: var(--light-gray);
}
.sidebar-expanded .nav-item:hover .spike-logo {
  cursor: pointer;
}
.sidebar-expanded .nav-item:hover .spike-logo svg path {
  fill: var(--blue) !important;
}

@media (min-width: 768px) {
  .animate-dropdown {
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
  }
}
@keyframes slideIn {
  0% {
    transform: translateY(0rem);
    opacity: 0;
  }
  100% {
    transform: translateY(0.3rem);
    opacity: 1;
  }
  0% {
    transform: translateY(0rem);
    opacity: 0;
  }
}
@-webkit-keyframes slideIn {
  0% {
    -webkit-transform: transform;
    -webkit-opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0.3rem);
    -webkit-opacity: 1;
  }
  0% {
    -webkit-transform: translateY(0rem);
    -webkit-opacity: 0;
  }
}
.slideIn {
  -webkit-animation-name: slideIn;
  animation-name: slideIn;
}

.dashboard-header {
  border-bottom: 1px solid var(--border-color);
}

.navbar-light .navbar-nav .nav-link {
  color: var(--gray);
}

.toggle-btn {
  width: 2.25rem;
  height: 1rem;
  position: absolute;
  right: 8px;
  bottom: 0;
  top: 1rem;
}

#dark-mode--checkbox {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: 0px;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
}

/* First toggle btn */
#dark-mode--toggle span {
  width: 2.25rem;
  height: 1rem;
  position: absolute;
  top: 2px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow: hidden;
  opacity: 1;
  border-radius: 8px;
  background-color: var(--table-border);
  transition: 0.2s ease background-color, 0.2s ease opacity;
}

#dark-mode--toggle span:before, #dark-mode--toggle span:after {
  content: "";
  position: absolute;
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transition: 0.5s ease transform, 0.2s ease background-color;
}

#dark-mode--toggle span:before {
  background-color: var(--table-border);
  transform: translate(30px, -9px);
  z-index: 1;
}

#dark-mode--toggle span:after {
  background-color: var(--gray);
  transform: translate(3px, 0px);
  z-index: 0;
}

#dark-mode--toggle input[type="checkbox"]:checked + span {
  background-color: var(--table-border);
}

#dark-mode--toggle input[type="checkbox"]:active + span {
  opacity: 0.5;
}

#dark-mode--toggle input[type="checkbox"]:checked + span:before {
  background-color: var(--table-border);
  transform: translate(15px, -3px);
}

#dark-mode--toggle input[type="checkbox"]:checked + span:after {
  background-color: var(--black-no-opacity);
  transform: translate(21px, 0px);
}

.table-row-header {
  color: var(--gray);
  background: var(--light-blue);
  border-radius: 6px 6px 0 0;
  border: 1px solid var(--table-border);
  border-bottom: 0;
}

.table-row {
  border-left: 1px solid var(--table-border);
  border-right: 1px solid var(--table-border);
  border-top: 1px solid var(--lighter-border);
  border-bottom: 1px solid var(--lighter-border);
  border-bottom: 0;
  background: var(--white);
  min-height: 5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  align-items: center;
  justify-content: center;
}
.table-row:nth-child(2) {
  border-top: 0;
}
.table-row:last-child {
  border-bottom: 1px solid var(--table-border);
  border-radius: 0 0 var(--radius) var(--radius);
}
.table-row .action-on-hover {
  visibility: hidden;
}
.table-row:hover {
  background: var(--very-light-blue);
}
.table-row:hover .action-on-hover {
  visibility: visible;
}

.onboarding .onboard-step {
  min-height: 320px;
}
.onboarding h5.title {
  font-size: 1.5rem;
  border-bottom: 1px solid #ececec;
}

#onboarding--verify-email {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: auto;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#first-integration-setup--onboarding #integration-list, #first-integration-setup--onboarding #configure-integration {
  height: 400px;
  max-height: 500px;
  overflow: auto;
}
#first-integration-setup--onboarding #integration-table td {
  border: 0;
}

/*progressbar */
#progressbar {
  margin-bottom: 30px;
  overflow: hidden;
  /*CSS counters to number the steps */
  counter-reset: step;
}

#progressbar li {
  list-style-type: none;
  color: #7dbcff;
  font-size: 9px;
  width: 15%;
  float: left;
  position: relative;
}
#progressbar li span.desc {
  font-size: 0.875rem;
  color: #202020;
}

#progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 36px;
  height: 36px;
  line-height: 20px;
  display: block;
  font-size: 10px;
  color: #e5e5e5;
  background: #e5e5e5;
  border-radius: 50%;
  margin: 0 auto 5px auto;
  background-repeat: no-repeat;
  text-indent: 9999px;
  background-position: center;
}

#progressbar li.first:before {
  background-image: url("/images/onboarding/phone_gray.svg");
}

#progressbar li.first.active:before {
  background-image: url("/images/onboarding/phone_white.svg");
}

#progressbar li.second:before {
  background-image: url("/images/onboarding/escalations_gray.svg");
}

#progressbar li.second.active:before {
  background-image: url("/images/onboarding/escalations_white.svg");
}

#progressbar li.third:before {
  background-image: url("/images/onboarding/integrations_gray.svg");
}

#progressbar li.third.active:before {
  background-image: url("/images/onboarding/integrations_white.svg");
}

#progressbar li.fourth:before {
  background-image: url("/images/onboarding/incidents_gray.svg");
}

#progressbar li.fourth.active:before {
  background-image: url("/images/onboarding/incidents_white.svg");
}

/*progressbar connectors */
#progressbar li:after {
  content: "";
  width: 100%;
  height: 3px;
  background: #e5e5e5;
  position: absolute;
  left: -50%;
  top: 18px;
  z-index: -1;
}

#progressbar li:first-child:after {
  content: none;
}

/*marking active/completed steps green */
/*The number of the step and the connector before it = green */
#progressbar li.active:before {
  background-color: #007bff;
  color: #007bff;
}

#incident-timestamps th {
  background: var(--light-gray);
}

.btn-incident-header {
  font-size: 0.875rem;
  padding: 3px 10px;
}
.btn-incident-header.mobile-view {
  padding-top: 7px;
  padding-bottom: 7px;
  width: 85%;
  font-size: 0.875rem;
  font-weight: 500;
}

.incident-details {
  max-height: 650px;
  overflow: scroll;
}

#incidents .incident-row,
#incidents .incident-row-header,
#incidents .incident-row-actions {
  border: 1px solid var(--table-border);
  border-bottom: 0;
  background: var(--white);
  font-size: 14px;
  font-size: 0.875rem;
  color: var(--black);
}
#incidents .incident-row:last-child:not(.mobile-view) {
  border-bottom: 1px solid var(--table-border);
  border-radius: 0 0 6px 6px;
}
#incidents .incident-row:last-child.mobile-view {
  border-radius: 2px;
  border: 0;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.36);
}
#incidents .incident-row-header {
  background: var(--light);
  border-radius: 6px 6px 0 0;
  color: var(--gray);
  font-weight: 500;
  min-height: 58px;
}
#incidents .incident-row-actions {
  padding: 0.8rem;
}

.status {
  border: 1px solid;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 500;
}

.triggered {
  border-color: var(--new-red);
  color: var(--new-red);
  background: rgba(248, 72, 33, 0.1);
}

.acknowledged {
  border-color: #007bff;
  color: #007bff;
  background: rgba(0, 123, 255, 0.1);
}

.resolved {
  border-color: #1eb942;
  color: #1eb942;
  background: rgba(30, 185, 66, 0.1);
}

.badge.integration {
  padding: 0.45rem 0.7rem;
}

#selected-incidents-notice {
  background: var(--light);
  border-left: 1px solid var(--table-border);
  border-right: 1px solid var(--table-border);
  border-bottom: none;
  font-size: 0.875rem;
}

#dropdown-incidents {
  outline: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

#dropdown-incidents-options {
  z-index: 10;
  background: var(--white);
  top: 2rem;
  left: 1rem;
  border: 1px solid var(--table-border);
  font-weight: 300;
  min-width: 11rem;
}
#dropdown-incidents-options a {
  display: block;
  width: 100%;
  padding: 0.75rem 1.2rem;
  color: var(--black);
}
#dropdown-incidents-options a:hover, #dropdown-incidents-options a.active {
  color: var(--black);
  background: var(--dropdown-gray);
}

#reassign-modal .modal-body {
  max-height: 200px;
  overflow: hidden auto;
}
#reassign-modal .member-block {
  cursor: pointer;
}
#reassign-modal .member-block .member-name {
  color: #007bff;
  font-size: 1.3rem;
}
#reassign-modal .member-block .member-role {
  font-size: 0.725rem;
  color: var(--gray);
}

#incident-block .subject {
  line-height: 1.5;
  color: var(--black);
}
#incident-block table td, #incident-block table th {
  padding: 0.5rem 0.75rem;
}
#incident-block table th {
  color: var(--black);
  font-weight: 500;
}

.btn-outline-secondary:hover .mute-icon svg {
  fill: #fff !important;
}

ul.mute-options {
  padding-left: 0;
  list-style: none;
}
ul.mute-options li {
  background: var(--white);
  cursor: pointer;
}
ul.mute-options li:hover {
  background: var(--light-gray);
}

#sharing--public-link {
  user-select: all;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid var(--border-color);
  background: var(--beige);
  color: #202020;
  border-radius: 0.25rem;
  letter-spacing: 0.3px;
  width: 120%;
}

#sharing--box-close {
  right: 0.5rem;
  top: 0.5rem;
  cursor: pointer;
}

.incident-link-wrapper {
  padding: 0.25rem 0.5rem;
  background: var(--light);
}
.incident-link-wrapper:hover {
  background: var(--light-blue);
}

.border-left-2px {
  border-left: 2px solid var(--light-gray);
}

.word-break {
  word-break: break-word !important;
}

.incident-background {
  background: var(--beige);
  height: 20rem;
  width: 100%;
  position: absolute;
  z-index: -1;
}

.incident-details-show {
  background: var(--white);
  min-height: 25rem;
}

.incident-status-updates .row {
  padding-left: 4px;
  position: relative;
}
.incident-status-updates .row:not(:last-child):before {
  left: 8px;
  top: 22px;
  width: 2px;
  content: "";
  height: calc(100% + 0.5rem);
  position: absolute;
  background: var(--lightBorder);
  z-index: 1;
}
.incident-status-updates .row:first-child:before {
  left: 8px;
  top: 22px;
  width: 2px;
  content: "";
  height: calc(100% + 0.8rem);
  position: absolute;
  background: var(--lightBorder);
  z-index: 1;
}

.send-an-status-update {
  margin-bottom: 1.8rem !important;
}

.additional-incident-details {
  background: var(--light);
  border-radius: 0 6px 6px 0;
}

@media (max-width: 768px) {
  #public-incident-page .incident-updates {
    border: 0 !important;
  }
  #public-incident-page .incident-page-cover {
    margin-top: 4rem !important;
    padding: 1.5rem;
    height: 8rem !important;
  }
}
@media (max-width: 768px) {
  #public-incident-page .incident-header-content {
    justify-content: start !important;
  }
}
#public-incident-page .incident-page-cover {
  margin-top: 10rem;
  height: 10rem;
}

.incident-status--icon svg {
  width: 18px;
  height: 18px;
}

#drafts--dropdown .dropdown-menu {
  left: -100% !important;
}

.history-controls a {
  color: var(--black);
}

@media (max-width: 768px) {
  .incident-updates {
    margin-top: 6px !important;
  }
}
.incident-updates-mobile {
  margin-top: 30px;
}

@media (max-width: 768px) {
  .incident-title {
    font-size: 24px;
    margin-top: 50px;
    font-weight: 500;
    padding: 0px;
  }
}
@media (max-width: 768px) {
  .incident-updates-box {
    padding: 0px !important;
  }
}
@media (max-width: 768px) {
  .incident-info-mobile {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
@media (max-width: 768px) {
  .status-description-message {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
}
@media (max-width: 768px) {
  .incident-page-no-header-enabled {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
}
.incident-affected-components:nth-of-type(1) {
  margin-top: 0px !important;
}

.incident-affected-components:nth-of-type(2) {
  margin-top: 0px !important;
}

.example.example4 {
  background-color: #f6f9fc;
}

.example.example4 * {
  font-family: Inter UI, Open Sans, Segoe UI, sans-serif;
  font-size: 16px;
  font-weight: 500;
}

.example.example4 form {
  max-width: 496px !important;
  padding: 0 15px;
}

.example.example4 form > * + * {
  margin-top: 20px;
}

.example.example4 .container {
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  padding: 3px;
}

.example.example4 fieldset {
  border-style: none;
  padding: 5px;
  margin-left: -5px;
  margin-right: -5px;
  background: rgba(18, 91, 152, 0.05);
  border-radius: 8px;
}

.example.example4 fieldset legend {
  float: left;
  width: 100%;
  text-align: center;
  font-size: 13px;
  color: #8898aa;
  padding: 3px 10px 7px;
}

.example.example4 .card-only {
  display: block;
}

.example.example4 .payment-request-available {
  display: none;
}

.example.example4 fieldset legend + * {
  clear: both;
}

.example.example4 input, .example.example4 button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  border-style: none;
  color: #fff;
}

.example.example4 input:-webkit-autofill {
  transition: background-color 100000000s;
  -webkit-animation: 1ms void-animation-out;
}

.example.example4 #example4-card {
  padding: 10px;
  margin-bottom: 2px;
}

.example.example4 input {
  -webkit-animation: 1ms void-animation-out;
}

.example.example4 input::-webkit-input-placeholder {
  color: #9bacc8;
}

.example.example4 input::-moz-placeholder {
  color: #9bacc8;
}

.example.example4 input:-ms-input-placeholder {
  color: #9bacc8;
}

.example.example4 button {
  display: block;
  width: 100%;
  height: 37px;
  background-color: var(--blue);
  border-radius: 2px;
  color: #fff;
  cursor: pointer;
}

.example.example4 button:active {
  background-color: #b76ac4;
}

.example.example4 .error svg .base {
  fill: #e25950;
}

.example.example4 .error svg .glyph {
  fill: #f6f9fc;
}

.example.example4 .error .message {
  color: #e25950;
}

.example.example4 .success .icon .border {
  stroke: #ffc7ee;
}

.example.example4 .success .icon .checkmark {
  stroke: #d782d9;
}

.example.example4 .success .title {
  color: #32325d;
}

.example.example4 .success .message {
  color: #8898aa;
}

.example.example4 .success .reset path {
  fill: #d782d9;
}

/**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */
.StripeElement {
  box-sizing: border-box;
  height: 40px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: white;
  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}

.StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
  border-color: #fa755a;
}

.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}

.example.example5 {
  background-color: #9169d8;
}

.example.example5 * {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
}

#example5-paymentRequest {
  max-width: 500px;
  width: 100%;
  margin-bottom: 10px;
}

.example.example5 fieldset {
  border: 1px solid #b5a4ed;
  padding: 15px;
  border-radius: 6px;
}

.example.example5 fieldset legend {
  margin: 0 auto;
  padding: 0 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #cdd0f8;
  background-color: #9169d8;
}

.example.example5 fieldset legend + * {
  clear: both;
}

.example.example5 .card-only {
  display: block;
}

.example.example5 .payment-request-available {
  display: none;
}

.example.example5 .row {
  display: -ms-flexbox;
  display: flex;
  margin: 0 0 10px;
}

.example.example5 .field {
  position: relative;
  width: 100%;
}

.example.example5 .field + .field {
  margin-left: 10px;
}

.example.example5 label {
  width: 100%;
  color: #cdd0f8;
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.example.example5 .input {
  width: 100%;
  color: #fff;
  background: transparent;
  padding: 5px 0 6px 0;
  border-bottom: 1px solid #a988ec;
  transition: border-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.example.example5 .input::-webkit-input-placeholder {
  color: #bfaef6;
}

.example.example5 .input::-moz-placeholder {
  color: #bfaef6;
}

.example.example5 .input:-ms-input-placeholder {
  color: #bfaef6;
}

.example.example5 .input.StripeElement--focus,
.example.example5 .input:focus {
  border-color: #fff;
}

.example.example5 .input.StripeElement--invalid {
  border-color: #ffc7ee;
}

.example.example5 input:-webkit-autofill,
.example.example5 select:-webkit-autofill {
  -webkit-text-fill-color: #fce883;
  transition: background-color 100000000s;
  -webkit-animation: 1ms void-animation-out;
}

.example.example5 .StripeElement--webkit-autofill {
  background: transparent !important;
}

.example.example5 input,
.example.example5 button,
.example.example5 select {
  -webkit-animation: 1ms void-animation-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  border-style: none;
  border-radius: 0;
}

.example.example5 select.input,
.example.example5 select:-webkit-autofill {
  background-image: url('data:image/svg+xmlutf8,<svg width="10px" height="5px" viewBox="0 0 10 5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="#fff" d="M5.35355339,4.64644661 L9.14644661,0.853553391 L9.14644661,0.853553391 C9.34170876,0.658291245 9.34170876,0.341708755 9.14644661,0.146446609 C9.05267842,0.0526784202 8.92550146,-2.43597394e-17 8.79289322,0 L1.20710678,0 L1.20710678,0 C0.930964406,5.07265313e-17 0.707106781,0.223857625 0.707106781,0.5 C0.707106781,0.632608245 0.759785201,0.759785201 0.853553391,0.853553391 L4.64644661,4.64644661 L4.64644661,4.64644661 C4.84170876,4.84170876 5.15829124,4.84170876 5.35355339,4.64644661 Z" id="shape"></path></svg>');
  background-position: 100%;
  background-size: 10px 5px;
  background-repeat: no-repeat;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 20px;
}

.example.example5 button {
  display: block;
  width: 100%;
  height: 40px;
  margin: 20px 0 0;
  background-color: #fff;
  border-radius: 6px;
  color: #9169d8;
  font-weight: 500;
  cursor: pointer;
}

.example.example5 button:active {
  background-color: #cdd0f8;
}

.example.example5 .error svg .base {
  fill: #fff;
}

.example.example5 .error svg .glyph {
  fill: #9169d8;
}

.example.example5 .error .message {
  color: #fff;
}

.example.example5 .success .icon .border {
  stroke: #bfaef6;
}

.example.example5 .success .icon .checkmark {
  stroke: #fff;
}

.example.example5 .success .title {
  color: #fff;
}

.example.example5 .success .message {
  color: #cdd0f8;
}

.example.example5 .success .reset path {
  fill: #fff;
}

#HW_badge_cont {
  top: -7px;
  left: -22px;
}

#HW_badge {
  height: 18px;
  width: 18px;
}

.settings--icon {
  background: var(--light-gray);
  padding: 10px 14px;
  text-align: center;
  border-radius: 4px;
  display: inline-block;
}

#filters .dropdown-toggle {
  border: 1px solid var(--border-color);
  color: var(--black);
}
#filters .dropdown-toggle::after {
  content: "";
  border: 0;
}
#filters .dropdown-menu {
  height: 15rem;
  box-shadow: 0px 5px 6px rgba(0, 0, 0, 0.12);
}
#filters .dropdown-item {
  color: var(--black);
}
#filters .dropdown-item:hover, #filters .dropdown-item:active, #filters .dropdown-item:hover:active {
  color: var(--black);
  background: var(--dropdown-gray);
}
#filters .filters-dropdown {
  height: 15rem !important;
  min-width: 13rem !important;
  flex-direction: column;
  background: var(--white);
  color: var(--black);
}
#filters .filter-actions {
  margin-top: auto !important;
  font-size: 0.875rem;
  margin-bottom: 2px;
}
#filters .filter-actions .col-6 {
  height: 2.5rem;
}
#filters .filter-actions .col-6 #apply-filters:hover {
  color: var(--white);
}
#filters .filter-category:hover .filter-sub-categories, #filters .filter-category:focus .filter-sub-categories, #filters .filter-category:active .filter-sub-categories {
  display: block;
}
#filters .dropdown-item {
  font-size: 0.875rem;
}
#filters .dropdown-item:active {
  background: #f8f9fa;
}
#filters .filter-item {
  padding: 0.75rem;
}
#filters .filter-sub-categories {
  position: absolute;
  display: none;
  top: -1px;
  left: calc(13rem - 0.25px);
  z-index: 1001;
  float: left;
  min-width: 13rem;
  padding: 0.5rem 0.5rem;
  margin: 0;
  color: var(--black);
  text-align: left;
  list-style: none;
  background-color: var(--white);
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  max-height: 15rem;
  overflow-y: scroll;
  scroll-behavior: auto;
  box-shadow: 0px 5px 6px rgba(0, 0, 0, 0.12);
}
#filters .filter-sub-category {
  display: block;
  width: 100%;
  padding: 0.25rem 0.5rem;
  clear: both;
  font-weight: 400;
  color: var(--black);
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  margin-top: 0.5rem;
}
#filters .filter-show-status {
  line-height: 2.5rem;
}

@media screen and (max-width: 1024px) {
  .navbar-desktop {
    display: none;
  }

  .navbar-mobile {
    display: block;
  }
}
@media screen and (min-width: 1024px) {
  .navbar-desktop {
    display: block;
  }

  .navbar-mobile {
    display: none;
  }
}
@media screen and (min-width: 320px) and (max-width: 768px) {
  #banner {
    font-size: 0.75rem;
  }

  #main-points-section {
    padding: 2rem 0 !important;
  }
  #main-points-section .main-point {
    height: 270px !important;
    margin-left: 0 !important;
  }

  body.has-navbar-fixed-top, html.has-navbar-fixed-top {
    padding-top: 1rem;
  }

  .column {
    padding: 0.75rem 2rem;
  }

  .big-button-m {
    padding: 1.5rem 6rem !important;
  }

  .text-center-m {
    text-align: center;
  }

  .margin-auto-m {
    margin: 0 auto;
  }

  .is-hidden-m {
    display: none !important;
  }

  .is-hidden-d {
    display: block !important;
  }

  .border-bottom-m {
    border-bottom: 1px solid #dee2e6;
  }

  .ml-0-m {
    margin-left: 0 !important;
  }

  .mt-0-m {
    margin-top: 0 !important;
  }

  .mt-1-m {
    margin-top: 1rem !important;
  }

  .mt-2-m {
    margin-top: 2rem !important;
  }

  .mt-3-m {
    margin-top: 3rem !important;
  }

  .mt-4-m {
    margin-top: 4rem !important;
  }

  .mt-5-m {
    margin-top: 5rem !important;
  }

  .mt-7-m {
    margin-top: 7rem !important;
  }

  .mt-8-m {
    margin-top: 8rem !important;
  }

  .mt-9-m {
    margin-top: 9rem !important;
  }

  .mt-10-m {
    margin-top: 10rem !important;
  }

  .mt-11-m {
    margin-top: 11rem !important;
  }

  .ml-0-m {
    margin-left: 0rem !important;
  }

  .ml-1-m {
    margin-left: 1rem !important;
  }

  .ml-2-m {
    margin-left: 2rem !important;
  }

  .ml-3-m {
    margin-left: 3rem !important;
  }

  .ml-4-m {
    margin-left: 4rem !important;
  }

  .ml-5-m {
    margin-left: 5rem !important;
  }

  .p-1-m {
    padding: 1rem !important;
  }

  .p-2-m {
    padding: 2rem !important;
  }

  .p-3-m {
    padding: 3rem !important;
  }

  .p-4-m {
    padding: 4rem !important;
  }

  .p-5-m {
    padding: 5rem !important;
  }

  .px-05-m {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .px-1-m {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .px-2-m {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .px-3-m {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .px-4-m {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .px-5-m {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .pt-0-m {
    padding-top: 0rem !important;
  }

  .pt-1-m {
    padding-top: 1rem !important;
  }

  .pt-2-m {
    padding-top: 2rem !important;
  }

  .pt-3-m {
    padding-top: 3rem !important;
  }

  .pt-4-m {
    padding-top: 4rem !important;
  }

  .pt-5-m {
    padding-top: 5rem !important;
  }

  .pt-7-m {
    padding-top: 7rem !important;
  }

  .pt-8-m {
    padding-top: 8rem !important;
  }

  .pt-9-m {
    padding-top: 9rem !important;
  }

  .pt-10-m {
    padding-top: 10rem !important;
  }

  .pt-11-m {
    padding-top: 11rem !important;
  }

  .pb-0-m {
    padding-bottom: 0rem !important;
  }

  .pb-1-m {
    padding-bottom: 1rem !important;
  }

  .pb-2-m {
    padding-bottom: 2rem !important;
  }

  .pb-3-m {
    padding-bottom: 3rem !important;
  }

  .pb-4-m {
    padding-bottom: 4rem !important;
  }

  .pb-5-m {
    padding-bottom: 5rem !important;
  }

  .pb-8-m {
    padding-bottom: 8rem !important;
  }

  .pb-11-m {
    padding-bottom: 11rem !important;
  }

  #pricing-features .module .module-features-list .module-feature .info {
    margin-top: -1rem;
  }

  .features-block.top .column,
  .features-block.bottom .column {
    border-radius: 10px;
    border: 1px solid #dee2e6;
  }

  .join-bar .join-block {
    padding: 3rem 1rem;
    border-radius: 0;
    text-align: center;
  }
  .join-bar .heading {
    font-size: 1.5rem;
  }

  .integrations-hero {
    padding-bottom: 7rem;
  }

  #request-integration {
    padding: 5rem 0rem;
  }

  #footer {
    padding: 1rem;
  }
}
.live-status-widget .preference label {
  margin-top: 0.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--table-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.live-status-widget .preference label.dark {
  background: var(--background);
  color: var(--black);
}
.live-status-widget .preference label .status-icon {
  margin-inline: 0.5rem;
}
.live-status-widget .preference.round label {
  border-radius: 18px;
}
.live-status-widget .preference.flat label {
  border-radius: 6px;
}

.code-accordion-toggle[aria-expanded="true"] .icon {
  transform: rotate(90deg);
  transition: transform 0.3s ease-in-out;
}

.code-container {
  background: var(--background);
  margin: 0 1rem;
  border-radius: 6px;
}

.embed-block .card-title {
  font-size: 1.1rem;
}

.block.disabled .card-content {
  background: var(--light-gray);
}
.block.disabled .card-content input, .block.disabled .card-content label {
  pointer-events: none;
}

#widget-code {
  position: relative;
  width: 100%;
  min-height: 25rem;
  max-height: 25rem;
}

#copy-widget-code {
  position: absolute;
  top: 15%;
  z-index: 2;
  right: 1rem;
  cursor: pointer;
  padding: 0.5rem;
  background: var(--table-border);
  border-radius: 4px;
  box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.2);
}

.iti-flag {
  background-image: url("/images/flags.png");
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti-flag {
    background-image: url("/images/flags@2x.png");
  }
}
.spike-tooltip {
  background: var(--white);
  padding: 1.2rem;
  z-index: 0;
  border-radius: 6px;
  width: 300px;
  left: -100px;
  top: calc(100% + 25px);
  color: var(--black);
  font-size: 1rem;
  line-height: 1.5rem;
  border: 1px solid var(--border-color);
  opacity: 0;
  box-shadow: 0 8px 9px var(--learn-box-shadow);
  transition: opacity 0ms ease-out;
}
.spike-tooltip.small-tooltip {
  left: -125px;
}
.spike-tooltip.open-tooltip {
  opacity: 1;
  z-index: 1032;
  transition: opacity 200ms ease-in;
}

.tooltip-triangle {
  width: 50px;
  height: 25px;
  position: absolute;
  overflow: hidden;
  top: -25px;
  left: 140px;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
.tooltip-triangle:after {
  content: "";
  border: 1px solid var(--border-color);
  position: absolute;
  width: 15px;
  height: 15px;
  background: var(--white);
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 50%) rotate(45deg);
  transform: translate(-50%, 50%) rotate(45deg);
  box-shadow: -1px -1px 8px -1px rgba(41, 41, 64, 0);
}

#spike-backdrop {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 0;
  opacity: 0;
  position: fixed;
  transition: opacity 0ms ease-in;
}
#spike-backdrop.open-backdrop {
  opacity: 1;
  z-index: 1031;
  transition: opacity 200ms ease-in;
}

.auto-drop {
  color: var(--black);
}
.auto-drop:hover {
  color: var(--black);
}
.auto-drop:hover .auto-drop-box {
  visibility: visible;
  color: var(--black);
}
.auto-drop .auto-drop-box {
  background: var(--white);
  color: var(--black);
  left: -81.5px;
  top: 48px;
  width: 250px;
  border: 1px solid var(--border-color);
  box-shadow: -1px 1px 2px 2px rgba(141, 141, 141, 0.12);
  visibility: hidden;
  transition: visibility 0.15s ease-in-out;
  z-index: 1000;
}
.auto-drop .auto-drop-box .tooltip-triangle {
  left: 125px;
}

.login-block h1 {
  font-size: 2rem;
}

h5.subtitle {
  font-size: 0.875rem;
  color: #adadad;
}

a {
  text-decoration: none;
}
a:hover, a:active, a:focus, a:visited {
  text-decoration: none;
}

.light-background {
  background: #f2f7fc;
}

#dashboard-header {
  position: fixed;
  background-color: #fff;
  border-bottom: 1px solid #eaeaea;
  z-index: 1030;
}

#header-dashboard {
  padding: 0;
}

.service-status-count-block .count-block {
  border-radius: 6px;
  color: #fff;
  background: transparent;
  color: var(--gray);
}
.service-status-count-block .count-block span {
  display: block;
}
.service-status-count-block .triggered-count {
  color: #007bff;
}
.service-status-count-block .acknowledged-count {
  color: #007bff;
}
.service-status-count-block .affected-services.count {
  color: var(--orange);
}
.service-status-count-block .assigned-to-user-count {
  color: var(--dark-gray);
}
.service-status-count-block .triggered-count-block {
  color: #007bff;
}
.service-status-count-block .statistic {
  font-size: 1.125rem;
}
.service-status-count-block .statistic-name {
  font-size: 0.9rem;
}

#team-block .team-member.add-team {
  background: var(--background) !important;
}
#team-block .member-name {
  color: var(--black);
  font-size: 1.1rem;
}
#team-block .member-role {
  color: var(--gray);
}
#team-block .member-role.admin {
  color: var(--gray);
}

#removed-team-block .team-member.add-team {
  background: var(--background) !important;
}
#removed-team-block .member-name {
  color: var(--red);
  font-size: 1rem;
}
#removed-team-block .member-role {
  color: var(--gray);
}
#removed-team-block .member-role.admin {
  color: var(--gray);
  font-size: 0.9rem;
}

#remove-user-modal .part-of-escalations, #remove-user-modal .incidents-plural {
  font-size: 4rem;
  color: #007bff;
}
#remove-user-modal .incidents-text, #remove-user-modal .escalations-text {
  color: var(--gray);
}

/*# sourceMappingURL=dashboard.css.map */