/* ======================================================================*
 @copyright Copyright (c) 2022 Xperi Corporation / DTS, Inc.

 DTS, Inc.
 5220 Las Virgenes Road
 Calabasas, CA 91302  USA

 CONFIDENTIAL: CONTAINS CONFIDENTIAL PROPRIETARY INFORMATION OWNED BY
 DTS, INC. AND/OR ITS AFFILIATES ("DTS"), INCLUDING BUT NOT LIMITED TO
 TRADE SECRETS, KNOW-HOW, TECHNICAL AND BUSINESS INFORMATION. USE,
 DISCLOSURE OR DISTRIBUTION OF THE SOFTWARE IN ANY FORM IS LIMITED TO
 SPECIFICALLY AUTHORIZED LICENSEES OF DTS.  ANY UNAUTHORIZED
 DISCLOSURE IS A VIOLATION OF STATE, FEDERAL, AND INTERNATIONAL LAWS.
 BOTH CIVIL AND CRIMINAL PENALTIES APPLY.

 DO NOT DUPLICATE. COPYRIGHT 2022, DTS, INC. ALL RIGHTS RESERVED.
 UNAUTHORIZED DUPLICATION IS A VIOLATION OF STATE, FEDERAL AND
 INTERNATIONAL LAWS.

 ALGORITHMS, DATA STRUCTURES AND METHODS CONTAINED IN THIS SOFTWARE
 MAY BE PROTECTED BY ONE OR MORE PATENTS OR PATENT APPLICATIONS.
 UNLESS OTHERWISE PROVIDED UNDER THE TERMS OF A FULLY-EXECUTED WRITTEN
 AGREEMENT BY AND BETWEEN THE RECIPIENT HEREOF AND DTS, THE FOLLOWING
 TERMS SHALL APPLY TO ANY USE OF THE SOFTWARE (THE "PRODUCT") AND, AS
 APPLICABLE, ANY RELATED DOCUMENTATION:  (i) ANY USE OF THE PRODUCT
 AND ANY RELATED DOCUMENTATION IS AT THE RECIPIENT'S SOLE RISK:
 (ii) THE PRODUCT AND ANY RELATED DOCUMENTATION ARE PROVIDED "AS IS"
 AND WITHOUT WARRANTY OF ANY KIND AND DTS EXPRESSLY DISCLAIMS ALL
 WARRANTIES, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY
 IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
 PURPOSE, REGARDLESS OF WHETHER DTS KNOWS OR HAS REASON TO KNOW OF THE
 USER'S PARTICULAR NEEDS; (iii) DTS DOES NOT WARRANT THAT THE PRODUCT
 OR ANY RELATED DOCUMENTATION WILL MEET USER'S REQUIREMENTS, OR THAT
 DEFECTS IN THE PRODUCT OR ANY RELATED DOCUMENTATION WILL BE
 CORRECTED; (iv) DTS DOES NOT WARRANT THAT THE OPERATION OF ANY
 HARDWARE OR SOFTWARE ASSOCIATED WITH THIS DOCUMENT WILL BE
 UNINTERRUPTED OR ERROR-FREE; AND (v) UNDER NO CIRCUMSTANCES,
 INCLUDING NEGLIGENCE, SHALL DTS OR THE DIRECTORS, OFFICERS, EMPLOYEES,
 OR AGENTS OF DTS, BE LIABLE TO USER FOR ANY INCIDENTAL, INDIRECT,
 SPECIAL, OR CONSEQUENTIAL DAMAGES (INCLUDING BUT NOT LIMITED TO
 DAMAGES FOR LOSS OF BUSINESS PROFITS, BUSINESS INTERRUPTION, AND LOSS
 OF BUSINESS INFORMATION) ARISING OUT OF THE USE, MISUSE, OR INABILITY
 TO USE THE PRODUCT OR ANY RELATED DOCUMENTATION.
 *====================================================================== */

/* -------------------- */
/*  Constant Variables  */
/* -------------------- */

