/* ==================================================
Simantics Services 5Player - Small
A simple embedded HTML5 media player
Copyright (c) 2022 Simantics Services
All rights reserved
================================================== */


/* == VARIABLES == */

:root {
    --lightblue: #33CCFF;
    --medblue: #0099CC;
    --meddarkblue: #007399;
    --darkblue: #005082;
    }


/* == UNIVERSAL ELEMENTS == */

* {
    margin: 0;
    padding: 0;
}

.hidden {
    display: none;
}

.control-buttons .visible {
    display: block;
}


/* == SECTIONS == */

.ss5player {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: max-content;
}

.player {
    padding: 0px;
}

.media-cover {
    position: relative;
    text-align: center;
    display: flex;
    justify-content: center;
}

.media-cover .cover-art {
    background-image: url("../images/multimedia.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

.media-cover .cover-artist {
    font-family: 'Birthstone';
    color: var(--darkblue);
    position: absolute;
    top: 57%;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--darkblue);
}

.tracker {
    display: grid;
    grid-template-columns: 2% 96% 2%;
    grid-template-rows: max-content;
    align-items: center;
    /* column-gap: 4px; */
}

.timecur,
.timedur {
    font-family: verdana;
    font-size: 1.0vw;
    color: var(--meddarkblue);
    text-align: center;
}

.trackbar {
    position: relative;
    background-color: var(--meddarkblue);
    width: 100%;
    margin-top: 2px;
}

.trackbar .ui-slider-range {
    background-color: var(--lightblue);
    height: 100%;
    position: absolute;
}

.trackbar .ui-slider-handle {
    position: absolute;
    background: white;
    opacity: 0.6;
    border-radius: 10px;
    outline-color: var(--darkblue);
    outline: auto;
}

.media-title,
.media-artist,
.media-track,
.media-date {
    font-family: verdana;
    text-align: center;
}

.media-title {
    color: var(--meddarkblue);
    font-weight: bold;
}

.media-artist {
    color: var(--medblue);
}

.media-track,
.media-date {
    color: var(--lightblue);
    font-size: 1.2vw;
}

.control-buttons {
    display: grid;
    grid-template-columns: auto 45px 50px 45px auto;
    align-items: center;
}


/* == CONTROL BUTTONS == */

.control-buttons .prev-sm,
.control-buttons .prev-sm:Active,
.control-buttons .next-sm,
.control-buttons .next-sm:Active,
.control-buttons .play,
.control-buttons .play:Active,
.control-buttons .pause,
.control-buttons .pause:Active {
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
}

.control-buttons .prev-sm,
.control-buttons .prev-sm:Active,
.control-buttons .next-sm,
.control-buttons .next-sm:Active {
    width: 45px;
    height: 44px;
}

.prev-sm {
    background-image: url("../images/control-buttons/ctrl-btns-up-prev-sm-007399.png");
}

.prev-sm:Active {
    background-image: url("../images/control-buttons/ctrl-btns-dn-prev-sm-007399.png");
}

.next-sm {
    background-image: url("../images/control-buttons/ctrl-btns-up-next-sm-007399.png");
}

.next-sm:Active {
    background-image: url("../images/control-buttons/ctrl-btns-dn-next-sm-007399.png");
}

.control-buttons .play,
.control-buttons .play:Active,
.control-buttons .pause,
.control-buttons .pause:Active,
.control-buttons .play-pause,
.control-buttons .play-pause:Active {
    /* top: 50%; */
    /* transform: translateY(-50%); */
    width: 50px;
    height: 50px;
}

.play {
    background-image: url("../images/control-buttons/ctrl-btns-up-play-007399.png");
}


/*.play:Active {
            background-image: url("../images/control-buttons/ctrl-btns-dn-play-007399.png");
        } */

.pause {
    background-image: url("../images/control-buttons/ctrl-btns-up-pause-007399.png");
    display: none;
}


/*.pause:Active {
            background-image: url("../images/control-buttons/ctrl-btns-dn-pause-007399.png");
            display: none;
        } */

.play-pause {
    background-image: url("../images/control-buttons/ctrl-btns-up-playpause-007399.png");
}

.play-pause:Active {
    background-image: url("../images/control-buttons/ctrl-btns-dn-playpause-007399.png");
}


/* == PLAYLIST == */

.playlist {
    font-family: Verdana;
    padding-top: 20px;
    height: 630px;
    overflow-y: scroll;
}

.playlist li {
    color: var(--darkblue);
    cursor: pointer;
    margin: 0 0 5px 0px;
}

.playlist li.active {
    font-weight: bold;
}


/* == RESPONSIVE == */

@media only screen and (max-width: 599px) {
    .ss5player {
        grid-template-columns: 100%;
        justify-items: center;
    }
    .player {
        width: 300px;
    }
    .cover-art {
        height: 300px;
        width: 300px;
    }
    .media-cover .cover-artist {
        font-size: 13vw;
        line-height: 75%;
    }
    .media-title {
        font-size: 4vw;
    }
    .media-artist {
        font-size: 3vw;
    }
    .playlist {
        font-size: 3vw;
        text-align: center;
    }
    .trackbar {
        height: 20px;
    }
    .trackbar {
        height: 10px;
    }
    .trackbar .ui-slider-handle {
        margin: -1px 0 0 -7px;
        height: 12px;
        width: 14px;
    }
}

@media only screen and (min-width: 600px) {
    .ss5player {
        grid-template-columns: max-content auto;
        column-gap: 20px;
    }
    .player {
        width: 40vw;
        max-width: 500px;
    }
    .cover-art {
        height: 40vw;
        max-height: 500px;
        width: 40vw;
        max-width: 500px;
    }
    .media-cover .cover-artist {
        /* font-size: 7vw; */
        line-height: 75%;
    }
    .media-title {
        font-size: 30px;
    }
    .media-artist {
        font-size: 20px;
    }
    .playlist {
        font-size: 20px;
        text-align: left;
    }
    .trackbar {
        height: 10px;
    }
    .trackbar {
        height: 14px;
    }
    .trackbar .ui-slider-handle {
        margin: -1px 0 0 -10px;
        height: 16px;
        width: 20px;
    }
    @media all and (min-width: 50px) {
        body {
            font-size: 6.0em;
        }
    }
    @media all and (min-width: 100px) {
        body {
            font-size: 6.2em;
        }
    }
    @media all and (min-width: 200px) {
        body {
            font-size: 6.4em;
        }
    }
    @media all and (min-width: 300px) {
        body {
            font-size: 6.6em;
        }
    }
    @media all and (min-width: 400px) {
        body {
            font-size: 6.8em;
        }
    }
    @media all and (min-width: 500px) {
        body {
            font-size: 7.0em;
        }
    }
    @media all and (min-width: 600px) {
        body {
            font-size: 7.2em;
        }
    }
    @media all and (min-width: 700px) {
        body {
            font-size: 7.4em;
        }
    }
    @media all and (min-width: 800px) {
        body {
            font-size: 7.6em;
        }
    }
    @media all and (min-width: 900px) {
        body {
            font-size: 7.8em;
        }
    }
    @media all and (min-width: 1000px) {
        body {
            font-size: 7.0em;
        }
    }
    @media all and (min-width: 1100px) {
        body {
            font-size: 8.2em;
        }
    }
    @media all and (min-width: 1200px) {
        body {
            font-size: 8.4em;
        }
    }
    @media all and (min-width: 1300px) {
        body {
            font-size: 8.6em;
        }
    }
    @media all and (min-width: 1400px) {
        body {
            font-size: 8.8em;
        }
    }
    @media all and (min-width: 1500px) {
        body {
            font-size: 9.0em;
        }
    }
    @media all and (min-width: 1500px) {
        body {
            font-size: 9.2em;
        }
    }
    @media all and (min-width: 1600px) {
        body {
            font-size: 9.4em;
        }
    }
    @media all and (min-width: 1700px) {
        body {
            font-size: 9.6em;
        }
    }
    @media all and (min-width: 1800px) {
        body {
            font-size: 9.8em;
        }
    }
    @media all and (min-width: 1900px) {
        body {
            font-size: 10.0em;
        }
    }
    @media all and (min-width: 2000px) {
        body {
            font-size: 10.2em;
        }
    }
    @media all and (min-width: 2100px) {
        body {
            font-size: 10.4em;
        }
    }
    @media all and (min-width: 2200px) {
        body {
            font-size: 10.6em;
        }
    }
    @media all and (min-width: 2300px) {
        body {
            font-size: 10.8em;
        }
    }
    @media all and (min-width: 2400px) {
        body {
            font-size: 11.0em;
        }
    }
    @media all and (min-width: 2500px) {
        body {
            font-size: 11.2em;
        }
    }
    @media all and (min-width: 2600px) {
        body {
            font-size: 11.4em;
        }
    }
    @media all and (min-width: 2700px) {
        body {
            font-size: 11.6em;
        }
    }
    @media all and (min-width: 2800px) {
        body {
            font-size: 11.8em;
        }
    }
    @media all and (min-width: 2900px) {
        body {
            font-size: 12.0em;
        }
    }
    @media all and (min-width: 3000px) {
        body {
            font-size: 12.2em;
        }
    }
    @media all and (min-width: 3100px) {
        body {
            font-size: 12.4em;
        }
    }
    @media all and (min-width: 3200px) {
        body {
            font-size: 12.6em;
        }
    }
    @media all and (min-width: 3300px) {
        body {
            font-size: 12.8em;
        }
    }
    @media all and (min-width: 3400px) {
        body {
            font-size: 13.0em;
        }
    }
    @media all and (min-width: 3500px) {
        body {
            font-size: 13.2em;
        }
    }
    @media all and (min-width: 3600px) {
        body {
            font-size: 13.4em;
        }
    }
    @media all and (min-width: 3700px) {
        body {
            font-size: 13.6em;
        }
    }
    @media all and (min-width: 3800px) {
        body {
            font-size: 13.8em;
        }
    }
    @media all and (min-width: 3900px) {
        body {
            font-size: 14.0em;
        }
    }
    @media all and (min-width: 4000px) {
        body {
            font-size: 14.2em;
        }
    }
}