hestiacp/web/css/src/themes/dark.css

/*
    Theme Name:  Dark
    Author:      Kristan Kenney (@kristankenney)
    Website:     www.hestiacp.com
*/

@custom-media --viewport-medium (min-width: 768px);

:root {
  --color-text: #cdcdcd;
  --color-background: #282828;
  --alert-border-color: #212121;
}

b,
strong {
  color: #cacaca;
}

.l-header {
  background: #454545;
  border-bottom: 1px solid #505050;
  text-shadow: 1px 1px rgb(0 0 0 / 50%);
  box-shadow: 0 8px 15px rgb(0 0 0 / 25%);
}

.l-menu__item.l-menu__item--active a {
  color: #dadada;
  background: linear-gradient(to bottom, rgb(15 15 15 / 60%) 0%, rgb(45 45 45 / 75%) 30%, rgb(60 60 60 / 100%) 95%);
  text-shadow: 0 1px rgb(0 0 0 / 50%);
  border-left-color: #353535;
  border-right-color: #353535;
}

.l-menu__item.l-menu__item--active:hover {
  background: linear-gradient(to bottom, rgb(255 255 255 / 15%) 0%, rgb(255 255 255 / 15%) 30%, rgb(255 255 255 / 15%) 95%) !important;
}

.l-menu__item > a {
  color: #e7e7e7;

  &:hover {
    color: #dadada !important;
    text-shadow: 1px 1px rgb(0 0 0 / 50%) !important;
    background: linear-gradient(to bottom, rgb(15 15 15 / 60%) 0%, rgb(45 45 45 / 75%) 30%, rgb(60 60 60 / 100%) 95%) !important;
    box-shadow: none !important;
  }

  &:active {
    background: linear-gradient(to bottom, rgb(15 15 15 / 70%) 0%, rgb(45 45 45 / 85%) 30%, rgb(50 50 50 / 100%) 95%) !important;
    color: #fff !important;
    text-shadow: 0 -1px 1px rgb(0 0 0 / 50%) !important;
  }
}

.l-profile__logout {
  color: #e7e7e7 !important;
}

.l-profile__notifications {
  color: #fff;
  font-weight: 600;
  font-size: 1.2rem !important;
  line-height: 0.95rem;
  border-left: 1px solid transparent !important;
  border-right: 1px solid transparent !important;

  &.active.l-profile__notifications.updates:active {
    background: linear-gradient(to bottom, rgb(15 15 15 / 60%) 0%, rgb(45 45 45 / 75%) 30%, rgb(60 60 60 / 100%) 95%) !important;
    color: #046c98 !important;
    text-shadow: 0 -1px 1px rgb(0 0 0 / 50%) !important;
    box-shadow: none !important;
    transition: 0.2s;
    border-left: 1px solid transparent !important;
    border-right: 1px solid transparent !important;
  }

  &:hover,
  &.updates:hover {
    text-shadow: 1px 1px rgb(0 0 0 / 50%) !important;
    background: linear-gradient(to bottom, rgb(15 15 15 / 60%) 0%, rgb(45 45 45 / 75%) 30%, rgb(60 60 60 / 100%) 95%) !important;
    border: none !important;
    border-left: 1px solid transparent !important;
    border-right: 1px solid transparent !important;
    box-shadow: none !important;
  }
}

.notification-container {
  background-color: rgb(50 50 50 / 99%);
  text-shadow: 0 1px rgb(0 0 0 / 50%);
  color: #dadada;
  border: 1px solid #404040;
}

.notification-container .empty {
  color: #dadada;
}

.notification-container .empty .status-icon {
  color: #dadada;
}

.notification-container .unseen {
  color: #dadada;
}

.notification-container li {
  border-bottom: 1px solid #282828;
}

.notification-container .mark-seen {
  background-color: #ff3478;
}

.notification-container .unseen .notification-title,
.notification-container .unseen .notification-title a {
  color: #fff !important;
}

