/*
Replace "x" with the number of days you want to show + 2.
For example, if you wanted to show the last 3 days of history, you would replace x with 5.
Do the replacements described above and then paste the following into your Custom CSS section.
*/

.status-day:nth-child(n+1) { display:none; }
.history-footer-link

body {
  font-family: Arial, Helvetica, sans-serif;
}

#custom-header {
  height: 160px;
  margin-left: auto;
  margin-right: auto;
  padding: 60px 0 0;
  background-color:#F0F2F2;
}

#custom-header .header-logo {
  width: 136px;
  margin: 0 auto;
}

#custom-header .logo {
  max-width:136px;
  display:inline-block;
}

#custom-header .links {
  float: right;
  text-align: right;
  width: 70%;
  margin-top: 7px;
}

#custom-header .links a {
  margin-left: 30px;
  font-size: 14px;
  color:#0650D0;
}

#custom-header .links a:hover {
  text-decoration: underline;
}

.container { 
  margin-top: -20px;
}

#custom-footer {
  padding:30px 40px 35px;
  color:#787A7A; 
  font-size:13px;
  background-color:#F0F2F2;
  border-top: 1px solid #DADEDE;
}

#custom-footer .logo {
  max-width:100px;
  display:inline-block;
}

#custom-footer > div {
  position:relative;
  top:2px;
}

#custom-footer .meta {
  float:right;
  color:#888;
}

#custom-footer .links {
  float:right;
  margin-left:30px;
}

#custom-footer .links a {
  color:#787A7A;
  display:inline-block;
  margin-left:20px;
}

#custom-footer .links a:hover {
  color:#272727;
  text-decoration: underline;
}

#custom-footer .links a:first-of-type {
  margin-left:0px;
}

@media screen and (max-width: 880px) {
  #custom-footer {
    overflow:hidden;
  }
  
  #custom-footer > div {
    top:0px;
    color:#888;
  }
  
  #custom-footer .links {
    margin-left:0px;
  }
  
  #custom-footer .meta {
    float:left;
    color:#888;
  }
  
  #custom-footer .logo {
    display:none;
  }
}

@media screen and (max-width: 600px) {
  #custom-footer {
    text-align:center;
    font-size:13px;
    line-height:20px;
    color:#888;
  }
  
  #custom-footer .meta, #custom-footer .links {
    float:none;
    color:#888;
  }
  
  #custom-footer .links {
    margin-bottom:5px;
  }
}

.incidents-list {
  display:none;
}
.updates-dropdown-container {
    display: none;
}
.layout-content.status .masthead-container.basic .masthead .logo-container {
    float: none !important;
    margin: auto;
}
	
/* update default state of subscribe and expand button */
	.layout-content.status.status-index .unresolved-incidents .unresolved-incident .incident-title .subscribe, .layout-content.status.status-full-history .months-container .expand-incidents  {
	  color: #0650D0;
	  padding: 0px 10px 0px 10px;
	  background-color: #FFFFFF;
	  border: 2px solid #0650D0;
	  border-radius: 2px;
	}
	
	/* update hover state of subscribe to incident button */
	.layout-content.status.status-index .unresolved-incidents .unresolved-incident .incident-title .subscribe:hover, .layout-content.status.status-full-history .months-container .expand-incidents:hover {
	  color: #FFFFFF;
	  padding: 0px 10px 0px 10px;
	  background-color: #0650D0;
	  border: 2px solid #0650D0;
	  border-radius: 2px;
}

/* Update on top nav links and background */

@font-face{
  font-family:'Apax-Regular';
  src: url('https://www.exact.com/media/templates/site/pwttemplate/fonts/Apax-Regular.woff2');
}

@font-face{
  font-family:'Apax-Medium';
  src: url('https://start.exactonline.nl/content/styles/ExactHouse/fonts/Apax-Medium.woff2');
}

div.layout-content.status{
  background-color:#e9e9e8;
}

div.container{
		  background-color: #ffffff;
}

div.container div.component-container.border-color{
  border-color: #D3D2D1 !important;
}

.layout-content.status.status-index .components-section .components-container.three-columns .component-container:first-child,
.layout-content.status.status-index .components-section .components-container.three-columns .component-container:nth-child(3),
.layout-content.status.status-index .components-section .components-container.three-columns .component-container:nth-last-child(3):nth-child(3n+1),
.layout-content.status.status-index .components-section .components-container.three-columns .component-container:nth-last-child(1):nth-child(3n+3){
			    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    -o-border-radius: 0px;
    -ms-border-radius: 0px;
}

.layout-content.status.status-index .components-section .components-container.three-columns .component-container:first-child{
  border-radius: 8px 0px 0px 0px;
}

.layout-content.status.status-index .components-section .components-container.three-columns .component-container:nth-child(3){
			    border-radius: 0px 8px 0px 0px;
    -moz-border-radius: 0px 8px 0px 0px;
    -webkit-border-radius: 0px 8px 0px 0px;
    -o-border-radius: 0px 8px 0px 0px;
    -ms-border-radius: 0px 8px 0px 0px;
}

