/* ----------------------------
    
    CONTENTS (To be reorganised):

    1.  GLOBAL VARIABLES
    2.  BASE
    3.  LINKS
    4.  TYPOGRAPHY
    5.  GRID
    6.  SIDEBAR
    7.  MAIN CONTENT CONTAINER
    8.  TOP NAVBAR
    9.  MODALS
    10. PROGRESS BAR
    11. TABS
    12. PAGE CONTENT
    13. FOOTER
    14. CARDS
    15. DEMO
    16. DASHBOARD
    17. GRAPHS & TABLES
    18. BUTTONS
    19. LOG IN PAGE
    20. BACKGROUND COLOURS
    21. VIDEO
    22. ANIMATIONS
    23. FORMS
    24. *IE 10+ SPECIFIC & VARIABLE FALLBACKS (some are located in the sections above, where needed)

    NOTES - Main features and updates changelog: 
    November 2020 - Action bar and Home page features added (Launchpad and Latest news).
    October 2020 - Support for IE has been dropped, though keeping css for now because on IE the site is still visible below the alert modal.
    September 2020 - New menu added.
    2021 - Loads of new features and improvements... should have separate changelog file. 

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

/* ---------------------------------------------------
//////////////////////////////////////////////////////
    
    1. GLOBAL VARIABLES

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

:root {
    /* Global Structure */
    --topbar-height: 92px;
    --sidebar-width: 17rem;
    --negative-sidebar-width: -17rem;
    --light-grey: #f7f9fa;
    --grey-50: #9ea0a5;
    --grey-75: #6b6c6f;
    --charcoal-grey: #3e3f42;
    --medium-grey: #737373;
    --grey: #eaedf3;
    --medium-green: #34aa44;
    --medium-green-two: #38b249;
    --white: #ffffff;
    --water-blue: #1665d8;
    --azul: #1f6fe5;
    --coral: #ff3f3b;
    --azure: #1991eb;
    --dark-sky-blue: #2da1f8;
    --wheat: #ffe97e;
    --melon: #ff8555;
    --barbie-pink: #ff4a9a;
    --tbl-head4: #737373; /* Dark Grey */
    --tbl-head5: #f3f3f3; /* Grey */
    --tbl-blight: #e3e3e3; /* Lighter Grey */
    --tbl-bdark: #eaedf3; /* Light Grey */
}

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

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

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    display: flex;
    flex-direction: column;
    font-size: 0.75rem !important;
}

body {
    margin: 0;
    font-family: 'Roboto', "Helvetica Neue", Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
}

@media screen and (min-width: 1920px) {
    body {
        font-size: 1rem;
    }
}

.wrapper {
    display: flex;
    width: 100%;
}

#wrapper {
    display: flex;
}

/* ---------------------------------------------------
//////////////////////////////////////////////////////
    
    3. LINKS

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

a {
    color: var(--charcoal-grey);
    text-decoration: none;
    background-color: transparent;
    transition: all 0.2s ease-out;
}

    a:hover {
        color: var(--grey-75);
        text-decoration: none;
    }

    a:not([href]):not([tabindex]) {
        color: inherit;
        text-decoration: none;
    }

        a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
            color: inherit;
            text-decoration: none;
        }

        a:not([href]):not([tabindex]):focus {
            outline: 0;
        }

/* ---------------------------------------------------
//////////////////////////////////////////////////////
    
    CUSTOM UTILITIES

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

.p-0-75 {
    padding: 0.75rem !important;
}

.pt-0-75,
.py-0-75 {
    padding-top: 0.75rem !important;
}

.pr-0-75,
.px-0-75 {
    padding-right: 0.75rem !important;
}

.pb-0-75,
.py-0-75 {
    padding-bottom: 0.75rem !important;
}

.pl-0-75,
.px-0-75 {
    padding-left: 0.75rem !important;
}

/* ---------------------------------------------------
//////////////////////////////////////////////////////
    
    4. TYPOGRAPHY

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

p {
    margin: 1rem 0;
    color: var(--grey-75);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin-bottom: 0.5rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: var(--charcoal-grey) !important;
}

h1, .h1 {
    font-size: 2.25rem;
}

h2, .h2 {
    font-size: 1.875rem;
    line-height: 1.47;
}

h3, .h3 {
    font-size: 1.625rem; /* 26px then *0.75 so 19.5px */
    line-height: 1.46;
}

h4, .h4 {
    font-size: 1.375rem; /* 22px then *0.75 so 16.5px */
    line-height: 1.45;
    letter-spacing: 0.0125rem;
}

h5, .h5 {
    font-size: 1.25rem; /* 20px then *0.75 so 15px */
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 0.0125rem;
}

h6, .h6 {
    font-size: 1.125rem; /* 18px then *0.75 so 13.5px */
    font-weight: 500;
}

small,
.small {
    font-size: 87.5%;
    font-weight: 400;
}

table {
    font-size: 0.75rem;
}
@media screen and (min-width: 1920px) {
    table {
        font-size: 0.875rem;
    }
}

.base-black {
    color: #262626; /* NB Text color used in new menu designs*/
}


/* ---------------------------------------------------
//////////////////////////////////////////////////////
    
    5. GRID

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
------------------------------------------------------ */
    .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .container-xxxl, .container-xxxxl {
        width: 100%;
        padding-right: 0.75rem;
        padding-left: 0.75rem;
        margin-right: auto;
        margin-left: auto;
    }

/* Ideally apply to all */
#modDataset .container-fluid, #modDataset .container-sm, #modDataset .container-md, #modDataset .container-lg,
#modDataset .container-xl, #modDataset .container-xxl, #modDataset .container-xxxl, #modDataset .container-xxxxl {
    padding-right: 1rem;
    padding-left: 1rem;
}

@media (min-width: 576px) {
    .container, .container-sm {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container, .container-sm, .container-md {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container, .container-sm, .container-md, .container-lg {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl {
        max-width: 1140px;
    }
}

@media (min-width: 1440px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
        max-width: 1140px;
    }

    /* Ideally apply to all */
    #modDataset .container-xl, #modDataset .container-xxl {
        max-width: 1440px;
    }
}

@media (min-width: 1600px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .container-xxxl {
        max-width: 1600px;
    }

    /* Ideally apply to all */
    #modDataset .container-xl, #modDataset .container-xxl, #modDataset .container-xxxl {
        max-width: 1600px;
    }
}

@media (min-width: 1920px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .container-xxxl, .container-xxxxl {
        max-width: 1920px;
    }

    /* Ideally apply to all */
    #modDataset .container-xl, #modDataset .container-xxl, #modDataset .container-xxxl, #modDataset .container-xxxxl {
        max-width: 1920px;
    }
}

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -1rem;
    margin-left: -1rem;
}

.no-gutters {
    margin-right: 0;
    margin-left: 0;
}

    .no-gutters > .col,
    .no-gutters > [class*="col-"] {
        padding-right: 0;
        padding-left: 0;
    }

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl,
.col-xxl-auto, .col-xxxl-1, .col-xxxl-2, .col-xxxl-3, .col-xxxl-4, .col-xxxl-5, .col-xxxl-6, .col-xxxl-7, .col-xxxl-8, .col-xxxl-9, .col-xxxl-10, .col-xxxl-11, .col-xxxl-12, .col-xxxl,
.col-xxxl-auto, .col-xxxxl-1, .col-xxxxl-2, .col-xxxxl-3, .col-xxxxl-4, .col-xxxxl-5, .col-xxxxl-6, .col-xxxxl-7, .col-xxxxl-8, .col-xxxxl-9, .col-xxxxl-10, .col-xxxxl-11, .col-xxxxl-12, .col-xxxxl,
.col-xxxxl-auto, .col-xxxxxl-1, .col-xxxxxl-2, .col-xxxxxl-3, .col-xxxxxl-4, .col-xxxxxl-5, .col-xxxxxl-6, .col-xxxxxl-7, .col-xxxxxl-8, .col-xxxxxl-9, .col-xxxxxl-10, .col-xxxxxl-11, .col-xxxxxl-12, .col-xxxxxl,
.col-xxxxxl-auto {
    position: relative;
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    transition: all 0.2s ease-out;
}

.col {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}

.col-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}

.col-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
}

.col-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}

.col-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}

.col-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.col-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}

.col-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.col-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}

.col-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}

.col-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
}

.col-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
}

.col-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
}

.col-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width: 576px) {
    .col-sm {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-sm-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .col-sm-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-sm-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-sm-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-sm-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-sm-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-sm-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-sm-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-sm-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-sm-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-sm-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-sm-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-sm-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 768px) {
    .col-md {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-md-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .col-md-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-md-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-md-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-md-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-md-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-md-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-md-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-md-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-md-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-md-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-md-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-md-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 992px) {
    .col-lg {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-lg-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .col-lg-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-lg-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-lg-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-lg-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-lg-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-lg-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-lg-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-lg-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-lg-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-lg-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-lg-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-lg-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 1200px) {
    .col-xl {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-xl-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .col-xl-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-xl-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-xl-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-xl-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-xl-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-xl-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-xl-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-xl-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-xl-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-xl-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-xl-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-xl-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 1440px) {
    .col-xxl {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-xxl-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .col-xxl-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-xxl-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-xxl-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-xxl-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-xxl-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-xxl-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-xxl-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-xxl-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-xxl-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-xxl-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-xxl-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-xxl-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 1600px) {
    .col-xxxl {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    .row-cols-xxxl-1 > * {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .row-cols-xxxl-2 > * {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .row-cols-xxxl-3 > * {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .row-cols-xxxl-4 > * {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .row-cols-xxxl-5 > * {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }

    .row-cols-xxxl-6 > * {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-xxxl-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .col-xxxl-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-xxxl-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-xxxl-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-xxxl-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-xxxl-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-xxxl-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-xxxl-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-xxxl-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-xxxl-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-xxxl-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-xxxl-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-xxxl-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .order-xxxl-first {
        -ms-flex-order: -1;
        order: -1;
    }

    .order-xxxl-last {
        -ms-flex-order: 13;
        order: 13;
    }

    .order-xxxl-0 {
        -ms-flex-order: 0;
        order: 0;
    }

    .order-xxxl-1 {
        -ms-flex-order: 1;
        order: 1;
    }

    .order-xxxl-2 {
        -ms-flex-order: 2;
        order: 2;
    }

    .order-xxxl-3 {
        -ms-flex-order: 3;
        order: 3;
    }

    .order-xxxl-4 {
        -ms-flex-order: 4;
        order: 4;
    }

    .order-xxxl-5 {
        -ms-flex-order: 5;
        order: 5;
    }

    .order-xxxl-6 {
        -ms-flex-order: 6;
        order: 6;
    }

    .order-xxxl-7 {
        -ms-flex-order: 7;
        order: 7;
    }

    .order-xxxl-8 {
        -ms-flex-order: 8;
        order: 8;
    }

    .order-xxxl-9 {
        -ms-flex-order: 9;
        order: 9;
    }

    .order-xxxl-10 {
        -ms-flex-order: 10;
        order: 10;
    }

    .order-xxxl-11 {
        -ms-flex-order: 11;
        order: 11;
    }

    .order-xxxl-12 {
        -ms-flex-order: 12;
        order: 12;
    }

    .offset-xxxl-0 {
        margin-left: 0;
    }

    .offset-xxxl-1 {
        margin-left: 8.333333%;
    }

    .offset-xxxl-2 {
        margin-left: 16.666667%;
    }

    .offset-xxxl-3 {
        margin-left: 25%;
    }

    .offset-xxxl-4 {
        margin-left: 33.333333%;
    }

    .offset-xxxl-5 {
        margin-left: 41.666667%;
    }

    .offset-xxxl-6 {
        margin-left: 50%;
    }

    .offset-xxxl-7 {
        margin-left: 58.333333%;
    }

    .offset-xxxl-8 {
        margin-left: 66.666667%;
    }

    .offset-xxxl-9 {
        margin-left: 75%;
    }

    .offset-xxxl-10 {
        margin-left: 83.333333%;
    }

    .offset-xxxl-11 {
        margin-left: 91.666667%;
    }
}

@media (min-width: 1920px) {
    .col-xxxxl {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-xxxxl-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .col-xxxxl-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-xxxxl-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-xxxxl-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-xxxxl-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-xxxxl-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-xxxxl-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-xxxxl-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-xxxxl-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-xxxxl-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-xxxxl-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-xxxxl-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-xxxxl-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 2560px) {
    .col-xxxxxl {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-xxxxxl-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .col-xxxxxl-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-xxxxxl-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-xxxxxl-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-xxxxxl-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-xxxxxl-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-xxxxxl-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-xxxxxl-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-xxxxxl-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-xxxxxl-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-xxxxxl-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-xxxxxl-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-xxxxxl-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Custom column form 5 column width */
.col-md-2-5 {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}

.form-control {
    display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #6b6c6f;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}


/* ---------------------------------------------------
//////////////////////////////////////////////////////
    
    6. SIDEBAR

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

#sidebar {
    outline: none;
}

#sidebar {
    width: var(--sidebar-width);
    position: fixed;
    left: 0;
    /*height: calc(100vh - 88px); Using % because vh conflicts with the zoom */
    height: 100%;
    z-index: 1000;
    outline: none;
    transition: width 0.2s ease-out;
}

    #sidebar > div > div {
        height: 100%;
    }

    #sidebar ul.navbar-nav {
        /*height: 100%;*/
        background-color: #f7f9fa;
        outline: none;
    }
    #sidebar ul.navbar-nav.scrollable {
        height: 100%;
    }

    #sidebar ul {
        /* Overriding .reset ul margin */
        margin: 0;
        padding-top: 1rem;
        color: #6b6c6f;
    }

/* Sidebar nav dropdown transition behaviour */
ul.navbar-nav ul li, ul.navbar-nav ul.show li ul li {
    opacity: 0 !important;
    transition: opacity 0.1s ease-in-out;
}

    ul.navbar-nav ul.show li, ul.navbar-nav ul li ul.show li {
        opacity: 1 !important;
        transition: opacity 0.1s ease-in-out;
    }

#sidebar ul.navbar-nav li.navigation-heading {
    font-size: 0.75rem;
}

#sidebar ul.navbar-nav li .nav-link {
    font-weight: 500;
    font-size: 0.75rem;
}

#sidebar ul.navbar-nav li a.nav-link {
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, font-size 0s;
}

@media screen and (min-width: 1920px) {
    #sidebar ul.navbar-nav li .nav-link {
        font-size: 0.875rem;
    }
}

/* Submenu */
#sidebar ul.navbar-nav li ul {
    padding: 0 0 0 1rem;
    position: relative;
}


#sidebar ul.navbar-nav > li ul li .nav-link {
    padding: 0.5rem 1rem 0.5rem 0.875rem;
    margin-left: 1rem;
}

#sidebar ul.navbar-nav > li ul li .nav-link {
    line-height: 1.57;
}

#sidebar ul.navbar-nav li ul li ul li .nav-link {
    line-height: 1;
}


#tblMasterTitle.active {
    width: 100%;
    transition: all 0.3s ease-in-out;
}

#sidebar.sidebar-collapsed {
    width: calc(5rem - 0.5rem);
}

@media (min-width:1920px) {
    #sidebar.sidebar-collapsed {
        width: 5rem;
    }
}

#sidebar.sidebar-collapsed .navbar-brand {
    opacity: 0;
    transition: opacity 0s ease-out 0s;
}

#main-content.sidebar-collapsed {
    width: calc(100% - 4.5rem);
    transition: width 0.2s ease-out 0s;
}

@media (min-width:1920px) {
    #main-content.sidebar-collapsed {
        width: calc(100% - 5rem);
    }
}

/* TOP NAVBAR
   ----------------------------- */
#main-content nav.navbar {
    width: calc(100% - 17rem); /*needs this for IE*/
    width: calc(100% - var(--sidebar-width));
    /*left: unset !important;*/
    left: 17rem; /*needs this for IE*/
    transition: all 0.2s ease-out 0s;
}

#main-content.sidebar-collapsed nav.navbar {
    width: calc(100% - 4.5rem);
    left: 4.5rem; /*needs this for IE*/
}

@media (min-width:1920px) {
    #main-content.sidebar-collapsed nav.navbar {
        width: calc(100% - 5rem);
        left: 5rem; /*needs this for IE*/
    }
}

#sidebar.sidebar-collapsed li.navigation-heading {
    position: relative;
}

#sidebar.sidebar-collapsed .user-details, #sidebar.sidebar-collapsed button.btn {
    opacity: 0;
    display: none;
}

#sidebar.sidebar-collapsed .user-avatar {
    width: 1rem !important;
    height: 1rem !important;
}

#sidebar .user-avatar .fas {
    font-size: 1.75rem !important;
    margin-bottom: -0.1rem !important;
}

#sidebar.sidebar-collapsed .user-avatar .fas {
    font-size: 0.875rem !important;
}

#sidebar .navigation-heading {
    color: #9ea0a5;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    text-transform: uppercase;
    padding: 0.75rem 0;
}

#sidebar .navbar-light.navbar-nav {
    padding-left: 1rem;
    padding-right: 1rem;
}

#sidebar.sidebar-collapsed .navbar-light.navbar-nav {
    padding-left: 1rem;
    padding-right: 1rem;
}

#sidebar .navbar-light.navbar-nav .nav-item {
    padding-top: 1px;
}

#sidebar .navbar-light.navbar-nav .nav-link {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    text-align: left;
    line-height: 1.5;
    color: #605F5E;
    background-color: transparent;
    border: none;
    z-index: 0;
    display: block;
    outline: none;
}

#sidebar {
    white-space: nowrap;
}

    #sidebar .fa-arrow-to-left {
        display: inline-block;
    }

    #sidebar .fa-arrow-to-right {
        display: none;
    }

    #sidebar.sidebar-collapsed .fa-arrow-to-right {
        display: inline-block;
    }

    #sidebar.sidebar-collapsed .fa-arrow-to-left {
        display: none;
    }

    /* Sidebar collapsible menu text */
    #sidebar .navbar-light.navbar-nav .nav-link span {
        visibility: visible;
        opacity: 1;
        transition: visibility 0.2s ease-out 0.2s, opacity 0.2s ease-out 0.2s;
    }

    #sidebar.sidebar-collapsed .navbar-light.navbar-nav .nav-link span {
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s ease-out 0s, opacity 0s ease-out 0s;
    }

    #sidebar .navigation-heading span {
        visibility: visible;
        opacity: 1;
        transition: visibility 0.2s ease-out 0.2s, opacity 0.2s ease-out 0.2s;
    }

    #sidebar.sidebar-collapsed .navigation-heading span {
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s ease-out 0s, opacity 0s ease-out 0s;
    }

    #sidebar.sidebar-collapsed .navigation-heading::before {
        content: '';
        display: block;
        position: absolute;
        top: 50%;
        width: 100%;
        height: 1px;
        background-color: #DFDFDF;
    }
    /* End */
    /* Sidebar collapsible menu submenu */
    #sidebar.sidebar-collapsed ul.collapse.show .nav-link {
        margin-left: 0;
    }

    #sidebar.sidebar-collapsed ul.collapse.show {
        padding-left: 0;
    }
/* End */

@media screen and (min-width: 1920px) {
    #sidebar .navbar-light.navbar-nav .nav-link {
        padding: 0.5rem 1rem;
    }
}

#sidebar .navbar-light.navbar-nav .nav-link .fad {
    margin-right: 0.5rem;
    width: 1rem;
}

#sidebar.sidebar-collapsed .navbar-light.navbar-nav .nav-link .fad {
    margin-right: 0;
}

#sidebar .navbar-light.navbar-nav .nav-link:hover, #sidebar .navbar-light.navbar-nav .nav-link:not(#sidebarCollapse):not([data-toggle="collapse"]):focus {
    color: white;
    background: var(--primary2);
}

#sidebar .navbar-light.navbar-nav .show > .nav-link:not(#sidebarCollapse):not([data-toggle="collapse"]),
#sidebar .navbar-light.navbar-nav .active > .nav-link:not(#sidebarCollapse):not([data-toggle="collapse"]),
#sidebar .navbar-light.navbar-nav .nav-link:not(#sidebarCollapse):not([data-toggle="collapse"]).show,
#sidebar .navbar-light.navbar-nav .nav-link:not(#sidebarCollapse):not([data-toggle="collapse"]).active {
    color: white;
    background: var(--primary2);
}
/* Sidebar collapsed - Submenu button expanded*/
#sidebar.sidebar-collapsed .navbar-light.navbar-nav .nav-link:not(.collapsed)[data-toggle="collapse"] {
    color: unset;
    background-color: rgba(92, 108, 135, 0.3);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

#sidebar.sidebar-collapsed .nav-item .collapse.show {
    background-color: rgba(92, 108, 135, 0.1);
    border-bottom-left-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

    #sidebar.sidebar-collapsed .nav-item .collapse.show .nav-link {
        border-radius: 0;
    }

    #sidebar.sidebar-collapsed .nav-item .collapse.show .nav-item:last-child .nav-link {
        border-bottom-left-radius: 0.25rem;
        border-bottom-right-radius: 0.25rem;
    }

/*.mCSB_container, .mCustomScrollBox {
    overflow: visible !important;
}*/

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

    MAIN LOGO

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

#sidebar .aspect-ratio-box {
    height: 0;
    overflow: hidden;
    padding-top: calc(422 / 1137 * 100%); /* aspect ratio for hilton, override in themes*/
    position: relative;
}

#sidebar .aspect-ratio-box-inside {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100%;
}

#sidebar.sidebar-collapsed .aspect-ratio-box {
    padding-top: 100%; /* 1:1 square */
    margin-top: calc(1rem + 1px);
    transition: padding-top 0s ease-in 0s;
}

#sidebar.sidebar-collapsed .aspect-ratio-box-inside {
    background-repeat: no-repeat;
    background-size: 100%;
    opacity: 0;
    /*background-image: url(/App_Themes/HiltonHotels/Images/Logo/hilton-logo-square.svg);*/ /* See theme css */
    -webkit-animation: fade-in 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.2s both;
    animation: fade-in 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.2s both;
}

.logo-container {
    height: 80px; /* this is needed to stop the menu from moving down and bouncing up when the wide logo swaps for square logo */
}

/* ---------------------------------------------------
//////////////////////////////////////////////////////
    
    USER ACTION BAR

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

#pageHeader {
    padding-left: 0;
}

.page-heading {
    font-size: 1rem;
    font-weight: 900;
    color: rgba(38, 38, 38, 1);
    margin: 0;
    padding: 0 0 0.5rem 0;
}

.user-action-bar {
    position: sticky;
    top: 92px;
    z-index: 99999999;
}

.user-action-bar {
    margin-top: -0.75rem;
    margin-right: -0.75rem;
    margin-left: -0.75rem;
    padding: 0.5rem 1rem 0.5rem 1rem;
    border-top-left-radius: 0.25rem;
    border-bottom: 1px solid #EFEFEF;
    /*box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04);*/
    background-color: white;
}

    .user-action-bar .btn-neutral {
        margin-right: 0.5rem;
    }

    .user-action-bar .table-size-controls {
        display: flex;
        align-items: center;
        margin-left: 0.5rem;
    }

    @media screen and (min-width: 1200px) {
        .user-action-bar .table-size-controls {
            margin-left: 1rem;
        }
    }
    

    .user-action-bar .btn-link-baselink, .user-action-bar .btn.table-size-adjustment {
        padding: 0;
    }

    .user-action-bar .btn.table-size-adjustment {
        margin-right: 0.25rem;
    }

    .user-action-bar .btn-link-baselink {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    @media screen and (min-width: 1200px) {
        .user-action-bar .btn-link-baselink {
            margin-left: 1rem;
            margin-right: 1rem;
        }
    }

        .user-action-bar .btn-link-baselink > * {
            margin-right: 0.625rem;
        }

    .user-action-bar .btn-link:hover, .user-action-bar .btn-link:focus, .user-action-bar .btn-link:active {
        text-decoration: none;
    }

    .user-action-bar .btn.table-size-adjustment:nth-last-child(3) {
        margin-left: 0.25rem;
    }

    .user-action-bar .btn.table-size-adjustment:hover svg rect {
        fill: #262626;
    }

    .user-action-bar .btn.table-size-adjustment:active svg rect {
        fill: #262626;
    }

.btn.table-size-adjustment:active svg rect, .btn.table-size-adjustment.active svg rect {
    fill: #262626;
}

.btn.table-size-adjustment:active:focus svg rect, .btn.table-size-adjustment.active:focus svg rect {
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

#userActionBar .user-action-bar {
    margin: 0 -0.75rem 0 -0.75rem;
    box-shadow: none;
}

.main-content.has-tabs .user-action-bar {
    border-top-left-radius: 0;
}

/* Exp for sticky tabs on KPI page */
/*.kpi-report .nav-tabs {
    position: sticky;
    top: 104px;
    z-index: 99999999;
}
.kpi-report .user-action-bar {
    position: sticky;
    top: 127px;
    z-index: 99999999;
}*/

.user-action-bar .dropdown-item {
    cursor: pointer;
}

.user-action-bar .text-size {
    display: flex;
    align-items: center;
    margin-left: 0.5rem;
    position: relative;
}
@media screen and (min-width: 1920px) {
    .user-action-bar .text-size {
        margin-left: 1rem;
    }
}

    .user-action-bar .text-size span {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        font-size: 0.75rem;
    }

@media screen and (min-width: 1920px) {
    .user-action-bar .text-size span {
        font-size: 0.875rem;
    }
}

.user-action-bar .text-size .btn {
    /*padding-left: 0.25rem;
    padding-right: 0.25rem;*/
    padding:0 0.25rem;
}

/* ---------------------------------------------------
//////////////////////////////////////////////////////
    
    7. MAIN CONTENT CONTAINER

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

#main-content {
    display: flex;
    flex-direction: column;
    width: calc(100% - 17rem); /* Fallback for IE which does not support css variables */
    width: calc(100% - var(--sidebar-width));
    min-height: calc(100vh - 92px);
    position: absolute;
    top: 92px;
    right: 0;
    transition: all 0.2s ease-out;
}

    /* Mods for pages with tabs (comp, growth and KPI report pages) */
    #main-content .has-tabs {
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
        border-top-left-radius: 0.25rem;
        background-color: white;
    }

    /* ---------------------------------------------------
//////////////////////////////////////////////////////
    
    8. TOP NAVBAR

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

    #main-content > .navbar {
        min-height: 92px;
        border-bottom: solid 0px var(--grey-50);
        background-color: var(--light-grey);
        z-index: 1028 !important;
    }

.navbar {
    padding: 1rem 1rem 1rem 0;
}

    .navbar.report-buttons {
        padding: 0;
        flex: 1 0 auto;
        padding-left: 1rem;
        width: auto;
        margin-left: auto;
    }

        .navbar.report-buttons .btn {
            height: 3.5rem;
        }


#main-content.home > .navbar .user-greeting {
    flex: 1 1 auto;
    padding-left: 1rem;
    margin-right: auto;
}

/* Mobile nav collapse/expand button*/
.nav-toggle {
    align-self: flex-start;
    padding-top: calc(1rem)!important;
    padding-bottom: calc(1rem)!important;
}
.nav-toggle .btn{
    padding-top: 1rem;
    padding-bottom: 1rem;
    height:3.5rem;
}
.nav-toggle .nav-toggle-icon {
    font-size:1rem;
}
/* Temp disabled until guide set up */
.navbar .guide-panel .btn.help{
    opacity:0.65!important;
    pointer-events:none!important;
}
/* USER PANEL IN TOP NAVBAR
   ----------------------------- */

