/* control gaps between times */

.pre_t1 {
    width: 0px !important;
}

.t1_text {
    width: 200px !important;
    text-align: center !important;
    margin-left: -150px;
}

.t1_slider {
    width: 0px !important;
    text-align: left !important;
}

.t1_t2_gap {
    width: 310px !important; /* gap between t1 and t2 */
    text-align: left !important;
}


.t2_slider {
    width: 200px !important;
    margin-left: -100px; /* control positioning of left slider */
}

.t2_text {
    width: 200px !important;
    text-align: center !important; 
    margin-left: -31px;   
}

.t2_t3_gap {
    width: 20px  !important; /* controls gap between sliders */
    text-align: left  !important; 
}

.t3_slider {
    width: 200px !important;
    margin-right: -160px !important; /* controls right slider */
}

.t3_text {
    width: 200px !important;
    text-align: center !important;
    margin-left: 28px; /* control right-most text */
}


/* control what sliders look like */


/* make sliders vertical */
.rotate {
    width: 340px; /* change the height of the bars (use width marker because of rotation) */
    transform: rotate(270deg);
    vertical-align: bottom;
}

/* new thumb that appears when clicked */
.slider_one_thumb::-webkit-slider-thumb {
    height: 160px !important; /* control the width of the slider thumb */
    border-radius: 50%;
    width: 8% !important;
    border-radius: 0px !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
}


input[name=slider_one] {
    -webkit-appearance: none;
}

input[name=slider_one]:focus {
    outline: none;
}

/* the track itself */
input[name=slider_one]::-webkit-slider-runnable-track {
    overflow:hidden;
    height: 160px; /* control the width of the bars */
    cursor: pointer;
    background: transparent;
    /* border: 1px solid black; add border when trying to line up sliders and the blocks  */
    pointer-events: auto;
}

/* hide original thumb */
input[name=slider_one]::-webkit-slider-thumb {
    border: 0px;
    height: 0px;
    width: 0px;
    border-radius: 0px;
    -webkit-appearance: none;
}

/* for slider two */
/* new thumb that appears when clicked */
.slider_two_thumb::-webkit-slider-thumb {
    height: 160px !important; /* control the width of the slider thumb */
    border-radius: 50%;
    width: 8% !important;
    border-radius: 0px !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    pointer-events: auto; 
}

input[name=slider_two] {
    -webkit-appearance: none;
}

input[name=slider_two]:focus {
    outline: none;
}

/* the track itself */
input[name=slider_two]::-webkit-slider-runnable-track {
    overflow:hidden;
    height: 160px; /* control the width of the bars */
    cursor: pointer;
    /* border: 1px solid black;  add border when trying to line up sliders and the blocks */
    background: transparent;
    pointer-events: auto;
}

/* hide original slider thumb */
input[name=slider_two]::-webkit-slider-thumb {
    border: 0px;
    height: 0px;
    width: 0px;
    border-radius: 0px;
    -webkit-appearance: none;
}

.left-bubble-zero {
    background: transparent;
    color: black;
    position: relative;
    height: 27px;
    left: 322%;
    top: 3px;
    width: 160px;
    text-align: center;
    z-index: 5;
    border-radius: 4px;
    pointer-events: none !important;
}

.left-bubble-one {
    background: #d3d3d3;
    color: black;
    position: relative;
    top: 3px;
    height: 27px;
    width: 160px;
    z-index: 5;
    left: 322%;
    text-align: center;
    border-radius: 4px;
    pointer-events: none !important;
}

