@font-face {
    font-family: 'WorkSans';
    src: url('/fonts/WorkSans-Medium_120w.ttf') format('truetype');
}

@font-face {
    font-family: 'WorkSansBold';
    src: url('/fonts/WorkSans-Bold_120w.ttf') format('truetype');
}

@font-face {
    font-family: 'WorkSansBlack';
    src: url('/fonts/WorkSans-Black_120w.ttf') format('truetype');
}

html, body {
    margin: 0 !important;
    padding: 0 !important;
    --bs-body-font-family: WorkSans, sans-serif;
    --bs-link-color-rgb: #0a58ca;
    letter-spacing: -1px;
}

a {
    color: #0000fe;
}

    a:hover {
        color: #5050ff;
    }

/*input[type=text] {
    font-family: sans-serif !important;
    letter-spacing: 0;
}
*/
.container {
    padding: 0;
}

html {
    background-color: #fdb000;
    background-image: linear-gradient(to bottom, #EAAD13, #EED61A);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% 100%;
}

body {
    background: none;
}

html {
    font-size: 14px;
}

.bg-tvpd {
    background-color: #0000fe;
}

.bg-tvpd-club {
    background-color: #00ccfe;
}

.w-clickable, .w-clickable label, .w-clickable input {
    cursor: pointer !important;
}

h1, h2 {
    font-family: WorkSansBlack, sans-serif;
    font-weight: 400 !important;
    font-style: normal;
    font-size: 20px;
    letter-spacing: 0;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    width: 100%;
    position: relative;
    /*min-width: 390px !important;*/
}

.home {
}

header, header nav, .bg-body-tertiary {
    background-color: transparent !important;
}

/* Navbar */
.logo {
    width: 50px;
}

/* Scrollbar */
/* custom scrollbar 
::-webkit-scrollbar {
    width: 20px;
}*/

.section-container::-webkit-scrollbar {
    height: 16px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    border: 6px solid transparent;
    background-clip: content-box;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, 0.5);
    }

/*Home*/
.menu-section {
    display: flex;
    justify-items: center;
    /*padding: 0 20px;*/
    text-align: center;
    flex-grow: 1;
    font-size: 16px;
    font-family: WorkSansBold, sans-serif;
    flex-wrap: wrap;
}

@media(max-width: 576px) {
    .menu-section {
        font-size: 14px;
    }
}

.menu-section a {
    text-decoration: none;
    color: #fff;
    flex-grow: 1;
}

    .menu-section a.active {
        color: #e8b51a;
    }

.menu-grid, .menu-user {
    width: 28px;
    height: 28px;
    margin-top: -4px;
}

.menu-user-image {
    width: 36px;
    height: 36px;
    margin-top: -2px;
    border-radius: 18px;
    border: 1.5px solid #fff;
}

    .menu-user-image:hover {
        filter: brightness(130%);
        border-color: #feba00;
    }

.menu-user-active {
    width: 36px;
    height: 36px;
    margin-left: -4px;
}

.menu-user-club {
    position: relative;
}

    .menu-user-club::before {
        display: inline-block;
        width: 36px;
        height: 36px;
        position: absolute;
        top: -14px;
        content: url('/gfx/icon_user_crown.svg');
    }

.menu-grid:hover, .menu-user:hover, .menu-icon-selected {
    filter: brightness(0) saturate(100%) invert(94%) sepia(15%) saturate(3919%) hue-rotate(342deg) brightness(100%) contrast(86%);
}

/* Carousel */

.carousel-indicators {
    bottom: -45px;
}

.carousel .carousel-indicators button {
    /*width: 10px;
    height: 16px;
    border-radius: 100%;
    margin: -10px 10px;
    border-radius: 100% 140% 100% 160%;
        */
    width: 20px;
    height: 20px;
    background-color: transparent;
    background-image: url('/gfx/icon_dots.svg');
    background-repeat: no-repeat;
}

    .carousel .carousel-indicators button:nth-child(5n) {
        background-position: 1px 1px;
    }

    .carousel .carousel-indicators button:nth-child(5n + 1) {
        background-position: -42px 1px;
    }

    .carousel .carousel-indicators button:nth-child(5n + 2) {
        background-position: -85px 0px;
    }

    .carousel .carousel-indicators button:nth-child(5n + 3) {
        background-position: -128px 1px;
    }

    .carousel .carousel-indicators button:nth-child(5n + 4) {
        background-position: -172px 1px;
    }

.content-section {
    position: relative;
}

    .content-section h1 {
        color: #00144d;
        font-size: 16px;
        text-transform: uppercase;
    }

    .content-section h1, .content-section p {
        padding: 0 20px;
    }

.promo-section-parent {
    text-align: center;
}

.promo-section {
    margin: 20px;
    /*margin-bottom: 90px;*/
    /*max-height: 350px;*/
    width: auto;
    display: inline-block;
}

    .promo-section img {
        border-radius: 30px;
        /*height: 350px;*/
        max-width: 100%;
    }

    .promo-section .carousel-item .overlay {
    }

        .promo-section .carousel-item .overlay::after {
            border-radius: 30px;
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: inline-block;
            background: linear-gradient(to bottom, rgba(0,0,0,0) 60%,rgba(0,0,0,0.9) 100%);
        }

    .promo-section .carousel-caption {
        left: 30px;
        right: 30px;
        text-align: left;
    }

.promo-title {
    left: 0px;
    bottom: 20px;
    font-weight: 900;
    margin-bottom: 10px;
    letter-spacing: -1px;
}

