message: Styled checkbox
diff: @@ -71,18 +71,18 @@ input::placeholder, textarea::placeholder {
  padding: 20px;
  }
  +.select-container {
  + position: relative;
  + width: 200px;
  +
  select {
  - appearance: none;
  + appearance: none; /* TODO: This is actually a little debatable, since appearance is as of now not supported in every browser (especially IE 11, Edge does though with -webkit- prefix weirdly enough). But it is not breaking, so I think it is ok this way */
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 30px;
  width: 100%;
  }
  -.select-container {
  - position: relative;
  - width: 200px;
  -
  .icon {
  position: absolute;
  right: 10px;
  @@ -121,6 +121,25 @@ select {
  }
  }
  +/* Checkboxes */
  +
  +input[type="checkbox"].form-element {
  + border: 2px solid $primary-color;
  + appearance: none; /* TODO: This is actually a little debatable, since appearance is as of now not supported in every browser (especially IE 11, Edge does though with -webkit- prefix weirdly enough). But it is not breaking, so I think it is ok this way */
  + -webkit-appearance: none;
  + -moz-appearance: none;
  + padding: 10px;
  + margin: 0;
  + margin-right: 10px;
  + float: left;
  +
  + &:checked {
  + background: linear-gradient($primary-color, $primary-color) 50% 50% / 15px 15px;
  + background-repeat: no-repeat;
  + background-position: center center;
  + }
  +}
  +
  /* Adapted after: https://www.algolia.com/doc/tutorials/search-ui/autocomplete/auto-complete */
  .aa-input-container {
  display: inline-block;
  