.left-bubble-two {
    background: #d3d3d3;
    color: black;
    position: relative;
    left: 322%;
    top: 3px;
    z-index: 5;
    height: 27px;
    width: 160px;
    text-align: center;
    border-radius: 4px;
    pointer-events: none !important;
}
.left-bubble-three {
    background: #d3d3d3;
    color: black;
    position: relative;
    height: 27px;
    top: 3px;
    left: 322%;
    z-index: 5;
    width: 160px;
    text-align: center;
    border-radius: 4px;
    pointer-events: none !important;
}
.left-bubble-four {
    background: #d3d3d3;
    color: black;
    position: relative;
    height: 27px;
    width: 160px;
    z-index: 5;
    top: 3px;
    left: 322%;
    text-align: center;
    border-radius: 4px;
    pointer-events: none !important;
}
.left-bubble-five {
    background: #d3d3d3;
    color: black;
    position: relative;
    height: 27px;
    top: 3px;
    width: 160px;
    left: 322%;
    z-index: 5;
    text-align: center;
    border-radius: 4px;
    pointer-events: none !important;
}
.left-bubble-six {
    background: #d3d3d3;
    color: black;
    position: relative;
    height: 27px;
    top: 3px;
    width: 160px;
    z-index: 5;
    left: 322%;
    text-align: center;
    border-radius: 4px;
    pointer-events: none !important;
}
.left-bubble-seven {
    background: #d3d3d3;
    color: black;
    position: relative;
    height: 27px;
    top: 3px;
    width: 160px;
    z-index: 5;
    left: 322%;
    text-align: center;
    border-radius: 4px;
    pointer-events: none !important;
}
.left-bubble-eight {
    background: #d3d3d3;
    color: black;
    position: relative;
    height: 27px;
    top: 3px;
    width: 160px;
    z-index: 5;
    left: 322%;
    text-align: center;
    border-radius: 4px;
    pointer-events: none !important;
}
.left-bubble-nine {
    background: #d3d3d3;
    color: black;
    position: relative;
    height: 27px;
    top: 3px;
    width: 160px;
    border-radius: 4px;
    left: 322%;
    text-align: center;
    z-index: 5;
    pointer-events: none !important;
}
.left-bubble-ten {
    background: #d3d3d3;
    color: black;
    position: relative;
    height: 27px;
    width: 160px;
    left: 322%;
    top: 3px;
    z-index: 5;
    text-align: center;
    border-radius: 4px;
    pointer-events: none !important;
}

.right-bubble-zero {
    background: transparent;
    color: black;
    position: relative;
    left: 21%;
    height: 27px;
    top: 3px;
    width: 160px;
    z-index: 5;
    text-align: center;
    border-radius: 4px;
    pointer-events: none !important;
}

.right-bubble-one {
    background: rgb(43, 173, 43);
    color: black;
    position: relative;
    left: 21%;
    top: 3px;
    height: 27px;
    z-index: 5;
    width: 160px;
    text-align: center;
    border-radius: 4px;
    pointer-events: none !important;
}

.right-bubble-two {
    background: rgb(43, 173, 43);
    color: black;
    position: relative;
    left: 21%;
    top: 3px;
    z-index: 5;
    height: 27px;
    width: 160px;
    text-align: center;
    border-radius: 4px;
    pointer-events: none !important;
}
.right-bubble-three {
    background: rgb(43, 173, 43);
    color: black;
    position: relative;
    height: 27px;
    top: 3px;
    z-index: 5;
    left: 21%;
    width: 160px;
    text-align: center;
    border-radius: 4px;
    pointer-events: none !important;
}
.right-bubble-four {
    background: rgb(43, 173, 43);
    color: black;
    position: relative;
    height: 27px;
    width: 160px;
    z-index: 5;
    top: 3px;
    left: 21%;
    text-align: center;
    border-radius: 4px;
    pointer-events: none !important;
}
.right-bubble-five {
    background: rgb(43, 173, 43);
    color: black;
    position: relative;
    height: 27px;
    top: 3px;
    width: 160px;
    left: 21%;
    z-index: 5;
    text-align: center;
    border-radius: 4px;
    pointer-events: none !important;
}
.right-bubble-six {
    background: rgb(43, 173, 43);
    color: black;
    position: relative;
    height: 27px;
    z-index: 5;
    top: 3px;
    width: 160px;
    left: 21%;
    text-align: center;
    border-radius: 4px;
    pointer-events: none !important;
}
.right-bubble-seven {
    background: rgb(43, 173, 43);
    color: black;
    position: relative;
    height: 27px;
    top: 3px;
    width: 160px;
    left: 21%;
    z-index: 5;
    text-align: center;
    border-radius: 4px;
    pointer-events: none !important;
}
.right-bubble-eight {
    background: rgb(43, 173, 43);
    color: black;
    position: relative;
    height: 27px;
    top: 3px;
    width: 160px;
    left: 21%;
    z-index: 5;
    text-align: center;
    border-radius: 4px;
    pointer-events: none !important;
}
.right-bubble-nine {
    background: rgb(43, 173, 43);
    color: black;
    position: relative;
    height: 27px;
    top: 3px;
    width: 160px;
    left: 21%;
    z-index: 5;
    text-align: center;
    border-radius: 4px;
    pointer-events: none !important;
}
.right-bubble-ten {
    background: rgb(43, 173, 43);
    color: black;
    position: relative;
    height: 27px;
    width: 160px;
    z-index: 5;
    left: 21%;
    top: 3px;
    text-align: center;
    border-radius: 4px;
    pointer-events: none !important;
}

