/**************************
    Variables
**************************/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700;800&display=swap');

:root {
  --montserrat: 'Montserrat', helvetica, arial, sans-serif;
  --montserrat-cond: 'Montserrat', helvetica, sans-serif;
  --montserrat-narrow: 'Montserrat', helvetica, sans-serif;
  --secondary-gray: #e5e5ec;
  --core-dark: #051727;
  --core-red: #b3282d;
  --accent-1: #85cc29;
}

/**************************
  Shared Styles
  **************************/

.layout-content.status.status-index .components-section .component-container .group-parent-indicator {
  color: var(--core-dark);
}

.fa-minus-square-o:before {
  content: '\2d';
  font-size: 32px;
}

.fa-plus-square-o:before {
  content: '\2b';
  font-size: 24px;
}

.footer__main {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

body {
  display: none;
  font-family: var(--montserrat);
  color: var(--core-dark);
  line-height: 1.25;
  margin: 0;
  font-display: block;
  width: 100%;
}

h1 {
  font-family: var(--montserrat-cond);
  font-size: 72px;
  font-weight: 800;
  font-style: normal;
}

h2 {
  font-family: var(--montserrat-narrow);
  font-weight: 800;
  font-style: normal;
  font-size: calc(calc(1rem + (4px * 4)) + 4px);
  line-height: calc(calc(1rem + (4px * 4)) + 4px);
}

.animate-in {
  -webkit-animation: fadein 0.5s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 0.5s;
  /* Firefox < 16 */
  -ms-animation: fadein 0.5s;
  /* Internet Explorer */
  -o-animation: fadein 0.5s;
  /* Opera < 12.1 */
  animation: fadein 0.5s;
}

.gradient-bg {
  width: 100%;
  background: linear-gradient(90deg, var(--secondary-gray) 0%, rgba(239, 240, 241, 0.5) 100%);
}

.centered-container {
  display: grid;
  place-content: center;
}

.large-title {
  font-size: 40px;
  margin-bottom: 16px;
}

.layout-content.status.status-index .unresolved-incidents {
  max-width: 850px;
  margin: 60px auto !important;
}

body.status .layout-content.status .border-color,
hr,
.tooltip-base,
.markdown-display table,
div[id^='subscribe-modal'],
#uptime-tooltip .tooltip-box {
  border-color: #cdd1d4;
}

.header-logo {
  height: 100%;
  width: auto;
}

.text-dark {
  color: var(--core-dark);
}

#header-container {
  width: 100%;
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}

#bg-svg {
  width: 100vw;
  background-clip: border-box;
  position: absolute;
  top: 36px;
  left: 50%;
  margin-left: -720px;
  z-index: -1;
}

.icon {
  height: 251px;
  width: 250px;
  z-index: 10;
}

.flex-between {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 950px;
}

.page-footer {
  border: none;
  padding: 0;
  margin: 73px 0 82px 0;
}

.color-secondary {
  color: var(--core-dark);
}

.color-secondary:hover {
  color: var(--core-dark);
}

.page-footer a {
  font-size: 22px;
  line-height: 22px;
  color: var(--core-red);
  font-weight: 500;
}

.page-footer a:hover {
  color: var(--core-red);
}

.font-small {
  font-size: 16px;
  font-weight: 100;
}

.powered-by a {
  color: var(--core-dark);
  font-size: 16px;
  font-weight: 100;
  line-height: 1.334375rem;
}

a,
a:hover,
.layout-content.status-index .page-footer span a:hover,
.layout-content.status-index .timeframes-container .timeframe:not(.active):hover,
.layout-content.status-incident .subheader a:hover {
  color: var(--core-red);
}

.layout-content.status.status-full-history .months-container .month .month-title {
  padding-bottom: 0;
  margin-bottom: 0;
}

.layout-content.status.status-full-history .months-container .month + .month {
  margin-top: 5rem;
}

.incident-title {
  color: var(--core-dark) !important;
}

