@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700");

@import url("https://fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic,900,900italic");
  
body{font-family: "Lato", sans-serif;}
#show-updates-dropdown{

  position: absolute;
  top:40px	;
  left:50%;
  transform: translate(100%,0)
}
.status-none .status-api .container{
    float: none;
    max-width: 860px !important;
  margin-top: 0 !important;
}
.status-api #header-box{
 display: none; 
}
.status-api .font-small{
  font-size: 18px;
}
.font-largest{font-family: "Lato", Arial, Helvetica, sans-serif;color:#be0a24;font-size:2.600em;font-weight:300;font-style:italic;}

.layout-content.status.status-index .unresolved-incidents{padding-bottom:0;margin-bottom:0;}

.layout-content.status .incidents-list,.layout-content.status .incidents-list.format-expanded .status-day{margin-top:20px;}

.layout-content.status.status-index .components-section,.layout-content.status.status-index .page-status{margin-bottom:20px;}

.layout-content.status.status-index .components-section .component-container,.layout-content.status.status-index .page-status{padding:10px;}

.layout-content.status.status-index .unresolved-incidents .unresolved-incident .incident-title{
  text-shadow:none;
}



.layout-content.status.status-index.starter,
.layout-content.status.status-full-history.starter{
  width: 100%;
    float: left;
  position:relative;
}

.layout-content.status.status-full-history>.container{
  margin-top: 97px;
}

header h1{
 width: 242px;
}

.layout-content.status .custom-header-container{
  margin-bottom: 24px;
  width: 100%;
    float: left;
}

.layout-content.status.status-index .scheduled-maintenances-container{
    margin: 20px auto 0;
    width: 100%;
    max-width: 850px;
}

.layout-content.status.status-index .unresolved-incidents .unresolved-incident .updates .update{
  margin-bottom: 0;
  padding-bottom: 0;
}

.layout-content.status.status-index .page-status.status-none,
.layout-content.status.status-index .components-section,
.layout-content.status .incidents-list,
body.status .layout-content.status .border-color,
.layout-content.status.status-index .unresolved-incidents{
  max-width: 850px;
    margin: 0 auto;
}

.layout-content.status.status-index .page-status{
  text-shadow: none;
  border: none; 
}

.layout-content.status.status-index .page-status .status{
  top: 0;
}

.layout-content.status.status-index .components-section .components-container.one-column .component-container:first-child{
  border-radius: 0!important;
}

.layout-content.status .incidents-list.format-expanded .status-day{
  margin-top: 17px;
}

.layout-content.status.status-index .components-section .component-container .name{
  max-width: 95%;
}

body {
  margin: 0; 
  font-family: "Lato"!important;

}

p#header-box a{
   color: #3498DB;
}

.container{
  width: 100%;
    float: left;
    max-width: 100%;
}

.container-custom {
  width: 90%;
  max-width: 850px;
  margin: 0 auto; }

#past-incidents{
  display: block;
  font-size: 1.17em!important;
  font-weight: bold!important;
  margin: 0 0 10px 0!important;
  width: 100%;
  float: left;
}

.page-footer.border-color.font-small a{
  color:#AAA
}

header {
  font-family: "Lato";
  box-sizing: border-box;
  padding: 10px 0;
  float: left;
  width: 100%;
  box-shadow: 0px -8px 10px 10px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px -8px 10px 10px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px -8px 10px 10px rgba(0, 0, 0, 0.1); }
  header h1 {
    float: left;
    margin: 0; }
  header .subscribe {
    float: right;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    background: #111;
    text-align: center;
    color: #fff;
    width: 165px;
    font-size: 14px;
        line-height: 17px;
    padding: 10px 0;
    margin: auto;
    cursor: pointer;
    margin: 21px 0;
    transition: all 0.4s;
    border: 1px solid #111; }
    header .subscribe:hover {
      background: #fff;
      color: #111; }

.main {
  font-family: "Lato";
  float: left;
  width: 100%;
  margin-top: 25px; }
  .main .title {
    background: #26ce3a;
    padding: 15px 20px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px; }
    .main .title h2 {
      color: #fff;
      font-size: 20px;
      font-weight: 500;
      margin: 0; }
  .main p, .layout-content.status .incidents-list.format-expanded .status-day p,  p#header-box{
    padding: 0 30px 0 20px;
    color: #666;
    font-size: 15px; }
   p#header-box{
    line-height: 1.3;
    margin-top: 1em;
    margin-bottom: 1em;
   } 
