:root {
    /*Generic styles used for most clients*/
    --xl-grid-header-bgcolor: #f2f4f1;
    --xl-grid-header-bgcolor: #f5f5f5;
    --xl-page-background-color: #f5f5f5;
    --xl-page-background-color: #eff2ef;
    --xl-grid-header-color: #737373;
    --xl-body-color: #333333;
    --xl-gadget-radius: 5px;
    --xl-light-shading: #efefef;
    --xl-row-border-color: #efefef;
    --xl-link-color: #038203;
    --xl-link-hover-color: #43B02A;
    --xl-row-highlight: #E8F0F6;
    /*Client specific styles*/
    --xl-major-color: #3b964b;
    --xl-minor-color: #008a00;
    --xl-minor-color-hover: #009900;
    --xl-body-font-family: Helvetica-,droid sans,sans-serif;
    --xl-primary-button-color: var(--xl-body-color);
    --xl-primary-button-bgcolor: #fff;
    --xl-primary-button-hover-bgcolor: #008a00;
    --xl-primary-button-hover-color: #fff;
    --xl-primary-button-border-color: #008a00;
    --xl-login-button-color: #fff;
    --xl-login-button-bgcolor: #008a00;
    --xl-btn-primary-color: #fff;
    --xl-btn-primary-bgcolor: #008a00;
    --xl-action-button-color: #fff;
    --xl-action-button-bgcolor: #f18a27;
    --xl-action-text-color: #f18a27;
    --xl-action-button-color-button-hover-bgcolor: #f18a27;
    --xl-action-button-hover-color: #fff;
    --xl-secondary-button-color: var(--xl-body-color);
    --xl-secondary-button-bgcolor: #fff;
    --xl-secondary-button-hover-bgcolor: var(--xl-mid-shading);
    --xl-secondary-button-hover-color: var(--xl-body-color);
    --xl-secondary-button-border-color: var(--xl-mid-shading);
    --xl-alert-high-color: #971c0b;
    --xl-alert-medium-color: #f18a27;
    --xl-alert-low-color: #43b02a;
    /*bootstrap overrides*/
    --bs-btn-color: #fff;
    --bs-btn-bg: #71a333;
    --bs-btn-border-color: #009900;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: #009900;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-focus-color: var(--xl-minor-color-hover);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: #009900;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #333;
    --bs-btn-disabled-bg: #ccc;
    --bs-btn-disabled-border-color: #ccc;
}




/* ---------------*************************************************************----------------------*/
/* ---------------*************************************************************----------------------*/
/* ---------------*************************************************************----------------------*/
/* ------------------CLIENT BRANDING COLOR CHANGES - START-------------------*/
/*Copy and past this section into a client specific style sheet*/
/*
Title bar green: 008a00
One shade lighter green for title bar button hover: 6da923
On shade darker green for title bar button borders: 5f941e
Much lighter green for shadow under title bar buttons: A1B984

Main menu and button blue: 3b964b
2 shades lighter blue for button hover:1b6bb1
Main menu active item and hover style is a gradient. Change accordingly below
    
Blue for links: 2A7FC0 (This should not be overwritten unelss specifically requsted by the client)

Alerts:
    Red: EF3F1A;
    Yellow: faba0f (this is also used for the informaton box)

*/
body {
    color: #1c1c1c;
    font-family: Helvetica-,droid sans,sans-serif !important;
    background-color: #ffffff;
    z-index: -1;
    text-align: left;
    height: 100%;
}

.ColoredButton, .button-primary, .button-secondary,
.ColoredButtonLeft, .ColoredButtonRight, .button-primary:focus, .button-primary:active {
    border-radius: 0px;
    border-width: 2px !important;
}
/*  TOOL TIP HOVER FOR PULSE SURVEY */
.x_tooltip {
    position: relative;
    display: inline-block;
}

    .x_tooltip .x_tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: #fff;
        border: 1px solid #666;
        border-radius: 5px;
        color: #000;
        border-radius: 6px;
        padding: 8px;
        width: 400px;
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
    }

    .x_tooltip:hover .x_tooltiptext {
        visibility: visible;
    }





 
/*Background indicator above header - one per data poinit*/
.scale-rating1, .active[data-selectedvalue="1"] div,
.slider-scale-bg9[data-selectedvalue="1"] div {
    background-color: #ccffcc !important;
    background-color: #edf5e0 !important;
    background-color: #a9d26d !important;
    background-color: #abd69b !important;
}

.scale-rating2, .active[data-selectedvalue="2"] div,
.slider-scale-bg9[data-selectedvalue="2"] div {
    background-color: #b3ffb3 !important;
    background-color: #edf5e0 !important;
    background-color: #a9d26d !important;
    background-color: #abd69b !important;
}

.scale-rating3, .active[data-selectedvalue="3"] div,
.slider-scale-bg9[data-selectedvalue="3"] div {
    background-color: #99ff99 !important;
    background-color: #c4df9b !important;
    background-color: #a9d26d !important;
    background-color: #abd69b !important;
}

