/* Copyright (C) Omnivor, Inc - All Rights Reserved
 * Unauthorized copying of this file, via any medium is strictly prohibited
 * 
 * BY USING OR ACCESSING THIS SOFTWARE YOU AGREE AS FOLLOWS: 
 * 
 * THIS SOFTWARE IS PROVIDED BY OMNIVOR, INC. (“OMNIVOR”) ”AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL OMNIVOR BE LIABLE FOR ANY DIRECT, INDIRECT INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION: HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 * 
 * YOU MAY NOT COPY THIS FILE OR THE CONTENTS THEREOF, EXCEPT AS REASONABLY NECESSARY TO VIEW CONTENT PRESENTED TO YOU BY AN AUTHORIZED LICENSEE OF OMNIVOR FOR YOUR OWN PERSONAL AND NON-COMMERCIAL USE.
 * 
 * THIS SOFTWARE INCLUDES PROPRIETARY, TRADE SECRET-INFORMATION OF OMNIVOR. YOU AGREE NOT TO USE THIS SOFTWARE FOR THE PURPOSE OF DEVELOPING ANY PRODUCT OR SERVICE THAT COMPETES WITH THE SOFTWARE OR OMNIVOR PRODUCTS OR TECHNOLOGY.
 * 
 * 
 */
 
body {
    background: black;
    overflow: hidden;
    margin: -1px 0px 0px 0px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#label-wrapper {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    overflow: hidden;
}

#label-wrapper button > * {
    /* Disable clicks on children of our buttons to ensure
       clicks get attributed to the correct element */
    pointer-events: none;
}

#start-label {
    box-sizing: border-box;
    max-width: 320px;
    width: calc(100% - 48px);
    padding: 24px 20px;
    margin-top: -33px;
    color: black;
    background-color: white;
    font-weight: bold;
    font-size: 14px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: center;
}

.rounded-element {
    position: absolute;
    display: none;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
    border: none;
}

.unselectable {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    /* Chrome/Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+ */
}

.mdc-list {
    --mdc-theme-text-primary-on-background: rgba(0, 0, 0, 0.6);
    --mdc-theme-primary: black;
}

.mdc-list-item {
    height: 54px;
    font-size: 16px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.mdc-list-item--selected {
    font-weight: bold;
}

.mdc-list-group {
    --mdc-theme-background: white;
}

.mdc-list-group__subheader {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    font-stretch: condensed;
    margin-top: 32px;
    text-align: center;
}

#clips-list-group {
    display: none;
    position: absolute;
    width: 100%;
    max-height: calc(100% - 76px);
    min-height: 72px;
    left: 0;
    bottom: 0;
    pointer-events: auto;
    border-radius: 16px 16px 0px 0px;
    flex-direction: column;
}

#clips-list {
    overflow-y: auto;
}

#clips-list-header {
    text-transform: uppercase;
}

#groups-list-group {
    z-index: 1000;
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    pointer-events: auto;
    flex-direction: column;
    --mdc-theme-primary: black;
}

#groups-list-header {
    display: flex;
    margin-top: 18px;
    margin-bottom: 18px;
    align-items: center;
    justify-content: center;
}

#groups-list-header > img {
    max-height: 36px;
    max-width: calc(100% - 120px);
    padding-top: 14px;
    padding-bottom: 14px;
}

#groups-list {
    overflow-y: auto;
    margin-right: 6px;
    margin-left: 6px;
}

.mdc-image-list {
    --mdc-theme-text-primary-on-background: rgba(0, 0, 0, 0.6);
    --mdc-theme-primary: rgba(0, 0, 0, 0.6);
}

.mdc-image-list__item {
    margin: 12px 6px;
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 
                0px 2px 2px 0px rgba(0, 0, 0, 0.14),
                0px 1px 5px 0px rgba(0,0,0,.12);
    border-radius: 16px;
}

@media (orientation: landscape) {
    .mdc-image-list__item {
        width: calc(25% - 12px);
    }
}

@media (orientation: portrait) {
    .mdc-image-list__item {
        width: calc(50% - 12px);
    }
}

.mdc-image-list__item .mdc-image-list__image {
    border-radius: 16px 16px 0px 0px;
    object-fit: cover;
}

.mdc-image-list .mdc-list-item {
    padding: 0px 8px;
    height: 36px;
}

.mdc-image-list .mdc-list-item--selected {
    font-weight: normal;
}

.groups-list-item-overlay {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 16px;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.24);
}

