/*! checkboxrange v0.4.0-alpha [15-05-2015] | (c) Rafael Pawlos (https://pawlos.dev) | MIT license */

.checkbox-range-container{
  background: transparent;
}
.checkbox-range-container,
.checkbox-range-container label,
.checkbox-range-container div,
.checkbox-range-container li,
.checkbox-range-container ul{
  position:relative;
  cursor:default;
  -khtml-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.checkbox-range-point{
  display: inline-block;
  width:30px;
  height:30px;
  background:#ea3;
  border-radius:50%;
  position:absolute;
  left:-5px;
  top:-5px;
  z-index:-1;
  visibility: hidden;
}
.checkbox-range-point.show{
  visibility:visible;
}
.checkbox-range-bound-canvas{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  z-index:-1; 
}
.checkbox-range-bound-canvas line{
  stroke:#ea3;
  stroke-width:30;
}
.checkbox-range-container .ontouch-label{
  position: absolute;
  visibility: hidden;
  top: -40px;
  left: 25px;
  background: #333;
  padding: 2px 5px;
  font-size: 1em;
  color: #eee;
  border-radius: 4px 4px 4px 0;
  box-shadow: 1px -1px 1px #000;
  text-shadow:0 1px #000;
}
.checkbox-range-container .ontouch-label:after{
  content: '';
  position:absolute;
  top:1.6em;
  left:-2px;
  border: solid 7px;
  border-color: transparent;
  border-top-color: #333;
  border-left-color: #333;
  -webkit-transform: skewX(-19deg);
  -ms-transform: skewX(-19deg);
  transform: skewX(-19deg);
}
.checkbox-range-container .checkbox-range-point.show ~ .ontouch-label{
  visibility: visible;
}

/* Checkboxes style */
.checkbox-range-container.cr-style{
  padding:10px;
}
.checkbox-range-container.cr-style > div{
  position:relative;
}
.checkbox-range-container.cr-style input[type="checkbox"] ~ label{
  -webkit-transform: translateY(calc(-50% + 8px));
  -ms-transform: translateY(calc(-50% + 8px));
  transform: translateY(calc(-50% + 8px));
}
.checkbox-range-container.cr-style > label,
.checkbox-range-container.cr-style input[type="checkbox"] ~ label{
  display: inline-block;
  padding: 0px 8px 0px 25px;
  margin: 2px 0;
}
.checkbox-range-container.cr-style > label input[type="checkbox"] ~ .checkbox-mask{
  margin-left:-25px;
}
.checkbox-range-container.cr-style input[type="checkbox"]{
  position:absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  opacity:0;
  filter: alpha(opacity=0);
  z-index: 2;
}
.checkbox-range-container.cr-style input[type="checkbox"] ~ .checkbox-mask{
  position: absolute;
  display: inline-block;
  width: 20px;
  height: 20px;
  top: 0;
  border-radius: 4px;
  box-shadow: inset 0 0 5px #222, 0 0 1px #fff, 0 0 1px #fff;
  background:#444;
}
.checkbox-range-container.cr-style input[type="checkbox"] ~ .checkbox-mask:after {
  filter: alpha(opacity=0);
  opacity: 0;
  content: ' ';
  position: absolute;
  display: block;
  box-sizing: content-box;
  width: 9px;
  height: 5px;
  background: transparent;
  top: 4px;
  left: 4px;
  border: 3px solid #eee;
  border-top: none;
  border-right: none;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.checkbox-range-container.cr-style input[type="checkbox"]:hover ~ .checkbox-mask:after {
  opacity: 0.4;
}
.checkbox-range-container.cr-style input[type="checkbox"]:checked ~ .checkbox-mask:after {
  opacity: 1;
}