@font-face {
  font-family: 'Untitled Sans';
  src: url('https://increase.com/fonts/untitled-sans-web-regular.woff2') format('woff2');
  font-weight: 400;
}

@font-face {
  font-family: 'Untitled Sans';
  src: url('https://increase.com/fonts/untitled-sans-web-medium.woff2') format('woff2');
  font-weight: 500;
}

@font-face {
  font-family: 'Untitled Sans';
  src: url('https://increase.com/fonts/untitled-sans-web-bold.woff2') format('woff2');
  font-weight: 700;
}

body {
 font-size: 16px!;
  line-height: 24px;
  font-family: 'Untitled Sans', sans-serif;
  font-weight: 400;
      -webkit-font-smoothing: antialiased;
}


/* Header */

.layout-content.status .masthead-container.basic {
 max-width: 900px;
}
.container {
  max-width: 900px;
}

.layout-content.status .masthead-container.basic .masthead.has-logo {
 padding-top:32px;
  margin-bottom: 64px;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.layout-content.status .masthead-container.basic .masthead.has-logo .clearfix {
display: none;
}

.layout-content.status .masthead-container.basic .masthead .logo-container {
max-width: none;
}

.logo-container {
height: 30px;
}

.logo-container a {
  display: block;
}

.logo-container img,
.logo-container a img{
  max-width:120px;
  display: block;
}

@media (max-width: 450px) {
  .layout-content.status .masthead-container.basic .masthead.has-logo {
  margin-bottom: 32px;
  }
.layout-content.status .masthead-container.basic .masthead {
    text-align: left;
  }
  .logo-container a img {
max-width:120px;
}
}

/* Show status bubble by logo */

.logo-container {
  position: relative;
  padding-right: 60px;
}

.logo-container:before {
content:'Status';
    position:absolute;
  top: 50%;
  right: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  background-color: #DDFF33;
  padding:0 8px;
  border-radius: 20px;
  transform: translateY(-50%);
}

.flat-button, .layout-content.status .masthead-container .updates-dropdown-container .show-updates-dropdown {
  border-radius: 8px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
  padding: 6px 12px;
}


/* Type sizes */

.font-largest {
font-size: 24px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: -.04em;
}
.font-large {
			  font-size: 20px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -.02em;
}

.font-regular {
		  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}
strong {
  font-weight: 500;
  letter-spacing: -.02em;
}

@media (max-width: 450px) {
.font-regular {
		  font-size: 14px;
  line-height: 20px;
}
}

/* Page status operational */
.layout-content.status.status-index .page-status.status-none,
.layout-content.status.status-index .page-status.status-critical,
.layout-content.status.status-index .page-status.status-major,
.layout-content.status.status-index .page-status.status-minor,
.layout-content.status.status-index .page-status.status-maintenance {
  background-color: transparent;
  padding: 0;
  text-shadow: none;
  border: none;
  color: #1D2A36;
  margin-bottom: 12px;
}

.layout-content.status.status-index .unresolved-incidents .unresolved-incident.impact-none .incident-title {
  background-color: transparent;
}

.layout-content.status.status-index .page-status.status-none .font-large,
.layout-content.status.status-index .page-status.status-critical .font-large,
.layout-content.status.status-index .page-status.status-major .font-large,
.layout-content.status.status-index .page-status.status-minor .font-large,
.layout-content.status.status-index .page-status.status-maintenance .font-large {
  color: #1D2A36;
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.04em;
  font-weight: 700;
  position: relative;
  padding-right: 32px;
}

.layout-content.status.status-index .page-status .font-large:before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color: #C0C9D1;
}
.layout-content.status.status-index .page-status .font-large:after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color: #C0C9D1;
  animation: ping 1s cubic-bezier(0,0,.2,1) infinite;
  transform-origin: bottom;
}

/* Status circle - operational */
.layout-content.status.status-index .page-status.status-none .font-large:before,
.layout-content.status.status-index .page-status.status-none .font-large:after {
  background-color: #31F2CC;
}

