@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

html, body, html body {
  background-color: #050814 !important;
  background-image:
    radial-gradient(1100px 480px at 8% -8%, rgba(16, 188, 85, 0.16), transparent 52%),
    radial-gradient(900px 520px at 100% 0%, rgba(30, 99, 212, 0.12), transparent 48%),
    radial-gradient(800px 500px at 50% 120%, rgba(30, 99, 212, 0.12), transparent 55%) !important;
  color: #e8f4ff !important;
  font-family: Inter, system-ui, sans-serif !important;
}

body, input, select, textarea, td, th, optgroup, button {
  font-family: Inter, system-ui, sans-serif !important;
}

#page, #container, #wrapper, #layout, #main, table#page, table#layout {
  background: transparent !important;
  background-image: none !important;
}

#topbar_client, #topbar_admin, #topbar {
  color: #9fdfff !important;
}
#topbar {
  display: flex !important;
  align-items: center;
  gap: 14px;
  height: 72px !important;
  min-height: 72px !important;
  margin: 0 !important;
  padding: 0 18px 0 0 !important;
  box-sizing: border-box !important;
  background: rgba(7, 11, 22, 0.92) !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(16, 188, 85, 0.28) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  color: #e8f4ff !important;
  position: sticky;
  top: 0;
  z-index: 40;
  overflow: visible !important;
}
.fx-brand {
  display: flex;
  align-items: center;
  flex: 0 0 248px;
  align-self: stretch;
  width: 248px;
  height: 73px;
  margin: 0 0 -1px 0;
  padding: 0 16px;
  box-sizing: border-box;
  background:
    radial-gradient(280px 240px at 0% 0%, rgba(16, 188, 85, 0.18), transparent 70%),
    #08101f;
  border-right: 1px solid rgba(16, 188, 85, 0.18);
  position: relative;
  z-index: 1;
}
.fx-brand img {
  display: block;
  width: auto;
  max-width: 196px;
  max-height: 48px;
  filter: drop-shadow(0 0 10px rgba(16, 188, 85, 0.35));
}
#topbar_admin,
#topbar_client {
  display: flex !important;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  height: auto !important;
  padding: 0 0 0 6px !important;
  overflow: hidden;
  background: transparent !important;
  background-image: none !important;
}
#topbar_client_tunein,
#topbar_client > img {
  display: none !important;
}
#topbar a,
#topbar a:link,
#topbar a:visited {
  color: #10bc55 !important;
}
.fx-top-song {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 560px;
  height: 44px;
  padding: 0 16px 0 8px;
  border: 1px solid rgba(16, 188, 85, 0.22);
  border-radius: 999px;
  background: linear-gradient(120deg, rgba(16, 188, 85, 0.1), rgba(30, 99, 212, 0.1) 45%, rgba(7, 16, 30, 0.4) 70%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.fx-top-onair {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(16, 188, 85, 0.12);
  color: #10bc55;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.fx-top-onair::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(16, 188, 85, 0.18);
}
.fx-top-onair.is-off {
  background: rgba(255, 77, 109, 0.12);
  color: #ff4d6d;
}
#fx-top-title {
  min-width: 0;
  overflow: hidden;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#fx-top-artist {
  min-width: 0;
  overflow: hidden;
  color: #8ea3c7;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#topbar #client-audio,
#topbar #client-player,
#topbar #nowplaying {
  display: none !important;
}
button.fx-top-play,
.fx-top-play {
  position: relative;
  flex: 0 0 36px;
  width: 36px !important;
  height: 36px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: linear-gradient(160deg, #10bc55, #1e63d4) !important;
  box-shadow: 0 6px 16px rgba(16, 188, 85, 0.28) !important;
  color: #061018 !important;
  cursor: pointer;
}
.fx-top-play::before {
  content: "\f04b";
  font-family: FontAwesome;
  font-size: 13px;
  color: #061018;
}
.fx-top-play.is-playing::before { content: "\f04d"; }
.fx-clock,
.fx-user {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  background: rgba(15, 23, 48, 0.9);
  border: 1px solid rgba(16, 188, 85, 0.16);
  color: #9fdfff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.fx-clock::before,
.fx-user::before {
  font-family: FontAwesome;
  margin-right: 8px;
  color: #10bc55;
}
.fx-clock::before { content: "\f017"; }
.fx-user::before { content: "\f007"; }
button.fx-theme-btn,
.fx-theme-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px !important;
  height: 36px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(16, 188, 85, 0.16) !important;
  border-radius: 10px !important;
  background: rgba(15, 23, 48, 0.9) !important;
  box-shadow: none !important;
  color: #10bc55 !important;
  cursor: pointer;
}
.fx-theme-btn::before {
  content: "\f185";
  font-family: FontAwesome;
  font-size: 14px;
  color: inherit;
}
html.fx-light .fx-theme-btn::before { content: "\f186"; }
button.fx-theme-btn:hover,
html.fx-light button.fx-theme-btn:hover {
  background: rgba(16, 188, 85, 0.16) !important;
  color: #10bc55 !important;
  filter: none;
  transform: none;
  box-shadow: none !important;
}
html.fx-light button.fx-theme-btn:hover {
  background: rgba(16, 188, 85, 0.14) !important;
  color: #10bc55 !important;
}
.fx-menu-btn {
  display: none !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-height: 0 !important;
  margin-left: 10px;
  padding: 0 !important;
  border: 1px solid rgba(16, 188, 85, 0.25) !important;
  border-radius: 10px !important;
  background: rgba(8, 16, 36, 0.9) !important;
  box-shadow: none !important;
  cursor: pointer;
}
.fx-menu-btn span,
.fx-menu-btn span::before,
.fx-menu-btn span::after {
  display: block;
  width: 16px;
  height: 2px;
  background: #10bc55;
  border-radius: 2px;
  position: relative;
}
.fx-menu-btn span::before,
.fx-menu-btn span::after {
  content: "";
  position: absolute;
  left: 0;
}
.fx-menu-btn span::before { top: -5px; }
.fx-menu-btn span::after { top: 5px; }
.fx-nav-overlay {
  display: none;
}
#logobar {
  position: absolute !important;
  top: 28px;
  right: 24px;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  z-index: 41;
}
#logobar > img { display: none !important; }
#myTopnav { display: none !important; }

@media screen and (max-width: 768px) {
  .fx-menu-btn { display: inline-flex !important; }
  .fx-brand {
    flex: 1 1 auto;
    width: auto;
    max-width: 150px;
    height: 72px;
    padding-left: 8px;
  }
  .fx-clock { display: none !important; }
  .fx-user {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .fx-top-song { max-width: 46vw; padding-right: 10px; }
  #fx-top-artist { display: none; }
  #leftcolumn {
    display: block !important;
    position: fixed !important;
    top: 72px !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 248px !important;
    margin: 0 !important;
    float: none !important;
    padding: 12px 8px 24px !important;
    box-sizing: border-box !important;
    transform: translateX(-105%);
    transition: transform 0.2s ease;
    z-index: 50;
    overflow-y: auto;
    background: linear-gradient(180deg, #08101f, #0a1428) !important;
    border-right: 1px solid rgba(16, 188, 85, 0.25) !important;
  }
  body.fx-nav-open #leftcolumn { transform: translateX(0); }
  body.fx-nav-open .fx-nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(5, 8, 20, 0.55);
    z-index: 45;
  }
  html:has(#leftcolumn) #header,
  html:has(#leftcolumn) #maincontent {
    margin-left: 0 !important;
  }
}

#logobar, .logobar, #logobar td, #logoheader, #branding {
  background: #070b16 !important;
  background-image: none !important;
  border-bottom: 2px solid #10bc55 !important;
  box-shadow: 0 0 28px rgba(16, 188, 85, 0.25) !important;
}
#logobar img {
  filter: drop-shadow(0 0 10px rgba(16, 188, 85, 0.35));
}

#header, #pageheader, #accountheader {
  background: linear-gradient(90deg, #071224 0%, #151033 50%, #071224 100%) !important;
  background-image: linear-gradient(90deg, #071224 0%, #151033 50%, #071224 100%) !important;
  color: #fff !important;
  height: auto !important;
  min-height: 57px;
  overflow: visible !important;
  box-shadow: inset 0 -1px 0 rgba(30, 99, 212, 0.25);
}
#header #header_right,
#header_right,
.headermetergroup {
  height: auto !important;
  overflow: visible !important;
}
#header, #header h1, #header h2, #pageheader, #pageheader h1, #pageheader h2 {
  color: #e8f4ff !important;
}
#header h1, #header h2 {
  font-family: Inter, system-ui, sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

#sidebar, #left, #leftnav, td#sidebar, #leftcolumn, #navigation, #nav {
  background: linear-gradient(180deg, #08101f, #0a1428) !important;
  background-image: none !important;
  color: #d7e8ff !important;
  border-right: 1px solid rgba(16, 188, 85, 0.25) !important;
}
#leftcolumn {
  background: transparent !important;
  border-right: 0 !important;
}

