body {
font-size:100%;
text-align:center;
background: #fff
}

.content{
margin: auto;
font: bold 17px Helvetica, Arial, Sans-serif;
}
.toggle {
position: relative;
display: inline;
}
input[type="checkbox"] {
position: relative;
width: 100px;
height: 40px;
background: #bdc3c7;
-webkit-appearance: none;
border-radius: 20px;
outline: none;
transition: .4s;
box-shadow: inset 0 1px 3px #BABABA, inset 0 12px 3px 2px rgba(232, 232, 232, 0.5);
cursor: pointer;
}
input:checked[type="checkbox"] {
background: #3498db;
}
input[type="checkbox" ]::before {
z-index: 2;
position: absolute;
content: "";
left: 0;
width: 40px;
height: 40px;
background: #fff;
border-radius: 50%;
transform: scale(1.1);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: .4s;
}
input:checked[type="checkbox"]::before {
left: 60px;
}
.onbtn {
bottom: 15px;
left: 15px;
}
.ofbtn {
bottom: 15px;
right: 14px;
color: #34495e;
}
/*radio*/
input[type="radio"] {
position: relative;
width: 100px;
height: 40px;
background: #bdc3c7;
-webkit-appearance: none;
border-radius: 20px;
outline: none;
transition: .4s;
box-shadow: inset 0 1px 3px #BABABA, inset 0 12px 3px 2px rgba(232, 232, 232, 0.5);
cursor: pointer;
}
input:checked[type="radio"] {
background: #3498db;
}
input[type="radio" ]::before {
z-index: 2;
position: absolute;
content: "";
left: 0;
width: 40px;
height: 40px;
background: #fff;
border-radius: 50%;
transform: scale(1.1);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: .4s;
}
input:checked[type="radio"]::before {
left: 60px;
}
.onbtn2 {
bottom: 12px;
left: 15px;
}
.ofbtn2 {
bottom: 12px;
right: 14px;
color: #34495e;
}
/*end radio*/
label {
position: absolute;
color: #fff;
font-weight: 600;
font-size: 20px;
pointer-events: none;
}

/* BUTTON */
.button-13 {
  background-color: #fff;
  border: 1px solid #d5d9d9;
  border-radius: 8px;
  box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
  box-sizing: border-box;
  color: #0f1111;
  cursor: pointer;
  display: inline-block;
  font: bold 17px Helvetica, Arial, Sans-serif;
  /*font-family: "Amazon Ember",sans-serif;*/
  font-size: 14px;
  line-height: 29px;
  padding: 0 10px 0 11px;
  position: relative;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  width: 120px;
}

.button-13:hover {
  background-color: #f7fafa;
}

.button-13:focus {
  border-color: #008296;
  box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
  outline: 0;
}
/* Chrome, Safari, Edge, Opera */
input.numeric::-webkit-outer-spin-button,
input.numeric::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input.numeric[type=number] {
  -moz-appearance: textfield;
}