#main-content > .navbar .guide-panel {
    margin-left: 0.5rem;
}
#main-content .collapse.show .btn-group {
    margin-left: 0;
}
    #main-content > .navbar .guide-panel .btn > .user-guide-icon {
        width: 2rem;
        height: 2rem;
        position: relative;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        font-size: 1.3rem;
        color: var(--primary2);
        margin-top: 3px !important;
    }

    #main-content > .navbar .guide-panel .btn > .user-guide-icon * {
        font-size: 1.5rem !important;
    }

    #main-content > .navbar .guide-panel .btn > .user-guide p {
        color: #262626;
        display: flex;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 150px;
        /*margin-top: 3px !important;*/
    }

#main-content > .navbar .user-panel {
    margin-left: 0.5rem;
}

    #main-content > .navbar .user-panel .btn > .user-avatar {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--primary1);
        overflow: hidden;
    }

        #main-content > .navbar .user-panel .btn > .user-avatar * {
            font-size: 1.5rem !important;
            margin-bottom: -0.875rem !important;
            color: white;
            opacity: 0.75;
        }

    #main-content > .navbar .user-panel .btn > .user-details p:nth-child(1) {
        color: #262626;
    }

    #main-content > .navbar .user-panel .btn > .user-details p:nth-child(2) {
        color: #605F5E;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 108px;
    }

@media (min-width:1440px) {
    #main-content > .navbar .user-panel .btn > .user-details p:nth-child(2) {
        max-width: 156px;
    }
}

@media (min-width:1920px) {
    #main-content > .navbar .user-panel .btn > .user-details p:nth-child(2) {
        max-width: 192px;
    }
}

/*@media (min-width:1200px) {
    .navbar.report-buttons {
        -ms-flex-wrap: nowrap;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        justify-content: flex-end;
    }
}*/
@media (min-width:992px) {
    .navbar.report-buttons {
        -ms-flex-wrap: nowrap;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        justify-content: flex-end;
    }
}

.navbar-brand {
    display: flex;
    font-size: 1.25rem;
    align-items: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
    height: 100%;
    margin-right: 0;
    transition: all 0.2s ease-out;
}

    .navbar-brand h6 {
        margin-bottom: 0;
        margin-left: 0.75rem;
        margin-right: 0;
        font-weight: 500;
    }

.navbar .btn#sidebarCollapse {
    padding: 1rem;
}

/* Topbar collapsed menu icon */
.svg-inline--fa.fa-w-14 {
    font-size: 1rem;
}

/*nb. should rename these big 2 line, buttons if they're being used outside the topbar*/
.btn.btn-topbar-modal {
    display: flex;
    height: 3.5rem;
    justify-content: flex-start;
    align-items: center;
    /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);*/
    border-radius: 0.25rem;
    border: 0;
    background-color: white;
    text-align: left;
    font-family: 'Roboto', "Helvetica Neue", Arial, sans-serif;
    transition: width 0.2s ease-out;
}


@media (min-width:992px) {
    .top-nav-left.btn-group {
        border-radius: 0.25rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    }

    .one-period .btn.btn-topbar-modal:nth-child(1) {
        flex: 1 1 450px;
    }

    .one-period .btn.btn-topbar-modal:nth-child(2) {
        flex: 0 1 270px;
        border-left: 1px solid #DFDFDF;
    }

    /*.one-period .btn.btn-topbar-modal:nth-child(3) {
        flex: 0 1 270px;
        border-left: 1px solid #DFDFDF;
    }*/

    .one-period-nodata .btn.btn-topbar-modal:nth-child(1) {
        flex: 0 1 270px;
    }

    .one-period-nodata .btn.btn-topbar-modal:nth-child(2) {
        flex: 0 1 120px;
        border-left: 1px solid #DFDFDF;
    }

    .two-period .btn.btn-topbar-modal:nth-child(1) {
        flex: 1 1 450px;
    }

    .two-period .btn.btn-topbar-modal:nth-child(2) {
        flex: 1 0 auto;
        border-left: 1px solid #DFDFDF;
    }

    .two-period .btn.btn-topbar-modal:nth-child(3) {
        flex: 1 0 auto;
        border-left: 1px solid #DFDFDF;
    }
}

