/*
    Default Player Height: 360px;
    Default Player Width: 640px;
    Default Controlbar Height: 30px;

    Algorithm for Height: Ypx / ((360 + 30) / 100);
    Algorithm for Width: Xpx / (640 / 100);
*/

html, body {
    min-width: 280px;
    width: 100%;
    min-height: 180px;
    height: 100%;
    margin: 0;
    font-size: 16px;
    font-size: calc((100vh - 30px) * 0.0435);
}

html.portrait,
html.portrait body {
    font-size: 2.44444vw;
}


#wrapper_container {
    min-width: 280px;
    width: 100%;
    margin: auto;
    min-height: 180px;
    height: 100%;
}
    #wrapper {
        width: auto;
        height: auto;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    }
        #buffering_icon,
        #loading-progress {
            margin-top: -65px; /* 50% of height + 50% of ui controls */
            top: 50%;
            left: 50%;
        }

        .jplayer-timeline-disabled #buffering_icon,
        .jplayer-timeline-disabled #loading-progress {
            margin-top: -50px;
        }

        #wrapper_status_image {
            width: auto;
            height: auto;
        }

    #overlaysWrapper {
        right: 0;
    }
        #overlays {
            position: relative;
            margin: 0 auto;
            height: 100% !important;
            height: calc((100vw / 16) * 9) !important;
            max-height: calc(100vh - 30px);
            overflow: hidden;
            width: 100% !important;
        }
        html.csscalcvhunit.cssvhunit.cssvwunit.portrait #overlays,
            html.csscalcvhunit.cssvhunit.cssvwunit.portrait #wrapper {
            top: calc(((100vh - 30px) - ((100vw / 16) * 9)) / 2) !important;
            height: calc((100vh - 30px) - (((100vh - 30px) - ((100vw / 16) * 9)))) !important;
        }

            .overlay-image[style*="background-image"] {
                background-size: cover;
                background-repeat: no-repeat;
            }

            .overlay-button[style*="background-image"],
            .overlay-btn-img {
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }

            .overlay-button[style*="background-image"].rollover-hover,
            .overlay-button[style*="background-image"].rollover-normal {
                background-size: 100% 100%;
                background-position: 0 0;
            }
            .overlay-button.rollover-legacy {
                background-size: cover;
            }

            .overlay-custom img {
                width: 100% !important;
                height: auto !important;
            }

            .overlay-caption {
                font-size: 1.25rem;
                line-height: 1.5rem;
                -webkit-text-shadow: 0.125rem 0 0 #000, -0.125rem 0 0 #000, 0 0.125rem 0 #000, 0 -0.125rem 0 #000, 0.0625rem 0.0625rem #000, -0.0625rem -0.0625rem 0 #000, 0.0625rem -0.0625rem 0 #000, -0.0625rem 0.0625rem 0 #000;
                -moz-text-shadow: 0.125rem 0 0 #000, -0.125rem 0 0 #000, 0 0.125rem 0 #000, 0 -0.125rem 0 #000, 0.0625rem 0.0625rem #000, -0.0625rem -0.0625rem 0 #000, 0.0625rem -0.0625rem 0 #000, -0.0625rem 0.0625rem 0 #000;
                text-shadow: 0.125rem 0 0 #000, -0.125rem 0 0 #000, 0 0.125rem 0 #000, 0 -0.125rem 0 #000, 0.0625rem 0.0625rem #000, -0.0625rem -0.0625rem 0 #000, 0.0625rem -0.0625rem 0 #000, -0.0625rem 0.0625rem 0 #000;
            }

#jquery_jplayer_videoplayer {
    min-width: 280px;
    position: relative;
    width: 100% !important;
    min-height: 150px;
    height: calc(100vw * (9 / 16)) !important;
    margin: 0px;
}
    #jquery_jplayer_videoplayer > object,
    #jquery_jplayer_videoplayer > video,
    #jquery_jplayer_videoplayer > iframe,
    #jquery_jplayer_videoplayer > img {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1;
    }

    #jquery_jplayer_videoplayer > img {
        max-width: 100vw !important;
        max-height: calc(100vh - 30px);
        margin: auto !important;
        z-index: 999;
    }