.mainLogo{width: 400px; padding-top: 8px;}
    @media (max-width: 576px) {
      .main p {
        padding: 0; } }
    .main p a{
      color: #26ce3a;
      text-decoration: none; }
  .main .operational, .components-container.one-column {
    width: 100%;
    float: left;
    margin: 5px auto 19px auto; }
    .main .operational article, .component-container.border-color.is-group {
      border: 1px solid #eff2f4!important;
      padding: 13px 0 15px 15px!important;
      box-sizing: border-box;
      transition: all 0.4s!important;
      float: left!important;
      border-radius: none!important;
      width: 32.60073%!important;
      margin-right: 1.0989%!important;
      margin-bottom: 1.0989%!important; }
      .main .operational article.open, .component-container.border-color.background, .component-container.border-color.is-group.open {
        box-shadow: 0px 0px 59px -4px rgba(0, 0, 0, 0.1);
        background-color: #f9f9f9; }
        .main .operational article.open ul, .status-green.open ul {
          display: block; }
        .main .operational article.open h3, .status-green.open .component-status {
          display: none!important; }
      .main .operational article:hover, .component-container.border-color.is-group:hover {
        cursor: pointer;
        background: #f9f9f9; }
      .main .operational article:nth-of-type(3n), .component-container.border-color.is-group:nth-of-type(3n) {
        margin-right: 0!important; }
        @media (max-width: 920px) {
  .mainLogo{width: 300px;}
  .linklogo{text-align: center; width: 100%; display: block;}
  #mkbtn{
   width: 70%;
    margin: 0 auto;
    float: none !important;
    padding: 5px !important;
  }
           .container{
            box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
           }
          .main .operational article:nth-of-type(3n), .component-container.border-color.is-group:nth-of-type(3n) {
            width: 49.45055%;
            margin-right: 1.0989%!important; } }
  @media (max-width: 920px) and (max-width: 576px) {
    .main .operational article:nth-of-type(3n), .component-container.border-color.is-group:nth-of-type(3n) {
      width: 100%; } }
      @media (max-width: 920px) {
        .main .operational article, .component-container.border-color.is-group {
          width: 49.45055%!important; }
          .main .operational article:nth-of-type(2n), .component-container.border-color.is-group:nth-of-type(2n){
            margin-right: 0!important; } }
  @media (max-width: 920px) and (max-width: 576px) {
    .main .operational article,.component-container.border-color.is-group {
      width: 100%!important; } }
      .main .operational article h2,  .layout-content.status.status-index .components-section .component-container .name{
        padding: 0;
        margin: 0;
        line-height: 1;
        font-weight: bold;
        font-size: 13px; }
        .main .operational article h2 img {
          margin-right: 5px;
          float: left;
          cursor: pointer; }
      .main .operational article h3, .layout-content.status.status-index .components-section .components-container.one-column .component-container .component-status {
        padding: 0 0 0 20px;
            display: block;
        margin: 3px 0 0 0;
        width: 100%;
        font-size: 13px;
        line-height: 1;
        color: #26ce3a;
        font-weight: 600;
        letter-spacing: 0.5px; }
      .main .operational article ul , .status-green ul{
        display: none;
        padding-left: 20px; 
        margin: 1em 0;
    }

    .layout-content.status.status-index .components-section .component-container .child-components-container .component-inner-container .name{
      margin-bottom: 0px;
          min-width: 68px;
    }



.layout-content.status.status-index .components-section .component-container .child-components-container 
        .component-inner-container span.component-status{
          color: #26ce3a!important;
            letter-spacing: 0!important;
            font-weight: 400!important
        }

        .main .operational article ul li, .status-green ul li, .layout-content.status.status-index .components-section .component-container .child-components-container 
        .component-inner-container, .layout-content.status.status-index .components-section .component-container .child-components-container 
        .component-inner-container span, .layout-content.status.status-index .components-section .component-container .child-components-container 
        .component-inner-container span.component-status{
          list-style-type: none;
          color: #777;
          font-size: 12px;
          margin-bottom: 10px;
          padding-left: 0;
          font-weight: 300;
          line-height: 1; }
          .main .operational article ul li:last-of-type, .status-green ul li:last-of-type{
            margin-bottom: 0; }
          .main .operational article ul li a , .status-green ul li a{
            color: #26ce3a;
            line-height: 1rem;
             }
  .main .past-incidents {
    width: 100%;
    float: left;
    margin-top: 0; }
    .main .past-incidents ul {
      margin: 0;
      padding: 0; }
      .main .past-incidents ul li {
        list-style-type: none;
        margin-bottom: 25px; }
        .layout-content.status.status-index .incidents-list .incident-title.impact-maintenance a{
          font-family: "Lato";
          font-size: 16px;
          font-weight: bold;
          color: #111!important;
        }
        .layout-content.status.status-index .incident-container .updates-container .update{
        color: #999;
        font-weight: 700;
        }
        .layout-content.status.status-index .incident-container .updates-container .update strong{
          color: #111
        }
        .layout-content.status.status-index .scheduled-maintenances-container .scheduled-maintenance .incident-title a, .font-largest{
          font-family: "Lato";
          font-size: 16px;
          padding-bottom: 0!important;
          font-weight: bold;
          color: #111!important;
        }
        .layout-content.status.status-index .scheduled-maintenances-container .scheduled-maintenance:nth-child(2){
              margin-top: 0;
        }
        .main .past-incidents ul li h4 , .layout-content.status .incidents-list.format-expanded .status-day .date{
          font-family: "Lato";
          font-size: 16px;
          border-bottom: 2px solid #eff2f4!important;
          padding-bottom: 0!important;
          font-weight: bold;
          margin: 0 0 10px 0!important;
          color: #111!important; }
        .main .past-incidents ul li p , .layout-content.status .incidents-list.format-expanded .status-day p,
        .layout-content.status.status-index .scheduled-maintenances-container .scheduled-maintenance .updates-container .update:last-of-type{
          padding-left: 0;
          color: #999;
          font-weight: 700; }

          .font-largest{
          margin-top: 25px;
          float: left;
          width: 100%;
        }

          .page-footer{
            padding-top: .25rem!important;
            margin-top: 30px!important;
            margin-bottom: 30px!important;
          }

          .layout-content.status.status-index .components-section .component-container .child-components-container .component-inner-container span.tooltip-base.tool{
             line-height: 1.4;
             margin-bottom: -3px;
             position: relative;
              top: 8px
          }
    @media (max-width: 576px) {
      .main p, p#header-box {
        padding: 0; } }

   .status-full-history #header-box{
      display: none;
   }

  .status-full-history .container{
         max-width: 850px!important;
         float: none!important
  }

 .layout-content.status .custom-header-container .updates-dropdown-container{
  display: block!important;
 }

