:root {
    /* Colors */
    --base300-color: #A0A0A0;
    --base400-color: #939393;
    --base500-color: #6A6A6A;
    --base600-color: #3D3D3D;
    --base700-color: #151515;
    --base800-color: #0D0D0D;
    --base900-color: #000000;
    --brand-one-color: #FF6700;
    --brand-two-color: #FFDE2B;
    --brand-three-color: #5E00FF;
    --brand-four-color: #FF2CD2;
    --success-color: #02C07D;
    --warning-color: #FF6700;
    --alert-color: #E84545;
    --alert-color-hover: #a82c2c;
    --background-color: var(--base900-color);
    /* Icons */
    --theatre-mode-icon: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22white%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22m%2019.2%2C5%20h%20-14%20c%20-1.1%2C0%20-2%2C0.9%20-2%2C2%20v%209.999996%20c%200%2C1.1%200.9%2C2%202%2C2%20h%2014%20c%201.1%2C0%202%2C-0.9%202%2C-2%20V%207%20c%200%2C-1.1%20-0.9%2C-2%20-2%2C-2%20z%20m%200%2C11.999996%20H%205.2%20V%207%20h%2014%20z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
    --avia-mute-icon: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22white%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%20pointer-events%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.63%205.04503C3.24%204.65503%203.24%204.02503%203.63%203.63503C4.03%203.24503%204.66%203.24503%205.05%203.63503L20.36%2018.955C20.75%2019.345%2020.75%2019.975%2020.36%2020.365C19.97%2020.755%2019.34%2020.755%2018.95%2020.365L17.61%2019.025C16.94%2019.565%2016.19%2020.005%2015.39%2020.335C14.73%2020.605%2014%2020.145%2014%2019.425C14%2019.035%2014.22%2018.655%2014.58%2018.505C15.16%2018.275%2015.69%2017.965%2016.18%2017.595L12%2013.415V17.585C12%2018.475%2010.92%2018.925%2010.29%2018.295L7%2015.005H4C3.45%2015.005%203%2014.555%203%2014.005V10.005C3%209.45503%203.45%209.00503%204%209.00503H7L7.29%208.70503L3.63%205.04503ZM18.59%2014.345C18.85%2013.615%2019%2012.825%2019%2012.005C19%209.06503%2017.18%206.54503%2014.61%205.50503C14.25%205.36503%2014%205.03503%2014%204.65503V4.46503C14%203.83503%2014.63%203.37503%2015.22%203.60503C18.6%204.89503%2021%208.17503%2021%2012.005C21%2013.395%2020.68%2014.705%2020.12%2015.875L18.59%2014.345ZM10.29%205.71503L10.12%205.88503L12%207.76503V6.41503C12%205.52503%2010.92%205.08503%2010.29%205.71503ZM14%207.97503C15.48%208.71503%2016.5%2010.235%2016.5%2012.005C16.5%2012.085%2016.49%2012.165%2016.48%2012.245L14%209.76503V7.97503Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
    --second-screen-icon: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2049.214%2049.215%22%20fill%3D%22white%22%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%20pointer-events%3D%22none%22%3E%3Cg%3E%3Cg%20id%3D%22Layer_53_20_%22%3E%3Cg%3E%3Cpolygon%20points%3D%222.027%2C11.753%2025.687%2C11.753%2025.687%2C17.884%2027.714%2C17.884%2027.714%2C9.727%200%2C9.727%200%2C27.482%2011.312%2C27.482%2011.312%2C28.625%205.399%2C28.625%205.399%2C29.568%2019.471%2C29.568%2019.471%2C28.625%2016.17%2C28.625%2016.17%2C27.482%2019.471%2C27.482%2019.471%2C24.867%202.027%2C24.867%22%2F%3E%3Cpath%20d%3D%22M49.214%2C37.402V19.647H21.5v17.755h11.312v1.145H26.9v0.941h16.557v-0.941h-5.785v-1.145H49.214z%20M23.527%2C34.789V21.674%20h23.66v13.113h-23.66V34.789z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    --avia-mute-icon-hover: var(--avia-mute-icon);


    /* Sizes */
    --bottom-bar-player-height: 3.7em;
    --bottom-bar-player-width: calc(3.7em / .5625);

    @font-face {
        font-family: PlutoTV Sans;
        src: url(/assets/fonts/PlutoTVSansV10-Regular.otf) format('opentype');
    }
    @font-face {
        font-family: PlutoTV Sans;
        font-weight:100;
        src: url(/assets/fonts/PlutoTVSansV10-Thin.otf) format('opentype');
    }
    @font-face {
        font-family: PlutoTV Sans;
        font-weight:300;
        src: url(/assets/fonts/PlutoTVSansV10-Light.otf) format('opentype');
    }
    @font-face {
        font-family: PlutoTV Sans;
        font-weight:bold;
        src: url(/assets/fonts/PlutoTVSansV10-Bold.otf) format('opentype');
    }
    @font-face {
        font-family: PlutoTV Sans;
        font-weight:500;
        src: url(/assets/fonts/PlutoTVSansV10-Medium.otf) format('opentype');
    }
    @font-face {
        font-family: PlutoTV Sans;
        font-weight:600;
        src: url(/assets/fonts/PlutoTVSansV10-SemiBold.otf) format('opentype');
    }
    @font-face {
        font-family: PlutoTV Sans;
        font-weight:900;
        src: url(/assets/fonts/PlutoTVSansV10-ExtraBold.otf) format('opentype');
    }
    @font-face {
        font-family: PlutoTV Sans-Black;
        src: url(/assets/fonts/PlutoTVSansV10-Black.otf) format('opentype');
    }

    --avia-font-family: PlutoTV Sans, Verdana, sans-serif;
}
body {
    font-family: var(--avia-font-family) !important;
}