#jp-gui-cover {
    width: 100%;
    z-index: 10001;
}

.jp-interface {
    z-index: 10000; /* We want this to be higher than the overlays */
}

.jp-volume-bar {
    width: 70px;
}

.cardDialog {
    box-sizing: border-box;
    height: 100%;
    height: calc((100vw / 16) * 9);
    max-height: calc(100vh - 30px);
    min-width: 280px;
    width: 100%;
    width: calc(((100vh - 30px) / 9) * 16);
    max-width: 100vw;
    padding: 0px;
    margin: 0 auto !important;
    left: 0 !important;
    right: 0 !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    font-size: 1rem;
}

html.portrait .cardDialog {
    margin: calc(((100vh - 30px) - ((100vw / 16) * 9)) / 2) auto !important;
}

    .cardDialog h2 {
        font-size: 2.25em;
        line-height: 1.3em;
        margin: 0 0 0.4em 0;
    }

    .cardDialog p {
        font-size: 1.1em;
        line-height: 1.2em;
        margin-bottom: 0.6em;
    }

.ui-dialog .ui-dialog-content {
    padding: 0;
    min-height: 0;
    height: 100% !important;
}

@media screen and (min-width: 280px) and (max-width: 399px) {
    html.no-cssvhunit .overlay-caption,
    html.no-cssvwunit .overlay-caption {
        font-size: 10px;
        line-height: 12px;
        -webkit-text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 0.5px 0.5px #000, -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000;
        -moz-text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 0.5px 0.5px #000, -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000;
        text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 0.5px 0.5px #000, -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000;
    }
}

@media screen and (min-width: 400px) and (max-width: 479px) {
    html.no-cssvhunit .overlay-caption,
    html.no-cssvwunit .overlay-caption {
        font-size: 14px;
        line-height: 16px;
        -webkit-text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 0.5px 0.5px #000, -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000;
        -moz-text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 0.5px 0.5px #000, -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000;
        text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 0.5px 0.5px #000, -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000;
    }
}

@media screen and (min-width: 480px) and (max-width: 639px) {
    html.no-cssvhunit .overlay-caption,
    html.no-cssvwunit .overlay-caption {
        font-size: 16px;
        line-height: 18px;
        -webkit-text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
        -moz-text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
        text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
    }
}

@media screen and (min-width: 640px) {
    html.no-cssvhunit .overlay-caption,
    html.no-cssvwunit .overlay-caption {
        font-size: 20px;
        line-height: 24px;
        -webkit-text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
        -moz-text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
        text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
    }
}

html.no-cssvhunit #overlaysWrapper #overlays,
html.no-cssvwunit #overlaysWrapper #overlays,
html.no-csscalcvhunit #overlaysWrapper #overlays {
    min-height: 0px !important;
    height: 0px !important;
    padding: 0px 0px 56.25%;
    width: 100% !important;
}

html.no-cssvhunit #jquery_jplayer_videoplayer,
html.no-cssvwunit #jquery_jplayer_videoplayer,
html.no-csscalcvhunit #jquery_jplayer_videoplayer {
    min-height: 0px !important;
    height: 0px !important;
    padding: 0px 0px 56.25%;
}

html.no-cssvhunit .cardDialog,
html.no-csscalcvhunit .cardDialog {
    height: auto !important;
    bottom: 30px;
}

.fluid-card-btn {
    background-size: 100% !important;
}

.modal {
    position: fixed;
    top: 5%;
    right: 0;
    left: 0;
}

#aboutModalBackdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99998;
    background-color: #000;
    display: none;
    opacity: 0.5;
}

.about_modal {
    width:85%;
}

#aboutList {
    max-height: calc(65vh - 90px);
}

#low-bandwidth-card button {
    font-size: 0.6rem;
}

#low-bandwidth-card p {
    padding-bottom: 0em;
}

@media screen and (max-device-width: 900px), screen and (max-width: 900px) {
    #aboutList {
        max-height: calc(55vh - 80px);
    }
}

@media screen and (max-device-width: 700px), screen and (max-width: 700px) {
    .pb_logo img {
        height: 35px;
    }
}

