@font-face {
        font-family: "GT America";
        font-display: swap;
        font-weight: 400;
        src: url("https://www.wilson.com/fr-fr/static/version1691565929/frontend/Wilson/Wilson/default/fonts/GT-America-Standard-Regular.woff2");
      }
      @font-face {
        font-family: "GT America";
        font-display: swap;
        font-weight: 700;
        src: url("https://www.wilson.com/fr-fr/static/version1691565929/frontend/Wilson/Wilson/default/fonts/GT-America-Standard-Bold.woff2");
      }

      @font-face {
        font-family: "GT America";
        font-stretch: expanded;
        font-display: swap;
        font-weight: 900;
        src: url("https://www.wilson.com/fr-fr/static/version1691565929/frontend/Wilson/Wilson/default/fonts/GT-America-Expanded-Black.woff2");
      }

      :root {
        --primary: rgb(207, 16, 45);
        --black: #101820;
        --grey: rgb(204, 204, 204);
        --grey-light: #f5f5f5;
      }

      html {
        font-weight: 400;
        font-size: 16px;
        font-family: "GT America", -apple-system, blinkmacsystemfont, "Segoe UI",
          roboto, oxygen-sans, ubuntu, cantarell, "Helvetica Neue", sans-serif;
      }

      .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: auto;
        margin-left: auto;
        max-width: 868px;
      }

      .column {
        display: flex;
        flex-direction: column;
      }

      .flex-align-center {
        align-items: center;
      }

      .flex-justify-center {
        justify-content: center;
      }

      .flex-justify-space-between {
        justify-content: space-between;
      }

      .flex-self-align-start {
        align-self: flex-start;
      }

      .flex-self-justify-start {
        justify-self: flex-start;
      }

      .row {
        display: flex;
        flex-direction: row;
      }

      .w-100 {
        width: 100%;
      }

      .form-input {
        font-family: "GT America", -apple-system, blinkmacsystemfont, "Segoe UI",
          roboto, oxygen-sans, ubuntu, cantarell, "Helvetica Neue", sans-serif;
        border: 1px solid var(--grey);
        height: 42px;
        line-height: 42px;
        width: 400px;
        font-size: 16px;
        padding: 0px 11px;
        margin-bottom: 10px;
      }

      .form-input::selection {
        background: black;
        color: white;
      }
      .form-input::-moz-selection {
        background: black;
        color: white;
      }

      .big-logo {
        height: 100px;
        color: var(--primary);
      }

      .logo-brand {
        height: 50px;
        color: var(--black);
      }

      .svg-logo {
        fill: currentColor;
        height: 100%;
        width: 100%;
      }

      .form-input:focus-visible {
        border-width: 0px;
        border: 1px solid black;
        outline: none;
      }

      .readonly {
         background-color: #f5f5f5;
      }

      .form-select {
        height: 44px;
        width: 424px;
        line-height: 20px;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
        background: url('data:image/svg+xml,%3Csvg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M40.737 17.737a1.786 1.786 0 0 1 0 2.526l-14.9 14.9a2.143 2.143 0 0 1-3.03 0l-14.9-14.9a1.786 1.786 0 0 1 2.526-2.526l13.89 13.89 13.889-13.89a1.786 1.786 0 0 1 2.525 0z"/%3E%3C/svg%3E')
          right 1rem center/2rem 2rem no-repeat #fff;
      }

      .label {
        margin-top: 10px;
        margin-bottom: 5px;
      }

      .max-100 {
        max-width: 100px;
      }

      .inline {
        display: flex;
        flex-direction: row;
      }

      .mr-20 {
        margin-right: 20px;
      }
      .mb-10 {
        margin-bottom: 10px;
      }
      .mb-50 {
        margin-bottom: 0px;
      }
      .mb-20 {
        margin-bottom: 20px;
      }

      .mb-100 {
        margin-bottom: 100px;
      }
      .mt-10 {
        margin-top: 10px;
      }
      .mt-20 {
        margin-top: 20px;
      }
      .mt-40 {
        margin-top: 40px;
      }
      .mt-100 {
        margin-top: 100px;
      }

      .d-none {
        display: none;
      }

      .w-400p {
        width: 400px;
      }
      .w-input {
        width: 424px;
      }

      .bold {
        font-weight: 700;
      }

      .checkbox-input {
        display: flex;
        flex-direction: row;
      }

      .label-checkbox {
        display: flex;
        flex-direction: row;
        align-items: center;
        cursor: pointer;
      }

      input[type="checkbox"] {
        margin: 0;
        width: 0;
        height: 0;
        opacity: 0;
        cursor: pointer;
      }

      .checkmark {
        width: 21px;
        height: 21px;
        display: block;
        border: 1px solid var(--grey);
        margin-right: 15px;
      }

      .checkmark::after {
        content: "";
        display: none;
        position: relative;
        left: 7px;
        bottom: 2px;
        width: 6px;
        height: 11px;
        transform: rotate(45deg);
        border: solid white;
        border-width: 0 2px 2px 0px;
      }

      input[type="checkbox"]:checked + .label-checkbox .checkmark {
        background-color: var(--black);
        border-color: var(--black);
      }
      input[type="checkbox"]:checked + .label-checkbox .checkmark::after {
        display: inline-block;
      }

      input[type="checkbox"]:checked:hover + .label-checkbox .checkmark {
        background-color: var(--black);
      }

      input[type="checkbox"]:hover + .label-checkbox .checkmark {
        border-color: var(--black);
        background-color: var(--grey-light);
      }

      .checklist {
        width: 21px;
        height: 21px;
        display: block;
        border: 1px solid var(--grey);
        margin-right: 15px;
        background-color: white;
        border-color: white;
      }

      .checklist::after {
        content: "";
        display: inline-block;
        position: relative;
        left: 6px;
        bottom: -2px;
        width: 8px;
        height: 8px;
        transform: rotate(225deg);
        border: solid var(--black);
        border-width: 0 2px 2px 0px;
      }

      input[type="checkbox"]:checked + .label-checkbox .checklist::after {
        transform: rotate(45deg);
        bottom: 2px;
      }

      /*input[type="checkbox"]:checked:hover + .label-checkbox .checklist::after {
        transform: rotate(225deg);
      }

      input[type="checkbox"]:hover + .label-checkbox .checklist::after {
        transform: rotate(45deg);
      }*/

      .button {
        font-family: ProximaNova, Arial, sans-serif;
        padding: 14px 20px;
        background-color: #41D3FF;
        border: 2px solid white;
        color: white;
        font-weight: 900;
        font-stretch: expanded;
        cursor: pointer;
        text-transform: uppercase;
        font-size: 16px;
        width: fit-content;
        align-self: center;
      }

      .button:hover {
        color: #41D3FF;
        background-color: white;
        border: 1px solid #41D3FF;
        transition: 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      }

