.guiholder {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 350px;
    height: 100px;
    background: #000;
    font-family: sans-serif;
    color: white;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

#gui-loading-bar {
    position: absolute;
    top: 0;
    height: 4px;
    width: 100%;
    background-color: #333;
}

#gui-inner-loading-bar{
    height: 4px;
    width: 30%;
    background: blue;
    display: none;
}
#gui-loading-bar[data-exists="true"]>#gui-inner-loading-bar {
    display: block;
    animation: animation 5s ease-in-out infinite;
}

@keyframes animation {
    0% {
        margin-left: 0;
        background: hsl(200, 85%, 55%);
    }
    50% {
        margin-left: 70%;
        background: hsl(200, 85%, 85%);
    }
    100% {
        margin-left: 0;
        background: hsl(200, 85%, 55%);
    }
}

.guistate[data-guistate="preload"] {
    color: white;
    font-size: 24px;
    width: 350px;
    line-height: 100px;
    text-align: center;
}
.guistate[data-guistate="preload"]>h3 {
    color: white;
    font-size: 24px;
    width: 350px;
    line-height: 50px;
    text-align: center;
}
.guistate[data-guistate="ready"] {
    width: 350px;
    height: 100px;
    display: grid;
    grid-template-columns: 8px 16px 32px 8px 254px 8px 16px 8px;
    grid-template-rows: 8px 8px 16px 16px 28px 16px 8px;

    grid-template-areas:
        "ftop ftop ftop ftop ftop ftop ftop ftop"
        "fleft control control asf asf asf volume fright"
        "fleft control control nsf time onsf volume fright"
        "fleft control control nsf seek onsf volume fright"
        "fleft free free free free free volume fright"
        "fleft loop loop loop loop lofree volume fright"
        "fbot fbot fbot fbot fbot fbot fbot fbot";
}

#pl-pause-play {grid-area: control;}
#pl-volume {grid-area: volume;}
#pl-timing {grid-area: time;}
#pl-seek {grid-area: seek;}
#pl-loop {grid-area:loop;}

#pl-pause-play > svg > path {
    fill: #fff;
    transition: fill 0.2s ease-in-out;
}
#pl-pause-play:hover > svg > path {
    fill: #ddd;
}
#pl-loop {
    display: grid;
    grid-template-columns: 16px auto 109px 109px;
    grid-template-areas: "input text feedback credits";
}
#pl-loop > .pl-loop-text {
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    line-height: 16px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
}
#pl-loop > a.pl-loop-text:hover {
    color: orange;
}
#pl-timing {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.error {
    text-align: center;
    display: flex;
    align-items: Center;
    justify-content: center;
    flex-direction: column;
    height: 100px;
    font-size: 14px;
}
.error > h3 {
    margin: 0;
}