.promo-section-hd .promo-description {
    font-size: 22px;
}

.promo-title .lines {
    width: 20px;
    flex-direction: column;
    line-height: 50%;
    font-size: 40px;
    font-family: WorkSansBlack, sans-serif;
    text-decoration: none;
}

@media(max-width: 768px) {
    .promo-title .lines {
        font-size: 22px;
    }
}

.aggregate-parent {
    padding: 0;
}

.aggregate-container {
    position: relative;
    /* Allow to spread image to the whole width */
    /*max-width: 2560px;*/
    margin: 0 auto;
    letter-spacing: -0.7px;
}

    .aggregate-container .container {
        position: relative;
    }

.aggregate-container-image {
    background-position: center 20%;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 50vh;
}

.aggregate-divider {
    background-image: url('/gfx/bg_gradient.svg');
    background-repeat: repeat-x;
    background-size: 360px;
    height: 60px;
    position: relative;
    top: -1px;
}

.aggregate-divider-alternate {
    transform: scaleY(-1);
    position: relative;
    top: 1px;
}

.aggregate-container-image::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: inline-block;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 70%,#09214f 100%);
}


.aggregate-container .lines {
    position: absolute;
    left: 20px;
    bottom: 20px;
    width: 20px;
    flex-direction: column;
    line-height: 50%;
    font-size: 32px;
    font-family: WorkSansBold, sans-serif;
    text-decoration: none;
}

.link-back {
    transform: scale(-1, 1);
    position: relative;
    top: -20px;
}

.aggregate-container .link-back {
    cursor: pointer;
    position: absolute;
    left: 15px;
    top: 0px;
    width: 38px;
    height: 38px;
    text-align: center;
    font-size: 40px;
    color: #fff;
    text-decoration: none;
}

    .aggregate-container .link-back i {
        display: flex;
        height: 38px;
        border-radius: 30px;
        background-color: #0100fb;
        position: relative;
        top: -12px;
    }

header .link-back {
    cursor: pointer;
    width: 38px;
    height: 38px;
    text-align: center;
    font-size: 40px;
    color: #fff;
    display: inline-block;
    text-decoration: none;
}

    header .link-back i {
        display: flex;
        height: 38px;
        border-radius: 30px;
        background-color: #0100fb;
    }

header .page-title h1 {
    margin-left: 10px;
}

header .page-title {
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    display: flex;
    align-items: start;
    flex-wrap: wrap;
    width: 100%;
}

.aggregate .sub-description {
    color: #ccc;
    font-family: WorkSans, sans-serif;
    font-size: 14px;
}

.aggregate .description {
    color: #fff;
    font-family: WorkSans, sans-serif;
    font-size: 16px;
}

.aggregate-tabs {
    border-bottom: 2px solid #907c03;
    display: flex;
}


    .aggregate-tabs .nav-link {
        position: relative;
        top: 2px;
        font-family: WorkSansBlack, sans-serif;
        font-weight: 900 !important;
        color: #978843;
    }

    .aggregate-tabs .nav-item {
        flex-grow: 1;
        text-align: center;
    }

    .aggregate-tabs .nav-link.active {
        border-bottom: 4px solid #e50083;
        font-weight: 900 !important;
        color: #0a2250;
    }



.first-line, .second-line {
    text-align: left;
    white-space: nowrap;
    background-color: #e5007e;
    display: inline-block;
    padding: 10px;
    color: #fff;
    line-height: 80%;
    height: 1.2em;
    font-weight: 900;
    width: auto;
    /*margin-top: -6px;*/
}

.first-line {
    padding: 0.2em 0.4em 0 0.4em;
    border-radius: 0.2em 0.2em 0 0;
}


.second-line {
    padding: 0.2em 0.4em 0.4em 0.4em;
    border-radius: 0 0.2em 0.2em 0.2em;
    text-overflow: ellipsis;
    max-width: 90vw;
    overflow: hidden;
}

.first-line-single {
    border-radius: 0.2em 0.2em 0.2em 0.2em;
}