.groups-list-item-check {
    display: flex;
    position: absolute;
    width: 24px;
    height: 24px;
    top: 0;
    right: 0;
    margin: 8px;
    pointer-events: none;
}

#groups-list-close-button {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
}

#button-container {
    position: absolute;
    display: flex;
    width: 100%;
    left: 0;
    bottom: 0;
}

#button-container .mdc-button__label {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.mdc-button {
    --mdc-shape-small: 25px;
    font-size: 16px;
}

.mdc-button .mdc-button__ripple {
    -webkit-mask-image: radial-gradient(white, black);
}

.mdc-button .mdc-button__label {
    text-transform: capitalize;
}

#shop-now-button {
    display: none;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 55%;
    height: 66px;
    pointer-events: auto;
    border-radius: var(--mdc-shape-small) 0px 0px 0px;
    font-weight: bold;
    --mdc-theme-primary: black;
    --mdc-theme-on-primary: white;
}

#shop-now-button .mdc-button__ripple {
    border-radius: var(--mdc-shape-small) 0px 0px 0px;
}

#shop-now-button .mdc-button__label {
    margin-bottom: 4px;
}

#left-buttons-container {
    display: flex;
    flex-direction: column;
    width: 45%;
    bottom: 0;
    left: 0;
}

#bottom-container {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 100%;
    bottom: 0;
    left: 0;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, .2));
    margin-top: 40px;
}

#external-branding-container {
    display: none;
    flex-direction: row-reverse;
    width: 100%;
    height: 50px;
}

#external-branding-image {
    width: 50px;
    height: 50px;
    margin: 0px 18px;
    border-radius: 25px;
}

#video-control-container {
    display: none;
    flex-direction: row;
    border-width: 2px;
    width: 100%;
    height: 40px;
    margin-top: 20px;
}

#video-control-container > * {
    margin: 0px 12.5px;
}

#video-control-container > *:first-child {
    margin-left: 25px;
}

#video-control-container > *:last-child {
    margin-right: 25px;
}

#play-pause-button {
    display: flex;
    width: 40px;
    height: 40px;
    min-width: 40px;
    pointer-events: auto;
    background-color: transparent;
    --mdc-theme-primary: white;
    --mdc-theme-on-primary: black;
}

#play-pause-button .mdc-button__icon {
    margin: 0;
    width: 24px;
    height: 24px;
}

.top-bar-button {
    display: none;
    position: absolute;
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    top: 0;
    pointer-events: auto;
    --mdc-theme-primary: black;
}
     
.top-bar-button .mdc-button__icon {
    margin: 0;
    width: 24px;
    height: 24px;
}

#volume-button {
    display: flex;
    width: 40px;
    height: 40px;
    min-width: 40px;
    pointer-events: auto;
    --mdc-theme-primary: white;
    --mdc-theme-on-primary: black;
}

#volume-button .mdc-button__icon {
    margin: 0;
    width: 24px;
    height: 24px;
}

#progress-bar-container {
    display: flex;
    position: relative;
    box-sizing: border-box;
    width: 100%;
}

#progress-bar-background {
    position: absolute;
    width: 100%;
    height: 3px;
    top: calc(50% - 1.5px);
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 2px;
}

#progress-bar-foreground {
    position: absolute;
    width: 0%;
    height: 3px;
    top: calc(50% - 1.5px);
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 2px;
}

#video-time-label {
    display: flex;
    position: relative;
    top: calc(50% - 9.5px);
    width: 36px;
    height: 19px;
    color: white;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 19px;
}

#clips-list-button {
    display: none;
    width: 40%;
    height: 58px;
    pointer-events: auto;
    margin: 8px;
    padding-left: 14px;
    padding-right: 14px;
    --mdc-theme-primary: white;
    --mdc-theme-on-primary: black;
}


#switch-group-button {
    left: 0;
}

#freContainer {
    display: none;
    background-color: white;
    max-width: 320px;
    width: calc(100% - 48px);
    height: 270px;
    margin-top: -33px;
    padding: 0;
    --mdc-theme-primary: black;
}

.freCornerButton {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0;
}

#freCloseButton {
    right: unset;
    left: 0;
}

#freInfoMenuAnchor {
    position: absolute;
    display: flex;
    top: 0;
    right: 0;
    margin-top: 2px;
    margin-right: 2px;
    pointer-events: auto;
}

