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

.jw-live-player-wrapper {
    position: relative;

    width: 100%;
    max-width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #000;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    user-select: none;
}


.jw-live-player-video {
    position: relative;

    z-index: 1;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    background: #000;
}


/*
 * ======================================
 * CLICK LAYER
 *
 * IMPORTANT:
 * These !important rules prevent a
 * WordPress theme from applying global
 * button hover colors over the video.
 * ======================================
 */

.jw-live-player-wrapper
.jw-video-click-layer {

    position: absolute;

    inset: 0;

    z-index: 2;

    display: block;

    width: 100%;
    height: 100%;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    outline: 0 !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    box-shadow: none !important;

    opacity: 1 !important;

    cursor: pointer;
}


.jw-live-player-wrapper
.jw-video-click-layer:hover,

.jw-live-player-wrapper
.jw-video-click-layer:focus,

.jw-live-player-wrapper
.jw-video-click-layer:focus-visible,

.jw-live-player-wrapper
.jw-video-click-layer:active {

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;

    outline: 0 !important;

    box-shadow: none !important;

    opacity: 1 !important;

    transform: none !important;
}


/*
 * ======================================
 * CENTER PLAY
 * ======================================
 */

.jw-center-play {
    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 7;

    width: 72px;
    height: 72px;

    display: flex;

    align-items: center;
    justify-content: center;

    transform:
        translate(-50%, -50%);

    margin: 0;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background:
        rgba(0,0,0,.72);

    color: #fff;

    cursor: pointer;

    transition:
        opacity .25s ease,
        visibility .25s ease;

    box-shadow:
        none;
}


.jw-center-play:hover,
.jw-center-play:focus,
.jw-center-play:active {

    background:
        rgba(0,0,0,.72);

    color: #fff;

    box-shadow:
        none;

    transform:
        translate(-50%, -50%);
}


.jw-center-play svg {

    width: 32px;
    height: 32px;

    fill: currentColor;

    transform:
        translateX(2px);
}


.jw-live-player-wrapper.is-playing
.jw-center-play {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}


/*
 * ======================================
 * LOADING
 * ======================================
 */

.jw-loading {
    position: absolute;

    inset: 0;

    z-index: 8;

    display: flex;

    align-items: center;
    justify-content: center;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .2s ease,
        visibility .2s ease;
}


.jw-loading.active {

    opacity: 1;

    visibility: visible;
}


.jw-spinner {

    width: 48px;
    height: 48px;

    border-radius: 50%;

    border:
        4px solid
        rgba(255,255,255,.3);

    border-top-color:
        #fff;

    animation:
        jw-spin
        .75s linear
        infinite;
}


@keyframes jw-spin {

    to {

        transform:
            rotate(360deg);
    }

}


/*
 * ======================================
 * TOP LIVE BADGE
 * ======================================
 */

.jw-top-live-badge {

    position: absolute;

    top: 16px;
    left: 16px;

    z-index: 6;

    display: none;

    align-items: center;

    gap: 6px;

    padding:
        7px 10px;

    border-radius: 4px;

    background:
        rgba(0,0,0,.72);

    color: #fff;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .08em;

    pointer-events: none;

    opacity: 1;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}


.is-live-stream
.jw-top-live-badge {

    display: flex;
}


.jw-live-dot {

    display: inline-block;

    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #f33;

    animation:
        jw-live-pulse
        1.5s infinite;
}


@keyframes jw-live-pulse {

    0%,
    100% {

        opacity: 1;
    }

    50% {

        opacity: .35;
    }

}


/*
 * ======================================
 * TITLE
 * ======================================
 */

.jw-video-title {

    position: absolute;

    top: 17px;
    left: 85px;

    z-index: 6;

    color: #fff;

    font-size: 15px;

    font-weight: 600;

    text-shadow:
        0 1px 3px
        rgba(0,0,0,.8);

    pointer-events: none;

    opacity: 1;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}


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

.jw-controls {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 10;

    display: flex;

    justify-content: space-between;
    align-items: center;

    padding:
        30px 14px 12px;

    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0,0,0,.18) 20%,
            rgba(0,0,0,.85) 100%
        );

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);

    pointer-events: auto;

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease;
}