@media screen and (min-width: 769px) {
  html:has(#leftcolumn),
  html:has(#leftcolumn) body {
    overscroll-behavior-y: none;
    background-image:
      linear-gradient(90deg, #08101f 0, #0a1428 248px, transparent 248px),
      radial-gradient(1100px 480px at 8% -8%, rgba(16, 188, 85, 0.16), transparent 52%),
      radial-gradient(900px 520px at 100% 0%, rgba(30, 99, 212, 0.12), transparent 48%),
      radial-gradient(800px 500px at 50% 120%, rgba(30, 99, 212, 0.12), transparent 55%) !important;
    background-attachment: fixed, fixed, fixed, fixed !important;
  }
  #leftcolumn {
    position: fixed !important;
    top: 72px !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 248px !important;
    margin: 0 !important;
    float: none !important;
    z-index: 30;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 12px 8px 24px !important;
    box-sizing: border-box !important;
    background:
      radial-gradient(280px 240px at 0% -72px, rgba(16, 188, 85, 0.16), transparent 70%),
      linear-gradient(180deg, #08101f, #0a1428) !important;
    border-right: 1px solid rgba(16, 188, 85, 0.25) !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(16, 188, 85, 0.28) transparent;
  }
  html:has(#leftcolumn) #header,
  html:has(#leftcolumn) #maincontent {
    margin-left: 248px !important;
  }
  html:has(#leftcolumn) #maincontent {
    margin-right: 10px !important;
    margin-top: 5px !important;
  }
}
#navigation,
#navigation-content {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
}
#navigation-content {
  padding: 6px 4px 10px !important;
}
#navigation .navigation-section,
#navigation .navigation-section.last {
  background: rgba(10, 18, 40, 0.82) !important;
  background-image: none !important;
  border: 1px solid rgba(16, 188, 85, 0.14) !important;
  border-radius: 14px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 10px 12px 12px !important;
  margin: 0 0 8px 0 !important;
  clear: both;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
#navigation .navigation-section:hover {
  border-color: rgba(16, 188, 85, 0.35) !important;
  box-shadow: 0 0 18px rgba(16, 188, 85, 0.12);
}
#navigation .nav-section-icon {
  float: none !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 8px 8px 0 !important;
  object-fit: contain;
  vertical-align: middle;
  filter: drop-shadow(0 0 8px rgba(16, 188, 85, 0.45));
}
#navigation .nav-section-content {
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
#navigation h3,
#navigation .nav-section-content h3 {
  color: #10bc55 !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(16, 188, 85, 0.35);
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
}
#navigation .navigation-links,
#navigation .list-group {
  list-style: none !important;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(16, 188, 85, 0.18) !important;
  border-radius: 10px !important;
  background: rgba(5, 10, 22, 0.45) !important;
}
#navigation .navigation-links li,
#navigation .list-group-item {
  list-style: none !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(16, 188, 85, 0.12) !important;
  background: transparent !important;
}
#navigation .navigation-links li:last-child,
#navigation .list-group-item:last-child {
  border-bottom: 0 !important;
}
#autodj_control_buttons {
  display: flex !important;
  float: none !important;
  clear: both;
  width: auto !important;
  gap: 6px;
  margin: 0 0 10px !important;
  padding: 6px;
  border: 1px solid rgba(16, 188, 85, 0.18);
  border-radius: 12px;
  background: rgba(5, 10, 22, 0.55);
  text-align: left;
}
#autodj_control_buttons a,
#navigation #autodj_control_buttons a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: rgba(16, 188, 85, 0.08) !important;
  color: #9fdfff !important;
  box-shadow: none !important;
}
#autodj_control_buttons img {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
#autodj_control_buttons a::before,
#navigation #autodj_control_buttons a::before,
#navigation .navigation-links #autodj_control_buttons a::before {
  content: "\f1de" !important;
  font-family: FontAwesome !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: inherit !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
  flex: none !important;
  line-height: 1 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  text-shadow: none !important;
}
#autodj_control_buttons a[href*="switch=down"]::before,
#navigation #autodj_control_buttons a[href*="switch=down"]::before {
  content: "\f04d" !important;
}
#autodj_control_buttons a[href*="switch=up"]::before,
#navigation #autodj_control_buttons a[href*="switch=up"]::before {
  content: "\f04b" !important;
}
#autodj_control_buttons a[href*="nextsong"]::before,
#navigation #autodj_control_buttons a[href*="nextsong"]::before {
  content: "\f051" !important;
}
#autodj_control_buttons a:hover,
#navigation #autodj_control_buttons a:hover {
  background: rgba(16, 188, 85, 0.22) !important;
  color: #fff !important;
}
#autodj_control_buttons a[href*="switch=down"]:hover {
  background: rgba(30, 99, 212, 0.28) !important;
}
#autodj_control_buttons a[href*="switch=up"]:hover {
  background: rgba(16, 188, 85, 0.28) !important;
}
#sidebar a, #left a, td#sidebar a, #leftcolumn a, #navigation a {
  color: #c9ddff !important;
  text-decoration: none !important;
}
#navigation .navigation-links a,
#navigation .list-group-item-action {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100% !important;
  box-sizing: border-box !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  color: #d7e8ff !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-left: 3px solid transparent !important;
  padding: 7px 10px 7px 8px !important;
  margin: 0 !important;
  box-shadow: none !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#navigation .navigation-links a::before,
#navigation .list-group-item-action::before {
  content: "\f0c1";
  font-family: FontAwesome;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  line-height: 28px;
  text-align: center;
  speak: none;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(16, 188, 85, 0.1);
  color: #10bc55;
  text-shadow: none;
  box-shadow: inset 0 0 0 1px rgba(16, 188, 85, 0.12);
}
#navigation .navigation-links a[href="index.php"]::before,
#navigation .navigation-links a[href$="/index.php"]::before { content: "\f015"; background: rgba(16, 188, 85, 0.16); }
#navigation .navigation-links a[href*="page=quicklinks"]::before { content: "\f0e7"; background: rgba(255, 184, 77, 0.16); color: #ffb84d; }
#navigation .navigation-links a[href*="page=configure"]::before,
#navigation .navigation-links a[href*="page=settings"]::before { content: "\f013"; background: rgba(30, 99, 212, 0.18); color: #c5d8ff; }
#navigation .navigation-links a[href*="page=widgets"]::before { content: "\f00a"; background: rgba(16, 188, 85, 0.14); }
#navigation .navigation-links a[href*="page=djaccounts"]::before { content: "\f130"; background: rgba(30, 99, 212, 0.14); color: #9eb6ef; }
#navigation .navigation-links a[href*="page=statistics"]::before,
#navigation .navigation-links a[href*="page=accountstats"]::before { content: "\f080"; background: rgba(30, 99, 212, 0.16); color: #c5d8ff; }
#navigation .navigation-links a[href*="page=livestats"]::before { content: "\f025"; background: rgba(16, 188, 85, 0.16); }
#navigation .navigation-links a[href*="page=logs"]::before { content: "\f15c"; background: rgba(142, 163, 199, 0.16); color: #9fdfff; }
#navigation .navigation-links a[href*="action=start"]::before { content: "\f04b"; background: rgba(16, 188, 85, 0.16); color: #10bc55; }
#navigation .navigation-links a[href*="action=stop"]::before { content: "\f04d"; background: rgba(255, 77, 109, 0.16); color: #ff4d6d; }
#navigation .navigation-links a[href*="action=restart"]::before { content: "\f021"; background: rgba(30, 99, 212, 0.18); color: #c5d8ff; }
#navigation .navigation-links a[href*="page=serveradmin"]::before,
#navigation .navigation-links a[href*="page=serverstatus"]::before { content: "\f132"; background: rgba(16, 188, 85, 0.14); color: #10bc55; }
#navigation .navigation-links a[href*="page=playlists"]::before { content: "\f03a"; background: rgba(16, 188, 85, 0.14); }
#navigation .navigation-links a[href*="page=library"]::before,
#navigation .navigation-links a[href*="page=media"]::before { content: "\f001"; background: rgba(30, 99, 212, 0.14); color: #9eb6ef; }
#navigation .navigation-links a[href*="page=filemanager"]::before { content: "\f07b"; background: rgba(255, 184, 77, 0.16); color: #ffb84d; }
#navigation .navigation-links a[href*="page=accounts"]::before { content: "\f0a0"; background: rgba(16, 188, 85, 0.14); }
#navigation .navigation-links a[href*="page=staffaccounts"]::before { content: "\f0c0"; background: rgba(30, 99, 212, 0.16); color: #c5d8ff; }
#navigation .navigation-links a[href*="page=emails"]::before { content: "\f0e0"; background: rgba(16, 188, 85, 0.14); }
#navigation .navigation-links a[href*="page=rpchosts"]::before { content: "\f0c1"; }
#navigation .navigation-links a[href*="page=accounttemplates"]::before { content: "\f00a"; }
#navigation .navigation-links a[href*="page=news"]::before { content: "\f1ea"; background: rgba(255, 184, 77, 0.14); color: #ffb84d; }
#navigation .navigation-links a[href*="page=utilities"]::before { content: "\f0ad"; background: rgba(142, 163, 199, 0.16); }
#navigation .navigation-links a[href*="logout"]::before { content: "\f08b"; background: rgba(30, 99, 212, 0.16); color: #9eb6ef; }
#navigation .navigation-links a[href*="reproductorweb"]::before { content: "\f144"; background: rgba(16, 188, 85, 0.16); }
#navigation .navigation-links a:hover,
#navigation .list-group-item-action:hover {
  color: #fff !important;
  background: rgba(16, 188, 85, 0.12) !important;
  border-left-color: #10bc55 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
#navigation .navigation-links a:hover::before {
  box-shadow: 0 0 10px rgba(16, 188, 85, 0.25);
}
#topbar {
  background-image: none !important;
}
#sidebar b, #sidebar strong, .menutitle, td#sidebar b {
  color: #10bc55 !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(16, 188, 85, 0.35);
}
.anuncio {
  margin-top: 8px;
  padding: 12px 10px !important;
  border: 1px solid rgba(16, 188, 85, 0.14);
  border-radius: 14px;
  background: rgba(10, 18, 40, 0.7);
}
.anuncio h3 {
  color: #e8f4ff !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#content,
td#content,
#maincontent,
#right,
.contentarea,
.content-area,
.content-top,
.content-top-inner,
.content-container,
.content-container-inner,
.content-container-innermost,
.content-bottom,
.content-bottom-inner,
#heading_content,
#heading_right {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #e8f4ff !important;
  border: 0 !important;
  box-shadow: none !important;
}

.content-area,
#content,
td#content,
#maincontent {
  padding: 16px 18px !important;
}

.tablewrapper {
  background: rgba(10, 18, 40, 0.78) !important;
  background-image: none !important;
  color: #e8f4ff !important;
  border: 1px solid rgba(16, 188, 85, 0.2) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(16, 188, 85, 0.06) !important;
  padding: 6px 10px !important;
  overflow: hidden !important;
}

#maincontent table,
#maincontent tbody,
#maincontent tr,
#maincontent td,
#maincontent th,
#content table,
#content tbody,
#content tr,
#content td,
#content th,
.content-area table,
.content-area tr,
.content-area td,
.content-container table,
.content-container td {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #e8f4ff !important;
}

#heading {
  padding: 14px 18px !important;
  margin: 0 0 16px 0 !important;
  border-radius: 16px !important;
  background: linear-gradient(90deg, rgba(16, 188, 85, 0.16), rgba(30, 99, 212, 0.2), rgba(30, 99, 212, 0.1)) !important;
  background-image: linear-gradient(90deg, rgba(16, 188, 85, 0.16), rgba(30, 99, 212, 0.2), rgba(30, 99, 212, 0.1)) !important;
  border: 1px solid rgba(16, 188, 85, 0.28) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
#heading h1, #heading_content h1 {
  color: #fff !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 15px !important;
  letter-spacing: 0.04em;
  text-transform: none;
  text-shadow: 0 0 12px rgba(16, 188, 85, 0.4);
  white-space: nowrap;
}
#heading h2, #heading_content h2 {
  color: #9fdfff !important;
  font-weight: 400 !important;
  font-size: 12px !important;
}

