/* @override http://ebsi.cornerstone.compass/css/demo.css */

/* -- slider CSS -- */
.slider {
    margin: 20px 8.6em 54px;
    background: #e8e8e8 !important;
    border: none;
    box-shadow: inset 0 1px 1px #aaa;
}

    .ui-slider-range-min.ui-widget-header {
        background: #468847;
        border: 1px solid #468847;
    }

    .ui-slider .ui-slider-handle {
        top: -0.4em;
        margin-left: -0.75em;
        width: 26px;
        height: 26px;
        background: #fff !important;
        border: 2px solid #468847 !important;
        border-radius: 50%;
    }

    .slider-tick {
        position: absolute;
        top: -6px;
        width: 26px;
        height: 26px;
        margin-left: -12px;
        background: #e8e8e8;
        border: none;
        text-align: center;
        border-radius: 50%;    
        box-shadow: inset 0 2px 0 -1px #aaa;
    }
        .green-bg {
            background: #468847 !important;
        }

    .slider-label,
    .ideal-value {    
        margin-top: 24px;      
        font-weight: bold;
        line-height: 1.1;
        font-family: "open_sanssemibold", AvenirNext-Bold, "Droid Sans", Arial, sans-serif;
        text-transform: uppercase;
        text-align: center;
    }

    .slider-label {
        width: 54px;
        color: #9a9a9a;
        font-size: 14px;
        font-size: 0.875rem;
    }
        .slider-label.float-left {
            margin-left: -24px;
        }
        .slider-label.float-right {
            margin-right: -24px;
        }

    .ideal-value {
        display: inline-block;
        position: absolute;
        left: 50%;
        width: 140px;
        margin-left: -70px; 
        color: #468847;     
        font-size: 16px;
        font-size: 1rem;
    }
        .ideal-value > small,
        .ideal-value > strong {
            display: block;
            font-size: 14px;
            font-size: 0.875rem;
        }

    .ui-autocomplete {
        max-height: 280px !important; overflow: auto !important;
    }

/* max-width 768px */
@media only screen and (max-width: 48em) {

    .slider {
        margin: 20px 5.4em 54px;
    }

}