#dmosevent_filters {
  max-width: 8*$column_width + 7*$gutter;

  li {
    width: 49%;
    min-width: 260px;

    @media screen and (min-width: $break_medium) {
      width: 32%;
    }
  }
}

#modellkommunen_filter,
#dmosevent_filters {
  width: 100%;
  background: $bg_white;
  padding: 20px;
  margin-bottom: 15px;

  h3 {
    color: $color-accent-contrast;
    font-size: 22px;
    margin-bottom: 20px;
  }

  ul {
    list-style-type: none;
  }

  li {
    min-height: 30px;
    margin-bottom: 15px;
    line-height: 25px;
    -webkit-column-break-inside: avoid;
    display: inline-block;

    input {
      position: absolute;
      height: 0;
      width: 0;
      display: inline-block;
      overflow: hidden;
      margin-top: 3px;
      margin-left: 3px;
      visibility: hidden;

      + label {
        display: inline-block;
        line-height: 20px;
        height: 20px;
        cursor: pointer;
        position: relative;
        padding: 5px 10px 0 45px;
        margin-right: 30px;
        font-weight: bold;

        &:before { // Rahmen Checkbox
          position: absolute;
          top: 0;
          left: 0;
          content: "";
          display: inline-block;
          background: $bg_white;
          height: 30px;
          width: 30px;
          margin-right: 10px;
          vertical-align: middle;
          border: 1px solid $color-accent-contrast;
        }
      }

      &:focus + label,
      + label:hover {
        &:before {
          border-width: 3px;
          height: 26px;
          width: 26px;
        }
      }

      &:checked + label:after { // Häkchen
        @include svgpseudoelem('sprites-checked');
        top: 9px;
        left: 6px;
      }
    }
  }
}

#modellkommunen_filter {
  ul {
    @media screen and (min-width: $break_medium) {
      columns: 2;
    }
  }
}