@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');


body {
  font-family: 'Gilroy', 'Roboto', Arial, sans-serif;
}

.container {
  /* PAGE OVERRIDE TO HIDE WHILST LIVE  
   display:none !important ;*/
}

h4 { 
  font-size : 60px !important; 
  font-weight: 700  !important; 
  margin-bottom: 30px   !important; 
  line-height: 60px   !important; 
}


.masthead { 
  padding-top: 10px !important; 
  margin-bottom:10px !important; 
}

#show-updates-dropdown, .incidents-list, .component-status, .page-footer, .subscribe, .subscribe-button, .pull-right, small { 
  display:none !important ;
}

.legend-item { 
 font-weight:500 !important; 
}

.component-container {  
  background-color: #F8F8F8; 
  margin-bottom:10px; 
  padding-top: 22px !important;
  padding-bottom: 22px !important;
}


.child-components-container {
  padding-left: 40px !important;  
}

.component-inner-container {
 padding-top: 2px !important; 
 padding-bottom: 6px !important; 
}

.text-section {
  margin-bottom:30px !important;
}

.text-section p {
  font-size: 16px ;
	  line-height: 19px;
}

.name {
  font-size:22px   !important;  
		  font-weight:600  !important;
}


span.status { 
  color:#424242 !important; 
  font-size:15px  !important; 
}

.page-status { 
  background-color: #a1c5a5 !important; 
  border: 1px #a1c5a5 solid  !important; 
  padding-top:20px  !important; 
  padding-bottom:15px  !important; 
  margin-bottom:30px  !important; 
}

.icon-indicator { 
  font-size: 25px !important; 
  display: inline-block !important; 
  vertical-align: middle  !important;  
}

.component-statuses-legend {
  display:block !important;
}

.incident-title {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.updates {
  padding-top:0px  !important;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius : 10px;
}

.incident-title, .font-largest {
  padding-top:20px !important;
}

.impact-critical .updates, 
.impact-major .updates, 
.impact-minor .updates,
.impact-none .updates {
  padding-bottom:26px !important;
}

.incident-title a {
  font-size: 16px !important;
  font-weight: 700;
  color:#424242 !important;
}

.impact-critical .incident-title, .impact-critical .updates {
  background-color: #FDEBE6 !important;
  border: 0px solid #ffffff !important;
}

.impact-major .incident-title, .impact-major .updates {
  background-color: #FFF5E5 !important;
  border: 0px solid #ffffff !important;
}


.impact-minor .incident-title, .impact-minor .updates {
  background-color: #FFFDE5 !important;
  border: 0px solid #ffffff !important;
}

.impact-none .incident-title, .impact-none .updates {
  background-color: #F8F8F8 !important;
  border: 0px solid #ffffff !important;
}



.impact-maintenance .incident-title, .impact-maintenance .updates {
  background-color: #E5F7FF !important;
  border: 0px solid #ffffff !important;
}

.scheduled-maintenance-container { 
margin:0px !important;  
}

.scheduled-maintenance { 
  margin-bottom:10px; 
  padding: 5px 20px 22px 20px !important;
  border-radius: 10px !important;
  background-color: #E5F7FF !important;
  border: 0px solid #ffffff !important;
}

.scheduled-maintenance .border-color { 
  background-color: #E5F7FF !important;
  border: 0px solid #ffffff !important;
}

.component-statuses-legend {
  margin: 0px 0px 26px 0px !important;  
  padding-bottom:15px;
  border-bottom: 1px solid #E0E0E0; 
}

@media only screen and (max-width: 600px) {
  .name {
    font-size:16px   !important; 
    max-width: 90% !important;
  }
    
  .component-container {  
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  
  .no-mobile, .top-circle { 
    display:none !important; 
  }
  
  .masthead {  
    height: 120px !important
  }
  
  .child-components-container {
    padding-left: 20px !important;  
  }
  
  .page-status {
    text-align:center !important;
  
}
  
h2.font-large {
  color:#2ecc71 !imporant;
}