.promo-description {
    font-weight: 400;
    font-size: 18px;
    font-family: WorkSans, sans-serif;
    letter-spacing: -1px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/*HD carousel*/
.promo-section-hd .carousel-indicators {
    bottom: 0px;
}

.promo-section-hd {
    margin: 0 20px 20px 20px;
    /*margin-bottom: 90px;
    max-height: 350px;*/
    width: auto;
    display: inline-block;
}

    .promo-section-hd img {
        border-radius: 30px;
        width: 100%;
    }

    .promo-section-hd .carousel-item .overlay {
    }

        .promo-section-hd .carousel-item .overlay::after {
            border-radius: 30px;
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: inline-block;
            background: linear-gradient(to bottom, rgba(0,0,0,0) 70%,rgba(0,0,0,0.9) 100%);
        }

    .promo-section-hd .carousel-caption {
        left: 30px;
        right: 30px;
        bottom: 30px;
        text-align: left;
    }

.section-container {
    width: 100%;
    overflow-x: scroll;
    display: flex;
    flex-direction: row;
    scroll-snap-type: x mandatory;
    scroll-snap-align: center;
    gap: 0px;
    margin: 10px 0;
    padding: 10px 0;
    position: relative;
}

.section-container {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 1%, #000 99%, transparent);
}

@media (pointer: coarse) {
    .section-scroll {
        display: none;
    }
}

.section-scroll a i {
    color: #00144d;
}

@media (pointer: fine) {
    .section-scroll {
        position: absolute;
        right: -50px;
        top: 50%;
        margin-top: -36px;
        width: 40px;
        font-size: 40px;
        border-radius: 4px;
        text-align: center;
        padding-top: 6px;
        z-index: 111;
    }

    .section-scroll-before {
        left: -50px;
    }
}

.section-scroll a i:hover {
    color: #fff;
}

.chart-item {
    position: relative;
    margin: 0 10px;
    min-width: 160px;
}

    .chart-item img {
        max-width: 160px;
        max-height: 160px;
    }

    .chart-item .title {
        position: absolute;
        left: -20px;
        bottom: 0;
        font-size: 20px;
        font-weight: 600;
        letter-spacing: -1px;
        display: flex;
        flex-direction: row;
    }

        .chart-item .title .lines {
            line-height: 50%;
            font-family: WorkSansBold, sans-serif;
            text-decoration: none;
            flex-direction: column;
            display: flex;
            align-items: start;
            justify-content: end;
        }

        .chart-item .title .first-line, .chart-item .title .second-line {
            background-color: #0200fd;
            display: inline-block;
            padding: 10px;
            color: #fff;
            line-height: 80%;
            height: 26px;
        }

        .chart-item .title .first-line {
            padding: 4px 10px 0 28px;
            border-radius: 8px;
            margin-top: -1px;
        }

        .chart-item .title .second-line {
            padding: 4px 10px 12px 28px;
            border-radius: 8px;
            margin-top: -2px;
        }


        .chart-item .title .position {
            left: 25px;
            border-radius: 30px;
            width: 50px;
            height: 50px;
            min-width: 50px;
            max-width: 50px;
            min-height: 50px;
            max-height: 50px;
            text-align: center;
            display: inline-block;
            margin-top: 0;
            background-color: #e5007e;
            font-weight: 900;
            font-size: 32px;
            color: #fff;
            position: relative;
            font-family: WorkSansBold, sans-serif;
        }

/*Special chart item without position centered*/
.round-item {
    margin: 10px;
}

    .round-item .title {
        left: 0;
        display: block;
        width: 100%;
    }

        .round-item .title .lines {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
        }

        .round-item .title .first-line, .round-item .title .second-line {
            padding: 4px 10px;
            margin-top: 0;
            text-align: center;
        }

        .round-item .title .second-line {
            margin-top: -2px;
        }

.video-item {
    width: 250px;
    min-width: 250px;
    margin-left: 10px;
    max-width: 250px;
    /*margin-left: 20px;
    margin-right: -20px;*/
}

.video-item-container {
    position: relative;
    overflow: hidden;
    filter: drop-shadow(0px 0px 4px rgb(0 0 0 / 0.4));
}

.video-item img {
    max-height: 140px;
    -webkit-mask-image: url('/gfx/content_mask.png');
    -webkit-mask-size: 250px 140px;
    min-width: 250px;
    min-height: 140px;
    max-width: 2500px;
    max-height: 140px;
    width: auto;
    height: auto;
    display: block;
}

.video-item .title-context {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

    .video-item .title-context .title {
        align-self: start;
        flex-grow: 1;
    }

    .video-item .title-context .context-menu {
        flex-grow: 0;
    }

.video-item .title {
    font-family: WorkSans, sans-serif;
    font-size: 16px;
    line-height: 130%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.video-item .play-overlay, .side-item .play-overlay {
    color: #fff;
    pointer-events: none;
    font-size: 45px;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 45px;
    height: 45px;
    text-align: center;
    margin-left: -20px;
    margin-top: -26px;
    filter: drop-shadow(0px 0px 6px rgb(0 0 0 / 0.8));
    opacity: 0.8;
}

.video-item:hover, .chart-item:hover, .side-item:hover, .programme-item:hover {
    filter: brightness(1.25);
}


.video-reel-item {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
}

    .video-reel-item .title {
        display: none;
    }

    .video-reel-item img {
        max-height: 180px;
        -webkit-mask-image: url('/gfx/content_mask.png');
        -webkit-mask-size: 100px 180px;
        min-width: 100px;
        min-height: 180px;
        max-width: 100px;
        width: auto;
        height: auto;
        display: block;
    }

.profile-link a {
    color: #fff !important;
    font-size: 28px;
    margin-right: 6px;
}

.section-link, .section-link a {
    text-decoration: none !important;
    color: #00144d;
}

/*Offcanvas menu*/
.context-menu {
    display: inline-block;
    padding: 4px 7px;
    width: 32px;
    height: 28px;
    background-color: rgba(0, 0, 0, 0.1);
    text-align: center;
    border-radius: 14px;
    margin-right: 5px;
}

#off-canvas-parent {
    color: #fff !important;
    background-color: RGBA(9, 33, 79, 0.8) !important;
    backdrop-filter: blur(10px);
}

.offcanvas-age-rating {
    border-radius: 13px;
    background-color: #fff;
    color: #000000;
    display: inline-block;
    width: 26px;
    height: 26px;
    padding-top: 2px;
    font-size: 15px;
    text-align: center;
    font-family: WorkSans, sans-serif;
    text-shadow: none;
}

.offcanvas-content {
    white-space: pre-line;
}


/*Float section*/
.float-section {
    position: fixed;
    z-index: 300;
    bottom: 80px;
    text-align: center;
    width: 100%;
    margin: 0;
    pointer-events: none;
}

    .float-section .float-container {
        pointer-events: all;
        display: inline-flex;
        margin: 0 10px;
        color: #000;
        font-size: 24px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 25px;
        padding: 4px 6px 0 6px;
        box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 10px;
        overflow: hidden;
    }

    .float-section img {
        width: 28px;
        margin-top: -8px;
    }

    .float-section .club {
        width: 36px;
        margin-top: -8px;
    }

    .float-section .float-container a {
        color: #000;
        flex-grow: 1;
        margin: 0 3px;
        padding: 5px 14px;
        text-align: center;
        border-bottom: 4px solid transparent;
    }

        .float-section .float-container a.active {
            border-bottom: 4px solid #0100fb;
        }

        .float-section .float-container a:hover {
            border-bottom: 4px solid #e8b51a;
        }

/* Footer */
.footer {
    margin-top: 30px;
    line-height: 100%;
}

    .footer p {
        margin: 10px 10px;
    }


.section-top {
    background-color: #09214f;
}

    .section-top .navbar a:hover {
        color: #feba00;
    }

@media(max-width: 768px) {
    .section-top {
        padding-bottom: 0px;
    }
}


.side-item {
    display: flex;
    flex-direction: row;
    margin: 0 0 10px 0;
}

.side-item-container {
    position: relative;
    filter: drop-shadow(0px 0px 4px rgb(0 0 0 / 0.4));
}

.side-item img {
    max-height: 140px;
    -webkit-mask-image: url('/gfx/content_mask.png');
    -webkit-mask-size: 250px 140px;
    min-width: 250px;
    min-height: 140px;
    max-width: 250px;
    max-height: 140px;
    width: auto;
    height: auto;
    display: block;
}

.side-item .title-panel {
    font-family: WorkSans, sans-serif;
    font-weight: 700;
    font-size: 16px;
    padding: 4px 10px;
}

    .side-item .title-panel .title {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .side-item .title-panel .sub-title {
        font-family: WorkSans, sans-serif;
        margin-top: 1em;
        font-weight: normal;
        color: #978843;
    }

.btn {
    background-color: #0000fe;
    border-radius: 30px;
    border: 2px solid #0000fe;
    font-family: WorkSansBold, sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
    padding: 12px 4px;
}

.btn-secondary {
    background-color: #081023;
    color: #cdd5d0;
    border: 2px solid #0000fe;
}

.btn-warning {
    background: linear-gradient(to left, #ffd835, #f64b20);
    color: #fff;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 10px;
    border: 2px solid #0000fe;
}

    .btn-warning:hover {
        color: #fff!important;
    }
    .btn-light {
        background: rgba(255, 255, 255, 0.7);
        color: #09214f;
        text-shadow: none;
        border-radius: 5px;
        border: none;
        outline: none;
    }

.custom-dropdown .dropdown-toggle::after {
    float: right;
    border-top: .5em solid;
    border-right: .5em solid transparent;
    border-left: .5em solid transparent;
    margin-top: 0.5em;
    margin-right: 0.5em;
}

/*Overlay menu*/
#menuModal {
    backdrop-filter: blur(10px);
}

    #menuModal .modal-content {
        background: none;
        border: none;
        text-align: center;
        font-family: WorkSansBold, sans-serif;
    }

    #menuModal .logo {
        width: 120px;
    }

    #menuModal .modal-dialog {
        height: 100% !important;
        align-content: center;
        margin: 0 auto;
    }

    #menuModal .modal-content a {
        text-decoration: none;
        font-size: 36px;
        font-weight: 900;
        color: #fff;
        line-height: 180%;
    }

        #menuModal .modal-content a.active {
            color: #e8b51a;
        }

        #menuModal .modal-content a:hover {
            color: #e8b51a;
        }