.box, .boxinner, .contentbox {
  background: rgba(12, 22, 48, 0.92) !important;
  background-image: none !important;
  border: 1px solid rgba(16, 188, 85, 0.22) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(16, 188, 85, 0.08) !important;
  overflow: hidden !important;
  color: #e8f4ff !important;
}
.boxtitle {
  background: linear-gradient(90deg, rgba(16, 188, 85, 0.28), rgba(30, 99, 212, 0.35), rgba(30, 99, 212, 0.18)) !important;
  background-image: linear-gradient(90deg, rgba(16, 188, 85, 0.28), rgba(30, 99, 212, 0.35), rgba(30, 99, 212, 0.18)) !important;
  color: #fff !important;
  font-family: Inter, system-ui, sans-serif !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 16px !important;
  text-shadow: 0 0 12px rgba(16, 188, 85, 0.45);
  border: 0 !important;
}
.boxcontent, .boxinner {
  color: #e8f4ff !important;
  background: transparent !important;
  background-image: none !important;
}

.fx-tracks-panel {
  background: rgba(10, 18, 40, 0.72) !important;
  border: 1px solid rgba(16, 188, 85, 0.2) !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(16, 188, 85, 0.05) !important;
  overflow: hidden !important;
}
.fx-tracks-label {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #10bc55 !important;
  text-shadow: 0 0 10px rgba(16, 188, 85, 0.35);
  padding: 12px 16px 8px !important;
  border-bottom: 1px solid rgba(16, 188, 85, 0.12);
}
.fx-tracks-panel .tablewrapper {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 6px 8px 10px !important;
}

.cc_recenttracks_list,
.cc_recenttracks_list table,
.cc_recenttracks_list tbody {
  background: transparent !important;
  background-image: none !important;
  color: #e8f4ff !important;
  width: 100%;
}
.cc_recenttracks_list table,
#content table,
#maincontent table,
.content-area table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 6px !important;
}
#content .cc_recenttracks_list tr td,
#maincontent .cc_recenttracks_list tr td,
.content-area .cc_recenttracks_list tr td,
.cc_recenttracks_list tr td {
  background: #152444 !important;
  background-image: none !important;
  color: #e8f4ff !important;
  padding: 11px 14px !important;
  border: 0 !important;
  vertical-align: middle !important;
}
#content .cc_recenttracks_list tr td:first-child,
#maincontent .cc_recenttracks_list tr td:first-child,
.cc_recenttracks_list tr td:first-child {
  border-radius: 12px 0 0 12px !important;
  border-left: 3px solid #10bc55 !important;
  width: 58px;
}
#content .cc_recenttracks_list tr td:last-child,
#maincontent .cc_recenttracks_list tr td:last-child,
.cc_recenttracks_list tr td:last-child {
  border-radius: 0 12px 12px 0 !important;
  color: #8ea3c7 !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right !important;
  width: 78px;
}
#content .cc_recenttracks_list tr:hover td,
#maincontent .cc_recenttracks_list tr:hover td,
.cc_recenttracks_list tr:hover td {
  background: #1c325c !important;
}
.cc_recenttracks_list img {
  width: 42px !important;
  height: 42px !important;
  object-fit: cover;
  border-radius: 10px !important;
  border: 1px solid rgba(16, 188, 85, 0.32) !important;
  box-shadow: 0 0 14px rgba(16, 188, 85, 0.18);
  background: linear-gradient(135deg, #0a1630, #1a1038) !important;
}

a { color: #10bc55 !important; text-decoration: none !important; }
a:hover { color: #fff !important; text-shadow: 0 0 10px #10bc55; }

input, select, textarea, .loginfield {
  background: #07101e !important;
  color: #e8f4ff !important;
  border: 1px solid rgba(16, 188, 85, 0.3) !important;
  border-radius: 8px !important;
}
input[type=submit], input[type=button], input[type=reset], button {
  background: linear-gradient(90deg, #10bc55, #1e63d4) !important;
  color: #061018 !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 20px rgba(16, 188, 85, 0.25) !important;
  cursor: pointer !important;
  transition: filter 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}
input[type=submit]:hover,
input[type=button]:hover,
input[type=reset]:hover,
button:hover {
  background: linear-gradient(90deg, #1e63d4, #10bc55) !important;
  color: #061018 !important;
  cursor: pointer !important;
  filter: brightness(1.14);
  box-shadow: 0 10px 26px rgba(16, 188, 85, 0.42), 0 0 18px rgba(30, 99, 212, 0.35) !important;
  transform: translateY(-1px);
}
input[type=submit]:active,
input[type=button]:active,
input[type=reset]:active,
button:active {
  transform: translateY(1px);
  filter: brightness(0.96);
  box-shadow: 0 4px 12px rgba(16, 188, 85, 0.22) !important;
}
input[type=submit]:disabled,
input[type=button]:disabled,
input[type=reset]:disabled,
button:disabled {
  cursor: default !important;
  opacity: 0.5;
  filter: none;
  transform: none;
  box-shadow: none !important;
}

#login_form, #login_block {
  background: rgba(10, 18, 40, 0.78) !important;
  border: 1px solid rgba(16, 188, 85, 0.3) !important;
  border-radius: 22px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5) !important;
  position: relative;
  z-index: 2;
  box-sizing: border-box !important;
  width: 360px !important;
  max-width: 92% !important;
  padding: 28px 28px 32px !important;
  margin: 28px auto 24px !important;
}
#login_form #login_logo,
#login_logo {
  display: block;
  margin: 0 auto 12px !important;
}
#login_form #login_table,
#login_table {
  width: 100% !important;
}
#login_form .loginfield,
#login_form input[type=text],
#login_form input[type=password] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 14px !important;
}
#login_form button[type=submit],
#login_form button {
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 18px !important;
}

