body {
    font: 1em sans-serif;
    background-color: black;
    color: white;
}

/* Only show #settings_ui if #show_settings is checked */
#settings_ui {
    display: none;
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #202020;
}
#show_settings:checked + #settings_ui {
    display: block;
}

#connectivity {
    margin-bottom: 12px;
}
#connectivity > div {
    display: inline-block;
    height: 32px;
}
#connectivity > div > * {
    height: 32px;
}
#connectivity > div > button {
    font-size: 1.1em;
}

#connectivity > div > button[data-status="disconnected"] {
    background-color: #3030A0;
    color: white;
}
#connectivity > div > button[data-status="connected"] {
    background-color: #30F080;
    color: white;
}
@keyframes scroll-background {
    from { background-position-x: 0%; }
    to { background-position-x: 100%; }
}
#connectivity > div > button[data-status="connecting"] {
    background: linear-gradient(90deg,#3030A0,#8080F0,#3030A0);
    background-size: 200% 200%;
    
    animation-name: scroll-background;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;
    color: white;
}
#connectivity > div > button[data-status="error"] {
    background-color: #A03030;
    color: white;
}

#peers_ui {
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #202020;
}

/* Channel Strip */
div.channel-strip {
    font: 1em monospace;
    display: inline-block;
    margin: 5px 1px;
    width: 70px;
    vertical-align: top;
    text-align: center;
    padding: 2px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #303030;
    
}
div.channel-strip[data-color-id="0"] > .label{ background-color: #202020; }
div.channel-strip[data-color-id="1"] > .label{ background-color: #FF0000; }
div.channel-strip[data-color-id="2"] > .label{ background-color: #FFAA00; color: black;}
div.channel-strip[data-color-id="3"] > .label{ background-color: #FFFF00; color: black;}
div.channel-strip[data-color-id="4"] > .label{ background-color: #00AA00; }
div.channel-strip[data-color-id="5"] > .label{ background-color: #00AAFF; }
div.channel-strip[data-color-id="6"] > .label{ background-color: #0000FF; }
div.channel-strip[data-color-id="7"] > .label{ background-color: #AA00FF; }

div.channel-strip > label, div.channel-strip > .label {
    display: block;
}
div.channel-strip > .label {
    font-size: 1.2em;
    cursor: pointer;
    user-select: none;
}

div.channel-strip > input[type="range"].fader {
    writing-mode: vertical-lr; 
    direction: rtl;
    width: 16px;
    height: 120px;
    margin: 0;
    accent-color: lime;
}
div.channel-strip.master > input[type="range"].fader {
    accent-color: red;
}
div.channel-strip.effect > input[type="range"].fader{
    accent-color: cyan;
}

div.channel-strip > meter.peak {
    writing-mode: vertical-lr; 
    direction: rtl;
    width: 20px;
    height: 120px;
    margin-left: 0;
    margin-right:0;
}
div.channel-strip > meter.peak[data-signal="true"]{
    /*background-color: lime;*/
}
div.channel-strip > meter.peak[data-clip="true"]{
    /*background-color: red;*/
}
div.channel-strip > .toggle.mute[data-value="0"] {
    background-color: #800000;
}
div.channel-strip > .toggle.mute[data-value="1"] {
    background-color: red;
    color: white;
}
div.channel-strip > .toggle.solo[data-value="0"] {
    background-color: #805000;
}
div.channel-strip > .toggle.solo[data-value="1"] {
    background-color: orange;
    color: white;
}
div.channel-strip > select.record {
    background-color: #a0a0a0;
}
div.channel-strip > select.record:has(> option[value="1"]:checked) {
    background-color: lime;
}
div.channel-strip > select.record:has(> option[value="2"]:checked) {
    background-color: red;
}

/* Recorder */
div.recorder {
    display: inline-block;
    font: 1.1em monospace;
    height: 120px;
    width: 150px;
    vertical-align: top;
    text-align: center;
    padding: 2px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #303030; 
}
div.recorder > div.timestamp {
    width: 100%;
    height: 20px;
    overflow: hidden;
}
div.recorder > div.timestamp > span::after {
    content: ":";
}
div.recorder > div.timestamp > span:nth-last-child(1)::after, div.recorder > div.timestamp > span:nth-child(1)::after  {
    content: "";
}
div.recorder > div.position{
    font-size: 1.4em;
}
div.recorder > div.remaining::before {
    content: "💾";
}
div.recorder-transport {
    height: 32px;
    position: relative;
    bottom: 0;
}
div.recorder-transport > button {
    height: 32px;
    width: 32px;
    color: white;
    background: #505050;
}
div.recorder-transport > button.stop {
    background: #505050;
}
div.recorder-transport > button.stop:after {
    content: "⏹"
}
div.recorder-transport > button.play:after {
    content: "▶"
}
div.recorder-transport > button.record:after {
    content: "⏺"
}
@keyframes blink-green {
    0% {background-color: #505050;}
    50% {background-color: #50F050;}
    100% {background-color: #505050;}
}
@keyframes blink-red {
    0% {background-color: #505050;}
    50% {background-color: #F05050;}
    100% {background-color: #505050;}
}
div.recorder-transport[data-value="2"] > button.play, div.recorder-transport[data-value="4"] > button.play {
    animation: blink-green 1s infinite;
}
div.recorder-transport[data-value="4"] > button.record {
    animation: blink-red 1s infinite;
}
div.recorder-transport[data-value="1"] > button.play, div.recorder-transport[data-value="5"] > button.play {
    background-color: #50F050;
}
div.recorder-transport[data-value="3"] > button.record, div.recorder-transport[data-value="5"] > button.record {
    background-color: #F05050;
}

/* Graphic EQ */
div.graphic-eq {
    display: inline-block;
    font: 1.1em monospace;
    height: 150px;
    width: 550px;
    vertical-align: top;
    text-align: center;
    padding: 2px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #303030; 
}
div.graphic-eq > button.on {
    background-color: #505050;
    vertical-align: top;
}
div.graphic-eq > button.on[data-value="1"] {
    background-color: #50F050;
}
div.graphic-eq > .band {
    display: inline-block;
    width: 32px;
    text-align: center;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-collapse: collapse;
}
div.graphic-eq > .band > input[type="range"].fader {
    writing-mode: vertical-lr; 
    direction: rtl;
    width: 30px;
    height: 120px;
    margin: 0;
    accent-color: lime;
    display: block;
}
div.graphic-eq > .band > span {
    display: block;
    text-align: center;
}

/* Inspector */
div.inspector {
    display: inline-block;
    font: 1.1em monospace;
    width: 400px;
    vertical-align: top;
    text-align: left;
    padding: 2px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #303030; 
}
div.inspector > .controls > .label {
    text-align: center;
    width: 100%;
    display: block;
}
div.inspector .row {
    text-align: left;
    display: inline-block;
    width: 50%;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
div.inspector input[type="range"] {
    width: 150px;
    display: block;
}
div.inspector input[type="range"].fxsend {
    accent-color: cyan;
}
div.inspector input[type="range"].pan {
    accent-color: red;
}
div.parametric-eq > .band {
    vertical-align: top;
}
div.parametric-eq input[type="range"].fader {
    width: 100px;
    height: 30px;
    margin: 0;
    accent-color: lime;
    display: block;
}
div.parametric-eq button.off {
    background-color: #505050;
    vertical-align: top;
}
div.parametric-eq button.off[data-value="1"] {
    background-color: #f05050;
}