/* Font import */
@font-face {
  font-family: "Carter One";
  src:
    local("Carter One"),
    url("assets/CarterOne-Regular.ttf") format("truetype"),
    url("https://fonts.googleapis.com/css2?family=Carter+One&display=swap");
}

*{
    margin: 0;
    padding: 0;
}

select{
    margin-right: 1px;
}

button{
    padding: 2px;
    margin-right: 1px;

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

button:active{
    background: linear-gradient(to top, #ededed 0%, #c7c7c7 100%);
    border: outset 2px #eeeeee;
    border-radius: 2px;
    box-shadow: none;
}

.playing-controls .toggle-button {
    width: 60px;
}

#shuffleButton {
    border-radius: 20px 0 0 20px;
}

#shuffleButton[state='off']::before{
    content: url(./images/green-light-off.gif);
    margin-right: 3px;
    position: relative;
    bottom: 11px;
}

#shuffleButton[state='on']::before{
    content: url(./images/green-light-on.gif);
    margin-right: 3px;
    position: relative;
    bottom: 11px;
}

#videoButton {
    border-radius: 0 20px 20px 0;
}

#videoButton[state='off']::after{
    content: url(./images/green-light-off.gif);
    margin-left: 3px;
    position: relative;
    bottom: 11px;
}

#videoButton[state='on']::after{
    content: url(./images/green-light-on.gif);
    margin-left: 3px;
    position: relative;
    bottom: 11px;
}

/* 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 silver;
}

/* slider track seek */
input[type="range"]::-webkit-slider-runnable-track /* For Chrome */ {
    background-color: rgb(30, 30, 30);
    height: 100%;
}

input[type="range"]::-moz-range-track /* For Firefox */ {
    background-color: rgb(30, 30, 30);
    height: 100%;
}

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

    background: url(./images/minus.png), linear-gradient(to bottom, #f0f0f0 0%, #cccccc 100%);
    background-repeat: no-repeat;
    filter: hue-rotate(90deg);
    background-position: center;
    background-size: contain;
    border: outset 2px #eaeaea;
    
    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:hover /* For Chrome */ {
    filter: hue-rotate(90deg) brightness(.95) contrast(1.05);
    cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb:active /* For Chrome */ {
    background: url(./images/minus.png), linear-gradient(to top, #f0f0f0 0%, #cccccc 100%);
    filter: hue-rotate(90deg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: inset 2px #eaeaea;
    border-radius: 2px;
    box-shadow: none;
}



input[type="range"]::-moz-range-thumb /* For Firefox */ {
    background: url(./images/slider.gif), linear-gradient(to bottom, #f0f0f0 0%, #cccccc 100%);
    filter: hue-rotate(90deg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: outset 2px #eaeaea;
    
    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:hover /* For Firefox */ {
    filter: hue-rotate(90deg) brightness(.95) contrast(1.05);
    cursor: pointer;
}

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

#volumeBar {
    height: 36px;
    border-radius: 20px;
    border: none;
}


/* slider track volume */
#volumeBar::-webkit-slider-runnable-track /* For Chrome */ {
    background-color: rgba(30, 30, 30, .75);
    height: 40px;
    margin-top: 2px;
    border-radius: 20px;
    border: inset 2px #eaeaea;
}

#volumeBar::-moz-range-track /* For Firefox */ {
    background-color: rgba(30, 30, 30, .75);
    height: 40px;
    margin-top: 2px;
    border-radius: 20px;
    border: inset 2px #eaeaea;
}


/* slider thumb volume */
#volumeBar::-webkit-slider-thumb /* For Chrome */ {
    border-radius: 20px;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75);
    margin-top: -1px;
    height: 40px;
    width: 40px;
}

#volumeBar::-webkit-slider-thumb:active /* For Chrome */ {
    border-radius: 20px;
    box-shadow: none;
}



#volumeBar::-moz-range-thumb /* For Firefox */ {
    border-radius: 20px;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75);
    margin-top: -1px;
    height: 40px;
    width: 40px;
}

#volumeBar::-moz-range-thumb:active /* For Firefox */ {
    border-radius: 20px;
    box-shadow: none;
}



