/* Everything that would change the theme of the page */
:root {
    --primary-color: darkgray;
    --secondary-color: darkgray;
    --text-color: white;
    --text-color-alt: black;
    --text-color-headings: darkgrey;
    --clock-color: goldenrod;
    /** Backgrounds - First */
    --bg-color: black;
    --bg-color-step: white;
    /** Background - Alt */
    --bg-color-alt: #FEF1EE;
    --bg-color-alt-step: #FCE3DC;
    /** Lines & Borders */
    --line-color: #FFFFFF;
    --line-color-step: #85250A;
    /** the backdrop */
    --backdrop-color: #333333;
    --bg-market: #e8edf2;
    --preamble-header-top-background-left-gradient: rgba(255,255,255,0.1);
    --preamble-header-top-background-right-gradient: rgba(255,255,255,0.1);
    --preamble-header-middle-background-left-gradient: rgba(255,255,255,0.1);
    --preamble-header-middle-background-right-gradient: rgba(255,255,255,0.3);
}

/** Variables for z-index */
:root {
    --video-layer: 1;
    --graphics-layer: 5;
}

:root {
    /** Derivatives and Mixes */
    --bg-market-header-light: color-mix(in srgb, var(--line-color) 75%, white 25%);
    --bg-color-light: color-mix(in srgb, var(--bg-color) 75%, var(--bg-color-step) 25%);
    --bg-color-mid: color-mix(in srgb, var(--bg-color) 50%, var(--bg-color-step) 50%);
    --bg-color-dark: color-mix(in srgb, var(--bg-color) 75%, black 25%);
    --bg-color-light-alt: color-mix(in srgb, var(--bg-color-alt) 75%, white 25%);
    --bg-color-mid-alt: color-mix(in srgb, var(--bg-color-alt) 50%, var(--bg-color-step-alt) 50%);
    --bg-color-dark-alt: color-mix(in srgb, var(--bg-color-alt) 75%, black 25%);
    --bg-backdrop-color: color-mix(in srgb, var(--bg-color-alt) 10%, var(--backdrop-color) 90% );
    --backdrop-light-color: color-mix(in srgb, var(--backdrop-color) 95%, white 5%);
    --bg-linear-gradient-right: linear-gradient(to right, var(--bg-color), var(--bg-color-step));
    /** 
    --bg-color: #977307;
    --bg-color-step: color-mix(in srgb, var(--bg-color) 30%, var(--bg-color-alt) 70%);
    --bg-color-alt: #fbefc7;
    --bg-color-alt-step: color-mix(in srgb, var(--bg-color) 75%, var(--bg-color-alt) 25%);
    */
    /** Positioning */
    --main-top: 96px;
    --main-height: 884px;
    --margin-content: 40px;
    --market-table-height: calc( 64 * 9 + 32);
    --market-margin-left: 0px; /* Gap between AVB and table*/
    --market-margin-right: 75px; /* Gap between Table and League table*/
    --market-left-col-grid-margin: 420px; /*AVB Width*/
    --market-right-col-grid-margin: 332px; /*League Table width*/
    /** Derived Properties - NOTE, these may not update after variables set */
    --market-table-width: 1284px;
    --market-result-width: 1570px;
    --bg-gradient-default: linear-gradient(to bottom, var(--bg-color), 90%, var(--bg-color-step));
    --bg-alt-gradient-default: linear-gradient(to bottom, var(--bg-color-alt-step), 10%, var(--bg-color-alt));
    /* Preamble Header */
    --preamble-header-bottom-background-left-gradient: var(--bg-color);
    --preamble-header-bottom-background-right-gradient: var(--bg-color-alt);
    /* Disclaimer */
    --disclaimer-color: white;
    --disclaimer-text-size: 11px;
}

/** Customer Themes 

    * Set the Background Image (if note defafult)
    * Set the Font if not default
    * Anything else you are adding to the parent of the PRODUCT not the BODY

*/
.soccerTheme, .leagueTheme,
.soccerTheme.Belgium_Online_Game, .leagueTheme.Belgium_Online_Game,
.soccerTheme.Default, .leagueTheme.Default {
    background-image: url("img/background.png");
    background-size: cover;
    overflow: hidden;
}

.soccerTheme.Eurobet_Napoli, .leagueTheme.Eurobet_Napoli {
    background-size: cover;    
    font-family: "Open Sans", sans-serif;
    background: #00A7E1;
}

.soccerTheme.MicroGame, .leagueTheme.MicroGame {
    background-image: url("img/MicroGameBackground.jpg");
    background-size: cover;
    font-family: "League Gothic", "Lucida Console", sans-serif;
}

.soccerTheme.Vincitu, .leagueTheme.Vincitu {
    background-image: url("img/MicroGameBackground.jpg"); /*Need to add Vincitu background here*/
    font-family: "League Gothic", "Lucida Console", sans-serif;
}

.soccerTheme.SISAL_Turkish, .leagueTheme.SISAL_Turkish,
.soccerTheme.SISAL_English, .leagueTheme.SISAL_English,
.soccerTheme.SISAL, .leagueTheme.SISAL {
    background-image: url("img/MicroGameBackground.jpg"); /*Need to add MicroGame background here*/
    font-family: "Oswald Regular", sans-serif;
    font-weight: 400;
}

.soccerTheme.Goldbet, .leagueTheme.Goldbet
{
    background-image: url("img/goldbet-background.png");
    font-family: "Montserrat ", sans-serif;
    font-weight: 200;
}

.soccerTheme.GBO_SKS, .leagueTheme.GBO_SKS 
{
    background-image: url("img/background.png");
    font-family: "Montserrat ", sans-serif;
    font-weight: 200;
}

.soccerTheme.Modern, .leagueTheme.Modern {
    background-image: url("img/background.png");
    background-size: cover;
    font-family: "Gotham Narrow Medium", sans-serif;
    overflow: hidden;
}

.soccerTheme.SNAI, .leagueTheme.SNAI,
.soccerTheme.SNAI_7squadre, .leagueTheme.SNAI_7squadre {
    background-image: url("img/background.png");
    background-size: cover;
    font-family: "Oswald Regular", sans-serif;
    font-weight: 400;
}