/* Wicked Modern Player - responsive/mobile compatibility */

#player-holder {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}

#player-holder video,
#wicked-html5-player {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    object-fit: contain;
    background: #000;
}

#wicked-html5-player::-webkit-media-controls {
    display: flex;
}

@media (max-width: 768px) {
    #player-holder {
        width: 100%;
        aspect-ratio: 16 / 9;
        min-height: 180px;
    }

    #wicked-html5-player {
        width: 100% !important;
        height: 100% !important;
    }
}

@media (orientation: landscape) and (max-height: 600px) {
    #player-holder {
        max-height: 100vh;
    }
}

.wicked-player-message {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    background: #000;
    color: #fff;
    font-family: Arial, sans-serif;
    z-index: 5;
}

.wicked-player-spinner {
    width: 42px;
    height: 42px;
    border: 4px solid rgba(255,255,255,.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: wicked-spin .8s linear infinite;
}

@keyframes wicked-spin {
    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   WICKED MOBILE UI V1
   ========================================================= */

@media (max-width: 768px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    /*
     * Player should always be useful on a phone.
     */
    #player-holder,
    .PlayerHolder {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        margin: 0 auto 12px auto !important;
        background: #000 !important;
        overflow: hidden !important;
        z-index: 2;
    }

    #player-holder video,
    #wicked-html5-player {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        object-fit: contain !important;
        background: #000 !important;
    }

    /*
     * Prevent old desktop player sizing from creating
     * giant empty areas.
     */
    .poster-details {
        max-width: 100% !important;
    }

    /*
     * General Bootstrap desktop columns become full width.
     */
    .container,
    .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    [class*="col-"] {
        max-width: 100%;
    }

    /*
     * Make long lists manageable instead of taking
     * the entire page.
     */
    .category-list,
    .categories-list,
    .channel-list,
    .channels-list,
    .stream-list,
    .streams-list {
        max-height: 48vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /*
     * Bigger touch targets.
     */
    a,
    button,
    .btn {
        touch-action: manipulation;
    }

    /*
     * Don't allow headings to destroy mobile width.
     */
    h1,
    h2,
    h3,
    h4 {
        max-width: 100%;
        overflow-wrap: break-word;
    }

    /*
     * Player status messages.
     */
    .wicked-player-message {
        font-size: 16px !important;
        padding: 15px !important;
    }
}


/* iPhone portrait */
@media (max-width: 480px) and (orientation: portrait) {

    #player-holder,
    .PlayerHolder {
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
    }

    #wicked-html5-player {
        width: 100% !important;
        height: 100% !important;
    }

}


/* Phone landscape */
@media (max-height: 600px) and (orientation: landscape) {

    #player-holder,
    .PlayerHolder {
        width: 100% !important;
        max-width: 100% !important;
        height: calc(100vh - 10px) !important;
        max-height: 100vh !important;
        aspect-ratio: auto !important;
        margin: 0 auto !important;
        background: #000 !important;
    }

    #wicked-html5-player {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    /*
     * Keep navigation above content only while opened.
     */
    .navbar-collapse {
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* Safe areas for newer iPhones */
@supports (padding: max(0px)) {

    @media (max-width: 768px) {

        body {
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
        }

    }
}


/* ==========================================================
   WICKED MOBILE UI V2
   Exact Wicked live-page classes
   ========================================================== */

@media (max-width: 768px) {

    /*
     * Overall page
     */
    body {
        overflow-x: hidden !important;
    }

    /*
     * Don't allow Bootstrap desktop columns to create
     * side-by-side mobile content.
     */
    .channel-list,
    .stream-card.video-player1,
    .epg-list {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
    }


    /*
     * CHANNEL LIST
     *
     * Current mobile screenshot shows this consuming
     * almost the entire screen. Keep it usable but compact.
     */
    .channel-list {
        max-height: 42vh !important;
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;

        -webkit-overflow-scrolling: touch;

        margin-bottom: 12px !important;
    }


    /*
     * Individual channel rows need to remain easy to tap.
     */
    .channel-list a,
    .channel-list .list-group-item {
        min-height: 54px;
        touch-action: manipulation;
    }


    /*
     * PLAYER CARD
     */
    .stream-card.video-player1 {
        display: block !important;
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }


    .stream-card.video-player1 #player-wrapper {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }


    /*
     * Actual modern player
     */
    #player-holder,
    .PlayerHolder {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        aspect-ratio: 16 / 9 !important;

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

        background: #000 !important;
        overflow: hidden !important;
    }


    #wicked-html5-player,
    #player-holder video,
    .PlayerHolder video {
        display: block !important;

        position: absolute !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;

        background: #000 !important;
    }


    /*
     * EPG
     */
    .epg-list {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        max-height: 38vh !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        -webkit-overflow-scrolling: touch;

        margin-top: 10px !important;
        margin-bottom: 15px !important;
    }


    #epgcontainer {
        width: 100% !important;
        max-width: 100% !important;
    }


    .epginfo {
        max-width: 100% !important;
        overflow-wrap: break-word;
    }


    /*
     * NAVIGATION
     *
     * Make hamburger menu an actual mobile overlay rather
     * than letting it interfere with the player.
     */
    #navbarNav {
        background: rgba(25, 29, 33, .98) !important;

        max-height: calc(100vh - 70px) !important;
        overflow-y: auto !important;

        -webkit-overflow-scrolling: touch;

        padding: 12px !important;

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


    #navbarNav .navbar-nav {
        width: 100% !important;
    }


    #navbarNav .nav-item,
    #navbarNav .nav-link {
        width: 100% !important;
    }


    #navbarNav .nav-link {
        padding: 12px 10px !important;
        min-height: 44px;
    }


    /*
     * Don't let player messages become gigantic.
     */
    .wicked-player-message {
        font-size: 15px !important;
        line-height: 1.4 !important;
        padding: 16px !important;
    }

}