@media (max-height: 768px) {
    #menuModal .modal-content a {
        line-height: 120%;
    }
}

@media (max-width: 576px) {
    #menuModal .modal-content a {
        font-size: 22px;
    }
}

#menuModal .modal-content a.internal {
    color: #feba00;
}

    #menuModal .modal-content a.internal:hover {
        color: #fff;
    }

#menuModal .modal-content .divider {
    border: 1px solid #fff;
    width: 70%;
    margin: 5px auto;
    opacity: 1;
}

.closeMenuModal {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 28px;
    color: #feba00;
    z-index: 350;
}

.modal-backdrop {
    background-color: #09214f;
    opacity: 0.9 !important;
    /*Might be better instead of bootstrap's native 100vw/vh*/
    /*width: 100%;
    height: 100%;*/
}


/*progress link*/
.progress-overlay {
    background-color: #fff;
    border-radius: 5px;
    position: absolute;
    bottom: 10px;
    height: 6px;
    width: 80%;
    left: 10%;
    opacity: 0.8;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
}

    /*.side-item-container .progress-overlay {
    bottom: 20px;
}
*/
    .progress-overlay .progress-value {
        background-color: #1dc7b4;
        height: 6px;
        border-radius: 5px;
    }

/* Show all items */
.section-show-all, .section-show-next {
    display: flex;
    min-width: 146px;
    height: 200px;
    flex-direction: column;
    flex-wrap: wrap;
    text-decoration: none;
    font-family: WorkSans, sans-serif;
    font-size: 20px;
    justify-content: center;
    align-items: center;
}

    .section-show-all .arrow, .section-show-next .arrow {
        width: 70px;
        height: 70px;
        text-align: center;
        color: #fff;
        text-decoration: none;
        flex-wrap: wrap;
    }

        .section-show-all .arrow.prev {
            transform: scale(-1, 1);
        }

    .section-show-next .arrow {
        transform: rotate(90deg);
    }

