/* Sticky footer styles
-------------------------------------------------- */
html {
    height: 100%;
    box-sizing: border-box;
  }
  body {
    /* Margin bottom by footer height */
    margin: 0;
    margin-bottom: 60px;
    background-color: #F0F3F4;

    position: relative;
    margin: 0;
    padding-bottom: 6rem;
    min-height: 100%;

  }

  .content-wrapper {
    margin: 0 auto;
    padding-top: 32px;
    max-width: 640px;
    width: 94%;
    margin-bottom: 50px !important;
  }

  footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    background-color: #efefef;
    text-align: center;
  }

/* Footer Fixes */
.js-wrapper--main {
    min-height: unset !important;
    margin-bottom: 50px;
}

  h1,h2,h3,h4,h5 {
    font-family: inherit;
  }

  .footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    line-height: 60px; /* Vertically center the text there */
    background-color: #f5f5f5;
  }
  
  .navbar {
      background: #2B3034;
      padding: 13px 0 0px 0 !important;
      margin-bottom: 30px !important;
      height: 50px !important;
  }
  
  .navbar--container {
      width: 900px;
      margin: 0 auto;
      height: 50px;
  }

  .navbar-brand {
    padding-top: 3px !important;
  }
  
  .navbar-collapse {
      width: 250px;
      float: right;
  }

  .navbar-collapse {
    width: unset;
  }
  
  .siteHeader--details {
      margin-top: 4px;
  }

  .siteHeader--button {
    background: rgba(0,0,0,0.2);
    border: 0;
    border-radius: 5px;
    text-decoration: none;
    font-size: 12px;
    text-transform: uppercase;
    padding: 8px 18px;
    color: #FFFFFF !important;
    margin-left: 10px;
}

.pagy-bootstrap-nav {
  margin: 0 auto;
}
  
  /* Custom page CSS
  -------------------------------------------------- */
  /* Not required for template or sticky footer method. */
  
  body > .container {
    padding: 60px 15px 0;
    width: 900px !important;
    margin-top: 30px;
  }
  
  .footer > .container {
    padding-right: 15px;
    padding-left: 15px;
  }
  
  code {
    font-size: 80%;
  }
  
  .statusGroup--title {
      margin-bottom: 0px;
      font-size: 16px;
      color: #333;
      font-weight: 700;
      background-color: #e8e8e8;
      cursor: pointer;
      padding: 12px;
      font-family: inherit;
  }
  
  .statusList {
      padding: 0;
      margin-bottom: 0px;
  }
  
  .statusList--item {
      background-color: #FFF !important;
      font-size: 14px;
      width: 50%;
      float: left;
      height: 45px;
      padding: 13px 15px;
      margin-bottom: 1px !important;
  }


  
  .statusList--status {
      float: right;
      font-size: 12px;
  }
  
  ul {
      list-style: none;
  }
  
  .statusGroup {
      background-color: #e8e8e8;
      margin-bottom: 25px;
      padding: 1px;
  }
  
  .statusList--description {
      background: transparent url(/assets/york/question-b9b6b60….svg) 0 0/100% auto no-repeat;
      display: inline-block;
      height: 14px;
      margin-left: 5px;
      vertical-align: -1px;
      width: 14px;
  }
  
  .statusList--name {
      float: left;
      font-family: inherit;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      max-width: 75%;
  }
  
  .statusList--name a {
      text-decoration: none;
      color: inherit;
  }

  .statusList--name i {
    color: #666;
    margin-right: 10px;
  }

  .statusGroup--header {
    cursor: pointer;
  }

  .statusList--services {
    margin: 0 !important;
    padding: 0px !important;
  }

  .affected-service--list-group, 
  .affected-service--list-group a, 
  .affected-service--list-group a:link {
      font-size: 14px !important;
      color: #606060;
      font-weight: bold;
  }

  .list-group {
    font-size: 15px;
  }

  .list-group-hosts {
      margin: 0px !important;
  }
  
  .ongoingIssues {
      margin-bottom: 15px;
  }

  /* Homepage Issue Banners */
  
  .issueBanner:last-child {
      margin-bottom: 0;
  }
  
  .issueBanner--maint {
      background-color: #0d47a1;
      border: 2px #0d47a1 solid;
      color: #FFF !important;
  }
  .issueBanner--investigating {
      background: #d13943;
  }