.notification-container a {
  color: #4fabe9;
}

.notification-container a:hover {
  color: #09f;
}

.notification-container a:active {
  color: #0079cb;
}

/* Alerts
   ========================================================================== */

.alert-danger {
  background-color: #d13535;

  & i.fas {
    color: #d13535;
  }
}

/* Cards
   ========================================================================== */

.card {
  background: #454545;
  color: #fafafa;
  text-shadow: 0 1px rgb(0 0 0 / 95%) !important;
  border-color: #606060;
  box-shadow:
    0 1px 4px rgb(0 0 0 / 20%),
    inset 0 0 60px rgb(0 0 0 / 25%);

  & p.card-title {
    color: #fafafa;
  }
}

/* Main menu
   ========================================================================== */

.main-menu-item-link {
  &:hover {
    & .main-menu-item-label {
      color: #d7d7d7;
    }
  }

  &.active {
    & .main-menu-item-label {
      color: #c36;

      & .fas {
        color: #d7d7d7;
      }
    }
  }

  @media (--viewport-medium) {
    border-bottom-color: #282828;

    &:hover {
      border-bottom-color: #d7d7d7;
    }

    &.active {
      border-bottom-color: #c36;
    }
  }
}

.main-menu-item-label {
  font-weight: 500;
  color: #bcbcbc;

  & .fas {
    color: #707070;
  }
}

.l-separator {
  border-top: 1px solid #454545;
}

.l-sort {
  border-color: #454545;
  background-color: #282828;
}

.l-sort.is-active {
  box-shadow: 0 4px 6px rgb(0 0 0 / 25%);
}

.context-menu.sort-order {
  background-color: rgb(40 40 40 / 95%);
  box-shadow: 0 2px 16px 0 rgb(20 20 20 / 65%);
  border-radius: 4px;
  border: 1px solid rgb(90 90 90 / 100%);
}

.context-menu li {
  border-bottom: 1px solid #454545;
  color: #dadada;
}

.context-menu.sort-order span.active {
  background-color: #454545 !important;
  color: #fff;
  background: linear-gradient(to bottom, rgb(15 15 15 / 60%) 0%, rgb(45 45 45 / 75%) 30%, rgb(60 60 60 / 100%) 95%);
  text-shadow: 0 1px rgb(0 0 0 / 80%);
}

.context-menu.sort-order span:hover {
  color: #fff;
  background: linear-gradient(to bottom, rgb(25 25 25 / 60%) 0%, rgb(55 55 55 / 75%) 30%, rgb(70 70 70 / 100%) 95%);
  text-shadow: 0 -1px 1px rgb(0 0 0 / 50%);
  box-shadow:
    inset 0 0 1px rgb(0 0 0 / 40%),
    inset -1px -1px 4px rgb(40 40 40 / 40%);
}

.context-menu.sort-order span:active,
.context-menu.sort-order span:focus {
  background: linear-gradient(to bottom, rgb(35 35 35 / 60%) 0%, rgb(65 65 65 / 75%) 30%, rgb(80 80 80 / 100%) 95%);
  color: #fff;
  text-shadow: 0 -1px 1px rgb(0 0 0 / 50%);
  box-shadow:
    inset 0 0 1px rgb(0 0 0 / 40%),
    inset -1px -1px 4px rgb(40 40 40 / 40%);
}

.l-sort-toolbar .sort-by:hover {
  color: #d4d4d4;
}

.l-sort-toolbar .sort-by:hover b {
  color: #d4d4d4;
}

.l-sort-toolbar .toggle-all:hover {
  color: #d4d4d4;
}