.page-prev, .page-next {
    display: flex;
    min-width: 146px;
    height: 200px;
    flex-direction: column;
    flex-wrap: wrap;
    text-decoration: none;
    font-family: WorkSans, sans-serif;
    font-size: 20px;
    justify-content: center;
    align-items: center;
}

    .page-prev img, .page-next img {
        width: 70px;
        height: 70px;
    }

    .page-prev img {
        transform: scale(-1, 1);
    }

.dot-separator {
    color: #f0e019;
    font-weight: 900;
}

.description-accent {
    color: #fff !important;
}

.section-pattern {
    background-image: url('/gfx/bg_pattern.png');
    position: relative;
}

    .section-pattern:after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 100px;
        display: inline-block;
        background: linear-gradient(to bottom, rgba(9, 33, 79, 0) 0%,rgba(9, 33, 79, 1) 100%);
    }
/*
    .section-pattern .logo {
        width: 100px;
    }*/


.subscription-promo {
    width: 320px;
    text-align: center;
    margin: 0px auto -100px auto;
    position: relative;
    top: -100px;
}

    .subscription-promo img {
        width: 320px;
        border-radius: 320px;
    }

@media(max-width: 768px) {
    .subscription-promo {
        width: 160px;
    }

        .subscription-promo img {
            width: 160px;
            border-radius: 160px;
        }
}
/*
    .subscription-promo:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        outline: 16px solid rgba(255, 255, 255, 0.7);
        border-radius: 320px;
        mix-blend-mode: soft-light;
    }
    */

.subscription-badge {
    width: 100px;
}

.subscription-description {
    text-align: center;
    font-size: 18px;
    color: #09214f;
    font-family: WorkSans, sans-serif;
    font-weight: bold;
}


/*Show listings*/
.show-item {
    border-radius: 15px;
    height: 180px;
    background-size: auto 100%;
    position: relative;
    margin-bottom: 25px;
}

    .show-item .show-pane {
        background-color: #e5007e;
        width: 60%;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        padding-left: 40px;
        padding-right: 20px;
        padding-top: 20px;
        border-radius: 90px 15px 15px 90px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding-bottom: 40px;
    }

    .show-item .show-link {
        position: absolute;
        bottom: -20px;
        left: 60px;
        right: 60px;
    }

    .show-item .show-pane .show-title {
        font-family: WorkSansBold, sans-serif;
        color: #ece400;
        line-height: 100%;
        font-size: 18px;
        margin-bottom: 4px;
    }

    .show-item .show-pane .show-details {
        font-family: WorkSans, sans-serif;
        font-size: 14px;
        line-height: 120%;
        color: #fff;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    .show-item .show-image {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        border-radius: 15px;
        overflow: clip;
        background-size: auto 100%;
    }

        .show-item .show-image img {
            width: 70%;
        }


/*Programme listings*/
/* programme-item is normally placed within row/col which handles the width. However there are special cases when we need to give it some space manually (favorites, etc.)*/
.programme-wrapper {
    min-width: 360px;
    margin: 0 5px;
}

.programme-item {
    border-radius: 15px;
    height: 160px;
    background-size: auto 100%;
    position: relative;
    margin-bottom: 20px;
}

    .programme-item .programme-pane {
        /*background-color: #b51470;*/
        width: 60%;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        padding-left: 40px;
        padding-right: 10px;
        padding-top: 10px;
        border-radius: 0px 15px 15px 0px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding-bottom: 20px;
        background-image: linear-gradient(to right, rgba(8, 16, 35, 0) 0%, #b51470 15%);
    }

    .programme-item .programme-link {
        position: absolute;
        bottom: -20px;
        left: 60px;
        right: 60px;
    }

    .programme-item .programme-pane .programme-title {
        font-family: WorkSansBold, sans-serif;
        color: #ece400;
        line-height: 112%;
        font-size: 22px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    .programme-item .programme-pane .programme-details {
        font-family: WorkSans, sans-serif;
        font-size: 14px;
        line-height: 120%;
        margin-bottom: 10px;
        color: #fff;
    }

    .programme-item .programme-pane .programme-description {
        font-family: WorkSans, sans-serif;
        font-size: 14px;
        line-height: 120%;
        color: #fff;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .programme-item .programme-image {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        border-radius: 15px;
        background-color: #b51470;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% auto;
        width: 50%;
    }

.cantIgnorePanel {
    padding: 20px 20%;
    text-align: center;
    background-color: red;
    font-size: 20px;
    z-index: 9999;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
}

/* Content Detail */

.player {
    background-color: #000;
    width: 100%;
    height: 100%;
    position: fixed;
    -webkit-user-select: none; /* Safari */
    user-select: none;
    /*Prevent scrolling on Safari/iPhone*/
    overscroll-behavior-y: none;
    overflow: hidden;
}

    .player header {
        position: fixed;
        width: 100%;
        z-index: 2000;
        display: flex;
        padding: 15px 0 0 0;
        transition: margin-top 0.5s;
        text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
    }

    .player .page-title {
        flex-wrap: nowrap;
        align-items: center;
        padding: 0 20px;
        display: flex;
    }

        .player .page-title a {
            flex-shrink: 0;
        }

        .player .page-title h1 {
            font-family: WorkSansBold, sans-serif;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            flex-grow: 1;
            flex-shrink: 1;
        }

    .player video {
        position: fixed;
        z-index: 999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        right: 0;
        bottom: 0;
    }

.player-bar-right {
    right: 20px;
    font-weight: bold;
    min-width: 70px;
}

    .player-bar-right img {
        margin-left: 10px;
    }

.player .video-aspect-cover {
    object-fit: cover;
}

.player .video-aspect-contain {
    object-fit: contain;
}

.player .video-aspect-fill {
    object-fit: fill;
}

.player .controls {
    text-align: center;
    padding: 0 20px;
}

#roll-prev, #roll-next, #fullscreen, #aspect-ratio {
    width: 40px;
    filter: drop-shadow(0px 0px 5px rgb(0 0 0 / 0.4));
}

#roll-prev {
    transform: rotate(180deg);
}

