/* Font import */
@font-face {font-family: Silkscreen; src: url(./fonts/slkscr.ttf);}

*{
    margin: 0;
    padding: 0;
}

body{
    width: 600px;
    height: 250px;
    font-family: georgia;
    color: white;
    background: #2B2E2E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%233c3f3f' fill-opacity='0.4'%3E%3Cpath fill-rule='evenodd' d='M41 37.59V25h-2v12.59l-8.9-8.9-1.41 1.41 8.9 8.9H25v2h12.59l-8.9 8.9 1.41 1.41 8.9-8.9V55h2V42.41l8.9 8.9 1.41-1.41-8.9-8.9H55v-2H42.41l8.9-8.9-1.41-1.41-8.9 8.9zM1 1h2v2H1V1zm0 4h2v2H1V5zm0 4h2v2H1V9zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm4 0h2v2H5v-2zm4 0h2v2H9v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zM5 1h2v2H5V1zm4 0h2v2H9V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm0 4h2v2h-2V5zm0 4h2v2h-2V9zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zM5 5h70v70H5V5zm2 68h66V7H7v66zM9 9h62v62H9V9zm2 60h58V11H11v58zm2-39.6V13h16.4A29.1 29.1 0 0 0 13 29.4zM15 15v6.67A31.17 31.17 0 0 1 21.67 15H15zm-2 52V50.6A29.1 29.1 0 0 0 29.4 67H13zm2-8.67V65h6.67A31.17 31.17 0 0 1 15 58.33zM67 67H50.6A29.1 29.1 0 0 0 67 50.6V67zm-8.67-2H65v-6.67A31.17 31.17 0 0 1 58.33 65zM67 13v16.4A29.1 29.1 0 0 0 50.6 13H67zm-2 8.67V15h-6.67A31.17 31.17 0 0 1 65 21.67zM39 13h2v2h-2v-2zm7.02.66l1.93.52-.51 1.93-1.94-.52.52-1.93zm6.61 2.46l1.74 1-1 1.73-1.74-1 1-1.73zm5.75 4.08l1.42 1.42-1.42 1.4-1.4-1.4 1.4-1.42zm4.5 5.43l1 1.74-1.73 1-1-1.74 1.73-1zm2.94 6.42l.52 1.93-1.93.52-.52-1.94 1.93-.51zM67 39v2h-2v-2h2zm-.66 7.02l-.52 1.93-1.93-.51.52-1.94 1.93.52zm-2.46 6.61l-1 1.74-1.73-1 1-1.74 1.73 1zm-4.08 5.75l-1.42 1.42-1.4-1.42 1.4-1.4 1.42 1.4zm-5.43 4.5l-1.74 1-1-1.73 1.74-1 1 1.73zM41 67h-2v-2h2v2zm6.95-1.18l-1.93.52-.52-1.93 1.94-.52.51 1.93zm-13.97.52l-1.93-.52.51-1.93 1.94.52-.52 1.93zm-6.61-2.46l-1.74-1 1-1.73 1.74 1-1 1.73zm-5.75-4.08l-1.42-1.42 1.42-1.4 1.4 1.4-1.4 1.42zm-4.5-5.43l-1-1.74 1.73-1 1 1.74-1.73 1zm-2.94-6.42l-.52-1.93 1.93-.52.52 1.94-1.93.51zM13 41v-2h2v2h-2zm.66-7.02l.52-1.93 1.93.51-.52 1.94-1.93-.52zm2.46-6.61l1-1.74 1.73 1-1 1.74-1.73-1zm4.08-5.75l1.42-1.42 1.4 1.42-1.4 1.4-1.42-1.4zm5.43-4.5l1.74-1 1 1.73-1.74 1-1-1.73zm6.42-2.94l1.93-.52.52 1.93-1.94.52-.51-1.93zM40 63a23 23 0 1 1 0-46 23 23 0 0 1 0 46zm0-2a21 21 0 1 0 0-42 21 21 0 0 0 0 42zm0-2a19 19 0 1 1 0-38 19 19 0 0 1 0 38zm0-2a17 17 0 1 0 0-34 17 17 0 0 0 0 34z'/%3E%3C/g%3E%3C/svg%3E") fixed;
}

select{
    margin-right: 1px;
}

button{
    padding: 2px;
    margin-right: 1px;
    font-family: Silkscreen, monospace;

    background: linear-gradient(to bottom, #ECE0B8 0%, #c5b580 100%);
    border: outset 2px #ECE0B8;
    border-radius: 2px;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75);
}