.layout-content.status.status-index .components-section .components-container{
 border-radius: 8px 8px 0px 0px; 
}

#navContainer{
  background-color: #fff;
  border-bottom: 4px solid #ebe5de;
  min-height: 60px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

#navContainer .topNavigation{
	  display: flex;
  flex-wrap: nowrap;
}

#navContainer .topNavigation li{
  display: inline-block;
  float: left;
}

#navContainer .topNavigation li.logo{
  height: 100%;
  border-right: 1px solid #DADEDE;
  box-shadow: 0px 4px 0px 0px #E1141D;
}

#navContainer .topNavigation li.logo a{
  float:left;
  padding: 22px 16px;
  margin: 0px;
  line-height: 0px; 
}


#navContainer .topNavigation li.logo img{	  
  width: 57px;
  height: 12px;
  padding: 0px;
  margin: 0px;
  display: inline;
}

#navContainer .topNavigation li.status{
  height: 100%;
  border-right: 1px solid #DADEDE;  
  box-shadow: 0px 4px 0px 0px #8200DF;
}

#navContainer .topNavigation li.status a{
  float:left;
  padding: 17px 25px 15px;
  margin: 0px;
}

#navContainer .topNavigation li.status a span{
  font-family: Apax-Medium, Arial, sans-serif;  
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #333;
}

#navContainer .topNavigation li.links a span{
  font-family: Apax-Regular, Arial, sans-serif;  
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #333;
}

#navContainer .topNavigation li.links a{  
  float:left;
  padding: 17px 12px 15px 12px;
  margin: 0px;
}

#header-title{
  width: 100%;
  height: 60px;
  background-color: #fff;
  text-align: left;
  box-sizing: unset;
}

#header-title span.title{
  width: 100%;
  float: left;
  font-family: Apax-Regular, Arial, sans-serif;  
  font-weight: 400;
  font-size: 22px;
  line-height: 32px;
  color: #333;  
  margin: 0px;
  padding: 16px 16px;
  box-sizing: border-box;
}

/* box styling */
.layout-content.status.status-index .components-section .component-container{
  padding: 20px 12px 0px 16px;
  height: 64px;
}

.layout-content.status.status-index .components-section .component-container .name{
 	 text-overflow: unset;
  white-space: normal;
  line-height: 16px;
  overflow: unset;
}

.layout-content.status.status-index div.container{
  background-color: #e9e9e8;
}

.layout-content.status.status-index .components-section{
  background-color: #ffffff;
  border-radius: 8px 8px 8px 8px;
}

.layout-content.status.status-index .components-section .component-statuses-legend{
   margin-top: 0px;
  padding: 16px 0px;
  border: 1px solid #D3D2D1;
  border-top-width: 0px;
  border-radius: 0px 0px 8px 8px;
}

 .layout-content.status.status-index .unresolved-incident.impact-minor .incident-title, .layout-content.status.status-index .unresolved-incident.impact-minor .updates, .layout-content.status.status-index .unresolved-incident.impact-major .incident-title, .layout-content.status.status-index .unresolved-incident.impact-major .updates, .layout-content.status.status-index .unresolved-incident.impact-critical .incident-title, .layout-content.status.status-index .unresolved-incident.impact-critical .updates, .layout-content.status.status-index .unresolved-incident.impact-maintenance .incident-title,.layout-content.status.status-index .unresolved-incident.impact-maintenance .updates{
   background-color: #ffffff;
 }

.layout-content.status.status-index .unresolved-incident .incident-title{  
  border-radius: 8px 8px 0px 0px;
  border: 1px solid #D3D2D1;
  text-shadow: none;
}


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


.layout-content.status.status-index .unresolved-incident .incident-title:hover{  
  background-color: #e9e9e8;
  color: #0650d0;
}

.layout-content.status.status-index .unresolved-incident.impact-minor .updates,.layout-content.status.status-index .unresolved-incident.impact-major .updates,.layout-content.status.status-index .unresolved-incident.impact-critical .updates {
  border-color: #D3D2D1;
  border-radius: 0px 0px 8px 8px;
  color: #333333;
}

.layout-content.status.status-index .unresolved-incidents .unresolved-incident .incident-title a:hover{
  color: unset;
}

.layout-content.status.status-index .unresolved-incident.impact-minor{
  color: #DBAE29; 
}

.layout-content.status.status-index .unresolved-incident.impact-minor .incident-title a{
  color: unset; 
}

.layout-content.status.status-index .unresolved-incident.impact-major{
   color: #E4852C;
 }

.layout-content.status.status-index .unresolved-incident.impact-major .incident-title a{
   color: unset;
 }

.layout-content.status.status-index .unresolved-incident.impact-critical{
   color: #E1141D;
 }

.layout-content.status.status-index .unresolved-incident.impact-critical .incident-title a{
   color: unset;
 }

.layout-content.status.status-index .unresolved-incidents .unresolved-incident .incident-title .subscribe{
  border-radius: 4px; 
}

