.notie-container {
    background: #f8f8f8;
    box-shadow: 0 0 5px 0 rgba(0,0,0,.5);
    box-sizing: border-box;
    color: #444;
    font-size: 1.1rem;
    height: auto;
    left: 0;
    margin: 0 auto;
    max-width: 100%;
    position: fixed;
    right: 0;
    text-align: center;
    width: 600px;
    z-index: 1000
}

.notie-background-overlay {
    background: #000
}

.notie-alert {
    background: #527200;
    color: #fff
}

.notie-textbox {
    padding: 40px 20px
}

.notie-textbox-inner {
    line-height: 1.8
}

.notie-overlay {
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999
}

.notie-button {
    cursor: pointer;
    padding: 16px 10px
}

.notie-element {
    padding: 10px
}

.notie-element-half {
    border-color: #ccc;
    border-style: solid;
    border-width: 1px 1px 0 0;
    width: 50%
}

.notie-element-half,.notie-element-third {
    box-sizing: border-box;
    display: inline-block
}

.notie-element-third {
    width: 33.3333%
}

.notie-alert {
    cursor: pointer
}

.notie-input-field {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: inherit;
    margin: 0 auto 30px;
    outline: 0;
    padding: 10px;
    text-align: center;
    width: calc(100% - 20px)
}

.notie-background-success:not(.notie-element-half) {
    border-bottom: 1px solid #ccc;
    display: inline-block;
    text-align: left;
    width: calc(100% - 125px)
}

.notie-background-success:not(.notie-element-half):hover {
    background: #f2ffd3;
    border-bottom: 1px solid #72aa00
}

.notie-background-warning:not(.notie-element-half) {
    display: inline-block;
    font-family: Material Symbols Rounded;
    padding: 0;
    text-align: right;
    width: 38px
}

.notie-button .empty {
    opacity: .5
}

.notie-container button {
    border-radius: 10px;
    font-size: 1.25em;
    padding: 5px;
    vertical-align: middle
}

.notie-container .notie-background-neutral:last-child {
    padding: 40px
}

