/* Energy Sankey - Controls Styles */

/* Range Slider */
.evs-range-slider {
    width: 100%;
    margin-top: 5px;
    position: relative;
    overflow: visible;
    /*padding-top: 40px;*/
}

/* Axis text styling - matches global text style */
.evs-range-slider text,
.evs-range-slider tspan {
    /*font-family: Fieldwork, Futura, sans-serif;*/
    font-size: 16px;
}

.evs-range-slider__range {
    -webkit-appearance: none;
    width: 100%;
    border-radius: 5px;
    outline: none;
    padding: 0;
    margin: 0;
}

.evs-range-slider__range:first-child {
    background: #d7dcdf;
}

.evs-range-slider__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 1);
    cursor: pointer;
    transition: background 0.15s ease-in-out;
}

.evs-range-slider__range::-moz-range-thumb {
    width: 11px;
    height: 11px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 1);
    cursor: pointer;
    transition: background 0.15s ease-in-out;
}

/* Dynamic Year Display */
#evs-dynamic-year {
    color: black;
    position: absolute;
    /*height: 25px;*/
    width: 50px;
    text-align: center;
    border: 1px solid black;
    border-radius: 3px;
    display: block;
    font-size: 16px;
    top: 0;
    /*bottom: 100%;*/
    background: white;
    padding: 3px 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Add downward arrow pointing to slider */
#evs-dynamic-year::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -4px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid black;
}

/* Play/Pause Button */
#evs-play-button {
    border-radius: 0;
    display: block;
    height: 0;
}

#evs-play-button:hover {
    background: transparent !important;
}

#evs-play-button.evs-playbutton {
    outline: 0;
    background: transparent;
    border-color: transparent transparent transparent #202020;
    transition: 100ms all ease;
    cursor: pointer;
    border-style: solid;
    border-width: 13px 0 13px 20px;
}

#evs-play-button.evs-playpaused {
    outline: 0;
    background: transparent;
    height: 26px;
    border-color: transparent transparent transparent #202020;
    transition: 100ms all ease;
    cursor: pointer;
    border-style: double;
    border-width: 0px 0 0px 20px;
}

#evs-play-button.evs-playbutton:hover {
    border-color: transparent transparent transparent #404040;
}

/* Waste Heat Toggle Switch */
.evs-switch-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-width: 200px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.evs-box-1 {
    /*background: #ffffff;*/
}

input[type="checkbox"].evs-switch-1 {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 3.5em;
    height: 1.5em;
    background: #666666;
    border-radius: 3em;
    position: relative;
    cursor: pointer;
    outline: none;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

input[type="checkbox"].evs-switch-1:checked {
    background: #e49942;
}

input[type="checkbox"].evs-switch-1:after {
    position: absolute;
    content: "";
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background: #fff;
    -webkit-box-shadow: 0 0 .25em rgba(0, 0, 0, .3);
    box-shadow: 0 0 .25em rgba(0, 0, 0, .3);
    -webkit-transform: scale(.7);
    transform: scale(.7);
    left: 0;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

input[type="checkbox"].evs-switch-1:checked:after {
    left: calc(100% - 1.5em);
}

/* Hover effects for better interactivity */
input[type="checkbox"].evs-switch-1:hover {
    background: #555555;
}

input[type="checkbox"].evs-switch-1:checked:hover {
    background: #e49942;
}

/* Focus states for accessibility */
input[type="checkbox"].evs-switch-1:focus {
    box-shadow: 0 0 0 3px #F5DBBC;
}

/* Milestone Tick Markers */
#evs-test-tick .tick text {
    cursor: pointer;
}

#evs-test-tick .tick text:hover {
    color: grey;
    transition: color 250ms;
}

#evs-lbl-waste-hide-show {
    margin-right: 10px;
}