vc-toggle[theme="claro"] {
  position: relative !important;
  display: flex !important;
  align-items: center;
  /* Hide native checkbox style*/
}
vc-toggle[theme="claro"] .vc-toggle-toggle[type="checkbox"] {
  display: none;
}
vc-toggle[theme="claro"] .vc-toggle-nameLabel {
  cursor: pointer;
}
vc-toggle[theme="claro"] .vc-toggle-label {
  position: relative;
  display: block;
  width: 40px;
  height: 15px;
  margin: 0 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 100px;
  background: #747474;
}
vc-toggle[theme="claro"] .vc-toggle-toggle[type="checkbox"] + .vc-toggle-label::after {
  position: absolute;
  top: -2.5px;
  left: -2px;
  display: block;
  width: 20px;
  height: 20px;
  content: "";
  transition: all 0.3s ease;
  border-radius: 100px;
  background: #e6e6e6;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6);
}
vc-toggle[theme="claro"] .vc-toggle-toggle:checked ~ .vc-toggle-label {
  background: #45e9bb;
}
vc-toggle[theme="claro"] .vc-toggle-toggle[type="checkbox"]:checked + .vc-toggle-label::after {
  left: 20px;
  background: #c718be;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6);
}
vc-toggle[theme="claro"] .vc-toggle-toggle:disabled ~ .vc-toggle-label {
  pointer-events: none;
  background: #ababab;
}
vc-toggle[theme="claro"] .vc-toggle-toggle:disabled ~ .vc-toggle-label::after {
  background: #9a9a9a;
}
vc-toggle[theme="claro"] .vc-toggle-toggle[type="checkbox"]:disabled + .vc-toggle-label::after {
  background: #9a9a9a;
}