@media (min-width:1200px) {
    .two-period .btn.btn-topbar-modal:nth-child(2) {
        flex: 0 1 270px;
    }
    .two-period .btn.btn-topbar-modal:nth-child(3) {
        flex: 0 1 270px;
    }
}

    .btn.btn-topbar-modal p.btn-label-top {
        font-size: 0.75rem;
        color: #6b6c6f;
    }

    .btn.btn-topbar-modal p.btn-label-bottom {
        white-space: nowrap;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--charcoal-grey);
        transition: font-size 0.2s ease-out;
        display: inline;
    }

    @media (min-width:1920px) {
        .btn.btn-topbar-modal p.btn-label-bottom {
            font-size: 1rem;
        }
    }

    .btn.btn-topbar-modal > :last-child {
        margin-left: auto !important;
    }
    /* START - 2 LEVEL BUTTON */
    .btn.btn-2-level {
        display: flex;
        height: 3.5rem;
        justify-content: flex-start;
        align-items: center;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        border-radius: 0.25rem;
        border: 0;
        background-color: white;
        text-align: left;
        font-family: 'Roboto', "Helvetica Neue", Arial, sans-serif;
        transition: width 0.2s ease-out;
    }

        .btn.btn-2-level p.btn-label-top {
            font-size: 0.75rem;
            color: #6b6c6f;
        }

        .btn.btn-2-level p.btn-label-bottom {
            font-size: 1rem;
            font-weight: 500;
            color: var(--charcoal-grey);
            transition: font-size 0.2s ease-out;
        }

        .btn.btn-2-level > :last-child {
            margin-left: auto !important;
        }

    /* Dashboard HighCharts Gauges */
    #gauge0, #gauge1, #gauge2, #gauge3, #gauge4 {
        height: 320px;
    }

    @media (min-width:1920px) {
        #gauge0, #gauge1, #gauge2, #gauge3, #gauge4 {
            height: 352px;
        }
    }

    .home .page-content .btn {
        font-size: 0.875rem;
        transition: font-size 0.2s ease-out;
    }

    @media (min-width:1920px) {
        .home .page-content .btn {
            font-size: 1rem;
            transition: font-size 0.2s ease-out;
        }
    }

    .top-nav-left.navbar-nav {
        display: flex;
    }

    /* Top nav expanded */
    /*@media (min-width: 1200px) {
    .navbar-expand-xl {
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

        .navbar-expand-xl .navbar-nav {
            -ms-flex-direction: row;
            flex-direction: row;
        }

    .top-nav-left.navbar-nav {
        flex: 1 0 auto;
        max-width: 1040px;
    }

        .top-nav-left.navbar-nav.one-period-nodata {
            flex: 0 1 270px;
        }

        .top-nav-left.navbar-nav.two-period-nodata {
            flex: 0 1 540px;
        }

    .navbar-expand-xl .navbar-nav .dropdown-menu {
        position: absolute;
    }

    .navbar-expand-xl .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }

    .navbar-expand-xl > .container,
    .navbar-expand-xl > .container-fluid {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    .navbar-expand-xl .navbar-collapse {
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }

    .navbar-expand-xl .navbar-toggler {
        display: none;
    }
}*/

    @media (min-width: 992px) {
        .navbar-expand-lg {
            -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;
            -ms-flex-pack: start;
            justify-content: flex-start;
        }

            .navbar-expand-lg .navbar-nav {
                -ms-flex-direction: row;
                flex-direction: row;
            }

        .top-nav-left.navbar-nav {
            flex: 1 0 auto;
            max-width: 1040px;
        }

            .top-nav-left.navbar-nav.one-period-nodata {
                flex: 0 1 270px;
            }

            .top-nav-left.navbar-nav.two-period-nodata {
                flex: 0 1 540px;
            }

        .navbar-expand-lg .navbar-nav .dropdown-menu {
            position: absolute;
        }

        .navbar-expand-lg .navbar-nav .nav-link {
            padding-right: 0.5rem;
            padding-left: 0.5rem;
        }

        .navbar-expand-lg > .container,
        .navbar-expand-lg > .container-fluid {
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
        }

        .navbar-expand-lg .navbar-collapse {
            display: -ms-flexbox !important;
            display: flex !important;
            -ms-flex-preferred-size: auto;
            flex-basis: auto;
        }

        .navbar-expand-lg .navbar-toggler {
            display: none;
        }
    }
    /* Top nav collapsed */
    .navbar-collapse {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -ms-flex-align: center;
        align-items: center;
        transition: height 0.2s ease-out;
    }

    .navbar-toggler {
        padding: 0.25rem 0.75rem;
        font-size: 1.25rem;
        line-height: 1;
        background-color: transparent;
        border: 1px solid transparent;
        border-radius: 0.25rem;
    }

        .navbar-toggler:hover, .navbar-toggler:focus {
            text-decoration: none;
        }

        .navbar-toggler:not(:disabled):not(.disabled) {
            cursor: pointer;
        }

    .navbar-toggler-icon {
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        vertical-align: middle;
        content: "";
        background: no-repeat center center;
        background-size: 100% 100%;
    }

    .navbar-collapse.collapse.show {
        margin-top: 1rem;
    }

    .collapse:not(.show) {
        display: none;
    }

    .collapsing {
        position: relative;
        height: 0;
        overflow: hidden;
        transition: height 0.35s ease-in-out !important;
    }
    /* Hides the buttons until menu transition finished */
    .navbar-collapse.collapsing > div {
        opacity: 0;
    }
    /* Collapsed menu buttons */
    /*@media screen and (max-width:1199.98px) {*/
    @media screen and (max-width:991.98px) {
        .navbar-collapse.collapse.show > div {
            opacity: 1;
            justify-content: center;
            flex-direction: column;
            padding: 0;
            transition: opacity 0.5s ease-in-out !important;
        }

            .navbar-collapse.collapse.show > div .btn {
                width: 100%;
                margin: 0.5rem 0;
                margin-left: 0 !important;
                margin-right: 0 !important;
            }

        .navbar.report-buttons {
            flex-direction: row;
            flex-wrap: nowrap;
        }

        .navbar.navbar-expand .navbar.report-buttons {
            justify-content: flex-end;
        }

        .navbar:not(.navbar-expand) .navbar.report-buttons > * {
            width: 100%;
        }

        .navbar.report-buttons .user-panel {
            margin-left: 0;
        }

            .navbar.report-buttons .user-panel .user-details {
                flex-grow: 1;
            }
    }

    /* ---------------------------------------------------
//////////////////////////////////////////////////////
    
    9. MODALS

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

    .highcharts-title tspan {
        font-family: 'Roboto', "Helvetica Neue", Arial, sans-serif;
        font-size: 1.125rem;
        font-weight: 500;
    }

    #sidebarRightModal .highcharts-title tspan {
        /*font-size: 1.375rem;*/
        font-size: 1.125rem;
        line-height: 1.45;
        letter-spacing: 0.0125rem;
        color: #3e3f42;
        fill: #3e3f42;
    }

    #sidebarRightModal text.highcharts-title {
        transform: translateY(4px);
        -ms-transform: translateY(4px);
        -webkit-transform: translateY(4px);
    }

    .page-content text.highcharts-title {
        transform: translateY(-6px);
        -ms-transform: translateY(-6px);
        -webkit-transform: translateY(-6px);
    }

    #sidebarRightModal .graph {
        padding-bottom: 1rem;
    }

    .modal-backdrop {
        z-index: 1029 !important;
    }

    .modal-pointer-events {
        pointer-events: none;
    }

    .modal-open {
        overflow: hidden;
        /*overflow-y: auto;*/ /* Fixes content jump when modal opens */
        /*padding: 0 !important;*/ /* Fixes content jump when modal opens */
    }

        .modal-open .modal {
            overflow-x: hidden;
            overflow-y: auto;
            /*padding: 0 !important;*/ /* Fixes content jump when modal opens */
        }

    .modal {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1050;
        display: none;
        width: 100%;
        height: 100%;
        overflow: hidden;
        outline: 0;
    }

    .modal-dialog {
        position: relative;
        width: auto;
        margin: 0.5rem;
        pointer-events: none;
    }

    .modal.fade .modal-dialog {
        transition: -webkit-transform 0.2s ease-out;
        transition: transform 0.2s ease-out;
        transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
        -webkit-transform: translate(0, -50px);
        transform: translate(0, -50px);
    }

    @media screen and (prefers-reduced-motion: reduce) {
        .modal.fade .modal-dialog {
            transition: none;
        }
    }

    .modal.show .modal-dialog {
        -webkit-transform: none;
        transform: none;
    }

    .modal-dialog-centered {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        min-height: calc(100% - (0.5rem * 2));
    }

        .modal-dialog-centered::before {
            display: block;
            /* height: calc(100vh - (0.5rem * 2));*/
            height: calc(100% - (0.5rem * 2));
            content: "";
        }

    .modal-content {
        position: relative;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 100%;
        pointer-events: auto;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 0.25rem;
        outline: 0;
    }

    .modal-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1040;
        /*width: 100vw;
    height: 100vh;*/ /* VH and VW conflicting with the zoom */
        width: 100%;
        height: 100%;
        background-color: #000;
    }

        .modal-backdrop.fade {
            opacity: 0;
        }

        .modal-backdrop.show {
            opacity: 0.5;
        }

    .modal-header {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: start;
        align-items: flex-start;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 1rem 1rem;
        /*border-bottom: 1px solid #eaedf3;*/ /* Fallback for IE */
        border-bottom: 1px solid var(--grey);
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
    }

        .modal-header .close {
            padding: 1rem;
            margin: -1rem -1rem -1rem auto;
        }

    .modal-title {
        margin-bottom: 0;
        line-height: 1.5;
        font-size: 1rem;
        font-weight: 500;
        /*color: #3e3f42;*/ /* Fallback for IE */
        color: var(--charcoal-grey);
    }

    .modal-body {
        position: relative;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        padding: 1rem;
    }

    .modal-footer {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: end;
        justify-content: flex-end;
        padding: 1rem;
        border-top: 1px solid #e9ecef;
        border-bottom-left-radius: 0.25rem;
        border-bottom-right-radius: 0.25rem;
        /*background-color: #f7f9fa;*/ /* Fallback for IE which does not support css variables */
        background-color: var(--light-grey);
    }

        .modal-footer > :not(:first-child) {
            margin-left: .25rem;
        }

        .modal-footer > :not(:last-child) {
            margin-right: .25rem;
        }

    .modal-scrollbar-measure {
        position: absolute;
        top: -9999px;
        width: 50px;
        height: 50px;
        overflow: scroll;
    }

    @media (min-width: 576px) {
        .modal-dialog {
            max-width: 500px;
            margin: 1.75rem auto;
        }

        #modCompetitors .modal-dialog {
            max-width: 90vw;
            min-height: 60vh;
        }

        #modCompetitors .modal-body .rgDataDiv {
            min-height: 60vh;
        }

        .modal-dialog-centered {
            min-height: calc(100% - (1.75rem * 2));
        }

            .modal-dialog-centered::before {
                height: calc(100vh - (1.75rem * 2));
            }

        .modal-sm {
            max-width: 300px;
        }
    }

    @media (min-width: 992px) {
        .modal-lg,
        .modal-xl {
            max-width: 800px;
        }
    }

    @media (min-width: 1200px) {
        .modal-xl {
            max-width: 1140px;
        }
    }

    @media (min-width: 768px) {
        #modGraph .modal-xxl {
            max-width: 90vw;
            /*min-height: 90vh;*/
            min-height: unset;
        }
    }

    /* ---------------------------------------------------
//////////////////////////////////////////////////////
    
    MODAL DATASET (Fullwidth Modal)

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

    #modDataset {
        padding-right: 0 !important;
    }

        #modDataset .nav-link.disabled {
            opacity: 0.5;
        }

    .modal-fullwidth {
        max-width: 100%;
        min-height: 33vh;
        margin: 0 auto;
    }

        .modal-fullwidth .modal-content, .modal-fullwidth .modal-header {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        .modal-fullwidth .modal-content {
            border: 0;
            border-top: solid 8px var(--primary1);
        }

    #modDataset .modal-fullwidth .modal-content {
        border: 0;
    }

    /* this footer has been moved above header, rename at some point*/
    #modDataset .modal-fullwidth .modal-footer {
        position: sticky;
        top: 0;
        z-index: 1;
        border-top: solid 8px var(--primary1);
    }

        #modDataset .modal-fullwidth .modal-footer .btn {
            padding-top: calc(1rem - 1px);
            padding-bottom: calc(1rem - 1px);
        }

    /*.modal-fullwidth .modal-header, .modal-fullwidth .modal-body, .modal-fullwidth .modal-footer > div {
        width: 100%;
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
        margin: 0 auto;
    }*/

    .modal-fullwidth .modal-header {
        padding-top: 3rem !important;
        border: 0;
    }

        .modal-fullwidth .modal-header h5.modal-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: #262626 !important;
        }
        /*.modal-fullwidth .modal-header .btn-group {
        box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04);
    }*/

        .modal-fullwidth .modal-header .btn.btn-2-level {
            width: 100%;
            max-width: 402px;
            height: unset;
            padding-top: 1rem;
            padding-bottom: 1rem;
            border: 1px solid #DEE0E1;
            /*box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 10px 20px rgba(0, 0, 0, 0.04);*/
            box-shadow: none;
        }

            .modal-fullwidth .modal-header .btn.btn-2-level + .btn-primary {
                font-size: 1rem;
                z-index: 999999999;
            }

        .modal-fullwidth .modal-header .btn-2-level.active {
            /*border: 2px solid #3e3f42;*/
            border: 1px solid var(--search-highlight);
            background-color: var(--search-highlight);
            box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04);
            z-index: 999999998; /*added this so that the hover states of the adjacent buttons in group doesn't overlap big active border*/
        }

            /* These buttons behave like tabs */
            .modal-fullwidth .modal-header .btn-2-level.active p {
                color: white;
            }

        .modal-fullwidth .modal-header .btn-2-level .btn-label-bottom {
            color: #262626;
        }

        .modal-fullwidth .modal-header .btn-2-level.active .btn-label-bottom {
            font-weight: 700;
        }

        .modal-fullwidth .modal-header .btn-2-level {
            transition: border 0.15s ease-in-out;
        }

            .modal-fullwidth .modal-header .btn-2-level:hover {
                border: 1px solid var(--search-highlight);
            }

            /* Animation to show Reporting Period has been updated */
            .modal-fullwidth .modal-header .btn-2-level.updated-anim, .updated-anim {
                animation: pulse 1.5s 2 ease-out;
                z-index: 999999999;
            }

    @keyframes pulse {
        0% {
            /*box-shadow: 0 0 0 0 rgba(237, 139, 0, 0.7);*/
            background-color: rgba(237, 139, 0, 0.7);
        }

        70% {
            /*box-shadow: 0 0 0 1.5rem rgba(237, 139, 0, 0);*/
            background-color: rgba(237, 139, 0, 0);
        }

        100% {
            /*box-shadow: 0 0 0 0 rgba(237, 139, 0, 0);*/
            background-color: rgba(237, 139, 0, 0);
        }
    }
    /* end */

    .modal-fullwidth .modal-header .btn-2-level > :last-child {
        font-size: 0.875rem !important; /*stops the down chevrons reducing in size below 1920... need to make behaviour more consistent in this modal */
        transition: transform 0.15s ease-in-out;
    }

    .modal-fullwidth .modal-header .btn-2-level:hover > :last-child {
        transition: transform 0.15s ease-in-out;
        transform: translateY(0.5rem);
        color: var(--search-highlight);
    }

    .modal-fullwidth .modal-header .btn-2-level.active > :last-child {
        transition: transform 0.25s ease-out;
        transform: translateY(30px);
    }

        .modal-fullwidth .modal-header .btn-2-level.active > :last-child::before {
            content: '\f0d7';
            font-size: 1.5rem !important;
            color: var(--search-highlight);
        }

    /* Search Box */
    .modal-fullwidth .tree-holder .search-txt {
        display: flex;
        align-items: center;
        width: 100%;
        height: 2.5rem;
        border-radius: 0.25rem;
        background-color: var(--seach-grey); /* IE fallback in theme */
    }

        .modal-fullwidth .tree-holder .search-txt .txtHSearch {
            width: 420px;
            background: none;
            margin-left: 0;
        }

        .modal-fullwidth .tree-holder .search-txt .search-icon {
            width: auto;
            height: 1.25rem;
            padding: 0 1rem;
            position: unset;
            flex: 0 1 auto;
        }

            .modal-fullwidth .tree-holder .search-txt .search-icon .svg-inline--fa {
                font-size: 1rem;
                height: 1rem;
                width: 1rem;
                vertical-align: middle;
            }

        .modal-fullwidth .tree-holder .search-txt .RadInput .riTextBox {
            height: 2.5rem;
            outline: none !important;
            font-family: Roboto;
            font-size: 0.875rem;
            font-weight: normal;
            font-style: normal;
            font-stretch: normal;
            letter-spacing: normal;
            color: #3e3f42; /* IE fallback */
            color: var(--charcoal-grey);
        }

        .modal-fullwidth .tree-holder .search-txt .searchclr {
            position: unset;
            margin-left: auto;
            padding: 0 1rem;
            width: auto;
            height: 1.25rem;
            cursor: pointer;
            color: #3e3f42; /* IE fallback */
            color: var(--charcoal-grey);
        }

    #modDataset .body-reportdates1, #modDataset .body-reportdates2 {
        background-color: #F7F9FA;
        padding: 2rem 1rem;
        /*margin: 3.75rem 0;*/
        margin: 3.75rem auto;
        border-radius: 0.25rem;
        box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04);
    }

    #modDataset .btn-outline-fluid {
        background-color: white;
        /*color: #3e3f42;*/
        font-weight: normal;
        color: #605F5E;
        border-color: #dfdfdf;
        transition: all 0.15s ease-in-out;
    }

        #modDataset .btn-outline-fluid:hover {
            font-weight: inherit;
            border-color: var(--search-highlight);
        }

        #modDataset .btn-outline-fluid:focus {
            background-color: white;
        }

        #modDataset .btn-outline-fluid.active {
            background-color: var(--search-highlight);
            border-color: var(--search-highlight);
            color: white;
            font-weight: 700;
        }

    #modDataset p.reporting-period-heading {
        font-weight: 500;
        color: #262626;
        text-transform: uppercase;
        margin-top: 0;
    }

    #modDataset h6 {
        font-size: 0.875rem;
        font-weight: 500;
        color: #3e3f42;
        margin: 0;
    }

    #modDataset small {
        font-size: 0.75rem;
        line-height: 0.5rem;
        color: #9ea0a5;
        margin: 0;
    }

    .dot {
        font-size: 2rem;
        line-height: 0.5rem;
        height: 0.5rem;
        vertical-align: middle;
    }

    #modDataset .slider-range-view {
        padding-top: 2.5rem;
        padding-bottom: 5rem;
    }

        #modDataset .slider-range-view .slider-selection {
            border-radius: 0;
        }

        #modDataset .slider-range-view .btn.btn-outline-dark {
            font-size: 0.875rem;
            margin-bottom: 1.5rem;
        }

    /* Telerik slider dropdown for 'Year' selection */
    .slider-range-view .RadDropDownList_Default {
        color: #3e3f42 !important;
        font-size: 0.875rem !important;
        font-family: Roboto !important;
        line-height: 1.5 !important;
        border-radius: 0.25rem !important;
        margin-bottom: 1.5rem;
    }

        .slider-range-view .RadDropDownList_Default .rddlInner {
            background-color: transparent !important;
            background-image: none !important;
            border-radius: 0.25rem !important;
            cursor: pointer !important;
        }

    .slider-range-view .RadDropDownList .rddlInner {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        color: #3e3f42 !important;
        background-color: transparent !important;
        border: 1px solid #3e3f42 !important;
        padding: 0.5rem 0.75rem !important;
        border-radius: 0.25rem !important;
        transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out, opacity 0.25s ease-in-out;
    }

    .slider-range-view .RadDropDownList_Default .rddlFocused .rddlIcon {
        background-position: unset !important;
    }

    .slider-range-view .RadDropDownList_Default .rddlIcon {
        background-image: none !important;
        background-position: unset;
    }

    .slider-range-view .RadDropDownList .rddlIcon {
        width: 1rem !important;
        height: 100%;
        border: 0;
        background-repeat: unset !important;
        background-image: none !important;
        position: relative !important;
        top: 0;
        right: 0;
    }

        .slider-range-view .RadDropDownList .rddlIcon::after {
            display: inline-block;
            width: 0;
            height: 0;
            margin-left: .255em;
            vertical-align: middle;
            content: "";
            border-top: .3em solid;
            border-right: .3em solid transparent;
            border-bottom: 0;
            border-left: .3em solid transparent;
        }

    #ctl00_RadDropDownList1_DropDown .rddlPopup_Default {
        border-radius: 0.25rem;
        border: 1px solid #DFDFDF;
    }

    #ctl00_RadDropDownList1_DropDown .rddlPopup .rddlItem {
        padding: 0.25rem 0.75rem !important;
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
    }

        #ctl00_RadDropDownList1_DropDown .rddlPopup .rddlItem:last-child {
            border-bottom-left-radius: 0.25rem;
            border-bottom-right-radius: 0.25rem;
        }

    #ctl00_RadDropDownList1_DropDown .rddlPopup_Default .rddlItem.rddlItemHovered {
        background-color: #f8f9fa;
    }

    #ctl00_RadDropDownList1_DropDown .rddlPopup_Default .rddlItem.rddlItemSelected {
        color: #fff;
        background-color: #808080;
    }


    /* Date Range Slider */
    #modDataset .slider-dates {
        padding: 0.5rem 0 2rem 0;
        /*padding-top: calc(0.5rem + 1px);*/
        /*color: #605F5E;*/
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #BABFC4;
        font-size: 0.875rem;
        font-weight: 700;
    }

        #modDataset .slider-dates.slideD1 {
            margin-left: 21px;
        }

        #modDataset .slider-dates.slideD2 {
            margin-right: 21px;
        }

    #modDataset .slider.slider-horizontal {
        width: calc(100% - 42px);
        margin-left: 21px;
        height: 40px;
    }

    #modDataset .slider-track {
        background-image: none !important;
        height: 8px;
        box-shadow: none;
        /*background-color: #EAEDEF;*/
        background-color: white;
        border: 1px solid #dfdfdf;
    }

    #modDataset .slider-selection {
        background-image: none !important;
        background-color: var(--search-highlight) !important;
        /*opacity:0.7;*/
        box-shadow: none;
        z-index: 9999;
    }

    #modDataset .slider-handle {
        background-color: var(--search-highlight) !important;
        z-index: 9999;
    }

    #modDataset .slider-handle {
        /*background-color: rgba(31, 111, 229,1) !important;*/
        background-color: var(--search-highlight) !important;
    }

    /* Slider increment gradients */
    #modDataset .slider-track div:nth-child(4) {
        background: linear-gradient(90deg, rgba(20,97,210,0.1) 0%, rgba(20,97,210,0.3) 100%) !important; /*same blue hue as handles, need to adjust these for brands*/
        z-index: 999;
    }

    #modDataset .slider-track div:nth-child(5) {
        background: linear-gradient(90deg, rgba(20,97,210,0.3) 0%, rgba(20,97,210,0.5) 100%) !important;
        z-index: 999;
    }

    #modDataset .slider-track .slider-rangeHighlight::before, #modDataset .slider-track::before {
        content: '';
        border-left: 1px dashed #dfdfdf;
        display: block;
        /*height: 36px;
    transform: translateY(-16px);*/
        height: 16px;
        transform: translateY(-17px);
        background-color: transparent;
    }

    #modDataset .slider-track .slider-rangeHighlight::after, #modDataset .slider-track::after {
        content: '';
        border-right: 1px dashed #dfdfdf;
        display: block;
        /*height: 36px;
    transform: translateY(-16px);*/
        height: 16px;
        transform: translateY(-17px);
        background-color: transparent;
        position: absolute;
        right: 0;
        top: 0;
    }

    #modDataset .slider-track .slider-rangeHighlight::before, #modDataset .slider-track .slider-rangeHighlight::after {
        /*height: 14px;
    transform: translateY(-15px);*/
        display: none;
    }

    #modDataset .slider-track::before, #modDataset .slider-track::after {
        height: 36px;
        transform: translateY(-37px);
    }

    #modDataset .slider-track div:nth-child(6) {
        background: linear-gradient(90deg, rgba(20,97,210,0.5) 0%, rgba(20,97,210,0.7) 100%) !important;
        z-index: 999;
    }

    #modDataset .slider-track div:nth-child(7) {
        background: linear-gradient(90deg, rgba(20,97,210,0.7) 0%, rgba(20,97,210,0.9) 100%) !important;
        z-index: 999;
    }

    #modDataset .slider-handle {
        background-image: none !important;
        height: 40px;
        width: 40px;
        background-color: #F38A31;
        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
    }

        #modDataset .slider-handle::before {
            position: absolute;
            top: 50%;
            left: 50%;
            font-family: FontAwesome;
            content: '\f0c9';
            font-style: normal;
            font-variant: normal;
            font-size: 19px;
            -webkit-transform: translate(-50%, -50%) rotate(90deg);
            -ms-transform: translate(-50%, -50%) rotate(90deg);
            transform: translate(-50%, -50%) rotate(90deg);
            color: rgba(255, 255, 255, 0.7);
        }

    #modDataset .slider .tooltip.bs-tooltip-bottom {
        margin-top: 20px;
    }

    #modDataset .slider .tooltip.bs-tooltip-top {
        bottom: 42px !important;
    }

    .slider.slider-horizontal .slider-tick, .slider.slider-horizontal .slider-handle {
        margin-left: -20px !important;
    }

    #modDataset .tooltip {
        opacity: 1;
    }

    #modDataset .tooltip-inner {
        max-width: 200px;
        padding: 1rem;
        color: #262626;
        text-align: center;
        background-color: white;
        border: 1px solid #DFDFDF;
        /*box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);*/
        box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04);
        border-radius: 0.25rem;
        font-size: 1.125rem;
        font-weight: normal;
    }

    #modDataset .bs-tooltip-bottom .arrow::before, #modDataset .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
        bottom: 0;
        border-width: 0 0.4rem 0.4rem;
        border-bottom-color: #DFDFDF;
    }

    #modDataset .bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
        top: 0;
        border-width: 0.4rem 0.4rem 0;
        border-top-color: #DFDFDF;
    }

    #modDataset .report-dates-options {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    #modDataset .dataset-tabs {
        margin-bottom: 1rem;
        padding: 1.5rem 0 0 0;
    }

    /* Dataset search hotels bar */
    #modDataset .hotel-sets-search {
        max-width: 100%;
        background-color: #f1f1f1;
        border-radius: 0.25rem;
    }

        #modDataset .hotel-sets-search .form-control {
            height: 2.5rem;
            border: none;
            font-size: 0.75rem;
            padding: 0.2rem 0.75rem 0 0;
            background-color: transparent;
        }

            #modDataset .hotel-sets-search .form-control:focus {
                box-shadow: none;
            }

        #modDataset .hotel-sets-search .input-group {
            height: 2.5rem;
            border: none;
            background-color: transparent;
        }

        #modDataset .hotel-sets-search .svg-inline--fa {
            font-size: 1rem;
            height: 1rem;
            width: 1rem;
            vertical-align: middle;
        }

        #modDataset .hotel-sets-search .btn {
            font-size: 1rem;
        }

    /* Dataset search hotels bar */
    #modDataset .modal-header, #modGraph .modal-header {
        padding: 0;
    }

    #modDataset .modal-body {
        padding-left: 0;
        padding-right: 0;
        padding-right: 0;
    }

    /*overriding .reset ul margin*/
    #modDataset .modal-header ul, #modGraph .modal-header ul {
        margin: 0;
    }

    #modDataset .modal-header a, #modGraph .modal-header a {
        margin: 0;
    }


    #modRpDate .modal-header, #modGraph .modal-header {
        font-size: 1rem;
        font-weight: 500;
        color: var(--charcoal-grey);
    }

    #modCompetitors .modal-header .hotel-count {
    }

        #modCompetitors .modal-header .hotel-count span {
            font-size: 0.75rem;
            line-height: 2.25;
        }

            #modCompetitors .modal-header .hotel-count span:nth-child(2n) {
                font-weight: 700;
            }

    #modCompetitors .modal-footer {
        border-bottom-left-radius: 0.1875rem;
        border-bottom-right-radius: 0;
    }

    #modCompetitors .row {
        margin-left: 0;
        margin-right: 0;
    }

    #modCompetitors .btn-close {
        position: absolute;
        top: 0.5rem;
        right: 0.25rem;
        font-size: 1.5rem;
        z-index: 1;
        color: var(--charcoal-grey);
    }

    #modRpSettings .RadDropDownList.RadDropDownList_Metro {
        width: 100% !important;
    }

    #modRpSettings .modal-header {
        border: 0;
    }

    /* Modal - Graph Popups */
    #modGraph {
        padding-right: 0 !important;
    }
    #modGraph .modal-dialog{
        margin-top:92px;
    }

        #modGraph .modal-header {
            padding-top: 5px;
        }

            #modGraph .modal-header .nav {
                flex-wrap: nowrap;
                flex: 1 0 40%;
            }

                #modGraph .modal-header .nav .nav-item {
                    white-space: nowrap;
                }

            #modGraph .modal-header .graph-heading {
                align-self: center;
                text-align: center;
                flex: 1 1 20%;
            }

            #modGraph .modal-header .graph-close {
                flex: 0 1 40%;
            }

        #modGraph .modal-body .tab-content {
            /*height: 600px;*/
            height: 700px;
        }

        #modGraph .modal-body .tab-glossary {
            display: flex;
            align-items: center;
            text-align: center;
            height: 100%;
        }

        #modGraph #gcontainerGlos {
            width: 100%;
        }

            #modGraph #gcontainerGlos #nmap-glos, .nmap-no-glos {
                text-align: left;
                margin-top: auto;
                margin-bottom: auto;
                padding-bottom: 1rem;
            }

            #modGraph #gcontainerGlos .nmap-no-glos {
                text-align: center;
            }

        #modGraph /*#nmap-glos*/ img {
            /*width: -moz-fit-content;*/ /*Has support but isn't working*/
            /*width:191px; Fallback for Firefox*/
            /*width: -webkit-fit-content;
        width: fit-content;*/
            max-width: 320px;
            padding: 1rem;
        }

    @media (min-width: 576px) {
        .modal-xl {
            max-width: 100%;
        }
    }

    @media (min-width: 992px) {
        #modGraph .modal-xl {
            max-width: 100%;
        }
    }

    @media (min-width: 1200px) {
        #modGraph .modal-xl {
            max-width: 100%;
        }
    }

    @media (min-width: 1440px) {
        #modGraph .modal-xl {
            max-width: 1440px;
        }
    }

    #modGraph .modal-xl {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #modGraph .modal-body .tab-content {
        overflow: hidden;
    }

    #modGraph .modal-body {
        padding: 1rem !important;
    }

    /* Modal - Why Join? */
    /* NB. check widths of all modals to ensure consistency */

    @media (min-width: 1200px) {
        #modWhyJoin .modal-xl {
            max-width: 1078px; /* Currently not being used */
        }
    }

    #modWhyJoin .modal-header {
        border-bottom: 0;
        padding: 1.5rem;
        padding-bottom: 0;
    }

        #modWhyJoin .modal-header h2.modal-title {
            font-size: 1.875rem;
            line-height: 1.47;
        }

        #modWhyJoin .modal-header button.close {
            padding: 0.75rem;
            font-size: 2.5rem;
            /*color: #3e3f42;*/ /* Fallback for IE */
            color: var(--charcoal-grey);
            transition: all 0.2s ease-in-out;
        }

    #modWhyJoin .modal-body {
        padding: 1.5rem;
        padding-top: 0;
        min-height: 26rem;
        background-image: url(/Images/Graphics/HS_Why.svg);
        background-position: right 3rem top 1.5rem;
        background-repeat: no-repeat;
        background-size: calc(50% - 3rem);
    }

        #modWhyJoin .modal-body p {
            width: 50%;
            font-size: 1rem;
            line-height: 1.5;
        }

        #modWhyJoin .modal-body ul {
            width: 50%;
            margin: 1.5rem 0;
            padding: 0;
        }

            #modWhyJoin .modal-body ul li.list-group-item {
                font-size: 1rem;
                line-height: 1.5;
                padding: 0.5rem 0 0.5rem 2rem;
                border: 0 !important;
                background-color: transparent;
            }

            #modWhyJoin .modal-body ul li .svg-inline--fa {
                position: absolute;
                left: 0;
                top: 0.7rem;
                color: #00a63e;
            }

    /* Modal - Report Dates*/
    @media (min-width: 992px) {
        #modRpDate .modal-dialog {
            max-width: 564px;
        }
    }

    #modRpDate .modal-header {
        padding: 1rem 0.25rem 0 0.25rem;
        border-bottom: 0;
    }

        #modRpDate .modal-header .col-6:nth-child(2n+1) {
            padding-right: 1.5rem !important;
        }

        #modRpDate .modal-header .col-6:nth-child(2n+2) {
            padding-left: 1.5rem !important;
        }

    #modRpDate .modal-body {
        padding: 0 0.25rem 1.5rem 0.25rem !important;
    }

        #modRpDate .modal-body .col-6:nth-child(2n+1) {
            padding-right: 1.5rem !important;
        }

        #modRpDate .modal-body .col-6:nth-child(2n+2) {
            padding-left: 1.5rem !important;
        }

        #modRpDate .modal-body p {
            font-size: 0.75rem;
            line-height: 2;
            margin-bottom: 0;
        }


    .mapStretcher {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
    /* --------------------------------------------------
/////////////////////////////////////////////////////

    BEGIN - MOD to toggle ReportDates modal single/double columns

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

    @media (min-width: 992px) {
        #modRpDate .modal-dialog.slim-modal {
            max-width: 282px;
        }
    }

    .hide-column {
        display: none;
    }

    #modRpDate .modal-body .col-12:nth-child(n) {
        padding-right: 0.75rem !important;
    }

    /*Modal - Multi-Step Signup Process*/
    @media (min-width: 1200px) {
        #modMultiPage .modal-xl {
            max-width: 1078px;
        }
    }

    #modMultiPage {
        padding-right: 0 !important;
        pointer-events: none; /*Disables ability to close modal by clicking outside the modal */
    }

        #modMultiPage .modal-header .progress {
            flex: 0 0 97%;
            margin-bottom: 3rem;
        }

        #modMultiPage .modal-header .progress-full {
            flex: 0 0 100% !important;
        }

        #modMultiPage .modal-header {
            flex-wrap: wrap;
            border: 0;
            padding: 1rem 1rem 0 1rem;
            align-items: center;
        }

            #modMultiPage .modal-header svg {
                margin-right: auto;
                font-size: 1.5rem;
                margin-left: 0.5rem;
                margin-right: 0.75rem;
                vertical-align: middle;
            }

            #modMultiPage .modal-header .modal-title {
                font-size: 1rem;
                font-weight: 500;
                margin-right: auto;
            }

            #modMultiPage .modal-header button.close {
                flex: 0 0 3%;
                margin: 0;
                text-align: right;
                padding: 0;
                margin-bottom: 3rem;
                font-size: 2.5rem;
                line-height: 1.5rem; /*should be 1.5 but check how changing it effects appearance*/
                /*color: #3e3f42;*/ /* Fallback for IE */
                color: var(--charcoal-grey);
                transition: all 0.2s ease-in-out;
            }

        #modMultiPage .modal-body {
            padding: 0 1.5rem 3rem 1.5rem;
        }

            #modMultiPage .modal-body p {
                font-size: 1rem;
                margin-bottom: 2rem;
            }
    /*Checkbox background*/
    .custom-control-label::before {
        position: absolute;
        top: 0.25rem;
        left: -1.5rem;
        display: block;
        width: 1rem;
        height: 1rem;
        pointer-events: none;
        content: "";
        background-color: #fff;
        border: #adb5bd solid 1px;
    }
    /*Checkbox background changing when checked*/
    .custom-control-input:checked ~ .custom-control-label::before {
        top: 0.1rem;
        color: #fff;
        border-color: #2d9c3c;
        /*background-image: linear-gradient(to top, #34aa44, #38b249);*/ /* Fallback for IE */
        background-image: linear-gradient(to top, var(--medium-green), var(--medium-green-two));
    }

    #modDataset .custom-control-input:checked ~ .custom-control-label::before {
        top: 0.1rem;
        color: #fff;
        border-color: var(--primary1);
        /*background-image: linear-gradient(to top, #34aa44, #38b249);*/ /* Fallback for IE */
        background-image: linear-gradient(to top, var(--medium-green), var(--medium-green-two));
        background: var(--primary1);
        -ms-transform: matrix(-1, 0, 0, 1, 0, 0);
        -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
        transform: matrix(-1, 0, 0, 1, 0, 0);
    }
    /*This is the checkmark svg position*/
    .custom-control-label::after {
        position: absolute;
        top: 0.1rem;
        left: -1.5rem;
        display: block;
        width: 1rem;
        height: 1rem;
        content: "";
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 50% 50%;
    }

    #modMultiPage #multipage1 .modal-body {
        padding: 1.5rem;
        padding-top: 0;
        min-height: 25rem;
        background-image: url(/Images/Graphics/HS_Welcome.svg);
        background-position: right 3rem top;
        background-repeat: no-repeat;
        background-size: calc(50% - 3rem);
    }

        #modMultiPage #multipage1 .modal-body p {
            width: calc(50% - 3rem);
            font-size: 1rem;
            line-height: 1.5;
        }

        #modMultiPage #multipage1 .modal-body .form-group {
            width: calc(50% - 3rem);
        }

    #modMultiPage #multipage2 .modal-body {
        padding: 1.5rem;
        padding-top: 0;
        min-height: 25rem;
        background-image: url(/Images/Graphics/HS_Welcome.svg);
        background-position: right 3rem top;
        background-repeat: no-repeat;
        background-size: calc(50% - 3rem);
    }

        #modMultiPage #multipage2 .modal-body h2 {
            margin-top: 1rem;
            margin-bottom: 0;
        }

        #modMultiPage #multipage2 .modal-body p {
            width: calc(50% - 3rem);
            font-size: 1rem;
            line-height: 1.5;
        }

        #modMultiPage #multipage2 .modal-body .form-group {
            width: calc(50% - 3rem);
            padding-left: 1.5rem;
        }
    /* 5 digit property ID input and 'add' icon */
    #modMultiPage #multipage2 .form-group .property-id {
        position: relative;
        width: 12rem;
        display: flex;
        margin-bottom: 1rem;
    }

    #btnAlertChops {
        color: red;
    }

    td.chrmv {
        transition: all 0.2s ease-in-out;
    }

    /* Hotel remove button (minus icon) */
    #modMultiPage #multipage2 .form-group #ctl00_rgvChopsHotels tr td {
        position: relative;
    }

    #modMultiPage .signup-form-labels {
        font-size: 0.75rem;
        font-weight: 500;
        /*color: #9ea0a5;*/ /* Fallback for IE */
        color: var(--grey-50);
    }

    #modMultiPage #multipage3 .modal-body {
        padding-top: 1.5rem;
        padding-bottom: 0.5rem;
    }

        #modMultiPage #multipage3 .modal-body h6 {
            font-size: 0.875rem;
            font-weight: 800;
        }

        #modMultiPage #multipage3 .modal-body .signup-terms {
            overflow: auto !important;
            height: 400px;
            margin-bottom: 2.5rem;
            padding-right: 1.5rem;
            padding-bottom: 9rem;
        }

    #multipage3 {
        position: relative;
    }

        #multipage3 .signup-terms::after {
            position: absolute;
            top: 3rem;
            content: '';
            width: calc(100% - 3rem - 20px);
            height: 400px;
            pointer-events: none;
            background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 65%, white);
        }

        #multipage3 .subscription-agreement {
            position: relative;
            float: right;
        }

            #multipage3 .subscription-agreement .svg-inline--fa {
                margin: 0 0.5rem;
                font-size: 1rem;
                color: #ff0000;
            }

    #modMultiPage #multipage4 .modal-header h2.modal-title {
        font-size: 1.875rem;
        line-height: 1.47;
        padding-left: 0.5rem;
    }

    #modMultiPage #multipage4 .modal-body {
        padding: 1.5rem;
        margin-top: -1.5rem;
        min-height: 29rem;
        background-image: url(/Images/Graphics/HS_Success.svg);
        background-position: right 3rem top;
        background-repeat: no-repeat;
        background-size: calc(50% - 3rem);
        overflow: visible;
    }

        #modMultiPage #multipage4 .modal-body p {
            width: 50%;
            font-size: 1rem;
            line-height: 1.5;
        }

    @media (min-width: 992px) {
        #modMultiPage #multipage3 .modal-body {
            padding-left: 12.5%;
            padding-right: 12.5%;
        }

        #multipage3 .signup-terms::after {
            width: calc(75% - 20px);
        }
    }

    /* Signin Page - Footer Modals */
    #sign-in-page .modal-header {
        border-bottom: none;
        padding: 1.5rem;
    }

    #sign-in-page .modal-title {
        font-size: 1.875rem;
        line-height: 1.47;
    }

    #sign-in-page .modal-content {
        height: 90vh;
    }

    #sign-in-page .modal-body {
        padding: 0.75rem;
        overflow: auto;
    }

    #sign-in-page .modal-footer {
        position: relative;
    }

        #sign-in-page .modal-footer:after {
            position: absolute;
            top: calc(-40vh - 1px);
            left: 0;
            content: '';
            width: calc(100% - 20px);
            height: 40vh;
            pointer-events: none;
            background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 65%, white);
        }

    /* DATASET MODAL - Adding scroll bar to the competitive sets tree */
    #competitiveSets, #internalSets {
        /*overflow-y: auto;*/
        height: 385px;
    }

    /* ---------------------------------------------------
//////////////////////////////////////////////////////
    
    10. PROGRESS BAR

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

    .progress {
        height: 1.5rem;
        font-weight: 500;
    }

    /* ---------------------------------------------------
//////////////////////////////////////////////////////
    
    11. TABS

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

    .modal-header .nav-link {
        display: block;
        padding: 0rem 1rem;
        line-height: 3.5rem;
        font-size: 1rem;
        font-weight: 500;
        /*color: #3e3f42;*/ /* Fallback for IE */
        color: var(--charcoal-grey);
    }

        .modal-header .nav-link:hover, .modal-header .nav-link:focus {
            text-decoration: none;
        }

        .modal-header .nav-link.disabled {
            color: #6c757d;
            pointer-events: none;
            cursor: default;
        }

    .nav-tabs {
        border-bottom: 0;
    }

        .nav-tabs .nav-item {
            margin-bottom: 0;
        }
        /* Tabs bootstrap override */
        .nav-tabs .nav-link {
            border: 0;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-bottom: 5px solid transparent;
        }

    #modRpExecutive .nav-tabs .nav-link, #modKPIModify .nav-tabs .nav-link {
        padding: 0.5rem 0rem;
        margin: 0 1rem;
    }

    #modRpExecutive .nav-tabs .nav-item:first-child .nav-link, #modKPIModify .nav-tabs .nav-item:first-child .nav-link {
        margin-left: 0;
    }

    .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
        /*border-color: #e9ecef #e9ecef #dee2e6;*/
        border-bottom: 5px solid transparent;
    }

    .nav-tabs .nav-link.disabled {
        color: #6c757d;
        background-color: transparent;
        border-color: transparent;
    }

    .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
        color: #495057;
        background-color: transparent;
        border: 0;
        border-bottom: 5px solid var(--primary1); /* See theme for IE fallback */
    }

    .nav-tabs .dropdown-menu {
        margin-top: -1px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .nav-pills .nav-link {
        border-radius: 0.25rem;
    }

        .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
            color: #fff;
            background-color: #007bff;
        }

    .nav-fill .nav-item {
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        text-align: center;
    }

    .nav-justified .nav-item {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        text-align: center;
    }

    .tab-content > .tab-pane {
        display: none;
    }

    .tab-content > .active {
        display: block;
    }

    /* ---------------------------------------------------
//////////////////////////////////////////////////////
    
    12. PAGE CONTENT

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

    #main-content .page-content {
        min-height: calc(100vh - 148px);
        border-bottom: 0;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        /*border-left: solid 1px #eaedf3;*/
        /*border-top-left-radius: 0.25rem;*/
        -webkit-animation: fade-in 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
        animation: fade-in 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    }

    @media (min-width:1400px) {
        #main-content .page-content {
            min-height: calc(100vh - 152px);
        }
    }

    #main-content:not(.has-tabs) .page-content {
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
        background-color: white;
    }

    /* Todo - Check if general-page class is still being using */
    .page-content .row.general-page {
        justify-content: center;
        align-items: center !important;
        padding: 2.75rem 0.75rem 0.75rem 0.75rem;
        min-height: calc(100vh - 176px);
    }

        .page-content .row.general-page .col {
            padding-bottom: 2.5rem;
        }

        .page-content .row.general-page p {
            line-height: 1.5;
        }

        .page-content .row.general-page h2 {
        }

        .page-content .row.general-page .page-bg-graphic {
            padding: 2rem 0;
            width: 100%;
        }

        .page-content .row.general-page.membership p, .page-content .row.general-page.membership h2 {
            text-align: center;
        }

        .page-content .row.general-page.membership .btn {
            margin-top: 1rem;
        }

    /*These styles could become thead default row and column spacing used throughout*/
    .page-content.container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .page-content .row:not(.no-gutters) {
        margin-left: -0.75rem;
        margin-right: -0.75rem;
    }

    #main-content.home .page-content {
        box-shadow: none;
        background-color: transparent;
    }
        /*NB the new designs for side menu have a larger gap between the panels and menu, need to review each page at some point for better continuity*/
        #main-content.home .page-content.container-fluid {
            padding-left: 1rem;
            padding-right: 1rem;
        }

    /* ---------------------------------------------------
//////////////////////////////////////////////////////
    
    13. FOOTER

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

    #main-content footer {
        min-height: calc(2rem + 1px);
        border-top: 0;
        font-size: 0.625rem;
        margin-top: auto;
        text-align: center;
    }

.copyright {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 0.75rem;
}

    /* ---------------------------------------------------
//////////////////////////////////////////////////////
    
    14.0 CARDS

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

    .card-header {
        padding: 0.625rem 1rem;
        margin-bottom: 0;
        color: inherit;
        background-color: #fff;
        border-bottom: 1px solid #eaedf3;
        width: 100%;
    }

    .dashboard .card-header {
        position: absolute;
    }

    .dashboard .card-body {
        padding: 1.25rem 1.25rem 0 1.25rem;
    }

    .card-title-div {
        position: absolute;
        top: 4.375rem;
    }

    .home .card {
        min-height: unset;
    }

        .home .card p {
            /*margin: 0.625rem 0;*/
            margin: 0 0 1rem 0;
        }

    .home .card-header {
        padding: 2rem 1rem 0 1rem;
        border-bottom: 0;
    }

    .home .card-body {
        padding: 2rem 1rem;
    }

    .home #blogFeed.card-body {
        padding-top: 1.75rem;
    }

    .home .card-header > .row:not(.no-gutters), .home .card-body > .row:not(.no-gutters) {
        margin-left: 0;
        margin-right: 0;
    }

    .home .card-body .btn-link-baselink {
        margin: 0;
        padding: 0;
    }

    .home .card-body .alert {
        display: flex;
        padding: 2rem;
        margin-bottom: 0;
        background: #F5F7FB;
        border-radius: 0.25rem;
        border: 0;
    }

        .home .card-body .alert .circle {
            background-color: #FFE69C;
            margin-right: 1rem;
            border-radius: 50%;
            height: 2rem;
            width: 2rem;
            flex: 1 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
        }

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

    BLOG FEED

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

    #blogFeed iframe {
        border: 0;
        width: 100%;
        min-height: 1100px;
    }

