.custom { width: 111px; }
.checkbox {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;

  background: #929292;
  background: -moz-linear-gradient(top,  #929292 0%, #8a8a8a 50%, #989898 51%, #858585 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#929292), color-stop(50%,#8a8a8a), color-stop(51%,#989898), color-stop(100%,#858585));
  background: -webkit-linear-gradient(top,  #929292 0%,#8a8a8a 50%,#989898 51%,#858585 100%);
  background: -o-linear-gradient(top,  #929292 0%,#8a8a8a 50%,#989898 51%,#858585 100%);
  background: -ms-linear-gradient(top,  #929292 0%,#8a8a8a 50%,#989898 51%,#858585 100%);
  background: linear-gradient(top,  #929292 0%,#8a8a8a 50%,#989898 51%,#858585 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#929292', endColorstr='#858585',GradientType=0 );


  display: inline-block;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  
  border: 1px solid #404040;
  border-radius: 3px;
  box-shadow: 0 1px 0 #fff, 
              0 1px 3px rgba(0,0,0,0.3) inset;
  height: 31px;
}
.checkbox span {
  color: #fff;
  font: 19px/31px "AllerDisplayRegular", "Aller Display", Arial;
  float: left;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.8); 
}
.checkbox .on { width: 55%; }
.checkbox .off { width: 45%; }
.checkbox input {
  position: absolute;
  z-index: -1;
  left: 0;
}
.checkbox input + i{
  -ms-transition:.1s ease-in-out;
  -moz-transition:.1s ease-in-out;
  -o-transition:.25s ease-in-out;
  -webkit-transition:.25s ease-in-out;
  transition:.25s ease-in-out;

  background: #c4c4c4;
  background: -moz-linear-gradient(top,  #c4c4c4 0%, #f3f3f3 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c4c4c4), color-stop(100%,#f3f3f3));
  background: -webkit-linear-gradient(top,  #c4c4c4 0%,#f3f3f3 100%);
  background: -o-linear-gradient(top,  #c4c4c4 0%,#f3f3f3 100%);
  background: -ms-linear-gradient(top,  #c4c4c4 0%,#f3f3f3 100%);
  background: linear-gradient(top,  #c4c4c4 0%,#f3f3f3 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c4c4c4', endColorstr='#f3f3f3',GradientType=0 );
  
  border-right: 1px solid #bababa;
  border-radius:2px;
  box-shadow: 0 1px 0 #fff inset;
  position:absolute;
  top: 0;
  left: 0;
  width: 55%;
  height: 29px;
}
.checkbox input:checked + i{
  border: 0;
  border-left: 1px solid #bababa;
  left: 55%;
  width: 45%;
  margin-left: 1px;
}
.checkbox.checkbox-blue {
  background: #2959f0;
  background: -moz-linear-gradient(top,  #2959f0 0%, #2c60fb 50%, #3690f0 51%, #5c88e8 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2959f0), color-stop(50%,#2c60fb), color-stop(51%,#3690f0), color-stop(100%,#5c88e8));
  background: -webkit-linear-gradient(top,  #2959f0 0%,#2c60fb 50%,#3690f0 51%,#5c88e8 100%);
  background: -o-linear-gradient(top,  #2959f0 0%,#2c60fb 50%,#3690f0 51%,#5c88e8 100%);
  background: -ms-linear-gradient(top,  #2959f0 0%,#2c60fb 50%,#3690f0 51%,#5c88e8 100%);
  background: linear-gradient(top,  #2959f0 0%,#2c60fb 50%,#3690f0 51%,#5c88e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2959f0', endColorstr='#5c88e8',GradientType=0 );
}
.checkbox.checkbox-green {
  background: #007e56;
  background: -moz-linear-gradient(top,  #007e56 0%, #007752 50%, #008258 51%, #00865b 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#007e56), color-stop(50%,#007752), color-stop(51%,#008258), color-stop(100%,#00865b));
  background: -webkit-linear-gradient(top,  #007e56 0%,#007752 50%,#008258 51%,#00865b 100%);
  background: -o-linear-gradient(top,  #007e56 0%,#007752 50%,#008258 51%,#00865b 100%);
  background: -ms-linear-gradient(top,  #007e56 0%,#007752 50%,#008258 51%,#00865b 100%);
  background: linear-gradient(top,  #007e56 0%,#007752 50%,#008258 51%,#00865b 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007e56', endColorstr='#00865b',GradientType=0 );
  border-color: #003826;
}
.checkbox.checkbox-red {
  background: #d3002f;
  background: -moz-linear-gradient(top,  #d3002f 0%, #d90030 50%, #e60033 51%, #cc002e 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d3002f), color-stop(50%,#d90030), color-stop(51%,#e60033), color-stop(100%,#cc002e));
  background: -webkit-linear-gradient(top,  #d3002f 0%,#d90030 50%,#e60033 51%,#cc002e 100%);
  background: -o-linear-gradient(top,  #d3002f 0%,#d90030 50%,#e60033 51%,#cc002e 100%);
  background: -ms-linear-gradient(top,  #d3002f 0%,#d90030 50%,#e60033 51%,#cc002e 100%);
  background: linear-gradient(top,  #d3002f 0%,#d90030 50%,#e60033 51%,#cc002e 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d3002f', endColorstr='#cc002e',GradientType=0 );
  border-color: #730019;
}

.checkbox2 {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;

  background: #454546;

  display: inline-block;
  position: relative;
  cursor: pointer;
  
  border: 1px solid #2b2b2b;
  border-radius: 10px;
  box-shadow: 0 1px 0 #fff, 
              0 0px 3px rgba(0,0,0,0.5) inset;
  height: 16px;
  width: 44px;
}
.checkbox2 input {
  position: absolute;
  z-index: -1;
  left: 0;
}
.checkbox2 input + i:after{
  background: #c4c4c4;
  background: -moz-linear-gradient(top,  #c4c4c4 0%, #f3f3f3 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c4c4c4), color-stop(100%,#f3f3f3));
  background: -webkit-linear-gradient(top,  #c4c4c4 0%,#f3f3f3 100%);
  background: -o-linear-gradient(top,  #c4c4c4 0%,#f3f3f3 100%);
  background: -ms-linear-gradient(top,  #c4c4c4 0%,#f3f3f3 100%);
  background: linear-gradient(top,  #c4c4c4 0%,#f3f3f3 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c4c4c4', endColorstr='#f3f3f3',GradientType=0 );
  
  border: 1px solid #bababa;
  border-radius:15px;
  display: block;
  content: '';
  box-shadow: 0 1px 0 #fff inset;
  position:absolute;
  top: -4px;
  left: -5px;
  width: 20px;
  height: 20px;
}
.checkbox2 input:checked + i:after{ left: 24px; }
.checkbox2 input:checked + i:before {
  background-color: #189fc6;
  border-radius:15px;
  box-shadow: 0 0px 3px rgba(0,0,0,0.5) inset;
  content: '';
  display: block;
  height: 14px;
  position: absolute;
  width: 44px;
}

.opciones_panel   {
  z-index:9999;
  padding:10px;position:absolute;top:10px;left:10px; 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
  color:#fff;

  background: #454546;

  display: inline-block;
  
  border: 1px solid #2b2b2b;
  border-radius: 10px;
  /*box-shadow: 0 1px 0 #fff, 
              0 0px 3px rgba(0,0,0,0.5) inset;*/
  width:265px;
  height:100px;
}

.accceso_panel  {
  z-index:9999;
  padding:10px;position:absolute;
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
  color:#652800;

  background: #B9C4C0;

  display: inline-block;
  
  border: 1px solid #652800;
  border-radius: 6px;

  width:200px;
  height:28px;
  
  font-size:90%;
  margin-left:15px;
  margin-top:-26px;
}