.issueBanner--maintenance {
    background: #2196F3;
    color: #ffffff;
}

  .issueBanner {
      display: block;
      border-radius: 6px;
      text-decoration: none;
      padding: 13px 17px;
      margin-bottom: 15px;
      color: #FFF !important;
  }
  
  .issueBanner h2 {
      font-size: 16px;
      margin-top: inherit;
  }
  
  .issueBanner__state {
      float: right;
      font-weight: 600;
      font-size: 12px;
      margin-left: 15px;
  }
  
  .advertise--maint .issueBanner__services, .advertise--issues .issueBanner__services {
      margin-top: 10px;
      margin-bottom: 10px;
  }
  .issueBanner__services {
      font-size: 14px;
      opacity: 0.7;
  }

.issueBanner__services a {
    text-decoration: none;
    color: #FFF;
}

.issueBanner__services a:hover {
    font-weight: bold;
}

.advertise--issues {
    background-color: #b71c1c;
    border: 2px #b71c1c solid;
    color: #FFF;
}

.advertise--success {
  background-color: #28a745;
  border: 2px #28a745 solid;
}

.advertise--maint {
    background-color: #0d47a1;
    border: 2px #0d47a1 solid;
}

.advertise--upcoming-maint {
  background-color: #4a4a4a;
  border: 2px #4a4a4a solid;
}
  
  /* Mobile / small screen view */
  
  @media only screen and (max-width: 900px) {
      .statusList--item {
        float: none;
        width:100%;
      }
    
      #button_legacy {
        display: none;
      }

      .incident-body {
        left: 15px;
      }
    }

    @media only screen and (max-width: 1092px) {
      .incident-body {
        left: 15px;
      }
    }

    @media only screen and (max-width: 575px) {
      .incident-body {
        left: 67px;
        width: 84%;
      }
    }

    @media only screen and (max-width: 400px) {
        .incident-body {
          left: 67px;
          width: 80%;
        }
      }

/* Status Tables */

.status-table-0 {
    border-left: 5px #28a745 solid;
}

.status-table-1 {
    border-left: 5px #dc3545 solid;
}

.status-table-2 {
    border-left: 5px #17a2b8 solid;
}

.status-table-255 {
    border-left: 5px #3b3b3b solid;
}

.shared-partial.uptime-90-days-wrapper svg {
    margin: 0;
    padding: 0;
    height: 34px;
    width: 97%;
    overflow: visible;
}

.tippy-content {
  overflow:visible !important;
  white-space:initial !important;
  text-overflow: initial !important;
  max-width: 100% !important;
}

.tooltip-inner{
    max-width:200px;
    padding:15px;
    color:#333;
    text-align:center;
    background-color:#f2f2f2 !important;
    border-radius:.25rem;
}

.form-error {
    border: 1px red solid;
}


/* Colours */

.st-colour-0 {
    color: #28a745;
}

.st-colour-1 {
    color: #dc3545;
}

.st-colour-2 {
    color: #ffc107;
}

.st-colour-3 {
    color: #3b3b3b;
}

.st-colour-4 {
    color: #17a2b8;
}




/* Timeline */