/*  For 8 boxes */
    @media (min-width: 480px) {
        #blogFeed iframe {
            min-height: 1200px;
        }
    }@media (min-width: 736px) {
        #blogFeed iframe {
            min-height: 1130px;
        }
    }
    @media (min-width: 1040px) {
        #blogFeed iframe {
            min-height: 800px;
        }
    }

    @media (min-width: 1200px) {
        #blogFeed iframe {
            min-height: 52rem;
        }
    }

    @media (min-width: 1600px) {
        #blogFeed iframe {
            min-height: 50rem;
        }
    }

    /* ---------------------------------------------------
//////////////////////////////////////////////////////
    
    14.1 CARD COLUMNS

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

    .card-columns .card {
        margin-bottom: 1.5rem;
    }

    @media (min-width: 576px) {
        .card-columns {
            -webkit-column-count: 1;
            -moz-column-count: 1;
            column-count: 1;
            -webkit-column-gap: 1.5rem;
            -moz-column-gap: 1.5rem;
            column-gap: 1.5rem;
            orphans: 1;
            widows: 1;
        }
        
            .card-columns .card {
                display: inline-block;
                width: 100%;
            }
    }

    /* ---------------------------------------------------
//////////////////////////////////////////////////////
    
    15. DEMO

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

    .row.demo-panel {
        position: relative;
        margin: 0.75rem;
        padding: 1.5rem 1.125rem;
        border-radius: 0.25rem;
        box-shadow: 0 1px 1px 0 rgba(22, 29, 37, 0.1);
        color: #fff !important;
        background: linear-gradient(to top, var(--water-blue), var(--azul));
    }

        .row.demo-panel .btn {
            height: 2.5rem;
            line-height: 2.5rem;
            padding-top: 0;
            padding-bottom: 0;
        }

    .demo-panel a.btn.btn-link-white {
        text-decoration: none;
        border-bottom: white 2px dotted;
        height: 2rem;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: -1rem;
        margin-left: 0.75rem;
        margin-right: 0.75rem;
    }

    .demo-panel *:not(.btn) {
        color: white !important;
    }

    .demo-panel::before {
        position: absolute;
        top: 50%;
        left: 1.75rem;
        font-family: FontAwesome;
        content: '\f06a';
        font-style: normal;
        font-variant: normal;
        font-size: 6rem;
        transform: translateY(-50%);
        color: rgba(255,255,255,0.1);
    }

    .row.signed-panel {
        position: relative;
        margin: 0.75rem;
        padding: 1.5rem 1.125rem;
        border-radius: 0.25rem;
        box-shadow: 0 1px 1px 0 rgba(22, 29, 37, 0.1);
        color: #fff !important;
        background: linear-gradient(to top, #AD321C, #E26811);
    }

    .signed-panel *:not(.btn) {
        color: white !important;
    }

    .signed-panel::before {
        position: absolute;
        top: 50%;
        right: 1.75rem;
        font-family: FontAwesome;
        content: '\f164';
        font-style: normal;
        font-variant: normal;
        font-size: 6rem;
        transform: translateY(-50%);
        color: rgba(255,255,255,0.1);
    }

    /* ---------------------------------------------------
//////////////////////////////////////////////////////
    
    16. DASHBOARD

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

    svg.highcharts-root {
        font-family: 'Roboto', "Helvetica Neue", Arial, sans-serif !important;
    }

    /* Hides the dashboard cards hamburger menu on small screens */
    @media screen and (max-width:1200px) {
        g.highcharts-exporting-group {
            display: none;
        }
    }

    .page-content .row.dashboard {
        padding: 0.75rem 0;
    }

        .page-content .row.dashboard .col-md-2 {
            padding: 0 1rem;
        }

    .card {
        position: relative;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        min-width: 0;
        word-wrap: break-word;
        background-color: #fff;
        background-clip: border-box;
        border: 0;
        border-radius: 0.25rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        transition: all 0.2s ease-in-out;
    }

    .dashboard .card .card-header {
        background-color: transparent;
    }

    .dashboard .card h3.card-title {
        font-size: 1.125rem;
        font-weight: 500;
        line-height: 1.46;
        background-color: #fff;
        display: inline-block;
        margin-bottom: 0;
        z-index: 1;
        transition: all 0.2s ease-in-out;
    }

    @media (min-width: 1440px) {
        .dashboard .card h3.card-title {
            font-size: 20px;
        }
    }

    @media (min-width: 1600px) {
        .dashboard .card h3.card-title {
            font-size: 22px;
        }
    }

    @media (min-width: 1920px) {
        .dashboard .card h3.card-title {
            font-size: 26px;
        }
    }

    .card:hover {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    }

    .page-content .dashboard .card {
        width: 100%;
    }

        .page-content .dashboard .card p:first-child {
            font-size: 0.875rem;
            font-weight: 500;
            /*color: #3e3f42;*/ /* Fallback for IE */
            color: var(--charcoal-grey);
            margin: 0;
        }

        .page-content .dashboard .card p:last-child {
            font-size: 0.75rem;
            color: #9ea0a5;
            margin: 0;
        }

    /*repositioning dashboard graph icons*/
    g.highcharts-exporting-group g.highcharts-button.highcharts-contextbutton.highcharts-button-normal {
        position: absolute;
        top: 0;
    }

    /* ---------------------------------------------------
//////////////////////////////////////////////////////
    
    17. GRAPHS & TABLES

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

    .row.graph-table {
        padding: 0.75rem 0;
    }

    .row.dashboard + .row.graph-table, .row.dashboard + .row.graph-table + .row.graph-table {
        padding: 0.75rem;
    }

    g.highcharts-button {
        cursor: pointer;
    }

    .grid-top-title .head-table {
        width: 100%;
        height: 40px;
        background-color: var(--tbl-head-title); /*IE fallback in themes*/
        font-size: 12px;
        font-weight: 600;
        font-style: normal;
        font-stretch: normal;
        line-height: normal;
        letter-spacing: normal;
        color: #fff;
        line-height: 1.5;
        text-align: center;
    }

    /*fix needs to include a different way of adding this var table = "<table style='width:100%;table-layout:fixed;empty-cells:show;'>";*/
    /*#floatinghead > .floatinghead-table {
    width: 100%;
    table-layout: fixed;
    empty-cells: show;
}*/

    .grid-top-title td.htd-metric {
        border-right: solid 1px var(--tbl-bdark);
    }

    .grid-top-title td.htd-col1 {
        border: none;
    }

    .grid-top-title td.htd-col2 {
        border-left: solid 1px var(--tbl-bdark);
    }


    /* -------------------------------------------------------------------
//////////////////////////////////////////////////////////////////////
    
    MODAL - Choice Trial Benchmarking Data / Profit Calculator

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




    @media (min-width: 576px) {
        #trialBenchmarkingData .modal-xl {
            max-width: 100%;
            padding: 0 1rem;
        }
    }

    @media (min-width: 992px) {
        #trialBenchmarkingData .modal-xl {
            max-width: 100%;
        }
    }

    @media (min-width: 1200px) {
        #trialBenchmarkingData .modal-xl {
            max-width: 1200px;
        }
    }




    #trialBenchmarkingData table {
        font-size: 0.875rem;
    }

    @media screen and (min-width: 1920px) {
        #trialBenchmarkingData table {
            font-size: 1rem; /*equivalent of 12px with html font size set to 0.75*/
        }
    }

    #trialBenchmarkingData .modal-content {
        padding: 2rem;
    }

    #trialBenchmarkingData .modal-header, #trialBenchmarkingData .modal-body {
        padding: 0;
        border-bottom: 0;
    }

    #trialBenchmarkingData .modal-header {
        padding-bottom: 2rem;
        border-bottom: 0;
    }

    #trialBenchmarkingData .modal-header-logo {
        width: calc(1.625rem * 1.46);
        height: calc(1.625rem * 1.46);
        margin-right: 1rem;
    }

    #trialBenchmarkingData .modal-title {
        font-size: 1.625rem;
        line-height: 1.46;
    }

    #trialBenchmarkingData .modal-body {
        background-color: #FAFAFA;
    }

    #trialBenchmarkingData .table {
        margin-bottom: 4.5rem;
    }

        #trialBenchmarkingData .table th,
        #trialBenchmarkingData .table td {
            padding: 0.75rem 1rem;
            vertical-align: middle;
            border-top: 0;
            border-bottom: 1px solid #E3E3E3;
        }

        #trialBenchmarkingData .table .thead-dark th {
            color: #fff;
            background: #E26811; /* Choice orange */
            border: 1px solid #E26811;
            border-top: none;
            border-bottom: 2px solid #E3E3E3;
            padding: 1rem;
        }

    #trialBenchmarkingData .form-control {
        display: block;
        width: 100%;
        height: unset;
        padding: calc(0.25rem - 1px) 0.5rem;
        font-size: 1rem;
        line-height: 1.5;
        color: #6b6c6f;
        background-color: #fff;
        border: 1px solid #F38A31;
        border-radius: 0.25rem;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

        #trialBenchmarkingData .form-control:focus {
            color: #6b6c6f;
            background-color: #fff;
            border-color: #007BFF;
            outline: 0;
            box-shadow: 0 0 0 2px #007BFF;
        }

    #trialBenchmarkingData .bg-blue {
        border-color: #007BFF;
        background-color: #007BFF;
        color: #fff;
    }

    #trialBenchmarkingData tr:hover {
        background-color: #e3e3e3;
        transition: all 0.25s ease-out;
    }

    /* NB cant manipulate pseudo elements with jquery directly */
    .after {
        /*keep empty*/
    }

    #trialBenchmarkingData tr:not(:first-child).after::after {
        position: absolute;
        font-family: FontAwesome;
        font-weight: 100;
        color: #007BFF;
        content: '\f1ec';
        text-align: center;
        line-height: 2rem;
        right: 1rem;
        width: 2rem;
        height: 2rem;
        transform: translateY(calc(0.75rem + 1px));
        border-radius: 50%;
        cursor: pointer;
        background-color: #F3F3F3;
        transition: all 0.25s ease-out;
        display: block;
        pointer-events: none;
        -webkit-animation: fade-in 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
        animation: fade-in 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
        z-index: 1;
    }

    td.data-values {
        position: relative;
    }
    /* Workaround to detect click event over the psuedo element icon */
    #trialBenchmarkingData td > span {
        position: absolute;
        top: 0rem;
        right: 1rem;
        width: 2rem;
        height: 2rem;
        transform: translateY(calc(0.75rem + 1px));
        border-radius: 50%;
        cursor: pointer;
        background-color: rgba(0,0,0,0);
        z-index: 2;
    }

    #trialBenchmarkingData td {
        transition: all 0.5s ease-in-out;
    }

    #trialBenchmarkingData .blur {
        filter: blur(5px);
    }

    #trialBenchmarkingData .table-footer {
        padding: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }

    #trialBenchmarkingData .btn {
        font-size: 0.875rem;
    }

    #trialBenchmarkingData #resetButton {
        margin-right: 0.75rem;
    }

    @media screen and (min-width: 1920px) {
        #trialBenchmarkingData .btn {
            font-size: 1rem;
        }
    }



    /* ---------------------------------------------------
//////////////////////////////////////////////////////
    
    17.1 EXECUTIVE SUMMARY

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
------------------------------------------------------ */
    .row.executive {
        padding: 0.75rem 1.5rem 1.5rem;
    }

        .row.executive > div {
            padding: 0rem;
        }

        .row.executive .empty {
            min-height: 476px;
            padding: 2.5rem;
            background: #F7F9FA;
            border-radius: 0.25rem;
            text-align: center;
        }

            .row.executive .empty .bg-graphic {
                display: block;
                height: 258px;
                max-height: 258px;
                background-image: url(/Images/Graphics/Empty_Hots.svg);
                background-position: center;
                background-repeat: no-repeat;
                background-size: contain;
            }

            .row.executive .empty .btn-primary {
                padding: 1rem;
            }

    .modal-fullbrowser {
        max-width: 100vw;
        margin: 0;
    }

    /* Removes the 17px that the browser adds if browser window height very small - scroll bar related */
    #modRpExecutive, #modDataset, #modKPIModify {
        padding-left: 0 !important;
    }

    #modKPIModify {
        padding-right: 0 !important;
    }

    .modal-fullbrowser .modal-content {
        min-height: 100vh;
    }

    .modal-fullbrowser .modal-header {
        padding: 1rem;
        align-items: center;
        color: white;
        background-color: #282F36;
    }

    .modal-fullbrowser .modal-body {
        padding: 3.5rem 1rem 1rem;
    }

    .modal-fullbrowser .modal-header h4.modal-title {
        color: white !important;
        white-space: nowrap;
    }

    .modal-fullbrowser .modal-header .close {
        color: white;
    }

    .modal-fullbrowser .modal-content, .modal-fullbrowser .modal-header, .modal-fullbrowser .modal-footer {
        border-radius: 0;
        border: none;
    }

    .create-report-step-3 textarea {
        resize: none;
    }

    /* BEGIN - STEP PROGRESS BAR */
    .progressbar {
        position: relative;
        counter-reset: step;
        width: 100%;
        max-width: 608px;
        margin: 0 auto;
        padding: 0;
        z-index: 2;
        display: flex;
        justify-content: center;
    }

        .progressbar li {
            list-style-type: none;
            width: 33.33%;
            float: left;
            font-size: 1rem;
            font-weight: 500;
            position: relative;
            text-align: center;
            /*color: #f7f9fa;*/
            color: rgba(150, 150, 150, 1);
        }

            .progressbar li:before {
                width: 2rem;
                height: 2rem;
                content: counter(step);
                counter-increment: step;
                line-height: 1.9rem;
                border: 2px solid rgba(150, 150, 150, 1);
                display: block;
                text-align: center;
                margin: 0 auto 0.25rem auto;
                border-radius: 50%;
                /*background-color: #f7f9fa;*/
                background-color: rgba(150, 150, 150, 1);
                color: #4A4B4B;
                font-weight: 500;
                padding: 0;
            }

            .progressbar li.step-completed:before {
                font-family: "Font Awesome 5 Pro";
                /*font-weight: 900;*/
                content: "\f00c";
                color: white;
                background-color: #36AE47 !important;
                border-color: #34AA44 !important;
            }

            .progressbar li:after {
                width: 100%;
                height: 2px;
                content: '';
                position: absolute;
                color: #282F36;
                background-color: #f7f9fa;
                top: 1rem;
                left: -50%;
                z-index: -1;
            }

            .progressbar li:first-child:after {
                content: none;
            }

            .progressbar li.active {
                color: rgb(238, 137, 45);
                color: white;
            }

                .progressbar li.active:before {
                    color: white;
                    border-color: rgb(238, 137, 45);
                    background-color: rgb(238, 137, 45);
                }

            .progressbar li.step-completed {
                color: #36AE47;
            }

    /* Misc (to organise) */

    .create-report-step-1 > p, .create-report-step-2 .kpi-select > p {
        margin-top: 0;
        margin-bottom: 2rem;
    }

    .hotels-search {
        max-width: 449px;
        margin-bottom: 0.5rem;
    }

    /* Used currently on Glossary and Mappings pages, and modRPExecutive */
    .usali-search, .glossary-search, .datasets-search {
        max-width: 449px;
        width: 100%;
        margin-bottom: 0.5rem;
    }

        .datasets-search .btn {
            font-size: 0.875rem;
            transition: font-size 0.2s ease-out;
        }

    @media (min-width:1920px) {
        .datasets-search .btn {
            font-size: 1rem;
            transition: font-size 0.2s ease-out;
        }
    }

    .hotels-search .form-control /*, .usali-search .form-control*/ {
        height: 3rem;
        line-height: 3rem;
        font-size: 0.875rem;
        border: none;
        padding-left: 0;
        background-color: transparent;
    }

    .hotels-search .input-group /*, .usali-search .input-group*/ {
        height: 3rem;
        background: #F7F9FA;
        border: 1px solid #C4C4C4;
        box-sizing: border-box;
        border-radius: 0.25rem;
    }

    .hotels-search .svg-inline--fa /*, .usali-search .svg-inline--fa */ {
        font-size: 1.25rem;
    }

    .search-icon-not-btn {
        color: #3e3f42;
        font-weight: 400;
        z-index: 2;
        text-align: center;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-color: transparent;
        border: 0px solid transparent;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        padding: 0rem 0.75rem;
        font-size: 0.75rem;
        line-height: 3rem;
        height: 3rem;
        margin: 0;
    }

    .hotels-filter .btn-group {
        margin: 0 0.25rem;
    }

    .hotels-filter .dropdown-menu {
        font-size: 0.75rem;
    }

    .hotels-table, .groups-table {
        max-width: 100%;
        flex-basis: auto;
    }

    .metrics-table {
        max-width: 100%;
        flex-basis: auto;
    }

        .metrics-table table #ctl00_ContentPlaceHolder1_rgvAvailMetrics_GridData {
            height: 100% !important;
        }

        .hotels-table .table th, .hotels-table .table td, .groups-table .table th, .groups-table .table td, .metrics-table .table th, .metrics-table .table td {
            height: 3rem;
            vertical-align: middle;
            padding: 0 0.75rem;
        }

        .hotels-table .parentcell, .groups-table .parentcell, .metrics-table .parent-met-cell {
            cursor: pointer;
        }

    .bg-na {
        background-color: rgba(0, 0, 0, 0.03) !important;
        background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.3' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
        pointer-events: none;
    }

    .metrics-table tr.rgMultiHeaderRow:nth-child(1) th.rgHeader:nth-child(1) {
        background-color: rgba(0, 0, 0, 0.03);
    }

    .metrics-table tr.rgMultiHeaderRow:nth-child(1) th.rgHeader:nth-child(2) {
        background-color: rgba(0, 0, 0, 0.08);
    }

    .metrics-table tr.rgMultiHeaderRow:nth-child(2) {
        background-color: #495057;
        color: white;
    }
    /*
.metrics-table td.parent-met-cell:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.08);
}

.metrics-table td.parent-met-cell:nth-of-type(even) {
}*/

    .hotels-filter .dropdown-menu {
        height: auto;
        max-height: 300px;
        overflow-y: auto;
    }

    #report-table {
        background-color: transparent;
    }
    /*Table info popup*/
    .info-view-btn {
        font-size: 1rem;
        margin-left: 0.25rem;
        margin-right: -1.25rem;
        transition: all 0.2s ease-in-out;
        pointer-events: none;
        transform: translateY(0.15rem);
        -webkit-transform: translateY(0.15rem);
    }

        .info-view-btn:hover {
            color: #1461d2;
        }

    #modRpExecutive .generating-report-overlay {
        position: absolute;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background-color: rgba(182, 182, 184,0.93);
        z-index: 10;
    }

    .generating-report-overlay-2 {
        position: absolute;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background-color: rgba(182, 182, 184,0.93);
        z-index: 10;
    }

    .generating {
        position: relative;
        z-index: 11;
        color: white !important;
    }

    .generating-2 {
        position: relative;
        z-index: 110;
        color: white !important;
    }

    /*Loader animation called from anywhere*/
    .loader-animation {
        position: fixed;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: calc(100vh - 92px);
        border-top-left-radius: 0.25rem;
        background-color: white;
    }

    /*.loader-animation-100vw {
        width: 100vw!important;
        z-index: 9999!important;
        left: 0!important;
        top:0!important;
    }*/

    .loader-animation-modal {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 400px;
        width: 100%;
        border-top-left-radius: 0.25rem;
        z-index: 9999999;
        background-color: white;
    }

    #modRpExecutive {
        background-color: transparent !important;
        padding-right: 0 !important;
    }

    .logo-spinner {
        -webkit-animation: spinner 1s cubic-bezier(0.6, 0, 0.4, 1) infinite;
        animation: spinner 1s cubic-bezier(0.6, 0, 0.4, 1) infinite;
    }

    .bus-anim {
        width: 100%;
        max-width: 26vw;
        margin-bottom: 30px;
    }



    @-webkit-keyframes spinner {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        to {
            -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
        }
    }

    @keyframes spinner {

        0% {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(359deg);
        }
    }

    .create-report-step-2 .bg-graphic {
        height: 200px;
        max-height: 200px;
    }

    .hotels-filter .btn-group, .report-filter .btn-group, .usali-filter .btn-group {
        position: relative;
    }

        .hotels-filter .btn-group .reset-filters-btn, .report-filter .btn-group .reset-filters-btn, .usali-filter .btn-group .reset-filters-btn {
            position: absolute;
            display: none;
            top: 0;
            left: 0;
            width: 1.6rem;
            height: 100%;
            background-color: rgba(255,255,255,0);
            z-index: 99;
            cursor: pointer;
            transition: 0.2s all ease-in-out;
        }

            .hotels-filter .btn-group .reset-filters-btn .close {
                text-shadow: none;
                color: white;
                line-height: 2.5rem;
            }

            .report-filter .btn-group .reset-filters-btn .close {
                text-shadow: none;
                color: white;
                line-height: 2rem;
            }

        .hotels-filter .btn-group.filter-clear .btn, .report-filter .btn-group.filter-clear .btn, .usali-filter .btn-group.filter-clear .btn {
            padding-left: 2rem;
        }

        .hotels-filter .btn-group.filter-clear .reset-filters-btn, .report-filter .btn-group.filter-clear .reset-filters-btn, .usali-filter .btn-group.filter-clear .reset-filters-btn {
            display: block;
        }

        .hotels-filter .btn-group.filter-clear .btn:first-child, .report-filter .btn-group.filter-clear .btn:first-child, .usali-filter .btn-group.filter-clear .btn:first-child {
            background-color: #007bff;
            background: #007bff;
            color: #fff;
        }

    /* -------------------------------------------------------------
        EXECUTIVE REPORT TABLE
   ------------------------------------------------------------- */

    .executive-report > table {
        max-width: 10rem;
    }

    .executive-report > thead .rgMultiHeaderRow table {
        margin-bottom: 0px;
    }

    .executive-report table > thead .rgMultiHeaderRow th {
        border-bottom: 0px;
    }

    .executive-report table > thead .rgMultiHeaderRow:nth-child(2) th {
        border-top: 0px;
    }

    .executive-report .rgMultiHeaderRow:first-child th {
        padding-bottom: 0;
        padding: 0;
    }

    .executive-report table > thead .rgMultiHeaderRow:first-child th {
        border-top: 0;
    }

        .executive-report table > thead .rgMultiHeaderRow:first-child th table {
            margin-bottom: 0;
        }

        .executive-report table > thead .rgMultiHeaderRow:first-child th:nth-child(2) {
            padding-left: 0;
        }

    .executive-report table thead .rgMultiHeaderRow:nth-child(2) th {
        position: relative;
        padding: 1rem 0;
        vertical-align: middle;
        cursor: pointer;
    }
        /* Sort arrows */
        .executive-report table thead .rgMultiHeaderRow:nth-child(2) th:not(:nth-child(1))::after {
            transition: all 0.25s ease-in-out !important;
            position: absolute;
            font-family: FontAwesome;
            font-style: normal;
            font-variant: normal;
            font-size: 1rem;
            vertical-align: middle;
            top: 50%;
            padding-left: 0.5rem;
            transform: translate(0, -50%);
        }

        .executive-report table thead .rgMultiHeaderRow:nth-child(2) th:nth-child(2n + 2).sort-no::after {
            content: '\f0dc';
        }

        .executive-report table thead .rgMultiHeaderRow:nth-child(2) th:not(:nth-child(1)).sort-up::after {
            content: '\f0de';
        }

        .executive-report table thead .rgMultiHeaderRow:nth-child(2) th:not(:nth-child(1)).sort-down::after {
            content: '\f0dd';
        }

    .executive-report > table thead > .rgMultiHeaderRow:nth-child(1) th:nth-child(n+1) {
        border-right: 1px solid #dee2e6;
    }

    .executive-report > table thead > .rgMultiHeaderRow:nth-child(1) th:nth-child(n+2) {
        border-left: 1px solid #dee2e6;
        border-right: 1px solid #dee2e6;
        vertical-align: top;
    }

    .executive-report > table thead > .rgMultiHeaderRow:nth-child(2) th:nth-child(2n+2) {
        border-left: 1px solid #dee2e6;
        border-right: 1px solid #dee2e6;
    }

    .executive-report > table > tbody td {
        border-left: 1px solid #dee2e6;
        border-right: 1px solid #dee2e6;
    }

    .executive-report .blankcolumn {
        width: 1.5rem;
        font-size: 0;
        border: 0;
    }

    .executive-report table > tbody th, .executive-report table > tbody td {
        vertical-align: middle;
    }

    .executive-report table tbody tr.rgRow, .executive-report table tbody tr.rgAltRow {
        border: 0px;
        height: auto;
    }

    .executive-report table tbody {
        border-bottom: 1px solid #dee2e6 !important;
    }

    /* These table cell heights and padding are the medium setting, which can be adjusted in user action bar */

    /* (.kpi-table) */
    .executive-report > table > thead table td /*, .executive-report > table > thead th*/ {
        height: 3.58125rem;
    }

    .executive-report > table > thead table.table-report td.table-report-heading {
        height: 52px;
        padding: 1rem;
        vertical-align: middle;
    }

    .executive-report > table > thead table td {
        padding-top: 0;
        padding-bottom: 0;
    }

    .executive-report > table > tbody > tr > td {
        height: 2.75rem;
    }

    .executive-report > table > tbody > tr > td {
        padding-top: 0;
        padding-bottom: 0;
    }

    /* -------------------------------------------------------------
        JPOPPER BOX
   ------------------------------------------------------------- */

    .jpopper-box {
        border-radius: 0;
    }

        .jpopper-box table {
            width: 100%;
        }

            .jpopper-box table tr {
                width: 100%;
                display: block;
                padding: 0.5rem;
                background-color: #3e3f42;
                color: white;
            }

                .jpopper-box table tr:last-child {
                    font-weight: bold;
                }

            .jpopper-box table td {
                width: 80px;
                padding: 0.25rem 0.5rem;
            }

                .jpopper-box table td:nth-child(2n) {
                    width: 80px;
                    text-align: center;
                }

    /* ---------------------------------------------------
//////////////////////////////////////////////////////
    
    USALI MAPPING

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

    .instant-search .RadInput {
        flex: 1 0 auto;
        width: unset !important;
    }

    .usali-mapping-tree .card .card-header {
        padding-bottom: 2rem;
    }

    .usali-mapping-tree .card .card-body {
        overflow-y: hidden;
        padding-top: 0;
    }

    .usali-mapping-tree .card {
        min-height: calc(100vh - 165px);
    }

    .usali-mapping-nominals #nominal-refreshed {
        padding-top: 10px;
    }

    @media screen and (min-width: 1920px) {
        .usali-mapping-nominals #nominal-refreshed {
            padding-top: 7px;
        }
    }

    .usali-mapping-nominals .usali-filter .btn-group {
        height: 3rem;
    }

    .usali-mapping-nominals .card {
        height: calc(100vh - 165px);
        overflow-y: hidden;
    }

        .usali-mapping-nominals .card .card-body {
            display: flex;
            align-items: center;
            flex-direction: column;
        }

    .usali-mapping-nominals .empty-bg-graphic {
        display: block;
        height: 258px;
        max-height: 258px;
        width: 100%;
        background-image: url(/Images/Graphics/Empty_Hots.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .usali-mapping-nominals .usali-table .rgDataDiv {
        height: auto !important;
        max-height: calc(100vh - 33.25rem); /*NB. This table height will need tweaking if the contents above it changes*/
        overflow-y: scroll !important;
    }

    .usali-mapping-tree .RadTreeView {
        max-height: calc(100vh - 325px); /*NB. This table height will need tweaking if the contents above it changes*/
        overflow-y: scroll;
    }

    .usali-mapping-nominals table, .usali-schedules table {
        font-size: 0.875rem;
    }

    .usali-mapping-nominals .table {
        margin-bottom: 0;
    }

    .usali-mapping-nominals table thead tr {
        background-color: var(--tbl-head1);
        color: white;
    }

    .usali-mapping-nominals table thead th {
        border: none;
    }

    .usali-mapping-nominals .rgHeaderWrapper {
        background-color: var(--tbl-head1);
        border-bottom: 2px solid #dee2e6;
    }

    .usali-mapping-nominals table th, .usali-mapping-nominals table td {
        vertical-align: middle;
        padding: 1rem;
    }

    .usali-mapping-nominals table tbody tr:hover {
        background-color: #e3e3e3;
        cursor: pointer;
        transition: all 0.25s ease-out;
    }

    .usali-mapping-tree ul.rtUL {
        cursor: pointer;
        transition: all 0.25s ease-out;
    }

    .usali-mapping-tree .has-search .form-control, .usali-mapping-nominals .has-search .form-control {
        height: 3rem;
        padding: 0.5rem 0.75rem;
        padding-left: 2.375rem;
        background-color: #F7F9FA;
    }

    .usali-mapping-tree .form-group {
        position: relative;
    }

    .usali-mapping-tree .form-group, .usali-mapping-nominals .form-group, .usali-mapping-nominals .input-group {
        max-width: 449px;
        width: 100%;
    }

    .usali-mapping-tree .form-control {
        font: unset !important;
        font-family: 'Roboto', "Helvetica Neue", Arial, sans-serif !important;
        color: #6b6c6f !important;
    }

    .usali-mapping-tree .form-control, .usali-mapping-nominals .form-control, .usali-schedule-glossary .form-control, .usali-mapping-nominals .RadInput_Default .riTextBox,
    /*#modRpExecutive .form-control, #modRpExecutive .RadInput_Default .riTextBox */ {
        font-size: 0.875rem !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
        border: 1px solid #ced4da !important;
    }

    @media screen and (min-width: 1920px) {
        .usali-mapping-tree .form-control, .usali-mapping-nominals .form-control, .usali-schedule-glossary .form-control,
        /*#modRpExecutive .form-control*/ {
            font-size: 1rem !important;
        }
    }

    .searchUT-results {
        padding: 0.75rem 0;
        max-height: 33.33vh;
        overflow-y: scroll;
        background-color: rgba(0,98,204,0.05);
    }

        .searchUT-results .search-item {
            position: relative;
            padding: 0.25rem 0.75rem;
            transition: all 0.25s ease-in-out;
        }

            .searchUT-results .search-item:hover {
                cursor: pointer;
                background-color: #e3e3e3;
            }

            .searchUT-results .search-item::before {
                opacity: 0;
                display: block;
                position: absolute;
                content: '\f054';
                font-family: FontAwesome;
                font-style: normal;
                line-height: 1.5;
                padding-top: 0.25rem;
                top: 0;
                right: 1rem;
                transition: all 0.25s ease-in-out;
            }

            .searchUT-results .search-item:hover::before {
                opacity: 1;
                transition: all 0.25s ease-in-out;
            }

    .usali-mapping-nominals .input-group {
        line-height: unset;
        height: unset;
        border: none;
    }

        /* NB Find all instances of form-control and remove the targetted styling if not needed anymore */
        .usali-mapping-nominals .input-group .form-control, .usali-schedule-glossary .input-group .form-control {
            height: 3rem;
            padding: 0;
            padding-left: 0.75rem;
        }
    /* This positions the x icon in search box */
    .usali-mapping-tree .searchUTclr {
        position: absolute;
        z-index: 2;
        display: block;
        height: 3rem;
        line-height: 3rem;
        right: 0.75rem;
        cursor: pointer;
    }

    /* Can replace this .form-control-feedback with the newer version*/
    .usali-mapping-tree .has-search .form-control-feedback {
        position: absolute;
        z-index: 2;
        display: block;
        width: 2.375rem;
        height: 3rem;
        line-height: 3rem;
        text-align: center;
        pointer-events: none;
        color: #aaa;
    }

    .usali-mapping-nominals .has-search .form-control-feedback {
        position: absolute;
        padding: calc(0.5rem + 1px) 0;
        z-index: 2;
        display: block;
        width: 2.375rem;
        height: auto;
        text-align: center;
        pointer-events: none;
        color: #aaa;
        font-size: 0.875rem;
        line-height: 1.5;
    }

    /*Table search filter*/
    .usali-mapping-nominals .table-search-filter {
        max-width: 225px;
        position: relative;
        margin-bottom: 0;
    }

        .usali-mapping-nominals .table-search-filter.has-search .form-control {
            height: auto;
            border: 0 !important;
            background-color: rgba(255,255,255,0.7);
            color: var(--charcoal-grey);
        }

        .usali-mapping-nominals .table-search-filter.has-search .form-control-feedback {
            padding: calc(0.5rem + 2px) 0;
            color: var(--charcoal-grey);
        }


    .rtIn.not-used {
        color: #9ea0a5;
    }

        .rtIn.not-used:hover {
            color: #9ea0a5 !important;
        }

    .highlight {
        color: white;
        background-color: var(--search-highlight);
    }

    #gcontainerNMap table {
        font-size: 0.875rem;
    }

        #gcontainerNMap table thead tr {
            background-color: var(--tbl-head1);
            color: white;
        }

        #gcontainerNMap table th, #gcontainerNMap table td {
            vertical-align: middle;
            padding: 1rem;
        }


    /* ---------------------------------------------------
//////////////////////////////////////////////////////
    
    GLOSSARY OF TERMS / RATIO GLOSSARY

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

    #resLstGlossary {
        max-height: calc(100vh - 335px); /*in progress*/
        overflow-y: scroll;
    }

    .usali-schedule-glossary .card, .usali-schedules .card {
        height: calc(100vh - 165px);
    }

    .usali-schedules tr.rgRow, .usali-schedules tr.rgAltRow {
        height: unset;
        background-color: unset;
        border: none;
    }

    .usali-schedules td {
        padding: 1rem;
        border: none;
    }

    .usali-schedules td {
        position: relative;
    }

        .usali-schedules td:hover {
            cursor: pointer;
            background-color: #e3e3e3;
            transition: all 0.25s ease-in-out;
        }

        .usali-schedules td::before {
            opacity: 0;
            display: block;
            position: absolute;
            content: '\f054';
            font-family: FontAwesome;
            font-style: normal;
            line-height: 1.5;
            top: 50%;
            transform: translateY(-50%);
            right: 1rem;
            transition: all 0.25s ease-in-out;
        }

        .usali-schedules td:hover::before {
            opacity: 1;
        }

    .usali-schedules tr.schedule-selected td {
        color: var(--primary1);
        font-weight: 500;
        background-color: #e3e3e3;
        transition: all 0s;
    }

        .usali-schedules tr.schedule-selected td::before {
            opacity: 1;
        }

    /* Schedules Glossary */
    .usali-schedule-glossary #glossary-heading .fad {
        color: var(--primary1) !important;
    }

    .usali-schedule-glossary .search-item {
        padding: 1rem 1rem 2rem 1rem;
        /*border-bottom: solid 1px #dfdfdf;*/
    }

        .usali-schedule-glossary .search-item:nth-child(odd) {
            background-color: rgba(0, 0, 0, 0.05);
        }


    /* ---------------------------------------------------
//////////////////////////////////////////////////////
    
    18. BUTTONS

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
----------------------------------------------------- */
    .btn {
        display: inline-block;
        font-weight: 400;
        color: var(--charcoal-grey);
        text-align: center;
        vertical-align: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-color: transparent;
        border: 1px solid transparent;
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
        line-height: 1.5;
        border-radius: 0.25rem;
        /*transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out, opacity 0.25s ease-in-out;*/
        transition: all 0.2s ease-out;
        -webkit-animation: fade-in 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
        animation: fade-in 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    }

    @media screen and (min-width: 1920px) {
        .btn {
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
        }
    }

    @media screen and (prefers-reduced-motion: reduce) {
        .btn {
            transition: none;
        }
    }

    .hotels-filter .btn {
        height: 2.5rem;
        padding: 0 1rem;
        box-sizing: border-box;
    }

    .btn:hover {
        color: var(--charcoal-grey);
        text-decoration: none;
    }

    .btn:focus, .btn.focus {
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    #sidebarCollapse.btn {
        font-size: 1rem;
    }

        #sidebarCollapse.btn:focus {
            outline: 0;
            box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
        }

    .btn.disabled, .btn:disabled {
        opacity: 1;
        color: rgba(255,255,255,0.4);
        pointer-events: none;
    }

    .btn.disabled-grey {
        color: rgba(62,63,66,0.3);
        pointer-events: none;
    }

    a.btn.disabled, fieldset:disabled a.btn {
        pointer-events: none;
    }


    /* ------------------------
        BEGIN - IE FALLBACK
    ------------------------- */
    .btn {
        color: #3e3f42; /* Fallback for IE */
    }

        .btn:hover {
            color: #3e3f42; /* Fallback for IE */
        }
    /* ------------------------
        END - IE FALLBACK 
    ------------------------- */
    /* -------------------------------------------------------------
        BUTTON - PRIMARY
    ------------------------------------------------------------- */
    .btn-primary {
        position: relative;
        color: #fff;
        /*box-shadow: 0 1px 1px 0 rgba(22, 29, 37, 0.1), inset 0 2px 0 0 rgba(255, 255, 255, 0.06);*/
        box-shadow: none;
        border: solid 1px #1461D2;
        background-image: linear-gradient(to top, #1665D8, #1f6fe5);
        -webkit-backface-visibility: hidden;
    }

        .btn-primary::after {
            position: absolute;
            left: 0;
            top: 0;
            content: '';
            width: 0%;
            height: 100%;
            background-image: linear-gradient(to top, #1665d8, #1665d8);
            -webkit-filter: brightness(0.95);
            filter: brightness(0.95);
            opacity: 0;
            transition: all 0.5s ease-in-out;
        }

        .btn-primary * {
            position: relative;
            z-index: 1;
        }

        .btn-primary:hover {
            color: white;
            border-color: #1461d2;
        }

        .btn-primary:focus, .btn-primary.focus {
            box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
        }

        .btn-primary.disabled, .btn-primary:disabled {
            border-color: #5a5c5e;
            background-image: linear-gradient(to top, #5d6064, #77797c);
        }

        .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
            color: #fff;
            background-color: #0062cc;
            background-image: linear-gradient(to top, #0062cc, #0062cc);
            border-color: #005cbf;
        }

            .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus {
                box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
            }
    /* -------------------------------------------------------------
        BUTTON - SECONDARY
    ------------------------------------------------------------- */
    .btn-secondary {
        position: relative;
        color: white;
        box-shadow: 0 1px 1px 0 rgba(19, 31, 21, 0.1), inset 0 2px 0 0 rgba(255, 255, 255, 0.06);
        border: solid 1px #2d9c3c;
        /*background-image: linear-gradient(to top, #34aa44, #38b249);*/ /* Fallback for IE */
        background-image: linear-gradient(to top, var(--medium-green), var(--medium-green-two));
        -webkit-backface-visibility: hidden;
    }

        .btn-secondary::after {
            position: absolute;
            left: 0;
            top: 0;
            content: '';
            width: 0%;
            height: 100%;
            /*background-image: linear-gradient(to top, #38b249, #34aa44);*/
            background-image: linear-gradient(to top, #34aa44, #34aa44);
            -webkit-filter: brightness(0.95);
            filter: brightness(0.95);
            opacity: 0;
            transition: all 0.5s ease-in-out;
        }

        .btn-secondary * {
            position: relative;
            z-index: 1;
        }

        .btn-secondary:hover {
            color: white;
            border-color: #2d9c3c; /*Eventually can remove styles like this as this is just overriding the bootstrap stylesheet*/
        }

            .btn-secondary:hover::after {
                width: 100%;
                opacity: 1;
                transition: all 0.2s ease-in-out;
            }

        .btn-secondary:focus, .btn-secondary.focus {
            box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
        }

        .btn-secondary.disabled, .btn-secondary:disabled {
            border-color: #5a5c5e;
            background-image: linear-gradient(to top, #5d6064, #77797c);
        }

        .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle {
            color: #fff;
            background-color: #545b62;
            border-color: #4e555b;
        }

            .btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-secondary.dropdown-toggle:focus {
                box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
            }
    /* --------------------------------------------------------------
        BUTTON - ORANGE
 ------------------------------------------------------------- */
    .btn-outline-orangehover {
        color: #605F5E;
        background-color: white;
        border-color: #DFDFDF;
        padding: 0.75rem;
        font-size: 0.875rem;
        line-height: 1;
    }

    @media screen and (min-width: 1920px) {

        .btn-outline-orangehover {
            font-size: 1rem;
            padding: 0.875rem;
        }
    }

    .btn-outline-orangehover:hover {
        color: white;
        background-color: #F38A31;
        border-color: #DFDFDF;
    }

    .btn-outline-orangehover:focus, .btn-outline-orangehover.focus {
        /*        box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);*/
    }

    .btn-outline-orangehover.disabled, .btn-outline-orangehover:disabled {
        color: #fff;
        background-color: #007bff;
        border-color: #007bff;
    }

    .btn-outline-orangehover:not(:disabled):not(.disabled):active, .btn-outline-orangehover:not(:disabled):not(.disabled).active, .show > .btn-outline-orangehover.dropdown-toggle {
        color: white;
        background-color: #F38A31;
        border-color: #DFDFDF;
    }

    /* --------------------------------------------------------------
        BUTTON - FLOATING HELP
 ------------------------------------------------------------- */

    .floating-help-container {
        position: fixed;
        /*bottom: 0.5rem;
        right: 0.5rem;*/
        bottom: 1.5rem;
        bottom: 1rem;
        padding-top: 0.5rem;
        right: 1rem;
        margin: 0;
        z-index: 9999;
    }

    .btn-floating-help {
        border: solid 1px #2d9c3c;
        border-radius: 1rem;
        border-bottom-right-radius: 2px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        transition: all 0.4s ease-out;
    }

        .btn-floating-help:hover {
            transform: translateY(-0.75rem);
            -webkit-transform: translateY(-0.75rem);
            transition: all 0.2s ease-out;
        }

    .btn-secondary.btn-floating-help::after {
        border-radius: 1rem;
        border-bottom-right-radius: 2px;
        overflow: hidden;
    }
    /* -------------------------------------------------------------
        BUTTON - RED
    ------------------------------------------------------------- */
    .btn-red {
        position: relative;
        background-color: #dc3545;
        background-image: linear-gradient(to top, #CF2738, #dc3545);
        border-color: #C22F3D;
        color: #fff;
        box-shadow: 0 1px 1px 0 rgba(19, 31, 21, 0.1), inset 0 2px 0 0 rgba(255, 255, 255, 0.06);
        -webkit-backface-visibility: hidden;
    }

        .btn-red * {
            position: relative;
            z-index: 1;
        }

        .btn-red::after {
            position: absolute;
            left: 0;
            top: 0;
            content: '';
            width: 0%;
            height: 100%;
            background-color: #CF2738;
            -webkit-filter: brightness(0.95);
            filter: brightness(0.95);
            opacity: 0;
            transition: all 0.5s ease-in-out;
        }

        .btn-red:hover {
            color: #fff;
        }

        /*.btn-red:hover::after {
            width: 100%;
            opacity: 1;
            transition: all 0.2s ease-in-out;
        }*/

        .btn-red:focus, .btn-red.focus {
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
        }

        .btn-red.disabled, .btn-secondary:disabled {
            border-color: #5a5c5e;
            background-image: linear-gradient(to top, #5d6064, #77797c);
        }

        .btn-red:not(:disabled):not(.disabled):active:focus, .btn-red:not(:disabled):not(.disabled).active:focus, .show > .btn-red.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
        }
    /* -------------------------------------------------------------
        BUTTON - OUTLINE DARK
    ------------------------------------------------------------- */
    .btn-outline-dark {
        color: #262626;
        /*border-color: #BFBFBF;*/
        border-color: #DFDFDF;
        background: linear-gradient(180deg, #FEFEFE 0%, #FAFAFB 100%);
        cursor: pointer;
        transition: all 0.2s ease-out;
    }
        /* Not styled yet */
        .btn-outline-dark:hover {
            color: #262626;
            border-color: #DFDFDF;
            background: linear-gradient(180deg, #FEFEFE 0%, #FAFAFB 100%);
        }

        .btn-outline-dark:focus, .btn-outline-dark.focus {
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
        }

        .btn-outline-dark.disabled, .btn-outline-dark:disabled {
            color: #3e3f42;
            background: transparent;
        }

        .btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled).active, .show > .btn-outline-dark.dropdown-toggle {
            color: #fff;
            background: #DFDFDF;
            border-color: #DFDFDF;
        }

            .btn-outline-dark:not(:disabled):not(.disabled):active:focus, .btn-outline-dark:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-dark.dropdown-toggle:focus {
                box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
            }
    /* -------------------------------------------------------------
        BUTTON - OUTLINE NAVBAR
    ------------------------------------------------------------- */
    .btn-outline-navbar {
        color: #262626;
        background: linear-gradient(180deg, #FEFEFE 0%, #FAFAFB 100%);
        border: 1px solid #DFDFDF; /* Neutral/200 */
    }

        .btn-outline-navbar:hover {
            background: linear-gradient(180deg, #FEFEFE 0%, #FAFAFB 100%);
            border-color: #DFDFDF;
        }

        .btn-outline-navbar:focus, .btn-outline-navbar.focus {
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
        }

        .btn-outline-navbar.disabled, .btn-outline-navbar:disabled {
            color: #262626;
            background-color: #444;
        }

        .btn-outline-navbar:not(:disabled):not(.disabled):active, .btn-outline-navbar:not(:disabled):not(.disabled).active, .show > .btn-outline-navbar.dropdown-toggle {
            color: #262626;
            background: linear-gradient(180deg, #FEFEFE 0%, #FAFAFB 100%);
            border-color: #DFDFDF;
        }

            .btn-outline-navbar:not(:disabled):not(.disabled):active:focus, .btn-outline-navbar:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-navbar.dropdown-toggle:focus {
                box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
            }
    /* -------------------------------------------------------------
        BUTTON - NEUTRAL
    ------------------------------------------------------------- */
    .btn-neutral {
        color: #605F5E;
        background: #DFDFDF;
        border: none;
        text-align: left;
    }

        .btn-neutral:hover {
            background: #DFDFDF;
        }

        .btn-neutral:focus, .btn-neutral.focus {
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
        }

        .btn-neutral.disabled, .btn-neutral:disabled {
            color: rgba(95,95,94,0.5);
            background: rgba(223, 223, 223,0.5);
            opacity: 0.5;
        }

        .btn-neutral:not(:disabled):not(.disabled):active, .btn-neutral:not(:disabled):not(.disabled).active, .show > .btn-neutral.dropdown-toggle {
            color: #605F5E;
            background: #DFDFDF;
        }

            .btn-neutral:not(:disabled):not(.disabled):active:focus, .btn-neutral:not(:disabled):not(.disabled).active:focus, .show > .btn-neutral.dropdown-toggle:focus {
                box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
            }


    /* -------------------------------------------------------------
        BUTTON - WHITE
    ------------------------------------------------------------- */
    .btn-white {
        background-color: #fff;
        border-color: #fff;
        box-shadow: none;
    }

        .btn-white:hover {
        }

        .btn-white:focus, .btn-white.focus {
            box-shadow: none;
        }

        .btn-white:not(:disabled):not(.disabled):active:focus, .btn-white:not(:disabled):not(.disabled).active:focus, .show > .btn-white.dropdown-toggle:focus {
            box-shadow: none;
        }
    /* -------------------------------------------------------------
    BUTTON - LINK 
    ------------------------------------------------------------- */
    .btn-link {
        font-weight: 400;
        color: var(--charcoal-grey);
    }

        .btn-link:hover {
            color: var(--charcoal-grey);
            text-decoration: underline;
        }

        .btn-link:focus, .btn-link.focus {
            text-decoration: underline;
            box-shadow: none;
        }

        .btn-link:disabled, .btn-link.disabled {
            color: #6c757d;
            pointer-events: none;
        }
    /* -------------------------------------------------------------
        BUTTON - LINK BLUE
   ------------------------------------------------------------- */
    .btn-link-blue, #sign-in-page a {
        font-weight: normal;
        color: var(--water-blue);
    }

        .btn-link-blue:hover, #sign-in-page a:hover {
            color: var(--water-blue);
            text-decoration: underline;
        }

        .btn-link-blue:focus, .btn-link-blue.focus {
            text-decoration: underline;
            box-shadow: none;
        }

        .btn-link-blue:disabled, .btn-link-blue.disabled {
            color: #6c757d;
            pointer-events: none;
        }
    /* -------------------------------------------------------------
        BUTTON - LINK BASE LINK (BS BLUE)
   ------------------------------------------------------------- */
.btn-link-baselink {
    font-weight: normal;
    color: #007FFF;
}

    .btn-link-baselink:hover {
        color: #007FFF;
        text-decoration: underline;
    }

        .btn-link-baselink:focus, .btn-link-baselink.focus {
            text-decoration: underline;
            box-shadow: none;
        }

        .btn-link-baselink:disabled, .btn-link-baselink.disabled {
            color: #6c757d;
            pointer-events: none;
        }

    .btn-link-background > .btn-link-baselink {
        background-color: #ededed;
    }

    .btn-link-baselink:first-child + .btn-link-baselink {
        margin-left: 1px !important;
    }


/* -------------------------------------------------------------
        BUTTON - LINK WHITE
   ------------------------------------------------------------- */
.btn-link-white {
    font-weight: 400;
    color: #fff;
}

        .btn-link-white:hover {
            color: #fff;
            text-decoration: underline;
        }

        .btn-link-white:focus, .btn-link-white.focus {
            text-decoration: underline;
            box-shadow: none;
        }

        .btn-link-white:disabled, .btn-link-white.disabled {
            color: #6c757d;
            pointer-events: none;
        }
    /* -------------------------------------------------------------
        BUTTON - OUTLINE FLUID
   ------------------------------------------------------------- */
    .btn-outline-fluid {
        width: 100%;
        padding: 1rem;
        margin-bottom: 1rem;
        color: #262626;
        font-size: 1rem;
        border-color: #DFDFDF;
    }

        .btn-outline-fluid:hover {
            font-weight: 700;
            color: #262626;
        }

        .btn-outline-fluid.disabled, .btn-outline-fluid:disabled {
            color: #999;
            background-color: transparent;
            opacity: 0.4 !important;
        }

        .btn-outline-fluid:not(:disabled):not(.disabled):active, .btn-outline-fluid:not(:disabled):not(.disabled).active, .show > .btn-outline-fluid.dropdown-toggle {
            font-weight: 700;
            color: #fff;
            /*background-color: #5C6C87;
        border-color: #5C6C87;*/
            background-color: var(--primary2);
            border-color: var(--primary2);
        }

    /* -------------------------------------------------------------
        BUTTON - OUTLINE ROUNDED FILTERS
   ------------------------------------------------------------- */

    #modRpExecutive .modal-header {
        z-index: 1052;
    }

    #modRpExecutive h5.modal-title, #modKPIModify h5.modal-title {
        color: white !important;
    }

    #modRpExecutive .rgMultiHeaderRow:first-child .rgHeader {
        font-size: 1rem;
    }

    #modSaveAsReport, #modSaveReport /*#modDeleteReport, #modDeleteRatio*/ {
        z-index: 1051;
        background-color: rgba(0,0,0,0.5);
    }
    /*#departmentFilters {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}*/
    h5.modal-title {
        padding: 1rem 0;
        font-weight: bold;
        font-size: 1.25rem;
        line-height: 1.6;
    }

    .kpi-filters, .department-filters {
        display: flex;
        align-items: center;
        padding: 1.25rem 0;
    }

    .department-filters {
        flex-wrap: wrap;
    }

    .kpi-filters > p {
        margin: 0 0.3125rem 0 0;
        font-weight: 700;
        color: #262626;
    }

    .department-filters > p {
        flex-basis: 100%;
        font-weight: 700;
        margin: 0 0 0.625rem 0;
        color: #262626;
    }

    .btn-outline-filter {
        background-color: white;
        color: #262626;
        border-radius: 9em;
        border: 1px solid #DFDFDF;
        margin: 0 0.3125rem;
    }

    .department-filters .btn-outline-filter:first-of-type {
        margin-left: 0;
    }

    .btn-outline-filter:hover {
        color: #262626;
        background-color: transparent;
        border: 1px solid #DFDFDF;
    }

    .btn-outline-filter:not(:disabled):not(.disabled):active, .btn-outline-filter:not(:disabled):not(.disabled).active {
        background: var(--primary2);
        color: #fff;
        font-weight: 500;
        border: 1px solid var(--primary2);
    }

    .btn-outline-filter::after {
        margin-left: 3rem;
        font-family: "Font Awesome 5 Pro";
        font-weight: 900;
        content: "\f067";
        color: #21251A;
    }

    .btn-outline-filter:not(:disabled):not(.disabled).active::after {
        content: "\f00c";
        color: #fff;
    }

    /* -------------------------------------------------------------
        BUTTONS - MORE
   ------------------------------------------------------------- */
    .report-buttons .svg-inline--fa {
        font-size: 1rem;
    }

    .btn-lg, .btn-group-lg > .btn {
        padding: 0.5rem 1rem;
        font-size: 1.25rem;
        line-height: 1.5;
        border-radius: 0.3rem;
    }

    .btn-sm, .btn-group-sm > .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
        line-height: 1.5;
        border-radius: 0.2rem;
    }

    .btn-block {
        display: block;
        width: 100%;
    }

        .btn-block + .btn-block {
            margin-top: 0.5rem;
        }

    input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="button"].btn-block {
        width: 100%;
    }

    .fade {
        transition: opacity 0.15s linear;
    }

    @media screen and (prefers-reduced-motion: reduce) {
        .fade {
            transition: none;
        }
    }

    .fade:not(.show) {
        opacity: 0;
    }

    .collapse:not(.show) {
        display: none;
    }

    .collapsing {
        position: relative;
        height: 0;
        overflow: hidden;
        transition: height 0.35s ease;
    }

    @media screen and (prefers-reduced-motion: reduce) {
        .collapsing {
            transition: none;
        }
    }

    .dropup, .dropright, .dropdown, .dropleft {
        position: relative;
    }

    .dropdown-toggle::after {
        display: inline-block;
        margin-left: 0.255em;
        vertical-align: 0.255em;
        content: "";
        border-top: 0.3em solid;
        border-right: 0.3em solid transparent;
        border-bottom: 0;
        border-left: 0.3em solid transparent;
    }
    /*custom*/
    .dropdown-toggle[aria-expanded="true"]::after {
        transform: rotate(180deg) translateY(50%);
    }

    .dropdown-toggle::after {
        transition: 0.2s all ease-in-out;
    }
    /*custom end*/
    .dropdown-toggle:empty::after {
        margin-left: 0;
    }

    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        display: none;
        float: left;
        min-width: 10rem;
        padding: 0.5rem 0;
        margin: 0.125rem 0 0;
        font-size: 1rem;
        color: #212529;
        text-align: left;
        list-style: none;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 0.25rem;
    }

    .dropdown-menu-right {
        right: 0;
        left: auto;
    }

    @media (min-width: 576px) {
        .dropdown-menu-sm-right {
            right: 0;
            left: auto;
        }
    }

    @media (min-width: 768px) {
        .dropdown-menu-md-right {
            right: 0;
            left: auto;
        }
    }

    @media (min-width: 992px) {
        .dropdown-menu-lg-right {
            right: 0;
            left: auto;
        }
    }

    @media (min-width: 1200px) {
        .dropdown-menu-xl-right {
            right: 0;
            left: auto;
        }
    }

    .dropdown-menu-left {
        right: auto;
        left: 0;
    }

    @media (min-width: 576px) {
        .dropdown-menu-sm-left {
            right: auto;
            left: 0;
        }
    }

    @media (min-width: 768px) {
        .dropdown-menu-md-left {
            right: auto;
            left: 0;
        }
    }

    @media (min-width: 992px) {
        .dropdown-menu-lg-left {
            right: auto;
            left: 0;
        }
    }

    @media (min-width: 1200px) {
        .dropdown-menu-xl-left {
            right: auto;
            left: 0;
        }
    }

    .dropup .dropdown-menu {
        top: auto;
        bottom: 100%;
        margin-top: 0;
        margin-bottom: 0.125rem;
    }

    .dropup .dropdown-toggle::after {
        display: inline-block;
        margin-left: 0.255em;
        vertical-align: 0.255em;
        content: "";
        border-top: 0;
        border-right: 0.3em solid transparent;
        border-bottom: 0.3em solid;
        border-left: 0.3em solid transparent;
    }

    .dropup .dropdown-toggle:empty::after {
        margin-left: 0;
    }

    .dropright .dropdown-menu {
        top: 0;
        right: auto;
        left: 100%;
        margin-top: 0;
        margin-left: 0.125rem;
    }

    .dropright .dropdown-toggle::after {
        display: inline-block;
        margin-left: 0.255em;
        vertical-align: 0.255em;
        content: "";
        border-top: 0.3em solid transparent;
        border-right: 0;
        border-bottom: 0.3em solid transparent;
        border-left: 0.3em solid;
    }

    .dropright .dropdown-toggle:empty::after {
        margin-left: 0;
    }

    .dropright .dropdown-toggle::after {
        vertical-align: 0;
    }

    .dropleft .dropdown-menu {
        top: 0;
        right: 100%;
        left: auto;
        margin-top: 0;
        margin-right: 0.125rem;
    }

    .dropleft .dropdown-toggle::after {
        display: inline-block;
        margin-left: 0.255em;
        vertical-align: 0.255em;
        content: "";
    }

    .dropleft .dropdown-toggle::after {
        display: none;
    }

    .dropleft .dropdown-toggle::before {
        display: inline-block;
        margin-right: 0.255em;
        vertical-align: 0.255em;
        content: "";
        border-top: 0.3em solid transparent;
        border-right: 0.3em solid;
        border-bottom: 0.3em solid transparent;
    }

    .dropleft .dropdown-toggle:empty::after {
        margin-left: 0;
    }

    .dropleft .dropdown-toggle::before {
        vertical-align: 0;
    }

    .dropdown-menu[x-placement^="top"], .dropdown-menu[x-placement^="right"], .dropdown-menu[x-placement^="bottom"], .dropdown-menu[x-placement^="left"] {
        right: auto;
        bottom: auto;
    }

    .dropdown-divider {
        height: 0;
        margin: 0.5rem 0;
        overflow: hidden;
        border-top: 1px solid #e9ecef;
    }

    .dropdown-item {
        display: block;
        width: 100%;
        padding: 0.25rem 1.5rem;
        clear: both;
        font-family: 'Roboto', "Helvetica Neue", Arial, sans-serif;
        font-weight: 400;
        font-size: 0.75rem;
        color: #212529;
        text-align: inherit;
        white-space: nowrap;
        background-color: transparent;
        border: 0;
    }

    @media (min-width:1920px) {
        .dropdown-item {
            font-size: 0.875rem;
        }
    }

    .dropdown-item:first-child {
        /*border-top-left-radius: calc(0.25rem - 1px);
    border-top-right-radius: calc(0.25rem - 1px);*/
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .dropdown-item:last-child {
        /*border-bottom-right-radius: calc(0.25rem - 1px);
    border-bottom-left-radius: calc(0.25rem - 1px);*/
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    .dropdown-item:hover, .dropdown-item:focus {
        color: #16181b;
        text-decoration: none;
        /*background-color: #f8f9fa;*/
        background-color: rgba(0, 0, 0, 0.05);
    }

    .dropdown-item.active, .dropdown-item:active {
        color: #fff;
        text-decoration: none;
        background-color: #007bff;
    }

    .dropdown-item.disabled, .dropdown-item:disabled {
        color: #6c757d;
        pointer-events: none;
        background-color: transparent;
    }

    .dropdown-menu.show {
        display: block;
    }

    .dropdown-header {
        display: block;
        padding: 0.5rem 1.5rem;
        margin-bottom: 0;
        font-size: 0.875rem;
        color: #6c757d;
        white-space: nowrap;
    }

    .dropdown-item-text {
        display: block;
        padding: 0.25rem 1.5rem;
        color: #212529;
    }

    .btn-group, .btn-group-vertical {
        position: relative;
        display: -ms-inline-flexbox;
        display: inline-flex;
        vertical-align: middle;
    }

        .btn-group > .btn, .btn-group-vertical > .btn {
            position: relative;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
        }

            .btn-group > .btn:hover, .btn-group-vertical > .btn:hover {
                z-index: 1;
            }

            .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active, .btn-group-vertical > .btn:focus, .btn-group-vertical > .btn:active, .btn-group-vertical > .btn.active {
                z-index: 1;
            }

    /*.btn-group > .btn.btn-topbar-modal:hover, .btn-group-vertical > .btn.btn-topbar-modal:hover {
                z-index: 0;
            }*/

    .btn-toolbar {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

        .btn-toolbar .input-group {
            width: auto;
        }

    .btn-group > .btn:not(:first-child), .btn-group > .btn-group:not(:first-child) {
        margin-left: -1px;
    }

    .btn-group.top-nav-left > .btn:not(:first-child), .btn-group.top-nav-left > .btn-group:not(:first-child) {
        margin-left: 0;
    }

    .btn-group > .btn:not(:last-child):not(.dropdown-toggle), .btn-group > .btn-group:not(:last-child) > .btn {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .btn-group > .btn:not(:first-child), .btn-group > .btn-group:not(:first-child) > .btn {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .dropdown-toggle-split {
        padding-right: 0.5625rem;
        padding-left: 0.5625rem;
    }

        .dropdown-toggle-split::after, .dropup .dropdown-toggle-split::after, .dropright .dropdown-toggle-split::after {
            margin-left: 0;
        }

    .dropleft .dropdown-toggle-split::before {
        margin-right: 0;
    }

    .btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split {
        padding-right: 0.375rem;
        padding-left: 0.375rem;
    }

    .btn-lg + .dropdown-toggle-split, .btn-group-lg > .btn + .dropdown-toggle-split {
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }

    .btn-group-vertical {
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-align: start;
        align-items: flex-start;
        -ms-flex-pack: center;
        justify-content: center;
    }

        .btn-group-vertical > .btn, .btn-group-vertical > .btn-group {
            width: 100%;
        }

            .btn-group-vertical > .btn:not(:first-child), .btn-group-vertical > .btn-group:not(:first-child) {
                margin-top: -1px;
            }

            .btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle), .btn-group-vertical > .btn-group:not(:last-child) > .btn {
                border-bottom-right-radius: 0;
                border-bottom-left-radius: 0;
            }

            .btn-group-vertical > .btn:not(:first-child), .btn-group-vertical > .btn-group:not(:first-child) > .btn {
                border-top-left-radius: 0;
                border-top-right-radius: 0;
            }

    .btn-group-toggle > .btn, .btn-group-toggle > .btn-group > .btn {
        margin-bottom: 0;
    }

        .btn-group-toggle > .btn input[type="radio"], .btn-group-toggle > .btn input[type="checkbox"], .btn-group-toggle > .btn-group > .btn input[type="radio"], .btn-group-toggle > .btn-group > .btn input[type="checkbox"] {
            position: absolute;
            clip: rect(0, 0, 0, 0);
            pointer-events: none;
        }

    .input-group {
        position: relative;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-align: stretch;
        align-items: stretch;
        width: 100%;
    }

        .input-group > .form-control, .input-group > .form-control-plaintext, .input-group > .custom-select, .input-group > .custom-file {
            position: relative;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            width: 1%;
            margin-bottom: 0;
        }

            .input-group > .form-control + .form-control, .input-group > .form-control + .custom-select, .input-group > .form-control + .custom-file, .input-group > .form-control-plaintext + .form-control, .input-group > .form-control-plaintext + .custom-select, .input-group > .form-control-plaintext + .custom-file, .input-group > .custom-select + .form-control, .input-group > .custom-select + .custom-select, .input-group > .custom-select + .custom-file, .input-group > .custom-file + .form-control, .input-group > .custom-file + .custom-select, .input-group > .custom-file + .custom-file {
                margin-left: -1px;
            }

            .input-group > .form-control:focus, .input-group > .custom-select:focus, .input-group > .custom-file .custom-file-input:focus ~ .custom-file-label {
                z-index: 3;
            }

            .input-group > .custom-file .custom-file-input:focus {
                z-index: 4;
            }

            .input-group > .form-control:not(:last-child), .input-group > .custom-select:not(:last-child) {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }

            .input-group > .form-control:not(:first-child), .input-group > .custom-select:not(:first-child) {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }

        .input-group > .custom-file {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
        }

            .input-group > .custom-file:not(:last-child) .custom-file-label, .input-group > .custom-file:not(:last-child) .custom-file-label::after {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }

            .input-group > .custom-file:not(:first-child) .custom-file-label {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }

    .input-group-prepend, .input-group-append {
        display: -ms-flexbox;
        display: flex;
    }

        .input-group-prepend .btn, .input-group-append .btn {
            position: relative;
            z-index: 2;
        }

            .input-group-prepend .btn:focus, .input-group-append .btn:focus {
                z-index: 3;
            }

            .input-group-prepend .btn + .btn, .input-group-prepend .btn + .input-group-text, .input-group-prepend .input-group-text + .input-group-text, .input-group-prepend .input-group-text + .btn, .input-group-append .btn + .btn, .input-group-append .btn + .input-group-text, .input-group-append .input-group-text + .input-group-text, .input-group-append .input-group-text + .btn {
                margin-left: -1px;
            }

    .input-group-prepend {
        margin-right: -1px;
    }

    .input-group-append {
        margin-left: -1px;
    }

    .input-group-text {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        padding: 0.375rem 0.75rem;
        margin-bottom: 0;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #495057;
        text-align: center;
        white-space: nowrap;
        background-color: #e9ecef;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
    }

        .input-group-text input[type="radio"], .input-group-text input[type="checkbox"] {
            margin-top: 0;
        }

    .input-group-lg > .form-control:not(textarea), .input-group-lg > .custom-select {
        height: calc(2.875rem + 2px);
    }

    .input-group-lg > .form-control, .input-group-lg > .custom-select, .input-group-lg > .input-group-prepend > .input-group-text, .input-group-lg > .input-group-append > .input-group-text, .input-group-lg > .input-group-prepend > .btn, .input-group-lg > .input-group-append > .btn {
        padding: 0.5rem 1rem;
        font-size: 1.25rem;
        line-height: 1.5;
        border-radius: 0.3rem;
    }

    .input-group-sm > .form-control:not(textarea), .input-group-sm > .custom-select {
        height: calc(1.8125rem + 2px);
    }

    .input-group-sm > .form-control, .input-group-sm > .custom-select, .input-group-sm > .input-group-prepend > .input-group-text, .input-group-sm > .input-group-append > .input-group-text, .input-group-sm > .input-group-prepend > .btn, .input-group-sm > .input-group-append > .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
        line-height: 1.5;
        border-radius: 0.2rem;
    }

    .input-group-lg > .custom-select, .input-group-sm > .custom-select {
        padding-right: 1.75rem;
    }

    .input-group > .input-group-prepend > .btn, .input-group > .input-group-prepend > .input-group-text, .input-group > .input-group-append:not(:last-child) > .btn, .input-group > .input-group-append:not(:last-child) > .input-group-text, .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .input-group > .input-group-append > .btn, .input-group > .input-group-append > .input-group-text, .input-group > .input-group-prepend:not(:first-child) > .btn, .input-group > .input-group-prepend:not(:first-child) > .input-group-text, .input-group > .input-group-prepend:first-child > .btn:not(:first-child), .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    /* ---------------------------------------------------
//////////////////////////////////////////////////////
    
    19. LOG IN PAGE (could move to signin.css)

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

    @media (min-width: 1600px) {
        #sign-in-page > .container-fluid {
            max-width: 1600px !important;
        }
    }

    @media (min-width: 1920px) {
        #sign-in-page > .container-fluid {
            max-width: 100% !important;
        }
    }

    #sign-in-page > .container-fluid {
        padding-left: 13.33%;
        padding-right: 13.33%;
    }

    #sign-in-page .wrapper {
    }

    #sign-in-page main {
        height: 100vh;
    }

    #sign-in-page .footer {
        padding: 1rem 0 3rem 0;
    }

    #sign-in-page {
        height: 100vh;
        overflow: hidden;
    }

        #sign-in-page .left-section {
            display: flex;
            flex-direction: column;
            background-color: white;
            margin-left: 0;
            width: 100%;
            min-height: 768px;
            padding: 0 2.5rem;
            transition: margin 0.2s ease-out;
        }

    @media (max-width: 414px) {
        #sign-in-page .left-section {
            padding: 0 1.5rem;
        }
    }

    #sign-in-page .footer {
        margin-top: auto;
    }

    #sign-in-page .right-section {
        background-color: #eef6fd;
        display: none;
    }

    @media (min-width: 576px) {
        #sign-in-page .left-section {
            margin-left: 5rem;
            width: 33rem;
            height: 100%;
        }

        #sign-in-page .right-section {
            display: flex;
            flex-direction: column;
        }
    }

    @media (min-width: 576px) {
        .bg-graphic {
            display: block;
            height: 100%;
            background-image: url(/Images/Graphics/hotstats_colors_image-2.svg);
            background-position: center;
            background-repeat: no-repeat;
            background-size: 70%;
        }
    }

    #sign-in-page h1 {
        line-height: 1.39;
    }

    #sign-in-page p {
        font-size: 1rem;
        line-height: 1.5;
    }

    #sign-in-page #form2-temp {
        max-width: 100%;
    }

    #sign-in-page .sign-in-options {
        display: flex;
        align-items: center;
    }

        #sign-in-page .sign-in-options * {
            font-size: 0.875rem;
            margin: 0;
        }

        #sign-in-page .sign-in-options .keepme-text {
            display: flex;
            align-items: center;
        }

    .sign-in-buttons {
        display: flex;
    }

    #sign-in-page #btnLogin.btn, #sign-in-page #btnSignUp.btn {
        font-size: 0.875rem;
        margin-top: 1.5rem;
        flex: 1;
    }

    #sign-in-page #btnLogin.btn {
        margin-right: 0.5rem;
    }

    #sign-in-page #btnSignUp.btn {
        margin-left: 0.5rem;
    }

        #sign-in-page #btnSignUp.btn.btn-outline-dark:hover, #sign-in-page #btnSignUp.btn.btn-outline-dark:active {
            background-color: transparent;
            color: #3e3f42;
        }

    #sign-in-page .footer {
        align-items: center;
        padding-bottom: 1.5rem;
    }

        #sign-in-page .footer .col {
            padding: 0;
        }

        #sign-in-page .footer p, #sign-in-page .footer .btn.btn-link-blue {
            font-size: 0.875rem;
        }

        #sign-in-page .footer p {
            padding: 0;
            margin-right: auto;
        }

        #sign-in-page .footer > div > .btn {
            margin: 0;
        }

        #sign-in-page .footer .btn:last-child {
            padding-right: 0;
        }

    #modDataset .RadInput_Default .riTextBox, #modDataset .RadInputMgr_Default {
        font-size: 0.75rem !important;
        font-family: 'Roboto', "Helvetica Neue", Arial, sans-serif !important;
    }

    #sign-in-page .input-label {
        font-size: 0.75rem;
        font-weight: 500;
        line-height: 1.5;
        color: #9ea0a5;
        margin: 0.75rem 0 0 0;
    }

    #sign-in-page #txtUsername, #sign-in-page #txtPassword {
        margin: 0.75rem 0 0.75rem 0;
        border-radius: 0.25rem;
        /*the box shadow settings in zeplin produce a larger shadow, at least on this display... so I've added a -1px for spread which looks closer to the design */
        box-shadow: inset 0 1px 2px -1px rgba(102, 113, 123, 0.21);
        border: solid 1px #e2e5ed;
        font-size: 0.875rem !important;
        padding-left: 3rem !important;
    }

    #sign-in-page #txtUsername_wrapper, #sign-in-page #txtPassword_wrapper {
        position: relative;
    }

        #sign-in-page #txtUsername_wrapper::before {
            position: absolute;
            top: 50%;
            left: 1.75rem;
            font-family: FontAwesome;
            content: '\f0e0';
            font-style: normal;
            font-variant: normal;
            font-size: 1.0rem;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            /* color: #737373;*/ /* Fallback for IE */
            color: var(--medium-grey);
        }

        #sign-in-page #txtPassword_wrapper::before {
            position: absolute;
            top: 50%;
            left: 1.75rem;
            font-family: FontAwesome;
            content: '\f023';
            font-style: normal;
            font-variant: normal;
            font-size: 1.25rem;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            /*color: #737373;*/ /* Fallback for IE */
            color: var(--medium-grey);
        }

    /* --------------------------------------------------------
///////////////////////////////////////////////////////////
    
    20. BACKGROUND COLOURS (Check if these are still being used)

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
----------------------------------------------------------- */
    .bg-melon {
        background-color: #ff4a9a; /* IE fallback */
        background-color: var(--barbie-pink);
    }

    .bg-charcoal {
        background-color: #3e3f42; /* IE fallback */
        background-color: var(--charcoal-grey);
    }

    .bg-white {
        background-color: #fff; /* IE fallback */
        background-color: var(--white);
    }

    .bg-light-grey {
        background-color: #f7f9fa; /* IE fallback */
        background-color: var(--light-grey);
    }
    /* --------------------------------------------------------
///////////////////////////////////////////////////////////
    
    21. VIDEO 

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
----------------------------------------------------------- */
    .video-wrapper {
        position: relative;
        padding-bottom: 62.56%; /* Should be 16:9 (56.25%) but YouTube displaying it differently so have adjusted to 62.56% to match */
        height: 0;
        margin: 0;
    }

        .video-wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

    /* ---------------------------------------------------
//////////////////////////////////////////////////////
    
    21.5 (need to redo these numbers) EXECUTIVE REPORT

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
------------------------------------------------------ */
    /* Executive report tabs */
    .executive.report .nav-tabs {
        border-bottom: solid 1px #eaedf3;
        -ms-transform: translate(-4px, -20px);
        -webkit-transform: translate(-4px, -20px);
        transform: translate(-4px, -20px);
    }

    .executive.report .tab-content {
        -ms-transform: translate(0, -20px);
        -webkit-transform: translate(0, -20px);
        transform: translate(0, -20px);
        display: -ms-flexbox;
        display: flex;
        /*min-height: calc(100vh - 137px);*/
        min-height: calc(100vh - 147px);
        margin-bottom: -32px;
        background-color: #fff;
        overflow-x: scroll;
    }

    /* using transform is canceling the z-index for the dropdown menu */
    .executive.report #userActionBar {
        margin-top: -20px;
    }

    .executive.report .nav-tabs .nav-item {
        margin-bottom: -2px;
    }

    .kpi-report .nav-tabs .nav-item {
        -ms-transform: translate(-4px, -11px);
        -webkit-transform: translate(-4px, -11px);
        transform: translate(-4px, -11px);
        margin-bottom: -7px;
    }

    .executive.report .nav-tabs .nav-link, .kpi-report .nav-tabs .nav-link {
        border: 1px solid #dee2e6;
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
        border-bottom: 1px solid transparent;
    }

    .executive.report .nav-tabs .nav-item /*:not(:first-child)*/ .nav-link, .kpi-report .nav-tabs .nav-item /*:not(:first-child)*/ .nav-link {
        /*border: 1px solid transparent;*/
        background-color: #EFEFEF;
        margin-left: 0.25rem;
        margin-top: 1px;
    }


    .executive.report .btn-create-new-report, .kpi-report .btn-create-new-report {
        /*background-image: linear-gradient(to top, #1665d8, #1f6fe5);*/
        background: #EFEFEF;
        color: #605F5E;
        font-weight: 400;
    }

    .executive.report .btn-modify-report, .kpi-report .btn-modify-report {
        /*background-image: linear-gradient(to top, #34aa44, #38b249);
    color: rgba(255,255,255,0.6);*/
        background: #EFEFEF;
        color: #605F5E;
        font-weight: 400;
    }

        .executive.report .btn-create-new-report:hover, .kpi-report .btn-create-new-report:hover, #reportTab .btn-create-new-report:focus, .executive.report .btn-modify-report:hover, .kpi-report .btn-modify-report:hover, #reportTab .btn-modify-report:focus {
            color: #605F5E;
            border-bottom: 1px solid transparent;
        }

    .executive.report .nav-tabs .nav-link:hover, #reportTab .nav-tabs .nav-link:focus, .kpi-report .nav-tabs .nav-link:hover, #reportTab .nav-tabs .nav-link:focus {
        border-color: #e9ecef #e9ecef #dee2e6;
    }

    .executive.report .nav-tabs .nav-link.disabled {
        color: #6c757d;
        background-color: transparent;
        border-color: transparent;
    }

    .executive.report .nav-tabs .nav-link.active, .executive.report .nav-tabs .nav-item.show .nav-link, .kpi-report .nav-tabs .nav-link.active, .executive.report .nav-tabs .nav-item.show .nav-link {
        color: #495057;
        background-color: #fff !important;
        border-color: #eaedf3 #eaedf3 #fff;
        outline: 0;
        font-weight: 500;
    }

    .executive.report .nav-tabs .dropdown-menu, .kpi-report .nav-tabs .dropdown-menu {
        margin-top: -1px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .executive.report .nav-fill .nav-item, .kpi-report .nav-fill .nav-item {
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        text-align: center;
    }

    .executive.report .nav-justified .nav-item, .kpi-report .nav-justified .nav-item {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        text-align: center;
    }

    .executive.report .tab-content > .tab-pane, .kpi-report .tab-content > .tab-pane {
        display: none;
    }

    .executive.report .tab-content > .active, .kpi-report .tab-content > .active {
        display: block;
    }

    .executive.report .deleteReportBtn, .kpi-report .deleteReportBtn {
        top: 50%;
        right: 0;
        -ms-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .kpi-report .deleteReportBtn {
        top: calc(50% - 2px);
    }

    .kpi-report .highcharts-exporting-group {
        -ms-transform: translateY(-5px);
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }

    /* Executive report (KPI) table */
    .executive.report .col {
        transition: 0.6s all ease-out;
    }

    .executive.report .col-auto {
        display: flex;
    }

    .divider-dots {
        -ms-transform: translateX(0.75rem);
        -webkit-transform: translateX(0.75rem);
        transform: translateX(0.75rem);
        align-self: center;
        color: #3E3F42;
    }

    .executive.report .table {
        position: relative;
        z-index: 1 !important;
    }

        .executive.report .table .dropdown {
            z-index: 9999 !important;
        }

        .executive.report .table .dropdown-menu {
            z-index: 99999 !important;
        }

    .executive.report .table-report .table-report-heading {
        position: relative;
    }

        .executive.report .table-report .table-report-heading button.close {
            position: absolute;
            top: 0;
            right: 0;
            -ms-transform: translate(50%, -50%);
            -webkit-transform: translate(50%, -50%);
            transform: translate(50%, -50%);
            background-color: #ddd;
            color: #3E3F42;
            border-radius: 50%;
            font-size: 0.875rem;
            width: 1.25rem;
            height: 1.25rem;
            line-height: 1.25rem;
            opacity: 1;
        }

    .executive.report .table-report thead th, .executive.report .table-report thead td {
        border-bottom-width: 1px !important;
    }

    .executive.report .col-auto:first-child .table-report thead th:first-child {
        border: 0;
    }

    .executive.report .table-report th, .executive.report .table-report td {
        padding: 1rem;
        vertical-align: middle;
        text-align: center;
    }

    .executive.report .table-report tbody th {
        white-space: nowrap;
        color: #1A6ADE;
    }

    .executive.report .table-bordered.table-report {
        border: none;
    }

    .bg-base {
        background: #3E3F42;
    }

    .bg-neutral-100 {
        background: #F7F9FA;
    }

    .bg-neutral-700 {
        background: #636464;
    }

    .bg-cyan-500 {
        background: #03A9F4;
    }

    .bg-revenue {
        background: #03A9F4;
    }

    .bg-costofsales {
        background: #2d9c3c;
    }

    .bg-expenses {
        background: #C24115;
    }

    .bg-payroll {
        background: #3B488F;
    }

    .bg-laborcosts-relatedexpenses, .bg-labor {
        background: #3B488F;
    }

    .bg-statistic {
        background: #e0c629;
    }

    .bg-panel, .bg-panel-stretch {
        background-color: #F5F7FB;
    }

    .td-sets {
        white-space: nowrap;
        padding: 1rem;
        vertical-align: middle;
        text-align: center;
        display: table-cell;
        font-weight: bold;
        border: 1px solid #dee2e6;
    }

    .executive-report .td-sets {
        white-space: pre-wrap;
        text-align: left;
    }

    .td-set-link {
        color: #1A6ADE;
        cursor: pointer !important;
    }

        .td-set-link:hover {
            color: #C24115;
        }

    /*SVG Patterns - heropatterns.com*/
    .bg-pattern-zigzags {
        background-color: #f8bbd0; /*pink 100 material ui color*/
        background-image: url("data:image/svg+xml,%3Csvg width='40' height='12' viewBox='0 0 40 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 6.172L6.172 0h5.656L0 11.828V6.172zm40 5.656L28.172 0h5.656L40 6.172v5.656zM6.172 12l12-12h3.656l12 12h-5.656L20 3.828 11.828 12H6.172zm12 0L20 10.172 21.828 12h-3.656z' fill='%23d9a0b4' fill-opacity='0.49' fill-rule='evenodd'/%3E%3C/svg%3E");
    }

    .bg-pattern-dots {
        background-color: #c8e6c9; /*green 100 material ui color*/
        background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23b6d4b7' fill-opacity='0.49' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
    }

    .bg-pattern-diagonals {
        background-color: #ffe0b2; /*orange 100 material ui color*/
        background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f4d6aa' fill-opacity='0.49' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
    }
    /*bordered column with 'add new KPI' button*/
    .executive.report .col-auto:first-child {
        margin-right: -1.5rem;
    }


    /* ---------------------------------------------------
//////////////////////////////////////////////////////
    
    MISC CHART DROPDOWN STYLES

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

    .RadDropDownList_Metro, .rddlPopup .rddlItem {
        font-family: 'Roboto', "Helvetica Neue", Arial, sans-serif !important;
        font-size: 0.875rem !important;
        /*font-weight: 500 !important;*/
        color: var(--charcoal-grey) !important;
    }

        .RadDropDownList_Metro .rddlFocused {
            background-color: var(--primary2) !important
        }

        .RadDropDownList_Metro .rddlInner {
            color: var(--charcoal-grey) !important;
        }

        .RadDropDownList_Metro .rddlFocused {
            color: white !important;
        }

    .RadDropDownList {
        line-height: 1.5 !important;
    }

    /* ---------------------------------------------------
//////////////////////////////////////////////////////
    
    MODAL - RIGHT SLIDE OUT MODAL WITH GRAPHS

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
------------------------------------------------------ */
    .modal.right .modal-dialog {
        position: fixed;
        margin: auto;
        max-width: 30vw;
        width: 30vw;
        height: 100%;
        right: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        -ms-transform: translate3d(100%, 0, 0);
        -o-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

        .modal.right .modal-dialog.modal-right-fullwidth {
            max-width: 100vw;
            width: 100vw;
            height: 100%;
            left: 0;
            -webkit-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
            -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

    .modal.right .modal-content {
        height: 100%;
        overflow-y: auto;
    }

    .modal.right .modal-body {
        padding: 1rem 1rem 6rem;
    }

        .modal.right .modal-body .graph-placeholder {
            background-image: url(/Images/Graphics/graph-placeholder.svg);
            background-repeat: no-repeat;
            background-size: contain;
            background-position: top;
            height: 100%;
            margin-bottom: 1rem;
        }

    .modal.right.fade .modal-dialog {
        right: 0px;
        -webkit-transition: opacity 0.6s linear, right 0.3s ease-in-out;
        -moz-transition: opacity 0.6s linear, right 0.3s ease-in-out;
        -o-transition: opacity 0.6s linear, right 0.3s ease-in-out;
        transition: opacity 0.6s linear, right 0.3s ease-in-out;
    }

    .modal.right.fade.show .modal-dialog {
        right: 30vw;
    }

    .modal.right .modal-content {
        border-radius: 0;
        border: none;
    }

    .modal.right .modal-header {
        border-bottom: none;
        border-radius: 0;
        background-color: #4A4B4B;
        color: white;
    }

        .modal.right .modal-header .close {
            color: white;
        }

        .modal.right .modal-header .btn-link * {
            color: white;
            opacity: 0.5;
        }

        .modal.right .modal-header .btn-link:hover * {
            color: white;
            opacity: 0.75;
        }

    /* START HTML5 fullscreen API */
    .modal.right .modal-body .graph {
        position: relative;
        margin-bottom: 1rem;
    }

        .modal.right .modal-body .graph img {
            max-width: 100%;
            width: 100%;
        }

        .modal.right .modal-body .graph .fs-button {
            z-index: 100;
            display: inline-block;
            width: 1rem;
            height: 1rem;
            position: relative;
            cursor: pointer;
        }

        .modal.right .modal-body .graph:-webkit-full-screen .fs-button {
            position: absolute;
            top: 1rem;
            right: 1rem;
        }

        .modal.right .modal-body .graph:-moz-full-screen .fs-button {
            position: absolute;
            top: 1rem;
            right: 1rem;
        }

        .modal.right .modal-body .graph:-ms-fullscreen .fs-button {
            position: absolute;
            top: 1rem;
            right: 1rem;
        }

        .modal.right .modal-body .graph:fullscreen .fs-button {
            position: absolute;
            top: 1rem;
            right: 1rem;
        }

        .modal.right .modal-body .graph .fs-button:after {
            display: inline-block;
            width: 100%;
            height: 100%;
            font-size: 1rem;
            font-family: FontAwesome;
            color: rgba(74,74,75,.7);
            cursor: pointer;
            content: "\f0b2";
            transition: 0.3s all ease-in-out;
        }

        .modal.right .modal-body .graph .fs-button:hover:after {
            color: rgb(74,74,75);
        }

        .modal.right .modal-body .graph:-webkit-full-screen .fs-button:after {
            content: "\f066";
            color: rgba(255,255,255,.7);
        }

        .modal.right .modal-body .graph:-webkit-full-screen .fs-button:hover:after {
            content: "\f066";
            color: rgb(255,255,255);
        }

        .modal.right .modal-body .graph:-moz-full-screen .fs-button:after {
            content: "\f066";
            color: rgba(255,255,255,.7);
        }

        .modal.right .modal-body .graph:-moz-full-screen .fs-button:hover:after {
            content: "\f066";
            color: rgb(255,255,255);
        }

        .modal.right .modal-body .graph:-ms-fullscreen .fs-button:after {
            content: "\f066";
            color: rgba(255,255,255,.7);
        }

        .modal.right .modal-body .graph:-ms-fullscreen .fs-button:hover:after {
            content: "\f066";
            color: rgb(255,255,255);
        }

        .modal.right .modal-body .graph:fullscreen .fs-button:after {
            content: "\f066";
            color: rgba(255,255,255,.7);
        }

        .modal.right .modal-body .graph:fullscreen .fs-button:hover:after {
            content: "\f066";
            color: rgb(255,255,255);
        }

        .modal.right .modal-body .graph:-webkit-full-screen img {
            display: block;
            height: 100%;
            margin-left: auto;
            margin-right: auto;
            box-shadow: 0px 0px 50px #555;
        }

        .modal.right .modal-body .graph:-moz-full-screen img {
            display: block;
            height: 100%;
            margin-left: auto;
            margin-right: auto;
            box-shadow: 0px 0px 50px #555;
        }

        .modal.right .modal-body .graph:-ms-fullscreen img {
            display: block;
            height: 100%;
            margin-left: auto;
            margin-right: auto;
            box-shadow: 0px 0px 50px #555;
        }

        .modal.right .modal-body .graph:fullscreen img {
            display: block;
            height: 100%;
            margin-left: auto;
            margin-right: auto;
            box-shadow: 0px 0px 50px #555;
        }

    /* ---------------------------------------------------
//////////////////////////////////////////////////////
    
    22. ANIMATIONS

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

    .heartbeat {
        -webkit-animation: heartbeat 1.5s ease-in-out 1.5s both;
        animation: heartbeat 1.5s ease-in-out 1.5s both;
    }

    .bounce-top {
        -webkit-animation: bounce-top 0.9s 1.5s both;
        animation: bounce-top 0.9s 1.5s both;
    }

    .shake-vertical {
        -webkit-animation: shake-vertical 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) 1.5s both;
        animation: shake-vertical 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) 1.5s both;
    }

    .slide-in-left {
        -webkit-animation: slide-in-left 1.5s cubic-bezier(0.680, -0.550, 0.265, 1.5) both;
        animation: slide-in-left 1.5s cubic-bezier(0.680, -0.550, 0.265, 1.5) both;
    }

    .slide-in-right {
        -webkit-animation: slide-in-right 1.5s cubic-bezier(0.680, -0.550, 0.265, 1.5) both;
        animation: slide-in-right 1.5s cubic-bezier(0.680, -0.550, 0.265, 1.5) both;
    }

    .wobble-hor-bottom {
        -webkit-animation: wobble-hor-bottom 0.8s 1.5s both;
        animation: wobble-hor-bottom 0.8s 1.5s both;
    }

    .slide-in-fwd-center {
        -webkit-animation: slide-in-fwd-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: slide-in-fwd-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }

    .fade-in {
        -webkit-animation: fade-in 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
        animation: fade-in 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    }

    .fade-in-with-delay {
        -webkit-animation: fade-in 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.3s both;
        animation: fade-in 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.3s both;
    }

    .fade-in-with-more-delay {
        -webkit-animation: fade-in 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.6s both;
        animation: fade-in 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.6s both;
    }

    .fade-out {
        -webkit-animation: fade-out 0.3s ease-out both;
        animation: fade-out 0.3s ease-out both;
    }

    .slide-in-bottom {
        -webkit-animation: slide-in-bottom 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: slide-in-bottom 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }

    .roll-out-left {
        -webkit-animation: roll-out-left 0.6s ease-in both;
        animation: roll-out-left 0.6s ease-in both;
    }

    .slide-left-self-width {
        -webkit-animation: slide-left-self-width 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: slide-left-self-width 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }

    /* Uses easeOutQuad */
    .slide-bottom {
        -webkit-animation: slide-bottom 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.9s both;
        animation: slide-bottom 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.9s both;
    }
    /**
 * ----------------------------------------
 * animation slide-left-self-width
 * ----------------------------------------
 */
    @-webkit-keyframes slide-left-self-width {
        0% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }

        100% {
            -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
        }
    }

    @keyframes slide-left-self-width {
        0% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }

        100% {
            -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
        }
    }
    /**
 * ----------------------------------------
 * animation slide-in-bottom
 * ----------------------------------------
 */
    @-webkit-keyframes slide-in-bottom {
        0% {
            -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
            opacity: 0;
        }

        100% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes slide-in-bottom {
        0% {
            -webkit-transform: translateY(1000px);
            transform: translateY(1000 px);
            opacity: 0;
        }

        100% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            opacity: 1;
        }
    }
    /**
* ----------------------------------------
* animation slide-bottom
* ----------------------------------------
*/
    @-webkit-keyframes slide-bottom {
        0% {
            -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
        }

        100% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }
    }

    @keyframes slide-bottom {
        0% {
            -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
        }

        100% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }
    }

    /**
 * ----------------------------------------
 * Animation Heartbeat
 * ----------------------------------------
 */
    @-webkit-keyframes heartbeat {
        from {
            -webkit-transform: scale(1);
            transform: scale(1);
            -webkit-transform-origin: center center;
            transform-origin: center center;
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
        }

        10% {
            -webkit-transform: scale(0.91);
            transform: scale(0.91);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
        }

        17% {
            -webkit-transform: scale(0.98);
            transform: scale(0.98);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
        }

        33% {
            -webkit-transform: scale(0.87);
            transform: scale(0.87);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
        }

        45% {
            -webkit-transform: scale(1);
            transform: scale(1);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
        }
    }

    @keyframes heartbeat {
        from {
            -webkit-transform: scale(1);
            transform: scale(1);
            -webkit-transform-origin: center center;
            transform-origin: center center;
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
        }

        10% {
            -webkit-transform: scale(0.91);
            transform: scale(0.91);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
        }

        17% {
            -webkit-transform: scale(0.98);
            transform: scale(0.98);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
        }

        33% {
            -webkit-transform: scale(0.87);
            transform: scale(0.87);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
        }

        45% {
            -webkit-transform: scale(1);
            transform: scale(1);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
        }
    }
    /**
 * ----------------------------------------
 * Animation Bounce-Top
 * ----------------------------------------
 */
    @-webkit-keyframes bounce-top {
        0% {
            -webkit-transform: translateY(-45px);
            transform: translateY(-45px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
            opacity: 1;
        }

        24% {
            opacity: 1;
        }

        40% {
            -webkit-transform: translateY(-24px);
            transform: translateY(-24px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
        }

        65% {
            -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
        }

        82% {
            -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
        }

        93% {
            -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
        }

        25%, 55%, 75%, 87% {
            -webkit-transform: translateY(0px);
            transform: translateY(0px);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
        }

        100% {
            -webkit-transform: translateY(0px);
            transform: translateY(0px);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
            opacity: 1;
        }
    }

    @keyframes bounce-top {
        0% {
            -webkit-transform: translateY(-45px);
            transform: translateY(-45px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
            opacity: 1;
        }

        24% {
            opacity: 1;
        }

        40% {
            -webkit-transform: translateY(-24px);
            transform: translateY(-24px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
        }

        65% {
            -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
        }

        82% {
            -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
        }

        93% {
            -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
        }

        25%, 55%, 75%, 87% {
            -webkit-transform: translateY(0px);
            transform: translateY(0px);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
        }

        100% {
            -webkit-transform: translateY(0px);
            transform: translateY(0px);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
            opacity: 1;
        }
    }
    /**
 * ----------------------------------------
 * Animation Shake-Vertical
 * ----------------------------------------
 */
    @-webkit-keyframes shake-vertical {
        0%, 100% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }

        10%, 30%, 50%, 70% {
            -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
        }

        20%, 40%, 60% {
            -webkit-transform: translateY(8px);
            transform: translateY(8px);
        }

        80% {
            -webkit-transform: translateY(6.4px);
            transform: translateY(6.4px);
        }

        90% {
            -webkit-transform: translateY(-6.4px);
            transform: translateY(-6.4px);
        }
    }

    @keyframes shake-vertical {
        0%, 100% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }

        10%, 30%, 50%, 70% {
            -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
        }

        20%, 40%, 60% {
            -webkit-transform: translateY(8px);
            transform: translateY(8px);
        }

        80% {
            -webkit-transform: translateY(6.4px);
            transform: translateY(6.4px);
        }

        90% {
            -webkit-transform: translateY(-6.4px);
            transform: translateY(-6.4px);
        }
    }
    /**
 * ----------------------------------------
 * Animation Slide-In-Left
 * ----------------------------------------
 */
    @-webkit-keyframes slide-in-left {
        0% {
            -webkit-transform: translateX(-500px);
            transform: translateX(-500px);
            opacity: 0;
        }

        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes slide-in-left {
        0% {
            -webkit-transform: translateX(-500px);
            transform: translateX(-500px);
            opacity: 0;
        }

        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            opacity: 1;
        }
    }
    /**
 * ----------------------------------------
 * Animation Slide-In-Right
 * ----------------------------------------
 */
    @-webkit-keyframes slide-in-right {
        0% {
            -webkit-transform: translateX(500px);
            transform: translateX(500px);
            opacity: 0;
        }

        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes slide-in-right {
        0% {
            -webkit-transform: translateX(500px);
            transform: translateX(500px);
            opacity: 0;
        }

        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            opacity: 1;
        }
    }
    /**
 * ----------------------------------------
 * Animation Wobble-hor-bottom
 * ----------------------------------------
 */
    @-webkit-keyframes wobble-hor-bottom {
        0%, 100% {
            -webkit-transform: translateX(0%);
            transform: translateX(0%);
            -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
        }

        15% {
            -webkit-transform: translateX(-30px) rotate(-6deg);
            transform: translateX(-30px) rotate(-6deg);
        }

        30% {
            -webkit-transform: translateX(15px) rotate(6deg);
            transform: translateX(15px) rotate(6deg);
        }

        45% {
            -webkit-transform: translateX(-15px) rotate(-3.6deg);
            transform: translateX(-15px) rotate(-3.6deg);
        }

        60% {
            -webkit-transform: translateX(9px) rotate(2.4deg);
            transform: translateX(9px) rotate(2.4deg);
        }

        75% {
            -webkit-transform: translateX(-6px) rotate(-1.2deg);
            transform: translateX(-6px) rotate(-1.2deg);
        }
    }

    @keyframes wobble-hor-bottom {
        0%, 100% {
            -webkit-transform: translateX(0%);
            transform: translateX(0%);
            -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
        }

        15% {
            -webkit-transform: translateX(-30px) rotate(-6deg);
            transform: translateX(-30px) rotate(-6deg);
        }

        30% {
            -webkit-transform: translateX(15px) rotate(6deg);
            transform: translateX(15px) rotate(6deg);
        }

        45% {
            -webkit-transform: translateX(-15px) rotate(-3.6deg);
            transform: translateX(-15px) rotate(-3.6deg);
        }

        60% {
            -webkit-transform: translateX(9px) rotate(2.4deg);
            transform: translateX(9px) rotate(2.4deg);
        }

        75% {
            -webkit-transform: translateX(-6px) rotate(-1.2deg);
            transform: translateX(-6px) rotate(-1.2deg);
        }
    }
    /**
 * ----------------------------------------
 * Animation Slide-in-fwd-center
 * ----------------------------------------
 */
    @-webkit-keyframes slide-in-fwd-center {
        0% {
            -webkit-transform: translateZ(-1400px);
            transform: translateZ(-1400px);
            opacity: 0;
        }

        100% {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            opacity: 1;
        }
    }

    @keyframes slide-in-fwd-center {
        0% {
            -webkit-transform: translateZ(-1400px);
            transform: translateZ(-1400px);
            opacity: 0;
        }

        100% {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            opacity: 1;
        }
    }
    /**
 * ----------------------------------------
 * Animation Fade-In
 * ----------------------------------------
 */
    @-webkit-keyframes fade-in {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes fade-in {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }
    /**
 * ----------------------------------------
 * Animation Fade-Out
 * ----------------------------------------
 */
    @-webkit-keyframes fade-out {
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }

    @keyframes fade-out {
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }
    /**
 * ----------------------------------------
 * animation roll-out-left
 * ----------------------------------------
 */
    @-webkit-keyframes roll-out-left {
        0% {
            -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
            opacity: 1;
        }

        100% {
            -webkit-transform: translateX(-1000px) rotate(-540deg);
            transform: translateX(-1000px) rotate(-540deg);
            opacity: 0;
        }
    }

    @keyframes roll-out-left {
        0% {
            -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
            opacity: 1;
        }

        100% {
            -webkit-transform: translateX(-1000px) rotate(-540deg);
            transform: translateX(-1000px) rotate(-540deg);
            opacity: 0;
        }
    }
    /* ---------------------------------------------------
//////////////////////////////////////////////////////
    
    23. FORMS

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

    /* Can set the support form to 'raw html' in hubspot and then style here */

    /*iframe #hs-form-iframe-0 .hbspt-form .input {
    margin-right: 0 !important;
}
iframe #hs-form-iframe-0 .hbspt-form input[type="file"].hs-input {
    font-size: 0.875rem !important;
}*/
    /* --------------------------------------------------------
///////////////////////////////////////////////////////////
    
    24. IE 10+ SPECIFIC - CSS VARIABLES FALLBACK (We're no longer supporting IE though login page will still be visible below the modal notice)

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
-------------------------------------------------------- */
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        .if-internet-explorer-is-used {
            display: block !important;
            position: fixed;
            z-index: 99999999999;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-color: rgba(0,0,0,0.5);
        }

        /* -------------------------------------------------------------
        LINKS
    ------------------------------------------------------------- */
        a {
            color: #3e3f42; /* Fallback for IE */
        }

            a:hover {
                color: #6b6c6f; /* Fallback for IE */
            }

        /* -------------------------------------------------------------
        TYPOGRAPHY
    ------------------------------------------------------------- */
        p {
            color: #6b6c6f; /* Fallback for IE */
        }

        h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
            color: #3e3f42; /* Fallback for IE */
        }

        /*Check if being used*/
        .grey-50 {
            color: #9ea0a5; /* IE fallback */
        }

        /*Check if being used*/
        .grey-75 {
            color: #6b6c6f; /* IE fallback */
        }
        /*Check if being used*/
        .dark {
            color: #3e3f42; /* IE fallback */
        }

        /* -------------------------------------------------------------
        SIDEBAR
    ------------------------------------------------------------- */
        #sidebar {
            width: 17rem; /* Fallback for IE */
        }

            /*#sidebar.active {
             margin-left: -17rem; Fallback for IE 
        }*/

            #sidebar ul {
                color: #6b6c6f; /* IE Fallback */
            }

                /*#sidebar li.navigation-heading {
            color: #9ea0a5; 
        }*/

                #sidebar ul.navbar-nav li a:hover {
                    color: #343a40; /* Fallback for IE */
                }

                #sidebar ul.navbar-nav li a::before {
                    /*background-color: #eaedf3;*/ /* Fallback for IE */
                }

                #sidebar ul.navbar-nav li.active > a {
                    /*background-color: #eaedf3;*/ /* Fallback for IE */
                }

                #sidebar ul.navbar-nav li ul li a:hover {
                    color: #343a40; /* Fallback for IE */
                }

                /* Begin - Pushing user panel to bottom in IE */
                #sidebar ul.navbar-nav {
                    padding-bottom: 9rem;
                }

            #sidebar .user-panel {
                position: absolute;
                bottom: 0;
            }
            /* End - Pushing user panel to bottom in IE */

            #sidebar .user-details p:first-child {
                color: #3e3f42; /* Fallback for IE */
            }



        /* -------------------------------------------------------------
        MAIN CONTENT
    ------------------------------------------------------------- */

        #main-content {
            width: calc(100% - 17rem); /* Fallback for IE */
        }

            /* -------------------------------------------------------------
        TOPBAR
    ------------------------------------------------------------- */

            #main-content > .navbar {
                height: 92px; /* Fallback for IE */
                border-bottom: solid 0px #9ea0a5; /* Fallback for IE */
                background-color: #f7f9fa; /* Fallback for IE */
            }

        .btn.btn-topbar-modal p.btn-label-bottom {
            color: #3e3f42; /* Fallback for IE */
        }

        /* -------------------------------------------------------------
        MODALS
    ------------------------------------------------------------- */

        .modal-header {
            border-bottom: 1px solid #eaedf3; /* Fallback for IE */
        }

        .modal-title {
            color: #3e3f42; /* Fallback for IE */
        }

        .modal-footer {
            background-color: #f7f9fa; /* Fallback for IE */
        }

        #modRpDate .modal-header, #modGraph .modal-header {
            color: #3e3f42; /* Fallback for IE */
        }

        #modCompetitors .btn-close {
            color: #3e3f42; /* Fallback for IE */
        }

        #modWhyJoin .modal-header button.close {
            color: #3e3f42; /* Fallback for IE */
        }

        #modMultiPage .modal-header button.close {
            color: #3e3f42; /* Fallback for IE */
        }
        /*Checkbox background changing when checked*/
        .custom-control-input:checked ~ .custom-control-label::before {
            background-image: linear-gradient(to top, #34aa44, #38b249); /* Fallback for IE */
        }

        #modMultiPage .signup-form-labels {
            color: #9ea0a5; /* Fallback for IE */
        }

        /* -------------------------------------------------------------
        TABS
    ------------------------------------------------------------- */

        .modal-header .nav-link {
            color: #3e3f42; /* Fallback for IE */
        }

        /* -------------------------------------------------------------
        DEMO
    ------------------------------------------------------------- */

        .row.demo-panel {
            background: linear-gradient(to top, #1665d8, #1f6fe5); /* Fallback for IE */
        }

        /* -------------------------------------------------------------
        DASHBOARD
    ------------------------------------------------------------- */

        .page-content .dashboard .card p:first-child {
            color: #3e3f42; /* Fallback for IE */
        }

        /* -------------------------------------------------------------
        TABLES & GRAPHS
    ------------------------------------------------------------- */

        /*.card */ .grid-top-title td.htd-metric {
            border-right: solid 1px #eaedf3; /* Fallback for IE */
        }

        /*.card */ .grid-top-title td.htd-col2 {
            border-right: solid 1px #eaedf3; /* Fallback for IE */
        }

        /* -------------------------------------------------------------
        BUTTONS
    ------------------------------------------------------------- */

        /* Button Primary */
        .btn-primary {
            background-image: linear-gradient(to top, #1665d8, #1f6fe5); /* Fallback for IE */
        }

        /* Button Secondary */
        .btn-secondary {
            background-image: linear-gradient(to top, #34aa44, #38b249); /* Fallback for IE */
        }

        /* Link */
        .btn-link {
            color: #3e3f42; /* Fallback for IE */
        }

            .btn-link:hover {
                color: #3e3f42; /* Fallback for IE */
            }

        /* Link Blue */
        .btn-link-blue, #sign-in-page a {
            color: #1665d8; /* Fallback for IE */
        }

            .btn-link-blue:hover, #sign-in-page a:hover {
                color: #1665d8; /* Fallback for IE */
            }

        /* -------------------------------------------------------------
        LOG IN PAGE
    ------------------------------------------------------------- */

        #sign-in-page #txtUsername_wrapper::before {
            color: #737373; /* Fallback for IE */
        }

        #sign-in-page #txtPassword_wrapper::before {
            color: #737373; /* Fallback for IE */
        }
    }
    /* -------------------------------------------------------------
        FLOATING HEADER
    ------------------------------------------------------------- */
    #floating-head {
        position: fixed;
        top: 92px;
        z-index: 2;
        background-color: white;
        padding-top: 14px;
    }

    /*mod test*/
    .user-action-bar + .graph-table #floating-head {
        top: 129px;
        padding-top: 0.875rem;
    }

    /*end mod test*/

    .btn-no {
        pointer-events: none !important;
    }

    .btn-on {
        color: #fff;
        border: solid 1px #1461d2;
        background-image: linear-gradient(to top, var(--water-blue), var(--azul));
        -webkit-backface-visibility: hidden;
    }

    .parentcell:hover > div {
        color: white;
        background: #3e3f42 !important;
        background-color: #3e3f42 !important;
        cursor: pointer !important;
    }

    .parent-met-cell:hover > div {
        cursor: pointer !important;
        /*box-shadow: 0 0 2px 2px rgba(238, 137, 45, 1);*/ /* orange */
        box-shadow: 0 0 2px 2px rgba(22,101,216,0.5); /* water blue */
    }

        .parent-met-cell:hover > div::before {
            top: 50%;
            left: 1.75rem;
        }

    .tickbox-on {
        color: #fff;
        border: solid 1px #1461d2;
        background-image: linear-gradient(to top, var(--water-blue), var(--azul));
        -webkit-backface-visibility: hidden;
    }

        .tickbox-on:before {
            top: 50%;
            left: 1.75rem;
            font-family: FontAwesome;
            content: '\f00c';
        }

    .tickbox {
        width: 37px;
    }

    .td-hide {
        display: none;
    }

    /* --------------------------------------------------------
///////////////////////////////////////////////////////////
    
    Modal Dataset & Datasets Table Tree

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


    #modDataset .body-dataset {
        padding-top: 3.75rem;
    }
    /*Button Tabs - this overrides the full-width modal class on 2598, check if it's used elsewhere*/
    #modDataset .modal-header .btn-group {
        display: flex;
        flex-direction: row;
    }

    #modDataset .modal-header .btn.btn-2-level {
        flex: 0 1 auto;
        width: auto;
        max-width: unset;
        min-width: 25%;
    }

    @media (min-width: 1200px) {
        #modDataset .modal-header .btn.btn-2-level#btnModDataset {
            flex: 0 0 auto;
        }

        #modDataset .modal-header #btnModReportPeriodOne, #modDataset .modal-header #btnModReportPeriodTwo {
            flex: 0 0 25%;
        }
    }

    #modDataset .modal-content {
        min-height: 80vh;
    }

    #modDataset .modal-footer .btn {
        position: absolute;
        right: 3rem;
        top: 50%;
        transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #modDataset .modal-footer {
        padding-left: 0;
        padding-right: 0;
        z-index: 9999999999 !important;
    }


    #modDataset .modal-header, #modDataset .modal-body, #modDataset .modal-footer,
    #modRpExecutive .modal-header, #modRpExecutive .modal-body,
    #modKPIModify .modal-header, #modKPIModify .modal-body {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .bg-panel-stretch {
        width: calc(100% + 6rem);
        margin-left: -3rem;
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }

    @media (min-width: 1992px) {
        #modDataset .modal-header, #modDataset .modal-body, #modDataset .modal-footer,
        #modRpExecutive .modal-header, #modRpExecutive .modal-body {
            padding-left: 0;
            padding-right: 0;
        }

            #modDataset .modal-footer .btn {
                right: 1rem;
            }

        .bg-panel-stretch {
            width: calc(100% + 6rem);
            margin-left: -3rem;
        }
    }


    #SearchResults {
        position: absolute;
        max-height: 44.25rem;
        overflow-y: scroll;
        margin-bottom: 1rem;
        z-index: 100;
        background-color: white;
        padding: 0rem;
        border-radius: 0.25rem;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04);
        transform: translate3d(0px, 1rem, 0px);
        will-change: transform;
        border: 1px solid rgba(0, 0, 0, 0.15);
    }

    #hierarchy-list-grey {
        position: absolute;
        background-color: rgba(255, 255, 255, 0.8);
        z-index: 99;
    }

    #SearchResults tr.rgRow, #SearchResults tr.rgAltRow {
        height: unset;
        cursor: pointer;
        border: none;
        /*border-bottom: 1px solid #dfdfdf !important;*/
    }

        #SearchResults tr.rgRow:first-child, #SearchResults tr.rgAltRow:first-child {
            border-top-left-radius: 0.25rem;
            border-top-right-radius: 0.25rem;
        }

    #SearchResults tr.rgRow {
        background-color: #fff;
    }

    #SearchResults tr.rgAltRow {
        background-color: #ededed;
    }

    #SearchResults td {
        padding: 0.75rem 1rem;
    }

    #SearchResults table {
        font-size: 0.875rem;
    }

    @media screen and (min-width: 1920px) {

        #SearchResults table {
            font-size: 1rem;
        }
    }

    .dropdown-menu {
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04);
        /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);*/
        min-width: 100%;
    }