/* Base Player Style */
.main {
    position: absolute;
    background:var(--background-color);
    top: 3em;
    left: 0;
    width: 100%;
    height: calc(33% + 0.75em);
    transition: top 0.5s, left 0.5s, height 0.5s;
    z-index: 1;
}
.main.disabled {
    display:none;
}
.main #player {
    width:100%;
    transition: top 0.5s, left 0.5s, height 0.5s;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.main #player video {
    background:transparent !important;
}

.main #player .metadata {
    color:var(--avia-control-bar-btn-text-color-hover);
    position:absolute;
    display:block;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.main #player .metadata .empty, .adpodInfo {
    display: none;
}
.adpodInfo {
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    color: white;
    background: rgba(0,0,0,.8);
    font-size: 0.75em;
    padding: 0.5em;
}
.main #player .metadata {
    display:none;
}
.main #player .metadata.title {
    font-size: 1.5em;
    font-weight: bold;
    bottom: 4.5em;
    left: 0.75em;
}
.main #player .metadata.subtitle {
    font-size: 1em;
    bottom: 4.25em;
    left: 1em;
}
.main #player .metadata.schedule {
    font-size: 1em;
    top:10em;
    left:1.5em;
    display:none !important;
}
.main #player avia-ui[active] div[slot="control-bar"] {
    background: linear-gradient(rgba(0, 0, 0, 0) 5%, var(--background-color) 100%);
}
.main #player avia-ui[active] .metadata {
    display:block;
}
.main #player .metadata .description::before {
    content: "|";
    font-size: 1.5em;
    padding: 0 0.25em;
}
.main #player .metadata .rating {
    display: inline-block;
    font-weight: bold;
    padding: 0.25em 0.25em;
    border: 1px solid var(--avia-control-bar-btn-text-color-hover);
    border-radius: 5px;
    text-align: center;
}
.main #player .metadata .rating.empty {
    display:none;
}
.main #player .metadata .rating.R, .main #player .metadata .rating.NSFW {
    background-color:red;
    border-color:red;
}
.main #player .metadata .rating.NC-17, .main #player .metadata .rating.TV-MA {
    background-color:orange;
    border-color:orange
}
.main #player .metadata .rating.PG-13, .main #player .metadata .rating.TV-14 {
    background-color:gray;
    border-color:gray;
}
.main #player .metadata .rating.G, .main #player .metadata .rating.TV-G {
    background-color:green;
    border-color:green;
}
.main.play #player {
    background:none !important;
}

