@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
}

.font-largest,
h3 {
    font-weight: 700;
}

strong {
    font-weight: 600;
}

.masthead-container {
    background-color: #2D32AA;
}

.masthead-container .masthead {
    position: relative;
}

.layout-content.status .masthead-container.basic {
    max-width: none;
    width: 100%;
    padding-bottom: 10px;
}
.layout-content.status .masthead-container.basic .masthead {
    padding-top: 10px;
    padding-bottom: 10px;
}

.layout-content.status .masthead-container.basic .masthead .logo-container {
    position: absolute;
    left: 1.5em;
    max-width: 10%;
}

.layout-content.status .masthead-container .updates-dropdown-container {
    float: none;
    position: absolute;
    right: 1.5em;
    margin-top: 1em;
}

.logo-container img {
    height: 24px;
    max-width: none;
}

.masthead.has-logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}

.masthead.has-logo .clearfix {
    display: none;
}

.layout-content.status.status-index .unresolved-incidents {
    position: relative;
    margin-bottom: 0;
}

/* remove text shadown from incident titles, and replace with bold */
.layout-content.status.status-index .unresolved-incidents .unresolved-incident .incident-title {
    text-shadow: none;
    font-weight: 700;
}

/* round incident cards */
.incident-title {
    border-radius: 6px 6px 0px 0px;
}
.layout-content.status.status-index .unresolved-incidents .unresolved-incident .updates {
    border-radius: 0px 0px 6px 6px;
}

/* COMPONENTS (uptime) */
.components-section {
    background-color: #2D32AA;
    padding: 2em 0 4em;
    color: #fff;
    position: relative;
}
.layout-content.status.status-index .container .page-status {
  position: relative;
  box-sizing: border-box;
}
.layout-content.status.status-index .container .page-status::before,
.unresolved-incidents::before,
.components-section::before,
.masthead-container .masthead::before {
    display: block;
    content: " ";
    position: absolute;
    background-color: #2D32AA;
    top: -10px;
    right: -2000px;
    left: -2000px;
    bottom: 0;
    z-index: -1;
}
/* .layout-content.status.status-index .container .page-status::before {
    background-color: red;
}
.unresolved-incidents::before {
    background-color: green;
}
.components-section::before {
    background-color: blue;
}
.masthead-container::before {
    background-color: yellow;
} */

.components-section .components-uptime-link {
    color: rgba(255, 255, 255, 0.8);
}

.components-section a {
    color: #00bef0;
}

.layout-content.status .shared-partial.uptime-90-days-wrapper .legend .legend-item,
.layout-content.status .shared-partial.uptime-90-days-wrapper .legend .legend-item.light {
    color: rgba(255, 255, 255, 0.65);
    opacity: 1;
}


.layout-content.status .shared-partial.uptime-90-days-wrapper .legend .spacer {
    background: rgba(255, 255, 255, 0.25);
    opacity: 1;
}

body.status .layout-content.status .border-color,
hr,
.tooltip-base,
.markdown-display table,
div[id^="subscribe-modal"],
#uptime-tooltip .tooltip-box {
    border-color: rgba(255, 255, 255, 0.25);
}

/* INCIDENT */
.layout-content.status.status-index .unresolved-incident .incident-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.layout-content.status.status-index .unresolved-incident .incident-title .actual-title::before {
    content: " ";
    display: inline-block;
    width: 0.55em;
    height: 0.55em;
    background-color: black;
    margin-right: 0.5em;
    transform: translateY(-25%);
}

.layout-content.status.status-index .unresolved-incidents .unresolved-incident .updates {
    border: 0;
    padding-left: 3em;
    padding-top: 0.3em;
}

/* incident title */
.layout-content.status.status-index .unresolved-incidents .unresolved-incident .incident-title a,
.layout-content.status.status-index .unresolved-incidents .unresolved-incident .incident-title a:hover {
    color: #000;
}

.layout-content.status.status-index .container .page-status.status-none,
.layout-content.status.status-index .unresolved-incidents .unresolved-incident {
    background-color: #f5f8fa;
    border-radius: 6px;
    border-top: 8px solid;
    padding-top: 1em;
    padding-bottom: 1em;
}

.layout-content.status.status-index .container .page-status.status-none .status,
.layout-content.status.status-index .unresolved-incidents .unresolved-incident .incident-title {
    padding: 0.85rem 1.25rem 0.35rem;
}



.layout-content.status.status-index .page-status {
  margin-bottom: 0;
  padding-bottom: 70px;
}

.layout-content.status.status-index .unresolved-incident.impact-none {
    border-color: #00BEF0;
}
.layout-content.status.status-index .unresolved-incident.impact-minor {
    border-color: #FD8A00;
}
.layout-content.status.status-index .unresolved-incident.impact-major {
    border-color: #F5361C;
}
.layout-content.status.status-index .unresolved-incident.impact-critical {
    border-color: #F5361C;
}

