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


:root {
  --color-navy-500: #1858d2;
  --color-navy-700: #00297b;
  --color-navy-600: #003ba7;
  --color-nightfall-600: #3c4860;
  --color-nightfall-500: #57637d;
  --color-green-400: #039a3d;
  --color-green-100: #97f0a4;
  --color-green-75: #cff8d3;
  --color-green-50: #e5f8e7;
  --color-neon-green-base: #c9ff27;
  --color-indigo-700: #290192;
  --color-indigo-600: #3b01c6;
  --color-indigo-500: #4a12f0;
  --color-indigo-100: #ced5ff;
  --color-magenta-700: #500165;
  --color-pink-500: #b7014d;
  --color-yellow-100: #f6d566;
  --color-yellow-600: #604101;
  --color-yellow-500: #835a01;
  --color-yellow-400: #a47802;
  --region-header-bg: #f4f5f7;
  --country-header-bg: #deebff;
  --root-service-bg: #e3fcef;
  font-size: 0.875rem;
}

body {
  font-family: 'Outfit', proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: auto;
}

.container {
  max-width: none;
  margin: auto;
}

.icons {
  display: grid;
  grid-template-columns: auto, auto, auto, auto;
  height: 100%;
  width: 100%;
  border-radius: 0.3rem;
  text-align: center;
  margin: initial;
  margin-bottom: 1rem;
}

.operations i {
  margin-right: 0.5rem;
}
.operations {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  padding: 0.2rem;
}

.indicator {
  display: flex;
  justify-content: center;
}

tr,
td,
th {
  border: 1px solid grey;
  padding: 0.7rem;
  color: black;
}

table {
  border: 2px solid grey;
  padding: 0;
  border-collapse: collapse;
  max-height: 80%;
  width: 100%;
}

.region-header-bg {
  background: var(--region-header-bg) !important;
}
.country-header-bg {
  background: var(--country-header-bg) !important;
}
.root-service-bg {
  background: var(--root-service-bg) !important;
  text-align: left;
}
span {
  display: block;
}

.sub-service-alignment {
  padding-left: 3rem;
  font-size: 0.8rem;
}

.table-column-sticky {
  position: sticky;
  left: 0;
  z-index: 2;
  background: whitesmoke;
  width: 20rem !important;
  top: 3rem;
  z-index: 1;
}

.region-header {
  z-index: 1;
}

table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: inset 0 1px 0 grey, inset 0 -1px 0 grey;
}

region-header:before {
  top: -1px;
  border-top: 1px solid red;
  position: sticky;
  top: 0;
}

.service-header {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 3;
  background: var(--region-header-bg);
  min-width: 15rem !important;
  max-width: 15rem !important;
}

.root-service-bg i {
  float: right;
  transition: all 1s ease;
  padding-top: 0.4rem;
}

#horizon:hover,
#horizon-next-gen:hover,
#ws1-intelligence:hover,
#ws1-services:hover {
  cursor: pointer;
  background: #29b765 !important;
}

.service-status-data {
  text-align: center;
  width: 5rem;
}

th {
  min-width: 5.3rem !important;
  max-width: 5.3rem !important;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
}

.tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 10;
}

.region-table {
  width: 100%;
  margin-bottom: 5rem;
}

.issue-reporting {
  margin-bottom: 2rem;
  text-align: center;
}

.layout-content.status .masthead-container.basic {
  max-width: none;
}