.timeline .content-wrapper{
    margin-top:40px;
    margin-bottom:40px
}
.timeline h3{
    margin-top:30px;
    margin-bottom:40px;
    font-size:22px
}
.timeline h3 small{
    margin-left:15px
}
.timeline .list-group.components .panel-body h1,.timeline .panel .panel-body h1{
    margin-top:0;
    margin-bottom:4px;
    font-size:2em
}
.timeline .list-group.components .panel-body h2,.timeline .panel .panel-body h2{
    margin-top:0;
    margin-bottom:4px;
    font-size:1.8em
}
.timeline .list-group.components .panel-body h3,.timeline .panel .panel-body h3{
    margin-top:0;
    margin-bottom:4px;
    font-size:1.6em
}
.timeline .list-group.components .panel-body h4,.timeline .panel .panel-body h4{
    margin-top:0;
    margin-bottom:4px;
    font-size:1.4em
}
.timeline .list-group.components .panel-body h5,.timeline .panel .panel-body h5{
    margin-top:0;
    margin-bottom:4px;
    font-size:1.2em
}
.timeline .moment .list-group.components .panel-body p,.timeline .moment .list-group.components .panel-heading strong,.timeline .moment .panel .panel-body p,.timeline .moment .panel .panel-heading strong{
    font-size:1.1em
}
.timeline .list-group.components .panel-body p,.timeline .panel .panel-body p{
    margin:0
}
.timeline .moment{
    width:100%;
    padding-bottom:10px;
    position:relative
}
.timeline .moment.first:before{
    top:-5px
}
.timeline .moment:before{
    content:'';
    position:absolute;
    left:20px;
    top:-5px;
    width:2px;
    height:100%;
    background: #616161;
}
.timeline .moment .status-icon{
    background:#fff;
    width:35px;
    height:35px;
    border-radius:50%;
    border:1px solid #e8e8e8;
    position:absolute;
    left:18px;
    top:14px
}
.timeline .moment .status-icon .icon {
    position: absolute;
    top: -1px;
    left: -1px;
    font-size: 36px;
}
.timeline .moment .status-icon .icon.ion-alert{
    left:15px
}
.timeline .moment .status-icon.status-0{
    color:#b23f73
}
.timeline .moment .status-icon.status-1{
    color:#f80
}
.timeline .moment .status-icon.status-2{
    color:#F7CA18
}
.timeline .moment .status-icon.status-3{
    color:#3498db
}
.timeline .moment .status-icon.status-4{
    color:#7ED321
}
.timeline .moment.last:before{
    background:#fff
}
.timeline .moment .list-group.components,.timeline .moment .panel{
    margin:0;
    border-radius:2px
}
.timeline .moment .panel-message.list-group.components,.timeline .moment .panel.panel-message{
    border:1px solid #e8e8e8
}
.timeline .moment .panel-message.list-group.components .date,.timeline .moment .panel.panel-message .date{
    color:#949494
}
.timeline .moment .panel-message.list-group.components:before,.timeline .moment .panel.panel-message:before{
    position:absolute;
    top:16px;
    left:1px;
    display:inline-block;
    border-top:15px solid transparent;
    border-left:0 solid #e8e8e8;
    border-right:15px solid #e8e8e8;
    border-bottom:15px solid transparent;
    content:" "
}
.timeline .moment .panel-message.list-group.components:after,.timeline .moment .panel.panel-message:after{
    position:absolute;
    top:17px;
    left:2px;
    display:inline-block;
    border-top:14px solid transparent;
    border-left:0 solid #fff;
    border-right:14px solid #fff;
    border-bottom:14px solid transparent;
    content:" "
}
.timeline .moment .list-group.components .panel-body,.timeline .moment .panel .panel-body{
    border-top:1px solid #eee
}

.timeline .moment .panel .panel-body, .timeline .moment .panel .panel-body p {
    font-size: 15px;
}

.timeline .moment .list-group.components .panel-body p:not(:last-child),.timeline .moment .panel .panel-body p:not(:last-child){
    margin-bottom:10px
}

.incident {
    background-color: #FFFFFF;
    border-color: #e5e5e5;
}
.status-icon {
    background-color: #FFFFFF;
    border-color: #e5e5e5;
}
.panel.panel-message:before {
    border-left-color: #e8e8e8 !important;
    border-right-color: #e8e8e8 !important;
}
.panel.panel-message:after {
    border-left-color: #FFFFFF !important;
    border-right-color: #FFFFFF !important;
}

