.plyr {

    overflow: hidden;
}
.plyr__poster
{
    background: none !important;
}
.plyr__video-wrapper
{
    background: none !important;

}
.plyr__controls {
    padding: 10px;
    background: #555555 !important;
    padding: 1px !important;
}

/* Never show the control bar until this player has started at least once. */
.plyr--video:not(.plyr--started) .plyr__controls {
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(100%) !important;
}

/* After playback starts, reveal the control bar only while interacting with the player. */
@media (hover: hover) and (pointer: fine) {
    .plyr--video .plyr__controls {
        opacity: 0 !important;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(100%) !important;
    }

    .plyr--video.plyr--started:hover .plyr__controls,
    .plyr--video.plyr--started:focus-within .plyr__controls {
        opacity: 1 !important;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) !important;
    }
}

.plyr__volume {
    margin-left: 0;
}

.plyr__controls__item {
    margin-left: 0;
}

.plyr--video .plyr__control:hover,
.plyr--video .plyr__control:focus-visible {
    background: var(--color-navigation);
}
.plyr__control--overlaid {
    background: var(--color-primary);
}

.plyr__control--overlaid:hover {
    background: #563d7c;
}

.plyr--full-ui input[type="range"] {
    color: var(--color-primary);
}
.plyr__volume input[type="range"] {
    position: absolute;
    bottom: 56px;
    left: 34%;
    transform: translateX(-50%) rotate(-90deg);
    transform-origin: center;
    width: 80px;
    display: none;
}

/* Show volume slider when volume control is hovered/focused */
.plyr__volume:hover input[type="range"],
.plyr__volume:focus-within input[type="range"] {
    display: block;
}