.layout-content.status.status-index .status-day .update-title.impact-critical a, .layout-content.status.status-index .status-day .update-title.impact-critical a:hover, .layout-content.status.status-index .page-status.status-critical, .layout-content.status.status-index .unresolved-incident.impact-critical .incident-title, .flat-button.background-red {
  background-color: var(--color-magenta-700);
}
.layout-content.status-index .components-statuses .component-container.status-red:after, .layout-content.status-full-history .month .incident-container .impact-critical, .layout-content.status-incident .incident-name.impact-critical, .layout-content.status.status-index .incidents-list .incident-title.impact-critical a, .status-red .icon-indicator, .incident-history .impact-critical, .components-container .component-inner-container.status-red .component-status, .components-container .component-inner-container.status-red .icon-indicator {
  color: var(--color-magenta-700);
}
.layout-content.status.status-index .unresolved-incident.impact-critical .updates {
  border-color: var(--color-magenta-700);
}
.layout-content.status.status-index .status-day .update-title.impact-major a, .layout-content.status.status-index .status-day .update-title.impact-major a:hover, .layout-content.status.status-index .page-status.status-major, .layout-content.status.status-index .unresolved-incident.impact-major .incident-title {
  background-color: var(--color-pink-500);
}
.layout-content.status-index .components-statuses .component-container.status-orange:after, .layout-content.status-full-history .month .incident-container .impact-major, .layout-content.status-incident .incident-name.impact-major, .layout-content.status.status-index .incidents-list .incident-title.impact-major a, .status-orange .icon-indicator, .incident-history .impact-major, .components-container .component-inner-container.status-orange .component-status, .components-container .component-inner-container.status-orange .icon-indicator {
  color: var(--color-pink-500);
}
.layout-content.status.status-index .unresolved-incident.impact-major .updates {
  border-color: var(--color-pink-500);
}
.layout-content.status.status-index .status-day .update-title.impact-minor a, .layout-content.status.status-index .status-day .update-title.impact-minor a:hover, .layout-content.status.status-index .page-status.status-minor, .layout-content.status.status-index .unresolved-incident.impact-minor .incident-title, .layout-content.status.status-index .scheduled-incidents-container .tab {
  background-color: var(--color-yellow-400);
}
.layout-content.status-index .components-statuses .component-container.status-yellow:after, .layout-content.status-full-history .month .incident-container .impact-minor, .layout-content.status-incident .incident-name.impact-minor, .layout-content.status.status-index .incidents-list .incident-title.impact-minor a, .status-yellow .icon-indicator, .incident-history .impact-minor, .components-container .component-inner-container.status-yellow .component-status, .components-container .component-inner-container.status-yellow .icon-indicator, .layout-content.status.manage-subscriptions .confirmation-infobox .fa {
  color: var(--color-yellow-400);
}
.layout-content.status.status-index .unresolved-incident.impact-minor .updates, .layout-content.status.status-index .scheduled-incidents-container {
  border-color: var(--color-yellow-400);
}
.layout-content.status.status-index .status-day .update-title.impact-maintenance a, .layout-content.status.status-index .status-day .update-title.impact-maintenance a:hover, .layout-content.status.status-index .page-status.status-maintenance, .layout-content.status.status-index .unresolved-incident.impact-maintenance .incident-title, .layout-content.status.status-index .scheduled-incidents-container .tab {
  background-color: var(--color-navy-500);
}
.layout-content.status-index .components-statuses .component-container.status-blue:after, .layout-content.status-full-history .month .incident-container .impact-maintenance, .layout-content.status-incident .incident-name.impact-maintenance, .layout-content.status.status-index .incidents-list .incident-title.impact-maintenance a, .status-blue .icon-indicator, .incident-history .impact-maintenance, .components-container .component-inner-container.status-blue .component-status, .components-container .component-inner-container.status-blue .icon-indicator {
  color: var(--color-navy-500);
}
.layout-content.status.status-index .unresolved-incident.impact-maintenance .updates, .layout-content.status.status-index .scheduled-incidents-container {
  border-color: var(--color-navy-500);
}
.layout-content.status.status-index .page-status.status-none {
  background-color: var(--color-green-400);
}
.layout-content.status-index .components-statuses .component-container.status-green:after, .status-green .icon-indicator, .components-container .component-inner-container.status-green .component-status, .components-container .component-inner-container.status-green .icon-indicator {
  color: var(--color-green-400);
}

