/* Paste into Statuspage: Customize page > Custom CSS. Colours mirror the
   @theme tokens in css/main.css. Fonts load from www.cloudamqp.com and fall
   back to the system stack until /fonts/ is served with CORS headers. */

@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-display: swap;
  src: url("https://www.cloudamqp.com/fonts/inter-latin-wght-normal.woff2") format("woff2");
}

@font-face {
  font-family: "stabil-grotesk";
  font-weight: 600;
  font-display: swap;
  src: url("https://www.cloudamqp.com/fonts/StabilGrotesk-Medium.woff2") format("woff2");
}

:root {
  --cq-cream-light: #f7f5f2;
  --cq-cream-dark: #efeeea;
  --cq-charcoal: #141414;
  --cq-charcoal-mid: #434343;
  --cq-charcoal-light: #616160;
  --cq-border: #e5e4de;
  --cq-btn-border: #bab8b6;
  --cq-orange: #eb8246;
  --cq-green-text: #1d7a43;
  --cq-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --cq-display: "stabil-grotesk", var(--cq-sans);
}

/* Base */

body,
body.status {
  background-color: var(--cq-cream-light);
  color: var(--cq-charcoal);
  font-family: var(--cq-sans);
  -webkit-font-smoothing: antialiased;
}

body .layout-content.status {
  font-family: var(--cq-sans);
}

a,
a:hover {
  color: var(--cq-charcoal);
}