.center-bubble-zero {
    background: transparent;
    color: black;
    position: relative;
    height: 27px;
    top: 3px;        
    width: 455px;
    left: -183px;
    text-align: center;
    border-radius: 4px;
    z-index: 6;
    pointer-events: none !important;
}
.center-bubble-one {
    background: transparent;
    color: black;
    position: relative;
    height: 27px;
    top: 3px;
    width: 455px;
    left: -183px;
    text-align: center;
    border-radius: 4px;
    z-index: 6;
    pointer-events: none !important;
}
.center-bubble-two {
    background: transparent;
    color: black;
    position: relative;
    height: 27px;
    top: 3px;
    width: 455px;
    left: -183px;
    text-align: center;
    border-radius: 4px;
    z-index: 6;
    pointer-events: none !important;
}
.center-bubble-three {
    background: transparent;
    color: black;
    position: relative;
    height: 27px;
    top: 3px;
    width: 455px;
    left: -183px;
    text-align: center;
    border-radius: 4px;
    z-index: 6;
    pointer-events: none !important;
}
.center-bubble-four {
    background: transparent;
    color: black;
    position: relative;
    height: 27px;
    top: 3px;
    width: 455px;
    left: -183px;
    text-align: center;
    border-radius: 4px;
    z-index: 6;
    pointer-events: none !important;
}
.center-bubble-five {
    background: transparent;
    color: black;
    position: relative;
    height: 27px;
    top: 3px;
    width: 455px;
    left: -183px;
    text-align: center;
    border-radius: 4px;
    z-index: 6;
    pointer-events: none !important;
}
.center-bubble-six {
    background: transparent;
    color: black;
    position: relative;
    height: 27px;
    top: 3px;
    width: 455px;
    left: -183px;
    text-align: center;
    border-radius: 4px;
    z-index: 6;
    pointer-events: none !important;
}
.center-bubble-seven {
    background: transparent;
    color: black;
    position: relative;
    height: 27px;
    top: 3px;
    width: 455px;
    left: -183px;
    text-align: center;
    border-radius: 4px;
    z-index: 6;
    pointer-events: none !important;
}
.center-bubble-eight {
    background: transparent;
    color: black;
    position: relative;
    height: 27px;
    top: 3px;
    width: 455px;
    left: -183px;
    text-align: center;
    border-radius: 4px;
    z-index: 6;
    pointer-events: none !important;
}
.center-bubble-nine {
    background: transparent;
    color: black;
    position: relative;
    height: 27px;
    top: 3px;
    width: 455px;
    left: -183px;
    text-align: center;
    border-radius: 4px;
    z-index: 6;
    pointer-events: none !important;
} 
.center-bubble-ten {
    background: transparent;
    color: black;
    position: relative;
    height: 27px;
    top: 3px;
    width: 455px;
    left: -183px;
    text-align: center;
    border-radius: 4px;
    z-index: 6;
    pointer-events: none !important;
}

.center-placeholder {
    background: transparent;
    color: black;
    position: relative;
    height: 0px;
    width: 160px; /* control gap between sliders */
    text-align: center;
    z-index: 6;
    pointer-events: none !important;
}