.crm-container .ma-webform {
  --medact-webform-border-color: #ddd;

  /* tab/page header */
  .crm-tab-list {
    border: 1px solid var(--medact-webform-border-color);
    margin-right: 1px;

    --crm-tabs-bg: none;
    --crm-tabs-radius: 0;
    --crm-tabs-border: 1px solid grey;
    --crm-tabs-bg-color: var(--medact-blue);
    --crm-tabs-padding: 1rem;

      font-family: var(--medact-title-font);
    text-transform: uppercase;
  }

  .crm-tab-button {
    /* hide unless active */
    display: none;
    --crm-tab-weight: bold;
    --crm-tab-bg-active: none;
    --crm-tab-color: white;
    --crm-font-size: 1.5rem;
    --crm-l-reg-1: 1.75rem;
  }
  .crm-tab-button.active {
    display: block;
  }

  .crm-tab-panel {
    padding: 1rem;
    border: 1px solid var(--medact-webform-border-color);
    border-top: none;
    margin-bottom: 1rem;
    margin-right: 1px;
  }

  --crm-f-form-padding: 0.5rem;
  --crm-f-fieldset-padding: 0;
  --crm-f-fieldset-margin: 0;

  --crm-f-input-width: 100%;
  --crm-f-input-font-size: 1.25rem;
  --crm-f-input-radius: 0;


  ul.crm-checkbox-list {
    height: unset;
    border: none;
    width: unset;

    --crm-form-checkbox-list-bg-color: var(--medact-green-tint);

    li {
      display: flex;
      gap: 1rem;
    }
    input {
      height: 1.75rem;
      width: 4rem;
    }
    label {
      padding: 0;
      word-break: break-word;
    }
  }

  .af-field-type-check-box {
    input {
      height: 1.25rem;
      width: 2rem;
    }
    label {
      display: flex;
      gap: 1rem;
      align-items: center;
      font-size: 1rem;
      font-weight: normal;
    }
  }

  label {
    display: block;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }

  af-field:not(.af-field-type-radio):hover input {
    outline: 1px solid var(--medact-green);
  }

  .af-field-type-radio .crm-af-field {
    gap: 1rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;

    label {
      border: 1px solid var(--medact-webform-border-color);
      border-radius: 3px;
      padding: 1rem;
      margin-left: 0!important;
    }
    label:has(input:checked),
    label:hover {
      border-color: var(--medact-green);
    }
  }

  af-field[name="default_contribution_amount.contribution_amount"] input[type="text"] {
    max-width: 10rem;
  }

  af-field[name="default_contribution_amount.contribution_amount"] input[type="text"]::before {
    content: '£';
  }


  .crm-buttons {
    justify-content: space-between;
  }

  .crm-button {
    border-width: 2px;
    padding: 1.25rem 2rem;
  }

  /* previous button */
  .crm-button[type="button"] {
    background-color: var(--medact-green-tint);
    color: var(--medact-blue);
    border-color: var(--medact-webform-border-color);
  }

  .crm-button[type="button"]:hover {
      border-color: #aaa;
  }



}