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

.body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  color: #000;
}

.components-section {

  }
  
  
.site-header { 
  border-bottom: 1px solid #ccc;
  padding: 1em 1em 0.5em;
  background-color: #1b1c1e;
  z-index: 999;
}


.site-header::after {
  content: "";
  display: table;
  clear: both;
}

.site-identity {
  float: left;
}


.site-identity img {
  max-height: 50px;
  float: left;
}

.site-navigation {
  float: right;
}

.site-navigation ul, li {
  margin: 0; 
  padding: 0;
}

.site-navigation li {
  display: inline-block;
  margin: 1em 1em 1em 1em;
}

/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 102px;
}

**************************
 * Consistent rounding/bg *
 **************************/
.layout-content.status.status-index .page-status,
.layout-content.status.status-index .components-section .components-container.one-column,
.layout-content.status.status-index .custom-metrics-container .metrics-container .metric {
    border-radius: 4px;
}

.availability-time-line-graphic rect {
  rx: 4px;
}

.layout-content.status.status-index .components-section .components-container.one-column,
.layout-content.status.status-index .custom-metrics-container .metrics-container .metric {
    background: rgba(0, 0, 0, 0);
}

/*****************************
 * Uniform status background *
 *****************************/
.layout-content.status.status-index .components-section .components-container.one-column, .layout-content.status.status-index .custom-metrics-container .metrics-container .metric {
    background-color: #FFFFFF;
}

/************************
 * Hide separator lines *
 ************************/
body.status .layout-content.status .border-color, hr, .tooltip-base, .markdown-display table {
    border-color: transparent;
}
/************************
 * Past incidents lines *
 ************************/
body.status .layout-content.status .date.border-color {
    border-color: #E0E0E0;
}

/*****************
 * Overall width *
 *****************/
.container {
    max-width: 880px;
}

/**********************
 * Fix subscribe text *
 **********************/
.updates-dropdown-container .updates-dropdown .updates-dropdown-section {
    color: #000;
}

/*******************
 * Custom masthead *
 *******************/
.custom-masthead {
    text-align: center;
}

/***********
 * Buttons *
 ***********/
.flat-button,
.layout-content.status .masthead-container .updates-dropdown-container .show-updates-dropdown {
    box-shadow: none;
    text-shadow: none; 
    margin: 0.5rem
}

/***********
 * Metrics *
 ***********/
.metric .metric-meta {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    margin: .75rem 0 .125rem;
}

.metric .metric-meta .metric-name,
.metric .metric-meta .metric-average {
    display: inline-block;
}

.metric .metric-meta .metric-average {
    float: right;
}
  

.metric .highcharts-background {
    fill: none;
}

.custom-metrics-container  {
    font-size: .85rem;
    color: #FFFFFF; /* LINK COLOR */
    margin: .25em 0 0 .5em;
}

.custom-metrics-container #system-metrics {
    font-size: .85rem;
    font-weight: normal;
    color: #FFFFFF;
    pointer-events: none;
}

.custom-text-Dries {
  padding-top: 10px;
  text-align: center;
  color: #FFFFFF;
}

{box-sizing: border-box;}

/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
  border-radius: 4px;
  background-color: #277777;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 150px;
}

/* The popup form - hidden by default */
.form-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  max-width: 200px;
  padding: 10px;
  background-color: white;
}


/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
  border-radius: 4px;
  background-color: #277777;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: #F08791;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}



.custom-footer-container {
    border-top: 1px solid #272727;
    background-color: #1b1c1e;
    padding-top: 30px;
    padding-bottom: 0px;
    text-align: center;
    margin: 0;
    line-height: 1.6rem;
    color: #FFFFFF;
  	  font-size: 10px
}
.footer--sub {
    line-height: 13px;
    line-height: 1rem;
    padding: 5px 0;
    text-align: center;
    background-color: #f5f5f5;
}

.footer--sub ul li {
    display: inline-block;
    color: #858585;
    padding: 5px 10px;
}

.footer--sub ul li:first-of-type {
    padding-left: 0;
}

.footer--sub ul li:last-of-type {
    padding-right: 0;
}

@media (min-width: 1024px) {
    .footer--sub ul li {
        padding: 0 10px;
    }
}

.text-section {
         padding-top: 50px;}