@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lcdo7z9xd2.bundle.scp.css';

/* /Components/Layout/CultureSwitcher.razor.rz.scp.css */
a[b-h16pn0ylrp] {
    /*flex items-center text-sm text-gray-600 hover:text-gray-900*/

    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: #4b5563;
}

    a:hover[b-h16pn0ylrp] {
        color: #111827;
    }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-6ss0mqqq6s] {
    position: relative;
    display: flex;
    flex-direction: column;
    /* 343 = 768px - 425px */
    padding: 1rem clamp(1em, -0.239em + 4.665vw, 2em);
    visibility: hidden;
    transition: visibility linear 1s;
}
    .page.ready[b-6ss0mqqq6s] {
        visibility: visible;
    }

main[b-6ss0mqqq6s] {
    flex: 1;
    max-width: 50rem;
    margin: 0 auto;
    padding: 1em;
    z-index: 1;
}

#tools[b-6ss0mqqq6s] {
    position: absolute;
    top: .5rem;
    right: .5rem;
    gap: 0.5rem;
    display: flex;
    align-items: center;
    z-index: 2;
}

@media (width <= 768px) {
    [b-6ss0mqqq6s]#tools fluent-button::part(content) {
        display: none;
    }

    [b-6ss0mqqq6s]#tools fluent-button::part(start) {
        margin-inline-end: 0;
    }
}

#watermark-container[b-6ss0mqqq6s] {
    position: fixed;
    bottom: 0;
    right: 0;
    pointer-events: none; /* so it doesn't block clicks */
    overflow: hidden;
    width: 300px;
    height: 300px;
}

    #watermark-container img[b-6ss0mqqq6s] {
        position: absolute;
        bottom: 0;
        right: 0;
        /* Scale or translate the image as needed */
        width: clamp(150px, 20vw, 300px);
        height: clamp(150px, 20vw, 300px);
        max-width: none;
        max-height: none;
        /* Adjust positioning to show top-left portion */
        transform: translate(22%, 22%);
        opacity: 0.1; /* optional: to make it a subtle watermark */
    }

#blazor-error-ui[b-6ss0mqqq6s] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-6ss0mqqq6s] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Pages/Errors/404.razor.rz.scp.css */
h1[b-fc9yd4yl7e] {
    margin: 4em 0 1em;
}
/* /Components/Pages/Events/RegistrationForm.razor.rz.scp.css */
main[b-m9sl5pfit4] {
    border-radius: .5em;
    background-color: white;
    box-shadow: 0 .25em .5em rgba(0,0,0,0.25);
}

/**
 * Typography
 * ---------------------------------------- */

[b-m9sl5pfit4] h1 {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1.5rem !important;
    text-wrap: balance;
}

[b-m9sl5pfit4] h2 {
    font-size: 1.875rem;
    font-weight: 700;
    margin-bottom: 1rem !important;
}

[b-m9sl5pfit4] h3 {
    font-size: 1.5rem;
    line-height: 1.5rem !important;
    margin-bottom: 1rem !important;
}

[b-m9sl5pfit4] h4 {
    font-size: 1rem;
    line-height: 1.5rem !important;
    margin-bottom: 0 !important;
    font-style: italic !important;
    margin-left: 1.25rem !important;
}

[b-m9sl5pfit4] h4::before {
    content: '@';
    margin-left: -1.25rem;
    margin-right: .25rem;
}

[b-m9sl5pfit4] p.description {
    font-size: 1.125rem !important;
    line-height: 1.5 !important;
    border-top: 1px solid black;
    padding-top: 1.5rem;
    margin-bottom: 1.5rem !important;
}

/**
 * Form Layout
 * ---------------------------------------- */

[b-m9sl5pfit4] form {
    border-top: 1px solid black;
    padding-top: 1.5rem;
}

.row[b-m9sl5pfit4] {
    width: 100%;
}

.flex-row[b-m9sl5pfit4] {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

[b-m9sl5pfit4] fluent-text-field {
    font-size: 1.5rem;
    width: 100%;
}

[b-m9sl5pfit4] fluent-text-field::part(root) {
    height: 1.75em;
}

[b-m9sl5pfit4] fluent-button {
    font-size: 1.25rem;
    height: 2.5em;
}

#email-field[b-m9sl5pfit4] {
    flex: 1 1 0;
    width: 100%;
    min-width: 20em;
}

[b-m9sl5pfit4].instructions li {
    margin-top: 0.5rem;
}

#submit[b-m9sl5pfit4] {
    margin: 0 auto;
}

/**
 * PIN Fields
 * ---------------------------------------- */

#pin-group[b-m9sl5pfit4] {
    display: flex;
    align-items: center;
}

    #pin-group[b-m9sl5pfit4]  #pin {
        width: 10em;
        margin-bottom: .1em;
    }

    #pin-group[b-m9sl5pfit4]  fluent-button {
        font-size: 1rem;
        width: 7.75em;
        height: 2.5em;
        margin-top: -2px;
        margin-left: calc(-7.75em - 1px);
    }

/**
 * Validation
 * ---------------------------------------- */

ul.validation-errors[b-m9sl5pfit4] {
    padding: 0 1.5em;
    margin-bottom: 1.5rem;
}

li.validation-message[b-m9sl5pfit4] {
    color: var(--error);
    list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="%23BC2F32"><path d="M6 11A5 5 0 1 0 6 1a5 5 0 0 0 0 10Zm-.75-2.75a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Zm.26-4.84a.5.5 0 0 1 .98 0l.01.09v2.59a.5.5 0 0 1-1 0V3.41Z"></path></svg>');
}

    li.validation-message[b-m9sl5pfit4]::marker {
        /* color: var(--error); This should work, along with fill="currentColor" in the SVG, but it doesn't. */
        font-size: 1.8em;
        line-height: .1;
    }
/* /Components/Pages/Events/RegistrationSuccess.razor.rz.scp.css */
h1[b-bukh2advs3] {
    margin: 4em 0 1em;
}