h1, h2, h3,
.font-largest,
.layout-content.status .incidents-list h2,
.layout-content.status.status-incident .incident-name {
  font-family: var(--cq-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

small,
.small,
.color-secondary,
.layout-content.status .table-row .date,
.layout-content.status .grouped-items-selector.inline .grouped-item,
.layout-content.status.status-full-history .history-nav a,
.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,
.components-section .components-uptime-link {
  color: var(--cq-charcoal-light);
}

.layout-content.status .shared-partial.uptime-90-days-wrapper .legend .spacer {
  background: var(--cq-border);
}

.border-color {
  border-color: var(--cq-border);
}

/* Masthead: the Statuspage logo bar, restyled like the site navigation */

.layout-content.status .masthead-container.basic {
  border-bottom: 1px solid var(--cq-border);
  margin-bottom: 48px;
}

.layout-content.status .masthead-container.basic .masthead {
  display: flex;
  align-items: center;
  border: 0;
  margin: 0;
  padding: 18px 0;
}

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

.masthead .logo-container a {
  display: block;
  width: 130px;
  height: 19px;
  background: url("https://www.cloudamqp.com/img/cloudamqp-logo-dark.svg") no-repeat left center / contain;
}

.masthead .logo-container img {
  display: none;
}

.layout-content.status .masthead-container .updates-dropdown-container {
  margin-left: auto;
}

.flat-button,
.layout-content.status .masthead-container .updates-dropdown-container .show-updates-dropdown,
.layout-content.status.status-full-history .show-filter.open {
  background-color: var(--cq-charcoal);
  color: #fff;
  border-radius: 9999px;
  box-shadow: none;
  text-shadow: none;
  font-family: var(--cq-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  padding: 8px 16px;
  transition: background-color 0.15s;
}

.flat-button:hover,
.layout-content.status .masthead-container .updates-dropdown-container .show-updates-dropdown:hover {
  background-color: var(--cq-charcoal-mid);
  color: #fff;
}

div[id^="updates-dropdown"] .updates-dropdown-section,
.updates-dropdown,
.updates-dropdown-nav {
  border-radius: 12px;
}

/* Overall status banner and open incidents */

.layout-content.status.status-index .page-status,
.layout-content.status.status-index .unresolved-incident,
.layout-content.status.status-index .scheduled-maintenance {
  border-radius: 12px;
  overflow: hidden;
  border: 0;
  text-shadow: none;
}

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

.layout-content.status.status-index .page-status .status {
  font-family: var(--cq-display);
  font-weight: 600;
}

/* Component list */

.layout-content.status.status-index .components-section .components-container {
  background-color: #fff;
  border: 1px solid var(--cq-border);
  border-radius: 12px;
  overflow: hidden;
}

.layout-content.status.status-index .components-section .component-container {
  border-color: var(--cq-border);
  border-left: 0;
  border-right: 0;
  background-color: #fff;
}

.layout-content.status.status-index .components-section .component-container:first-child {
  border-top: 0;
}

.layout-content.status.status-index .components-section .component-container:last-child {
  border-bottom: 0;
}

.layout-content.status.status-index .components-statuses .component-container .name {
  color: var(--cq-charcoal);
  font-weight: 500;
}

/* Statuspage's green (#2fcc66) is 2:1 on white; this keeps the hue at 5.4:1 */
.components-container .component-inner-container.status-green .component-status,
.components-container .component-inner-container.status-green .icon-indicator {
  color: var(--cq-green-text);
}

/* Incident lists on the index, history and incident pages */

.layout-content.status .incidents-list .status-day,
.layout-content.status-full-history .month,
.layout-content.status.status-incident .incident-updates-container {
  border-color: var(--cq-border);
}

.layout-content.status .incidents-list .status-day .date {
  font-family: var(--cq-display);
  font-weight: 600;
  border-color: var(--cq-border);
}

.layout-content.status-full-history .month .incident-container {
  background-color: transparent;
}

/* Incidents and Uptime tabs on the history and uptime pages */

.layout-content.status.status-full-history .history-nav {
  border-bottom: 0;
  background-color: transparent;
}

.layout-content.status.status-full-history .history-nav ul {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Statuspage hides the inactive tab border with !important */
.layout-content.status.status-full-history .history-nav a.button {
  margin: 0;
  border: 1px solid var(--cq-btn-border) !important;
  border-radius: 9999px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  background-color: transparent;
  transition: border-color 0.15s, background-color 0.15s;
}

.layout-content.status.status-full-history .history-nav a:not(.current):hover {
  border-color: var(--cq-charcoal) !important;
  color: var(--cq-charcoal);
}

.layout-content.status.status-full-history .history-nav a.current {
  border-color: var(--cq-charcoal) !important;
  background-color: var(--cq-charcoal);
  color: #fff;
}

/* Filter Components button, month arrows and component picker */

.layout-content.status.status-full-history .show-filter,
.layout-content.status.status-full-history .history-header .pagination a,
.layout-content.status.status-full-history .uptime-header .pagination a {
  border: 1px solid var(--cq-btn-border);
  border-radius: 9999px;
  background-color: #fff;
  transition: border-color 0.15s;
}

.layout-content.status.status-full-history .show-filter {
  padding: 8px 16px;
}

.layout-content.status.status-full-history .show-filter:hover,
.layout-content.status.status-full-history .history-header .pagination a:not(.disabled):hover,
.layout-content.status.status-full-history .uptime-header .pagination a:not(.disabled):hover {
  border-color: var(--cq-charcoal);
}

.component-selector .select-input__control,
.component-selector .select-input__control:hover,
.component-selector .select-input__control--is-focused {
  border: 1px solid var(--cq-btn-border);
  border-radius: 9999px;
  background-color: #fff;
  box-shadow: none;
  padding: 0 8px;
}

.component-selector .select-input__control--menu-is-open,
.component-selector .select-input__control:hover {
  border-color: var(--cq-charcoal);
}

.component-selector .select-input__single-value,
.component-selector .select-input__indicator {
  color: var(--cq-charcoal);
}

.component-selector .grouped-items-selector {
  border-color: var(--cq-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(20, 20, 20, 0.08);
  overflow: hidden;
}

.component-selector .grouped-item {
  border-color: var(--cq-border);
}

.select-input__menu {
  border: 1px solid var(--cq-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(20, 20, 20, 0.08);
  overflow: hidden;
}

.select-input__menu .select-input__option {
  color: var(--cq-charcoal);
}

.select-input__menu .select-input__option--is-focused {
  background-color: var(--cq-cream-light);
}

.select-input__menu .select-input__option--is-selected {
  background-color: var(--cq-cream-dark);
  color: var(--cq-charcoal);
}

/* Uptime calendar */

.layout-content.status-full-history .calendar-month .month-name {
  font-family: var(--cq-display);
  font-weight: 600;
}

.layout-content.status-full-history .calendar-month .day rect {
  rx: 4px;
}

#uptime-tooltip .tooltip-box {
  border-color: var(--cq-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(20, 20, 20, 0.08);
}

/* Statuspage footer */

.page-footer {
  border-color: var(--cq-border);
}

.page-footer > a:first-of-type {
  display: inline-block;
  border: 1px solid var(--cq-btn-border);
  border-radius: 9999px;
  padding: 8px 16px;
  font-weight: 500;
  transition: border-color 0.15s;
}

.page-footer > a:first-of-type:hover {
  border-color: var(--cq-charcoal);
}