/* Firefox Mobile form control fix */

/* This stylesheet exists to correct colours of some controls (e.g. radio buttons and check boxes) in Firefox mobile */

@-moz-document url-prefix() {
  @media (max-width: 768px) {
    input[type="checkbox"],
    input[type="radio"] {
      -moz-appearance: none;
      appearance: none;
      background-color: #fff;
      border: 1px solid #dbdbdb;
      border-radius: 2px;
      padding: 8px;
      display: inline-block;
      position: relative;
      vertical-align: middle;
      cursor: pointer;
      margin-right: 5px;
    }

    input[type="radio"] {
      border-radius: 50%;
    }

    input[type="checkbox"]:checked,
    input[type="radio"]:checked {
      background-color: #485fc7;
      border-color: #485fc7;
    }

    input[type="checkbox"]:checked:after {
      content: "";
      display: block;
      position: absolute;
      top: 2px;
      left: 6px;
      width: 5px;
      height: 10px;
      border: solid white;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }

    input[type="radio"]:checked:after {
      content: "";
      display: block;
      position: absolute;
      top: 3px;
      left: 3px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: white;
    }
  }
}