.alertError {
    width: 100%;
    padding: 15px;
    text-align: center;
    background-color: rgb(207 88 88);
    color: white;
    font-weight: 900;
}
      .alert {
          position: relative;
          padding: 0.75rem 1.25rem;
          margin-bottom: 1rem;
          border: 1px solid transparent;
          border-radius: 0.25rem;
      }

      .alert-success {
          color: #155724;
          background-color: #d4edda;
          border-color: #c3e6cb;
      }

      @media only screen and (max-width: 950px) {
        .row {
          display: block;
        }
        .container {
          max-width: 424px;
        }
        .mb-small-10 {
          margin-bottom: 10px;
        }
        .small-text-align-left {
          align-self: flex-start;
          margin-left: 20px;
        }
      }

      @media only screen and (max-width: 576px) {
        .row {
          display: block;
        }
        .container {
          max-width: 300px;
        }
        .mb-small-10 {
          margin-bottom: 10px;
        }
        .small-text-align-left {
          align-self: flex-start;
          margin-left: 20px;
        }
       .form-input {
          width: 300px;
       }
       .form-select {
          width: 324px;
       }
       #prefCenterForm {
          max-width: 324px;
       }
      .w-400p {
          width: 324px;
      }
      .w-input {
          width: 324px;
      }
}