html:has(#supersized),
html:has(#login_form),
body:has(#supersized),
body:has(#login_form) {
  background-color: #050814 !important;
  background-image: none !important;
  min-height: 100%;
  height: 100%;
  overflow: hidden;
}
#supersized,
#supersized li,
#supersized li.activeslide,
#supersized li.prevslide {
  z-index: 0 !important;
  background: #050814 !important;
  background-color: #050814 !important;
}
#supersized {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  filter: blur(5px) saturate(1.05);
  transform: scale(1.04);
}
#supersized img,
#supersized li img,
#supersized li.activeslide img,
#supersized li.prevslide img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
}
.page-container {
  position: relative;
  z-index: 2;
}
body:has(#login_form) .anuncio,
html:has(#login_form) .anuncio {
  position: relative;
  z-index: 2;
  width: min(420px, 92%);
  margin: 16px auto 0 !important;
  background: rgba(8, 14, 32, 0.55) !important;
}
body:has(#login_form) #footer,
html:has(#login_form) #footer {
  position: relative;
  z-index: 2;
  background: transparent !important;
}

#header .graph_bg,
.headermeter .graph_bg,
.graph_bg {
  display: block !important;
  width: 150px !important;
  height: 7px !important;
  padding: 0 !important;
  margin: 6px 0 0 0 !important;
  background: #152444 !important;
  background-image: none !important;
  border: 1px solid rgba(16, 188, 85, 0.18) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.35);
}
#header .graph_fg,
.headermeter .graph_fg,
.graph_fg {
  display: block !important;
  height: 7px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: linear-gradient(90deg, #10bc55, #1e63d4, #1e63d4) !important;
  background-image: linear-gradient(90deg, #10bc55, #1e63d4, #1e63d4) !important;
  background-color: #10bc55 !important;
  border-radius: 999px !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.streamstatus,
.headermeter,
.status-block {
  background-image: none !important;
}
.headermeter, .status-block {
  background: rgba(6, 12, 28, 0.92) !important;
  background-color: rgba(6, 12, 28, 0.92) !important;
  border: 1px solid rgba(16, 188, 85, 0.28) !important;
  border-radius: 18px !important;
  color: #e8f4ff !important;
  box-shadow: 0 0 14px rgba(16, 188, 85, 0.12);
  padding: 8px 12px 10px !important;
}
.status-block .label {
  color: #8ea3c7 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.status-block .status,
.status-block .status span {
  background: transparent !important;
  color: #e8f4ff !important;
  font-weight: 700 !important;
}
.status-block.fx-ok {
  border-color: rgba(16, 188, 85, 0.55) !important;
  box-shadow: 0 0 16px rgba(16, 188, 85, 0.18);
}
.status-block.fx-ok .status,
.status-block.fx-ok .status span {
  color: #10bc55 !important;
  text-shadow: 0 0 10px rgba(16, 188, 85, 0.55);
}
.status-block.fx-off {
  border-color: rgba(255, 77, 109, 0.5) !important;
  box-shadow: 0 0 16px rgba(255, 77, 109, 0.16);
}
.status-block.fx-off .status,
.status-block.fx-off .status span {
  color: #ff4d6d !important;
  text-shadow: 0 0 10px rgba(255, 77, 109, 0.5);
}

.fx-stats-panel {
  margin-bottom: 18px !important;
}
.fx-livestats {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 10px 12px 14px;
}
.fx-gauge-wrap {
  flex: 0 0 196px;
  min-width: 180px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
}
#listenergauge.fx-gauge-src {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.fx-gauge-ui {
  width: 180px;
  text-align: center;
}
.fx-gauge-ring {
  position: relative;
  width: 168px;
  height: 168px;
  margin: 0 auto;
}
.fx-gauge-ring svg {
  width: 168px;
  height: 168px;
  display: block;
  filter: drop-shadow(0 0 12px rgba(16, 188, 85, 0.35));
}
.fx-gauge-bg,
.fx-gauge-fg {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
  transform: rotate(135deg);
  transform-origin: 60px 60px;
}
.fx-gauge-bg {
  stroke: #152444;
  stroke-dasharray: 245 327;
}
.fx-gauge-fg {
  stroke: url(#fxGaugeGrad);
  stroke-dasharray: 0 327;
  transition: stroke-dasharray 0.55s ease;
}
.fx-gauge-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.fx-gauge-value {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1;
  text-shadow: 0 0 18px rgba(16, 188, 85, 0.65);
}
.fx-gauge-caption {
  margin-top: 6px;
  font-size: 10px !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8ea3c7 !important;
}
.fx-gauge-sub {
  margin-top: 8px;
  font-size: 12px;
  color: #10bc55 !important;
  letter-spacing: 0.06em;
  text-shadow: 0 0 8px rgba(16, 188, 85, 0.35);
}

#content .listtable,
#maincontent .listtable,
.content-area .listtable,
.listtable {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  width: 100%;
  color: #e8f4ff !important;
}
#content .listtable th,
#maincontent .listtable th,
.listtable th {
  background: transparent !important;
  background-image: none !important;
  color: #10bc55 !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(16, 188, 85, 0.3);
  border: 0 !important;
  border-bottom: 1px solid rgba(16, 188, 85, 0.22) !important;
  padding: 10px 8px !important;
  height: auto !important;
}
#content .listtable td,
#maincontent .listtable td,
.content-area .listtable td,
.listtable td {
  background-image: none !important;
  color: #e8f4ff !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(16, 188, 85, 0.08) !important;
  padding: 9px 8px !important;
}
#content .listtable tbody tr:nth-child(odd) td,
#maincontent .listtable tbody tr:nth-child(odd) td,
.listtable tbody tr:nth-child(odd) td,
.listtable tbody tr:nth-child(odd) td.rowodd,
.listtable tbody tr:nth-child(odd) td.roweven {
  background: rgba(8, 16, 36, 0.55) !important;
}
#content .listtable tbody tr:nth-child(even) td,
#maincontent .listtable tbody tr:nth-child(even) td,
.listtable tbody tr:nth-child(even) td,
.listtable tbody tr:nth-child(even) td.rowodd,
.listtable tbody tr:nth-child(even) td.roweven {
  background: rgba(16, 188, 85, 0.07) !important;
}
#content .listtable tbody tr:hover td,
#maincontent .listtable tbody tr:hover td,
.listtable tbody tr:hover td {
  background: rgba(16, 188, 85, 0.16) !important;
}
.listtable img {
  vertical-align: middle;
}

#footer, #footer_content {
  background: transparent !important;
  color: #8ea3c7 !important;
}

#pagetabs.tabset,
.tabset {
  display: block !important;
  overflow: hidden;
  background: transparent !important;
  background-image: none !important;
  height: auto !important;
  min-height: 36px;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(16, 188, 85, 0.28) !important;
  white-space: nowrap;
}
.tab,
.tab_left,
.tab_center,
.tab_right,
.tab_slack,
.tab_left_hover,
.tab_center_hover,
.tab_right_hover,
.tab_left_active,
.tab_center_active,
.tab_right_active,
.smalltabs.tab_left,
.smalltabs.tab_right,
.smalltabs.tab_center,
.smalltabs.tab_center_hover,
.smalltabs.tab_center_active {
  background: transparent !important;
  background-image: none !important;
  height: auto !important;
  float: left !important;
  display: block !important;
}
.tab {
  width: auto !important;
  margin: 0 2px -1px 0 !important;
}
.tab_slack {
  float: left !important;
  width: auto !important;
}
.tab_left,
.tab_right,
.tab_left_hover,
.tab_right_hover,
.tab_left_active,
.tab_right_active {
  width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.tab_center,
.tab_center_hover,
.tab_center_active {
  padding: 0 !important;
  width: auto !important;
}
.tab_center a,
.tab_center a:link,
.tab_center a:visited,
.tab_center a:active,
.tab_center_hover a,
.tab_center_active a {
  display: inline-block !important;
  width: auto !important;
  white-space: nowrap !important;
  padding: 8px 14px !important;
  margin: 0 !important;
  border: 1px solid transparent !important;
  border-bottom: 0 !important;
  border-radius: 8px 8px 0 0 !important;
  background: transparent !important;
  color: #8ea3c7 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.tab_center_hover a,
.tab_center a:hover {
  color: #10bc55 !important;
  background: rgba(16, 188, 85, 0.08) !important;
  border-color: rgba(16, 188, 85, 0.2) rgba(16, 188, 85, 0.2) transparent !important;
}
.tab_center_active a,
.tab_center_active a:link,
.tab_center_active a:visited,
.tab_center_active a:hover,
.tab_center_active a:active {
  color: #10bc55 !important;
  background: rgba(10, 18, 40, 0.95) !important;
  border-color: rgba(16, 188, 85, 0.35) rgba(16, 188, 85, 0.35) rgba(10, 18, 40, 0.95) !important;
  box-shadow: none !important;
}
.tab_page,
.tab_page_list,
fieldset.tab_page,
.smalltabs.tab_page,
.smalltabs.tab_page_list {
  background: rgba(10, 18, 40, 0.55) !important;
  background-image: none !important;
  border: 1px solid rgba(16, 188, 85, 0.28) !important;
  border-top: 0 !important;
  border-radius: 0 0 14px 14px !important;
  color: #e8f4ff !important;
  padding: 16px 18px !important;
}
.tab_page td,
.tab_page th,
.tab_page label,
.tab_page p {
  color: #c9ddff !important;
  background-image: none !important;
}
.tab_page table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  width: 100%;
}
.tab_page table td,
.tab_page table th {
  padding: 8px 10px !important;
  border-bottom: 1px solid rgba(16, 188, 85, 0.08) !important;
}
#content .tab_page table tr:nth-child(odd) td,
#maincontent .tab_page table tr:nth-child(odd) td,
.tab_page table tr:nth-child(odd) td {
  background: rgba(8, 16, 36, 0.55) !important;
}
#content .tab_page table tr:nth-child(even) td,
#maincontent .tab_page table tr:nth-child(even) td,
.tab_page table tr:nth-child(even) td {
  background: rgba(16, 188, 85, 0.07) !important;
}
#content .tab_page table tr:hover td,
#maincontent .tab_page table tr:hover td,
.tab_page table tr:hover td {
  background: rgba(16, 188, 85, 0.16) !important;
}
.tab_page fieldset {
  border: 1px solid rgba(16, 188, 85, 0.12) !important;
  border-radius: 12px;
  padding: 10px 12px;
}
.tab_page legend {
  color: #10bc55 !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ctooltip,
.ctooltip_ml,
.ctooltip_mr,
.ctooltip_bl,
.ctooltip_br,
.ctipcontent,
.ctipcontent p,
.ctipcontent span,
.ctipcontent div,
.ctipcontent td {
  color: #1a2744 !important;
  text-shadow: none !important;
}
.ctipcontent a,
.ctooltip_ml a {
  color: #0a6b8a !important;
}
.ctiptitle,
.ctiptitle *,
.ctooltip_tl,
.ctooltip_tr {
  color: #fff !important;
}

tr.highlight,
tr.highlight td,
tr.highlight td.rowodd,
tr.highlight td.roweven {
  background-image: none !important;
  background-color: rgba(16, 188, 85, 0.12) !important;
}
#rowover {
  background: #10bc55 !important;
  background-image: none !important;
  height: 2px !important;
  box-shadow: 0 0 10px rgba(16, 188, 85, 0.65);
}
#rowovertab {
  background: rgba(10, 18, 40, 0.96) !important;
  background-image: none !important;
  border: 1px solid rgba(16, 188, 85, 0.35) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 22px rgba(16, 188, 85, 0.14) !important;
  color: #e8f4ff !important;
  width: 380px !important;
  height: auto !important;
  min-height: 88px;
  padding: 6px 12px 12px !important;
}
#rowovertab,
#rowovertab_details,
#rowovertab_loading,
#rowovertab * {
  color: #e8f4ff !important;
}
#rowovertab a {
  color: #10bc55 !important;
}
#rowovertab_streamtitle,
#rowovertab_resellername {
  color: #fff !important;
  font-family: Inter, system-ui, sans-serif !important;
  letter-spacing: 0.03em;
  text-shadow: 0 0 10px rgba(16, 188, 85, 0.35);
}
#rowovertab_songtitle {
  color: #10bc55 !important;
}

.piechart,
.statspiecell {
  background: #0b1224 !important;
  background-color: #0b1224 !important;
  background-image: none !important;
  border-radius: 12px;
}
.piechart canvas,
.statspiecell canvas {
  background: transparent !important;
  background-color: transparent !important;
}

.box.buttonbar {
  overflow: visible !important;
}
.buttonbar ul,
.buttonbar ul.rightbuttons {
  height: auto !important;
  min-height: 28px;
}
.buttonbar li div a {
  color: #c9ddff !important;
}
.buttonbar li.buttonbar_enabled:hover {
  background: rgba(16, 188, 85, 0.12) !important;
  border: 1px solid rgba(16, 188, 85, 0.35) !important;
  background-image: none !important;
}
.buttonbar li.buttonbar_enabled:hover div a {
  color: #fff !important;
}
.buttonbar li.multiple_account_button,
.buttonbar li.multiple_account_button div,
.buttonbar li.multiple_account_button div a {
  cursor: pointer !important;
}
.buttonbar li.multiple_account_button {
  opacity: 0.9 !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, opacity 0.16s ease;
}
.buttonbar li.multiple_account_button.buttonbar_enabled {
  opacity: 1 !important;
}
.buttonbar li.multiple_account_button:hover,
.buttonbar li.multiple_account_button.buttonbar_enabled:hover {
  cursor: pointer !important;
  opacity: 1 !important;
  background: rgba(16, 188, 85, 0.16) !important;
  background-image: none !important;
  border: 1px solid rgba(16, 188, 85, 0.5) !important;
  box-shadow: 0 0 16px rgba(16, 188, 85, 0.28), inset 0 0 10px rgba(16, 188, 85, 0.08);
  transform: translateY(-1px);
}
.buttonbar li.multiple_account_button:hover div a,
.buttonbar li.multiple_account_button.buttonbar_enabled:hover div a {
  color: #fff !important;
  cursor: pointer !important;
  text-shadow: 0 0 10px rgba(16, 188, 85, 0.55);
}
.buttonbar li.multiple_account_button:active {
  transform: translateY(1px);
  box-shadow: 0 0 8px rgba(16, 188, 85, 0.18);
}
.buttonbar_divider {
  border-left: 1px solid rgba(16, 188, 85, 0.28) !important;
  border-right: 0 !important;
  background: transparent !important;
}
.buttonbar_vdivider {
  border-top: 1px solid rgba(16, 188, 85, 0.18) !important;
  border-bottom: 0 !important;
}