.panel-body{
    padding:15px
}
.panel-body:after,.panel-body:before{
    content:" ";
    display:table
}
.panel-heading{
    padding:10px 15px;
    border-bottom:1px solid transparent;
    border-top-right-radius:2px;
    border-top-left-radius:2px
}
.panel-title{
    margin-top:0;
    font-size:16px
}
.panel-footer{
    padding:10px 15px;
    background-color:#f5f5f5;
    border-top:1px solid #ddd;
    border-bottom-right-radius:2px;
}

.incident-card {
    margin-bottom: 20px;
    text-align: center;;
}

/* York Overrides */
.u-link, a {
    text-decoration: inherit;
}

.c-breadcrumb {
    font-size: 14px;
}

.c-nav__item--more .c-nav__link, .c-nav__item--more .c-nav__link:hover {
    background-color: unset;
    border-right: 1px solid #5a5a5a;
    border-left: 1px solid #5a5a5a;
}

.c-nav__item {
  font-weight: 100 !important;
}

.c-nav__selected {
    color: #e2e2e2;
    background-color: #0c5a73;
}

.c-breadcrumb {
    margin-bottom: 25px;
}

*, ::after, ::before {
  box-sizing: unset;
}

/* Other */

.ind-banner {
  height: 200px;
  display:flex;
  border-radius: 5px;
  border: 1px transparent;
  margin-bottom: 25px;
}

.its-ind-banner-1, .ind-banner-1 {
    background: url("/status/img/banner.jpg");
    background-position: center;
    background-size: cover;
}

.its-ind-banner-2, .ind-banner-2 {
    background: url("/status/img/banner-2.jpg");
    background-size: cover;
    background-position-y: 30%;
    background-repeat: no-repeat;
}

.its-ind-banner-3, .ind-banner-3 {
    background: url("/status/img/banner-3.jpg");
    background-size: cover;
    background-position-y: 30%;
    background-repeat: no-repeat;
}

.estates-ind-banner-1 {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/status/img/estates-banner.jpg");
  background-position: center;
  background-size: cover;
  background-position-y: 74%;
}

.estates-ind-banner-2 {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/status/img/estates-banner-2.jpg");
  background-size: cover;
  background-position-y: 70%;
  background-repeat: no-repeat;
}

.estates-ind-banner-3 {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/status/img/estates-banner-3.jpg");
  background-size: cover;
  background-position-y: 86%;
  background-repeat: no-repeat;
}

.library-ind-banner-1 {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/status/img/library-banner.jpg");
  background-position: center;
  background-size: cover;
  background-position-y: 67%;
}

.library-ind-banner-2 {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/status/img/library-banner-2.jpg");
  background-size: cover;
  background-position-y: 99%;
  background-repeat: no-repeat;
}

.library-ind-banner-3 {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/status/img/library-banner-3.jpg");
  background-size: cover;
  background-position-y: 24%;
  background-repeat: no-repeat;
}


.service-title {
  text-align: center;
  top: 100px;
  padding: 10px;
  color: #FFF;
  margin:auto;
}

.service-description {
    text-align: center;
    font-style: italic;
    font-size: 14px;
}

.ind-banner-2 .service-title, .ind-banner-3 .service-title {
    background-color: #00000063;
    border-radius: 10px;
}

/* Quick Fix for small bootstarap buttons */

.btn-group-xs > .btn, .btn-xs {
  padding: .25rem .4rem;
  font-size: .875rem;
  line-height: .5;
  border-radius: .2rem;
}

.homepage--card {
  padding: 0px;
  font-size: 14px;
}

.homepage--card-header a {
  text-decoration: none;
  color: #FFF;
}

.homepage--maintenance-card .row {
  margin-top: 5px;
}