.cpt-notification.success {
  background-color: var(--accent-1);
}

/**************************
  Status Page Styles
  **************************/

.layout-content.status.status-index .page-status {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 32px !important;
}

.layout-content.status.status-index .page-status.status-minor .status {
  color: #ffc425 !important;
  font-size: 42px !important;
}

.layout-content.status.status-index .page-status.status-major .status {
  color: #e74c3c !important;
  font-size: 42px !important;
}

.layout-content.status.status-index .page-status.status-maintenance .status {
  color: #3498db !important;
  font-size: 42px !important;
}

.layout-content.status.status-index .page-status.status-critical .status {
  color: #e74c3c !important;
  font-size: 42px !important;
}

#ping-id {
  margin: 32px auto 16px auto;
}

.section-title {
  margin: 80px auto 32px auto;
  max-width: 850px;
}

.flat-button {
  background-color: var(--core-red);
}

.updates-dropdown-container .updates-dropdown {
  z-index: 100;
}

.text-section {
  display: none;
}

.incidents-list {
  display: none;
}

.layout-content.status.status-index .components-section .components-uptime-link {
  display: none;
}

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

.layout-content.status.status-index
  .components-section
  .component-container.is-group.open
  .child-components-container
  .uptime-90-days-wrapper {
  padding-top: 16px;
}

#support-portal__button {
  color: var(--core-dark);
  border: none;
  font-weight: 500;
  padding: 0;
}

.layout-content.status.status-index .components-section .component-container .name {
  white-space: normal;
}

.ping-header {
  height: 34px;
  background: #eff0f1;
  display: flex;
  justify-content: space-between;
  padding: 0 32px;
}

.top-nav__logo {
  height: 20px;
}

.header-item {
  margin: auto 0;
  font-weight: 500;
}

#status-hero {
  min-height: 410px;
  position: relative;
  overflow: hidden;
}

.hero-subtitle {
  font-size: 26px;
  font-weight: 500;
}

.layout-content.status.status-index .page-status.status-none {
  background: transparent;
  border: none;
  padding: 0;
}

.layout-content.status.status-index .page-status .status {
  font-family: var(--montserrat-cond);
  font-weight: 800;
  color: var(--accent-1);
  font-size: 60px;
}

.layout-content.status.status-index .page-status {
  margin-bottom: 16px;
}

.subscribe-text {
  margin-bottom: 32px;
}

#show-updates-dropdown {
  padding: 11.5px 16px;
  line-height: 17px;
  background: transparent;
  color: transparent;
  animation: fadeinButton 0.5s;
  -webkit-animation-fill-mode: forwards;
  /* Chrome 16+, Safari 4+ */
  -moz-animation-fill-mode: forwards;
  /* FF 5+ */
  -o-animation-fill-mode: forwards;
  /* Not implemented yet */
  -ms-animation-fill-mode: forwards;
  /* IE 10+ */
  animation-fill-mode: forwards;
}

.layout-content.status .custom-header-container {
  margin-bottom: 0;
}

.welcome {
  background: white;
  width: 100%;
  display: grid;
  place-content: center;
  padding: 90px 0 80px 0;
  margin: 0;
}

.welcome p {
  font-size: 24px;
  margin-bottom: 0;
  color: var(--core-dark);
}

.subscribe-text {
  max-width: 686px;
}

.layout-content.status .custom-header-container .updates-dropdown-container {
  display: flex;
  justify-content: flex-start;
}

.layout-content.status.status-index .components-section {
  margin-bottom: 80px;
}

.layout-content.status.status-index .components-section .component-container.is-group {
  background: #f7f8f8;
  padding: 32px;
}

.layout-content.status.status-index .components-section .component-container.is-group.open {
  background: white;
}

.shared-partial.uptime-90-days-wrapper .legend .spacer {
  height: 0;
}

.layout-content.status .shared-partial.uptime-90-days-wrapper .legend .legend-item.light {
  color: var(--core-dark);
  opacity: 1;
}

