.firebase-emulator-warning {
    display: none !important;
}

/*
html,
body {
  position: relative;
  width: 100%;
  height: 100%;
}

body {
  color: #333;
  margin: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

a {
  color: rgb(0, 100, 200);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:visited {
  color: rgb(0, 80, 160);
}

label {
  display: block;
}

input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  padding: 0.4em;
  margin: 0.25em 0 0.25em 0;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 2px;
}

input.mdc-text-field__input {
  margin: 0;
}

input:disabled {
  color: #ccc;
}

input[type="range"] {
  height: 0;
}
/* input[type="text"] {
  width: 30em;
} */
/*
button {
  color: #333;
  background-color: #f4f4f4;
  outline: none;
}

button:active {
  background-color: #ddd;
}

button:focus {
  border-color: #666;
}
.hidden {
  display: none;
}
.visible {
  display: block;
}
.pageContent {
  padding: 10px;
  color: #626262;
}
*/
/* nav {
    padding: 5px;
    display: block;
    clear: both;
    margin: 0 0 0 1vh;
}

nav a,
nav a:visited {
    display: inline-block;
    padding: 5px;
    margin: 3px;
    border-bottom: 2px solid transparent;
    border-radius: 0.25em;
    color: #2E2E3A;
    white-space: nowrap;
}

nav>ul>li>a:hover {
    background-color: #A162F7;
    color: white;
    text-decoration: none;
}

nav a.selected {
    color: #A162F7;
}

nav a.selected:hover {
    color: #fff;
}

nav>ul>li>ul>li {
    width: 100%;
}

nav>ul>li>ul>li:hover {
    background-color: transparent;
}

nav>ul>li>ul>li:hover>a {
    color: #2E2E3A;
    text-decoration: none;
    display: block;

}

nav>ul>li>ul>li:hover>a:hover {
    color: #000;
    text-shadow: 0 0 2px rgba(0, 0, 0, .25);
} */

/**/
/* .mainContent {
    min-height: calc(100vh - 136px);
    background-color: #f2f3f7;
    padding: 0.75em;
    z-index: 1;
}

.mainContent>.no-margin {
    margin: -0.75em;
}

.main-content-min-height {
    min-height: calc(100vh - 136px);
}

.mainContent>.no-margin.main-content-min-height {
    min-height: calc(100vh - 136px);
}

.main-content-height {
    min-height: calc(100vh - 136px);
}

.mainContent>.no-margin.main-content-height {
    min-height: calc(100vh - 136px);
} */

h1 {
    margin: 0;
    padding: 0.5em 0;
}

.selectPlaceholder {
    display: block;
    width: auto;
    height: auto;
    padding: 0.5em;
    background-color: #d8d8d8;
}

/**/

/* Normalization */

button {
    border: none;
    cursor: pointer;
}

button:disabled {
    cursor: default;
}

a {
    text-decoration: none;
}

/***********************************************/
/* Fonts */

@font-face {
    font-family: InterVF;
    src: url(./fonts/Inter-VariableFont_slnt,wght.ttf) format("truetype-variations");
    src: url(./fonts/Inter-VariableFont_slnt,wght.ttf) format("truetype");
    font-weight: 100 1000;
    font-stretch: 0% 100%;
    font-optical-sizing: 0 100;
}

@font-face {
    font-family: Inter;
    src: url(./fonts/static/Inter-Thin.ttf);
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: Inter;
    src: url(./fonts/static/Inter-ExtraLight.ttf);
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: Inter;
    src: url(./fonts/static/Inter-Light.ttf);
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: Inter;
    src: url(./fonts/static/Inter-Regular.ttf);
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: Inter;
    src: url(./fonts/static/Inter-Medium.ttf);
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: Inter;
    src: url(./fonts/static/Inter-SemiBold.ttf);
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: Inter;
    src: url(./fonts/static/Inter-Bold.ttf);
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: Inter;
    src: url(./fonts/static/Inter-ExtraBold.ttf);
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: Inter;
    src: url(./fonts/static/Inter-Black.ttf);
    font-weight: 900;
    font-style: normal;
}

/*******************************/
/* Typography */
body {
    font-family: 'Inter', sans-serif;
    color: var(--color-font-primary);
}

body.noscroll {
    overflow: hidden;
}

html:has(.keepgutter) {
    scrollbar-gutter: stable;
}

@supports (font-variation-settings: normal) {
    body {
        font-family: 'InterVF', 'Inter', sans-serif;
    }
}

/* Headline 1 */
h1 {
    font-weight: 700;
    font-size: 40px;
    line-height: 60px;
    margin: 1em 0;
}

/* Headline 2 */
h2 {
    font-weight: 800;
    font-size: 32px;
    line-height: 39px;
    margin: 1em 0;
}

/* Headline 3 */
h3 {
    font-weight: 700;
    font-size: 28px;
    line-height: 34px;
    margin: 1em 0;
}

/* Headline 4 */
h4 {
    font-weight: 600;
    font-size: 28px;
    line-height: 34px;
    margin: 1em 0;
}

/* Headline 5 */
h5 {
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    margin: 1em 0;
}

/* Headline 6 */
h6 {
    font-weight: 600;
    font-size: 20px;
    line-height: 18px;
    margin: 1em 0;
}

/* Headline 7 */
h7 {
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    margin: 1em 0;
    display: block;
}

/* Text */
p {
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
}

/* Text Semi Bold */
p.semi-bold {
    font-weight: 600;
}

/* Subtitle */
p.subtitle {
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
}