/* Status circle - critical */
.layout-content.status.status-index .page-status.status-critical .font-large:before,
.layout-content.status.status-index .page-status.status-critical .font-large:after {
  background-color: #FF5F33;
}

/* Status circle - major */
.layout-content.status.status-index .page-status.status-major .font-large:before,
.layout-content.status.status-index .page-status.status-major .font-large:after {
  background-color: #FF5F33;
}

/* Status circle - minor */
.layout-content.status.status-index .page-status.status-minor .font-large:before,
.layout-content.status.status-index .page-status.status-minor .font-large:after {
  background-color: #DAF200;
}

/* Status circle - maintenance */
.layout-content.status.status-index .page-status.status-maintenance .font-large:before,
.layout-content.status.status-index .page-status.status-maintenance .font-large:after {
  background-color: #34BCFF;
}


@media (max-width: 450px) {
  .layout-content.status.status-index .page-status.status-none {
  margin-bottom: 0px;
}

  .layout-content.status.status-index .page-status.status-none .font-large {
  font-size: 36px;
  line-height: 40px;
}

}

/* Operational animation */

@keyframes ping {
75%, 100% {
    transform: scale(2);
    opacity: 0;
}
}


/* Incidents */
.layout-content.status.status-index .unresolved-incidents {
margin-bottom:32px;
}

.layout-content.status.status-index .unresolved-incidents .unresolved-incident .updates,
.layout-content.status.status-index .unresolved-incidents .unresolved-incident.impact-none .updates{
 background-color: #fff;
  border: 1px solid #E9EDF2;
  border-color: #E9EDF2;
  border-radius: 8px;
  box-shadow: 0px 32px 9px 0px rgba(0, 0, 0, 0.00), 0px 20px 8px 0px rgba(0, 0, 0, 0.01), 0px 11px 7px 0px rgba(0, 0, 0, 0.02), 0px 5px 5px 0px rgba(0, 0, 0, 0.03), 0px 1px 3px 0px rgba(0, 0, 0, 0.04)!important;
}

.layout-content.status.status-index .unresolved-incidents .unresolved-incident .incident-title {
 background-color: transparent;
  padding: 20px 0;
  text-shadow: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.layout-content.status.status-index .unresolved-incidents .unresolved-incident .incident-title a {
 color: #1D2A36;
}

.layout-content.status.status-index .unresolved-incidents .unresolved-incident .incident-title a:hover {
  color: #1D2A36;
  opacity: 50%;
}

.layout-content.status.status-index .unresolved-incidents .unresolved-incident .incident-title .actual-title,
.layout-content.status.status-index .unresolved-incidents .unresolved-incident .incident-title .actual-title.with-ellipsis {
  font-weight: 700;
  letter-spacing: -.04em;
  width: auto;
}

.layout-content.status.status-index .unresolved-incidents .unresolved-incident .updates {
 padding: 20px 32px
}

.layout-content.status.status-index .unresolved-incidents .unresolved-incident .updates .update {
 color: #657482;
}

.layout-content.status.status-index .unresolved-incidents .unresolved-incident .updates .update strong {
 color: #1D2A36;
  font-weight: 500;
}

.unresolved-incident .incident-title .actual-title {
  font-size: 40px;
    line-height: 44px;
    letter-spacing: -0.04em;
    font-weight: 700;
    position: relative;
    padding-right: 40px;
}

.unresolved-incident .incident-title .actual-title:before {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color: #C0C9D1;
}
.unresolved-incident .incident-title .actual-title:after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color: #C0C9D1;
  animation: ping 1s cubic-bezier(0,0,.2,1) infinite;
  transform-origin: bottom;
}

/* Incident impact - critical */
.unresolved-incident.impact-critical .incident-title .actual-title:before,
.unresolved-incident.impact-critical .incident-title .actual-title:after {
  background-color: #FF5F33;
}

/* Incident impact - major */
.unresolved-incident.impact-major .incident-title .actual-title:before,
.unresolved-incident.impact-major .incident-title .actual-title:after {
  background-color: #FF5F33;
}

