.flat-switch {
    position: relative;
    width: 48px;
    height: 24px;
    line-height: 22px;
    vertical-align: middle;
    background-color: #BDC3C7;
    box-sizing: border-box;
    display: inline-block;
    cursor: pointer;
    transition: all .2s ease-in-out
}

.flat-switch::after {
      content: "";
      position: absolute;
      top: 2px;
      width: 20px;
      height: 20px;
      background-color: #7F8C8D;
      border-radius: 20px;
      cursor: pointer;
      -ms-transform: translateX(2px);
          transform: translateX(2px);
      transition: all .2s ease-in-out
}

.flat-switch.is-info {}

.flat-switch.is-info.is-checked {
        color: #FFF;
        background-color: #3498DB
}

.flat-switch.is-info.is-checked::after {
          background-color: #FFF
}

.flat-switch.is-success {}

.flat-switch.is-success.is-checked {
        color: #FFF;
        background-color: #2ECC71
}

.flat-switch.is-success.is-checked::after {
          background-color: #FFF
}

.flat-switch.is-danger {}

.flat-switch.is-danger.is-checked {
        color: #FFF;
        background-color: #E74C3C
}

.flat-switch.is-danger.is-checked::after {
          background-color: #FFF
}

.flat-switch.is-warning {}

.flat-switch.is-warning.is-checked {
        color: #FFF;
        background-color: #F1C40F
}

.flat-switch.is-warning.is-checked::after {
          background-color: #FFF
}

.flat-switch.is-round {
      border-radius: 20px
}

.flat-switch.is-square {
      border-radius: 4px
}

.flat-switch.is-square::after {
        top: 0;
        width: 24px;
        height: 24px;
        border-radius: 4px 0 0 4px;
        -ms-transform: translateX(0);
            transform: translateX(0)
}

.flat-switch.is-square.is-checked {}

.flat-switch.is-square.is-checked::after {
          border-radius: 0 4px 4px 0;
          -ms-transform: translateX(100%);
              transform: translateX(100%);
          background-color: #1ABC9C
}

.flat-switch.is-disabled {
      opacity: .7;
      cursor: not-allowed
}

.flat-switch.is-checked {
      color: #1ABC9C;
      background-color: #34495E
}

.flat-switch.is-checked::after {
        -ms-transform: translateX(calc(100% + 5px));
            transform: translateX(calc(100% + 5px));
        background-color: #1ABC9C
}