:root {
  --relay-bg: #050505;
  --relay-bg-soft: #080808;
  --relay-panel: #0b0b0b;
  --relay-panel-soft: rgba(255, 255, 255, 0.035);
  --relay-line: rgba(255, 255, 255, 0.085);
  --relay-line-soft: rgba(255, 255, 255, 0.055);
  --relay-text: #ffffff;
  --relay-muted: rgba(255, 255, 255, 0.56);
  --relay-muted-2: rgba(255, 255, 255, 0.38);
  --relay-orange: #ff6a1a;
}

html,
body,
.page,
.toolbar {
  background: var(--relay-bg) !important;
}

.toolbar {
  border-bottom: 0 !important;
}

.layout {
  background: transparent !important;
}

.main h1,
.section-label,
.section-title,
.side-name,
.service strong,
label {
  color: var(--relay-text) !important;
}

.main-sub,
.sub,
.hint,
.side-title,
.side-name span,
.service span {
  color: var(--relay-muted) !important;
}

.nav {
  border-top-color: var(--relay-line-soft) !important;
}

.nav a {
  color: var(--relay-muted) !important;
}

.nav a.active {
  background: rgba(255, 106, 26, 0.10) !important;
  color: #ffffff !important;
}

input {
  border-color: var(--relay-line) !important;
  background: var(--relay-panel-soft) !important;
  color: #ffffff !important;
}

input:focus {
  border-color: var(--relay-orange) !important;
}

input:disabled {
  color: var(--relay-muted-2) !important;
}

.save,
.btn,
button.save,
a.btn {
  border: 1px solid var(--relay-orange) !important;
  background: var(--relay-bg) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.save:hover,
.btn:hover,
button.save:hover,
a.btn:hover {
  border-color: var(--relay-orange) !important;
  background: var(--relay-orange) !important;
  color: #ffffff !important;
}

.service {
  border-color: var(--relay-line) !important;
  background: var(--relay-panel) !important;
  box-shadow: none !important;
}

.service:hover {
  border-color: var(--relay-orange) !important;
  background: #0d0d0d !important;
}

.side-avatar,
.pfp {
  border: 0 !important;
  background: var(--relay-orange) !important;
}

.pfp-edit {
  border: 0 !important;
  background: rgba(5, 5, 5, 0.78) !important;
  color: #ffffff !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.relay-user-dot {
  border: 0 !important;
  box-shadow: none !important;
}

.relay-user-dot:hover,
.relay-user-dot:focus,
.relay-user-dot:active {
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.relay-user-menu {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(8, 8, 8, 0.72) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  box-shadow: none !important;
}

.relay-user-name {
  border-bottom-color: rgba(255, 255, 255, 0.075) !important;
}

.relay-menu-link:hover,
.relay-menu-button:hover {
  background: rgba(255, 106, 26, 0.12) !important;
}
