.c-cb {
  padding-left: 2em;
  position: relative;
}

.c-cb > input[type="checkbox"] {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  margin-left: -2em;
  margin-top: .75em;
  opacity: .00001;
  position: relative;
  vertical-align: top;
  z-index: 2;
}

/**
 * Make sure the label is only as wide as the
 * inner text requires it to be.
 * The label should not be a block element
 * or run 100% width of its container.
 * Why would someone expect to click
 * white space on the opposite side of the
 * screen to have a checkbox checked?
 */
.c-cb > label {
  display: inline-block;
  padding: .6rem 0 0 .25rem;
  vertical-align: top;
}


/**
 * Note, the :before pseudo-element is the new
 * "bounds" or "box" of the checkbox.
 * It must be the same height, width and
 * position of the native checkbox element.
 */
.c-cb > label:before,
.c-cb > input[type="checkbox"] {
  height: 1em;
  left: .125em;
  width: 1em;
}

/**
 * Base styles for use on both
 * pseudo elements.
 */
.c-cb > label:before,
.c-cb > label:after {
  border: 1px solid;
  content: " ";
  position: absolute;
  transition:
    border-color .2s ease-in-out,
    box-shadow .2s ease-in-out,
    transform .2s ease-in-out;
}

/**
 * Styles for the custom box boundary.
 */
.c-cb > label:before {
  border-color: #c0c0c0;
  border-radius: .25rem;
  height: 1em;
  left: .125em;
  top: .825em;
  width: 1em;
}

/**
 * This recreates the "check" mark.
 */
.c-cb > label:after {
  border: 0;
  border-bottom: 3px solid #356AE6;
  border-right: 3px solid #356AE6;
  height: 1em;
  left: .4em;
  top: .65em;
  transform-origin: center center;
  transform: rotate(45deg) scale(0);
  width: .42em;
}


/**
 * ** Defining States **
 */
.c-cb > input:checked ~ label:before {
  border-color: transparent;
  box-shadow: 0 0 0 1px #c0c0c0;
}

.c-cb > input:focus ~ label:before {
  border-color: transparent;
  box-shadow: 0 0 0 3px #356AE6;
  outline-offset: 2px;
  outline: 2px solid transparent;
}

.c-cb > input:checked ~ label:after {
  transform: rotate(45deg) scale(.7);
}

.c-cb > input:checked:focus ~ label:after {
  border-color: #356AE6;
}

.c-cb > input[disabled] ~ label {
  opacity: .625;
}

/* placeholder design until a better required
  design pattern can be created */
.c-cb > input.dirty ~ label:before {
  border-color: #e40e49;
  box-shadow: 0 0 0 1px #e40e49;
}

.c-cb > input.dirty:focus ~ label:before {
  box-shadow: 0 0 0 2px #e40e49;
}

.c-cb input.dirty ~ [aria-hidden="true"] {
  color: #e40e49;
}


.c-cb input[required] ~ label .req-star {
  position: relative;
  right: -1em;
}

.c-cb input[required] ~ label .req-star:after,
.c-cb input[required] ~ label .req-star:before {
  border-left: .35em solid transparent;
  border-right: .35em solid transparent;
  content: " ";
  position: absolute;
  right: 0;
}

.c-cb input[required] ~ label .req-star:after {
  border-bottom: .6em solid #e40e49;
  top: -.2em;
}

.c-cb input[required] ~ label .req-star:before {
  border-top: .6em solid #e40e49;
  top: 0
}

/* when checked, ease up on the "error" feel to the indicator */
.c-cb input[required]:checked + label .req-star:after {
  border-bottom-color: rgba(34, 139, 236, .8);
}

.c-cb input[required]:checked + label .req-star:before {
  border-top-color: rgba(34, 139, 236, .8);
}