.l-sort-toolbar__filter-apply {
  border-color: #454545;
  background-color: #424242;
  text-shadow: 1px 1px rgb(0 0 0 / 90%);
  box-shadow: 0 1px 1px rgb(0 0 0 / 40%);
  color: #cacaca;
  font-size: 1em;

  &:hover {
    color: #09f;
    background-color: #454545;
  }

  &:active {
    color: #0074c2;
    text-shadow: 0 -1px rgb(255 255 255 / 20%);
    box-shadow: inset 1px 1px 0 rgb(0 0 0 / 20%);
  }
}

.l-sort-toolbar .toolbar-link {
  color: #dadada;

  &.selected {
    color: #ff3478;
  }

  &:hover {
    color: #ff3478;
  }
}

.l-sort-toolbar .form-select {
  border-color: #454545;
  background-color: #212121;

  &:hover {
    background-color: #212121;
  }
}

.l-sort-toolbar .form-control {
  border-color: #454545;
  background-color: #212121;

  &:hover {
    background-color: #212121;
    border-right-color: #0090ff;
  }

  &:focus {
    border-right-color: #0080df;
  }
}

.l-unit {
  color: #dadada;
}

.table-header {
  background: #404040;
  border-left: 1px solid #212121;
  border-right: 1px solid #212121;
  border-bottom: 1px solid #212121;
  text-shadow: 0 1px rgb(0 0 0 / 95%);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  color: #dadada;
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 30%);

  &:hover {
    background-color: #404040;
    border-left: 1px solid #212121;
    border-right: 1px solid #212121;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 30%);
  }
}

.units .l-unit {
  background-color: #303030;
  border-bottom: 1px solid #282828;
  border-left: 1px solid #212121;
  border-right: 1px solid #212121;
}

.l-unit:hover,
.units .l-unit:hover {
  box-shadow: 0 2px 10px rgb(20 20 20 / 20%);
  background-color: #353535;
  text-shadow: 0 1px rgb(0 0 0 / 50%);
  border-left: 1px solid #212121;
  border-right: 1px solid #212121;
}

.units .l-unit.l-unit--starred {
  border-left: 2px solid #ff3478;
}

.units.active .l-unit.focus {
  background-color: #353535;
}

.units.active .l-unit.focus .l-unit__name {
}

.units.active .l-unit.focus .l-unit-toolbar__col--right {
}

.units > div:last-child {
}

.l-unit-ft {
  color: #cdcdcd;
}

.l-unit:hover .l-unit-toolbar__col--right {
}

.l-unit--blue {
}

.l-unit--suspended {
  background: #252525 !important;
  color: #606060 !important;
  text-shadow: 0 -1px rgb(0 0 0 / 40%) !important;
  box-shadow: inset 0 0 2px rgb(0 0 0 / 20%);
}

.l-unit--suspended a {
  color: #606060 !important;
  text-shadow: 0 -1px rgb(0 0 0 / 40%) !important;
}

.units .l-unit.l-unit--outdated {
  color: #d4d4d4;
  background-color: #981111;
}

.l-unit--outdated.selected {
  background: #b70000 !important;
  color: #fff !important;
  text-shadow: none !important;
}

.l-unit--outdated.selected b {
  color: #fff !important;
}

.l-unit--suspended .l-unit__name,
.l-unit--suspended b,
.l-unit--outdated .l-unit__name,
.l-unit--outdated b {
  color: #606060;
}

.l-unit--outdated .l-unit__name {

}

.l-unit--outdated b {
  color: #d4d4d4;
}

.l-unit--suspended .l-percent {
}

.l-unit--suspended .l-percent__fill {
}

.l-unit--suspended .l-unit__name,
.l-unit--suspended .l-unit__name span {
}

.l-unit--suspended.selected .l-unit__name,
.l-unit--suspended.selected .l-unit__name span {
  color: #707070;
}

.l-unit--suspended.selected {
  background-color: #454545 !important;
  color: #707070 !important;
}

.l-unit__name {
  color: #dadada;
}

.l-unit__stats:hover {
  background: transparent !important;
}

.l-unit__stat-col--left a,
.l-unit__stat-col--left a:visited {
  color: #fafafa;
}

