/*!
 * MultiState Checkbox v1.1.0 — สไตล์ให้เข้ากับ Bootstrap 3
 */
.msc {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  line-height: 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.msc-box {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #fff;
  color: #555;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  line-height: 18px;
  overflow: hidden;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s, background-color .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, background-color .15s;
}

.msc-box svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
}

.msc-box .msc-text { display: block; }
.msc-box .glyphicon,
.msc-box .fa { top: 0; line-height: inherit; font-size: 11px; }

.msc:hover .msc-box { border-color: #adadad; }

.msc-box:focus {
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 0 3px rgba(102, 175, 233, .4);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 0 3px rgba(102, 175, 233, .4);
}

.msc-label {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
}
.msc-label-left .msc-label { margin-left: 0; margin-right: 6px; }

/* readonly / disabled */
.msc-readonly,
.msc-readonly:hover { cursor: default; }
.msc-readonly .msc-box { background-color: #eee; -webkit-box-shadow: none; box-shadow: none; }
.msc-disabled { cursor: not-allowed; opacity: .55; }

/* Bootstrap validation states */
.has-error .msc-box { border-color: #a94442; }
.has-warning .msc-box { border-color: #8a6d3b; }
.has-success .msc-box { border-color: #3c763d; }

/* sizes */
.msc-sm { line-height: 16px; }
.msc-sm .msc-box { width: 16px; height: 16px; font-size: 10px; line-height: 14px; }
.msc-sm .msc-box svg { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; }

.msc-lg { line-height: 26px; }
.msc-lg .msc-box { width: 26px; height: 26px; font-size: 15px; line-height: 24px; border-radius: 4px; }
.msc-lg .msc-box svg { width: 18px; height: 18px; margin: -9px 0 0 -9px; }
.msc-lg .msc-box .glyphicon { font-size: 14px; }

/* animation ตอนเปลี่ยน state */
.msc-pop > * {
  -webkit-animation: msc-pop .18s ease-out;
  animation: msc-pop .18s ease-out;
}
@-webkit-keyframes msc-pop { from { -webkit-transform: scale(.5); opacity: .3; } to { -webkit-transform: scale(1); opacity: 1; } }
@keyframes msc-pop { from { transform: scale(.5); opacity: .3; } to { transform: scale(1); opacity: 1; } }