/* Incident impact - minor */
.unresolved-incident.impact-minor .incident-title .actual-title:before,
.unresolved-incident.impact-minor .incident-title .actual-title:after {
  background-color: #DDFF33;
}

/* Incident impact - none */
.unresolved-incident.impact-none .incident-title .actual-title:before,
.unresolved-incident.impact-none .incident-title .actual-title:after {
  background-color: #31F2BF;
}


@media (max-width: 450px) {
  .layout-content.status.status-index .unresolved-incidents {
  margin-bottom:20px;
  }
  .layout-content.status.status-index .unresolved-incidents .unresolved-incident .incident-title {
    padding: 12px 0px;
    flex-direction: column;
    align-items: start;
  }
  .unresolved-incident.impact-minor .incident-title .actual-title {
    padding-left: 0px;
  }
  .layout-content.status.status-index .unresolved-incidents .unresolved-incident .updates {
   padding: 12px 16px
  }
    .unresolved-incident .incident-title .actual-title {
  font-size: 32px;
  line-height: 36px;
    margin-bottom:16px;
}
}



/* Status bar title */
.layout-content.status.status-index .components-section .components-uptime-link {
text-align: left;
  margin-bottom:12px;
  font-size: 16px;
  line-height: 24px;
}


/* Status bars */
.layout-content.status.status-index .components-section .components-container {
  box-shadow: 0px 32px 9px 0px rgba(0, 0, 0, 0.00), 0px 20px 8px 0px rgba(0, 0, 0, 0.01), 0px 11px 7px 0px rgba(0, 0, 0, 0.02), 0px 5px 5px 0px rgba(0, 0, 0, 0.03), 0px 1px 3px 0px rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  border: 1px solid #E9EDF2;
  padding: 20px 0;
}

.status .layout-content.status.status-index .components-section .components-container.one-column .component-container {
      border-left-width: 0px!important;
      border-top-width: 0px;
      border-right-width: 0px;
      border-bottom-width: 0px;
}

.layout-content.status.status-index .components-section .component-container {
 padding: 20px 32px;
}

.layout-content.status .shared-partial.uptime-90-days-wrapper .legend .spacer {
 background: #E9EDF2;
  opacity: 1;
}

.availability-time-line-graphic rect {
  rx: 2px;
}

/* Incident list */
.layout-content.status .incidents-list.format-expanded .status-day,
.layout-content.status.status-full-history .months-container .month .incident-container,
.layout-content.status.status-full-history .months-container .month span.small{
margin: 0;
  padding: 20px 0;
  border-top: 1px solid #E9EDF2;
  display: block;
}

.layout-content.status .incidents-list.format-expanded .status-day .date,
.layout-content.status.status-full-history .months-container .month .month-title {
border: none;
  padding: 0;
  margin-bottom:8px;
}

@media (max-width: 450px) {
  .layout-content.status.status-index .components-section .component-container {
   padding: 16px 16px;
  }
  .layout-content.status.status-index .components-section .components-container {
  padding: 8px 0;
}


}

/* History page */

.history-nav {
  position: relative;
  height: 125px;
}

.layout-content.status.status-full-history .history-nav:after {
   display: none;
}

.layout-content.status.status-full-history .history-nav:before {
  content: "History";
  position: relative;
  display: block;
  font-size: 32px;
  line-height: 36px;
  letter-spacing: -.04em;
  font-weight: 700;
  margin-bottom: 24px;
}

.layout-content.status.status-full-history .history-nav a.current,
.layout-content.status.status-full-history .history-nav a:not(.current) {
  background-color: transparent;
  border-radius: 8px;
  border: none;
  margin-bottom:20px;
  padding: 8px 12px;
  height: 36px;
}
.layout-content.status.status-full-history .history-nav a.current {
				  background-color: #E9EDF2;
  font-weight: 500;
  letter-spacing: -.02em;
}