.l-unit__stat-col--left a:hover {
  color: #fff;
}

/* form styles */

.inline-danger {
  color: #f33;
}

.inline-success {
  color: #53ba55;

  & a {
    color: #fff;

    &:hover {
      color: #ff3478;
    }
  }
}

.form-label,
.form-check label {
  color: #d4d4d4;
}

.form-control {
  background-color: #454545;
  border-color: #606060;
  color: #d4d4d4;
  box-shadow: 0 1px 4px rgb(0 0 0 / 35%);

  &:hover {
    border-color: #0090ff;
    background-color: #494949;
  }

  &:focus {
    background-color: #222;
    border-color: #0080df;
    color: #fff;
    box-shadow: 0 1px 6px rgb(0 52 91 / 75%);
  }

  &.list-editor:focus {
    background-color: #222;
    box-shadow: none;
  }
}

.form-select {
  background-color: #454545;
  border-color: #606060;
  color: #d4d4d4;
  text-shadow: 0 0 0 #d4d4d4;
  box-shadow: 0 1px 4px rgb(0 0 0 / 35%);

  &:hover {
    border-color: #0090ff;
    background-color: #494949;
  }

  &:focus {
    background-color: #222;
    border-color: #0080df;
    color: #fff;
    box-shadow: 0 1px 6px rgb(0 52 91 / 75%);
  }
}

.form-control:disabled,
.form-select:disabled {
  background-color: #303030;
  text-shadow: 1px 1px rgb(0 0 0 / 30%);
  color: #acacac;
  border-color: #606060;

  &:hover {
    border-color: #606060;
  }
}

.generate {
  color: #29a9ff;
  border-radius: 4px;

  &:hover {
    background-color: #ff3478;
    border-color: #ff3478;
  }

  &:active {
    background-color: #be1f54;
    border-color: #be1f54;
  }
}

textarea::placeholder {
  color: #bbb;
}

textarea:focus::placeholder {
  color: #909090;
}

.lets-encrypt-note {}

.toggle-psw-visibility-icon {}

.show-passwords-enabled-action {}

.ftp-path-value,
.hint {
  color: #a2a2a2;
  font-size: 0.8rem;
}

.ftp-path-prefix {
  padding-top: 12px;
  font-size: 0.8rem;
  color: #555;
}

/* Buttons
   ========================================================================== */

.button {
  color: #eee;
  text-shadow: 0 1px 1px rgb(0 0 0 / 35%);
  font-weight: 400;
  border-color: #707070;
  background: rgb(48 48 48);
  background: linear-gradient(0deg, rgb(48 48 48 / 100%) 0%, rgb(53 53 53 / 100%) 35%, rgb(69 69 69 / 100%) 100%);
  box-shadow:
    0 1px 4px rgb(0 0 0 / 20%),
    inset 0 0 1px rgb(20 20 20 / 100%),
    inset 0 0 3px rgb(0 0 0 / 50%);
}

.button:hover {
  color: #fff;
  text-shadow: 1px 1px rgb(0 0 0 / 25%);
  border-color: #0098ff;
  background: linear-gradient(0deg, rgb(58 58 58 / 100%) 0%, rgb(68 68 68 / 100%) 35%, rgb(79 79 79 / 100%) 100%);
  background-color: #454545;
  box-shadow:
    0 1px 3px rgb(0 0 0 / 35%),
    inset 0 0 1px rgb(0 0 0 / 100%),
    inset 0 0 3px rgb(0 0 0 / 65%);
  transition: 0.2s;
}

.button:active,
.button:focus {
  color: #d4d4d4;
  text-shadow: 0 -1px 1px rgb(0 0 0 / 55%);
  border-color: #0066b4;
  background: linear-gradient(0deg, rgb(69 69 69 / 100%) 0%, rgb(53 53 53 / 100%) 35%, rgb(48 48 48 / 100%) 100%);
  box-shadow:
    0 1px 3px rgb(0 0 0 / 30%),
    inset 0 0 1px rgb(0 0 0 / 100%),
    inset -1px -1px 4px rgb(30 30 30 / 40%);
}

