﻿/*滑桿系列- 包含kendoSlider、nouiSlider*/
/*須放在 kendo相關系列css 及 nouislider.css 後*/
/*modify by QQ 20200218*/ 

/*kendoSlider//////////////////////////////////////////////////////*/
.SliderRange , .HaveSliderRangePage {
    margin-top:20px;
}
.HaveSliderRangePage{
    margin-bottom:10px;
}
.SliderRange > .condition-title ,.HaveSliderRangePage > .condition-title {
    text-align:right;
    padding-right:15px;
    font-weight:900;
    font-size:20px;
    margin-left:-20px;
    padding:0px;
}
.SliderRange > .condition-title{
    margin-top:6px;
}
.SliderRange > div.condition-title{
    margin-top:0px;
}
.HaveSliderRangePage .TextAlignLeft{
    text-align:left;
}
.HaveSliderRangePage .magic-radio + label:before {
    margin-top:4px;
}
.HaveSliderRangePage .magic-radio + label:after {
    top:10px;
}
.HaveSliderRangePage .radio-inline label {
    font-size:20px;
}
.SliderRangeInput{ 
    /*輸入框*/
    width:100%;
    -webkit-box-sizing: border-box; /**/
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size:20px;
}
.SliderRangeBar {
    /*滑桿外層div (對應kendoUI : k-slider / k-slider-horizontal) */
    width:100%; /*長度變長*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height:0px;
}
.k-slider-track{
    /*滑桿-灰底 bar*/
      width:100% !important; 
      border-radius:0em;
      border-bottom-right-radius:0.3em;
      border-bottom-left-radius:0.3em;
      border-width:3px;      
}
.k-slider-selection , .noUi-connect{
    /*滑桿-有數值的Bar*/
     background-color:rgb(4, 129, 133); /*深綠*/
     border-radius:0em;
     border-bottom-left-radius:0.3em;
}
.k-slider .k-draghandle{
    /*滑桿-按鈕*/
    background-color:white; /*底色-白色*/
    border-color:rgb(4, 129, 133);/*外圈顏色*/
    border-width:5px;
    color:white;
    height:23px;
    width:23px;
    top:-13px;
    border-radius:99em;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.k-draghandle,.k-state-focused.k-state-selected{
    /*滑桿-按鈕*/
    /*background-color:rgb(4, 129, 133);*/ /*深綠*/
    -webkit-box-shadow: none;
    box-shadow: none;
}
.k-slider .k-state-selected:link{
    /*滑桿-按鈕 - 按住滑動時顏色*/
    background-color:white; /*底色-白色*/
    border-color:rgb(4, 129, 133); /*外框-深綠*/
    outline:none;
}
.SliderRangeGrid{
    /*文字群組*/
    height:24px;
    margin-top:10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position:relative;
}
.SliderRangeGrid-Content{
    /*文字群組-文字樣式*/
    font-size:15px;
    left:0;
    line-height:1em;
    position:absolute;
    top:0;
    white-space:nowrap; /*段落中的文本不进行换行*/

}
.SliderRangeGrid-left{
    /*文字群組-左邊文字位置*/
    -webkit-transform: translateX(0); /*設定對應位置*/
    transform: translateX(0); /*設定對應位置*/
}
.SliderRangeGrid-right{
    /*文字群組-右邊文字位置*/
    -webkit-transform: translateX(-100%); /*設定對應位置*/
    transform: translateX(-100%); /*設定對應位置*/
    left:100%;
}
.modal .notslider {
    padding-bottom:10px !important;
}
.control-label span.smallcontent{
    padding:0px;
    font-size:0.9em;
    font-weight:900;
}
.condition-title span.smallcontent{
    padding:0px;
    font-size:0.8em;
    font-weight:700;
}
/*noUiSlider//////////////////////////////////////////////////////////*/
.noUi-target{
    border-radius:0em;
    border-bottom-right-radius:0.3em;
    border-bottom-left-radius:0.3em;
    border:none;
    background:#d5d5d5;
    box-shadow:none;
    padding:0px;
    margin-top:-4px;
}
.noUi-horizontal{
    height:8px;
}
.noUi-connects{
    height:8px;
    border-radius:0px;
}
.noUi-connect{
    height:8px;
}
.noUi-handle{
    width:23px !important;
    height:23px !important;
    background:white !important;
    border-color:rgb(4, 129, 133) !important;
    border-width:5px !important;
    color:white !important;
    top:-13px !important;
    border-radius:99em !important;
    box-sizing:content-box !important;
    -webkit-box-sizing:content-box !important;
}
.noUi-handle:before , .noUi-handle:after{
  content:none;
}