.updates-dropdown-container .show-updates-dropdown:after{
  display:none
}

.updates-dropdown-container .updates-dropdown{
  left:0;
  right:0;
  margin:auto;
  top:200px!important;
}

.flat-button{
      background-color: #26ce3a!important;
}

a{
 color: #26ce3a; 
}

.layout-content.status.status-full-history .history-header .pagination a{
       height: 37px;
}
.layout-content.status.status-full-history .show-filter{
  padding: 5px 10px;
}

.status.incident.status-none #header-box, .status.history #header-box {
  display:none
}

.layout-content.status.status-incident>.container{
    max-width: 850px!important;
    float: none!important;
  margin-top:0;
}

.layout-content.status.status-incident .custom-header-container{
  margin-bottom: 50px;
}

.status.history.status-none .custom-header-container{
    position: relative;
}
.layout-content.status.status-index .page-status.status-none{
   background:#26ce3a!important;
}

.layout-content.status.status-full-history>.container{
  z-index: 1;
}

.updates-dropdown-container .updates-dropdown .updates-dropdown-section{
  line-height: 1.13438rem;
}

.flat-button{
  box-shadow: none!important;
  letter-spacing: 1px;
  text-transform: none;
  text-decoration: none;
  text-shadow: none;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.4s;
  border: 1px solid #26ce3a;
}

.flat-button:hover{
  background: #fff!important;
  color: #26ce3a; 
} 

.special-back{
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  height: 100%; 
  width:100%;
  z-index: 500;  
  display:none;
}

.updates-dropdown-container .updates-dropdown{
  z-index:600;
}

@media (max-width: 420px) {
  
  .layout-content.status.status-incident .page-title .incident-name{
    font-size: 1.3rem;
    line-height: 1.1rem;
}
  
  .layout-content.status.status-full-history>.container{
         margin-top: 160px;
  }
  
  header h1{
    display:block;
    width:100%;
    float:left;
    text-align: center;
    margin: 5px 0;
  }
  
  #show-updates-dropdown{
    width:100%;
    margin-top: 15px;
  } 
  
  .status-full-history h4{
   text-align: center;
  }
}

.layout-content.status.status-full-history .months-container .month .incident-container .incident-title{
      font-family: "Lato";
    font-size: 16px;
    padding-bottom: 0!important;
    font-weight: bold;
    color: #111!important;
}

.layout-content.status.status-full-history .months-container .month{
      margin-top: 1rem!important;
}

.layout-content.status.status-full-history .months-container .expand-incidents{
  padding: 0.3rem 0.75rem 0.4rem;
}

.status-full-history .custom-header-container{
  position:relative;
}

.incident #header-box, .incident a.color-secondary{
  display:none;
}

.layout-content.status.status-incident .page-title .incident-name{
  color: #000;
}

.status.manage-subscriptions .container{
   float:none;
}

.status.manage-subscriptions #header-box{
  text-align:center;
}
.formOverlay{
    background: rgba(0,0,0,0.8);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 122;
  display: none;
}
.formWrap{
  position: relative;
    height: 100%;
    width: 100%;
}
#mkbtn{
float: right;
  margin-top: 15px;
  background: #1a73e8;
  color: #fff;
  padding: 10px 20px;
  border-radius: 10px;
    cursor: pointer;
  transition: all 0.6s ease;
  display: none;
  text-align: center;
   
}
#mkbtn:hover{
  background: #26ce3a;
}
.hsform{
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #c4b37f;
    font-size: 18px;
}
#formclose{
    position: absolute;
    right: -20px;
    top: -40px;
  cursor: pointer;
}
.submitted-message{
 color: #fff; 
}
#formclose img{
  width: 20px;
}
.hsform{
 width: 300px; 
  color: #fff;
}
.hs-form-iframe{width: 100%;}
header{position: relative;}
iframe{
 width: 300px !important;
}
@media (max-width: 920px) {
    .linklogo {
        text-align: left;
        width: 100%;
        display: block;
    }
}