.main #player avia-control-bar div[slot="top"] .start-time,
.main #player avia-control-bar div[slot="top"] .end-time,
.main .avia-slider-value.vll,
.main:not(.vod) #player avia-button[ids="play,pause"],
.main:not(.vod) #player avia-seek-back-button,
.main:not(.vod) #player avia-seek-forward-forward,
.main:not(.vod) #player avia-overlay,
.main:not(.vod) #player avia-progress-bar .avia-slider-handle {
    display:none;
}
.main.loading #player avia-control-bar avia-current-time,
.main.loading #player avia-control-bar avia-duration,
.main.loading #player avia-control-group div[slot="center"] *,
.main.loading #player avia-overlay {
    display:none !important;
}
.main.vod.loading #player avia-progress-bar {
    width: 100%;
}
.main.loading #player avia-progress-bar avia-slider {
    display:none;
}
.main.loading #player avia-progress-bar .vll {
    display: block;
    overflow:hidden;
    width: 100% !important;
    background-color: var(--brand-two-color);
}
.main.loading #player avia-progress-bar .vll .loader {
    width: 100%;
    height: 100%;
    background-color: var(--brand-four-color);
    animation: indeterminateLinearAnimation 1s infinite linear;
    transform-origin: 0% 50%;
}
.main.avbreak #player avia-button[ids="play,pause"],
.main.avbreak #player avia-seek-back-button,
.main.avbreak #player avia-seek-forward-button,
.main.avbreak #player avia-overlay,
.main.avbreak #player .start-time,
.main.avbreak #player .end-time,
.main.avbreak #player avia-current-time,
.main.avbreak #player avia-progress-bar,
.main.avbreak #player avia-progress-bar > avia-slider,
.main.avbreak #player avia-duration,
.main.avbreak #player avia-current-time,
.main.avbreak #player avia-current-time {
    display:none !important;
}
.main.avbreak .adpodInfo {
    display: block;
}
.main.vod #player .metadata.title {
    bottom: 5em;
}
.main.vod #player .metadata.subtitle {
    bottom: 5em;
}

.main.vod #player avia-control-bar div[slot="top"] avia-current-time,
.main.vod #player avia-control-bar div[slot="top"] avia-duration {
    display:inline-block
}
.main:not(.vod) #player avia-control-bar div[slot="top"] avia-current-time,
.main:not(.vod) #player avia-control-bar div[slot="top"] avia-duration,
.main:not(.vod) avia-progress-bar .avia-progress-preview {
    display:none !important
}
.main:not(.vod).play #player avia-control-bar div[slot="top"] .start-time,
.main:not(.vod).play #player avia-control-bar div[slot="top"] .end-time,
.main:not(.vod).play .avia-slider-value.vll {
    display:inline-block
}
.main:not(.vod).play #player avia-control-bar div[slot="top"] .start-time,
.main:not(.vod).play #player avia-control-bar div[slot="top"] .end-time {
    min-width: 5em;
}
.main:not(.vod).play .avia-slider-value.vll ~ avia-slider {
    cursor: default;
}
.main:not(.vod).play .avia-slider-value.vll ~ avia-slider .avia-slider-value{
    display:none;
    cursor: default;
}

.main.notification.vod #player avia-control-bar div[slot="top"],
.main.notification.vod #player avia-control-bar .avia-control-container .avia-control-group-center,
.main.notification.vod #player avia-control-bar .avia-control-container .avia-control-group-right
{
    display:none;
}

avia-control-bar avia-button#theatre-mode {
    background-image: var(--theatre-mode-icon);
}
avia-control-bar div[slot="top"] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    height: 1em;
}
avia-progress-bar {
    width: calc(100% - 8em);
    display: inline-block;
}
.main:not(.loading):not(.vod) avia-progress-bar {
    padding-bottom: 1.1em;
}
avia-control-bar:not(.bottomBar).avia-live-linear avia-progress-bar {
    width: calc(100% - 10em);
}
avia-progress-bar .avia-slider-value.vll {
    margin-bottom: -0.68em;
    z-index: 1;
    position:relative;
    background-color: var(--avia-control-bar-btn-text-color-hover)
}
avia-volume-slider {
    border-radius: 12px;
    border: 1px solid transparent;
    padding: 10px 12px 6px 12px;
    margin-left: 0;
}
avia-volume-slider:active {
    border-color: var(--brand-two-color);
}
avia-volume-slider .avia-slider-handle {
    background-color: var(--avia-control-bar-btn-text-color-hover)
}
avia-mute-toggle {
    margin-right: 0 !important;
}
avia-mute-toggle avia-button {
    border-radius: 50% !important;
    width: 30px;
    height: 30px !important;
    background-size: 60% !important;
}
avia-button#secondScreen {
    display:none;
    background: var(--second-screen-icon);
}
avia-control-bar-compact avia-mute-toggle {
    margin-right: var(--avia-default-spacing) !important;
}
avia-control-bar-compact avia-mute-toggle avia-button {
    height: var(--avia-control-bar-btn-height) !important;
    width: var(--avia-control-bar-btn-height) !important;
    background-size: var(--avia-icon-btn-bg-size) !important;
}
avia-mute-toggle avia-button[toggled] {
    background-color: var(--alert-color);
}
avia-mute-toggle avia-button[toggled]:hover{
    background-color: var(--alert-color-hover);
}

