/*Mobile column css*/
@media (max-width: 792px){
  div.components-section {
    display:block!important;
  } 
}

/*Header-link css inline and space*/
#header-link{
  display:inline;
}
#header-link:first-child{
  padding-right: 20px
}

/* sub title stylings */
div.child-components-container div.component-inner-container span.name{
  font-size: 14px;
}


/*Wrap css for incident title */
.layout-content.status.status-index .unresolved-incidents .unresolved-incident .incident-title .actual-title.with-ellipsis{
  overflow:visible;
  white-space:inherit;
}


/*newComponentsContainer styling to get 2 column layout*/
div.newComponentsContainer{
  min-width:45%;
  display: block;
  vertical-align: top;
}
div.components-section{
  display:flex;
  justify-content: space-between;
  
}
div.newComponentsContainer div.component-container{
  border: 2px solid;
  border-bottom: 0px;
}
div.newComponentsContainer div.component-container:last-child {
  border-bottom: 2px solid;
}
div.components-section div.newComponentsContainer div.component-container {
  padding: 1.4rem 1.25rem 1.3rem!important;
}

/*Removal of the tooltip on the layout (operational)*/
div.newComponentsContainer div.component-container span.component-status{
  display:none;
}

/* Past Incident Stylings*/

/*Past incident styling END*/

/*Footer Styling*/

div#custom-footer div.footer-container{
	  display: flex;
  justify-content: center;
}

div#custom-footer{
  font-size: 24px;
  line-height: 32px;
  background-color: #f6f6f6;
  padding: 2em 0 2em 0;
    
}
div#footer-text{
  padding-bottom: 1em;
}

div.layout-content{
  padding-bottom: 0!important;
}

div#footer-link a{
  border: 1px solid rgba(61,154,99,1);
  border-radius: 4px;
  color: rgba(61,154,99,1);
  cursor: pointer;
  font-size: 24px;
  line-height 24px;
  margin: 0;
  padding: 10px 20px;
  text-align: center;
  transition: 0.2s;
}
div#footer-link a:hover{
  color: #fff;
  background-color: rgba(61,154,99,1);
  transition: 0.2s
}

/*Footer Sytling END*/

/*Header Styling*/

div#custom-header{
  box-shadow: 0px 0px 10px #aaa;
  display:flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 15px;
}
div#header-image{
  max-width: 300px;
  height: auto;
}

/*Header Styling END*/

/*Hide incident history footer link*/
.history-footer-link { display:none; }
.no-incidents{display:none;}

/* Component status ordering */
.component-inner-container{
  display: flex;
  width: 100%;
}
span.name{
  order: 2;
  width: 100%;
  max-width: unset!important;
  padding-left: 20px;
}
.icon-indicator.fa {
  order: 1;
}
span.fa.group-parent-indicator.color-secondary.font-small.fa-plus-square-o,
span.fa.group-parent-indicator.color-secondary.font-small.fa-minus-square-o{
  float: right;
  margin-left: 1em;
}


/* Change Icon size*/
span.icon-indicator.fa::before{
font-size:26px!important;
}
.layout-content.status.status-index .components-section .component-container .icon-indicator{
  top:0;
}
.status-orange .icon-indicator{
  color: #FF9800;
}
.status-red .icon-indicator{
  color: #F44336;
}

/* Stylings for the different levels of problem*/

 .layout-content.status.status-index .incident-title
{
  border-radius: 10px 10px 0px 0px;
  background-color: unset!important;
  border:2px solid;
  border-bottom:unset;
}
/*Past incidents exception for above css item*/
.layout-content.status.status-index div.status-day .incident-title{
  border: unset!important;
}
.layout-content.status.status-index .incident-title a{
  color: #333!important;
  text-shadow: none!important;
}
div.layout-content.status.status-index div.incident-title a.subscribe{
  color: #1E88E5!important;
}
div.layout-content.status.status-index div.updates{
  border-radius: 0px 0px 10px 10px;
  border:2px solid!important;
  border-top:none!important;
}

/*Minor outage color*/
div.layout-content.status.status-index div.impact-minor .incident-title{
  border-color: #f1c40f!important;
}
.layout-content.status.status-index div.impact-minor .updates{
  border-color: #f1c40f!important;
} 
/*Major outage color*/
div.layout-content.status.status-index div.impact-major .incident-title{
  border-color: #F44336!important;
}
.layout-content.status.status-index div.impact-major .updates{
  border-color: #F44336!important;
}

/* Critical Outage Color */
div.layout-content.status.status-index div.impact-critical .incident-title{
  border-color: #F44336!important;
}
.layout-content.status.status-index div.impact-critical .updates{
  border-color: #F44336!important;
}

/*Component status border color*/
body.status .layout-content.status .border-color{
  border-color: #e4e4e4;
}

/*Header Styling*/
div#custom-header {
  box-shadow: 0px 0px 10px #aaa;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 15px;
}

div#header-image {
  max-width: 300px;
  height: auto;
}

div#header-link {
  display: inline; /* Ensures links are displayed inline */
}

div#header-link:first-child a {
  margin-right: 30px; /* Adjust the margin to space out the links */
}

div#header-link:last-child a {
  margin-left: 10px; /* Adjust the margin to space out the links */
}
/*Header Styling END*/