.layout-content.status.status-full-history .months-container .month .incident-container .incident-title {
color: #1D2A36!important;
}

.incident-title,
.incident-title a {
color: #1D2A36!important;
}

.layout-content.status.status-index .incident-container .updates-container .update {
  margin: 12px 0;
}


/* History page calendar */
.layout-content.status.status-full-history .uptime-calendar .uptime-calendar-display .calendar-month .day rect {
 rx: 4px;
}

.layout-content.status.status-full-history .uptime-calendar .uptime-calendar-display .calendar-month .month-header {
  margin-bottom: 12px;
}


/* History page controls */

.pagination-container .pagination {
  border: 1px solid #EDF1F5;
  border-radius: 8px;
  width: 350px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
}

.pagination-container .pagination .current {
  text-align: center;
}

.layout-content.status.status-full-history .history-header .pagination a, .layout-content.status.status-full-history .uptime-header .pagination a {
   border: none;
}

.control-group .css-164r41r {
  margin-top: 0;
}

.control-group .css-wjj10o-control {
		  background-color: transparent;
  border: 1px solid #EDF1F5;
  border-radius: 8px;
}

.layout-content.status.status-full-history .uptime-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.layout-content.status.status-full-history .uptime-header:before,
.layout-content.status.status-full-history .uptime-header:after {
  display: none;
}

@media (max-width: 650px) {
  .layout-content.status.status-full-history .uptime-header {
    flex-direction: column
  }
  .pagination-container,
  .pagination-container .pagination,
  .component-selector {
    width: 100%;
  }
}


/* Detail page */
.layout-content.status.status-incident .page-title {
	   text-align: left;
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid #EDF1F5;
}

.layout-content.status.status-incident .page-title .incident-name {
color: #1D2A36!important;
  font-size: 32px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: -.04em;

}

// .highcharts-point {
//  fill: rgb(49, 242, 204);
// }

// .highcharts-halo {
//   fill: rgb(49, 242, 204);
// }

.highcharts-line-series { fill: rgb(49, 242, 204); }

.metrics-display-graph .highcharts-series .highcharts-graph {
  stroke: rgb(49, 242, 204) !important;
}

/* --- Highcharts styling to match page --- */

/* Font + general text */
.metrics-display-graph .highcharts-root,
.metrics-display-graph .highcharts-root text {
  font-family: 'Untitled Sans', sans-serif !important;
}

/* Remove chart white box if you want it to feel "embedded" */
.metrics-display-graph .highcharts-background {
  fill: transparent !important;
}

/* Grid + axes to match your #E9EDF2 system */
.metrics-display-graph .highcharts-grid-line,
.metrics-display-graph .highcharts-axis-line,
.metrics-display-graph .highcharts-tick {
  stroke: #E9EDF2 !important;
}

/* Axis label color to match your secondary text */
.metrics-display-graph .highcharts-axis-labels text {
  fill: #657482 !important;
  font-size: 11px;
  font-weight: 400;
}

/* Series color (line + markers + halo) */
.metrics-display-graph .highcharts-series .highcharts-graph {
  stroke: rgb(49, 242, 204) !important;
}

.metrics-display-graph .highcharts-series .highcharts-point {
  fill: rgb(49, 242, 204) !important;
  stroke: #ffffff;
}

.metrics-display-graph .highcharts-series .highcharts-halo {
  fill: rgb(49, 242, 204) !important;
  fill-opacity: 0.25;
}

#ach-submission-timeline {
  margin-top: 2em;
}

.metrics-container {
  box-shadow: 0px 32px 9px 0px rgba(0, 0, 0, 0.00), 0px 20px 8px 0px rgba(0, 0, 0, 0.01), 0px 11px 7px 0px rgba(0, 0, 0, 0.02), 0px 5px 5px 0px rgba(0, 0, 0, 0.03), 0px 1px 3px 0px rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  border: 1px solid #E9EDF2;
  padding: 20px 0;
}

.metric.border-color {
  border-color: transparent !important;
  margin-top: 0 !important;
}