.layout-content.status .shared-partial.uptime-90-days-wrapper .legend .legend-item {
  color: var(--core-dark);
  opacity: 1;
}

.shared-partial.uptime-90-days-wrapper .legend {
  top: 0;
  margin-top: 10px;
}

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

.layout-content.status.status-index .components-section .component-container {
  padding: 0;
}

.layout-content.status.status-index
  .components-section
  .component-container.is-group
  > .component-inner-container
  .name {
  font-size: 20px;
  line-height: 28px;
}

.layout-content.status.status-index
  .components-section
  .component-container
  .child-components-container
  .component-inner-container.showcased {
  margin-top: 40px;
}

.layout-content.status.status-index .components-section .component-container .name {
  font-size: 20px;
  line-height: 28px;
}

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

#cond-welcome {
  display: none;
  margin-bottom: 1rem;
}

#status-msg {
  z-index: 10;
}

.component-status {
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}

#title-0 {
  margin-top: 0;
}

/**************************
  Incident Page Styles
  **************************/

.layout-content.status-incident .incident-name {
  color: var(--core-dark) !important;
}

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

.flat-button {
  background: var(--core-red) !important;
  padding: 11.5px 16px;
  line-height: 17px;
  color: white;
  border-radius: 0;
  box-shadow: none;
  text-transform: none;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0;
}

.layout-content.status.status-incident > .container {
  max-width: 850px;
}

/**************************
  History Page Styles
  **************************/

.history-nav {
  display: none;
}

#history-hero {
  display: none;
  position: relative;
  overflow: hidden;
  margin-bottom: 80px;
  min-height: 410px;
}

.month {
  display: flex;
  justify-content: space-between;
}

.layout-content.status.status-full-history .months-container .month .month-title {
  border: none;
}

.layout-content.status.status-full-history .months-container .month .month-title {
  width: 40%;
}

.month-content {
  width: 60%;
}

/**************************
  Animations
  **************************/

@keyframes fadeinButton {
  from {
    opacity: 0;
    background: transparent;
    color: transparent;
  }
  to {
    opacity: 1;
    background: var(--core-red);
    color: white;
    border: 1px solid var(--core-red);
  }
}

@-moz-keyframes fadeinButton {
  from {
    opacity: 0;
    background: transparent;
    color: transparent;
  }
  to {
    opacity: 1;
    background: var(--core-red);
    color: white;
    border: 1px solid var(--core-red);
  }
}

@-webkit-keyframes fadeinButton {
  from {
    opacity: 0;
    background: transparent;
    color: transparent;
  }
  to {
    opacity: 1;
    background: var(--core-red);
    color: white;
    border: 1px solid var(--core-red);
  }
}

@-ms-keyframes fadeinButton {
  from {
    opacity: 0;
    background: transparent;
    color: transparent;
  }
  to {
    opacity: 1;
    background: var(--core-red);
    color: white;
    border: 1px solid var(--core-red);
  }
}

@-o-keyframes fadeinButton {
  from {
    opacity: 0;
    background: transparent;
    color: transparent;
  }
  to {
    opacity: 1;
    background: var(--core-red);
    color: white;
    border: 1px solid var(--core-red);
  }
}

@keyframes fadein {
  from {
    opacity: 0;
    color: transparent;
  }
  to {
    opacity: 1;
    color: var(--core-dark);
  }
}

/* Firefox < 16 */

@-moz-keyframes fadein {
  from {
    opacity: 0;
    color: transparent;
  }
  to {
    opacity: 1;
    color: var(--core-dark);
  }
}

/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {
  from {
    opacity: 0;
    color: transparent;
  }
  to {
    opacity: 1;
    color: var(--core-dark);
  }
}

/* Internet Explorer */

@-ms-keyframes fadein {
  from {
    opacity: 0;
    color: transparent;
  }
  to {
    opacity: 1;
    color: var(--core-dark);
  }
}