.user-action-bar .dropdown-menu {
    min-width: calc(100% - 0.5rem);
}

    .dropdown-item {
        padding: 0.5rem 1rem;
    }

        .dropdown-item.active, .dropdown-item:active {
            color: #fff;
            text-decoration: none;
            background: linear-gradient( 180deg, #1F6FE5 0%, #1665D8 100%);
        }

        .dropdown-item:focus {
            outline: none;
        }

    .instant-search {
        flex-grow: 1;
        max-width: 774px;
    }

    #modDataset .instant-search {
        flex-grow: 1;
        max-width: unset;
    }

    .instant-search .input-group {
        line-height: unset;
        height: unset;
        border: none;
    }

    .instant-search .instant-search-icon {
        height: unset;
        line-height: 1.5;
        /*padding: 0.5rem 0.75rem;*/
        padding: 0.75rem;
        text-align: center;
        pointer-events: none;
        border-top-left-radius: 0.25rem;
        border-bottom-left-radius: 0.25rem;
        color: #605F5E;
        background-color: #f3f3f3;
        background-color: #EDEDED;
    }

    .instant-search .dropdown-toggle {
        /*background-color: #f3f3f3;*/
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .instant-search .dropdown:first-child .dropdown-toggle {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .instant-search .dropdown .btn {
        padding: 0.75rem 1rem;
    }

    .instant-search .input-group .form-control {
        height: unset;
        /*padding: 0.5rem 0.75rem;*/
        padding: 0.75rem 1rem;
        padding-left: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        /*background-color: #f3f3f3;*/
        background-color: #EDEDED;
    }

    .instant-search .input-group .form-control {
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    }

    .instant-search .form-control {
        font: unset !important;
        font-family: 'Roboto', "Helvetica Neue", Arial, sans-serif !important;
        color: #6b6c6f !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
        border: 1px solid #f3f3f3 !important;
        border: 1px solid #EDEDED !important;
    }

    #modDataset .btn, .instant-search .form-control, #modDataset .instant-search,
    #modDataset .instant-search-icon, #modDataset .instant-search .txtTLSearch, #modDataset table,
    #modRpExecutive .form-control {
        font-size: 0.75rem !important;
    }

        #modDataset .instant-search-icon .fa-search {
            line-height: 1.5;
            padding-top: 1px;
        }

    #modDataset .btn-neutral {
        border: 1px solid transparent;
    }

    .input-group-append:not(:last-child) .btn-red {
        margin-right: 1px; /*to reveal the border-right when it's not the last appended thing*/
    }

    @media screen and (min-width: 1920px) {

        #modDataset .btn, .instant-search .form-control, #modDataset .instant-search,
        #modDataset .instant-search-icon, #modDataset .instant-search .txtTLSearch, #modDataset table,
        #modRpExecutive .form-control {
            font-size: 0.875rem !important;
        }
    }

    #modDataset .RadAjaxPanel .rtlHeader, #modRpExecutive .RadAjaxPanel .rtlHeader {
        display: none;
    }

    #modDataset .RadTreeList {
        max-height: calc(59rem + 2px);
        overflow-y: scroll;
    }

        #modDataset .RadTreeList .rtlVBorders .rtlR td, .RadTreeList .rtlVBorders .rtlA td,
        #modRpExecutive .RadTreeList .rtlVBorders .rtlR td {
            border-left-color: transparent;
        }

        #modDataset .RadTreeList .tdIconR, #modRpExecutive .RadTreeList .tdIconR {
            font-weight: 900;
        }
        /*Icons*/
        #modDataset .RadTreeList .rtlCF, #modRpExecutive .RadTreeList .rtlCF {
            cursor: pointer;
            padding-left: 3rem;
        }

            #modDataset .RadTreeList .rtlCF::before, #modRpExecutive .RadTreeList .tree-border-bottom::before, #SearchResults .tdResult::before,
            #modRpExecutive .RadTreeList .tdIconC::before, #modRpExecutive .RadTreeList .tdIconX::before, .rgMasterTable .tdIconS::before, .rgMasterTable .tdIconC::before, .rgMasterTable .tdIconG::before {
                font-family: "Font Awesome 5 Pro";
                font-weight: 900;
                margin-right: 1rem;
            }

        /*Custom Node*/
        #modDataset .RadTreeList .tdIconX::before, #modRpExecutive .RadTreeList .tdIconX::before, #SearchResults .tdIconX::before {
            font-family: "Font Awesome 5 Pro";
            font-weight: 400;
            content: "\f304";
        }

        /*Location*/
        #modDataset .RadTreeList .tdIconM::before, #modRpExecutive .RadTreeList .tdIconM::before, #SearchResults .tdIconM::before {
            font-family: "Font Awesome 5 Duotone";
            content: "\10f3c5";
        }

        /*Consolidation*/
        #modDataset .RadTreeList .tdIconC::before, #modRpExecutive .RadTreeList .tdIconC::before, #SearchResults .tdIconC::before, .rgMasterTable .tdIconC::before {
            font-family: "Font Awesome 5 Pro";
            font-weight: 400;
            content: "\f5fd";
        }

        /*Group Set*/
        #modDataset .RadTreeList .tdIconG::before, #modRpExecutive .RadTreeList .tdIconG::before, #SearchResults .tdIconG::before, .rgMasterTable .tdIconG::before {
            font-family: "Font Awesome 5 Duotone";
            font-weight: 500;
            content: "\10f247";
        }

        /*Brand*/
        #modDataset .RadTreeList .tdIconB::before, #modRpExecutive .RadTreeList .tdIconB::before, #SearchResults .tdIconB::before {
            font-weight: 400;
            content: "\f132";
        }
        /*Asset*/
        #modDataset .RadTreeList .tdIconA::before, #modRpExecutive .RadTreeList .tdIconA::before, #SearchResults .tdIconA::before {
            font-weight: 400;
            content: "\f1ec";
        }
        /*Hotel*/
        #modDataset .RadTreeList .tdIconH::before, #modRpExecutive .RadTreeList .tdIconH::before, #SearchResults .tdIconH::before {
            font-family: "Font Awesome 5 Duotone";
            font-weight: 500;
            content: "\f594";
        }
        /*Set*/
        #modDataset .RadTreeList .tdIconS::before, #modRpExecutive .RadTreeList .tdIconS::before, #SearchResults .tdIconS::before, .rgMasterTable .tdIconS::before {
            font-family: "Font Awesome 5 Pro";
            content: "\f643";
            font-weight: 300;
        }

    /*Set Type*/
    #modRpExecutive .RadTreeList .tdIconT::before {
        font-family: "Font Awesome 5 Pro";
        content: "\f733";
        font-weight: 300;
    }

    /*Validity*/
    #modRpExecutive .RadTreeList .tdIconV::before {
        font-family: "Font Awesome 5 Pro";
        content: "\f073";
        font-weight: 300;
    }

    /*Location*/
    #modRpExecutive .RadTreeList .tdIconM {
        color: #35CE8D !important;
    }

    /*Consolidation*/
    #modRpExecutive .RadTreeList .tdIconC {
        color: #F68A1F !important;
    }

    /*Group Set*/
    #modRpExecutive .RadTreeList .tdIconG {
        color: #F68A1F !important;
    }

    /*Brand*/
    #modRpExecutive .RadTreeList .tdIconB {
        color: #576CA8 !important;
    }
    /*Asset*/
    #modRpExecutive .RadTreeList .tdIconA {
        color: #274690 !important;
    }
    /*Hotel*/
    #modRpExecutive .RadTreeList .tdIconH {
        color: #007FFF !important;
    }

    /*Colours*/
    #modRpExecutive tr.nodeR {
        color: #5E6C89 !important;
    }

    #modDataset tr.nodeM, #modRpExecutive tr.nodeM {
        color: #35CE8D !important;
    }

    #modDataset tr.nodeC, #modRpExecutive tr.nodeC {
        color: #F68A1F !important;
    }

    #modDataset tr.nodeG, #modRpExecutive tr.nodeG {
        color: #F68A1F !important;
    }

    #modDataset tr.nodeX, #modRpExecutive tr.nodeX {
        color: #5E6C89 !important;
    }

    #modDataset tr.nodeA {
        color: #274690 !important;
    }

    #modDataset tr.nodeB {
        color: #576CA8 !important;
    }

    #modDataset tr.nodeH, #modRpExecutive tr.nodeH {
        color: #007FFF !important;
    }

    #modDataset tr.nodeS, #modRpExecutive tr.nodeS {
        color: #F68A1F !important;
    }

    /* To add for alt rows with jQuery*/
    .tree-border-bottom {
        border-bottom: 1px solid #dfdfdf !important;
        cursor: pointer;
    }
    /*tr > td.tree-border-bottom:not(td.tree-border-bottom + td.tree-border-bottom, td.rtlL2.tree-border-bottom) {
    background-color: #e3e3e3 !important;
}
tr > td.tree-border-bottom:not(td.tree-border-bottom + td.tree-border-bottom) {
    background-color: #e3e3e3 !important;
}
tr > td.tree-border-bottom:nth-child(even):not(td.tree-border-bottom + td.tree-border-bottom) {
    background-color: #f7f7f7 !important;
}*/

    .tree-border-top {
        border-bottom: 1px solid #dfdfdf !important;
    }

    #modDataset .RadTreeList_Default .rtlA {
        background-color: #ededed !important;
    }

        #modDataset .RadTreeList_Default .rtlA td {
            /* border-bottom: 1px solid #3e3f42 !important;*/
        }

    #modDataset .RadTreeList_Default .rtlR {
        background-color: #fcfcfc !important;
    }

        #modDataset .RadTreeList_Default .rtlR td {
            /*border-bottom: 1px solid #3e3f42 !important;*/
        }

    .exec-group-tree .RadTreeList_Default .rtlA td {
        background-color: #ededed !important;
    }

    #modRpExecutive .RadTreeList_Default .rtlA {
        background-color: #fcfcfc !important;
    }

    #modRpExecutive .RadTreeList_Default .rtlR {
        background-color: #fcfcfc !important;
    }

    #modRpExecutive .RadTreeList_Default .tRowAlt {
        background-color: #ededed !important;
    }

    /* NB. Look into whether it's possible to adjust saturation of a var if set using HSL color*/
    #modRpExecutive .RadTreeList_Default .tSub {
        background-color: rgba(var(--primary1-opacity), 0.05) !important;
    }

    #modRpExecutive .RadTreeList_Default .tSubAlt {
        background-color: rgba(var(--primary1-opacity), 0.15) !important;
    }


    /* NB check if the RadTreeList class and others are used elsewhere, if not can remove these IDs */
    #modDataset .RadTreeList .rtlExpand, #modRpExecutive .RadTreeList .rtlExpand {
        border: none;
        background: transparent;
    }

    #modDataset .RadTreeList .rtlCollapse, #modRpExecutive .RadTreeList .rtlCollapse {
        border: none;
        background: transparent;
    }

    #modDataset .RadTreeList .rtlExpandIcon::before, #modRpExecutive .RadTreeList .rtlExpandIcon::before {
        font-family: "Font Awesome 5 Pro";
        font-weight: 100;
        content: "\f105";
        color: #007FFF;
        /*color: var(--primary1);*/
        font-size: 2rem;
        line-height: 0.75; /*keeps tr height from being larger than it should be*/
    }

    #modDataset .RadTreeList .rtlCollapseIcon::before, #modRpExecutive .RadTreeList .rtlCollapseIcon::before {
        font-family: "Font Awesome 5 Pro";
        font-weight: 100;
        content: "\f107";
        color: #007FFF;
        /*color: var(--primary1);*/
        font-size: 2rem;
        line-height: 0.75; /*keeps tr height from being larger than it should be*/
    }

    #modDataset .RadTreeList .rtlCollapse, #modDataset .RadTreeList .rtlExpand,
    #modRpExecutive .RadTreeList .rtlCollapse, #modRpExecutive .RadTreeList .rtlExpand {
        outline: none;
    }

    #modDataset .RadTreeList_Default .rtlLines td.rtlL1, #modDataset .RadTreeList_Default .rtlLines td.rtlL2,
    #modDataset .RadTreeList_Default .rtlLines td.rtlL3, #modDataset .RadTreeList_Default .rtlLines td.rtlL0,
    #modRpExecutive .RadTreeList_Default .rtlLines td.rtlL1, #modRpExecutive .RadTreeList_Default .rtlLines td.rtlL2,
    #modRpExecutive .RadTreeList_Default .rtlLines td.rtlL3, #modRpExecutive .RadTreeList_Default .rtlLines td.rtlL0 {
        background-image: none !important;
    }

    #modDataset .RadTreeList, #modRpExecutive .RadTreeList {
        border: 0;
    }
    /* Tree expand/collapse icon cell */
    #modDataset .RadTreeList_Default .rtlLines td.rtlL1, #modDataset .RadTreeList_Default .rtlLines td.rtlL2,
    #modDataset .RadTreeList_Default .rtlLines td.rtlL3,
    #modRpExecutive .RadTreeList_Default .rtlLines td.rtlL1, #modRpExecutive .RadTreeList_Default .rtlLines td.rtlL2,
    #modRpExecutive .RadTreeList_Default .rtlLines td.rtlL3 {
        /*border-bottom: 1px solid transparent !important;*/
        padding-top: 0;
        padding-bottom: 0;
    }

    .RadTreeList .rtlHBorders .rtlRL td {
        border-bottom: 1px solid transparent !important;
    }

    #modDataset .RadTreeList .rtlR > td, #modDataset .RadTreeList .rtlA > td,
    #modDataset .RadTreeList .rtlREdit > td, #modDataset .RadTreeList .rtlRFooter > td,
    #modRpExecutive .RadTreeList .rtlR > td, #modRpExecutive .RadTreeList .rtlA > td,
    #modRpExecutive .RadTreeList .rtlREdit > td, #modRpExecutive .RadTreeList .rtlRFooter > td {
        border-bottom: 1px solid transparent;
        vertical-align: middle;
        padding: 0.875rem 1rem;
    }

    #modDataset .RadTreeList .rtlHBorders .rtlROut td, #modRpExecutive .RadTreeList .rtlHBorders .rtlROut td {
        border-top: 1px solid transparent;
    }

    #modDataset .RadTreeList .rtlHVBorders .rtlR td.rtlCF, #modDataset .RadTreeList .rtlHVBorders .rtlA td.rtlCF,
    #modDataset .RadTreeList .rtlHVBorders .rtlREdit td.rtlCF, #modDataset .RadTreeList .rtlHVBorders .rtlRFooter td.rtlCF,
    #modRpExecutive .RadTreeList .rtlHVBorders .rtlR td.rtlCF, #modRpExecutive .RadTreeList .rtlHVBorders .rtlA td.rtlCF,
    #modRpExecutive .RadTreeList .rtlHVBorders .rtlREdit td.rtlCF, #modRpExecutive .RadTreeList .rtlHVBorders .rtlRFooter td.rtlCF {
        border-left: none;
    }

    /* Vertical dotted border left of validity dates*/
    #modDataset .tdIconS + .rtlCL, #modRpExecutive .tdIconS + .rtlCL {
        border-left: dotted 1px #E3E3E3 !important;
    }

    #modDataset .RadTreeList .rtlR, #modDataset .RadTreeList .rtlA, #modDataset .RadTreeList .rtlREdit, #modDataset .RadTreeList .rtlRFooter,
    #modRpExecutive .RadTreeList .rtlR, #modRpExecutive .RadTreeList .rtlA, #modRpExecutive .RadTreeList .rtlREdit, #modRpExecutive .RadTreeList .rtlRFooter {
        height: unset !important;
    }

    #modDataset .RadTreeList_Default .rtlRSel {
        background-color: inherit;
        background-image: none;
        background: linear-gradient(180deg, #1F6FE5 0%, #1665D8 100%);
        color: #fff !important;
    }

    #modRpExecutive .RadTreeList_Default .rtlRSel {
        background-color: inherit;
        background-image: inherit;
        background: inherit;
        color: inherit;
    }

    .RadTreeList_Default, .rtlCEdit div.RadTreeList_Default {
        color: #262626 !important;
    }

    #modRpExecutive .RadTreeList .rtlRSel .rtlCF::before {
        color: inherit;
    }

    #modDataset .RadTreeList .rtlRSel .rtlCF::before {
        color: #fff;
    }

    #modDataset .RadTreeList, #modRpExecutive .RadTreeList {
        line-height: 1.5;
    }

    /*.RadTreeList .rtlL.rtlL1, .RadTreeList .rtlL.rtlL2, .RadTreeList .rtlL.rtlL3{
    background-color: #e3e3e3 !important;
}*/

    .tree-collapse-expand-bg {
        background-color: #e3e3e3 !important;
        border-bottom: 1px solid #dfdfdf !important;
    }


    /* Panel 2 (Table and Map) */
    #modDataset .panel-2.border-left {
        border-left: solid 1px #E3E3E3;
    }


    #modDataset .panel-2 .nav-tabs .btn {
        padding: 0.75rem 1rem;
    }

        #modDataset .panel-2 .nav-tabs .btn:first-child {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        #modDataset .panel-2 .nav-tabs .btn:not(:first-child) {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

    #modDataset .panel-2 .my-map {
        min-height: 508px;
        border-radius: 0.25rem;
        border: 1px solid #262626;
    }

    /*#modDataset .panel-2 td.compVal, #modDataset .panel-2 th.compHead1, #modDataset .panel-2 tr.rgRow, 
#modDataset .panel-2 tr.rgAltRow {
    border-left: none;
    border-right: none;
}*/


    #ctl00_rgvCompSet {
        border-bottom: 1px solid #EDEDED;
    }

    #modDataset .panel-2 tr.rgAltRow {
        height: unset !important;
    }

    #modDataset .panel-2 td.compVal {
        padding-left: 1rem;
        padding: 0.875rem 1rem;
    }

    #modDataset .panel-2 .btn-neutral {
        background-color: #ededed;
    }

        #modDataset .panel-2 .btn-neutral:not(:disabled):not(.disabled):active,
        #modDataset .panel-2 .btn-neutral:not(:disabled):not(.disabled).active {
            border: 1px solid #EDEDED;
            color: #262626;
            background: #fff;
            font-weight: 700;
        }

    #modDataset .btn-neutral:not(:disabled):not(.disabled):active:focus,
    #modDataset .btn-neutral:not(:disabled):not(.disabled).active:focus,
    #modDataset .show > .btn-neutral.dropdown-toggle:focus {
        box-shadow: none;
    }

    #modDataset .panel-2 .rgNoComp td.compVal {
        padding: 1.5rem 1rem;
        line-height: 1.5rem;
        font-size: 0.875rem;
        font-weight: 400;
        width: 100%;
        background-color: #f9f9f9;
    }

        #modDataset .panel-2 .rgNoComp td.compVal > div {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            margin: 2rem 3rem;
        }
            /*#modDataset .panel-2 .rgNoComp td.compVal > div::before {
            content: "";
            background-image: url("../Images/Graphics/datalimit-3.svg");
            background-repeat: no-repeat;
            width: calc(180px * 0.549);
            height: 180px;
            margin-right: 3rem;
        }*/
            #modDataset .panel-2 .rgNoComp td.compVal > div::before {
                content: "";
                background-image: url("../Images/Graphics/datalimit-3.svg");
                background-repeat: no-repeat;
                width: calc(15rem * 0.549);
                height: 15rem;
                margin-right: 2rem;
                flex: 1 0 auto;
            }

            #modDataset .panel-2 .rgNoComp td.compVal > div p {
                flex: 0 1 auto;
                margin-right: auto;
                /*max-width: 34rem;*/
            }

    @media screen and (min-width: 1920px) {
        #modDataset .panel-2 .rgNoComp td.compVal {
            font-size: 1rem;
        }
    }

    .no-mappings-panel img {
        height: auto;
        width: 10rem;
        padding: 2rem 0;
    }

    .no-mappings-panel .no-mappings-text {
        max-width: 54rem;
    }

    .no-mappings-panel .card {
        box-shadow: none;
        border: 1px solid #dee2e6;
        border-radius: 0;
    }

        .no-mappings-panel .card ul {
            margin-left: 1rem;
            color: var(--grey-75);
        }

            .no-mappings-panel .card ul li {
                list-style-position: outside;
            }


    /* --------------------------------------------------------
///////////////////////////////////////////////////////////
    MODAL - ModRpExecutive
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
-------------------------------------------------------- */

    #modRpExecutive .RadTreeList {
        max-height: 63.5vh;
        /*height: 63.5vh;*/
        overflow-y: scroll;
        margin-bottom: 1rem;
    }

    #modRpExecutive .datasets-search .btn {
        padding: 0.5rem 0.75rem;
    }

    .paragraph-small {
        font-size: 0.75rem;
        color: #6b6c6f;
    }

    .paragraph-large {
        font-size: 0.875rem;
        color: #262626;
        display: inline-block;
    }

    @media screen and (min-width: 1920px) {
        #modRpExecutive .datasets-search .btn {
            padding: 0.5rem 1rem;
        }

        .paragraph-small {
            font-size: 0.875rem;
        }

        .paragraph-large {
            font-size: 1rem;
        }
    }

    #modRpExecutive .input-group .form-control {
        height: 3rem;
        padding-left: 0.75rem;
    }

    .card.exec-date-range {
        flex: 1 1 auto;
        max-width: 242px;
        pointer-events: none;
        margin-bottom: 1rem;
        box-shadow: none;
        border: 1px solid #DEE2e6;
    }


    /* USALI Mappings */

    .no-mappings-panel .card {
        height: auto;
        pointer-events: none;
    }

    /* --------------------------------------------------------
///////////////////////////////////////////////////////////
    CUSTOM CONTROL / CUSTOM CHECKBOXES
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
-------------------------------------------------------- */

    td .custom-control-input:checked ~ .custom-control-label::before {
        background-image: none;
        border-color: var(--primary1);
    }

    td .custom-control-label::before {
        top: 0 !important;
        left: 0;
        width: 1.25rem;
        height: 1.25rem;
        background-color: #fff;
        border-color: var(--primary1);
    }

    td .custom-control-label::after {
        top: 0 !important;
        left: 0rem;
        width: 1.25rem;
        height: 1.25rem;
    }



    /* Buttons */

    #modRpExecutive .btn-primary, #modRpExecutive .btn-secondary, #modRpExecutive .footer-buttons .btn-outline-dark, #modKPIModify .btn-primary, #modKPIModify .btn-secondary {
        padding: 0.75rem 1rem;
    }

    @media screen and (min-width: 1920px) {
        #modRpExecutive .btn-primary, #modRpExecutive .btn-secondary, #modRpExecutive .footer-buttons .btn-outline-dark, #modKPIModify .btn-primary, #modKPIModify .btn-secondary {
            padding: 0.75rem 1rem;
        }
    }

    /* --------------------------------------------------------
///////////////////////////////////////////////////////////
    Main Content v2 (simpler better)
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
-------------------------------------------------------- */