/* ==========================================================
   SMALL PHONE PORTRAIT
   ========================================================== */

@media (max-width: 480px) and (orientation: portrait) {

    .channel-list {
        max-height: 36vh !important;
    }

    .epg-list {
        max-height: 30vh !important;
    }

    #player-holder,
    .PlayerHolder {
        aspect-ratio: 16 / 9 !important;
    }

}


/* ==========================================================
   PHONE LANDSCAPE
   Player becomes primary content.
   ========================================================== */

@media (orientation: landscape) and (max-height: 600px) {

    .stream-card.video-player1 {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto 8px auto !important;
    }


    #player-holder,
    .PlayerHolder {
        width: 100% !important;

        height: calc(100vh - 15px) !important;
        max-height: 100vh !important;

        aspect-ratio: auto !important;
    }


    #wicked-html5-player,
    #player-holder video,
    .PlayerHolder video {
        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;
    }


    /*
     * Lists stay compact in landscape.
     */
    .channel-list {
        max-height: 55vh !important;
    }


    .epg-list {
        max-height: 50vh !important;
    }


    /*
     * Hamburger panel floats above the page.
     */
    #navbarNav.show {
        position: fixed !important;

        top: 60px !important;
        right: 8px !important;

        width: min(340px, 85vw) !important;
        max-height: calc(100vh - 70px) !important;

        z-index: 99999 !important;

        border-radius: 8px;
    }

}


/* iPhone safe areas */
@supports (padding: env(safe-area-inset-top)) {

    @media (max-width: 768px) {

        #navbarNav {
            padding-left:
                max(12px, env(safe-area-inset-left)) !important;

            padding-right:
                max(12px, env(safe-area-inset-right)) !important;
        }

    }

}


/* ==========================================================
   WICKED MOBILE UI V3
   Real live-page column reordering
   ========================================================== */