@media screen and (max-width: 768px) {
  .box.buttonbar,
  #accounts_bottombar.buttonbar {
    height: auto !important;
    overflow: visible !important;
    margin-bottom: 12px !important;
  }
  .buttonbar .boxcontent {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    height: auto !important;
    padding: 10px 8px !important;
  }
  .buttonbar ul,
  .buttonbar ul.rightbuttons {
    float: none !important;
    clear: both !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .buttonbar ul.rightbuttons {
    order: 1;
  }
  .buttonbar ul:not(.rightbuttons) {
    order: 0;
  }
  .buttonbar li,
  .buttonbar li.buttonbar_right,
  .buttonbar li.buttonbar_enabled,
  .buttonbar li.buttonbar_nopad,
  .buttonbar li.buttonbar_nopad.buttonbar_padleft {
    float: none !important;
    box-sizing: border-box !important;
    flex: 1 1 calc(50% - 6px) !important;
    width: auto !important;
    max-width: calc(50% - 6px) !important;
    height: auto !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    opacity: 1 !important;
    border: 1px solid rgba(16, 188, 85, 0.22) !important;
    border-radius: 10px !important;
    background: rgba(8, 16, 36, 0.72) !important;
    display: flex !important;
    align-items: center !important;
  }
  .buttonbar ul:not(.rightbuttons) li,
  .buttonbar li.btnnew,
  .buttonbar li.boxsearch,
  .buttonbar li.boxsort:not(.pagenav) {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
  .buttonbar li.buttonbar_enabled:hover,
  .buttonbar li.buttonbar_nopad.buttonbar_enabled:hover,
  .buttonbar li.multiple_account_button:hover {
    padding: 8px 10px !important;
    background: rgba(16, 188, 85, 0.16) !important;
    border-color: rgba(16, 188, 85, 0.45) !important;
    cursor: pointer !important;
  }
  .buttonbar li.multiple_account_button,
  .buttonbar li.multiple_account_button div,
  .buttonbar li.multiple_account_button div a {
    cursor: pointer !important;
  }
  .buttonbar li div {
    height: auto !important;
    min-height: 18px;
    padding-top: 1px !important;
    width: 100%;
  }
  .buttonbar li div a {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #e8f4ff !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .buttonbar li.pagenav {
    flex: 0 0 44px !important;
    max-width: 44px !important;
    min-width: 44px !important;
    justify-content: center;
  }
  .buttonbar li.pagenav.boxsort {
    flex: 1 1 auto !important;
    max-width: none !important;
    min-width: 72px !important;
  }
  .buttonbar li.buttonbar_box input,
  .buttonbar li.buttonbar_box select,
  .buttonbar li.boxsearch input,
  .buttonbar #accountsearch {
    width: 100% !important;
    max-width: 100% !important;
    height: 32px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
  }
  .buttonbar li.buttonbar_divider,
  .buttonbar ul li.buttonbar_divider,
  .buttonbar .buttonbar_divider,
  .buttonbar .buttonbar_vdivider,
  .buttonbar_vdivider {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    background: none !important;
  }
  #viewoptions {
    order: 2;
    width: 100% !important;
    margin: 4px 0 0 !important;
  }
  #viewoptions form {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  #viewoptions select,
  #viewoptions .acct_view_field {
    width: 100% !important;
    max-width: 100% !important;
    height: 36px !important;
  }
}

div.overlay#upload,
#upload.dialogcontent.overlay,
#upload.overlay {
  width: 640px !important;
  height: auto !important;
  min-height: 420px !important;
  padding: 20px 24px 24px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
div.overlay#upload #uploadform_ui,
#upload.overlay #uploadform_ui,
#upload.dialogcontent #uploadform_ui {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  width: 100% !important;
  margin-top: 8px;
  float: none !important;
}
div.overlay#upload #queuepanel,
#upload.overlay #queuepanel {
  float: none !important;
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  min-width: 0;
}
div.overlay#upload #queuewrapper,
div.overlay#upload #queuewrapper.tablewrapper,
#upload.overlay #queuewrapper,
#upload.overlay .tablewrapper {
  width: 100% !important;
  height: 200px !important;
  max-height: 200px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: auto !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
div.overlay#upload #buttonpanel,
#upload.overlay #buttonpanel,
#upload.dialogcontent #buttonpanel {
  float: none !important;
  flex: 0 0 180px !important;
  width: 180px !important;
  max-width: 180px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
div.overlay#upload #buttonpanel ul.list-group:not(:has(button)),
#upload.overlay #buttonpanel ul.list-group:not(:has(button)) {
  display: none !important;
  border: 0 !important;
  background: none !important;
}
div.overlay#upload #buttonpanel > ul.list-group,
div.overlay#upload #buttonpanel > div:first-child,
#upload.overlay #buttonpanel ul.list-group,
#upload.overlay #buttonpanel > div:first-child {
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(16, 188, 85, 0.18) !important;
  border-radius: 10px !important;
  background: rgba(5, 10, 22, 0.45) !important;
}
div.overlay#upload #buttonpanel ul.list-group li,
#upload.overlay #buttonpanel .list-group-item {
  list-style: none !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(16, 188, 85, 0.12) !important;
  background: transparent !important;
}
div.overlay#upload #buttonpanel ul.list-group li:last-child,
#upload.overlay #buttonpanel .list-group-item:last-child {
  border-bottom: 0 !important;
}
div.overlay#upload #buttonpanel > div:first-child br,
#upload.overlay #buttonpanel ul br {
  display: none !important;
}
div.overlay#upload #buttonpanel button,
div.overlay#upload #buttonpanel button.btnselectfile,
div.overlay#upload #buttonpanel button.btncancelall,
div.overlay#upload #buttonpanel #upload_close,
div.overlay#upload button.btnselectfile,
div.overlay#upload button.btncancelall,
div.overlay#upload #upload_close,
#upload.overlay #buttonpanel button,
#upload.overlay button.btnselectfile,
#upload.overlay button.btncancelall,
#upload.overlay #upload_close {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 9px 12px !important;
  text-align: left !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: #d7e8ff !important;
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-left: 3px solid transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  cursor: pointer !important;
}
div.overlay#upload #buttonpanel button:hover,
div.overlay#upload button.btnselectfile:hover,
div.overlay#upload button.btncancelall:hover,
div.overlay#upload #upload_close:hover,
#upload.overlay #buttonpanel button:hover,
#upload.overlay button.btnselectfile:hover,
#upload.overlay button.btncancelall:hover,
#upload.overlay #upload_close:hover {
  color: #fff !important;
  background: rgba(16, 188, 85, 0.12) !important;
  background-image: none !important;
  background-color: rgba(16, 188, 85, 0.12) !important;
  border-left-color: #10bc55 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  text-shadow: none !important;
}
div.overlay#upload #avail_space,
#upload.overlay #avail_space {
  margin-top: 0 !important;
  text-align: center !important;
  color: #6b7c90 !important;
}

div.overlay .buttons,
div.overlay#upload .buttons,
#upload.overlay .buttons,
#upload.dialogcontent.overlay .buttons,
#upload.overlay #buttonpanel .buttons {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  float: none !important;
  position: static !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  width: 100% !important;
  max-width: 180px !important;
  padding: 0 !important;
  margin: 0 0 10px 0 !important;
  text-align: left !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(16, 188, 85, 0.18) !important;
  border-radius: 10px !important;
  background: rgba(5, 10, 22, 0.45) !important;
}
div.overlay .buttons button,
div.overlay .buttons button.btnselectfile,
div.overlay .buttons button.btncancelall,
div.overlay .buttons #upload_close,
div.overlay .buttons button.list-group-item-action,
div.overlay#upload .buttons button,
#upload.overlay .buttons button {
  display: block !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 9px 12px !important;
  text-align: left !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  color: #d7e8ff !important;
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(16, 188, 85, 0.12) !important;
  border-left: 3px solid transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  cursor: pointer !important;
}
div.overlay .buttons button:last-child,
div.overlay#upload .buttons button:last-child,
#upload.overlay .buttons button:last-child {
  border-bottom: 0 !important;
}
div.overlay .buttons button:hover,
div.overlay .buttons button.btnselectfile:hover,
div.overlay .buttons button.btncancelall:hover,
div.overlay .buttons #upload_close:hover,
div.overlay#upload .buttons button:hover,
#upload.overlay .buttons button:hover {
  color: #fff !important;
  background: rgba(16, 188, 85, 0.12) !important;
  background-image: none !important;
  background-color: rgba(16, 188, 85, 0.12) !important;
  border-left-color: #10bc55 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  text-shadow: none !important;
}

#logviewer,
#logviewer.lbt,
#logtext {
  background: #0b1224 !important;
  background-color: #0b1224 !important;
  background-image: none !important;
  color: #e8f4ff !important;
  border-color: rgba(16, 188, 85, 0.22) !important;
}
#logviewer table,
#logviewer tbody,
#logviewer thead,
#logviewer tr,
#logviewer td,
#logviewer th,
#logviewer .rowodd,
#logviewer .roweven,
#logviewer .listtable,
#logviewer .listtable td,
#logviewer .listtable th {
  color: #e8f4ff !important;
  border-color: rgba(16, 188, 85, 0.1) !important;
}
#logviewer th,
#logviewer .listtable th {
  color: #10bc55 !important;
  background: transparent !important;
}
#logviewer tr:nth-child(odd) td,
#logviewer td.rowodd,
#logviewer .listtable tbody tr:nth-child(odd) td {
  background: #081024 !important;
  background-color: #081024 !important;
  color: #e8f4ff !important;
}
#logviewer tr:nth-child(even) td,
#logviewer td.roweven,
#logviewer .listtable tbody tr:nth-child(even) td {
  background: #102038 !important;
  background-color: #102038 !important;
  color: #e8f4ff !important;
}
#logviewer tr:hover td,
#logviewer .listtable tbody tr:hover td {
  background: #16304c !important;
  background-color: #16304c !important;
}
#logviewer a {
  color: #10bc55 !important;
}
#logbrowser,
#logbrowser.tvt {
  background: #07101e !important;
  background-color: #07101e !important;
  color: #e8f4ff !important;
  border-color: rgba(16, 188, 85, 0.22) !important;
}
#logbrowser .treenode_caption {
  color: #d7e8ff !important;
}
#logbrowser .treenode_caption_selected {
  background: rgba(16, 188, 85, 0.18) !important;
  color: #fff !important;
}

html body .tvt,
html body .tvt.tvt,
html body #folders.tvt,
html body #folders.tvt.tvt,
html body #folders.tvt.ui-layout-pane,
html body #folders.tvt.ui-layout-pane-center,
html body .ui-layout-pane.tvt,
html body .lbt {
  background-color: #0b1224 !important;
}

#folders,
#folders.tvt,
#folderlayout,
#folderlayout .tvt,
.tvt,
.tvt.ui-layout-pane,
.tvt.ui-layout-pane-center,
#filebrowser,
#folderbrowser,
#tracks,
#tracks.lbt,
#playlists,
#playlists.lbt,
#artists,
#artists.lbt,
#albums,
#albums.lbt,
#playlist,
#playlist.lbt,
.lbt,
.lbt.ui-layout-pane,
#librarylayout .ui-layout-pane {
  background: #0b1224 !important;
  background-color: #0b1224 !important;
  background-image: none !important;
  color: #e8f4ff !important;
  border-color: rgba(16, 188, 85, 0.22) !important;
}
#folders .treenode_caption,
.tvt .treenode_caption,
#folderbrowser .treenode_caption {
  color: #e8f4ff !important;
}
#folders .treenode_caption_selected,
.tvt .treenode_caption_selected,
#folderbrowser .treenode_caption_selected {
  background: rgba(16, 188, 85, 0.22) !important;
  color: #fff !important;
}
.lbt_content,
.lbt_row,
.lbt_row_folder,
.lbt_row_page,
.lbt_row_artist,
.lbt_row_track,
.lbt_row_album,
.lbt_row_playlist,
.lbt_row_library {
  color: #e8f4ff !important;
}
.lbt_row_stripe {
  background-color: #102038 !important;
}
.lbt_row_selected {
  background-color: rgba(16, 188, 85, 0.28) !important;
  color: #fff !important;
}
.lbt_row_right,
.lbt_row_empty,
.lbt_row_album_cover .lbt_row_album_secondline {
  color: #8ea3c7 !important;
}
.lbt_row_playlist,
.lbt_row_library,
.lbt_row_playlistadd {
  border-color: rgba(16, 188, 85, 0.12) !important;
}

