/*
 * jQuery percentileSliderBox - v0.0.1
 * 
 * Author: SOASTA 
 * 
 * 01 May 2014
 * 
 */

/*
  Common CSS Properties
  ---------------------
  These properties will be applied to any themes that you use
*/
.percentileSliderBox-container {
 position: relative;
 display: inline-block;
 vertical-align: top;
}

/* ========================= The List Dropdown ========================= */
.percentileSliderBox-container .dropdown {
 width: 90px;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
 position: absolute;
 top: calc(100% + 1px);
 text-align: left;
 margin: 0;
 padding: 0;
 background: hsla(213, 0%, 100%, 1);
 border: 1px solid hsl(213, 10%, 75%);
 border-radius: 6px;
 box-shadow: 0 0 42px hsla(213, 30%, 30%, .1), 0 9px 18px
  hsla(213, 30%, 30%, .075), 0px 9px 8px hsla(213, 30%, 30%, .075);
 z-index: 9999999999999;
 opacity: 0;
 display: table;
 visibility: hidden;
 transition: visibility 0ms linear 100ms, opacity 100ms ease-in-out 0ms;
}

.percentileSliderBox-container .selectboxit-container.opened ~ .dropdown
 {
 opacity: 1.0;
 visibility: visible;
 transition: visibility 0ms linear 0ms, opacity 200ms ease-in-out 0ms;
}

.dashboard_filter_criteria_table_cont .percentileSliderBox-container .dropdown
 {
 box-shadow: 0 0 12px hsla(213, 30%, 30%, .1), 0 4px 18px
  hsla(213, 30%, 30%, .075);
}

.darkTheme .percentileSliderBox-container .dropdown {
 background: hsla(213, 10%, 12%, .95);
 border: 1px solid hsl(213, 10%, 38%);
 box-shadow: 0 0 12px hsla(213, 50%, 60%, 0.1), 0 0 140px
  hsla(213, 100%, 60%, 0.15);
}

.darkBlueTheme .percentileSliderBox-container .dropdown {
 background: hsla(200, 75%, 18%, .95);
 border: 1px solid hsl(200, 30%, 48%);
 box-shadow: 0 0 12px hsla(200, 50%, 60%, 0.1), 0 0 140px
  hsla(200, 100%, 60%, 0.15);
}

/* ================== Dropdown Panels ================= */
.percentileSliderBox-container .dropdown_panel {
 width: 88px;
 position: relative;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
 text-align: left;
 margin: 0;
 padding: 0;
 border: 1px solid hsla(213, 10%, 75%, 0);
 display: block;
}

.percentileSliderBox-container .dropdown_panel.top {
 height: 28px;
 border-bottom-color: hsl(213, 10%, 75%);
}

.dashboard_filter_criteria_table_cont .percentileSliderBox-container .dropdown_panel.top
 {
 height: 20px;
 border-bottom-color: hsl(213, 10%, 75%);
}

.darkTheme  .percentileSliderBox-container .dropdown_panel.top {
 border-bottom-color: hsl(213, 10%, 32%);
}

.darkBlueTheme  .percentileSliderBox-container .dropdown_panel.top {
 border-bottom-color: hsl(200, 30%, 44%);
}

.percentileSliderBox-container .dropdown_panel.main {
 height: 196px;
 border-bottom-color: hsl(213, 10%, 75%);
}

.dashboard_filter_criteria_table_cont .percentileSliderBox-container .dropdown_panel.main
 {
 height: 138px;
}

.darkTheme .percentileSliderBox-container .dropdown_panel.main {
 border-bottom-color: hsl(213, 3%, 32%);
}

.darkBlueTheme .percentileSliderBox-container .dropdown_panel.main {
 border-bottom-color: hsl(200, 30%, 44%);
}

.percentileSliderBox-container .dropdown_panel.bottom {
 height: 50px;
}

.dashboard_filter_criteria_table_cont .percentileSliderBox-container .dropdown_panel.bottom
 {
 height: 38px;
}

.percentileSliderBox-container .right_constrained {
 right: 0px;
}

/* ================== Slider Feedback Text ================= */
.percentileSliderBox-container .slider_feedback_text {
 width: 100%;
 height: 1.3em;
 color: hsl(208, 8%, 20%);
 line-height: 1.3em;
 position: absolute;
 top: 0px;
 bottom: 0px;
 left: 0px;
 right: 0px;
 text-align: center;
 margin: auto;
 display: block;
}

.dashboard_filter_criteria_table_cont .percentileSliderBox-container .slider_feedback_text
 {
 height: 1.3em;
 line-height: 1.0em;
}

.darkTheme .percentileSliderBox-container .slider_feedback_text {
 color: hsl(213, 20%, 75%);
}

.darkBlueTheme .percentileSliderBox-container .slider_feedback_text {
 color: hsl(200, 50%, 85%);
}