/* Opera < 12.1 */

@-o-keyframes fadein {
  from {
    opacity: 0;
    color: transparent;
  }
  to {
    opacity: 1;
    color: var(--core-dark);
  }
}

/**************************
  Screen Breakpoints
  **************************/

@media only screen and (max-width: 600px) {
  #ping-id {
    max-width: 90%;
  }
  .welcome p {
    margin-top: 24px;
  }
  .ping-header {
    padding: 0 16px;
  }
  .flex-between {
    display: block;
    width: 90%;
    margin: auto;
    z-index: 100;
  }
  .shared-partial.uptime-90-days-wrapper .legend .spacer {
    margin: 0.75rem 0.75rem 0 0;
  }
  .layout-content.status.status-index .components-section .component-container .name {
    white-space: normal;
  }
  .layout-content.status.status-full-history .history-header .pagination-container {
    display: none;
  }
  .month {
    display: block;
  }
  .layout-content.status.status-full-history .months-container .expand-incidents {
    width: 65%;
  }
  .layout-content.status.status-index .components-section .component-container .child-components-container {
    padding-left: 0;
  }
  #bg-svg {
    display: none;
  }
  .layout-content.status.status-index
    .components-section
    .component-container.is-group
    > .component-inner-container
    .name {
    font-size: 0.875rem;
    line-height: 1.334375rem;
  }
  .layout-content.status.status-index .components-section .component-container .name {
    font-size: 0.875rem;
    line-height: 1.334375rem;
  }
  .page-footer a {
    font-size: 12px;
    line-height: 1.334375rem;
  }
  .powered-by a {
    font-size: 12px;
    line-height: 1.1625rem;
  }
  .fa-minus-square-o:before {
    content: '\2d';
    font-size: 28px;
  }
  .fa-plus-square-o:before {
    content: '\2b';
    font-size: 20px;
  }
  .layout-content.status.status-index .components-section .component-container.is-group {
    padding: 32px 16px;
  }
  .layout-content.status.status-full-history .months-container .month .month-title {
    margin-bottom: 16px;
  }
}

@media only screen and (max-width: 940px) {
  #ping-id {
    max-width: 90%;
  }
  h1 {
    font-size: calc(calc(2rem + (4px * 5)) + 4px);
    line-height: calc(calc(2rem + (4px * 5)) + 4px);
  }
  .hero-subtitle {
    font-size: calc(1rem + (4px * 2));
  }
  .subscribe-text p {
    font-size: calc(1rem + (4px * 1));
  }
  .layout-content.status.status-index .page-status .status {
    font-size: calc(calc(1rem + (4px * 6)) + 4px);
    line-height: calc(calc(1rem + (4px * 6)) + 4px);
  }
  .flex-between {
    width: 90vw;
    z-index: 100;
  }
  #history-hero {
    padding: 32px 0;
  }
  #status-hero {
    padding: 32px 0;
  }
  .icon {
    margin-bottom: 20px;
  }
  .welcome {
    width: 90%;
    padding: 80px 0;
    margin: auto;
  }
  #bg-svg {
    z-index: -1;
  }
  .status-hero--container {
    width: 90%;
    margin: auto;
  }
  .layout-content.status .custom-header-container .updates-dropdown-container {
    justify-content: flex-start;
    margin-top: 0;
  }
  .icon {
    margin-right: 42px;
  }
  .month-content {
    width: 100%;
  }
  .layout-content.status.status-full-history .months-container .month .month-title {
    width: 100%;
  }
  .layout-content.status.status-index .unresolved-incidents {
    max-width: 90% !important;
  }
}

@media screen and (max-width: 700px) {
  .layout-content.status.status-index .components-section .component-container .name {
    max-width: 67%;
  }
}

@media screen and (max-width: 450px) {
  .layout-content.status.status-index .components-section .component-container .name {
    max-width: 67%;
  }
}