:root {
    --accent-color: #6c9700;
    --audioMotion-gradient: linear-gradient(-45deg,#ffdf43,#fa5476,#c63bf3,#8550ff,#4a68f7,#23d2ff);
    --audioMotion-gradient-transparent: linear-gradient(-45deg,#ffdf43cc,#fa5476cc,#c63bf3cc,#8550ffcc,#4a68f7cc,#23d2ffcc);
    --background-image: none;
    --display-background: #1c231a;
    --glass-gradient: linear-gradient(180deg,#fff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6);
    --glass-gradient-hover: linear-gradient(180deg,#f2ffd3 0%,#e4f1c5 50%,#d4e1b5 51%,#e9f6ca);
    --glass-gradient-active: linear-gradient(180deg,#bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d);
    --glass-active-glow: 0 0 6px var(--light-color);
    --light-color: #b2ff00;
    --metal-gradient: linear-gradient(90deg,#7a7a7a,#ededed,#7a7a7a);
    --compact-height: max(50px,10%);
    --icon-font: "Material Symbols Rounded";
    --mono-font: "JetBrains Mono",monospace
}

* {
    box-sizing: border-box;
    font-size: inherit
}

body {
    background: var(--metal-gradient);
    color: #222;
    font-family: Sofia Sans Semi Condensed,sans-serif;
    font-size: 16px;
    line-height: 1;
    margin: 0
}

audio {
    display: none
}

button,input,select {
    font-family: inherit
}

input[type=file] {
    display: none
}

input[type=number],input[type=text] {
    padding: .25em
}

select {
    padding: .25em 0
}

.button,button {
    background: var(--glass-gradient);
    border: 1px solid #adadad;
    border-radius: 999px;
    color: #333;
    cursor: pointer;
    font-weight: 400;
    line-height: normal;
    padding: .425em 1.1em
}

.button:not([data-active="1"]):hover,button:not([disabled]):hover {
    background: var(--glass-gradient-hover);
    border-color: #72aa00
}

button:not([disabled]):active {
    background: var(--glass-gradient-active);
    box-shadow: var(--glass-active-glow);
    color: #293d00;
    font-weight: 600;
    text-shadow: var(--glass-active-glow)
}

canvas {
    display: block;
    width: 100%
}

header {
    align-self: center
}

header h1 {
    background-clip: text;
    -webkit-background-clip: text;
    background-color: #0008;
    color: transparent;
    font: 32px Orbitron,sans-serif;
    margin: 0;
    text-shadow: 1px 1px 1px hsla(0,0%,100%,.5)
}

h2 {
    font-size: 1.4em;
    margin: 0 0 1em;
    text-align: left
}

h3 {
    font-size: 1.2em;
    font-weight: 600;
    margin: 1.5em 0 .75em
}

ul {
    list-style: none;
    margin: 0;
    padding: 0
}

table {
    border-collapse: collapse;
    width: 100%
}

.table-fixed {
    table-layout: fixed
}

.button {
    display: block;
    text-align: center
}

a.button {
    text-decoration: none
}

a.button:visited {
    color: #000
}

.warning:after {
    background: #c00;
    border-radius: 50%;
    box-shadow: 0 0 4px red;
    content: " ";
    display: block;
    height: 1px;
    padding: 3px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px
}

.abs-center {
    left: 50%;
    transform: translateX(-50%)
}

.controls {
    column-gap: 40px;
    display: grid;
    font-size: .85rem;
    grid-auto-flow: column;
    grid-template-columns: repeat(5,1fr);
    grid-template-rows: repeat(5,1fr);
    padding: 15px 20px;
    row-gap: 20px
}

.controls .button-bar,.controls form,.controls select {
    margin-top: 3px;
    width: 100%
}

.controls select {
    height: 25px
}

.custom-slider {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    margin-top: 8px;
    width: 100%
}

.custom-slider::-webkit-slider-runnable-track {
    background: linear-gradient(rgba(0,0,0,.5),transparent),rgba(0,0,0,.2);
    border-radius: 999px;
    box-shadow: inset 1px 1px 0 rgba(0,0,0,.4),inset -1px -1px 0 rgba(0,0,0,.2);
    height: 4px;
    margin-top: 8px
}

.custom-slider::-moz-range-track {
    background: linear-gradient(rgba(0,0,0,.5),transparent),rgba(0,0,0,.2);
    border-radius: 999px;
    box-shadow: inset 1px 1px 0 rgba(0,0,0,.4),inset -1px -1px 0 rgba(0,0,0,.2);
    height: 4px
}

.custom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: url(img/brushed-knob.png);
    background-size: 100%;
    border-radius: 50%;
    box-shadow: 2px 2px 5px 0 #222,0 0 0 1px #999;
    height: 18px;
    margin-top: -8px;
    width: 18px
}

.custom-slider::-moz-range-thumb {
    background: url(img/brushed-knob.png);
    background-size: 100%;
    border: none;
    border-radius: 50%;
    box-shadow: 2px 2px 5px 0 #222,0 0 0 1px #999;
    height: 18px;
    width: 18px
}

#color_mode {
    margin-bottom: 0
}

.player-area {
    background: inherit;
    color: #222;
    display: inline-block;
    position: relative;
    width: 100%;
    z-index: 2
}

.player-area .config-label {
    color: #333;
    font-size: 12px;
    font-weight: 600
}

.player-area .config-label.help {
    color: #222
}

.analyzer {
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%
}

.analyzer.compact {
    bottom: 0;
    height: var(--compact-height)!important;
    top: auto
}

.bg-container {
    background: #000;
    background-image: var(--background-image);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: auto 100%;
    height: calc(100vh - 570px);
    min-height: 270px;
    overflow: hidden;
    position: relative;
    text-align: center;
    transition: height 1s
}

.bg-container.repeat {
    background-repeat: repeat-x
}

.bg-container.cover {
    background-size: cover
}

.bg-container:fullscreen {
    position: relative!important;
    transition: none
}

.bg-container:fullscreen .analyzer:not(.compact) {
    top: 50%;
    transform: translateY(-50%)
}

.bg-container:not(:fullscreen) .analyzer:not(.compact) {
    height: 100%!important
}

.bg-container video,.bg-dim {
    height: 100%;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%
}

.bg-container.fit-video:fullscreen #player0,.bg-container.fit-video:fullscreen #player1 {
    object-fit: contain
}

.bg-container.compact #player0,.bg-container.compact #player1 {
    height: calc(100% - var(--compact-height))
}

.bg-container.pip {
    background-image: none
}

.bg-container.pip:after {
    color: #fff;
    content: "Showing in PIP"
}

.bg-container.pip .analyzer,.bg-container.pip .bg-dim,.bg-container.pip .warp,.bg-container.pip video {
    display: none
}

.bg-container:-webkit-full-screen {
    height: 100%;
    position: relative!important;
    width: 100%
}

.bg-container:-webkit-full-screen .analyzer:not(.compact) {
    top: 50%;
    transform: translateY(-50%)
}

.bg-container:not(:-webkit-full-screen) .analyzer:not(.compact) {
    height: 100%!important
}

.bg-container.fit-video:-webkit-full-screen #player0,.bg-container.fit-video:-webkit-full-screen #player1 {
    object-fit: contain
}

.osd {
    left: 0;
    position: absolute;
    top: 0
}

#playlists {
    font-size: .85rem;
    margin-top: 6px;
    width: 100%
}

.panel-area {
    margin: 0 auto;
    max-width: 1400px;
    position: relative;
    user-select: none
}

.bottom-panel {
    display: grid;
    grid-template-columns: 1fr 100px 1fr;
    padding: 0 25px
}

.function-buttons {
    grid-template-columns: repeat(4,100px)!important;
    justify-self: end;
    z-index: 2
}

.panel-selection {
    grid-template-columns: repeat(auto-fit,100px)!important;
    z-index: 2
}

