/*FONTS*/


/* import Titillium Web */

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');


/* import open sans */

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

body {
	    font-family: 'Open Sans' !important;
}


@font-face {
  font-family: "Titillium Web", serif;
  font-weight: 400;
  font-style: normal;
}





.updates-dropdown-container .show-updates-dropdown:after{
		  font-weight: bold;
}

.font-largest{
  color: #026B95 !important;
  font-family: "titillium web";
  font-weight: 600;
}

/*END FONTS*/











/*HANDLE BANNER, TOP BORDER, MASTHEAD ETC */

.layout-content.status .masthead-container.basic{
  max-width: 100%;
  width: 100%;
  margin: 0;
  box-shadow: 0px 5px 15px #E0E0E0;
  background-color: #FAFBFF;
}

.layout-content.status .masthead-container.basic .masthead{
  padding-top: 0px;
  padding-bottom: 0px;
}


.layout-content.status .masthead-container .masthead{
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 100px;
}


.layout-content.status .masthead-container.basic .masthead .logo-container img{
  max-height: 55px;
}



/* THE FOLLOWING TWO SELECTORS WILL BE UPDATED UNIQUELY BY EACH TEAM */

.layout-content.status .masthead-container.basic .masthead .logo-container:before{
  display:block;
  color: #026B95;
  width:65px;
  height: 32px;
  font-weight: bold;
  font-size: 25px;
  visibility: visible;
  position: relative;
  left: 265px;
  top: 43px;
  content: "|";
  /* use the background properties for product image */
  background-repeat: no-repeat;
  background-position: right;
  background-image:url("https://ic9ucqcw9qw5hw8n.idap.co/images/certificate_manager.png");
}

.layout-content.status .masthead-container.basic .masthead .logo-container:after{
  content: 'Certificate Management Status'; /* update your product page title here */
  display:block;
  width:1000px;
  height: 32px;
  visibility: visible;
  font-size: 22px;
  position: relative;
  /* position left 300 for no product image, 343 for product image*/
  left: 343px;
  bottom: 40px;
  color: #026B95;
  font-family: "Titillium Web";
  font-weight: 600;
}





/* move subscribe button if needed 
.flat-button, .layout-content.status .masthead-container .updates-dropdown-container .show-updates-dropdown{
  bottom: 0px;
}
*/




/*END BANNER / BORDER / MASTHEAD / ETC */













/* center page status title */

.layout-content.status.status-index .page-status
{
  text-align: center;
}






/*create border for schedule maintenance*/
.scheduled-maintenance {
    border: 1px ;
  	  			border-style: ridge;
    border-radius: 5px;
 						   padding: 5px;
    border-color: #E0E0E0;
}










/* format containers without graph enabled */

.shared-partial.uptime-90-days-wrapper svg {
  display: none;
}

.shared-partial.uptime-90-days-wrapper {
  padding-top: 15px
}

.layout-content.status .shared-partial.uptime-90-days-wrapper .legend .legend-item.light, .layout-content.status .shared-partial.uptime-90-days-wrapper .legend .spacer {
  display: none;
}

.layout-content.status .shared-partial.uptime-90-days-wrapper .legend .legend-item {
  position: relative;
}


.shared-partial.uptime-90-days-wrapper .legend {
    float: left;
    top: -15px;
}


.layout-content.status.status-index .components-section .component-container .component-status {
  position: relative;
  top: 7px;
}


.layout-content.status.status-index .components-section .component-container .name
{
  font-weight: bold;
}








/* removes the text referencing 90 day history */
.layout-content.status.status-index .components-section .components-uptime-link {
  visibility: hidden;
}


body > div.layout-content.status.status-index.starter > div.container > div.components-section.font-regular > div.components-uptime-link.history-footer-link > a {
  visibility: visible;
}

body > div.layout-content.status.status-index.premium > div.container > div.components-section.font-regular > div.components-uptime-link.history-footer-link > a {
  visibility: visible;
}





