@import url(https://fonts.googleapis.com/css?family=Roboto);

.mdx-checkbox {
  position: relative;
}
.mdx-checkbox label {
  cursor: pointer;
}
.mdx-checkbox label:before, .mdx-checkbox label:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
}
.mdx-checkbox label:before {
  width: 20px;
  height: 20px;
  background: #fff;
  border: 2px solid #8CA0B3;
  border-radius: 2px;
  cursor: pointer;
  transition: background .3s;
}
.mdx-checkbox input[type="checkbox"] {
  outline: 0;
}
.mdx-checkbox input[type="checkbox"]:checked + label:before {
  background: white;
}
.mdx-checkbox input[type="checkbox"]:checked + label:after {
  transform: rotate(-45deg);
  top: 5px;
  left: 4px;
  width: 12px;
  height: 6px;
  border: 2px solid #00B0FF;
  border-top-style: none;
  border-right-style: none;
}