/* ================================== Slider / Track ===================================== */
.percentileSliderBox-container .slider_panel {
 width: 6px;
 height: 86%;
 box-sizing: border-box;
 color: hsl(208, 8%, 20%);
 position: absolute;
 top: 0px;
 bottom: 0px;
 left: 0px;
 right: 0px;
 margin: auto;
 background: hsl(213, 10%, 95%);
 border: 1px solid hsl(213, 10%, 80%);
 display: block;
}

.darkTheme .percentileSliderBox-container .slider_panel {
 background: hsl(213, 5%, 3%);
 border: 1px solid hsl(213, 5%, 28%);
}

.darkBlueTheme .percentileSliderBox-container .slider_panel {
 background: hsl(200, 50%, 9%);
 border: 1px solid hsl(200, 30%, 28%);
}

/* --------------- Slider Handle ---------------- */
.percentileSliderBox-container .ui-slider .ui-slider-handle {
 width: 17px;
 height: 13px;
 left: -8px;
 background: hsl(213, 10%, 95%);
 border: 1px solid hsl(213, 10%, 70%);
 border-radius: 6px;
 cursor: pointer;
}

.ui-slider .ui-slider-handle.ui-state-focus, .ui-slider .ui-slider-handle.ui-state-hover
 {
 border: 1px solid hsl(213, 10%, 65%);
 outline: none;
}

.darkTheme .percentileSliderBox-container .ui-slider .ui-slider-handle {
 background: hsl(213, 5%, 19%);
 border-color: hsl(213, 5%, 38%);
}

.darkBlueTheme .percentileSliderBox-container .ui-slider .ui-slider-handle
 {
 background: hsl(200, 75%, 40%);
 border-color: hsl(200, 75%, 65%);
}

.darkTheme .ui-slider .ui-slider-handle.ui-state-focus, .darkTheme .ui-slider .ui-slider-handle.ui-state-hover
 {
 background: hsl(213, 5%, 26%);
 border-color: hsl(213, 5%, 42%);
 outline: none;
}

.darkBlueTheme .ui-slider .ui-slider-handle.ui-state-focus,
 .darkBlueTheme .ui-slider .ui-slider-handle.ui-state-hover {
 background: hsl(200, 75%, 50%);
 border-color: hsl(200, 75%, 80%);
 outline: none;
}

/* --------------- Slider Percentage Ticks ---------------- */
.percentileSliderBox-container .tick {
 height: 1px;
 width: 8px;
 position: absolute;
 left: 15px;
 background: hsl(213, 10%, 70%);
}

.darkTheme .percentileSliderBox-container .tick {
 background: hsl(213, 10%, 38%);
}

.darkBlueTheme .percentileSliderBox-container .tick {
 background: hsl(200, 30%, 48%);
}

.percentileSliderBox-container .tick_text {
 position:     absolute;
 top:        -7px;
 left:       11px;
 font-size:     .9em;
 color:       hsl(213, 8%, 40%);
}

.dashboard_filter_criteria_table_cont .percentileSliderBox-container .tick_text
 {
 font-size:     10px;
 top:        -6px;
}

.darkTheme .percentileSliderBox-container .tick_text {
 color: hsl(213, 10%, 60%);
}

.darkBlueTheme .percentileSliderBox-container .tick_text {
 color: hsl(200, 50%, 70%);
}

/* ========================== Button: Apply ====================== */
.percentileSliderBox-container button.ctButton.selected {
 width: 60px;
 height: 30px;
 
 position: absolute;
 top: 0px;
 bottom: 0px;
 left: 0px;
 right: 0px;
 
 text-align: center;
 margin: 10px auto 10px auto;
 display: block;
 
  color:        hsl(213, 30%, 90%);
  background:   hsl(213, 100%, 62%);
  border:       none;
  box-shadow:   none;
}
.darkTheme .percentileSliderBox-container button.ctButton.selected {
    color:        hsl(213, 20%, 85%);
    background:   hsl(213, 100%, 50%);
}
.darkBlueTheme .percentileSliderBox-container button.ctButton.selected {
    color:        hsl(200, 30%, 90%);
    background:   hsl(200, 100%, 50%);
}

.percentileSliderBox-container button.ctButton.selected:hover {
    color:        hsl(213, 100%, 98%);
    background:   hsl(213, 100%, 55%);
}
.darkTheme .percentileSliderBox-container button.ctButton.selected:hover {
    color:        hsl(213, 100%, 98%);
    background:   hsl(213, 100%, 60%);
}
.darkBlueTheme .percentileSliderBox-container button.ctButton.selected:hover {
    color:        hsl(200, 100%, 98%);
    background:   hsl(200, 100%, 60%);
}


.dashboard_filter_criteria_table_cont .percentileSliderBox-container button.ctButton.selected
 {
 width: 60px;
 height: 30px;
 margin: 5px auto 5px auto;
}