.main.vod avia-progress-bar {
    padding-bottom: 0;
    margin-bottom: -0.1em;
}
/* House Clickable Ad Banner */
.main.avbreak.clickable div[data-role="adClickEl"] {
    cursor:pointer;
    display:block !important;
    top: auto !important;
    right: 1em !important;
    bottom: 4em;
    border-radius: 5em;
    padding: 0.5em 1em;
    border-radius: 2em;
    border: 3px solid var(--brand-three-color);
    color: var(--avia-control-bar-btn-text-color-hover);
    background: var(--brand-three-color);
    font-weight: bold;
    z-index: 999;
}
.main.avbreak.clickable div[data-role="adClickEl"]:hover {
    background: var(--avia-control-bar-btn-text-color-hover);
    color: var(--brand-three-color);
}
.main.avbreak.internal *[data-role="ccContainer"],
.main.avbreak.internal avia-ui {
    display:none;
}

.main.avbreak.internal .clickable {
    background-size: cover;
    height: 100%;
    width: 100%;
    background-position: center;
}
.main.avbreak.internal .clickable .bar {
    position: absolute;
    bottom: 0.5em;
    right: -0.5em;
    width: 2.5em;
    height: 2.5em;
    background: var(--brand-three-color);
    border-radius: 3em;
    margin: 0 2.5%;
    padding: 1em;
    transition:all 0.25s;
}
.main.avbreak.internal .clickable .bar .title,
.main.avbreak.internal .clickable .bar .subtitle {
    color:var(--base900-color);
    left: 4em;
    position: relative;
    width: calc(100% - 17em);
    display:none;
}
.main.avbreak.internal .clickable .bar .title {
    font-weight:bold;
}
.main.avbreak.internal .clickable .bar .subtitle {
    font-size: 0.8em;
    margin-left: 0.8rem;
}

.main.avbreak.internal .clickable .bar .thumbnail {
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    height: 3.5em;
    width: 3.5em;
    background-size: cover;
    border-radius: 50%;
}
.main.avbreak.internal .clickable .bar button {
    float: right;
    position: relative;
    top: 0.15rem;
    border: 3px solid var(--brand-three-color);
    padding: 0.5em 1em;
    border-radius: 2em;
    color: var(--avia-control-bar-btn-text-color-hover);
    background: var(--brand-three-color);
    display:none;
}
.main.avbreak.internal .clickable .bar:hover {
    width: calc(92.5% - 0.5em);
    box-shadow: -0.5em 0px var(--brand-three-color);
    background: var(--avia-control-bar-btn-text-color-hover);
}
.main.avbreak.internal .clickable .bar:hover .title,
.main.avbreak.internal .clickable .bar:hover .subtitle, 
.main.avbreak.internal .clickable .bar:hover .thumbnail,
.main.avbreak.internal .clickable .bar:hover button {
    display:block;
}
.main.avbreak.internal .clickable .bar:hover .subtitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Media Markups*/
.main .mediaMarkups {
    display: none;
    position: absolute;
    right: 1em;
    bottom: 5em;
    z-index: 1;
}
.main.notification .mediaMarkups {
    bottom: 1em;
}
.main:not(.floating):not(.bottomBar) .mediaMarkups {
    display:block;
}
.main .mediaMarkups avia-button.action {
    background-color: var(--brand-two-color);
    color: var(--base900-color);
    line-height: var(--avia-control-bar-btn-height);
    text-align: center;
    border-radius: var(--avia-control-bar-btn-height);
    padding: 0 1em;
    width: auto;
    white-space: nowrap;
    min-width: var(--avia-control-bar-btn-width);
}
.main .mediaMarkups avia-button.action:not(:last-of-type) {
    margin-right: 1em;
}
.main .mediaMarkups .countdown.notification {
    width: var(--avia-control-bar-btn-height);
    top: 0.5em;
    right: 1em;
    background-color: var(--brand-two-color);
    color: var(--base900-color);
    line-height: var(--avia-control-bar-btn-height);
    text-align: center;
    border-radius: 50%;
    position: fixed;
}

