@font-face {
    font-family: 'Monda';
    font-style: normal;
    font-weight: 400;
    src: local('Monda Regular'), local('Monda-Regular'), url(ttf/monda.ttf) format('truetype');
  }

:root {
  --bg: #0f171a;
  --card: #111c20;
  --text: #eaf2f4;
  --text-input: #eaf2f4;
  --muted: #8aa0a6;
  --accent: #17a1ae;
  --accent-ghost: #26b4c720;
  --border: #1e2a2f;
  --lightbox-control-bg: color-mix(in oklab, var(--accent) 45%, #000);
  --lightbox-control-bg-hover: color-mix(in oklab, var(--accent) 58%, #000);
  --lightbox-control-color: #fff;

  /* Semantic/status */
  --info: #ADD8E6;
  --ok: #90EE90;
  --ok-border: #78ea78;
  --warn: #f1e275;
  --error: #F08080;

  /* Buttons */
  --button-text: #0f171a;
  --button-icon-margin-right: 6px;
}

html, body {
  background: var(--bg);
  color: var(--text);
}

a { color: var(--accent); }
a:hover { filter: brightness(1.08); }

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.btn,
[class*="btn"] {
  background: var(--accent);
  color: var(--bg);
  border: 1px solid color-mix(in oklab, var(--accent) 55%, var(--border));
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.btn:hover,
[class*="btn"]:hover {
  filter: brightness(1.05);
}

button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
.btn:disabled,
[class*="btn"]:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.btn-cancel, .btn-secondary, .btn-ghost, .btnVerify {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-cancel:hover, .btn-secondary:hover, .btn-ghost:hover, .btnVerify:hover {
  background: color-mix(in oklab, var(--card) 70%, transparent);
}

.btn-danger, .btn-delete, .dt-button-red {
  background: var(--error);
  color: #000;
  border-color: color-mix(in oklab, var(--error) 55%, var(--border));
}

.btn-success, .btn-ok, .dt-button-green {
  background: var(--ok);
  color: #000;
  border-color: color-mix(in oklab, var(--ok) 55%, var(--border));
}

.btn-warning, .btn-warn, .dt-button-orange {
  background: var(--warn);
  color: #000;
  border-color: color-mix(in oklab, var(--warn) 55%, var(--border));
}

.card, .panel, .container, .content, .box {
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
}


body {
  font-family: 'Monda' !important;
  font-style: normal;
  font-weight: 400;
}

/* Status badges */
.status-info, .status-information { background-color: var(--info) !important; }
.status-error, .status-critical { background-color: var(--error) !important; }
.status-warning { background-color: var(--warn) !important; }
.status-ok, .status-normal, .status-success { background-color: var(--ok) !important; }

.status-running { text-align:center; font-weight:bold; }
.status-running i { margin-right:6px; }

.status-ok,
.status-error,
.status-warning,
.status-critical,
.status-info,
.status-information,
.status-normal,
.status-success {
  color: #000;
  text-align: center;
  font-weight: bold;
}