HTML Checkboxes not displaying correctly on different browsers

I have this data entry form that uses checkboxes but depending on the browser it displays differently. For example, on Google Chrome it does not allow you to check the boxes meanwhile on Microsoft Edge it works perfectly fine. I know it's a CSS issue but not sure how to fix this.

Website: http://54.242.194.165/experience.html

CSS

/* Forms */

    form label {
        display: block;
        font-weight: 800;
        margin: 0 0 1em 0;
        font-size: 0.8em;
        color: #444;
    }

    form input[type="text"],
    form input[type="email"],
    form input[type="tel"],
    form input[type="checkbox"],
    form input[type="date"],
    form input[type="checkbox"],
    form input[type="password"],
    form select,
    form textarea {
        -webkit-appearance: none;
        display: block;
        width: 100%;
        border-radius: 8px;
        border: solid 1px #eee;
    }

        form input[type="text"]:focus,
        form input[type="email"]:focus,
        form input[type="checkbox"]:focus,
        form input[type="tel"]:focus,
        form input[type="checkbox"]:focus,
        form input[type="date"]:focus,
        form input[type="password"]:focus,
        form select:focus,
        form textarea:focus {
            border-color: #0090c5;
        }

    form input[type="text"],
    form input[type="email"],
    form input[type="checkbox"],
    form input[type="tel"],
    form input[type="date"],
    form input[type="password"] {
        line-height: 3em;
        padding: 0 1em;
    }

    form select {
        line-height: 3em;
        padding: 0 1em;
    }

    form textarea {
        min-height: 9em;
        padding: 1em;
    }

    form ::-webkit-input-placeholder {
        color: #555 !important;
    }

    form :-moz-placeholder {
        color: #555 !important;
    }

    form ::-moz-placeholder {
        color: #555 !important;
    }

    form :-ms-input-placeholder {
        color: #555 !important;
    }

    form ::-moz-focus-inner {
        border: 0;
    }


 .testbox {
      display: flex;
      justify-content: center;
      align-items: center;
      height: inherit;
      padding: 3px;
      }
      form {
      width: 100%;
      padding: 20px;
      background: #fff;
      box-shadow: 0 2px 5px #ccc; 
      }
      input, select, textarea {
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 3px;
      }
      input {
      width: calc(100% - 10px);
      padding: 5px;
      }
      select {
      width: 100%;
      padding: 7px 0;
      background: transparent;
      }
      textarea {
      width: calc(100% - 6px);
      }
      .item {
      position: relative;
      margin: 10px 0;
      }
      .item:hover p, .item:hover i {
      color: #095484;
      }
      input:hover, select:hover, textarea:hover, .preferred-metod label:hover input {
      box-shadow: 0 0 5px 0 #095484;
      }
      .preferred-metod label {
      display: block;
      margin: 5px 0;
      }
      .preferred-metod:hover input {
      box-shadow: none;
      }
      .preferred-metod-item input, .preferred-metod-item span {
      width: auto;
      vertical-align: middle;
      }
      .preferred-metod-item input {
      margin: 0 5px 0 0;
      }
      input[type="date"]::-webkit-inner-spin-button {
      display: none;
      }
      .item i, input[type="date"]::-webkit-calendar-picker-indicator {
      position: absolute;
      font-size: 20px;
      color: #a9a9a9;
      }
      .item i {
      right: 1%;
      top: 30px;
      z-index: 1;
      }
      [type="date"]::-webkit-calendar-picker-indicator {
      right: 0;
      z-index: 2;
      opacity: 0;
      cursor: pointer;
      }
      .btn-block {
      margin-top: 20px;
      text-align: center;
      }
      button {
      width: 150px;
      padding: 10px;
      border: none;      
      -webkit-border-radius: 5px; 
      -moz-border-radius: 5px; 
      border-radius: 5px; 
      background-color: #095484;
      font-size: 16px;
      color: #fff;
      cursor: pointer;
      }
      button:hover {
      background-color: #0666a3;
      }
      @media (min-width: 568px) {
      .name-item, .city-item {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      }
      .name-item input, .city-item input {
      width: calc(50% - 20px);
      }
      .city-item select {
      width: calc(50% - 8px);
      }
      }
        input[type="date"]::before {
          content: attr(placeholder);
          position: absolute;
          color: #999999;
        }

        input[type="date"] {
          color: #ffffff;
        }

        input[type="date"]:focus,
        input[type="date"]:valid {
          color: #666666;
        }

        input[type="date"]:focus::before,
        input[type="date"]:valid::before {
          content: "";
        }
        input[type="checkbox"] {
            appearance: checkbox !important;
        }