/* Home dashboard */
#coverfloat,
#coverfloat_gloss,
#trackinfo {
  display: none !important;
}
body.fx-home #heading,
body.fx-home #header,
body.fx-home #header_content,
body.fx-home #header_right,
body.fx-home #section_icon,
body.fx-home .content-top,
body.fx-home .content-top-inner {
  display: none !important;
}
.fx-dash {
  color: #e8f4ff;
}
.fx-pagehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
}
.fx-pagehead h1 {
  margin: 0;
  color: #fff !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 22px !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 0 16px rgba(16, 188, 85, 0.35);
}
.fx-pagehead p {
  margin: 6px 0 0;
  color: #8ea3c7;
  font-size: 13px;
}
.fx-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.fx-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.fx-pill.is-on {
  background: rgba(16, 188, 85, 0.12);
  border: 1px solid rgba(16, 188, 85, 0.35);
  color: #10bc55;
}
.fx-pill.is-off {
  background: rgba(255, 77, 109, 0.1);
  border: 1px solid rgba(255, 77, 109, 0.3);
  color: #ff4d6d;
}
.fx-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.fx-stat {
  grid-column: span 2;
  padding: 16px 16px 14px;
  border: 1px solid rgba(16, 188, 85, 0.2);
  border-radius: 18px;
  background: rgba(10, 18, 40, 0.82) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(16, 188, 85, 0.05);
}
.fx-stat-rate,
.fx-stat-status {
  grid-column: span 3;
}
.fx-stat-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.fx-stat-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: #061018;
  font-size: 16px;
  background: linear-gradient(135deg, #10bc55, #1e63d4);
  box-shadow: 0 8px 18px rgba(16, 188, 85, 0.22);
  flex: 0 0 42px;
}
.fx-stat-transfer .fx-stat-ico { background: linear-gradient(135deg, #10bc55, #0c8a3e); }
.fx-stat-disk .fx-stat-ico { background: linear-gradient(135deg, #1e63d4, #154a9c); }
.fx-stat-rate .fx-stat-ico { background: linear-gradient(135deg, #1e63d4, #10bc55); }
.fx-stat-status .fx-stat-ico { background: linear-gradient(135deg, #1e63d4, #154a9c); }
.fx-stat-status.is-on .fx-stat-ico { background: linear-gradient(135deg, #10bc55, #0c8a3e); }
.fx-stat-name {
  color: #8ea3c7;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fx-stat-value {
  margin-top: 4px;
  color: #fff !important;
  font-family: Inter, system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
}
.fx-stat-value small {
  color: #8ea3c7;
  font-size: 13px;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 600;
}
.fx-stat-sub {
  margin-top: 4px;
  color: #8ea3c7;
  font-size: 12px;
}
.fx-stat-status.is-off .fx-stat-value { color: #ff4d6d !important; }
.fx-stat-status.is-on .fx-stat-value { color: #10bc55 !important; }
.fx-bar {
  height: 7px;
  margin-top: 12px;
  border-radius: 999px;
  background: #152444;
  overflow: hidden;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.35);
}
.fx-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #10bc55, #1e63d4, #1e63d4);
}
.fx-bar-full i { width: 100%; }
.fx-stat-pct {
  margin-top: 8px;
  color: #8ea3c7;
  font-size: 11px;
  text-align: right;
}
.fx-stat-pct-right {
  margin-top: -18px;
  margin-bottom: 6px;
}
.fx-dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 16px;
  align-items: start;
}
.fx-card,
.fx-player {
  padding: 18px;
  border: 1px solid rgba(16, 188, 85, 0.2);
  border-radius: 18px;
  background: rgba(10, 18, 40, 0.82) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(16, 188, 85, 0.05);
}
.fx-dash-main .fx-card,
.fx-dash-side .fx-card + .fx-card {
  margin-top: 16px;
}
.fx-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.fx-card-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #10bc55 !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(16, 188, 85, 0.3);
}
.fx-card-head a,
.fx-card-head a:link,
.fx-card-head a:visited {
  color: #1e63d4 !important;
  font-size: 12px;
  font-weight: 600;
}
.fx-player {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(16, 188, 85, 0.12), rgba(30, 99, 212, 0.1), rgba(30, 99, 212, 0.08)),
    rgba(10, 18, 40, 0.9) !important;
}
.fx-player-art,
#fx-cover {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background-color: #0a1630 !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: 1px solid rgba(16, 188, 85, 0.28);
  box-shadow: 0 0 18px rgba(16, 188, 85, 0.18);
  position: relative;
  overflow: hidden;
}
.fx-player-art span {
  display: none;
}
.fx-onair {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(16, 188, 85, 0.12);
  color: #10bc55;
}
.fx-player.is-off .fx-onair {
  background: rgba(255, 77, 109, 0.1);
  color: #ff4d6d;
}
.fx-eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  margin-left: 8px;
}
.fx-eq i {
  display: block;
  width: 3px;
  height: 10px;
  border-radius: 2px;
  background: #10bc55;
  animation: fxEq 0.9s ease-in-out infinite;
}
.fx-eq i:nth-child(2) { animation-delay: 0.15s; height: 6px; }
.fx-eq i:nth-child(3) { animation-delay: 0.3s; height: 12px; }
.fx-eq i:nth-child(4) { animation-delay: 0.45s; height: 7px; }
.fx-player.is-off .fx-eq i { animation: none; height: 3px; opacity: 0.4; }
@keyframes fxEq {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}
.fx-player-kicker,
.fx-chips { display: none !important; }
#fx-track-title {
  margin: 0 0 4px;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#fx-track-artist {
  color: #8ea3c7;
  font-size: 12px;
  min-height: 16px;
}
.fx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.fx-chips span {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(16, 188, 85, 0.08);
  border: 1px solid rgba(16, 188, 85, 0.18);
  color: #9fdfff;
  font-size: 11px;
}
.fx-vu {
  display: grid;
  gap: 6px;
  width: 130px;
}
.fx-vu-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}
.fx-vu-row b {
  color: #8ea3c7;
  font-size: 9px;
  font-weight: 700;
}
.fx-vu-bar {
  position: relative;
  display: block;
  height: 8px;
  border-radius: 3px;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent 5px, #0b1428 5px, #0b1428 7px),
    linear-gradient(90deg, #10bc55 0%, #8fd14a 48%, #ffb84d 74%, #ff4d6d 100%);
}
.fx-vu-bar::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 92%;
  background: #0b1428;
}
.fx-player.is-on .fx-vu-bar::after,
.fx-fp.is-playing .fx-fp-vu .fx-vu-bar::after {
  animation: fxVuMask 1.15s ease-in-out infinite;
}
.fx-player.is-on .fx-vu-row:nth-child(2) .fx-vu-bar::after,
.fx-fp.is-playing .fx-fp-vu .fx-vu-bar:nth-child(2)::after {
  animation-delay: 0.22s;
}
@keyframes fxVuMask {
  0%, 100% { width: 38%; }
  40% { width: 10%; }
  70% { width: 26%; }
}
.fx-listen,
a.fx-listen,
a.fx-listen:link,
a.fx-listen:visited {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 18px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #10bc55, #1e63d4) !important;
  color: #061018 !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 20px rgba(16, 188, 85, 0.25);
  white-space: nowrap;
}
a.fx-listen:hover { color: #fff !important; text-shadow: none; }
a.fx-listen.is-playing {
  background: linear-gradient(90deg, #1e63d4, #154a9c) !important;
  color: #fff !important;
}

.fx-fp {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 9000;
  display: none;
  align-items: center;
  gap: 12px;
  width: 400px;
  max-width: calc(100vw - 40px);
  padding: 10px 14px 10px 10px;
  border: 1px solid rgba(16, 188, 85, 0.28);
  border-radius: 999px;
  background: rgba(8, 14, 28, 0.96);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), 0 0 24px rgba(16, 188, 85, 0.12);
  color: #e8f4ff;
}
@media screen and (min-width: 769px) {
  .fx-fp { left: calc(50% + 124px); }
}
.fx-fp.is-playing,
.fx-fp.is-loading,
.fx-fp.is-paused,
.fx-fp.is-error {
  display: flex;
}
button.fx-fp-btn,
.fx-fp-btn {
  position: relative;
  flex: 0 0 44px;
  width: 44px !important;
  height: 44px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(160deg, #10bc55, #1e63d4) center / cover no-repeat !important;
  box-shadow: 0 8px 16px rgba(16, 188, 85, 0.28) !important;
  color: #061018 !important;
  overflow: hidden;
  cursor: pointer;
}
.fx-fp-btn.has-cover { background-size: cover !important; }
.fx-fp-btn.has-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 20, 0.4);
}
.fx-fp-btn::before {
  content: "\f04b";
  font-family: FontAwesome;
  position: relative;
  z-index: 1;
  font-size: 14px;
  color: #fff;
}
.fx-fp.is-playing .fx-fp-btn::before,
.fx-fp.is-loading .fx-fp-btn::before { content: "\f04c"; }
.fx-fp-meta {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}
.fx-fp-title,
.fx-fp-artist {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.fx-fp-title {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.fx-fp-artist {
  color: #8ea3c7;
  font-size: 11px;
}
.fx-fp.is-error .fx-fp-artist::before {
  content: "Stream no disponible - ";
  color: #ff4d6d;
  font-weight: 700;
}
.fx-fp-vu {
  display: grid;
  flex: 0 0 72px;
  gap: 4px;
}
.fx-fp-vu .fx-vu-bar {
  width: 100%;
  height: 5px;
}
.fx-fp:not(.is-playing) .fx-fp-vu .fx-vu-bar::after { width: 92%; }
.fx-fp-vol {
  flex: 0 0 64px;
  width: 64px;
  accent-color: #10bc55;
  background: transparent;
}
button.fx-fp-close,
.fx-fp-close {
  flex: 0 0 24px;
  width: 24px !important;
  height: 24px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 48, 0.95) !important;
  color: #8ea3c7 !important;
  box-shadow: none !important;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
}
.fx-fp-close::before { content: "\00d7"; }
@media (max-width: 640px) {
  .fx-fp {
    right: 10px;
    bottom: 70px;
    left: 10px;
    transform: none;
    width: auto;
    max-width: none;
  }
  .fx-fp-vol { display: none; }
}

body.fx-shell { overflow: hidden !important; }
body.fx-shell > :not(#fx-shell):not(#fx-fp) { display: none !important; }
#fx-shell {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 8000;
  width: 100%;
  height: 100%;
  border: 0;
  background: #050814;
}
body.fx-framed .fx-fp { display: none !important; }
.fx-tracks-cols,
.fx-dash .cctrack {
  display: grid;
  grid-template-columns: 24px 42px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) 76px;
  gap: 12px;
  align-items: center;
}
.fx-tracks-cols {
  padding: 0 10px 8px;
  border-bottom: 1px solid rgba(16, 188, 85, 0.12);
  color: #10bc55;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fx-tracks-cols span:nth-child(2) { grid-column: 3; }
.fx-tracks-cols span:last-child { text-align: right; }
.fx-dash .fx-tracks .tablewrapper,
.fx-dash .cc_recenttracks_list,
.fx-dash .cc_recenttracks_list table,
.fx-dash .cc_recenttracks_list tbody,
.fx-dash .cc_recenttracks_list tr {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.fx-dash .cc_recenttracks_list {
  counter-reset: fx-track;
  color: #e8f4ff !important;
}
.fx-dash .cctrack,
.fx-dash .cc_recenttracks_list td,
.fx-dash .cc_recenttracks_list td.rowodd,
.fx-dash .cc_recenttracks_list td.roweven {
  margin: 2px 0 0;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 12px;
  background: transparent !important;
  background-color: transparent !important;
  color: #e8f4ff !important;
  counter-increment: fx-track;
}
.fx-dash .cctrack:hover,
.fx-dash .cc_recenttracks_list tr:hover td {
  background: rgba(16, 188, 85, 0.08) !important;
}
.fx-dash .cctrack::before {
  content: counter(fx-track);
  grid-column: 1;
  color: #8ea3c7;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.fx-dash .cctrack .cccover { grid-column: 2; grid-row: 1; }
.fx-dash .cctrack .cctitle { grid-column: 3; grid-row: 1; }
.fx-dash .cctrack .ccartist { grid-column: 4; grid-row: 1; }
.fx-dash .cctrack .ccalbum { grid-column: 5; grid-row: 1; }
.fx-dash .cctrack .cctime { grid-column: 6; grid-row: 1; }
.fx-dash .cctrack .ccdetails > div:not(.cctitle):not(.ccartist):not(.ccalbum) { display: none !important; }
.fx-dash .cctrack a.ccbuy { display: none !important; }
.fx-dash .cctrack .cccover {
  float: none !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(16, 188, 85, 0.28) !important;
  border-radius: 9px !important;
  background: linear-gradient(145deg, #0a1630, #1a1038) !important;
  overflow: hidden;
}
.fx-dash .cctrack .cccover img,
.fx-dash .cc_recenttracks_list img {
  display: block;
  width: 36px !important;
  height: 36px !important;
  object-fit: cover;
  border-radius: 8px !important;
  background: transparent !important;
}
.fx-dash .cctrack .cccover img[src*="nocover"] { opacity: 0.35; }
.fx-dash .cctrack .ccdetails,
.fx-dash .cctrack .ccdetails_withcover {
  display: contents !important;
  margin: 0 !important;
}
.fx-dash .cctrack .cctitle,
.fx-dash .cc_recenttracks_list .cctitle {
  overflow: hidden;
  color: #e8f4ff !important;
  font-size: 13px !important;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.fx-dash .cctrack .ccartist,
.fx-dash .cctrack .ccalbum {
  margin: 0 !important;
  overflow: hidden;
  color: #8ea3c7 !important;
  font-size: 12px !important;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.fx-dash .cctrack .cctime,
.fx-dash .cctrack .cctime.ccnowplaying {
  display: block !important;
  color: #8ea3c7 !important;
  font-size: 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fx-ctl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
a.fx-ctl-btn,
a.fx-ctl-btn:link,
a.fx-ctl-btn:visited {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 78px;
  border-radius: 16px !important;
  color: #fff !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}
a.fx-ctl-btn i { font-size: 18px; }
a.fx-ctl-start { background: linear-gradient(180deg, #10bc55, #0c8a3e) !important; }
a.fx-ctl-stop { background: linear-gradient(180deg, #ff6bcb, #c81e7a) !important; }
a.fx-ctl-restart { background: linear-gradient(180deg, #1e63d4, #154a9c) !important; }
a.fx-ctl-btn:hover { filter: brightness(1.08); color: #fff !important; }
.fx-info {
  margin: 14px 0 0;
}
.fx-info > div,
.fx-meta > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(16, 188, 85, 0.08);
}
.fx-info dt,
.fx-meta dt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #8ea3c7;
  font-weight: 600;
}
.fx-info dt i,
.fx-meta dt i {
  width: 16px;
  color: #10bc55;
  text-align: center;
}
.fx-info dd,
.fx-meta dd {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e8f4ff;
  font-weight: 700;
}
.fx-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff4d6d;
  box-shadow: 0 0 8px rgba(255, 77, 109, 0.5);
}
.fx-dot.is-on {
  background: #10bc55;
  box-shadow: 0 0 8px rgba(16, 188, 85, 0.5);
}
.fx-url {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 32px;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(16, 188, 85, 0.08);
}
.fx-url a {
  min-width: 0;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-all;
  line-height: 1.35;
  color: #e8f4ff !important;
  font-weight: 500 !important;
}
.fx-url-k {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 6px;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.fx-k-http { background: rgba(30, 99, 212, 0.16); color: #9eb6ef; }
.fx-k-https { background: rgba(16, 188, 85, 0.16); color: #10bc55; }
.fx-k-proxy { background: rgba(30, 99, 212, 0.16); color: #c5d8ff; }
.fx-k-cdn { background: rgba(30, 99, 212, 0.12); color: #9eb6ef; }
.fx-k-json { background: rgba(255, 184, 77, 0.14); color: #ffb84d; }
button.fx-copy,
.fx-copy {
  width: 32px;
  height: 28px;
  padding: 0 !important;
  border: 1px solid rgba(16, 188, 85, 0.25) !important;
  border-radius: 8px !important;
  background: rgba(7, 16, 30, 0.9) !important;
  color: #10bc55 !important;
  box-shadow: none !important;
  cursor: pointer;
}
button.fx-copy-sm {
  width: 26px;
  height: 24px;
}
button.fx-copy.is-copied {
  background: rgba(16, 188, 85, 0.2) !important;
  color: #10bc55 !important;
}
.fx-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(7, 16, 30, 0.8);
}
button.fx-seg-btn,
.fx-seg-btn {
  height: 34px;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #8ea3c7 !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  cursor: pointer;
}
button.fx-seg-btn.is-active {
  background: linear-gradient(90deg, #10bc55, #1e63d4) !important;
  color: #061018 !important;
}
.fx-pane { display: none; }
.fx-pane.is-active { display: block; }

@media screen and (max-width: 1100px) {
  .fx-dash-grid { grid-template-columns: 1fr; }
  .fx-stats { grid-template-columns: 1fr 1fr; }
  .fx-stat,
  .fx-stat-rate,
  .fx-stat-status { grid-column: span 1; }
  .fx-player {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .fx-vu { display: none; }
  .fx-listen { grid-column: 1 / -1; }
}
@media screen and (max-width: 768px) {
  .fx-stats { grid-template-columns: 1fr; }
  .fx-tracks-cols { display: none; }
  .fx-dash .cctrack {
    grid-template-columns: 36px minmax(0, 1fr) 64px;
    gap: 10px;
  }
  .fx-dash .cctrack::before,
  .fx-dash .cctrack .ccalbum { display: none; }
  .fx-dash .cctrack .cccover { grid-column: 1; grid-row: 1 / span 2; }
  .fx-dash .cctrack .cctitle { grid-column: 2; grid-row: 1; }
  .fx-dash .cctrack .ccartist { grid-column: 2; grid-row: 2; }
  .fx-dash .cctrack .cctime { grid-column: 3; grid-row: 1 / span 2; }
  .fx-ctl { grid-template-columns: 1fr; }
  .fx-url { grid-template-columns: 58px minmax(0, 1fr) 32px; }
}

html.fx-light,
html.fx-light body,
html.fx-light body.fx-home {
  background-color: #eef3f9 !important;
  background-image:
    radial-gradient(1100px 480px at 8% -8%, rgba(16, 188, 85, 0.14), transparent 52%),
    radial-gradient(900px 520px at 100% 0%, rgba(30, 99, 212, 0.1), transparent 48%),
    radial-gradient(800px 500px at 50% 120%, rgba(16, 188, 85, 0.08), transparent 55%) !important;
  color: #1b2740 !important;
}
@media screen and (min-width: 769px) {
  html.fx-light:has(#leftcolumn),
  html.fx-light:has(#leftcolumn) body {
    background-image:
      linear-gradient(90deg, #e7f4fa 0, #edf6fb 248px, transparent 248px),
      radial-gradient(1100px 480px at 8% -8%, rgba(16, 188, 85, 0.14), transparent 52%),
      radial-gradient(900px 520px at 100% 0%, rgba(30, 99, 212, 0.1), transparent 48%),
      radial-gradient(800px 500px at 50% 120%, rgba(16, 188, 85, 0.08), transparent 55%) !important;
  }
  html.fx-light #leftcolumn {
    background:
      radial-gradient(280px 240px at 0% -72px, rgba(16, 188, 85, 0.14), transparent 70%),
      linear-gradient(180deg, #e7f4fa, #edf6fb) !important;
    border-right-color: rgba(16, 188, 85, 0.22) !important;
  }
}
html.fx-light #topbar {
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom-color: rgba(16, 188, 85, 0.22) !important;
  box-shadow: 0 8px 24px rgba(20, 40, 70, 0.08);
  color: #1b2740 !important;
}
html.fx-light #topbar_client,
html.fx-light #topbar_admin,
html.fx-light #topbar { color: #3a4d68 !important; }
html.fx-light .fx-brand {
  background:
    radial-gradient(280px 240px at 0% 0%, rgba(16, 188, 85, 0.16), transparent 70%),
    #e7f4fa;
  border-right-color: rgba(16, 188, 85, 0.18);
}
html.fx-light .fx-brand img { filter: none; }
html.fx-light .fx-clock,
html.fx-light .fx-user,
html.fx-light .fx-theme-btn,
html.fx-light .fx-menu-btn {
  background: #ffffff !important;
  border-color: rgba(16, 188, 85, 0.2) !important;
  color: #10bc55 !important;
}
html.fx-light .fx-clock,
html.fx-light .fx-user { color: #3a4d68; }
html.fx-light .fx-clock::before,
html.fx-light .fx-user::before { color: #10bc55; }
html.fx-light .fx-menu-btn span,
html.fx-light .fx-menu-btn span::before,
html.fx-light .fx-menu-btn span::after { background: #10bc55; }
html.fx-light .fx-top-song {
  background: linear-gradient(120deg, rgba(16, 188, 85, 0.12), rgba(30, 99, 212, 0.1) 45%, #fff 70%);
  border-color: rgba(16, 188, 85, 0.22);
  box-shadow: 0 8px 20px rgba(20, 40, 70, 0.08);
}
html.fx-light #fx-top-title { color: #1b2740 !important; }
html.fx-light #fx-top-artist { color: #5c6d86; }
html.fx-light #leftcolumn { color: #1b2740 !important; }
html.fx-light #navigation .navigation-section,
html.fx-light #navigation .navigation-section.last {
  background: #ffffff !important;
  border-color: rgba(16, 188, 85, 0.16) !important;
  box-shadow: 0 8px 20px rgba(20, 40, 70, 0.06);
}
html.fx-light #navigation h3,
html.fx-light #navigation .nav-section-content h3 { color: #10bc55 !important; text-shadow: none; }
html.fx-light #navigation .navigation-links,
html.fx-light #navigation .list-group {
  background: #f5fafc !important;
  border-color: rgba(16, 188, 85, 0.16) !important;
}
html.fx-light #navigation .navigation-links li,
html.fx-light #navigation .list-group-item { border-bottom-color: rgba(16, 188, 85, 0.1) !important; }
html.fx-light #sidebar a,
html.fx-light #left a,
html.fx-light #leftcolumn a,
html.fx-light #navigation a { color: #1b2740 !important; }
html.fx-light #navigation .navigation-links a,
html.fx-light #navigation .list-group-item-action { color: #1b2740 !important; }
html.fx-light #navigation .navigation-links a:hover,
html.fx-light #navigation .list-group-item-action:hover {
  background: rgba(16, 188, 85, 0.1) !important;
  color: #10bc55 !important;
}
html.fx-light #autodj_control_buttons {
  background: #f5fafc;
  border-color: rgba(16, 188, 85, 0.18);
}
html.fx-light #autodj_control_buttons a,
html.fx-light #navigation #autodj_control_buttons a {
  background: rgba(16, 188, 85, 0.1) !important;
  color: #10bc55 !important;
}
html.fx-light #content,
html.fx-light td#content,
html.fx-light #maincontent,
html.fx-light .content-area,
html.fx-light #heading_content,
html.fx-light #heading_right,
html.fx-light #heading h1,
html.fx-light #heading h2 {
  color: #1b2740 !important;
}
html.fx-light .tablewrapper,
html.fx-light .box,
html.fx-light .boxinner,
html.fx-light .boxcontent {
  background: #ffffff !important;
  color: #1b2740 !important;
  border-color: rgba(16, 188, 85, 0.18) !important;
  box-shadow: 0 12px 28px rgba(20, 40, 70, 0.08) !important;
}
html.fx-light #maincontent table,
html.fx-light #maincontent td,
html.fx-light #maincontent th,
html.fx-light #content table,
html.fx-light #content td,
html.fx-light #content th {
  color: #1b2740 !important;
  background: transparent !important;
}
html.fx-light a { color: #10bc55 !important; }
html.fx-light a:hover { color: #1e63d4 !important; text-shadow: none; }
html.fx-light input,
html.fx-light select,
html.fx-light textarea,
html.fx-light .loginfield {
  background: #ffffff !important;
  color: #1b2740 !important;
  border-color: rgba(16, 188, 85, 0.28) !important;
}
html.fx-light #footer,
html.fx-light #footer_content { color: #5c6d86 !important; }
html.fx-light .fx-stat,
html.fx-light .fx-card,
html.fx-light .fx-player {
  background: #ffffff !important;
  border-color: rgba(16, 188, 85, 0.18) !important;
  box-shadow: 0 14px 32px rgba(20, 40, 70, 0.08) !important;
  color: #1b2740 !important;
}
html.fx-light .fx-player {
  background:
    linear-gradient(90deg, rgba(16, 188, 85, 0.1), rgba(30, 99, 212, 0.08), rgba(255, 255, 255, 0.9)),
    #ffffff !important;
}
html.fx-light .fx-pagehead h1,
html.fx-light .fx-card-head h3,
html.fx-light #fx-track-title { color: #1b2740 !important; }
html.fx-light .fx-pagehead p,
html.fx-light #fx-track-artist,
html.fx-light .fx-stat-name,
html.fx-light .fx-info dt,
html.fx-light .fx-meta dt { color: #5c6d86 !important; }
html.fx-light .fx-info dt i,
html.fx-light .fx-meta dt i { color: #10bc55 !important; }
html.fx-light .fx-stat-value,
html.fx-light .fx-info dd,
html.fx-light .fx-meta dd { color: #1b2740 !important; }
html.fx-light .fx-url a { color: #1b2740 !important; }
html.fx-light .fx-copy {
  background: #ffffff !important;
  border-color: rgba(16, 188, 85, 0.22) !important;
  color: #10bc55 !important;
}
html.fx-light .fx-fp {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(16, 188, 85, 0.22);
  color: #1b2740;
  box-shadow: 0 18px 44px rgba(20, 40, 70, 0.16);
}
html.fx-light .fx-fp-title { color: #1b2740; }
html.fx-light .fx-fp-artist { color: #5c6d86; }
html.fx-light .fx-fp-close { background: #eef3f9 !important; color: #5c6d86 !important; }
html.fx-light #fx-shell { background: #eef3f9; }
html.fx-light .fx-tracks-cols { color: #10bc55 !important; }
html.fx-light .fx-dash .cc_recenttracks_list,
html.fx-light .fx-dash .cctrack,
html.fx-light .fx-dash .cc_recenttracks_list td,
html.fx-light .fx-dash .cc_recenttracks_list td.rowodd,
html.fx-light .fx-dash .cc_recenttracks_list td.roweven {
  color: #1b2740 !important;
}
html.fx-light .fx-dash .cctrack::before { color: #5c6d86 !important; }
html.fx-light .fx-dash .cctrack .cctitle,
html.fx-light .fx-dash .cc_recenttracks_list .cctitle,
html.fx-light .fx-dash .cctrack .cctitle a,
html.fx-light .fx-dash .cc_recenttracks_list .cctitle a {
  color: #1b2740 !important;
}
html.fx-light .fx-dash .cctrack .ccartist,
html.fx-light .fx-dash .cctrack .ccalbum,
html.fx-light .fx-dash .cctrack .ccartist a,
html.fx-light .fx-dash .cctrack .ccalbum a {
  color: #3a4d68 !important;
}
html.fx-light .fx-dash .cctrack .cctime,
html.fx-light .fx-dash .cctrack .cctime.ccnowplaying {
  color: #5c6d86 !important;
}
html.fx-light .fx-dash .cctrack .cccover {
  background: #eef3f9 !important;
  border-color: rgba(16, 188, 85, 0.28) !important;
}
html.fx-light .fx-dash .cctrack:hover,
html.fx-light .fx-dash .cc_recenttracks_list tr:hover td {
  background: rgba(16, 188, 85, 0.08) !important;
}
html.fx-light .fx-vu-bar::after { background: #ffffff; }
html.fx-light .fx-vu-bar {
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent 5px, #ffffff 5px, #ffffff 7px),
    linear-gradient(90deg, #10bc55 0%, #8fd14a 48%, #ffb84d 74%, #ff4d6d 100%);
}
html.fx-light .fx-dash { color: #1b2740; }
html.fx-light #heading {
  background: linear-gradient(90deg, rgba(16, 188, 85, 0.16), rgba(30, 99, 212, 0.12), #ffffff) !important;
  border-color: rgba(16, 188, 85, 0.22) !important;
  box-shadow: 0 10px 24px rgba(20, 40, 70, 0.08) !important;
}
html.fx-light #heading h1,
html.fx-light #heading_content h1 {
  color: #1b2740 !important;
  text-shadow: none;
}
html.fx-light #heading h2,
html.fx-light #heading_content h2 { color: #5c6d86 !important; }
html.fx-light .boxtitle {
  background: linear-gradient(90deg, rgba(16, 188, 85, 0.2), rgba(30, 99, 212, 0.14)) !important;
  color: #1b2740 !important;
  text-shadow: none;
}
html.fx-light .fx-tracks-panel {
  background: #ffffff !important;
  border-color: rgba(16, 188, 85, 0.18) !important;
  box-shadow: 0 12px 28px rgba(20, 40, 70, 0.08) !important;
}
html.fx-light .piechart,
html.fx-light .statspiecell { background: #ffffff !important; }
html.fx-light #logviewer,
html.fx-light #logviewer.lbt,
html.fx-light #logtext,
html.fx-light #logbrowser,
html.fx-light #logbrowser.tvt {
  background: #ffffff !important;
  color: #1b2740 !important;
  border-color: rgba(16, 188, 85, 0.2) !important;
}
html.fx-light #logviewer table,
html.fx-light #logviewer td,
html.fx-light #logviewer th { color: #1b2740 !important; }
html.fx-light #logviewer th,
html.fx-light #logviewer .listtable th { color: #10bc55 !important; }
html.fx-light #logviewer tr:nth-child(odd) td,
html.fx-light #logviewer td.rowodd,
html.fx-light #logviewer .listtable tbody tr:nth-child(odd) td {
  background: #f5fafc !important;
  color: #1b2740 !important;
}
html.fx-light #logviewer tr:nth-child(even) td,
html.fx-light #logviewer td.roweven,
html.fx-light #logviewer .listtable tbody tr:nth-child(even) td {
  background: #ffffff !important;
  color: #1b2740 !important;
}
html.fx-light #logviewer tr:hover td,
html.fx-light #logviewer .listtable tbody tr:hover td {
  background: #e7f4fa !important;
}
html.fx-light #logbrowser .treenode_caption { color: #1b2740 !important; }
html.fx-light body .tvt,
html.fx-light body .lbt,
html.fx-light #folders,
html.fx-light #folderlayout,
html.fx-light #filebrowser,
html.fx-light #folderbrowser,
html.fx-light #tracks,
html.fx-light #playlists,
html.fx-light #artists,
html.fx-light #albums,
html.fx-light #playlist,
html.fx-light #librarylayout .ui-layout-pane {
  background: #ffffff !important;
  color: #1b2740 !important;
  border-color: rgba(16, 188, 85, 0.2) !important;
}
html.fx-light #folders .treenode_caption,
html.fx-light .tvt .treenode_caption,
html.fx-light #folderbrowser .treenode_caption { color: #1b2740 !important; }
html.fx-light .lbt_content,
html.fx-light .lbt_row,
html.fx-light .lbt_row_folder,
html.fx-light .lbt_row_page,
html.fx-light .lbt_row_artist,
html.fx-light .lbt_row_track,
html.fx-light .lbt_row_album,
html.fx-light .lbt_row_playlist,
html.fx-light .lbt_row_library { color: #1b2740 !important; }
html.fx-light .lbt_row_stripe { background-color: #f5fafc !important; }
html.fx-light .lbt_row_right,
html.fx-light .lbt_row_empty { color: #5c6d86 !important; }