.animated_checkbox {
  border-radius: 0.3em;
  position: relative;
}

.animated_checkbox input[type=checkbox] {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.animated_checkbox input[type=checkbox] + label {
  cursor: pointer;
  font-size: 0.8em;
  display: grid;
  grid-template-columns: auto 1fr;
}

.animated_checkbox input[type=checkbox] + label svg {
  width: 1.8em;
  stroke: #dfbd65;
  stroke-width: 5;
}

.animated_checkbox input[type=checkbox] + label svg .cb_box {
  stroke-dasharray: 320;
  stroke-dashoffset: 0;
  fill: none;
}

.animated_checkbox input[type=checkbox] + label svg .cb_check {
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
  fill: none;
}

.animated_checkbox input[type=checkbox]:checked + label .cb_box {
  stroke-dashoffset: 320;
  transition: stroke-dashoffset 0.4s linear;
}

.animated_checkbox input[type=checkbox]:checked + label .cb_check {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.4s linear;
}

.animated_checkbox input[type=checkbox] + label svg.reverse .cb_box {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.4s linear;
}

.animated_checkbox input[type=checkbox] + label svg.reverse .cb_check {
  stroke-dashoffset: 70;
  transition: stroke-dashoffset 0.4s linear;
}

.animated_checkbox .node {
  padding-top: 3px;
  margin-left: 8px;
  font-size: 16px;
}

.animated_checkbox a {
  text-decoration: none;
  color: #dfbd65;
}

.animated_checkbox a,
.animated_checkbox label {
  white-space: nowrap;
}

@media screen and (max-width: 600px) {
  .animated_checkbox a,
  .animated_checkbox label {
    font-size: 12px;
  }
}/*# sourceMappingURL=AnimatedCheckbox.css.map */