@media (max-width: 768px) {

    /*
     * The live page structure is:
     *
     * .container
     *   .row
     *      column 1 = channel list
     *      column 2 = player + EPG
     *
     * Stack column 2 FIRST on phones.
     */

    .container > .row.pt-2 {
        display: flex !important;
        flex-direction: column !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }


    /*
     * Channel column
     */
    .container > .row.pt-2 >
    .col-md-5.col-sm-5.col-xs-12 {

        order: 2 !important;

        flex: 0 0 100% !important;

        width: 100% !important;
        max-width: 100% !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    /*
     * Player + EPG column
     */
    .container > .row.pt-2 >
    .col-md-7.col-sm-7.col-xs-12 {

        order: 1 !important;

        flex: 0 0 100% !important;

        width: 100% !important;
        max-width: 100% !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }


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

    .stream-card.video-player1 {

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 0 10px 0 !important;

        padding: 0 !important;

        border-radius: 6px !important;

        overflow: hidden !important;

        background: #000 !important;
    }


    .stream-card.video-player1 #player-wrapper {

        position: relative !important;

        display: block !important;

        width: 100% !important;

        max-width: 100% !important;

        min-height: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        background: #000 !important;
    }


    #player-holder,
    .PlayerHolder {

        position: relative !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        aspect-ratio: 16 / 9 !important;

        margin: 0 !important;

        overflow: hidden !important;

        background: #000 !important;
    }


    #wicked-html5-player,
    #player-holder video,
    .PlayerHolder video {

        position: absolute !important;

        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        display: block !important;

        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;

        background: #000 !important;
    }


    /* ======================================================
       EPG
       ====================================================== */

    .epg-list {

        width: 100% !important;
        max-width: 100% !important;

        margin-top: 8px !important;
        margin-bottom: 12px !important;

        max-height: 32vh !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        -webkit-overflow-scrolling: touch;
    }


    #epgcontainer {

        width: 100% !important;
        max-width: 100% !important;
    }


    /*
     * Dates can otherwise get squeezed badly.
     */
    .epg-list .nav-tabs {

        display: flex !important;

        flex-wrap: nowrap !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        white-space: nowrap !important;

        -webkit-overflow-scrolling: touch;
    }


    .epg-list .nav-tabs .nav-item {

        flex: 0 0 auto !important;
    }


    .epg-list .nav-tabs .nav-link {

        white-space: nowrap !important;

        padding: 9px 11px !important;

        font-size: 14px !important;
    }


    .epg-list .card-body {

        padding: 10px !important;
    }


    .epginfo {

        width: 100% !important;

        padding: 9px 4px !important;

        line-height: 1.35 !important;

        overflow-wrap: break-word;
    }


    /* ======================================================
       CHANNELS
       ====================================================== */

    .channel-list {

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        max-height: 48vh !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        -webkit-overflow-scrolling: touch;

        margin: 0 0 15px 0 !important;
    }


    .channel-list .card-header {

        position: sticky;

        top: 0;

        z-index: 4;

        background: inherit;
    }


    #channelcontainer {

        width: 100% !important;

        margin: 0 !important;
    }


    /*
     * Easier channel selection on touchscreen.
     */
    #channelcontainer li,
    #channelcontainer a,
    #channelcontainer button {

        touch-action: manipulation;
    }


    /* ======================================================
       NAVBAR
       ====================================================== */

    #navbarNav.show {

        position: fixed !important;

        top: 65px !important;

        left: 10px !important;
        right: 10px !important;

        width: auto !important;

        max-height: calc(100vh - 80px) !important;

        overflow-y: auto !important;

        z-index: 99999 !important;

        padding: 12px !important;

        background: rgba(25,29,33,.98) !important;

        border-radius: 8px !important;

        box-shadow:
            0 10px 35px rgba(0,0,0,.55) !important;

        -webkit-overflow-scrolling: touch;
    }


    #navbarNav.show .navbar-nav {

        width: 100% !important;
    }


    #navbarNav.show .nav-link {

        display: block !important;

        width: 100% !important;

        min-height: 44px !important;

        padding: 11px !important;
    }

}


/* ==========================================================
   SMALL PORTRAIT PHONES
   ========================================================== */

@media (max-width: 480px)
       and (orientation: portrait) {

    /*
     * Use almost all available phone width.
     */

    .container {

        width: 100% !important;

        max-width: 100% !important;

        padding-left: 6px !important;
        padding-right: 6px !important;
    }


    .stream-card.video-player1 {

        border-radius: 4px !important;
    }


    .epg-list {

        max-height: 28vh !important;
    }


    .channel-list {

        max-height: 44vh !important;
    }


    .channel-list h2.title {

        font-size: 25px !important;

        line-height: 1.1 !important;
    }


    .channel-list .btn-cate {

        font-size: 14px !important;

        padding: 7px 9px !important;
    }

}


/* ==========================================================
   PHONE LANDSCAPE
   ========================================================== */

