.green-checkbox {
    margin: 0;
    padding: 0;
    cursor: pointer;
    accent-color: var(--primaryGreen);
    color: var(--primaryWhite);

    width: 14px;
    height: 14px;
    -webkit-appearance: none; /* Remove default appearance */
    appearance: none;
    border: 1px solid var(--primaryGreen);
    display: grid;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: .2rem;
}

.green-checkbox:checked {
    background-color: var(--primaryGreen); /* Background color */
    border-color: #4caf50; /* Border color */
    position: relative;
  }

  /* Add the tick mark */
.green-checkbox:checked::after {
    content: '\2713'; /* Unicode for checkmark */
    font-size: 12px;
    color: var(--primaryWhite); /* Tick color */
    position: absolute;
    /* top: 0; */
    justify-self: center;
}

.green-checkbox:disabled {
    border-color: #ccc;
    background-color: #f5f5f5;
    cursor: not-allowed;
}