/* 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;
    --home-team-color: white;
    --away-team-color: white;
}

/** 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.Default, .leagueTheme.Default {
    background-image: url("img/background.png");
    background-size: cover;
    overflow: hidden;
}

.soccerTheme[GameType="Darts"] {
    background-image: url("game/dartsbet/bg/betfred.jpg");
    background-size: cover;
    overflow: hidden;
}

.soccerTheme[GameType="Tennis"] {
    background-image: url("game/tennisbet/BG.png") !important;
    background-size: cover;
    overflow: hidden;
}

.soccerTheme[GameType="Darts"] {
    background-image: url("game/dartsbet/bg/betfred.jpg") !important;
    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", 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, .leagueTheme.SISAL {
    background-image: url("img/MicroGameBackground.jpg"); /*Need to add MicroGame background here*/
    font-family: "Oswald Regular", sans-serif; 
}

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

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

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

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

.soccerTheme.SNAI {
    background: black;
    background-size: cover;
    background-blend-mode: hard-light;
    font-family: "Oswald Regular", sans-serif;
    background-position: center;
    background-repeat:no-repeat;
}

.soccerTheme.SNAI[Is7Squadre="True"] {
    background: url('img/SNAI-SquadreBackgroundNotClean.png'), linear-gradient(to right, var(--home-team-color) 20%, var(--away-team-color) 70%);
    background-size: cover;
}

.soccerTheme.Eurobet,
.leagueTheme.Eurobet {
    background-image: url(img/EurobetBackground.png);
    background-size: cover;
    overflow: hidden;
    background-color: rgba(11, 28, 53, 0.56);
    background-blend-mode: color;
    background-position: center;
    font-family: "BarlowSemiCondensed", sans-serif;
}