/* stylelint-disable selector-no-vendor-prefix, at-rule-no-unknown */
/* stylelint-enable selector-no-vendor-prefix, at-rule-no-unknown */
/**
 * Minimum available screen width at which a device can be considered a mobile device
 * Many older feature phones have screens smaller than this value.
 * Number is prone to change with new information.
 * @since 1.31
 */
/**
 * Minimum available screen width at which a device can be considered a tablet
 * The number is currently based on the device width of a Samsung Galaxy S5 mini and is low
 * enough to cover iPad (768px). Number is prone to change with new information.
 * @since 1.31
 */
/**
 * Minimum available screen width at which a device can be considered a desktop
 * Number is prone to change with new information.
 * @since 1.31
 */
.mw-ui-checkbox {
  display: inline-block;
  line-height: 1.5625em;
  vertical-align: middle;
}
.client-js .mw-ui-checkbox:not( #noop ) {
  display: table;
  position: relative;
}
.client-js .mw-ui-checkbox:not( #noop ) * {
  font: inherit;
  vertical-align: middle;
}
.client-js .mw-ui-checkbox:not( #noop ) [type='checkbox'] {
  display: table-cell;
  position: relative;
  width: 1.5625em;
  height: 1.5625em;
  max-width: none;
  margin: 0;
  opacity: 0;
  z-index: 1;
}
.client-js .mw-ui-checkbox:not( #noop ) [type='checkbox'] + label {
  display: table-cell;
  padding-left: 0.4em;
}
.client-js .mw-ui-checkbox:not( #noop ) [type='checkbox'] + label:before {
  content: '';
  background-color: #fff;
  background-origin: border-box;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: 0 0;
  background-size: 0 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 0;
  width: 1.5625em;
  height: 1.5625em;
  margin-top: -0.78125em;
  border: 1px solid #72777d;
  border-radius: 2px;
}
.client-js .mw-ui-checkbox:not( #noop ) [type='checkbox']:checked + label:before {
  background-image: url(/w/resources/src/mediawiki.ui/components/images/checkbox-checked.png?6f2e5);
  background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E %3Cpath fill=%22%23fff%22 d=%22M17 7.5L9.5 15 6 11.5 4.5 13l5 5L20 7.5c-.706-.706-2.294-.706-3 0z%22/%3E %3C/svg%3E");
  -webkit-background-size: 90% 90%;
  background-size: 90% 90%;
}
.client-js .mw-ui-checkbox:not( #noop ) [type='checkbox']:enabled {
  cursor: pointer;
}
.client-js .mw-ui-checkbox:not( #noop ) [type='checkbox']:enabled + label {
  cursor: pointer;
}
.client-js .mw-ui-checkbox:not( #noop ) [type='checkbox']:enabled + label:before {
  cursor: pointer;
  -webkit-transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
  -moz-transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
  transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
}
.client-js .mw-ui-checkbox:not( #noop ) [type='checkbox']:enabled:focus + label:before {
  border-color: #3366cc;
  box-shadow: inset 0 0 0 1px #3366cc;
}
.client-js .mw-ui-checkbox:not( #noop ) [type='checkbox']:enabled:hover + label:before {
  border-color: #3366cc;
}
.client-js .mw-ui-checkbox:not( #noop ) [type='checkbox']:enabled:active + label:before {
  background-color: #2a4b8d;
  border-color: #2a4b8d;
  box-shadow: inset 0 0 0 1px #2a4b8d;
}
.client-js .mw-ui-checkbox:not( #noop ) [type='checkbox']:enabled:checked + label:before {
  background-color: #3366cc;
  border-color: #3366cc;
}
.client-js .mw-ui-checkbox:not( #noop ) [type='checkbox']:enabled:checked:focus + label:before {
  background-color: #3366cc;
  border-color: #3366cc;
  box-shadow: inset 0 0 0 1px #3366cc, inset 0 0 0 2px #ffffff;
}
.client-js .mw-ui-checkbox:not( #noop ) [type='checkbox']:enabled:checked:hover + label:before {
  background-color: #447ff5;
  border-color: #447ff5;
}
.client-js .mw-ui-checkbox:not( #noop ) [type='checkbox']:enabled:checked:active + label:before {
  background-color: #2a4b8d;
  border-color: #2a4b8d;
}
.client-js .mw-ui-checkbox:not( #noop ) [type='checkbox']:disabled + label:before {
  background-color: #c8ccd1;
  border-color: #c8ccd1;
}