.homepage--maintenance-card .time, .homepage--incidents-card .time {
  color: #AAA;
  font-size: 13px !important;
}

.homepage--incidents-card .row {
  margin-top: 5px;
}

.service--list {
    padding-left: 39px;
    margin-top: 5px;
}

.service--list .more, .service--list .more a, .service--list .more a:link {
    font-size: 12px;
    color: #AAA;
    font-weight: bold;
    font-style: italic;
}

.homepage--card hr {
    color: #eee !important;
}

.homepage--card .date--status {
    border-top: 1px #ddd dashed;
    padding-top: 12px;
} 

.service--list li {
    font-size: 12px;
    color: #aaa;
    list-style: square;
    padding-left: 5px;
}

/* Incident Hover Modal */
.incident-hover-modal {
  max-width: 400px;
  min-width: 300px;
  padding: 0px 15px 15px 15px;
}

.incident-hover-modal .fa-exclamation-triangle {
  color: #b71c1c;
}

.incident-hover-modal .fa-clock {
  color: #0d47a1;
}

.incident-hover-modal .date {
  font-weight: bold;
  text-align: center;
  padding: 15px;
}

.incident-hover-modal .api-incidents {
  font-weight: bold;
  padding: 10px;
}

.incident-hover-modal .api-incidents h6  {
    font-size: 12px;
    margin-left: 7px;
    margin-bottom: 2px !important;
    color: #BBB;
}

.incident-hover-modal .api-incidents .api-downtime-banner {
  padding: 10px;
  background-color: #EEE;
  margin-left: 5px;
  margin-bottom: 15px;
  border-radius: 5px;
}

.incident-hover-modal .api-incidents span {
    font-size: 12px;
    text-align: center;
    font-weight: normal;
    font-style: italic;
    display: block;
}

.incident-hover-modal h5  {
  font-size: 14px;
  color: #BBB;
}

.incident-hover-modal .related-incidents  {
  padding: 10px;
}

.global-incident {
  border-radius: 100%;
  text-align: center;
  height: 120px;
  width: 120px;
  display: table;
  overflow: hidden;
  color: #FFF;
  font-weight: bold;
  font-size: 40px !important;
  margin: 0 auto;
}

.global-incident--ok {
  background-color: #28a745;
  border: 2px #28a745 solid;
}

.global-incident--issues {
  background-color: #b71c1c;
  border: 2px #b71c1c solid;
}

.global-incident--maint {
  background-color: #0d47a1;
  border: 2px #0d47a1 solid;
}

.global-incident .text {
  display: table-cell; 
  vertical-align: middle;
}

.global-incident-wrapper .label {
  padding: 10px;
  text-align: center;
  font-weight: bold;
  color: #BBB;
}

/* Incident Streams */

.maintenance-stream-container, .incident-stream-container {
    padding:0px 6px 0px 6px;
    margin-left: 9px;
}

.maintenance-stream-wrap, .incident-stream-wrap {
    padding: 0px;
    font-size: 14px;
}

.mnx-stream, .anx-stream {
    padding: 10px;
    border-bottom: 1px #eee solid;
}

.anx-stream-status-0 {
    border-left: 3px #8bc34a solid;
}

.anx-stream-status-1, .anx-stream-status-2 {
    border-left: 3px #dc3545 solid;
}

.anx-stream-status-4 {
    border-left: 3px #17a2b8 solid;
}

.mnx-stream-status-0 {
    border-left: 3px #17a2b8 solid;
}

.mnx-stream-status-1 {
    border-left: 3px #ffc107 solid;
}

.mnx-stream-status-2 {
    border-left: 3px #8bc34a solid;
}

.mnx-stream:last-child, .anx-stream:last-child {
    border-bottom: unset;
}

.mnx-stream a:hover, .anx-stream a:hover {
    text-decoration: none;
}

.mnx-stream .text, .anx-stream .text {
    color: #BBB;
}