.button-secondary {
  border-color: #454545;
  background-color: #343434;
  background: linear-gradient(0deg, rgb(48 48 48 / 100%) 0%, rgb(53 53 53 / 100%) 100%, rgb(69 69 69 / 100%) 100%);
}

.button-secondary:hover {
  background-color: #343434;
  background: linear-gradient(0deg, rgb(48 48 48 / 100%) 0%, rgb(53 53 53 / 100%) 100%, rgb(69 69 69 / 100%) 100%);
}

.button-danger:hover {
  background: rgb(133 0 0);
  background: linear-gradient(0deg, rgb(133 0 0 / 100%) 0%, rgb(203 0 0 / 100%) 100%);
  color: #fff;
  text-shadow: 0 1px rgb(0 0 0 / 45%);
  border-color: rgb(170 0 0);
}

.button-danger:active,
.button-danger:focus {
  background: rgb(133 0 0);
  background: linear-gradient(180deg, rgb(133 0 0 / 100%) 0%, rgb(203 0 0 / 100%) 100%);
  color: #4d0000;
  text-shadow: 0 -1px 1px rgb(255 255 255 / 30%);
  border-color: rgb(251 71 51);
}

.to-shortcuts,
.to-top {
  font-size: 0.85rem;
  font-weight: 400;
  color: #eee;
  border-color: 1px solid #707070;
  background: rgb(48 48 48);
  background: linear-gradient(0deg, rgb(48 48 48 / 100%) 0%, rgb(53 53 53 / 100%) 35%, rgb(69 69 69 / 100%) 100%);
  box-shadow:
    0 1px 4px rgb(0 0 0 / 20%),
    inset 0 0 1px rgb(20 20 20 / 100%),
    inset 0 0 3px rgb(0 0 0 / 50%);
  text-shadow: 0 1px 1px rgb(0 0 0 / 35%);
}

.to-shortcuts:hover,
.to-top:hover {
  color: #fff;
  text-shadow: 1px 1px rgb(0 0 0 / 25%);
  border-color: #0098ff;
  background: linear-gradient(0deg, rgb(58 58 58 / 100%) 0%, rgb(68 68 68 / 100%) 35%, rgb(79 79 79 / 100%) 100%);
  background-color: #454545;
  box-shadow:
    0 1px 3px rgb(0 0 0 / 35%),
    inset 0 0 1px rgb(0 0 0 / 100%),
    inset 0 0 3px rgb(0 0 0 / 65%);
  transition: 0.2s;
}

.to-shortcuts:active,
.to-top:active,
.to-shortcuts:focus,
.to-top:focus {
  border-color: #0066b4;
  background: linear-gradient(0deg, rgb(69 69 69 / 100%) 0%, rgb(53 53 53 / 100%) 35%, rgb(48 48 48 / 100%) 100%);
  color: #d4d4d4;
  text-shadow: 0 -1px 1px rgb(0 0 0 / 55%);
  box-shadow:
    0 1px 3px rgb(0 0 0 / 30%),
    inset 0 0 1px rgb(0 0 0 / 100%),
    inset -1px -1px 4px rgb(30 30 30 / 40%);
}

.ui-dialog button.cancel span {
  color: #fff !important;
}

.additional-control {
  color: #09f;
}

.additional-control:hover {
  background-color: #ff3478;
  border-color: #ff3478;
}

.additional-control:active {}

.additional-control.delete:hover,
.additional-control.delete:active,
.additional-control.add:hover {}

.additional-control.add:active {}

.unlim-trigger {

}

.optional {

}

.mail-infoblock {
  color: #fff;
  border: 1px solid #606060;
  box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
  background-color: #454545;
}

