input,
select,
button,
.button {
  min-height: 44px;
}

input,
select {
  font-size: 14px;
  line-height: 1.25;
}

input::placeholder {
  color: #71879a;
  opacity: 1;
}

select {
  appearance: none;
  padding-right: 38px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #8fa3b5 50%),
    linear-gradient(135deg, #8fa3b5 50%, transparent 50%) !important;
  background-position:
    calc(100% - 17px) 19px,
    calc(100% - 12px) 19px !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
}

.filters {
  grid-template-columns: minmax(180px, 240px) minmax(170px, 220px) minmax(260px, 1fr) auto;
  align-items: stretch;
  gap: 10px;
}

.filters .button {
  min-width: 104px;
}

.filters.filters-fixed {
  grid-template-columns: minmax(180px, 230px) minmax(280px, 1fr) auto;
}

.filters.alerts-filters {
  grid-template-columns: minmax(150px, 210px) minmax(160px, 210px) minmax(150px, 190px) minmax(240px, 1fr) auto;
}

.badge.alert-sent {
  border-color: #276a98;
  background: #102f48;
  color: #70c5ff;
}

.badge.alert-ignored,
.badge.alert-not_configured {
  border-color: #596675;
  background: #202a34;
  color: #b7c4ce;
}

.badge.alert-failed {
  border-color: #7c3138;
  background: #421c20;
  color: #ff9ca2;
}

.stack {
  gap: 17px;
}

.stack label {
  gap: 8px;
  font-size: 13px;
  font-weight: 650;
}

.stack input {
  min-height: 48px;
  padding: 12px 14px;
  font-size: 15px;
}

.stack .button {
  min-height: 48px;
  margin-top: 3px;
}

.logout .button {
  min-height: 36px;
  padding-top: 7px;
  padding-bottom: 7px;
}

.danger-zone form {
  align-items: stretch;
}

.danger-zone form input,
.danger-zone form select {
  max-width: 280px;
}

.danger-zone form .button {
  white-space: nowrap;
}

.terminal-log {
  overflow: auto;
  max-height: calc(100vh - 285px);
  min-height: 360px;
  padding: 10px 12px;
  border: 1px solid #27313b;
  border-radius: 8px;
  background: #101214;
  box-shadow: inset 0 1px 0 #ffffff08, 0 16px 40px #0007;
}

.terminal-line {
  display: grid;
  grid-template-columns: max-content max-content minmax(300px, 1fr);
  gap: 9px;
  align-items: start;
  min-height: 24px;
  color: #e1e8ed;
  font-family: Consolas, "SFMono-Regular", "Segoe UI Emoji", monospace;
  font-size: 13px;
  line-height: 1.55;
}

.terminal-line.terminal-line-fixed {
  grid-template-columns: max-content minmax(300px, 1fr);
}

.terminal-line time {
  color: #c7d2dc;
  white-space: nowrap;
}

.terminal-bot {
  color: #8ea3b5;
  white-space: nowrap;
}

.terminal-message {
  min-width: 0;
  margin: 0;
  color: #dbe7f0;
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.terminal-line.level-error .terminal-message {
  color: #ff7f89;
}

.terminal-line.level-warning .terminal-message {
  color: #efc36b;
}

.terminal-line.level-success .terminal-message {
  color: #70c5ff;
}

.terminal-line:hover {
  background: #ffffff05;
}

@media (max-width: 760px) {
  .filters {
    grid-template-columns: 1fr 1fr;
  }

  .filters.filters-fixed {
    grid-template-columns: 1fr 1fr;
  }

  .filters.alerts-filters {
    grid-template-columns: 1fr 1fr;
  }

  .filters input,
  .filters .button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .filters {
    grid-template-columns: 1fr;
  }

  .filters.alerts-filters {
    grid-template-columns: 1fr;
  }

  .filters input,
  .filters .button {
    grid-column: auto;
  }

  .danger-zone form input,
  .danger-zone form select {
    max-width: none;
  }

  .terminal-log {
    padding: 9px;
  }

  .terminal-line {
    grid-template-columns: max-content max-content minmax(240px, 1fr);
    font-size: 12px;
  }

  .terminal-line.terminal-line-fixed {
    grid-template-columns: max-content minmax(240px, 1fr);
  }
}