@media screen and (max-device-width: 560px), screen and (max-width: 560px) {
    #aboutList {
        max-height: calc(50vh - 30px);
    }

    .pb_logo img {
        height: 25px;
    }
}

@media screen and (max-device-width: 450px), screen and (max-width: 450px) {
    #aboutList {
        max-height: calc(50vh - 50px);
    }

    .pb_logo {
        display: none;
    }
}

.failover_message {
    box-sizing: border-box;
    width: 100% !important;
    height: 100% !important;
    max-height: calc(100vh - 30px);
    /* NOTE: when changing the padding below, be sure to
       update InteractionPreview.class.php on line 300 as well */
    padding: 2.5rem;
    background-size: contain !important;
    background-position: right bottom;
    font-size: 1rem;
}
.service_suspended {
    max-height: 100%;
}
.failover_message .error-card-heading {
    font-size: 1.5rem;
    padding-bottom: 0.625em;
}
.failover_message p {
    font-size: 1rem;
    width: auto;
    padding-bottom: 0.9em;
    line-height: 1.1em;
}
.failover_message .messageID {
    font-size: 0.9rem !important;
}

/*
   This calc function calculates the parent font-size for the video player, which influences
   the actual font size of overlays (which are specified using rem units). These rems are calculated
   by dividing the specified px font size of the overlay by the default font size from rtc.fluid.js.

   Before 2.4.1, this default was 16px (based on a 360p video), but as overlays are placed on a 540p
   video in the Director, this default is now 24px.

   As a result, this parent font-size needs to be 24px at 540p (and 32px at 720p etc.), to ensure
   consistency between the Director and the player.  This is calculated by obtaining the video height
   (the viewport height minus the 30px timeline) and multiplying it by 24 divided by 540 (or 0.4 recurring).
*/
html.dynamic-overlay-pos-fix-2-4-1, html.dynamic-overlay-pos-fix-2-4-1 body {
    font-size: calc((100vh - 30px) * (24 / 540));
}

/*
    Portrait version of the above calc function. Instead of using 100vh - 30px to calculate the video
    height, the viewport width is used instead (along with the 16/9 aspect ratio).
*/
html.portrait.dynamic-overlay-pos-fix-2-4-1, html.portrait.dynamic-overlay-pos-fix-2-4-1 body {
    font-size: calc(((100vw / 16) * 9) * (24 / 540));
}

html.fullscreen-on body,
.fullscreen-on #wrapper {
    background-color: black;
}

.fullscreen-on #jquery_jplayer_videoplayer {
    overflow: hidden;
}

.fullscreen-on #jquery_jplayer_videoplayer,
.fullscreen-on #overlays,
.fullscreen-on .cardDialog,
.fullscreen-on .failover_message {
    width: calc((100vh - 30px) * (16 / 9)) !important;
    height: calc(100vh - 30px) !important;
    margin: 0 calc((100vw - ((100vh - 30px) * (16 / 9))) / 2);
}

.fullscreen-on.portrait #jquery_jplayer_videoplayer,
.fullscreen-on.portrait #overlays,
.fullscreen-on.portrait .cardDialog,
.fullscreen-on.portrait .failover_message {
    width: 100vw !important;
    height: calc(100vw * (9 / 16)) !important;
    margin: 0;
}
.fullscreen-on.portrait .failover_message {
    margin-top: calc(((100vh - 30px) - (100vw * (9 / 16))) / 2);
}

.fullscreen-on .jp-gui {
    position: absolute;
    bottom: -30px;
    left: calc((100vw - ((100vh - 30px) * (16 / 9))) / 2);
    max-width: calc((100vh - 30px) * (16 / 9));
    width: calc((100vh - 30px) * (16 / 9));
}
.fullscreen-on .jp-gui,
.fullscreen-on .jp-interface {
    /* Increase the height of the timeline by 1px to cover the black line below the video which appears due to
    to the way that browsers attempt to maintain the aspect ratio of the video in a HTML5 video element */
    height: 31px;
}

.fullscreen-on.portrait .jp-gui {
    left: 0;
    max-width: 100vw;
}