@media (orientation: landscape)
       and (max-height: 600px) {

    /*
     * Don't force a 100vh player here.
     * That was making navigation/content awkward.
     *
     * Maintain 16:9 instead.
     */

    #player-holder,
    .PlayerHolder {

        width: 100% !important;

        height: auto !important;

        max-height: none !important;

        aspect-ratio: 16 / 9 !important;
    }


    .stream-card.video-player1 {

        width: min(100%, 960px) !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    .epg-list {

        max-height: 45vh !important;
    }


    .channel-list {

        max-height: 55vh !important;
    }

}


/* ==========================================================
   iPHONE SAFE AREA
   ========================================================== */

@supports (padding: env(safe-area-inset-left)) {

    @media (max-width: 768px) {

        #navbarNav.show {

            left:
              max(10px, env(safe-area-inset-left))
              !important;

            right:
              max(10px, env(safe-area-inset-right))
              !important;
        }

    }

}


/* =========================================================
   WICKED LIVE PLAYER SURFACE FIX
   Keeps native mobile video from collapsing to controls.
   ========================================================= */

#player-holder {
    position: relative !important;

    width: 100% !important;

    aspect-ratio: 16 / 9 !important;

    height: auto !important;

    min-height: 0 !important;

    overflow: hidden !important;

    background: #000 !important;
}

#player-holder video {
    position: absolute !important;

    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 100% !important;
    min-height: 100% !important;

    object-fit: contain !important;

    background: #000 !important;
}


/* Older browsers without aspect-ratio */

@supports not (aspect-ratio: 16 / 9) {

    #player-holder {
        height: 0 !important;
        padding-bottom: 56.25% !important;
    }

}


/* Full-screen should always use the whole display */

#player-holder:fullscreen,
#player-holder:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;

    aspect-ratio: auto !important;

    padding: 0 !important;
}

#player-holder:fullscreen video,
#player-holder:-webkit-full-screen video {
    width: 100% !important;
    height: 100% !important;
}


/* =========================================================
   HEVC / UNSUPPORTED LIVE CHANNEL MESSAGE
   ========================================================= */

.wicked-codec-warning {
    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

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

    gap: 8px;

    padding: 28px;

    background: #050607;

    color: #fff;

    text-align: center;
}

.wicked-codec-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    margin-bottom: 4px;

    border-radius: 50%;

    background:
        rgba(255,140,0,.12);

    font-size: 24px;
}

.wicked-codec-warning strong {
    font-size: 18px;
}

.wicked-codec-warning p {
    max-width: 500px;

    margin: 0;

    color: #c7ccd3;

    line-height: 1.45;
}

.wicked-codec-warning small {
    color: #8f98a5;
}


@media (max-width:768px) {

    .wicked-codec-warning {
        padding: 18px;
    }

    .wicked-codec-warning strong {
        font-size: 16px;
    }

    .wicked-codec-warning p {
        font-size: 13px;
    }

}


/* =========================================================
   WICKED HEVC WARNING V2
   High contrast / legacy-theme resistant
   ========================================================= */

#player-holder .wicked-codec-warning,
.wicked-codec-warning {
    position: absolute !important;
    inset: 0 !important;

    display: flex !important;
    flex-direction: column !important;

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

    box-sizing: border-box !important;

    width: 100% !important;
    height: 100% !important;

    padding: 35px !important;

    background:
        radial-gradient(
            circle at 50% 20%,
            #20262e 0%,
            #11151a 48%,
            #090b0e 100%
        ) !important;

    color: #ffffff !important;

    text-align: center !important;

    z-index: 999 !important;
}


/* Warning icon */

#player-holder .wicked-codec-icon,
.wicked-codec-icon {
    width: 58px !important;
    height: 58px !important;

    display: flex !important;

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

    margin: 0 0 14px !important;

    border:
        1px solid rgba(255,130,20,.45) !important;

    border-radius: 50% !important;

    background:
        rgba(255,115,0,.14) !important;

    color: #ff851b !important;

    font-size: 27px !important;
    line-height: 1 !important;
}


/* HEVC badge */

#player-holder
.wicked-codec-warning::before,
.wicked-codec-warning::before {
    content: "HEVC / H.265" !important;

    display: inline-flex !important;

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

    margin-bottom: 12px !important;

    padding:
        6px 11px !important;

    border:
        1px solid rgba(255,128,20,.40) !important;

    border-radius: 999px !important;

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

    color: #ff922b !important;

    font-size: 11px !important;
    font-weight: 800 !important;

    letter-spacing: 1.1px !important;

    text-transform: uppercase !important;
}


/* Main heading */