.panel-selection input:checked+label:before {
    content: "\e313";
    font-family: var(--icon-font);
    font-size: 1.25em;
    line-height: .9;
    margin-left: -1em;
    position: absolute
}

#toggle_panel {
    cursor: pointer;
    font-size: 24px;
    font-weight: 500;
    padding: 0 .5em
}

#toggle_panel:before {
    content: "\e5d6"
}

#toggle_panel.closed:before {
    content: "\e5d7"
}

.panel-main {
    margin: 0 auto;
    max-width: 1400px;
    padding-top: 20px;
    position: absolute;
    width: 100%
}

.panel-main:not(.active) {
    display: none!important
}

.panel-internal {
    background: #ccc;
    border-radius: 6px;
    box-shadow: inset 0 1px 3px #0008;
    height: 350px;
    margin: 0 25px;
    position: relative
}

.config-panel,.file-panel,.player-area,.settings {
    user-select: none
}

.config-panel {
    width: 500px
}

.config-panel details>div {
    padding: 0 1em
}

.config-panel details summary {
    border-top: 1px solid #888;
    justify-content: space-between;
    padding: 1em 0;
    position: relative
}

.config-panel details[open] summary {
    font-weight: 600
}

.config-panel details>:last-child {
    margin-bottom: 1.5em
}

.link-to-docs {
    border: 1px solid green;
    border-radius: 50%;
    color: green;
    display: inline-block;
    font-weight: 600;
    height: 1.25em;
    line-height: 1.2;
    margin-left: .5em;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25em
}

.link-to-docs:before {
    content: "?"
}

.config-panel table td,.config-panel table th {
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 6px;
    text-align: center
}

.config-panel input[type=number],.config-panel input[type=range],.config-panel select {
    margin: 2px 0;
    width: 90px
}

.config-panel .sensitivity-presets input[type=number] {
    width: 60px
}

.config-panel input[type=checkbox] {
    accent-color: var(--accent-color);
    margin: 4px 0
}

.config-panel p {
    margin: .5em 0
}

.config-panel p label input {
    margin: 0!important
}

.config-panel>div:last-child {
    padding-bottom: 2em
}

.field-error {
    border: 4px solid #c00;
    border-radius: 4px;
    color: #c00
}

.flex {
    display: flex;
    justify-content: space-between
}

.space-around {
    justify-content: space-around
}

.justify-left {
    justify-content: start
}

.align-baseline {
    align-items: baseline
}

.align-center {
    align-items: center
}

.align-start {
    align-items: start
}

.align-end {
    align-items: end
}

.gap-sm {
    gap: .5em
}

.gap-md {
    gap: 1em
}

.gap-lg {
    gap: 2em
}

.grid {
    align-content: start;
    display: grid
}

.grid-2-cols {
    grid-template-columns: repeat(2,1fr)
}

.grid-3-cols {
    grid-template-columns: repeat(3,1fr)
}

.grid-25-75 {
    grid-template-columns: .5fr 1fr!important
}

.colspan-2 {
    grid-column: span 2
}

.colspan-3 {
    grid-column: span 3
}

.rowspan-2 {
    grid-row: span 2
}

.rowspan-3 {
    grid-row: span 3
}

.rowspan-4 {
    grid-row: span 4
}

.rowspan-5 {
    grid-row: span 5
}

.config-label {
    font-weight: 600
}

.config-label.help {
    cursor: help
}

.file-panel {
    grid-template-columns: 1fr 50px 1fr
}

