/*
 * KLAUSISME Afspiller
 *
 * Version: 1.6.0
 *
 * Visualization removed.
 * Static background only.
 */


html,
body {

    min-height: 100%;
}


body {

    margin: 0;

    padding: 40px 20px;

    font-family:
        "Courier New",
        monospace;

    color:
        #b8d8b8;


    /*
     * Completely static background.
     *
     * No animation.
     * No visualization.
     * No GPU animation loop.
     */

    background:
        #080c0b;


    overflow-x:
        hidden;
}


.player {

    width:
        min(
            900px,
            100%
        );

    margin:
        0 auto;

    padding:
        28px;

    box-sizing:
        border-box;


    background:
        #070c0a;


    border:
        1px solid
        #52705a;


    box-shadow:
        0 0 25px
        rgba(
            0,
            0,
            0,
            .8
        );
}


h1 {

    margin:
        0 0 28px;

    font-size:
        28px;

    font-weight:
        normal;

    letter-spacing:
        2px;

    color:
        #c5e6c5;
}


h2 {

    margin:
        0 0 10px;

    font-size:
        16px;

    font-weight:
        normal;

    letter-spacing:
        1px;

    color:
        #91bd91;
}


section {

    margin-bottom:
        28px;
}


/* ==============================
   CONTROLS
   ============================== */


.controls {

    padding:
        18px;

    background:
        #0b110e;

    border:
        1px solid
        #3d573f;
}


#nowPlaying {

    min-height:
        20px;

    margin-bottom:
        18px;

    color:
        #c5e6c5;
}


/* ==============================
   BUTTONS
   ============================== */


.buttons {

    display:
        flex;

    gap:
        6px;

    margin-bottom:
        18px;
}


.buttons button {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;


    width:
        54px;

    height:
        38px;


    padding:
        0;


    font-family:
        "Courier New",
        monospace;


    color:
        #b8d8b8;


    background:
        #101811;


    border:
        1px solid
        #607b63;


    border-radius:
        0;


    cursor:
        pointer;
}


.buttons button:hover {

    background:
        #1a291d;
}


/* ==============================
   PLAYER ICONS
   ============================== */


.icon {

    display:
        block;

    position:
        relative;
}


.icon.play {

    width:
        0;

    height:
        0;


    border-top:
        8px solid
        transparent;

    border-bottom:
        8px solid
        transparent;

    border-left:
        13px solid
        #9fbd9f;


    margin-left:
        3px;
}


/* Pause icon when playing */


.playingButton
.icon.play {

    width:
        16px;

    height:
        16px;

    border:
        0;

    margin:
        0;
}


.playingButton
.icon.play:before,

.playingButton
.icon.play:after {

    content:
        "";

    position:
        absolute;

    top:
        0;

    width:
        4px;

    height:
        16px;

    background:
        #9fbd9f;
}


.playingButton
.icon.play:before {

    left:
        1px;
}


.playingButton
.icon.play:after {

    right:
        1px;
}


.icon.stop {

    width:
        14px;

    height:
        14px;

    background:
        #9fbd9f;
}


.icon.previous,
.icon.next {

    width:
        17px;

    height:
        16px;
}


.icon.previous:before,
.icon.previous:after,
.icon.next:before,
.icon.next:after {

    content:
        "";

    position:
        absolute;

    top:
        0;

    width:
        0;

    height:
        0;


    border-top:
        8px solid
        transparent;

    border-bottom:
        8px solid
        transparent;
}


.icon.previous:before,
.icon.previous:after {

    border-right:
        10px solid
        #9fbd9f;
}


.icon.previous:before {

    left:
        0;
}


.icon.previous:after {

    left:
        7px;
}


.icon.next:before,
.icon.next:after {

    border-left:
        10px solid
        #9fbd9f;
}


.icon.next:before {

    left:
        0;
}


.icon.next:after {

    left:
        7px;
}


/* ==============================
   PROGRESS
   ============================== */