/* Hide spinner by default */
#btn-favorite .spinner-border {
    display: none;
}

/* Show only if btn-loading class is present */
#btn-favorite.btn-loading .spinner-border {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-left: 10px;
}

/* Show icon/message based on data state*/
#btn-favorite .shown-in-state-0, #btn-favorite .shown-in-state-1 {
    display: none;
}

#btn-favorite[data-state='0'] .shown-in-state-0 {
    display: inline-block;
}

#btn-favorite[data-state='1'] .shown-in-state-1 {
    display: inline-block;
}
/* Hide when loading no matter what state */
#btn-favorite.btn-loading .shown-in-state-0, #btn-favorite.btn-loading .shown-in-state-1 {
    display: none;
}

.btn-icon {
    filter: drop-shadow(0px 0px 4px rgb(0 0 0 / 0.4));
}

.btn-icon-active {
    filter: brightness(0) saturate(100%) invert(14%) sepia(90%) saturate(5884%) hue-rotate(317deg) brightness(89%) contrast(105%) drop-shadow(0px 0px 4px rgb(0 0 0 / 0.4));
}

#aspect-ratio {
    position: absolute;
    right: 26px;
    top: -60px;
    width: 32px;
}

#fullscreen {
    position: absolute;
    right: 30px;
    top: 30px;
    width: 32px;
}

#playpause, #playstop {
    width: 80px;
    position: relative;
    top: -10px;
    margin: 0 20px 0 10px;
    filter: drop-shadow(0px 0px 5px rgb(0 0 0 / 0.4));
}


    #playpause[data-state=play] {
        content: url('/gfx/icon_play.svg');
    }

    #playpause[data-state=pause] {
        content: url('/gfx/icon_pause.svg');
    }

#timeline {
    color: #fff;
    font-family: WorkSans, sans-serif;
    text-align: left;
    padding-left: 20px;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
    margin-top: 20px;
    height: 1em;
    cursor: pointer;
    margin-bottom: 5px;
}


/* Playback slider itself */
.video-slider {
    -webkit-appearance: none; /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 6px; /* Specified height */
    background: #fff !important; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 1; /* Set transparency (for mouse-over effects on hover) */
    border-radius: 8px;
    filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5));
}

    /* Mouse-over effects */
    .video-slider:hover {
        opacity: 1; /* Fully shown on mouse-over */
    }

    /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
    .video-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 40px;
        height: 40px;
        background: #e5007e;
        border: 5px solid #fff;
        border-radius: 40px;
        cursor: pointer;
    }

    .video-slider::-moz-range-thumb {
        width: 40px;
        height: 40px;
        background: #e5007e;
        border: 5px solid #fff;
        border-radius: 40px;
        cursor: pointer;
    }
/* Video player on mobile phones */
@media(max-height: 576px) {
    #playpause, #playstop {
        width: 40px;
    }

    #roll-prev, #roll-next {
        width: 24px;
    }

    #fullscreen {
        top: 5px;
        width: 24px;
    }

    #timeline {
        margin-top: 5px;
    }

    .video-slider::-webkit-slider-thumb {
        width: 30px;
        height: 30px;
    }

    .video-slider::-moz-range-thumb {
        width: 30px;
        height: 30px;
    }

    .player .page-title h1 {
        font-size: 20px;
    }
}


.slidecontainer {
    width: 100%; /* Width of the outside container */
}



.controls-hidden header {
    margin-top: -200px;
    transition: margin-top 1s;
}

.related {
    position: fixed;
    bottom: 0;
    z-index: 1000;
    transition: bottom 0.5s;
    width: 100%;
}

#related-pane {
    transition: opacity 0.3s linear;
}

.related-loading {
    opacity: 0.1;
    transition: opacity 0.3s linear;
}

.related .title {
    color: #fff;
}

.controls-hidden .controls {
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.5s, opacity 0.5s linear;
}

.controls-hidden .related {
    transition: bottom 1s;
    bottom: -220px;
}

#video-controls .on-right {
    float: right;
}

.related .section-container {
    padding: 0;
    margin: 0;
}

.related .section-scroll a i {
    color: #fff;
}

.related .video-item {
    width: 139px;
    min-width: 139px;
}

.related .video-reel-item {
    width: 66px;
    min-width: 66px;
}

.related .related-content {
    padding: 10px 60px 0 60px;
    background-color: rgba(0, 0, 0, 0.8);
}

@media (pointer: coarse) {
    .related .related-content {
        padding: 10px 0 0 0;
    }
}

.related .video-item img {
    max-height: 78px;
    -webkit-mask-size: 139px 78px;
    min-width: 139px;
    min-height: 78px;
    max-width: 139px;
    max-height: 78px;
    width: auto;
    height: auto;
    display: block;
}

