bootstrap-switch/dist/css/bootstrap-switch.css

/**
  * bootstrap-switch - Turn checkboxes and radio buttons into toggle switches.
  *
  * @version v4.0.0-alpha.1
  * @homepage http://www.bootstrap-switch.org
  * @author Mattia Larentis <[email protected]> (http://larentis.eu)
  * @license Apache-2.0
  */

.bootstrap-switch {
  display: inline-block;
  direction: ltr;
  cursor: pointer;
  border-radius: 0.25rem;
  border: 1px solid;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  position: relative;
  text-align: left;
  overflow: hidden;
  line-height: 8px;
  z-index: 0;
  user-select: none;
  vertical-align: middle;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
  .bootstrap-switch .bootstrap-switch-container {
    display: inline-block;
    top: 0;
    border-radius: 0.25rem;
    transform: translate3d(0, 0, 0); }
  .bootstrap-switch .bootstrap-switch-handle-on,
  .bootstrap-switch .bootstrap-switch-handle-off,
  .bootstrap-switch .bootstrap-switch-label {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block !important;
    height: 100%;
    line-height: 1.25;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border-radius: 0; }
  .bootstrap-switch .bootstrap-switch-handle-on,
  .bootstrap-switch .bootstrap-switch-handle-off {
    text-align: center;
    z-index: 1; }
    .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
    .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
      color: #fff;
      background-color: #0275d8;
      border-color: #0275d8; }
      .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary:hover,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary:hover {
        color: #fff;
        background-color: #025aa5;
        border-color: #01549b; }
      .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary:focus, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary.focus,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary:focus,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary.focus {
        box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.5); }
      .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary.disabled, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary:disabled,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary.disabled,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary:disabled {
        background-color: #0275d8;
        border-color: #0275d8; }
      .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary:active, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary.active,
      .show > .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary.dropdown-toggle,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary:active,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary.active,
      .show >
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary.dropdown-toggle {
        color: #fff;
        background-color: #025aa5;
        background-image: none;
        border-color: #01549b; }
    .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary,
    .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary {
      color: #292b2c;
      background-color: #fff;
      border-color: #ccc; }
      .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary:hover,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary:hover {
        color: #292b2c;
        background-color: #e6e6e6;
        border-color: #adadad; }
      .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary:focus, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary.focus,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary:focus,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary.focus {
        box-shadow: 0 0 0 2px rgba(204, 204, 204, 0.5); }
      .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary.disabled, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary:disabled,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary.disabled,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary:disabled {
        background-color: #fff;
        border-color: #ccc; }
      .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary:active, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary.active,
      .show > .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary.dropdown-toggle,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary:active,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary.active,
      .show >
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary.dropdown-toggle {
        color: #292b2c;
        background-color: #e6e6e6;
        background-image: none;
        border-color: #adadad; }
    .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info,
    .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info {
      color: #fff;
      background-color: #5bc0de;
      border-color: #5bc0de; }
      .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info:hover,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info:hover {
        color: #fff;
        background-color: #31b0d5;
        border-color: #2aabd2; }
      .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info:focus, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info.focus,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info:focus,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info.focus {
        box-shadow: 0 0 0 2px rgba(91, 192, 222, 0.5); }
      .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info.disabled, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info:disabled,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info.disabled,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info:disabled {
        background-color: #5bc0de;
        border-color: #5bc0de; }
      .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info:active, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info.active,
      .show > .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info.dropdown-toggle,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info:active,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info.active,
      .show >
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info.dropdown-toggle {
        color: #fff;
        background-color: #31b0d5;
        background-image: none;
        border-color: #2aabd2; }
    .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
    .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success {
      color: #fff;
      background-color: #5cb85c;
      border-color: #5cb85c; }
      .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success:hover,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success:hover {
        color: #fff;
        background-color: #449d44;
        border-color: #419641; }
      .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success:focus, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success.focus,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success:focus,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success.focus {
        box-shadow: 0 0 0 2px rgba(92, 184, 92, 0.5); }
      .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success.disabled, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success:disabled,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success.disabled,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success:disabled {
        background-color: #5cb85c;
        border-color: #5cb85c; }
      .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success:active, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success.active,
      .show > .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success.dropdown-toggle,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success:active,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success.active,
      .show >
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success.dropdown-toggle {
        color: #fff;
        background-color: #449d44;
        background-image: none;
        border-color: #419641; }
    .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning,
    .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning {
      color: #fff;
      background-color: #f0ad4e;
      border-color: #f0ad4e; }
      .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning:hover,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning:hover {
        color: #fff;
        background-color: #ec971f;
        border-color: #eb9316; }
      .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning:focus, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning.focus,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning:focus,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning.focus {
        box-shadow: 0 0 0 2px rgba(240, 173, 78, 0.5); }
      .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning.disabled, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning:disabled,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning.disabled,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning:disabled {
        background-color: #f0ad4e;
        border-color: #f0ad4e; }
      .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning:active, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning.active,
      .show > .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning.dropdown-toggle,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning:active,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning.active,
      .show >
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning.dropdown-toggle {
        color: #fff;
        background-color: #ec971f;
        background-image: none;
        border-color: #eb9316; }
    .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger,
    .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger {
      color: #fff;
      background-color: #d9534f;
      border-color: #d9534f; }
      .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger:hover,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger:hover {
        color: #fff;
        background-color: #c9302c;
        border-color: #c12e2a; }
      .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger:focus, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger.focus,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger:focus,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger.focus {
        box-shadow: 0 0 0 2px rgba(217, 83, 79, 0.5); }
      .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger.disabled, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger:disabled,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger.disabled,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger:disabled {
        background-color: #d9534f;
        border-color: #d9534f; }
      .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger:active, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger.active,
      .show > .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger.dropdown-toggle,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger:active,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger.active,
      .show >
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger.dropdown-toggle {
        color: #fff;
        background-color: #c9302c;
        background-image: none;
        border-color: #c12e2a; }
  .bootstrap-switch .bootstrap-switch-label {
    text-align: center;
    margin-top: -1px;
    margin-bottom: -1px;
    z-index: 100;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent; }
  .bootstrap-switch .bootstrap-switch-handle-on {
    border-bottom-left-radius: 0.25rem;
    border-top-left-radius: 0.25rem; }
  .bootstrap-switch .bootstrap-switch-handle-off {
    border-bottom-right-radius: 0.25rem;
    border-top-right-radius: 0.25rem; }
  .bootstrap-switch input[type='radio'],
  .bootstrap-switch input[type='checkbox'] {
    position: absolute !important;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -1; }
  .bootstrap-switch.bootstrap-switch-mini {
    min-width: 71px; }
    .bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,
    .bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,
    .bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label {
      padding: 0.25rem 0.5rem;
      font-size: 0.875rem;
      border-radius: 0.2rem; }
  .bootstrap-switch.bootstrap-switch-small {
    min-width: 79px; }
    .bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,
    .bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,
    .bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label {
      padding: 0.25rem 0.5rem;
      font-size: 0.875rem;
      border-radius: 0.2rem; }
  .bootstrap-switch.bootstrap-switch-large {
    min-width: 120px; }
    .bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on,
    .bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off,
    .bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label {
      padding: 0.75rem 1.5rem;
      font-size: 1.25rem;
      border-radius: 0.3rem; }
  .bootstrap-switch.bootstrap-switch-disabled, .bootstrap-switch.bootstrap-switch-readonly, .bootstrap-switch.bootstrap-switch-indeterminate {
    cursor: default !important; }
    .bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on,
    .bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off,
    .bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label, .bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on,
    .bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off,
    .bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label, .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on,
    .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off,
    .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label {
      opacity: .5;
      cursor: default !important; }
  .bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container {
    transition: margin-left 0.5s; }
  .bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-bottom-right-radius: 0.25rem;
    border-top-right-radius: 0.25rem; }
  .bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0.25rem;
    border-top-left-radius: 0.25rem; }
  .bootstrap-switch.bootstrap-switch-focused {
    box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.5); }
  .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label, .bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label {
    border-bottom-right-radius: 0.25rem;
    border-top-right-radius: 0.25rem; }
  .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label, .bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label {
    border-bottom-left-radius: 0.25rem;
    border-top-left-radius: 0.25rem; }