.progress {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


#progressBar {

    flex:
        1;
}


#currentTime,
#duration {

    min-width:
        40px;

    font-size:
        12px;

    color:
        #718574;
}


#currentTime {

    text-align:
        right;
}


/* ==============================
   VOLUME
   ============================== */


.volume {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    margin-top:
        18px;


    font-size:
        13px;

    color:
        #718574;
}


#volumeBar {

    width:
        180px;
}


input[type="range"] {

    accent-color:
        #789f79;

    cursor:
        pointer;
}


/* ==============================
   RANDOM / LOOP
   ============================== */


.playbackOptions {

    display:
        flex;

    gap:
        8px;

    margin-top:
        18px;
}


.optionButton {

    padding:
        7px 11px;


    font-family:
        "Courier New",
        monospace;

    font-size:
        12px;


    color:
        #9bb89d;


    background:
        #101811;


    border:
        1px solid
        #4f6652;


    border-radius:
        0;


    cursor:
        pointer;
}


.optionButton:hover {

    background:
        #1a291d;
}


.optionButton.active {

    background:
        #263b2a;

    color:
        #d5efd5;

    border-color:
        #7b9e7e;
}


/* ==============================
   FOLDERS
   ============================== */


#folderList {

    box-sizing:
        border-box;

    min-height:
        45px;

    padding:
        10px;

    margin-bottom:
        10px;


    background:
        #0b110e;


    border:
        1px solid
        #3d573f;
}


.folderItem {

    display:
        block;

    padding:
        6px 4px;

    cursor:
        pointer;
}


.folderItem:hover {

    background:
        #17231a;
}


.folderItem input {

    accent-color:
        #80aa80;
}


/* ==============================
   FOLDER BUTTONS
   ============================== */


.folderButtons {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    flex-wrap:
        wrap;
}


#loadButton,
#clearButton,
#refreshButton {

    font-family:
        "Courier New",
        monospace;

    font-size:
        14px;


    color:
        #b8d8b8;


    background:
        #101811;


    border:
        1px solid
        #607b63;


    border-radius:
        0;


    padding:
        8px 14px;


    cursor:
        pointer;
}


#loadButton:hover,
#clearButton:hover,
#refreshButton:hover {

    background:
        #1a291d;
}


/* ==============================
   PLAYLIST
   ============================== */


#songList {

    background:
        #080d0a;

    border:
        1px solid
        #3d573f;
}


.songItem {

    display:
        grid;


    /*
     * Number
     * Song title
     * Folder
     * Duration
     */

    grid-template-columns:
        45px
        minmax(
            0,
            1fr
        )
        max-content
        75px;


    column-gap:
        12px;

    align-items:
        center;


    box-sizing:
        border-box;


    padding:
        9px 10px;


    border-bottom:
        1px solid
        #1d2a20;


    cursor:
        pointer;
}


.songItem:last-child {

    border-bottom:
        none;
}


.songItem:hover {

    background:
        #142017;
}


.songItem.playing {

    background:
        #263b2a;

    color:
        #d5efd5;
}


.songNumber {

    color:
        #667c69;
}


.songName {

    min-width:
        0;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.songFolder {

    color:
        #667c69;

    text-align:
        right;

    white-space:
        nowrap;
}


.songDuration {

    color:
        #718574;

    text-align:
        right;

    white-space:
        nowrap;
}


.playlistInfo {

    margin-top:
        10px;

    font-size:
        13px;

    color:
        #718574;
}


/* ==============================
   SMALL SCREENS
   ============================== */


@media (
    max-width:
    600px
) {

    body {

        padding:
            15px;
    }


    .player {

        padding:
            18px;
    }


    h1 {

        font-size:
            22px;
    }


    .songItem {

        grid-template-columns:
            35px
            minmax(
                0,
                1fr
            )
            65px;
    }


    .songFolder {

        display:
            none;
    }


    .buttons {

        justify-content:
            center;
    }
}