.layout-content.status.status-index .unresolved-incident.impact-none .incident-title,
.layout-content.status.status-index .unresolved-incident.impact-minor .incident-title,
.layout-content.status.status-index .unresolved-incident.impact-major .incident-title,
.layout-content.status.status-index .unresolved-incident.impact-critical .incident-title,
.layout-content.status.status-index .unresolved-incidents .unresolved-incident.impact-none .incident-title {
    background-color: #f5f8fa;
}


/* buttons */
.subscribe,
.flat-button,
.layout-content.status .masthead-container .updates-dropdown-container .show-updates-dropdown {
    display: inline-flex;
    border: 1px solid #4045B2;
    border-radius: 1000px;
    background-color: #4045B2;
    color: #fff !important;
    font-weight: 400;
    padding-left: 10px;
    padding-right: 10px;
    text-transform: unset;
    letter-spacing: unset;
    font-size: 16px;
}
.layout-content.status .masthead-container .updates-dropdown-container .show-updates-dropdown {
    padding-left: 20px;
    padding-right: 20px;
    border: 0;
}
.modal-footer .incident-subscribe-btn {
    height: auto;
    justify-content: center;
    align-items: center;
}

.status-day {
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    padding-top: 30px;
}

.layout-content.status.status-index .incidents-list .incident-title.impact-none a,
.layout-content.status.status-index .incidents-list .incident-title.impact-minor a,
.layout-content.status.status-index .incidents-list .incident-title.impact-major a,
.layout-content.status.status-index .incidents-list .incident-title.impact-critical a,
.layout-content.status-full-history .month .incident-container .impact-critical,
.layout-content.status-full-history .month .incident-container .impact-major,
.layout-content.status-full-history .month .incident-container .impact-minor,
.layout-content.status-full-history .month .incident-container .impact-none {
    color: #000000;
    display: inline-flex;
    align-items: center;
    font-weight: 700;
}

.updates-container,
.incident-body,
.incident-data .secondary {
    padding-left: 1.8em;
}

/* page status */
.layout-content.status.status-index .page-status {
    border: 0;
    padding: 0;
}
.layout-content.status.status-index .page-status .status {
    color: #000;
    text-shadow: none;
    font-weight: 700;
}
.layout-content.status.status-index .page-status.status-none,
.layout-content.status.status-index .page-status.status-minor,
.layout-content.status.status-index .page-status.status-major,
.layout-content.status.status-index .page-status.status-critical {
    background-color: transparent;
}

.layout-content.status.status-index .incidents-list .incident-title a:before,
.layout-content.status-full-history .month .incident-container .incident-title::before,
.layout-content.status.status-index .page-status .status::before {
    content: " ";
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    margin-right: 0.5em;
    background-color: #00B49D;
    opacity: 0.6;
}


/* -- impact critical */
.layout-content.status.status-index .unresolved-incident.impact-critical .incident-title .actual-title::before,
.layout-content.status.status-index .incidents-list .incident-title.impact-critical a::before,
.layout-content.status-full-history .month .incident-container .impact-critical::before,
.layout-content.status.status-index .page-status.status-critical::before {
    background-color: #F5361C;
}
/* -- impact major */
.layout-content.status.status-index .unresolved-incident.impact-major .incident-title .actual-title::before,
.layout-content.status.status-index .incidents-list .incident-title.impact-major a::before,
.layout-content.status-full-history .month .incident-container .impact-major::before,
.layout-content.status.status-index .page-status.status-major::before {
    background-color: #F5361C;
}
/* -- impact minor */
.layout-content.status.status-index .unresolved-incident.impact-minor .incident-title .actual-title::before,
.layout-content.status.status-index .incidents-list .incident-title.impact-minor a::before,
.layout-content.status-full-history .month .incident-container .impact-minor::before,
.layout-content.status.status-index .page-status.status-minor::before {
    background-color: #FD8A00;
}
/* -- impact none */
.layout-content.status.status-index .unresolved-incident.impact-none .incident-title .actual-title::before,
.layout-content.status.status-index .incidents-list .incident-title.impact-none a::before,
.layout-content.status-full-history .month .incident-container .impact-none::before {
    background-color: #00BEF0;
    opacity: 0.6;
}
/* impact none in components */
.components-container .component-inner-container.status-blue .component-status {
    color: rgba(255, 255, 255, 0.65);
}

.layout-content.status.status-index .container .page-status.status-none {
  color: #00B49D;
}

@media (max-width: 450px) {
  .updates-dropdown-container {
    margin-top: 5rem !important;
    margin-left: 1rem !important;
  }
}

.layout-content.status.status-index.starter {
  overflow: hidden;
}

.legend-item.legend-item-uptime-value {
    display: none;
}
#uptime-tooltip .tooltip-box {
  width: 400px;
}
.shared-partial.uptime-90-days-wrapper .legend .spacer {
  margin: 0.75rem 0rem 0rem 0rem;
}