.mail-infoblock:hover {

}

.mail-infoblock td {
  color: #dadada;
}

.mail-infoblock td:first-child{

}

.mail-infoblock div {

}

.mail-infoblock a {
  color: #52b9ff;

  &:hover {
    color: #ff3478;
  }
}

.additional-info {

}

.additional-info td {

}

.additional-info td.details {

}

.body-login,
.body-reset {
  background: #303030;
  background: radial-gradient(circle, rgb(77 77 77 / 100%) 0%, rgb(31 31 31 / 100%) 100%);
}

.login {
  background-color: #282828;
  box-shadow: 0 8px 25px rgb(0 0 0 / 30%), inset 0 0 2px rgb(0 0 0 / 25%);
}

.login-title {
  color: #fff;
}

.login .error {
  color: #f864fa;
}

.login .label-link {
  color: #eee;
  text-transform: initial;
  font-weight: 400;
}

.login .label-link:hover {
  color: #ff3478;
}

.form-title {
  color: #e8e8e8;
}

.section-title {
  color: #d4d4d4;
  border-bottom-color: #484848;
}

.qr-code {
  border: 1px solid #3b3b3b;
  box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
}

.l-unit.selected {
  background-color: #454545;
  color: #d4d4d4;
  box-shadow: 0 2px 10px rgb(30 30 30 / 35%);
  text-shadow: 0 1px rgb(0 0 0 / 50%);
  border-left: 1px solid #212121;
  border-right: 1px solid #212121;
}

.l-unit.selected:hover {
  background-color: #555;
  color: #d4d4d4;
  box-shadow: none !important;
  text-shadow: 0 1px rgb(0 0 0 / 40%);
}

.l-unit.selected b,
.l-unit.selected strong {
  color: #d4d4d4;
}

.console-output {
  color: #dadada;
}

form#vstobjects.suspended {
  background-color: #282828;
}

.usage-pill {
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 85%), 0 1px 1px rgb(0 0 0 / 20%);
  background-color: rgb(15 15 15 / 50%);
  border: 1px solid rgb(120 120 120 / 95%);
  text-shadow: 0 1px 1px rgb(0 0 0 / 50%);
  color: #909090;
}

.usage-pill b {
  color: #d8d8d8;
}

.badge {
  box-shadow:
    0 1px 2px rgb(70 70 70 / 50%),
    inset 0 2px 2px rgb(0 0 0 / 65%);
  text-shadow: 0 1px 2px rgb(0 0 0 / 50%);
  border: 1px solid #212121 !important;
}

.badge.large {
}

.badge.raised {
  background: radial-gradient(ellipse at center, rgb(40 40 40 / 20%) 0%, rgb(80 80 80 / 5%) 100%);
}

.l-unit--suspended .badge {
  background: #303030 !important;
  color: #808080 !important;
  text-shadow: 0 -1px rgb(0 0 0 / 40%) !important;
  box-shadow: 0 1px 2px rgb(25 25 25 / 30%) !important;
}

.badge.gray {
  border: 1px solid #181818;
  background-color: #252525;
  color: #dadada;
  text-shadow: 0 1px rgb(0 0 0 / 70%) !important;
}

.badge.blue {

}

.badge.purple {

}

.badge.teal {

}

.badge.maroon {
  background-color: #ff3478;
}

.badge.red {

}

.badge.orange {

}

.badge.green {

}

.badge.lightblue {

}

.status-icon.large {

}

.status-icon.yellow,
.status-icon.yellow:hover {
  color: #f3e72c;
}

.status-icon.teal,
.status-icon.teal:hover {
  color: #3cc;
}

.status-icon.purple,
.status-icon.purple:hover {
  color: #c364ff;
}

.status-icon.maroon,
.status-icon.maroon:hover {
  color: #ff3478;
}

.status-icon.red,
.status-icon.red:hover {

}

