.mb_slider{
  position:relative;
  padding:10px;
  z-index:0;
  font-family:Arial, Helvetica, sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

.mb_slider *:not(.mb_sliderBar):not(.mb_sliderHandler){
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.mb_sliderBar {
    background-color: #c1c1c1;
    height: 10px;
    width: 100%;
    /* box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px; */
    border-radius: 8px;
    cursor: pointer;
}
.mb_sliderHandler {
    /* padding: 0 9px; */
    background-color: #fff;
    position: absolute;
    top: -8px;
    left: 0;
    border-radius: 100%;
    /* box-shadow: rgba(0, 0, 0, 0.30) 0 0 6px 0; */
    cursor: default;
    height: 20px;
    position: absolute;
    width: 20px;
    border: 2px solid #7cb21e;
}
.mb_sliderHandler:hover{
  background-color: #c3e7ff;
}

.mb_sliderEnd, .mb_sliderStart, .mb_sliderValue{
  padding:7px;
  position:relative;
  text-align:right;
  top:-5px;
  margin:3px;
  min-width: 50px;
  color:#AAA;
  white-space: nowrap;
  cursor:default;
}

.mb_sliderStart{
  text-align: right; display:none !important;
}

.mb_sliderEnd{
  text-align: left; display:none !important;
}

.mb_sliderRange{
  position:absolute;
  height:100%;
  margin:0;
  top:0;
  background: #ffcc00;
  border-radius: 4px 0 0 4px ;
  cursor:default;
}

.mb_sliderZero{
  background-color: #fafafa;
  position:absolute;
  height:100%;
  margin:0;
  top:0;
  border-radius:4px 0 0 4px  ;
  cursor:default;
}

.mb_sliderZeroLabel{
  font: 12px/12px Arial, sans-serif;
  color: #AAA;
  padding: 5px;
  background-color: #fff;
  margin-left: -4px;
  z-index: -2;
  border-radius: 4px;
  margin-top: -5px;
}

.mb_sliderValueLabel {
    font: 12px/12px Arial, sans-serif;
    text-align: center;
    padding: 5px 7px;
    background-color: #8BC34A;
    color: #fff;
    top: -30px;
    margin-left: 0;
    z-index: -1;
    border: none;
    margin-top: 50px;
    white-space: nowrap;
    min-width: 35px;
}

.mb_sliderValueLabel:before {
    border-bottom: 8px solid #8BC34A;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    width: 0;
    height: 0;
    content: "";
    display: block;
    top: -8px;
    position: absolute;
    left: 10px;
}

.mb_sliderValueLabel.right{
  left: auto!important;
  right: -15px!important;
}

.mb_sliderValueLabel.left{
  left: -15px!important;
  right: auto!important;
}

.mb_sliderValueLabel.right:after{
  left:auto;
  right: 10px;
  margin: auto;
}

.mb_sliderValueLabel.left:after{
  right:auto;
  left: 10px;
  margin: auto;
}
.calcu{width: 100%;
    float: left;background: #f5f5f5;
    padding:  10px; margin-bottom:10px;}
.calcu_left {
    width: 49%;
    float: left;
    font: normal 16px/35px exo;
    border-left: 6px solid #7cb21e;
    height: 100%;
    line-height: 65px;
    padding-left: 10px;
}
.calcu_right{width: 49%;
    float: right; 
     }	
div#ex1 {
    width: 100%;
    float: left; 
     
}
div#sl1 {
    width: 80%;
    float: left;
}
.bdr{ width:10px; }