:root {
  --black: #1e282d;
  --blackTransparent: rgba(30, 40, 45, 0.8);
  --white: #ffffff;
  --whiteTransparent: rgba(255, 255, 255, 0.8);
  --lighterGray: #faf9f5;
  --lightGray: #f4f4f4;
  --gray: #e7e6e2;
  --menuBorder: #4b5357;
  --darkGray: #5e5c58;
  --blue: #39a5db;
  --lightBlue: #8ec1db;
  --linkColor: #3d64a3;
  --pink: #CD006E;
  --pinkText: #CD006E;
  --red: red;
  --lightRed: #ffe4e7;
  --yellow: #f5ce50;
  --lightYellow: #f5ecce;
  --fieldGray: #dfdfdf;
  --green: #08cb08;
  --lightGreen: #def8cc;
  --brownOnYellow: #40340d;
  --boxShadow: rgba(0, 0, 0, 0.3);

  /* variables prefixed --cetera are external and set  inside _publication-style.html.erb */
  --publication-color-fallback: var(--black);
  --publication-color-inverted-fallback: var(--white);

  --background-color: var(
    --cetera-background-color,
    var(--lightGray)
  );
  --header-background-color: var(
    --cetera-publication-header-background-color,
    var(--white)
  );
  --header-border-color: var(
    --cetera-publication-header-border-color,
    var(--black)
  );
  --publication-color: var(
    --cetera-publication-color,
    var(--publication-color-fallback)
  );
  --publication-color-inverted: var(
    --cetera-publication-color-inverted,
    var(--publication-color-inverted-fallback)
  );

}

    div.svelte-1qprhv9 {
        display: block;
        font-size: 16px;
    }

    /* Hide the checkbox, but preserve it's normal flow in the form */

    div.svelte-1qprhv9 input:where(.svelte-1qprhv9) {
        position: absolute;
        appearance: none;
        opacity: 0;
    }

    div.svelte-1qprhv9 input:where(.svelte-1qprhv9):focus + .aid-checkbox__checkbox:where(.svelte-1qprhv9) {
        border-color: var(--black);
    }

    div.svelte-1qprhv9 input:where(.svelte-1qprhv9):checked:focus + .aid-checkbox__checkbox:where(.svelte-1qprhv9) {
        outline: 2px solid var(--pink);
    }

    div.svelte-1qprhv9 label:where(.svelte-1qprhv9) {
        display: flex;
        flex-direction: row;
        align-items: center;

        cursor: pointer;
        user-select: none;

        /* Contain the checkbox */
        position: relative;
    }

    div.svelte-1qprhv9 .aid-checkbox__checkbox:where(.svelte-1qprhv9) {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        margin-right: 10px;
        background: var(--white);
        border: 2px solid var(--fieldGray);
    }

    div.svelte-1qprhv9 input:where(.svelte-1qprhv9):checked + .aid-checkbox__checkbox:where(.svelte-1qprhv9) {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='30'%3E%3Cpath d='M32.6 3.05a6.68 6.68 0 0 1-2.15 4.61l-.22.23-12.51 13.17a79.32 79.32 0 0 1-6.78 6.48q-2.8 2.28-4 2.28a6 6 0 0 1-3-1.14 5.73 5.73 0 0 1-2.32-2.36A18 18 0 0 1 .8 22a58 58 0 0 1-.4-7.1 5.43 5.43 0 0 1 1.74-3.86A5.3 5.3 0 0 1 6 9.3q2 0 2.38 3.7c0 .28 0 .49.06.62a18.29 18.29 0 0 0 .74 3.93c.29.74.67 1.11 1.16 1.11a2.6 2.6 0 0 0 1.13-.66 22.61 22.61 0 0 0 2-1.79L26.3 3.46A18.59 18.59 0 0 1 29.2 1a4.15 4.15 0 0 1 2.16-.82 1 1 0 0 1 1 .5 3.7 3.7 0 0 1 .29 1.7z' fill='%23FFFFFF'/%3E%3C/svg%3E");
        background-size: 70%;
        background-repeat: no-repeat;
        background-position: center;
        color: var(--white);
        border-color: var(--black);
        background-color: var(--black);
    }