/* fix awkwardness with child components title alignment */

.layout-content.status.status-index .components-section .component-container .child-components-container .component-inner-container .name {
 position: relative;
  text-align: left;
}

.layout-content.status.status-index .components-section .component-container .child-components-container .component-inner-container.showcased {
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
}






/* FORMAT COMPONENT STATUS TEXT ELEMENTS */

.components-container .component-inner-container.status-yellow .component-status {
  right: 30px;
  color: #333333;
}

.components-container .component-inner-container.status-red .component-status {
  color: #333333;
  right: 30px;
}

.components-container .component-inner-container.status-green .component-status {
  color: #333333;
    right: 30px;
}

.components-container .component-inner-container.status-blue .component-status {
  color: #333333;
  right: 30px;
}

.components-container .component-inner-container.status-orange .component-status {
  color: #333333;
  right: 30px;
}

/* degraded performance (yellow) */
.components-container .component-inner-container.status-yellow .component-status:after {
  content: "";
  display:block;
  height:24px;
  width:24px;
  background-image:url("https://ic9ucqcw9qw5hw8n.idap.co/images/not-started.png");
  visibility: visible;
  font-size: 25px;
  position: absolute;
  right: -35px;
  top: 0px;
} 

/* major outage (red) */
.components-container .component-inner-container.status-red .component-status:after {
  content: "";
  display:block;
  height:24px; /*adjust as needed*/
  width:24px;
  background-image:url("https://ic9ucqcw9qw5hw8n.idap.co/images/failure.png");
  visibility: visible;
  font-size: 25px;
  position: absolute;
  background-position: center;
  float: right;
  right: -35px;
  top: 0px;
}


/* operational (green) */
.components-container .component-inner-container.status-green .component-status:after {
  content: "";
  display:block;
  height:24px;
  width:24px;
  background-image:url("https://ic9ucqcw9qw5hw8n.idap.co/images/success.png");
  visibility: visible;
  position: absolute;
  right: -35px;
  top: 0px;
}


/* under maintenance (blue) */
.components-container .component-inner-container.status-blue .component-status:After {
  content: "";
  display:block;
  height:24px; /*adjust as needed*/
  width:24px;
  background-image:url("https://ic9ucqcw9qw5hw8n.idap.co/images/processing.png");
  visibility: visible;
  font-size: 25px;
  position: absolute;
  background-position: center;
  float: right;
  right: -35px;
  top: 0px;
}


/* partial outage (orange) */
.components-container .component-inner-container.status-orange .component-status:after {
  content: "";
  display:block;
  height:24px; /*adjust as needed*/
  width:24px;
  background-image:url("https://ic9ucqcw9qw5hw8n.idap.co/images/warning.png");
  visibility: visible;
  font-size: 25px;
  position: absolute;
  background-position: center;
  float: right;
  right: -35px;
  top: 0px;
}




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