#player-holder
.wicked-codec-warning strong,
.wicked-codec-warning strong {
    display: block !important;

    max-width: 650px !important;

    margin: 0 0 12px !important;

    color: #ffffff !important;

    font-size: 25px !important;
    font-weight: 800 !important;

    line-height: 1.15 !important;

    text-shadow:
        0 2px 10px rgba(0,0,0,.45) !important;
}


/* Explanation */

#player-holder
.wicked-codec-warning p,
.wicked-codec-warning p {
    display: block !important;

    max-width: 620px !important;

    margin:
        0 auto 17px !important;

    color: #d7dce2 !important;

    font-size: 16px !important;
    font-weight: 400 !important;

    line-height: 1.55 !important;
}


/* Final instruction */

#player-holder
.wicked-codec-warning small,
.wicked-codec-warning small {
    display: inline-flex !important;

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

    max-width: 520px !important;

    padding:
        10px 15px !important;

    border:
        1px solid rgba(255,255,255,.10) !important;

    border-radius: 10px !important;

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

    color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 650 !important;

    line-height: 1.35 !important;
}


/* PHONE */

@media (max-width: 768px) {

    #player-holder .wicked-codec-warning,
    .wicked-codec-warning {
        padding:
            22px 18px !important;
    }

    #player-holder
    .wicked-codec-icon,
    .wicked-codec-icon {
        width: 48px !important;
        height: 48px !important;

        margin-bottom:
            10px !important;

        font-size:
            22px !important;
    }

    #player-holder
    .wicked-codec-warning::before,
    .wicked-codec-warning::before {
        margin-bottom:
            9px !important;

        font-size:
            10px !important;
    }

    #player-holder
    .wicked-codec-warning strong,
    .wicked-codec-warning strong {
        margin-bottom:
            9px !important;

        font-size:
            19px !important;
    }

    #player-holder
    .wicked-codec-warning p,
    .wicked-codec-warning p {
        margin-bottom:
            12px !important;

        font-size:
            13px !important;

        line-height:
            1.45 !important;
    }

    #player-holder
    .wicked-codec-warning small,
    .wicked-codec-warning small {
        padding:
            8px 11px !important;

        font-size:
            11px !important;
    }

}


/* =========================================================
   WICKED LIVE FINAL PLAYBACK ERROR
   ========================================================= */

#player-holder .wicked-live-error,
.wicked-live-error {
    position: absolute !important;

    inset: 0 !important;

    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;

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

    gap: 12px !important;

    width: 100% !important;
    height: 100% !important;

    padding: 34px !important;

    background:
        linear-gradient(
            145deg,
            #07090c,
            #11161c
        ) !important;

    color: #fff !important;

    text-align: center !important;

    z-index: 9999 !important;
}


#player-holder .wicked-live-error-icon,
.wicked-live-error-icon {
    width: 52px !important;
    height: 52px !important;

    display: flex !important;

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

    border:
        2px solid #ff851b !important;

    border-radius: 50% !important;

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

    color: #ff851b !important;

    font-size: 28px !important;
    font-weight: 900 !important;
}


#player-holder .wicked-live-error strong,
.wicked-live-error strong {
    color: #fff !important;

    font-size: 23px !important;
    font-weight: 800 !important;

    line-height: 1.2 !important;
}


#player-holder .wicked-live-error p,
.wicked-live-error p {
    max-width: 620px !important;

    margin: 0 !important;

    color: #e0e4e9 !important;

    font-size: 15px !important;

    line-height: 1.5 !important;
}


#player-holder .wicked-live-error small,
.wicked-live-error small {
    display: block !important;

    max-width: 600px !important;

    margin-top: 4px !important;

    padding:
        10px 14px !important;

    border-radius: 9px !important;

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

    color: #b9c0c9 !important;

    font-size: 13px !important;

    line-height: 1.45 !important;
}


@media (max-width:768px) {

    #player-holder .wicked-live-error,
    .wicked-live-error {
        padding:
            20px 16px !important;
    }

    #player-holder .wicked-live-error strong,
    .wicked-live-error strong {
        font-size:
            17px !important;
    }

    #player-holder .wicked-live-error p,
    .wicked-live-error p {
        font-size:
            13px !important;
    }

    #player-holder .wicked-live-error small,
    .wicked-live-error small {
        font-size:
            11px !important;
    }
}