.frePage {
    display: none;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.freContent {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0px 30px 50px 30px;

}

.freTitle {
    font-family: Futura, "Trebuchet MS", Arial, sans-serif;
    font-size: 26px;
    font-weight: 700;
    font-stretch: condensed;
    color: black;
    line-height: 100px;
    vertical-align: middle;
}

.freBody {
    font-size: 16px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: black;
}

#fre0 {
    text-align: center;
}

#fre1, #fre2 {
    text-align: left;
}

#fre1 .freBody, #fre2 .freBody {
    padding-left: 10px;
    margin: 0px;
}

.freCatalogImage {
    filter: invert(1);
    height: 12px;
    margin-bottom: -2px;
    margin-left: -2px;
    margin-right: -2px;
}

.freDetailImage {
    filter: invert(1);
    height: 14px;
    margin-bottom: -4px;
    margin-left: -4px;
    margin-right: -4px;
}

#freDetailBubble {
    display: none;
    position: absolute;
    top: 90px;
    right: 60px;
    flex-direction: row-reverse;
    align-items: center;
}

#freDetailBubbleArrow {
    width: 20px;
    height: 18px;
    margin-bottom: -1px;
    margin-left: -6px;
    transform: rotate(90deg);
}

#freDetailBubbleWrapper {
    display: flex;
    position: relative;
    background-color: white;
    padding: 14px;
    --mdc-theme-primary: black;
}

#freDetailBubblePage {
    display: flex;
}

.text-button {
    height: 50px;
    pointer-events: auto;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
}

#progress-circle {
    display: none;
    margin-top: -66px;
}

#detail-view-container {
    display: none;
    background-color: white;
    max-width: 600px;
    max-height: 600px;
    padding: 0;
    overflow: hidden;
    --mdc-theme-primary: black;
    -webkit-mask-image: radial-gradient(white, black);
}

@media (orientation: landscape) {
    #detail-view-container {
        /* --detail-vh-px is set in detail-view.js */
        width: calc(var(--detail-vh-px) - 48px);
        height: calc(var(--detail-vh-px) - 48px);
    }
}

@media (orientation: portrait) {
    #detail-view-container {
        width: calc(100vw - 48px);
        height: calc(100vw - 48px);
        margin-top: -33px;
    }
}

#detail-view-container iframe {
    width: 100%;
    height: 100%;
    pointer-events: auto;
    border: none; 
}

#detail-close-button {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;   
}

#detail-instructions {
    position: absolute;
    width: 100%;
    margin-bottom: 12px;
    bottom: 0;
    right: 0;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
}

#buttons-menu-container {
    box-sizing: border-box;
    position: absolute;
    display: none;
    flex-direction: column;
    top: 25px;
    right: 15px;
    width: 48px;
    height: auto;
    background-color: rgba(128, 128, 128, .25);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    justify-content: center;
    align-items: center;
}

#buttons-menu-container > button {
    display: none;
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    top: 0;
    pointer-events: auto;
    --mdc-theme-primary: black;
}

#buttons-menu-container > button .mdc-button__icon {
    margin: 0;
    width: 24px;
    height: 24px;
}

#live-event-recording-indicator-container {
    position: absolute;
    display: none;
    top: 25px;
    box-sizing: border-box;
    width: 100%;
    height: 32px;
    justify-content: center;
}

#live-event-recording-indicator {
    box-sizing: border-box;
    width: 235px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0.9;
    border-radius: 8px;
    text-align: center;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 10px;
    line-height: 32px;
    color: rgba(255, 255, 255, .87);
}

#logo-container {
    display: none;
    width: 100%;
    height: 50px;
    justify-content: center;
    align-items: center;
}

#forma-logo {
    height: 24px;
    margin-top: -15px;
}

#cookie-message-view {
    position: absolute;
    display: none;
    align-items: center;
    flex-direction: column;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
}

#cookie-message-wrapper {
    position: absolute;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
    bottom: 0;
    max-width: calc(100% - 32px);
    margin-bottom: 16px;
    border-radius: 16px;
    background: rgb(42, 157, 143);
}

#cookie-message-label {
    font-size: 14pt;
    color: white;
    margin: 16px;
    text-align: center;
}

#cookie-message-label a {
    color: white;
}

#cookie-message-button {
    margin-bottom: 16px;
    --mdc-theme-primary: white;
    --mdc-theme-on-primary: black;
}

#cookie-message-view button > * {
    /* Disable clicks on children of our buttons to ensure
       clicks get attributed to the correct element */
    pointer-events: none;
}