.button-column {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.button-column .button,.button-column button {
    border-radius: 50%;
    display: inline-block;
    font-family: var(--icon-font);
    font-size: 24px;
    margin: 10px 0;
    padding: 9px 11px
}

.mb-40 {
    margin-bottom: 40px!important;
    margin-top: 0!important
}

.center {
    text-align: center
}

.player-panel {
    grid-template-columns: 1fr 370px 1fr;
    margin: 0 auto;
    max-width: 1400px;
    padding: 30px 0 20px;
    position: relative
}

.controls-left {
    display: flex;
    justify-self: start;
    margin-left: 40px
}

.controls-left>div:not(:last-child) {
    margin-right: 40px
}

.controls-right {
    display: flex;
    justify-self: end;
    margin-right: 25px
}

.player-controls {
    align-self: center
}

.player-controls .button {
    background: var(--glass-gradient);
    border-radius: 0;
    display: inline-block;
    font-size: 30px;
    padding: 8px 10px 4px
}

.player-controls .button:first-child {
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
    padding-left: 15px;
    width: 108px
}

.player-controls .button:first-child:hover {
    width: 109px
}

.player-controls .button:last-child {
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
    padding-right: 15px
}

.player-controls .button:not(:last-child) {
    border-right-width: 0
}

.player-controls .button:not([data-active="1"]):hover {
    background: var(--glass-gradient-hover)!important
}

.player-controls .button:not(:last-child):not([data-active="1"]):hover {
    border-right-width: 1px!important;
    margin-right: -1px;
    z-index: 1
}

.help {
    position: relative;
    text-decoration: none
}

.help:hover>.tooltip,.switch:hover>.tooltip {
    display: block
}

.progress-bar {
    grid-column: span 3;
    margin: 25px auto 0;
    max-width: 1400px;
    padding: 0 20px;
    width: 100%
}

.small-display {
    background: var(--display-background);
    border-radius: 3px;
    color: var(--light-color);
    font-family: var(--mono-font);
    font-size: 11.5px;
    margin: 0 10px;
    min-width: 70px;
    padding: 3px 6px;
    text-align: right
}

.song-progress {
    height: 2px;
    margin: 0;
    padding: 6px 0 10px
}

.value {
    float: right
}

.switch input {
    display: none
}

.switch-bar {
    position: relative
}

.switch-bar .switch {
    background: var(--glass-gradient);
    border: 1px solid #adadad;
    border-left-width: 0;
    color: #333;
    cursor: pointer;
    display: inline-block;
    font-weight: 400;
    line-height: normal;
    margin-top: 3px;
    padding: 6px 0 4px;
    text-align: center;
    text-transform: uppercase;
    width: 50%
}

.switch-bar .switch:not([data-active="1"]):hover {
    background: var(--glass-gradient-hover);
    border-color: #72aa00
}

.switch-bar .switch:nth-child(odd) {
    border-bottom-left-radius: 999px;
    border-left-width: 1px;
    border-top-left-radius: 999px
}

.switch-bar .switch:last-child:nth-child(odd) {
    border-bottom-right-radius: 999px;
    border-top-right-radius: 999px;
    width: 100%
}

.switch-bar .switch:nth-child(2n) {
    border-bottom-right-radius: 999px;
    border-left-color: transparent;
    border-top-right-radius: 999px
}

.switch-bar .switch:nth-child(2n):not([data-active="1"]):hover {
    border-left-width: 1px;
    margin-left: -1px;
    width: calc(50% + 1px)
}

.switch-bar .switch:last-child,.switch-bar .switch:nth-last-child(2):nth-child(odd) {
    border-bottom-width: 1px
}

.player-controls .button[data-active="1"],.switch-bar .switch[data-active="1"] {
    background: var(--glass-gradient-active);
    border-color: transparent;
    box-shadow: var(--glass-active-glow);
    color: #293d00;
    text-shadow: var(--glass-active-glow)
}

.button-bar,.custom-radio-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(0,1fr))
}

.button-bar li {
    display: block
}

.custom-radio-buttons input {
    display: none
}

.button-bar .button:active,.button-bar button:active,.button-bar li.active>a,.custom-radio-buttons input:checked+label {
    background: var(--glass-gradient-active);
    border-color: transparent;
    box-shadow: var(--glass-active-glow);
    color: #293d00;
    text-shadow: var(--glass-active-glow);
    z-index: 1
}

.button-bar .button,.button-bar button,.button-bar li a,.custom-radio-buttons label {
    background: var(--glass-gradient);
    border: 1px solid #adadad;
    border-radius: 0;
    color: #333;
    cursor: pointer;
    display: block;
    font-size: .85rem;
    font-weight: 400;
    line-height: normal;
    padding: 6px 0 4px;
    position: relative;
    text-align: center;
    text-decoration: none
}

.button-bar .button:first-child,.button-bar button:first-child,.button-bar li:first-of-type>a,.custom-radio-buttons label:first-of-type {
    border-bottom-left-radius: 999px;
    border-top-left-radius: 999px
}

.button-bar .button:last-child,.button-bar button:last-child,.button-bar li:last-of-type>a,.custom-radio-buttons label:last-of-type {
    border-bottom-right-radius: 999px;
    border-top-right-radius: 999px
}

.button-bar .button:not(:last-child),.button-bar button:not(:last-child),.button-bar li:not(:last-of-type)>a,.custom-radio-buttons label:not(:last-of-type) {
    border-right-width: 0
}

.button-bar .button:not(:active):hover,.button-bar button:not(:active):hover,.button-bar li:not(.active):hover>a,.custom-radio-buttons label:hover {
    background: var(--glass-gradient-hover);
    border-color: #72aa00
}

.button-bar .button:not(:last-child):hover,.button-bar button:not(:last-child):hover,.button-bar li:not(:last-of-type):hover>a,.custom-radio-buttons label:not(:last-of-type):hover {
    border-right-width: 1px!important;
    margin-right: -1px;
    z-index: 1
}

.button-bar .help:not(:only-child) .tooltip {
    left: 0;
    top: 40px
}

.last-column .button-bar .help .tooltip {
    left: auto;
    right: 0
}

.last-row .button-bar .help:not(:only-child) .tooltip {
    bottom: 40px;
    top: auto
}

.tooltip {
    background-color: #fffce0;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 10px #0008;
    color: #444;
    display: none;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    padding: 10px;
    position: absolute;
    text-align: center;
    text-shadow: none;
    text-transform: none;
    top: 25px;
    width: 220px;
    z-index: 10
}

