/*!
 *  HOTSTATS THEME
 *
 *
 */
/* ------------------------------
    
    CONTENTS:

    1. THEME VARIABLES
    2. BASE
    3. LOGO
    4. USER AVATAR
    5. IE 10+ SPECIFIC

------------------------------ */


/* ---------------------------------------------------
//////////////////////////////////////////////////////
    
    1. THEME VARIABLES

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
----------------------------------------------------- */

:root {
    /* ---------------------------------------------------
        CORPORATE PALLETTE 
    ----------------------------------------------------- */
    --primary1: #ed8b00; /* HotStats orange */
    --primary1-opacity: 237, 139, 0; /* HotStats orange 0% */
    --primary2: #5b7f95; /* HotStats blue */
    --primary3: #768692; /* HotStats grey */
    --primary4: #ed8b00; /* HotStats orange */
    --primary5: var(--primary2); /* HotStats blue */
    --primary6: var(--primary3); /* HotStats grey */
    --accent1: #2b303a; /* Dark grey */
    --accent2: #f3f3f3; /* Off white */
    --accent3: #e3e3e3; /* Light gray */
    --accent4: #eaedf3; /* Lighter gray */
    --backgd1: #FFFFFF; /* White */
    --backgd2: var(--accent4); /* Lighter gray */
    --backgd3: var(--accent4); /* Lighter gray */
    --backgd4: var(--accent4); /* Lighter gray */
    /* ---------------------------------------------------
       TABLE PALLETTE 
    ----------------------------------------------------- */
    --tbl-head-title: var(--primary2); /* HotStats blue */
    --tbl-head1: var(--accent1); /* Dark grey */
    --tbl-head2: var(--primary2); /* HotStats blue */
    --tbl-head3: #B3B3B3; /* Darkish grey */
    --tbl-head4: var(--primary3); /* HotStats grey */
    --tbl-head5: var(--accent2); /* Off white */
    --tbl-blight: var(--accent3); /* Light grey */
    --tbl-bdark: var(--accent4); /* Lighter grey */
    --tbl-val-alt: #f8f8f8;
    --tbl-val-over: rgba(91,127,149, 0.2); /* HotStats blue 20% */
    /* ---------------------------------------------------
       DATA SET SEARCH
    ----------------------------------------------------- */
    --seach-grey: var(--accent2); /* Off white */
    --search-highlight: var(--primary1);
    /* ---------------------------------------------------
       GRAPHS
    ----------------------------------------------------- */
    --g-primary: var(--primary1);
    --g-secondary: var(--primary2);
    --g-backlight: var(--accent3);
}
.g-primary {
    color: #ed8b00;
}

.g-secondary {
    color: #5b7f95;
}

.g-backlight {
    color: #e3e3e3;
}


/* ---------------------------------------------------
//////////////////////////////////////////////////////
    
    2. BASE

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
----------------------------------------------------- */

body:not(#sign-in-page) {
    color: #3e3f42; /* IE fallback */
    color: var(--charcoal-grey);
    background-color: #f7f9fa; /* IE fallback */
    background-color: var(--light-grey);
}


/* ---------------------------------------------------
//////////////////////////////////////////////////////
    
    3. LOGO

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
----------------------------------------------------- */

.navbar-brand-large {
    background: url(Images/Logo/Hotstats-logo-with-strapline_newRGB.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left top;
    min-height: 132px;
    margin: 3rem 0 5rem 0;
}

/* NEEDS TESTING */
.navbar-brand {
    background: url(Images/Logo/Hotstats-logo-with-strapline_newRGB.svg); /*Need to check how this is displaying on all browsers*/
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
}

#sidebar .aspect-ratio-box {
    padding-top: calc(148 / 600 * 100%); /*aspect ratio for HotStats */
    margin-top: calc(1rem + 1px);
}

#sidebar.sidebar-collapsed .aspect-ratio-box-inside {
    background: url(Images/Logo/HotStats-circle_newRGB.svg);
    background-repeat: no-repeat;
    margin-top: 0;
}

/* ---------------------------------------------------
//////////////////////////////////////////////////////
    
    4. USER AVATAR

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
----------------------------------------------------- */


#sidebar .user-panel .user-avatar {
    background-color: var(--primary1);
}

    #sidebar .user-panel .user-avatar svg {
        color: var(--charcoal-grey);
    }