.scale-rating4, .active[data-selectedvalue="4"] div,
.slider-scale-bg9[data-selectedvalue="4"] div {
    background-color: #80ff80 !important;
    background-color: #c4df9b !important;
    background-color: #a9d26d !important;
    background-color: #abd69b !important;
}

.scale-rating5, .active[data-selectedvalue="5"] div,
.slider-scale-bg9[data-selectedvalue="5"] div {
    background-color: #66ff66 !important;
    background-color: #a9d26d !important;
    background-color: #abd69b !important;
}

.scale-rating6, .active[data-selectedvalue="6"] div,
.slider-scale-bg9[data-selectedvalue="6"] div {
    background-color: #4dff4d !important;
    background-color: #a9d26d !important;
    background-color: #abd69b !important;
}

.scale-rating7, .active[data-selectedvalue="7"] div,
.slider-scale-bg9[data-selectedvalue="7"] div {
    background-color: #33ff33 !important;
    background-color: #3cc63f !important;
    background-color: #83c670 !important;
}

.scale-rating8, .active[data-selectedvalue="8"] div,
.slider-scale-bg9[data-selectedvalue="8"] div {
    background-color: #1aff1a !important;
    background-color: #3cc63f !important;
    background-color: #83c670 !important;
}

.scale-rating9, .active[data-selectedvalue="9"] div,
.slider-scale-bg9[data-selectedvalue="9"] div {
    background-color: #00ff00 !important;
    background-color: #e6f1e0 !important;
    background-color: #83c670 !important;
}

.scale-rating10, .active[data-selectedvalue="10"] div,
.slider-scale-bg9[data-selectedvalue="10"] div {
    background-color: #00e600 !important;
    background-color: #e6f1e0 !important;
    background-color: #83c670 !important;
}

.scale-rating11, .active[data-selectedvalue="11"] div,
.slider-scale-bg9[data-selectedvalue="11"] div {
    background-color: #00cc00 !important;
    background-color: #abd69b !important;
    background-color: #83c670 !important;
}

.scale-rating12, .active[data-selectedvalue="12"] div,
.slider-scale-bg9[data-selectedvalue="12"] div {
    background-color: #00b300 !important;
    background-color: #8bd69b !important;
    background-color: #83c670 !important;
}

.scale-rating13, .active[data-selectedvalue="13"] div,
.slider-scale-bg9[data-selectedvalue="13"] div {
    background-color: #009900 !important;
    background-color: #83c670 !important;
    background-color: #83c670 !important;
}

.scale-rating14, .active[data-selectedvalue="14"] div,
.slider-scale-bg9[data-selectedvalue="14"] div {
    background-color: #008a00 !important;
    background-color: #83c670 !important;
    background-color: #83c670 !important;
}

.scale-rating15, .active[data-selectedvalue="15"] div,
.slider-scale-bg9[data-selectedvalue="15"] div {
    background-color: #008000 !important;
    background-color: #348233 !important;
}

.scale-rating16, .active[data-selectedvalue="16"] div,
.slider-scale-bg9[data-selectedvalue="16"] div {
    background-color: #006600 !important;
    background-color: #348233 !important;
}

.scale-rating17, .active[data-selectedvalue="17"] div,
.slider-scale-bg9[data-selectedvalue="17"] div {
    background-color: #004d00 !important;
    background-color: #348233 !important;
}

.scale-rating18, .active[data-selectedvalue="18"] div,
.slider-scale-bg9[data-selectedvalue="18"] div {
    background-color: #003300 !important;
    background-color: #348233 !important;
}

.scale-rating19, .active[data-selectedvalue="19"] div,
.slider-scale-bg9[data-selectedvalue="19"] div {
    background-color: #001a00 !important;
    background-color: #348233 !important;
}

.scale-rating20, .active[data-selectedvalue="20"] div,
.slider-scale-bg9[data-selectedvalue="20"] div {
    background-color: #000000 !important;
    background-color: #348233 !important;
}



@media (max-width:999px) {
    /*Mobile Client colors*/
    .btn, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .active.btn-primary, .disabled.btn-primary, [disabled].btn-primary, .btn-group.open .btn-primary.dropdown-toggle, .btn-primary.dropdown-toggle:hover, .btn:focus, .btn:active:focus, .button-primary-login:hover, .button-primary-login:focus {
        color: #008a00;
        background-color: #fff !important;
    }

    .page-title {
        border-bottom: 1px solid #008a00;
    }

    /*main menu - items are gray and selected items are green*/
    .nav > li:hover, .nav li:hover, .nav li.active, .nav li .active {
        background-color: #3b964b !important;
        width: 100%;
    }

    .navbar .nav > li > a:hover {
        background: #fff;
        background-color: #fff;
    }

    .navbar .nav > li > a, .navbar .nav li.dropdown.active > .dropdown-toggle,
    .navbar .nav > .active > a, .navbar .nav > li > a:hover, .navbar .nav > .active > a:hover {
        background-color: transparent !important;
        border: none;
    }

        /*white text on green highligted menu item*/
        .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > li:hover a, .navbar .nav > li > a {
            color: #fff !important;
        }

    .progressbar-icon {
        font-size: 23px;
    }

    .progressbar-bar {
        width: 23px;
    }
}
/*END Mobile client color*/