.switch1{overflow: hidden;margin:0 auto 10px;vertical-align:middle;height:36px;}
.f>.switch1{margin:0 0 5px 0;}
.switch1 input{padding:0;margin:0;position:absolute;z-index:-1;width:0;height:0;opacity:0}

.switch1 label{
  padding: 5px 5px;
  cursor: pointer;
  display: inline;
  overflow: hidden;
}

.switch1 label:first-of-type{
  position: relative;
  cursor: pointer;
  height: 36px;
  width: 80px;
  background: #efefef;
  border-radius: 20px;
  transition: .2s;
  border:1px solid transparent;
  overflow: hidden;
  padding: 0;
  font-size:0;
  line-height:0;
  display: inline-block;
}
[data-option] .switch1 label:first-of-type{
  background: #e0e0e0;
}
.switch1 label:first-of-type:hover{
  border-color:rgba(0, 0, 0, 0.1);
}
.switch1 input:focus + label:first-of-type{
  border-color:rgba(76, 175, 80, 0.9)
}

.switch1 label:first-of-type:before {
  content: "OFF";
  position: absolute;
  line-height: 27px;
  font-size: 12px;
  font-weight: bold;
  transition: all .2s;
  top: 3px;
  right: 10px;
  color: #999;
  transition:0.3s;
  overflow:hidden;
}
.switch1 label:first-of-type:after{
  content: '';
  position: absolute;
  width: 27px;
  height: 27px;
  transition: all .2s ease-in-out;
  border-radius: 50%;
  background: #7F8C9A;
  top: 3px;
  left: 3px;
}
[data-option] .switch1 label:first-of-type:after{
  background: #4c5258;
}
.switch1 input.disabled + label:first-of-type{
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}
.switch1 input:disabled + label:first-of-type{
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}


.switch1 input:checked + label:first-of-type{
  background-color: #40d060;
}
.switch1 input:focus:checked + label:first-of-type{
  background-color:#40c060;
}
.switch1 input:checked + label:first-of-type:before {
  content: "ON";
  left: 10px;
  right:inherit;
  color: #fff;
}
.switch1 input:checked + label:first-of-type:after {
  background: #fff;
  top: 3px;
  left: calc(100% - 30px);
}


html[lang=fa] .switch1 label:first-of-type:before{
  content: "غیرفعال";
  font-size: 8px;
}
html[lang=fa] .switch1 input:checked + label:first-of-type:before {
  content: "فعال";
  font-size: 10px;
}

.switch1 label:first-of-type[data-off]:before{
  content: attr(data-off)!important;
}
.switch1 input:checked + label:first-of-type[data-on]:before{
  content: attr(data-on)!important;
}




.switch1.gender label:first-of-type:before {
  content: "Male";
}
.switch1.gender input:checked + label:first-of-type:before {
  content: "Female";
  font-size: 10px;
}
.switch1.gender label:first-of-type:after {
  content: "\e08e";
  font-family: "siftal" !important;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  font-weight: 100;
  padding: 5px;
}
.switch1.gender input:checked + label:first-of-type:after {
  content: "\e08d";
  font-family: "siftal" !important;
  color: #333;
  font-size: 18px;
  line-height: 1;
  font-weight: 100;
  padding: 5px;
}
.switch1.gender input:checked + label:first-of-type{
  background-color: #d0408b;
}
.switch1.gender input:focus:checked + label:first-of-type{
 background-color: #901041;
}

html[lang=fa] .switch1.gender label:first-of-type:before{
  content: "مرد";
  font-size: 12px;
}
html[lang=fa] .switch1.gender input:checked + label:first-of-type:before {
  content: "زن";
  font-size: 12px;
}

.switch1.flat label:first-of-type{
  border-radius: 0;
}