.tooltip.center {
    left: 50%;
    transform: translateX(-50%)
}

.tooltip.right {
    right: 0
}

.tooltip.shortcuts {
    left: -270px;
    top: -50px
}

.button-column .tooltip {
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%)
}

.controls .tooltip {
    left: 110%;
    top: 0
}

.player-controls .tooltip {
    left: 50%;
    top: 50px;
    transform: translateX(-50%)
}

.playlist-bar .tooltip {
    margin-top: 10px;
    right: 0
}

.tooltip kbd {
    margin-left: .5em
}

.last-column .config-label .tooltip,.last-column .switch-bar .tooltip {
    left: auto;
    right: 105%;
    top: auto;
    transform: translateY(-50%)
}

.shortcuts {
    width: 600px
}

.kbd-table {
    width: 100%
}

.kbd-table tr:nth-child(2n) {
    background: #f5f5f5
}

.kbd-table td {
    border: 1px solid #ddd;
    padding: 4px
}

kbd {
    background-color: #eee;
    border: 1px solid #b4b4b4;
    border-radius: 3px;
    box-shadow: 0 1px 1px rgba(0,0,0,.2),inset 0 2px 0 0 hsla(0,0%,100%,.7);
    color: #333;
    display: inline-block;
    font-family: var(--mono-font);
    font-size: .85em;
    font-weight: 600;
    height: 1.6em;
    line-height: 1.2;
    min-width: 1.6em;
    padding: 2px 4px;
    text-align: center;
    white-space: nowrap
}

kbd.narrow {
    padding: 2px 0
}

kbd.wide {
    width: 50px
}

#file_explorer {
    grid-template-rows: 45px 1fr
}

#file_explorer .filelist {
    background-position: 100% 0;
    background-repeat: no-repeat;
    background-size: auto 100%
}

#file_explorer .tooltip {
    left: 45px;
    top: 50%;
    transform: translateY(-50%);
    width: 150px
}

.breadcrumb {
    align-self: center;
    line-height: 1.2;
    margin-top: 4px;
    padding: 0 40px 0 10px;
    position: relative
}

.breadcrumb:not(:empty):before {
    content: "\f117";
    float: left;
    font-family: audioMotion;
    font-size: 16px;
    margin-right: .25em
}

.breadcrumb li {
    cursor: pointer;
    display: inline
}

.breadcrumb li:hover {
    text-decoration: underline
}

.breadcrumb li:last-child {
    cursor: default;
    font-weight: 600
}

.breadcrumb li:last-child:hover {
    text-decoration: none
}

.breadcrumb:after {
    font-family: Material Symbols Rounded;
    font-size: 24px;
    font-weight: 300;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%)
}

.local .breadcrumb:after,.locked .server .breadcrumb:after {
    content: "hard_drive"
}

.server .breadcrumb:after {
    content: "cloud"
}

.loading .breadcrumb:after {
    animation: blink .3s infinite
}

@keyframes blink {
    0% {
        color: var(--light-color)
    }

    50% {
        color: inherit
    }

    to {
        color: var(--light-color)
    }
}

.filelist {
    background: #fff;
    border: 1px solid #ccc;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    box-shadow: inset 0 0 3px #0004;
    overflow: auto;
    padding: .25em 0;
    position: relative;
    vertical-align: top
}

.loading .filelist {
    overflow: hidden
}

.loading .filelist:before {
    align-items: center;
    background: #fffd;
    content: "Loading...";
    display: flex;
    height: 100%;
    justify-content: center;
    position: absolute;
    top: 0;
    width: 100%
}

.filelist li {
    cursor: pointer;
    line-height: 1.6;
    padding: 0 .5em;
    white-space: nowrap
}

.filelist li.current {
    color: #06c
}

.filelist li.error {
    color: #c00
}

.filelist li.full-panel {
    align-items: center;
    display: flex;
    font-size: 2em;
    height: 100%;
    justify-content: center
}

.filelist li.selected {
    background: #c5e2ff;
    outline: 1px dashed #c5e2ff
}

.filelist li:hover {
    background: #06c;
    color: #fff
}

.filelist li.error:hover {
    background: #c00
}

.filelist [data-type]:before {
    font-family: audioMotion;
    margin-right: 10px
}

.filelist [data-type=dir]:before,.filelist [data-type=request]:before {
    content: "\f116"
}

.filelist [data-path=".."]:before {
    content: "\f119"
}

.filelist [data-type=mount]:before {
    content: "\f115"
}

#files_panel:not(.locked) .server .filelist [data-type=mount]:before {
    content: "cloud";
    font-family: Material Symbols Rounded;
    font-size: 20px;
    font-variation-settings: "FILL" 1;
    font-weight: 300;
    line-height: 1;
    margin-left: -2px;
    margin-right: 7px;
    vertical-align: text-bottom
}