/* Colour Variables  */
:root {
    /* Color palette */
    --color-transparent: #00000000; /* transparent */
    --color-white: #ffffff; /* white */
    --color-black: #000000; /* black */
    --color-black-alpha-40: #00000065; /* black (40% alpha) */
    --color-black-alpha-50: #00000080; /* black (50% alpha) */
    --color-black-alpha-20: #00000032; /* black (20% alpha) */
    --color-gray-android-bg: #333335; /* android gray background */
    --color-gray-android-button-bg: #5a595b; /* android gray button background */
    --color-orange-dts-light: #f0ab00; /* DTS light orange */
    --color-orange-dts-dark: #dd4814; /* DTS dark orange */
    --color-orange-dts-dark-alpha-30: #dd48144c; /* DTS dark orange (30% alpha) */
    --color-orange-dts-dark-alpha-60: #dd481499; /* DTS dark orange (60% alpha) */

    /* Text */
    --color-text: var(--color-white);
    /* Backgrounds */
    --color-nav-background: var(--color-black);
    --color-content-background: var(--color-gray-android-bg);
    --color-modal-background: var(--color-black-alpha-40);
    --color-modal-message-background: #2d2926;
    --color-device-info-text-view-background: var(--color-black-alpha-20);
    /* Buttons */
    --color-nav-button-normal: var(--color-transparent);
    --color-nav-button-hover: var(--color-orange-dts-dark-alpha-30);
    --color-nav-button-selected: var(--color-orange-dts-dark-alpha-60);
    --color-nav-button-selected-focus: var(--color-orange-dts-dark);
    --color-action-button-normal: var(--color-gray-android-button-bg);
    --color-action-button-hover: #757575; /* lighter shade of --color-action-button-normal */
    --color-action-button-active: var(--color-orange-dts-dark);
    --color-action-button-focus: var(--color-orange-dts-dark);
    --color-modal-button: var(--color-orange-dts-dark);
}

/* ---------------------- */
/*  Responsive Variables  */
/* ---------------------- */

/* If the screen width is SD TV (640px by 480px) or less... */
@media only screen and (max-width: 640px) {
    :root { /* Target screen width: 640px (scale: 0.5) */
        --target-screen-width: 640;
    }
}
/* If the screen width is greater than SD TV (640px by 480px)
   and the screen with is lower than HD TV (1280px by 720px)...
   (Target 960px: halfway between SD TV and HD TV) */
@media only screen and (min-width: 641px) and (max-width: 1279px) {
    :root { /* Target screen width: 960px (scale: 0.25) */
        --target-screen-width: 960;
    }
}
/* If the screen width is HD TV (1280px by 720px) or more... */
@media only screen and (min-width: 1280px) {
    :root { /* Target screen width: 1280px (scale: 0.33) */
        --target-screen-width: 1280;
    }
}
/* If the screen width is 1600px or more...
   (halfway between HD TV (1280px by 720px) and FHD TV (1920px by 1080px)) */
@media only screen and (min-width: 1600px) {
    :root { /* Target screen width: 1600px (scale: 0.42) */
        --target-screen-width: 1600;
    }
}
/* If the screen width is for a FHD TV (1920px by 1080px) or more... */
@media only screen and (min-width: 1920px) {
    :root { /* Target screen width: 1920px (scale: 0.5) */
        --target-screen-width: 1920;
    }
}
/* If the screen width is 2880px or more...
   (halfway between FHD TV (1920px by 1080px) and 4k TV (3840px by 2160px)) */
@media only screen and (min-width: 2880px) {
    :root { /* Target screen width: 2880px (scale: 0.75) */
        --target-screen-width: 2880;
    }
}
/* If the screen width is for a 4k TV (3840px by 2160px) or more... */
@media only screen and (min-width: 3840px) {
    :root { /* Target screen width: 3840px (scale: 1) */
        --target-screen-width: 3840;
    }
}

/* Variables calculated from responsive variables */
:root {
    /* Calculate scale of currently targeted screen width relative
       to the ideal screen width, which is for a 4k TV (3840px wide) */

    --ideal-screen-width: 3840;
    --scale: calc( var(--target-screen-width) / var(--ideal-screen-width) );

    /* Scale the size values for the currently targeted screen width */

    /* Fonts */
    --font-size-small: calc( var(--scale) * 50px );
    --font-size-medium: calc( var(--scale) * 60px );
    --font-size-large: calc( var(--scale) * 75px );
    /* Logo Image */
    --logo-img-height: calc( var(--scale) * 150px );
    /* Margins and Padding */
    --margin-and-padding-medium: calc( var(--scale) * 60px );
    /* Borders and Shadows */
    --border-and-shadow: calc( var(--scale) * 10px );
    /* Device Info Div */
    --expected-device-info-button-height: calc( var(--scale) * 140px ); /* height + margins (approx) */

    /* Note: the following values are derived from the scaled values */

    /* Heading Div */
    --heading-div-min-height: calc(var(--logo-img-height) * 2);
    /* Margins */
    --margin-medium: var(--margin-and-padding-medium);
    --margin-small: calc(var(--margin-medium) / 2);
    --margin-very-small: calc(var(--margin-small) / 2);
    /* Padding */
    --padding-medium: var(--margin-and-padding-medium);
    --padding-large: calc(var(--padding-medium) * 2);
    --padding-small: calc(var(--padding-medium) / 2);
    /* Borders and Shadows */
    --border-radius: var(--border-and-shadow);
    --box-shadow-v-offset: var(--border-and-shadow);
    --box-shadow-blur: var(--border-and-shadow);
}