#loaderAnimation {
    width: calc(100% - var(--sidebar-width));
}
    #main-content.main-content-v2 {
        display: flex;
        flex-direction: column;
        width: calc(100% - var(--sidebar-width));
        min-height: 100vh !important;
        position: absolute;
        top: 0;
        right: 0;
        transition: all 0.2s ease-out;
    }

        #main-content.main-content-v2.sidebar-collapsed, #loaderAnimation.sidebar-collapsed {
            width: calc(100% - 4.5rem);
            transition: width 0.2s ease-out 0s;
        }

    @media (min-width:1920px) {
        #main-content.main-content-v2.sidebar-collapsed, #loaderAnimation.sidebar-collapsed {
            width: calc(100% - 5rem);
        }
    }

    #main-content.main-content-v2 nav.navbar {
        width: 100%;
        left: unset;
        transition: all 0.2s ease-out 0s;
    }

        #main-content.main-content-v2 nav.navbar .report-buttons {
            padding-left: 0;
        }

        #main-content.main-content-v2 nav.navbar .user-panel {
            width: 100%;
            margin-left: auto;
        }

    @media (min-width:576px) {
        #main-content.main-content-v2 nav.navbar .user-panel {
            width: unset;
        }
    }

.no-graph {
    width: 300px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    background-image: url(/Images/Graphics/error-alert.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    padding-top:236px;
}

#modGraph .no-graph {
    top: calc(50% - 18px);
}