.filelist [data-type=file]:before {
    content: "\f118"
}

.filelist [data-type=list]:before {
    content: "\f102"
}

.filelist [data-subs="1"]:after {
    background: #444;
    border-radius: .25em;
    color: #f0f0f0;
    content: "SUBS";
    font-size: .6em;
    margin-left: .5em;
    padding: .25em .5em;
    vertical-align: middle
}

.locked-panel {
    align-items: center;
    background: linear-gradient(90deg,transparent,#000d 2%,#000d 98%,transparent);
    color: #ccc;
    display: flex;
    flex-direction: column;
    height: 405px;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: -30px;
    transition: all .35s;
    width: 100%;
    z-index: 9
}

.locked-panel h1 {
    font-size: 3em;
    margin: .25em 0
}

.locked-panel p {
    font-size: 1em
}

.locked-panel p strong {
    color: #fff;
    font-weight: 600
}

.locked-panel .material-symbols-rounded {
    font-size: 60px;
    font-weight: 700
}

.locked .locked-panel {
    opacity: 1;
    pointer-events: all
}

#playlist_panel {
    grid-template-rows: auto auto 1fr
}

#playlist_panel button {
    font-size: .85rem;
    margin-left: 5px;
    min-width: 80px;
    padding: 6px 0 4px
}

.playlist-bar {
    padding: 0 10px 6px
}

.playqueue-bar {
    padding: 6px 10px 0
}

.playqueue-bar strong {
    align-self: center;
    font-size: 1.2em;
    font-weight: 600
}

#playlist li {
    position: relative
}

#playlist li:before {
    content: attr(data-title);
    display: inline-block;
    overflow: hidden;
    vertical-align: text-bottom;
    width: calc(100% - 4em)
}

#playlist li:after {
    content: attr(data-duration);
    position: absolute;
    right: .75em
}

#playlist li.current {
    padding-left: .25em
}

#playlist li.current:before {
    content: "\25b8"" " attr(data-title)
}

#console .error {
    color: #f33
}

.console-nav {
    position: absolute;
    right: 20px
}

.console-nav .button,.console-nav button {
    background: var(--display-background);
    border: 1px solid #0c0!important;
    color: #0c0;
    cursor: pointer;
    display: block;
    font-size: 12px;
    margin: .5em 0;
    padding: 2px 6px;
    text-transform: uppercase;
    width: 80px
}

.console-nav .button:hover,.console-nav button:hover,.console-nav input:checked+label {
    background: #0c0;
    color: #000
}

.console-nav input {
    display: none
}

#console-content {
    background: var(--display-background);
    border-radius: 6px;
    color: #0b0;
    font-family: var(--mono-font);
    font-size: 12.5px;
    height: 100%;
    line-height: 1.5;
    overflow-y: scroll;
    padding: 10px;
    scrollbar-color: #080 #333;
    scrollbar-width: thin
}

#console-content::-webkit-scrollbar-track {
    background-color: #333
}

#console-content::-webkit-scrollbar {
    width: 6px
}

#console-content::-webkit-scrollbar-thumb {
    background-color: #080
}

#console-content a {
    color: inherit
}

#console-content div {
    margin-left: 8.75em;
    text-indent: -9em
}

.credits {
    margin-bottom: 2em
}

.credits a:not([class]) {
    color: #090
}

