:root {
    /* These needs to be changed to SHL colors */
    --primary-color: #28313e;
    --theme-color: #28313e;
    --theme-color-light: #2c3037;
    --theme-color-light-opacity: #2c30371a;
    --theme-color-dark: #151a21;
    --theme-color-x-light: #43474d;
    --theme-color-x-dark: #12171d;
    --theme-color-comp:  #2c3f5b;
    --theme-color-comp-light: #41526b;
    --theme-color-comp-dark: #273851;
    --theme-color-comp-x-light: #56657b;
    --theme-color-comp-x-dark: #233248;
    --merch-shirt-color: var(--theme-color);
    --merch-cart-color: var(--theme-color-dark);
    --font-family: 'SocialGothicForSHL';
    --font-family-second: 'Roboto', sans-serif !important;
    --alternative-button-color: #000;
    --game-header-title-color: #000;
    --card-border-color: #3e8dfb;
    /* These needs to be changed to SHL colors */

    /* JS Site-theme variables */

    /* TopBar */
    --top-bar-background: #151A21;

    /* News */
    --news-card-background: var(--theme-color);
    --news-top-background: var(--theme-color);

    /* Navbar */
    --navbar-expansion-body-background: #151A21;
    --navbar-expansion-panel-background: #151A21;
    --navbar-hover-background: #151A21;
    --navbar-menu-content-border-color: #151A21;
    --navbar-mega-menu-background: #151A21;
    --navbar-mega-menu-children-background: #151A21;
    --navbar-gradient-background: linear-gradient(90deg, var(--theme-color) 0%, var(--theme-color-comp) 100%);

    /* Footer */
    --footer-expansion-card-background: #02291c;
    --footer-gradient-background: linear-gradient(90deg, var(--theme-color) 0%, var(--theme-color-comp) 100%) !important;

    /* Settings */
    --settings-hover-background: #001e14;

    /* Packages Carousel */
    --packages-carousel-background: linear-gradient(109.61deg, var(--primary-x-light) 0%, var(--theme-color-dark) 76.35%, var(--alternative-color1) 100%);

    /* Tickster */
    --card-headline-color: var(--alternative-color1);
    --ticket-more-link-color: var(--alternative-color1);

    /* game-header && gamecenterslide */
    --game-header-background: linear-gradient(122.32deg, var(--theme-color-light) 0%, var(--alternative-color4) 100%);
    --game-schedule-button-background: linear-gradient(124.25deg, var(--primary-x-light) 0%, var(--alternative-color1) 76.35%, var(--alternative-color1) 100%);

    /* Account Component/Page */
    --create-account-background: var(--primary-x-light);
    --return-to-hover-background: var(--primary-x-light);
    --primary-x-light: #535a64;
    /* other alternative colors */
    --alternative-color1: #242c37;
    --alternative-color4: #14181e;

    /* JS Site-theme variables */
}

.--color {
    color: var(--theme-color) !important;
}

a {
    color: var(--theme-color);
}

.theme-family {
    font-family: var(--font-family) !important;
}
.theme-family-second {
    font-family: var(--font-family-second) !important;
}
.env-bg {
    color: #fff !important;
    background-color: var(--theme-color-dark) !important;
}

.gradientBackground {
    background: linear-gradient(109.61deg, var(--theme-color-dark) 0%, var(--theme-color-comp) 100%) !important;
}

/*Game header component*/
.game-header-button--background {
    background: linear-gradient(124.25deg, #18906B 0%, #033221 76.35%, #02291C 100%);
}

/* Navbar height */
.menu-height-expand {
    height: 105px !important;
}

/* logo position in navbar */
.toolbar-content-container .v-image {
    top: 0;
    max-width: 60px;
    width: 60px;
    min-width: 60px;
}
@media only screen and (min-width: 960px) {
    .toolbar-content-container {
        margin-top: -15px !important;
    }
    .toolbar-content-container .v-image {
        top: 0;
        max-width: 105px;
        min-width: 105px;
        width: 105px;
    }
}

.sponsor-bg {
    background: #151A21;
}

.rect-before {
    background-color: #3E8DFB;
}

.gamebar-header-text {
    font-family: var(--font-family) !important;
}

.mega-menu-content,
.mega-menu-column a,
.mega-menu-btn-desktop,
.search-btn,
.single-news-card-big .card-paragraph,
.news-date,
.game-title, .game-date, .game-time,
.header-teamname,
.footer-column a,
.gamebar-main-text {
    font-family: var(--font-family-second) !important;
}

.news-title {
    font-size: 2rem;
    font-weight: normal;
    line-height: 2.5rem;
    letter-spacing: 0.03rem;
    text-transform: uppercase;
}

.news-title.xs {
    font-size: 1.7rem;
    line-height: 2.3rem !important;
}

.section-header {
    font-size: 2.2rem !important;
    font-weight: normal !important;
    text-transform: uppercase !important;
}

.news-label {
    font-size: 0.8rem;
}

.expansion-footer-card {
    background: var(--theme-color-dark) !important;
}