.related .video-item .title {
    font-size: 12px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.related .video-reel-item img {
    max-height: 117px;
    -webkit-mask-size: 66px 117px;
    min-width: 66px;
    min-height: 117px;
    max-width: 66px;
    max-height: 117px;
    width: auto;
    height: auto;
    display: block;
}

.related .video-reel-item .title {
    display: none;
}


#buffering {
    display: none;
    position: fixed;
    top: 40px;
    right: 40px;
}

    #buffering[data-state=true] {
        display: inline-block;
    }

    #buffering[data-state=false] {
        display: none;
    }

/*Profile switcher*/
.profile-switcher {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: center;
    flex-wrap: wrap;
}

    .profile-switcher .profile-item {
        display: inline-block;
        margin: 0 10px;
        text-align: center;
        margin-bottom: 20px;
    }

    .profile-switcher .profile-new {
        background-color: #0000fe;
        font-size: 94px;
        width: 138px;
        color: #feba00;
    }

    .profile-switcher .profile {
        height: 138px;
        overflow: hidden;
        display: inline-block;
        border-radius: 90px;
    }

        .profile-switcher .profile:hover {
            outline: 3px solid #0100fb;
            filter: brightness(1.25);
        }

        .profile-switcher .profile.archived {
            filter: grayscale(1);
        }

        .profile-switcher .profile.active {
            outline: 12px solid #0100fb;
        }

        .profile-switcher .profile img {
            height: 138px;
        }

.new-profile-image {
    height: 138px;
    border-radius: 90px;
    outline: 3px solid #0100fb;
}

.profile-switcher .subline {
    text-align: center;
    color: #fff;
    font-size: 16px !important;
    display: inline-block;
}

/* Default table styles */
.table-custom {
    --bs-table-bg: transparent !important;
    border-color: rgba(0, 0, 0, 0.4);
}

.footer-divider {
    border-top: 2px solid rgba(0, 0, 0, 0.4);
}
/*Accordion*/
.accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: #0100fb;
    --bs-accordion-active-bg: #0100fb;
}

.accordion-button:not(.collapsed) {
    color: #fff;
}

/*Card*/
.card {
    --bs-card-bg: transparent;
    --bs-card-border-color: #0100fb;
    border: 2px solid #0100fb;
}

.card input[type=radio] {
    scale: 2;
    margin: 10px;
}

/* Custom series dropdown menu */
.custom-dropdown .dropdown-menu {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    font-family: WorkSansBold, sans-serif;
    font-size: 18px;
    --bs-dropdown-link-color: #fff;
}

/* Content grid (aggregate detail with one section */
.content-grid {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 10px;
    justify-content: space-evenly;
}

/* Player error message */
.player-error {
    position: fixed;
    display: block;
    text-align: center;
    top: 0;
    z-index: 3000;
    left: 0;
    right: 0;
    height: 4em;
    background-color: darkred;
    color: #fff;
}

/* Club */
.club-icon {
    width: 80px;
}

h1.club-title {
    font-size: 36px;
    position: relative;
    top: -20px;
    margin-bottom: 0px;
}