/* --------- */
/*  Classes  */
/* --------- */

/* Universal (affects all elements in page) */
* {
    /* Zero the default margin and padding from browser */
    margin: 0;
    padding: 0;

    /* Required to add padding in the body */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Set page height to fill browser */
html, body {
    height: 100%;
}

/* Body */
body {
    /* Fonts & text formatting */
    color: var(--color-text);
    font-family: 'Arial', sans-serif;
    font-size: var(--font-size-small);
    font-weight: normal;
    text-align: center;
    white-space: nowrap; /* don't wrap text */
}

/* Headings */
h1 {
    font-size: var(--font-size-large);
}
h2 {
    font-size: var(--font-size-medium);
}

/* Links */
a {
    color: var(--color-text);
    font-weight: bold;
    text-decoration: none; /* remove underline */
}

/* Flex Container */
/* Allows children to be set as columns with defined (%) widths */
.flex-container {
    height: 100%; /* fill parent (body) height */
    overflow: auto;

    /* Flex */
    /* TODO: remove comments, which were taken from https://css-tricks.com/using-flexbox/ */
    display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;      /* OLD - Firefox 19- (doesn't work very well) */
    display: -ms-flexbox;   /* TWEENER - IE 10 */
    display: -webkit-flex;  /* NEW - Chrome */
    display: flex;          /* NEW, Spec - Opera 12.1, Firefox 20+ */    
}

/* Navigation Column */
/* Appears on the left side of the screen (first column).
   Contains the DTS logo and the navigation buttons. */
.nav-column {
    background-color: var(--color-nav-background);
    overflow: scroll;
    height: 100%;    

    /* Flex - set as first column */
    /* TODO: remove comments, which were taken from https://css-tricks.com/using-flexbox/ */
    -webkit-box-ordinal-group: 1;   /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-ordinal-group: 1;      /* OLD - Firefox 19- */
    -ms-flex-order: 1;              /* TWEENER - IE 10 */
    -webkit-order: 1;               /* NEW - Chrome */
    order: 1;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
    
    width: 25%;                     /* No flex here, other cols take up remaining space */
    
    -moz-box-flex: 1;               /* Without this, Firefox 19- expands to widest paragraph, overrides width */
}

/* Content Column */
/* Appears on the right side of the screen (second column).
   Contains the test streams / settings / device info / about info. */
.content-column {
    background-color: var(--color-content-background);
    overflow: scroll;
    padding-top: 0;
    padding-right: var(--padding-large);
    padding-bottom: 0;
    padding-left: var(--padding-large);

    /* Flex - set as second column */
    /* TODO: remove comments, which were taken from https://css-tricks.com/using-flexbox/ */
    -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
    -ms-flex-order: 2;              /* TWEENER - IE 10 */
    -webkit-order: 2;               /* NEW - Chrome */
    order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */

    -webkit-box-flex: 1;            /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;               /* OLD - Firefox 19- */
    width: 75%;                     /* For old syntax, otherwise collapses. */
    -webkit-flex: 1;                /* Chrome */
    -ms-flex: 1;                    /* IE 10 */
    flex: 1;                        /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

/* Heading Div */
/* Used in both the navigation column and the content column.
   Contains the DTS logo in the navigation column.
   Contains the title in the content column.
   Used so the top of any content below this div is at the same position
   in either column (e.g. nav buttons, test streams, device info text). */
.heading-div {
    height: 20%; /* Set heading div height to 20% of parent */
    min-height: var(--heading-div-min-height);

    /* Flex - centers children in div */
    /* TODO: remove comments, which were taken from https://css-tricks.com/using-flexbox/ */
    display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;      /* OLD - Firefox 19- (doesn't work very well) */
    display: -ms-flexbox;   /* TWEENER - IE 10 */
    display: -webkit-flex;  /* NEW - Chrome */
    display: flex;          /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
    align-items: center; /* center children vertically */
    justify-content: center; /* center children horizontally */
}

/* Content Div */
.content-div {
    padding-bottom: var(--padding-large);
}

/* Device Information Text Div */
.device-info-text-div {
    padding: var(--padding-medium);
    width: auto;
    background-color: var(--color-device-info-text-view-background);
    border-radius: var(--border-radius);
    border: none;
    outline: none;
    overflow-x: auto;
    overflow-y: auto;
    text-align: justify;
    font-family: monospace;
    /* Properties below force text to wrap to avoid horizontal scroll bar */
    word-wrap: break-word;
    white-space: pre-wrap;
    word-break: break-word;
    /* Calculate height so text box fills remainder of content view
       (content view height is 80% of the view port height) */
    height: calc( 80vh - var(--margin-medium) - var(--expected-device-info-button-height) - var(--padding-large) );
    /* SVT-555: TODO */
    scroll-behavior: smooth;
}
.device-info-text-div:focus {
    outline: 1px solid var(--color-orange-dts-dark);
}

/* Device Information Button Div */
/* Adds padding between device info text and button */
.device-info-button-div {
    margin-top: var(--margin-medium);
}

/* About Div */
.about-div {
    text-align: left;
}

/* Settings Div */
.settings-div {
    text-align: left;
}

/* Device Information Text Div */
.category-list-div {
    width: auto;
    height: auto;
    scroll-behavior: smooth;
    flex-direction: column;
}

.load-additional-test-content-container {
    flex-direction: column;
    align-items: center;
    display: flex;
    margin-top: var(--margin-medium);
    padding: var(--padding-medium);
    padding-bottom: var(--padding-small);
    background-color: var(--color-device-info-text-view-background);
}

/* Logo Img */
.logo-img {
    width: auto;
    height: var(--logo-img-height);
}

/* Modal Message Box */
.modal { /* Background */
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 3; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: var(--color-black); /* Fallback color */
    background-color: var(--color-modal-background);
}
.modal-content { /* Message Box */
    background-color: var(--color-modal-message-background);
    border: 1px solid var(--color-orange-dts-dark);
    border-radius: var(--border-radius);
    width: 40%;
    height: auto;
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    padding: var(--padding-medium);
    text-align: center;
    color: var(--color-text);
    /* Properties below force text to wrap so we
       do not exceed the bounds of the message box */
    word-wrap: break-word;
    white-space: normal;
    word-break: break-word;
}
.modal-body { /* Content body */
    margin-top: var(--margin-medium);
}

/* Flyout */
.flyout-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right:0;
    bottom:0;
    width: 100%;
    height: 100%;
    background-color: var(--color-black);
    opacity: 0.5;
    z-index: 1;
}

.flyout {
    position: absolute;
    padding: var(--padding-medium);
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    max-height: 75%;
    overflow: auto; /* Enable scroll if needed */
    background-color: var(--color-gray-android-bg);
    border-radius: var(--border-radius);
    box-shadow: 0 var(--box-shadow-v-offset) var(--box-shadow-blur) 0 var(--color-black-alpha-50);
    text-align: left;
}

.flyout-title {
    font-weight: bold;
    text-align: center;
    margin-bottom: var(--margin-medium);
}

.flyout-field {
    margin-bottom: var(--margin-medium);
}

.flyout-field-label {
    margin-bottom: var(--margin-small);
    margin-right: var(--margin-very-small);
}

.flyout-disabled {
    color: gray;
    opacity: 0.5;
    cursor: not-allowed;
}

.flyout-input {
    background-color: transparent;
    max-width: 100%; /* Restrict the width to the container's width */
    width:100%;
    font-size: var(--font-size-small);
    border-width: 0;
    color: var(--color-text);
    border-width: 0 0 1px 0;
    border-color: var(--color-gray-android-button-bg);
    outline: 0;
}
.flyout-input:focus {
    border-color: var(--color-orange-dts-dark);
}
.flyout-input:disabled {
    color: gray;
    opacity: 0.5;
    cursor: not-allowed;
}

.flyout-radio-container {
    display: inline-flex;
    align-items: center;
    width: auto;
    margin-right: var(--margin-medium);
}

.flyout-radio {
    width: var(--font-size-medium);
    height: var(--font-size-medium);
    accent-color: var(--color-orange-dts-dark);
}
.flyout-radio:focus {
    outline-style: auto;
    outline-color: var(--color-orange-dts-dark);
}
.flyout-radio:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.flyout-radio-label {
    vertical-align: middle;
    padding-left: var(--margin-small);
    padding-right: var(--margin-small);
    font-size: var(--font-size-small);
    justify-content: left;
    align-items: center;
    line-height: 14px
}
.flyout-radio-label.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.flyout-dismiss-icon {
    cursor: default;
    font-size: var(--font-size-large);
    width: var(--font-size-large);
    position: absolute;
    top: var(--margin-small);
    right: var(--margin-small);
    text-align: center;
}
.flyout-dismiss-icon:focus {
    outline-style: auto;
    outline-color: var(--color-orange-dts-dark);
    color: var(--color-orange-dts-dark);
}

/* Style the "Choose File" button */
input[type="file"]::-webkit-file-upload-button {
    /* from dts-button */
    border: none;
    color: var(--color-text);
    text-align: center;
    text-decoration: none;
    transition-duration: 0.4s;
    /* from action-button */
    border-radius: var(--border-radius);
    background-color: var(--color-action-button-normal);
    /* new */
    font-size: var(--font-size-small);
    line-height: 1.5;
    margin-right: var(--padding-small);
    padding-left: var(--padding-medium);
    padding-right: var(--padding-medium);
}
input[type="file"]::-webkit-file-upload-button:hover {
    background-color: var(--color-action-button-hover);
}
input[type="file"]::-webkit-file-upload-button:focus {
    background-color: var(--color-action-button-active);
}
/* TODO: disabled css styles are not being picked up by Choose file button */
input[type="file"]::-webkit-file-upload-button:disabled {
    pointer-events: none; /* prevent the hover state on mouseover */
    /* cursor: not-allowed;  /* Set cursor to indicate not-allowed */
}
/* Style the "No file selected" text */
.flyout-file-input {
    width: 100%;
    font-size: var(--font-size-small);
}
.flyout-file-input:focus {
    outline-style: auto;
    outline-color: var(--color-orange-dts-dark);
}

/* DTS Buttons */
/* Used by all buttons on the page. */
.dts-button {
    border: none;
    color: var(--color-text);
    font-size: var(--font-size-small);
    text-align: center;
    text-decoration: none;
    margin-bottom: var(--margin-small);
    width: 100%;
    line-height: 2.8;
    transition-duration: 0.4s;
    
}
.dts-button:focus {
    outline: none; /* remove focus border */
}

/* Nav Buttons */
/* Used by the navigation buttons in the navigation column. */
.nav-button {
    border-radius: 0;
    background-color: var(--color-nav-button-normal);
}
.nav-button:hover {
    background-color: var(--color-nav-button-hover);
}

.nav-button-selected, .nav-button-selected:hover {
    background-color: var(--color-nav-button-selected);
}
.nav-button-selected:focus {
    background-color: var(--color-nav-button-selected-focus);
}

/* Action Buttons */
/* Used by all buttons in the content column (e.g. test stream buttons). */
.action-button {
    border-radius: var(--border-radius);
    background-color: var(--color-action-button-normal);
    box-shadow: 0 var(--box-shadow-v-offset) var(--box-shadow-blur) 0 var(--color-black-alpha-50);
}
.action-button:hover {
    background-color: var(--color-action-button-hover);
}
.action-button:focus {
    background-color: var(--color-action-button-active);
}
.action-button:active {
    background-color: var(--color-action-button-focus);
    transform: translateY(1px);
    transition-duration: 0.1s;
    box-shadow: 0 0 0 0 var(--color-transparent);
}
.action-button:disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Device Info Button */
.device-info-button {
    margin-bottom: 0;
}

.grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* Modal Message Box Button */
.modal-button { /* Ok Button */
    margin-bottom: 0;
    width: auto;
    line-height: 1.8;
    background-color: var(--color-modal-button);
    border-radius: var(--border-radius);
    box-shadow: 0 var(--box-shadow-v-offset) var(--box-shadow-blur) 0 var(--color-black-alpha-50);
    margin-top: var(--margin-medium);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--padding-medium);
    padding-right: var(--padding-medium);
}
.modal-button:active {
    transform: translateY(1px);
    transition-duration: 0.1s;
    box-shadow: 0 0 0 0 var(--color-transparent);
}

/* ShakaPlayer */
/* Put the UI controls on the left hand side of the page */
.shaka-controls-button-panel {
    justify-content: flex-start;
}