.service-info-data {
    min-height: 110px;
}

.service-info-data span {
    margin-top: 15px;
}

/* 30 Day Snapshot */

.service-timeline-wrap {
    direction: rtl;
}

.service-timeline {
    height: 70px;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    justify-content: space-between;
}

.service-timeline .day {
    width: 8px;
    height: 30px;
    background-color: #43a047;
    margin: 0px 3px 0px 3px;
    flex: 0 0 auto;
    cursor:pointer;
}

.service-timeline .day:hover {
    background-color: #1b5e20;
}

.service-timeline .active-anx {
  background-color: #f44336;
  height: 40px;
  width: 8px;
  margin-top: 10px !important;
}
.service-timeline .active-anx:hover {
  background-color: #b71c1c;
}

.service-timeline .active-both {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f44336+0,f44336+50,2196f3+51,2196f3+100 */
  background: #f44336; /* Old browsers */
  background: -moz-linear-gradient(top,  #f44336 0%, #f44336 50%, #2196f3 51%, #2196f3 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #f44336 0%,#f44336 50%,#2196f3 51%,#2196f3 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #f44336 0%,#f44336 50%,#2196f3 51%,#2196f3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f44336', endColorstr='#2196f3',GradientType=0 ); /* IE6-9 */
  height: 40px;
  width: 8px;
  margin-top: 10px !important;
}

.service-timeline .active-both:hover {
  background: #b71c1c; /* Old browsers */
  background: -moz-linear-gradient(top,  #b71c1c 0%, #b71c1c 50%, #0d47a1 51%, #0d47a1 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #b71c1c 0%,#b71c1c 50%,#0d47a1 51%,#0d47a1 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #b71c1c 0%,#b71c1c 50%,#0d47a1 51%,#0d47a1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b71c1c', endColorstr='#0d47a1',GradientType=0 ); /* IE6-9 */
}

.service-timeline .active-mnx {
  background-color: #2196f3;
  height: 40px;
  width: 8px;
  margin-top: 10px !important;
}

.service-timeline .active-mnx:hover {
  background-color: #0d47a1;
}

.service-timeline .active-incident:hover {
    background-color: #d29f06;
}














.tl {
  width: 100%;
  /* max-width: 800px; */
  background: #fff;
  padding: 50px 50px 15px 50px;
  position: relative;
  /* box-shadow: 0.5rem 0.5rem 2rem 0 rgba(0, 0, 0, 0.2); */
}
.tl:before {
  content: '';
  position: absolute;
  top: 0px;
  left: calc(33% + 15px);
  bottom: 0px;
  width: 4px;
  background: #ddd;
}
.tl:after {
  content: "";
  display: table;
  clear: both;
}
.entry {
  clear: both;
  text-align: left;
  position: relative;
}
.entry .title {
  margin-bottom: 0.5em;
  float: left;
  width: 33%;
  padding-right: 30px;
  text-align: right;
  position: relative;
}
.entry .title:before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #fff;
  border-radius: 100%;
  top: 15%;
  right: -8px;
  z-index: 99;
}

.entry .start:before {
  border: 4px solid salmon;
}

.entry .end:before {
  border: 4px solid green;
}

.entry .title h3 {
  margin: 0;
  font-size: 120%;
}
.entry .title p {
  margin: 0;
  font-size: 100%;
}
.entry .body {
  margin-bottom: 20px;
  float: right;
  width: 66%;
  padding-left: 25px;
  padding-top: 2px;
}
.entry .body p {
  line-height: 1.4em;
}
.entry .body p:first-child {
  margin-top: 0;
  font-weight: 400;
}
.entry .body ul {
  color: #aaa;
  padding-left: 0;
  list-style-type: none;
}
.entry .body ul li:before {
  content: "–";
  margin-right: 0.5em;
}

.slack-promo, .google-promo, .microsoft-promo {
  font-size: 15px;
  text-align: center;
}