h1.club-title, .club-color {
    background: linear-gradient(to right, #ffd835, #f64b20);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

a.club-color:hover {
    background: linear-gradient(to left, #ffd835, #f64b20);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media(max-width: 768px) {
    h1 .club-title {
        margin-bottom: -20px;
    }
}

.subscription-header .lines .first-line {
    font-family: WorkSansBlack, sans-serif;
    font-size: 42px;
}

.subscription-header .lines .second-line {
    white-space: normal;
    width: auto;
    max-width: auto;
    height: auto;
    position: relative;
    top: -4px;
    font-size: 22px;
    line-height: 1.1;
    min-width: 250px;
    font-family: WorkSans, sans-serif;
}

.subscription-panel {
    margin-top: 60px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.4);
    color: #00144d;
    position: relative;
    font-size: 20px;
}

.subscription-panel-dark {
    background: linear-gradient(to bottom right, rgba(0,0,0,0) 0%, rgba(0, 0, 0, 0.8) 30%);
    color: #fff;
}

    .subscription-panel-dark h2 {
        text-align: center;
        margin-top: 35px;
        margin-bottom: 0px;
    }

.subscription-panel .list-icon {
    left: 50%;
    margin-left: -50px;
    position: absolute;
    top: -50px;
    width: 100px;
}

.subscription-panel-button {
    position: relative;
    top: -40px;
}

.subscription-panel ul {
    list-style: none;
    line-height: 140%;
    padding-left: 60px;
    margin-top: 70px;
}

    .subscription-panel ul li {
        position: relative;
        margin: 20px 0;
    }

        .subscription-panel ul li::before {
            font-family: "bootstrap-icons";
            float: left;
            margin-top: 0px;
            left: -40px;
            color: #0001fe;
            font-size: 26px;
            position: absolute;
        }

        .subscription-panel ul li::before {
            content: "\F26B";
        }

.price-panel {
    border-radius: 20px;
    background-color: #0000fe;
    color: #fff;
    border: 6px solid transparent;
}

    .price-panel .price-title {
        font-size: 32px;
        font-family: WorkSansBlack, sans-serif;
    }

    .price-panel .price-subtitle {
        font-size: 24px;
        font-family: WorkSansBlack, sans-serif;
    }

    .price-panel .price-description {
        font-size: 18px;
    }

.price-panel-discount {
    background-color: #feac00;
    border: 6px solid #feac00;
    border-radius: 20px;
    text-align: center;
    font-size: 24px;
    color: #fff;
}

.alternate-bg {
    background-color: #09214f;
    color: #fff;
    padding: 30px 0;
}

.disabled-link {
    pointer-events: none;
    cursor: default;
}

/* Generic content */
.generic-description {
    white-space: pre-wrap;
}


/* Cookie consent styles */
.cc--light-tvpd {
    --cc-font-family: WorkSans, sans-serif;
    color-scheme: light;
    --cc-bg: #f9faff;
    --cc-primary-color: #112954;
    --cc-secondary-color: #112954;
    --cc-btn-primary-bg: #0000fe;
    --cc-btn-primary-color: var(--cc-bg);
    --cc-btn-primary-hover-bg: #0b5ed7;
    --cc-btn-primary-hover-color: #fff;
    --cc-btn-secondary-bg: #dfe7f9;
    --cc-btn-secondary-color: var(--cc-secondary-color);
    --cc-btn-secondary-hover-bg: #c6d1ea;
    --cc-btn-secondary-hover-color: #000;
    --cc-cookie-category-block-bg: #ebeff9;
    --cc-cookie-category-block-border: #ebeff9;
    --cc-cookie-category-block-hover-bg: #dbe5f9;
    --cc-cookie-category-block-hover-border: #dbe5f9;
    --cc-cookie-category-expanded-block-hover-bg: #ebeff9;
    --cc-cookie-category-expanded-block-bg: #ebeff9;
    --cc-overlay-bg: rgba(219, 232, 255, 0.85) !important;
    --cc-toggle-readonly-bg: #cbd8f1;
    --cc-toggle-on-knob-bg: var(--cc-bg);
    --cc-toggle-off-bg: #8fa8d6;
    --cc-toggle-readonly-knob-bg: var(--cc-bg);
    --cc-separator-border-color: #f1f3f5;
    --cc-footer-border-color: #f1f3f5;
    --cc-footer-bg: var(--cc-bg);
    --cc-btn-border-radius: 20px;
    --cc-modal-border-radius: var(--cc-btn-border-radius);
    --cc-pm-toggle-border-radius: var(--cc-btn-border-radius);
}

.cc--light-funky #cc-main .toggle__icon:after {
    border-radius: var(--cc-btn-border-radius);
}

.cc--light-funky #cc-main .cm__btn--close {
    border-radius: var(--cc-btn-border-radius);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}


/* Video JS Player */
#video-js-player {
    background-color: #000;
    width: 100%;
    height: 100%;
    position: fixed;
    -webkit-user-select: none; /* Safari */
    user-select: none;
    /*Prevent scrolling on Safari/iPhone*/
    overscroll-behavior-y: none;
    overflow: hidden;
}

.payment_method {
    border: none;
    border-radius: 20px;
    background-color: #eee;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 5px 0;
}

    .payment_method img {
        max-height: 24px;
        margin: 10px 20px;
    }

.empty-container {
    text-align: center;
    margin: 0 auto;
}

#favorite-counter-container.is-favorite {
    color: #fff !important;
}

.headingsOnCenter h1 {
    text-align: center;
}

.second-line p {
    margin: 0;
}

#txt-age-rating {
    border-radius: 13px;
    background-color: #fff;
    color: #000000;
    display: inline-block;
    width: 26px;
    height: 26px;
    padding-top: 2px;
    font-size: 15px;
    text-align: center;
    font-family: WorkSans, sans-serif;
    text-shadow: none;
    filter: drop-shadow(0px 0px 4px rgb(0 0 0 / 0.4));
}

.hidden-by-default {
    display: none !important;
}

.device-icon {
    font-size: 36px;
    background-color: #09214f;
    border-radius: 40px;
    width: 80px;
    height: 80px;
    display: inline-block;
    color: #fff;
    margin-top: 20px;
    margin-bottom: 20px;
}

    .device-icon i {
        position: relative;
        top: 12px;
    }

.device-panel {
    padding: 10px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}

    .device-panel .panel-title {
        min-height: 120px;
    }

    .device-panel .panel-subtitle {
        min-height: 200px;
        font-size: 15px;
        line-height: 160%;
    }

@media (max-width: 768px) {
    .device-panel .panel-title, .device-panel .panel-subtitle {
        min-height: auto;
    }
}

.profile-limit-width {
    max-width: 600px;
}

.profile-limit-width-center {
    max-width: 600px;
    margin: 20px auto;
}

.first-video {
    border-right: 2px solid rgba(255, 255, 255, 0.8);
    margin-right: 0px;
    padding-right: 10px;
    width: 1px;
    display: inline-block;
    margin-top: 15px;
    margin-bottom: 15px;
}

.first-video-title {
    text-align: center;
    width: 100%;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    display: inline-block;
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 10px;
}

.first-video-title img {
    margin-top: 5px;
    opacity: 0.8;
}

.header-link {
    text-decoration: none;
}

#togglePassword {
    cursor: pointer;
}

.price-amount {
    font-size: 22px;
    font-weight: bold;
}

.btn-sm {
    padding: 4px;
    font-size: 14px;
}

.env {
    position: absolute;
    z-index: 9999;
    left: 0;
    top: 0;
    color: red;
    font-size: 11px;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.5);
}

.app-badge {
    height: 80px;
    margin: 10px 0;
}