.credits h1 {
    background: var(--audioMotion-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    display: inline;
    font: 3em Orbitron,sans-serif;
    -webkit-text-fill-color: transparent
}

.credits li,.credits p {
    line-height: 2
}

.credits li {
    display: inline-block;
    margin: 0 .5em
}

.credits li:not(:last-child):after {
    content: "\22c5";
    margin-left: 1em
}

.update-banner {
    background: var(--audioMotion-gradient-transparent);
    border-bottom: 1px solid #fffc;
    font-family: Orbitron;
    font-size: 2.5vw;
    position: fixed;
    text-align: center;
    top: -2.1em;
    transition: top 2s;
    width: 100%;
    z-index: 999
}

.update-banner.show {
    top: 0
}

.update-banner a {
    color: #fff;
    display: block;
    padding: .5em;
    text-decoration: none
}

input.slider {
    display: none
}

label.slider {
    background: linear-gradient(rgba(0,0,0,.6),transparent),rgba(0,0,0,.3);
    border-radius: 1.5em;
    box-shadow: inset 0 .07em .1em -.1em rgba(0,0,0,.4),0 .05em .08em -.01em hsla(0,0%,100%,.7);
    cursor: pointer;
    display: inline-block;
    font-size: 8px;
    height: 3em;
    margin: 5px 0 10px;
    position: relative;
    transition: .35s;
    vertical-align: middle;
    width: 5.5em
}

label.slider:before {
    background: url(img/brushed-knob.png);
    background-size: 100%;
    box-shadow: inset 0 .1em .15em -.05em hsla(0,0%,100%,.5),0 .5em .3em -.1em rgba(0,0,0,.25);
    height: 2em;
    left: .5em;
    top: .5em;
    width: 2em
}

label.slider:after,label.slider:before {
    border-radius: 50%;
    content: "";
    position: absolute;
    transition: .25s ease-in-out
}

label.slider:after {
    background: linear-gradient(rgba(0,0,0,.07),hsla(0,0%,100%,.1)),#444;
    box-shadow: 0 .08em .15em -.1em rgba(0,0,0,.5) inset,0 .05em .08em -.01em hsla(0,0%,100%,.7),-7em 0 0 0 var(--light-color),-7em .05em .08em -.01em hsla(0,0%,100%,.5);
    height: .5em;
    left: 6em;
    top: 1.25em;
    width: .5em
}

label.slider.on-off:after {
    background: transparent;
    box-shadow: 0 .08em .15em -.1em transparent,0 .05em .08em -.01em transparent,-7em 0 0 0 var(--light-color),-7em .05em .08em -.01em hsla(0,0%,100%,.5)
}

.slider-off,.slider-on {
    bottom: -1.5em;
    color: #444;
    font-size: 10px;
    position: absolute;
    transition: .25s ease-in-out
}

.slider-off {
    left: 4em
}

.slider-on {
    left: -1.3em
}

input.slider:checked+.slider:before {
    left: 3em
}

input.slider:checked+.slider:after {
    background: linear-gradient(rgba(0,0,0,.07),hsla(0,0%,100%,.1)),var(--light-color);
    box-shadow: inset 0 .08em .15em -.1em rgba(0,0,0,.5),0 .05em .08em -.01em hsla(0,0%,100%,.7),-7em 0 0 0 rgba(0,0,0,.7),-7em .05em .08em -.01em hsla(0,0%,100%,.5)
}

input.slider:checked+.slider.on-off:after {
    background: transparent;
    box-shadow: 0 .08em .15em -.1em transparent,0 .05em .08em -.01em transparent,-7em 0 0 0 rgba(0,0,0,.7),-7em .05em .08em -.01em hsla(0,0%,100%,.5)
}

input.slider:checked+.slider:not(.on-off) .slider-off,input.slider:not(:checked)+.slider .slider-on {
    color: var(--light-color);
    text-shadow: 0 0 5px
}

.modal-window {
    background-color: #000a;
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: 0;
    transition: all .3s;
    visibility: hidden;
    z-index: 999
}

.modal-window:target {
    opacity: 1;
    pointer-events: auto;
    visibility: visible
}

.modal-window>div {
    background: #fffe;
    box-shadow: -5px 0 10px #0008;
    height: 100%;
    max-width: 90%;
    overflow: auto;
    padding: 2em;
    position: absolute;
    right: -100%;
    top: 0;
    transition: all .3s
}

.modal-window:target>div {
    right: 0
}

.modal-close:before {
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.modal-close-internal {
    background: #444;
    color: #fff;
    padding: 10px 10px 8px;
    position: absolute;
    right: 1px;
    text-decoration: none;
    top: 1px
}

.modal-close-internal:before {
    content: "\2715"
}

.modal-close-internal:hover {
    background: #c00
}

.knob {
    background: url(img/brushed-knob.png);
    background-size: 100%;
    border-radius: 50%;
    box-shadow: inset -1px 1px 0 0 hsla(0,0%,100%,.1),inset 1px -1px 0 0 hsla(0,0%,7%,.2),4px 4px 10px 0 #222,0 10px 10px -5px #222,0 0 0 1px #666;
    cursor: url(img/icons/mousescroll.png) 16 16,ns-resize;
    display: inline-block;
    height: 35px;
    position: relative;
    width: 35px
}

.knob-vol {
    height: 60px;
    margin: -10px 20px 0 80px;
    width: 60px
}

.knob:after,.knob:before {
    bottom: -6px;
    color: #444;
    font-size: 10px;
    position: absolute;
    transition: all .2s ease-in-out
}

.knob:after {
    content: "MAX";
    right: -1.5em
}

.knob:before {
    content: "MIN";
    left: -1.5em
}

.knob-bal:after {
    content: "R";
    right: -.5em
}

.knob-bal:before {
    content: "L";
    left: -.5em
}

.knob-bal[data-value="-1"]:before,.knob-vol[data-value="0"]:before,.knob[data-value="1"]:after {
    color: var(--light-color);
    text-shadow: 0 0 5px
}

.knob label {
    position: absolute;
    top: -20px
}

.knob-vol label {
    left: -45px;
    top: 10px
}

.knob .marker {
    background-color: var(--light-color);
    border-radius: 2px;
    box-shadow: inset 1px -1px 0 0 hsla(0,0%,7%,.3),0 0 5px 0 var(--light-color);
    height: 4px;
    left: 75%;
    margin-top: -2px;
    position: absolute;
    top: 50%;
    transform-origin: -100% 50%;
    transition: all .2s ease-in-out;
    width: 25%
}

::cue {
    font-weight: 600;
    line-height: 1.2
}

.subs-bg-none ::cue {
    background: transparent
}

.subs-bg-shadow ::cue {
    background: transparent;
    text-shadow: .075em .075em .2em #000,-.075em -.075em .2em #000
}

.subs-bg-solid ::cue {
    background: #000c
}

.subs-color-gold ::cue {
    color: gold
}

.subs-color-gray ::cue {
    color: #d3d3d3
}

.subs-color-white ::cue {
    color: #fff
}

.subs-color-yellow ::cue {
    color: #ff0
}

.mt-1 {
    margin-top: 1rem
}

.mt-2 {
    margin-top: 2rem
}

.mt-5px {
    margin-top: 5px
}

.grad-color-row td {
    padding: 5px 10px 5px 0
}

.grad-color-row td:first-child {
    padding: 5px 5px 5px 0
}

.grad-color-row td:last-child {
    padding: 5px 0
}

.grad-add-stop,.grad-remove-stop {
    background: #444;
    border: none;
    border-radius: 10px;
    color: #fff;
    height: 35px;
    padding: 0;
    text-align: center;
    width: 35px
}

button.grad-remove-stop[disabled] {
    opacity: .8
}

button.grad-remove-stop:hover:not([disabled]) {
    background: #c00!important;
    border: none
}

button.grad-add-stop:hover {
    background: #34a800!important;
    border: none
}

.grad-add-stop:before {
    content: "\FF0B"
}

.grad-remove-stop:before {
    content: "\2212"
}

.grad-color-stop,.grad-color-value {
    text-align: center
}

#grad-color-table-template {
    display: none
}

#enabled_gradients label {
    position: relative
}