button:active{
    background: linear-gradient(to top, #ECE0B8 0%, #c5b580 100%);
    border: inset 2px #ECE0B8;
    border-radius: 2px;
    box-shadow: none;
}

.toggle-button[state='off'] > p::before{
    content: url(./images/green-light-off.gif);
    margin-right: 3px;
}

.toggle-button[state='on'] > p::before{
    content: url(./images/green-light-on.gif);
    margin-right: 3px;
}


select{
    font-family: Silkscreen, monospace;

    background:  linear-gradient(to bottom, #ECE0B8 0%, #c5b580 100%);
    border: outset 2px #ECE0B8;
    border-radius: 2px;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75);
}

select:active{
    background: linear-gradient(to top, #ECE0B8 0%, #c5b580 100%);
    border: inset 2px #ECE0B8;
    border-radius: 2px;
    box-shadow: none;
}




/* Blink class */
.blink {
    animation: blinker 2s step-start infinite;
}
  
@keyframes blinker {
    50% {
        opacity: 0;
    }
}


/* Columns section */
.columns{
    display: flex;
}

.columns > div:first-child{
    flex-shrink: 0;
    margin-right: 5px;
}

.columns > div:last-child{
    flex-grow: 1;
}



/* -- Sliders -- */
input[type="range"] {
    appearance: none;
    background: none;
    border: inset 2px #403f67;
}

/* slider track */
input[type="range"]::-webkit-slider-runnable-track /* For Chrome */ {
    background-color: #201e3a;
    height: 100%;
}

input[type="range"]::-moz-range-track /* For Firefox */ {
    background-color: #201e3a;
    height: 100%;
}

/* slider thumb */
input[type="range"]::-webkit-slider-thumb /* For Chrome */ {
    appearance: none;

    background: url(./images/slider.gif), linear-gradient(to bottom, #ECE0B8 0%, #c5b580 100%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: outset 2px #ECE0B8;
    
    border-radius: 2px;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75);

    height: 1rem;
    width: 2.5rem;
}

input[type="range"]::-webkit-slider-thumb:active /* For Chrome */ {
    background: url(./images/slider.gif), linear-gradient(to top, #ECE0B8 0%, #c5b580 100%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: inset 2px #ECE0B8;
    border-radius: 2px;
    box-shadow: none;
}



input[type="range"]::-moz-range-thumb /* For Firefox */ {
    background: url(./images/slider.gif), linear-gradient(to bottom, #ECE0B8 0%, #c5b580 100%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: outset 2px #ECE0B8;
    
    border-radius: 2px;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75);

    height: 1rem;
    width: 2.5rem;
}

input[type="range"]::-moz-range-thumb:active /* For Firefox */ {
    background: url(./images/slider.gif), linear-gradient(to top, #ECE0B8 0%, #c5b580 100%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: inset 2px #ECE0B8;
    border-radius: 2px;
    box-shadow: none;
}



/* ---- Web Deck Player ---- */
#web-deck-player{
    padding: 0 5px;
}


/* Player title bar */
#player-title-bar{
    display: flex;
}

#player-title-bar:before,
#player-title-bar:after{
    content: "";
    flex: 1;
    margin: auto 1em;
    height: 2px;
    border-top: ridge #ECE0B8 2px;
    border-bottom: ridge #ECE0B8 2px;
}

/* Player body */
#player-body{
    padding: 5px;
    border: groove 3px #403f67;
}

/* Player main section */
#player-main-section{
    margin-bottom: 5px;
}


/* Player display */
#player-display{
    width: 250px;
    height: 140px;
    background: black;
    border: inset 2px #403f67;
}


/* Player info */
#info-screen{
    background: black;
    color: limegreen;
    border: inset 2px #403f67;
    margin-bottom: 5px;
}

#songLabel{
    text-shadow: 0 0 10px #49ff18, 0 0 20px #49FF18, 2px 2px 2px rgba(206,89,55,0);
}

#statusLabel{
    text-shadow: 0 0 10px #49ff18, 0 0 20px #49FF18, 2px 2px 2px rgba(206,89,55,0);
}

.player-row{
    margin-top: 5px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

#volumeButton{
    height: 25px;
    width: 25px;
}

#volumeButton img{
    height: 100%;
}

#volumeBar{
    width: 120px;
}

#themeSelector{
    height: 25px;
    max-width: 150px;
    text-overflow: ellipsis;
}

#videoButton{
    height: 25px;
}

#playerLogo{
    text-align: center;
    height: fit-content;
}

#playerLogo > img{
    margin-top: 5px;
    max-height: 50px;
}

/* Player control panel */
#player-control-panel{
    font-size: 0;
}

#seekBar{
    width: 99%;
    margin-bottom: 5px;
}

.playing-controls{
    margin-bottom: 5px;
    margin-right: 5px;
    display: inline-block;
    width: fit-content;
    background: #201e3a;
    border: inset 2px #403f67;
    vertical-align: middle;
}

.playing-controls[rounded]{
    border-radius: 20px;
}

.playing-controls[float-right]{
    float: right;
}

.playing-controls button{
    height: 30px;
    min-width: 50px;
}

.playing-controls button img{
    height: 100%;
}


#infoButton{
    border-radius: 20px;
    height: 30px;
    min-width: 30px;
    font-size: large;
}

#playlistSelector{
    height: 30px;
    max-width: 175px;
    text-overflow: ellipsis;
}