/* Scheduled maintenance customization Start */
.layout-content.status.status-index .scheduled-maintenances-container h2{
  text-align: center;
}

.layout-content.status.status-index .scheduled-maintenances-container .scheduled-maintenance{
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #D3D2D1;
  padding: 20px;
}

.layout-content.status.status-index .unresolved-incident.impact-maintenance div.updates{
  border-radius: 0px 0px 8px 8px;
  border: 1px solid #D3D2D1;
  border-top-width: 0px;
}

.layout-content.status.status-index .unresolved-incident.impact-maintenance .incident-title a{
   color: unset;
 }

.layout-content.status.status-index .scheduled-maintenances-container .scheduled-maintenance h3.incident-title{
  font-size: 1.25rem;
}

/* Scheduled maintenance customization End */

/* History Page customizations Start */
body.history div.container h4{
  display: none;
}

div.layout-content.status-full-history div.container{
  padding: 8px;  
  border: 1px solid #D3D2D1;
  border-radius: 4px;
}

div.history-backpage div.months-container div.month h4{
	  text-align: center;
	  font-size: 18px;
	  line-height: 18px;
  	margin-bottom: 0px !important;
  display: block;
}

div.history-backpage div.month-content div.incident-history div.expand-incidents{ 
   text-align: right !important;
   border: none !important;
   font-size: 12px;
}

div.month-content .incident-history div.incident-data.incident-container{
  /*display: flex;*/
  border-bottom: 1px solid #ccc;
  margin-bottom: 0px !important;
  padding: 0px 16px;
}

div.month-content .incident-history div.incident-list span.small{
  padding: 0px 16px;
  font-size: 12px;
  line-height: 20px;
}

div.layout-content.status-full-history div.history-backpage div.history-header{
	  text-align: center;
}

div.layout-content.status.status-full-history div.history-backpage div.pagination-container{
	  float: unset;
  font-size: 14px;
}

div.layout-content.status.status-full-history div.history-backpage div.pagination-container .pagination a.border-color{
  border-color: #0650d0;
  color: #0650d0;
}

div.layout-content.status.status-full-history div.history-backpage div.pagination-container .pagination a.border-color:hover{
  background-color: #0650d0;
  color: #ffffff;
}

div.layout-content.status.status-full-history div.history-backpage div.pagination-container .pagination a.border-color.disabled{
  border-color: #E0E0E0;
  color: #0650d0;
}

.layout-content.status.status-full-history .history-header .left-arrow:before,.layout-content.status.status-full-history .history-header .right-arrow:before{
  color: unset;
}

div.month-content .incident-history div.incident-data.incident-container:hover {
    background: #f8f5f3;
    box-shadow: inset 2px 0 0 0 #64625f;
}

div.month-content .incident-history div.incident-data.incident-container a.incident-title{
  color: #211f1a;
  display: inline-block; 
  width: 65%;
  overflow: hidden;
  height: 25px;
  padding: 6px 0px;
  font-size: 14px;
  line-height: 20px;
}

div.month-content .incident-history div.incident-data.incident-container a.incident-title:hover{
  color: #0650d0; 
}


div.month-content .incident-history .message.incident-body{
  display: none;
}

div.month-content .incident-history div.secondary{
  display: inline;
  float: right;
  font-size: 14px;
  line-height: 30px;
  max-width: 35%;
  overflow: hidden;
}

/* History Page customizations End */

/* Incident indiviual Status customization Start */

div.layout-content.status.status-incident{
 	height: 100%; 
}

div.layout-content.status.status-incident div.container{
  padding: 16px;
  border: 1px solid #D3D2D1;
  border-radius: 4px;
}

div.layout-content.status.status-incident div.container div.page-title h1{
  font-family: "Apax Medium", Arial, sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 24px;
  text-align: left;
}

div.layout-content.status.status-incident div.container div.page-title div.subheader{
  font-family: "Apax-Regular", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  color: #333333;
}

div.layout-content.status.status-incident div.container div.page-title{
  text-align: left;
}

div.layout-content.status.status-incident div.container div.page-title div.subheader span{
  font-weight: 700;
}

div.layout-content.status.status-incident div.container div.incident-updates-container div.components-affected{
  display: none;
}


div.layout-content.status.status-incident div.incident-updates-container div.row.update-row div.update-container div.update-body span{
  line-height: 20px;
  font-weight: 400;
  
}  

html{
 height: 100%; 
 background-color: #e9e9e8;
}

body{
  background-color: #e9e9e8;  
  /*height: 100vh; 
  min-height: 100%;*/
}


@media screen and (max-width: 650px) {
    .layout-content.status.status-incident .page-title .subheader:not(.scheduled-for) {
        display: block;
    }
}
/* Incident indiviual Status customization End */

/*Privacy Text customization Start */
.container div.privacy-policy{
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #D3D2D1 ;
  padding: 20px 20px;
  margin-bottom: 70px;
}

.container div.privacy-policy a:hover{
 	  text-decoration: underline; 
}
/*Privacy Text customization End */