//checkbox field start
.checkbox-toggle-btn {
  vertical-align: middle;
  width: 26px;
  height: 26px;
  margin: 0 5px 0 0;
  border-radius: 26px;
  display: inline-block;
  position: relative;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAABL1BMVEUAAADnTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDznTDwwgBC+AAAAZHRSTlMAAQIDBAUGBwgJCgsMDRAREhMUFRcYGRocHR4jJCcoKSouNTg5Oz4/QkVPWFldX2FiZGZna2xwcXt/gIKOl5iboqOlpqiqsLK0tbe6vsDKzM7P0dXX2dze4uTm6Onr7e/z+fv9GokMaAAAAUpJREFUKFNtktdWAkEQBWsVdhEVRFGMmHPEnLOYEygruKLA/f9v8AFH19V66p6a0+fM9IUvErMnL5XXbKabAMkrGXIDfmFtSR/bQ4mmeP+6Jx2Hvk3oXJX5BnNtuqxcs2myKsR8M5xbPTXWy3W5Nn4arnUIQFy1Dn7jeBoEONAaQSZ1B0RUtQFmzpsB+2wBwHKVgnHtA3AtN4qdUx6AJWVgV2MAtBTl9ub0FgcgpQe4UbI+v7UkGUNYVfBk3tcvafirtqRGPEXrnZOX5EZ9ygx08iqPlIwLqwa7GgUgq3KC1qLuAejSA4xrD4CV5zag5XETgEVlIKJqmCBWQSngQKt/1ITuAOKqtQeM42kIgI1/lnJUr6yL36u0b/RsIhC6VGXOBICpsvLmg8Dakd43022RWN9aSTr5iQ3Q6QtbmgDtc6fFinex3PN98glfN0iOLO3jVAAAAABJRU5ErkJggg==") no-repeat center center transparent;
  transition: background-color .40s ease-in-out;
  cursor: pointer;

  &.active {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAABLFBMVEUAAAAuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHEuzHFHtQV3AAAAY3RSTlMAAQIDBAUGBwgJCgsMEBESExQVFxgZGhscHSMkJicoKSo4OTs+P0JFWFldYWJjZGZrbHBxeHt/gIKOl5iboKKjpaaorbCytLW3ur7Aw8fKztHV19nc3uLk5ujp7e/z9ff5+/1e3krYAAABP0lEQVQYGV3BC1vSYACG4ecb20AJFDHSDmoe0wpTO1l20BQVFdBAa2aOvf//P7gxdzF33yTGX+1e+n/361NkVI+U6LwgxXyUbj7NjY+Un2160k+bhH0gf80iZlau1SkSM/vqlhjKn+gix8Cmei5p1rG+EykrmOChvKdZQjvaIGtJLaCgvkuW6akGC/pKSuXbFKE3qsO25hmavNF7QjW1oakqkeIj4Ml/tV1CjvrgqUjIug1mmb5VyyFipByeRokcKnjr68xhwEg5mqoSsRqSTm1ijgLY1ksGrF9q2tx7rDYs6Asx89wi8Vp1KKjvkGW6qgE7ekfWolqEygoqPJT3NEdkSz2XNOtYPxgwDXVLDLlN/baJ2YfyVy3uLV/rvEjCfJb+fZgZK5SebvyRdm1SJo+U6MyQUVndu/K9xvo0iTv6fEDNBB3B4wAAAABJRU5ErkJggg==") no-repeat center center transparent;

    .checkbox-round-btn {
      left: 45px;
    }
  }

  .checkbox-round-btn {
    display: none;
    width: 30px;
    height: 30px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    left: 5px;
    top: 50%;
    margin-top: -15px;
    transition: all .30s ease-in-out;
  }

  .checkbox {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 9;
    cursor: pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}

.checkbox-round-btn-text {
  vertical-align: middle;
}
//checkbox field end