/* Subtitle Semi Bold */
p.subtitle.semi-bold {
    font-weight: 600;
}

/* Button label */
button {
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
}

/* Mini-button label */
.mini-button {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
}

/* Button Semi Bold */
button.semi-bold {
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
}

/* Description */
p.description,
span.description {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
}

/* Mini Description */
p.description.mini {
    font-weight: 400;
    font-size: 9px;
    line-height: 11px;
}

/* Modal description */
p.modal,
.modal p:not(.description):not(.subtitle) {
    color: var(--color-font-secondary);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}

/* Input */
input {
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
}

/***********************/
/* Quick, commonly-used margins */
.m0 {
    margin: 0;
}

.m8 {
    margin-top: 8px;
    margin-bottom: 8px;
}

.m16 {
    margin-top: 16px;
    margin-bottom: 16px;
}

.m24 {
    margin-top: 24px;
    margin-bottom: 26px;
}

.m40 {
    margin-top: 40px;
    margin-bottom: 40px;
}

.mt-16 {
    margin-top: -16px;
}

.mb-16 {
    margin-bottom: -16px;
}

.validating-channel {
    border: 0px solid var(--color-main-10);
    padding: 6px;
    margin: 5px 0;
    color: white;
    text-align: center;

    background: linear-gradient(270deg, var(--color-main-3), var(--color-main-5), var(--color-main-7), var(--color-main-9), var(--color-main-10)) 0 center;
    background-repeat: no-repeat;
    background-size: 200% 100%;

    animation: backgroundAnimation 4s linear infinite;
}

@keyframes backgroundAnimation {
    0% {
        background-position: 0% 50%;
    }

    25% {
        background-position: 50% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    75% {
        background-position: 50% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Print CSS */
@media print {
    @page {
        size: A4 landscape;
        margin: 0px;
    }

    html:has(#printContainer) *:not(:is(body, body *:has(#printContainer), #printContainer, #printContainer *)) {
        display: none !important;
    }

    html:has(#printContainer),
    html:has(#printContainer) *:is(body, body *:has(#printContainer)) {
        display: flex !important;
        width: 100% !important;
        background: none !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Variables */
:root {
    --color-primary: #A162F7;
    --color-primary-rgb: 161, 98, 247;
    --color-secondary: #FFFFFF;
    --color-font-primary: #07070C;
    --color-font-secondary: #7E7E8F;
    --color-font-tertiary: #9A9AAF;
    --color-disabled: #C6CBD9;
    --color-error: #EC583F;
    --color-error-rgb: 236, 88, 63;
    --color-warning: #FF8743;
    --color-warning-rgb: 255, 135, 67;
    --color-success: #09AA2C;
    --color-success-rgb: 9, 170, 44;
    --color-info: #0062FF;
    --color-info-rgb: 0, 98, 255;
    --color-highlight: #F6F0FF;
    --color-highlight-strong: #BE92FA;
    --color-disabled-highlight: #F2F3F7;

    /* button colors */
    --color-primary-button-text: #F2F3F7;
    --color-primary-button-hover: #B481F9;
    --color-primary-button-hover-text: #F5F5FF;
    --color-secondary-button-text: #A162F7;
    --color-secondary-button-hover: #F6F0FF;
    --color-secondary-button-hover-text: #A162F7;
    --color-secondary-button-background: #d7c4f5;


    /* link colors */
    --color-link: #A162F7;
    --color-link-hover: #BE92FA;

    --color-grayscale-0: #FFFFFF;
    --color-grayscale-0-5: #F9F9FB;
    --color-grayscale-1: #F2F3F7;
    --color-grayscale-1-rgb: 242, 243, 247;
    --color-grayscale-2: #E2E2EA;
    --color-grayscale-3: #C6CBD9;
    --color-grayscale-4: #9A9AAF;
    --color-grayscale-5: #7E7E8F;
    --color-grayscale-6: #656575;
    --color-grayscale-7: #535362;
    --color-grayscale-8: #2E2E3A;
    --color-grayscale-9: #262631;
    --color-grayscale-10: #16161E;
    --color-grayscale-11: #07070C;

    --color-main-1: #F6F0FF;
    --color-main-2: #ECE0FD;
    --color-main-3: #E3D0FD;
    --color-main-4: #D9C0FC;
    --color-main-5: #D0B1FB;
    --color-main-6: #C7A1FA;
    --color-main-7: #BE92FA;
    --color-main-8: #B481F9;
    --color-main-9: #AB72F8;
    --color-main-10: #A162F7;
}

/* range slider pips (used for Age Range) */
.rangeSlider {
    --slider-accent: var(--color-primary);
    --slider-accent-100: var(--color-main-7);
    --slider-base: var(--color-grayscale-5);
    --slider-base-100: var(--color-grayscale-3);
    --slider-bg: var(--color-grayscale-2);
    --slider-fg: var(--color-grayscale-7);
    --handle-inactive: var(--color-primary);
}

.rangeSlider.gradient {
    --slider-bg: var(--color-grayscale-2);
}

.rangeSlider.rsPips.gradient {
    margin-bottom: 1em;
    height: 2px;
}

.rangeSlider.gradient .rangeHandle {
    top: 1px;
}

.rangeSlider.gradient .rangePips {
    bottom: -0.5em;
    left: -1px;
    --pip: var(--color-grayscale-2);
    --pip-active: var(--color-grayscale-2);
    --pip-hover: var(--color-grayscale-2);
}

.rangeSlider.gradient .rangePips .rsPip {
    width: 2px;
    height: 0.57em;
    top: 0.15em;
    border-radius: 1px;
}