/* ---- Web Deck Player ---- */
#web-deck-player{
    padding: 0 5px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
}


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

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

/* Player body */
#player-body {
    background: linear-gradient(180deg, rgba(238,238,238,1) 0%, rgba(232,232,232,1) 30%, rgba(214,214,214,1) 100%);
    padding: 5px;
    border: groove 3px gray;
    border-radius: 20px;
    display: flex;
    gap: 4px;
}


@media only screen and (max-width: 875px) {
  #player-body {
	flex-direction: column-reverse;
  }
}

#playlist-container {
    width: 200px;
    display: flex;
    flex-direction:column;
    border-radius: 20px 0 0 20px;
    overflow: auto;
    border: groove 3px gray;
    max-height: 460px;
    background: linear-gradient(180deg, rgba(238,238,238,1) 0%, rgba(232,232,232,1) 30%, rgba(214,214,214,1) 100%);
}

#playlist-container.video-hidden {
    max-height: 132px;
}

@media only screen and (max-width: 875px) {
  #playlist-container, #playlist-container.video-hidden {
	width: calc(100% - 5px);
    max-height: 200px;
    border-radius: 0 0 20px 20px;
  }
}

#songLabel {
    height: 32px;
}


/* Player main section */
.playlist-song {
    font-family: Boogaloo;
    font-size: 1.1em;
    padding: 4px 12px; 
    border-bottom: 1px solid #0008;
    cursor: pointer;
    background: linear-gradient(90deg, rgba(238,238,238,.5) 0%, rgba(232,232,232,.5) 85%, rgba(214,214,214,.5) 100%);
    display: flex;
    gap: 4px;
    justify-content: space-between;
    align-items: center;
}

.playlist-song img {
    height: 24px;
    width: 24px;
    filter: hue-rotate(90deg);
}

.playlist-song:hover {
    background-color: #fff7;
}

.playlist-song.active, .playlist-song:active {
    color: #8d24af;
    background-color: #feed9888;
}

.playlist-song.active:hover {
    background-color: #feed98;
}

/* Player display */
#player-display{
    width: 576px;
    height: 324px;
    background: black;
    border: inset 2px #403f67;
    border-radius: 0 20px 0 0;
    overflow: hidden;
}


@media only screen and (max-width: 875px) {
  #player-display {
	width: calc(100vw - 24px);
    height: calc((100vw - 24px) / 1920 * 1080);
    border-radius: 20px 20px 0 0;
  }
}

/* Player info */

.info-and-links {
    display: flex;
    gap: 8px;
    align-items: center;
}

#info-screen{
    background: black;
    color: white;
    border: inset 2px #403f67;
    flex: 50%;
}

#statusLabel{
    font-family: Carter One;
    font-size: 0.75em;
    display: flex;
    justify-content: center;
    gap: 16px;
}

#statusLabel * {
    flex-basis: 72px;
}

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


@media only screen and (max-width: 875px) {
  .player-row {
	flex-direction: column;
    gap: 8px;
  }
}

#volumeButton{
    height: 40px;
    width: 40px;
    border-radius: 50%;
}

#volumeBar{
    width: 180px;
}


@media only screen and (max-width: 875px) {
  #volumeBar {
	width: calc(100vw - 76px);
  }
}

/* Player control panel */
#player-control-panel{
    display: flex;
    gap: 8px;
    font-size: 0;
}


@media only screen and (max-width: 875px) {
  #player-control-panel {
    justify-content: space-between;
  }
}

#seekBar{
    width: calc(100% - 4px);
    margin: 5px 0;
}

@media only screen and (max-width: 875px) {
    #seekBar {
        width: calc(100vw - 24px);
    }
}

.playing-controls{
    margin-bottom: 5px;
    margin-right: 5px;
    display: inline-flex;
    gap: 2px;
    width: fit-content;
    background: #0003;
    border: inset 2px silver;
    vertical-align: middle;
    border-radius: 20px;
}

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

.playing-controls button{
    height: 40px;
    width: 40px;
    border-radius: 50%;

}

.playing-controls button img{
    height: 100%;
    filter: hue-rotate(90deg);
}

.playing-controls button:hover {
    filter: brightness(.95) contrast(1.05);
    cursor: pointer;
}