/* MEDIA / MOBILE SECTION */

  /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation:portrait)  { 
  

  .layout-content.status .masthead-container.basic .masthead .logo-container{
     visibility: hidden;
  }

  
  
  .layout-content.status .masthead-container.basic .masthead .logo-container:before{
    visibility: visible;
  display:block;
    margin: auto;
  color: #026B95;
  width:100%;
  height: 32px;
  font-weight: bold;
  font-size: 25px;
  font-family: "Titillium Web";
  visibility: visible;
  position: absolute;
  left: 0%;
  top: 43px;
  content: "Certificate Management Status";
  /* use the background properties for product image */
  background-repeat: no-repeat;
  background-position: left;
  background-image:none;
}
  
  .layout-content.status .masthead-container.basic .masthead .logo-container:after{
    display: none;
  }
  
  
  .layout-content.status .masthead-container.basic{
  box-shadow: none;
}
  
  .flat-button, .layout-content.status .masthead-container .updates-dropdown-container .show-updates-dropdown{
  top: 25px;
}
  
  
  
  
  
  
  
  
  .layout-content.status.status-index .components-section .component-container {
    padding-right: 1.20rem;
    padding-left: 1.1rem;
    padding-bottom: 1.20rem;
  }

  
  
.layout-content.status.status-index .components-section .components-container.one-column .component-container .component-status{
     top: 15px;
  }
  





  .components-container .component-inner-container.status-yellow .component-status {
  visibility: hidden;
    padding: 0px;
        font-size: 1px;
    letter-spacing: -9px;
    text-overflow: ellipsis;
}

  .components-container .component-inner-container.status-yellow .component-status::after {
  visibility: visible;
    font-size: 20px;

}


  .components-container .component-inner-container.status-orange .component-status {
  visibility: hidden;
    padding: 0px;
        font-size: 1px;
    letter-spacing: -2px;
}
  
  
  .components-container .component-inner-container.status-orange .component-status:after {
  visibility: visible;
    font-size: 25px;
}
  
    .components-container .component-inner-container.status-blue .component-status {
  visibility: hidden;
    padding: 0px;
    font-size: 1px;
    letter-spacing: -2px;
}
  
  
  .components-container .component-inner-container.status-blue .component-status:after {
  visibility: visible;
    font-size: 17px;
}
  
    .components-container .component-inner-container.status-red .component-status {
  visibility: hidden;
    padding: 0px;
    font-size: 1px;
    letter-spacing: -2px;
}
  
  
  .components-container .component-inner-container.status-red .component-status:after {
  visibility: visible;
    font-size: 21px;
}
  
  
  .components-container .component-inner-container.status-green .component-status {
  visibility: hidden;
    padding: 0px;
    font-size: 1px;
    letter-spacing: -2px;
}
  
  
  .components-container .component-inner-container.status-green .component-status::after {
    font-size: 20px;
    visibility: visible;
}  
  
  
  
  
  
  
.layout-content.status.status-index .components-section .component-container.is-group>.component-inner-container .component-status::after
{
    bottom: 20px;
    position: relative;
  }
  
  
  
  /* old legend
  
    .layout-content.status.status-index .text-section::after {
   content: "🟢 = Operational \a ⚠️ = Degraded Performance \a 🔶 = Partial Outage \a 🛑 = Major Outage \a 🟦 = Under Maintenance \a";
   white-space: pre;
  visibility: visible;
  font-size: 12px;
  position: relative;
    float: left;
    text-align: left;
    padding-top: 20px;
  }
  
  */
  

  
  .layout-content.status.status-index .components-section .component-container .name {
    max-width: 65%;
  }
  
      .layout-content.status.status-index .text-section{
  margin-bottom: 0px;
  }
  
  

}




/* landscape smartphones */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation:landscape) { 

  
  .layout-content.status .masthead-container .masthead {
  margin-bottom: 70px;
}
  
  .layout-content.status .masthead-container.basic{
      padding-bottom:30px;
    }

  .layout-content.status .masthead-container.basic .masthead .logo-container:before{
    visibility: visible;
  display:block;
    margin: auto;
  color: #026B95;
  width:100%;
  height: 32px;
  font-weight: bold;
  font-size: 25px;
  font-family: "Titillium Web";
  visibility: visible;
  position: absolute;
  left: 40px;
  top: 43px;
  content: "Certificate Management Status";
  /* use the background properties for product image */
  background-repeat: no-repeat;
  background-position: left;
  background-image:none;
}
  
  .layout-content.status .masthead-container.basic .masthead .logo-container:after{
    display: none;
  }
  
    .layout-content.status .masthead-container.basic{
  box-shadow: none;
}


    .layout-content.status .masthead-container.basic .masthead .logo-container{
     visibility: hidden;
  }
  
  
    .layout-content.status.status-index .components-section .component-container .name {
    max-width: 60%;
  }
  
  .flat-button, .layout-content.status .masthead-container .updates-dropdown-container .show-updates-dropdown{
  top: 40px;
}
  

}