.status-icon.green,
.status-icon.green:hover {
  color: #37cf39;
}

.status-icon.orange,
.status-icon.orange:hover {

}

.status-icon.lightblue,
.status-icon.lightblue:hover {

}

.status-icon.highlight,
.status-icon.highlight:hover {
  color: #dadada;
}

.status-icon.blue,
.status-icon.blue:hover {
  color: #0092f4;
}

.status-icon.dim {
  color: #808080;
  text-shadow: 1px 1px rgb(0 0 0 / 30%);
}

.l-unit--suspended .status-icon.dim {
  color: #808080 !important;
  text-shadow: 0 !important;
}

.ui-dialog .ui-dialog-buttonpane {
  border-top: 1px solid #404040;
}

.ui-dialog .ui-dialog-buttonpane button {
  box-shadow:
    0 1px 4px rgb(0 0 0 / 10%),
    inset 0 0 1px #000,
    inset 0 0 3px rgb(0 0 0 / 50%);
}

.shortcuts {
  background: rgb(30 30 30 / 95%);
  border: 1px solid rgb(255 255 255 / 25%);
  box-shadow: 0 0 20px rgb(0 0 0 / 50%);
}

.shortcuts-header {
  border-bottom: 1px solid #353535;
}

.ui-dialog {
  background-color: rgb(45 45 45 / 95%);
  border: 1px solid rgb(80 80 80 / 97%);
  box-shadow:
    inset 0 1px 3px rgb(0 0 0 / 25%),
    0 8px 25px rgb(0 0 0 / 90%);
}

.ui-dialog .ui-dialog-content {
  color: #dadada;
}

.ui-dialog .ui-dialog-title {
  color: #f12569;
  font-weight: 600;
}

.helper-container {
  box-shadow: 0 1px 4px rgb(0 0 0 / 25%);
  border: 1px solid #606060;
  background-color: #454545;
}

.context-helper:active {
  color: #ff3478;
}

.cron-helper-tabs a {
  color: #cacaca;
}

.cron-helper-tabs a:hover {
  color: #ff3478 !important;
}

.cron-helper-tabs a:active {
  color: #3b9de8 !important;
}

.cron-helper-tabs .ui-tabs-selected a,
li[aria-expanded="true"] a {
  color: #ff3478 !important;
}

.cron-helper-tabs p {
  color: #dadada;
}

.server-info-name {
  color: #fafafa !important;
}

.server-info-output {
  background: #282828;
}

.icon-server-info {
  color: #707070;
}

.ui-widget-header a {
  color: #cacaca !important;
}

.graph-rounded {
  border-radius: 8px;
}

.debug-panel-contents {
  background-color: #282828;
}

.body-rrd .units .l-unit {
  background-color: #282828 !important;
  border-left: 1px solid transparent !important;
  border-right: 1px solid transparent !important;
}

.l-percent {
  border-bottom: 2px solid #585858 !important;
}

.body-stats .l-unit__name {
  color: #eee !important;
}

.statistics-count {
  border-bottom: 1px dotted #707070;
  border-right: 1px dotted #707070;
}

.body-stats .units .l-unit {
  background-color: #282828 !important;
  border-bottom: 1px solid #404040 !important;
  border-left: 1px solid #282828 !important;
  border-right: 1px solid #282828 !important;
}

.body-stats .units:hover .l-unit:hover {
  background-color: #303030 !important;
  color: #fff !important;
}

.body-stats .units:hover .l-unit:hover b,
.body-stats .units:hover .l-unit:hover strong {
  color: #fff !important;
}

/* Collapse component
   ========================================================================== */

.collapse-header {
  background: #454545;
  border-color: #505050;
  text-shadow: 0 1px rgb(0 0 0 / 40%);
  box-shadow:
    inset 0 0 2px rgb(0 0 0 / 50%),
    0 2px 6px rgb(0 0 0 / 40%);
  color: #fff;
}