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

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

body {
  color: #cdcdcd;
  background-color: #282828;
}

a {
  color: #cdcdcd;
}

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 a {
  color: #e7e7e7;
}

.l-menu__item a: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;
}

.l-menu__item a: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-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;
}

.lang-ar .l-menu__item a {
  padding: 11px;
}

.lang-de .l-menu__item a {
  padding: 11px 12px;
}

.lang-tw .l-menu__item a {
  padding: 13px 18px;
}

.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;
}

.l-profile__notifications.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;
}

.l-profile__notifications:hover,
.l-profile__notifications.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 a,
.notification-container .unseen .notification-title {
  color: #fff !important;
}

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

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

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

.alert {
  border: 1px solid #212121;
}

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

.alert.alert-danger i.fas {
  color: #d13535;
}

.alert.alert-success {
}

.alert.alert-success i.fas {
}

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

.card.disable {
}

.card.disable .card-thumb {
}

.card .card-details {
}

.card .card-details p {
  color: #bdbdbd;
}

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

.card .card-thumb {
}

.card .card-thumb img {
}

.l-stat {
  background-color: #282828;
}

.l-stat__col {
}

.l-stat__col li {
  color: #b7b7b7 !important;
}

.l-stat__col a {
  border-bottom: 4px solid #282828;
  background-color: #282828;
}

.l-stat__col a:hover {
  border-bottom: 4px solid #d7d7d7;
}

.l-stat__col a:active,
.l-stat__col a:focus {
  border-bottom: 4px solid #d11755;
}

.l-stat__col--active a {
  border-bottom: 4px solid #e93b76;
}

.l-stat.active .l-stat__col.focus a {
  border-bottom: 4px solid #e93b76;
}

.l-stat.active .l-stat__col.focus a .l-stat__col-title {
}

.l-stat__col a:hover .l-stat__col-title {
  color: #d7d7d7;
}

.l-stat__col a:active .l-stat__col-title {
}

.l-stat__col-title {
  font-weight: 500;
  color: #bcbcbc;
  text-shadow: 0 1px rgb(0 0 0 / 40%);
}

.l-stat__col--active .l-stat__col-title {
  color: #ff558f;
}

.l-stat__col .fas {
  color: #707070;
  padding: 4px;
}

.l-stat__col--active .fas {
  color: #aaa;
}

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

div.l-content > div.l-separator:nth-of-type(2) {
}

div.l-content > div.l-separator:nth-of-type(4) {
  border-bottom: 1px solid #454545;
  background-color: #282828;
  box-shadow: 0 4px 6px rgb(0 0 0 / 25%) !important;
}

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

.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: 1px solid #454545;
  background-color: #424242;
  text-shadow: 1px 1px rgb(0 0 0 / 90%) !important;
  box-shadow: 0 1px 1px rgb(0 0 0 / 40%) !important;
  color: #cacaca;
  font-size: 1em;
}

.l-sort-toolbar__filter-apply:hover {
  color: #09f;
  background-color: #454545;
}

.l-sort-toolbar__filter-apply: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 .vst {
  color: #dadada;
}

.l-sort-toolbar .vst:hover {
  color: #ff3478;
}

.l-sort-toolbar .vst:active {
}

.l-sort-toolbar .vst.selected {
  color: #ff3478;
}

.l-select {
  border: 1px solid #454545;
  box-shadow: 0 1px 1px rgb(0 0 0 / 40%) !important;
}

.l-select::after {
}

.l-select select {
  background-color: #212121;
  box-shadow: 0 1px 1px rgb(0 0 0 / 40%) !important;
}

.l-select select:focus {
}

.lang-ru .l-select select {
}

.l-select select option {
}

.l-sort-toolbar .l-select {
  border: 1px solid #454545;
  background-color: #454545;
  text-shadow: 1px 1px rgb(0 0 0 / 90%);
}

.l-unit {
  color: #dadada;
}

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

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

.table-header .fas {
}

.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 */

.vst-error {
  color: #f33;
}

.vst-ok {
  color: #53ba55;
}

.vst-ok a {
  color: #fff;
}

.vst-ok a:hover {
  color: #ff3478;
}

.vst-ok a:active {
}

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

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

.form-control:hover {
  border-color: #0090ff;
  background-color: #494949;
}

.form-control: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;
}

.form-control:disabled:hover,
.form-select:disabled:hover {
  border-color: #606060 !important;
}

.form-control.list-editor:focus {
  background-color: #222;
  box-shadow: none !important;
}

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

textarea::input-placeholder {
  color: #bbb !important;
}

textarea:focus::input-placeholder {
  color: #909090 !important;
}

textarea::placeholder {
  color: #bbb !important;
}

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

.form-select:hover {
  border-color: #0090ff;
  background-color: #494949;
}

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

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

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

.generate:active {
  background-color: #be1f54;
  border-color: #be1f54;
}

.lets-encrypt-note {}

.toggle-psw-visibility-icon {}

.show-passwords-enabled-action {}

.ftp-path-value,
.hint,
td.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 !important;
  font-weight: 400 !important;
  color: #eee !important;
  border: 1px solid #707070 !important;
  background: rgb(48 48 48) !important;
  background: linear-gradient(0deg, rgb(48 48 48 / 100%) 0%, rgb(53 53 53 / 100%) 35%, rgb(69 69 69 / 100%) 100%) !important;
  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%) !important;
  text-shadow: 0 1px 1px rgb(0 0 0 / 35%) !important;
}

.to-shortcuts:hover,
.to-top:hover {
  color: #fff !important;
  text-shadow: 1px 1px rgb(0 0 0 / 25%) !important;
  border: 1px solid #0098ff !important;
  background: linear-gradient(0deg, rgb(58 58 58 / 100%) 0%, rgb(68 68 68 / 100%) 35%, rgb(79 79 79 / 100%) 100%) !important;
  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%) !important;
  transition: 0.2s;
}

.to-shortcuts:active,
.to-top:active,
.to-shortcuts:focus,
.to-top:focus {
  border: 1px solid #0066b4 !important;
  background: linear-gradient(0deg, rgb(69 69 69 / 100%) 0%, rgb(53 53 53 / 100%) 35%, rgb(48 48 48 / 100%) 100%) !important;
  color: #d4d4d4 !important;
  text-shadow: 0 -1px 1px rgb(0 0 0 / 55%) !important;
  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%) !important;
}

.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-td {

}

.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;
}

.mail-infoblock a: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;
}

/* MAIN MENU COLLAPSED */
.console-output {
  color: #dadada !important;
}

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;
}

.search-input {
  background-color: #212121;
  border: 1px solid #454545;
  box-shadow: 0 1px 1px rgb(0 0 0 / 40%) !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;
}

@media screen and (max-width: 950px) {
  .helper-container {
    display: none;
  }
}

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

.collapse-header {
  background: #454545;
  border: 1px solid #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;
}