.jw-controls-left,
.jw-controls-right {

    display: flex;

    align-items: center;

    gap: 4px;
}


/*
 * ======================================
 * HIDDEN UI STATE
 * ======================================
 */

.jw-live-player-wrapper.jw-ui-hidden
.jw-controls {

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(8px);

    pointer-events: none;
}


.jw-live-player-wrapper.jw-ui-hidden
.jw-top-live-badge,

.jw-live-player-wrapper.jw-ui-hidden
.jw-video-title {

    opacity: 0;

    visibility: hidden;
}


/*
 * Hide cursor along with UI while playing.
 */

.jw-live-player-wrapper.jw-ui-hidden {

    cursor: none;
}


.jw-live-player-wrapper.jw-ui-hidden
.jw-video-click-layer {

    cursor: none;
}


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

.jw-live-player-wrapper
.jw-control-button {

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0;

    padding: 0;

    border: 0 !important;

    border-radius: 4px;

    appearance: none;
    -webkit-appearance: none;

    background:
        transparent !important;

    color:
        #fff !important;

    box-shadow:
        none !important;

    cursor: pointer;
}


.jw-live-player-wrapper
.jw-control-button:hover,

.jw-live-player-wrapper
.jw-control-button:focus,

.jw-live-player-wrapper
.jw-control-button:active {

    background:
        rgba(255,255,255,.12) !important;

    color:
        #fff !important;

    border:
        0 !important;

    box-shadow:
        none !important;
}


.jw-control-button svg {

    width: 24px;
    height: 24px;

    fill:
        currentColor;
}


/*
 * ======================================
 * PLAY / PAUSE
 * ======================================
 */

.jw-pause-icon {

    display: none;
}


.is-playing
.jw-play-icon {

    display: none;
}


.is-playing
.jw-pause-icon {

    display: block;
}


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

.jw-volume-wrapper {

    display: flex;

    align-items: center;
}


.jw-muted-icon {

    display: none;
}


.is-muted
.jw-volume-icon {

    display: none;
}


.is-muted
.jw-muted-icon {

    display: block;
}


.jw-volume-slider {

    width: 80px;

    margin:
        0 8px 0 0;

    padding: 0;

    opacity: 1;

    cursor: pointer;

    accent-color: #fff;
}


/*
 * ======================================
 * FULLSCREEN
 * ======================================
 */

.jw-fullscreen-close {

    display: none;
}


.is-fullscreen
.jw-fullscreen-open {

    display: none;
}


.is-fullscreen
.jw-fullscreen-close {

    display: block;
}


.jw-live-player-wrapper:fullscreen {

    width: 100%;
    height: 100%;

    aspect-ratio: auto;

    background: #000;
}


.jw-live-player-wrapper:fullscreen
.jw-live-player-video {

    width: 100%;
    height: 100%;
}


/*
 * ======================================
 * ERROR
 * ======================================
 */

.jw-player-error-box {

    position: absolute;

    inset: 0;

    z-index: 20;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 30px;

    background: #111;

    color: #fff;

    text-align: center;
}


.jw-player-error-box[hidden] {

    display: none;
}


.jw-player-error-box strong {

    font-size: 20px;
}


.jw-player-error-box span {

    color:
        rgba(255,255,255,.7);

    font-size: 14px;
}


.jw-retry-button {

    margin-top: 12px;

    padding:
        9px 18px;

    border: 0;

    border-radius: 4px;

    background: #fff;

    color: #111;

    font-weight: 700;

    cursor: pointer;
}


/*
 * ======================================
 * MOBILE
 * ======================================
 */

@media
(max-width: 650px) {

    .jw-controls {

        padding:
            22px 7px 7px;
    }


    .jw-control-button {

        width: 38px;
        height: 38px;
    }


    .jw-control-button svg {

        width: 21px;
        height: 21px;
    }


    .jw-volume-slider {

        width: 60px;
    }


    .jw-video-title {

        font-size: 13px;
    }


    .jw-center-play {

        width: 58px;
        height: 58px;
    }

}