:root {
    --container-width: 1600px;
    --single-col-width: 10%;
    --condensed-font: "Roboto Condensed", sans-serif;
    --heading-font: "Roboto Condensed", sans-serif;
    --body-font: "Roboto", sans-serif;
    --digital-font: "Digital", "Roboto Condensed", "Helvetica", cursive;
    --base-font-size: 18px;
    --board-font-size: clamp(1rem, 3.5vw, 4rem);
    --board-line-height: 160%;
    --x-small-font-size: 0.75rem;
    --small-font-size: clamp(0.8rem, 1.25vw, 1rem);
    --medium-font-size: 1rem;
    --large-font-size: 1.2rem;
    --x-large-font-size: 1.5rem;
    --button-font-size: 1rem;
    --size-sm: 0.25rem;
    --size-md: 0.5rem;
    --size-lg: 0.75rem;
    --size-xlg: 1rem;
    --size-xxlg: 1.5rem;
    --size-xxxlg: 2rem;
    --size-xxxxlg: 2.5rem;
    --icon-size: 24px;
    --icon-size-sm: 18px;
    --icon-size-md: 28px;
    --icon-size-lg: 32px;
    --settings-panel-width: 400px;
    --body-background: var(--dark-gray);
    --body-foreground: var(--white);
    --accent-foreground: var(--white);
    --accent-background: #4ac3fa;
    --background: var(--near-black);
    --foreground: var(--off-white);
    --muted-foreground: #989898;
    --muted-foreground-hover: #bbb;
    --focus-color: #ffb400;
    --primary-color: #00487b;
    --primary-text-color: #fff;
    --primary-button-text-color: var(--white);
    --secondary-color: #1396d3;
    --secondary-text-color: #000;
    --primary-background: linear-gradient(45deg, var(--lpb-blue), var(--lpb-dark-blue));
    --settings-value-color: var(--lpb-dark-blue);
    --icon-button-color: var(--off-white);
    --black: #181818;
    --white: #fff;
    --off-white: #f8f8f8;
    --lighter-gray: #f0f0f0;
    --light-gray: #efefef;
    --light-med-gray: #c6c6c6;
    --gray: #9f9f9f;
    --med-gray: #676767;
    --med-gray2: #555;
    --med-dark-gray: #323232;
    --dark-gray: #222;
    --near-black: #1d1d1d;
    --release-color: #5cb3ee;
    --bugfix-color: #ff8b9f;
    --lpb-light-blue: #54c5f9;
    --lpb-blue: #0076ad;
    --lpb-dark-blue: #00487b;
    --lpb-shade: #1899d521;
    --lpb-screen-shade: #1899d52b;
    --lpb-card-border: #0076ad82;
    --light-amber: #ffc22b;
    --amber: #fcb000;
    --dark-amber: #e4a104;
    --amber-shade: #fcb00030;
    --amber-screen-shade: #fcb0003b;
    --amber-card-border: #fcb00082;
    --light-aqua: #49c0c0;
    --aqua: #4dd2d2;
    --dark-aqua: #4dd2d2;
    --aqua-shade: #4dd2d221;
    --aqua-screen-shade: #4dd2d22b;
    --aqua-card-border: #4dd2d282;
    --light-black: #464646;
    --black-card: #252525;
    --dark-black: #141414;
    --black-shade: #12121221;
    --black-screen-shade: #0000002b;
    --black-card-border: #00000082;
    --lightest-blue: #8596ff;
    --light-blue: #4c64fe;
    --blue: #02f;
    --dark-blue: #041dc0;
    --blue-shade: #0022ff21;
    --blue-screen-shade: #0022ff2b;
    --blue-card-border: #0022ff82;
    --lightest-brown: #a37d4f;
    --light-brown: #865f2f;
    --brown: #6e430f;
    --dark-brown: #5d3607;
    --brown-shade: #824f112b;
    --brown-screen-shade: #824f112b;
    --brown-card-border: #824f1182;
    --light-chartreuse: #a1f955;
    --chartreuse: #88e03b;
    --dark-chartreuse: #70c626;
    --darkest-chartreuse: #4c9011;
    --chartreuse-shade: #88e03b33;
    --chartreuse-screen-shade: #88e03b4a;
    --chartreuse-card-border: #88e03b82;
    --light-gray-card: #c4c4c4;
    --gray-card: #a3a3a3;
    --dark-gray-card: #7a7a7a;
    --gray-shade: #9b9b9b21;
    --gray-screen-shade: #6969692b;
    --gray-card-border: #a3a3a382;
    --light-green: #00ac00;
    --green: #008900;
    --dark-green: #007d00;
    --green-shade: #00960030;
    --green-screen-shade: #0096003b;
    --green-card-border: #00890082;
    --light-lime: #60ed2d;
    --lime: #4dca20;
    --dark-lime: #3fa21a;
    --lime-shade: #4dca2030;
    --lime-screen-shade: #4dca203b;
    --lime-card-border: #4dca2082;
    --lightest-magenta: #e272e2;
    --light-magenta: #c054c0;
    --magenta: #aa31aa;
    --dark-magenta: #781678;
    --magenta-shade: #aa31aa29;
    --magenta-screen-shade: #aa31aa33;
    --magenta-card-border: #aa31aa82;
    --light-olive: #90bd90;
    --olive: #97a15a;
    --dark-olive: #5c785c;
    --olive-shade: #97a15a21;
    --olive-screen-shade: #97a15a2b;
    --olive-card-border: #97a15a82;
    --light-orange: #f89f22;
    --orange: #ee8b00;
    --dark-orange: #ba6900;
    --darkest-orange: #8f4f00;
    --orange-shade: #ee8b0030;
    --orange-screen-shade: #ee8b0036;
    --orange-card-border: #ee8b0082;
    --light-pink: #ffd2da;
    --pink: #ff8fb8;
    --dark-pink: #f8659b;
    --darkest-pink: #cf2261;
    --pink-shade: #ff8fb831;
    --pink-screen-shade: #ff8fb840;
    --pink-card-border: #ff8fb882;
    --light-purple: #bc61e4;
    --purple: #7a1ea0;
    --dark-purple: #5d0f7e;
    --purple-shade: #7a1ea033;
    --purple-screen-shade: #7a1ea033;
    --purple-card-border: #7a1ea082;
    --rainbow: linear-gradient(180deg, #d40000, #ee8b00, #fe0, #0f0, #02f, #8800c7);
    --rainbow-border-color: linear-gradient(180deg, #d4000056, #ee8b0056, #ffee0056, #00ff0056, #0022ff56, #8800c756) 1
        100%;
    --rainbow-shade: linear-gradient(180deg, #d4000042, #ee8b0042, #ffee0042, #00ff0042, #0022ff42, #8800c742) 1 100%;
    --rainbow-screen-shade: #ffd00047;
    --lightest-red: #fd4b4b;
    --light-red: #f41818;
    --red: #d40000;
    --dark-red: #a30000;
    --red-shade: #d4000021;
    --red-screen-shade: #d400002b;
    --red-card-border: #d4000082;
    --light-tan: #d1ba9d;
    --tan: #ad9981;
    --dark-tan: #867764;
    --tan-shade: #ad998121;
    --tan-screen-shade: #ad99812b;
    --tan-card-border: #ad998182;
    --light-teal: #34ab99;
    --teal: #15a08c;
    --dark-teal: #0b6d5e;
    --teal-shade: #188e7d30;
    --teal-screen-shade: #188e7d36;
    --teal-card-border: #15a08c82;
    --light-vermillion: #ff7835;
    --vermillion: #f95300;
    --dark-vermillion: #d14600;
    --darkest-vermillion: #ab3a01;
    --vermillion-shade: #f9530026;
    --vermillion-screen-shade: #f9530033;
    --vermillion-card-border: #f9530082;
    --lightest-violet: #a888ff;
    --light-violet: #8b61ff;
    --violet: #7543ff;
    --dark-violet: #5722e8;
    --violet-shade: #7543ff26;
    --violet-screen-shade: #7543ff34;
    --violet-card-border: #7543ff82;
    --light-yellow: #ffeb50;
    --yellow: #ffd000;
    --dark-yellow: #edb100;
    --darkest-yellow: #a25b05;
    --yellow-shade: #ffd00030;
    --yellow-screen-shade: #ffd00047;
    --yellow-card-border: #ffd00082;
    --link-color: #1b8500;
    --link-color-hover: #25c000;
    --input-border: 3px dashed #efefef;
    --input-border-solid: 3px solid #efefef;
    --input-border-focus: 3px solid var(--focus-color);
    --input-border-active: 3px solid var(--secondary-color);
    --input-border-disabled: 3px solid var(--light-gray);
    --input-border-hover: 3px solid var(--primary-color);
    --input-border-radius: 8px;
    --input-border-transparent: 3px dashed #0000;
    --input-border-subtle: 3px dashed #ffffff1a;
    --quick-transition: all ease 0.25s;
    --ease-transition: all ease 0.5s;
    --big-shadow: 0px 0px 36px 0px #000;
    --small-shadow: 0px 0px 12px 0px #0006;
    --ball-color-blue: #00f;
    --ball-gradient-blue: radial-gradient(circle at 20% 20%, #00f, #0000ad);
    --ball-color-green: green;
    --ball-gradient-green: radial-gradient(circle at 20% 20%, green, #004a00);
    --ball-color-white: #fff;
    --ball-gradient-white: radial-gradient(circle at 20% 20%, var(--white), #ebebeb);
    --ball-color-red: red;
    --ball-gradient-red: radial-gradient(circle at 20% 20%, red, #910000);
    --ball-color-yellow: #f7bd00;
    --ball-gradient-yellow: radial-gradient(circle at 20% 20%, #ffe52a, #f7bd00);
    --ball-color-inner: #fff;
    --ball-color-text: #222;
}
:root:has(.light-scheme) {
    --body-background: var(--white);
    --body-foreground: var(--dark-gray);
    --background: var(--off-white);
    --foreground: var(--near-black);
}
:root:has(.light-scheme)
    .light-scheme:not(.lpb, .black, .blue, .brown, .green, .magenta, .purple, .red, .teal, .vermillion, .violet) {
    --primary-button-text-color: var(--near-black);
}
:root:has(.light-scheme)
    .light-scheme:not(.lpb, .black, .blue, .brown, .green, .magenta, .purple, .red, .teal, .vermillion, .violet)
    button.cancel-button {
    color: var(--near-black);
}
:root:has(.light-scheme) .light-scheme.amber .bingo-board .bingo-board-row > div.bingo-board-letter,
:root:has(.light-scheme) .light-scheme.chartreuse .bingo-board .bingo-board-row > div.bingo-board-letter,
:root:has(.light-scheme) .light-scheme.lime .bingo-board .bingo-board-row > div.bingo-board-letter,
:root:has(.light-scheme) .light-scheme.orange .bingo-board .bingo-board-row > div.bingo-board-letter,
:root:has(.light-scheme) .light-scheme.pink .bingo-board .bingo-board-row > div.bingo-board-letter,
:root:has(.light-scheme) .light-scheme.yellow .bingo-board .bingo-board-row > div.bingo-board-letter {
    color: var(--near-black);
}
:root .amber,
:root .chartreuse,
:root .lime,
:root .orange,
:root .pink,
:root .yellow {
    --icon-button-color: var(--near-black);
    --accent-foreground: var(--near-black);
}
:root .amber .dropdown-group .dropdown button:hover,
:root .amber .small-button,
:root .amber a.primary-button,
:root .amber a.primary-button:hover,
:root .amber button.primary-button,
:root .amber button.primary-button:hover,
:root .chartreuse .dropdown-group .dropdown button:hover,
:root .chartreuse .small-button,
:root .chartreuse a.primary-button,
:root .chartreuse a.primary-button:hover,
:root .chartreuse button.primary-button,
:root .chartreuse button.primary-button:hover,
:root .lime .dropdown-group .dropdown button:hover,
:root .lime .small-button,
:root .lime a.primary-button,
:root .lime a.primary-button:hover,
:root .lime button.primary-button,
:root .lime button.primary-button:hover,
:root .orange .dropdown-group .dropdown button:hover,
:root .orange .small-button,
:root .orange a.primary-button,
:root .orange a.primary-button:hover,
:root .orange button.primary-button,
:root .orange button.primary-button:hover,
:root .pink .dropdown-group .dropdown button:hover,
:root .pink .small-button,
:root .pink a.primary-button,
:root .pink a.primary-button:hover,
:root .pink button.primary-button,
:root .pink button.primary-button:hover,
:root .rainbow .dropdown-group .dropdown button:hover,
:root .yellow .dropdown-group .dropdown button:hover,
:root .yellow .small-button,
:root .yellow a.primary-button,
:root .yellow a.primary-button:hover,
:root .yellow button.primary-button,
:root .yellow button.primary-button:hover {
    color: var(--near-black);
}
:root .card-block .card,
:root .pattern-block .pattern-display {
    --bingo-lettering-color: var(--white);
    --card-background: var(--lpb-blue);
    --card-border-color: var(--lpb-card-border);
    --shaded-border-color: var(--lpb-light-blue);
    --shaded-bg-color: var(--lpb-shade);
    --screen-shaded-bg-color: var(--lpb-screen-shade);
}
:root .card-block .card[data-color^="amber"],
:root .pattern-block .pattern-display[data-color^="amber"] {
    --bingo-lettering-color: var(--light-black);
    --card-background: var(--amber);
    --card-border-color: var(--amber-card-border);
    --shaded-border-color: var(--light-amber);
    --shaded-bg-color: var(--amber-shade);
    --screen-shaded-bg-color: var(--amber-screen-shade);
}
:root .card-block .card[data-color^="aqua"],
:root .pattern-block .pattern-display[data-color^="aqua"] {
    --bingo-lettering-color: var(--light-black);
    --card-background: var(--aqua);
    --card-border-color: var(--aqua-card-border);
    --shaded-border-color: var(--light-aqua);
    --shaded-bg-color: var(--aqua-shade);
    --screen-shaded-bg-color: var(--aqua-screen-shade);
}
:root .card-block .card[data-color^="black"],
:root .pattern-block .pattern-display[data-color^="black"] {
    --bingo-lettering-color: var(--white);
    --card-background: var(--black-card);
    --card-border-color: var(--black-card-border);
    --shaded-border-color: var(--light-black);
    --shaded-bg-color: var(--black-shade);
    --screen-shaded-bg-color: var(--black-screen-shade);
}
:root .card-block .card[data-color^="blue"],
:root .pattern-block .pattern-display[data-color^="blue"] {
    --bingo-lettering-color: var(--white);
    --card-background: var(--blue);
    --card-border-color: var(--blue-card-border);
    --shaded-border-color: var(--light-blue);
    --shaded-bg-color: var(--blue-shade);
    --screen-shaded-bg-color: var(--blue-screen-shade);
}
:root .card-block .card[data-color^="brown"],
:root .pattern-block .pattern-display[data-color^="brown"] {
    --bingo-lettering-color: var(--white);
    --card-background: var(--brown);
    --card-border-color: var(--brown-card-border);
    --shaded-border-color: var(--light-brown);
    --shaded-bg-color: var(--brown-shade);
    --screen-shaded-bg-color: var(--brown-screen-shade);
}
:root .card-block .card[data-color^="chartreuse"],
:root .pattern-block .pattern-display[data-color^="chartreuse"] {
    --bingo-lettering-color: var(--light-black);
    --card-background: var(--chartreuse);
    --card-border-color: var(--chartreuse-card-border);
    --shaded-border-color: var(--light-chartreuse);
    --shaded-bg-color: var(--chartreuse-shade);
    --screen-shaded-bg-color: var(--chartreuse-screen-shade);
}
:root .card-block .card[data-color^="gray"],
:root .pattern-block .pattern-display[data-color^="gray"] {
    --bingo-lettering-color: var(--near-black);
    --card-background: var(--gray-card);
    --card-border-color: var(--gray-card-border);
    --shaded-border-color: var(--light-gray-card);
    --shaded-bg-color: var(--gray-shade);
    --screen-shaded-bg-color: var(--gray-screen-shade);
}
:root .card-block .card[data-color^="green"],
:root .pattern-block .pattern-display[data-color^="green"] {
    --bingo-lettering-color: var(--white);
    --card-background: var(--green);
    --card-border-color: var(--green-card-border);
    --shaded-border-color: var(--light-green);
    --shaded-bg-color: var(--green-shade);
    --screen-shaded-bg-color: var(--green-screen-shade);
}
:root .card-block .card[data-color^="lime"],
:root .pattern-block .pattern-display[data-color^="lime"] {
    --bingo-lettering-color: var(--near-black);
    --card-background: var(--lime);
    --card-border-color: var(--lime-card-border);
    --shaded-border-color: var(--light-lime);
    --shaded-bg-color: var(--lime-shade);
    --screen-shaded-bg-color: var(--lime-screen-shade);
}
:root .card-block .card[data-color^="magenta"],
:root .pattern-block .pattern-display[data-color^="magenta"] {
    --bingo-lettering-color: var(--white);
    --card-background: var(--magenta);
    --card-border-color: var(--magenta-card-border);
    --shaded-border-color: var(--light-magenta);
    --shaded-bg-color: var(--magenta-shade);
    --screen-shaded-bg-color: var(--magenta-screen-shade);
}
:root .card-block .card[data-color^="olive"],
:root .pattern-block .pattern-display[data-color^="olive"] {
    --bingo-lettering-color: var(--near-black);
    --card-background: var(--olive);
    --card-border-color: var(--olive-card-border);
    --shaded-border-color: var(--light-olive);
    --shaded-bg-color: var(--olive-shade);
    --screen-shaded-bg-color: var(--olive-screen-shade);
}
:root .card-block .card[data-color^="orange"],
:root .pattern-block .pattern-display[data-color^="orange"] {
    --bingo-lettering-color: var(--near-black);
    --card-background: var(--orange);
    --card-border-color: var(--orange-card-border);
    --shaded-border-color: var(--light-orange);
    --shaded-bg-color: var(--orange-shade);
    --screen-shaded-bg-color: var(--orange-screen-shade);
}
:root .card-block .card[data-color^="pink"],
:root .pattern-block .pattern-display[data-color^="pink"] {
    --bingo-lettering-color: var(--near-black);
    --card-background: var(--pink);
    --card-border-color: var(--pink-card-border);
    --shaded-border-color: var(--light-pink);
    --shaded-bg-color: var(--pink-shade);
    --screen-shaded-bg-color: var(--pink-screen-shade);
}
:root .card-block .card[data-color^="purple"],
:root .pattern-block .pattern-display[data-color^="purple"] {
    --bingo-lettering-color: var(--white);
    --card-background: var(--purple);
    --card-border-color: var(--purple-card-border);
    --shaded-border-color: var(--light-purple);
    --shaded-bg-color: var(--purple-shade);
    --screen-shaded-bg-color: var(--purple-screen-shade);
}
:root .card-block .card[data-color^="rainbow"],
:root .pattern-block .pattern-display[data-color^="rainbow"] {
    --bingo-lettering-color: var(--white);
    --card-background: var(--rainbow);
    --card-border-color: var(--rainbow-border-color);
    --shaded-border-color: var(--light-rainbow);
    --shaded-bg-color: var(--rainbow-shade);
    --screen-shaded-bg-color: var(--rainbow-screen-shade);
}
:root .card-block .card[data-color^="red"],
:root .pattern-block .pattern-display[data-color^="red"] {
    --bingo-lettering-color: var(--white);
    --card-background: var(--red);
    --card-border-color: var(--red-card-border);
    --shaded-border-color: var(--light-red);
    --shaded-bg-color: var(--red-shade);
    --screen-shaded-bg-color: var(--red-screen-shade);
}
:root .card-block .card[data-color^="tan"],
:root .pattern-block .pattern-display[data-color^="tan"] {
    --bingo-lettering-color: var(--near-black);
    --card-background: var(--tan);
    --card-border-color: var(--tan-card-border);
    --shaded-border-color: var(--light-tan);
    --shaded-bg-color: var(--tan-shade);
    --screen-shaded-bg-color: var(--tan-screen-shade);
}
:root .card-block .card[data-color^="teal"],
:root .pattern-block .pattern-display[data-color^="teal"] {
    --bingo-lettering-color: var(--black);
    --card-background: var(--teal);
    --card-border-color: var(--teal-card-border);
    --shaded-border-color: var(--light-teal);
    --shaded-bg-color: var(--teal-shade);
    --screen-shaded-bg-color: var(--teal-screen-shade);
}
:root .card-block .card[data-color^="vermillion"],
:root .pattern-block .pattern-display[data-color^="vermillion"] {
    --bingo-lettering-color: var(--near-black);
    --card-background: var(--vermillion);
    --card-border-color: var(--vermillion-card-border);
    --shaded-border-color: var(--light-vermillion);
    --shaded-bg-color: var(--vermillion-shade);
    --screen-shaded-bg-color: var(--vermillion-screen-shade);
}
:root .card-block .card[data-color^="violet"],
:root .pattern-block .pattern-display[data-color^="violet"] {
    --bingo-lettering-color: var(--white);
    --card-background: var(--violet);
    --card-border-color: var(--violet-card-border);
    --shaded-border-color: var(--light-violet);
    --shaded-bg-color: var(--violet-shade);
    --screen-shaded-bg-color: var(--violet-screen-shade);
}
:root .card-block .card[data-color^="yellow"],
:root .pattern-block .pattern-display[data-color^="yellow"] {
    --bingo-lettering-color: var(--near-black);
    --card-background: var(--yellow);
    --card-border-color: var(--yellow-card-border);
    --shaded-border-color: var(--light-yellow);
    --shaded-bg-color: var(--yellow-shade);
    --screen-shaded-bg-color: var(--yellow-screen-shade);
}
:root .card-block .card[data-color^="dk-gray"],
:root .pattern-block .pattern-display[data-color^="dk-gray"] {
    --bingo-lettering-color: var(--white);
    --card-background: #353535;
    --card-border-color: #35353582;
    --shaded-border-color: #35353542;
    --shaded-bg-color: #b5b5b582;
    --screen-shaded-bg-color: #35353582;
}
:root .lpb {
    --accent-background: var(--lpb-light-blue);
    --focus-color: var(--lpb-light-blue);
    --link-color: var(--lpb-blue);
    --link-color-hover: var(--lpb-dark-blue);
    --primary-color: var(--lpb-blue);
    --secondary-color: var(--lpb-dark-blue);
    --primary-background: linear-gradient(45deg, var(--lpb-blue), var(--lpb-dark-blue));
    --primary-fill: linear-gradient(45deg, var(--lpb-blue), var(--lpb-dark-blue));
    --primary-animation: none;
    --primary-border-source: linear-gradient(to bottom, var(--lpb-blue), var(--lpb-dark-blue)) 1 100%;
    --settings-value-color: var(--lpb-dark-blue);
    --input-border-focus: 3px solid var(--focus-color);
    --input-border-active: 3px solid var(--secondary-color);
    --input-border-hover: 3px solid var(--primary-color);
}
:root .lpb .logo-color {
    fill: var(--lpb-blue);
}
:root .amber {
    --accent-background: var(--light-amber);
    --focus-color: var(--light-amber);
    --link-color: var(--amber);
    --link-color-hover: var(--dark-amber);
    --primary-color: var(--amber);
    --secondary-color: var(--dark-amber);
    --primary-background: linear-gradient(45deg, var(--light-amber), var(--amber), var(--dark-amber));
    --primary-fill: linear-gradient(45deg, var(--light-amber), var(--amber), var(--dark-amber));
    --primary-animation: none;
    --primary-border-source: linear-gradient(to bottom, var(--light-amber), var(--amber), var(--dark-amber)) 1 100%;
    --settings-value-color: var(--dark-amber);
    --input-border-focus: 3px solid var(--focus-color);
    --input-border-active: 3px solid var(--secondary-color);
    --input-border-hover: 3px solid var(--primary-color);
}
:root .amber .logo-color {
    fill: var(--amber);
}
:root .black {
    --accent-background: var(--light-black);
    --focus-color: var(--light-gray);
    --link-color: var(--black);
    --link-color-hover: var(--dark-black);
    --primary-color: var(--black);
    --secondary-color: var(--dark-black);
    --primary-background: linear-gradient(45deg, var(--light-black), var(--black), var(--dark-black));
    --primary-fill: linear-gradient(45deg, var(--light-black), var(--black), var(--dark-black));
    --primary-animation: none;
    --primary-border-source: linear-gradient(to bottom, var(--light-black), var(--black), var(--dark-black)) 1 100%;
    --settings-value-color: var(--dark-black);
    --input-border-focus: 3px solid var(--focus-color);
    --input-border-active: 3px solid var(--secondary-color);
    --input-border-hover: 3px solid var(--primary-color);
}
:root .black .logo-color {
    fill: var(--med-gray2);
}
:root .black.light-scheme {
    --focus-color: var(--dark-gray);
}
:root .black.light-scheme .logo .logo-white:not(circle) {
    fill: var(--black) !important;
}
:root .blue {
    --accent-background: var(--light-blue);
    --focus-color: var(--light-blue);
    --link-color: var(--blue);
    --link-color-hover: var(--dark-blue);
    --primary-color: var(--blue);
    --secondary-color: var(--dark-blue);
    --primary-background: linear-gradient(45deg, var(--light-blue), var(--blue), var(--dark-blue));
    --primary-fill: linear-gradient(45deg, var(--light-blue), var(--blue), var(--dark-blue));
    --primary-animation: none;
    --primary-border-source: linear-gradient(to bottom, var(--light-blue), var(--blue), var(--dark-blue)) 1 100%;
    --settings-value-color: var(--dark-blue);
    --input-border-focus: 3px solid var(--focus-color);
    --input-border-active: 3px solid var(--secondary-color);
    --input-border-hover: 3px solid var(--primary-color);
}
:root .blue .logo-color {
    fill: var(--blue);
}
:root .blue .tick {
    color: var(--light-blue);
}
:root .blue button.text-button,
:root .blue p button {
    color: var(--lightest-blue);
}
:root .brown {
    --accent-background: var(--light-brown);
    --focus-color: var(--light-brown);
    --link-color: var(--brown);
    --link-color-hover: var(--dark-brown);
    --primary-color: var(--brown);
    --secondary-color: var(--dark-brown);
    --primary-background: linear-gradient(45deg, var(--light-brown), var(--brown), var(--dark-brown));
    --primary-fill: linear-gradient(45deg, var(--light-brown), var(--brown), var(--dark-brown));
    --primary-animation: none;
    --primary-border-source: linear-gradient(to bottom, var(--light-brown), var(--brown), var(--dark-brown)) 1 100%;
    --settings-value-color: var(--dark-brown);
    --input-border-focus: 3px solid var(--focus-color);
    --input-border-active: 3px solid var(--secondary-color);
    --input-border-hover: 3px solid var(--primary-color);
}
:root .brown .logo-color {
    fill: var(--brown);
}
:root .brown .tick {
    color: var(--light-brown);
}
:root .brown:not(.light-scheme) .cmp-prize,
:root .brown:not(.light-scheme) button.text-button,
:root .brown:not(.light-scheme) p button {
    color: var(--lightest-brown);
}
:root .chartreuse {
    --accent-background: var(--light-chartreuse);
    --focus-color: var(--light-chartreuse);
    --link-color: var(--chartreuse);
    --link-color-hover: var(--dark-chartreuse);
    --primary-color: var(--chartreuse);
    --secondary-color: var(--dark-chartreuse);
    --primary-background: linear-gradient(45deg, var(--light-chartreuse), var(--chartreuse), var(--dark-chartreuse));
    --primary-fill: linear-gradient(45deg, var(--light-chartreuse), var(--chartreuse), var(--dark-chartreuse));
    --primary-animation: none;
    --primary-border-source: linear-gradient(
            to bottom,
            var(--light-chartreuse),
            var(--chartreuse),
            var(--dark-chartreuse)
        )
        1 100%;
    --settings-value-color: var(--dark-chartreuse);
    --input-border-focus: 3px solid var(--focus-color);
    --input-border-active: 3px solid var(--secondary-color);
    --input-border-hover: 3px solid var(--primary-color);
}
:root .chartreuse .logo-color {
    fill: var(--chartreuse);
}
:root .chartreuse .setting-group label svg,
:root .chartreuse .toggle.active svg {
    fill: var(--darkest-chartreuse);
}
:root .chartreuse.light-scheme {
    --settings-value-color: var(--darkest-chartreuse);
}
:root .chartreuse.light-scheme .cmp-prize,
:root .chartreuse.light-scheme .tick,
:root .chartreuse.light-scheme p button {
    color: var(--darkest-chartreuse);
}
:root .chartreuse button.text-button {
    color: #3d730e;
}
:root .gray {
    --accent-background: var(--light-gray);
    --focus-color: var(--light-gray);
    --link-color: var(--gray);
    --link-color-hover: var(--dark-gray);
    --primary-color: var(--med-gray);
    --secondary-color: var(--near-black);
    --primary-background: linear-gradient(45deg, var(--light-gray), var(--gray), var(--dark-gray));
    --primary-fill: linear-gradient(45deg, var(--light-gray), var(--gray), var(--dark-gray));
    --primary-animation: none;
    --primary-border-source: linear-gradient(to bottom, var(--light-gray), var(--gray), var(--dark-gray)) 1 100%;
    --settings-value-color: var(--dark-gray);
    --input-border-focus: 3px solid var(--focus-color);
    --input-border-active: 3px solid var(--secondary-color);
    --input-border-hover: 3px solid var(--primary-color);
}
:root .gray .logo-color {
    fill: var(--gray);
}
:root .gray a.small-button,
:root .gray button.small-button {
    color: var(--white);
}
:root .gray:not(.light-scheme) .cmp-prize,
:root .gray:not(.light-scheme) .tick,
:root .gray:not(.light-scheme) button.text-button {
    color: #c6c6c6;
}
:root .gray.light-scheme .cmp-prize {
    color: var(--med-gray);
}
:root .gray.light-scheme button.primary-button {
    color: #fff;
}
:root .gray.light-scheme button.secondary-button {
    background-color: #0000;
}
:root .green {
    --accent-background: var(--light-green);
    --focus-color: var(--light-green);
    --link-color: var(--green);
    --link-color-hover: var(--dark-green);
    --primary-color: var(--green);
    --secondary-color: var(--dark-green);
    --primary-background: linear-gradient(45deg, var(--light-green), var(--green), var(--dark-green));
    --primary-fill: linear-gradient(45deg, var(--light-green), var(--green), var(--dark-green));
    --primary-animation: none;
    --primary-border-source: linear-gradient(to bottom, var(--light-green), var(--green), var(--dark-green)) 1 100%;
    --settings-value-color: var(--dark-green);
    --input-border-focus: 3px solid var(--focus-color);
    --input-border-active: 3px solid var(--secondary-color);
    --input-border-hover: 3px solid var(--primary-color);
}
:root .green .logo-color {
    fill: var(--green);
}
:root .green:not(.light-scheme) button.text-button {
    color: var(--light-green);
}
:root .magenta {
    --accent-background: var(--light-magenta);
    --focus-color: var(--light-magenta);
    --link-color: var(--magenta);
    --link-color-hover: var(--dark-magenta);
    --primary-color: var(--magenta);
    --secondary-color: var(--dark-magenta);
    --primary-background: linear-gradient(45deg, var(--light-magenta), var(--magenta), var(--dark-magenta));
    --primary-fill: linear-gradient(45deg, var(--light-magenta), var(--magenta), var(--dark-magenta));
    --primary-animation: none;
    --primary-border-source: linear-gradient(to bottom, var(--light-magenta), var(--magenta), var(--dark-magenta)) 1
        100%;
    --settings-value-color: var(--dark-magenta);
    --input-border-focus: 3px solid var(--focus-color);
    --input-border-active: 3px solid var(--secondary-color);
    --input-border-hover: 3px solid var(--primary-color);
}
:root .magenta .logo-color {
    fill: var(--magenta);
}
:root .magenta:not(.light-scheme) button.text-button {
    color: var(--lightest-magenta);
}
:root .orange {
    --accent-background: var(--light-orange);
    --focus-color: var(--light-orange);
    --link-color: var(--orange);
    --link-color-hover: var(--dark-orange);
    --primary-color: var(--orange);
    --secondary-color: var(--dark-orange);
    --primary-background: linear-gradient(45deg, var(--light-orange), var(--orange), var(--dark-orange));
    --primary-fill: linear-gradient(45deg, var(--light-orange), var(--orange), var(--dark-orange));
    --primary-animation: none;
    --primary-border-source: linear-gradient(to bottom, var(--light-orange), var(--orange), var(--dark-orange)) 1 100%;
    --settings-value-color: var(--dark-orange);
    --input-border-focus: 3px solid var(--focus-color);
    --input-border-active: 3px solid var(--secondary-color);
    --input-border-hover: 3px solid var(--primary-color);
}
:root .orange .logo-color {
    fill: var(--orange);
}
:root .orange.light-scheme {
    --settings-value-color: var(--dark-orange);
}
:root .orange.light-scheme .cmp-prize,
:root .orange.light-scheme .tick,
:root .orange.light-scheme p button {
    color: var(--dark-orange);
}
:root .orange.light-scheme button.text-button {
    color: var(--darkest-orange);
}
:root .pink {
    --accent-background: var(--light-pink);
    --focus-color: var(--light-pink);
    --link-color: var(--pink);
    --link-color-hover: var(--dark-pink);
    --primary-color: var(--pink);
    --secondary-color: var(--dark-pink);
    --primary-background: linear-gradient(45deg, var(--light-pink), var(--pink), var(--dark-pink));
    --primary-fill: linear-gradient(45deg, var(--light-pink), var(--pink), var(--dark-pink));
    --primary-animation: none;
    --primary-border-source: linear-gradient(to bottom, var(--light-pink), var(--pink), var(--dark-pink)) 1 100%;
    --settings-value-color: var(--dark-pink);
    --input-border-focus: 3px solid var(--focus-color);
    --input-border-active: 3px solid var(--secondary-color);
    --input-border-hover: 3px solid var(--primary-color);
}
:root .pink .logo-color {
    fill: var(--pink);
}
:root .pink.light-scheme {
    --settings-value-color: var(--darkest-pink);
}
:root .pink.light-scheme .cmp-prize,
:root .pink.light-scheme .tick,
:root .pink.light-scheme button.text-button,
:root .pink.light-scheme p button {
    color: var(--darkest-pink);
}
:root .purple {
    --accent-background: var(--light-purple);
    --focus-color: var(--light-purple);
    --link-color: var(--light-purple);
    --link-color-hover: var(--purple);
    --primary-color: var(--purple);
    --secondary-color: var(--dark-purple);
    --primary-background: linear-gradient(45deg, var(--light-purple), var(--purple), var(--dark-purple));
    --primary-fill: linear-gradient(45deg, var(--light-purple), var(--purple), var(--dark-purple));
    --primary-animation: none;
    --primary-border-source: linear-gradient(to bottom, var(--light-purple), var(--purple), var(--dark-purple)) 1 100%;
    --settings-value-color: var(--dark-purple);
    --input-border-focus: 3px solid var(--focus-color);
    --input-border-active: 3px solid var(--secondary-color);
    --input-border-hover: 3px solid var(--primary-color);
}
:root .purple .logo-color {
    fill: var(--light-purple);
}
:root .purple .text-button,
:root .purple button.text-button {
    color: var(--light-purple);
}
:root .purple.light-scheme .cmp-prize,
:root .purple.light-scheme button.text-button {
    color: var(--purple);
}
:root .rainbow {
    --accent-background: var(--light-amber);
    --focus-color: var(--amber);
    --link-color: var(--amber);
    --link-color-hover: var(--dark-red);
    --primary-color: var(--red);
    --secondary-color: var(--dark-red);
    --primary-background: linear-gradient(45deg, #d40000, #ee8b00, #fe0, #0f0, #02f, #8800c7);
    --primary-fill: rainbowGradient 5s infinite;
    --primary-animation: rainbowGradientColor 5s infinite;
    --primary-border-source: linear-gradient(180deg, #d40000, #ee8b00, #fe0, #0f0, #02f, #8800c7) 1 100%;
    --settings-value-color: var(--dark-red);
    --input-border-focus: 3px solid var(--focus-color);
    --input-border-active: 3px solid var(--secondary-color);
    --input-border-hover: 3px solid var(--primary-color);
}
:root .rainbow .settings-panel a {
    color: var(--dark-purple);
}
:root .rainbow header {
    background: var(--primary-background);
}
:root .rainbow a:hover {
    animation: var(--primary-animation);
}
:root .rainbow .logo-color,
:root .rainbow circle.logo-color {
    animation: var(--primary-fill);
    fill: var(--lpb-blue);
}
:root .rainbow .pattern-block .pattern-display .row:nth-of-type(0) .col.selected span {
    background-color: #d40000;
}
:root .rainbow .pattern-block .pattern-display .row:first-of-type .col.selected span {
    background-color: #de7800;
}
:root .rainbow .pattern-block .pattern-display .row:nth-of-type(2) .col.selected span {
    background-color: #ffcf00;
}
:root .rainbow .pattern-block .pattern-display .row:nth-of-type(3) .col.selected span {
    background-color: #00de00;
}
:root .rainbow .pattern-block .pattern-display .row:nth-of-type(4) .col.selected span {
    background-color: #02f;
}
:root .rainbow .pattern-block .pattern-display .row:nth-of-type(5) .col.selected span {
    background-color: #8800c7;
}
:root .rainbow.light-scheme .cmp-prize {
    color: var(--red);
}
:root .rainbow .small-button:hover,
:root .rainbow.light-scheme .primary-button,
:root .rainbow.light-scheme .primary-button:hover,
:root .rainbow.light-scheme button.primary-button,
:root .rainbow.light-scheme button.primary-button:hover,
:root .rainbow.light-scheme button.small-button {
    color: var(--white);
}
:root .rainbow:not(.light-scheme) .text-button,
:root .rainbow:not(.light-scheme) button.text-button {
    color: var(--light-purple);
}
:root .rainbow .countdown.flashing {
    animation: countdown-rainbow 1s infinite;
}
:root .red {
    --accent-background: var(--light-red);
    --focus-color: var(--light-red);
    --link-color: var(--red);
    --link-color-hover: var(--dark-red);
    --primary-color: var(--red);
    --secondary-color: var(--dark-red);
    --primary-background: linear-gradient(45deg, var(--light-red), var(--red), var(--dark-red));
    --primary-fill: linear-gradient(45deg, var(--light-red), var(--red), var(--dark-red));
    --primary-animation: none;
    --primary-border-source: linear-gradient(to bottom, var(--light-red), var(--red), var(--dark-red)) 1 100%;
    --settings-value-color: var(--dark-red);
    --input-border-focus: 3px solid var(--focus-color);
    --input-border-active: 3px solid var(--secondary-color);
    --input-border-hover: 3px solid var(--primary-color);
}
:root .red .logo-color {
    fill: var(--red);
}
:root .red:not(.light-scheme) .text-button,
:root .red:not(.light-scheme) button.text-button {
    color: var(--lightest-red);
}
:root .teal {
    --accent-background: var(--light-teal);
    --focus-color: var(--light-teal);
    --link-color: var(--teal);
    --link-color-hover: var(--dark-teal);
    --primary-color: var(--teal);
    --secondary-color: var(--dark-teal);
    --primary-background: linear-gradient(45deg, var(--light-teal), var(--teal), var(--dark-teal));
    --primary-fill: linear-gradient(45deg, var(--light-teal), var(--teal), var(--dark-teal));
    --primary-animation: none;
    --primary-border-source: linear-gradient(to bottom, var(--light-teal), var(--teal), var(--dark-teal)) 1 100%;
    --settings-value-color: var(--dark-teal);
    --input-border-focus: 3px solid var(--focus-color);
    --input-border-active: 3px solid var(--secondary-color);
    --input-border-hover: 3px solid var(--primary-color);
}
:root .teal .logo-color {
    fill: var(--teal);
}
:root .teal.light-scheme .cmp-prize,
:root .teal.light-scheme .text-button,
:root .teal.light-scheme button.text-button {
    color: var(--dark-teal);
}
:root .teal .small-button:hover {
    color: var(--white);
}
:root .vermillion {
    --accent-background: var(--light-vermillion);
    --focus-color: var(--light-vermillion);
    --link-color: var(--vermillion);
    --link-color-hover: var(--dark-vermillion);
    --primary-color: var(--vermillion);
    --secondary-color: var(--dark-vermillion);
    --primary-background: linear-gradient(45deg, var(--light-vermillion), var(--vermillion), var(--dark-vermillion));
    --primary-fill: linear-gradient(45deg, var(--light-vermillion), var(--vermillion), var(--dark-vermillion));
    --primary-animation: none;
    --primary-border-source: linear-gradient(
            to bottom,
            var(--light-vermillion),
            var(--vermillion),
            var(--dark-vermillion)
        )
        1 100%;
    --settings-value-color: var(--dark-vermillion);
    --input-border-focus: 3px solid var(--focus-color);
    --input-border-active: 3px solid var(--secondary-color);
    --input-border-hover: 3px solid var(--primary-color);
}
:root .vermillion .logo-color {
    fill: var(--vermillion);
}
:root .vermillion.light-scheme .cmp-prize {
    color: var(--vermillion);
}
:root .vermillion.light-scheme .text-button,
:root .vermillion.light-scheme button.text-button {
    color: var(--darkest-vermillion);
}
:root .vermillion .small-button:hover {
    color: var(--white);
}
:root .violet {
    --accent-background: var(--light-violet);
    --focus-color: var(--light-violet);
    --link-color: var(--violet);
    --link-color-hover: var(--dark-violet);
    --primary-color: var(--violet);
    --secondary-color: var(--dark-violet);
    --primary-background: linear-gradient(45deg, var(--light-violet), var(--violet), var(--dark-violet));
    --primary-fill: linear-gradient(45deg, var(--light-violet), var(--violet), var(--dark-violet));
    --primary-animation: none;
    --primary-border-source: linear-gradient(to bottom, var(--light-violet), var(--violet), var(--dark-violet)) 1 100%;
    --settings-value-color: var(--dark-violet);
    --input-border-focus: 3px solid var(--focus-color);
    --input-border-active: 3px solid var(--secondary-color);
    --input-border-hover: 3px solid var(--primary-color);
}
:root .violet .logo-color {
    fill: var(--violet);
}
:root .violet:not(.light-scheme) .text-button,
:root .violet:not(.light-scheme) button.text-button {
    color: var(--lightest-violet);
}
:root .violet .small-button:hover {
    color: var(--white);
}
:root .yellow {
    --accent-foreground: var(--dark-gray);
    --accent-background: var(--light-yellow);
    --focus-color: var(--light-yellow);
    --link-color: var(--yellow);
    --link-color-hover: var(--dark-yellow);
    --primary-color: var(--dark-yellow);
    --secondary-color: var(--yellow);
    --primary-background: linear-gradient(45deg, var(--light-yellow), var(--yellow), var(--dark-yellow));
    --primary-fill: linear-gradient(45deg, var(--light-yellow), var(--yellow), var(--dark-yellow));
    --primary-animation: none;
    --primary-border-source: linear-gradient(to bottom, var(--light-yellow), var(--yellow), var(--dark-yellow)) 1 100%;
    --settings-value-color: var(--dark-yellow);
    --input-border-focus: 3px solid var(--focus-color);
    --input-border-active: 3px solid var(--secondary-color);
    --input-border-hover: 3px solid var(--primary-color);
}
:root .yellow .logo-color {
    fill: var(--yellow);
}
:root .yellow.light-scheme {
    --settings-value-color: var(--darkest-yellow);
}
:root .yellow.light-scheme .cmp-prize,
:root .yellow.light-scheme .text-button,
:root .yellow.light-scheme .tick,
:root .yellow.light-scheme button.text-button {
    color: var(--darkest-yellow);
}
* {
    box-sizing: border-box;
}
body,
html {
    background: var(--body-background);
    color: var(--body-foreground);
    font-family: var(--body-font);
    font-size: var(--base-font-size);
    margin: 0;
    overflow-x: hidden;
    padding: 0;
    position: relative;
}
body.no-scroll,
html.no-scroll {
    height: 100%;
    overflow: hidden;
}
#root,
.body-container,
body,
html {
    min-height: 100vh;
}
.body-container {
    display: flex;
    flex-direction: column;
}
header,
main {
    flex: 0;
}
main {
    flex-grow: 4;
    margin: 0 auto;
    padding: var(--size-xlg);
    width: 100%;
}
.svg-icon {
    fill: currentColor;
    vertical-align: middle;
}
section {
    padding: var(--size-xxlg) var(--size-xxlg);
}
section > .container {
    max-width: var(--container-width);
}
section > .container:last-of-type {
    padding-bottom: var(--size-xxxlg);
}
h1#top {
    display: flex;
    justify-content: space-between;
}
.back-link {
    align-content: center;
    display: inline-block;
    line-height: 1.5;
    text-align: center;
}
.caller-block + footer {
    display: none !important;
}
.logo {
    height: auto;
    max-height: 8rem;
    width: 100%;
}
.logo .logo-stroke {
    color: #00a4ff;
    fill: none;
    stroke: var(--white);
    stroke-miterlimit: 10;
    stroke-width: 2px;
}
.logo .logo-med {
    fill: var(--medium-gray) !important;
}
.logo .logo-dark {
    fill: var(--dark-gray) !important;
}
.logo .logo-white {
    fill: var(--white) !important;
}
.logo .logo-color {
    fill: var(--lpb-blue);
}
.logo .logo-text-color {
    fill: var(--focus-color);
}
.spinner {
    align-self: center;
    animation: spin 2s ease-in-out infinite;
    color: var(--focus-color);
    display: inline-flex;
    font-size: 1.5rem;
    height: 100%;
    margin-right: 10px;
    transform: rotate(0deg);
}
header {
    background: var(--primary-color);
    padding: var(--size-md);
}
header > .container {
    max-width: var(--container-width);
}
header .logo .logo-color {
    fill: #fff !important;
}
header .home-link {
    color: var(--white);
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
    text-shadow: 1px 1px #00000073;
}
header .home-link:hover {
    color: var(--off-white);
}
header .home-link .logo {
    height: 3.5rem;
    margin: -0.5rem 1rem;
    width: auto;
}
header .home-link .logo .logo-color {
    fill: var(--focus-color);
}
header .header-icon {
    align-content: center;
    text-align: center;
}
header .header-icon .icon-button {
    border: var(--input-border-transparent);
    display: inline-flex;
    justify-content: center;
    margin: 0;
    padding: 2px 5px;
    width: calc(var(--icon-size) + 15px);
}
header .header-icon .icon-button svg {
    color: var(--off-white);
    fill: var(--icon-button-color);
    height: var(--icon-size);
    line-height: var(--icon-size);
    transition: var(--ease-transition);
    vertical-align: -webkit-baseline-middle;
    width: var(--icon-size);
    z-index: 1;
}
header .header-icon:hover .icon-button {
    background-color: var(--off-white);
    border: var(--input-border-transparent);
}
header .header-icon:hover .icon-button svg {
    fill: var(--secondary-color);
}
header .translate-button {
    position: relative;
}
header .translate-button svg {
    z-index: 1;
}
header .translate-button:focus,
header .translate-button:focus-within {
    border: 3px solid var(--focus-color);
}
header .translate-button:hover svg {
    color: var(--secondary-color);
}
header #google_translate_element {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
}
header #google_translate_element .goog-te-gadget {
    bottom: 0;
    display: block;
    font-size: 0;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
header #google_translate_element .goog-te-gadget span {
    display: none;
}
header #google_translate_element .goog-te-combo {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: #0000;
    border: none;
    color: #0000;
    cursor: pointer;
    height: calc(var(--icon-size) + 5px);
    height: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
    width: 100%;
}
footer {
    flex: 0;
    padding: var(--size-md) var(--size-xxlg);
    width: 100%;
}
footer > .container {
    max-width: var(--container-width);
}
footer a,
footer p {
    color: var(--muted-foreground);
}
footer p:not(.notranslate) a {
    line-height: 2;
    padding: 1rem;
}
footer a:hover {
    color: var(--muted-foreground-hover);
}
.karol-headshot {
    border: 5px solid #fff;
    margin: 1rem;
    width: 15rem;
}
.aside {
    background: #0000004d;
    padding: var(--size-xlg) !important;
}
.bingo-caller-photo {
    float: right;
    padding: 0 1rem;
    width: 200px;
}
.qr-code-link {
    display: block;
    font-size: 14px;
    text-align: center;
}
.qr-code-link img {
    margin-bottom: 10px;
}
@media screen and (max-width: 700px) {
    .about-page .container > .col {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .about-page .aside {
        flex: 1 1 !important;
        text-align: center;
        width: 100%;
    }
    .about-page .container.desktop-no-wrap > .col > .row.desktop-no-wrap > .col.grow {
        flex: 100%;
        width: 100%;
    }
    .about-page .donate {
        margin-bottom: var(--size-xlg);
    }
}
.donate {
    height: 150px;
    width: auto;
}
.helper-block {
    cursor: pointer;
    display: inline-block;
    margin-left: 5px;
}
.helper-block .helper-text {
    display: block;
    font-size: 0.9rem !important;
    font-weight: 400;
    height: 0;
    max-width: 250px;
    opacity: 0;
    overflow: hidden;
    position: relative;
    text-transform: none;
    visibility: hidden;
    width: 0;
}
.helper-block .helper-info {
    color: var(--primary-color);
    position: relative;
}
.helper-block .helper-info:hover:after {
    border: 7px solid #0000;
    border-bottom: 7px solid var(--dark-gray);
    content: "";
    height: 0;
    left: 2px;
    pointer-events: none;
    position: absolute;
    top: 12px;
    width: 0;
}
.helper-block .helper-info:hover + .helper-text {
    background-color: var(--dark-gray);
    border-radius: 0.25em;
    color: var(--off-white);
    font-size: var(--small-font-size);
    height: auto;
    line-height: 1.5;
    margin: 0.25em 0 0;
    opacity: 1;
    overflow: visible !important;
    padding: 10px;
    position: absolute;
    transition: opacity 0.5s ease;
    visibility: visible;
    width: 100%;
    z-index: 2;
}
.helper-block.right .helper-info:hover + .helper-text {
    right: -0.25em;
}
.helper-block.left .helper-info:hover + .helper-text {
    left: -0.25em;
}
.additional-patterns .pattern-block {
    --space-size: 1.45rem;
}
.additional-patterns h3 {
    margin: 0;
}
.additional-patterns h3 button {
    float: right;
}
.back-to-top {
    animation: bounce 1s infinite;
    border-radius: 100%;
    bottom: var(--size-xxlg);
    font-size: var(--size-xxlg);
    position: fixed;
    right: var(--size-xxlg);
}
.back-to-top a {
    background: #eee;
    display: block;
    padding: 0.25em 0.5em;
    text-decoration: none;
}
.hide {
    display: none !important;
}
.show {
    display: block;
}
[data-visibility="show"] {
    visibility: visible;
}
[data-visibility="hide"] {
    display: none !important;
    visibility: hidden;
}
[data-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.3;
    pointer-events: none;
}
.inline-block {
    display: inline-block;
}
.block {
    display: block;
}
.vertical-align-middle {
    vertical-align: middle;
}
.relative {
    position: relative;
}
.spacer {
    display: inline-block;
    padding: 0 0.5em;
}
.transparent-background {
    background: #0003;
}
.grow {
    flex-grow: 1;
}
.full-height {
    height: 100%;
}
.modal {
    --width: 400px;
    background: var(--background);
    box-shadow: 0 0 5px 1px #0006;
    color: var(--foreground);
    display: block;
    left: calc(50% - var(--width) / 2);
    margin: 0 auto;
    max-width: 90%;
    padding: var(--size-xxlg);
    position: fixed;
    text-align: center;
    top: 10%;
    white-space: pre-wrap;
    width: var(--width);
    z-index: 999;
}
.modal.large-modal {
    --width: 800px;
    top: 2%;
}
.modal .modal-content {
    height: 100%;
    position: relative;
    width: 100%;
}
.modal button:not([disabled]):hover {
    color: var(--primary-color) !important;
}
.modal .close-button {
    background: #0000;
    border: none;
    color: #fff;
    font-family: var(--body-font);
    font-size: 25px;
    position: absolute;
    right: 0;
    top: 0;
}
@media screen and (max-width: 700px) {
    .modal {
        left: 0;
        right: 0;
        top: unset;
        width: 90%;
    }
}
.modal-backdrop {
    background: #000000a6;
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 998;
}
.modal-backdrop:hover {
    cursor: pointer !important;
    pointer-events: none !important;
}
.flex {
    display: flex;
}
@media screen and (min-width: 816px) {
    .flex {
        display: block;
    }
}
.container {
    margin: 0 auto;
    width: 100%;
}
.row {
    align-content: stretch;
    align-items: stretch;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    width: 100%;
}
.row.vertical {
    flex-flow: column;
}
.row.vertical-row {
    display: inline-flex;
    flex: 1 1 20%;
    flex-flow: column nowrap;
}
.row.justify-center {
    justify-content: center;
}
.row.justify-start {
    justify-content: flex-start;
}
.row.justify-start > .col {
    flex: 0 1;
    white-space: nowrap;
}
.row.justify-end {
    justify-content: flex-end;
}
.row.justify-space-between {
    justify-content: space-between;
}
.row.align-stretch {
    align-items: stretch;
}
.row.align-start {
    align-items: flex-start;
}
.row.align-end {
    align-items: flex-end;
}
.row.align-center {
    align-items: center;
}
@media (max-width: 800px) {
    .row.small-align-start {
        align-items: start;
    }
}
.row.no-padding,
.row.no-padding .col {
    padding: 0;
}
.row.no-wrap {
    flex-wrap: nowrap;
}
.row.wrap {
    flex-wrap: wrap;
}
@media screen and (max-width: 700px) {
    .row.wrap > .col.colspan1,
    .row.wrap > .col.colspan10,
    .row.wrap > .col.colspan2,
    .row.wrap > .col.colspan3,
    .row.wrap > .col.colspan4,
    .row.wrap > .col.colspan5,
    .row.wrap > .col.colspan6,
    .row.wrap > .col.colspan7,
    .row.wrap > .col.colspan8,
    .row.wrap > .col.colspan9 {
        flex: 100%;
        max-width: 100% !important;
        padding: 0;
        width: 100% !important;
    }
}
.row.set-size > .col {
    flex-basis: 0;
}
.row.gutters-sm {
    gap: 0.25rem;
}
.row.gutters-md {
    gap: 0.5rem;
}
.row.gutters-lg {
    gap: 1rem;
}
.row.gutters-xlg {
    gap: 1.25rem;
}
.row.gutters-xxlg {
    gap: 1.5rem;
}
.row > .col {
    flex: 1 1 auto;
}
.row > .col.full-width {
    flex: 1 0 100%;
    width: 100%;
}
.row > .col.shrink {
    flex: 0 1;
}
.row > .col.grow {
    flex: 1 0;
}
.row > .col.auto {
    flex: auto;
    flex-basis: min-content;
}
.row > .col.no-wrap {
    flex-wrap: nowrap;
}
.row > .col.stretch {
    align-self: stretch;
}
.row > .col.colspan1,
.row > .col.colspan10,
.row > .col.colspan2,
.row > .col.colspan3,
.row > .col.colspan4,
.row > .col.colspan5,
.row > .col.colspan6,
.row > .col.colspan7,
.row > .col.colspan8,
.row > .col.colspan9 {
    flex: 1 1;
}
.row > .col.colspan1 {
    max-width: calc(var(--single-col-width) * 1);
    width: calc(var(--single-col-width) * 1);
}
.row > .col.colspan2 {
    max-width: calc(var(--single-col-width) * 2);
    width: calc(var(--single-col-width) * 2);
}
.row > .col.colspan3 {
    max-width: calc(var(--single-col-width) * 3);
    width: calc(var(--single-col-width) * 3);
}
.row > .col.colspan4 {
    max-width: calc(var(--single-col-width) * 4);
    width: calc(var(--single-col-width) * 4);
}
.row > .col.colspan5 {
    max-width: calc(var(--single-col-width) * 5);
    width: calc(var(--single-col-width) * 5);
}
.row > .col.colspan6 {
    max-width: calc(var(--single-col-width) * 6);
    width: calc(var(--single-col-width) * 6);
}
.row > .col.colspan7 {
    max-width: calc(var(--single-col-width) * 7);
    width: calc(var(--single-col-width) * 7);
}
.row > .col.colspan8 {
    max-width: calc(var(--single-col-width) * 8);
    width: calc(var(--single-col-width) * 8);
}
.row > .col.colspan9 {
    max-width: calc(var(--single-col-width) * 9);
    width: calc(var(--single-col-width) * 9);
}
.row > .col.colspan10 {
    max-width: calc(var(--single-col-width) * 10);
    width: calc(var(--single-col-width) * 10);
}
.no-padding {
    padding: 0;
}
.padding-sm {
    padding: var(--size-sm);
}
.padding-md {
    padding: var(--size-md);
}
.padding-lg {
    padding: var(--size-lg);
}
.padding-xlg {
    padding: var(--size-xlg);
}
.padding-xxlg {
    padding: var(--size-xxlg);
}
.padding-top-none {
    padding-top: 0;
}
.padding-top-sm {
    padding-top: var(--size-sm);
}
.padding-top-md {
    padding-top: var(--size-md);
}
.padding-top-lg {
    padding-top: var(--size-lg);
}
.padding-top-xlg {
    padding-top: var(--size-xlg);
}
.padding-top-xxlg {
    padding-top: var(--size-xxlg);
}
.padding-bottom-none {
    padding-bottom: 0;
}
.padding-bottom-sm {
    padding-bottom: var(--size-sm);
}
.padding-bottom-md {
    padding-bottom: var(--size-md);
}
.padding-bottom-lg {
    padding-bottom: var(--size-lg);
}
.padding-bottom-xlg {
    padding-bottom: var(--size-xlg);
}
.padding-bottom-xxlg {
    padding-bottom: var(--size-xxlg);
}
.padding-left-none {
    padding-left: 0;
}
.padding-left-sm {
    padding-left: var(--size-sm);
}
.padding-left-md {
    padding-left: var(--size-md);
}
.padding-left-lg {
    padding-left: var(--size-lg);
}
.padding-left-xlg {
    padding-left: var(--size-xlg);
}
.padding-left-xxlg {
    padding-left: var(--size-xxlg);
}
.padding-right-none {
    padding-right: 0;
}
.padding-right-sm {
    padding-right: var(--size-sm);
}
.padding-right-md {
    padding-right: var(--size-md);
}
.padding-right-lg {
    padding-right: var(--size-lg);
}
.padding-right-xlg {
    padding-right: var(--size-xlg);
}
.padding-right-xxlg {
    padding-right: var(--size-xxlg);
}
.padding-horizontal-none {
    padding-left: 0;
    padding-right: 0;
}
.padding-horizontal-sm {
    padding-left: var(--size-sm);
    padding-right: var(--size-sm);
}
.padding-horizontal-md {
    padding-left: var(--size-md);
    padding-right: var(--size-md);
}
.padding-horizontal-lg {
    padding-left: var(--size-lg);
    padding-right: var(--size-lg);
}
.padding-horizontal-xlg {
    padding-left: var(--size-xlg);
    padding-right: var(--size-xlg);
}
.padding-horizontal-xxlg {
    padding-left: var(--size-xxlg);
    padding-right: var(--size-xxlg);
}
.padding-vertical-none {
    padding-bottom: 0;
    padding-top: 0;
}
.padding-vertical-sm {
    padding-bottom: var(--size-sm);
    padding-top: var(--size-sm);
}
.padding-vertical-md {
    padding-bottom: var(--size-md);
    padding-top: var(--size-md);
}
.padding-vertical-lg {
    padding-bottom: var(--size-lg);
    padding-top: var(--size-lg);
}
.padding-vertical-xlg {
    padding-bottom: var(--size-xlg);
    padding-top: var(--size-xlg);
}
.padding-vertical-xxlg {
    padding-bottom: var(--size-xxlg);
    padding-top: var(--size-xxlg);
}
.no-margin {
    margin: 0;
}
.margin-sm {
    margin: var(--size-sm);
}
.margin-md {
    margin: var(--size-md);
}
.margin-lg {
    margin: var(--size-lg);
}
.margin-xlg {
    margin: var(--size-xlg);
}
.margin-xxlg {
    margin: var(--size-xxlg);
}
.margin-top-none {
    margin-top: 0;
}
.margin-top-sm {
    margin-top: var(--size-sm);
}
.margin-top-md {
    margin-top: var(--size-md);
}
.margin-top-lg {
    margin-top: var(--size-lg);
}
.margin-top-xlg {
    margin-top: var(--size-xlg);
}
.margin-top-xxlg {
    margin-top: var(--size-xxlg);
}
.margin-bottom-none {
    margin-bottom: 0;
}
.margin-bottom-sm {
    margin-bottom: var(--size-sm);
}
.margin-bottom-md {
    margin-bottom: var(--size-md);
}
.margin-bottom-lg {
    margin-bottom: var(--size-lg);
}
.margin-bottom-xlg {
    margin-bottom: var(--size-xlg);
}
.margin-bottom-xxlg {
    margin-bottom: var(--size-xxlg);
}
.margin-left-none {
    margin-left: 0;
}
.margin-left-sm {
    margin-left: var(--size-sm);
}
.margin-left-md {
    margin-left: var(--size-md);
}
.margin-left-lg {
    margin-left: var(--size-lg);
}
.margin-left-xlg {
    margin-left: var(--size-xlg);
}
.margin-left-xxlg {
    margin-left: var(--size-xxlg);
}
.margin-right-none {
    margin-right: 0;
}
.margin-right-sm {
    margin-right: var(--size-sm);
}
.margin-right-md {
    margin-right: var(--size-md);
}
.margin-right-lg {
    margin-right: var(--size-lg);
}
.margin-right-xlg {
    margin-right: var(--size-xlg);
}
.margin-right-xxlg {
    margin-right: var(--size-xxlg);
}
.margin-horizontal-auto {
    margin-left: auto;
    margin-right: auto;
}
.margin-horizontal-none {
    margin-left: 0;
    margin-right: 0;
}
.margin-horizontal-sm {
    margin-left: var(--size-sm);
    margin-right: var(--size-sm);
}
.margin-horizontal-md {
    margin-left: var(--size-md);
    margin-right: var(--size-md);
}
.margin-horizontal-lg {
    margin-left: var(--size-lg);
    margin-right: var(--size-lg);
}
.margin-horizontal-xlg {
    margin-left: var(--size-xlg);
    margin-right: var(--size-xlg);
}
.margin-horizontal-xxlg {
    margin-left: var(--size-xxlg);
    margin-right: var(--size-xxlg);
}
.margin-vertical-none {
    margin-bottom: 0;
    margin-top: 0;
}
.margin-vertical-sm {
    margin-bottom: var(--size-sm);
    margin-top: var(--size-sm);
}
.margin-vertical-md {
    margin-bottom: var(--size-md);
    margin-top: var(--size-md);
}
.margin-vertical-lg {
    margin-bottom: var(--size-lg);
    margin-top: var(--size-lg);
}
.margin-vertical-xlg {
    margin-bottom: var(--size-xlg);
    margin-top: var(--size-xlg);
}
.margin-vertical-xxlg {
    margin-bottom: var(--size-xxlg);
    margin-top: var(--size-xxlg);
}
@media screen and (min-width: 700px) {
    .desktop-no-margin {
        margin: 0;
    }
    .desktop-no-horizontal-padding {
        padding-left: 0;
        padding-right: 0;
    }
    .desktop-no-vertical-padding {
        padding-bottom: 0;
        padding-top: 0;
    }
    .desktop-no-wrap {
        flex-wrap: nowrap;
    }
    .desktop-force-wrap {
        flex-wrap: wrap;
    }
}
@media screen and (min-width: 535px) and (max-width: 1024px) {
    .small-order-1 {
        order: 1;
    }
    .small-order-2 {
        order: 2;
    }
    .small-order-3 {
        order: 3;
    }
    .small-order-4 {
        order: 4;
    }
    .small-order-5 {
        order: 5;
    }
    .small-vertical {
        flex-flow: column;
    }
    .small-wrap {
        flex-wrap: wrap !important;
    }
    .small-half-width {
        flex: 1 1 48% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
    .small-full-width {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}
@media screen and (max-width: 535px) {
    .x-small-order-1 {
        order: 1;
    }
    .x-small-order-2 {
        order: 2;
    }
    .x-small-order-3 {
        order: 3;
    }
    .x-small-order-4 {
        order: 4;
    }
    .x-small-order-5 {
        order: 5;
    }
}
@media screen and (max-width: 700px) {
    .mobile-no-margin {
        margin: 0;
    }
    .mobile-no-horizontal-padding {
        padding-left: 0;
        padding-right: 0;
    }
    .mobile-no-vertical-padding {
        padding-bottom: 0;
        padding-top: 0;
    }
    .mobile-no-wrap {
        flex-wrap: nowrap;
    }
    .mobile-force-wrap {
        flex-wrap: wrap;
    }
}
@font-face {
    font-display: swap;
    font-family: Digital;
    font-style: normal;
    font-weight: 400;
    src: url(4eed57244bb0a0bd583d.woff) format("woff");
}
@font-face {
    font-display: swap;
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    src: url(774f99460b8c31560a3c.woff);
}
@font-face {
    font-display: swap;
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    src: url(75a1a5b5582b236e0fe3.woff);
}
@font-face {
    font-display: swap;
    font-family: Roboto Condensed;
    font-style: normal;
    font-weight: 400;
    src: url(490215d707d82e737710.woff);
}
@font-face {
    font-display: swap;
    font-family: Roboto Condensed;
    font-style: normal;
    font-weight: 600;
    src: url(309d82ce4277ce12d432.woff);
}
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--heading-font);
    margin-bottom: 12px;
    margin-top: 0;
}
h1 {
    font-size: 2rem;
}
h2 {
    font-size: 1.6rem;
}
h3 {
    font-size: 1.4rem;
}
h4 {
    font-size: 1.2rem;
}
.h6,
h5,
h6 {
    font-size: 1rem;
}
p {
    line-height: 150%;
    white-space: pre-wrap;
}
.dark-text {
    color: var(--dark-gray);
}
.warning-text {
    color: var(--yellow);
}
.h6,
.uppercase-text-small,
h6 {
    color: var(--off-white);
    display: block;
    font-family: var(--condensed-font);
    font-weight: 400;
    line-height: 2;
    text-align: center;
    text-transform: uppercase;
}
.h6,
.uppercase-text-small,
footer,
h6 {
    font-size: var(--small-font-size);
}
.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.text-justify {
    text-align: justify;
}
.uppercase {
    text-transform: uppercase;
}
.italic {
    font-style: italic;
}
.medium-text {
    font-size: var(--size-xlg);
    line-height: 1.5;
}
.small-text,
.small-text * {
    font-size: 0.9rem !important;
    line-height: 1.5;
}
.x-small-text,
.x-small-text * {
    font-size: 0.8rem !important;
    line-height: 1.25;
}
.no-text-wrap {
    white-space: nowrap;
}
.wrap-text {
    white-space: normal !important;
}
ol,
ul {
    padding-inline-start: 24px;
}
ol li,
ul li {
    line-height: 1.5;
}
.new {
    background: var(--accent-background);
    border-radius: 0.5rem;
    color: var(--accent-foreground);
    display: inline-block;
    font-size: var(--small-font-size);
    line-height: 1rem;
    margin-right: 0.25rem;
    padding: 0.25rem 0.75rem;
    vertical-align: middle;
}
code {
    border-radius: 3px;
    line-height: 2;
    padding: 0.2em 0.5em;
}
code,
pre.code-snippet {
    background: var(--light-gray);
    color: var(--dark-gray);
    font-size: 0.8rem;
}
pre.code-snippet {
    border-radius: var(--input-border-radius);
    line-height: 1.6;
    margin: 0 0 var(--size-xlg);
    overflow-x: auto;
    padding: var(--size-xlg);
    white-space: pre;
}
pre.code-snippet code {
    background: none;
    border-radius: 0;
    line-height: inherit;
    padding: 0;
}
@keyframes blink {
    0% {
        color: #ffffff1a;
    }
    25% {
        color: #ffffff80;
    }
    50% {
        color: #fff;
    }
    75% {
        color: #ffffff80;
    }
    to {
        color: #ffffff1a;
    }
}
@keyframes blink-reverse {
    0% {
        color: #0000001a;
    }
    25% {
        color: #00000080;
    }
    50% {
        color: var(--dark-gray);
    }
    75% {
        color: #00000080;
    }
    to {
        color: #0000001a;
    }
}
@keyframes countdown {
    0% {
        color: #0000;
    }
    25% {
        color: var(--primary-color);
    }
    75% {
        color: var(--primary-color);
    }
    to {
        color: #0000;
    }
}
@keyframes countdown-rainbow {
    0% {
        color: #0000;
    }
    14% {
        color: var(--red);
    }
    28% {
        color: var(--orange);
    }
    42% {
        color: var(--yellow);
    }
    56% {
        color: var(--green);
    }
    70% {
        color: var(--blue);
    }
    84% {
        color: var(--purple);
    }
    to {
        color: #0000;
    }
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(1turn);
    }
}
@keyframes bounce {
    0% {
        bottom: 2rem;
    }
    50% {
        bottom: 2.5rem;
    }
    to {
        bottom: 2rem;
    }
}
@keyframes rainbowGradient {
    0% {
        fill: var(--white);
    }
    14% {
        fill: var(--red);
    }
    28% {
        fill: var(--orange);
    }
    42% {
        fill: var(--yellow);
    }
    56% {
        fill: var(--green);
    }
    70% {
        fill: var(--blue);
    }
    84% {
        fill: var(--purple);
    }
}
@keyframes rainbowGradientColor {
    0% {
        color: var(--red);
    }
    16% {
        color: var(--orange);
    }
    33% {
        color: var(--yellow);
    }
    50% {
        color: var(--green);
    }
    67% {
        color: var(--blue);
    }
    83% {
        color: var(--purple);
    }
}
a {
    color: var(--link-color);
    transition: var(--ease-transition);
}
a:hover {
    color: var(--link-color-hover);
}
.primary-button,
.secondary-button,
button {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: #0000;
    border: var(--input-border);
    border-radius: var(--input-border-radius);
    color: var(--primary-button-text-color);
    cursor: pointer;
    font-family: var(--condensed-font);
    font-size: var(--button-font-size);
    font-weight: 500;
    padding: var(--size-md) var(--size-lg);
    text-transform: uppercase;
    transition: var(--ease-transition);
}
.primary-button:active,
.primary-button:focus,
.primary-button:hover,
.secondary-button:active,
.secondary-button:focus,
.secondary-button:hover,
button:active,
button:focus,
button:hover {
    border: var(--input-border-hover);
    color: var(--primary-button-text-color);
    cursor: pointer;
}
.primary-button:disabled,
.secondary-button:disabled,
button:disabled {
    color: var(--gray) !important;
    cursor: not-allowed;
}
.primary-button svg,
.secondary-button svg,
button svg {
    display: flex;
}
.primary-button:hover,
.secondary-button:hover,
button:hover {
    color: var(--primary-button-text-color);
}
a.primary-button,
button.primary-button {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    font-weight: 400;
    text-decoration: none;
}
a.primary-button:hover,
button.primary-button:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--primary-button-text-color);
}
a.secondary-button,
button.secondary-button {
    background-color: #0000001a;
    border-color: var(--white);
    text-decoration: none;
}
a.secondary-button:hover,
button.secondary-button:hover {
    background-color: #0003;
    border-color: var(--secondary-color);
}
a.cancel-button,
button.cancel-button {
    background-color: #0000001a;
    border-color: #0000;
    color: var(--light-gray);
    text-decoration: none;
}
a.cancel-button:hover,
button.cancel-button:hover {
    border-color: var(--secondary-color);
}
a:disabled,
a:disabled:hover,
button:disabled,
button:disabled:hover {
    background-color: #0000001a;
    border-color: #0000;
    color: var(--med-gray);
}
a:disabled.toggle,
a:disabled:hover.toggle,
button:disabled.toggle,
button:disabled:hover.toggle {
    background-color: #0000 !important;
    opacity: 0.5 !important;
}
a.close-button,
button.close-button {
    color: var(--primary-color);
}
a.close-button:hover,
button.close-button:hover {
    color: var(--secondary-color);
}
a.small-button,
button.small-button {
    background-color: var(--primary-color);
    border: none;
    font-size: 0.75rem;
    padding: 0.5em 1em;
    text-decoration: none;
    vertical-align: middle;
}
a.small-button:hover,
button.small-button:hover {
    background-color: var(--secondary-color);
    border: none;
    color: var(--foreground);
}
a.reset-button,
button.reset-button {
    background-color: red;
    border-color: red;
    color: #fff;
}
button.text-button,
p button {
    background: #0000;
    border: none;
    color: var(--primary-color);
    font-family: inherit;
    font-size: inherit;
    margin: 0;
    padding: 0 0.5em;
    text-transform: inherit;
}
label.secondary-button {
    display: inline-block;
}
label {
    font-weight: 600;
    text-transform: uppercase;
}
input,
label,
select,
textarea {
    display: block;
    font-family: var(--condensed-font);
}
input,
select,
textarea {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: var(--white);
    border: var(--input-border);
    border-radius: var(--input-border-radius);
    color: var(--dark-gray);
    cursor: pointer;
    font-size: var(--base-font-size);
    margin: 0.25em 0;
    padding: 0.5em 1em;
    transition: var(--ease-transition);
    width: 100%;
}
input[type="text"],
input[type="text"]:hover,
select[type="text"],
select[type="text"]:hover,
textarea[type="text"],
textarea[type="text"]:hover {
    cursor: text;
}
input *,
select *,
textarea * {
    font-family: var(--condensed-font);
}
input::placeholder,
select::placeholder,
textarea::placeholder {
    color: var(--med-gray);
}
input:hover,
select:hover,
textarea:hover {
    border: var(--input-border-hover);
    cursor: pointer;
}
input:active,
select:active,
textarea:active {
    border: var(--input-border-active);
}
input:focus,
select:focus,
textarea:focus {
    border: var(--input-border-focus);
}
input:disabled,
select:disabled,
textarea:disabled {
    border: var(--input-border-disabled);
    color: var(--gray) !important;
    cursor: not-allowed;
}
textarea {
    cursor: text !important;
}
button.option {
    display: block;
    height: auto;
    white-space: pre-wrap;
}
form {
    background-color: var(--accent-background);
    border-radius: 5px;
    padding: var(--size-xxlg);
}
form.pattern-form-inner {
    background-color: #0000;
    padding: 0;
}
form input,
form input:hover,
form textarea,
form textarea:hover {
    cursor: text;
}
form textarea {
    min-height: 200px;
}
.pattern-form {
    background-color: var(--near-black);
    border-radius: 5px;
    padding: var(--size-xxlg);
}
.pattern-form .pattern-block .pattern-display .row .col:not(.pattern-letter) span {
    transition: all 0.5s ease;
}
.pattern-form .pattern-block .pattern-display .row .col:not(.pattern-letter) span:hover {
    background-color: var(--focus-color);
    color: #0000;
}
.pattern-form .error {
    border: 2px dotted var(--light-red);
    font-size: 0.8em;
    line-height: 2;
    padding: 0.5em;
    white-space: pre;
}
.pattern-form .detail {
    color: var(--focus-color);
    font-size: 0.8em;
    white-space: normal;
}
.dropdown-group {
    max-width: 100%;
}
.dropdown-group,
.dropdown-group .dropdown-control {
    position: relative;
}
.dropdown-group .dropdown-control .dropdown-trigger {
    background: #fff;
    border: none;
    bottom: 4px;
    color: var(--dark-gray);
    margin: 0;
    max-width: 30px;
    padding: 5px;
    position: absolute;
    right: 8px;
    top: 4px;
}
.dropdown-group label {
    justify-content: space-between;
    width: 100%;
}
.dropdown-group .dropdown {
    margin-top: -4px;
    max-height: 0;
    position: absolute;
    transition: var(--ease-transition);
    width: 100%;
    z-index: 4;
}
.dropdown-group .dropdown.open {
    background: var(--white);
    border: var(--input-border-focus);
    border-radius: var(--input-border-radius);
    max-height: 150px;
    min-height: 32px;
    overflow-y: auto;
    padding: 5px;
}
.dropdown-group .dropdown.closed {
    overflow-y: hidden;
    visibility: hidden;
}
.dropdown-group .dropdown button {
    background: #0000;
    border: none;
    border-radius: 0;
    color: var(--dark-gray);
    display: block;
    font-family: inherit;
    font-family: var(--condensed-font);
    font-size: inherit;
    margin: 0;
    padding: 5px;
    text-align: left;
    text-transform: inherit;
    width: 100%;
}
.dropdown-group .dropdown button.focused,
.dropdown-group .dropdown button:hover {
    background: var(--accent-background);
    color: var(--accent-foreground);
}
.dropdown-group .dropdown button.focused {
    outline: 2px solid var(--accent-foreground);
    outline-offset: -2px;
}
button.dropdown-reset,
button.shuffle,
label button.dropdown-reset,
label button.shuffle {
    border: none;
    margin-left: 0.25em;
    padding: 0 0.25em;
    transition: var(--ease-transition);
}
button.dropdown-reset:hover,
button.shuffle:hover,
label button.dropdown-reset:hover,
label button.shuffle:hover {
    color: var(--secondary-color);
}
button.dropdown-reset:focus,
button.shuffle:focus,
label button.dropdown-reset:focus,
label button.shuffle:focus {
    border: none !important;
}
label:has(:disabled):not(.range) .label-text {
    cursor: not-allowed;
    opacity: 0.5;
}
.toggle {
    border: none;
    color: var(--gray);
    margin-right: 0.5em;
    padding: 0;
    vertical-align: top;
    width: auto;
}
.toggle i {
    font-size: var(--icon-size);
}
.toggle:active,
.toggle:hover {
    border: none;
}
.toggle:focus {
    border: none !important;
}
.toggle:focus,
.toggle:focus * {
    color: var(--focus-color) !important;
}
.toggle.active {
    border: none;
    color: var(--primary-color);
}
.range.disabled .label-text,
.range.disabled .range-controls {
    opacity: 0.5;
}
.range.disabled:hover .label-text,
.range.disabled:hover .range-controls {
    cursor: not-allowed;
}
.range .range-value {
    color: var(--settings-value-color);
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 0 1rem;
    text-transform: uppercase;
}
.range .range-controls {
    align-items: center;
    display: flex;
    justify-content: space-between;
    max-width: 100%;
    padding-top: 14px;
    width: 250px;
}
.range .range-controls .range-buttons {
    align-items: center;
    display: flex;
    flex: 1 0;
}
.range .range-controls .range-buttons div {
    flex: 0 1 auto;
}
.range .range-controls .range-buttons div.range-input {
    flex: 1 0 auto;
}
.range .range-controls .range-buttons div.range-input input {
    border: none;
    margin: -2px 0 0;
}
.range .range-controls .range-buttons div button {
    border: none;
    color: var(--primary-color);
    font-size: 24px;
    padding: 0;
    text-align: center;
    transition: var(--ease-transition);
}
.range .range-controls .range-buttons div button:focus {
    border: none !important;
    color: var(--focus-color) !important;
}
.range .range-controls .range-buttons div button:focus * {
    color: var(--focus-color) !important;
}
.range .range-controls .range-buttons div button:hover {
    color: var(--secondary-color);
}
.range .range-controls .range-buttons div button:disabled {
    background: #0000;
}
.range input[type="range"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: #0000;
    height: 0;
    width: 100%;
}
.range input[type="range"]::-webkit-slider-runnable-track {
    background: #0000;
    border-radius: 3px;
    border-top: 3px solid var(--gray);
    height: 0;
}
.range input[type="range"]::-webkit-slider-thumb {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: var(--primary-color);
    border-radius: 100%;
    cursor: pointer;
    height: 15px;
    margin-top: -9px;
    transition: var(--ease-transition);
    width: 15px;
    z-index: 2;
}
.range input[type="range"]:active::-webkit-slider-thumb {
    transform: scale(1.5);
}
.range input[type="range"]:focus {
    border: none !important;
}
.range input[type="range"]:focus,
.range input[type="range"]:focus * {
    color: var(--focus-color) !important;
}
.range input[type="range"]::-ms-track {
    background: #0000;
    border-color: #0000;
    color: #0000;
    cursor: pointer;
    width: 100%;
}
.switch-group {
    margin-top: 3px;
}
.switch-group button {
    border-radius: 0;
    border-style: solid;
    border-left: none;
    border-right: none;
    margin: 0;
}
.switch-group button:hover {
    border-color: var(--primary-color);
}
.switch-group button:hover:first-of-type {
    border-left: var(--input-border-hover);
}
.switch-group button:hover:last-of-type {
    border-right: var(--input-border-hover);
}
.switch-group button:first-of-type {
    border-bottom-left-radius: var(--input-border-radius);
    border-left: var(--input-border-solid);
    border-top-left-radius: var(--input-border-radius);
}
.switch-group button:last-of-type {
    border-bottom-right-radius: var(--input-border-radius);
    border-right: var(--input-border-solid);
    border-top-right-radius: var(--input-border-radius);
}
.switch-group button.selected {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}
.button-group {
    display: flex;
    gap: 1rem;
}
.button-group.base button,
.button-group.base button:active,
.button-group.base button:disabled,
.button-group.base button:focus,
.button-group.base button:hover {
    border: none;
    padding: 0;
}
.button-group.base button {
    color: var(--primary-color);
}
.button-group.base button:active {
    color: var(--secondary-color);
}
.dropdown-group label,
.label-text,
span.h6 {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}
.light-scheme .skip-on svg {
    fill: #000;
}
.dark-scheme .skip-on svg {
    fill: #fff;
}
.pattern .skip-on {
    position: absolute;
}
.cmp-prize {
    align-items: center;
    color: var(--focus-color);
    display: flex;
    font-size: clamp(1rem, 3vw, 3rem);
    gap: 0.5rem;
    justify-content: center;
    justify-items: center;
    margin: 0.5rem auto;
    padding: 0.5rem 1rem;
}
.home-link a {
    display: block;
}
.ball-display.no-letters .ball-content .ball-letter {
    display: none !important;
}
.pattern-block .pattern-name {
    font-size: clamp(0.7rem, 1vw, 1rem) !important;
    text-transform: uppercase;
}
.space-between {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
main.classic .cmp-current-call > div,
main.classic .countdown,
main.classic .current-call-block,
main.classic .previous-call-block,
main.classic-reverse .cmp-current-call > div,
main.classic-reverse .countdown,
main.classic-reverse .current-call-block,
main.classic-reverse .previous-call-block {
    align-content: center;
    height: 100%;
}
main.classic .current-call-block,
main.classic-reverse .current-call-block {
    padding: var(--size-xlg);
}
main.classic .previous-call-block,
main.classic-reverse .previous-call-block {
    display: flex;
    flex-wrap: wrap;
    padding: var(--size-lg);
}
main.classic .previous-call-block.no-calls .logo,
main.classic-reverse .previous-call-block.no-calls .logo {
    display: block;
    height: 8rem;
    margin: 0 auto;
}
main.classic .show-call-history,
main.classic-reverse .show-call-history {
    font-weight: 700;
    text-align: center;
    width: 100%;
}
main.easy-view .home-link .logo {
    max-height: 3.5rem;
}
main.easy-view .home-link .logo .logo-color {
    fill: var(--accent-foreground);
}
main.easy-view .call-info {
    min-width: unset;
}
main.easy-view .cmp-current-call .current-call-block {
    height: 100%;
    padding: 1rem 1rem 0.5rem;
}
main.easy-view .cmp-current-call .current-call-block .current-call {
    margin: 0 auto;
}
main.easy-view .cmp-current-call .current-call-block .uppercase-text-small {
    margin-bottom: 0;
}
main.easy-view .cmp-previous-calls .previous-call-block {
    align-content: space-between;
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    height: 100%;
    justify-content: center;
    padding: 1.5rem 1rem 0.5rem;
}
main.easy-view .cmp-previous-calls .previous-call-block .uppercase-text-small,
main.easy-view .cmp-prize {
    margin-bottom: 0;
}
main.easy-view .cmp-pattern {
    align-content: center;
    padding: 0 1rem;
}
main.easy-view .cmp-pattern .pattern-block {
    --space-size: clamp(1rem, 1.75vw, 2rem);
}
main.easy-view .space-between {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
main.easy-view .countdown .tick {
    font-size: clamp(1rem, 5vw, 5rem);
}
main.easy-view.mobile .countdown .tick,
main.easy-view.x-small .countdown .tick {
    font-size: clamp(2rem, 8vw, 5rem);
}
main.easy-view.small .current-call {
    --ball-size: clamp(7rem, 9vw, 12rem) !important;
}
main.easy-view.small .cmp-prize {
    font-size: clamp(2rem, 5vw, 5rem);
}
main.easy-view.small .countdown .tick {
    font-size: clamp(3rem, 10vw, 5rem);
}
main.legacy-edition {
    padding: 0;
}
main.legacy-edition .home-link .logo {
    max-height: 2.75rem;
}
main.legacy-edition .transparent-background {
    background: #0000;
}
main.legacy-edition .main-block {
    padding: 1rem;
}
main.legacy-edition .bingo-board {
    --board-font-size: clamp(1.25rem, 3vw, 2.25rem);
}
main.legacy-edition .current-call-block .uppercase-text-small.margin-vertical-lg {
    display: none;
}
main.legacy-edition .current-call-block .current-call {
    --ball-size: clamp(7rem, 10vw, 10rem);
    margin: 1rem auto 0;
}
main.legacy-edition .current-call-number {
    color: var(--focus-color);
}
main.legacy-edition .control-bar {
    background: var(--secondary-color);
}
main.legacy-edition .previous-call-block .previous-call {
    --ball-size: clamp(4rem, 6vw, 9rem);
}
main.legacy-edition .previous-call-block button.text-button {
    color: var(--focus-color);
    font-family: var(--condensed-font);
    font-size: 0.7rem;
    font-weight: 600;
    margin: 1em auto;
}
main.legacy-edition .pattern {
    padding-right: 2rem;
}
main.legacy-edition .pattern-block {
    --space-size: 1.5rem;
}
main.legacy-edition .countdown {
    margin-top: 1rem;
}
main.legacy-edition .countdown.countdown-horizontal span {
    margin: 0 0.25rem;
}
main.legacy-edition .donate {
    height: 6rem;
}
main.legacy-edition .control-bar {
    --primary-button-text-color: var(--white);
}
main.legacy-edition .control-bar button.cancel-button,
main.legacy-edition .control-bar button.cancel-button:hover,
main.legacy-edition .control-bar button.primary-button,
main.legacy-edition .control-bar button.primary-button:hover,
main.legacy-edition .control-bar button.secondary-button,
main.legacy-edition .control-bar button.secondary-button:hover,
main.legacy-edition .control-bar button.toggle,
main.legacy-edition .control-bar button.toggle:disabled,
main.legacy-edition .control-bar button.toggle:disabled:hover,
main.legacy-edition .control-bar button.toggle:hover {
    color: var(--white) !important;
}
main.legacy-edition .control-bar .label-text {
    color: #fff !important;
}
@media (max-width: 800px) {
    main.legacy-edition .controls {
        max-width: 100%;
        min-width: 20rem;
    }
    main.legacy-edition .controls .horizontal {
        flex-wrap: wrap;
        gap: 1%;
    }
}
.body-container:has(main.ninety-ball) header .home-link .logo .logo-color {
    fill: var(--white) !important;
}
main.ninety-ball .call-info .digital-display {
    min-width: unset;
}
main.ninety-ball .cmp-current-call .current-call-block,
main.ninety-ball .cmp-previous-calls .previous-call-block {
    padding: 1rem;
}
main.ninety-ball .cmp-countdown {
    height: 100%;
}
main.ninety-ball .cmp-countdown:has(.cmp-prize) {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
}
main.ninety-ball .cmp-countdown:has(.cmp-prize) .countdown .tick {
    font-size: 3.5rem;
}
main.ninety-ball .cmp-countdown:has(.cmp-prize) .countdown span {
    line-height: 1;
}
main.ninety-ball .countdown,
main.ninety-ball .current-call-block,
main.ninety-ball .previous-call-block {
    align-content: center;
    height: 100%;
}
main.ninety-ball .previous-call-block {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
main.ninety-ball .prev-call-link {
    height: auto !important;
}
main.ninety-ball .prev-call-link .show-call-history {
    font-weight: 700;
    text-align: center;
    width: 100%;
}
main.ninety-ball .controls > div {
    display: flex;
    flex-wrap: wrap;
    padding-top: 0.5rem;
}
main.ninety-ball .controls > div button.cancel-button,
main.ninety-ball .controls > div button.primary-button,
main.ninety-ball .controls > div button.secondary-button {
    display: block;
    font-size: 0.8rem;
    line-height: 1;
    margin: 1%;
    width: 48%;
}
main.ninety-ball .controls > div button.cancel-button {
    background: #0000001a;
}
main.ninety-ball .modal .no-text-wrap button {
    display: block !important;
    margin-top: 1rem !important;
    width: 100% !important;
}
main.ninety-ball.mobile .controls button,
main.ninety-ball.small .controls button,
main.ninety-ball.x-small .controls button {
    display: block !important;
    margin-bottom: 1rem !important;
    width: 100% !important;
}
main.simple .home-link .logo {
    max-height: 4.5rem;
    min-height: 2.5rem;
}
main.simple .call-info {
    --digital-font-size: 3.5rem;
    margin: 1rem auto;
}
main.simple .call-info .uppercase-text-small {
    line-height: 1.25;
    margin: 0.5em 0;
    white-space: nowrap;
}
main.simple .current-call {
    margin: 1rem auto 0;
}
main.simple .current-call-block .uppercase-text-small.margin-vertical-lg {
    margin: 0.5rem 0 0;
}
main.simple .previous-call-block {
    margin-top: 1rem;
    padding-top: 1rem;
}
main.simple .previous-call-block button.text-button {
    color: var(--focus-color);
    font-family: var(--condensed-font);
    font-size: 0.7rem;
    font-weight: 600;
    margin: 1em auto;
}
main.simple .pattern-block {
    --space-size: 1.5rem;
}
@media (max-width: 800px) {
    main.simple .controls .horizontal {
        flex-wrap: wrap;
        gap: 1%;
    }
}
main.stacked .home-link .logo {
    min-width: 10rem;
}
main.stacked .call-info.vertical {
    min-width: unset;
}
main.stacked .pattern-block {
    margin-top: 0;
}
main.stacked .current-call-block,
main.stacked .previous-call-block {
    padding: 1rem;
}
main.stacked .current-call-block .current-call {
    --ball-size: clamp(6rem, 8vw, 10rem);
}
main.stacked .previous-call-block {
    display: flex;
    flex-flow: column;
}
main.stacked .previous-call-block .previous-call {
    --ball-size: clamp(3rem, 6vw, 8rem);
}
main.stacked .previous-call-block > .row:first-of-type {
    flex: 1 1;
    padding-bottom: 1rem;
}
main.stacked .uppercase-text-small.margin-vertical-lg {
    margin-bottom: 0;
}
main.stacked .cmp-countdown,
main.stacked .cmp-current-call {
    min-width: 8rem;
}
main.stacked .cmp-previous-calls:has(.show-call-history) {
    height: auto;
}
main.stacked .cmp-previous-calls:has(.show-call-history) .show-call-history {
    font-weight: 700;
}
main.stacked .cancel-button {
    background: #0000001a;
}
main.vertical .bingo-board {
    --board-font-size: clamp(1.75rem, 2vw, 5rem) !important;
    flex-flow: row;
    --board-line-height: 140%;
}
main.vertical .bingo-board-row {
    flex-basis: 20%;
    flex-direction: column;
}
main.vertical .bingo-board .bingo-board-ball,
main.vertical .bingo-board .bingo-board-letter {
    padding: 0 0.5em;
    width: 100%;
}
main.vertical .call-info {
    min-width: unset !important;
}
main.vertical .countdown {
    height: auto;
    margin: 1rem 0 0;
}
main.vertical .countdown .tick {
    font-size: clamp(4rem, 7vw, 10rem);
}
main.vertical .controls .horizontal {
    flex-wrap: wrap;
    gap: 1%;
}
main.vertical .previous-call-block {
    padding: 1rem;
}
main.vertical .previous-call-block > .row {
    align-items: center;
    flex-direction: column;
}
main.vertical .previous-call-block .previous-call {
    --ball-size: clamp(3.5rem, 6vw, 10rem);
}
main.vertical .previous-call-block h2.uppercase-text-small {
    display: flex;
    flex-direction: column;
    margin: 0.5rem 0 0;
}
main.vertical .current-call-block {
    margin-bottom: var(--size-xlg);
    padding: 1rem;
}
main.vertical .current-call-block .current-call {
    --ball-size: clamp(8rem, 10vw, 11rem);
}
main.vertical .current-call-block .uppercase-text-small.margin-vertical-lg {
    margin-bottom: 0;
}
main.vertical .cmp-previous-calls:has(.show-call-history) {
    height: auto;
}
main.vertical .cmp-previous-calls:has(.show-call-history) .show-call-history {
    font-weight: 700;
}
main.vertical .cancel-button {
    display: block;
    text-align: center;
    width: 100%;
}
main.vertical footer .row {
    text-align: left;
}
main.vertical.mobile .bingo-board,
main.vertical.small .bingo-board,
main.vertical.x-small .bingo-board {
    --board-font-size: clamp(1.25rem, 2.5vw, 5rem) !important;
}
main.vertical.mobile .logo,
main.vertical.small .logo,
main.vertical.x-small .logo {
    max-height: 4.75rem;
}
main.vertical.mobile .current-call-block .current-call,
main.vertical.small .current-call-block .current-call,
main.vertical.x-small .current-call-block .current-call {
    --ball-size: clamp(5rem, 8vw, 10rem);
}
main.vertical.mobile .call-info,
main.vertical.small .call-info,
main.vertical.x-small .call-info {
    --digital-font-size: clamp(1rem, 10vw, 4.5rem);
}
main.vertical.mobile .previous-call-block > .row,
main.vertical.small .previous-call-block > .row,
main.vertical.x-small .previous-call-block > .row {
    flex-direction: row;
}
.layout-gallery {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 2rem;
    margin-top: 1rem;
}
.layout-gallery .layout-card {
    background: #00000026;
    border: 3px solid #0000;
    border-radius: 8px;
    cursor: pointer;
    outline: none;
    overflow: hidden;
    transition:
        border-color 0.15s ease,
        transform 0.15s ease;
}
.layout-gallery .layout-card:hover {
    border-color: var(--focus-color);
    transform: translateY(-2px);
}
.layout-gallery .layout-card:focus-visible {
    border-color: var(--focus-color);
}
.layout-gallery .layout-card.selected {
    border-color: var(--focus-color);
}
.layout-gallery .layout-card .layout-card-image img {
    display: block;
    width: 100%;
}
.layout-gallery .layout-card .layout-card-info {
    padding: 0.75rem 1rem;
}
.layout-gallery .layout-card .layout-card-info h3 {
    font-size: 1rem;
    margin: 0 0 0.25rem;
}
.layout-gallery .layout-card .layout-card-info p {
    font-size: 0.875rem;
    line-height: 1.4;
    margin: 0;
    opacity: 0.8;
}
.current-call {
    --ball-size: clamp(5rem, 10vw, 12rem);
}
.previous-call {
    --ball-size: clamp(5rem, 8vw, 10rem);
}
.show-5 .previous-call {
    --ball-size: clamp(3rem, 7vw, 8rem);
}
.show-4 .previous-call {
    --ball-size: clamp(4rem, 7vw, 9rem);
}
.show-3 .previous-call {
    --ball-size: clamp(5rem, 9vw, 11rem);
}
.ball-history {
    max-height: 78vh;
    overflow: scroll;
}
.ball-history .ball-display-block .previous-call .ball-display {
    --ball-size: clamp(4.5rem, 6vw, 5rem) !important;
}
.ball-display {
    align-items: center;
    border-radius: 100%;
    box-shadow:
        inset 2rem 2rem 2rem 0.5rem #fff3,
        inset -1rem -1rem 2rem 0 #0006;
    display: flex;
    height: var(--ball-size);
    justify-content: center;
    margin: 0 auto;
    position: relative;
    width: var(--ball-size);
}
.ball-display:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}
.ball-display .content {
    background: var(--white);
    background: radial-gradient(circle at 20% 20%, var(--white), var(--light-gray));
    border-radius: 100%;
    box-shadow:
        inset -10px -10px 15px 0 #00000029,
        0 0 0 3px var(--white);
    color: var(--black);
    height: calc(var(--ball-size) - 40%);
    padding: 25%;
    position: relative;
    text-align: center;
    width: calc(var(--ball-size) - 40%);
}
.ball-display .content .ball-content {
    align-items: center;
    bottom: 0;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
}
.ball-display .content .ball-content .ball-letter,
.ball-display .content .ball-content .ball-number {
    display: block;
    font-family: var(--condensed-font);
    width: 100%;
}
.ball-display .content .ball-content .ball-letter {
    font-size: calc(var(--ball-size) * 0.175);
    font-weight: 600;
    line-height: 0.75;
}
.ball-display .content .ball-content .ball-number {
    font-size: calc(var(--ball-size) * 0.3);
    line-height: 1;
}
.ball-display .content .logo {
    max-width: 100%;
    padding: 5px;
}
.ball-display.blue {
    background: var(--ball-gradient-blue);
}
.ball-display.blue .content {
    border: 3px solid var(--ball-color-blue);
}
.ball-display.red {
    background: var(--ball-gradient-red);
}
.ball-display.red .content {
    border: 3px solid var(--ball-color-red);
}
.ball-display.white {
    background: var(--ball-gradient-white);
}
.ball-display.white .content {
    border: 3px solid var(--ball-color-red);
}
.ball-display.green {
    background: var(--ball-gradient-green);
}
.ball-display.green .content {
    border: 3px solid var(--ball-color-green);
}
.ball-display.yellow {
    background: var(--ball-gradient-yellow);
}
.ball-display.yellow .content {
    border: 3px solid var(--ball-color-yellow);
}
.menu-container {
    position: relative;
}
.menu-container .menu-dropdown {
    background: #fff;
    border-radius: 5px;
    box-shadow: var(--small-shadow);
    margin-top: 12px;
    min-width: 200px;
    padding: 0.5rem;
    position: absolute;
    right: -5px;
    transition: all 1s ease;
    white-space: nowrap;
    z-index: 4;
}
.menu-container .menu-dropdown ul.menu {
    display: block;
    font-family: var(--condensed-font);
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    transition: opacity 0.5s ease;
    transition-delay: 0.25s;
}
.menu-container .menu-dropdown ul.menu li {
    display: block;
    width: 100%;
}
.menu-container .menu-dropdown ul.menu li.separator {
    border-top: 2px dashed var(--light-gray);
}
.menu-container .menu-dropdown ul.menu li a {
    color: var(--dark-gray);
    display: block;
    font-weight: 600;
    padding: var(--size-md);
    text-decoration: none;
    transition: var(--ease-transition);
}
.menu-container .menu-dropdown ul.menu li a svg {
    color: var(--dark-gray);
    display: inline-flex;
    justify-content: center;
    line-height: 1;
    margin-bottom: 2px;
    margin-right: var(--size-md);
    transition: var(--ease-transition);
    vertical-align: middle;
    width: calc(var(--icon-size) + 10px);
}
.menu-container .menu-dropdown ul.menu li a.active,
.menu-container .menu-dropdown ul.menu li a.active svg,
.menu-container .menu-dropdown ul.menu li a:hover,
.menu-container .menu-dropdown ul.menu li a:hover svg {
    color: var(--primary-color);
}
.menu-container.open .menu-dropdown {
    overflow: visible;
}
.menu-container.open .menu-dropdown ul.menu {
    opacity: 1;
}
.menu-container.closed .menu-dropdown {
    max-height: 0;
    overflow: hidden;
    padding: 0;
    visibility: hidden;
}
.menu-container.closed .menu-dropdown ul.menu {
    opacity: 0;
}
.backdrop {
    background-color: #0000;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.backdrop.hide {
    display: none;
}
.pattern-block {
    --space-size: clamp(1rem, 2vw, 2rem);
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
}
.pattern-block .pattern-name {
    font-family: var(--condensed-font);
    font-size: 1rem;
    margin-top: 10px;
    text-align: center;
}
.pattern-block .other-names {
    display: block;
    font-size: 0.8em;
    font-style: italic;
}
.pattern-block .pattern-credit {
    color: var(--focus-color);
    font-size: 0.8em;
    margin: 5px auto 0;
    max-width: 150px;
}
.pattern-block .pattern-display {
    background-color: var(--card-background);
    border: 5px solid var(--card-border-color);
    border-radius: 5px;
    display: flex;
    flex: 0 1;
    margin: 0 auto;
}
.pattern-block .pattern-display .col:not(.pattern-letter):hover {
    cursor: default;
}
.pattern-block .pattern-display[data-color$="-screen"] .col:not(.pattern-letter):not(.selected) span {
    background-color: var(--screen-shaded-bg-color);
    border-radius: 0;
}
.pattern-block .pattern-display.editable .col:not(.pattern-letter):hover {
    cursor: pointer;
}
.pattern-block .pattern-display .row .col {
    height: var(--space-size);
    margin: 1px;
    overflow: hidden;
    padding: calc(var(--space-size) / 14) !important;
    width: var(--space-size);
}
.pattern-block .pattern-display .row .col span {
    border-radius: 100%;
    display: block;
    height: 100%;
    text-align: center;
    width: 100%;
}
.pattern-block .pattern-display .row .col span.free-space {
    color: var(--dark-gray);
    font-family: var(--condensed-font);
    font-size: calc(var(--space-size) / 3.5);
    font-weight: 600;
    line-height: 1.5;
    text-transform: uppercase;
    white-space: normal;
}
.pattern-block .pattern-display .row .col.pattern-letter {
    color: var(--bingo-lettering-color);
    font-size: calc(var(--space-size) / 1.5);
    font-weight: 600;
}
.pattern-block .pattern-display .row .col:not(.pattern-letter) {
    background-color: var(--white);
}
.pattern-block .pattern-display .row .col.selected span {
    background-color: var(--dark-gray);
}
.pattern-block .pattern-display .row .col.selected span.free-space {
    color: #0000;
}
.pattern-block .pattern-display[data-color^="rainbow"] {
    background: var(--rainbow);
    padding: 5px;
}
.pattern-block .pattern-display[data-color^="rainbow"] .col:not(.pattern-letter) {
    background-color: #fff;
}
.pattern-block .pattern-display[data-color^="rainbow"] .col:not(.pattern-letter) span.selected {
    background-color: #fff9;
}
.pattern-block .pattern-display[data-color="rainbow-screen"] .col:not(.pattern-letter) {
    background-color: #ffffffe6;
}
.pattern-block .pattern-display[data-color="rainbow-screen"] .col:not(.pattern-letter):not(.selected) span {
    background-color: #0000;
}
.settings-panel {
    bottom: 0;
    font-family: var(--condensed-font);
    height: 100vh;
    max-width: 100%;
    position: absolute;
    top: 0;
    transition: var(--ease-transition);
    width: var(--settings-panel-width);
    z-index: 3;
}
.settings-panel .updates-panel {
    background: var(--off-white);
}
.settings-panel .inner-panel {
    background-color: var(--white);
    border-image: var(--primary-border-source);
    border-left-style: solid;
    border-left-width: 5px;
    color: var(--black);
    height: 100%;
    overflow-y: auto;
    position: relative;
    width: 100%;
}
.settings-panel .inner-panel h2 {
    padding: 0.5em var(--size-xlg);
    position: relative;
}
.settings-panel .inner-panel h2 .icon-button {
    border: none;
    font-size: var(--icon-size-lg);
    position: absolute;
    right: 0;
    top: 0;
}
.settings-panel .inner-panel h3 {
    font-size: 1.2rem;
}
.settings-panel .inner-panel .h6,
.settings-panel .inner-panel .uppercase-text-small,
.settings-panel .inner-panel h6 {
    color: var(--near-black);
    margin-bottom: 0;
}
.settings-panel .inner-panel .pattern-block {
    margin-bottom: 1rem;
    margin-top: 0;
}
.settings-panel .inner-panel .text-block {
    padding: var(--size-xlg);
}
.settings-panel .inner-panel .sub-section {
    padding: var(--size-lg) var(--size-xlg);
}
.settings-panel .inner-panel .sub-section p {
    margin: 0;
}
.settings-panel .export-settings .secondary-button {
    color: var(--near-black);
}
.settings-panel .export-settings button,
.settings-panel .export-settings label {
    display: block;
    margin: 0 auto;
    text-align: center;
    width: 100%;
}
.settings-panel .export-settings label {
    margin-top: 1rem;
}
.settings-panel .backdrop {
    background: #000000bf;
    bottom: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: var(--ease-transition);
    width: 100%;
    z-index: -1;
}
.settings-panel.closed {
    right: -100%;
    visibility: hidden;
}
.settings-panel.closed .backdrop {
    left: -100%;
    visibility: hidden;
}
.settings-panel.open {
    right: 0;
}
.settings-panel.open .backdrop {
    left: 0;
}
.settings-panel.open .save-block {
    right: 15px;
}
.dismissable {
    border: 1px solid var(--focus-color);
    border-radius: 4px;
    margin: 1rem 0;
    padding: 0.5rem 1rem;
}
.show-support {
    background: #c9eafc;
    margin-top: 0;
    padding: 0.75em;
    text-align: center;
}
.show-support a {
    color: #000;
}
.settings-intro > .helper-block {
    margin-right: 3px;
    vertical-align: bottom;
}
.setting-group .pattern-select .setting-inner {
    padding-left: 0;
    padding-right: 0;
}
.setting-group .pattern .pattern-block {
    --space-size: 1.5rem;
}
.setting-group .pattern .pattern-block .pattern-display {
    align-self: center;
    flex: 0 0;
    margin: 0;
}
.setting-group label svg {
    fill: var(--primary-color);
}
.setting-group {
    border-bottom: 3px solid #e7e7e7;
    padding: var(--size-lg) var(--size-xlg);
}
.setting-group h5 {
    margin: 6px 0;
}
.setting-inner {
    line-height: 1.2;
    padding: var(--size-md) var(--size-sm) var(--size-sm);
    position: relative;
}
.setting-inner label {
    align-items: center;
    cursor: pointer;
    display: flex;
}
.setting-inner .helper-block.right {
    margin-left: var(--size-md);
}
.setting-inner .helper-block.left {
    margin-right: var(--size-md);
}
.detail-box {
    border: var(--input-border-focus);
    font-size: var(--small-font-size);
    margin: 0.5em 0;
    padding: 0.5em;
}
.detail-box code {
    background: var(--light-gray);
    border-radius: 3px;
    color: var(--dark-gray);
    line-height: 2;
    padding: 0.2em 0.5em;
}
.pattern-select {
    line-height: 1;
    padding: var(--size-lg) var(--size-sm);
}
.pattern-select .pattern-select {
    padding: 0;
}
.audio-loading-indicator {
    animation: slideInRight 0.3s ease-out;
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 4px 12px #00000026;
    min-width: 300px;
    padding: 16px 20px;
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 9999;
}
@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.audio-loading-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.audio-loading-header {
    align-items: center;
    color: var(--black);
    display: flex;
    font-family: var(--condensed-font);
    font-size: 1rem;
    font-weight: 700;
    gap: 10px;
}
.audio-loading-icon {
    animation: pulse 1.5s ease-in-out infinite;
    font-size: 1.5rem;
}
@keyframes pulse {
    0%,
    to {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}
.audio-loading-text {
    flex: 1;
}
.audio-loading-progress-bar {
    background: var(--light-gray);
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
    width: 100%;
}
.audio-loading-progress-fill {
    background: linear-gradient(90deg, #4caf50, #8bc34a);
    border-radius: 4px;
    height: 100%;
    transition: width 0.3s ease-out;
}
.audio-loading-stats {
    color: var(--dark-gray);
    font-family: var(--condensed-font);
    font-size: 0.85rem;
    text-align: center;
}
.settings-section {
    margin: 3rem auto;
}
.settings-section h3 {
    border-bottom: 2px solid var(--accent-background);
    margin-bottom: 2rem;
}
.settings-section .settings-group {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.settings-section .settings-group .sub-setting {
    background: #0000001a;
    border-radius: 0.5rem;
    padding: 1rem;
}
.settings-section .settings-group .sub-setting h4 {
    color: var(--accent-background);
}
.settings-section .settings-group .sub-setting h5 {
    border-bottom: 1px dashed var(--settings-value-color);
    font-size: 0.8rem;
    line-height: 1.5;
    text-transform: uppercase;
}
.settings-section .settings-group .sub-setting ul {
    list-style: decimal;
    margin: 0;
}
.settings-section .settings-group .sub-setting ul li {
    font-size: var(--small-font-size);
}
.settings-section .settings-group .sub-setting strong {
    color: var(--focus-color);
}
.bingo-board {
    background-color: var(--black);
    display: flex;
    flex-direction: column;
    font-family: var(--condensed-font);
}
.bingo-board .bingo-board-row {
    display: inline-flex;
}
.bingo-board .bingo-board-row > div {
    flex: 1 1;
    font-size: var(--board-font-size);
    line-height: var(--board-line-height);
    text-align: center;
}
.bingo-board .bingo-board-row > div.bingo-board-letter {
    background-color: var(--white);
    color: var(--primary-color);
    font-weight: 600;
}
.bingo-board .bingo-board-row > div.bingo-board-ball {
    color: var(--med-dark-gray);
    position: relative;
}
.bingo-board .bingo-board-row > div.bingo-board-ball span {
    position: inherit;
    z-index: 2;
}
.bingo-board .bingo-board-row > div.bingo-board-ball .bingo-board-ball-button {
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: inherit;
    margin: 0;
    padding: 0;
}
.bingo-board .bingo-board-row > div.bingo-board-ball .bingo-board-ball-button .fire-body {
    bottom: 35%;
}
.bingo-board .bingo-board-row > div.bingo-board-ball.active {
    animation: blink 1s infinite;
}
.bingo-board .bingo-board-row > div.bingo-board-ball.active .fire-body {
    bottom: 0 !important;
    right: calc(50% - var(--board-font-size) * 0.75);
}
.bingo-board .bingo-board-row > div.bingo-board-ball.active .fire-body .fire-container {
    width: calc(var(--board-font-size) * 2);
}
.bingo-board .bingo-board-row > div.bingo-board-ball.active .bingo-board-ball-button {
    animation: blink 1s infinite;
    position: relative;
}
.bingo-board .bingo-board-row > div.bingo-board-ball.called {
    color: var(--white);
}
.bingo-board .bingo-board-row.colored .bingo-board-ball {
    color: var(--white);
    opacity: 0.3;
}
.bingo-board .bingo-board-row.colored .bingo-board-ball.called {
    opacity: 1;
}
.bingo-board .bingo-board-row.colored.n .bingo-board-ball.active,
.bingo-board .bingo-board-row.colored.o .bingo-board-ball.active {
    animation: blink-reverse 1s infinite;
    color: var(--black);
}
.bingo-board .bingo-board-row.colored.n .bingo-board-ball.called,
.bingo-board .bingo-board-row.colored.o .bingo-board-ball.called {
    color: var(--black);
}
.bingo-board .bingo-board-row.colored.b,
.bingo-board .bingo-board-row.colored.b .bingo-board-letter {
    background-color: var(--ball-color-blue);
    color: var(--white);
}
.bingo-board .bingo-board-row.colored.i,
.bingo-board .bingo-board-row.colored.i .bingo-board-letter {
    background-color: var(--ball-color-red);
    color: var(--white);
}
.bingo-board .bingo-board-row.colored.n,
.bingo-board .bingo-board-row.colored.n .bingo-board-letter {
    background-color: var(--ball-color-white);
    color: var(--black);
}
.bingo-board .bingo-board-row.colored.n .bingo-board-ball,
.bingo-board .bingo-board-row.colored.n .bingo-board-letter .bingo-board-ball {
    color: var(--black);
}
.bingo-board .bingo-board-row.colored.n .bingo-board-ball.active,
.bingo-board .bingo-board-row.colored.n .bingo-board-letter .bingo-board-ball.active {
    color: var(--white);
}
.bingo-board .bingo-board-row.colored.g,
.bingo-board .bingo-board-row.colored.g .bingo-board-letter {
    background-color: var(--ball-color-green);
    color: var(--white);
}
.bingo-board .bingo-board-row.colored.o,
.bingo-board .bingo-board-row.colored.o .bingo-board-letter {
    background-color: var(--ball-color-yellow);
    color: var(--black);
}
.light-scheme .bingo-board .bingo-board-row > div.bingo-board-letter {
    background-color: var(--primary-color);
    color: var(--white);
}
.light-scheme .bingo-board .bingo-board-row > div.bingo-board-ball {
    color: #cacaca;
}
.light-scheme .bingo-board .bingo-board-row > div.bingo-board-ball.called {
    color: var(--near-black);
}
.light-scheme .bingo-board .bingo-board-row > div.bingo-board-ball.called span {
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.15));
}
.light-scheme .bingo-board .bingo-board-row > div.bingo-board-ball.active,
.light-scheme .bingo-board .bingo-board-row > div.bingo-board-ball.active .bingo-board-ball-button {
    animation: blink-reverse 1s infinite;
}
.light-scheme .bingo-board .bingo-board-row.colored .bingo-board-ball {
    color: var(--white);
    opacity: 0.2;
}
.light-scheme .bingo-board .bingo-board-row.colored .bingo-board-ball.called {
    color: var(--white);
    opacity: 1;
}
.light-scheme .bingo-board .bingo-board-row.colored .bingo-board-ball.active {
    animation: blink 1s infinite;
}
.light-scheme .bingo-board .bingo-board-row.colored.b .bingo-board-ball {
    opacity: 0.3;
}
.light-scheme .bingo-board .bingo-board-row.colored.b .bingo-board-ball.active,
.light-scheme .bingo-board .bingo-board-row.colored.b .bingo-board-ball.called {
    opacity: 1;
}
.light-scheme .bingo-board .bingo-board-row.colored.o .bingo-board-ball {
    color: var(--white);
    opacity: 0.4;
}
.light-scheme .bingo-board .bingo-board-row.colored.o .bingo-board-ball.active {
    animation: blink-reverse 1s infinite;
    color: var(--black);
    opacity: 1;
}
.light-scheme .bingo-board .bingo-board-row.colored.o .bingo-board-ball.called {
    color: var(--black);
    opacity: 1;
}
.light-scheme .bingo-board .bingo-board-row.colored.n .bingo-board-ball {
    color: var(--black);
}
.light-scheme .bingo-board .bingo-board-row.colored.n .bingo-board-ball.active {
    animation: blink-reverse 1s infinite;
    color: var(--black);
}
.light-scheme .bingo-board .bingo-board-row.colored.n .bingo-board-ball.called {
    color: var(--black);
}
.light-scheme .call-info .digital-display {
    background-color: #0000;
    color: var(--off-white);
}
.light-scheme .call-info .digital-display .digit {
    color: var(--settings-value-color);
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.15));
}
.light-scheme .bingo-board,
.light-scheme .transparent-background {
    background: #d1d1d11a;
}
.light-scheme .logo .logo-text-color {
    fill: var(--settings-value-color);
}
.light-scheme .logo .logo-white:not(circle) {
    fill: var(--near-black) !important;
}
.light-scheme .uppercase-text-small {
    color: var(--dark-gray);
}
.light-scheme button {
    font-weight: 500;
}
.light-scheme button.primary-button:hover {
    color: var(--white);
}
.light-scheme button.secondary-button {
    background-color: #0000;
    border-color: var(--focus-color);
    color: var(--near-black);
}
.light-scheme button.primary-button:disabled:not(.toggle),
.light-scheme button.secondary-button:disabled:not(.toggle),
.light-scheme button:disabled:not(.toggle) {
    background-color: var(--gray) !important;
    border-color: var(--gray) !important;
    color: var(--light-gray) !important;
}
.light-scheme button.cancel-button {
    color: #636363;
}
.light-scheme button.cancel-button:hover {
    color: var(--primary-color) !important;
}
.light-scheme .countdown .tick {
    color: var(--primary-color);
}
.countdown {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    height: 100%;
    padding: var(--size-lg);
    text-align: center;
}
.countdown span {
    display: flex;
    justify-content: center;
    width: 100%;
}
.countdown .tick {
    font-size: clamp(1rem, 8vw, 6rem);
    line-height: 1;
}
.countdown.flashing {
    animation: countdown 1s infinite;
}
.countdown.countdown-horizontal {
    flex-flow: row;
    flex-wrap: nowrap;
    justify-content: center;
    padding: 0 var(--size-md);
}
.countdown.countdown-horizontal span {
    margin: 0 1rem;
    white-space: nowrap;
    width: auto;
}
.countdown.countdown-horizontal .tick {
    font-size: clamp(1rem, 3vw, 2.5rem);
    margin: 0 0.25rem;
}
.stoplight button[value="new-game"],
.stoplight button[value="resume-game"] {
    background-color: green;
    border-color: green;
}
.stoplight button[value="pause-game"] {
    background-color: red;
    border-color: red;
}
.controls {
    margin: auto;
    text-align: center;
}
.controls button.cancel-button,
.controls button.primary-button,
.controls button.secondary-button {
    display: block;
    margin: 1em auto;
    width: 90%;
}
.controls .horizontal {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
}
.controls .horizontal button.cancel-button,
.controls .horizontal button.primary-button,
.controls .horizontal button.secondary-button {
    display: inline-flex;
    flex-grow: 1;
    font-size: 0.9rem;
    justify-content: center;
    margin: 0 0.5rem;
    padding: 0.3rem 1.5rem;
    white-space: nowrap;
    width: auto;
}
.controls .horizontal button.cancel-button {
    background: #0000001a;
}
.controls .horizontal button.cancel-button:hover {
    color: var(--primary-color) !important;
}
@media (max-width: 1000px) {
    .controls .horizontal button {
        margin: 0.5% !important;
        width: 48% !important;
    }
}
.popout-controls .col {
    padding: 0 var(--size-sm);
}
.popout-controls .control-buttons {
    flex-flow: row nowrap;
}
.popout-controls .control-buttons > .col {
    padding: 0 var(--size-md) !important;
}
.popout-controls button.primary-button,
.popout-controls button.secondary-button {
    display: block;
    margin: 0;
    width: 100%;
}
.popout-controls .call-info {
    margin: 0 auto;
}
.popout-controls .modal {
    overflow: auto !important;
}
.popout-controls .single-button {
    padding: 0 var(--size-md) !important;
}
.popout-controls .label-text {
    text-align: left;
}
.call-info {
    --digital-font-size: clamp(1rem, 7.5vw, 4.5rem);
    min-width: calc(var(--digital-font-size) * 2 + 2rem);
}
.call-info .digital-display {
    background-color: var(--black);
    color: var(--near-black);
    display: flex;
    font-family: var(--digital-font);
    font-size: var(--digital-font-size);
    height: calc(var(--digital-font-size) + 4px);
    margin: 0 auto;
    padding: 0 0.5rem;
    position: relative;
    width: calc(var(--digital-font-size) * 1.3);
}
.call-info .digital-display:after,
.call-info .digital-display:before {
    content: "8";
    position: absolute;
    z-index: 1;
}
.call-info .digital-display:before {
    right: 50%;
}
.call-info .digital-display:after {
    right: 10%;
}
.call-info .digital-display .digit {
    color: var(--white);
    position: absolute;
    z-index: 2;
}
.call-info .digital-display .digit:first-of-type {
    right: 50%;
}
.call-info .digital-display .digit:last-of-type {
    right: 10%;
}
.card-generator .config {
    background: #0003;
    min-width: 22rem;
    padding: var(--size-xxlg) !important;
}
.card-generator .config .setting-inner {
    margin: 0 0 var(--size-xlg) 0;
    padding: 0;
}
.card-generator .config .setting-inner .label-text {
    line-height: 1.3;
}
.card-generator .config .dropdown-group {
    max-width: 100%;
    min-width: 160px;
}
.card-generator .config .pattern-block {
    --space-size: 1.5rem;
}
.card-generator .config .pattern-block span.label-text {
    font-size: 1rem;
}
.ticket:not(:last-of-type) {
    margin-bottom: 1rem;
}
.ticket .card-number {
    --space-size: 3.5rem;
    border: 2px solid var(--card-border-color);
}
.ticket .card-number span {
    align-items: center;
    background: #fff;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
}
.card-block .card.ticket-strip {
    margin-bottom: 1rem;
}
.play-along {
    --daub-color: #ff0;
}
.play-along .ticket-strip + .ticket-strip {
    display: inline-block;
    margin-left: 1rem;
    margin-right: 1rem;
    vertical-align: top;
}
.play-along .card-block {
    margin: 2rem auto;
}
.play-along .card-block .card-number {
    cursor: pointer;
}
.play-along .card-block .card-number > span {
    align-items: center;
    align-self: center;
    border-radius: 100%;
    display: flex;
    height: 100%;
    justify-content: center;
    pointer-events: none;
    width: 100%;
}
.play-along .card-block .card-number.daubed > span {
    background-color: var(--daub-color);
}
.play-along input {
    min-width: 160px;
}
.play-along.small .card-block {
    max-width: 80%;
    --space-size: 50px;
}
.play-along.medium .card-block {
    max-width: 90%;
    --space-size: 70px;
}
.play-along.large .card-block {
    --space-size: 90px;
}
.play-along.xlarge .card-block {
    --space-size: 120px;
}
.print-one .card-block {
    --space-size: 7rem;
}
.print-two .card-block {
    --space-size: 5rem;
}
.print-four .card-block,
.print-six .card-block {
    --space-size: 4.5rem;
}
.card-block {
    margin: 1rem auto;
}
.card-block .break {
    display: none;
}
.card-block[data-card-spacing="None"] .card {
    margin: 0 !important;
}
.card-block[data-card-spacing="Small"] .card {
    margin: 0.5% !important;
}
.card-block[data-card-spacing="Medium"] .card {
    margin: 1.25% !important;
}
.card-block[data-card-spacing="Large"] .card {
    margin: 2.75% !important;
}
.card-block .card {
    background: var(--card-background);
    color: var(--near-black);
    display: inline-flex;
    flex-wrap: nowrap;
    padding: 0.75rem;
}
.card-block .card[data-color$="-screen"] .card-numbers {
    background-color: #ffffffd9;
}
.card-block .card[data-color$="-screen"] .card-number.shaded {
    background-color: var(--screen-shaded-bg-color);
}
.card-block .card[data-color$="-screen"][data-reversed="true"] .card-number.shaded {
    --screen-shaded-bg-color: #ffffffd9;
}
.card-block .card[data-color$="-screen"][data-reversed="true"] .card-number:not(.shaded) {
    background-color: var(--screen-shaded-bg-color);
}
.card-block .card:not([data-color$="-screen"]) .card-numbers {
    background-color: #fff;
}
.card-block .card:not([data-color$="-screen"]) .card-number.shaded {
    background-color: var(--shaded-bg-color);
}
.card-block .card:not([data-color$="-screen"])[data-reversed="true"] .card-number.shaded {
    --shaded-bg-color: #fff;
}
.card-block .card:not([data-color$="-screen"])[data-reversed="true"] .card-number:not(.shaded) {
    background-color: var(--shaded-bg-color);
}
.card-block .card > .row > .col {
    margin: 0 !important;
    padding: 0 !important;
}
.card-block .card:not([data-color^="rainbow"]) {
    --card-border-style: 2px solid var(--card-border-color);
}
.card-block .card:not([data-color^="rainbow"]) .card-numbers {
    border-bottom: var(--card-border-style);
    border-left: var(--card-border-style);
    border-top: var(--card-border-style);
}
.card-block .card:not([data-color^="rainbow"]) .card-numbers .card-number {
    border-bottom: var(--card-border-style);
}
.card-block .card:not([data-color^="rainbow"]) .card-numbers .card-number:last-of-type {
    border-bottom: none !important;
}
.card-block .card:not([data-color^="rainbow"]) .card-numbers:last-of-type .card-numbers {
    border-right: var(--card-border-style);
}
.card-block .card[data-color^="rainbow"] .col .card-numbers {
    background-color: #0000;
    border-image: var(--rainbow-border-color);
    border-left-style: solid;
    border-left-width: 2px;
}
.card-block .card[data-color^="rainbow"] .col .card-numbers .card-number {
    background-color: #fff;
}
.card-block .card[data-color^="rainbow"] .col .card-numbers .card-number.shaded {
    background-color: #fff9;
}
.card-block .card[data-color^="rainbow"] .col .card-numbers .card-number:first-of-type {
    border-bottom: 2px solid #f6b103;
    border-top: 2px solid #e45608;
}
.card-block .card[data-color^="rainbow"] .col .card-numbers .card-number:last-of-type {
    border-bottom: 2px solid #7709ce;
}
.card-block .card[data-color^="rainbow"] .col .card-numbers .card-number:nth-of-type(2) {
    border-bottom: 2px solid #d2f105;
}
.card-block .card[data-color^="rainbow"] .col .card-numbers .card-number:nth-of-type(3) {
    border-bottom: 2px solid #0de04d;
}
.card-block .card[data-color^="rainbow"] .col .card-numbers .card-number:nth-of-type(4) {
    border-bottom: 2px solid #0f24fe;
}
.card-block .card[data-color^="rainbow"]:last-of-type .col .card-numbers {
    border-right: 2px solid;
}
.card-block .card[data-color="rainbow"][data-reversed="true"] .col .card-numbers .card-number.shaded {
    background-color: #fff;
}
.card-block .card[data-color="rainbow"][data-reversed="true"] .col .card-numbers .card-number:not(.shaded) {
    background-color: #fff9;
}
.card-block .card[data-color="rainbow-screen"] .row .col .card-numbers .card-number {
    background-color: #ffffffe6;
}
.card-block .card[data-color="rainbow-screen"] .row .col .card-numbers .card-number.shaded {
    background-color: #fff9;
}
.card-block .card[data-color="rainbow-screen"][data-reversed="true"] .row .col .card-numbers .card-number.shaded {
    background-color: #ffffffe6;
}
.card-block .card[data-color="rainbow-screen"][data-reversed="true"] .row .col .card-numbers .card-number:not(.shaded) {
    background-color: #fff9;
}
.card-block .card[data-bold="true"] * {
    font-weight: 700 !important;
}
.card-block .card .hide-unused .card-number:not(.shaded) {
    color: #0000;
}
.card-block .card .freespace {
    align-self: center;
}
.card-block .card .freespace > span {
    display: block;
    font-family: var(--condensed-font);
    font-size: calc(var(--space-size) / 5);
    font-weight: 600;
    line-height: calc(var(--space-size) / 5.5);
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}
.card-block .card .card-letter,
.card-block .card .card-number {
    align-items: center;
    display: flex;
    font-size: calc(var(--space-size) / 2);
    height: var(--space-size);
    justify-content: center;
    line-height: var(--space-size);
    line-height: calc(var(--space-size) / 2.5);
    margin: 0;
    width: var(--space-size);
}
.card-block .card .card-letter {
    color: #fff;
    height: calc(var(--space-size) / 1.3);
}
@media print {
    .print-one .card-block {
        --space-size: 115px !important;
    }
    .print-four .card-block[data-card-spacing="Large"] {
        --space-size: 60px !important;
    }
    .print-six .card-block[data-card-spacing="Large"],
    .print-six .card-block[data-card-spacing="Medium"] {
        --space-size: 50px !important;
    }
}
.amber-dauber {
    --daub-color: var(--amber);
}
.blue-dauber {
    --daub-color: var(--blue);
}
.brown-dauber {
    --daub-color: var(--brown);
}
.chartreuse-dauber {
    --daub-color: var(--chartreuse);
}
.green-dauber {
    --daub-color: var(--green);
}
.magenta-dauber {
    --daub-color: var(--magenta);
}
.orange-dauber {
    --daub-color: var(--orange);
}
.pink-dauber {
    --daub-color: var(--pink);
}
.purple-dauber {
    --daub-color: var(--purple);
}
.rainbow-dauber {
    --daub-color: #0000;
}
.rainbow-dauber .daubed span {
    background: linear-gradient(165deg, #d40000, #ee8b00, #fe0, #0f0, #02f, #8800c7);
}
.red-dauber {
    --daub-color: var(--red);
}
.teal-dauber {
    --daub-color: var(--teal);
}
.vermillion-dauber {
    --daub-color: var(--vermillion);
}
.violet-dauber {
    --daub-color: var(--violet);
}
.yellow-dauber {
    --daub-color: var(--yellow);
}
.pattern-list #pagination {
    display: flex;
    justify-content: center;
    margin: 1.5rem auto;
}
@media screen and (max-width: 420px) {
    .pattern-list button:not(.alphabet-filter).secondary-button {
        display: block;
        margin-top: 0.5rem;
        width: 100%;
    }
}
.pattern-list .row {
    justify-content: flex-start;
}
.pattern-list .row .pattern-col {
    flex: 0 1 20% !important;
}
.pattern-list .filter-block {
    background: #0003;
    border-radius: 10px;
    column-gap: 2rem;
    margin-bottom: 2rem;
    padding: 2rem;
}
.pattern-list .filter-block label {
    line-height: 1.5;
    margin-bottom: 1rem;
}
.pattern-list .filter-block .setting-inner {
    padding-bottom: 0;
}
.pattern-list .filter-block .setting-inner label {
    margin-bottom: 0;
}
.pattern-list .alphabet-filters {
    column-gap: 10px;
    display: inline-flex;
    flex-wrap: wrap;
    row-gap: 10px;
}
.pattern-list .alphabet-filters button.alphabet-filter {
    border: none;
    min-width: 2.25rem;
}
.pattern-list .alphabet-filters button.alphabet-filter.primary-button {
    line-height: 1;
}
.pattern-list .alphabet-filters button.alphabet-filter.secondary-button:active,
.pattern-list .alphabet-filters button.alphabet-filter.secondary-button:focus,
.pattern-list .alphabet-filters button.alphabet-filter.secondary-button:hover {
    background-color: var(--primary-color);
    border: none;
}
.pattern-list .alphabet-filters button.alphabet-filter.secondary-button:disabled,
.pattern-list .alphabet-filters button.alphabet-filter.secondary-button:disabled:hover {
    background-color: #0000;
}
.pattern-list .alphabet-filters button.alphabet-filter.secondary-button.active:not(.first):not(.last) {
    background-color: var(--primary-color);
}
.pattern-list #title-bar {
    transition: background 0.5s ease;
}
.pattern-list .freeze {
    background: #222;
    left: 0;
    margin: 0;
    padding: var(--size-md) var(--size-xxxlg);
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
}
.pattern-list .total-patterns {
    border: 3px solid var(--secondary-color);
    border-radius: 4px;
    margin-top: 10px;
    min-width: 200px;
    padding: 10px;
    text-align: center;
}
.pattern-list .total-patterns .pattern-count {
    color: var(--primary-color);
    font-size: 60px;
    font-weight: 600;
}
.pattern-list .pattern-block {
    border: none;
    border-radius: 5px;
    margin: 0 auto;
    padding: 12px !important;
    position: relative;
    white-space: normal;
    --space-size: 1.5rem;
    height: 100%;
    transition: var(--ease-transition);
    width: calc(var(--space-size) * 7);
}
.pattern-list .pattern-block.new-pattern:before {
    background: var(--yellow);
    border-radius: 0.5rem;
    color: #000;
    content: "NEW!";
    display: block;
    font-size: 0.5rem;
    font-weight: 600;
    left: 0;
    padding: 0.25rem;
    position: absolute;
    text-align: center;
    top: 0.25rem;
    transform: rotate(323deg);
    width: 1.5rem;
}
.pattern-list .pattern-block.selected,
.pattern-list .pattern-block:hover {
    background: var(--white);
    cursor: pointer;
}
.pattern-list .pattern-block.selected .pattern-name,
.pattern-list .pattern-block:hover .pattern-name {
    color: var(--primary-color) !important;
}
.pattern-list .pattern-block.selected .pattern-details .pattern-credit,
.pattern-list .pattern-block.selected .pattern-details .unused-letters,
.pattern-list .pattern-block:hover .pattern-details .pattern-credit,
.pattern-list .pattern-block:hover .pattern-details .unused-letters {
    color: var(--background);
}
.pattern-list .pattern-block.selected *,
.pattern-list .pattern-block:hover * {
    cursor: pointer !important;
}
.pattern-list .pattern-block section {
    text-align: center;
}
.pattern-list .pattern-block .pattern-details,
.pattern-list .pattern-block .pattern-name {
    font-family: var(--condensed-font);
    text-align: center;
}
.pattern-list .pattern-block .pattern-details .pattern-credit,
.pattern-list .pattern-block .pattern-details .pattern-name,
.pattern-list .pattern-block .pattern-details .unused-letters {
    color: var(--foreground);
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.25;
}
.pattern-list .pattern-block .pattern-details .pattern-name {
    color: var(--focus-color);
    font-weight: 600;
    margin: 10px auto 5px;
}
.pattern-list .pattern-block .pattern-details .pattern-credit {
    color: var(--light-gray);
    font-size: 0.8rem;
}
.pattern-list .pattern-block .pattern-display .row .col:not(.pattern-letter).selected span.free-space {
    border-radius: 100%;
}
@page {
    size: A4 portrait !important;
    margin: 1cm;
}
@media print {
    body,
    html,
    main,
    section {
        background: #fff;
        border: none !important;
    }
    header {
        text-align: center;
    }
    header .home-link {
        border: none !important;
    }
    footer,
    header .header-icon {
        display: none;
    }
    div {
        page-break-inside: avoid;
        break-inside: avoid-page;
        -webkit-break-inside: avoid-page;
    }
    h1,
    h2 {
        display: none;
    }
    .pattern-list > .row {
        justify-content: center;
    }
    .pattern-list .pattern-block {
        border: 0;
        margin: 0;
        padding: 0;
        --space-size: 12pt;
    }
    .pattern-list .pattern-block .pattern-col {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        -webkit-break-inside: avoid !important;
    }
    .pattern-list .pattern-block .pattern-col * {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
    .pattern-list .pattern-block .pattern-details > * {
        color: #000 !important;
        font-size: 10pt;
    }
}
.year-block {
    border-bottom: 3px solid var(--primary-color);
    margin: 1rem 0;
}
.year-block h4 {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
}
.year-block h4 * {
    flex: 0 1;
}
.year-block h4 .description {
    flex: 1 2;
    margin-left: 1rem;
}
.release-block {
    padding-right: var(--size-xlg);
}
.release-block:not(:last-of-type) {
    border-bottom: 1px solid #d8d8d8;
    margin-bottom: 20px;
    padding-bottom: 10px;
}
.release-aside {
    border-radius: 5px;
    margin: 0 var(--size-md);
    padding: var(--size-xlg) var(--size-xxlg);
}
.release-aside .version-block {
    display: block;
}
.release-aside .version-block:not(:last-of-type) {
    border-bottom: 1px solid #ffffff4d;
    margin-bottom: 20px;
}
.tag,
.version {
    display: inline-block;
    font-family: var(--body-font);
    font-size: var(--x-small-font-size);
    font-weight: 400;
    vertical-align: middle;
}
.version {
    background: #0000001a;
    border-radius: 5px;
    margin: 0 0.5em;
    padding: 0.25em 0.5em;
    text-transform: uppercase;
}
.tag {
    background: #efefef;
    border-radius: 3px;
    font-variant: all-petite-caps;
    margin-right: 0.5em;
    padding: 0.5em 1em;
}
.tag.release {
    color: #2754ad;
}
.tag.bugfix {
    color: #af1616;
}
.tag.improvement {
    color: #017522;
}
.year-accordion-toggle {
    align-items: center;
    border-radius: var(--border-radius);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: var(--size-md);
    transition: all 0.5s ease;
    user-select: none;
}
.year-accordion-toggle:hover {
    background: var(--primary-color);
    color: var(--primary-text-color);
}
.year-accordion-toggle .svg-icon {
    height: 24px;
    margin-left: var(--size-sm);
    transition: transform 0.3s ease;
    width: 24px;
}
.year-accordion-content {
    animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (min-width: 1537px) {
    :root {
        --base-font-size: 24px;
    }
}
@media (max-width: 1536px) {
    :root {
        --base-font-size: 20px;
    }
}
@media (max-width: 1440px) {
    :root {
        --base-font-size: 18px;
    }
}
@media (max-width: 1280px) {
    :root {
        --base-font-size: 18px;
    }
}
@media (max-width: 810px) {
    .call-info {
        --digital-font-size: clamp(1rem, 12vw, 4.5rem);
    }
    .small-wrap {
        flex-wrap: wrap !important;
    }
    .reset-container .colspan3 {
        max-width: 100% !important;
        width: 100% !important;
    }
}
@media (max-width: 430px) {
    h1#top {
        flex-direction: column-reverse;
        gap: 1rem;
    }
    .contact-page {
        flex-direction: column;
    }
    .contact-page > .col {
        max-width: 100% !important;
        padding: 0;
        width: 100% !important;
    }
    .help-content.row {
        flex-direction: column-reverse;
    }
    .card-generator .row > .colspan8,
    .help-content.row > .col {
        max-width: 100%;
        width: 100%;
    }
    .card-generator .config {
        min-width: unset;
        width: 100%;
    }
    .card-generator .config .primary-button,
    .card-generator .config .secondary-button {
        display: block;
        text-align: center;
        width: 100%;
    }
    .pattern-list .pattern-intro {
        flex-direction: column;
    }
    .pattern-list .pattern-intro .colspan10 {
        padding-left: 0;
        padding-right: 0;
    }
    .pattern-list .pattern-intro .colspan10,
    .pattern-list .pattern-intro .colspan2 {
        max-width: 100%;
        width: 100%;
    }
    .pattern-list .pattern-filters {
        flex-direction: column;
    }
    .pattern-list .pattern-filters > .col {
        max-width: 100%;
        width: 100%;
    }
    .pattern-list .pattern-filters .filters {
        padding-top: 1rem;
        text-align: center;
    }
    .pattern-list .pattern-filters .filters .alphabet-filters {
        justify-content: center;
        padding-top: 1rem;
    }
    .pattern-list .visible-patterns .row {
        justify-content: space-between;
    }
    .pattern-list .pattern-block {
        --space-size: 1.25rem !important;
        padding: 1rem !important;
        width: auto !important;
    }
    .pattern-list .pattern-block .pattern-name {
        font-size: clamp(0.9rem, 1vw, 1rem) !important;
    }
    .pattern-list .row .pattern-col {
        flex: 1 1 20% !important;
    }
    .card-generator .justify-start,
    .play-along .justify-start {
        justify-content: center;
    }
    .card-generator .col.shrink.no-text-wrap.padding-top-xlg,
    .play-along .col.shrink.no-text-wrap.padding-top-xlg {
        min-width: 100%;
        padding: 0.5rem;
        width: 100%;
    }
    .card-generator .col.shrink.no-text-wrap.padding-top-xlg .primary-button,
    .card-generator .col.shrink.no-text-wrap.padding-top-xlg .secondary-button,
    .play-along .col.shrink.no-text-wrap.padding-top-xlg .primary-button,
    .play-along .col.shrink.no-text-wrap.padding-top-xlg .secondary-button {
        display: block;
        width: 100%;
    }
    .card-generator .card-block,
    .play-along .card-block {
        max-width: 100% !important;
        --space-size: clamp(2rem, 15vw, 5rem) !important;
    }
    .card-generator.small .card-block,
    .play-along.small .card-block {
        --space-size: clamp(2rem, 12vw, 2rem);
    }
    .card-generator.medium .card-block,
    .play-along.medium .card-block {
        --space-size: clamp(2rem, 13vw, 3rem);
    }
    .card-generator.large .card-block,
    .play-along.large .card-block {
        --space-size: clamp(2rem, 14vw, 4rem);
    }
    .card-generator.xlarge .card-block,
    .play-along.xlarge .card-block {
        --space-size: clamp(2rem, 15vw, 5rem);
    }
    .about-page .desktop-no-wrap {
        flex-wrap: wrap;
    }
    .about-page .desktop-no-wrap .col {
        flex: 1 1 100%;
    }
    .about-page .desktop-no-wrap .donate {
        margin-bottom: 0.25rem;
        margin-top: 1rem;
    }
    .release-notes {
        flex-wrap: wrap;
    }
    .release-notes > .col {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .release-notes > .col .release-block h4 {
        display: flex;
        flex-direction: column;
    }
    .release-notes > .col .release-block h4 > * {
        margin: 0 0 0.5rem;
    }
    .release-notes img {
        margin-bottom: 1rem;
    }
    .layout-gallery {
        grid-template-columns: 1fr;
    }
    img {
        height: auto;
        max-width: 100%;
    }
    .dropdown-group label,
    .label-text,
    span.h6 {
        font-size: 1rem;
    }
}
@media (forced-colors: active) {
    .prefs__palette {
        forced-color-adjust: none;
    }
}
@media print {
    @page {
        margin: 0.5cm 0 0.75cm 0;
        @bottom-center {
            color: #666;
            content: "Page " counter(page) " of " counter(pages);
            font-size: 8pt;
        }
    }
    @page {
        body.print-90ball {
            margin: 0.25cm 1cm;
        }
    }
    .card-break {
        height: 1rem;
    }
    body,
    html {
        background-color: #fff !important;
        overflow: visible !important;
        -webkit-print-color-adjust: exact !important;
    }
    .row,
    body,
    html,
    section {
        margin: 0 !important;
        padding: 0 !important;
    }
    .no-print,
    footer,
    header {
        display: none !important;
    }
    div {
        page-break-inside: avoid;
        break-inside: avoid-page;
        -webkit-break-inside: avoid-page;
    }
    .card {
        border-radius: 0 !important;
    }
    .card-block {
        margin: 0;
        padding: 0;
    }
    .card-block .card-break {
        page-break-inside: auto;
        break-inside: auto;
        -webkit-break-inside: auto;
        display: block !important;
        width: 100%;
    }
    .print-bw {
        filter: Gray();
        filter: url(#grayscale);
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }
    .print-two .card-block {
        --space-size: 60pt !important;
    }
    .print-four .card-block {
        --space-size: 50pt !important;
    }
    .print-six .card-block {
        --space-size: 40pt !important;
    }
    .ticket .card-number {
        --space-size: 38pt !important;
    }
}
/*# sourceMappingURL=styles.css.map*/