.cherry-ui-container {
  margin: 10px 0 20px 0; }

label.cherry-label {
  margin: 0 0 5px 0;
  display: block; }

.cherry-switcher-wrap {
  height: 49px;
  border-radius: 25px;
  display: inline-block;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }
  .cherry-switcher-wrap label {
    height: 49px;
    background-color: #e54343;
    display: block;
    float: left;
    -webkit-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out; }
    .cherry-switcher-wrap label span {
      font-size: 12px;
      line-height: 19px;
      font-weight: 800;
      text-transform: uppercase;
      color: #fff;
      padding: 15px;
      text-align: center;
      display: block;
      opacity: 1;
      -webkit-transition: all 0.2s ease-in-out;
              transition: all 0.2s ease-in-out; }
  .cherry-switcher-wrap .sw-enable span {
    opacity: 0; }
  .cherry-switcher-wrap .sw-disable span {
    opacity: 1; }
  .cherry-switcher-wrap .state-marker {
    background-color: #fff;
    display: block;
    position: absolute;
    width: 41px;
    height: 41px;
    margin: 4px;
    top: 0;
    left: 0;
    margin-left: 4px;
    border-radius: 25px;
    -webkit-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out; }
  .cherry-switcher-wrap.selected .sw-enable {
    background-color: #48c569; }
    .cherry-switcher-wrap.selected .sw-enable span {
      opacity: 1; }
  .cherry-switcher-wrap.selected .sw-disable {
    background-color: #48c569; }
    .cherry-switcher-wrap.selected .sw-disable span {
      opacity: 0; }
  .cherry-switcher-wrap.selected .state-marker {
    left: 100%;
    margin-left: -45px; }
  .cherry-switcher-wrap.size-small {
    height: 25px; }
    .cherry-switcher-wrap.size-small label {
      height: 25px; }
      .cherry-switcher-wrap.size-small label span {
        font-size: 10px;
        line-height: 15px;
        padding: 5px; }
    .cherry-switcher-wrap.size-small .state-marker {
      width: 17px;
      height: 17px;
      margin-left: 4px; }
    .cherry-switcher-wrap.size-small.selected .state-marker {
      left: 0;
      margin-left: 33px; }