.data-last-cell {
    pointer-events: none !important;
}


.data-exp-box {
    width:1.25rem;
    height:1.125rem; /*0.75 x 1.5*/
    pointer-events: all !important;
    position: relative;
    margin-left:calc(100% - 1.25rem);
}

    .data-exp-box::before, .data-exp-box::after {
        font-family: "Font Awesome 5 Duotone";
        font-weight: 500;
        position: absolute;
        font-size: 1.25rem;
        top: 50%;
        transform: translateY(-50%);
        width: 1.25rem;
        text-align: center;
        transition: all 0.2s ease-out 0s;
    }

    .data-exp-box-down::before {
        content: "\f322";
        opacity: 0.375;
    }

    .data-exp-box-down::after {
        content: "\10f322";
        opacity: 0.15;
    }

.data-exp-box-up::before {
    content: "\f325";
    opacity: 0.375;
}

.data-exp-box-up::after {
    content: "\10f325";
    opacity: 0.15;
}

    .data-exp-box:hover::before {
        opacity: 1;
    }

    .data-exp-box:hover::after {
        opacity: 0.4;
    }


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

    MODGRAPH - Graph Datalist Table

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

.graph-data-table.table {
    color: #666666;
    font-size: 11px;
}
    .graph-data-table.table tr td {
        padding-top: 8.25px;
        padding-bottom: 8.25px;
        text-align:center;
    }
    .graph-data-table.table tr:first-child {
        background-color: var(--tbl-head-title);
        color:white;
        font-weight:600;
    }

.primary-background {
    background-color: var(--g-primary);
}

.secondary-background {
    background-color: var(--g-secondary);
}


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


.mi01, .mi02, .mi03, .mi04, .mi05, .mi06, .mi07, .mi08, .mi09, .mi10, .mi11, .mi12, .mi13, .mi14, .mi15, .mi16, .mi17, .mi18, .mi19, .mi20, .mi21, .mi22, .mi23, .mi24, .mi25, .mi26, .mi27 {
    display: none;
}