#enabled_gradients label:hover {
    background: #f8f8f8;
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px
}

#enabled_gradients label:hover>.grad-edit-link {
    display: block
}

.grad-edit-link {
    background: var(--accent-color);
    border-radius: 4px;
    color: #fff;
    display: none;
    font-size: .9em;
    padding: .7em 1.4em;
    position: absolute;
    right: 0;
    text-decoration: none;
    text-transform: uppercase;
    top: 50%;
    transform: translateY(-50%)
}

:root {
    --warp-duration: 12s;
    --warp-size: 1000px
}

.bg-container:before {
    content: "";
    height: 100%
}

.bg-container:before,.warp {
    display: inline-block;
    vertical-align: middle
}

.warp {
    perspective: 15px;
    perspective-origin: 50% 50%;
    position: relative
}

.warp.rotating {
    animation: warp-rotate 30s linear infinite
}

.warp-block {
    animation: warp-move var(--warp-duration) infinite linear;
    animation-fill-mode: forwards;
    height: var(--warp-size);
    left: calc(var(--warp-size)/-2);
    position: absolute;
    top: calc(var(--warp-size)/-2);
    transform-style: preserve-3d;
    width: var(--warp-size)
}

.warp-block:nth-child(2) {
    animation: warp-move var(--warp-duration) infinite linear;
    animation-delay: calc(var(--warp-duration)/2)
}

.warp-wall {
    animation: warp-fade var(--warp-duration) infinite linear;
    background: var(--background-image);
    background-size: cover;
    height: 100%;
    opacity: 0;
    position: absolute;
    width: 100%
}

.warp-block:nth-child(2) .warp-wall {
    animation-delay: calc(var(--warp-duration)/2)
}

.warp-wall-right {
    transform: rotateY(90deg) translateZ(calc(var(--warp-size)/2))
}

.warp-wall-left {
    transform: rotateY(-90deg) translateZ(calc(var(--warp-size)/2))
}

.warp-wall-top {
    transform: rotateX(90deg) translateZ(calc(var(--warp-size)/2))
}

.warp-wall-bottom {
    transform: rotateX(-90deg) translateZ(calc(var(--warp-size)/2))
}

.warp-wall-back {
    transform: rotateX(180deg) scaleY(-1) translateZ(calc(var(--warp-size)/2))
}

.paused .warp-block,.paused .warp-wall,.warp.paused {
    animation: none;
    opacity: 1
}

@keyframes warp-fade {
    0% {
        opacity: 0
    }

    25% {
        opacity: 1
    }

    75% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes warp-move {
    0% {
        transform: translateZ(calc(var(--warp-size)/-2)) rotate(0deg)
    }

    to {
        transform: translateZ(calc(var(--warp-size)/2)) rotate(0deg)
    }
}

@keyframes warp-rotate {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

@media screen and (max-width: 1225px) {
    header h1 {
        font-size:26px
    }

    #file_explorer,#playlist_panel {
        margin: 0 5px
    }

    .bottom-panel {
        padding: 0 5px
    }

    .controls {
        column-gap: 20px
    }

    .controls-left {
        margin-left: 20px
    }

    .controls-right {
        margin-right: 5px
    }

    .panel-internal {
        margin: 0
    }

    .progress-bar {
        padding: 0
    }

    .value {
        height: 1em;
        max-width: 40%;
        overflow: hidden;
        text-align: right
    }
}