.layout-content.status .masthead-container .updates-dropdown-container .show-updates-dropdown {
  align-items: center;
  place-content: center;
  -webkit-appearance: none !important;
  border: 0 solid rgba(0, 0, 0, 0);
  border-radius: 999px;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  background-color: var(--color-indigo-500);
  color: rgb(255, 255, 255);
  font-weight: 500;
  font-size: 1rem;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: none;
  height: 36px;
  padding: 0 18px;
}
.flat-button:hover,
.layout-content.status .masthead-container .updates-dropdown-container .show-updates-dropdown:hover {
  top: 0;
  background-color: var(--color-indigo-600);
  color: var(--color-neon-green-base);
}
.flat-button:active,
.layout-content.status .masthead-container .updates-dropdown-container .show-updates-dropdown:active {
  top: 0;
  background-color: var(--color-indigo-700);
  color: var(--color-neon-green-base);
}
.component-selector .show-filter {
  border: 1px solid var(--color-indigo-500) !important;
  height: 36px;
  border-radius: 999px !important;
  padding: 0 18px !important;
  place-content: center;
  color: var(--color-indigo-500) !important;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 1px;
}
.component-selector .show-filter.open {
  background-color: var(--color-indigo-100) !important;
  color: var(--color-indigo-700) !important;
}
.pagination-container .pagination {
  display: flex;
  align-items: center;
}
.pagination-container .pagination .current {
  width: auto;
  display: flex;
  gap: 0.4rem;
}
.layout-content.status.status-full-history .history-header .pagination a,
.layout-content.status.status-full-history .uptime-header .pagination a {
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid var(--color-indigo-500) !important;
  color: var(--color-indigo-500) !important;
}
.layout-content.status.status-full-history .history-header .pagination a i::before,
.layout-content.status.status-full-history .uptime-header .pagination a i::before {
  color: var(--color-indigo-500) !important;
}
/* Status Alert Styles */
.layout-content.status.status-index .page-status {
  font-weight: 300;
  font-size: 1rem;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  -o-border-radius: 8px;
  -ms-border-radius: 8px;
  border: 0px solid rgba(0, 0, 0, 0);
  text-shadow: none;
  margin-bottom: 24px;
  padding: 8px 16px;
  text-size-adjust: none;
}
.layout-content.status.status-index .page-status .font-large {
  font-weight: 400;
  font-size: 14px;
}
.layout-content.status.status-index .page-status.status-none { background-color: var(--color-green-700); }
.layout-content.status.status-index .page-status.status-critical { background-color: var(--color-magenta-700); }
.layout-content.status.status-index .page-status.status-major { background-color: var(--color-pink-500); }
.layout-content.status.status-index .page-status.status-minor { background-color: var(--color-yellow-100); }
.layout-content.status.status-index .page-status.status-minor .status { color: #000; }
.layout-content.status.status-index .page-status.status-maintenence { background-color: var(--color-navy-500); }
/* Table Styles */
table {
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
}
table tr th,
table tr td {
  border: 0;
  box-shadow: none !important;
  border-right: 1px solid rgb(176, 190, 219);
  border-bottom: 1px solid rgb(176, 190, 219);
}
table tr th:first-child,
table tr td:first-child {
  border-left: 1px solid rgb(176, 190, 219);
}
table tr th {
  background: #eee;
  border-top: 1px solid rgb(176, 190, 219);
  text-align: left;
  padding: 0.5rem;
}
table tr:first-child th:first-child { border-top-left-radius: 8px; }
table tr:first-child th:last-child { border-top-right-radius: 8px; }
table tr:last-child td:first-child { border-bottom-left-radius: 8px; }
table tr:last-child td:last-child { border-bottom-right-radius: 8px; }
table thead tr:last-child th {
  border: 0;
  border-right: 1px solid rgb(176, 190, 219);
  border-bottom: 1px solid rgb(176, 190, 219);
}
.table-header-sticky {
  top: 2.66rem;
}
.table-column-sticky {
  position: sticky;
  left: 0;
  z-index: 2;
  background: whitesmoke;
}
.root-service-bg {
  background: var(--color-green-50) !important;
}
#horizon:hover, #horizon-next-gen:hover, #ws1-intelligence:hover, #ws1-services:hover {
  background: var(--color-green-100) !important;
  color: #000 !important;
}
.sub-service-alignment {
  font-size: 1rem;
}