.main.bottomBar:not(.theatre) {
    top: auto;
    bottom: 0;
    height: var(--bottom-bar-player-height);
    width: 100%;
}
.main.bottomBar:not(.theatre).maintab {
    bottom: 3.9em;
}
.main.bottomBar:not(.theatre) #player {
    position: absolute !important;
    background-color: transparent !important;
}
.main.bottomBar:not(.theatre) #player {
    left: 0;
}
.main.bottomBar:not(.theatre) #player video {
    width: var(--bottom-bar-player-width) !important;
}
.main.bottomBar:not(.theatre).avbreak.clickable div[data-role="adClickEl"] {
    bottom: auto;
}
.main.bottomBar:not(.theatre) #player .metadata {
    display:block;
    width: 50%;
    height: 1em;
    overflow: hidden;
}
.main.bottomBar:not(.theatre) #player .metadata.title {
    top: 1.65em;
    left: 7em;
    font-size: 1em;
    font-weight:600;
}
.main.bottomBar:not(.theatre) #player .metadata.subtitle {
    display:none;
}
.main.bottomBar:not(.theatre) #player .metadata.schedule {
    top: auto;
    bottom: 1em;
    left: 8.2em;
    font-size: 0.85em;
    display: block !important;
}
/* Override default Avia UI compact mode...we don't want it unless position=floating */
.main:not(.floating) avia-ui[control-mode="compact"][active] avia-control-bar-compact, 
.main:not(.floating) avia-ui[control-mode="compact"][active] avia-control-bar-compact>* {
    display: none;
}
.main:not(.floating) avia-ui[control-mode="compact"][active] avia-control-bar {
    display: block;
}
.main:not(.floating) avia-ui[control-mode="compact"][active] avia-control-bar:not(.bottomBar) {
    padding: 0.75em 1em 0 0.75em !important;
}
avia-control-bar.bottomBar {
    display:none !important;
}
avia-ui avia-control-bar.bottomBar .avia-control-container{
    height: var(--bottom-bar-player-height);
}
.main.bottomBar:not(.theatre) #player avia-ui avia-control-bar:not(.bottomBar),
.main.bottomBar:not(.theatre) #player avia-ui avia-control-bar.bottomBar .avia-slider-handle,
.main.bottomBar:not(.theatre) #player avia-ui avia-control-bar.bottomBar .avia-progress-preview {
    display:none;
}
.main.bottomBar:not(.theatre) #player avia-ui avia-control-bar-compact {
    display:none;
}
.main.bottomBar:not(.theatre) #player avia-ui avia-control-bar.bottomBar {
    display:block !important;
    padding: 0;
    opacity: 1 !important;
    background:none !important;
}
.main.bottomBar:not(.theatre) #player avia-ui avia-control-bar avia-progress-bar {
    padding-bottom: 0;
    margin-bottom: -0.25em;
    position: absolute;
    width: var(--bottom-bar-player-width);
    left: 0;
    bottom: 0;
    visibility: visible !important;
}
.main.bottomBar:not(.theatre) #player avia-mute-toggle avia-button[toggled]:not(:hover) {
    background-color: transparent;
}
.main:not(.theatre).floating {
    top:auto;
    left: auto;
    right: 0.74em;
    bottom: 4.75em;
    width: 25em;
    height: calc(25em * .5625);
    overflow: hidden;
}
.main:not(.theatre).floating #player {
    position: absolute !important;
    width: 100% !important;
}
.main:not(.theatre).floating #player avia-ui[active] .metadata.schedule {
    display: none !important;
}
.main.theatre,
/*.main.notification,*/
.main.fullscreen #player video {
    width: 100% !important;
    height: 100% !important;
}
/*
.main.notification {
    top: 0;
}
*/
.main.fullscreen avia-control-bar avia-button#theatre-mode {
    display: none;
}
.main.theatre {
    top: 0;
    background: var(--background-color);
}
.main.theatre avia-button#theatre-mode {
    border: 1px solid var(--brand-two-color);
}
.player-controls {
    width: 624px;
    padding: 8px;
    margin: 5px auto;
    border-radius: 4px;
    background: var(--base400-color);
    color: var(--avia-control-bar-btn-text-color-hover);
    display: flex;
    align-items: center;
}

.player-controls  button,
.player-controls  input,
.player-controls div {
    margin-right: 1em;
}

#secondScreenQr {
    visibility:hidden;
    display:block;
    background: rgba(0, 0, 0, 0.7);
    width:100%;
    height:100%;
    text-align: center;
    position: absolute;
    z-index: 1000;
}
#secondScreenQr .avia-menu-close {
    position: absolute;
    right: 0;
}
#secondScreenQr img {
    display:block;
    margin:auto;
    height: 80%;
    width: auto;
}