/* ==========================================================================
   CSS: BASE / VARIABLES / GLOBAL NORMALIZATION
   ========================================================================== */
:root {
  --app-font-family: "Rubik", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --app-font-weight: 300;
  --bg: #282626;
  --panel: #383838;
  --text: #f3f3f3;
  --muted: #bababa;
  --accent: #84aafb;
  --accent-2: #d7da8b;
  --bad: #ff738a;
  --line: #555;
  --panel-bg: rgba(53, 53, 60, 0.55);
  --meta-ui-font: var(--app-font-family);
  --meta-ui-line: 1.2;
  --meta-icon-size: 1.3em;
  --meta-gap: 6px;
  --meta-stat-pad-x: 8px;
  --grain-bg: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">\
<filter id="grain">\
<feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" seed="2"/>\
<feColorMatrix type="saturate" values="0"/>\
</filter>\
<rect width="100%" height="100%" filter="url(%23grain)" opacity="0.15"/>\
</svg>');
}

.ti,
.bi {
  font-style: normal;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}

.ti::before,
.bi::before {
  display: block;
  line-height: 1;
}

button,
a,
input,
select,
textarea {
  font-family: var(--app-font-family);
}

button,
.button,
.ld-btn,
.custom-select .selected,
.charts-subtab-btn,
.search-head-action,
.modal-close-icon-btn,
.playlist-modal-search-btn,
.playlist-modal-search-clear-btn {
  align-items: center;
}

* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--app-font-family);
  font-synthesis-weight: none;
}

body {
  margin: 0;
  padding: 10px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--app-font-family);
  font-weight: var(--app-font-weight);
  font-synthesis-weight: none;
}

body::-webkit-scrollbar,
.custom-select .options-container::-webkit-scrollbar,
.suggestions::-webkit-scrollbar,
.modal-box::-webkit-scrollbar,
.playlist-modal-scroll-area::-webkit-scrollbar,
.playlist-modal-stats-shell::-webkit-scrollbar,
.curator-modal-playlist-scroll::-webkit-scrollbar,
.charts-sections-scroll::-webkit-scrollbar,
.tab-pane::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body::-webkit-scrollbar-track,
.custom-select .options-container::-webkit-scrollbar-track,
.suggestions::-webkit-scrollbar-track,
.modal-box::-webkit-scrollbar-track,
.playlist-modal-scroll-area::-webkit-scrollbar-track,
.playlist-modal-stats-shell::-webkit-scrollbar-track,
.curator-modal-playlist-scroll::-webkit-scrollbar-track,
.charts-sections-scroll::-webkit-scrollbar-track,
.tab-pane::-webkit-scrollbar-track {
  background: #282626;
}

body::-webkit-scrollbar-thumb,
.custom-select .options-container::-webkit-scrollbar-thumb,
.suggestions::-webkit-scrollbar-thumb,
.modal-box::-webkit-scrollbar-thumb,
.playlist-modal-scroll-area::-webkit-scrollbar-thumb,
.playlist-modal-stats-shell::-webkit-scrollbar-thumb,
.curator-modal-playlist-scroll::-webkit-scrollbar-thumb,
.charts-sections-scroll::-webkit-scrollbar-thumb,
.tab-pane::-webkit-scrollbar-thumb {
  background-color: #383838;
  border-radius: 8px 8px 12px 0;
  border: 2px solid #282626;
}

body::-webkit-scrollbar-button,
.custom-select .options-container::-webkit-scrollbar-button,
.suggestions::-webkit-scrollbar-button,
.modal-box::-webkit-scrollbar-button,
.playlist-modal-scroll-area::-webkit-scrollbar-button,
.playlist-modal-stats-shell::-webkit-scrollbar-button,
.curator-modal-playlist-scroll::-webkit-scrollbar-button,
.charts-sections-scroll::-webkit-scrollbar-button,
.tab-pane::-webkit-scrollbar-button {
  display: none;
}

    .tab-pane::-webkit-scrollbar-track {
  background: #282626;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

.tab-pane::-webkit-scrollbar-thumb {
  background-color: #383838;
  border-radius: 8px 8px 12px 0;
  border: 2px solid #282626;
}
    
a {
  color: #84aafb;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}