:root {
    /* Backgrounds */
    --flex-stone-grey: #C8C8B7;
    --flex-stone-grey-40: #E9E9E2;
    --flex-steel-blue: #8296D1;
    --flex-steel-blue-40: #CDD5ED;
    --flex-barn-red: #EB5D44;
    --flex-barn-red-40: #EB5D4466;
    --flex-hay-yellow: #FACA6C;
    --flex-hay-yellow-40: #FACA6C66;
    --flex-green: #4BDE97;
    --bg-secondary: #4A4A4A;
    --bg-primary: var(--flex-stone-grey);
    --bg-tertiary: #a87bc9;
    --bg-widget: #FFFFFF;
    --left-nav-width: 6rem;
    --phase1-light: #c4e1fc;
    --phase1-dark: #347ef2;
    --phase2-light: #d2f8e1;
    --phase2-dark: #4bde97;
    --phase3-light: #fee5fd;
    --phase3-dark: #f85af2;
    /* Designations */
    --designation-import: var(--flex-barn-red-40);
    --designation-export: var(--flex-hay-yellow);
    --designation-gen: var(--flex-barn-red);
    --designation-load: var(--flex-hay-yellow-40);
    /* Designations (Light) */
    --desig-import-light: var(--flex-barn-red-40);
    --desig-export-light: rgba(176, 212, 252, 1);
    --desig-gen-light: rgba(144, 75, 210, 1);
    --desig-load-light: rgba(9, 120, 246, 1);
    /* Filter */
    --filter-bg: rgba(9, 120, 246, 1);
    --filter-text: #333;
    --filter-text-alt: #ffffff;
    /* Charts */
    --chart-divider: #EAEAEA;
    /* Pills */
    --pill-bg: #0978F6;
    --pill-text: var(--bg-tertiary);
    /* Text */
    --text-grey: #707070;
    --text-btn-primary: #ffffff;
    --text-whitey: white;
    --text-tertiary: var(--bg-tertiary);
    --active-text: #349bf0;
    /* Stats */
    --bg-sustainability: #4BDE97;
    --bg-energy: #FACA8C;
    --bg-site: #8296D1;
    --bg-spotprice: #E9E9E2;
    /* Override BS*/
    --bs-body-bg: #ffffff;
    --bs-table-color: #4D4D4D;
    --bs-body-color: black;
}

.flex :root {
    --bg-tertiary: #391358;
}

/* Colours */
.flex-steel-blue {
    background-color: var(--flex-steel-blue);
}

.flex-steel-blue-40 {
    background-color: var(--flex-steel-blue-40);
}

.flex-barn-red {
    background-color: var(--flex-barn-red);
}

.flex-stone-grey-40 {
    background-color: var(--flex-stone-grey-40);
}

.flex-on-track {
    background-color: var(--flex-green);
}

.flex-not-on-track {
    background-color: var(--flex-barn-red);
}

.bg-white {
    background-color: white;
}

html, body {
    font-family: "Inter",sans-serif;
    font-size: 14px;
    height: 100%;
    color: #333;
    margin: 0;
    padding: 0;
    border: none;
    background-color: var(--bg-primary);
}

.container-xxl {
    background-image: url('/img/portal-images-1294x400-man-on-beach.jpg');
    background-size: cover;
    max-width: 100%;
    height: 300px;
    max-width: 2000px;
    background-position-y: -130px;
    padding: 0;
    position: relative;
    background-repeat: no-repeat;
    padding-top: 12rem;
}

    body.flex .container-xxl {
        background-image: url('/img/freshgrass.jpg');
        background-position-y:0;
    }

    .container-xxl {
        background-size: 103%;
        background-position-y:-50px;
    }

body.forestlodge .container-xxl {
    background-image: url('/img/fl-hero img.png');
    background-position-x: 0;
    height: 300px;
}

    @media (max-width:1023px) {
        body.energy .container-xxl {
            background-size: 140%;
            background-position-x: -200px;
        }
    }

    @media (max-width:767px) {
        body.energy .container-xxl {
            background-size: 210%;
            background-position-x: -225px;
        }
    }

main {
    padding-top: 4rem;
    color:white;
    padding-left:0;
    padding-right:0;
}

/*body.energy main {
    padding-left: 0;
    padding-right: 0;
}*/

.dropdown-toggle {
    cursor:pointer;
}

.loader {
    background-color:white;
}

.indicator {
    border-radius:15px;
    background-color: #CDD5ED;
    padding:2px 10px;
    font-size:0.8rem;
}

.energy .indicator
{
    background-color: white;
    border: 1px solid #d0d0d0;
    color:#333;
}

.energy .indicator.diagnostics {
    background-color: #c3a3f8;
    border: 1px solid #d0d0d0;
    color: #333;
}

.container {
    max-width: 2000px;
    padding: 0;
    padding-left: 5rem;
    padding-right: 5rem;
    width: auto;
}

.energy .indicator-status-good {
    border: 1px solid #eaeaea;
    background-color: #D2F8E1;
    color: black;
    font-weight: 500;
}

.border-right {
    border-right: 1px solid #d0d0d0;
}


.content-container {
    margin: 0;
    padding: 1rem;
    border: 1px solid #C4C4C4;
    background-color: #FFFFFF;
    color:#333;
}

@media (min-width:1024px) {
    .content-container {
    /*    margin: 1rem;*/
    }
}

.content-container h3 {
    padding: 0 0 .5rem 0;
    /*margin: 0 0 1rem 0;*/
    border-bottom: 1px solid #D4D4D4;
    text-transform: uppercase;
    font-size: .8rem;
    display: block;
    width: 100%;
    color: #707070;
    font-weight: bold;
}

    .content-container h3 span.instructions {
        float: right;
        color: #707070;
        font-weight: normal;
    }


/* SIM Cards */

.simtable th, .simtable td {
    font-size: 0.8rem;
}

.simtable .badge {
    padding: 6px 8px;
    margin-left: 5px;
    font-weight: normal;
    text-transform: uppercase;
}

    .simtable .badge.smaller {
        font-size: 0.6rem;
    }

.simtable .portfolio-product-logo {
    max-height: 30px;
}

.sim-table td {
    border-bottom: 1px dashed #ddd !important;
}

.simdetails .supplier img {
    max-height: 40px;
    margin: 0.5rem;
}

.sim-table img {
    max-height: 30px;
    display: block;
}

.sim-table tr > td:first-child {
    color: #aaa;
}

.sim-table tr > td.heading {
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--bg-tertiary) !important;
    background: #e9e9e9;
    border-bottom: 0;
}

.sim-table sub {
    bottom: 0;
    display: block;
    color: #555 !important;
    margin-top: 0.5rem;
}

.sim-table .success {
    color: #89cc65;
}

.sim-table .danger {
    color: #cc6565;
}

.sim-table label {
    color: #aaa;
}

.sim-table .grey {
    color: rgba(0,0,0,0.5);
}

.badge-danger {
    background-color: #c14747
}

.customer-location-dropdown {
    line-height:40px;
}

.field-validation-error,
.validation-summary-errors {
    color: red;
}



.errorpage {
    background: white;
    padding: 30px;
    border-radius: 20px;
}

.flex .errorpage {
    border-radius:0;
}

    .errorpage .requestid {
        font-size: 0.8rem;
        color: rgba(0,0,0,0.4);
    }

@media (min-width:1024px) {
    .errorpage img {
        max-width: 800px;
        display: block;
        margin: auto;
    }

    .errorpage {
        text-align: center;
    }
}

.errorpage a {
    color:var(--active-text);
}