.k-checkbox {
  border-radius: 2px;
  margin: 0;
  padding: 0;
  width: 16px;
  height: 16px;
  line-height: initial;
  border-width: 1px;
  border-style: solid;
  outline: 0;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  -webkit-appearance: none; }

.k-checkbox::before {
  content: "\e118";
  width: 12px;
  height: 12px;
  font-size: 12px;
  font-family: "WebComponentsIcons", monospace;
  transform: scale(0) translate(-50%, -50%);
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%; }

.k-checkbox:hover {
  cursor: pointer; }

.k-checkbox:checked::before {
  border-radius: 2px;
  transform: scale(1) translate(-50%, -50%); }

.k-checkbox:indeterminate::before,
.k-checkbox.k-state-indeterminate::before {
  content: "";
  background-color: currentColor;
  transform: scale(1) translate(-50%, -50%);
  width: 8px;
  height: 8px; }

.k-checkbox:disabled,
.k-checkbox:disabled + .k-checkbox-label {
  outline: none;
  cursor: default;
  opacity: .6;
  filter: grayscale(0.1);
  pointer-events: none;
  cursor: default; }

.k-checkbox-label {
  margin: 0;
  padding: 0;
  line-height: 17px;
  display: inline-flex;
  align-items: flex-start;
  vertical-align: middle;
  position: relative;
  cursor: pointer; }
  .k-checkbox-label:empty {
    display: none; }
  .k-checkbox-label.k-no-text {
    min-width: 1px; }
  .k-checkbox-label .k-ripple {
    top: 8px;
    left: 8px;
    right: auto;
    bottom: auto;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    visibility: hidden !important; }
  .k-checkbox-label .k-ripple-blob {
    top: 50% !important;
    left: 50% !important;
    width: 200% !important;
    height: 200% !important; }

.k-checkbox + .k-checkbox-label {
  margin-left: 4px; }

.k-checkbox-label > .k-checkbox {
  margin-right: 4px; }

.k-rtl .k-checkbox + .k-checkbox-label,
[dir="rtl"] .k-checkbox + .k-checkbox-label {
  margin-left: 0;
  margin-right: 4px; }

.k-rtl .k-checkbox-label > .k-checkbox,
[dir="rtl"] .k-checkbox-label > .k-checkbox {
  margin-right: 0;
  margin-left: 4px; }

.k-checkbox::-ms-check {
  border-width: 0;
  border-color: inherit;
  color: inherit;
  background-color: inherit; }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .k-checkbox::-ms-check {
    border-width: 1px; } }