#movies {
    display: none;
    place-items: center;
    text-align: center;
    font-size: 32pt;
    height: 100%;
}

#movies .switch {
    position: absolute;
    z-index: 500;
    display: block;
    width: 48px;
    height: 48px;
    right: 12pt;
    bottom: 12pt;
    background: steelblue;
    border-radius: 8pt;
    text-align: center;
    color: black;
    border: 2pt solid black;
    transition: background-color 0.2s ease;
}

#movies .switch:active {
    background: rgb(26, 49, 68);
}

#movies .switch i {
    font-size: 22pt;
    position: relative;
    top: -6pt;
}

#webcontrol {
    position: relative;
    left: calc(50% - 25vh);
    top: 10vh;
    display: block;
    width: 50vh;
    height: 50vh;
    transform: scale(0.8);
    z-index: 2;
}

#movies .slider {
    position: absolute;
    top: 0;
    width: 28px;
    right: -1.5em;
    height: 110%;
    border-radius: 16px;
    background: black;
    transform: scale(1.25);
}


 #movies .slider .knob {
    position: absolute;
    margin: 2px;
    width: 22px;
    height: 22px;
    border-radius: 11px;
    border: 1px solid transparent;
}

#movies .slider .fill {
    position: absolute;
    margin: 2px;
    width: 24px;
    border-radius: 11px;
}

#webcontrol i {
    position: absolute;
    pointer-events: none;
    color: black;
    font-size: 12vh;
}

#webcontrol i.go-powered {
    left: 0.35em;
    top: -0.85em;
    font-size: 8vh;
}

#webcontrol i.go-search {
    left: calc(50% - 0.6em);
    top: -1.45em;
    font-size: 8vh;
}

#webcontrol i.go-back {
    right: 0.35em;
    top: -0.85em;
    font-size: 8vh;
}

#webcontrol i.go-left {
    left: -0.05em;
    top: calc(50% - 0.48em);
}

#webcontrol i.go-up {
    left: calc(50% - 0.62em);
    top: 0.1em;
}

#webcontrol i.go-right {
    right: -0.05em;
    top: calc(50% - 0.48em);
}

#webcontrol i.go-down {
    left: calc(50% - 0.62em);
    bottom: 0.05em;
}

#webcontrol i.go-select {
    left: calc(50% - 0.62em);
    top: calc(50% - 0.75em);
}

#webcontrol i.go-settings {
    left: calc(50% - 0.62em);
    top: calc(50% + 0.85em);
    font-size: 6vh;
}

#webcontrol i.go-play {
    left: 0.52em;
    bottom: -1.45em;
    font-size: 8vh;
}

#webcontrol i.go-eject {
    left: calc(50% - 0.635em);
    bottom: -1.43em;
    font-size: 8vh;
}

#webcontrol i.go-muted {
    right: 0.52em;
    bottom: -1.45em;
    font-size: 8vh;
}

#webcontrol svg {
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
    overflow: visible;
}

#webcontrol svg .normal {
    fill: steelblue;
    stroke-width: 0;
    transition: fill 0.2s ease;
}

#webcontrol svg .normal:active {
    fill: rgb(37, 71, 98);
    stroke-width: 0;
}

#movies .container {
    display: flex;
    align-items: center;
    gap: 20px;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    text-align: left;
    color: white;
    font-size: 15pt;
}

#movies .details {
    display: flex;
    flex-direction: column;
    text-align: left;
    white-space: pre-wrap;
}

#movies .details .imdb {
    color: black;
    background: white;
    font-weight: bolder;
    padding-left: 4pt;
    padding-right: 4pt;
    border-radius: 4pt;
}

#movies .details .title {
    font-size: 24pt;
    font-weight: bolder;
}

#movies .list {
    display: none;
}

#movies .list .movie {
    position: relative;
    display: block;
    text-align: left;
    height: 72pt;
    margin-top: 10pt;
    margin-bottom: 10pt;
}

#movies .list .movie .poster {
    height: 72pt;
    width: auto;
    margin-left: 12pt;
}

#movies .list .movie span {
    position: absolute;
    left: 100px;
    font-size: 18pt;
    white-space: nowrap;
    width: calc(100vw - 110pt);
    overflow: hidden;
    text-overflow: ellipsis;
}

#movies .list .movie .title {
    font-size: 18pt;
    font-weight: bolder;
    top: 0;
}

#movies .list .movie .info {
    font-size: 16pt;
    top: 1.5em;
}

#movies .list .movie .summary {
    font-size: 16pt;
    top: 2.5em;
}

#movies .list .movie {
    margin: 4pt;
    border: 2px solid black;
    transition: border-color 0.2s ease;
    border-radius: 8pt;
}

#movies #progress {
    display: none;
}

#movies .playing #progress {
    display: block;
}

#movies #waiting {
    display: none;
    position: absolute;
    z-index: 11;
    left: 0;
    bottom: 0;
    height: 100pt;
    width: 100vw;
    overflow: hidden;
    text-align: center;
    color: white;
    background: rgba(0, 0, 0, 0.8);
    line-height: 100px;
}

#movies #waiting i {
    margin-top: 50px;
    font-size: 42pt;
}

#movies #progress {
    position: absolute;
    z-index: 10;
    left: 0;
    bottom: 0;
    height: 100pt;
    width: 100vw;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.8);
}

#movies #progress .poster {
    position: absolute;
    height: 90pt;
    width: auto;
    left: 5pt;
    top: 5pt;
}

#movies #progress .speed {
    position: absolute;
    height: 90pt;
    width: auto;
    left: 75pt;
    top: 32pt;
    font-size: 14pt;
}

#movies #progress .title {
    position: absolute;
    height: 90pt;
    width: auto;
    left: 75pt;
    top: 5pt;
    font-size: 20pt;
}


#movies #progress * {
    color: white;
}

#movies #progress .jump span i {
    color: black;
    font-size: 22pt;
    top: -5pt;
    position: relative;
    pointer-events: none;
}

#movies #progress .jump span {
    position: absolute;
    display: block;
    color: black;
    width: 36pt;
    height: 36pt;
    border-radius: 8pt;
    bottom: 4pt;
    text-align: center;
}

#movies #progress .scrub {
    position: absolute;
    display: block;
    height: 12pt;
    border-radius: 6pt;
    left: 160pt;
    width: calc(100vw - 347pt);
    bottom: 15pt;
    overflow: hidden;
}

#movies #progress .scrub .position {
    position: absolute;
    display: block;
    height: 12pt;
    width: 90%;
}

#movies #progress .jump span.prior {
    left: 75pt;
}

#movies #progress .jump span.rewind {
    left: 115pt;
}

#movies #progress .jump span.forward {
    right: 140pt;
}

#movies #progress .jump span.next {
    right: 100pt;
}

#movies #progress .jump span.replay {
    right: 60pt;
}