/* --------------------------------------------------------
///////////////////////////////////////////////////////////
    
    4. IE 10+ SPECIFIC - CSS VARIABLES FALLBACK

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
-------------------------------------------------------- */

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {


    /* ---------------------------------------------------
        IE10+ FALLBACKS - Data Submission
    --------------------------------------------------- */

    tr.trCompany {
        background-color: #2b303a; /* IE fallback*/
    }

    td.CssM {
        border: solid 1px #eaedf3; /* IE fallback */
    }

    /* ---------------------------------------------------
    IE FALLBACKS - SIDEBAR
    ----------------------------------------------------- */

    #sidebar ul.navbar-nav li a::before {
        box-shadow: inset 0.1875rem 0 0 0 #F68A1F; /* HotStats fallback for IE */
        /*box-shadow: inset 0.1875rem 0 0 0 var(--primary1);*/
    }

    #sidebar ul.navbar-nav li.active > a, a[aria-expanded="true"] {
        box-shadow: inset 3px 0 0 0 #F68A1F; /* HotStats fallback for IE */
        /*box-shadow: inset 3px 0 0 0 var(--primary1);*/
    }

    .nav-tabs .nav-link.active,
    .nav-tabs .nav-item.show .nav-link {
        border-bottom: 5px solid #F68A1F; / *HotStats fallback for IE */
        /*border-bottom: 5px solid var(--primary1);*/
    }

    /* ---------------------------------------------------
    IE FALLBACKS - TABLE HEADER 
    ----------------------------------------------------- */

    .card .grid-top-title .head-table {
        background-color: #2b303a; /* HotStats fallback for IE */
        /*background-color: var(--tbl-head1);*/
    }

    /* -----------------------------------------------------
        IE10+ FALLBACKS - DASHBOARD GAUGES
    ----------------------------------------------------- */

    .card-title span.vYou {
        color: #F68A1F; /* HotStats fallback for IE */
    }

    .card-title span.vCmp {
        color: #5E6C89; /* HotStats fallback for IE */
    }

    /*  -----------------------------------------------------
        IE10+ FALLBACKS - DASHBOARD TABLE
    ----------------------------------------------------- */

    .dbRowT-1 {
        background-color: #2b303a; /* IE fallback */
    }

    .dbRowT-3 {
        background-color: #5e6c89; /* IE fallback */
    }

    .dbRowT-4 {
        background-color: #5e6c89; /* IE fallback */
    }

    /*  -----------------------------------------------------
        IE10+ FALLBACKS - OPERATING SCHEDULE
    ----------------------------------------------------- */

    .osRowT-1 {
        background-color: #2b303a; /* IE fallback*/
    }

    .osRowT-2 {
        background-color: #5e6c89; /* IE fallback*/
    }

    .osRowT-3 {
        background-color: #B3B3B3; /* IE fallback*/
    }

    .osRowT-4 {
        background-color: #737373; /* IE fallback*/
    }

    /*  -----------------------------------------------------
        IE10+ FALLBACKS - LEAGUE TABLE
    ----------------------------------------------------- */

    tr.rowLeagueTitle {
        background-color: #5e6c89; /* IE fallback*/
    }

    /*  -----------------------------------------------------
        IE10+ FALLBACKS - DATASET TREE
    ----------------------------------------------------- */

    .rtSelected .rtIn {
        border-color: #F68A1F !important; /* IE fallback */
        background-color: #F68A1F !important; /* IE fallback */
    }

    .tree-holder .search-txt {
        background-color: #f1f1f1; /* IE fallback */
    }

    .tree-holder .search-txt .searchclr:hover {
        color: #F68A1F; /* IE fallback */
    }

    .tree-holder .search-results {
        background-color: #f1f1f1; /* IE fallback */
    }

    .tree-holder .search-results .search-item:hover {
        color: #F68A1F; /* IE fallback */
    }

    /*  -----------------------------------------------------
        IE10+ FALLBACKS - DATE PICKER
    ----------------------------------------------------- */

    .setting-ddl .RadDropDownList_Metro .rddlFocused, .account-box .RadDropDownList_Metro {
        border-color: #F68A1F !important;
        background-color: #F68A1F !important;
    }

    .rddlPopup_Metro .rddlItemSelected {
        background-color: #F68A1F !important;
    }

    .RadCalendarMonthView_Metro .rcSelected a {
        border-color: #F68A1F !important; /* IE fallback */
        background: #F68A1F !important; /* IE fallback */
    }

    .rcCalPopup a:hover {
        background: #F68A1F !important; /* IE fallback */
    }

    /*  -----------------------------------------------------
        IE10+ FALLBACKS - COMPSET TABLE 
    ----------------------------------------------------- */

    .rgOwn > td.compVal {
        color: #F68A1F; /* IE fallback */
    }

    /*  -----------------------------------------------------
        IE10+ FALLBACKS - USER AVATAR
    ----------------------------------------------------- */

    #sidebar .user-panel .user-avatar {
        background-color: #F68A1F; /* IE fallback */
    }

        #sidebar .user-panel .user-avatar svg {
            color: #3e3f42; /* IE fallback */
        }
}