@charset "UTF-8";


$color_1: #09ad7e;
$color_2: #999;
$color_3: #aaa;
$color_4: #777;
$color_5: #4778d9;
$font_family_1: Helvetica,
Arial,
sans-serif;
$font_family_2: "Open sans",
"Segoe UI",
"Segoe WP",
Helvetica,
Arial,
sans-serif;
$background_color_1: #ddd;
$border_color_1: #bbb;

/* Base for label styling */


/* checkbox aspect */


/* checked mark aspect */


/* checked mark aspect changes */


/* disabled checkbox */


/* accessibility */


/* hover style just for information */


/* Useless styles, just for demo design */

[type="checkbox"] {
  &:not(:checked) {
    position: absolute;
    left: -9999px;
    &+label {
      position: relative;
      padding-left: 1.95em;
      cursor: pointer;
      &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 1.25em;
        height: 1.25em;
        border: 2px solid #ccc;
        background: #fff;
        border-radius: 4px;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
      }
      &:after {
        content: '✔';
        position: absolute;
        top: .2em;
        left: .2em;
        font-size: 1.4em;
        line-height: 0.8;
        color: $color_1;
        transition: all .2s;
        font-family: $font_family_1;
        opacity: 0;
        transform: scale(0);
      }
    }
    &:focus {
      &+label {
        &:before {
          border: 2px dotted blue;
        }
      }
    }
  }
  &:checked {
    position: absolute;
    left: -9999px;
    &+label {
      position: relative;
      padding-left: 1.95em;
      cursor: pointer;
      &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 1.25em;
        height: 1.25em;
        border: 2px solid #ccc;
        background: #fff;
        border-radius: 4px;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
      }
      &:after {
        content: '✔';
        position: absolute;
        top: 0em;
        left: .2em;
        font-size: 1.4em;
        line-height: 0.8;
        color: $color_1;
        transition: all .2s;
        font-family: $font_family_1;
        opacity: 1;
        transform: scale(1);
      }
    }
    &:focus {
      &+label {
        &:before {
          border: 2px dotted blue;
        }
      }
    }
  }
  &:disabled {
    &:not(:checked) {
      &+label {
        &:before {
          box-shadow: none;
          border-color: $border_color_1;
          background-color: $background_color_1;
        }
      }
    }
    &:checked {
      &+label {
        &:before {
          box-shadow: none;
          border-color: $border_color_1;
          background-color: $background_color_1;
        }
        &:after {
          color: $color_2;
        }
      }
    }
    &+label {
      color: $color_3;
    }
  }
}

.checkbox-group {
  label {
    &:hover {
      &:before {
        border: 2px solid #4778d9 !important;
      }
    }
  }
  body {
    font-family: $font_family_2;
    color: $color_4;
  }
  h1 {
    margin-bottom: .25em;
    font-weight: normal;
    text-align: center;
  }
  h2 {
    margin-bottom: .25em;
    font-weight: normal;
    text-align: center;
    margin: .25em 0 2em;
    color: $color_3;
  }
  form {
    width: 7em;
    margin: 0 auto;
  }
  .txtcenter {
    margin-top: 4em;
    font-size: .9em;
    text-align: center;
    color: $color_3;
  }
  .copy {
    margin-top: 2em;
    a {
      text-decoration: none;
      color: $color_5;
    }
  }
}