/* _content/AstroFormsFrontendServer.App/Components/Common/Admins/AddressInputAdmin.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {
    .address-input-container[b-8qngg4wdfq] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2.5rem;
        padding: 0.75rem;
        width: 100%;
        max-width: 30rem;
    }

    .address-input[b-8qngg4wdfq] {
        width: 100%;
        padding: 0.75rem;
        padding-right: 2.5rem;
        font-size: 0.85rem;
        background: transparent;
        border: none;
        outline: none;
        border-bottom: 2px solid var(--brand);
    }

    .address-input[b-8qngg4wdfq]::placeholder {
        color: var(--text-muted);
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {
    .address-input-container[b-8qngg4wdfq] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2.5rem;
        padding: 0.75rem;
        width: 100%;
        max-width: 30rem;
    }

    .address-input[b-8qngg4wdfq] {
        width: 100%;
        padding: 0.75rem;
        padding-right: 2.5rem;
        font-size: 0.85rem;
        background: transparent;
        border: none;
        outline: none;
        border-bottom: 2px solid var(--brand);
    }

    .address-input[b-8qngg4wdfq]::placeholder {
        color: var(--text-muted);
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {

}
/* _content/AstroFormsFrontendServer.App/Components/Common/Admins/DateInputAdmin.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1441px) {

    .field-group[b-hj1wgxweha] {
        width: 100%;
        max-width: 30rem;
    }

    .datepicker[b-hj1wgxweha] {
        position: relative;
        display: inline-block;
        width: 100%;
    }

    .datepicker-input-container[b-hj1wgxweha] {
        position: relative;
        display: inline-block;
        width: 100%;
    }

    .datepicker-input[b-hj1wgxweha] {
        width: 100%;
        padding: 0.75rem;
        padding-right: 2.5rem;
        font-size: 0.85rem;
        background: transparent;
        border: none;
        outline: none;
        border-bottom: 2px solid var(--brand);
        color: var(--text-color);
    }

    .datepicker-icon[b-hj1wgxweha] {
        position: absolute;
        right: 0.15rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.25rem;
        color: var(--brand);
        pointer-events: auto;
        background: transparent;
        border-radius: 50%;
        width: 2.25rem;
        height: 2.25rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .datepicker-icon:hover[b-hj1wgxweha] {
        background: var(--light-color);
        cursor: pointer;
    }

    .datepicker-calendar[b-hj1wgxweha] {
        position: absolute;
        top: 100%;
        right: 0;
        background: var(--dark-color);
        border: 1px solid var(--light-color);
        border-radius: var(--border-radius);
        z-index: 5;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        width: 18.25rem;
    }

    .datepicker-header[b-hj1wgxweha] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        padding-top: 1rem;
    }

    .action-button[b-hj1wgxweha] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        color: var(--brand);
        font-size: 0.75rem;
    }

    .action-button:hover[b-hj1wgxweha] {
        background: var(--light-color);
        cursor: pointer;
    }

    .month-label[b-hj1wgxweha] {
        font-weight: 500;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        color: var(--text-color);
    }

    .month-label:hover[b-hj1wgxweha] {
        cursor: pointer;
        background: var(--light-color);
    }

    .month-label-disabled[b-hj1wgxweha] {
        font-weight: 500;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        color: var(--text-muted);
    }

    .datepicker-days[b-hj1wgxweha] {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        text-align: center;
        padding: 0.5rem;
    }

    .datepicker-day-name[b-hj1wgxweha] {
        padding: 0.5rem;
        margin: 2px;
        font-size: 0.75rem;
        font-weight: bold;
        opacity: 0.4;
        color: var(--text-muted);
    }

    .datepicker-day[b-hj1wgxweha] {
        padding: 0.5rem;
        margin: 2px;
        cursor: pointer;
        font-size: 0.75rem;
        border-radius: 4px;
        transition: background 0.3s;
        color: var(--text-color);
    }

    .datepicker-day:hover[b-hj1wgxweha] {
        background: var(--brand) !important;
        color: var(--dark-color);
    }

    .datepicker-day.selected[b-hj1wgxweha] {
        background: var(--brand) !important;
        color: var(--dark-color);
    }

    .datepicker-day.out-of-month[b-hj1wgxweha] {
        opacity: 0.5;
        pointer-events: none;
    }

    .datepicker-day.today[b-hj1wgxweha] {
        background-color: var(--light-color);
    }

    /***************** Handle Month Selection *****************/

    .datepicker-months[b-hj1wgxweha] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .datepicker-month[b-hj1wgxweha] {
        padding: 0.5rem 0.75rem;
        text-align: center;
        border-radius: 6px;
        cursor: pointer;
        background-color: transparent;
        transition: background-color 0.2s ease;
        color: var(--text-color);
    }

    .datepicker-month:hover[b-hj1wgxweha] {
        background: var(--brand) !important;
        color: var(--dark-color);
    }

    .datepicker-month-selected[b-hj1wgxweha] {
        padding: 0.5rem 0.75rem;
        text-align: center;
        border-radius: 6px;
        background-color: var(--light-color);
        cursor: pointer;
        color: var(--text-color);
    }

    /***************** Handle Year Selection *****************/

    .datepicker-years[b-hj1wgxweha] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .datepicker-year[b-hj1wgxweha] {
        padding: 0.5rem 0.75rem;
        text-align: center;
        border-radius: 6px;
        background-color: transparent;
        cursor: pointer;
        transition: background-color 0.2s ease;
        color: var(--text-color);
    }

    .datepicker-year:hover[b-hj1wgxweha] {
        background: var(--brand) !important;
        color: var(--dark-color);
    }

    .datepicker-year-selected[b-hj1wgxweha] {
        padding: 0.5rem 0.75rem;
        text-align: center;
        border-radius: 6px;
        background-color: var(--light-color);
        cursor: pointer;
        color: var(--text-color);
    }

}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1440px) {

    .field-group[b-hj1wgxweha] {
        width: 100%;
        max-width: 30rem;
    }

    .datepicker[b-hj1wgxweha] {
        position: relative;
        display: inline-block;
        width: 100%;
    }

    .datepicker-input-container[b-hj1wgxweha] {
        position: relative;
        display: inline-block;
        width: 100%;
    }

    .datepicker-input[b-hj1wgxweha] {
        width: 100%;
        padding: 0.65rem;
        padding-right: 2.5rem;
        font-size: 0.75rem;
        background: transparent;
        border: none;
        outline: none;
        border-bottom: 2px solid var(--brand);
        color: var(--text-color);
    }

    .datepicker-icon[b-hj1wgxweha] {
        position: absolute;
        right: 0.25rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.85rem;
        color: var(--brand);
        pointer-events: auto;
        background: transparent;
        border-radius: 50%;
        width: 1.75rem;
        height: 1.75rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .datepicker-icon:hover[b-hj1wgxweha] {
        background: var(--light-color);
        cursor: pointer;
    }

    .datepicker-calendar[b-hj1wgxweha] {
        position: absolute;
        top: 100%;
        right: 0;
        background: var(--dark-color);
        border: 1px solid var(--light-color);
        border-radius: var(--border-radius);
        z-index: 5;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        width: 15rem;
    }

    .datepicker-header[b-hj1wgxweha] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        padding-top: 0.5rem;
    }

    .action-button[b-hj1wgxweha] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        color: var(--brand);
        font-size: 0.65rem;
    }

    .action-button:hover[b-hj1wgxweha] {
        background: var(--light-color);
        cursor: pointer;
    }

    .month-label[b-hj1wgxweha] {
        font-weight: 500;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        font-size: 0.75rem;
        color: var(--text-color);
    }

    .month-label:hover[b-hj1wgxweha] {
        cursor: pointer;
        background: var(--light-color);
        color: var(--text-muted);
    }

    .month-label-disabled[b-hj1wgxweha] {
        font-weight: 500;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        font-size: 0.75rem;
    }

    .datepicker-days[b-hj1wgxweha] {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        text-align: center;
        padding: 0.35rem;
    }

    .datepicker-day-name[b-hj1wgxweha] {
        padding: 0.35rem;
        margin: 1px;
        font-size: 0.55rem;
        font-weight: bold;
        opacity: 0.4;
        color: var(--text-muted);
    }

    .datepicker-day[b-hj1wgxweha] {
        padding: 0.35rem;
        margin: 1px;
        cursor: pointer;
        font-size: 0.65rem;
        border-radius: 4px;
        transition: background 0.3s;
        color: var(--text-color);
    }

    .datepicker-day:hover[b-hj1wgxweha] {
        background: var(--brand) !important;
        color: var(--dark-color);
    }

    .datepicker-day.selected[b-hj1wgxweha] {
        background: var(--brand) !important;
        color: var(--dark-color);
    }

    .datepicker-day.out-of-month[b-hj1wgxweha] {
        opacity: 0.5;
        pointer-events: none;
    }

    .datepicker-day.today[b-hj1wgxweha] {
        background-color: var(--light-color);
    }

    /***************** Handle Month Selection *****************/

    .datepicker-months[b-hj1wgxweha] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .datepicker-month[b-hj1wgxweha] {
        padding: 0.5rem 0.75rem;
        text-align: center;
        border-radius: 6px;
        cursor: pointer;
        background-color: transparent;
        transition: background-color 0.2s ease;
        font-size: 0.85rem;
        color: var(--text-color);
    }

    .datepicker-month:hover[b-hj1wgxweha] {
        background: var(--brand) !important;
        color: var(--dark-color);
    }

    .datepicker-month-selected[b-hj1wgxweha] {
        padding: 0.5rem 0.75rem;
        text-align: center;
        border-radius: 6px;
        background-color: var(--light-color);
        cursor: pointer;
        font-size: 0.85rem;
        color: var(--text-color);
    }

    /***************** Handle Year Selection *****************/

    .datepicker-years[b-hj1wgxweha] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .datepicker-year[b-hj1wgxweha] {
        padding: 0.5rem 0.75rem;
        text-align: center;
        border-radius: 6px;
        background-color: transparent;
        cursor: pointer;
        transition: background-color 0.2s ease;
        font-size: 0.85rem;
        color: var(--text-color);
    }

    .datepicker-year:hover[b-hj1wgxweha] {
        background: var(--brand) !important;
        color: var(--dark-color);
    }

    .datepicker-year-selected[b-hj1wgxweha] {
        padding: 0.5rem 0.75rem;
        text-align: center;
        border-radius: 6px;
        background-color: var(--light-color);
        cursor: pointer;
        font-size: 0.85rem;
        color: var(--text-color);
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    .background[b-hj1wgxweha] {
        display: none;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Admins/DropdownAdmin.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {
    .filter-title-group[b-gplsbfrieh] {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: start;
        gap: 0.5rem;
    }

    .dropdown-container[b-gplsbfrieh] {
        position: relative;
        width: 100%;
        max-width: 30rem;
    }

    .filter-column[b-gplsbfrieh] {
        background: var(--light-color);
        border-radius: var(--border-radius);
        height: 3rem;
        color: var(--text-color);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        font-size: 0.85rem;
        font-weight: 500;
        cursor: pointer;
        padding: 1rem;
        margin-top: 1rem;
    }

    .filter-column:hover[b-gplsbfrieh] {
        background: var(--brand);
        color: var(--dark-color);
    }

    /**************** Dropdown Option ****************/

    .option-count[b-gplsbfrieh] {
        color: var(--text-color);
        font-weight: 500;
        font-size: 0.85rem;
        margin: 0.5rem;
    }

    .multiple-choice-list[b-gplsbfrieh] {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin-top: 1.5rem;
        max-height: 22rem;
        overflow-y: auto;
    }

    .multiple-choice-group-disabled[b-gplsbfrieh] {
        background: var(--light-color);
        border-radius: var(--border-radius);
        display: flex;
        align-items: center;
        justify-content: start;
        padding: 1rem 1.25rem;
        height: 4rem;
    }

    .multiple-choice-group[b-gplsbfrieh] {
        background: var(--light-color);
        border-radius: var(--border-radius);
        display: flex;
        align-items: center;
        justify-content: start;
        padding: 1rem 1.25rem;
        height: 4rem;
    }

    .multiple-choice-group:hover[b-gplsbfrieh] {
        cursor: pointer;
    }

    .multiple-choice-text-input[b-gplsbfrieh] {
        width: 95%;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1.25rem;
        font-weight: 500;
    }

    .multiple-choice-text-input[b-gplsbfrieh]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    .multiple-choice-text[b-gplsbfrieh] {
        width: 95%;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1.25rem;
        font-weight: 500;
    }

    /**************** Endings Modal ****************/

    .modal[b-gplsbfrieh] {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.75);
        display: block;
        z-index: 3;
    }

    .modal-content[b-gplsbfrieh] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: var(--dark-color);
        padding-top: 3rem;
        padding-bottom: 2rem;
        padding-left: 2rem;
        padding-right: 2rem;
        border-radius: var(--border-radius);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        z-index: 3;
        width: 25rem;
        height: fit-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .expanded[b-gplsbfrieh] {
        width: 30rem;
        padding-top: 1rem !important;
    }

    .step-title-group[b-gplsbfrieh] {
        display: flex;
        flex-direction: column;
        align-items: start;
        width: 100%;
        padding-top: 1rem;
    }

    .step-title[b-gplsbfrieh] {
        /*font-size: 1.75rem;*/
        font-size: 1.5rem;
        color: var(--text-color);
        font-weight: 700;
    }

    .step-description[b-gplsbfrieh] {
        /*margin-top: 0.25rem;*/
        font-size: 0.75rem;
        width: 100%;
        color: var(--text-color);
        display: block;
    }

    .delete-button[b-gplsbfrieh] {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: transparent;
        color: var(--text-color);
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }

    .delete-button:hover[b-gplsbfrieh] {
        background: var(--error-color);
        cursor: pointer;
    }

    .action-button-group[b-gplsbfrieh] {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 1rem;
    }

    .action-button[b-gplsbfrieh] {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: transparent;
        color: var(--text-color);
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }

    .action-button:hover[b-gplsbfrieh] {
        background: var(--brand);
        color: var(--dark-color);
        cursor: pointer;
    }

    .modal-options[b-gplsbfrieh] {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 1rem;
        width: 100%;
        gap: 1rem;
    }

    .modal-save[b-gplsbfrieh] {
        background-color: transparent;
        color: var(--text-color);
        padding: 1rem 1.5rem;
        border: 2px solid var(--brand);
        border-radius: 50px;
        cursor: pointer;
        font-weight: 600;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        width: 50%;
    }

    .modal-save:hover[b-gplsbfrieh] {
        background-color: var(--brand);
        color: var(--dark-color);
    }

    .modal-cancel[b-gplsbfrieh] {
        background-color: transparent;
        color: var(--text-color);
        padding: 1rem 1.5rem;
        border: 2px solid transparent;
        border-radius: 50px;
        cursor: pointer;
        font-weight: 600;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        width: 50%;
    }

    .modal-cancel:hover[b-gplsbfrieh] {
        background-color: var(--light-color);
        color: var(--text-color);
    }

    .check-icon[b-gplsbfrieh] {
        margin-right: 1rem;
    }

    .error-message[b-gplsbfrieh] {
        color: var(--error-color);
        font-weight: 500;
        font-size: 0.75rem;
        margin-top: 0.5rem;
    }

    .empty-state[b-gplsbfrieh] {
        color: var(--text-color);
        text-align: center;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/
@media screen and (min-width: 992px) and (max-width: 1625px) {
    .filter-title-group[b-gplsbfrieh] {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: start;
        gap: 0.5rem;
    }

    .dropdown-container[b-gplsbfrieh] {
        position: relative;
        width: 100%;
        max-width: 30rem;
    }

    .filter-column[b-gplsbfrieh] {
        background: var(--light-color);
        border-radius: var(--border-radius);
        height: 2.5rem;
        color: var(--text-color);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        font-size: 0.75rem;
        font-weight: 500;
        cursor: pointer;
        padding: 1rem;
        margin-top: 1rem;
    }

    .filter-column:hover[b-gplsbfrieh] {
        background: var(--brand);
        color: var(--dark-color);
    }

    /**************** Dropdown Option ****************/

    .option-count[b-gplsbfrieh] {
        color: var(--text-color);
        font-weight: 500;
        font-size: 0.75rem;
        margin: 0.5rem;
    }

    .multiple-choice-list[b-gplsbfrieh] {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin-top: 1.5rem;
        max-height: 22rem;
        overflow-y: auto;
    }

    .multiple-choice-group-disabled[b-gplsbfrieh] {
        background: var(--light-color);
        border-radius: var(--border-radius);
        display: flex;
        align-items: center;
        justify-content: start;
        padding: 1rem 1.25rem;
        height: 4rem;
    }

    .multiple-choice-group[b-gplsbfrieh] {
        background: var(--light-color);
        border-radius: var(--border-radius);
        display: flex;
        align-items: center;
        justify-content: start;
        padding: 1rem 1.25rem;
        height: 4rem;
    }

    .multiple-choice-group:hover[b-gplsbfrieh] {
        cursor: pointer;
    }

    .multiple-choice-text-input[b-gplsbfrieh] {
        width: 95%;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1.25rem;
        font-weight: 500;
    }

    .multiple-choice-text-input[b-gplsbfrieh]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    .multiple-choice-text[b-gplsbfrieh] {
        width: 95%;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1.25rem;
        font-weight: 500;
    }

    /**************** Endings Modal ****************/

    .modal[b-gplsbfrieh] {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.75);
        display: block;
        z-index: 3;
    }

    .modal-content[b-gplsbfrieh] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: var(--dark-color);
        padding-top: 3rem;
        padding-bottom: 2rem;
        padding-left: 2rem;
        padding-right: 2rem;
        border-radius: var(--border-radius);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        z-index: 3;
        width: 25rem;
        height: fit-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .expanded[b-gplsbfrieh] {
        width: 30rem;
        padding-top: 1rem !important;
    }

    .step-title-group[b-gplsbfrieh] {
        display: flex;
        flex-direction: column;
        align-items: start;
        width: 100%;
        padding-top: 1rem;
    }

    .step-title[b-gplsbfrieh] {
        /*font-size: 1.75rem;*/
        font-size: 1.25rem;
        color: var(--text-color);
        font-weight: 700;
    }

    .step-description[b-gplsbfrieh] {
        /*margin-top: 0.25rem;*/
        font-size: 0.75rem;
        width: 100%;
        color: var(--text-color);
        display: block;
    }

    .delete-button[b-gplsbfrieh] {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: transparent;
        color: var(--text-color);
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.75rem;
    }

    .delete-button:hover[b-gplsbfrieh] {
        background: var(--error-color);
        cursor: pointer;
    }

    .action-button-group[b-gplsbfrieh] {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 1rem;
    }

    .action-button[b-gplsbfrieh] {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: transparent;
        color: var(--text-color);
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }

    .action-button:hover[b-gplsbfrieh] {
        background: var(--brand);
        color: var(--dark-color);
        cursor: pointer;
    }

    .modal-options[b-gplsbfrieh] {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 1rem;
        width: 100%;
        gap: 1rem;
    }

    .modal-save[b-gplsbfrieh] {
        background-color: transparent;
        color: var(--text-color);
        padding: 0.85rem 1.25rem;
        border: 2px solid var(--brand);
        border-radius: 50px;
        cursor: pointer;
        font-weight: 600;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        width: 50%;
    }

    .modal-save:hover[b-gplsbfrieh] {
        background-color: var(--brand);
        color: var(--dark-color);
    }

    .modal-cancel[b-gplsbfrieh] {
        background-color: transparent;
        color: var(--text-color);
        padding: 0.85rem 1.25rem;
        border: 2px solid transparent;
        border-radius: 50px;
        cursor: pointer;
        font-weight: 600;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        width: 50%;
    }

    .modal-cancel:hover[b-gplsbfrieh] {
        background-color: var(--light-color);
        color: var(--text-color);
    }

    .check-icon[b-gplsbfrieh] {
        margin-right: 0.65rem;
    }

    .error-message[b-gplsbfrieh] {
        color: var(--error-color);
        font-weight: 500;
        font-size: 0.65rem;
        margin-top: 0.35rem;
    }

    .empty-state[b-gplsbfrieh] {
        color: var(--text-color);
        text-align: center;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/
@media screen and (max-width: 991px) {

}
/* _content/AstroFormsFrontendServer.App/Components/Common/Admins/EmailInputAdmin.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {
    .form-input-large[b-u950endaip] {
        width: 100%;
        font-size: 1rem;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1.75rem;
        font-weight: 500;
    }

    .form-input-large[b-u950endaip]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {
    .form-input-large[b-u950endaip] {
        width: 100%;
        font-size: 1rem;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1.25rem;
        font-weight: 500;
    }

    .form-input-large[b-u950endaip]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {

}
/* _content/AstroFormsFrontendServer.App/Components/Common/Admins/FileUploadAdmin.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {

    .image-drop-zone[b-au51ltst2z] {
        width: 100%;
        height: 30rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        border-radius: var(--border-radius);
    }

    .upload-icon[b-au51ltst2z] {
        color: var(--text-color);
        font-size: 8rem;
    }

    .drop-file-message[b-au51ltst2z] {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-color);
    }

    .or-message[b-au51ltst2z] {
        font-size: 1rem;
        font-weight: 500;
        color: var(--text-muted);
        opacity: 0.5;
        margin-top: 1rem;
        margin-bottom: 1.25rem;
    }

    .files-supported-message-group[b-au51ltst2z] {
        margin-top: 4rem;
        margin-bottom: 1.25rem;
        text-align: center;
    }

    .files-supported-message[b-au51ltst2z] {
        font-size: 1rem;
        font-weight: 500;
        color: var(--text-color);
        opacity: 0.5;
    }

    .big-upload-button[b-au51ltst2z] {
        border-radius: 50rem;
        background: var(--brand);
        color: var(--dark-color);
        height: 3rem;
        width: 11rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border: none;
        font-weight: 700;
    }

    .big-upload-button:hover[b-au51ltst2z] {
        filter: brightness(1.20);
    }

    .post-icon[b-au51ltst2z] {
        font-size: 1.25rem;
        margin-right: 0.5rem;
    }

    .post-text[b-au51ltst2z] {
        font-size: 1rem;
        font-weight: 500;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {

    .image-drop-zone[b-au51ltst2z] {
        width: 100%;
        height: 25rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        border-radius: var(--border-radius);
    }

    .upload-icon[b-au51ltst2z] {
        color: var(--text-color);
        font-size: 5rem;
    }

    .drop-file-message[b-au51ltst2z] {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text-color);
    }

    .or-message[b-au51ltst2z] {
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--text-muted);
        opacity: 0.5;
        margin-top: 1rem;
        margin-bottom: 1.25rem;
    }

    .files-supported-message-group[b-au51ltst2z] {
        margin-top: 3rem;
        margin-bottom: 1.25rem;
        text-align: center;
    }

    .files-supported-message[b-au51ltst2z] {
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--text-color);
        opacity: 0.5;
    }

    .big-upload-button[b-au51ltst2z] {
        border-radius: 50rem;
        background: var(--brand);
        color: var(--dark-color);
        height: 3rem;
        width: 10rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border: none;
        box-shadow: 0 2px 4px 0 var(--shadow-color);
    }

    .big-upload-button:hover[b-au51ltst2z] {
        background: var(--dark-color);
    }

    .post-icon[b-au51ltst2z] {
        font-size: 1.25rem;
        margin-right: 0.5rem;
    }

    .post-text[b-au51ltst2z] {
        font-size: 1rem;
        font-weight: 500;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    .image-drop-zone[b-au51ltst2z] {
        display: none;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Admins/LongAnswerAdmin.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {
    .long-form-input[b-9fu7uw0ojl] {
        width: 100%;
        font-size: 1rem;
        background: var(--light-color);
        color: var(--text-color);
        text-align: left;
        font-size: 1.25rem;
        font-weight: 500;
        border-radius: var(--border-radius);
        height: 15rem;
        resize: none;
        border-style: none;
        padding: 0.75rem;
    }

    .long-form-input[b-9fu7uw0ojl]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/
@media screen and (min-width: 992px) and (max-width: 1625px) {
    .long-form-input[b-9fu7uw0ojl] {
        width: 100%;
        font-size: 1rem;
        background: var(--light-color);
        color: var(--text-color);
        text-align: left;
        font-size: 1rem;
        font-weight: 500;
        border-radius: var(--border-radius);
        height: 12rem;
        resize: none;
        border-style: none;
        padding: 0.65rem;
    }

    .long-form-input[b-9fu7uw0ojl]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/
@media screen and (max-width: 991px) {
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Admins/MultipleChoiceAdmin.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {
    .error-message[b-05lqr9rm9v] {
        color: var(--error-color);
        font-weight: 500;
        font-size: 0.75rem;
        margin-top: 0.5rem;
    }

    .action-button-group[b-05lqr9rm9v] {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 1rem;
    }

    .action-button[b-05lqr9rm9v] {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: transparent;
        color: var(--text-color);
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }

    .action-button:hover[b-05lqr9rm9v] {
        background: var(--brand);
        color: var(--dark-color);
        cursor: pointer;
    }

    /**************** Multiple Choice Questions ****************/

    .choice-list[b-05lqr9rm9v] {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .choice-group[b-05lqr9rm9v] {
        background: var(--light-color);
        border: 2px solid transparent;
        border-radius: var(--border-radius);
        display: flex;
        align-items: center;
        justify-content: start;
        padding: 0.5rem;
    }

    .choice-group:hover[b-05lqr9rm9v] {
        border: 2px solid var(--brand);
        transition: 0.5s;
        cursor: pointer;
    }

    .choice-letter[b-05lqr9rm9v] {
        color: var(--brand);
        background: var(--dark-color);
        font-size: 2rem;
        border-radius: var(--border-radius);
        width: 3.5rem;
        height: 3.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        margin-right: 0.75rem;
    }

    .choice-text-input[b-05lqr9rm9v] {
        width: 80%;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1.5rem;
        font-weight: 500;
    }

    .choice-text-input[b-05lqr9rm9v]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    .choice-text[b-05lqr9rm9v] {
        color: var(--text-color);
        font-size: 1.5rem;
        margin-left: 0.75rem;
        font-weight: 500;
    }

    .delete-button[b-05lqr9rm9v] {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: transparent;
        color: var(--text-color);
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }

    .delete-button:hover[b-05lqr9rm9v] {
        background: var(--error-color);
        cursor: pointer;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {
    .error-message[b-05lqr9rm9v] {
        color: var(--error-color);
        font-weight: 500;
        font-size: 0.65rem;
        margin-top: 0.35rem;
    }

    .action-button-group[b-05lqr9rm9v] {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 1rem;
    }

    .action-button[b-05lqr9rm9v] {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: transparent;
        color: var(--text-color);
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }

    .action-button:hover[b-05lqr9rm9v] {
        background: var(--brand);
        color: var(--dark-color);
        cursor: pointer;
    }

    /**************** Multiple Choice Questions ****************/

    .choice-list[b-05lqr9rm9v] {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .choice-group[b-05lqr9rm9v] {
        background: var(--light-color);
        border: 2px solid transparent;
        border-radius: var(--border-radius);
        display: flex;
        align-items: center;
        justify-content: start;
        padding: 0.5rem;
    }

    .choice-group:hover[b-05lqr9rm9v] {
        border: 2px solid var(--brand);
        transition: 0.5s;
        cursor: pointer;
    }

    .choice-letter[b-05lqr9rm9v] {
        color: var(--brand);
        background: var(--dark-color);
        font-size: 2rem;
        border-radius: 10px;
        width: 3rem;
        height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        margin-right: 0.75rem;
    }

    .choice-text-input[b-05lqr9rm9v] {
        width: 80%;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1rem;
        font-weight: 500;
    }

    .choice-text-input[b-05lqr9rm9v]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    .choice-text[b-05lqr9rm9v] {
        color: var(--text-color);
        font-size: 1.5rem;
        margin-left: 0.75rem;
        font-weight: 500;
    }

    .delete-button[b-05lqr9rm9v] {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: transparent;
        color: var(--text-color);
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.75rem;
    }

    .delete-button:hover[b-05lqr9rm9v] {
        background: var(--error-color);
        cursor: pointer;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {

}
/* _content/AstroFormsFrontendServer.App/Components/Common/Admins/OpinionScaleAdmin.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {
    .opinion-scale-block[b-4172kj24nh] {
        display: inline-flex;
        flex-direction: column;
        gap: 0.5rem;
        width: max-content;
    }

    .opinion-scale-row[b-4172kj24nh] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .opinion-scale-pill[b-4172kj24nh] {
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 8px;
        padding: 0 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--light-color);
        color: var(--text-color);
        font-size: 1.35rem;
        border: 2px solid var(--brand);
    }

    .opinion-scale-pill:hover[b-4172kj24nh] {
        background: var(--brand);
        color: var(--dark-color);
        cursor: pointer;
    }

    .rating-row-labels[b-4172kj24nh] {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .form-input-rating[b-4172kj24nh] {
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        font-size: 1rem;
        font-weight: 300;
        max-width: 5rem;
    }

    .left[b-4172kj24nh] {
        text-align: left;
    }

    .right[b-4172kj24nh] {
        text-align: right;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {
    .opinion-scale-block[b-4172kj24nh] {
        display: inline-flex;
        flex-direction: column;
        gap: 0.5rem;
        width: max-content;
    }

    .opinion-scale-row[b-4172kj24nh] {
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

    .opinion-scale-pill[b-4172kj24nh] {
        width: 3rem;
        height: 3rem;
        border-radius: 8px;
        padding: 0 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--light-color);
        color: var(--text-color);
        font-size: 1.25rem;
        border: 2px solid var(--brand);
    }

    .opinion-scale-pill:hover[b-4172kj24nh] {
        background: var(--brand);
        color: var(--dark-color);
        cursor: pointer;
    }

    .rating-row-labels[b-4172kj24nh] {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .form-input-rating[b-4172kj24nh] {
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        font-size: 0.85rem;
        font-weight: 300;
        max-width: 5rem;
    }

    .left[b-4172kj24nh] {
        text-align: left;
    }

    .right[b-4172kj24nh] {
        text-align: right;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Admins/PhoneInputAdmin.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {
    .phone-input-container[b-kowlx1rxqb] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem;
        width: 100%;
        max-width: 30rem;
    }

    .country-pill[b-kowlx1rxqb] {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.75rem;
        font-size: 0.9rem;
        cursor: pointer;
        background: transparent;
        border-radius: 6px;
    }

    .country-pill:hover[b-kowlx1rxqb] {
        background: var(--light-color);
    }

    .flag[b-kowlx1rxqb] {
        display: inline-block;
        width: 20px;
        height: 15px;
    }

    .country-pill .dial[b-kowlx1rxqb] {
        color: var(--text-color);
    }

    .phone-input[b-kowlx1rxqb] {
        width: 100%;
        padding: 0.75rem;
        padding-right: 2.5rem;
        font-size: 0.85rem;
        background: transparent;
        border: none;
        outline: none;
        border-bottom: 2px solid var(--brand);
    }

    .phone-input[b-kowlx1rxqb]::placeholder {
        color: var(--text-muted);
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {
    .phone-input-container[b-kowlx1rxqb] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem;
        width: 100%;
        max-width: 30rem;
    }

    .country-pill[b-kowlx1rxqb] {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.75rem;
        font-size: 0.9rem;
        cursor: pointer;
        background: transparent;
        border-radius: 6px;
    }

    .country-pill:hover[b-kowlx1rxqb] {
        background: var(--light-color);
    }

    .flag[b-kowlx1rxqb] {
        display: inline-block;
        width: 20px;
        height: 15px;
    }

    .country-pill .dial[b-kowlx1rxqb] {
        color: var(--text-color);
    }

    .phone-input[b-kowlx1rxqb] {
        width: 100%;
        padding: 0.75rem;
        padding-right: 2.5rem;
        font-size: 0.85rem;
        background: transparent;
        border: none;
        outline: none;
        border-bottom: 2px solid var(--brand);
    }

    .phone-input[b-kowlx1rxqb]::placeholder {
        color: var(--text-muted);
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {

}
/* _content/AstroFormsFrontendServer.App/Components/Common/Admins/PictureChoiceAdmin.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {
    .picture-choice-grid[b-lll5i4ny9n] {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0.75rem;
    }

    .picture-choice-card[b-lll5i4ny9n] {
        background: var(--light-color);
        border-radius: var(--border-radius);
        border: 2px solid transparent;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        height: 240px;
    }

    .picture-choice-card.add-card[b-lll5i4ny9n] {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-style: dashed;
    }

    .picture-choice-card:hover[b-lll5i4ny9n] {
        border-color: var(--brand);
    }

    .picture-choice-image-zone[b-lll5i4ny9n] {
        position: relative;
        flex: 1;
        background: var(--dark-color);
        display: flex;
        align-items: stretch;
        justify-content: center;
        border-radius: var(--border-radius);
        margin: 0.25rem;
        overflow: hidden;
    }

    .picture-choice-image-zone img[b-lll5i4ny9n] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: var(--border-radius);
    }

    .picture-choice-image-click[b-lll5i4ny9n] {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .picture-choice-image-click img[b-lll5i4ny9n] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: var(--border-radius);
    }

    .picture-choice-placeholder[b-lll5i4ny9n] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        color: var(--text-muted);
        font-size: 0.85rem;
    }

    .picture-choice-placeholder i[b-lll5i4ny9n] {
        font-size: 1.5rem;
    }

    .picture-choice-image-toolbar[b-lll5i4ny9n] {
        position: absolute;
        top: 0.4rem;
        right: 0.4rem;
        display: flex;
        gap: 0.25rem;
        opacity: 0;
        transform: translateY(-6px);
        transition: opacity 0.15s ease-out, transform 0.15s ease-out;
        z-index: 2;
    }

    .picture-choice-card:hover .picture-choice-image-toolbar[b-lll5i4ny9n] {
        opacity: 1;
        transform: translateY(0);
    }

    .image-tool-button[b-lll5i4ny9n] {
        width: 2rem;
        height: 2rem;
        border-radius: 8px;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(10, 12, 22, 0.9);
        color: #fff;
        font-size: 0.9rem;
        cursor: pointer;
    }

    .image-tool-button:hover[b-lll5i4ny9n] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .picture-choice-footer[b-lll5i4ny9n] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.4rem 0.5rem 0.55rem;
        position: relative;
    }

    .choice-letter[b-lll5i4ny9n] {
        min-width: 1.8rem;
        height: 1.8rem;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        color: var(--brand);
        background: var(--dark-color);
        font-weight: 700;
    }

    .choice-text[b-lll5i4ny9n] {
        flex: 1;
        background: transparent;
        border: none;
        outline: none;
        color: var(--text-color);
        font-size: 0.85rem;
    }

    .choice-text[b-lll5i4ny9n]::placeholder {
        color: var(--text-muted);
    }

    .choice-delete[b-lll5i4ny9n] {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: transparent;
        color: var(--text-color);
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
        position: absolute;
        right: 0.5rem;
        border: none;
    }

    .choice-delete:hover[b-lll5i4ny9n] {
        background: var(--error-color);
        cursor: pointer;
    }

    .picture-choice-hint[b-lll5i4ny9n] {
        margin-top: 0.75rem;
        font-size: 0.8rem;
        color: var(--text-muted);
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {
    .picture-choice-grid[b-lll5i4ny9n] {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0.5rem;
    }

    .picture-choice-card[b-lll5i4ny9n] {
        background: var(--light-color);
        border-radius: var(--border-radius);
        border: 2px solid transparent;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        height: 220px;
    }

    .picture-choice-card.add-card[b-lll5i4ny9n] {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-style: dashed;
    }

    .picture-choice-card:hover[b-lll5i4ny9n] {
        border-color: var(--brand);
    }

    .picture-choice-image-zone[b-lll5i4ny9n] {
        position: relative;
        flex: 1;
        background: var(--dark-color);
        display: flex;
        align-items: stretch;
        justify-content: center;
        border-radius: var(--border-radius);
        margin: 0.25rem;
        overflow: hidden;
    }

    .picture-choice-image-zone img[b-lll5i4ny9n] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: var(--border-radius);
    }

    .picture-choice-image-click[b-lll5i4ny9n] {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .picture-choice-image-click img[b-lll5i4ny9n] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: var(--border-radius);
    }

    .picture-choice-placeholder[b-lll5i4ny9n] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        color: var(--text-muted);
        font-size: 0.85rem;
    }

    .picture-choice-placeholder i[b-lll5i4ny9n] {
        font-size: 1.5rem;
    }

    .picture-choice-image-toolbar[b-lll5i4ny9n] {
        position: absolute;
        top: 0.4rem;
        right: 0.4rem;
        display: flex;
        gap: 0.25rem;
        opacity: 0;
        transform: translateY(-6px);
        transition: opacity 0.15s ease-out, transform 0.15s ease-out;
        z-index: 2;
    }

    .picture-choice-card:hover .picture-choice-image-toolbar[b-lll5i4ny9n] {
        opacity: 1;
        transform: translateY(0);
    }

    .image-tool-button[b-lll5i4ny9n] {
        width: 2rem;
        height: 2rem;
        border-radius: 8px;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(10, 12, 22, 0.9);
        color: #fff;
        font-size: 0.9rem;
        cursor: pointer;
    }

    .image-tool-button:hover[b-lll5i4ny9n] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .picture-choice-footer[b-lll5i4ny9n] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.4rem 0.5rem 0.55rem;
        position: relative;
    }

    .choice-letter[b-lll5i4ny9n] {
        min-width: 1.8rem;
        height: 1.8rem;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        color: var(--brand);
        background: var(--dark-color);
        font-weight: 700;
    }

    .choice-text[b-lll5i4ny9n] {
        flex: 1;
        background: transparent;
        border: none;
        outline: none;
        color: var(--text-color);
        font-size: 0.85rem;
    }

    .choice-text[b-lll5i4ny9n]::placeholder {
        color: var(--text-muted);
    }

    .choice-delete[b-lll5i4ny9n] {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: transparent;
        color: var(--text-color);
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
        position: absolute;
        right: 0.5rem;
        border: none;
    }

    .choice-delete:hover[b-lll5i4ny9n] {
        background: var(--error-color);
        cursor: pointer;
    }

    .picture-choice-hint[b-lll5i4ny9n] {
        margin-top: 0.75rem;
        font-size: 0.8rem;
        color: var(--text-muted);
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Admins/RatingAdmin.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {
    .rating-block[b-kl52ioerfp] {
        display: inline-flex;
        flex-direction: column;
        gap: 0.25rem;
        width: max-content;
        max-width: 100%;
    }

    .rating-row[b-kl52ioerfp] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .rating-icon[b-kl52ioerfp] {
        color: var(--brand);
        font-size: 3rem;
    }

    .rating-row-labels[b-kl52ioerfp] {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .form-input-rating[b-kl52ioerfp] {
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        font-size: 1rem;
        font-weight: 300;
        max-width: 5rem;
    }

    .left[b-kl52ioerfp] {
        text-align: left;
    }

    .right[b-kl52ioerfp] {
        text-align: right;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {
    .rating-block[b-kl52ioerfp] {
        display: inline-flex;
        flex-direction: column;
        gap: 0.25rem;
        width: max-content;
        max-width: 100%;
    }

    .rating-row[b-kl52ioerfp] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .rating-icon[b-kl52ioerfp] {
        color: var(--brand);
        font-size: 2.5rem;
    }

    .rating-row-labels[b-kl52ioerfp] {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .form-input-rating[b-kl52ioerfp] {
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        font-size: 0.85rem;
        font-weight: 300;
        max-width: 5rem;
    }

    .left[b-kl52ioerfp] {
        text-align: left;
    }

    .right[b-kl52ioerfp] {
        text-align: right;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Admins/ShortAnswerAdmin.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {
    .form-input-large[b-6702dkjn8g] {
        width: 100%;
        font-size: 1rem;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1.75rem;
        font-weight: 500;
    }

    .form-input-large[b-6702dkjn8g]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {
    .form-input-large[b-6702dkjn8g] {
        width: 100%;
        font-size: 1rem;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1.25rem;
        font-weight: 500;
    }

    .form-input-large[b-6702dkjn8g]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/
@media screen and (max-width: 991px) {

}
/* _content/AstroFormsFrontendServer.App/Components/Common/Admins/SignatureAdmin.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {

    /**************** Toggle Button ****************/

    .signature-group[b-ne51m2my7h] {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }

    .button-box[b-ne51m2my7h] {
        width: 12rem;
        position: relative;
        border-radius: 30px;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .toggle-btn[b-ne51m2my7h] {
        padding: 12px 15px;
        cursor: pointer;
        background: transparent;
        border: 0;
        outline: none;
        position: relative;
        text-align: center;
        color: var(--dark-color);
        font-size: 1rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .toggle-btn-slider[b-ne51m2my7h] {
        left: 0;
        top: 0;
        position: absolute;
        width: 6rem;
        height: 100%;
        background: var(--brand);
        border-radius: 30px;
        transition: 0.5s;
    }

    .toggle-icon[b-ne51m2my7h] {
        margin-right: 0.5rem;
    }

    .toggle-right[b-ne51m2my7h] {
        left: 6rem !important;
    }

    .light-text[b-ne51m2my7h] {
        color: var(--text-color) !important;
    }

    .dark-text[b-ne51m2my7h] {
        color: var(--dark-color) !important;
    }

    /**************** Signature ****************/

    .signature-canvas[b-ne51m2my7h] {
        border-radius: var(--border-radius);
        border: 2px solid var(--light-color);
    }

    .signature-canvas:hover[b-ne51m2my7h] {
        border: 2px solid var(--brand);
    }

    .signature-image-container[b-ne51m2my7h] {
        position: relative;
    }

    .signature-img[b-ne51m2my7h] {
        border-radius: var(--border-radius);
        border: 2px solid var(--brand);
    }

    .remove-signature[b-ne51m2my7h] {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        font-weight: 500;
        border-radius: var(--border-radius);
        padding: 0.65rem 1rem;
        position: absolute;
        white-space: nowrap;
        color: var(--dark-color);
        background: transparent;
        top: 0.75rem;
        right: 0.75rem;
        gap: 0.5rem;
    }

    .remove-signature:hover[b-ne51m2my7h] {
        cursor: pointer;
        background: var(--light-color);
    }

    .remove-signature-icon[b-ne51m2my7h] {
        font-size: 1rem;
        color: var(--text-color);
    }

    /**************** Type Signature ****************/

    .text-input-container[b-ne51m2my7h] {
        height: 254px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .text-input[b-ne51m2my7h] {
        width: 600px;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 3rem;
        font-weight: 500;
        border-bottom: 2px solid var(--light-color);
        font-family: 'Parisienne', cursive;
        text-align: center;
    }

    .text-input:focus[b-ne51m2my7h] {
        border-bottom: 2px solid var(--brand);
    }

    .text-input[b-ne51m2my7h]::placeholder {
        color: var(--light-color);
        font-family: "Nunito", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif, Arial;
    }

    .empty-spacing[b-ne51m2my7h] {
        margin-top: 3rem;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {

    /**************** Toggle Button ****************/

    .signature-group[b-ne51m2my7h] {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }

    .button-box[b-ne51m2my7h] {
        width: 12rem;
        position: relative;
        border-radius: 30px;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .toggle-btn[b-ne51m2my7h] {
        padding: 12px 15px;
        cursor: pointer;
        background: transparent;
        border: 0;
        outline: none;
        position: relative;
        text-align: center;
        color: var(--dark-color);
        font-size: 1rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .toggle-btn-slider[b-ne51m2my7h] {
        left: 0;
        top: 0;
        position: absolute;
        width: 6rem;
        height: 100%;
        background: var(--brand);
        border-radius: 30px;
        transition: 0.5s;
    }

    .toggle-icon[b-ne51m2my7h] {
        margin-right: 0.5rem;
    }

    .toggle-right[b-ne51m2my7h] {
        left: 6rem !important;
    }

    .light-text[b-ne51m2my7h] {
        color: var(--text-color) !important;
    }

    .dark-text[b-ne51m2my7h] {
        color: var(--dark-color) !important;
    }

    /**************** Signature ****************/

    .signature-canvas[b-ne51m2my7h] {
        border-radius: 10px;
        border: 2px solid var(--light-color);
    }

    .signature-canvas:hover[b-ne51m2my7h] {
        border: 2px solid var(--brand);
    }

    .signature-image-container[b-ne51m2my7h] {
        position: relative;
    }

    .signature-img[b-ne51m2my7h] {
        border-radius: var(--border-radius);
        border: 2px solid var(--brand);
    }

    .remove-signature[b-ne51m2my7h] {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        font-weight: 500;
        border-radius: var(--border-radius);
        padding: 0.65rem 1rem;
        position: absolute;
        white-space: nowrap;
        background: var(--light-color);
        color: var(--text-color);
        top: 0.75rem;
        right: 0.75rem;
        gap: 0.5rem;
    }

    .remove-signature:hover[b-ne51m2my7h] {
        cursor: pointer;
        background: var(--light-color);
    }

    .remove-signature-icon[b-ne51m2my7h] {
        font-size: 1rem;
        color: var(--text-color);
    }

    /**************** Type Signature ****************/

    .text-input-container[b-ne51m2my7h] {
        height: 179px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .text-input[b-ne51m2my7h] {
        width: 400px;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 2rem;
        font-weight: 500;
        border-bottom: 2px solid var(--light-color);
        font-family: 'Parisienne', cursive;
        text-align: center;
    }

    .text-input:focus[b-ne51m2my7h] {
        border-bottom: 2px solid var(--brand);
    }

    .text-input[b-ne51m2my7h]::placeholder {
        color: var(--light-color);
        font-family: "Nunito", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif, Arial;
    }

    .empty-spacing[b-ne51m2my7h] {
        margin-top: 3rem;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    .signature-group[b-ne51m2my7h] {
        display: none;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Admins/StatementAdmin.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {

    .statement-form-input[b-t4kmbolqr9] {
        width: 100%;
        font-size: 1rem;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1.25rem;
        font-weight: 500;
        border-radius: var(--border-radius);
        height: 35rem;
        resize: none;
        border-style: none;
        padding: 0.75rem 0rem;
        opacity: 0.6;
        margin-bottom: 5rem;
    }

    .statement-form-input[b-t4kmbolqr9]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    .statement-form-input:focus[b-t4kmbolqr9] {
        outline: none;
        box-shadow: none;
        border: none;
    }

    .error-message[b-t4kmbolqr9] {
        color: var(--error-color);
        font-weight: 500;
        font-size: 0.75rem;
        margin-top: 0.5rem;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/
@media screen and (min-width: 992px) and (max-width: 1625px) {

    .statement-form-input[b-t4kmbolqr9] {
        width: 100%;
        font-size: 1rem;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1rem;
        font-weight: 500;
        border-radius: var(--border-radius);
        height: 30rem;
        resize: none;
        border-style: none;
        padding: 0.75rem 0rem;
        opacity: 0.6;
        margin-bottom: 5rem;
    }

    .statement-form-input[b-t4kmbolqr9]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    .statement-form-input:focus[b-t4kmbolqr9] {
        outline: none;
        box-shadow: none;
        border: none;
    }

    .error-message[b-t4kmbolqr9] {
        color: var(--error-color);
        font-weight: 500;
        font-size: 0.65rem;
        margin-top: 0.35rem;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/
@media screen and (max-width: 991px) {

}
/* _content/AstroFormsFrontendServer.App/Components/Common/Admins/TableAdmin.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {

    .matrix-container[b-2v4b9bgsyp] {
        display: flex;
        flex-direction: column;
        gap: 10px;
        position: relative;
        margin-bottom: 20rem;
    }

    .matrix-header[b-2v4b9bgsyp] {
        display: flex;
        align-items: center;
        gap: 2rem;
        font-weight: bold;
        padding: 10px 2rem;
    }

    .matrix-row[b-2v4b9bgsyp] {
        display: flex;
        align-items: center;
        background-color: var(--light-color);
        border-radius: var(--border-radius);
        padding: 1.5rem 2rem;
        gap: 2rem;
        position: relative;
    }

    .delete-row-button[b-2v4b9bgsyp] {
        position: absolute;
        left: -1rem;
        display: none;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--error-color);
        color: var(--text-color);
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
        transition: opacity 0.2s ease-in-out;
    }

    .delete-row-button:hover[b-2v4b9bgsyp] {
        cursor: pointer;
    }

    /* Only show delete button when user hovers over row */
    .matrix-row:hover .delete-row-button[b-2v4b9bgsyp] {
        display: flex;
    }

    .matrix-row-label[b-2v4b9bgsyp] {
        width: 7rem;
        font-weight: bold;
        color: var(--text-color);
        font-size: 1rem;
    }

    .matrix-row-input[b-2v4b9bgsyp] {
        width: 7rem;
        border: none;
        background: transparent;
        font-weight: bold;
        color: var(--text-color);
        font-size: 1rem;
        outline: none;
    }

    .matrix-column-label[b-2v4b9bgsyp] {
        font-weight: bold;
        color: var(--text-color);
        font-size: 1rem;
        width: 7rem;
        text-align: center;
    }

    .matrix-column-input[b-2v4b9bgsyp] {
        width: 7rem;
        border: none;
        background: transparent;
        font-weight: bold;
        color: var(--text-color);
        font-size: 1rem;
        outline: none;
        text-align: center;
    }

    .matrix-column-group[b-2v4b9bgsyp] {
        position: relative;
    }

    .delete-column-button[b-2v4b9bgsyp] {
        position: absolute;
        top: -2rem;
        left: 2.5rem;
        display: none;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--error-color);
        color: var(--text-color);
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
        transition: opacity 0.2s ease-in-out;
    }

    .delete-column-button:hover[b-2v4b9bgsyp] {
        cursor: pointer;
    }

    /* Only show delete button when user clicks on input field (focuses) */
    .matrix-column-group:hover .delete-column-button[b-2v4b9bgsyp] {
        display: flex;
    }

    .matrix-input[b-2v4b9bgsyp] {
        width: 7rem;
        border: none;
        background: transparent;
        text-align: center;
        font-weight: 500;
        color: var(--text-color);
        font-size: 1rem;
        outline: none;
    }

    .matrix-input[b-2v4b9bgsyp]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    .matrix-add-column-button[b-2v4b9bgsyp] {
        position: absolute;
        right: -3rem;
        top: 0rem;
        color: var(--text-color);
        border-radius: 50%;
        width: 2rem;
        height: 2rem;
        background: transparent;
        font-size: 1rem;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .matrix-add-column-button:hover[b-2v4b9bgsyp] {
        cursor: pointer;
        color: var(--dark-color);
        background: var(--brand);
    }

    .matrix-add-row-button[b-2v4b9bgsyp] {
        position: absolute;
        left: 3rem;
        bottom: -3rem;
        color: var(--text-color);
        border-radius: 50%;
        width: 2rem;
        height: 2rem;
        background: transparent;
        font-size: 1rem;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .matrix-add-row-button:hover[b-2v4b9bgsyp] {
        cursor: pointer;
        color: var(--dark-color);
        background: var(--brand);
    }

    .empty-spacing[b-2v4b9bgsyp] {
        margin-top: 3rem;
    }

    .form-input-medium[b-2v4b9bgsyp] {
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1.25rem;
        font-weight: 500;
        opacity: 0.5;
    }

    .form-input-medium[b-2v4b9bgsyp]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    .error-message[b-2v4b9bgsyp] {
        color: var(--error-color);
        font-weight: 500;
        font-size: 0.75rem;
        margin-top: 0.5rem;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/
@media screen and (min-width: 992px) and (max-width: 1625px) {

    .matrix-container[b-2v4b9bgsyp] {
        display: flex;
        flex-direction: column;
        gap: 10px;
        position: relative;
        margin-bottom: 20rem;
    }

    .matrix-header[b-2v4b9bgsyp] {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        font-weight: bold;
        padding: 8px 1.5rem;
    }

    .matrix-row[b-2v4b9bgsyp] {
        display: flex;
        align-items: center;
        background-color: var(--light-color);
        border-radius: var(--border-radius);
        padding: 1.25rem 1.5rem;
        gap: 1.5rem;
        position: relative;
    }

    .delete-row-button[b-2v4b9bgsyp] {
        position: absolute;
        left: -1rem;
        display: none;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--error-color);
        color: var(--text-color);
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.85rem;
        transition: opacity 0.2s ease-in-out;
    }

    .delete-row-button:hover[b-2v4b9bgsyp] {
        cursor: pointer;
    }

    /* Only show delete button when user hovers over row */
    .matrix-row:hover .delete-row-button[b-2v4b9bgsyp] {
        display: flex;
    }

    .matrix-row-label[b-2v4b9bgsyp] {
        width: 6rem;
        font-weight: bold;
        color: var(--text-color);
        font-size: 1rem;
    }

    .matrix-row-input[b-2v4b9bgsyp] {
        width: 6rem;
        border: none;
        background: transparent;
        font-weight: bold;
        color: var(--text-color);
        font-size: 0.85rem;
        outline: none;
    }

    .matrix-column-label[b-2v4b9bgsyp] {
        font-weight: bold;
        color: var(--text-color);
        font-size: 0.85rem;
        width: 6rem;
        text-align: center;
    }

    .matrix-column-input[b-2v4b9bgsyp] {
        width: 6rem;
        border: none;
        background: transparent;
        font-weight: bold;
        color: var(--text-color);
        font-size: 0.85rem;
        outline: none;
        text-align: center;
    }

    .matrix-column-group[b-2v4b9bgsyp] {
        position: relative;
    }

    .delete-column-button[b-2v4b9bgsyp] {
        position: absolute;
        top: -1.5rem;
        left: 2.5rem;
        display: none;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--error-color);
        color: var(--text-color);
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.85rem;
        transition: opacity 0.2s ease-in-out;
    }

    .delete-column-button:hover[b-2v4b9bgsyp] {
        cursor: pointer;
    }

    /* Only show delete button when user clicks on input field (focuses) */
    .matrix-column-group:hover .delete-column-button[b-2v4b9bgsyp] {
        display: flex;
    }

    .matrix-input[b-2v4b9bgsyp] {
        width: 6rem;
        border: none;
        background: transparent;
        text-align: center;
        font-weight: 500;
        color: var(--text-color);
        font-size: 0.85rem;
        outline: none;
    }

    .matrix-input[b-2v4b9bgsyp]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    .matrix-add-column-button[b-2v4b9bgsyp] {
        position: absolute;
        right: -3rem;
        top: 0rem;
        color: var(--text-color);
        border-radius: 50%;
        width: 2rem;
        height: 2rem;
        background: transparent;
        font-size: 1rem;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .matrix-add-column-button:hover[b-2v4b9bgsyp] {
        cursor: pointer;
        color: var(--dark-color);
        background: var(--brand);
    }

    .matrix-add-row-button[b-2v4b9bgsyp] {
        position: absolute;
        left: 3rem;
        bottom: -3rem;
        color: var(--text-color);
        border-radius: 50%;
        width: 2rem;
        height: 2rem;
        background: transparent;
        font-size: 1rem;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .matrix-add-row-button:hover[b-2v4b9bgsyp] {
        cursor: pointer;
        color: var(--dark-color);
        background: var(--brand);
    }

    .empty-spacing[b-2v4b9bgsyp] {
        margin-top: 3rem;
    }

    .form-input-medium[b-2v4b9bgsyp] {
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1rem;
        font-weight: 500;
        opacity: 0.5;
    }

    .form-input-medium[b-2v4b9bgsyp]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    .error-message[b-2v4b9bgsyp] {
        color: var(--error-color);
        font-weight: 500;
        font-size: 0.65rem;
        margin-top: 0.35rem;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/
@media screen and (max-width: 991px) {

}
/* _content/AstroFormsFrontendServer.App/Components/Common/AstroFormsLogo.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {
    .brand-logo[b-nmjeimhcae] {
        position: fixed;
        top: 0;
        left: 0;
        padding: 1.5rem;
        display: flex;
        flex-direction: row;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        z-index: 2;
        align-items: center;
        justify-content: center;
    }

    .brand-icon[b-nmjeimhcae] {
        color: var(--brand);
        font-size: 1.75rem;
        margin-right: 0.5rem;
    }

    .brand-name[b-nmjeimhcae] {
        font-weight: 700;
        font-size: 1.35rem;
    }

    .primary[b-nmjeimhcae] {
        color: var(--brand);
    }

    .secondary[b-nmjeimhcae] {
        color: var(--text-color);
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/
@media screen and (min-width: 992px) and (max-width: 1625px) {
    .brand-logo[b-nmjeimhcae] {
        position: fixed;
        top: 0;
        left: 0;
        padding: 1.5rem;
        display: flex;
        flex-direction: row;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        z-index: 2;
        align-items: center;
        justify-content: center;
    }

    .brand-icon[b-nmjeimhcae] {
        color: var(--brand);
        font-size: 1.5rem;
        margin-right: 0.35rem;
    }

    .brand-name[b-nmjeimhcae] {
        font-weight: 700;
        font-size: 1rem;
    }

    .primary[b-nmjeimhcae] {
        color: var(--brand);
    }

    .secondary[b-nmjeimhcae] {
        color: var(--text-color);
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/
@media screen and (max-width: 991px) {
    .brand-logo[b-nmjeimhcae] {
        position: fixed;
        top: 0;
        left: 0;
        padding: 28px 12px;
        display: flex;
        flex-direction: row;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        z-index: 2;
        align-items: center;
        justify-content: center;
    }

    .brand-icon[b-nmjeimhcae] {
        color: var(--brand);
        font-size: 1.5rem;
        margin-right: 0.35rem;
    }

    .brand-name[b-nmjeimhcae] {
        font-weight: 700;
        font-size: 1rem;
    }

    .primary[b-nmjeimhcae] {
        color: var(--brand);
    }

    .secondary[b-nmjeimhcae] {
        color: var(--text-color);
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Avatar.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {
    .public-avatar-wrapper[b-pprkajhw36] {
        width: 100%;
        height: 400px;
        padding: 0.5rem;
        display: flex;
        flex-direction: column;
    }

    .public-avatar-stage[b-pprkajhw36] {
        flex: 1;
        overflow: hidden;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/
@media screen and (min-width: 992px) and (max-width: 1625px) {
    .public-avatar-wrapper[b-pprkajhw36] {
        width: 100%;
        height: 320px;
        padding: 0.5rem;
        display: flex;
        flex-direction: column;
    }

    .public-avatar-stage[b-pprkajhw36] {
        flex: 1;
        overflow: hidden;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    .public-avatar-wrapper[b-pprkajhw36] {
        display: none;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Button.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {
    .add-forms-button[b-2q7223s13i] {
        background-color: transparent;
        color: var(--text-color);
        padding: 1rem 1.5rem;
        border: none;
        border-radius: 50rem;
        cursor: pointer;
        font-weight: 700;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        width: fit-content;
    }

    .add-forms-button:hover[b-2q7223s13i] {
        background-color: var(--brand);
        color: var(--dark-color);
    }

    .add-button-icon[b-2q7223s13i] {
        margin-right: 0.5rem;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {
    .add-forms-button[b-2q7223s13i] {
        background-color: transparent;
        color: var(--text-color);
        padding: 0.75rem 1.25rem;
        border: none;
        border-radius: 50rem;
        cursor: pointer;
        font-weight: 700;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        width: fit-content;
    }

    .add-forms-button:hover[b-2q7223s13i] {
        background-color: var(--brand);
        color: var(--dark-color);
    }

    .add-button-icon[b-2q7223s13i] {
        margin-right: 0.5rem;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    .add-forms-button[b-2q7223s13i] {
        display: none;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/CompanyLogo.razor.rz.scp.css */
/* _content/AstroFormsFrontendServer.App/Components/Common/DateInput.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1441px) {

    .field-group[b-rmgya3f24a] {
        max-width: 11rem;
    }

    .datepicker[b-rmgya3f24a] {
        position: relative;
        display: inline-block;
        width: 100%;
    }

    .datepicker-input-container[b-rmgya3f24a] {
        position: relative;
        display: inline-block;
        width: 100%;
    }

    .datepicker-input[b-rmgya3f24a] {
        width: 100%;
        padding: 0.75rem;
        padding-right: 2.5rem;
        font-size: 0.85rem;
        background: transparent;
        border: none;
        outline: none;
        border-bottom: 2px solid var(--brand);
        color: var(--text-color);
    }

    .datepicker-icon[b-rmgya3f24a] {
        position: absolute;
        right: 0.15rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.25rem;
        color: var(--brand);
        pointer-events: auto;
        background: transparent;
        border-radius: 50%;
        width: 2.25rem;
        height: 2.25rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .datepicker-icon:hover[b-rmgya3f24a] {
        background: var(--light-color);
        cursor: pointer;
    }

    .datepicker-calendar[b-rmgya3f24a] {
        position: absolute;
        top: 100%;
        right: 0;
        background: var(--dark-color);
        border: 1px solid var(--light-color);
        border-radius: var(--border-radius);
        z-index: 5;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        width: 18.25rem;
    }

    .datepicker-header[b-rmgya3f24a] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        padding-top: 1rem;
    }

    .action-button[b-rmgya3f24a] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        color: var(--brand);
        font-size: 0.75rem;
    }

    .action-button:hover[b-rmgya3f24a] {
        background: var(--light-color);
        cursor: pointer;
    }

    .month-label[b-rmgya3f24a] {
        font-weight: 500;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        color: var(--text-color);
    }

    .month-label:hover[b-rmgya3f24a] {
        cursor: pointer;
        background: var(--light-color);
    }

    .month-label-disabled[b-rmgya3f24a] {
        font-weight: 500;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        color: var(--text-muted);
    }

    .datepicker-days[b-rmgya3f24a] {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        text-align: center;
        padding: 0.5rem;
    }

    .datepicker-day-name[b-rmgya3f24a] {
        padding: 0.5rem;
        margin: 2px;
        font-size: 0.75rem;
        font-weight: bold;
        opacity: 0.4;
        color: var(--text-muted);
    }

    .datepicker-day[b-rmgya3f24a] {
        padding: 0.5rem;
        margin: 2px;
        cursor: pointer;
        font-size: 0.75rem;
        border-radius: 4px;
        transition: background 0.3s;
        color: var(--text-color);
    }

    .datepicker-day:hover[b-rmgya3f24a] {
        background: var(--brand) !important;
        color: var(--dark-color);
    }

    .datepicker-day.selected[b-rmgya3f24a] {
        background: var(--brand) !important;
        color: var(--dark-color);
    }

    .datepicker-day.out-of-month[b-rmgya3f24a] {
        opacity: 0.5;
        pointer-events: none;
    }

    .datepicker-day.today[b-rmgya3f24a] {
        background-color: var(--light-color);
    }

    /***************** Handle Month Selection *****************/

    .datepicker-months[b-rmgya3f24a] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .datepicker-month[b-rmgya3f24a] {
        padding: 0.5rem 0.75rem;
        text-align: center;
        border-radius: 6px;
        cursor: pointer;
        background-color: transparent;
        transition: background-color 0.2s ease;
        color: var(--text-color);
    }

    .datepicker-month:hover[b-rmgya3f24a] {
        background: var(--brand) !important;
        color: var(--dark-color);
    }

    .datepicker-month-selected[b-rmgya3f24a] {
        padding: 0.5rem 0.75rem;
        text-align: center;
        border-radius: 6px;
        background-color: var(--light-color);
        cursor: pointer;
        color: var(--text-color);
    }

    /***************** Handle Year Selection *****************/

    .datepicker-years[b-rmgya3f24a] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .datepicker-year[b-rmgya3f24a] {
        padding: 0.5rem 0.75rem;
        text-align: center;
        border-radius: 6px;
        background-color: transparent;
        cursor: pointer;
        transition: background-color 0.2s ease;
        color: var(--text-color);
    }

    .datepicker-year:hover[b-rmgya3f24a] {
        background: var(--brand) !important;
        color: var(--dark-color);
    }

    .datepicker-year-selected[b-rmgya3f24a] {
        padding: 0.5rem 0.75rem;
        text-align: center;
        border-radius: 6px;
        background-color: var(--light-color);
        cursor: pointer;
        color: var(--text-color);
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1440px) {

    .field-group[b-rmgya3f24a] {
        max-width: 10rem;
    }

    .datepicker[b-rmgya3f24a] {
        position: relative;
        display: inline-block;
        width: 100%;
    }

    .datepicker-input-container[b-rmgya3f24a] {
        position: relative;
        display: inline-block;
        width: 100%;
    }

    .datepicker-input[b-rmgya3f24a] {
        width: 100%;
        padding: 0.65rem;
        padding-right: 2.5rem;
        font-size: 0.75rem;
        background: transparent;
        border: none;
        outline: none;
        border-bottom: 2px solid var(--brand);
        color: var(--text-color);
    }

    .datepicker-icon[b-rmgya3f24a] {
        position: absolute;
        right: 0.25rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.85rem;
        color: var(--brand);
        pointer-events: auto;
        background: transparent;
        border-radius: 50%;
        width: 1.75rem;
        height: 1.75rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .datepicker-icon:hover[b-rmgya3f24a] {
        background: var(--light-color);
        cursor: pointer;
    }

    .datepicker-calendar[b-rmgya3f24a] {
        position: absolute;
        top: 100%;
        right: 0;
        background: var(--dark-color);
        border: 1px solid var(--light-color);
        border-radius: var(--border-radius);
        z-index: 5;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        width: 15rem;
    }

    .datepicker-header[b-rmgya3f24a] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        padding-top: 0.5rem;
    }

    .action-button[b-rmgya3f24a] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        color: var(--brand);
        font-size: 0.65rem;
    }

    .action-button:hover[b-rmgya3f24a] {
        background: var(--light-color);
        cursor: pointer;
    }

    .month-label[b-rmgya3f24a] {
        font-weight: 500;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        font-size: 0.75rem;
        color: var(--text-color);
    }

    .month-label:hover[b-rmgya3f24a] {
        cursor: pointer;
        background: var(--light-color);
        color: var(--text-muted);
    }

    .month-label-disabled[b-rmgya3f24a] {
        font-weight: 500;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        font-size: 0.75rem;
    }

    .datepicker-days[b-rmgya3f24a] {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        text-align: center;
        padding: 0.35rem;
    }

    .datepicker-day-name[b-rmgya3f24a] {
        padding: 0.35rem;
        margin: 1px;
        font-size: 0.55rem;
        font-weight: bold;
        opacity: 0.4;
        color: var(--text-muted);
    }

    .datepicker-day[b-rmgya3f24a] {
        padding: 0.35rem;
        margin: 1px;
        cursor: pointer;
        font-size: 0.65rem;
        border-radius: 4px;
        transition: background 0.3s;
        color: var(--text-color);
    }

    .datepicker-day:hover[b-rmgya3f24a] {
        background: var(--brand) !important;
        color: var(--dark-color);
    }

    .datepicker-day.selected[b-rmgya3f24a] {
        background: var(--brand) !important;
        color: var(--dark-color);
    }

    .datepicker-day.out-of-month[b-rmgya3f24a] {
        opacity: 0.5;
        pointer-events: none;
    }

    .datepicker-day.today[b-rmgya3f24a] {
        background-color: var(--light-color);
    }

    /***************** Handle Month Selection *****************/

    .datepicker-months[b-rmgya3f24a] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .datepicker-month[b-rmgya3f24a] {
        padding: 0.5rem 0.75rem;
        text-align: center;
        border-radius: 6px;
        cursor: pointer;
        background-color: transparent;
        transition: background-color 0.2s ease;
        font-size: 0.85rem;
        color: var(--text-color);
    }

    .datepicker-month:hover[b-rmgya3f24a] {
        background: var(--brand) !important;
        color: var(--dark-color);
    }

    .datepicker-month-selected[b-rmgya3f24a] {
        padding: 0.5rem 0.75rem;
        text-align: center;
        border-radius: 6px;
        background-color: var(--light-color);
        cursor: pointer;
        font-size: 0.85rem;
        color: var(--text-color);
    }

    /***************** Handle Year Selection *****************/

    .datepicker-years[b-rmgya3f24a] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .datepicker-year[b-rmgya3f24a] {
        padding: 0.5rem 0.75rem;
        text-align: center;
        border-radius: 6px;
        background-color: transparent;
        cursor: pointer;
        transition: background-color 0.2s ease;
        font-size: 0.85rem;
        color: var(--text-color);
    }

    .datepicker-year:hover[b-rmgya3f24a] {
        background: var(--brand) !important;
        color: var(--dark-color);
    }

    .datepicker-year-selected[b-rmgya3f24a] {
        padding: 0.5rem 0.75rem;
        text-align: center;
        border-radius: 6px;
        background-color: var(--light-color);
        cursor: pointer;
        font-size: 0.85rem;
        color: var(--text-color);
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    .background[b-rmgya3f24a] {
        display: none;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/DonutGraph.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {
    .graph-group[b-6av6k7edyn] {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        /*margin: 1rem 0rem;*/
    }

    .graph-title[b-6av6k7edyn] {
        color: var(--text-color);
        font-size: 1rem;
        font-weight: 500;
    }

    svg circle[b-6av6k7edyn] {
        transition: stroke-dasharray 0.5s ease-out;
    }

    .graph-title-row[b-6av6k7edyn] {
        align-items: center;
        display: flex;
        margin-left: 1rem;
        flex-direction: column;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {
    .graph-group[b-6av6k7edyn] {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        /*margin: 1rem 0rem;*/
    }

    .graph-title[b-6av6k7edyn] {
        color: var(--text-color);
        font-size: 1rem;
        font-weight: 500;
    }

    svg circle[b-6av6k7edyn] {
        transition: stroke-dasharray 0.5s ease-out;
    }

    .graph-title-row[b-6av6k7edyn] {
        align-items: center;
        display: flex;
        margin-left: 1rem;
        flex-direction: column;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    .graph-group[b-6av6k7edyn] {
        display: none;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Dropdown.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {

    .filter-title-group[b-cei6ny9hjp] {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: start;
        gap: 0.5rem;
    }

    .filter-column[b-cei6ny9hjp] {
        background: var(--light-color);
        border-radius: var(--border-radius);
        height: 3rem;
        color: var(--text-color);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        font-size: 0.85rem;
        font-weight: 500;
        cursor: pointer;
        padding: 1rem;
    }

    .small-margin-top[b-cei6ny9hjp] {
        margin-top: 1rem;
    }

    .filter-column:hover[b-cei6ny9hjp] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .filter-column-disabled[b-cei6ny9hjp] {
        background: var(--dark-color);
        border-radius: var(--border-radius);
        height: 3rem;
        color: var(--text-color);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        font-size: 0.85rem;
        font-weight: 500;
        padding: 1rem;
        opacity: 0.5;
    }

    .dropdown-container[b-cei6ny9hjp] {
        position: relative;
        width: 100%;
    }

    .small[b-cei6ny9hjp] {
        max-width: 10rem;
    }

    .medium[b-cei6ny9hjp] {
        max-width: 14rem;
    }

    .large[b-cei6ny9hjp] {
        max-width: 30rem;
    }

    .dropdown-overlay[b-cei6ny9hjp] {
        position: fixed;
        inset: 0;
        background: transparent;
        z-index: 2;
    }

    .dropdown-popup[b-cei6ny9hjp] {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        border-radius: var(--border-radius);
        background-color: var(--light-color);
        z-index: 3;
        padding: 0.5rem;
    }

    .dropdown-option[b-cei6ny9hjp] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.5rem 1rem;
        cursor: pointer;
        border-radius: 10px;
        color: var(--text-color);
        font-size: 0.85rem;
        font-weight: 500;
        gap: 0.5rem;
    }

    .dropdown-option:hover[b-cei6ny9hjp] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .dropdown-group[b-cei6ny9hjp] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        min-height: 2rem;
    }

    .dropdown-option-selected[b-cei6ny9hjp] {
        display: flex;
        align-items: center;
        justify-content: start;
        padding: 0.5rem 1rem;
        cursor: pointer;
        border-radius: 10px;
        font-size: 0.85rem;
        font-weight: 500;
        gap: 0.5rem;
        background: var(--brand);
        color: var(--dark-color);
    }

    .dropdown-icon[b-cei6ny9hjp] {
        font-size: 1.5rem;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {

    .filter-title-group[b-cei6ny9hjp] {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: start;
        gap: 0.5rem;
    }

    .filter-column[b-cei6ny9hjp] {
        background: var(--light-color);
        border-radius: var(--border-radius);
        height: 2.5rem;
        color: var(--text-color);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        font-size: 0.75rem;
        font-weight: 500;
        cursor: pointer;
        padding: 1rem;
    }

    .small-margin-top[b-cei6ny9hjp] {
        margin-top: 1rem;
    }

    .filter-column:hover[b-cei6ny9hjp] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .filter-column-disabled[b-cei6ny9hjp] {
        background: var(--dark-color);
        border-radius: var(--border-radius);
        height: 2.5rem;
        color: var(--text-color);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        font-size: 0.75rem;
        font-weight: 500;
        padding: 1rem;
        opacity: 0.5;
    }

    .dropdown-container[b-cei6ny9hjp] {
        position: relative;
        width: 100%;
    }

    .small[b-cei6ny9hjp] {
        max-width: 10rem;
    }

    .medium[b-cei6ny9hjp] {
        max-width: 14rem;
    }

    .large[b-cei6ny9hjp] {
        max-width: 30rem;
    }

    .dropdown-overlay[b-cei6ny9hjp] {
        position: fixed;
        inset: 0;
        background: transparent;
        z-index: 2;
    }

    .dropdown-popup[b-cei6ny9hjp] {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        border-radius: var(--border-radius);
        background-color: var(--light-color);
        z-index: 3;
        padding: 0.5rem;
    }

    .dropdown-option[b-cei6ny9hjp] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.5rem 1rem;
        cursor: pointer;
        border-radius: 10px;
        color: var(--text-color);
        font-size: 0.75rem;
        font-weight: 500;
        gap: 0.5rem;
    }

    .dropdown-option:hover[b-cei6ny9hjp] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .dropdown-group[b-cei6ny9hjp] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        min-height: 1.5rem;
    }

    .dropdown-option-selected[b-cei6ny9hjp] {
        display: flex;
        align-items: center;
        justify-content: start;
        padding: 0.5rem 1rem;
        cursor: pointer;
        border-radius: 10px;
        font-size: 0.75rem;
        font-weight: 500;
        gap: 0.5rem;
        background: var(--brand);
        color: var(--dark-color);
    }

    .dropdown-icon[b-cei6ny9hjp] {
        font-size: 1rem;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    .background[b-cei6ny9hjp] {
        display: none;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/EmptyState.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1441px) {

    .empty-spacing[b-775dt5xypm] {
        padding-top: 4rem;
    }

    .main-column[b-775dt5xypm] {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .icon-row[b-775dt5xypm] {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        color: var(--text-color);
        font-size: 7rem;
        padding-bottom: 0.5rem;
    }

    .green[b-775dt5xypm] {
        color: var(--brand) !important;
    }

    .red[b-775dt5xypm] {
        color: var(--error-color) !important;
    }

    .title[b-775dt5xypm] {
        font-size: 1.5rem;
        font-weight: 500;
        color: var(--text-color);
    }

    .description[b-775dt5xypm] {
        font-size: 1rem;
        font-weight: 500;
        color: var(--text-color);
        opacity: 0.5;
    }

    .button[b-775dt5xypm] {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        font-weight: 700;
        border-radius: 50rem;
        padding: 1rem 1.25rem;
        gap: 0.5rem;
        margin-top: 1rem;
        background: transparent;
        border: 2px solid var(--brand);
        color: var(--text-color);
    }

    .button:hover[b-775dt5xypm] {
        cursor: pointer;
        background: var(--brand);
        color: var(--dark-color);
    }

    .button-icon[b-775dt5xypm] {
        font-size: 1rem;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1440px) {

    .empty-spacing[b-775dt5xypm] {
        padding-top: 4rem;
    }

    .main-column[b-775dt5xypm] {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .icon-row[b-775dt5xypm] {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        color: var(--text-color);
        font-size: 5rem;
        padding-bottom: 0.5rem;
    }

    .green[b-775dt5xypm] {
        color: var(--brand) !important;
    }

    .red[b-775dt5xypm] {
        color: var(--error-color) !important;
    }

    .title[b-775dt5xypm] {
        font-size: 1rem;
        font-weight: 500;
        color: var(--text-color);
    }

    .description[b-775dt5xypm] {
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--text-color);
        opacity: 0.5;
    }

    .button[b-775dt5xypm] {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        font-weight: 700;
        border-radius: 50rem;
        padding: 0.85rem 1.25rem;
        gap: 0.5rem;
        margin-top: 1rem;
        background: transparent;
        border: 2px solid var(--brand);
        color: var(--text-color);
    }

    .button:hover[b-775dt5xypm] {
        cursor: pointer;
        background: var(--brand);
        color: var(--dark-color);
    }

    .button-icon[b-775dt5xypm] {
        font-size: 0.85rem;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    .empty-spacing[b-775dt5xypm] {
        padding-top: 4rem;
    }

    .main-column[b-775dt5xypm] {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .icon-row[b-775dt5xypm] {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        color: var(--text-color);
        font-size: 6rem;
        padding-bottom: 0.5rem;
    }

    .green[b-775dt5xypm] {
        color: var(--brand) !important;
    }

    .red[b-775dt5xypm] {
        color: var(--error-color) !important;
    }

    .title[b-775dt5xypm] {
        font-size: 1.5rem;
        font-weight: 500;
        color: var(--text-color);
    }

    .description[b-775dt5xypm] {
        font-size: 1rem;
        font-weight: 500;
        color: var(--text-color);
        opacity: 0.5;
    }

    .button[b-775dt5xypm] {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        font-weight: 500;
        border-radius: 50rem;
        padding: 1rem 1.25rem;
        gap: 0.5rem;
        margin-top: 1rem;
        background: transparent;
        border: 2px solid var(--brand);
        color: var(--text-color);
    }

    .button:hover[b-775dt5xypm] {
        cursor: pointer;
        background: var(--brand);
        color: var(--dark-color);
    }

    .button-icon[b-775dt5xypm] {
        font-size: 1rem;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/FormsItem.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {

    .forms-listing-card[b-w51ph9wt0d] {
        height: fit-content;
        width: 100%;
        margin-bottom: 0.5rem;
        border-radius: var(--border-radius);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        background: var(--background-color);
        border: 1px solid var(--light-color);
    }

    .forms-listing-card:hover[b-w51ph9wt0d] {
        border: 1px solid var(--brand);
        cursor: pointer;
    }

    .forms-listing-group[b-w51ph9wt0d] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
        width: 100%;
        margin-left: 0.75rem;
    }

    .forms-listing-title[b-w51ph9wt0d] {
        color: var(--text-color);
        font-size: 1.15rem;
        font-weight: 700;
        /*margin-bottom: 0.5rem;*/
        white-space: nowrap;
    }

    .forms-listing-subtitle[b-w51ph9wt0d] {
        color: var(--text-muted);
        font-size: 0.85rem;
        font-weight: 300;
        display: flex;
        align-items: center;
        justify-content: start;
    }

    .forms-listing-options[b-w51ph9wt0d] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
    }

    .status-chip[b-w51ph9wt0d] {
        border-radius: 50px;
        font-weight: 700;
        font-size: 1rem;
        position: relative;
        display: inline-flex;
        text-align: center;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        align-items: center;
        justify-content: center;
        width: fit-content;
        background-color: var(--brand);
        color: var(--dark-color);
        white-space: nowrap;
    }

    .actions-buttons-group[b-w51ph9wt0d] {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .dropdown-popup[b-w51ph9wt0d] {
        position: absolute;
        top: 100%;
        left: 0;
        width: 12rem;
        border-radius: var(--border-radius);
        background-color: var(--light-color);
        z-index: 3;
        padding: 0.5rem;
        box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    }

    .dropdown-option[b-w51ph9wt0d] {
        display: flex;
        align-items: center;
        justify-content: start;
        padding: 0.5rem 1rem;
        cursor: pointer;
        border-radius: 10px;
        color: var(--text-color);
        font-size: 0.85rem;
        font-weight: 700;
        gap: 0.5rem;
    }

    .dropdown-option:hover[b-w51ph9wt0d] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .dropdown-icon[b-w51ph9wt0d] {
        font-size: 1.5rem;
    }

    .action-button[b-w51ph9wt0d] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        color: var(--brand);
        margin: 0rem 0.25rem;
    }

    .action-button:hover[b-w51ph9wt0d] {
        background: var(--light-color);
        cursor: pointer;
    }

    .action-icon[b-w51ph9wt0d] {
        font-size: 1rem;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/
@media screen and (min-width: 992px) and (max-width: 1625px) {
    .forms-listing-card[b-w51ph9wt0d] {
        height: fit-content;
        width: 100%;
        margin-bottom: 0.35rem;
        border-radius: var(--border-radius);
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        padding: 0.65rem;
        background: var(--background-color);
        border: 1px solid var(--light-color);
    }

    .forms-listing-card:hover[b-w51ph9wt0d] {
        border: 1px solid var(--brand);
        cursor: pointer;
    }

    .forms-listing-group[b-w51ph9wt0d] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
        width: 100%;
        margin-left: 0.75rem;
    }

    .forms-listing-title[b-w51ph9wt0d] {
        color: var(--text-color);
        font-size: 1rem;
        font-weight: 700;
        /*margin-bottom: 0.5rem;*/
        white-space: nowrap;
    }

    .forms-listing-subtitle[b-w51ph9wt0d] {
        color: var(--text-muted);
        font-size: 0.75rem;
        font-weight: 300;
        display: flex;
        align-items: center;
        justify-content: start;
    }

    .forms-listing-options[b-w51ph9wt0d] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
    }

    .status-chip[b-w51ph9wt0d] {
        border-radius: 50px;
        font-weight: 700;
        font-size: 0.75rem;
        position: relative;
        display: inline-flex;
        text-align: center;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 0.85rem;
        padding-right: 0.85rem;
        align-items: center;
        justify-content: center;
        width: fit-content;
        background-color: var(--brand);
        color: var(--dark-color);
        white-space: nowrap;
    }

    .actions-buttons-group[b-w51ph9wt0d] {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .dropdown-popup[b-w51ph9wt0d] {
        position: absolute;
        top: 100%;
        left: 0;
        width: 10rem;
        border-radius: var(--border-radius);
        background-color: var(--light-color);
        z-index: 3;
        padding: 0.5rem;
        box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    }

    .dropdown-option[b-w51ph9wt0d] {
        display: flex;
        align-items: center;
        justify-content: start;
        padding: 0.35rem 0.85rem;
        cursor: pointer;
        border-radius: 10px;
        color: var(--text-color);
        font-size: 0.75rem;
        font-weight: 700;
        gap: 0.5rem;
    }

    .dropdown-option:hover[b-w51ph9wt0d] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .dropdown-icon[b-w51ph9wt0d] {
        font-size: 1rem;
    }

    .action-button[b-w51ph9wt0d] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        color: var(--brand);
        margin: 0rem 0.25rem;
    }

    .action-button:hover[b-w51ph9wt0d] {
        background: var(--light-color);
        cursor: pointer;
    }

    .action-icon[b-w51ph9wt0d] {
        font-size: 0.85rem;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    .forms-listing-card[b-w51ph9wt0d] {
        height: fit-content;
        width: 100%;
        margin-bottom: 0.5rem;
        border-radius: var(--border-radius);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 0rem;
        background: transparent;
    }

    .forms-listing-group[b-w51ph9wt0d] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
        width: 100%;
        margin-left: 0.75rem;
    }

    .forms-listing-title[b-w51ph9wt0d] {
        color: var(--text-color);
        font-size: 1.15rem;
        font-weight: 700;
        /*margin-bottom: 0.5rem;*/
        white-space: nowrap;
    }

    .forms-listing-subtitle[b-w51ph9wt0d] {
        color: var(--text-muted);
        font-size: 0.85rem;
        font-weight: 300;
        display: flex;
        align-items: center;
        justify-content: start;
    }

    .forms-listing-options[b-w51ph9wt0d] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
    }

    .status-chip[b-w51ph9wt0d] {
        border-radius: 50px;
        font-weight: 700;
        font-size: 1rem;
        position: relative;
        display: inline-flex;
        text-align: center;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        align-items: center;
        justify-content: center;
        width: fit-content;
        background-color: var(--brand);
        color: var(--dark-color);
        white-space: nowrap;
    }

    .actions-buttons-group[b-w51ph9wt0d] {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .dropdown-popup[b-w51ph9wt0d] {
        position: absolute;
        top: 100%;
        right: 0;
        width: 12rem;
        border-radius: var(--border-radius);
        background-color: var(--light-color);
        z-index: 3;
        padding: 0.5rem;
        box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    }

    .dropdown-option[b-w51ph9wt0d] {
        display: flex;
        align-items: center;
        justify-content: start;
        padding: 0.5rem 1rem;
        cursor: pointer;
        border-radius: 10px;
        color: var(--text-color);
        font-size: 0.85rem;
        font-weight: 700;
        gap: 0.5rem;
    }

    .dropdown-option:hover[b-w51ph9wt0d] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .dropdown-icon[b-w51ph9wt0d] {
        font-size: 1.5rem;
    }

    .action-button[b-w51ph9wt0d] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        color: var(--brand);
        margin: 0rem 0.25rem;
    }

    .action-button:hover[b-w51ph9wt0d] {
        background: var(--light-color);
        cursor: pointer;
    }

    .action-icon[b-w51ph9wt0d] {
        font-size: 1rem;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/FormSubmitted.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1441px) {
    .content[b-ut67j21hca] {
        background: transparent;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .group[b-ut67j21hca] {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .icon[b-ut67j21hca] {
        font-size: 8rem;
        color: var(--brand);
    }

    .title[b-ut67j21hca] {
        font-size: 2rem;
        font-weight: 700;
        color: var(--text-color);
    }

    .subtitle[b-ut67j21hca] {
        font-size: 1.5rem;
        font-weight: 500;
        color: var(--text-color);
        opacity: 0.5;
        margin-top: 0.25rem;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1440px) {
    .content[b-ut67j21hca] {
        background: transparent;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .group[b-ut67j21hca] {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .icon[b-ut67j21hca] {
        font-size: 7rem;
        color: var(--brand);
    }

    .title[b-ut67j21hca] {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-color);
    }

    .subtitle[b-ut67j21hca] {
        font-size: 1rem;
        font-weight: 500;
        color: var(--text-color);
        opacity: 0.5;
        margin-top: 0.25rem;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    .content[b-ut67j21hca] {
        background: transparent;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .group[b-ut67j21hca] {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .icon[b-ut67j21hca] {
        font-size: 8rem;
        color: var(--brand);
    }

    .title[b-ut67j21hca] {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-color);
    }

    .subtitle[b-ut67j21hca] {
        font-size: 1rem;
        font-weight: 500;
        color: var(--text-color);
        opacity: 0.5;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Greetings.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {
    .greeting-group[b-pxmujf7spb] {
        margin-bottom: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .greeting[b-pxmujf7spb] {
        font-weight: 600;
        font-size: 2rem;
        color: var(--text-color);
    }

    .dashboard-message[b-pxmujf7spb] {
        font-weight: 400;
        font-size: 1.25rem;
        color: var(--text-muted);
    }

    /**************** Toggle Switch ****************/

    .settings-value[b-pxmujf7spb] {
        color: var(--dark-color);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 0.85rem;
    }

    .label[b-pxmujf7spb] {
        color: var(--text-color);
        margin-right: 0.5rem;
    }

    .switch-container[b-pxmujf7spb] {
        display: flex;
        align-items: center;
    }

    .switch[b-pxmujf7spb] {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 24px;
        margin-right: 6px;
    }

    .switch input[b-pxmujf7spb] {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider[b-pxmujf7spb] {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--light-color);
        transition: 0.4s;
        border-radius: 24px;
    }

    .slider[b-pxmujf7spb]:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 4px;
        bottom: 3px;
        background-color: var(--dark-color);
        transition: 0.4s;
        border-radius: 50%;
    }

    input:checked + .slider[b-pxmujf7spb] {
        background-color: var(--brand);
    }

    input:checked + .slider[b-pxmujf7spb]:before {
        transform: translateX(24px);
    }

    .slider.round[b-pxmujf7spb] {
        border-radius: 24px;
    }

    /**************** Button ****************/

    .button-container[b-pxmujf7spb] {
        
    }

    .button[b-pxmujf7spb] {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        font-weight: 500;
        border-radius: 50rem;
        padding: 0.85rem 1.25rem;
        gap: 0.5rem;
        margin-top: 1rem;
        background: transparent;
        color: var(--text-color);
        outline: none;
        border: 2px solid var(--error-color);
    }

    .button:hover[b-pxmujf7spb] {
        cursor: pointer;
        background: var(--error-color);
        transition: 0.25s;
    }

    .button-icon[b-pxmujf7spb] {
        font-size: 0.85rem;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/
@media screen and (min-width: 992px) and (max-width: 1625px) {
    .greeting-group[b-pxmujf7spb] {
        margin-bottom: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .greeting[b-pxmujf7spb] {
        font-weight: 600;
        font-size: 1.5rem;
        color: var(--text-color);
    }

    .dashboard-message[b-pxmujf7spb] {
        font-weight: 400;
        font-size: 0.85rem;
        color: var(--text-muted);
    }

    /**************** Toggle Switch ****************/

    .settings-value[b-pxmujf7spb] {
        color: var(--dark-color);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 0.85rem;
    }

    .label[b-pxmujf7spb] {
        color: var(--text-color);
        margin-right: 0.5rem;
        font-size: 0.85rem;
    }

    .switch-container[b-pxmujf7spb] {
        display: flex;
        align-items: center;
    }

    .switch[b-pxmujf7spb] {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 24px;
        margin-right: 6px;
    }

    .switch input[b-pxmujf7spb] {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider[b-pxmujf7spb] {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--light-color);
        transition: 0.4s;
        border-radius: 24px;
    }

    .slider[b-pxmujf7spb]:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 4px;
        bottom: 3px;
        background-color: var(--dark-color);
        transition: 0.4s;
        border-radius: 50%;
    }

    input:checked + .slider[b-pxmujf7spb] {
        background-color: var(--brand);
    }

    input:checked + .slider[b-pxmujf7spb]:before {
        transform: translateX(24px);
    }

    .slider.round[b-pxmujf7spb] {
        border-radius: 24px;
    }

    /**************** Button ****************/

    .button-container[b-pxmujf7spb] {
    }

    .button[b-pxmujf7spb] {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        font-weight: 500;
        border-radius: 50rem;
        padding: 0.85rem 1.25rem;
        gap: 0.5rem;
        margin-top: 1rem;
        background: transparent;
        color: var(--text-color);
        outline: none;
        border: 2px solid var(--error-color);
    }

    .button:hover[b-pxmujf7spb] {
        cursor: pointer;
        background: var(--error-color);
        transition: 0.25s;
    }

    .button-icon[b-pxmujf7spb] {
        font-size: 0.85rem;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    .greeting-group[b-pxmujf7spb] {
        margin-bottom: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .greeting[b-pxmujf7spb] {
        font-weight: 600;
        font-size: 1.5rem;
        color: var(--text-color);
    }

    .dashboard-message[b-pxmujf7spb] {
        font-weight: 400;
        font-size: 1rem;
        color: var(--text-muted);
    }

    /**************** Toggle Switch ****************/

    .settings-value[b-pxmujf7spb] {
        display: none;
    }

    /**************** Button ****************/

    .button-container[b-pxmujf7spb] {
    }

    .button[b-pxmujf7spb] {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: 500;
        border-radius: 50rem;
        padding: 0.75rem 1rem;
        gap: 0.5rem;
        margin-top: 1rem;
        background: transparent;
        color: var(--text-color);
        outline: none;
        border: 2px solid var(--error-color);
    }

    .button:hover[b-pxmujf7spb] {
        cursor: pointer;
        background: var(--error-color);
        transition: 0.25s;
    }

    .button-icon[b-pxmujf7spb] {
        font-size: 0.75rem;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/ImageUpload.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {
    .modal[b-wqe9fvvgwz] {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.75);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999;
    }

    .modal-card[b-wqe9fvvgwz] {
        background: var(--dark-color);
        padding: 2rem;
        border-radius: 0.5rem;
        width: 40rem;
        max-width: 90vw;
        box-shadow: 0 10px 30px rgba(0,0,0,.2);
        position: relative;
    }

    .modal-close[b-wqe9fvvgwz] {
        position: absolute;
        top: 2rem;
        right: 2rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 3.5rem;
        height: 3.5rem;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: var(--text-color);
        cursor: pointer;
        font-size: 2rem;
        z-index: 10;
    }

    .modal-close:hover[b-wqe9fvvgwz] {
        background: var(--brand);
        color: var(--dark-color);
        transition: 0.25s;
    }

    .modal-header[b-wqe9fvvgwz] {
        margin-bottom: 16px;
        color: var(--text-color);
    }

    .modal-title[b-wqe9fvvgwz] {
    }

    .modal-description[b-wqe9fvvgwz] {
        color: var(--text-muted);
    }

    .modal-group[b-wqe9fvvgwz] {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }

    .image-drop-zone[b-wqe9fvvgwz] {
        width: 100%;
        height: 30rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        border-radius: var(--border-radius);
    }

    .hover[b-wqe9fvvgwz] {
        background-color: var(--light-color);
    }

    .upload-icon[b-wqe9fvvgwz] {
        font-size: 8rem;
        color: var(--brand);
    }

    .drop-file-message[b-wqe9fvvgwz] {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-color);
    }

    .or-message[b-wqe9fvvgwz] {
        font-size: 1rem;
        font-weight: 500;
        color: var(--text-muted);
        margin-top: 1rem;
        margin-bottom: 1.25rem;
    }

    .files-supported-message-group[b-wqe9fvvgwz] {
        margin-top: 4rem;
        margin-bottom: 1.25rem;
        text-align: center;
    }

    .files-supported-message[b-wqe9fvvgwz] {
        font-size: 1rem;
        font-weight: 500;
        color: var(--text-muted);
    }

    .big-upload-button[b-wqe9fvvgwz] {
        border-radius: 50rem;
        background: var(--brand);
        color: var(--dark-color);
        height: 3rem;
        width: 11rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border: none;
        box-shadow: 0 2px 4px 0 var(--shadow-color);
    }

    .big-upload-button:hover[b-wqe9fvvgwz] {
        filter: brightness(1.20);
    }

    .post-icon[b-wqe9fvvgwz] {
        font-size: 1.25rem;
        margin-right: 0.5rem;
    }

    .post-text[b-wqe9fvvgwz] {
        font-size: 1rem;
        font-weight: 500;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {
    .modal[b-wqe9fvvgwz] {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.75);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999;
    }

    .modal-card[b-wqe9fvvgwz] {
        background: var(--dark-color);
        padding: 2rem;
        border-radius: 0.5rem;
        width: 40rem;
        max-width: 90vw;
        box-shadow: 0 10px 30px rgba(0,0,0,.2);
        position: relative;
    }

    .modal-close[b-wqe9fvvgwz] {
        position: absolute;
        top: 2rem;
        right: 2rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: var(--text-color);
        cursor: pointer;
        font-size: 1.5rem;
        z-index: 10;
    }

    .modal-close:hover[b-wqe9fvvgwz] {
        background: var(--brand);
        color: var(--dark-color);
        transition: 0.25s;
    }

    .modal-header[b-wqe9fvvgwz] {
        margin-bottom: 16px;
        color: var(--text-color);
    }

    .modal-title[b-wqe9fvvgwz] {
    }

    .modal-description[b-wqe9fvvgwz] {
        color: var(--text-muted);
    }

    .modal-group[b-wqe9fvvgwz] {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }

    .image-drop-zone[b-wqe9fvvgwz] {
        width: 100%;
        height: 25rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        border-radius: var(--border-radius);
    }

    .hover[b-wqe9fvvgwz] {
        background-color: var(--light-color);
    }

    .upload-icon[b-wqe9fvvgwz] {
        font-size: 5rem;
        color: var(--brand);
    }

    .drop-file-message[b-wqe9fvvgwz] {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text-color);
    }

    .or-message[b-wqe9fvvgwz] {
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--text-muted);
        margin-top: 1rem;
        margin-bottom: 1.25rem;
    }

    .files-supported-message-group[b-wqe9fvvgwz] {
        margin-top: 3rem;
        margin-bottom: 1.25rem;
        text-align: center;
    }

    .files-supported-message[b-wqe9fvvgwz] {
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--text-muted);
    }

    .big-upload-button[b-wqe9fvvgwz] {
        border-radius: 50rem;
        background: var(--brand);
        color: var(--dark-color);
        height: 3rem;
        width: 10rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border: none;
        box-shadow: 0 2px 4px 0 var(--shadow-color);
    }

    .big-upload-button:hover[b-wqe9fvvgwz] {
        filter: brightness(1.20);
    }

    .post-icon[b-wqe9fvvgwz] {
        font-size: 1.25rem;
        margin-right: 0.5rem;
    }

    .post-text[b-wqe9fvvgwz] {
        font-size: 1rem;
        font-weight: 500;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {

}
/* _content/AstroFormsFrontendServer.App/Components/Common/IncrementButton.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1441px) {
    .increment-button-group[b-7ue2l1ugu1] {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        margin-top: 1.5rem;
    }

    .column[b-7ue2l1ugu1] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
    }

    .title[b-7ue2l1ugu1] {
        font-weight: 500;
        font-size: 0.85rem;
        color: var(--text-color);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
    }

    .description[b-7ue2l1ugu1] {
        font-size: 0.75rem;
        width: 100%;
        color: var(--text-muted);
        display: block;
    }

    .counter-row[b-7ue2l1ugu1] {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .counter-row-logic[b-7ue2l1ugu1] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 10rem;
    }

    .counter-button-left[b-7ue2l1ugu1] {
        border-radius: 8px;
        background: var(--dark-color);
        color: var(--text-color);
        margin-left: 1rem;
        padding: 0.5rem;
        font-size: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .counter-button-left-disabled[b-7ue2l1ugu1] {
        border-radius: 8px;
        background: var(--dark-color);
        color: var(--text-muted);
        margin-left: 1rem;
        padding: 0.5rem;
        font-size: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .counter-button-right[b-7ue2l1ugu1] {
        border-radius: 8px;
        background: var(--dark-color);
        color: var(--text-color);
        padding: 0.5rem;
        font-size: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .counter-button-right-disabled[b-7ue2l1ugu1] {
        border-radius: 8px;
        background: var(--dark-color);
        color: var(--text-muted);
        padding: 0.5rem;
        font-size: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .counter-button-left:hover[b-7ue2l1ugu1] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .counter-button-right:hover[b-7ue2l1ugu1] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .number-input[b-7ue2l1ugu1] {
        /*width: 100%;*/
        font-size: 1rem;
        border: none;
        outline: none;
        background: transparent;
        z-index: 1;
        color: var(--text-color);
        text-align: center;
        font-weight: bold;
        max-width: 4rem;
    }

    /* Chrome, Safari, Edge, and Opera */
    .number-input[b-7ue2l1ugu1]::-webkit-outer-spin-button,
    .number-input[b-7ue2l1ugu1]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    .number-input[type="number"][b-7ue2l1ugu1] {
        -moz-appearance: textfield;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1440px) {
    .increment-button-group[b-7ue2l1ugu1] {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 0.75rem 0rem;
        width: 100%;
    }

    .column[b-7ue2l1ugu1] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
    }

    .title[b-7ue2l1ugu1] {
        font-weight: bold;
        font-size: 0.65rem;
        color: var(--text-color);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
    }

    .description[b-7ue2l1ugu1] {
        font-size: 0.65rem;
        width: 100%;
        color: var(--text-muted);
        display: block;
    }

    .counter-row[b-7ue2l1ugu1] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 10rem;
    }

    .counter-button-left[b-7ue2l1ugu1] {
        border-radius: var(--border-radius);
        background: var(--light-color);
        color: var(--dark-color);
        margin-left: 0.5rem;
        padding: 0.5rem;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .counter-button-left-disabled[b-7ue2l1ugu1] {
        border-radius: var(--border-radius);
        background: var(--light-color);
        color: var(--dark-color);
        margin-left: 0.5rem;
        padding: 0.5rem;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .counter-button-right[b-7ue2l1ugu1] {
        border-radius: var(--border-radius);
        background: var(--brand);
        color: var(--dark-color);
        padding: 0.5rem;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .counter-button-right-disabled[b-7ue2l1ugu1] {
        border-radius: var(--border-radius);
        background: var(--brand);
        color: var(--background-color);
        padding: 0.5rem;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .counter-button-left:hover[b-7ue2l1ugu1] {
        background: var(--dark-color);
        color: var(--text-color);
    }

    .counter-button-right:hover[b-7ue2l1ugu1] {
        background: var(--dark-color);
    }

    .number-input[b-7ue2l1ugu1] {
        /*width: 100%;*/
        font-size: 0.85rem;
        border: none;
        outline: none;
        background: transparent;
        z-index: 1;
        color: var(--text-color);
        text-align: center;
        font-weight: bold;
        max-width: 4rem;
    }

    /* Chrome, Safari, Edge, and Opera */
    .number-input[b-7ue2l1ugu1]::-webkit-outer-spin-button,
    .number-input[b-7ue2l1ugu1]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    .number-input[type="number"][b-7ue2l1ugu1] {
        -moz-appearance: textfield;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    .radio-button-group[b-7ue2l1ugu1] {
        display: none;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/LandingPage/Footer.razor.rz.scp.css */
/*********************************************/
/*                                           */
/*               Shared / Base               */
/*        (mobile-first, shared rules)       */
/*                                           */
/*********************************************/

.footer[b-7btet0zs0l] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top: 0;
    color: var(--text-color);
}

.footer[b-7btet0zs0l]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 1px;
    background: var(--text-muted);
    pointer-events: none;
}

.footer .links[b-7btet0zs0l] {
    display: flex;
    gap: 18px;
}

.footer a[b-7btet0zs0l] {
    color: var(--text-color);
    text-decoration: none;
}

.footer a:hover[b-7btet0zs0l] {
    color: var(--brand);
}

.group[b-7btet0zs0l] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/*********************************************/
/*                                           */
/*              Laptop and up                */
/*                                           */
/*********************************************/

@media screen and (min-width: 1251px) {
    .footer[b-7btet0zs0l] {
        max-width: 860px;
        width: 100%;
        margin: 80px auto;
        padding: 28px 40px;
    }
}

/*********************************************/
/*                                           */
/*              Desktop and up               */
/*                                           */
/*********************************************/

@media screen and (max-width: 1250px) {
    .footer[b-7btet0zs0l] {
        width: 90%;
        margin: 80px 20px 20px;
        padding: 20px 0;
        bottom: 0;
        font-size: 0.85rem;
    }

    .group[b-7btet0zs0l] {
        flex-direction: column;
        align-items: start;
        gap: 2px;
    }

    .divider[b-7btet0zs0l] {
        display: none !important;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/LandingPage/Header.razor.rz.scp.css */
/**************************************/
/*                                    */
/*          Header reveal anim        */
/*                                    */
/**************************************/

.header-reveal[b-51tnpvk3di] {
    opacity: 0;
    transform: translateY(-14px);
    filter: blur(2px);
    animation: headerDrop-b-51tnpvk3di 520ms cubic-bezier(.2,.7,.2,1) forwards 80ms;
    will-change: transform, opacity, filter;
}

@keyframes headerDrop-b-51tnpvk3di {
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-reveal[b-51tnpvk3di] {
        animation: none;
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/**************************************/
/*                                    */
/*            Shared header           */
/*                                    */
/**************************************/

.site-header[b-51tnpvk3di] {
    inset-inline: 0;
    display: grid;
    align-items: center;
    gap: 20px;
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(8px) saturate(120%);
    background: transparent;
    width: 100%;
}

.brand-slot[b-51tnpvk3di] {
    justify-self: start;
}

.primary-nav[b-51tnpvk3di] {
    display: flex;
    align-items: center;
    gap: 22px;
    justify-self: center;
    font-weight: 600;
}

.actions[b-51tnpvk3di] {
    display: flex;
    gap: 10px;
    justify-self: end;
}

.nav-btn[b-51tnpvk3di] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    padding: 0 .95rem;
    border-radius: var(--sleek-border-radius);
    font-weight: 700;
    text-decoration: none;
    border: 2px solid transparent;
    transition: filter .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.btn-ghost[b-51tnpvk3di] {
    border-color: var(--brand);
    color: var(--text-color);
}

.btn-primary[b-51tnpvk3di] {
    background: var(--brand);
    color: var(--dark-color);
}

/**************************************/
/*                                    */
/*          Desktop & Laptop          */
/*                                    */
/**************************************/

@media screen and (min-width: 1251px) {
    .site-header[b-51tnpvk3di] {
        grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
        padding: 18px 32px;
    }

    .nav-link[b-51tnpvk3di] {
        padding: 8px 10px;
        border-radius: 50rem;
        color: var(--text-color);
        text-decoration: none;
    }

    .nav-link:hover[b-51tnpvk3di],
    .nav-link:focus-visible[b-51tnpvk3di] {
        color: var(--dark-color);
        background: var(--brand);
        outline: none;
        transition: 0.25s;
    }

    .nav-link[aria-current="page"][b-51tnpvk3di] {
        color: var(--brand);
    }

    .btn-ghost:hover[b-51tnpvk3di] {
        background: var(--brand);
        color: var(--dark-color);
        transition: 0.25s;
    }

    .btn-primary:hover[b-51tnpvk3di] {
        filter: brightness(1.20);
        transition: 0.25s;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 1250px) {
    .site-header[b-51tnpvk3di] {
        grid-template-columns: 1fr auto 1fr;
        padding: 24px 12px;
    }

    .nav-link[b-51tnpvk3di] {
        display: none;
    }

    .nav-btn[b-51tnpvk3di] {
        white-space: nowrap;
    }

    .btn-ghost:active[b-51tnpvk3di] {
        background: var(--brand);
        color: var(--dark-color);
        transition: 0.25s;
    }

    .btn-primary:active[b-51tnpvk3di] {
        filter: brightness(1.20);
        transition: 0.25s;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/LinkModal.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {
    .modal[b-9kkqih4fpg] {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.75);
        display: block;
        z-index: 3;
    }

    .modal-content[b-9kkqih4fpg] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: var(--dark-color);
        padding-top: 3rem;
        padding-bottom: 2rem;
        padding-left: 2rem;
        padding-right: 2rem;
        border-radius: var(--border-radius);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        z-index: 3;
        width: 25rem;
        height: fit-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .expanded[b-9kkqih4fpg] {
        width: 30rem;
        padding-top: 1rem !important;
    }

    .fit[b-9kkqih4fpg] {
        width: fit-content;
        padding-top: 1rem !important;
    }

    .step-title-group[b-9kkqih4fpg] {
        display: flex;
        flex-direction: column;
        align-items: start;
        width: 100%;
        padding-top: 1rem;
    }

    .step-title[b-9kkqih4fpg] {
        /*font-size: 1.75rem;*/
        font-size: 1.5rem;
        color: var(--text-color);
        font-weight: 700;
    }

    .step-description[b-9kkqih4fpg] {
        /*margin-top: 0.25rem;*/
        font-size: 0.75rem;
        width: 100%;
        color: var(--text-color);
        display: block;
    }

    .copy-link-group[b-9kkqih4fpg] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        gap: 1rem;
    }

    .copy-link-text[b-9kkqih4fpg] {
        font-size: 1rem;
        color: var(--text-color);
        opacity: 0.5;
        width: 100%;
    }

    .link-copied-button[b-9kkqih4fpg] {
        background-color: var(--brand);
        color: var(--dark-color);
        padding: 1rem 1.25rem;
        border: 2px solid var(--brand);
        border-radius: 50px;
        font-weight: 600;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        white-space: nowrap;
        width: 10rem;
    }

    .copy-link-button[b-9kkqih4fpg] {
        background-color: transparent;
        color: var(--text-color);
        padding: 1rem 1.25rem;
        border: 2px solid var(--brand);
        border-radius: 50px;
        cursor: pointer;
        font-weight: 600;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        white-space: nowrap;
        width: 10rem;
    }

    .copy-link-button:hover[b-9kkqih4fpg] {
        background-color: var(--brand);
        color: var(--dark-color);
    }

    .copy-link-icon[b-9kkqih4fpg] {
        margin-right: 0.5rem;
    }

    .modal-options[b-9kkqih4fpg] {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 1rem;
        width: 100%;
    }

    .modal-save[b-9kkqih4fpg] {
        background-color: transparent;
        color: var(--text-color);
        padding: 1rem 1.5rem;
        border: 2px solid var(--brand);
        border-radius: 50px;
        cursor: pointer;
        margin-left: 0.5rem;
        font-weight: 600;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        width: 10rem;
    }

    .modal-save:hover[b-9kkqih4fpg] {
        background-color: var(--brand);
        color: var(--dark-color);
    }

    .modal-cancel[b-9kkqih4fpg] {
        background-color: transparent;
        color: var(--text-color);
        padding: 1rem 1.5rem;
        border: 2px solid transparent;
        border-radius: 50px;
        cursor: pointer;
        margin-right: 0.5rem;
        font-weight: 600;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        width: 10rem;
    }

    .modal-cancel:hover[b-9kkqih4fpg] {
        background-color: var(--light-color);
        color: var(--text-color);
    }

    .check-icon[b-9kkqih4fpg] {
        margin-right: 1rem;
    }

    .qr-wrap[b-9kkqih4fpg] {
        display: flex;
        justify-content: center;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/
@media screen and (min-width: 992px) and (max-width: 1625px) {
    .modal[b-9kkqih4fpg] {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.75);
        display: block;
        z-index: 3;
    }

    .modal-content[b-9kkqih4fpg] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: var(--dark-color);
        padding-top: 3rem;
        padding-bottom: 2rem;
        padding-left: 2rem;
        padding-right: 2rem;
        border-radius: var(--border-radius);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        z-index: 3;
        width: fit-content;
        height: fit-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .expanded[b-9kkqih4fpg] {
        width: 30rem;
        padding-top: 1rem !important;
    }

    .fit[b-9kkqih4fpg] {
        width: fit-content;
        padding-top: 1rem !important;
    }

    .step-title-group[b-9kkqih4fpg] {
        display: flex;
        flex-direction: column;
        align-items: start;
        width: 100%;
        padding-top: 1rem;
    }

    .step-title[b-9kkqih4fpg] {
        /*font-size: 1.75rem;*/
        font-size: 1.25rem;
        color: var(--text-color);
        font-weight: 700;
    }

    .step-description[b-9kkqih4fpg] {
        /*margin-top: 0.25rem;*/
        font-size: 0.75rem;
        width: 100%;
        color: var(--text-color);
        display: block;
    }

    .copy-link-group[b-9kkqih4fpg] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        gap: 0.85rem;
    }

    .copy-link-text[b-9kkqih4fpg] {
        font-size: 0.85rem;
        color: var(--text-color);
        opacity: 0.5;
        width: 100%;
    }

    .link-copied-button[b-9kkqih4fpg] {
        background-color: var(--brand);
        color: var(--dark-color);
        padding: 0.85rem 1.25rem;
        border: 2px solid var(--brand);
        border-radius: 50px;
        font-weight: 600;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        white-space: nowrap;
        width: 8rem;
    }

    .copy-link-button[b-9kkqih4fpg] {
        background-color: transparent;
        color: var(--text-color);
        padding: 0.85rem 1.25rem;
        border: 2px solid var(--brand);
        border-radius: 50px;
        cursor: pointer;
        font-weight: 600;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        white-space: nowrap;
        width: 8rem;
    }

    .copy-link-button:hover[b-9kkqih4fpg] {
        background-color: var(--brand);
        color: var(--dark-color);
    }

    .copy-link-icon[b-9kkqih4fpg] {
        margin-right: 0.5rem;
    }

    .modal-options[b-9kkqih4fpg] {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 1rem;
        width: 100%;
    }

    .modal-save[b-9kkqih4fpg] {
        background-color: transparent;
        color: var(--text-color);
        padding: 0.85rem 1.25rem;
        border: 2px solid var(--brand);
        border-radius: 50px;
        cursor: pointer;
        margin-left: 0.5rem;
        font-weight: 600;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        width: 8rem;
    }

    .modal-save:hover[b-9kkqih4fpg] {
        background-color: var(--brand);
        color: var(--dark-color);
    }

    .modal-cancel[b-9kkqih4fpg] {
        background-color: transparent;
        color: var(--text-color);
        padding: 0.85rem 1.25rem;
        border: 2px solid transparent;
        border-radius: 50px;
        cursor: pointer;
        margin-right: 0.5rem;
        font-weight: 600;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        width: 8rem;
    }

    .modal-cancel:hover[b-9kkqih4fpg] {
        background-color: var(--light-color);
        color: var(--text-color);
    }

    .check-icon[b-9kkqih4fpg] {
        margin-right: 0.75rem;
    }

    .qr-wrap[b-9kkqih4fpg] {
        display: flex;
        justify-content: center;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    .modal[b-9kkqih4fpg] {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.75);
        animation: backdropIn-b-9kkqih4fpg .28s ease forwards;
        z-index: 999;
    }

    .modal-content[b-9kkqih4fpg] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: auto;
        max-height: 75vh;
        overflow: auto;
        border-radius: 16px 16px 0 0;
        border: 1px solid var(--light-color);
        box-shadow: 0 -12px 32px rgba(0,0,0,.22);
        padding: 1.5rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
        transform: translateY(100%);
        animation: sheetIn-b-9kkqih4fpg .28s cubic-bezier(.2,.7,.2,1) forwards;
        will-change: transform;
        background-color: var(--dark-color);
    }

    .modal.closing[b-9kkqih4fpg] {
        animation: backdropOut-b-9kkqih4fpg .22s ease forwards;
    }

    .modal.closing .modal-content[b-9kkqih4fpg] {
        animation: sheetOut-b-9kkqih4fpg .22s cubic-bezier(.4,.2,.2,1) forwards;
    }

    @keyframes sheetIn-b-9kkqih4fpg {
        from {
            transform: translateY(100%);
            opacity: .98;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes sheetOut-b-9kkqih4fpg {
        from {
            transform: translateY(0);
            opacity: 1;
        }

        to {
            transform: translateY(100%);
            opacity: .98;
        }
    }

    @keyframes backdropIn-b-9kkqih4fpg {
        from {
            background: rgba(0,0,0,0);
        }

        to {
            background: rgba(0,0,0,.35);
        }
    }

    @keyframes backdropOut-b-9kkqih4fpg {
        from {
            background: rgba(0,0,0,.35);
        }

        to {
            background: rgba(0,0,0,0);
        }
    }

    .step-title-group[b-9kkqih4fpg] {
        display: flex;
        flex-direction: column;
        align-items: start;
        width: 100%;
    }

    .step-title[b-9kkqih4fpg] {
        /*font-size: 1.75rem;*/
        font-size: 1.5rem;
        color: var(--text-color);
        font-weight: 700;
    }

    .step-description[b-9kkqih4fpg] {
        /*margin-top: 0.25rem;*/
        font-size: 0.75rem;
        width: 100%;
        color: var(--text-color);
        display: block;
    }

    .copy-link-group[b-9kkqih4fpg] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        gap: 1rem;
    }

    .copy-link-text[b-9kkqih4fpg] {
        font-size: 1rem;
        color: var(--text-color);
        opacity: 0.5;
        width: 100%;
    }

    .link-copied-button[b-9kkqih4fpg] {
        background-color: var(--brand);
        color: var(--dark-color);
        padding: 1rem 1.25rem;
        border: 2px solid var(--brand);
        border-radius: 50px;
        font-weight: 600;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        white-space: nowrap;
        width: 10rem;
    }

    .copy-link-button[b-9kkqih4fpg] {
        background-color: transparent;
        color: var(--text-color);
        padding: 1rem 1.25rem;
        border: 2px solid var(--brand);
        border-radius: 50px;
        cursor: pointer;
        font-weight: 600;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        white-space: nowrap;
        width: 10rem;
    }

    .copy-link-button:hover[b-9kkqih4fpg] {
        background-color: var(--brand);
        color: var(--dark-color);
    }

    .copy-link-icon[b-9kkqih4fpg] {
        margin-right: 0.5rem;
    }

    .modal-options[b-9kkqih4fpg] {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 1rem;
        width: 100%;
        gap: 1rem;
    }

    .modal-save[b-9kkqih4fpg] {
        background-color: transparent;
        color: var(--text-color);
        padding: 1rem 1.5rem;
        border: 2px solid var(--brand);
        border-radius: var(--sleek-border-radius);
        cursor: pointer;
        font-weight: 600;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        width: 10rem;
        gap: 0.75rem;
    }

    .modal-save:active[b-9kkqih4fpg] {
        background-color: var(--brand);
        color: var(--dark-color);
    }

    .modal-save-error[b-9kkqih4fpg] {
        background-color: transparent;
        color: var(--text-color);
        padding: 1rem 1.5rem;
        border: 2px solid var(--error-color);
        border-radius: var(--sleek-border-radius);
        cursor: pointer;
        font-weight: 600;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        width: 10rem;
        gap: 0.75rem;
    }

    .modal-cancel[b-9kkqih4fpg] {
        background-color: transparent;
        color: var(--text-color);
        padding: 1rem 1.5rem;
        border: 2px solid transparent;
        border-radius: var(--sleek-border-radius);
        cursor: pointer;
        font-weight: 600;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        width: 10rem;
        gap: 0.75rem;
    }

    .qr-wrap[b-9kkqih4fpg] {
        display: flex;
        justify-content: center;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Loading.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1441px) {
    .background[b-cw3p3zm4qp] {
        --bh-size: 5rem;
        width: var(--bh-size);
        height: var(--bh-size);
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        flex-direction: column;
        margin: auto;
        margin-top: 20%;
    }

    .blackhole[b-cw3p3zm4qp] {
        z-index: 0;
        display: flex;
        position: absolute;
        width: var(--bh-size);
        height: var(--bh-size);
        align-items: center;
        justify-content: center;
    }

    .blackhole-circle[b-cw3p3zm4qp] {
        z-index: 1;
        display: flex;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: radial-gradient(circle at center, var(--dark-color) 25%, var(--brand) 35%, var(--brand) 100%);
        box-shadow: 0px 0px 2rem var(--brand-graph);
        align-items: center;
        justify-content: center;
    }

    .blackhole-circle[b-cw3p3zm4qp]::after {
        z-index: 1;
        position: absolute;
        content: "";
        display: flex;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 4px solid var(--brand);
        background: radial-gradient(circle at center, var(--dark-color) 35%, var(--brand) 60%, var(--brand) 100%);
        box-shadow: 0px 0px 5rem var(--brand-graph);
        align-items: center;
        justify-content: center;
        filter: blur(4px);
        animation: pulseAnimation-b-cw3p3zm4qp linear infinite 2s alternate-reverse;
    }

    .blackhole-disc[b-cw3p3zm4qp] {
        position: absolute;
        z-index: 1;
        display: flex;
        width: calc(var(--bh-size) * 0.62);
        height: calc(var(--bh-size) * 1.25);
        border-radius: 50%;
        background: radial-gradient(circle at center, var(--brand) 80%, #353535 90%, var(--brand) 100%);
        filter: blur(1rem) brightness(130%);
        border: 1rem solid var(--brand);
        box-shadow: 0px 0px 3rem var(--brand-onhover);
        transform: rotate3d(1, 1, 1, 220deg);
        animation: pulseAnimation2-b-cw3p3zm4qp linear infinite 2s alternate-reverse;
        align-items: center;
        justify-content: center;
    }

    .blackhole-disc[b-cw3p3zm4qp]::before {
        content: "";
        position: absolute;
        z-index: 1;
        display: flex;
        width: 5rem;
        height: 10rem;
        border-radius: 50%;
        background: radial-gradient(circle at center, var(--brand) 80%, #353535 90%, var(--brand) 100%);
        filter: blur(3rem);
        border: 1rem solid var(--brand);
        box-shadow: 0px 0px 6rem var(--brand-onhover);
        transform: rotate3d(1, 1, 1, 220deg);
        animation: pulseAnimation-b-cw3p3zm4qp linear infinite 2s alternate-reverse;
    }

    @keyframes pulseAnimation-b-cw3p3zm4qp {
        0% {
            box-shadow: 0px 0px 3rem var(--brand-graph);
            transform: scale(1);
        }

        100% {
            box-shadow: 0px 0px 5rem var(--brand-graph);
            transform: scale(1.09);
        }
    }

    @keyframes pulseAnimation2-b-cw3p3zm4qp {
        0% {
            box-shadow: 0px 0px 3rem var(--brand-graph);
            transform: rotate(1, 1, 1, 220deg) scale(1);
        }

        100% {
            box-shadow: 0px 0px 5rem var(--brand-graph);
            transform: rotate(1, 1, 1, 220deg) scale(0.95);
        }
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/
@media screen and (min-width: 992px) and (max-width: 1440px) {
    .background[b-cw3p3zm4qp] {
        --bh-size: 5rem;
        width: var(--bh-size);
        height: var(--bh-size);
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        flex-direction: column;
        margin: auto;
        margin-top: 20%;
    }

    .blackhole[b-cw3p3zm4qp] {
        z-index: 0;
        display: flex;
        position: absolute;
        width: var(--bh-size);
        height: var(--bh-size);
        align-items: center;
        justify-content: center;
    }

    .blackhole-circle[b-cw3p3zm4qp] {
        z-index: 1;
        display: flex;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: radial-gradient(circle at center, var(--dark-color) 25%, var(--brand) 35%, var(--brand) 100%);
        box-shadow: 0px 0px 2rem var(--brand-graph);
        align-items: center;
        justify-content: center;
    }

    .blackhole-circle[b-cw3p3zm4qp]::after {
        z-index: 1;
        position: absolute;
        content: "";
        display: flex;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 4px solid var(--brand);
        background: radial-gradient(circle at center, var(--dark-color) 35%, var(--brand) 60%, var(--brand) 100%);
        box-shadow: 0px 0px 5rem var(--brand-graph);
        align-items: center;
        justify-content: center;
        filter: blur(4px);
        animation: pulseAnimation-b-cw3p3zm4qp linear infinite 2s alternate-reverse;
    }

    .blackhole-disc[b-cw3p3zm4qp] {
        position: absolute;
        z-index: 1;
        display: flex;
        width: calc(var(--bh-size) * 0.62);
        height: calc(var(--bh-size) * 1.25);
        border-radius: 50%;
        background: radial-gradient(circle at center, var(--brand) 80%, #353535 90%, var(--brand) 100%);
        filter: blur(1rem) brightness(130%);
        border: 1rem solid var(--brand);
        box-shadow: 0px 0px 3rem var(--brand-onhover);
        transform: rotate3d(1, 1, 1, 220deg);
        animation: pulseAnimation2-b-cw3p3zm4qp linear infinite 2s alternate-reverse;
        align-items: center;
        justify-content: center;
    }

    .blackhole-disc[b-cw3p3zm4qp]::before {
        content: "";
        position: absolute;
        z-index: 1;
        display: flex;
        width: 5rem;
        height: 10rem;
        border-radius: 50%;
        background: radial-gradient(circle at center, var(--brand) 80%, #353535 90%, var(--brand) 100%);
        filter: blur(3rem);
        border: 1rem solid var(--brand);
        box-shadow: 0px 0px 6rem var(--brand-onhover);
        transform: rotate3d(1, 1, 1, 220deg);
        animation: pulseAnimation-b-cw3p3zm4qp linear infinite 2s alternate-reverse;
    }

    @keyframes pulseAnimation-b-cw3p3zm4qp {
        0% {
            box-shadow: 0px 0px 3rem var(--brand-graph);
            transform: scale(1);
        }

        100% {
            box-shadow: 0px 0px 5rem var(--brand-graph);
            transform: scale(1.09);
        }
    }

    @keyframes pulseAnimation2-b-cw3p3zm4qp {
        0% {
            box-shadow: 0px 0px 3rem var(--brand-graph);
            transform: rotate(1, 1, 1, 220deg) scale(1);
        }

        100% {
            box-shadow: 0px 0px 5rem var(--brand-graph);
            transform: rotate(1, 1, 1, 220deg) scale(0.95);
        }
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/
@media screen and (max-width: 991px) {
    .background[b-cw3p3zm4qp] {
        --bh-size: 4rem;
        width: var(--bh-size);
        height: var(--bh-size);
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        flex-direction: column;
        margin: auto;
        margin-top: 50%;
    }

    .blackhole[b-cw3p3zm4qp] {
        z-index: 0;
        display: flex;
        position: absolute;
        width: var(--bh-size);
        height: var(--bh-size);
        align-items: center;
        justify-content: center;
    }

    .blackhole-circle[b-cw3p3zm4qp] {
        z-index: 1;
        display: flex;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: radial-gradient(circle at center, var(--dark-color) 25%, var(--brand) 35%, var(--brand) 100%);
        box-shadow: 0px 0px 2rem var(--brand-graph);
        align-items: center;
        justify-content: center;
    }

    .blackhole-circle[b-cw3p3zm4qp]::after {
        z-index: 1;
        position: absolute;
        content: "";
        display: flex;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 4px solid var(--brand);
        background: radial-gradient(circle at center, var(--dark-color) 35%, var(--brand) 60%, var(--brand) 100%);
        box-shadow: 0px 0px 5rem var(--brand-graph);
        align-items: center;
        justify-content: center;
        filter: blur(4px);
        animation: pulseAnimation-b-cw3p3zm4qp linear infinite 2s alternate-reverse;
    }

    .blackhole-disc[b-cw3p3zm4qp] {
        position: absolute;
        z-index: 1;
        display: flex;
        width: calc(var(--bh-size) * 0.62);
        height: calc(var(--bh-size) * 1.25);
        border-radius: 50%;
        background: radial-gradient(circle at center, var(--brand) 80%, #353535 90%, var(--brand) 100%);
        filter: blur(1rem) brightness(130%);
        border: 1rem solid var(--brand);
        box-shadow: 0px 0px 3rem var(--brand-onhover);
        transform: rotate3d(1, 1, 1, 220deg);
        animation: pulseAnimation2-b-cw3p3zm4qp linear infinite 2s alternate-reverse;
        align-items: center;
        justify-content: center;
    }

    .blackhole-disc[b-cw3p3zm4qp]::before {
        content: "";
        position: absolute;
        z-index: 1;
        display: flex;
        width: 5rem;
        height: 10rem;
        border-radius: 50%;
        background: radial-gradient(circle at center, var(--brand) 80%, #353535 90%, var(--brand) 100%);
        filter: blur(3rem);
        border: 1rem solid var(--brand);
        box-shadow: 0px 0px 6rem var(--brand-onhover);
        transform: rotate3d(1, 1, 1, 220deg);
        animation: pulseAnimation-b-cw3p3zm4qp linear infinite 2s alternate-reverse;
    }

    @keyframes pulseAnimation-b-cw3p3zm4qp {
        0% {
            box-shadow: 0px 0px 3rem var(--brand-graph);
            transform: scale(1);
        }

        100% {
            box-shadow: 0px 0px 5rem var(--brand-graph);
            transform: scale(1.09);
        }
    }

    @keyframes pulseAnimation2-b-cw3p3zm4qp {
        0% {
            box-shadow: 0px 0px 3rem var(--brand-graph);
            transform: rotate(1, 1, 1, 220deg) scale(1);
        }

        100% {
            box-shadow: 0px 0px 5rem var(--brand-graph);
            transform: rotate(1, 1, 1, 220deg) scale(0.95);
        }
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Logo.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {
    .form-logo[b-o642prxt9f] {
        position: fixed;
        top: 1.25rem;
        left: 1.25rem;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }

    .form-logo-image[b-o642prxt9f] {
        height: 75px;
        width: auto;
        border-radius: 8px;
        object-fit: contain;
        opacity: 0.9;
        transition: opacity 0.3s ease, transform 0.3s ease;
        pointer-events: auto;
    }

    .form-logo-image:hover[b-o642prxt9f] {
        opacity: 1;
        transform: scale(1.03);
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/
@media screen and (min-width: 992px) and (max-width: 1625px) {
    .form-logo[b-o642prxt9f] {
        position: fixed;
        top: 1.25rem;
        left: 1.25rem;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }

    .form-logo-image[b-o642prxt9f] {
        height: 75px;
        width: auto;
        border-radius: 8px;
        object-fit: contain;
        opacity: 0.9;
        transition: opacity 0.3s ease, transform 0.3s ease;
        pointer-events: auto;
    }

    .form-logo-image:hover[b-o642prxt9f] {
        opacity: 1;
        transform: scale(1.03);
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    .form-logo[b-o642prxt9f] {
        position: fixed;
        top: 0.75rem;
        left: 0.75rem;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }

    .form-logo-image[b-o642prxt9f] {
        height: 75px;
        width: auto;
        border-radius: 8px;
        object-fit: contain;
        opacity: 0.9;
        transition: opacity 0.3s ease, transform 0.3s ease;
        pointer-events: auto;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Modal.razor.rz.scp.css */
/**************************************/
/*                                    */
/*        Shared (Desktop+Laptop)     */
/*                                    */
/**************************************/

.modal[b-rcxorhqk6p] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 3;
}

@media screen and (min-width: 992px) {
    .modal[b-rcxorhqk6p] {
        display: block;
    }

    .modal-content[b-rcxorhqk6p] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: var(--dark-color);
        padding: 3rem 2rem 2rem;
        border-radius: var(--border-radius);
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
        width: 22rem;
        height: fit-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .confirmation-icon[b-rcxorhqk6p] {
        font-size: 4rem;
        color: var(--brand);
        padding-bottom: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal-message[b-rcxorhqk6p] {
        color: var(--text-color);
        font-weight: 500;
        text-align: center;
        font-size: 16px;
        margin-bottom: 1rem;
    }

    .modal-options[b-rcxorhqk6p] {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 1rem;
        width: 100%;
        gap: 1rem;
    }

    .modal-save[b-rcxorhqk6p],
    .modal-cancel[b-rcxorhqk6p] {
        background: transparent;
        color: var(--text-color);
        padding: 0.85rem 1.25rem;
        border-radius: 50px;
        cursor: pointer;
        font-weight: 600;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        width: 50%;
        border: 2px solid transparent;
    }

    .modal-save[b-rcxorhqk6p] {
        border-color: var(--brand);
    }

    .modal-save:hover[b-rcxorhqk6p] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .modal-cancel:hover[b-rcxorhqk6p] {
        background: var(--light-color);
    }

    .check-icon[b-rcxorhqk6p] {
        margin-right: 0.65rem;
    }
}

/**************************************/
/*                                    */
/*               Desktop              */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {
    .modal-content[b-rcxorhqk6p] {
        width: 25rem;
    }

    .confirmation-icon[b-rcxorhqk6p] {
        font-size: 5rem;
    }

    .modal-message[b-rcxorhqk6p] {
        font-size: 20px;
    }

    .modal-save[b-rcxorhqk6p],
    .modal-cancel[b-rcxorhqk6p] {
        padding: 1rem 1.5rem;
        font-size: 20px;
        width: 50%;
    }

    .check-icon[b-rcxorhqk6p] {
        margin-right: 1rem;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    .modal[b-rcxorhqk6p] {
        background: rgba(0,0,0,0.75);
        animation: backdropIn-b-rcxorhqk6p .28s ease forwards;
        z-index: 999;
    }

    .modal-content[b-rcxorhqk6p] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        max-height: 75vh;
        overflow: auto;
        border-radius: 16px 16px 0 0;
        border: 1px solid var(--light-color);
        box-shadow: 0 -12px 32px rgba(0,0,0,.22);
        padding: 1.5rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
        transform: translateY(100%);
        animation: sheetIn-b-rcxorhqk6p .28s cubic-bezier(.2,.7,.2,1) forwards;
        will-change: transform;
        background: var(--dark-color);
    }

    .modal.closing[b-rcxorhqk6p] {
        animation: backdropOut-b-rcxorhqk6p .22s ease forwards;
    }

    .modal.closing .modal-content[b-rcxorhqk6p] {
        animation: sheetOut-b-rcxorhqk6p .22s cubic-bezier(.4,.2,.2,1) forwards;
    }

    @keyframes sheetIn-b-rcxorhqk6p {
        from {
            transform: translateY(100%);
            opacity: .98;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes sheetOut-b-rcxorhqk6p {
        from {
            transform: translateY(0);
            opacity: 1;
        }

        to {
            transform: translateY(100%);
            opacity: .98;
        }
    }

    @keyframes backdropIn-b-rcxorhqk6p {
        from {
            background: rgba(0,0,0,0);
        }

        to {
            background: rgba(0,0,0,.35);
        }
    }

    @keyframes backdropOut-b-rcxorhqk6p {
        from {
            background: rgba(0,0,0,.35);
        }

        to {
            background: rgba(0,0,0,0);
        }
    }

    .confirmation-icon[b-rcxorhqk6p] {
        font-size: 5rem;
        color: var(--brand);
        padding-bottom: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal-message[b-rcxorhqk6p] {
        color: var(--text-color);
        font-weight: 500;
        text-align: center;
        font-size: 20px;
        margin-bottom: 1rem;
    }

    .modal-options[b-rcxorhqk6p] {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 1rem;
        width: 100%;
        gap: 1rem;
    }

    .modal-save[b-rcxorhqk6p],
    .modal-save-error[b-rcxorhqk6p],
    .modal-cancel[b-rcxorhqk6p] {
        background: transparent;
        color: var(--text-color);
        padding: 1rem 1.5rem;
        border-radius: var(--sleek-border-radius);
        cursor: pointer;
        font-weight: 600;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        width: 50%;
        gap: 0.75rem;
        border: 2px solid transparent;
    }

    .modal-save[b-rcxorhqk6p] {
        border-color: var(--brand);
    }

    .modal-save-error[b-rcxorhqk6p] {
        border-color: var(--error-color);
    }

    .modal-save:active[b-rcxorhqk6p] {
        background: var(--brand);
        color: var(--dark-color);
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/NavMenu.razor.rz.scp.css */
.new-form-button:disabled[b-2s8f5x7qjd] {
    opacity: 0.6;
    cursor: not-allowed;
    filter: none;
}

/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {

    .app-sidenav[b-2s8f5x7qjd] {
        position: fixed;
        width: 220px;
        padding: 1rem;
        display: flex;
        justify-content: center;
        flex-direction: column;
        gap: 12px;
        height: 100%;
        z-index: 1;
    }

    .nav-items[b-2s8f5x7qjd] {
        list-style: none;
        margin: 0;
        display: grid;
        gap: 4px;
    }

    .nav-link[b-2s8f5x7qjd] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding-left: 1rem;
        height: 3.25rem;
        border-radius: 50rem;
        color: var(--text-color);
        text-decoration: none;
        transition: background 0.15s ease, color 0.15s ease;
        font-weight: 700;
    }

    .nav-link i[b-2s8f5x7qjd] {
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        font-size: 1.25rem;
    }

    .active[b-2s8f5x7qjd] {
        color: var(--brand);
    }

    .nav-link:hover[b-2s8f5x7qjd] {
        background: var(--light-color);
    }

    .new-form-button[b-2s8f5x7qjd] {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--brand);
        color: var(--dark-color);
        height: 3.25rem;
        border-radius: 50rem;
        font-weight: 700;
        box-shadow: 0 8px 20px rgba(0,0,0,.25);
        outline: none;
        border: none;
        font-size: 1rem;
    }

    .new-form-button:hover[b-2s8f5x7qjd] {
        cursor: pointer;
        filter: brightness(1.20);
    }

    :root[b-2s8f5x7qjd] {
        --sidenav-w: 220px;
    }

    .main-with-sidenav[b-2s8f5x7qjd] {
        margin-left: var(--sidenav-w);
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {

    .app-sidenav[b-2s8f5x7qjd] {
        position: fixed;
        width: 200px;
        padding: 1rem;
        display: flex;
        justify-content: center;
        flex-direction: column;
        gap: 10px;
        height: 100%;
        z-index: 1;
    }

    .nav-items[b-2s8f5x7qjd] {
        list-style: none;
        margin: 0;
        display: grid;
        gap: 6px;
    }

    .nav-link[b-2s8f5x7qjd] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding-left: 0.75rem;
        height: 3rem;
        border-radius: 50rem;
        color: var(--text-color);
        text-decoration: none;
        transition: background 0.15s ease, color 0.15s ease;
        font-size: 0.85rem;
        font-weight: 700;
    }

    .nav-link i[b-2s8f5x7qjd] {
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        font-size: 1.15rem;
    }

    .active[b-2s8f5x7qjd] {
        color: var(--brand);
    }

    .nav-link:hover[b-2s8f5x7qjd] {
        background: var(--light-color);
    }

    .new-form-button[b-2s8f5x7qjd] {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--brand);
        color: var(--dark-color);
        height: 3rem;
        border-radius: 50rem;
        font-weight: 700;
        box-shadow: 0 8px 20px rgba(0,0,0,.25);
        outline: none;
        border: none;
        font-size: 0.85rem;
    }

    .new-form-button:hover[b-2s8f5x7qjd] {
        cursor: pointer;
        filter: brightness(1.20);
    }

    :root[b-2s8f5x7qjd] {
        --sidenav-w: 200px;
    }

    .main-with-sidenav[b-2s8f5x7qjd] {
        margin-left: var(--sidenav-w);
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {

    .app-sidenav[b-2s8f5x7qjd] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        height: calc(75px + env(safe-area-inset-bottom));
        width: 100%;
        padding: 0 .5rem env(safe-area-inset-bottom) .5rem;
        background: var(--dark-color);
        display: grid;
        align-items: center;
        gap: 0;
        z-index: 20;
        border-top: 1px solid var(--light-color);
    }

    .nav-items[b-2s8f5x7qjd] {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        margin: 0;
        padding: 0;
        gap: 0;
        list-style-type: none;
    }

    .nav-items li[b-2s8f5x7qjd] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 6rem;
    }

    .nav-link[b-2s8f5x7qjd] {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: auto;
        padding: 8px 10px;
        gap: 8px;
        color: var(--text-color);
        background: transparent;
        text-decoration: none;
    }

    .nav-link i[b-2s8f5x7qjd] {
        font-size: 2rem;
        display: grid;
        place-items: center;
    }

    .nav-link span[b-2s8f5x7qjd] {
        font-size: 11px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
    }

    .nav-link:hover[b-2s8f5x7qjd] {
        background: var(--light-color);
    }

    .active[b-2s8f5x7qjd] {
        color: var(--brand);
    }

    .new-form-button[b-2s8f5x7qjd] {
        display: none;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/NothingFound.razor.rz.scp.css */
/**************************************/
/*                                    */
/*        Shared / Mobile-first       */
/*                                    */
/**************************************/

@keyframes spaceDrift-b-pd325ksa01 {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100vh);
    }
}

.content[b-pd325ksa01] {
    min-height: 100vh;
    display: flex;
    overflow: auto;
    position: relative;
    background: radial-gradient(circle at top, #1c2944 0, #060b19 55%, #020309 100%);
    background-attachment: fixed;
}

.content[b-pd325ksa01]::before,
.content[b-pd325ksa01]::after {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 200vh;
    background: transparent;
    pointer-events: none;
    mix-blend-mode: screen;
}

.content[b-pd325ksa01]::before {
    width: 1px;
    height: 1px;
    opacity: 0.8;
    animation: spaceDrift-b-pd325ksa01 150s linear infinite;
    box-shadow: 10vw 10vh #fff, 10vw 110vh #fff, 15vw 80vh #fff, 15vw 180vh #fff, 35vw 12vh #fff, 35vw 112vh #fff, 80vw 22vh #fff, 80vw 122vh #fff, 70vw 80vh #fff, 70vw 180vh #fff, 12vw 95vh #fff, 12vw 195vh #fff, 45vw 45vh #fff, 45vw 145vh #fff, 95vw 95vh #fff, 95vw 195vh #fff, 22vw 33vh #fff, 22vw 133vh #fff, 65vw 12vh #fff, 65vw 112vh #fff, 11vw 65vh #fff, 11vw 165vh #fff, 88vw 44vh #fff, 88vw 144vh #fff, 55vw 55vh #fff, 55vw 155vh #fff, 30vw 90vh #fff, 30vw 190vh #fff, 60vw 30vh #fff, 60vw 130vh #fff, 25vw 25vh #fff, 25vw 125vh #fff, 75vw 75vh #fff, 75vw 175vh #fff, 40vw 60vh #fff, 40vw 160vh #fff, 98vw 50vh #fff, 98vw 150vh #fff, 05vw 05vh #fff, 05vw 105vh #fff;
}

.content[b-pd325ksa01]::after {
    width: 2px;
    height: 2px;
    opacity: 0.6;
    animation: spaceDrift-b-pd325ksa01 100s linear infinite;
    box-shadow: 20vw 20vh #b4dcff, 20vw 120vh #b4dcff, 85vw 15vh #fff, 85vw 115vh #fff, 40vw 80vh #b4dcff, 40vw 180vh #b4dcff, 60vw 60vh #fff, 60vw 160vh #fff, 10vw 90vh #b4dcff, 10vw 190vh #b4dcff, 90vw 40vh #fff, 90vw 140vh #fff, 30vw 50vh #b4dcff, 30vw 150vh #b4dcff, 75vw 85vh #fff, 75vw 185vh #fff;
}

.group[b-pd325ksa01] {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.icon[b-pd325ksa01] {
    font-size: 8rem;
    color: var(--error-color);
}

.title[b-pd325ksa01] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
}

.subtitle[b-pd325ksa01] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/**************** Powered By ****************/

.astroform-dock[b-pd325ksa01] {
    display: none;
}

/**************************************/
/*                                    */
/*               Laptop               */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1440px) {
    .icon[b-pd325ksa01] {
        font-size: 7rem;
    }

    /**************** Powered By ****************/

    .astroform-dock[b-pd325ksa01] {
        position: fixed;
        right: 16px;
        bottom: calc(24px + env(safe-area-inset-bottom));
        z-index: 2000;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .astroform-dock-pill[b-pd325ksa01] {
        height: 36px;
        padding: 0 14px;
        background: rgba(255,255,255,0.10);
        backdrop-filter: blur(10px);
        border-radius: 999px;
        backdrop-filter: blur(10px);
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--text-color);
        white-space: nowrap;
        font-weight: 700;
        text-decoration: none;
    }

    .astroform-dock-pill:hover[b-pd325ksa01] {
        background: var(--brand);
        color: var(--dark-color);
        transition: 0.25s;
        cursor: pointer;
    }

    .astroform-dock-brand[b-pd325ksa01] {
        font-size: 13px;
        opacity: 0.9;
    }
}

/**************************************/
/*                                    */
/*               Desktop              */
/*                                    */
/**************************************/

@media screen and (min-width: 1441px) {
    .title[b-pd325ksa01] {
        font-size: 2rem;
    }

    .subtitle[b-pd325ksa01] {
        font-size: 1.5rem;
    }

    /**************** Powered By ****************/

    .astroform-dock[b-pd325ksa01] {
        position: fixed;
        right: 16px;
        bottom: calc(24px + env(safe-area-inset-bottom));
        z-index: 2000;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .astroform-dock-pill[b-pd325ksa01] {
        height: 44px;
        padding: 0 14px;
        background: rgba(255,255,255,0.10);
        backdrop-filter: blur(10px);
        border-radius: 999px;
        backdrop-filter: blur(10px);
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--text-color);
        white-space: nowrap;
        font-weight: 700;
        text-decoration: none;
    }

    .astroform-dock-pill:hover[b-pd325ksa01] {
        background: var(--brand);
        color: var(--dark-color);
        transition: 0.25s;
        cursor: pointer;
    }

    .astroform-dock-brand[b-pd325ksa01] {
        font-size: 13px;
        opacity: 0.9;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/ProgressBar.razor.rz.scp.css */
/**************************************/
/*                                    */
/*        Shared / Mobile-first       */
/*                                    */
/**************************************/

.progress-container[b-rmj1afafgv] {
    width: 100%;
    height: 4px;
    background-color: transparent;
    overflow: hidden;
    position: fixed;
    top: 0;
}

.progress-bar[b-rmj1afafgv] {
    height: 100%;
    background-color: var(--brand);
    transition: width 0.5s ease-in-out;
}

/**************************************/
/*                                    */
/*          Desktop + Laptop          */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) {
    .progress-container[b-rmj1afafgv] {
        top: auto;
        bottom: 0;
    }
}

/**************************************/
/*                                    */
/*               Desktop              */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {
    .progress-container[b-rmj1afafgv] {
        height: 5px;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/QuestionTypePicker.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Shared                */
/*                                    */
/**************************************/

.modal[b-gggnipmw8l] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.modal-card[b-gggnipmw8l] {
    background: var(--dark-color);
    padding: 2rem;
    border-radius: 0.5rem;
    width: 50rem;
    max-width: 90vw;
    box-shadow: 0 10px 30px rgba(0,0,0,.2);
    position: relative;
}

.modal-close[b-gggnipmw8l] {
    position: absolute;
    top: 2rem;
    right: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    font-size: 2rem;
    z-index: 10;
}

.modal-close:hover[b-gggnipmw8l] {
    background: var(--brand);
    color: var(--dark-color);
    transition: 0.25s;
}

.modal-header[b-gggnipmw8l] {
    margin-bottom: 16px;
    color: var(--text-color);
}

.modal-description[b-gggnipmw8l] {
    color: var(--text-muted);
}

.question-type-picker-grid[b-gggnipmw8l] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 1rem;
}

.question-category-card[b-gggnipmw8l] {
    background: var(--light-color);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
}

.question-category-header[b-gggnipmw8l] {
    margin-bottom: 0.75rem;
}

.category-name[b-gggnipmw8l] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
}

.category-hint[b-gggnipmw8l] {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.question-type-list[b-gggnipmw8l] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.question-type-item[b-gggnipmw8l] {
    background: var(--dark-color);
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    padding: 0.75rem;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    transition: 0.2s ease;
}

.question-type-item:hover[b-gggnipmw8l] {
    border-color: var(--brand);
    cursor: pointer;
}

.question-type-item i[b-gggnipmw8l] {
    font-size: 1.2rem;
    color: var(--brand);
}

.question-type-description[b-gggnipmw8l] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/**************************************/
/*                                    */
/*               Laptop               */
/*                                    */
/**************************************/
@media screen and (min-width: 992px) and (max-width: 1625px) {
    .modal-close[b-gggnipmw8l] {
        width: 3rem;
        height: 3rem;
        font-size: 1.5rem;
    }

    .question-type-picker-grid[b-gggnipmw8l] {
        gap: 1rem;
        margin-top: 0.75rem;
    }

    .question-category-card[b-gggnipmw8l] {
        padding: 1rem;
    }

    .question-category-header[b-gggnipmw8l] {
        margin-bottom: 0.5rem;
    }

    .category-name[b-gggnipmw8l] {
        font-size: 1rem;
    }

    .category-hint[b-gggnipmw8l] {
        font-size: 0.75rem;
    }

    .question-type-list[b-gggnipmw8l] {
        gap: 0.5rem;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/ResponseItem.razor.rz.scp.css */
/**************************************/
/*                                    */
/*        Shared / Mobile-first       */
/*                                    */
/**************************************/

.response-listing-card[b-m6uwjol9wx] {
    height: fit-content;
    width: 100%;
    margin-bottom: 0.5rem;
    border-radius: var(--border-radius);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    background: transparent;
}

.response-time-taken[b-m6uwjol9wx] {
    width: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.time-taken-value[b-m6uwjol9wx] {
    font-weight: bold;
    font-size: 1.25rem;
    text-align: center;
    color: var(--brand);
}

.time-taken-label[b-m6uwjol9wx] {
    font-size: 0.65rem;
    text-align: center;
    color: var(--text-color);
}

.response-listing-group[b-m6uwjol9wx] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    width: 100%;
    margin-left: 0.75rem;
}

.response-listing-title[b-m6uwjol9wx] {
    color: var(--text-color);
    font-size: 1.15rem;
    font-weight: 700;
    white-space: nowrap;
}

.response-listing-subtitle[b-m6uwjol9wx] {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 300;
    display: flex;
    align-items: center;
    justify-content: start;
}

.response-listing-options[b-m6uwjol9wx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

.status-chip[b-m6uwjol9wx] {
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    position: relative;
    display: inline-flex;
    text-align: center;
    padding: 0.5rem 1rem;
    align-items: center;
    justify-content: center;
    width: fit-content;
    background-color: var(--brand);
    color: var(--dark-color);
    white-space: nowrap;
}

.actions-buttons-group[b-m6uwjol9wx] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.dropdown-popup[b-m6uwjol9wx] {
    position: absolute;
    top: 100%;
    width: 12rem;
    border-radius: var(--border-radius);
    background-color: var(--dark-color);
    z-index: 3;
    right: 0;
    padding: 0.5rem;
}

.dropdown-option[b-m6uwjol9wx] {
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 0.5rem 1rem;
    cursor: pointer;
    border-radius: 10px;
    color: var(--text-color);
    font-size: 0.85rem;
    font-weight: 500;
    gap: 0.5rem;
}

.dropdown-option:hover[b-m6uwjol9wx] {
    background: var(--brand);
    color: var(--dark-color);
}

.dropdown-icon[b-m6uwjol9wx] {
    font-size: 1.5rem;
}

.action-button[b-m6uwjol9wx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    color: var(--brand);
    margin: 0 0.25rem;
}

.action-button:hover[b-m6uwjol9wx] {
    background: var(--light-color);
    cursor: pointer;
}

.action-icon[b-m6uwjol9wx] {
    font-size: 1rem;
}

/**************************************/
/*                                    */
/*               Laptop               */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {
    .response-listing-card[b-m6uwjol9wx] {
        margin-bottom: 0.35rem;
        justify-content: space-evenly;
        padding: 0.85rem;
        background: var(--background-color);
        border: 1px solid var(--light-color);
    }

    .response-listing-card:hover[b-m6uwjol9wx] {
        border-color: var(--brand);
        cursor: pointer;
    }

    .response-time-taken[b-m6uwjol9wx] {
        width: 3.25rem;
    }

    .time-taken-value[b-m6uwjol9wx] {
        font-size: 1.15rem;
    }

    .response-listing-title[b-m6uwjol9wx] {
        font-size: 1rem;
    }

    .response-listing-subtitle[b-m6uwjol9wx] {
        color: var(--text-color);
        font-size: 0.75rem;
    }

    .status-chip[b-m6uwjol9wx] {
        font-size: 0.75rem;
        padding: 0.5rem 0.85rem;
    }

    .dropdown-popup[b-m6uwjol9wx] {
        width: 10rem;
        left: 0;
        right: auto;
    }

    .dropdown-option[b-m6uwjol9wx] {
        padding: 0.35rem 0.85rem;
        font-size: 0.75rem;
    }

    .dropdown-icon[b-m6uwjol9wx] {
        font-size: 1rem;
    }

    .action-button[b-m6uwjol9wx] {
        width: 2rem;
        height: 2rem;
    }

    .action-icon[b-m6uwjol9wx] {
        font-size: 0.85rem;
    }
}

/**************************************/
/*                                    */
/*               Desktop              */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {
    .response-listing-card[b-m6uwjol9wx] {
        padding: 1rem;
        background: var(--background-color);
        border: 1px solid var(--light-color);
    }

    .response-listing-card:hover[b-m6uwjol9wx] {
        border-color: var(--brand);
        cursor: pointer;
    }

    .time-taken-value[b-m6uwjol9wx] {
        font-size: 1.5rem;
    }

    .dropdown-popup[b-m6uwjol9wx] {
        left: 0;
        right: auto;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Responses/AddressInputResponse.razor.rz.scp.css */
/*********************************************/
/*                                           */
/*               Shared / Base               */
/*        (mobile-first, shared rules)       */
/*                                           */
/*********************************************/

.empty-spacing[b-m7k42vcjjo] {
    margin-top: 2rem;
}

.address-input-container[b-m7k42vcjjo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    padding: 0.75rem;
    width: 100%;
    max-width: 30rem;
}

.address-input[b-m7k42vcjjo] {
    width: 100%;
    padding: 0.75rem;
    padding-right: 2.5rem;
    font-size: 0.85rem;
    background: transparent;
    border: none;
    outline: none;
    border-bottom: 2px solid var(--brand);
    color: var(--text-color);
}

.address-input[b-m7k42vcjjo]::placeholder {
    color: var(--text-muted);
}

.text-input[b-m7k42vcjjo] {
    width: 100%;
    color: var(--text-muted);
    font-size: 1.5rem;
    font-weight: 500;
    opacity: 0.75;
}

/*********************************************/
/*                                           */
/*              Laptop and up                */
/*                                           */
/*********************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {
    .empty-spacing[b-m7k42vcjjo] {
        margin-top: 3rem;
    }

    .text-input[b-m7k42vcjjo] {
        font-size: 1.25rem;
    }
}

/*********************************************/
/*                                           */
/*              Desktop and up               */
/*                                           */
/*********************************************/

@media screen and (min-width: 1626px) {
    .empty-spacing[b-m7k42vcjjo] {
        margin-top: 3rem;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Responses/DateInputResponse.razor.rz.scp.css */
/*********************************************/
/*                                           */
/*               Shared / Base               */
/*        (mobile-first, shared rules)       */
/*                                           */
/*********************************************/

.text-input[b-hsdsfg9266] {
    width: 100%;
    color: var(--text-muted);
    font-size: 1.5rem;
    font-weight: 500;
    opacity: 0.75;
}

/*********************************************/
/*                                           */
/*              Laptop and up                */
/*                                           */
/*********************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {
    .text-input[b-hsdsfg9266] {
        font-size: 1.25rem;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Responses/FileUploadResponse.razor.rz.scp.css */
/*********************************************/
/*                                           */
/*               Shared / Base               */
/*        (mobile-first, shared rules)       */
/*                                           */
/*********************************************/

.empty-spacing[b-36fl0jzqs3] {
    margin-top: 2rem;
}

.uploaded-card[b-36fl0jzqs3] {
    display: flex;
    align-items: start;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    background: var(--light-color);
    position: relative;
    flex-direction: column;
}

.uploaded-card .thumb[b-36fl0jzqs3] {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: var(--dark-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.uploaded-card .thumb img[b-36fl0jzqs3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.uploaded-card .meta[b-36fl0jzqs3] {
    flex: 1;
    min-width: 0;
}

.uploaded-card .name[b-36fl0jzqs3] {
    font-size: 0.9rem;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uploaded-card .size[b-36fl0jzqs3] {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.uploaded-card .remove[b-36fl0jzqs3] {
    position: absolute;
    right: 1rem;
    top: 1rem;
    border: none;
    background: var(--light-color);
    color: var(--text-color);
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.uploaded-card .remove:hover[b-36fl0jzqs3] {
    background: var(--error-color);
    color: var(--text-color);
}

.text-input[b-36fl0jzqs3] {
    width: 100%;
    color: var(--text-muted);
    font-size: 1.25rem;
    font-weight: 500;
    opacity: 0.75;
}

/*********************************************/
/*                                           */
/*              Laptop and up                */
/*                                           */
/*********************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {
    .uploaded-card .thumb[b-36fl0jzqs3] {
        width: 350px;
        height: 350px;
    }
}

/*********************************************/
/*                                           */
/*              Desktop and up               */
/*                                           */
/*********************************************/

@media screen and (min-width: 1626px) {
    .empty-spacing[b-36fl0jzqs3] {
        margin-top: 3rem;
    }

    .uploaded-card .thumb[b-36fl0jzqs3] {
        width: 400px;
        height: 400px;
    }

    .text-input[b-36fl0jzqs3] {
        font-size: 1.5rem;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Responses/OpinionScaleResponse.razor.rz.scp.css */
/*********************************************/
/*                                           */
/*               Shared / Base               */
/*        (mobile-first, shared rules)       */
/*                                           */
/*********************************************/

.empty-spacing[b-blypcl2crg] {
    margin-top: 2rem;
}

.opinion-scale-block[b-blypcl2crg] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 100%;
}

.opinion-scale-row[b-blypcl2crg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.opinion-scale-pill[b-blypcl2crg] {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 8px;
    padding: 0 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--light-color);
    color: var(--text-color);
    font-size: 1.35rem;
    border: 2px solid var(--brand);
}

.is-selected[b-blypcl2crg] {
    background: var(--brand);
    color: var(--dark-color);
}

.rating-row-labels[b-blypcl2crg] {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.form-input-rating[b-blypcl2crg] {
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-color);
    font-size: 0.9rem;
    font-weight: 300;
    max-width: 5rem;
}

.left[b-blypcl2crg] {
    text-align: left;
}

.right[b-blypcl2crg] {
    text-align: right;
}

.text-input[b-blypcl2crg] {
    width: 100%;
    color: var(--text-muted);
    font-size: 1.5rem;
    font-weight: 500;
    opacity: 0.75;
}

/*********************************************/
/*                                           */
/*              Laptop and up                */
/*                                           */
/*********************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {
    .empty-spacing[b-blypcl2crg] {
        margin-top: 3rem;
    }

    .opinion-scale-block[b-blypcl2crg] {
        display: inline-flex;
        width: max-content;
        max-width: none;
    }

    .opinion-scale-row[b-blypcl2crg] {
        justify-content: flex-start;
        flex-wrap: nowrap;
    }

    .opinion-scale-pill[b-blypcl2crg] {
        width: 3rem;
        height: 3rem;
        font-size: 1.25rem;
    }

    .form-input-rating[b-blypcl2crg] {
        font-size: 0.85rem;
    }

    .text-input[b-blypcl2crg] {
        font-size: 1.25rem;
    }
}

/*********************************************/
/*                                           */
/*              Desktop and up               */
/*                                           */
/*********************************************/

@media screen and (min-width: 1626px) {
    .empty-spacing[b-blypcl2crg] {
        margin-top: 3rem;
    }

    .opinion-scale-block[b-blypcl2crg] {
        display: inline-flex;
        width: max-content;
        max-width: none;
    }

    .opinion-scale-row[b-blypcl2crg] {
        gap: 0.5rem;
        justify-content: flex-start;
        flex-wrap: nowrap;
    }

    .form-input-rating[b-blypcl2crg] {
        font-size: 1rem;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Responses/PhoneInputResponse.razor.rz.scp.css */
/*********************************************/
/*                                           */
/*               Shared / Base               */
/*        (mobile-first, shared rules)       */
/*                                           */
/*********************************************/

.phone-response[b-2flnuuesic] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0;
}

.country-pill[b-2flnuuesic] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.75rem;
    font-size: 0.9rem;
    background: transparent;
    border-radius: 6px;
    outline: none;
    border: none;
}

.flag[b-2flnuuesic] {
    display: inline-block;
    width: 20px;
    height: 15px;
}

.country-pill .dial[b-2flnuuesic] {
    color: var(--text-color);
}

.phone-number[b-2flnuuesic] {
    font-size: 0.95rem;
    color: var(--text-color);
    font-weight: 500;
}

.text-input[b-2flnuuesic] {
    width: 100%;
    color: var(--text-muted);
    font-size: 1.5rem;
    font-weight: 500;
    opacity: 0.75;
}

/*********************************************/
/*                                           */
/*              Laptop and up                */
/*                                           */
/*********************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {
    .phone-number[b-2flnuuesic] {
        font-size: 0.85rem;
    }

    .text-input[b-2flnuuesic] {
        font-size: 1.25rem;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Responses/RatingResponse.razor.rz.scp.css */
/*********************************************/
/*                                           */
/*               Shared / Base               */
/*        (mobile-first, shared rules)       */
/*                                           */
/*********************************************/

.empty-spacing[b-dv1nktbvik] {
    margin-top: 2rem;
}

.rating-block[b-dv1nktbvik] {
    display: inline-flex;
    flex-direction: column;
    gap: 0.25rem;
    width: max-content;
    max-width: 100%;
}

.rating-row[b-dv1nktbvik] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.rating-icon[b-dv1nktbvik] {
    color: var(--brand);
    font-size: 2.25rem;
    cursor: pointer;
}

.rating-row-labels[b-dv1nktbvik] {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.form-input-rating[b-dv1nktbvik] {
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-color);
    font-size: 1rem;
    font-weight: 300;
    max-width: 5rem;
}

.left[b-dv1nktbvik] {
    text-align: left;
}

.right[b-dv1nktbvik] {
    text-align: right;
}

.text-input[b-dv1nktbvik] {
    width: 100%;
    color: var(--text-muted);
    font-size: 1.5rem;
    font-weight: 500;
    opacity: 0.75;
}

/*********************************************/
/*                                           */
/*              Laptop and up                */
/*                                           */
/*********************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {
    .empty-spacing[b-dv1nktbvik] {
        margin-top: 3rem;
    }

    .rating-row[b-dv1nktbvik] {
        gap: 0.5rem;
    }

    .rating-icon[b-dv1nktbvik] {
        font-size: 2.5rem;
        cursor: default;
    }

    .form-input-rating[b-dv1nktbvik] {
        font-size: 0.85rem;
    }

    .text-input[b-dv1nktbvik] {
        font-size: 1.25rem;
    }
}

/*********************************************/
/*                                           */
/*              Desktop and up               */
/*                                           */
/*********************************************/

@media screen and (min-width: 1626px) {
    .empty-spacing[b-dv1nktbvik] {
        margin-top: 3rem;
    }

    .rating-row[b-dv1nktbvik] {
        gap: 0;
    }

    .rating-icon[b-dv1nktbvik] {
        font-size: 3rem;
        padding: 0 0.25rem;
        cursor: default;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Responses/SignatureResponse.razor.rz.scp.css */
/*********************************************/
/*                                           */
/*               Shared / Base               */
/*        (mobile-first, shared rules)       */
/*                                           */
/*********************************************/

.signature-group[b-3llxqrf3mk] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
}

.text-input-container[b-3llxqrf3mk] {
    display: flex;
    align-items: center;
    justify-content: start;
    width: 100%;
}

.signature-text-input[b-3llxqrf3mk] {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-color);
    text-align: left;
    font-size: 3rem;
    font-weight: 500;
    font-family: 'Parisienne', cursive;
}

.signature-text-input:focus[b-3llxqrf3mk] {
    border-bottom: 2px solid var(--brand);
}

.signature-text-input[b-3llxqrf3mk]::placeholder {
    color: var(--light-color);
    font-family: "Nunito", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif, Arial;
}

.signature-image-container[b-3llxqrf3mk] {
    position: relative;
}

.signature-img[b-3llxqrf3mk] {
    border-radius: var(--border-radius);
}

.text-input[b-3llxqrf3mk] {
    width: 100%;
    color: var(--text-muted);
    font-size: 1.5rem;
    font-weight: 500;
    opacity: 0.75;
}

/*********************************************/
/*                                           */
/*              Laptop and up                */
/*                                           */
/*********************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {
    .signature-text-input[b-3llxqrf3mk] {
        width: 400px;
        font-size: 2rem;
    }

    .text-input[b-3llxqrf3mk] {
        font-size: 1.25rem;
    }
}

/*********************************************/
/*                                           */
/*              Desktop and up               */
/*                                           */
/*********************************************/

@media screen and (min-width: 1626px) {
    .signature-text-input[b-3llxqrf3mk] {
        width: 600px;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/StatisticsCard.razor.rz.scp.css */
/**************************************/
/*                                    */
/*        Shared / Mobile-first       */
/*                                    */
/**************************************/

.statistics-card[b-8uq1zjwn8w] {
    width: 100%;
    height: 100px;
    background-color: transparent;
    padding: 1rem;
    border-radius: 15px 15px 0 0;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
}

.statistics-label-group[b-8uq1zjwn8w] {
    display: flex;
    flex-direction: row;
    margin: 0.5rem 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    z-index: 2;
}

.statistics-data[b-8uq1zjwn8w] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    font-weight: 700;
    z-index: 2;
    color: var(--text-color);
    white-space: nowrap;
}

.statistics-icon[b-8uq1zjwn8w] {
    color: var(--brand);
    font-size: 5rem;
    position: absolute;
    opacity: 0.25;
    z-index: 1;
}

.statistics-card-description[b-8uq1zjwn8w] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color);
    white-space: nowrap;
}

.graph-group[b-8uq1zjwn8w] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

/**************************************/
/*                                    */
/*               Laptop               */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {
    .statistics-card[b-8uq1zjwn8w] {
        width: 150px;
        height: 85px;
        margin-right: 0.5rem;
    }

    .statistics-label-group[b-8uq1zjwn8w] {
        margin: 0.35rem 0;
    }

    .statistics-data[b-8uq1zjwn8w] {
        font-size: 30px;
    }

    .statistics-icon[b-8uq1zjwn8w] {
        font-size: 4rem;
    }

    .statistics-card-description[b-8uq1zjwn8w] {
        font-size: 15px;
    }
}

/**************************************/
/*                                    */
/*               Desktop              */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {
    .statistics-card[b-8uq1zjwn8w] {
        width: 185px;
        height: 100px;
        margin-right: 0.75rem;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/UnderConstruction.razor.rz.scp.css */
.content[b-45rpl3wv7j] {
    background: transparent;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    width: 100%;
}

.construction-zone[b-45rpl3wv7j] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.construction-icon[b-45rpl3wv7j] {
    font-size: 8rem;
    color: var(--brand);
}

.construction-title[b-45rpl3wv7j] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
}

.construction-subtitle[b-45rpl3wv7j] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-muted);
}
/* _content/AstroFormsFrontendServer.App/Components/Common/UserMenu.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Shared                */
/*                                    */
/**************************************/

.user-menu[b-anmkjmm7l8] {
    position: fixed;
    top: 1rem;
    right: 1rem;
}

.user-trigger[b-anmkjmm7l8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: .35rem .6rem;
    background: var(--background-color);
    border: 1px solid var(--light-color);
    border-radius: 50rem;
    box-shadow: 0 6px 20px rgba(0,0,0,.2);
    cursor: pointer;
}

.user-name[b-anmkjmm7l8] {
    font-weight: 600;
    color: var(--text-color);
}

.avatar[b-anmkjmm7l8] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--dark-color);
    font-weight: 700;
    font-size: 1rem;
    background: var(--brand);
}

.avatar img[b-anmkjmm7l8] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.avatar img + .initials[b-anmkjmm7l8] {
    display: none;
}

.caret[b-anmkjmm7l8] {
    width: 1rem;
    height: 1rem;
    color: var(--text-color);
}

.menu a[b-anmkjmm7l8],
.menu button[b-anmkjmm7l8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    color: var(--text-color);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
}

.menu i[b-anmkjmm7l8] {
    color: var(--brand);
}

.menu hr[b-anmkjmm7l8] {
    border: 0;
    height: 1px;
    background: var(--light-color);
}

/**************************************/
/*                                    */
/*          Desktop + Laptop          */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) {
    .user-menu[b-anmkjmm7l8] {
        z-index: 10;
    }

    .user-trigger:hover[b-anmkjmm7l8] {
        background: var(--light-color);
        border-color: var(--brand);
        transition: 0.25s;
    }

    .menu[b-anmkjmm7l8] {
        position: absolute;
        right: 0;
        top: 3rem;
        min-width: 220px;
        background: var(--background-color);
        border: 1px solid var(--light-color);
        border-radius: 12px;
        padding: 0.35rem;
        opacity: 0;
        transform: translateY(-4px) scale(.98);
        pointer-events: none;
        transition: 0.18s ease;
        box-shadow: 0 6px 20px rgba(0,0,0,.2);
        z-index: 20;
    }

    .menu a[b-anmkjmm7l8],
    .menu button[b-anmkjmm7l8] {
        padding: 0.5rem 0.6rem;
        border-radius: 8px;
        font-size: 0.85rem;
    }

    .menu a:hover[b-anmkjmm7l8],
    .menu button:hover[b-anmkjmm7l8] {
        background: var(--light-color);
    }

    .menu hr[b-anmkjmm7l8] {
        margin: 0.35rem 0;
    }

    .user-menu.open .menu[b-anmkjmm7l8] {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }

    .user-menu .caret[b-anmkjmm7l8] {
        transition: transform 0.18s ease;
    }

    .user-menu.open .user-trigger .caret[b-anmkjmm7l8] {
        transform: rotate(180deg);
    }

    .menu-backdrop[b-anmkjmm7l8] {
        position: fixed;
        inset: 0;
        background: transparent;
        border: none;
        padding: 0;
        margin: 0;
        z-index: 15;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    .user-menu[b-anmkjmm7l8] {
        z-index: 30;
    }

    .user-trigger:active[b-anmkjmm7l8] {
        background: var(--light-color);
        border-color: var(--brand);
        transition: 0.25s;
    }

    .menu-backdrop[b-anmkjmm7l8] {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0);
        border: 0;
        padding: 0;
        margin: 0;
        z-index: 39;
        opacity: 0;
        pointer-events: none;
        transition: opacity 200ms linear;
    }

    .user-menu.open .menu-backdrop[b-anmkjmm7l8] {
        opacity: .35;
        pointer-events: auto;
    }

    .menu[b-anmkjmm7l8] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        min-width: 0;
        background: var(--dark-color);
        border: 1px solid var(--light-color);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -12px 32px rgba(0,0,0,.22);
        padding: 0.5rem;
        max-height: 70vh;
        overflow: auto;
        transform: translateY(100%);
        opacity: 0;
        pointer-events: none;
        transition: transform 200ms cubic-bezier(.33,0,.67,.33), opacity 180ms linear;
        z-index: 40;
        will-change: transform, opacity;
        contain: layout paint;
        padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
    }

    .user-menu.open .menu[b-anmkjmm7l8] {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
        transition: transform 240ms cubic-bezier(.22,1,.36,1), opacity 200ms linear;
    }

    .menu a[b-anmkjmm7l8],
    .menu button[b-anmkjmm7l8] {
        padding: 0.75rem;
        border-radius: 10px;
        font-size: 1rem;
    }

    .menu a:hover[b-anmkjmm7l8],
    .menu button:hover[b-anmkjmm7l8] {
        background: var(--light-color);
    }

    .menu hr[b-anmkjmm7l8] {
        margin: 0.35rem 0;
    }

    @media (prefers-reduced-motion: reduce) {
        .menu[b-anmkjmm7l8],
        .user-menu.open .menu[b-anmkjmm7l8] {
            transition: none !important;
            transform: none !important;
            opacity: 1 !important;
        }

        .menu-backdrop[b-anmkjmm7l8],
        .user-menu.open .menu-backdrop[b-anmkjmm7l8] {
            transition: none !important;
            opacity: .35 !important;
            pointer-events: auto;
        }
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Users/AddressInputUser.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {
    .empty-spacing[b-r0jmkekmmy] {
        margin-top: 3rem;
    }

    .address-input-container[b-r0jmkekmmy] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2.5rem;
        padding: 0.75rem;
        width: 100%;
        max-width: 30rem;
    }

    .address-input[b-r0jmkekmmy] {
        width: 100%;
        padding: 0.75rem;
        padding-right: 2.5rem;
        font-size: 0.85rem;
        background: transparent;
        border: none;
        outline: none;
        border-bottom: 2px solid var(--brand);
        color: var(--text-color);
    }

    .address-input[b-r0jmkekmmy]::placeholder {
        color: var(--text-muted);
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {
    .empty-spacing[b-r0jmkekmmy] {
        margin-top: 2rem;
    }

    .address-input-container[b-r0jmkekmmy] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2.5rem;
        padding: 0.75rem;
        width: 100%;
        max-width: 30rem;
    }

    .address-input[b-r0jmkekmmy] {
        width: 100%;
        padding: 0.75rem;
        padding-right: 2.5rem;
        font-size: 0.85rem;
        background: transparent;
        border: none;
        outline: none;
        border-bottom: 2px solid var(--brand);
        color: var(--text-color);
    }

    .address-input[b-r0jmkekmmy]::placeholder {
        color: var(--text-muted);
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    .empty-spacing[b-r0jmkekmmy] {
        margin-top: 2rem;
    }

    .address-input-container[b-r0jmkekmmy] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2.5rem;
        padding: 0.75rem;
        width: 100%;
        max-width: 30rem;
    }

    .address-input[b-r0jmkekmmy] {
        width: 100%;
        padding: 0.75rem;
        padding-right: 2.5rem;
        font-size: 0.85rem;
        background: transparent;
        border: none;
        outline: none;
        border-bottom: 2px solid var(--brand);
        color: var(--text-color);
    }

    .address-input[b-r0jmkekmmy]::placeholder {
        color: var(--text-muted);
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Users/DateInputUser.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1441px) {

    .empty-spacing[b-jho1psgox9] {
        margin-top: 3rem;
    }

    .field-group[b-jho1psgox9] {
        width: 100%;
        max-width: 30rem;
    }

    .datepicker[b-jho1psgox9] {
        position: relative;
        display: inline-block;
        width: 100%;
    }

    .datepicker-input-container[b-jho1psgox9] {
        position: relative;
        display: inline-block;
        width: 100%;
    }

    .datepicker-input[b-jho1psgox9] {
        width: 100%;
        padding: 0.75rem;
        padding-right: 2.5rem;
        font-size: 0.85rem;
        background: transparent;
        border: none;
        outline: none;
        border-bottom: 2px solid var(--brand);
        color: var(--text-color);
    }

    .datepicker-icon[b-jho1psgox9] {
        position: absolute;
        right: 0.15rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.25rem;
        color: var(--brand);
        pointer-events: auto;
        background: transparent;
        border-radius: 50%;
        width: 2.25rem;
        height: 2.25rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .datepicker-icon:hover[b-jho1psgox9] {
        background: var(--light-color);
        cursor: pointer;
    }

    .datepicker-calendar[b-jho1psgox9] {
        position: absolute;
        top: 100%;
        right: 0;
        background: var(--dark-color);
        border: 1px solid var(--light-color);
        border-radius: var(--border-radius);
        z-index: 5;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        width: 18.25rem;
    }

    .datepicker-header[b-jho1psgox9] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        padding-top: 1rem;
    }

    .action-button[b-jho1psgox9] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        color: var(--brand);
        font-size: 0.75rem;
    }

    .action-button:hover[b-jho1psgox9] {
        background: var(--light-color);
        cursor: pointer;
    }

    .month-label[b-jho1psgox9] {
        font-weight: 500;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        color: var(--text-color);
    }

    .month-label:hover[b-jho1psgox9] {
        cursor: pointer;
        background: var(--light-color);
    }

    .month-label-disabled[b-jho1psgox9] {
        font-weight: 500;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        color: var(--text-muted);
    }

    .datepicker-days[b-jho1psgox9] {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        text-align: center;
        padding: 0.5rem;
    }

    .datepicker-day-name[b-jho1psgox9] {
        padding: 0.5rem;
        margin: 2px;
        font-size: 0.75rem;
        font-weight: bold;
        opacity: 0.4;
        color: var(--text-muted);
    }

    .datepicker-day[b-jho1psgox9] {
        padding: 0.5rem;
        margin: 2px;
        cursor: pointer;
        font-size: 0.75rem;
        border-radius: 4px;
        transition: background 0.3s;
        color: var(--text-color);
    }

    .datepicker-day:hover[b-jho1psgox9] {
        background: var(--brand) !important;
        color: var(--dark-color);
    }

    .datepicker-day.selected[b-jho1psgox9] {
        background: var(--brand) !important;
        color: var(--dark-color);
    }

    .datepicker-day.out-of-month[b-jho1psgox9] {
        opacity: 0.5;
        pointer-events: none;
    }

    .datepicker-day.today[b-jho1psgox9] {
        background-color: var(--light-color);
    }

    /***************** Handle Month Selection *****************/

    .datepicker-months[b-jho1psgox9] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .datepicker-month[b-jho1psgox9] {
        padding: 0.5rem 0.75rem;
        text-align: center;
        border-radius: 6px;
        cursor: pointer;
        background-color: transparent;
        transition: background-color 0.2s ease;
        color: var(--text-color);
    }

    .datepicker-month:hover[b-jho1psgox9] {
        background: var(--brand) !important;
        color: var(--dark-color);
    }

    .datepicker-month-selected[b-jho1psgox9] {
        padding: 0.5rem 0.75rem;
        text-align: center;
        border-radius: 6px;
        background-color: var(--light-color);
        cursor: pointer;
        color: var(--text-color);
    }

    /***************** Handle Year Selection *****************/

    .datepicker-years[b-jho1psgox9] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .datepicker-year[b-jho1psgox9] {
        padding: 0.5rem 0.75rem;
        text-align: center;
        border-radius: 6px;
        background-color: transparent;
        cursor: pointer;
        transition: background-color 0.2s ease;
        color: var(--text-color);
    }

    .datepicker-year:hover[b-jho1psgox9] {
        background: var(--brand) !important;
        color: var(--dark-color);
    }

    .datepicker-year-selected[b-jho1psgox9] {
        padding: 0.5rem 0.75rem;
        text-align: center;
        border-radius: 6px;
        background-color: var(--light-color);
        cursor: pointer;
        color: var(--text-color);
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1440px) {

    .empty-spacing[b-jho1psgox9] {
        margin-top: 2rem;
    }

    .field-group[b-jho1psgox9] {
        width: 100%;
        max-width: 30rem;
    }

    .datepicker[b-jho1psgox9] {
        position: relative;
        display: inline-block;
        width: 100%;
    }

    .datepicker-input-container[b-jho1psgox9] {
        position: relative;
        display: inline-block;
        width: 100%;
    }

    .datepicker-input[b-jho1psgox9] {
        width: 100%;
        padding: 0.65rem;
        padding-right: 2.5rem;
        font-size: 0.75rem;
        background: transparent;
        border: none;
        outline: none;
        border-bottom: 2px solid var(--brand);
        color: var(--text-color);
    }

    .datepicker-icon[b-jho1psgox9] {
        position: absolute;
        right: 0.25rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.85rem;
        color: var(--brand);
        pointer-events: auto;
        background: transparent;
        border-radius: 50%;
        width: 1.75rem;
        height: 1.75rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .datepicker-icon:hover[b-jho1psgox9] {
        background: var(--light-color);
        cursor: pointer;
    }

    .datepicker-calendar[b-jho1psgox9] {
        position: absolute;
        top: 100%;
        right: 0;
        background: var(--dark-color);
        border: 1px solid var(--light-color);
        border-radius: var(--border-radius);
        z-index: 5;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        width: 15rem;
    }

    .datepicker-header[b-jho1psgox9] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        padding-top: 0.5rem;
    }

    .action-button[b-jho1psgox9] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        color: var(--brand);
        font-size: 0.65rem;
    }

    .action-button:hover[b-jho1psgox9] {
        background: var(--light-color);
        cursor: pointer;
    }

    .month-label[b-jho1psgox9] {
        font-weight: 500;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        font-size: 0.75rem;
        color: var(--text-color);
    }

    .month-label:hover[b-jho1psgox9] {
        cursor: pointer;
        background: var(--light-color);
        color: var(--text-muted);
    }

    .month-label-disabled[b-jho1psgox9] {
        font-weight: 500;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        font-size: 0.75rem;
    }

    .datepicker-days[b-jho1psgox9] {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        text-align: center;
        padding: 0.35rem;
    }

    .datepicker-day-name[b-jho1psgox9] {
        padding: 0.35rem;
        margin: 1px;
        font-size: 0.55rem;
        font-weight: bold;
        opacity: 0.4;
        color: var(--text-muted);
    }

    .datepicker-day[b-jho1psgox9] {
        padding: 0.35rem;
        margin: 1px;
        cursor: pointer;
        font-size: 0.65rem;
        border-radius: 4px;
        transition: background 0.3s;
        color: var(--text-color);
    }

    .datepicker-day:hover[b-jho1psgox9] {
        background: var(--brand) !important;
        color: var(--dark-color);
    }

    .datepicker-day.selected[b-jho1psgox9] {
        background: var(--brand) !important;
        color: var(--dark-color);
    }

    .datepicker-day.out-of-month[b-jho1psgox9] {
        opacity: 0.5;
        pointer-events: none;
    }

    .datepicker-day.today[b-jho1psgox9] {
        background-color: var(--light-color);
    }

    /***************** Handle Month Selection *****************/

    .datepicker-months[b-jho1psgox9] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .datepicker-month[b-jho1psgox9] {
        padding: 0.5rem 0.75rem;
        text-align: center;
        border-radius: 6px;
        cursor: pointer;
        background-color: transparent;
        transition: background-color 0.2s ease;
        font-size: 0.85rem;
        color: var(--text-color);
    }

    .datepicker-month:hover[b-jho1psgox9] {
        background: var(--brand) !important;
        color: var(--dark-color);
    }

    .datepicker-month-selected[b-jho1psgox9] {
        padding: 0.5rem 0.75rem;
        text-align: center;
        border-radius: 6px;
        background-color: var(--light-color);
        cursor: pointer;
        font-size: 0.85rem;
        color: var(--text-color);
    }

    /***************** Handle Year Selection *****************/

    .datepicker-years[b-jho1psgox9] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .datepicker-year[b-jho1psgox9] {
        padding: 0.5rem 0.75rem;
        text-align: center;
        border-radius: 6px;
        background-color: transparent;
        cursor: pointer;
        transition: background-color 0.2s ease;
        font-size: 0.85rem;
        color: var(--text-color);
    }

    .datepicker-year:hover[b-jho1psgox9] {
        background: var(--brand) !important;
        color: var(--dark-color);
    }

    .datepicker-year-selected[b-jho1psgox9] {
        padding: 0.5rem 0.75rem;
        text-align: center;
        border-radius: 6px;
        background-color: var(--light-color);
        cursor: pointer;
        font-size: 0.85rem;
        color: var(--text-color);
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    .empty-spacing[b-jho1psgox9] {
        margin-top: 2rem;
    }

    .field-group[b-jho1psgox9] {
        width: 100%;
        max-width: 30rem;
    }

    .datepicker[b-jho1psgox9] {
        position: relative;
        display: inline-block;
        width: 100%;
    }

    .datepicker-input-container[b-jho1psgox9] {
        position: relative;
        display: inline-block;
        width: 100%;
    }

    .datepicker-input[b-jho1psgox9] {
        width: 100%;
        padding: 0.75rem;
        padding-right: 2.5rem;
        font-size: 0.85rem;
        background: transparent;
        border: none;
        outline: none;
        border-bottom: 2px solid var(--brand);
        color: var(--text-color);
    }

    .datepicker-icon[b-jho1psgox9] {
        position: absolute;
        right: 0.15rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.25rem;
        color: var(--brand);
        pointer-events: auto;
        background: transparent;
        border-radius: 50%;
        width: 2.25rem;
        height: 2.25rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .datepicker-icon:hover[b-jho1psgox9] {
        background: var(--light-color);
        cursor: pointer;
    }

    .datepicker-calendar[b-jho1psgox9] {
        position: absolute;
        top: 100%;
        right: 0;
        background: var(--dark-color);
        border: 1px solid var(--light-color);
        border-radius: var(--border-radius);
        z-index: 5;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        width: 18.25rem;
    }

    .datepicker-header[b-jho1psgox9] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        padding-top: 1rem;
    }

    .action-button[b-jho1psgox9] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        color: var(--brand);
        font-size: 0.75rem;
    }

    .action-button:hover[b-jho1psgox9] {
        background: var(--light-color);
        cursor: pointer;
    }

    .month-label[b-jho1psgox9] {
        font-weight: 500;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        color: var(--text-color);
    }

    .month-label:hover[b-jho1psgox9] {
        cursor: pointer;
        background: var(--light-color);
    }

    .month-label-disabled[b-jho1psgox9] {
        font-weight: 500;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        color: var(--text-muted);
    }

    .datepicker-days[b-jho1psgox9] {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        text-align: center;
        padding: 0.5rem;
    }

    .datepicker-day-name[b-jho1psgox9] {
        padding: 0.5rem;
        margin: 2px;
        font-size: 0.75rem;
        font-weight: bold;
        opacity: 0.4;
        color: var(--text-muted);
    }

    .datepicker-day[b-jho1psgox9] {
        padding: 0.5rem;
        margin: 2px;
        cursor: pointer;
        font-size: 0.75rem;
        border-radius: 4px;
        transition: background 0.3s;
        color: var(--text-color);
    }

    .datepicker-day:hover[b-jho1psgox9] {
        background: var(--brand) !important;
        color: var(--dark-color);
    }

    .datepicker-day.selected[b-jho1psgox9] {
        background: var(--brand) !important;
        color: var(--dark-color);
    }

    .datepicker-day.out-of-month[b-jho1psgox9] {
        opacity: 0.5;
        pointer-events: none;
    }

    .datepicker-day.today[b-jho1psgox9] {
        background-color: var(--light-color);
    }

    /***************** Handle Month Selection *****************/

    .datepicker-months[b-jho1psgox9] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .datepicker-month[b-jho1psgox9] {
        padding: 0.5rem 0.75rem;
        text-align: center;
        border-radius: 6px;
        cursor: pointer;
        background-color: transparent;
        transition: background-color 0.2s ease;
        color: var(--text-color);
    }

    .datepicker-month:hover[b-jho1psgox9] {
        background: var(--brand) !important;
        color: var(--dark-color);
    }

    .datepicker-month-selected[b-jho1psgox9] {
        padding: 0.5rem 0.75rem;
        text-align: center;
        border-radius: 6px;
        background-color: var(--light-color);
        cursor: pointer;
        color: var(--text-color);
    }

    /***************** Handle Year Selection *****************/

    .datepicker-years[b-jho1psgox9] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .datepicker-year[b-jho1psgox9] {
        padding: 0.5rem 0.75rem;
        text-align: center;
        border-radius: 6px;
        background-color: transparent;
        cursor: pointer;
        transition: background-color 0.2s ease;
        color: var(--text-color);
    }

    .datepicker-year:hover[b-jho1psgox9] {
        background: var(--brand) !important;
        color: var(--dark-color);
    }

    .datepicker-year-selected[b-jho1psgox9] {
        padding: 0.5rem 0.75rem;
        text-align: center;
        border-radius: 6px;
        background-color: var(--light-color);
        cursor: pointer;
        color: var(--text-color);
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Users/DropdownUser.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {

    .empty-spacing[b-9y0zgtt8i9] {
        margin-top: 3rem;
    }

    .filter-row[b-9y0zgtt8i9] {
        display: flex;
        flex-direction: row;
        width: 100%;
    }

    .dropdown-search-input[b-9y0zgtt8i9] {
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        font-size: 0.85rem;
        font-weight: 500;
        width: 100%;
        cursor: pointer;
    }

    .dropdown-search-input[b-9y0zgtt8i9]::placeholder {
        color: var(--text-color);
    }

    .dropdown-circle[b-9y0zgtt8i9] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.75rem;
        height: 1.75rem;
        background: transparent;
        border-radius: 50%;
        font-size: 1rem;
    }

    .delete-circle[b-9y0zgtt8i9] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.75rem;
        height: 1.75rem;
        background: transparent;
        border-radius: 50%;
        font-size: 1rem;
    }

    .delete-circle:hover[b-9y0zgtt8i9] {
        background: var(--error-color);
        color: var(--text-color);
    }

    .filter-title-group[b-9y0zgtt8i9] {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: start;
        gap: 0.5rem;
    }

    .filter-column[b-9y0zgtt8i9] {
        background: var(--light-color);
        border-radius: var(--border-radius);
        height: 3rem;
        color: var(--text-color);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        font-size: 0.85rem;
        font-weight: 500;
        cursor: pointer;
        padding: 1rem;
        margin-top: 1rem;
    }

    .filter-column:hover[b-9y0zgtt8i9] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .dropdown-container[b-9y0zgtt8i9] {
        position: relative;
        width: 100%;
        max-width: 30rem;
    }

    .dropdown-overlay[b-9y0zgtt8i9] {
        position: fixed;
        inset: 0;
        background: transparent;
        z-index: 2;
    }

    .dropdown-popup[b-9y0zgtt8i9] {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        border-radius: var(--border-radius);
        background-color: var(--light-color);
        z-index: 3;
        box-shadow: 0 2px 4px 1px rgba(0,0,0,0.3);
        padding: 0.5rem;
    }

    .dropdown-option[b-9y0zgtt8i9] {
        display: flex;
        align-items: center;
        justify-content: start;
        padding: 1rem;
        cursor: pointer;
        border-radius: 10px;
        color: var(--text-color);
        font-size: 0.85rem;
        font-weight: 500;
        gap: 0.5rem;
    }

    .dropdown-option:hover[b-9y0zgtt8i9] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .selected[b-9y0zgtt8i9] {
        background: var(--brand) !important;
        color: var(--dark-color) !important;
        cursor: pointer !important;
    }

    .dropdown-icon[b-9y0zgtt8i9] {
        font-size: 1.5rem;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/
@media screen and (min-width: 992px) and (max-width: 1625px) {

    .empty-spacing[b-9y0zgtt8i9] {
        margin-top: 2rem;
    }

    .filter-row[b-9y0zgtt8i9] {
        display: flex;
        flex-direction: row;
        width: 100%;
    }

    .dropdown-search-input[b-9y0zgtt8i9] {
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        font-size: 0.75rem;
        font-weight: 500;
        width: 100%;
        cursor: pointer;
    }

    .dropdown-search-input[b-9y0zgtt8i9]::placeholder {
        color: var(--text-color);
    }

    .dropdown-circle[b-9y0zgtt8i9] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
        background: transparent;
        border-radius: 50%;
        font-size: 0.85rem;
    }

    .delete-circle[b-9y0zgtt8i9] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
        background: transparent;
        border-radius: 50%;
        font-size: 0.85rem;
    }

    .delete-circle:hover[b-9y0zgtt8i9] {
        background: var(--error-color);
        color: var(--text-color);
    }

    .filter-title-group[b-9y0zgtt8i9] {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: start;
        gap: 0.5rem;
    }

    .filter-column[b-9y0zgtt8i9] {
        background: var(--light-color);
        border-radius: 10px;
        height: 2.5rem;
        color: var(--text-color);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        font-size: 0.75rem;
        font-weight: 500;
        cursor: pointer;
        padding: 0.85rem;
        margin-top: 0.85rem;
    }

    .filter-column:hover[b-9y0zgtt8i9] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .dropdown-container[b-9y0zgtt8i9] {
        position: relative;
        width: 100%;
        max-width: 25rem;
    }

    .dropdown-overlay[b-9y0zgtt8i9] {
        position: fixed;
        inset: 0;
        background: transparent;
        z-index: 2;
    }

    .dropdown-popup[b-9y0zgtt8i9] {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        border-radius: 10px;
        background-color: var(--light-color);
        z-index: 3;
        box-shadow: 0 2px 4px 1px rgba(0,0,0,0.3);
        padding: 0.5rem;
    }

    .dropdown-option[b-9y0zgtt8i9] {
        display: flex;
        align-items: center;
        justify-content: start;
        padding: 0.75rem;
        cursor: pointer;
        border-radius: 10px;
        color: var(--text-color);
        font-size: 0.75rem;
        font-weight: 500;
        gap: 0.35rem;
    }

    .dropdown-option:hover[b-9y0zgtt8i9] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .selected[b-9y0zgtt8i9] {
        background: var(--brand) !important;
        color: var(--dark-color) !important;
        cursor: pointer !important;
    }

    .dropdown-icon[b-9y0zgtt8i9] {
        font-size: 1.25rem;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {

    .dropdown-overlay[b-9y0zgtt8i9] {
        display: none;
    }

    .empty-spacing[b-9y0zgtt8i9] {
        margin-top: 2rem;
    }

    .dropdown-container[b-9y0zgtt8i9] {
        position: relative;
        width: 100%;
    }

    .filter-row[b-9y0zgtt8i9] {
        display: flex;
        flex-direction: row;
        width: 100%;
    }

    .filter-title-group[b-9y0zgtt8i9] {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: start;
        gap: 0.5rem;
    }

    .filter-column[b-9y0zgtt8i9] {
        background: var(--light-color);
        border-radius: 10px;
        height: 3.5rem;
        color: var(--text-color);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
        padding: 1rem;
    }

    .filter-column:hover[b-9y0zgtt8i9] {
        background: var(--brand);
        color: var(--dark-color);
    }

    /**************** Modal/Popup Info Window ****************/

    .modal[b-9y0zgtt8i9] {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.75);
        display: block;
        z-index: 4;
        transition: all 500ms ease-in-out;
    }

    .modal-content[b-9y0zgtt8i9] {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translate(-50%, -100%);
        background-color: var(--dark-color);
        padding: 2rem 0rem;
        border-top-left-radius: 2rem;
        border-top-right-radius: 2em;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        z-index: 2;
        width: 100%;
        max-height: 0;
        transition: max-height 1s ease-in-out, opacity 1s ease-in-out;
        overflow-y: auto;
        padding: 2rem 1rem;
    }

    .modal-group[b-9y0zgtt8i9] {
        display: flex;
        align-items: center;
        justify-content: start;
        width: 100%;
        margin-bottom: 1rem;
    }

    .modal-icon[b-9y0zgtt8i9] {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 2.5rem;
        width: 2.5rem;
        font-size: 1rem;
        background: var(--light-color);
        color: var(--text-color);
        margin-right: 0.5rem;
        border-radius: 50%;
    }

    .modal-message[b-9y0zgtt8i9] {
        color: var(--text-color);
        font-weight: 500;
        text-align: center;
        font-size: 1.5rem;
    }

    .modal-options[b-9y0zgtt8i9] {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .modal-back[b-9y0zgtt8i9] {
        background-color: var(--light-color);
        color: var(--text-color);
        padding: 1rem 2rem;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        font-weight: 500;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid transparent;
        width: 100%;
        font-size: 18px;
        gap: 0.5rem;
    }

    /**************** Dropdown Options ****************/

    .choice-list[b-9y0zgtt8i9] {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
    }

    .choice-group[b-9y0zgtt8i9] {
        background: var(--light-color);
        border: 2px solid transparent;
        border-radius: var(--border-radius);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
    }

    .selected[b-9y0zgtt8i9] {
        border: 2px solid var(--brand) !important;
        cursor: default !important;
    }

    .choice-group:hover[b-9y0zgtt8i9] {
        border: 2px solid var(--brand);
        transition: 0.5s;
        cursor: pointer;
    }

    .choice-text-input[b-9y0zgtt8i9] {
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1rem;
        font-weight: 500;
    }

    .choice-text-input[b-9y0zgtt8i9]::placeholder {
        color: var(--text-color);
    }

    .choice-text[b-9y0zgtt8i9] {
        color: var(--text-color);
        font-size: 1.25rem;
        margin-left: 0.75rem;
        font-weight: 500;
    }

    .selection-icon[b-9y0zgtt8i9] {
        color: var(--brand);
        font-size: 1.25rem;
    }

    /**************** Modal Window Slide Up Animation ****************/

    @keyframes showModal-b-9y0zgtt8i9 {
        from {
            max-height: 0;
        }

        to {
            max-height: 85%;
        }
    }

    @keyframes hideModal-b-9y0zgtt8i9 {
        from {
            max-height: 85%;
        }

        to {
            max-height: 0;
        }
    }

    .show-modal[b-9y0zgtt8i9] {
        animation: showModal-b-9y0zgtt8i9 0.5s ease-out forwards;
        max-height: 85%;
    }

    .hide-modal[b-9y0zgtt8i9] {
        animation: hideModal-b-9y0zgtt8i9 0.5s ease-out forwards;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Users/EmailInputUser.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {
    .empty-spacing[b-dbq4qy18r7] {
        margin-top: 3rem;
    }

    .text-input[b-dbq4qy18r7] {
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1.75rem;
        font-weight: 500;
        border-bottom: 2px solid transparent;
    }

    .text-input:focus[b-dbq4qy18r7] {
        border-bottom: 2px solid var(--brand);
    }

    .text-input[b-dbq4qy18r7]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/
@media screen and (min-width: 992px) and (max-width: 1625px) {
    .empty-spacing[b-dbq4qy18r7] {
        margin-top: 2rem;
    }

    .text-input[b-dbq4qy18r7] {
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1.5rem;
        font-weight: 500;
        border-bottom: 2px solid transparent;
    }

    .text-input:focus[b-dbq4qy18r7] {
        border-bottom: 2px solid var(--brand);
    }

    .text-input[b-dbq4qy18r7]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    .empty-spacing[b-dbq4qy18r7] {
        margin-top: 2rem;
    }

    .text-input[b-dbq4qy18r7] {
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1.5rem;
        font-weight: 500;
        border-bottom: 2px solid transparent;
    }

    .text-input:focus[b-dbq4qy18r7] {
        border-bottom: 2px solid var(--brand);
    }

    .text-input[b-dbq4qy18r7]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Users/FileUploadUser.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {
    .empty-spacing[b-32zwp29omr] {
        margin-top: 3rem;
    }

    .image-drop-zone[b-32zwp29omr] {
        width: 100%;
        height: 30rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        border-radius: var(--border-radius);
    }

    .upload-icon[b-32zwp29omr] {
        color: var(--text-color);
        font-size: 8rem;
    }

    .drop-file-message[b-32zwp29omr] {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-color);
    }

    .or-message[b-32zwp29omr] {
        font-size: 1rem;
        font-weight: 500;
        color: var(--text-muted);
        margin-top: 1rem;
        margin-bottom: 1.25rem;
    }

    .files-supported-message-group[b-32zwp29omr] {
        margin-top: 4rem;
        margin-bottom: 1.25rem;
        text-align: center;
    }

    .files-supported-message[b-32zwp29omr] {
        font-size: 1rem;
        font-weight: 500;
        color: var(--text-muted);
    }

    .big-upload-button[b-32zwp29omr] {
        border-radius: 50rem;
        background: var(--brand);
        color: var(--dark-color);
        height: 3rem;
        width: 11rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border: none;
        font-weight: 700;
    }

    .big-upload-button:hover[b-32zwp29omr] {
        filter: brightness(1.20);
    }

    .post-icon[b-32zwp29omr] {
        font-size: 1.25rem;
        margin-right: 0.5rem;
    }

    .post-text[b-32zwp29omr] {
        font-size: 1rem;
        font-weight: 500;
    }

    .uploaded-card[b-32zwp29omr] {
        display: flex;
        align-items: start;
        gap: 0.75rem;
        padding: 0.75rem;
        border: 1px solid var(--border);
        border-radius: var(--border-radius);
        background: var(--light-color);
        position: relative;
        flex-direction: column;
    }

    .uploaded-card .thumb[b-32zwp29omr] {
        width: 400px;
        height: 400px;
        border-radius: 8px;
        overflow: hidden;
        background: var(--dark-color);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .uploaded-card .thumb img[b-32zwp29omr] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .uploaded-card .meta[b-32zwp29omr] {
        flex: 1;
        min-width: 0;
    }

    .uploaded-card .name[b-32zwp29omr] {
        font-size: 0.9rem;
        color: var(--text-color);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .uploaded-card .size[b-32zwp29omr] {
        font-size: 0.8rem;
        color: var(--text-muted);
    }

    .uploaded-card .remove[b-32zwp29omr] {
        position: absolute;
        right: 1rem;
        top: 1rem;
        border: none;
        background: var(--light-color);
        color: var(--text-color);
        width: 2rem;
        height: 2rem;
        border-radius: 999px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
    }

    .uploaded-card .remove:hover[b-32zwp29omr] {
        background: var(--error-color);
        color: var(--text-color);
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {
    .empty-spacing[b-32zwp29omr] {
        margin-top: 2rem;
    }

    .image-drop-zone[b-32zwp29omr] {
        width: 100%;
        height: 25rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        border-radius: var(--border-radius);
    }

    .upload-icon[b-32zwp29omr] {
        color: var(--text-color);
        font-size: 5rem;
    }

    .drop-file-message[b-32zwp29omr] {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text-color);
    }

    .or-message[b-32zwp29omr] {
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--text-muted);
        margin-top: 1rem;
        margin-bottom: 1.25rem;
    }

    .files-supported-message-group[b-32zwp29omr] {
        margin-top: 3rem;
        margin-bottom: 1.25rem;
        text-align: center;
    }

    .files-supported-message[b-32zwp29omr] {
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--text-muted);
    }

    .big-upload-button[b-32zwp29omr] {
        border-radius: 50rem;
        background: var(--brand);
        color: var(--dark-color);
        height: 3rem;
        width: 10rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border: none;
        font-weight: 700;
    }

    .big-upload-button:hover[b-32zwp29omr] {
        filter: brightness(1.20);
    }

    .post-icon[b-32zwp29omr] {
        font-size: 1.25rem;
        margin-right: 0.5rem;
    }

    .post-text[b-32zwp29omr] {
        font-size: 1rem;
        font-weight: 500;
    }

    .uploaded-card[b-32zwp29omr] {
        display: flex;
        align-items: start;
        gap: 0.75rem;
        padding: 0.75rem;
        border: 1px solid var(--border);
        border-radius: var(--border-radius);
        background: var(--light-color);
        position: relative;
        flex-direction: column;
    }

    .uploaded-card .thumb[b-32zwp29omr] {
        width: 350px;
        height: 350px;
        border-radius: 8px;
        overflow: hidden;
        background: var(--dark-color);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .uploaded-card .thumb img[b-32zwp29omr] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .uploaded-card .meta[b-32zwp29omr] {
        flex: 1;
        min-width: 0;
    }

    .uploaded-card .name[b-32zwp29omr] {
        font-size: 0.9rem;
        color: var(--text-color);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .uploaded-card .size[b-32zwp29omr] {
        font-size: 0.8rem;
        color: var(--text-muted);
    }

    .uploaded-card .remove[b-32zwp29omr] {
        position: absolute;
        right: 1rem;
        top: 1rem;
        border: none;
        background: var(--light-color);
        color: var(--text-color);
        width: 2rem;
        height: 2rem;
        border-radius: 999px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
    }

    .uploaded-card .remove:hover[b-32zwp29omr] {
        background: var(--error-color);
        color: var(--text-color);
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    .empty-spacing[b-32zwp29omr] {
        margin-top: 2rem;
    }

    .image-drop-zone[b-32zwp29omr] {
        width: 100%;
        height: 30rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        border-radius: var(--border-radius);
    }

    .upload-icon[b-32zwp29omr] {
        color: var(--text-color);
        font-size: 8rem;
    }

    .drop-file-message[b-32zwp29omr] {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-color);
    }

    .or-message[b-32zwp29omr] {
        font-size: 1rem;
        font-weight: 500;
        color: var(--text-muted);
        margin-top: 1rem;
        margin-bottom: 1.25rem;
    }

    .files-supported-message-group[b-32zwp29omr] {
        margin-top: 4rem;
        margin-bottom: 1.25rem;
        text-align: center;
    }

    .files-supported-message[b-32zwp29omr] {
        font-size: 1rem;
        font-weight: 500;
        color: var(--text-muted);
    }

    .big-upload-button[b-32zwp29omr] {
        border-radius: 50rem;
        background: var(--brand);
        color: var(--dark-color);
        height: 3rem;
        width: 11rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border: none;
        font-weight: 700;
    }

    .big-upload-button:hover[b-32zwp29omr] {
        filter: brightness(1.20);
    }

    .post-icon[b-32zwp29omr] {
        font-size: 1.25rem;
        margin-right: 0.5rem;
    }

    .post-text[b-32zwp29omr] {
        font-size: 1rem;
        font-weight: 500;
    }

    .uploaded-card[b-32zwp29omr] {
        display: flex;
        align-items: start;
        gap: 0.75rem;
        padding: 0.75rem;
        border: 1px solid var(--border);
        border-radius: var(--border-radius);
        background: var(--light-color);
        position: relative;
        flex-direction: column;
    }

    .uploaded-card .thumb[b-32zwp29omr] {
        width: 100%;
        border-radius: 8px;
        overflow: hidden;
        background: var(--dark-color);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .uploaded-card .thumb img[b-32zwp29omr] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .uploaded-card .meta[b-32zwp29omr] {
        flex: 1;
        min-width: 0;
    }

    .uploaded-card .name[b-32zwp29omr] {
        font-size: 0.9rem;
        color: var(--text-color);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .uploaded-card .size[b-32zwp29omr] {
        font-size: 0.8rem;
        color: var(--text-muted);
    }

    .uploaded-card .remove[b-32zwp29omr] {
        position: absolute;
        right: 1rem;
        top: 1rem;
        border: none;
        background: var(--light-color);
        color: var(--text-color);
        width: 2rem;
        height: 2rem;
        border-radius: 999px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
    }

    .uploaded-card .remove:hover[b-32zwp29omr] {
        background: var(--error-color);
        color: var(--text-color);
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Users/LongAnswerUser.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {
    .empty-spacing[b-ppgn2xi6gl] {
        margin-top: 3rem;
    }

    .text-input[b-ppgn2xi6gl] {
        width: 100%;
        background: var(--light-color);
        color: var(--text-color);
        text-align: left;
        font-size: 1.25rem;
        font-weight: 500;
        border-radius: var(--border-radius);
        height: 15rem;
        resize: none;
        border-style: none;
        padding: 0.75rem;
        border: 2px solid transparent;
        outline: none;
    }

    .text-input:focus[b-ppgn2xi6gl] {
        border: 2px solid var(--brand);
    }

    .text-input[b-ppgn2xi6gl]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    .long-answer-wrapper[b-ppgn2xi6gl] {
        position: relative;
        width: 100%;
    }

    .long-answer-wrapper .text-input[b-ppgn2xi6gl] {
        padding-right: 3rem;
    }

    .mic-button[b-ppgn2xi6gl] {
        position: absolute;
        bottom: 0.9rem;
        right: 1rem;
        width: 40px;
        height: 40px;
        border-radius: 999px;
        border: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--dark-color);
        color: var(--text-color);
        cursor: pointer;
        box-shadow: 0 0 0 0 rgba(34, 227, 255, 0.0);
        transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
    }

    .mic-button:hover:not(:disabled)[b-ppgn2xi6gl] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .mic-button.is-listening[b-ppgn2xi6gl] {
        background: var(--brand);
        box-shadow: 0 0 0 6px rgba(34, 227, 255, 0.25);
    }

    .mic-button:disabled[b-ppgn2xi6gl] {
        opacity: 0.4;
        cursor: default;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {
    .empty-spacing[b-ppgn2xi6gl] {
        margin-top: 2rem;
    }

    .text-input[b-ppgn2xi6gl] {
        width: 100%;
        background: var(--light-color);
        color: var(--text-color);
        text-align: left;
        font-size: 0.85rem;
        font-weight: 500;
        border-radius: var(--border-radius);
        height: 12rem;
        resize: none;
        border-style: none;
        padding: 0.65rem;
        border: 2px solid transparent;
        outline: none;
    }

    .text-input:focus[b-ppgn2xi6gl] {
        border: 2px solid var(--brand);
    }

    .text-input[b-ppgn2xi6gl]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    .long-answer-wrapper[b-ppgn2xi6gl] {
        position: relative;
        width: 100%;
    }

    .long-answer-wrapper .text-input[b-ppgn2xi6gl] {
        padding-right: 3rem;
    }

    .mic-button[b-ppgn2xi6gl] {
        position: absolute;
        bottom: 0.9rem;
        right: 1rem;
        width: 40px;
        height: 40px;
        border-radius: 999px;
        border: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--dark-color);
        color: var(--text-color);
        cursor: pointer;
        box-shadow: 0 0 0 0 rgba(34, 227, 255, 0.0);
        transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
    }

    .mic-button:hover:not(:disabled)[b-ppgn2xi6gl] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .mic-button.is-listening[b-ppgn2xi6gl] {
        background: var(--brand);
        box-shadow: 0 0 0 6px rgba(34, 227, 255, 0.25);
    }

    .mic-button:disabled[b-ppgn2xi6gl] {
        opacity: 0.4;
        cursor: default;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    .empty-spacing[b-ppgn2xi6gl] {
        margin-top: 2rem;
    }

    .text-input[b-ppgn2xi6gl] {
        width: 100%;
        background: var(--light-color);
        color: var(--text-color);
        text-align: left;
        font-size: 0.85rem;
        font-weight: 500;
        border-radius: var(--border-radius);
        height: 15rem;
        resize: none;
        border-style: none;
        padding: 0.65rem;
        border: 2px solid transparent;
        outline: none;
    }

    .text-input:focus[b-ppgn2xi6gl] {
        border: 2px solid var(--brand);
    }

    .text-input[b-ppgn2xi6gl]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    .long-answer-wrapper[b-ppgn2xi6gl] {
        position: relative;
        width: 100%;
    }

    .long-answer-wrapper .text-input[b-ppgn2xi6gl] {
        padding-right: 3rem;
    }

    .mic-button[b-ppgn2xi6gl] {
        position: absolute;
        bottom: 0.9rem;
        right: 1rem;
        width: 40px;
        height: 40px;
        border-radius: 999px;
        border: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--dark-color);
        color: var(--text-color);
        cursor: pointer;
        box-shadow: 0 0 0 0 rgba(34, 227, 255, 0.0);
        transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
    }

    .mic-button:hover:not(:disabled)[b-ppgn2xi6gl] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .mic-button.is-listening[b-ppgn2xi6gl] {
        background: var(--brand);
        box-shadow: 0 0 0 6px rgba(34, 227, 255, 0.25);
    }

    .mic-button:disabled[b-ppgn2xi6gl] {
        opacity: 0.4;
        cursor: default;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Users/MultipleChoiceUser.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {

    .empty-spacing[b-2y7njgpfy8] {
        margin-top: 3rem;
    }

    .choice-list[b-2y7njgpfy8] {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .choice-group[b-2y7njgpfy8] {
        background: var(--light-color);
        border: 2px solid transparent;
        border-radius: var(--border-radius);
        display: flex;
        align-items: center;
        justify-content: start;
        padding: 0.5rem;
    }

    .selected[b-2y7njgpfy8] {
        border: 2px solid var(--brand) !important;
    }

    .choice-group:hover[b-2y7njgpfy8] {
        border: 2px solid var(--brand);
        transition: 0.5s;
        cursor: pointer;
    }

    .choice-letter[b-2y7njgpfy8] {
        color: var(--brand);
        background: var(--dark-color);
        font-size: 2rem;
        border-radius: var(--border-radius);
        width: 3.5rem;
        height: 3.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        margin-right: 0.75rem;
    }

    .choice-text-input[b-2y7njgpfy8] {
        width: 80%;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1.5rem;
        font-weight: 500;
    }

    .choice-text-input[b-2y7njgpfy8]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    .choice-text[b-2y7njgpfy8] {
        color: var(--text-color);
        font-size: 1.5rem;
        margin-left: 0.75rem;
        font-weight: 500;
    }

    .selection-icon[b-2y7njgpfy8] {
        color: var(--brand);
        font-size: 2rem;
    }

    .choice-container[b-2y7njgpfy8] {
        position: relative;
        width: 100%;
    }

    .mic-button[b-2y7njgpfy8] {
        position: absolute;
        right: -3.25rem;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        border-radius: 999px;
        border: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--dark-color);
        color: var(--text-color);
        cursor: pointer;
        box-shadow: 0 0 0 0 rgba(34, 227, 255, 0.0);
        transition: background 0.15s ease, box-shadow 0.15s ease;
    }

    .mic-button:hover:not(:disabled)[b-2y7njgpfy8] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .mic-button.is-listening[b-2y7njgpfy8] {
        background: var(--brand);
        box-shadow: 0 0 0 6px rgba(34, 227, 255, 0.25);
    }

    .mic-button:disabled[b-2y7njgpfy8] {
        opacity: 0.4;
        cursor: default;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/
@media screen and (min-width: 992px) and (max-width: 1625px) {

    .empty-spacing[b-2y7njgpfy8] {
        margin-top: 2rem;
    }

    .choice-list[b-2y7njgpfy8] {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
    }

    .choice-group[b-2y7njgpfy8] {
        background: var(--light-color);
        border: 2px solid transparent;
        border-radius: var(--border-radius);
        display: flex;
        align-items: center;
        justify-content: start;
        padding: 0.35rem;
    }

    .selected[b-2y7njgpfy8] {
        border: 2px solid var(--brand) !important;
    }

    .choice-group:hover[b-2y7njgpfy8] {
        border: 2px solid var(--brand);
        transition: 0.5s;
        cursor: pointer;
    }

    .choice-letter[b-2y7njgpfy8] {
        color: var(--brand);
        background: var(--dark-color);
        font-size: 1.5rem;
        border-radius: var(--border-radius);
        width: 3rem;
        height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        margin-right: 0.75rem;
    }

    .choice-text-input[b-2y7njgpfy8] {
        width: 80%;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1rem;
        font-weight: 500;
    }

    .choice-text-input[b-2y7njgpfy8]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    .choice-text[b-2y7njgpfy8] {
        color: var(--text-color);
        font-size: 1.25rem;
        margin-left: 0.75rem;
        font-weight: 500;
    }

    .selection-icon[b-2y7njgpfy8] {
        color: var(--brand);
        font-size: 1.5rem;
    }

    .choice-container[b-2y7njgpfy8] {
        position: relative;
        width: 100%;
    }

    .mic-button[b-2y7njgpfy8] {
        position: absolute;
        right: -3.25rem;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        border-radius: 999px;
        border: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--dark-color);
        color: var(--text-color);
        cursor: pointer;
        box-shadow: 0 0 0 0 rgba(34, 227, 255, 0.0);
        transition: background 0.15s ease, box-shadow 0.15s ease;
    }

    .mic-button:hover:not(:disabled)[b-2y7njgpfy8] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .mic-button.is-listening[b-2y7njgpfy8] {
        background: var(--brand);
        box-shadow: 0 0 0 6px rgba(34, 227, 255, 0.25);
    }

    .mic-button:disabled[b-2y7njgpfy8] {
        opacity: 0.4;
        cursor: default;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    .empty-spacing[b-2y7njgpfy8] {
        margin-top: 2rem;
    }

    .choice-list[b-2y7njgpfy8] {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
    }

    .choice-group[b-2y7njgpfy8] {
        background: var(--light-color);
        border: 2px solid transparent;
        border-radius: var(--border-radius);
        display: flex;
        align-items: center;
        justify-content: start;
        padding: 0.35rem;
    }

    .selected[b-2y7njgpfy8] {
        border: 2px solid var(--brand) !important;
    }

    .choice-group:hover[b-2y7njgpfy8] {
        border: 2px solid var(--brand);
        transition: 0.5s;
        cursor: pointer;
    }

    .choice-letter[b-2y7njgpfy8] {
        color: var(--brand);
        background: var(--dark-color);
        font-size: 1.5rem;
        border-radius: var(--border-radius);
        width: 3rem;
        height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        margin-right: 0.75rem;
    }

    .choice-text-input[b-2y7njgpfy8] {
        width: 80%;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1rem;
        font-weight: 500;
    }

    .choice-text-input[b-2y7njgpfy8]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    .choice-text[b-2y7njgpfy8] {
        color: var(--text-color);
        font-size: 1.25rem;
        margin-left: 0.75rem;
        font-weight: 500;
    }

    .selection-icon[b-2y7njgpfy8] {
        color: var(--brand);
        font-size: 1.5rem;
    }

    .choice-container[b-2y7njgpfy8] {
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
    }

    .mic-button[b-2y7njgpfy8] {
        width: 50px;
        height: 50px;
        border-radius: 999px;
        border: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--dark-color);
        color: var(--text-color);
        cursor: pointer;
        box-shadow: 0 0 0 0 rgba(34, 227, 255, 0.0);
        transition: background 0.15s ease, box-shadow 0.15s ease;
        position: fixed;
        top: 0;
        right: 0;
        margin: 1.5rem;
        font-size: 1rem;
    }

    .mic-button:hover:not(:disabled)[b-2y7njgpfy8] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .mic-button.is-listening[b-2y7njgpfy8] {
        background: var(--brand);
        box-shadow: 0 0 0 6px rgba(34, 227, 255, 0.25);
    }

    .mic-button:disabled[b-2y7njgpfy8] {
        opacity: 0.4;
        cursor: default;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Users/OpinionScaleUser.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {

    .empty-spacing[b-63rq7jztgo] {
        margin-top: 3rem;
    }

    .opinion-scale-block[b-63rq7jztgo] {
        display: inline-flex;
        flex-direction: column;
        gap: 0.5rem;
        width: max-content;
    }

    .opinion-scale-row[b-63rq7jztgo] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .opinion-scale-pill[b-63rq7jztgo] {
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 8px;
        padding: 0 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--light-color);
        color: var(--text-color);
        font-size: 1.35rem;
        border: 2px solid var(--brand);
    }

    .opinion-scale-pill:hover[b-63rq7jztgo] {
        background: var(--brand);
        color: var(--dark-color);
        cursor: pointer;
    }

    .is-selected[b-63rq7jztgo] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .rating-row-labels[b-63rq7jztgo] {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .form-input-rating[b-63rq7jztgo] {
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        font-size: 1rem;
        font-weight: 300;
        max-width: 5rem;
    }

    .left[b-63rq7jztgo] {
        text-align: left;
    }

    .right[b-63rq7jztgo] {
        text-align: right;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {

    .empty-spacing[b-63rq7jztgo] {
        margin-top: 2rem;
    }

    .opinion-scale-block[b-63rq7jztgo] {
        display: inline-flex;
        flex-direction: column;
        gap: 0.5rem;
        width: max-content;
    }

    .opinion-scale-row[b-63rq7jztgo] {
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

    .opinion-scale-pill[b-63rq7jztgo] {
        width: 3rem;
        height: 3rem;
        border-radius: 8px;
        padding: 0 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--light-color);
        color: var(--text-color);
        font-size: 1.25rem;
        border: 2px solid var(--brand);
    }

    .opinion-scale-pill:hover[b-63rq7jztgo] {
        background: var(--brand);
        color: var(--dark-color);
        cursor: pointer;
    }

    .is-selected[b-63rq7jztgo] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .rating-row-labels[b-63rq7jztgo] {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .form-input-rating[b-63rq7jztgo] {
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        font-size: 0.85rem;
        font-weight: 300;
        max-width: 5rem;
    }

    .left[b-63rq7jztgo] {
        text-align: left;
    }

    .right[b-63rq7jztgo] {
        text-align: right;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    .empty-spacing[b-63rq7jztgo] {
        margin-top: 2rem;
    }

    .opinion-scale-block[b-63rq7jztgo] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
        max-width: 100%;
    }

    .opinion-scale-row[b-63rq7jztgo] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        flex-wrap: wrap;
    }

    .opinion-scale-pill[b-63rq7jztgo] {
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 8px;
        padding: 0 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--light-color);
        color: var(--text-color);
        font-size: 1.35rem;
        border: 2px solid var(--brand);
    }

    .opinion-scale-pill:hover[b-63rq7jztgo] {
        background: var(--brand);
        color: var(--dark-color);
        cursor: pointer;
    }

    .is-selected[b-63rq7jztgo] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .rating-row-labels[b-63rq7jztgo] {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .form-input-rating[b-63rq7jztgo] {
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        font-size: 0.9rem;
        font-weight: 300;
        max-width: 5rem;
    }

    .left[b-63rq7jztgo] {
        text-align: left;
    }

    .right[b-63rq7jztgo] {
        text-align: right;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Users/PhoneInputUser.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {

    .empty-spacing[b-anjmmlpvfe] {
        margin-top: 3rem;
    }

    .phone-input-container[b-anjmmlpvfe] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem;
        width: 100%;
        max-width: 30rem;
    }

    .country-pill[b-anjmmlpvfe] {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.75rem;
        font-size: 0.9rem;
        cursor: pointer;
        background: transparent;
        border-radius: 6px;
        outline: none;
        border: none;
    }

    .country-pill:hover[b-anjmmlpvfe] {
        background: var(--light-color);
    }

    .flag[b-anjmmlpvfe] {
        display: inline-block;
        width: 20px;
        height: 15px;
    }

    .country-pill .dial[b-anjmmlpvfe] {
        color: var(--text-color);
    }

    .phone-input[b-anjmmlpvfe] {
        width: 100%;
        padding: 0.75rem;
        padding-right: 2.5rem;
        font-size: 0.85rem;
        background: transparent;
        border: none;
        outline: none;
        border-bottom: 2px solid var(--brand);
        color: var(--text-color);
    }

    .phone-input[b-anjmmlpvfe]::placeholder {
        color: var(--text-muted);
    }

    .modal[b-anjmmlpvfe] {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.75);
        display: block;
        z-index: 3;
    }

    .modal-content[b-anjmmlpvfe] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: var(--dark-color);
        padding-top: 1rem;
        padding-bottom: 2rem;
        padding-left: 2rem;
        padding-right: 2rem;
        border-radius: var(--border-radius);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        z-index: 3;
        width: 25rem;
        height: fit-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .search-row[b-anjmmlpvfe] {
        margin-bottom: .75rem;
    }

    .search-input[b-anjmmlpvfe] {
        width: 100%;
        padding: 0.65rem 0.8rem;
        border-radius: 10px;
        background: var(--light-color);
        color: var(--text-color);
        border: 2px solid transparent;
        outline: none;
    }

    .search-input:focus[b-anjmmlpvfe] {
        border-color: var(--brand);
    }

    .multiple-choice-list[b-anjmmlpvfe] {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin-top: 1.5rem;
        max-height: 26rem;
        overflow-y: auto;
    }

    .multiple-choice-group[b-anjmmlpvfe] {
        background: var(--light-color);
        border-radius: var(--border-radius);
        display: flex;
        align-items: center;
        justify-content: start;
        padding: 1rem 1.25rem;
        height: 4rem;
        width: 100%;
        outline: none;
        border: 2px solid transparent;
        gap: 1rem;
    }

    .multiple-choice-group:hover[b-anjmmlpvfe] {
        cursor: pointer;
        border: 2px solid var(--brand);
    }

    .modal-list[b-anjmmlpvfe] {
        width: 100%;
    }

    .country-line[b-anjmmlpvfe] {
        color: var(--text-color);
        font-size: 1rem;
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .country-name[b-anjmmlpvfe] {
    }

    .country-dial[b-anjmmlpvfe] {
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {
    .empty-spacing[b-anjmmlpvfe] {
        margin-top: 2rem;
    }

    .phone-input-container[b-anjmmlpvfe] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem;
        width: 100%;
        max-width: 30rem;
    }

    .country-pill[b-anjmmlpvfe] {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.75rem;
        font-size: 0.9rem;
        cursor: pointer;
        background: transparent;
        border-radius: 6px;
        outline: none;
        border: none;
    }

    .country-pill:hover[b-anjmmlpvfe] {
        background: var(--light-color);
    }

    .flag[b-anjmmlpvfe] {
        display: inline-block;
        width: 20px;
        height: 15px;
    }

    .country-pill .dial[b-anjmmlpvfe] {
        color: var(--text-color);
    }

    .phone-input[b-anjmmlpvfe] {
        width: 100%;
        padding: 0.75rem;
        padding-right: 2.5rem;
        font-size: 0.85rem;
        background: transparent;
        border: none;
        outline: none;
        border-bottom: 2px solid var(--brand);
        color: var(--text-color);
    }

    .phone-input[b-anjmmlpvfe]::placeholder {
        color: var(--text-muted);
    }

    .modal[b-anjmmlpvfe] {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.75);
        display: block;
        z-index: 3;
    }

    .modal-content[b-anjmmlpvfe] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: var(--dark-color);
        padding-top: 1rem;
        padding-bottom: 2rem;
        padding-left: 2rem;
        padding-right: 2rem;
        border-radius: var(--border-radius);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        z-index: 3;
        width: 25rem;
        height: fit-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .search-row[b-anjmmlpvfe] {
        margin-bottom: .75rem;
    }

    .search-input[b-anjmmlpvfe] {
        width: 100%;
        padding: 0.65rem 0.8rem;
        border-radius: 10px;
        background: var(--light-color);
        color: var(--text-color);
        border: 2px solid transparent;
        outline: none;
    }

    .search-input:focus[b-anjmmlpvfe] {
        border-color: var(--brand);
    }

    .multiple-choice-list[b-anjmmlpvfe] {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        margin-top: 1.25rem;
        max-height: 22rem;
        overflow-y: auto;
    }

    .multiple-choice-group[b-anjmmlpvfe] {
        background: var(--light-color);
        border-radius: var(--border-radius);
        display: flex;
        align-items: center;
        justify-content: start;
        padding: 0.85rem 1rem;
        height: 4rem;
        width: 100%;
        outline: none;
        border: 2px solid transparent;
        gap: 0.5rem;
    }

    .multiple-choice-group:hover[b-anjmmlpvfe] {
        cursor: pointer;
        border: 2px solid var(--brand);
    }

    .modal-list[b-anjmmlpvfe] {
        width: 100%;
    }

    .country-line[b-anjmmlpvfe] {
        color: var(--text-color);
        font-size: 1rem;
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .country-name[b-anjmmlpvfe] {
        font-size: 0.85rem;
    }

    .country-dial[b-anjmmlpvfe] {
        font-size: 0.85rem;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    .empty-spacing[b-anjmmlpvfe] {
        margin-top: 2rem;
    }

    .phone-input-container[b-anjmmlpvfe] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem;
        width: 100%;
        max-width: 30rem;
    }

    .country-pill[b-anjmmlpvfe] {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.75rem;
        font-size: 0.9rem;
        cursor: pointer;
        background: transparent;
        border-radius: 6px;
        outline: none;
        border: none;
    }

    .country-pill:hover[b-anjmmlpvfe] {
        background: var(--light-color);
    }

    .flag[b-anjmmlpvfe] {
        display: inline-block;
        width: 20px;
        height: 15px;
    }

    .country-pill .dial[b-anjmmlpvfe] {
        color: var(--text-color);
    }

    .phone-input[b-anjmmlpvfe] {
        width: 100%;
        padding: 0.75rem;
        padding-right: 2.5rem;
        font-size: 0.85rem;
        background: transparent;
        border: none;
        outline: none;
        border-bottom: 2px solid var(--brand);
        color: var(--text-color);
    }

    .phone-input[b-anjmmlpvfe]::placeholder {
        color: var(--text-muted);
    }

    .modal[b-anjmmlpvfe] {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.75);
        animation: backdropIn-b-anjmmlpvfe .28s ease forwards;
        z-index: 999;
    }

    .modal-content[b-anjmmlpvfe] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: auto;
        max-height: 75vh;
        overflow: auto;
        border-radius: 16px 16px 0 0;
        border: 1px solid var(--light-color);
        box-shadow: 0 -12px 32px rgba(0,0,0,.22);
        padding: 1.5rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
        transform: translateY(100%);
        animation: sheetIn-b-anjmmlpvfe .28s cubic-bezier(.2,.7,.2,1) forwards;
        will-change: transform;
        background-color: var(--dark-color);
    }

    .modal.closing[b-anjmmlpvfe] {
        animation: backdropOut-b-anjmmlpvfe .22s ease forwards;
    }

    .modal.closing .modal-content[b-anjmmlpvfe] {
        animation: sheetOut-b-anjmmlpvfe .22s cubic-bezier(.4,.2,.2,1) forwards;
    }

    @keyframes sheetIn-b-anjmmlpvfe {
        from {
            transform: translateY(100%);
            opacity: .98;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes sheetOut-b-anjmmlpvfe {
        from {
            transform: translateY(0);
            opacity: 1;
        }

        to {
            transform: translateY(100%);
            opacity: .98;
        }
    }

    @keyframes backdropIn-b-anjmmlpvfe {
        from {
            background: rgba(0,0,0,0);
        }

        to {
            background: rgba(0,0,0,.35);
        }
    }

    @keyframes backdropOut-b-anjmmlpvfe {
        from {
            background: rgba(0,0,0,.35);
        }

        to {
            background: rgba(0,0,0,0);
        }
    }

    .search-row[b-anjmmlpvfe] {
        margin-bottom: .75rem;
    }

    .search-input[b-anjmmlpvfe] {
        width: 100%;
        padding: 0.65rem 0.8rem;
        border-radius: 10px;
        background: var(--light-color);
        color: var(--text-color);
        border: 2px solid transparent;
        outline: none;
    }

    .search-input:focus[b-anjmmlpvfe] {
        border-color: var(--brand);
    }

    .multiple-choice-list[b-anjmmlpvfe] {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        margin-top: 1.25rem;
        max-height: 22rem;
        overflow-y: auto;
    }

    .multiple-choice-group[b-anjmmlpvfe] {
        background: var(--light-color);
        border-radius: var(--border-radius);
        display: flex;
        align-items: center;
        justify-content: start;
        padding: 0.85rem 1rem;
        height: 4rem;
        width: 100%;
        outline: none;
        border: 2px solid transparent;
        gap: 0.5rem;
    }

    .multiple-choice-group:hover[b-anjmmlpvfe] {
        cursor: pointer;
        border: 2px solid var(--brand);
    }

    .modal-list[b-anjmmlpvfe] {
        width: 100%;
    }

    .country-line[b-anjmmlpvfe] {
        color: var(--text-color);
        font-size: 1rem;
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .country-name[b-anjmmlpvfe] {
        font-size: 0.85rem;
    }

    .country-dial[b-anjmmlpvfe] {
        font-size: 0.85rem;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Users/PictureChoiceUser.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {
    .empty-spacing[b-n043jcvvj3] {
        margin-top: 3rem;
    }

    .picture-choice-grid[b-n043jcvvj3] {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0.75rem;
    }

    .picture-choice-card[b-n043jcvvj3] {
        background: var(--light-color);
        border-radius: var(--border-radius);
        border: 2px solid transparent;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        height: 240px;
    }

    .picture-choice-card.add-card[b-n043jcvvj3] {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-style: dashed;
    }

    .picture-choice-card:hover[b-n043jcvvj3] {
        border-color: var(--brand);
        cursor: pointer;
    }

    .is-selected[b-n043jcvvj3] {
        border-color: var(--brand);
    }

    .picture-choice-image-zone[b-n043jcvvj3] {
        position: relative;
        flex: 1;
        background: var(--dark-color);
        display: flex;
        align-items: stretch;
        justify-content: center;
        border-radius: var(--border-radius);
        margin: 0.25rem;
        overflow: hidden;
    }

    .picture-choice-image-zone img[b-n043jcvvj3] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: var(--border-radius);
    }

    .picture-choice-placeholder[b-n043jcvvj3] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        color: var(--text-muted);
        font-size: 0.85rem;
    }

    .picture-choice-placeholder i[b-n043jcvvj3] {
        font-size: 1.5rem;
    }

    .picture-choice-footer[b-n043jcvvj3] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.4rem 0.5rem 0.55rem;
        position: relative;
    }

    .choice-letter[b-n043jcvvj3] {
        min-width: 1.8rem;
        height: 1.8rem;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        color: var(--brand);
        background: var(--dark-color);
        font-weight: 700;
    }

    .choice-text[b-n043jcvvj3] {
        flex: 1;
        background: transparent;
        border: none;
        outline: none;
        color: var(--text-color);
        font-size: 0.85rem;
        text-align: start;
    }

    .choice-text[b-n043jcvvj3]::placeholder {
        color: var(--text-muted);
    }

    .picture-choice-container[b-n043jcvvj3] {
        position: relative;
        width: 40rem;
    }

    .mic-button[b-n043jcvvj3] {
        position: absolute;
        right: -3.25rem;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        border-radius: 999px;
        border: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--dark-color);
        color: var(--text-color);
        cursor: pointer;
        box-shadow: 0 0 0 0 rgba(34, 227, 255, 0.0);
        transition: background 0.15s ease, box-shadow 0.15s ease;
    }

    .mic-button:hover:not(:disabled)[b-n043jcvvj3] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .mic-button.is-listening[b-n043jcvvj3] {
        background: var(--brand);
        box-shadow: 0 0 0 6px rgba(34, 227, 255, 0.25);
    }

    .mic-button:disabled[b-n043jcvvj3] {
        opacity: 0.4;
        cursor: default;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {
    .empty-spacing[b-n043jcvvj3] {
        margin-top: 2rem;
    }

    .picture-choice-grid[b-n043jcvvj3] {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0.5rem;
    }

    .picture-choice-card[b-n043jcvvj3] {
        background: var(--light-color);
        border-radius: var(--border-radius);
        border: 2px solid transparent;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        height: 220px;
    }

    .picture-choice-card.add-card[b-n043jcvvj3] {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-style: dashed;
    }

    .picture-choice-card:hover[b-n043jcvvj3] {
        border-color: var(--brand);
        cursor: pointer;
    }

    .is-selected[b-n043jcvvj3] {
        border-color: var(--brand);
    }

    .picture-choice-image-zone[b-n043jcvvj3] {
        position: relative;
        flex: 1;
        background: var(--dark-color);
        display: flex;
        align-items: stretch;
        justify-content: center;
        border-radius: var(--border-radius);
        margin: 0.25rem;
        overflow: hidden;
    }

    .picture-choice-image-zone img[b-n043jcvvj3] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: var(--border-radius);
    }

    .picture-choice-placeholder[b-n043jcvvj3] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        color: var(--text-muted);
        font-size: 0.85rem;
    }

    .picture-choice-placeholder i[b-n043jcvvj3] {
        font-size: 1.5rem;
    }

    .picture-choice-footer[b-n043jcvvj3] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.4rem 0.5rem 0.55rem;
        position: relative;
    }

    .choice-letter[b-n043jcvvj3] {
        min-width: 1.8rem;
        height: 1.8rem;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        color: var(--brand);
        background: var(--dark-color);
        font-weight: 700;
    }

    .choice-text[b-n043jcvvj3] {
        flex: 1;
        background: transparent;
        border: none;
        outline: none;
        color: var(--text-color);
        font-size: 0.85rem;
        text-align: start;
    }

    .choice-text[b-n043jcvvj3]::placeholder {
        color: var(--text-muted);
    }

    .picture-choice-container[b-n043jcvvj3] {
        position: relative;
        width: 35rem;
    }

    .mic-button[b-n043jcvvj3] {
        position: absolute;
        right: -3.25rem;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        border-radius: 999px;
        border: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--dark-color);
        color: var(--text-color);
        cursor: pointer;
        box-shadow: 0 0 0 0 rgba(34, 227, 255, 0.0);
        transition: background 0.15s ease, box-shadow 0.15s ease;
    }

    .mic-button:hover:not(:disabled)[b-n043jcvvj3] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .mic-button.is-listening[b-n043jcvvj3] {
        background: var(--brand);
        box-shadow: 0 0 0 6px rgba(34, 227, 255, 0.25);
    }

    .mic-button:disabled[b-n043jcvvj3] {
        opacity: 0.4;
        cursor: default;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    .empty-spacing[b-n043jcvvj3] {
        margin-top: 2rem;
    }

    .picture-choice-grid[b-n043jcvvj3] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        width: 100%;
    }

    .picture-choice-card[b-n043jcvvj3] {
        background: var(--light-color);
        border-radius: var(--border-radius);
        border: 2px solid transparent;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        height: 220px;
    }

    .picture-choice-card.add-card[b-n043jcvvj3] {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-style: dashed;
    }

    .picture-choice-card:hover[b-n043jcvvj3] {
        border-color: var(--brand);
        cursor: pointer;
    }

    .is-selected[b-n043jcvvj3] {
        border-color: var(--brand);
    }

    .picture-choice-image-zone[b-n043jcvvj3] {
        position: relative;
        flex: 1;
        background: var(--dark-color);
        display: flex;
        align-items: stretch;
        justify-content: center;
        border-radius: var(--border-radius);
        margin: 0.25rem;
        overflow: hidden;
    }

    .picture-choice-image-zone img[b-n043jcvvj3] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: var(--border-radius);
    }

    .picture-choice-placeholder[b-n043jcvvj3] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        color: var(--text-muted);
        font-size: 0.85rem;
    }

    .picture-choice-placeholder i[b-n043jcvvj3] {
        font-size: 1.5rem;
    }

    .picture-choice-footer[b-n043jcvvj3] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.4rem 0.5rem 0.55rem;
        position: relative;
    }

    .choice-letter[b-n043jcvvj3] {
        min-width: 1.8rem;
        height: 1.8rem;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        color: var(--brand);
        background: var(--dark-color);
        font-weight: 700;
    }

    .choice-text[b-n043jcvvj3] {
        flex: 1;
        background: transparent;
        border: none;
        outline: none;
        color: var(--text-color);
        font-size: 0.85rem;
        text-align: start;
    }

    .choice-text[b-n043jcvvj3]::placeholder {
        color: var(--text-muted);
    }

    .picture-choice-container[b-n043jcvvj3] {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
    }

    .mic-button[b-n043jcvvj3] {
        width: 50px;
        height: 50px;
        border-radius: 999px;
        border: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--dark-color);
        color: var(--text-color);
        cursor: pointer;
        box-shadow: 0 0 0 0 rgba(34, 227, 255, 0.0);
        transition: background 0.15s ease, box-shadow 0.15s ease;
        position: fixed;
        top: 0;
        right: 0;
        margin: 1.5rem;
        font-size: 1rem;
    }

    .mic-button:hover:not(:disabled)[b-n043jcvvj3] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .mic-button.is-listening[b-n043jcvvj3] {
        background: var(--brand);
        box-shadow: 0 0 0 6px rgba(34, 227, 255, 0.25);
    }

    .mic-button:disabled[b-n043jcvvj3] {
        opacity: 0.4;
        cursor: default;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Users/RatingUser.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {

    .empty-spacing[b-rm4xf95sxn] {
        margin-top: 3rem;
    }

    .rating-block[b-rm4xf95sxn] {
        display: inline-flex;
        flex-direction: column;
        gap: 0.25rem;
        width: max-content;
        max-width: 100%;
    }

    .rating-row[b-rm4xf95sxn] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .rating-icon[b-rm4xf95sxn] {
        color: var(--brand);
        font-size: 3rem;
        cursor: pointer;
    }

    .rating-row-labels[b-rm4xf95sxn] {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .form-input-rating[b-rm4xf95sxn] {
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        font-size: 1rem;
        font-weight: 300;
        max-width: 5rem;
    }

    .left[b-rm4xf95sxn] {
        text-align: left;
    }

    .right[b-rm4xf95sxn] {
        text-align: right;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {

    .empty-spacing[b-rm4xf95sxn] {
        margin-top: 2rem;
    }

    .rating-block[b-rm4xf95sxn] {
        display: inline-flex;
        flex-direction: column;
        gap: 0.25rem;
        width: max-content;
        max-width: 100%;
    }

    .rating-row[b-rm4xf95sxn] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .rating-icon[b-rm4xf95sxn] {
        color: var(--brand);
        font-size: 2.5rem;
    }

    .rating-row-labels[b-rm4xf95sxn] {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .form-input-rating[b-rm4xf95sxn] {
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        font-size: 0.85rem;
        font-weight: 300;
        max-width: 5rem;
    }

    .left[b-rm4xf95sxn] {
        text-align: left;
    }

    .right[b-rm4xf95sxn] {
        text-align: right;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {

    .empty-spacing[b-rm4xf95sxn] {
        margin-top: 2rem;
    }

    .rating-block[b-rm4xf95sxn] {
        display: inline-flex;
        flex-direction: column;
        gap: 0.25rem;
        width: max-content;
        max-width: 100%;
    }

    .rating-row[b-rm4xf95sxn] {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .rating-icon[b-rm4xf95sxn] {
        color: var(--brand);
        font-size: 2.25rem;
        cursor: pointer;
    }

    .rating-row-labels[b-rm4xf95sxn] {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .form-input-rating[b-rm4xf95sxn] {
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        font-size: 1rem;
        font-weight: 300;
        max-width: 5rem;
    }

    .left[b-rm4xf95sxn] {
        text-align: left;
    }

    .right[b-rm4xf95sxn] {
        text-align: right;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Users/ShortAnswerUser.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {
    .empty-spacing[b-frwylyaxom] {
        margin-top: 3rem;
    }

    .text-input[b-frwylyaxom] {
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1.75rem;
        font-weight: 500;
        border-bottom: 2px solid transparent;
    }

    .text-input:focus[b-frwylyaxom] {
        border-bottom: 2px solid var(--brand);
    }

    .text-input[b-frwylyaxom]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    .input-row[b-frwylyaxom] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
    }

    .input-row .text-input[b-frwylyaxom] {
        flex: 1 1 auto;
    }

    .mic-button[b-frwylyaxom] {
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        border-radius: 999px;
        border: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--light-color);
        color: var(--text-color);
        cursor: pointer;
        box-shadow: 0 0 0 0 rgba(34, 227, 255, 0.0);
        transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
    }

    .mic-button:hover:not(:disabled)[b-frwylyaxom] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .mic-button:disabled[b-frwylyaxom] {
        opacity: 0.4;
        cursor: default;
    }

    .mic-button.is-listening[b-frwylyaxom] {
        background: var(--brand);
        box-shadow: 0 0 0 6px rgba(34, 227, 255, 0.25);
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/
@media screen and (min-width: 992px) and (max-width: 1625px) {
    .empty-spacing[b-frwylyaxom] {
        margin-top: 2rem;
    }

    .text-input[b-frwylyaxom] {
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1.5rem;
        font-weight: 500;
        border-bottom: 2px solid transparent;
    }

    .text-input:focus[b-frwylyaxom] {
        border-bottom: 2px solid var(--brand);
    }

    .text-input[b-frwylyaxom]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    .input-row[b-frwylyaxom] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
    }

    .input-row .text-input[b-frwylyaxom] {
        flex: 1 1 auto;
    }

    .mic-button[b-frwylyaxom] {
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        border-radius: 999px;
        border: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--light-color);
        color: var(--text-color);
        cursor: pointer;
        box-shadow: 0 0 0 0 rgba(34, 227, 255, 0.0);
        transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
    }

    .mic-button:hover:not(:disabled)[b-frwylyaxom] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .mic-button:disabled[b-frwylyaxom] {
        opacity: 0.4;
        cursor: default;
    }

    .mic-button.is-listening[b-frwylyaxom] {
        background: var(--brand);
        box-shadow: 0 0 0 6px rgba(34, 227, 255, 0.25);
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    .empty-spacing[b-frwylyaxom] {
        margin-top: 2rem;
    }

    .text-input[b-frwylyaxom] {
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1.5rem;
        font-weight: 500;
        border-bottom: 2px solid transparent;
    }

    .text-input:focus[b-frwylyaxom] {
        border-bottom: 2px solid var(--brand);
    }

    .text-input[b-frwylyaxom]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    .input-row[b-frwylyaxom] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
    }

    .input-row .text-input[b-frwylyaxom] {
        flex: 1 1 auto;
    }

    .mic-button[b-frwylyaxom] {
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        border-radius: 999px;
        border: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--dark-color);
        color: var(--text-color);
        cursor: pointer;
        box-shadow: 0 0 0 0 rgba(34, 227, 255, 0.0);
        transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
    }

    .mic-button:hover:not(:disabled)[b-frwylyaxom] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .mic-button:disabled[b-frwylyaxom] {
        opacity: 0.4;
        cursor: default;
    }

    .mic-button.is-listening[b-frwylyaxom] {
        background: var(--brand);
        box-shadow: 0 0 0 6px rgba(34, 227, 255, 0.25);
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Users/SignatureUser.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {

    .empty-spacing[b-o2o2ed0px5] {
        margin-bottom: 1rem;
    }

    .signature-group[b-o2o2ed0px5] {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        margin-top: 2rem;
    }

    .button-box[b-o2o2ed0px5] {
        width: 12rem;
        position: relative;
        border-radius: 30px;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .toggle-btn[b-o2o2ed0px5] {
        padding: 12px 15px;
        cursor: pointer;
        background: transparent;
        border: 0;
        outline: none;
        position: relative;
        text-align: center;
        color: var(--dark-color);
        font-size: 1rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .toggle-btn-slider[b-o2o2ed0px5] {
        left: 0;
        top: 0;
        position: absolute;
        width: 6rem;
        height: 100%;
        background: var(--brand);
        border-radius: 30px;
        transition: 0.5s;
    }

    .toggle-icon[b-o2o2ed0px5] {
        margin-right: 0.5rem;
    }

    .toggle-right[b-o2o2ed0px5] {
        left: 6rem !important;
    }

    .light-text[b-o2o2ed0px5] {
        color: var(--text-color) !important;
    }

    .dark-text[b-o2o2ed0px5] {
        color: var(--dark-color) !important;
    }

    /**************** Signature ****************/

    .signature-canvas[b-o2o2ed0px5] {
        border-radius: 10px;
        border: 2px solid var(--light-color);
    }

    .signature-canvas:hover[b-o2o2ed0px5] {
        border: 2px solid var(--brand);
        cursor: crosshair;
    }

    .signature-image-container[b-o2o2ed0px5] {
        position: relative;
    }

    .signature-img[b-o2o2ed0px5] {
        border-radius: var(--border-radius);
        border: 2px solid var(--brand);
    }

    .remove-signature[b-o2o2ed0px5] {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        font-weight: 500;
        border-radius: var(--border-radius);
        padding: 0.65rem 1rem;
        position: absolute;
        white-space: nowrap;
        background: var(--light-color);
        color: var(--text-color);
        top: 0.75rem;
        right: 0.75rem;
        gap: 0.5rem;
    }

    .remove-signature:hover[b-o2o2ed0px5] {
        cursor: pointer;
        background: var(--error-color);
    }

    .remove-signature-icon[b-o2o2ed0px5] {
        font-size: 1rem;
        color: var(--text-color);
    }

    /**************** Type Signature ****************/

    .text-input-container[b-o2o2ed0px5] {
        height: 254px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .text-input[b-o2o2ed0px5] {
        width: 600px;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 3rem;
        font-weight: 500;
        border-bottom: 2px solid var(--light-color);
        font-family: 'Parisienne', cursive;
        text-align: center;
    }

    .text-input:focus[b-o2o2ed0px5] {
        border-bottom: 2px solid var(--brand);
    }

    .text-input[b-o2o2ed0px5]::placeholder {
        color: var(--light-color);
        font-family: "Nunito", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif, Arial;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/
@media screen and (min-width: 992px) and (max-width: 1625px) {
    .empty-spacing[b-o2o2ed0px5] {
        margin-bottom: 1rem;
    }

    .signature-group[b-o2o2ed0px5] {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        margin-top: 2rem;
    }

    .button-box[b-o2o2ed0px5] {
        width: 12rem;
        position: relative;
        border-radius: 30px;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .toggle-btn[b-o2o2ed0px5] {
        padding: 12px 15px;
        cursor: pointer;
        background: transparent;
        border: 0;
        outline: none;
        position: relative;
        text-align: center;
        color: var(--dark-color);
        font-size: 1rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .toggle-btn-slider[b-o2o2ed0px5] {
        left: 0;
        top: 0;
        position: absolute;
        width: 6rem;
        height: 100%;
        background: var(--brand);
        border-radius: 30px;
        transition: 0.5s;
    }

    .toggle-icon[b-o2o2ed0px5] {
        margin-right: 0.5rem;
    }

    .toggle-right[b-o2o2ed0px5] {
        left: 6rem !important;
    }

    .light-text[b-o2o2ed0px5] {
        color: var(--text-color) !important;
    }

    .dark-text[b-o2o2ed0px5] {
        color: var(--dark-color) !important;
    }

    /**************** Signature ****************/

    .signature-canvas[b-o2o2ed0px5] {
        border-radius: 10px;
        border: 2px solid var(--light-color);
    }

    .signature-canvas:hover[b-o2o2ed0px5] {
        border: 2px solid var(--brand);
        cursor: crosshair;
    }

    .signature-image-container[b-o2o2ed0px5] {
        position: relative;
    }

    .signature-img[b-o2o2ed0px5] {
        border-radius: var(--border-radius);
        border: 2px solid var(--brand);
    }

    .remove-signature[b-o2o2ed0px5] {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        font-weight: 500;
        border-radius: var(--border-radius);
        padding: 0.65rem 1rem;
        position: absolute;
        white-space: nowrap;
        background: var(--light-color);
        color: var(--text-color);
        top: 0.75rem;
        right: 0.75rem;
        gap: 0.5rem;
    }
    
    .remove-signature:hover[b-o2o2ed0px5] {
        cursor: pointer;
        background: var(--error-color);
    }

    .remove-signature-icon[b-o2o2ed0px5] {
        font-size: 0.85rem;
        color: var(--text-color);
    }

    /**************** Type Signature ****************/

    .text-input-container[b-o2o2ed0px5] {
        height: 179px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .text-input[b-o2o2ed0px5] {
        width: 400px;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 2rem;
        font-weight: 500;
        border-bottom: 2px solid var(--light-color);
        font-family: 'Parisienne', cursive;
        text-align: center;
    }

    .text-input:focus[b-o2o2ed0px5] {
        border-bottom: 2px solid var(--brand);
    }

    .text-input[b-o2o2ed0px5]::placeholder {
        color: var(--light-color);
        font-family: "Nunito", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif, Arial;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    .empty-spacing[b-o2o2ed0px5] {
        margin-bottom: 1rem;
    }

    .signature-group[b-o2o2ed0px5] {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        margin-top: 3rem;
    }

    .button-box[b-o2o2ed0px5] {
        width: 12rem;
        position: relative;
        border-radius: 30px;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .toggle-btn[b-o2o2ed0px5] {
        padding: 12px 15px;
        cursor: pointer;
        background: transparent;
        border: 0;
        outline: none;
        position: relative;
        text-align: center;
        color: var(--dark-color);
        font-size: 1rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .toggle-btn-slider[b-o2o2ed0px5] {
        left: 0;
        top: 0;
        position: absolute;
        width: 6rem;
        height: 100%;
        background: var(--brand);
        border-radius: 30px;
        transition: 0.5s;
    }

    .toggle-icon[b-o2o2ed0px5] {
        margin-right: 0.5rem;
    }

    .toggle-right[b-o2o2ed0px5] {
        left: 6rem !important;
    }

    .light-text[b-o2o2ed0px5] {
        color: var(--text-color) !important;
    }

    .dark-text[b-o2o2ed0px5] {
        color: var(--dark-color) !important;
    }

    /**************** Signature ****************/

    .signature-canvas[b-o2o2ed0px5] {
        border-radius: 10px;
        border: 2px solid var(--light-color);
    }

    .signature-canvas:hover[b-o2o2ed0px5] {
        border: 2px solid var(--brand);
        cursor: crosshair;
    }

    .signature-image-container[b-o2o2ed0px5] {
        position: relative;
    }

    .signature-img[b-o2o2ed0px5] {
        border-radius: var(--border-radius);
        border: 2px solid var(--brand);
    }

    .remove-signature[b-o2o2ed0px5] {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        font-weight: 500;
        border-radius: var(--border-radius);
        padding: 0.65rem 1rem;
        position: absolute;
        white-space: nowrap;
        background: var(--light-color);
        color: var(--text-color);
        top: 0.75rem;
        right: 0.75rem;
        gap: 0.5rem;
    }
    
    .remove-signature:hover[b-o2o2ed0px5] {
        cursor: pointer;
        background: var(--error-color);
    }

    .remove-signature-icon[b-o2o2ed0px5] {
        font-size: 0.85rem;
        color: var(--text-color);
    }

    /**************** Type Signature ****************/

    .text-input-container[b-o2o2ed0px5] {
        height: 179px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .text-input[b-o2o2ed0px5] {
        width: 400px;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 2rem;
        font-weight: 500;
        border-bottom: 2px solid var(--light-color);
        font-family: 'Parisienne', cursive;
        text-align: center;
    }

    .text-input:focus[b-o2o2ed0px5] {
        border-bottom: 2px solid var(--brand);
    }

    .text-input[b-o2o2ed0px5]::placeholder {
        color: var(--light-color);
        font-family: "Nunito", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif, Arial;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Users/StatementUser.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {
    .statement-form-display[b-bhp84kyg2u] {
        width: 100%;
        font-size: 1.25rem;
        font-weight: 500;
        background: transparent;
        color: var(--text-color);
        padding: 0.75rem 0;
        border-radius: var(--border-radius);
        white-space: pre-wrap;
        opacity: 0.6;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/
@media screen and (min-width: 992px) and (max-width: 1625px) {
    .statement-form-display[b-bhp84kyg2u] {
        width: 100%;
        font-size: 1rem;
        font-weight: 500;
        background: transparent;
        color: var(--text-color);
        padding: 0.75rem 0;
        border-radius: var(--border-radius);
        white-space: pre-wrap;
        opacity: 0.6;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    .statement-form-display[b-bhp84kyg2u] {
        width: 100%;
        font-size: 1rem;
        font-weight: 500;
        background: transparent;
        color: var(--text-color);
        padding: 0.75rem 0;
        border-radius: var(--border-radius);
        white-space: pre-wrap;
        opacity: 0.6;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/Users/TableUser.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {

    .empty-spacing[b-jsd2nhw77s] {
        margin-top: 3rem;
    }

    .form-input-medium[b-jsd2nhw77s] {
        width: 100%;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1.25rem;
        font-weight: 500;
        opacity: 0.5;
    }

    .form-input-medium[b-jsd2nhw77s]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }
    
    .matrix-container[b-jsd2nhw77s] {
        display: flex;
        flex-direction: column;
        gap: 10px;
        position: relative;
    }

    .matrix-header[b-jsd2nhw77s] {
        display: flex;
        align-items: center;
        gap: 2rem;
        font-weight: bold;
        padding: 10px 2rem;
    }

    .matrix-row[b-jsd2nhw77s] {
        display: flex;
        align-items: center;
        background-color: var(--light-color);
        border-radius: var(--border-radius);
        padding: 1.5rem 2rem;
        gap: 2rem;
        position: relative;
    }

    .matrix-row-label[b-jsd2nhw77s] {
        width: 7rem;
        font-weight: bold;
        color: var(--text-color);
        font-size: 1rem;
    }

    .matrix-row-input[b-jsd2nhw77s] {
        width: 7rem;
        border: none;
        background: transparent;
        font-weight: bold;
        color: var(--text-color);
        font-size: 1rem;
        outline: none;
    }

    .matrix-column-label[b-jsd2nhw77s] {
        font-weight: bold;
        color: var(--text-color);
        font-size: 1rem;
        width: 7rem;
        text-align: center;
    }

    .matrix-column-input[b-jsd2nhw77s] {
        width: 7rem;
        border: none;
        background: transparent;
        font-weight: bold;
        color: var(--text-color);
        font-size: 1rem;
        outline: none;
        text-align: center;
    }

    .matrix-input[b-jsd2nhw77s] {
        width: 7rem;
        border: none;
        background: transparent;
        text-align: center;
        font-weight: 500;
        color: var(--text-color);
        font-size: 1rem;
        outline: none;
    }

    .matrix-input[b-jsd2nhw77s]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/
@media screen and (min-width: 992px) and (max-width: 1625px) {
    .empty-spacing[b-jsd2nhw77s] {
        margin-top: 2rem;
    }

    .form-input-medium[b-jsd2nhw77s] {
        width: 100%;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1rem;
        font-weight: 500;
        opacity: 0.5;
    }

    .form-input-medium[b-jsd2nhw77s]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }
    
    .matrix-container[b-jsd2nhw77s] {
        display: flex;
        flex-direction: column;
        gap: 10px;
        position: relative;
    }

    .matrix-header[b-jsd2nhw77s] {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        font-weight: bold;
        padding: 8px 1.5rem;
    }

    .matrix-row[b-jsd2nhw77s] {
        display: flex;
        align-items: center;
        background-color: var(--light-color);
        border-radius: var(--border-radius);
        padding: 1.25rem 1.5rem;
        gap: 1.5rem;
        position: relative;
    }

    .matrix-row-label[b-jsd2nhw77s] {
        width: 6rem;
        font-weight: bold;
        color: var(--text-color);
        font-size: 1rem;
    }

    .matrix-row-input[b-jsd2nhw77s] {
        width: 6rem;
        border: none;
        background: transparent;
        font-weight: bold;
        color: var(--text-color);
        font-size: 0.85rem;
        outline: none;
    }

    .matrix-column-label[b-jsd2nhw77s] {
        font-weight: bold;
        color: var(--text-color);
        font-size: 0.85rem;
        width: 6rem;
        text-align: center;
    }

    .matrix-column-input[b-jsd2nhw77s] {
        width: 6rem;
        border: none;
        background: transparent;
        font-weight: bold;
        color: var(--text-color);
        font-size: 0.85rem;
        outline: none;
        text-align: center;
    }

    .matrix-input[b-jsd2nhw77s] {
        width: 6rem;
        border: none;
        background: transparent;
        text-align: center;
        font-weight: 500;
        color: var(--text-color);
        font-size: 0.85rem;
        outline: none;
    }

    .matrix-input[b-jsd2nhw77s]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    .empty-spacing[b-jsd2nhw77s] {
        margin-top: 2rem;
    }

    .form-input-medium[b-jsd2nhw77s] {
        width: 100%;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1rem;
        font-weight: 500;
        opacity: 0.5;
    }

    .form-input-medium[b-jsd2nhw77s]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }
    
    .matrix-container[b-jsd2nhw77s] {
        display: flex;
        flex-direction: column;
        gap: 10px;
        position: relative;
    }

    .mobile-matrix-block[b-jsd2nhw77s] {
        background-color: var(--light-color);
        padding: 1rem;
        border-radius: var(--border-radius);
        margin-bottom: 1rem;
        color: var(--text-color);
        width: 100%;
        display: flex;
        align-items: start;
        justify-content: center;
        flex-direction: column;
        gap: 0.5rem;
    }

    .mobile-matrix-title[b-jsd2nhw77s] {
        font-size: 1rem;
        font-weight: bold;
        opacity: 0.5;
    }

    .mobile-matrix-field[b-jsd2nhw77s] {
        display: grid;
        grid-template-columns: 5rem 1fr;
        gap: 3rem;
        font-size: 0.85rem;
        align-items: center;
    }

    .mobile-matrix-field-value[b-jsd2nhw77s] {
        overflow-wrap: break-word;
        word-break: break-word;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Common/VerticalStatisticsCard.razor.rz.scp.css */
/**************************************/
/*                                    */
/*        Desktop + Laptop (base)     */
/*                                    */
/**************************************/

.vertical-statistics-card[b-mcpgyucqm2] {
    width: 13rem;
    height: fit-content;
    background: transparent;
    color: var(--text-color);
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: var(--border-radius);
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.vertical-statistics-label-group[b-mcpgyucqm2] {
    display: flex;
    flex-direction: row;
    margin: 0.1rem 0;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.vertical-statistics-metrics-group[b-mcpgyucqm2] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.vertical-statistics-data[b-mcpgyucqm2] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    z-index: 2;
}

.vertical-statistics-grade-overlay[b-mcpgyucqm2] {
    position: absolute;
    z-index: 1;
    color: var(--brand);
    font-size: 4rem;
    opacity: 0.4;
    bottom: -1.5rem;
}

.vertical-statistics-card-description[b-mcpgyucqm2] {
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    z-index: 2;
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    .vertical-statistics-card[b-mcpgyucqm2] {
        display: none;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Pages/Dashboard.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {

    @keyframes spaceDrift-b-yumd29e5r9 {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(-100vh);
        }
    }

    .background[b-yumd29e5r9] {
        min-height: 100vh;
        display: flex;
        overflow: auto;
        position: relative;
        background: radial-gradient(circle at top, #1c2944 0, #060b19 55%, #020309 100%);
        background-attachment: fixed;
    }

    .background[b-yumd29e5r9]::before,
    .background[b-yumd29e5r9]::after {
        content: "";
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 200vh;
        background: transparent;
        pointer-events: none;
        mix-blend-mode: screen;
    }

    .background[b-yumd29e5r9]::before {
        width: 1px;
        height: 1px;
        opacity: 0.8;
        animation: spaceDrift-b-yumd29e5r9 150s linear infinite;
        box-shadow: 10vw 10vh #fff, 10vw 110vh #fff, 15vw 80vh #fff, 15vw 180vh #fff, 35vw 12vh #fff, 35vw 112vh #fff, 80vw 22vh #fff, 80vw 122vh #fff, 70vw 80vh #fff, 70vw 180vh #fff, 12vw 95vh #fff, 12vw 195vh #fff, 45vw 45vh #fff, 45vw 145vh #fff, 95vw 95vh #fff, 95vw 195vh #fff, 22vw 33vh #fff, 22vw 133vh #fff, 65vw 12vh #fff, 65vw 112vh #fff, 11vw 65vh #fff, 11vw 165vh #fff, 88vw 44vh #fff, 88vw 144vh #fff, 55vw 55vh #fff, 55vw 155vh #fff, 30vw 90vh #fff, 30vw 190vh #fff, 60vw 30vh #fff, 60vw 130vh #fff, 25vw 25vh #fff, 25vw 125vh #fff, 75vw 75vh #fff, 75vw 175vh #fff, 40vw 60vh #fff, 40vw 160vh #fff, 98vw 50vh #fff, 98vw 150vh #fff, 05vw 05vh #fff, 05vw 105vh #fff;
    }

    .background[b-yumd29e5r9]::after {
        width: 2px;
        height: 2px;
        opacity: 0.6;
        animation: spaceDrift-b-yumd29e5r9 100s linear infinite;
        box-shadow: 20vw 20vh #b4dcff, 20vw 120vh #b4dcff, 85vw 15vh #fff, 85vw 115vh #fff, 40vw 80vh #b4dcff, 40vw 180vh #b4dcff, 60vw 60vh #fff, 60vw 160vh #fff, 10vw 90vh #b4dcff, 10vw 190vh #b4dcff, 90vw 40vh #fff, 90vw 140vh #fff, 30vw 50vh #b4dcff, 30vw 150vh #b4dcff, 75vw 85vh #fff, 75vw 185vh #fff;
    }

    .main-container[b-yumd29e5r9] {
        display: flex;
        max-width: 900px;
        margin: auto;
        height: 35rem;
        flex-direction: column;
        width: 100%;
    }

    /**************** Globe ****************/

    #globe-canvas[b-yumd29e5r9] {
        width: 100%;
        height: 100%;
        display: block;
        cursor: grab;
    }

    .globe-section[b-yumd29e5r9] {
        display: flex;
        align-items: stretch;
    }

    #globe-container[b-yumd29e5r9] {
        flex: 0 0 70%;
        height: 40rem;
        background: transparent;
    }

    .globe-latest-panel[b-yumd29e5r9] {
        flex: 0 0 35%;
        display: flex;
        flex-direction: column;
    }

    .globe-latest-header h4[b-yumd29e5r9] {
        margin-bottom: 0.5rem;
        color: var(--text-color);
        font-size: 1.25rem;
    }

    .globe-latest-list[b-yumd29e5r9] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .globe-latest-card[b-yumd29e5r9] {
        display: flex;
        justify-content: start;
        align-items: center;
        padding: 0.8rem;
        border-radius: 0.75rem;
        background: var(--background-color);
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .globe-latest-card:hover[b-yumd29e5r9] {
        border: 1px solid var(--brand);
        transition: 0.25s;
        cursor: pointer;
    }

    .globe-latest-main[b-yumd29e5r9] {
        width: 100%;
    }

    .globe-latest-title[b-yumd29e5r9] {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-color);
    }

    .globe-latest-meta[b-yumd29e5r9] {
        display: flex;
        justify-content: space-between;
        margin-top: 0.15rem;
        font-size: 0.8rem;
        color: var(--text-muted);
    }

    .globe-latest-tag-location[b-yumd29e5r9] {
        width: 35%;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: start;
        gap: 0.35rem;
    }

    .globe-latest-tag-device[b-yumd29e5r9] {
        width: 20%;
        white-space: nowrap;
    }

    .globe-latest-tag-time[b-yumd29e5r9] {
        width: 25%;
        white-space: nowrap;
    }

    /**************** Stats Cards ****************/

    .statistics-group[b-yumd29e5r9] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .statistics-row[b-yumd29e5r9] {
        display: flex;
        flex-direction: row;
    }

    .statistics-row[b-yumd29e5r9]::-webkit-scrollbar {
        height: 0px;
    }

    /**************** Bar Graph ****************/

    .statistics-graph[b-yumd29e5r9] {
        width: 100%;
        max-width: 850px;
        margin-bottom: 10rem;
    }

    .statistics-header-group[b-yumd29e5r9] {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
    }

    .tab-option-row[b-yumd29e5r9] {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
    }

    .tab-chip[b-yumd29e5r9] {
        border-radius: 50px;
        cursor: pointer;
        font-weight: 700;
        font-size: 0.75rem;
        position: relative;
        display: inline-flex;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        text-align: center;
        align-items: center;
        justify-content: center;
        width: fit-content;
        background: var(--light-color);
        color: var(--text-color);
    }

    .tab-chip:hover[b-yumd29e5r9] {
        background-color: var(--brand);
        color: var(--dark-color);
    }

    .tab-selected-chip[b-yumd29e5r9] {
        border-radius: 50px;
        cursor: pointer;
        font-weight: 700;
        font-size: 0.75rem;
        position: relative;
        display: inline-flex;
        text-align: center;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        align-items: center;
        justify-content: center;
        width: fit-content;
        background-color: var(--brand);
        color: var(--dark-color);
    }

    .bar-chart[b-yumd29e5r9] {
        margin-top: 0;
        padding: 0;
        border: 0;
        width: 100%;
        height: 300px;
        display: flex;
        justify-content: stretch;
        align-items: stretch;
        flex-direction: row;
        position: relative;
    }

    ul.bar-chart[b-yumd29e5r9], ol.bar-chart[b-yumd29e5r9] {
        list-style: none;
    }

    .max-label[b-yumd29e5r9] {
        color: var(--text-color);
        font-weight: bold;
        margin-right: 0.25rem;
        top: 0;
        position: sticky;
    }

    .min-label[b-yumd29e5r9] {
        color: var(--text-color);
        font-weight: bold;
        margin-right: 0.25rem;
        bottom: 0;
        position: absolute;
        left: 0;
    }

    .invisible-label[b-yumd29e5r9] {
        color: var(--text-color);
        font-weight: bold;
        margin-right: 0.25rem;
        top: 0;
        position: sticky;
        visibility: hidden;
    }

    .bar-chart-bar[b-yumd29e5r9] {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0;
        height: calc(100% * (var(--end)));
        background: var(--brand);
        border-radius: 15px;
        align-self: flex-end;
        margin-right: 4px;
        border: 2px solid var(--brand);
        width: 15px;
        transition: 1s;
    }

    .bar-chart-bar .tooltip[b-yumd29e5r9] {
        font-size: 0.75rem;
        color: var(--text-color);
        z-index: 100;
        font-weight: bold;
        white-space: nowrap;
        display: none;
        justify-content: center;
        margin-bottom: 2rem;
        top: -1.5rem;
        position: relative;
    }

    .bar-chart-bar:hover .tooltip[b-yumd29e5r9] {
        display: flex;
        opacity: 1;
    }

    .bar-chart-labels[b-yumd29e5r9] {
        margin-top: 0.25rem;
        width: 100%;
        display: flex;
        justify-content: stretch;
        align-items: stretch;
        flex-direction: row;
    }

    .bar-chart-label-item[b-yumd29e5r9] {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0;
        color: var(--text-color);
        font-weight: bold;
        white-space: nowrap;
        justify-content: center;
        display: flex;
        font-size: 0.75rem;
    }

    /**************** Animations ****************/

    @keyframes fadeIn-b-yumd29e5r9 {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .fade-in[b-yumd29e5r9] {
        animation: fadeIn-b-yumd29e5r9 1s ease-out forwards;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {
    @keyframes spaceDrift-b-yumd29e5r9 {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(-100vh);
        }
    }

    .background[b-yumd29e5r9] {
        min-height: 100vh;
        display: flex;
        overflow: auto;
        position: relative;
        background: radial-gradient(circle at top, #1c2944 0, #060b19 55%, #020309 100%);
        background-attachment: fixed;
    }

    .background[b-yumd29e5r9]::before,
    .background[b-yumd29e5r9]::after {
        content: "";
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 200vh;
        background: transparent;
        pointer-events: none;
        mix-blend-mode: screen;
    }

    .background[b-yumd29e5r9]::before {
        width: 1px;
        height: 1px;
        opacity: 0.8;
        animation: spaceDrift-b-yumd29e5r9 150s linear infinite;
        box-shadow: 10vw 10vh #fff, 10vw 110vh #fff, 15vw 80vh #fff, 15vw 180vh #fff, 35vw 12vh #fff, 35vw 112vh #fff, 80vw 22vh #fff, 80vw 122vh #fff, 70vw 80vh #fff, 70vw 180vh #fff, 12vw 95vh #fff, 12vw 195vh #fff, 45vw 45vh #fff, 45vw 145vh #fff, 95vw 95vh #fff, 95vw 195vh #fff, 22vw 33vh #fff, 22vw 133vh #fff, 65vw 12vh #fff, 65vw 112vh #fff, 11vw 65vh #fff, 11vw 165vh #fff, 88vw 44vh #fff, 88vw 144vh #fff, 55vw 55vh #fff, 55vw 155vh #fff, 30vw 90vh #fff, 30vw 190vh #fff, 60vw 30vh #fff, 60vw 130vh #fff, 25vw 25vh #fff, 25vw 125vh #fff, 75vw 75vh #fff, 75vw 175vh #fff, 40vw 60vh #fff, 40vw 160vh #fff, 98vw 50vh #fff, 98vw 150vh #fff, 05vw 05vh #fff, 05vw 105vh #fff;
    }

    .background[b-yumd29e5r9]::after {
        width: 2px;
        height: 2px;
        opacity: 0.6;
        animation: spaceDrift-b-yumd29e5r9 100s linear infinite;
        box-shadow: 20vw 20vh #b4dcff, 20vw 120vh #b4dcff, 85vw 15vh #fff, 85vw 115vh #fff, 40vw 80vh #b4dcff, 40vw 180vh #b4dcff, 60vw 60vh #fff, 60vw 160vh #fff, 10vw 90vh #b4dcff, 10vw 190vh #b4dcff, 90vw 40vh #fff, 90vw 140vh #fff, 30vw 50vh #b4dcff, 30vw 150vh #b4dcff, 75vw 85vh #fff, 75vw 185vh #fff;
    }

    .main-container[b-yumd29e5r9] {
        display: flex;
        max-width: 700px;
        margin: auto;
        height: 30rem;
        flex-direction: column;
        width: 100%;
    }

    /**************** Globe ****************/

    #globe-canvas[b-yumd29e5r9] {
        width: 100%;
        height: 100%;
        display: block;
        cursor: grab;
    }

    .globe-section[b-yumd29e5r9] {
        display: flex;
        align-items: stretch;
    }

    #globe-container[b-yumd29e5r9] {
        flex: 0 0 70%;
        height: 34rem;
        background: transparent;
    }

    .globe-latest-panel[b-yumd29e5r9] {
        flex: 0 0 35%;
        display: flex;
        flex-direction: column;
    }

    .globe-latest-header h4[b-yumd29e5r9] {
        margin-bottom: 0.5rem;
        color: var(--text-color);
        font-size: 1.25rem;
    }

    .globe-latest-list[b-yumd29e5r9] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .globe-latest-card[b-yumd29e5r9] {
        display: flex;
        justify-content: start;
        align-items: center;
        padding: 0.8rem;
        border-radius: 0.75rem;
        background: var(--background-color);
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .globe-latest-card:hover[b-yumd29e5r9] {
        border: 1px solid var(--brand);
        transition: 0.25s;
        cursor: pointer;
    }

    .globe-latest-main[b-yumd29e5r9] {
        width: 100%;
    }

    .globe-latest-title[b-yumd29e5r9] {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-color);
    }

    .globe-latest-meta[b-yumd29e5r9] {
        display: flex;
        justify-content: space-between;
        margin-top: 0.15rem;
        font-size: 0.7rem;
        color: var(--text-muted);
    }

    .globe-latest-tag-location[b-yumd29e5r9] {
        width: 35%;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: start;
        gap: 0.35rem;
    }

    .globe-latest-tag-device[b-yumd29e5r9] {
        width: 20%;
        white-space: nowrap;
    }

    .globe-latest-tag-time[b-yumd29e5r9] {
        width: 25%;
        white-space: nowrap;
    }

    /**************** Stats Cards ****************/

    .statistics-group[b-yumd29e5r9] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .statistics-row[b-yumd29e5r9] {
        display: flex;
        flex-direction: row;
    }

    .statistics-row[b-yumd29e5r9]::-webkit-scrollbar {
        height: 0px;
    }

    /**************** Bar Graph ****************/

    .statistics-graph[b-yumd29e5r9] {
        width: 100%;
        max-width: 750px;
        margin-bottom: 8rem;
    }

    .statistics-header-group[b-yumd29e5r9] {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
    }

    .tab-option-row[b-yumd29e5r9] {
        display: flex;
        flex-direction: row;
    }

    .tab-chip[b-yumd29e5r9] {
        border-radius: 50px;
        cursor: pointer;
        font-weight: 700;
        font-size: 0.75rem;
        position: relative;
        display: inline-flex;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        text-align: center;
        align-items: center;
        justify-content: center;
        width: fit-content;
        background: var(--light-color);
        color: var(--text-color);
    }

    .tab-chip:hover[b-yumd29e5r9] {
        background-color: var(--brand);
        color: var(--dark-color);
    }

    .tab-selected-chip[b-yumd29e5r9] {
        border-radius: 50px;
        cursor: pointer;
        font-weight: 700;
        font-size: 0.75rem;
        position: relative;
        display: inline-flex;
        text-align: center;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        align-items: center;
        justify-content: center;
        width: fit-content;
        background-color: var(--brand);
        color: var(--dark-color);
    }

    .status-group[b-yumd29e5r9] {
        display: flex;
        align-items: center;
        justify-content: start;
    }

    .bar-chart[b-yumd29e5r9] {
        margin-top: 0;
        padding: 0;
        border: 0;
        width: 100%;
        height: 275px;
        display: flex;
        justify-content: stretch;
        align-items: stretch;
        flex-direction: row;
        position: relative;
    }

    ul.bar-chart[b-yumd29e5r9], ol.bar-chart[b-yumd29e5r9] {
        list-style: none;
    }

    .max-label[b-yumd29e5r9] {
        color: var(--text-color);
        font-weight: bold;
        margin-right: 0.25rem;
        top: 0;
        position: sticky;
        font-size: 0.75rem;
    }

    .min-label[b-yumd29e5r9] {
        color: var(--text-color);
        font-weight: bold;
        margin-right: 0.25rem;
        bottom: 0;
        position: absolute;
        left: 0;
        font-size: 0.75rem;
    }

    .invisible-label[b-yumd29e5r9] {
        color: var(--text-color);
        font-weight: bold;
        margin-right: 0.25rem;
        top: 0;
        position: sticky;
        visibility: hidden;
    }

    .bar-chart-bar[b-yumd29e5r9] {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0;
        height: calc(100% * (var(--end)));
        background: var(--brand);
        border-radius: 8px;
        align-self: flex-end;
        margin-right: 4px;
        border: 2px solid var(--brand);
        width: 15px;
        transition: 1s;
        cursor: pointer;
    }

    .bar-chart-bar .tooltip[b-yumd29e5r9] {
        font-size: 0.65rem;
        color: var(--text-color);
        z-index: 100;
        font-weight: bold;
        white-space: nowrap;
        display: none;
        justify-content: center;
        top: -1.25rem;
        position: relative;
    }

    .bar-chart-bar:hover .tooltip[b-yumd29e5r9] {
        display: flex;
        opacity: 1;
    }

    .bar-chart-labels[b-yumd29e5r9] {
        margin-top: 0.25rem;
        width: 100%;
        display: flex;
        justify-content: stretch;
        align-items: stretch;
        flex-direction: row;
    }

    .bar-chart-label-item[b-yumd29e5r9] {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0;
        color: var(--text-color);
        font-weight: bold;
        white-space: nowrap;
        justify-content: center;
        display: flex;
        font-size: 0.5rem;
    }

    /**************** Animations ****************/

    @keyframes fadeIn-b-yumd29e5r9 {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .fade-in[b-yumd29e5r9] {
        animation: fadeIn-b-yumd29e5r9 1s ease-out forwards;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    @keyframes spaceDrift-b-yumd29e5r9 {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(-100vh);
        }
    }

    .background[b-yumd29e5r9] {
        min-height: 100vh;
        display: flex;
        overflow: auto;
        position: relative;
        background: radial-gradient(circle at top, #1c2944 0, #060b19 55%, #020309 100%);
        background-attachment: fixed;
    }

    .background[b-yumd29e5r9]::before,
    .background[b-yumd29e5r9]::after {
        content: "";
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 200vh;
        background: transparent;
        pointer-events: none;
        mix-blend-mode: screen;
    }

    .background[b-yumd29e5r9]::before {
        width: 1px;
        height: 1px;
        opacity: 0.8;
        animation: spaceDrift-b-yumd29e5r9 150s linear infinite;
        box-shadow: 10vw 10vh #fff, 10vw 110vh #fff, 15vw 80vh #fff, 15vw 180vh #fff, 35vw 12vh #fff, 35vw 112vh #fff, 80vw 22vh #fff, 80vw 122vh #fff, 70vw 80vh #fff, 70vw 180vh #fff, 12vw 95vh #fff, 12vw 195vh #fff, 45vw 45vh #fff, 45vw 145vh #fff, 95vw 95vh #fff, 95vw 195vh #fff, 22vw 33vh #fff, 22vw 133vh #fff, 65vw 12vh #fff, 65vw 112vh #fff, 11vw 65vh #fff, 11vw 165vh #fff, 88vw 44vh #fff, 88vw 144vh #fff, 55vw 55vh #fff, 55vw 155vh #fff, 30vw 90vh #fff, 30vw 190vh #fff, 60vw 30vh #fff, 60vw 130vh #fff, 25vw 25vh #fff, 25vw 125vh #fff, 75vw 75vh #fff, 75vw 175vh #fff, 40vw 60vh #fff, 40vw 160vh #fff, 98vw 50vh #fff, 98vw 150vh #fff, 05vw 05vh #fff, 05vw 105vh #fff;
    }

    .background[b-yumd29e5r9]::after {
        width: 2px;
        height: 2px;
        opacity: 0.6;
        animation: spaceDrift-b-yumd29e5r9 100s linear infinite;
        box-shadow: 20vw 20vh #b4dcff, 20vw 120vh #b4dcff, 85vw 15vh #fff, 85vw 115vh #fff, 40vw 80vh #b4dcff, 40vw 180vh #b4dcff, 60vw 60vh #fff, 60vw 160vh #fff, 10vw 90vh #b4dcff, 10vw 190vh #b4dcff, 90vw 40vh #fff, 90vw 140vh #fff, 30vw 50vh #b4dcff, 30vw 150vh #b4dcff, 75vw 85vh #fff, 75vw 185vh #fff;
    }

    .main-container[b-yumd29e5r9] {
        width: 100%;
        max-width: 550px;
        padding: 1rem;
        height: auto;
        margin-top: 6rem;
        margin-right: auto;
        margin-left: auto;
    }

    /**************** Stats Cards ****************/

    .statistics-group[b-yumd29e5r9] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
    }

    .statistics-row[b-yumd29e5r9] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
        margin-bottom: 2rem;
        width: 100%;
    }

    .statistics-row[b-yumd29e5r9]::-webkit-scrollbar {
        height: 0px;
    }

    /**************** Globe ****************/

    #globe-canvas[b-yumd29e5r9] {
        width: 100%;
        height: 100%;
        display: block;
    }

    .globe-section[b-yumd29e5r9] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    #globe-container[b-yumd29e5r9] {
        width: 100%;
        height: 25rem;
        background: transparent;
    }

    .globe-latest-panel[b-yumd29e5r9] {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .globe-latest-header h4[b-yumd29e5r9] {
        margin-bottom: 0.5rem;
        color: var(--text-color);
        font-size: 1.25rem;
    }

    .globe-latest-list[b-yumd29e5r9] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 8rem;
    }

    .globe-latest-card[b-yumd29e5r9] {
        display: flex;
        justify-content: start;
        align-items: center;
        padding: 0.8rem;
        border-radius: 0.75rem;
        background: var(--background-color);
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .globe-latest-card:hover[b-yumd29e5r9] {
        border: 1px solid var(--brand);
        transition: 0.25s;
        cursor: pointer;
    }

    .globe-latest-main[b-yumd29e5r9] {
        width: 100%;
    }

    .globe-latest-title[b-yumd29e5r9] {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-color);
    }

    .globe-latest-meta[b-yumd29e5r9] {
        display: flex;
        justify-content: space-between;
        margin-top: 0.15rem;
        font-size: 0.8rem;
        color: var(--text-muted);
    }

    .globe-latest-tag-location[b-yumd29e5r9] {
        width: 35%;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: start;
        gap: 0.35rem;
    }

    .globe-latest-tag-device[b-yumd29e5r9] {
        width: 20%;
        white-space: nowrap;
    }

    .globe-latest-tag-time[b-yumd29e5r9] {
        width: 25%;
        white-space: nowrap;
    }

    /**************** Bar Graph ****************/

    .statistics-graph[b-yumd29e5r9] {
        width: 100%;
    }

    .statistics-header-group[b-yumd29e5r9] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        padding-bottom: 0.25rem;
        scroll-snap-type: x proximity;
        margin-bottom: 1rem;
    }

    .statistics-header-group[b-yumd29e5r9]::-webkit-scrollbar {
        height: 0px;
    }

    .statistics-header-group[b-yumd29e5r9] {
        scrollbar-width: none;
    }

    .tab-option-row[b-yumd29e5r9] {
        display: inline-flex;
        flex-wrap: nowrap;
        gap: 0.5rem;
        scroll-snap-align: start;
        flex: 0 0 auto;
    }

    .tab-chip[b-yumd29e5r9] {
        border-radius: 50px;
        cursor: pointer;
        font-weight: 700;
        font-size: 0.75rem;
        position: relative;
        display: inline-flex;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        text-align: center;
        align-items: center;
        justify-content: center;
        width: fit-content;
        background: var(--light-color);
        color: var(--text-color);
    }

    .tab-chip:hover[b-yumd29e5r9] {
        background-color: var(--brand);
        color: var(--dark-color);
    }

    .tab-selected-chip[b-yumd29e5r9] {
        border-radius: 50px;
        cursor: pointer;
        font-weight: 700;
        font-size: 0.75rem;
        position: relative;
        display: inline-flex;
        text-align: center;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        align-items: center;
        justify-content: center;
        width: fit-content;
        background-color: var(--brand);
        color: var(--dark-color);
    }

    .bar-chart[b-yumd29e5r9] {
        display: none;
    }

    /**************** Animations ****************/

    @keyframes fadeIn-b-yumd29e5r9 {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .fade-in[b-yumd29e5r9] {
        animation: fadeIn-b-yumd29e5r9 1s ease-out forwards;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Pages/Edit.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {

    @keyframes spaceDrift-b-5gamlmwu3p {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(-100vh);
        }
    }

    .background[b-5gamlmwu3p] {
        min-height: 100vh;
        display: flex;
        overflow: auto;
        position: relative;
        background: radial-gradient(circle at top, #1c2944 0, #060b19 55%, #020309 100%);
        background-attachment: fixed;
    }

    .background[b-5gamlmwu3p]::before,
    .background[b-5gamlmwu3p]::after {
        content: "";
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 200vh;
        background: transparent;
        pointer-events: none;
        mix-blend-mode: screen;
    }

    .background[b-5gamlmwu3p]::before {
        width: 1px;
        height: 1px;
        opacity: 0.8;
        animation: spaceDrift-b-5gamlmwu3p 150s linear infinite;
        box-shadow: 10vw 10vh #fff, 10vw 110vh #fff, 15vw 80vh #fff, 15vw 180vh #fff, 35vw 12vh #fff, 35vw 112vh #fff, 80vw 22vh #fff, 80vw 122vh #fff, 70vw 80vh #fff, 70vw 180vh #fff, 12vw 95vh #fff, 12vw 195vh #fff, 45vw 45vh #fff, 45vw 145vh #fff, 95vw 95vh #fff, 95vw 195vh #fff, 22vw 33vh #fff, 22vw 133vh #fff, 65vw 12vh #fff, 65vw 112vh #fff, 11vw 65vh #fff, 11vw 165vh #fff, 88vw 44vh #fff, 88vw 144vh #fff, 55vw 55vh #fff, 55vw 155vh #fff, 30vw 90vh #fff, 30vw 190vh #fff, 60vw 30vh #fff, 60vw 130vh #fff, 25vw 25vh #fff, 25vw 125vh #fff, 75vw 75vh #fff, 75vw 175vh #fff, 40vw 60vh #fff, 40vw 160vh #fff, 98vw 50vh #fff, 98vw 150vh #fff, 05vw 05vh #fff, 05vw 105vh #fff;
    }

    .background[b-5gamlmwu3p]::after {
        width: 2px;
        height: 2px;
        opacity: 0.6;
        animation: spaceDrift-b-5gamlmwu3p 100s linear infinite;
        box-shadow: 20vw 20vh #b4dcff, 20vw 120vh #b4dcff, 85vw 15vh #fff, 85vw 115vh #fff, 40vw 80vh #b4dcff, 40vw 180vh #b4dcff, 60vw 60vh #fff, 60vw 160vh #fff, 10vw 90vh #b4dcff, 10vw 190vh #b4dcff, 90vw 40vh #fff, 90vw 140vh #fff, 30vw 50vh #b4dcff, 30vw 150vh #b4dcff, 75vw 85vh #fff, 75vw 185vh #fff;
    }

    /**************** Animations ****************/

    @keyframes fadeIn-b-5gamlmwu3p {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .fade-in[b-5gamlmwu3p] {
        animation: fadeIn-b-5gamlmwu3p 1s ease-out forwards;
    }

    /**************** Container ****************/

    .main-container[b-5gamlmwu3p] {
        display: flex;
        max-width: 1200px;
        margin: auto;
        height: 40rem;
        flex-direction: column;
        width: 100%;
    }

    /**************** Steps ****************/

    .previous-step[b-5gamlmwu3p] {
        background-color: transparent;
        color: white;
        padding: 1rem;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        font-weight: 500;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        width: 6.5rem;
        margin-bottom: 0.5rem;
    }

    .previous-step:hover[b-5gamlmwu3p] {
        background: var(--dark-color);
        transition: 0.5s;
    }

    .previous-button-icon[b-5gamlmwu3p] {
        margin-right: 0.5rem;
    }

    .next-step[b-5gamlmwu3p] {
        background-color: var(--light-color);
        color: white;
        padding: 1rem;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        font-weight: 500;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        width: 6.5rem;
        margin-top: 1rem;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.3);
    }

    .next-step:hover[b-5gamlmwu3p] {
        background-color: var(--brand);
        color: var(--dark-color);
        transition: 0.5s;
    }

    .next-button-icon[b-5gamlmwu3p] {
        margin-left: 0.5rem;
    }

    /**************** Form Name and Description ****************/

    .form-name-row[b-5gamlmwu3p] {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 1rem;
    }

    .form-name[b-5gamlmwu3p] {
        font-size: 1.75rem;
        font-weight: 500;
        color: var(--text-color);
    }

    .form-description[b-5gamlmwu3p] {
        font-size: 1rem;
        font-weight: 300;
        color: var(--text-color);
    }

    /**************** Workbench ****************/

    .form-input-large[b-5gamlmwu3p] {
        width: 100%;
        font-size: 1rem;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1.75rem;
        font-weight: 500;
    }

    .form-input-large[b-5gamlmwu3p]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    .form-input-large.textarea[b-5gamlmwu3p] {
        resize: none;
        overflow: hidden;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        line-height: 1.2;
        min-height: 1rem;
    }

    .form-input-medium[b-5gamlmwu3p] {
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1.25rem;
        font-weight: 500;
        opacity: 0.5;
    }

    .form-input-medium[b-5gamlmwu3p]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    .error-message[b-5gamlmwu3p] {
        color: var(--error-color);
        font-weight: 500;
        font-size: 0.75rem;
        margin-top: 0.5rem;
    }

    .form-input-small[b-5gamlmwu3p] {
        width: 100%;
        font-size: 1rem;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-muted);
        text-align: left;
        font-size: 1rem;
        font-weight: 300;
    }

    .form-input-small[b-5gamlmwu3p]::placeholder {
        color: var(--text-muted);
        opacity: 0.3;
    }

    .form-name-and-description-column[b-5gamlmwu3p] {
        display: flex;
        flex-direction: column;
        width: 75%;
    }

    .workbench-content[b-5gamlmwu3p] {
        width: 100%;
        /* max-width: 1200px; */
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    /**************** Tabs ****************/

    .tab-option-row[b-5gamlmwu3p] {
        display: flex;
        flex-direction: row;
        gap: 0.75rem;
    }

    .tab-chip[b-5gamlmwu3p] {
        border-radius: 50rem;
        color: var(--text-color);
        cursor: pointer;
        font-weight: 700;
        font-size: 1rem;
        padding: 0.75rem 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--light-color);
        gap: 0.5rem;
    }

    .tab-chip:hover[b-5gamlmwu3p] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .tab-selected-chip[b-5gamlmwu3p] {
        border-radius: 50rem;
        color: var(--dark-color);
        cursor: pointer;
        font-weight: 700;
        font-size: 1rem;
        padding: 0.75rem 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--brand);
        gap: 0.5rem;
    }

    /**************** Avatars ****************/

    .avatar-screen[b-5gamlmwu3p] {
        display: flex;
        gap: 1.25rem;
        height: calc(100vh - 5rem);
        padding: 1rem 1.5rem;
        box-sizing: border-box;
    }

    .avatar-list[b-5gamlmwu3p] {
        flex: 0 0 38%;
        display: flex;
        flex-direction: column;
        min-width: 280px;
    }

    .avatar-list h2[b-5gamlmwu3p] {
        margin-bottom: 0.75rem;
    }

    .avatar-grid[b-5gamlmwu3p] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 0.65rem;
        overflow-y: auto;
        padding-right: 0.25rem;
    }

    .avatar-tile[b-5gamlmwu3p] {
        background: var(--light-color);
        border: 1px solid transparent;
        border-radius: 1rem;
        padding: 0.5rem 0.4rem 0.6rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.35rem;
        cursor: pointer;
        transition: 0.2s ease;
        color: var(--text-color);
    }

    .avatar-tile img[b-5gamlmwu3p] {
        width: 90px;
        height: 90px;
        object-fit: cover;
        border-radius: 0.85rem;
        background: #0f111a;
    }

    .avatar-tile .avatar-name[b-5gamlmwu3p] {
        font-weight: 600;
        font-size: 0.8rem;
        text-align: center;
    }

    .avatar-tile .avatar-desc[b-5gamlmwu3p] {
        font-size: 0.65rem;
        text-align: center;
        color: var(--text-muted);
    }

    .avatar-tile .avatar-tier[b-5gamlmwu3p] {
        font-size: 0.6rem;
        background: rgba(34, 227, 255, 0.12);
        border: 1px solid var(--brand);
        border-radius: 999px;
        padding: 0.1rem 0.6rem;
        margin-top: auto;
    }

    .avatar-tile:hover[b-5gamlmwu3p] {
        border-color: var(--brand);
    }

    .avatar-tile.is-selected[b-5gamlmwu3p] {
        border: 1px solid var(--brand);
    }

    .avatar-viewer[b-5gamlmwu3p] {
        flex: 0 0 60%;
        border-radius: 1.25rem;
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .stage[b-5gamlmwu3p] {
        flex: 1;
        min-height: 360px;
        position: relative;
    }

    /**************** Avatar Options ****************/

    .tone-chips-row[b-5gamlmwu3p] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 0.75rem;
    }

    .tone-chip[b-5gamlmwu3p] {
        border: 1px solid var(--light-color);
        background: var(--light-color);
        color: var(--text-muted);
        border-radius: 50rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
        line-height: 1;
        cursor: pointer;
        outline: none;
    }

    .tone-chip:hover[b-5gamlmwu3p] {
        border-color: var(--brand);
    }

    .tone-chip--selected[b-5gamlmwu3p] {
        background: var(--brand);
        border-color: var(--brand);
        color: var(--dark-color);
    }

    .filter-subtext[b-5gamlmwu3p] {
        font-size: 0.6rem;
        color: var(--text-color);
    }

    .filter-subtext-row[b-5gamlmwu3p] {
        margin-top: 0.25rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
    }

    .avatar-tile.is-disabled[b-5gamlmwu3p] {
        opacity: 0.4;
        cursor: not-allowed;
        pointer-events: none;
    }

    .avatar-disabled-message[b-5gamlmwu3p] {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
    }

    .icon[b-5gamlmwu3p] {
        font-size: 6rem;
        color: var(--error-color);
    }

    .title[b-5gamlmwu3p] {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-color);
    }

    .subtitle[b-5gamlmwu3p] {
        font-size: 1.25rem;
        font-weight: 500;
        color: var(--text-muted);
        margin-top: 0.25rem;
    }

    /**************** Setup ****************/

    .workbench-title-group[b-5gamlmwu3p] {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 4fr 1fr;
        gap: 1rem;
    }

    .workbench-main-group[b-5gamlmwu3p] {
        width: 100%;
        height: 35rem;
        display: grid;
        grid-template-columns: 1fr 4fr 1fr;
        gap: 1rem;
    }

    .workbench-group-1[b-5gamlmwu3p] {
        width: 100%;
        height: 100%;
        padding-left: 2rem;
    }

    .workbench-group-2[b-5gamlmwu3p] {
        width: 100%;
        height: 100%;
    }

    .workbench-group-3[b-5gamlmwu3p] {
        width: 100%;
        height: 100%;
        padding-right: 2rem;
    }

    .group-title-column[b-5gamlmwu3p] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
    }

    .group-title[b-5gamlmwu3p] {
        color: var(--text-color);
        font-weight: 700;
        font-size: 1.25rem;
        white-space: nowrap;
    }

    .group-description[b-5gamlmwu3p] {
        color: var(--text-muted);
        font-weight: 300;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    .questions-scroll[b-5gamlmwu3p] {
        display: flex;
        flex-direction: column;
        align-items: start;
        min-height: 20rem;
        margin-bottom: 2rem;
    }

    .question-group[b-5gamlmwu3p] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        border-radius: var(--border-radius);
        padding: 0.75rem 1rem;
        background: transparent;
        margin-top: 0.5rem;
    }

    .question-group:hover[b-5gamlmwu3p] {
        background: var(--light-color);
        cursor: pointer;
    }

    .selected-question-group[b-5gamlmwu3p] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        border-radius: var(--border-radius);
        padding: 0.75rem 1rem;
        background: transparent;
        margin-top: 0.5rem;
        background: var(--light-color);
    }

    .question-icon[b-5gamlmwu3p] {
        color: var(--text-color);
        font-size: 1.5rem;
        margin-right: 0.5rem;
        width: 1.5rem;
    }

    .question-description[b-5gamlmwu3p] {
        color: var(--text-color);
        font-size: 0.85rem;
        width: 75%;
    }

    .action-button-group[b-5gamlmwu3p] {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 1rem;
    }

    .add-rule-button-group[b-5gamlmwu3p] {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .delete-button[b-5gamlmwu3p] {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: transparent;
        color: var(--text-color);
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }

    .delete-button:hover[b-5gamlmwu3p] {
        background: var(--error-color);
        cursor: pointer;
    }

    .action-button[b-5gamlmwu3p] {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: transparent;
        color: var(--text-color);
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }

    .action-button:hover[b-5gamlmwu3p] {
        background: var(--brand);
        color: var(--dark-color);
        cursor: pointer;
    }

    .endings-scroll[b-5gamlmwu3p] {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        align-items: start;
        margin-bottom: 2rem;
    }

    .settings-scroll[b-5gamlmwu3p] {
        display: flex;
        flex-direction: column;
        align-items: start;
        height: 20rem;
        margin-bottom: 2rem;
    }

    .functionality-scroll[b-5gamlmwu3p] {
        display: flex;
        flex-direction: column;
        align-items: start;
        height: 10rem;
        margin-bottom: 10rem;
    }

    /**************** Settings ****************/

    .settings-group[b-5gamlmwu3p] {
        background: transparent;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 1rem;
        width: 100%;
    }

    .settings-group-column[b-5gamlmwu3p] {
        background: transparent;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-top: 1rem;
        width: 100%;
    }

    .settings-column[b-5gamlmwu3p] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
    }

    .settings-item-title[b-5gamlmwu3p] {
        font-weight: 500;
        font-size: 0.85rem;
        color: var(--text-color);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
    }

    .settings-description[b-5gamlmwu3p] {
        font-size: 0.75rem;
        width: 100%;
        color: var(--text-muted);
        font-weight: 300;
    }

    .settings-value[b-5gamlmwu3p] {
        color: var(--dark-color);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 0.85rem;
    }

    /**************** Toggle Switch ****************/

    .switch-container[b-5gamlmwu3p] {
        display: flex;
        align-items: center;
    }

    .switch[b-5gamlmwu3p] {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 24px;
        margin-right: 6px;
    }

    .switch input[b-5gamlmwu3p] {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider[b-5gamlmwu3p] {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--light-color);
        transition: 0.4s;
        border-radius: 24px;
    }

    .slider[b-5gamlmwu3p]:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 4px;
        bottom: 3px;
        background-color: var(--dark-color);
        transition: 0.4s;
        border-radius: 50%;
    }

    input:checked + .slider[b-5gamlmwu3p] {
        background-color: var(--brand);
    }

    input:checked + .slider[b-5gamlmwu3p]:before {
        transform: translateX(24px);
    }

    .slider.round[b-5gamlmwu3p] {
        border-radius: 24px;
    }

    /**************** Question Types Dropdown ****************/

    .filter-title-group[b-5gamlmwu3p] {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: start;
        gap: 0.5rem;
    }

    .filter-column[b-5gamlmwu3p] {
        background: var(--light-color);
        border-radius: var(--border-radius);
        height: 3rem;
        color: var(--text-color);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        font-size: 0.85rem;
        font-weight: 500;
        cursor: pointer;
        padding: 1rem;
        margin-top: 1rem;
    }

    .filter-column:hover[b-5gamlmwu3p] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .filter-column-disabled[b-5gamlmwu3p] {
        background: var(--dark-color);
        border-radius: var(--border-radius);
        height: 3rem;
        color: var(--text-color);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        font-size: 0.85rem;
        font-weight: 500;
        padding: 1rem;
        margin-top: 1rem;
        opacity: 0.5;
    }

    .dropdown-container[b-5gamlmwu3p] {
        position: relative;
        width: 100%;
        max-width: 30rem;
    }

    /**************** Short-answer Questions ****************/

    .column[b-5gamlmwu3p] {
        display: flex;
        align-items: start;
        flex-direction: column;
        justify-content: center;
        width: 40rem;
        margin: auto;
        margin-top: 5rem;
        padding-bottom: 12rem;
    }

    .question-number-row[b-5gamlmwu3p] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 2.5rem;
    }

    .question-number[b-5gamlmwu3p] {
        color: var(--dark-color);
        background: var(--brand);
        padding: 0.4rem;
        font-size: 0.6rem;
        border-radius: var(--border-radius);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
    }

    .empty-spacing[b-5gamlmwu3p] {
        margin-top: 3rem;
    }

    .small-empty-spacing[b-5gamlmwu3p] {
        margin-top: 1rem;
    }

    /**************** Endings Modal ****************/

    .modal[b-5gamlmwu3p] {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.75);
        display: block;
        z-index: 3;
    }

    .modal-content[b-5gamlmwu3p] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: var(--dark-color);
        padding-top: 3rem;
        padding-bottom: 2rem;
        padding-left: 2rem;
        padding-right: 2rem;
        border-radius: var(--border-radius);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        z-index: 3;
        width: 25rem;
        height: fit-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .expanded[b-5gamlmwu3p] {
        width: 30rem;
        padding-top: 1rem !important;
    }

    .integrations-size[b-5gamlmwu3p] {
        width: 50rem;
        padding-top: 1rem !important;
    }

    .fit[b-5gamlmwu3p] {
        width: fit-content;
        padding-top: 1rem !important;
    }

    .step-title-group[b-5gamlmwu3p] {
        display: flex;
        flex-direction: column;
        align-items: start;
        width: 100%;
        padding-top: 1rem;
    }

    .step-title[b-5gamlmwu3p] {
        /*font-size: 1.75rem;*/
        font-size: 1.5rem;
        color: var(--text-color);
        font-weight: 700;
    }

    .step-description[b-5gamlmwu3p] {
        /*margin-top: 0.25rem;*/
        font-size: 0.75rem;
        width: 100%;
        color: var(--text-muted);
        display: block;
    }

    .listing-group-modal[b-5gamlmwu3p] {
        margin-top: 0.5rem;
        width: 100%;
        overflow-y: auto;
        max-height: 30rem;
    }

    .listing-card[b-5gamlmwu3p] {
        height: fit-content;
        width: 100%;
        border-radius: var(--border-radius);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem;
    }

    .listing-card:hover[b-5gamlmwu3p] {
        background: var(--light-color);
        cursor: pointer;
    }

    .avatar-group[b-5gamlmwu3p] {
        display: flex;
        align-items: center;
        justify-content: start;
        width: 90%;
    }

    .listing-details-group[b-5gamlmwu3p] {
        width: 77%;
    }

    .listing-icon[b-5gamlmwu3p] {
        color: var(--text-color);
        font-size: 2.5rem;
        margin-right: 0.75rem;
    }

    .listing-title[b-5gamlmwu3p] {
        color: var(--text-color);
        font-size: 1rem;
        font-weight: 400;
        /*margin-bottom: 0.5rem;*/
        white-space: nowrap;
    }

    .listing-details-row[b-5gamlmwu3p] {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .listing-subtitle[b-5gamlmwu3p] {
        color: var(--text-muted);
        font-size: 0.75rem;
        font-weight: 300;
        /*margin-bottom: 0.5rem;*/
        white-space: nowrap;
    }

    .row[b-5gamlmwu3p] {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .selected-icon[b-5gamlmwu3p] {
        font-size: 1.75rem;
        color: var(--brand);
    }

    .confirmation-icon[b-5gamlmwu3p] {
        font-size: 5rem;
        color: var(--brand);
        padding-bottom: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal-message[b-5gamlmwu3p] {
        color: var(--text-color);
        font-weight: 500;
        text-align: center;
        font-size: 20px;
        margin-bottom: 1rem;
    }

    .modal-options[b-5gamlmwu3p] {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 1rem;
        width: 100%;
        gap: 1rem;
    }

    .modal-save[b-5gamlmwu3p] {
        background-color: transparent;
        color: var(--text-color);
        padding: 1rem 1.5rem;
        border: 2px solid var(--brand);
        border-radius: 50px;
        cursor: pointer;
        font-weight: 600;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        width: 50%;
    }

    .modal-save:hover[b-5gamlmwu3p] {
        background-color: var(--brand);
        color: var(--dark-color);
    }

    .modal-cancel[b-5gamlmwu3p] {
        background-color: transparent;
        color: var(--text-color);
        padding: 1rem 1.5rem;
        border: 2px solid transparent;
        border-radius: 50px;
        cursor: pointer;
        font-weight: 600;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        width: 50%;
    }

    .modal-cancel:hover[b-5gamlmwu3p] {
        background-color: var(--light-color);
        color: var(--text-color);
    }

    .check-icon[b-5gamlmwu3p] {
        margin-right: 1rem;
    }

    /**************** Fixed Action Buttons ****************/

    .workbench-icon-group[b-5gamlmwu3p] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5rem;
        position: fixed;
        bottom: 10%;
        margin-right: auto;
        margin-left: auto;
    }

    .workbench-icon[b-5gamlmwu3p] {
        font-size: 2.5rem;
        color: var(--text-color);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .workbench-icon:hover[b-5gamlmwu3p] {
        color: var(--brand);
        transition: 0.5s;
        cursor: pointer;
    }

    .workbench-icon .user-tooltip[b-5gamlmwu3p] {
        font-size: 0.75rem;
        color: var(--dark-color);
        z-index: 2;
        font-weight: bold;
        white-space: normal;
        display: none;
        justify-content: center;
        position: absolute;
        width: fit-content;
        background: var(--brand);
        padding: 0.5rem 1rem;
        border-radius: 10px;
        margin-top: -6.5rem;
        text-align: center;
        margin-left: 0rem;
        white-space: nowrap;
    }

    .workbench-icon .user-tooltip[b-5gamlmwu3p]::before {
        content: "";
        position: absolute;
        top: 80%;
        left: 50%;
        border-width: 15px;
        border-style: solid;
        border-color: var(--brand) transparent transparent transparent;
        transform: translateX(-50%);
    }

    .workbench-icon:hover .user-tooltip[b-5gamlmwu3p] {
        display: flex;
        opacity: 1;
    }

    /**************** Ending ****************/

    .ending-group[b-5gamlmwu3p] {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .ending-icon[b-5gamlmwu3p] {
        font-size: 8rem;
        color: var(--brand);
    }

    .ending-title[b-5gamlmwu3p] {
        width: 100%;
        font-size: 2rem;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: center;
        font-weight: 700;
    }

    .ending-title[b-5gamlmwu3p]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    .ending-subtitle[b-5gamlmwu3p] {
        width: 100%;
        font-size: 1.5rem;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: center;
        font-weight: 500;
        opacity: 0.5;
        margin-top: 0.25rem;
    }

    .ending-subtitle[b-5gamlmwu3p]::placeholder {
        color: var(--text-color);
        opacity: 0.35;
    }

    /**************** Themes ****************/

    .background-list[b-5gamlmwu3p] {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
        margin-top: 0.5rem;
    }

    .background-tile[b-5gamlmwu3p] {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0.5rem 0.75rem;
        border-radius: var(--border-radius);
        border: 1px solid transparent;
        background: var(--light-color);
        cursor: pointer;
        outline: none;
        text-align: left;
        transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
    }

    .background-tile:hover[b-5gamlmwu3p] {
        border-color: var(--brand);
    }

    .background-tile.is-selected[b-5gamlmwu3p] {
        border-color: var(--brand);
        box-shadow: 0 0 0 1px rgba(34, 227, 255, 0.25);
    }

    .background-tile.is-disabled[b-5gamlmwu3p] {
        opacity: 0.5;
        pointer-events: none;
        cursor: not-allowed;
    }

    .background-disabled-message[b-5gamlmwu3p] {
        color: var(--text-muted);
        font-size: 0.9rem;
        margin-top: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .background-thumb[b-5gamlmwu3p] {
        width: 140px;
        height: 80px;
        border-radius: 10px;
        overflow: hidden;
        flex-shrink: 0;
        margin-right: 0.75rem;
        background: #101320;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .background-thumb img[b-5gamlmwu3p] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .background-text[b-5gamlmwu3p] {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
    }

    .background-name[b-5gamlmwu3p] {
        color: var(--text-color);
        font-size: 0.8rem;
        font-weight: 600;
    }

    .background-description[b-5gamlmwu3p] {
        color: var(--text-muted);
        font-size: 0.65rem;
    }

    .background-preview[b-5gamlmwu3p] {
        margin-top: 0.5rem;
        position: relative;
        display: inline-block;
    }

    .background-preview-image[b-5gamlmwu3p] {
        width: 100%;
        object-fit: cover;
        max-height: 220px;
        border-radius: var(--border-radius);
        border: 1px solid var(--brand);
    }

    .delete-image-button[b-5gamlmwu3p] {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        background: var(--light-color);
        color: var(--text-color);
        border: none;
        border-radius: 50%;
        width: 2rem;
        height: 2rem;
        font-size: 1.1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: 0.25s;
    }

    .delete-image-button:hover[b-5gamlmwu3p] {
        background: var(--error-color);
    }

    /**************** Logic ****************/

    .logic-layout[b-5gamlmwu3p] {
        display: flex;
        gap: 8rem;
        height: 35rem;
        padding-top: 2rem;
    }

    .logic-questions-list[b-5gamlmwu3p] {
        width: 19rem;
        background: transparent;
        padding-bottom: 20rem;
        height: fit-content;
    }

    .logic-sidebar-title[b-5gamlmwu3p] {
        font-size: 0.9rem;
        font-weight: 600;
        text-transform: uppercase;
        margin-bottom: 0.75rem;
        color: var(--text-muted);
        letter-spacing: 0.04em;
    }

    .logic-question-node[b-5gamlmwu3p] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 0.25rem;
    }

    .logic-question-item[b-5gamlmwu3p] {
        display: flex;
        gap: 0.75rem;
        padding: 0.5rem 0.75rem;
        border-radius: var(--border-radius);
        cursor: pointer;
        margin-bottom: 0.25rem;
        background: var(--light-color);
        transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
        border: 1px solid transparent;
        height: fit-content;
    }

    .logic-question-item:hover[b-5gamlmwu3p] {
        border-color: var(--brand);
    }

    .logic-question-item.active[b-5gamlmwu3p] {
        border: 1px solid var(--brand);
        box-shadow: 0 0 0 1px rgba(34, 227, 255, 0.25);
    }

    .logic-question-index[b-5gamlmwu3p] {
        font-weight: 600;
        font-size: 1.5rem;
        color: var(--brand);
        margin-top: 0.15rem;
        min-width: 1.5rem;
        text-align: center;
    }

    .logic-question-main[b-5gamlmwu3p] {
        flex: 1;
    }

    .logic-question-text[b-5gamlmwu3p] {
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--text-color);
    }

    .logic-question-meta[b-5gamlmwu3p] {
        font-size: 0.75rem;
        color: var(--text-muted);
    }

    .logic-flow-arrow[b-5gamlmwu3p] {
        position: relative;
        height: 48px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }

    .logic-flow-arrow[b-5gamlmwu3p]::before {
        content: "";
        display: block;
        width: 2px;
        height: 48px;
        background: #2f3755;
        border-radius: 50rem;
    }

    .logic-editor[b-5gamlmwu3p] {
        flex: 1;
        /*padding: 1.5rem;*/
        background: transparent;
        height: fit-content;
        border-radius: var(--border-radius);
        width: 38rem;
        padding-bottom: 20rem;
    }

    .logic-question-header[b-5gamlmwu3p] {
        margin-bottom: 1rem;
    }

    .logic-question-label[b-5gamlmwu3p] {
        font-size: 0.75rem;
        color: var(--text-muted);
        letter-spacing: 0.04em;
    }

    .logic-question-title[b-5gamlmwu3p] {
        color: var(--text-color);
    }

    .logic-question-subtext[b-5gamlmwu3p] {
        font-size: 0.85rem;
        color: var(--text-muted);
    }

    .logic-rules-container[b-5gamlmwu3p] {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .logic-rule-card[b-5gamlmwu3p] {
        border-radius: var(--border-radius);
        padding: 0.75rem 1rem;
        background: var(--dark-color);
    }

    .logic-rule-header[b-5gamlmwu3p] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .logic-rule-title[b-5gamlmwu3p] {
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--text-color);
    }

    .logic-if-block[b-5gamlmwu3p],
    .logic-then-block[b-5gamlmwu3p] {
        margin-top: 0.5rem;
    }

    .logic-if-label[b-5gamlmwu3p],
    .logic-then-label[b-5gamlmwu3p] {
        font-size: 0.8rem;
        font-weight: 600;
        margin-bottom: 0.25rem;
        color: var(--text-muted);
        letter-spacing: 0.04em;
    }

    .logic-condition-row[b-5gamlmwu3p],
    .logic-then-row[b-5gamlmwu3p] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .logic-condition-label[b-5gamlmwu3p] {
        color: var(--text-muted);
        font-size: 0.8rem;
        white-space: nowrap;
    }

    .logic-input[b-5gamlmwu3p] {
        padding: 0.35rem 0.5rem;
        border: none;
        font-size: 0.85rem;
        background: transparent;
        color: var(--text-color);
        outline: none;
        min-height: 32px;
        border-bottom: 2px solid var(--brand);
        outline: none;
        height: 3rem;
        width: 12rem;
    }

    .logic-fallback[b-5gamlmwu3p] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .logic-empty[b-5gamlmwu3p],
    .logic-empty-state[b-5gamlmwu3p] {
        padding: 1rem;
        color: var(--text-muted);
    }

    .logic-empty-state h3[b-5gamlmwu3p] {
        color: var(--text-color);
    }

    .logic-hint[b-5gamlmwu3p] {
        font-size: 0.8rem;
        color: var(--text-muted);
    }

    .logic-join-row[b-5gamlmwu3p] {
        display: flex;
        justify-content: center;
        margin: 1rem 0;
    }

    .logic-join-chip-group[b-5gamlmwu3p] {
        display: inline-flex;
        gap: 0.35rem;
        padding: 0.1rem;
        border-radius: 50rem;
        background: var(--light-color);
    }

    .logic-join-chip[b-5gamlmwu3p] {
        border: none;
        padding: 0.2rem 0.7rem;
        border-radius: 999px;
        font-size: 0.8rem;
        background: transparent;
        color: var(--text-muted);
        cursor: pointer;
    }

    .logic-join-chip.active[b-5gamlmwu3p] {
        background: var(--brand);
        color: #001018;
        font-weight: 600;
    }

    .logic-join-chip:not(.active):hover[b-5gamlmwu3p] {
        color: var(--text-color);
    }

    .logic-question-status[b-5gamlmwu3p] {
        margin-top: 0.35rem;
        font-size: 0.7rem;
        color: var(--text-muted);
    }

    .logic-badge[b-5gamlmwu3p] {
        display: inline-flex;
        align-items: center;
        padding: 0.1rem 0.5rem;
        border-radius: 999px;
        border: 1px solid transparent;
        white-space: nowrap;
    }

    .logic-badge-active[b-5gamlmwu3p] {
        background: rgba(34, 227, 255, 0.12);
        border-color: var(--brand);
        color: var(--brand);
        font-weight: 600;
    }

    .logic-badge-empty[b-5gamlmwu3p] {
        background: rgba(184, 191, 212, 0.08);
        border-color: rgba(184, 191, 212, 0.3);
        color: var(--text-muted);
    }

    .logic-badge-disabled[b-5gamlmwu3p] {
        background: rgba(255, 0, 0, 0.06);
        border-color: rgba(255, 0, 0, 0.4);
        color: #ff6b6b;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {

   @keyframes spaceDrift-b-5gamlmwu3p {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(-100vh);
        }
    }

    .background[b-5gamlmwu3p] {
        min-height: 100vh;
        display: flex;
        overflow: auto;
        position: relative;
        background: radial-gradient(circle at top, #1c2944 0, #060b19 55%, #020309 100%);
        background-attachment: fixed;
    }

    .background[b-5gamlmwu3p]::before,
    .background[b-5gamlmwu3p]::after {
        content: "";
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 200vh;
        background: transparent;
        pointer-events: none;
        mix-blend-mode: screen;
    }

    .background[b-5gamlmwu3p]::before {
        width: 1px;
        height: 1px;
        opacity: 0.8;
        animation: spaceDrift-b-5gamlmwu3p 150s linear infinite;
        box-shadow: 10vw 10vh #fff, 10vw 110vh #fff, 15vw 80vh #fff, 15vw 180vh #fff, 35vw 12vh #fff, 35vw 112vh #fff, 80vw 22vh #fff, 80vw 122vh #fff, 70vw 80vh #fff, 70vw 180vh #fff, 12vw 95vh #fff, 12vw 195vh #fff, 45vw 45vh #fff, 45vw 145vh #fff, 95vw 95vh #fff, 95vw 195vh #fff, 22vw 33vh #fff, 22vw 133vh #fff, 65vw 12vh #fff, 65vw 112vh #fff, 11vw 65vh #fff, 11vw 165vh #fff, 88vw 44vh #fff, 88vw 144vh #fff, 55vw 55vh #fff, 55vw 155vh #fff, 30vw 90vh #fff, 30vw 190vh #fff, 60vw 30vh #fff, 60vw 130vh #fff, 25vw 25vh #fff, 25vw 125vh #fff, 75vw 75vh #fff, 75vw 175vh #fff, 40vw 60vh #fff, 40vw 160vh #fff, 98vw 50vh #fff, 98vw 150vh #fff, 05vw 05vh #fff, 05vw 105vh #fff;
    }

    .background[b-5gamlmwu3p]::after {
        width: 2px;
        height: 2px;
        opacity: 0.6;
        animation: spaceDrift-b-5gamlmwu3p 100s linear infinite;
        box-shadow: 20vw 20vh #b4dcff, 20vw 120vh #b4dcff, 85vw 15vh #fff, 85vw 115vh #fff, 40vw 80vh #b4dcff, 40vw 180vh #b4dcff, 60vw 60vh #fff, 60vw 160vh #fff, 10vw 90vh #b4dcff, 10vw 190vh #b4dcff, 90vw 40vh #fff, 90vw 140vh #fff, 30vw 50vh #b4dcff, 30vw 150vh #b4dcff, 75vw 85vh #fff, 75vw 185vh #fff;
    }

    /**************** Animations ****************/

    @keyframes fadeIn-b-5gamlmwu3p {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .fade-in[b-5gamlmwu3p] {
        animation: fadeIn-b-5gamlmwu3p 1s ease-out forwards;
    }

    /**************** Container ****************/

    .main-container[b-5gamlmwu3p] {
        display: flex;
        max-width: 1200px;
        margin: auto;
        height: 40rem;
        flex-direction: column;
        width: 100%;
    }

    /**************** Steps ****************/

    .previous-step[b-5gamlmwu3p] {
        background-color: transparent;
        color: white;
        padding: 1rem;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        font-weight: 500;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        width: 6.5rem;
        margin-bottom: 0.5rem;
    }

    .previous-step:hover[b-5gamlmwu3p] {
        background: var(--dark-color);
        transition: 0.5s;
    }

    .previous-button-icon[b-5gamlmwu3p] {
        margin-right: 0.5rem;
    }

    .next-step[b-5gamlmwu3p] {
        background-color: var(--light-color);
        color: white;
        padding: 1rem;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        font-weight: 500;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        width: 6.5rem;
        margin-top: 1rem;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.3);
    }

    .next-step:hover[b-5gamlmwu3p] {
        background-color: var(--brand);
        color: var(--dark-color);
        transition: 0.5s;
    }

    .next-button-icon[b-5gamlmwu3p] {
        margin-left: 0.5rem;
    }

    /**************** Form Name and Description ****************/

    .form-name-row[b-5gamlmwu3p] {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 1rem;
    }

    .form-name[b-5gamlmwu3p] {
        font-size: 1.75rem;
        font-weight: 500;
        color: var(--text-color);
    }

    .form-description[b-5gamlmwu3p] {
        font-size: 1rem;
        font-weight: 300;
        color: var(--text-color);
    }

    /**************** Workbench ****************/

    .form-input-large[b-5gamlmwu3p] {
        width: 100%;
        font-size: 1rem;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1.5rem;
        font-weight: 500;
    }

    .form-input-large[b-5gamlmwu3p]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    .form-input-large.textarea[b-5gamlmwu3p] {
        resize: none;
        overflow: hidden;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        line-height: 1.2;
        min-height: 1rem;
    }

    .form-input-medium[b-5gamlmwu3p] {
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1.15rem;
        font-weight: 500;
        opacity: 0.5;
    }

    .form-input-medium[b-5gamlmwu3p]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    .error-message[b-5gamlmwu3p] {
        color: var(--error-color);
        font-weight: 500;
        font-size: 0.75rem;
        margin-top: 0.5rem;
    }

    .form-input-small[b-5gamlmwu3p] {
        width: 100%;
        font-size: 1rem;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-muted);
        text-align: left;
        font-size: 0.85rem;
        font-weight: 300;
    }

    .form-input-small[b-5gamlmwu3p]::placeholder {
        color: var(--text-muted);
        opacity: 0.3;
    }

    .form-name-and-description-column[b-5gamlmwu3p] {
        display: flex;
        flex-direction: column;
        width: 75%;
    }

    .workbench-content[b-5gamlmwu3p] {
        width: 100%;
        /* max-width: 1200px; */
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    /**************** Tabs ****************/

    .tab-option-row[b-5gamlmwu3p] {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
    }

    .tab-chip[b-5gamlmwu3p] {
        border-radius: 50rem;
        color: var(--text-color);
        cursor: pointer;
        font-weight: 700;
        font-size: 0.85rem;
        padding: 0.65rem 0.85rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--light-color);
        gap: 0.35rem;
    }

    .tab-chip:hover[b-5gamlmwu3p] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .tab-selected-chip[b-5gamlmwu3p] {
        border-radius: 50rem;
        color: var(--dark-color);
        cursor: pointer;
        font-weight: 700;
        font-size: 0.85rem;
        padding: 0.65rem 0.85rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--brand);
        gap: 0.35rem;
    }

    /**************** Avatars ****************/

    .avatar-screen[b-5gamlmwu3p] {
        display: flex;
        gap: 0.5rem;
        height: calc(100vh - 5rem);
        padding: 1rem 1.5rem;
        box-sizing: border-box;
    }

    .avatar-list[b-5gamlmwu3p] {
        flex: 0 0 35%;
        display: flex;
        flex-direction: column;
        min-width: 280px;
    }

    .avatar-list h2[b-5gamlmwu3p] {
        margin-bottom: 0.75rem;
    }

    .avatar-grid[b-5gamlmwu3p] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 0.5rem;
        overflow-y: auto;
        padding-right: 0.25rem;
    }

    .avatar-tile[b-5gamlmwu3p] {
        background: var(--light-color);
        border: 1px solid transparent;
        border-radius: 1rem;
        padding: 0.5rem 0.4rem 0.6rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.15rem;
        cursor: pointer;
        transition: 0.2s ease;
        color: var(--text-color);
    }

    .avatar-tile img[b-5gamlmwu3p] {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 0.85rem;
        background: #0f111a;
    }

    .avatar-tile .avatar-name[b-5gamlmwu3p] {
        font-weight: 600;
        font-size: 0.8rem;
        text-align: center;
    }

    .avatar-tile .avatar-desc[b-5gamlmwu3p] {
        font-size: 0.65rem;
        text-align: center;
        color: var(--text-muted);
    }

    .avatar-tile .avatar-tier[b-5gamlmwu3p] {
        font-size: 0.6rem;
        background: rgba(34, 227, 255, 0.12);
        border: 1px solid var(--brand);
        border-radius: 999px;
        padding: 0.1rem 0.6rem;
        margin-top: auto;
    }

    .avatar-tile:hover[b-5gamlmwu3p] {
        border-color: var(--brand);
    }

    .avatar-tile.is-selected[b-5gamlmwu3p] {
        border: 1px solid var(--brand);
    }

    .avatar-viewer[b-5gamlmwu3p] {
        flex: 0 0 65%;
        border-radius: 1.25rem;
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .stage[b-5gamlmwu3p] {
        flex: 1;
        min-height: 360px;
        position: relative;
    }

    /**************** Avatar Options ****************/

    .tone-chips-row[b-5gamlmwu3p] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 0.75rem;
    }

    .tone-chip[b-5gamlmwu3p] {
        border: 1px solid var(--light-color);
        background: var(--light-color);
        color: var(--text-muted);
        border-radius: 50rem;
        padding: 0.5rem 0.65rem;
        font-size: 0.75rem;
        line-height: 1;
        cursor: pointer;
        outline: none;
    }

    .tone-chip:hover[b-5gamlmwu3p] {
        border-color: var(--brand);
    }

    .tone-chip--selected[b-5gamlmwu3p] {
        background: var(--brand);
        border-color: var(--brand);
        color: var(--dark-color);
    }

    .filter-subtext[b-5gamlmwu3p] {
        font-size: 0.6rem;
        color: var(--text-color);
    }

    .filter-subtext-row[b-5gamlmwu3p] {
        margin-top: 0.25rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
    }

    .avatar-tile.is-disabled[b-5gamlmwu3p] {
        opacity: 0.4;
        cursor: not-allowed;
        pointer-events: none;
    }

    .avatar-disabled-message[b-5gamlmwu3p] {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
    }

    .icon[b-5gamlmwu3p] {
        font-size: 6rem;
        color: var(--error-color);
    }

    .title[b-5gamlmwu3p] {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-color);
    }

    .subtitle[b-5gamlmwu3p] {
        font-size: 1.25rem;
        font-weight: 500;
        color: var(--text-muted);
        margin-top: 0.25rem;
    }

    /**************** Setup ****************/

    .workbench-title-group[b-5gamlmwu3p] {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 4fr 1fr;
        gap: 1rem;
    }

    .workbench-main-group[b-5gamlmwu3p] {
        width: 100%;
        height: 35rem;
        display: grid;
        grid-template-columns: 1fr 4fr 1fr;
        gap: 1rem;
    }

    .workbench-group-1[b-5gamlmwu3p] {
        width: 100%;
        height: 100%;
        padding-left: 1rem;
    }

    .workbench-group-2[b-5gamlmwu3p] {
        width: 100%;
        height: 100%;
    }

    .workbench-group-3[b-5gamlmwu3p] {
        width: 100%;
        height: 100%;
        padding-right: 1rem;
    }

    .group-title-column[b-5gamlmwu3p] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
    }

    .group-title[b-5gamlmwu3p] {
        color: var(--text-color);
        font-weight: 700;
        font-size: 1.15rem;
        white-space: nowrap;
    }

    .group-description[b-5gamlmwu3p] {
        color: var(--text-muted);
        font-weight: 300;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    .questions-scroll[b-5gamlmwu3p] {
        display: flex;
        flex-direction: column;
        align-items: start;
        min-height: 20rem;
        margin-bottom: 2rem;
    }

    .question-group[b-5gamlmwu3p] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        border-radius: var(--border-radius);
        padding: 0.5rem 0.85rem;
        background: transparent;
        margin-top: 0.35rem;
    }

    .question-group:hover[b-5gamlmwu3p] {
        background: var(--light-color);
        cursor: pointer;
    }

    .selected-question-group[b-5gamlmwu3p] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        border-radius: var(--border-radius);
        padding: 0.5rem 0.85rem;
        background: transparent;
        margin-top: 0.35rem;
        background: var(--light-color);
    }

    .question-icon[b-5gamlmwu3p] {
        color: var(--text-color);
        font-size: 1.25rem;
        margin-right: 0.5rem;
        width: 1.5rem;
    }

    .question-description[b-5gamlmwu3p] {
        color: var(--text-color);
        font-size: 0.75rem;
        width: 75%;
    }

    .action-button-group[b-5gamlmwu3p] {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 1rem;
    }

    .add-rule-button-group[b-5gamlmwu3p] {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .delete-button[b-5gamlmwu3p] {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: transparent;
        color: var(--text-color);
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }

    .delete-button:hover[b-5gamlmwu3p] {
        background: var(--error-color);
        cursor: pointer;
    }

    .action-button[b-5gamlmwu3p] {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: transparent;
        color: var(--text-color);
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }

    .action-button:hover[b-5gamlmwu3p] {
        background: var(--brand);
        color: var(--dark-color);
        cursor: pointer;
    }

    .endings-scroll[b-5gamlmwu3p] {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        align-items: start;
        margin-bottom: 2rem;
    }

    .settings-scroll[b-5gamlmwu3p] {
        display: flex;
        flex-direction: column;
        align-items: start;
        height: 20rem;
        margin-bottom: 2rem;
    }

    .functionality-scroll[b-5gamlmwu3p] {
        display: flex;
        flex-direction: column;
        align-items: start;
        height: 10rem;
        margin-bottom: 10rem;
    }

    /**************** Settings ****************/

    .settings-group[b-5gamlmwu3p] {
        background: transparent;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 1rem;
        width: 100%;
    }

    .settings-group-column[b-5gamlmwu3p] {
        background: transparent;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-top: 1rem;
        width: 100%;
    }

    .settings-column[b-5gamlmwu3p] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
    }

    .settings-item-title[b-5gamlmwu3p] {
        font-weight: 500;
        font-size: 0.8rem;
        color: var(--text-color);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
    }

    .settings-description[b-5gamlmwu3p] {
        font-size: 0.65rem;
        width: 100%;
        color: var(--text-muted);
        font-weight: 300;
    }

    .settings-value[b-5gamlmwu3p] {
        color: var(--dark-color);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 0.85rem;
    }

    /**************** Toggle Switch ****************/

    .switch-container[b-5gamlmwu3p] {
        display: flex;
        align-items: center;
    }

    .switch[b-5gamlmwu3p] {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 24px;
        margin-right: 6px;
    }

    .switch input[b-5gamlmwu3p] {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider[b-5gamlmwu3p] {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--light-color);
        transition: 0.4s;
        border-radius: 24px;
    }

    .slider[b-5gamlmwu3p]:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 4px;
        bottom: 3px;
        background-color: var(--dark-color);
        transition: 0.4s;
        border-radius: 50%;
    }

    input:checked + .slider[b-5gamlmwu3p] {
        background-color: var(--brand);
    }

    input:checked + .slider[b-5gamlmwu3p]:before {
        transform: translateX(24px);
    }

    .slider.round[b-5gamlmwu3p] {
        border-radius: 24px;
    }

    /**************** Question Types Dropdown ****************/

    .filter-title-group[b-5gamlmwu3p] {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: start;
        gap: 0.5rem;
    }

    .filter-column[b-5gamlmwu3p] {
        background: var(--light-color);
        border-radius: var(--border-radius);
        height: 3rem;
        color: var(--text-color);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        font-size: 0.85rem;
        font-weight: 500;
        cursor: pointer;
        padding: 1rem;
        margin-top: 1rem;
    }

    .filter-column:hover[b-5gamlmwu3p] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .filter-column-disabled[b-5gamlmwu3p] {
        background: var(--dark-color);
        border-radius: var(--border-radius);
        height: 3rem;
        color: var(--text-color);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        font-size: 0.85rem;
        font-weight: 500;
        padding: 1rem;
        margin-top: 1rem;
        opacity: 0.5;
    }

    .dropdown-container[b-5gamlmwu3p] {
        position: relative;
        width: 100%;
        max-width: 30rem;
    }

    /**************** Short-answer Questions ****************/

    .column[b-5gamlmwu3p] {
        display: flex;
        align-items: start;
        flex-direction: column;
        justify-content: center;
        width: 35rem;
        margin: auto;
        margin-top: 5rem;
        padding-bottom: 12rem;
    }

    .question-number-row[b-5gamlmwu3p] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 2.5rem;
    }

    .question-number[b-5gamlmwu3p] {
        color: var(--dark-color);
        background: var(--brand);
        padding: 0.4rem;
        font-size: 0.6rem;
        border-radius: var(--border-radius);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
    }

    .empty-spacing[b-5gamlmwu3p] {
        margin-top: 3rem;
    }

    .small-empty-spacing[b-5gamlmwu3p] {
        margin-top: 1rem;
    }

    /**************** Endings Modal ****************/

    .modal[b-5gamlmwu3p] {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.75);
        display: block;
        z-index: 3;
    }

    .modal-content[b-5gamlmwu3p] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: var(--dark-color);
        padding-top: 3rem;
        padding-bottom: 2rem;
        padding-left: 2rem;
        padding-right: 2rem;
        border-radius: var(--border-radius);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        z-index: 3;
        width: 25rem;
        height: fit-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .expanded[b-5gamlmwu3p] {
        width: 30rem;
        padding-top: 1rem !important;
    }

    .integrations-size[b-5gamlmwu3p] {
        width: 50rem;
        padding-top: 1rem !important;
    }

    .fit[b-5gamlmwu3p] {
        width: fit-content;
        padding-top: 1rem !important;
    }

    .step-title-group[b-5gamlmwu3p] {
        display: flex;
        flex-direction: column;
        align-items: start;
        width: 100%;
        padding-top: 1rem;
    }

    .step-title[b-5gamlmwu3p] {
        /*font-size: 1.75rem;*/
        font-size: 1.5rem;
        color: var(--text-color);
        font-weight: 700;
    }

    .step-description[b-5gamlmwu3p] {
        /*margin-top: 0.25rem;*/
        font-size: 0.75rem;
        width: 100%;
        color: var(--text-muted);
        display: block;
    }

    .listing-group-modal[b-5gamlmwu3p] {
        margin-top: 0.5rem;
        width: 100%;
        overflow-y: auto;
        max-height: 30rem;
    }

    .listing-card[b-5gamlmwu3p] {
        height: fit-content;
        width: 100%;
        border-radius: var(--border-radius);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem;
    }

    .listing-card:hover[b-5gamlmwu3p] {
        background: var(--light-color);
        cursor: pointer;
    }

    .avatar-group[b-5gamlmwu3p] {
        display: flex;
        align-items: center;
        justify-content: start;
        width: 90%;
    }

    .listing-details-group[b-5gamlmwu3p] {
        width: 77%;
    }

    .listing-icon[b-5gamlmwu3p] {
        color: var(--text-color);
        font-size: 2.5rem;
        margin-right: 0.75rem;
    }

    .listing-title[b-5gamlmwu3p] {
        color: var(--text-color);
        font-size: 1rem;
        font-weight: 400;
        /*margin-bottom: 0.5rem;*/
        white-space: nowrap;
    }

    .listing-details-row[b-5gamlmwu3p] {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .listing-subtitle[b-5gamlmwu3p] {
        color: var(--text-muted);
        font-size: 0.75rem;
        font-weight: 300;
        /*margin-bottom: 0.5rem;*/
        white-space: nowrap;
    }

    .row[b-5gamlmwu3p] {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .selected-icon[b-5gamlmwu3p] {
        font-size: 1.75rem;
        color: var(--brand);
    }

    .confirmation-icon[b-5gamlmwu3p] {
        font-size: 5rem;
        color: var(--brand);
        padding-bottom: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal-message[b-5gamlmwu3p] {
        color: var(--text-color);
        font-weight: 500;
        text-align: center;
        font-size: 20px;
        margin-bottom: 1rem;
    }

    .modal-options[b-5gamlmwu3p] {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 1rem;
        width: 100%;
    }

    .modal-save[b-5gamlmwu3p] {
        background-color: transparent;
        color: var(--text-color);
        padding: 0.85rem 1.25rem;
        border: 2px solid var(--brand);
        border-radius: 50px;
        cursor: pointer;
        margin-left: 0.5rem;
        font-weight: 600;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        width: 50%;
    }

    .modal-save:hover[b-5gamlmwu3p] {
        background-color: var(--brand);
        color: var(--dark-color);
    }

    .modal-cancel[b-5gamlmwu3p] {
        background-color: transparent;
        color: var(--text-color);
        padding: 0.85rem 1.25rem;
        border: 2px solid transparent;
        border-radius: 50px;
        cursor: pointer;
        margin-right: 0.5rem;
        font-weight: 600;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        width: 50%;
    }

    .modal-cancel:hover[b-5gamlmwu3p] {
        background-color: var(--light-color);
        color: var(--text-color);
    }

    .check-icon[b-5gamlmwu3p] {
        margin-right: 0.75rem;
    }

    /**************** Fixed Action Buttons ****************/

    .workbench-icon-group[b-5gamlmwu3p] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5rem;
        position: fixed;
        bottom: 10%;
        margin-right: auto;
        margin-left: auto;
    }

    .workbench-icon[b-5gamlmwu3p] {
        font-size: 2.5rem;
        color: var(--text-color);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .workbench-icon:hover[b-5gamlmwu3p] {
        color: var(--brand);
        transition: 0.5s;
        cursor: pointer;
    }

    .workbench-icon .user-tooltip[b-5gamlmwu3p] {
        font-size: 0.75rem;
        color: var(--dark-color);
        z-index: 2;
        font-weight: bold;
        white-space: normal;
        display: none;
        justify-content: center;
        position: absolute;
        width: fit-content;
        background: var(--brand);
        padding: 0.5rem 1rem;
        border-radius: 10px;
        margin-top: -6.5rem;
        text-align: center;
        margin-left: 0rem;
        white-space: nowrap;
    }

    .workbench-icon .user-tooltip[b-5gamlmwu3p]::before {
        content: "";
        position: absolute;
        top: 80%;
        left: 50%;
        border-width: 15px;
        border-style: solid;
        border-color: var(--brand) transparent transparent transparent;
        transform: translateX(-50%);
    }

    .workbench-icon:hover .user-tooltip[b-5gamlmwu3p] {
        display: flex;
        opacity: 1;
    }

    /**************** Ending ****************/

    .ending-group[b-5gamlmwu3p] {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .ending-icon[b-5gamlmwu3p] {
        font-size: 8rem;
        color: var(--brand);
    }

    .ending-title[b-5gamlmwu3p] {
        width: 100%;
        font-size: 2rem;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: center;
        font-weight: 700;
    }

    .ending-title[b-5gamlmwu3p]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    .ending-subtitle[b-5gamlmwu3p] {
        width: 100%;
        font-size: 1.5rem;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: center;
        font-weight: 500;
        opacity: 0.5;
        margin-top: 0.25rem;
    }

    .ending-subtitle[b-5gamlmwu3p]::placeholder {
        color: var(--text-color);
        opacity: 0.35;
    }

    /**************** Themes ****************/

    .background-list[b-5gamlmwu3p] {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
        margin-top: 0.5rem;
    }

    .background-tile[b-5gamlmwu3p] {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0.5rem 0.65rem;
        border-radius: var(--border-radius);
        border: 1px solid transparent;
        background: var(--light-color);
        cursor: pointer;
        outline: none;
        text-align: left;
        transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
    }

    .background-tile:hover[b-5gamlmwu3p] {
        border-color: var(--brand);
    }

    .background-tile.is-selected[b-5gamlmwu3p] {
        border-color: var(--brand);
        box-shadow: 0 0 0 1px rgba(34, 227, 255, 0.25);
    }

    .background-tile.is-disabled[b-5gamlmwu3p] {
        opacity: 0.5;
        pointer-events: none;
        cursor: not-allowed;
    }

    .background-disabled-message[b-5gamlmwu3p] {
        color: var(--text-muted);
        font-size: 0.9rem;
        margin-top: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .background-thumb[b-5gamlmwu3p] {
        width: 90px;
        height: 70px;
        border-radius: 10px;
        overflow: hidden;
        flex-shrink: 0;
        margin-right: 0.5rem;
        background: #101320;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .background-thumb img[b-5gamlmwu3p] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .background-text[b-5gamlmwu3p] {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
    }

    .background-name[b-5gamlmwu3p] {
        color: var(--text-color);
        font-size: 0.75rem;
        font-weight: 600;
    }

    .background-description[b-5gamlmwu3p] {
        color: var(--text-muted);
        font-size: 0.6rem;
    }

    .background-preview[b-5gamlmwu3p] {
        margin-top: 0.5rem;
        position: relative;
        display: inline-block;
    }

    .background-preview-image[b-5gamlmwu3p] {
        width: 100%;
        object-fit: cover;
        max-height: 220px;
        border-radius: var(--border-radius);
        border: 1px solid var(--brand);
    }

    .delete-image-button[b-5gamlmwu3p] {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        background: var(--light-color);
        color: var(--text-color);
        border: none;
        border-radius: 50%;
        width: 2rem;
        height: 2rem;
        font-size: 1.1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: 0.25s;
    }

    .delete-image-button:hover[b-5gamlmwu3p] {
        background: var(--error-color);
    }

    /**************** Logic ****************/

    .logic-layout[b-5gamlmwu3p] {
        display: flex;
        gap: 8rem;
        height: 35rem;
        padding-top: 2rem;
    }

    .logic-questions-list[b-5gamlmwu3p] {
        width: 19rem;
        background: transparent;
        padding-bottom: 20rem;
        height: fit-content;
    }

    .logic-sidebar-title[b-5gamlmwu3p] {
        font-size: 0.9rem;
        font-weight: 600;
        text-transform: uppercase;
        margin-bottom: 0.75rem;
        color: var(--text-muted);
        letter-spacing: 0.04em;
    }

    .logic-question-node[b-5gamlmwu3p] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 0.25rem;
    }

    .logic-question-item[b-5gamlmwu3p] {
        display: flex;
        gap: 0.75rem;
        padding: 0.5rem 0.75rem;
        border-radius: var(--border-radius);
        cursor: pointer;
        margin-bottom: 0.25rem;
        background: var(--light-color);
        transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
        border: 1px solid transparent;
        height: fit-content;
    }

    .logic-question-item:hover[b-5gamlmwu3p] {
        border-color: var(--brand);
    }

    .logic-question-item.active[b-5gamlmwu3p] {
        border: 1px solid var(--brand);
        box-shadow: 0 0 0 1px rgba(34, 227, 255, 0.25);
    }

    .logic-question-index[b-5gamlmwu3p] {
        font-weight: 600;
        font-size: 1.5rem;
        color: var(--brand);
        margin-top: 0.15rem;
        min-width: 1.5rem;
        text-align: center;
    }

    .logic-question-main[b-5gamlmwu3p] {
        flex: 1;
    }

    .logic-question-text[b-5gamlmwu3p] {
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--text-color);
    }

    .logic-question-meta[b-5gamlmwu3p] {
        font-size: 0.75rem;
        color: var(--text-muted);
    }

    .logic-flow-arrow[b-5gamlmwu3p] {
        position: relative;
        height: 48px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }

    .logic-flow-arrow[b-5gamlmwu3p]::before {
        content: "";
        display: block;
        width: 2px;
        height: 48px;
        background: #2f3755;
        border-radius: 50rem;
    }

    .logic-editor[b-5gamlmwu3p] {
        flex: 1;
        /*padding: 1.5rem;*/
        background: transparent;
        height: fit-content;
        border-radius: var(--border-radius);
        width: 38rem;
        padding-bottom: 20rem;
    }

    .logic-question-header[b-5gamlmwu3p] {
        margin-bottom: 1rem;
    }

    .logic-question-label[b-5gamlmwu3p] {
        font-size: 0.75rem;
        color: var(--text-muted);
        letter-spacing: 0.04em;
    }

    .logic-question-title[b-5gamlmwu3p] {
        color: var(--text-color);
    }

    .logic-question-subtext[b-5gamlmwu3p] {
        font-size: 0.85rem;
        color: var(--text-muted);
    }

    .logic-rules-container[b-5gamlmwu3p] {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .logic-rule-card[b-5gamlmwu3p] {
        border-radius: var(--border-radius);
        padding: 0.75rem 1rem;
        background: var(--dark-color);
    }

    .logic-rule-header[b-5gamlmwu3p] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .logic-rule-title[b-5gamlmwu3p] {
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--text-color);
    }

    .logic-if-block[b-5gamlmwu3p],
    .logic-then-block[b-5gamlmwu3p] {
        margin-top: 0.5rem;
    }

    .logic-if-label[b-5gamlmwu3p],
    .logic-then-label[b-5gamlmwu3p] {
        font-size: 0.8rem;
        font-weight: 600;
        margin-bottom: 0.25rem;
        color: var(--text-muted);
        letter-spacing: 0.04em;
    }

    .logic-condition-row[b-5gamlmwu3p],
    .logic-then-row[b-5gamlmwu3p] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .logic-condition-label[b-5gamlmwu3p] {
        color: var(--text-muted);
        font-size: 0.8rem;
        white-space: nowrap;
    }

    .logic-input[b-5gamlmwu3p] {
        padding: 0.35rem 0.5rem;
        border: none;
        font-size: 0.85rem;
        background: transparent;
        color: var(--text-color);
        outline: none;
        min-height: 32px;
        border-bottom: 2px solid var(--brand);
        outline: none;
        height: 3rem;
        width: 12rem;
    }

    .logic-fallback[b-5gamlmwu3p] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .logic-empty[b-5gamlmwu3p],
    .logic-empty-state[b-5gamlmwu3p] {
        padding: 1rem;
        color: var(--text-muted);
    }

    .logic-empty-state h3[b-5gamlmwu3p] {
        color: var(--text-color);
    }

    .logic-hint[b-5gamlmwu3p] {
        font-size: 0.8rem;
        color: var(--text-muted);
    }

    .logic-join-row[b-5gamlmwu3p] {
        display: flex;
        justify-content: center;
        margin: 1rem 0;
    }

    .logic-join-chip-group[b-5gamlmwu3p] {
        display: inline-flex;
        gap: 0.35rem;
        padding: 0.1rem;
        border-radius: 50rem;
        background: var(--light-color);
    }

    .logic-join-chip[b-5gamlmwu3p] {
        border: none;
        padding: 0.2rem 0.7rem;
        border-radius: 999px;
        font-size: 0.8rem;
        background: transparent;
        color: var(--text-muted);
        cursor: pointer;
    }

    .logic-join-chip.active[b-5gamlmwu3p] {
        background: var(--brand);
        color: #001018;
        font-weight: 600;
    }

    .logic-join-chip:not(.active):hover[b-5gamlmwu3p] {
        color: var(--text-color);
    }

    .logic-question-status[b-5gamlmwu3p] {
        margin-top: 0.35rem;
        font-size: 0.7rem;
        color: var(--text-muted);
    }

    .logic-badge[b-5gamlmwu3p] {
        display: inline-flex;
        align-items: center;
        padding: 0.1rem 0.5rem;
        border-radius: 999px;
        border: 1px solid transparent;
        white-space: nowrap;
    }

    .logic-badge-active[b-5gamlmwu3p] {
        background: rgba(34, 227, 255, 0.12);
        border-color: var(--brand);
        color: var(--brand);
        font-weight: 600;
    }

    .logic-badge-empty[b-5gamlmwu3p] {
        background: rgba(184, 191, 212, 0.08);
        border-color: rgba(184, 191, 212, 0.3);
        color: var(--text-muted);
    }

    .logic-badge-disabled[b-5gamlmwu3p] {
        background: rgba(255, 0, 0, 0.06);
        border-color: rgba(255, 0, 0, 0.4);
        color: #ff6b6b;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    @keyframes spaceDrift-b-5gamlmwu3p {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(-100vh);
        }
    }

    .background[b-5gamlmwu3p] {
        min-height: 100vh;
        display: flex;
        overflow: auto;
        position: relative;
        background: radial-gradient(circle at top, #1c2944 0, #060b19 55%, #020309 100%);
        background-attachment: fixed;
    }

    .background[b-5gamlmwu3p]::before,
    .background[b-5gamlmwu3p]::after {
        content: "";
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 200vh;
        background: transparent;
        pointer-events: none;
        mix-blend-mode: screen;
    }

    .background[b-5gamlmwu3p]::before {
        width: 1px;
        height: 1px;
        opacity: 0.8;
        animation: spaceDrift-b-5gamlmwu3p 150s linear infinite;
        box-shadow: 10vw 10vh #fff, 10vw 110vh #fff, 15vw 80vh #fff, 15vw 180vh #fff, 35vw 12vh #fff, 35vw 112vh #fff, 80vw 22vh #fff, 80vw 122vh #fff, 70vw 80vh #fff, 70vw 180vh #fff, 12vw 95vh #fff, 12vw 195vh #fff, 45vw 45vh #fff, 45vw 145vh #fff, 95vw 95vh #fff, 95vw 195vh #fff, 22vw 33vh #fff, 22vw 133vh #fff, 65vw 12vh #fff, 65vw 112vh #fff, 11vw 65vh #fff, 11vw 165vh #fff, 88vw 44vh #fff, 88vw 144vh #fff, 55vw 55vh #fff, 55vw 155vh #fff, 30vw 90vh #fff, 30vw 190vh #fff, 60vw 30vh #fff, 60vw 130vh #fff, 25vw 25vh #fff, 25vw 125vh #fff, 75vw 75vh #fff, 75vw 175vh #fff, 40vw 60vh #fff, 40vw 160vh #fff, 98vw 50vh #fff, 98vw 150vh #fff, 05vw 05vh #fff, 05vw 105vh #fff;
    }

    .background[b-5gamlmwu3p]::after {
        width: 2px;
        height: 2px;
        opacity: 0.6;
        animation: spaceDrift-b-5gamlmwu3p 100s linear infinite;
        box-shadow: 20vw 20vh #b4dcff, 20vw 120vh #b4dcff, 85vw 15vh #fff, 85vw 115vh #fff, 40vw 80vh #b4dcff, 40vw 180vh #b4dcff, 60vw 60vh #fff, 60vw 160vh #fff, 10vw 90vh #b4dcff, 10vw 190vh #b4dcff, 90vw 40vh #fff, 90vw 140vh #fff, 30vw 50vh #b4dcff, 30vw 150vh #b4dcff, 75vw 85vh #fff, 75vw 185vh #fff;
    }

    /**************** Animations ****************/

    @keyframes fadeIn-b-5gamlmwu3p {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .fade-in[b-5gamlmwu3p] {
        animation: fadeIn-b-5gamlmwu3p 1s ease-out forwards;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Pages/Forms.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {

    @keyframes spaceDrift-b-k9lmok3ia3 {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(-100vh);
        }
    }

    .background[b-k9lmok3ia3] {
        min-height: 100vh;
        display: flex;
        overflow: auto;
        position: relative;
        background: radial-gradient(circle at top, #1c2944 0, #060b19 55%, #020309 100%);
        background-attachment: fixed;
    }

    .background[b-k9lmok3ia3]::before,
    .background[b-k9lmok3ia3]::after {
        content: "";
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 200vh;
        background: transparent;
        pointer-events: none;
        mix-blend-mode: screen;
    }

    .background[b-k9lmok3ia3]::before {
        width: 1px;
        height: 1px;
        opacity: 0.8;
        animation: spaceDrift-b-k9lmok3ia3 150s linear infinite;
        box-shadow: 10vw 10vh #fff, 10vw 110vh #fff, 15vw 80vh #fff, 15vw 180vh #fff, 35vw 12vh #fff, 35vw 112vh #fff, 80vw 22vh #fff, 80vw 122vh #fff, 70vw 80vh #fff, 70vw 180vh #fff, 12vw 95vh #fff, 12vw 195vh #fff, 45vw 45vh #fff, 45vw 145vh #fff, 95vw 95vh #fff, 95vw 195vh #fff, 22vw 33vh #fff, 22vw 133vh #fff, 65vw 12vh #fff, 65vw 112vh #fff, 11vw 65vh #fff, 11vw 165vh #fff, 88vw 44vh #fff, 88vw 144vh #fff, 55vw 55vh #fff, 55vw 155vh #fff, 30vw 90vh #fff, 30vw 190vh #fff, 60vw 30vh #fff, 60vw 130vh #fff, 25vw 25vh #fff, 25vw 125vh #fff, 75vw 75vh #fff, 75vw 175vh #fff, 40vw 60vh #fff, 40vw 160vh #fff, 98vw 50vh #fff, 98vw 150vh #fff, 05vw 05vh #fff, 05vw 105vh #fff;
    }

    .background[b-k9lmok3ia3]::after {
        width: 2px;
        height: 2px;
        opacity: 0.6;
        animation: spaceDrift-b-k9lmok3ia3 100s linear infinite;
        box-shadow: 20vw 20vh #b4dcff, 20vw 120vh #b4dcff, 85vw 15vh #fff, 85vw 115vh #fff, 40vw 80vh #b4dcff, 40vw 180vh #b4dcff, 60vw 60vh #fff, 60vw 160vh #fff, 10vw 90vh #b4dcff, 10vw 190vh #b4dcff, 90vw 40vh #fff, 90vw 140vh #fff, 30vw 50vh #b4dcff, 30vw 150vh #b4dcff, 75vw 85vh #fff, 75vw 185vh #fff;
    }

    /**************** Greetings ****************/

    .main-container[b-k9lmok3ia3] {
        display: flex;
        max-width: 900px;
        margin: auto;
        height: 35rem;
        flex-direction: column;
        width: 100%;
    }

    /**************** Forms List ****************/

    .forms-list[b-k9lmok3ia3] {
        list-style-type: none;
        padding-bottom: 8rem;
    }

    /**************** Page Content ****************/

    .listings-content[b-k9lmok3ia3] {
        max-width: 1000px;
        margin: 0 auto auto auto;
        /*margin: auto;*/
        display: flex;
        width: 100%;
        flex-direction: column;
        margin-top: 4rem;
    }

    .responses-group[b-k9lmok3ia3] {
        display: flex;
        width: 100%;
        margin-bottom: 10rem;
    }

    /**************** Add Button ****************/

    .add-forms-group[b-k9lmok3ia3] {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 1rem;
        padding-bottom: 7rem;
    }

    /**************** Left-side ****************/

    .responses-left-side[b-k9lmok3ia3] {
        height: 100%;
        width: 35%;
        display: flex;
        align-items: center;
        padding-right: 1rem;
        flex-direction: column;
        min-height: 40rem;
    }

    .column-section[b-k9lmok3ia3] {
        height: 100%;
        width: 100%;
        display: flex;
        /*align-items: center;*/
        justify-content: start;
        flex-direction: column;
    }

    .column-title-filters[b-k9lmok3ia3] {
        color: var(--text-color);
        font-size: 1.5rem;
        font-weight: 500;
    }

    .column-title-responses[b-k9lmok3ia3] {
        color: var(--text-color);
        font-size: 1.5rem;
        font-weight: 500;
    }

    .column-group-filters[b-k9lmok3ia3] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
        height: 2.5rem;
    }

    /**************** Filter ****************/

    .divider[b-k9lmok3ia3] {
        height: 2px;
        background-color: var(--brand);
        border: none;
        margin-top: 1rem;
        margin-bottom: 1rem;
        opacity: 0.15;
    }

    .filter-group[b-k9lmok3ia3] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
    }

    .filter-title[b-k9lmok3ia3] {
        color: var(--text-color);
        font-size: 1rem;
        font-weight: 500;
    }

    .filter-collapse-button[b-k9lmok3ia3] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
        cursor: pointer;
        border-radius: 50%;
        font-size: 0.75rem;
        color: var(--brand);
    }

    .filter-collapse-button:hover[b-k9lmok3ia3] {
        background: var(--light-color);
    }

    .filter-collapse-button i[b-k9lmok3ia3] {
        transition: transform 0.18s ease;
    }

    .filter-group.open .filter-collapse-button i[b-k9lmok3ia3] {
        transform: rotate(180deg);
    }

    .clear-chip[b-k9lmok3ia3] {
        background: var(--transparent);
        color: var(--text-color);
        border: 2px solid var(--brand);
        padding: 0.5rem 0.75rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 1.25rem;
        font-size: 0.75rem;
        font-weight: 600;
        margin-right: 0.5rem;
        white-space: nowrap;
        text-decoration: none;
        width: fit-content;
        cursor: pointer;
    }

    .clear-chip:hover[b-k9lmok3ia3] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .clear-icon[b-k9lmok3ia3] {
        margin-right: 0.5rem;
    }

    .filter-title-group[b-k9lmok3ia3] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .checkbox-text[b-k9lmok3ia3] {
        color: var(--text-color);
        font-size: 0.75rem;
    }

    .filter-caption[b-k9lmok3ia3] {
        color: var(--text-muted);
        font-weight: 500;
        font-size: 0.75rem;
    }

    .filter-subtext[b-k9lmok3ia3] {
        font-size: 0.6rem;
        color: var(--text-color);
    }

    .filter-subtext-row[b-k9lmok3ia3] {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        margin-top: 0.25rem;
        margin-bottom: 1.25rem;
    }

    .column-options-group[b-k9lmok3ia3] {
        margin-bottom: 1rem;
        margin-top: 0.5rem;
    }

    .column-options[b-k9lmok3ia3] {
        display: flex;
        align-items: center;
        /*margin-bottom: 5px;*/
        padding-bottom: 10px;
        cursor: pointer;
    }

    .column-options:hover[b-k9lmok3ia3] {
        opacity: 0.9;
    }

    .column-options input[type="checkbox"][b-k9lmok3ia3] {
        margin-right: 0.5rem;
        appearance: none; /* Hide the default checkbox */
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 16px;
        height: 16px;
        border: 2px solid var(--brand);
        border-radius: var(--border-radius);
        position: relative;
        cursor: pointer;
    }

    .column-options input[type="checkbox"]:checked[b-k9lmok3ia3]::before {
        content: '';
        position: absolute;
        left: 3px;
        top: 0;
        width: 4px;
        height: 8px;
        border: solid var(--brand);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    .column-options input[type="checkbox"]:checked[b-k9lmok3ia3] {
        background-color: var(--brand);
    }

    /**************** Search ****************/

    .search-container[b-k9lmok3ia3] {
        width: 100%;
        background: var(--light-color);
        border-radius: var(--border-radius);
        padding: 1rem;
        height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 0.5rem;
        margin-bottom: 1.25rem;
    }

    .clear-search-icon[b-k9lmok3ia3] {
        color: var(--brand);
        font-size: 1.5rem;
    }

    .search-text[b-k9lmok3ia3] {
        color: var(--dark-color);
        font-size: 1.5rem;
        font-weight: bold;
        margin-left: 0.75rem;
    }

    .search-column-start[b-k9lmok3ia3] {
        width: fit-content;
        margin-right: 0.25rem;
        background: var(--dark-color);
        border-radius: 15px;
        padding: 1.25rem;
        height: 3.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .form-control[b-k9lmok3ia3] {
        padding-top: 1px;
        padding-bottom: 1px;
        width: 100%;
        outline: none;
        color: var(--text-color);
        font-size: 12px;
        height: 3rem;
        background: transparent;
        border-color: transparent;
    }

    .form-control[b-k9lmok3ia3]::placeholder {
        color: var(--text-muted);
        font-weight: 300;
    }

    .input-container[b-k9lmok3ia3] {
        position: relative;
        display: inline-block;
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
    }

    .icon-container[b-k9lmok3ia3] {
        position: absolute;
        top: 60%;
        left: 8.5rem;
        transform: translateY(-60%);
    }

    .clear-icon-container[b-k9lmok3ia3] {
        position: absolute;
        top: 60%;
        right: 8.5rem;
        transform: translateY(-60%);
        cursor: pointer;
    }

    /**************** Pagination ****************/

    .column-group-responses[b-k9lmok3ia3] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .column-group[b-k9lmok3ia3] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .results-summary-text[b-k9lmok3ia3] {
        font-size: 12px;
        font-weight: 500;
        color: var(--text-color);
    }

    .pagination[b-k9lmok3ia3] {
        display: flex;
        padding: 1rem;
        justify-content: center;
        align-items: center;
        margin-bottom: 2rem;
    }

    .page-scroll-button[b-k9lmok3ia3] {
        color: var(--brand);
        cursor: pointer;
        background: transparent;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        margin: 0 4px;
    }

    .page-scroll-button:hover[b-k9lmok3ia3] {
        background-color: var(--light-color);
    }

    .page-scroll-button-disabled[b-k9lmok3ia3] {
        color: var(--brand);
        background: transparent;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        opacity: 0.4;
        margin: 0 4px;
    }

    .page-ellipsis[b-k9lmok3ia3] {
        padding: 1rem;
        color: var(--text-color);
        font-size: 1.5rem;
        height: 3rem;
        width: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
    }

    .page-button[b-k9lmok3ia3] {
        padding: 1rem;
        background-color: transparent;
        color: var(--text-color);
        border: none;
        border-radius: 15px;
        cursor: pointer;
        font-size: 1.5rem;
        height: 3rem;
        width: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        margin: 0 4px;
    }

    .page-button:hover[b-k9lmok3ia3] {
        background-color: var(--light-color);
    }

    .page-button-selected[b-k9lmok3ia3] {
        padding: 1rem;
        background-color: var(--brand);
        color: var(--dark-color);
        border: none;
        border-radius: 15px;
        font-size: 1.5rem;
        height: 3rem;
        width: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        margin: 0 4px;
    }

    /**************** Right-side ****************/

    .responses-right-side[b-k9lmok3ia3] {
        height: 100%;
        width: 65%;
        display: flex;
        flex-direction: column;
    }

    /**************** Animations ****************/

    @keyframes fadeIn-b-k9lmok3ia3 {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .fade-in[b-k9lmok3ia3] {
        animation: fadeIn-b-k9lmok3ia3 1s ease-out forwards;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {
    @keyframes spaceDrift-b-k9lmok3ia3 {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(-100vh);
        }
    }

    .background[b-k9lmok3ia3] {
        min-height: 100vh;
        display: flex;
        overflow: auto;
        position: relative;
        background: radial-gradient(circle at top, #1c2944 0, #060b19 55%, #020309 100%);
        background-attachment: fixed;
    }

    .background[b-k9lmok3ia3]::before,
    .background[b-k9lmok3ia3]::after {
        content: "";
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 200vh;
        background: transparent;
        pointer-events: none;
        mix-blend-mode: screen;
    }

    .background[b-k9lmok3ia3]::before {
        width: 1px;
        height: 1px;
        opacity: 0.8;
        animation: spaceDrift-b-k9lmok3ia3 150s linear infinite;
        box-shadow: 10vw 10vh #fff, 10vw 110vh #fff, 15vw 80vh #fff, 15vw 180vh #fff, 35vw 12vh #fff, 35vw 112vh #fff, 80vw 22vh #fff, 80vw 122vh #fff, 70vw 80vh #fff, 70vw 180vh #fff, 12vw 95vh #fff, 12vw 195vh #fff, 45vw 45vh #fff, 45vw 145vh #fff, 95vw 95vh #fff, 95vw 195vh #fff, 22vw 33vh #fff, 22vw 133vh #fff, 65vw 12vh #fff, 65vw 112vh #fff, 11vw 65vh #fff, 11vw 165vh #fff, 88vw 44vh #fff, 88vw 144vh #fff, 55vw 55vh #fff, 55vw 155vh #fff, 30vw 90vh #fff, 30vw 190vh #fff, 60vw 30vh #fff, 60vw 130vh #fff, 25vw 25vh #fff, 25vw 125vh #fff, 75vw 75vh #fff, 75vw 175vh #fff, 40vw 60vh #fff, 40vw 160vh #fff, 98vw 50vh #fff, 98vw 150vh #fff, 05vw 05vh #fff, 05vw 105vh #fff;
    }

    .background[b-k9lmok3ia3]::after {
        width: 2px;
        height: 2px;
        opacity: 0.6;
        animation: spaceDrift-b-k9lmok3ia3 100s linear infinite;
        box-shadow: 20vw 20vh #b4dcff, 20vw 120vh #b4dcff, 85vw 15vh #fff, 85vw 115vh #fff, 40vw 80vh #b4dcff, 40vw 180vh #b4dcff, 60vw 60vh #fff, 60vw 160vh #fff, 10vw 90vh #b4dcff, 10vw 190vh #b4dcff, 90vw 40vh #fff, 90vw 140vh #fff, 30vw 50vh #b4dcff, 30vw 150vh #b4dcff, 75vw 85vh #fff, 75vw 185vh #fff;
    }

    /**************** Greetings ****************/

    .main-container[b-k9lmok3ia3] {
        display: flex;
        max-width: 700px;
        margin: auto;
        height: 30rem;
        flex-direction: column;
        width: 100%;
    }

    /**************** Right-side ****************/

    .responses-right-side[b-k9lmok3ia3] {
        height: 100%;
        width: 65%;
        display: flex;
        flex-direction: column;
    }

    /**************** Forms List ****************/

    .forms-list[b-k9lmok3ia3] {
        list-style-type: none;
        padding-bottom: 8rem;
    }

    /**************** Page Content ****************/

    .listings-content[b-k9lmok3ia3] {
        max-width: 800px;
        margin: 0 auto auto auto;
        /*margin: auto;*/
        display: flex;
        width: 100%;
        flex-direction: column;
        margin-top: 4rem;
    }

    .responses-group[b-k9lmok3ia3] {
        display: flex;
        width: 100%;
        margin-bottom: 10rem;
    }

    /**************** Add Button ****************/

    .add-forms-group[b-k9lmok3ia3] {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 1rem;
        padding-bottom: 7rem;
    }

    /**************** Left-side ****************/

    .responses-left-side[b-k9lmok3ia3] {
        height: 100%;
        width: 35%;
        display: flex;
        align-items: center;
        padding-right: 1rem;
        flex-direction: column;
        min-height: 40rem;
    }

    .column-section[b-k9lmok3ia3] {
        height: 100%;
        width: 100%;
        display: flex;
        /*align-items: center;*/
        justify-content: start;
        flex-direction: column;
    }

    .column-title-filters[b-k9lmok3ia3] {
        color: var(--text-color);
        font-size: 1.25rem;
        font-weight: 500;
    }

    .column-title-responses[b-k9lmok3ia3] {
        color: var(--text-color);
        font-size: 1.25rem;
        font-weight: 500;
    }

    .column-group-filters[b-k9lmok3ia3] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
        height: 2.5rem;
    }

    /**************** Filter ****************/

    .divider[b-k9lmok3ia3] {
        height: 1px;
        background-color: var(--brand);
        border: none;
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
        opacity: 0.15;
    }

    .filter-group[b-k9lmok3ia3] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
    }

    .filter-title[b-k9lmok3ia3] {
        color: var(--text-color);
        font-size: 0.85rem;
        font-weight: 500;
    }

    .filter-collapse-button[b-k9lmok3ia3] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.25rem;
        height: 1.25rem;
        cursor: pointer;
        border-radius: 50%;
        font-size: 0.65rem;
        color: var(--brand);
    }

    .filter-collapse-button:hover[b-k9lmok3ia3] {
        background: var(--light-color);
    }

    .filter-collapse-button i[b-k9lmok3ia3] {
        transition: transform 0.18s ease;
    }

    .filter-group.open .filter-collapse-button i[b-k9lmok3ia3] {
        transform: rotate(180deg);
    }

    .clear-chip[b-k9lmok3ia3] {
        background: var(--transparent);
        color: var(--text-color);
        border: 2px solid var(--brand);
        padding: 0.5rem 0.75rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 1.25rem;
        font-size: 0.75rem;
        font-weight: 600;
        margin-right: 0.5rem;
        white-space: nowrap;
        text-decoration: none;
        width: fit-content;
        cursor: pointer;
    }

    .clear-chip:hover[b-k9lmok3ia3] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .clear-icon[b-k9lmok3ia3] {
        margin-right: 0.5rem;
    }

    .filter-title-group[b-k9lmok3ia3] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .checkbox-text[b-k9lmok3ia3] {
        color: var(--text-color);
        font-size: 0.75rem;
    }

    .filter-caption[b-k9lmok3ia3] {
        color: var(--text-muted);
        font-weight: 500;
        font-size: 0.75rem;
    }

    .filter-subtext[b-k9lmok3ia3] {
        font-size: 0.6rem;
        color: var(--text-color);
    }

    .filter-subtext-row[b-k9lmok3ia3] {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        margin-top: 0.25rem;
        margin-bottom: 1.25rem;
    }

    .column-options-group[b-k9lmok3ia3] {
        margin-bottom: 1rem;
        margin-top: 0.5rem;
    }

    .column-options[b-k9lmok3ia3] {
        display: flex;
        align-items: center;
        /*margin-bottom: 5px;*/
        padding-bottom: 10px;
        cursor: pointer;
    }

    .column-options:hover[b-k9lmok3ia3] {
        opacity: 0.9;
    }

    .column-options input[type="checkbox"][b-k9lmok3ia3] {
        margin-right: 0.5rem;
        appearance: none; /* Hide the default checkbox */
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 16px;
        height: 16px;
        border: 2px solid var(--brand);
        border-radius: var(--border-radius);
        position: relative;
        cursor: pointer;
    }

    .column-options input[type="checkbox"]:checked[b-k9lmok3ia3]::before {
        content: '';
        position: absolute;
        left: 3px;
        top: 0;
        width: 4px;
        height: 8px;
        border: solid var(--brand);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    .column-options input[type="checkbox"]:checked[b-k9lmok3ia3] {
        background-color: var(--brand);
    }

    /**************** Search ****************/

    .search-container[b-k9lmok3ia3] {
        width: 100%;
        background: var(--light-color);
        border-radius: var(--border-radius);
        padding: 1rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 0.5rem;
        margin-bottom: 1rem;
    }

    .clear-search-icon[b-k9lmok3ia3] {
        color: var(--brand);
        font-size: 1.5rem;
    }

    .search-text[b-k9lmok3ia3] {
        color: var(--dark-color);
        font-size: 1.5rem;
        font-weight: bold;
        margin-left: 0.75rem;
    }

    .search-column-start[b-k9lmok3ia3] {
        width: fit-content;
        margin-right: 0.25rem;
        background: var(--dark-color);
        border-radius: 15px;
        padding: 1.25rem;
        height: 3.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .form-control[b-k9lmok3ia3] {
        padding-top: 1px;
        padding-bottom: 1px;
        width: 100%;
        outline: none;
        color: var(--text-color);
        font-size: 12px;
        height: 3rem;
        background: transparent;
        border-color: transparent;
    }

    .form-control[b-k9lmok3ia3]::placeholder {
        color: var(--text-muted);
        font-weight: 300;
    }

    .input-container[b-k9lmok3ia3] {
        position: relative;
        display: inline-block;
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
    }

    .icon-container[b-k9lmok3ia3] {
        position: absolute;
        top: 60%;
        left: 8.5rem;
        transform: translateY(-60%);
    }

    .clear-icon-container[b-k9lmok3ia3] {
        position: absolute;
        top: 60%;
        right: 8.5rem;
        transform: translateY(-60%);
        cursor: pointer;
    }

    /**************** Pagination ****************/

    .column-group-responses[b-k9lmok3ia3] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .column-group[b-k9lmok3ia3] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .results-summary-text[b-k9lmok3ia3] {
        font-size: 10px;
        font-weight: 500;
        color: var(--text-color);
    }

    .pagination[b-k9lmok3ia3] {
        display: flex;
        padding: 1rem;
        justify-content: center;
        align-items: center;
        margin-bottom: 2rem;
    }

    .page-scroll-button[b-k9lmok3ia3] {
        color: var(--brand);
        cursor: pointer;
        background: transparent;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        margin: 0 2px;
        font-size: 0.85rem;
    }

    .page-scroll-button:hover[b-k9lmok3ia3] {
        background-color: var(--light-color);
    }

    .page-scroll-button-disabled[b-k9lmok3ia3] {
        color: var(--brand);
        background: transparent;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        opacity: 0.4;
        margin: 0 2px;
    }

    .page-ellipsis[b-k9lmok3ia3] {
        padding: 1rem;
        color: var(--text-color);
        font-size: 1.25rem;
        height: 2.5rem;
        width: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
    }

    .page-button[b-k9lmok3ia3] {
        padding: 1rem;
        background-color: transparent;
        color: var(--text-color);
        border: none;
        border-radius: 10px;
        cursor: pointer;
        font-size: 1.25rem;
        height: 2.5rem;
        width: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        margin: 0 2px;
    }

    .page-button:hover[b-k9lmok3ia3] {
        background-color: var(--light-color);
    }

    .page-button-selected[b-k9lmok3ia3] {
        padding: 1rem;
        background-color: var(--brand);
        color: var(--dark-color);
        border: none;
        border-radius: 10px;
        font-size: 1.25rem;
        height: 2.5rem;
        width: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        margin: 0 2px;
    }

    /**************** Animations ****************/

    @keyframes fadeIn-b-k9lmok3ia3 {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .fade-in[b-k9lmok3ia3] {
        animation: fadeIn-b-k9lmok3ia3 1s ease-out forwards;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    @keyframes spaceDrift-b-k9lmok3ia3 {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(-100vh);
        }
    }

    .background[b-k9lmok3ia3] {
        min-height: 100vh;
        display: flex;
        overflow: auto;
        position: relative;
        background: radial-gradient(circle at top, #1c2944 0, #060b19 55%, #020309 100%);
        background-attachment: fixed;
    }

    .background[b-k9lmok3ia3]::before,
    .background[b-k9lmok3ia3]::after {
        content: "";
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 200vh;
        background: transparent;
        pointer-events: none;
        mix-blend-mode: screen;
    }

    .background[b-k9lmok3ia3]::before {
        width: 1px;
        height: 1px;
        opacity: 0.8;
        animation: spaceDrift-b-k9lmok3ia3 150s linear infinite;
        box-shadow: 10vw 10vh #fff, 10vw 110vh #fff, 15vw 80vh #fff, 15vw 180vh #fff, 35vw 12vh #fff, 35vw 112vh #fff, 80vw 22vh #fff, 80vw 122vh #fff, 70vw 80vh #fff, 70vw 180vh #fff, 12vw 95vh #fff, 12vw 195vh #fff, 45vw 45vh #fff, 45vw 145vh #fff, 95vw 95vh #fff, 95vw 195vh #fff, 22vw 33vh #fff, 22vw 133vh #fff, 65vw 12vh #fff, 65vw 112vh #fff, 11vw 65vh #fff, 11vw 165vh #fff, 88vw 44vh #fff, 88vw 144vh #fff, 55vw 55vh #fff, 55vw 155vh #fff, 30vw 90vh #fff, 30vw 190vh #fff, 60vw 30vh #fff, 60vw 130vh #fff, 25vw 25vh #fff, 25vw 125vh #fff, 75vw 75vh #fff, 75vw 175vh #fff, 40vw 60vh #fff, 40vw 160vh #fff, 98vw 50vh #fff, 98vw 150vh #fff, 05vw 05vh #fff, 05vw 105vh #fff;
    }

    .background[b-k9lmok3ia3]::after {
        width: 2px;
        height: 2px;
        opacity: 0.6;
        animation: spaceDrift-b-k9lmok3ia3 100s linear infinite;
        box-shadow: 20vw 20vh #b4dcff, 20vw 120vh #b4dcff, 85vw 15vh #fff, 85vw 115vh #fff, 40vw 80vh #b4dcff, 40vw 180vh #b4dcff, 60vw 60vh #fff, 60vw 160vh #fff, 10vw 90vh #b4dcff, 10vw 190vh #b4dcff, 90vw 40vh #fff, 90vw 140vh #fff, 30vw 50vh #b4dcff, 30vw 150vh #b4dcff, 75vw 85vh #fff, 75vw 185vh #fff;
    }

    /**************** Greetings ****************/

    .main-container[b-k9lmok3ia3] {
        width: 100%;
        max-width: 550px;
        padding: 1rem;
        height: auto;
        margin-top: 6rem;
        margin-right: auto;
        margin-left: auto;
    }

    /**************** Forms List ****************/

    .forms-list[b-k9lmok3ia3] {
        list-style-type: none;
        padding-bottom: 8rem;
    }

    /**************** Page Content ****************/

    .listings-content[b-k9lmok3ia3] {
        display: flex;
        width: 100%;
        flex-direction: column;
        margin-top: 4rem;
    }

    .responses-group[b-k9lmok3ia3] {
        display: flex;
        width: 100%;
        margin-bottom: 10rem;
    }

    /**************** Add Button ****************/

    .add-forms-group[b-k9lmok3ia3] {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 1rem;
        padding-bottom: 7rem;
    }

    /**************** Left-side ****************/

    .responses-left-side[b-k9lmok3ia3] {
        display: none;
    }

    /**************** Pagination ****************/

    .column-group-responses[b-k9lmok3ia3] {
        display: flex;
        justify-content: start;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .column-group[b-k9lmok3ia3] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .results-summary-text[b-k9lmok3ia3] {
        font-size: 12px;
        font-weight: 500;
        color: var(--text-color);
    }

    .pagination[b-k9lmok3ia3] {
        display: flex;
        padding: 1rem;
        justify-content: center;
        align-items: center;
        margin-bottom: 2rem;
    }

    .page-scroll-button[b-k9lmok3ia3] {
        color: var(--brand);
        cursor: pointer;
        background: transparent;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        margin: 0 4px;
    }

    .page-scroll-button:hover[b-k9lmok3ia3] {
        background-color: var(--light-color);
    }

    .page-scroll-button-disabled[b-k9lmok3ia3] {
        color: var(--brand);
        background: transparent;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        opacity: 0.4;
        margin: 0 4px;
    }

    .page-ellipsis[b-k9lmok3ia3] {
        padding: 1rem;
        color: var(--text-color);
        font-size: 1.5rem;
        height: 3rem;
        width: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
    }

    .page-button[b-k9lmok3ia3] {
        padding: 1rem;
        background-color: transparent;
        color: var(--text-color);
        border: none;
        border-radius: 15px;
        cursor: pointer;
        font-size: 1.5rem;
        height: 3rem;
        width: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        margin: 0 4px;
    }

    .page-button:hover[b-k9lmok3ia3] {
        background-color: var(--light-color);
    }

    .page-button-selected[b-k9lmok3ia3] {
        padding: 1rem;
        background-color: var(--brand);
        color: var(--dark-color);
        border: none;
        border-radius: 15px;
        font-size: 1.5rem;
        height: 3rem;
        width: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        margin: 0 4px;
    }

    /**************** Right-side ****************/

    .responses-right-side[b-k9lmok3ia3] {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    /**************** Animations ****************/

    @keyframes fadeIn-b-k9lmok3ia3 {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .fade-in[b-k9lmok3ia3] {
        animation: fadeIn-b-k9lmok3ia3 1s ease-out forwards;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Pages/Home.razor.rz.scp.css */
.hero-stagger .reveal[b-ssvt07dagk] {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(2px);
    animation: heroReveal-b-ssvt07dagk 520ms cubic-bezier(.2,.7,.2,1) forwards;
    animation-delay: var(--d, 0ms);
    will-change: transform, opacity, filter;
}

.scroll-reveal[b-ssvt07dagk] {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}

.scroll-reveal.is-visible[b-ssvt07dagk] {
    opacity: 1;
    transform: translateY(0);
}

@keyframes heroReveal-b-ssvt07dagk {
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hero-stagger .reveal[b-ssvt07dagk] {
        animation: none;
        opacity: 1;
        transform: none;
        filter: none;
    }
}

html[b-ssvt07dagk], body[b-ssvt07dagk] {
    width: 100%;
    overflow-x: hidden;
}

@keyframes spaceDrift-b-ssvt07dagk {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100vh);
    }
}

main[b-ssvt07dagk] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    background: radial-gradient(circle at top, #1c2944 0, #060b19 55%, #020309 100%);
    background-attachment: fixed;
}

main[b-ssvt07dagk]::before,
main[b-ssvt07dagk]::after {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 200vh;
    background: transparent;
    pointer-events: none;
    mix-blend-mode: screen;
}

main[b-ssvt07dagk]::before {
    width: 1px;
    height: 1px;
    opacity: 0.8;
    animation: spaceDrift-b-ssvt07dagk 150s linear infinite;
    box-shadow: 10vw 10vh #fff, 10vw 110vh #fff, 15vw 80vh #fff, 15vw 180vh #fff, 35vw 12vh #fff, 35vw 112vh #fff, 80vw 22vh #fff, 80vw 122vh #fff, 70vw 80vh #fff, 70vw 180vh #fff, 12vw 95vh #fff, 12vw 195vh #fff, 45vw 45vh #fff, 45vw 145vh #fff, 95vw 95vh #fff, 95vw 195vh #fff, 22vw 33vh #fff, 22vw 133vh #fff, 65vw 12vh #fff, 65vw 112vh #fff, 11vw 65vh #fff, 11vw 165vh #fff, 88vw 44vh #fff, 88vw 144vh #fff, 55vw 55vh #fff, 55vw 155vh #fff, 30vw 90vh #fff, 30vw 190vh #fff, 60vw 30vh #fff, 60vw 130vh #fff, 25vw 25vh #fff, 25vw 125vh #fff, 75vw 75vh #fff, 75vw 175vh #fff, 40vw 60vh #fff, 40vw 160vh #fff, 98vw 50vh #fff, 98vw 150vh #fff, 05vw 05vh #fff, 05vw 105vh #fff;
}

main[b-ssvt07dagk]::after {
    width: 2px;
    height: 2px;
    opacity: 0.6;
    animation: spaceDrift-b-ssvt07dagk 100s linear infinite;
    box-shadow: 20vw 20vh #b4dcff, 20vw 120vh #b4dcff, 85vw 15vh #fff, 85vw 115vh #fff, 40vw 80vh #b4dcff, 40vw 180vh #b4dcff, 60vw 60vh #fff, 60vw 160vh #fff, 10vw 90vh #b4dcff, 10vw 190vh #b4dcff, 90vw 40vh #fff, 90vw 140vh #fff, 30vw 50vh #b4dcff, 30vw 150vh #b4dcff, 75vw 85vh #fff, 75vw 185vh #fff;
}

/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1251px) {

    /**************** CTA ****************/

    .container[b-ssvt07dagk] {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
    }

    .hero[b-ssvt07dagk] {
        position: relative;
        min-height: 55vh;
        display: grid;
        place-items: center;
        overflow: hidden;
        isolation: isolate;
    }

    .hero-panel[b-ssvt07dagk] {
        width: min(920px, 96vw);
        padding: clamp(24px, 4.5vw, 46px);
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .eyebrow[b-ssvt07dagk] {
        display: inline-block;
        margin: 0 0 12px;
        padding: 6px 12px;
        color: var(--dark-color);
        font-weight: 700;
        letter-spacing: 0.12em;
        font-size: 0.7rem;
        text-transform: uppercase;
        border-radius: 999px;
        background: var(--brand);
    }

    .hero-title[b-ssvt07dagk] {
        font-size: clamp(34px, 6vw, 56px);
        line-height: 1.05;
        margin: 0 0 14px;
        letter-spacing: -.01em;
        color: var(--text-color);
    }

    .hero-sub[b-ssvt07dagk] {
        color: var(--text-color);
        font-size: clamp(16px, 2.1vw, 18px);
        margin: 0 0 22px;
    }

    .btn[b-ssvt07dagk] {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.85rem;
        border-radius: var(--sleek-border-radius);
        border: 1px solid transparent;
        cursor: pointer;
        width: 100%;
        justify-content: center;
        font-size: 1.15rem;
    }

    .btn.primary[b-ssvt07dagk] {
        background: var(--brand);
        color: var(--background-color);
    }

    .btn.primary:hover[b-ssvt07dagk] {
        filter: brightness(1.20);
        transition: 0.25s ease-in;
    }

    .btn.company-1[b-ssvt07dagk] {
        width: 25rem;
        justify-content: center;
        border: 2px solid var(--brand);
        text-decoration: none;
        color: var(--dark-color);
        background: var(--brand);
    }

    .btn.company-1:hover[b-ssvt07dagk] {
        transition: 0.25s ease-in;
        filter: brightness(1.20) !important;
    }

    .btn.company-1 .icon[b-ssvt07dagk], .btn.company .icon-wrap[b-ssvt07dagk] {
        width: 20px;
        height: 20px;
        display: inline-block;
    }

    .btn.company-2[b-ssvt07dagk] {
        width: 25rem;
        justify-content: center;
        border: 2px solid var(--brand);
        text-decoration: none;
        color: var(--text-color);
        background: transparent;
    }

    .btn.company-2:hover[b-ssvt07dagk] {
        background: var(--brand);
        transition: 0.25s ease-in;
        border: 2px solid var(--dark-color);
        color: var(--dark-color);
    }

    .btn.company-2 .icon[b-ssvt07dagk], .btn.company .icon-wrap[b-ssvt07dagk] {
        width: 20px;
        height: 20px;
        display: inline-block;
    }

    .spacing[b-ssvt07dagk] {
        margin-bottom: 1rem;
    }

    .btn.link[b-ssvt07dagk] {
        background: transparent;
        border: none;
        text-decoration: none;
    }

    .or[b-ssvt07dagk] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin: 1rem 0;
    }

    .or[b-ssvt07dagk]::before, .or[b-ssvt07dagk]::after {
        content: "";
        flex: 1;
        height: 2px;
    }

    .or span[b-ssvt07dagk] {
        font-size: .9rem;
        color: var(--text-color);
        opacity: 0.5;
        font-weight: 500;
    }

    .signup-cta[b-ssvt07dagk] {
        font-size: 0.9rem;
        color: var(--text-color);
        text-align: center;
    }

    .signup-cta .link[b-ssvt07dagk] {
        color: var(--brand);
        font-weight: 700;
        text-decoration: none;
        border-radius: var(--sleek-border-radius);
        padding: 0.5rem 1rem;
        background: var(--brand);
        color: var(--dark-color);
        margin-left: 0.5rem;
    }

    .signup-cta .link:hover[b-ssvt07dagk] {
        text-decoration: none;
        filter: brightness(1.20);
        transition: 0.25s ease-in;
    }

    /**************** Globe ****************/

    #globe-canvas[b-ssvt07dagk] {
        width: 100%;
        height: 100%;
        display: block;
        cursor: grab;
    }

    .globe-section[b-ssvt07dagk] {
        display: flex;
        align-items: stretch;
        width: 1100px;
    }

    #globe-container[b-ssvt07dagk] {
        flex: 0 0 72%;
        height: 50rem;
        background: transparent;
    }

    .globe-latest-panel[b-ssvt07dagk] {
        flex: 0 0 28%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .globe-latest-header h4[b-ssvt07dagk] {
        margin-bottom: 0.5rem;
        color: var(--text-color);
        font-size: 1.25rem;
    }

    .globe-latest-list[b-ssvt07dagk] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .globe-latest-card[b-ssvt07dagk] {
        display: flex;
        justify-content: start;
        align-items: center;
        padding: 0.8rem;
        border-radius: 0.75rem;
        background: var(--background-color);
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .globe-latest-card:hover[b-ssvt07dagk] {
        border: 1px solid var(--brand);
        transition: 0.25s;
    }

    .globe-latest-main[b-ssvt07dagk] {
        width: 100%;
    }

    .globe-latest-title[b-ssvt07dagk] {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-color);
    }

    .globe-latest-meta[b-ssvt07dagk] {
        display: flex;
        justify-content: space-between;
        margin-top: 0.15rem;
        font-size: 0.8rem;
        color: var(--text-muted);
    }

    .globe-latest-tag-location[b-ssvt07dagk] {
        width: 35%;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: start;
        gap: 0.35rem;
    }

    .globe-latest-tag-device[b-ssvt07dagk] {
        width: 20%;
        white-space: nowrap;
    }

    .globe-latest-tag-time[b-ssvt07dagk] {
        width: 25%;
        white-space: nowrap;
    }

    /**************** Section Titles ****************/

    .header[b-ssvt07dagk] {
        text-align: center;
        margin-bottom: 3.25rem;
    }

    .kicker[b-ssvt07dagk] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 0.75rem;
        letter-spacing: 0.12em;
        color: var(--text-muted);
        border: 1px solid rgba(255, 255, 255, 0.14);
        padding: 0.4rem 0.75rem;
        border-radius: 999px;
        margin-bottom: 1rem;
        background: transparent;
    }

    .title[b-ssvt07dagk] {
        font-size: clamp(1.8rem, 3vw, 2.6rem);
        line-height: 1.15;
        margin: 0 0 0.75rem 0;
        color: var(--text-color);
    }

    .subtitle[b-ssvt07dagk] {
        margin: 0 auto;
        max-width: 56ch;
        font-size: 1.05rem;
        line-height: 1.6;
        color: var(--text-muted);
    }

    /**************** Features ****************/

    .features[b-ssvt07dagk] {
        padding: 6rem 0;
        color: var(--text-color);
    }

    .features-inner[b-ssvt07dagk] {
        width: min(1100px, calc(100% - 3rem));
        margin: 0 auto;
    }

    /* Grid of feature blocks */
    .feature-grid[b-ssvt07dagk] {
        display: flex;
        flex-direction: column;
        gap: 10rem;
    }

    /* Each feature row */
    .feature[b-ssvt07dagk] {
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        gap: 2.25rem;
        align-items: center;
        /* keep it clean over the starfield */
        background: transparent;
    }

    /* Alternate layout */
    .feature-right[b-ssvt07dagk] {
        grid-template-columns: 1fr 1.1fr;
    }

    .feature-right .feature-copy[b-ssvt07dagk] {
        order: 2;
    }

    .feature-right .feature-media[b-ssvt07dagk] {
        order: 1;
    }

    /* Copy */
    .feature-copy[b-ssvt07dagk] {
        min-width: 0;
    }

    .feature .feature-title[b-ssvt07dagk] {
        font-size: 1.75rem;
        margin: 0 0 0.65rem 0;
        color: var(--text-color);
    }

    .feature-text[b-ssvt07dagk] {
        margin: 0 0 1rem 0;
        color: var(--text-muted);
        line-height: 1.65;
        font-size: 1rem;
    }

    /* Media */
    .feature-media[b-ssvt07dagk] {
        position: relative;
        width: 100%;
        border-radius: 18px;
        /* subtle frame that works on transparent backgrounds */
        border: 1px solid rgba(255, 255, 255, 0.10);
        background: rgba(8, 12, 22, 0.25);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        overflow: hidden;
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
    }

    .feature-image[b-ssvt07dagk],
    .feature-video[b-ssvt07dagk] {
        display: block;
        width: 100%;
        height: auto;
    }

    /* If you want consistent media height (optional) */
    .feature-media[b-ssvt07dagk] {
        aspect-ratio: 16 / 10;
    }

    .feature-image[b-ssvt07dagk],
    .feature-video[b-ssvt07dagk] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Nice subtle glow edge (optional) */
    .feature-media[b-ssvt07dagk]::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    }

    /**************** How it works ****************/

    .hiw[b-ssvt07dagk] {
        padding: 6rem 0;
    }

    .hiw-grid[b-ssvt07dagk] {
        display: grid;
        grid-template-columns: 1.1fr 1.6fr;
        gap: 28px;
        align-items: center;
        margin-top: 1rem;
    }

    .hiw input[type="radio"][b-ssvt07dagk] {
        position: absolute;
        inset: auto;
        opacity: 0;
        pointer-events: none;
    }

    .hiw-list[b-ssvt07dagk] {
        display: grid;
        gap: 14px;
    }

    .hiw-item[b-ssvt07dagk] {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 14px;
        padding: 16px 18px;
        background: transparent;
        cursor: pointer;
        position: relative;
    }

    .hiw-item[b-ssvt07dagk] {
        opacity: .7;
        transition: opacity .2s ease;
    }

    .hiw-item:hover[b-ssvt07dagk] {
        opacity: .9;
    }

    /* base underline */
    .hiw-item[b-ssvt07dagk]::after {
        content: "";
        position: absolute;
        left: 18px;
        right: 18px;
        bottom: -1px;
        height: 3px;
        border-radius: 999px;
        background: var(--brand);
        transform: scaleX(.0);
        transform-origin: left center;
        transition: background .2s ease;
    }

    /* animate the active one only */
    #step-1:checked ~ .hiw-list label[for="step-1"][b-ssvt07dagk]::after,
    #step-2:checked ~ .hiw-list label[for="step-2"][b-ssvt07dagk]::after,
    #step-3:checked ~ .hiw-list label[for="step-3"][b-ssvt07dagk]::after {
        animation: hiwFuse-b-ssvt07dagk 5s linear forwards;
    }

    /* simple fill */
    @keyframes hiwFuse-b-ssvt07dagk {
        from {
            transform: scaleX(.0);
        }

        to {
            transform: scaleX(1);
        }
    }

    .hiw-n[b-ssvt07dagk] {
        width: 3rem;
        height: 3rem;
        border-radius: 12px;
        display: grid;
        place-items: center;
        font-weight: 800;
        color: var(--brand);
        background: transparent;
        border: 2px solid var(--brand);
        font-size: 1.25rem;
    }

    .hiw-title[b-ssvt07dagk] {
        font-weight: 800;
        margin: 0 0 2px 0;
        color: var(--text-color);
    }

    .hiw-item p[b-ssvt07dagk] {
        margin: 0;
        color: var(--text-muted);
        opacity: 0.7;
    }

    /* right column (panel + images) */
    .hiw-panel[b-ssvt07dagk] {
        position: relative;
        min-height: 360px;
        border-radius: 20px;
        padding: 18px;
        background: transparent;
        overflow: hidden;
    }

    .hiw-art[b-ssvt07dagk] {
        position: absolute;
        inset: 18px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transform: translateY(8px) scale(.99);
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .hiw-art img[b-ssvt07dagk] {
        max-width: 100%;
        height: 20rem;
        border-radius: 14px;
        box-shadow: 0 20px 48px rgba(0,0,0,.18);
    }

    /* active label gets full opacity */
    #step-1:checked ~ .hiw-list label[for="step-1"][b-ssvt07dagk],
    #step-2:checked ~ .hiw-list label[for="step-2"][b-ssvt07dagk],
    #step-3:checked ~ .hiw-list label[for="step-3"][b-ssvt07dagk] {
        opacity: 1;
    }

    /* active label's underline accent (optional) */
    #step-1:checked ~ .hiw-list label[for="step-1"][b-ssvt07dagk]::after,
    #step-2:checked ~ .hiw-list label[for="step-2"][b-ssvt07dagk]::after,
    #step-3:checked ~ .hiw-list label[for="step-3"][b-ssvt07dagk]::after {
        background: var(--brand);
    }

    /* active number pill (.hiw-n) inverted color */
    #step-1:checked ~ .hiw-list label[for="step-1"] .hiw-n[b-ssvt07dagk],
    #step-2:checked ~ .hiw-list label[for="step-2"] .hiw-n[b-ssvt07dagk],
    #step-3:checked ~ .hiw-list label[for="step-3"] .hiw-n[b-ssvt07dagk] {
        color: var(--dark-color);
        background: var(--brand);
        border-color: var(--brand);
    }

    #step-1:checked ~ .hiw-panel .art-1[b-ssvt07dagk], #step-2:checked ~ .hiw-panel .art-2[b-ssvt07dagk], #step-3:checked ~ .hiw-panel .art-3[b-ssvt07dagk] {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    /**************** Pricing ****************/

    .plans[b-ssvt07dagk] {
        padding: 6rem 0;
    }

    .plans-grid[b-ssvt07dagk] {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0.5rem;
        width: 900px;
    }

    .plan-card[b-ssvt07dagk] {
        background: var(--background-color);
        border-radius: 16px;
        padding: 1.25rem;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 100%;
        border: 1px solid var(--light-color);
    }

    .plan-card.is-current[b-ssvt07dagk] {
        outline: 1px solid var(--brand);
    }

    .plan-badge[b-ssvt07dagk] {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        background: var(--brand);
        color: var(--dark-color);
        opacity: 0.5;
        font-weight: 600;
        padding: 0.25rem 0.5rem;
        border-radius: 999px;
        font-size: 0.75rem;
    }

    .plan-head .plan-name[b-ssvt07dagk] {
        font-size: 1.125rem;
        color: var(--text-color);
        margin: 0;
    }

    .plan-sub[b-ssvt07dagk] {
        color: var(--light-color);
        font-size: 0.9rem;
        margin-top: 0.25rem;
    }

    .plan-price[b-ssvt07dagk] {
        font-size: 2rem;
        font-weight: 700;
        margin: 0.75rem 0 1rem;
        color: var(--text-color);
    }

    .plan-price .per[b-ssvt07dagk] {
        font-size: 0.9rem;
        margin-left: 0.25rem;
        opacity: 0.7;
    }

    .plan-cta[b-ssvt07dagk] {
        width: 100%;
        height: 2.5rem;
        border-radius: 10px;
        background: transparent;
        color: var(--text-color);
        font-weight: 600;
        cursor: pointer;
        border: 2px solid var(--brand);
    }

    .plan-cta:hover[b-ssvt07dagk] {
        background: var(--brand);
        color: var(--dark-color);
        transition: 0.25s;
    }

    .plan-cta:disabled[b-ssvt07dagk] {
        background: var(--light-color);
        color: var(--text-muted);
        cursor: default;
    }

    .plan-features[b-ssvt07dagk] {
        margin: 1rem 0 0;
        padding: 0;
        list-style: none;
        display: grid;
        gap: 0.5rem;
        color: var(--text-color);
    }

    .plan-features i[b-ssvt07dagk] {
        color: var(--brand);
        margin-right: 0.5rem;
    }

    /**************** Common Questions ****************/

    .common-questions[b-ssvt07dagk] {
        padding: 6rem 0;
        width: min(900px, calc(100% - 3rem));
        margin: 0 auto;
        color: var(--text-color);
    }

    /* List */
    .faq-list[b-ssvt07dagk] {
        display: grid;
        gap: 0.6rem;
    }

    /* Each item: transparent by default */
    .faq-item[b-ssvt07dagk] {
        border-radius: 14px;
        overflow: hidden;
        background: transparent;
        border: 1px solid transparent;
        transition: background 180ms ease, border-color 180ms ease;
    }

    /* Only show background on hover/open */
    .faq-item:hover[b-ssvt07dagk],
    .faq-item[open][b-ssvt07dagk] {
        background: rgba(15, 15, 30, 0.6); /* --background-color */
        border-color: var(--brand);
    }

    /* Question row */
    .faq-q[b-ssvt07dagk] {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem 1.1rem;
        user-select: none;
        color: var(--text-color);
        font-weight: 700;
    }

    .faq-q[b-ssvt07dagk]::-webkit-details-marker {
        display: none;
    }

    /* Chevron icon */
    .faq-chevron[b-ssvt07dagk] {
        width: 2rem;
        height: 2rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        /* keep it minimal */
        background: transparent;
        border: 1px solid transparent;
        color: var(--text-muted);
        flex: 0 0 auto;
        transition: transform 220ms ease, color 180ms ease, background 180ms ease, border-color 180ms ease;
    }

    /* Rotate chevron when open */
    .faq-item[open] .faq-chevron[b-ssvt07dagk] {
        transform: rotate(180deg);
    }

    /* Answer wrapper (smooth open/close) */
    .faq-a[b-ssvt07dagk] {
        padding: 1rem;
        padding-top: 0;
        color: var(--text-muted);
    }

    .faq-a-inner[b-ssvt07dagk] {
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transform: translateY(-6px);
        transition: max-height 260ms ease, opacity 180ms ease, transform 220ms ease;
        will-change: max-height, opacity, transform;
        padding: 0;
    }

    .faq-item[open] .faq-a-inner[b-ssvt07dagk] {
        max-height: 500px; /* bump if you ever add long answers */
        opacity: 1;
        transform: translateY(0);
        padding: 0 0 1.05rem 0;
    }

    .faq-a-inner p[b-ssvt07dagk] {
        margin: 0;
        color: var(--text-muted);
        line-height: 1.65;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 1250px) {

    /**************** CTA ****************/

    .container[b-ssvt07dagk] {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
    }

    .hero[b-ssvt07dagk] {
        position: relative;
        min-height: 55vh;
        display: grid;
        place-items: center;
        overflow: hidden;
        isolation: isolate;
    }

    .hero-panel[b-ssvt07dagk] {
        width: min(920px, 96vw);
        padding: clamp(24px, 4.5vw, 46px);
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .eyebrow[b-ssvt07dagk] {
        display: inline-block;
        margin: 0 0 12px;
        padding: 6px 12px;
        color: var(--dark-color);
        font-weight: 700;
        letter-spacing: 0.12em;
        font-size: 0.7rem;
        text-transform: uppercase;
        border-radius: 999px;
        background: var(--brand);
    }

    .hero-title[b-ssvt07dagk] {
        font-size: clamp(34px, 6vw, 56px);
        line-height: 1.05;
        margin: 0 0 14px;
        letter-spacing: -.01em;
        color: var(--text-color);
    }

    .hero-sub[b-ssvt07dagk] {
        color: var(--text-color);
        font-size: clamp(16px, 2.1vw, 18px);
        margin: 0 0 22px;
    }

    .btn[b-ssvt07dagk] {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.85rem;
        border-radius: var(--sleek-border-radius);
        border: 1px solid transparent;
        cursor: pointer;
        width: 100%;
        justify-content: center;
        font-size: 1.15rem;
    }

    .btn.primary[b-ssvt07dagk] {
        background: var(--brand);
        color: var(--background-color);
    }

    .btn.primary:hover[b-ssvt07dagk] {
        filter: brightness(1.20);
        transition: 0.25s ease-in;
    }

    .btn.company-1[b-ssvt07dagk] {
        width: 100%;
        justify-content: center;
        border: 2px solid var(--brand);
        text-decoration: none;
        color: var(--dark-color);
        background: var(--brand);
    }

    .btn.company-1:hover[b-ssvt07dagk] {
        transition: 0.25s ease-in;
        filter: brightness(1.20) !important;
    }

    .btn.company-1 .icon[b-ssvt07dagk], .btn.company .icon-wrap[b-ssvt07dagk] {
        width: 20px;
        height: 20px;
        display: inline-block;
    }

    .btn.company-2[b-ssvt07dagk] {
        width: 100%;
        justify-content: center;
        border: 2px solid var(--brand);
        text-decoration: none;
        color: var(--text-color);
        background: transparent;
    }

    .btn.company-2:hover[b-ssvt07dagk] {
        background: var(--brand);
        transition: 0.25s ease-in;
        border: 2px solid var(--dark-color);
        color: var(--dark-color);
    }

    .btn.company-2 .icon[b-ssvt07dagk], .btn.company .icon-wrap[b-ssvt07dagk] {
        width: 20px;
        height: 20px;
        display: inline-block;
    }

    .spacing[b-ssvt07dagk] {
        margin-bottom: 1rem;
    }

    .btn.link[b-ssvt07dagk] {
        background: transparent;
        border: none;
        text-decoration: none;
    }

    .or[b-ssvt07dagk] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin: 1rem 0;
    }

    .or[b-ssvt07dagk]::before, .or[b-ssvt07dagk]::after {
        content: "";
        flex: 1;
        height: 2px;
    }

    .or span[b-ssvt07dagk] {
        font-size: .9rem;
        color: var(--text-color);
        opacity: 0.5;
        font-weight: 500;
    }

    .signup-cta[b-ssvt07dagk] {
        font-size: 0.9rem;
        color: var(--text-color);
        text-align: center;
    }

    .signup-cta .link[b-ssvt07dagk] {
        color: var(--brand);
        font-weight: 700;
        text-decoration: none;
        border-radius: var(--sleek-border-radius);
        padding: 0.5rem 1rem;
        background: var(--brand);
        color: var(--dark-color);
        margin-left: 0.5rem;
    }

    .signup-cta .link:hover[b-ssvt07dagk] {
        text-decoration: none;
        filter: brightness(1.20);
        transition: 0.25s ease-in;
    }

    /**************** Globe ****************/

    #globe-canvas[b-ssvt07dagk] {
        width: 100%;
        height: 100%;
        display: block;
        cursor: grab;
    }

    .globe-section[b-ssvt07dagk] {
        display: flex;
        align-items: stretch;
        width: 100%;
    }

    #globe-container[b-ssvt07dagk] {
        width: 100%;
        height: 25rem;
        background: transparent;
    }

    .globe-latest-panel[b-ssvt07dagk] {
        display: none;
    }

    /**************** Section Titles ****************/

    .header[b-ssvt07dagk] {
        text-align: center;
        margin-bottom: 3.25rem;
    }

    .kicker[b-ssvt07dagk] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 0.75rem;
        letter-spacing: 0.12em;
        color: var(--text-muted);
        border: 1px solid rgba(255, 255, 255, 0.14);
        padding: 0.4rem 0.75rem;
        border-radius: 999px;
        margin-bottom: 1rem;
        background: transparent;
    }

    .title[b-ssvt07dagk] {
        font-size: clamp(1.8rem, 3vw, 2.6rem);
        line-height: 1.15;
        margin: 0 0 0.75rem 0;
        color: var(--text-color);
    }

    .subtitle[b-ssvt07dagk] {
        margin: 0 auto;
        max-width: 56ch;
        font-size: 1.05rem;
        line-height: 1.6;
        color: var(--text-muted);
    }

    /**************** Features ****************/

    .features[b-ssvt07dagk] {
        padding: 6rem 2rem;
        color: var(--text-color);
    }

    .features-inner[b-ssvt07dagk] {
        width: 100%;
        margin: 0 auto;
    }

    /* Grid of feature blocks */
    .feature-grid[b-ssvt07dagk] {
        display: flex;
        flex-direction: column;
        gap: 10rem;
    }

    /* Each feature row */
    .feature[b-ssvt07dagk] {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    /* Alternate layout */
    .feature-right[b-ssvt07dagk] {
        grid-template-columns: 1fr;
    }

    .feature-copy[b-ssvt07dagk],
    .feature-media[b-ssvt07dagk],
    .feature-right .feature-copy[b-ssvt07dagk],
    .feature-right .feature-media[b-ssvt07dagk] {
        order: initial;
    }

    .feature-copy[b-ssvt07dagk] {
        text-align: left;
    }

    .feature .feature-title[b-ssvt07dagk] {
        font-size: 1.75rem;
        margin: 0 0 0.65rem 0;
        color: var(--text-color);
    }

    .feature-text[b-ssvt07dagk] {
        margin: 0 0 1rem 0;
        color: var(--text-muted);
        line-height: 1.65;
        font-size: 1rem;
    }

    /* Media */
    .feature-media[b-ssvt07dagk] {
        justify-self: center;
        width: 100%;
        max-width: 520px;
    }

    .feature-image[b-ssvt07dagk],
    .feature-video[b-ssvt07dagk] {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 12px;
    }

    /* If you want consistent media height (optional) */
    .feature-media[b-ssvt07dagk] {
        aspect-ratio: 16 / 10;
    }

    .feature-image[b-ssvt07dagk],
    .feature-video[b-ssvt07dagk] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /**************** How it works ****************/

    .hiw[b-ssvt07dagk] {
        padding: 6rem 2rem;
    }

    .hiw input[type="radio"][b-ssvt07dagk] {
        position: absolute;
        inset: auto;
        opacity: 0;
        pointer-events: none;
    }

    .hiw-list[b-ssvt07dagk] {
        display: grid;
        gap: 14px;
    }

    .hiw-item[b-ssvt07dagk] {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 10px;
        padding: 16px 18px;
        background: transparent;
        cursor: pointer;
        position: relative;
    }

    .hiw-item[b-ssvt07dagk] {
        opacity: .7;
        transition: opacity .2s ease;
    }

    .hiw-item:hover[b-ssvt07dagk] {
        opacity: .9;
    }

    /* base underline */
    .hiw-item[b-ssvt07dagk]::after {
        content: "";
        position: absolute;
        left: 18px;
        right: 18px;
        bottom: -1px;
        height: 3px;
        border-radius: 999px;
        background: var(--brand);
        transform: scaleX(.0); /* ~0% width */
        transform-origin: left center; /* grow from left */
        transition: background .2s ease;
    }

    /* animate the active one only */
    #step-1:checked ~ .hiw-list label[for="step-1"][b-ssvt07dagk]::after,
    #step-2:checked ~ .hiw-list label[for="step-2"][b-ssvt07dagk]::after,
    #step-3:checked ~ .hiw-list label[for="step-3"][b-ssvt07dagk]::after {
        animation: hiwFuse-b-ssvt07dagk 5s linear forwards;
    }

    /* simple fill */
    @keyframes hiwFuse-b-ssvt07dagk {
        from {
            transform: scaleX(.0);
        }

        to {
            transform: scaleX(1);
        }
    }

    .hiw-n[b-ssvt07dagk] {
        width: 3rem;
        height: 3rem;
        border-radius: 12px;
        display: grid;
        place-items: center;
        font-weight: 800;
        color: var(--brand);
        background: transparent;
        border: 2px solid var(--brand);
        font-size: 1.25rem;
    }

    .hiw-description[b-ssvt07dagk] {
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: center;
    }

    .hiw-title[b-ssvt07dagk] {
        font-weight: 800;
        margin: 0 0 2px 0;
        color: var(--text-color);
    }

    .hiw-item p[b-ssvt07dagk] {
        margin: 0;
        color: var(--text-muted);
        opacity: 0.7;
        font-size: 0.85rem;
    }

    /* right column (panel + images) */
    .hiw-panel[b-ssvt07dagk] {
        position: relative;
        min-height: 360px;
        border-radius: 20px;
        padding: 18px;
        background: transparent;
        overflow: hidden;
    }

    .hiw-panel[b-ssvt07dagk] {
        min-height: 260px;
    }

    .hiw-art[b-ssvt07dagk] {
        position: absolute;
        inset: 18px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transform: translateY(8px) scale(.99);
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .hiw-art img[b-ssvt07dagk] {
        max-width: 100%;
        height: 100%;
        border-radius: 14px;
        box-shadow: 0 20px 48px rgba(0,0,0,.18);
        object-fit: cover;
    }

    /* active label gets full opacity */
    #step-1:checked ~ .hiw-list label[for="step-1"][b-ssvt07dagk],
    #step-2:checked ~ .hiw-list label[for="step-2"][b-ssvt07dagk],
    #step-3:checked ~ .hiw-list label[for="step-3"][b-ssvt07dagk] {
        opacity: 1;
    }

    /* active label's underline accent (optional) */
    #step-1:checked ~ .hiw-list label[for="step-1"][b-ssvt07dagk]::after,
    #step-2:checked ~ .hiw-list label[for="step-2"][b-ssvt07dagk]::after,
    #step-3:checked ~ .hiw-list label[for="step-3"][b-ssvt07dagk]::after {
        background: var(--brand);
    }

    /* active number pill (.hiw-n) inverted color */
    #step-1:checked ~ .hiw-list label[for="step-1"] .hiw-n[b-ssvt07dagk],
    #step-2:checked ~ .hiw-list label[for="step-2"] .hiw-n[b-ssvt07dagk],
    #step-3:checked ~ .hiw-list label[for="step-3"] .hiw-n[b-ssvt07dagk] {
        color: var(--dark-color);
        background: var(--brand);
        border-color: var(--brand);
    }

    #step-1:checked ~ .hiw-panel .art-1[b-ssvt07dagk], #step-2:checked ~ .hiw-panel .art-2[b-ssvt07dagk], #step-3:checked ~ .hiw-panel .art-3[b-ssvt07dagk] {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    /**************** Pricing ****************/

    .plans[b-ssvt07dagk] {
        padding: 6rem 2rem;
        margin-left: 2rem;
        margin-right: 2rem;
        width: 100%;
    }

    .plans-grid[b-ssvt07dagk] {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 85%;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0.25rem 0.25rem 0.5rem;
        margin: 1rem 0rem 1rem;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .plans-grid > .plan-card[b-ssvt07dagk] {
        scroll-snap-align: start;
        min-height: unset;
    }

    /* Hide the horizontal scrollbar, keep swipe */
    .plans-grid[b-ssvt07dagk] {
        -ms-overflow-style: none; /* IE/old Edge */
        scrollbar-width: none; /* Firefox */
    }

    .plans-grid[b-ssvt07dagk]::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    .plan-card[b-ssvt07dagk] {
        background: var(--background-color);
        border-radius: 16px;
        padding: 1.25rem;
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 100%;
        border: 2px solid var(--light-color);
    }

    .plan-card.is-current[b-ssvt07dagk] {
        border: 2px solid var(--brand);
    }

    .plan-badge[b-ssvt07dagk] {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        background: var(--brand);
        color: var(--dark-color);
        opacity: 0.5;
        font-weight: 600;
        padding: 0.25rem 0.5rem;
        border-radius: 999px;
        font-size: 0.75rem;
    }

    .plan-head .plan-name[b-ssvt07dagk] {
        font-size: 1.125rem;
        color: var(--text-color);
        margin: 0;
    }

    .plan-sub[b-ssvt07dagk] {
        color: var(--light-color);
        font-size: 0.9rem;
        margin-top: 0.25rem;
    }

    .plan-price[b-ssvt07dagk] {
        font-size: 2rem;
        font-weight: 700;
        margin: 0.75rem 0 1rem;
        color: var(--text-color);
    }

    .plan-price .per[b-ssvt07dagk] {
        font-size: 0.9rem;
        margin-left: 0.25rem;
        opacity: 0.7;
    }

    .plan-cta[b-ssvt07dagk] {
        width: 100%;
        height: 2.75rem;
        font-size: 1rem;
        border-radius: 10px;
        background: transparent;
        color: var(--text-color);
        font-weight: 600;
        cursor: pointer;
        border: 2px solid var(--brand);
    }

    .plan-cta:hover[b-ssvt07dagk] {
        background: var(--brand);
        color: var(--dark-color);
        transition: 0.25s;
    }

    .plan-cta:disabled[b-ssvt07dagk] {
        background: var(--light-color);
        color: var(--text-muted);
        cursor: default;
    }

    .plan-features[b-ssvt07dagk] {
        margin: 1rem 0 0;
        padding: 0;
        list-style: none;
        display: grid;
        gap: 0.5rem;
        color: var(--text-color);
    }

    .plan-features i[b-ssvt07dagk] {
        color: var(--brand);
        margin-right: 0.5rem;
    }

    /**************** Common Questions ****************/

    .common-questions[b-ssvt07dagk] {
        padding: 6rem 2rem;
        width: 100%;
        margin: 0 auto;
        color: var(--text-color);
    }

    /* List */
    .faq-list[b-ssvt07dagk] {
        display: grid;
        gap: 0.6rem;
    }

    /* Each item: transparent by default */
    .faq-item[b-ssvt07dagk] {
        border-radius: 14px;
        overflow: hidden;
        background: transparent;
        border: 1px solid transparent;
        transition: background 180ms ease, border-color 180ms ease;
    }

    /* Only show background on hover/open */
    .faq-item:hover[b-ssvt07dagk],
    .faq-item[open][b-ssvt07dagk] {
        background: rgba(15, 15, 30, 0.6); /* --background-color */
        border-color: var(--brand);
    }

    /* Question row */
    .faq-q[b-ssvt07dagk] {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem 1.1rem;
        user-select: none;
        color: var(--text-color);
        font-weight: 700;
    }

    .faq-q[b-ssvt07dagk]::-webkit-details-marker {
        display: none;
    }

    /* Chevron icon */
    .faq-chevron[b-ssvt07dagk] {
        width: 2rem;
        height: 2rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        /* keep it minimal */
        background: transparent;
        border: 1px solid transparent;
        color: var(--text-muted);
        flex: 0 0 auto;
        transition: transform 220ms ease, color 180ms ease, background 180ms ease, border-color 180ms ease;
    }

    /* Rotate chevron when open */
    .faq-item[open] .faq-chevron[b-ssvt07dagk] {
        transform: rotate(180deg);
    }

    /* Answer wrapper (smooth open/close) */
    .faq-a[b-ssvt07dagk] {
        padding: 1rem;
        padding-top: 0;
        color: var(--text-muted);
    }

    .faq-a-inner[b-ssvt07dagk] {
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transform: translateY(-6px);
        transition: max-height 260ms ease, opacity 180ms ease, transform 220ms ease;
        will-change: max-height, opacity, transform;
        padding: 0;
    }

    .faq-item[open] .faq-a-inner[b-ssvt07dagk] {
        max-height: 500px; /* bump if you ever add long answers */
        opacity: 1;
        transform: translateY(0);
        padding: 0 0 1.05rem 0;
    }

    .faq-a-inner p[b-ssvt07dagk] {
        margin: 0;
        color: var(--text-muted);
        line-height: 1.65;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Pages/Preview.razor.rz.scp.css */
.background--classic[b-laf5com87k] {
    background: linear-gradient(to top, var(--dark-color), var(--light-color));
    min-height: 100vh;
    display: flex;
    overflow: auto;
}

.background--deep-space[b-laf5com87k] {
    position: relative;
    min-height: 100vh;
    display: flex;
    overflow: auto;
    background: radial-gradient(circle at top, #222744 0, #0f111a 40%, #050610 100%);
    background-attachment: fixed;
}

.background--deep-space[b-laf5com87k]::before {
    content: "";
    position: fixed; /* Changed from absolute */
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at center, transparent 0, transparent 55%, rgba(0, 0, 0, 0.6) 100%);
    z-index: 0;
}

.background--nebula[b-laf5com87k] {
    min-height: 100vh;
    display: flex;
    overflow: auto;
    background: radial-gradient(circle at 15% 20%, rgba(34, 227, 255, 0.25), transparent 60%), radial-gradient(circle at 80% 70%, rgba(111, 66, 193, 0.25), transparent 60%), radial-gradient(circle at 40% 90%, rgba(15, 161, 183, 0.25), transparent 60%), linear-gradient(to top, var(--dark-color), var(--light-color));
}

@keyframes spaceDrift-b-laf5com87k {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100vh);
    }
}

.background--starfield[b-laf5com87k] {
    min-height: 100vh;
    display: flex;
    overflow: auto;
    position: relative;
    background: radial-gradient(circle at top, #1c2944 0, #060b19 55%, #020309 100%);
    background-attachment: fixed;
}

.background--starfield[b-laf5com87k]::before,
.background--starfield[b-laf5com87k]::after {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 200vh;
    background: transparent;
    pointer-events: none;
    mix-blend-mode: screen;
}

.background--starfield[b-laf5com87k]::before {
    width: 1px;
    height: 1px;
    opacity: 0.8;
    animation: spaceDrift-b-laf5com87k 150s linear infinite;
    box-shadow: 10vw 10vh #fff, 10vw 110vh #fff, 15vw 80vh #fff, 15vw 180vh #fff, 35vw 12vh #fff, 35vw 112vh #fff, 80vw 22vh #fff, 80vw 122vh #fff, 70vw 80vh #fff, 70vw 180vh #fff, 12vw 95vh #fff, 12vw 195vh #fff, 45vw 45vh #fff, 45vw 145vh #fff, 95vw 95vh #fff, 95vw 195vh #fff, 22vw 33vh #fff, 22vw 133vh #fff, 65vw 12vh #fff, 65vw 112vh #fff, 11vw 65vh #fff, 11vw 165vh #fff, 88vw 44vh #fff, 88vw 144vh #fff, 55vw 55vh #fff, 55vw 155vh #fff, 30vw 90vh #fff, 30vw 190vh #fff, 60vw 30vh #fff, 60vw 130vh #fff, 25vw 25vh #fff, 25vw 125vh #fff, 75vw 75vh #fff, 75vw 175vh #fff, 40vw 60vh #fff, 40vw 160vh #fff, 98vw 50vh #fff, 98vw 150vh #fff, 05vw 05vh #fff, 05vw 105vh #fff;
}

.background--starfield[b-laf5com87k]::after {
    width: 2px;
    height: 2px;
    opacity: 0.6;
    animation: spaceDrift-b-laf5com87k 100s linear infinite;
    box-shadow: 20vw 20vh #b4dcff, 20vw 120vh #b4dcff, 85vw 15vh #fff, 85vw 115vh #fff, 40vw 80vh #b4dcff, 40vw 180vh #b4dcff, 60vw 60vh #fff, 60vw 160vh #fff, 10vw 90vh #b4dcff, 10vw 190vh #b4dcff, 90vw 40vh #fff, 90vw 140vh #fff, 30vw 50vh #b4dcff, 30vw 150vh #b4dcff, 75vw 85vh #fff, 75vw 185vh #fff;
}

.background--futuristic-grid[b-laf5com87k] {
    min-height: 100vh;
    display: flex;
    overflow: auto;
    background: radial-gradient(circle at top, rgba(34, 227, 255, 0.3), transparent 55%), linear-gradient(to top, #050712, #0f111a);
    background-attachment: fixed;
    position: relative;
}

.background--futuristic-grid[b-laf5com87k]::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.7;
    z-index: 0;
}

.background--crimson[b-laf5com87k] {
    min-height: 100vh;
    display: flex;
    overflow: auto;
    position: relative;
    background: radial-gradient(circle at top, #3a0e0e 0, #1a0505 55%, #000000 100%);
    background-attachment: fixed;
}

.background--crimson[b-laf5com87k]::before,
.background--crimson[b-laf5com87k]::after {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 200vh;
    background: transparent;
    pointer-events: none;
    mix-blend-mode: screen;
}

.background--crimson[b-laf5com87k]::before {
    width: 2px;
    height: 2px;
    opacity: 0.6;
    animation: spaceDrift-b-laf5com87k 160s linear infinite;
    box-shadow: 10vw 10vh #ff4d4d, 15vw 80vh #ff4d4d, 35vw 12vh #ff4d4d, 80vw 22vh #ff4d4d, 70vw 80vh #ff8080, 12vw 95vh #ff4d4d, 45vw 45vh #ff4d4d, 95vw 95vh #ff4d4d, 22vw 33vh #ff4d4d, 65vw 12vh #ff8080, 55vw 55vh #ff4d4d, 30vw 90vh #ff4d4d;
}

.background--crimson[b-laf5com87k]::after {
    width: 3px;
    height: 3px;
    opacity: 0.4;
    animation: spaceDrift-b-laf5com87k 120s linear infinite;
    box-shadow: 20vw 20vh #ff9999, 85vw 15vh #ff4d4d, 40vw 80vh #ff9999, 60vw 60vh #ff4d4d, 10vw 90vh #ff9999, 90vw 40vh #ff4d4d;
}

@keyframes auroraFlow-b-laf5com87k {
    0% {
        background-position: 0% 50%;
    }

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

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

.background--aurora[b-laf5com87k] {
    min-height: 100vh;
    display: flex;
    overflow: auto;
    position: relative;
    background: linear-gradient(-45deg, #0b1023, #2b1055, #0a2e38, #050712);
    background-size: 400% 400%;
    animation: auroraFlow-b-laf5com87k 15s ease infinite;
    background-attachment: fixed;
}

.background--aurora[b-laf5com87k]::before {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.3) 100%);
    pointer-events: none;
}

.background--orbital[b-laf5com87k] {
    min-height: 100vh;
    display: flex;
    overflow: auto;
    position: relative;
    background-color: #000;
    background: radial-gradient(circle at 50% 100%, #ffffff 0%, #00aaff 5%, #0055ff 15%, #020514 40%, #000000 100%);
    background-attachment: fixed;
}

.background--orbital[b-laf5com87k]::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: radial-gradient(white 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.3;
    pointer-events: none;
}

.background--stardust[b-laf5com87k] {
    min-height: 100vh;
    display: flex;
    overflow: auto;
    position: relative;
    background: radial-gradient(circle at 20% 10%, #301035 0%, #0a020a 40%, #000000 100%);
    background-attachment: fixed;
}

.background--stardust[b-laf5com87k]::before,
.background--stardust[b-laf5com87k]::after {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 200vh;
    background: transparent;
    pointer-events: none;
    mix-blend-mode: screen;
}

.background--stardust[b-laf5com87k]::before {
    width: 2px;
    height: 2px;
    opacity: 0.8;
    animation: spaceDrift-b-laf5com87k 140s linear infinite;
    box-shadow: 15vw 15vh #ffd700, 15vw 115vh #ffd700, 35vw 55vh #fff5cc, 35vw 155vh #fff5cc, 75vw 25vh #ffaa00, 75vw 125vh #ffaa00, 90vw 85vh #ffd700, 90vw 185vh #ffd700, 10vw 65vh #fff, 10vw 165vh #fff;
}

.background--stardust[b-laf5com87k]::after {
    width: 1px;
    height: 1px;
    opacity: 0.5;
    animation: spaceDrift-b-laf5com87k 100s linear infinite;
    box-shadow: 25vw 35vh #fff, 25vw 135vh #fff, 60vw 10vh #ffd700, 60vw 110vh #ffd700, 85vw 60vh #fff5cc, 85vw 160vh #fff5cc, 45vw 80vh #ffcc00, 45vw 180vh #ffcc00;
}

.background--xenon[b-laf5com87k] {
    min-height: 100vh;
    display: flex;
    overflow: auto;
    position: relative;
    background: radial-gradient(circle at 50% 120%, #0f350f 0%, #020a02 50%, #000000 100%);
    background-attachment: fixed;
}

.background--xenon[b-laf5com87k]::before {
    content: "";
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(90deg, transparent 0, transparent 49px, rgba(0, 255, 0, 0.03) 50px), repeating-linear-gradient(0deg, transparent 0, transparent 49px, rgba(0, 255, 0, 0.03) 50px);
    pointer-events: none;
}

.background--xenon[b-laf5com87k]::after {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 200vh;
    width: 2px;
    height: 2px;
    background: transparent;
    pointer-events: none;
    opacity: 0.6;
    animation: spaceDrift-b-laf5com87k 120s linear infinite;
    box-shadow: 10vw 20vh #00ff00, 10vw 120vh #00ff00, 30vw 80vh #00cc00, 30vw 180vh #00cc00, 60vw 40vh #00ff00, 60vw 140vh #00ff00, 80vw 90vh #ccffcc, 80vw 190vh #ccffcc, 50vw 10vh #00ff00, 50vw 110vh #00ff00;
}

.background--custom[b-laf5com87k] {
    position: relative;
    min-height: 100vh;
    display: flex;
    overflow: auto;
    background-color: var(--dark-color);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.background--custom[b-laf5com87k]::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
    radial-gradient(circle at center, transparent 0%, transparent 55%, rgba(0, 0, 0, 0.6) 100%),
    linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.25) 60%, transparent 100%);
    z-index: 0;
}

.background--custom[b-laf5com87k]::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: rgba(34, 227, 255, 0.15);
    mix-blend-mode: overlay;
    z-index: 1;
}

.background--custom > *[b-laf5com87k] {
    position: relative;
    z-index: 2;
}

/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {
    .form-content[b-laf5com87k] {
        width: 100%;
        /* max-width: 1200px; */
        margin: auto;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    .questions-group[b-laf5com87k] {
        width: 35rem;
        height: 40rem;
        display: flex;
        flex-direction: column;
    }

    /**************** Chatbot ****************/

    .chatbot-group[b-laf5com87k] {
        width: 28rem;
        height: 40rem;
        position: relative;
    }

    .avatar-stage[b-laf5com87k] {
        
    }

    .bot-bubble[b-laf5com87k] {
        position: absolute;
        left: 50%;
        top: -2rem;
        transform: translateX(-5%);
        max-width: 22rem;
        text-align: left;
        color: var(--dark-color);
        background-color: var(--brand);
        border-radius: 12px;
        padding: 10px 12px;
        font-weight: 500;
        font-size: 0.85rem;
        line-height: 1.25;
        box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    }

    .bot-bubble[b-laf5com87k]::after {
        content: "";
        position: absolute;
        left: 2.25rem;
        bottom: -19px;
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-top-color: var(--brand);
        filter: drop-shadow(0 6px 8px rgba(0,0,0,0.15));
    }

    .chat-messages[b-laf5com87k] {
        flex-grow: 1;
        margin-top: 1rem;
        overflow-y: auto;
        padding-bottom: 10rem;
    }

    .message-bot-group[b-laf5com87k] {
        display: flex;
        align-items: start;
        justify-content: start;
        flex-direction: row;
        cursor: pointer;
    }

    .mini-avatar[b-laf5com87k] {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        background: var(--brand);
        color: var(--dark-color);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 1rem;
        margin-right: 0.5rem;
    }

    .message-user-group[b-laf5com87k] {
        display: flex;
        align-items: center;
        justify-content: end;
        cursor: pointer;
    }

    .message-bot[b-laf5com87k] {
        text-align: left;
        color: var(--text-color);
        border-radius: 10px;
        width: fit-content;
        font-weight: 500;
        font-size: 0.85rem;
        padding-top: 8px;
        padding-bottom: 8px;
        padding-right: 12px;
        margin-bottom: 0.5rem;
    }

    .message-user[b-laf5com87k] {
        text-align: right;
        color: var(--text-color);
        background-color: var(--light-color);
        border-radius: 10px;
        width: fit-content;
        padding: 8px 12px;
        font-weight: 500;
        margin-bottom: 0.5rem;
        font-size: 0.85rem;
    }

    /**************** Questions ****************/

    .column[b-laf5com87k] {
        display: flex;
        align-items: start;
        flex-direction: column;
        justify-content: center;
        margin: 5rem 0rem;
    }

    .question-number[b-laf5com87k] {
        color: var(--dark-color);
        background: var(--brand);
        padding: 0.4rem;
        font-size: 0.6rem;
        border-radius: var(--border-radius);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .empty-spacing[b-laf5com87k] {
        padding-top: 3rem;
    }

    .form-input-large[b-laf5com87k] {
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1.75rem;
        font-weight: 500;
    }

    .form-input-large[b-laf5com87k]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    .error-message[b-laf5com87k] {
        color: var(--error-color);
        font-weight: 500;
        font-size: 1rem;
    }

    .form-input-medium[b-laf5com87k] {
        width: 100%;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1.25rem;
        font-weight: 500;
        opacity: 0.5;
    }

    .form-input-medium[b-laf5com87k]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    /**************** Steps ****************/

    .previous-step[b-laf5com87k] {
        background-color: transparent;
        color: white;
        padding: 1rem;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        font-weight: 500;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        width: 6.5rem;
    }

    .previous-step:hover[b-laf5com87k] {
        background: var(--dark-color);
        transition: 0.5s;
    }

    .previous-button-icon[b-laf5com87k] {
        margin-right: 0.5rem;
    }

    .next-step[b-laf5com87k] {
        background-color: var(--light-color);
        color: white;
        padding: 1rem;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        font-weight: 500;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        width: 6.5rem;
        margin-top: 1rem;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.3);
    }

    .next-step:hover[b-laf5com87k] {
        background-color: var(--brand);
        color: var(--dark-color);
        transition: 0.5s;
    }

    .next-button-icon[b-laf5com87k] {
        margin-left: 0.5rem;
    }

    /**************** Powered By ****************/

    .astroform-dock[b-laf5com87k] {
        position: fixed;
        right: 16px;
        bottom: calc(24px + env(safe-area-inset-bottom));
        z-index: 2000;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .astroform-dock-btn[b-laf5com87k] {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(255,255,255,0.10);
        backdrop-filter: blur(10px);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 1.25rem;
        color: var(--text-color);
        border: 0;
        outline: none;
    }

    .astroform-dock-btn:hover[b-laf5com87k] {
        background: var(--brand);
        color: var(--dark-color);
        transition: 0.25s;
    }

    .astroform-dock-btn:disabled[b-laf5com87k] {
        opacity: 0.45;
        cursor: not-allowed;
    }

    .astroform-dock-icon[b-laf5com87k] {
        width: 22px;
        height: 22px;
    }

    .astroform-dock-pill[b-laf5com87k] {
        height: 44px;
        padding: 0 14px;
        background: rgba(255,255,255,0.10);
        backdrop-filter: blur(10px);
        border-radius: 999px;
        backdrop-filter: blur(10px);
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--text-color);
        white-space: nowrap;
        font-weight: 700;
        text-decoration: none;
    }

    .astroform-dock-pill:hover[b-laf5com87k] {
        background: var(--brand);
        color: var(--dark-color);
        transition: 0.25s;
        cursor: pointer;
    }

    .astroform-dock-brand[b-laf5com87k] {
        font-size: 13px;
        opacity: 0.9;
    }

    .mobile[b-laf5com87k] {
        display: none;
    }

    /**************** Animations ****************/

    @keyframes fadeIn-b-laf5com87k {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes fadeOut-b-laf5com87k {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }

    .fade-in[b-laf5com87k] {
        animation: fadeIn-b-laf5com87k 1s ease-out forwards;
    }

    .fade-out[b-laf5com87k] {
        animation: fadeOut-b-laf5com87k 1s ease-out forwards;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {
    .form-content[b-laf5com87k] {
        width: 100%;
        /* max-width: 1200px; */
        margin: auto;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    .questions-group[b-laf5com87k] {
        width: 30rem;
        height: 30rem;
        display: flex;
        flex-direction: column;
    }

    /**************** Chatbot ****************/

    .chatbot-group[b-laf5com87k] {
        width: 22rem;
        height: 30rem;
        position: relative;
    }

    .avatar-stage[b-laf5com87k] {
    }

    .bot-bubble[b-laf5com87k] {
        position: absolute;
        left: 50%;
        top: -3rem;
        transform: translateX(-5%);
        max-width: 22rem;
        text-align: left;
        color: var(--dark-color);
        background-color: var(--brand);
        border-radius: 12px;
        padding: 6px 10px;
        font-weight: 500;
        font-size: 0.75rem;
        line-height: 1.25;
        box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    }

    .bot-bubble[b-laf5com87k]::after {
        content: "";
        position: absolute;
        left: 2.25rem;
        bottom: -19px;
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-top-color: var(--brand);
        filter: drop-shadow(0 6px 8px rgba(0,0,0,0.15));
    }

    .chat-messages[b-laf5com87k] {
        flex-grow: 1;
        margin-top: 1rem;
        overflow-y: auto;
        padding-bottom: 8rem;
    }

    .message-bot-group[b-laf5com87k] {
        display: flex;
        align-items: start;
        justify-content: start;
        flex-direction: row;
        cursor: pointer;
    }

    .mini-avatar[b-laf5com87k] {
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        background: var(--brand);
        color: var(--dark-color);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.85rem;
        margin-right: 0.35rem;
    }

    .message-user-group[b-laf5com87k] {
        display: flex;
        align-items: center;
        justify-content: end;
        cursor: pointer;
    }

    .message-bot[b-laf5com87k] {
        text-align: left;
        color: var(--text-color);
        border-radius: 10px;
        width: fit-content;
        font-weight: 500;
        font-size: 0.75rem;
        padding-top: 6px;
        padding-bottom: 6px;
        padding-right: 10px;
        margin-bottom: 0.35rem;
    }

    .message-user[b-laf5com87k] {
        text-align: right;
        color: var(--text-color);
        background-color: var(--light-color);
        border-radius: 10px;
        width: fit-content;
        padding: 6px 10px;
        font-weight: 500;
        margin-bottom: 0.35rem;
        font-size: 0.75rem;
    }

    /**************** Questions ****************/

    .column[b-laf5com87k] {
        display: flex;
        align-items: start;
        flex-direction: column;
        justify-content: center;
        margin: 4rem 0rem;
    }

    .question-number[b-laf5com87k] {
        color: var(--dark-color);
        background: var(--brand);
        padding: 0.4rem;
        font-size: 0.55rem;
        border-radius: var(--border-radius);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        margin-bottom: 0.35rem;
    }

    .empty-spacing[b-laf5com87k] {
        padding-top: 2rem;
    }

    .form-input-large[b-laf5com87k] {
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1.5rem;
        font-weight: 500;
    }

        .form-input-large[b-laf5com87k]::placeholder {
            color: var(--text-color);
            opacity: 0.5;
        }

    .error-message[b-laf5com87k] {
        color: var(--error-color);
        font-weight: 500;
        font-size: 0.85rem;
    }

    .form-input-medium[b-laf5com87k] {
        width: 100%;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1rem;
        font-weight: 500;
        opacity: 0.5;
    }

        .form-input-medium[b-laf5com87k]::placeholder {
            color: var(--text-color);
            opacity: 0.5;
        }

    /**************** Steps ****************/

    .previous-step[b-laf5com87k] {
        background-color: transparent;
        color: white;
        padding: 0.85rem;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        font-weight: 500;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        width: 6rem;
    }

        .previous-step:hover[b-laf5com87k] {
            background: var(--dark-color);
            transition: 0.5s;
        }

    .previous-button-icon[b-laf5com87k] {
        margin-right: 0.5rem;
        font-size: 0.85rem;
    }

    .next-step[b-laf5com87k] {
        background-color: var(--light-color);
        color: white;
        padding: 0.85rem;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        font-weight: 500;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        width: 6rem;
        /*margin-top: 0.85rem;*/
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.3);
    }

    .next-step:hover[b-laf5com87k] {
        background-color: var(--brand);
        color: var(--dark-color);
        transition: 0.5s;
    }

    .next-button-icon[b-laf5com87k] {
        margin-left: 0.5rem;
        font-size: 0.85rem;
    }

    /**************** Powered By ****************/

    .astroform-dock[b-laf5com87k] {
        position: fixed;
        right: 16px;
        bottom: calc(24px + env(safe-area-inset-bottom));
        z-index: 2000;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .astroform-dock-btn[b-laf5com87k] {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(255,255,255,0.10);
        backdrop-filter: blur(10px);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 1.25rem;
        color: var(--text-color);
        border: 0;
        outline: none;
    }

    .astroform-dock-btn:hover[b-laf5com87k] {
        background: var(--brand);
        color: var(--dark-color);
        transition: 0.25s;
    }

    .astroform-dock-btn:disabled[b-laf5com87k] {
        opacity: 0.45;
        cursor: not-allowed;
    }

    .astroform-dock-icon[b-laf5com87k] {
        width: 18px;
        height: 18px;
    }

    .astroform-dock-pill[b-laf5com87k] {
        height: 36px;
        padding: 0 14px;
        background: rgba(255,255,255,0.10);
        backdrop-filter: blur(10px);
        border-radius: 999px;
        backdrop-filter: blur(10px);
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--text-color);
        white-space: nowrap;
        font-weight: 700;
        text-decoration: none;
    }

    .astroform-dock-pill:hover[b-laf5com87k] {
        background: var(--brand);
        color: var(--dark-color);
        transition: 0.25s;
        cursor: pointer;
    }

    .astroform-dock-brand[b-laf5com87k] {
        font-size: 13px;
        opacity: 0.9;
    }

    .mobile[b-laf5com87k] {
        display: none;
    }

    /**************** Animations ****************/

    @keyframes fadeIn-b-laf5com87k {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes fadeOut-b-laf5com87k {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }

    .fade-in[b-laf5com87k] {
        animation: fadeIn-b-laf5com87k 1s ease-out forwards;
    }

    .fade-out[b-laf5com87k] {
        animation: fadeOut-b-laf5com87k 1s ease-out forwards;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {

    .form-content[b-laf5com87k] {
        width: 100%;
        margin: auto;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    .questions-group[b-laf5com87k] {
        width: 100%;
        height: 30rem;
        display: flex;
        flex-direction: column;
    }

    .chatbot-group[b-laf5com87k] {
        display: none;
    }

    /**************** Questions ****************/
    
    .column[b-laf5com87k] {
        display: flex;
        align-items: start;
        flex-direction: column;
        justify-content: center;
        margin: 0rem 1rem;
    }

    .question-number[b-laf5com87k] {
        color: var(--dark-color);
        background: var(--brand);
        padding: 0.4rem;
        font-size: 0.55rem;
        border-radius: var(--border-radius);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        margin-bottom: 0.35rem;
    }

    .form-input-large[b-laf5com87k] {
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1.5rem;
        font-weight: 500;
    }

    .form-input-large[b-laf5com87k]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    .error-message[b-laf5com87k] {
        color: var(--error-color);
        font-weight: 500;
        font-size: 0.85rem;
    }

    .form-input-medium[b-laf5com87k] {
        width: 100%;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1rem;
        font-weight: 500;
        opacity: 0.5;
    }

    .form-input-medium[b-laf5com87k]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    /**************** Steps ****************/

    .steps-container[b-laf5com87k] {
        width: 100%;
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        bottom: 0;
        padding: 1rem;
    }

    .previous-step[b-laf5com87k] {
        background-color: var(--brand);
        color: var(--dark-color);
        padding: 0.85rem;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 500;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        width: 3rem;
    }

    .previous-button-icon[b-laf5com87k] {
        font-size: 1rem;
    }

    .next-step[b-laf5com87k] {
        background-color: var(--brand);
        color: var(--dark-color);
        padding: 0.85rem;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 700;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        width: 100%;
        /*margin-top: 0.85rem;*/
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.3);
    }

    .next-button-icon[b-laf5com87k] {
        margin-left: 0.5rem;
        font-size: 1rem;
    }

    .desktop[b-laf5com87k] {
        display: none;
    }

    /**************** Powered By ****************/
    
    .astroform-dock[b-laf5com87k] {
        display: none;
    }

    /**************** Animations ****************/

    @keyframes fadeIn-b-laf5com87k {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes fadeOut-b-laf5com87k {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }

    .fade-in[b-laf5com87k] {
        animation: fadeIn-b-laf5com87k 1s ease-out forwards;
    }

    .fade-out[b-laf5com87k] {
        animation: fadeOut-b-laf5com87k 1s ease-out forwards;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Pages/Privacy.razor.rz.scp.css */
/**************** Header ****************/

html[b-dvzcb5e98d], body[b-dvzcb5e98d] {
    width: 100%;
    overflow-x: hidden;
}

@keyframes spaceDrift-b-dvzcb5e98d {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100vh);
    }
}

main[b-dvzcb5e98d] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    background: radial-gradient(circle at top, #1c2944 0, #060b19 55%, #020309 100%);
    background-attachment: fixed;
}

main[b-dvzcb5e98d]::before,
main[b-dvzcb5e98d]::after {
    content: "";
    position: fixed;
    inset: 0;
    height: 200vh;
    width: 100vw;
    background: transparent;
    pointer-events: none;
    mix-blend-mode: screen;
}

main[b-dvzcb5e98d]::before {
    width: 1px;
    height: 1px;
    opacity: 0.8;
    animation: spaceDrift-b-dvzcb5e98d 150s linear infinite;
    box-shadow: 10vw 10vh #fff, 10vw 110vh #fff, 15vw 80vh #fff, 15vw 180vh #fff, 35vw 12vh #fff, 35vw 112vh #fff, 80vw 22vh #fff, 80vw 122vh #fff, 70vw 80vh #fff, 70vw 180vh #fff, 12vw 95vh #fff, 12vw 195vh #fff, 45vw 45vh #fff, 45vw 145vh #fff, 95vw 95vh #fff, 95vw 195vh #fff, 22vw 33vh #fff, 22vw 133vh #fff, 65vw 12vh #fff, 65vw 112vh #fff, 11vw 65vh #fff, 11vw 165vh #fff, 88vw 44vh #fff, 88vw 144vh #fff, 55vw 55vh #fff, 55vw 155vh #fff, 30vw 90vh #fff, 30vw 190vh #fff, 60vw 30vh #fff, 60vw 130vh #fff, 25vw 25vh #fff, 25vw 125vh #fff, 75vw 75vh #fff, 75vw 175vh #fff, 40vw 60vh #fff, 40vw 160vh #fff, 98vw 50vh #fff, 98vw 150vh #fff, 05vw 05vh #fff, 05vw 105vh #fff;
}

main[b-dvzcb5e98d]::after {
    width: 2px;
    height: 2px;
    opacity: 0.6;
    animation: spaceDrift-b-dvzcb5e98d 100s linear infinite;
    box-shadow: 20vw 20vh #b4dcff, 20vw 120vh #b4dcff, 85vw 15vh #fff, 85vw 115vh #fff, 40vw 80vh #b4dcff, 40vw 180vh #b4dcff, 60vw 60vh #fff, 60vw 160vh #fff, 10vw 90vh #b4dcff, 10vw 190vh #b4dcff, 90vw 40vh #fff, 90vw 140vh #fff, 30vw 50vh #b4dcff, 30vw 150vh #b4dcff, 75vw 85vh #fff, 75vw 185vh #fff;
}

.policy[b-dvzcb5e98d] {
    max-width: 860px;
    margin-top: 120px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 8vh;
    padding: 0 24px 0px;
    color: var(--text-muted);
    line-height: 1.6;
}

.policy h1[b-dvzcb5e98d] {
    font-size: 2rem;
    margin: 0 0 8px;
    color: var(--text-color);
}

.policy .updated[b-dvzcb5e98d] {
    color: var(--text-color);
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.policy h2[b-dvzcb5e98d] {
    font-size: 1.25rem;
    margin: 28px 0 8px;
    color: var(--text-color);
}

.policy h3[b-dvzcb5e98d] {
    font-size: 1.05rem;
    margin: 18px 0 6px;
    color: var(--text-color);
}

.policy p[b-dvzcb5e98d] {
    margin: 8px 0 12px;
}

.policy ul[b-dvzcb5e98d] {
    margin: 8px 0 16px 18px;
}

.policy li[b-dvzcb5e98d] {
    margin: 6px 0;
}

.policy blockquote[b-dvzcb5e98d] {
    background: var(--background-color);
    border-left: 4px solid var(--brand);
    padding: 12px 14px;
    border-radius: 6px;
    color: var(--text-muted);
}

a[b-dvzcb5e98d] {
    color: var(--text-color);
}

a:hover[b-dvzcb5e98d] {
    color: var(--brand);
}
/* _content/AstroFormsFrontendServer.App/Components/Pages/PublicForm.razor.rz.scp.css */
.background--classic[b-4oul4owjr1] {
    background: linear-gradient(to top, var(--dark-color), var(--light-color));
    min-height: 100vh;
    display: flex;
    overflow: auto;
}

.background--deep-space[b-4oul4owjr1] {
    position: relative;
    min-height: 100vh;
    display: flex;
    overflow: auto;
    background: radial-gradient(circle at top, #222744 0, #0f111a 40%, #050610 100%);
    background-attachment: fixed;
}

.background--deep-space[b-4oul4owjr1]::before {
    content: "";
    position: fixed; /* Changed from absolute */
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at center, transparent 0, transparent 55%, rgba(0, 0, 0, 0.6) 100%);
    z-index: 0;
}

.background--nebula[b-4oul4owjr1] {
    min-height: 100vh;
    display: flex;
    overflow: auto;
    background: radial-gradient(circle at 15% 20%, rgba(34, 227, 255, 0.25), transparent 60%), radial-gradient(circle at 80% 70%, rgba(111, 66, 193, 0.25), transparent 60%), radial-gradient(circle at 40% 90%, rgba(15, 161, 183, 0.25), transparent 60%), linear-gradient(to top, var(--dark-color), var(--light-color));
}

@keyframes spaceDrift-b-4oul4owjr1 {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100vh);
    }
}

.background--starfield[b-4oul4owjr1] {
    min-height: 100vh;
    display: flex;
    overflow: auto;
    position: relative;
    background: radial-gradient(circle at top, #1c2944 0, #060b19 55%, #020309 100%);
    background-attachment: fixed;
}

.background--starfield[b-4oul4owjr1]::before,
.background--starfield[b-4oul4owjr1]::after {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 200vh;
    background: transparent;
    pointer-events: none;
    mix-blend-mode: screen;
}

.background--starfield[b-4oul4owjr1]::before {
    width: 1px;
    height: 1px;
    opacity: 0.8;
    animation: spaceDrift-b-4oul4owjr1 150s linear infinite;
    box-shadow: 10vw 10vh #fff, 10vw 110vh #fff, 15vw 80vh #fff, 15vw 180vh #fff, 35vw 12vh #fff, 35vw 112vh #fff, 80vw 22vh #fff, 80vw 122vh #fff, 70vw 80vh #fff, 70vw 180vh #fff, 12vw 95vh #fff, 12vw 195vh #fff, 45vw 45vh #fff, 45vw 145vh #fff, 95vw 95vh #fff, 95vw 195vh #fff, 22vw 33vh #fff, 22vw 133vh #fff, 65vw 12vh #fff, 65vw 112vh #fff, 11vw 65vh #fff, 11vw 165vh #fff, 88vw 44vh #fff, 88vw 144vh #fff, 55vw 55vh #fff, 55vw 155vh #fff, 30vw 90vh #fff, 30vw 190vh #fff, 60vw 30vh #fff, 60vw 130vh #fff, 25vw 25vh #fff, 25vw 125vh #fff, 75vw 75vh #fff, 75vw 175vh #fff, 40vw 60vh #fff, 40vw 160vh #fff, 98vw 50vh #fff, 98vw 150vh #fff, 05vw 05vh #fff, 05vw 105vh #fff;
}

.background--starfield[b-4oul4owjr1]::after {
    width: 2px;
    height: 2px;
    opacity: 0.6;
    animation: spaceDrift-b-4oul4owjr1 100s linear infinite;
    box-shadow: 20vw 20vh #b4dcff, 20vw 120vh #b4dcff, 85vw 15vh #fff, 85vw 115vh #fff, 40vw 80vh #b4dcff, 40vw 180vh #b4dcff, 60vw 60vh #fff, 60vw 160vh #fff, 10vw 90vh #b4dcff, 10vw 190vh #b4dcff, 90vw 40vh #fff, 90vw 140vh #fff, 30vw 50vh #b4dcff, 30vw 150vh #b4dcff, 75vw 85vh #fff, 75vw 185vh #fff;
}

.background--futuristic-grid[b-4oul4owjr1] {
    min-height: 100vh;
    display: flex;
    overflow: auto;
    background: radial-gradient(circle at top, rgba(34, 227, 255, 0.3), transparent 55%), linear-gradient(to top, #050712, #0f111a);
    background-attachment: fixed;
    position: relative;
}

.background--futuristic-grid[b-4oul4owjr1]::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.7;
    z-index: 0;
}

.background--crimson[b-4oul4owjr1] {
    min-height: 100vh;
    display: flex;
    overflow: auto;
    position: relative;
    background: radial-gradient(circle at top, #3a0e0e 0, #1a0505 55%, #000000 100%);
    background-attachment: fixed;
}

.background--crimson[b-4oul4owjr1]::before,
.background--crimson[b-4oul4owjr1]::after {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 200vh;
    background: transparent;
    pointer-events: none;
    mix-blend-mode: screen;
}

.background--crimson[b-4oul4owjr1]::before {
    width: 2px;
    height: 2px;
    opacity: 0.6;
    animation: spaceDrift-b-4oul4owjr1 160s linear infinite;
    box-shadow: 10vw 10vh #ff4d4d, 15vw 80vh #ff4d4d, 35vw 12vh #ff4d4d, 80vw 22vh #ff4d4d, 70vw 80vh #ff8080, 12vw 95vh #ff4d4d, 45vw 45vh #ff4d4d, 95vw 95vh #ff4d4d, 22vw 33vh #ff4d4d, 65vw 12vh #ff8080, 55vw 55vh #ff4d4d, 30vw 90vh #ff4d4d;
}

.background--crimson[b-4oul4owjr1]::after {
    width: 3px;
    height: 3px;
    opacity: 0.4;
    animation: spaceDrift-b-4oul4owjr1 120s linear infinite;
    box-shadow: 20vw 20vh #ff9999, 85vw 15vh #ff4d4d, 40vw 80vh #ff9999, 60vw 60vh #ff4d4d, 10vw 90vh #ff9999, 90vw 40vh #ff4d4d;
}

@keyframes auroraFlow-b-4oul4owjr1 {
    0% {
        background-position: 0% 50%;
    }

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

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

.background--aurora[b-4oul4owjr1] {
    min-height: 100vh;
    display: flex;
    overflow: auto;
    position: relative;
    background: linear-gradient(-45deg, #0b1023, #2b1055, #0a2e38, #050712);
    background-size: 400% 400%;
    animation: auroraFlow-b-4oul4owjr1 15s ease infinite;
    background-attachment: fixed;
}

.background--aurora[b-4oul4owjr1]::before {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.3) 100%);
    pointer-events: none;
}

.background--orbital[b-4oul4owjr1] {
    min-height: 100vh;
    display: flex;
    overflow: auto;
    position: relative;
    background-color: #000;
    background: radial-gradient(circle at 50% 100%, #ffffff 0%, #00aaff 5%, #0055ff 15%, #020514 40%, #000000 100%);
    background-attachment: fixed;
}

.background--orbital[b-4oul4owjr1]::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: radial-gradient(white 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.3;
    pointer-events: none;
}

.background--stardust[b-4oul4owjr1] {
    min-height: 100vh;
    display: flex;
    overflow: auto;
    position: relative;
    background: radial-gradient(circle at 20% 10%, #301035 0%, #0a020a 40%, #000000 100%);
    background-attachment: fixed;
}

.background--stardust[b-4oul4owjr1]::before,
.background--stardust[b-4oul4owjr1]::after {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 200vh;
    background: transparent;
    pointer-events: none;
    mix-blend-mode: screen;
}

.background--stardust[b-4oul4owjr1]::before {
    width: 2px;
    height: 2px;
    opacity: 0.8;
    animation: spaceDrift-b-4oul4owjr1 140s linear infinite;
    box-shadow: 15vw 15vh #ffd700, 15vw 115vh #ffd700, 35vw 55vh #fff5cc, 35vw 155vh #fff5cc, 75vw 25vh #ffaa00, 75vw 125vh #ffaa00, 90vw 85vh #ffd700, 90vw 185vh #ffd700, 10vw 65vh #fff, 10vw 165vh #fff;
}

.background--stardust[b-4oul4owjr1]::after {
    width: 1px;
    height: 1px;
    opacity: 0.5;
    animation: spaceDrift-b-4oul4owjr1 100s linear infinite;
    box-shadow: 25vw 35vh #fff, 25vw 135vh #fff, 60vw 10vh #ffd700, 60vw 110vh #ffd700, 85vw 60vh #fff5cc, 85vw 160vh #fff5cc, 45vw 80vh #ffcc00, 45vw 180vh #ffcc00;
}

.background--xenon[b-4oul4owjr1] {
    min-height: 100vh;
    display: flex;
    overflow: auto;
    position: relative;
    background: radial-gradient(circle at 50% 120%, #0f350f 0%, #020a02 50%, #000000 100%);
    background-attachment: fixed;
}

.background--xenon[b-4oul4owjr1]::before {
    content: "";
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(90deg, transparent 0, transparent 49px, rgba(0, 255, 0, 0.03) 50px), repeating-linear-gradient(0deg, transparent 0, transparent 49px, rgba(0, 255, 0, 0.03) 50px);
    pointer-events: none;
}

.background--xenon[b-4oul4owjr1]::after {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 200vh;
    width: 2px;
    height: 2px;
    background: transparent;
    pointer-events: none;
    opacity: 0.6;
    animation: spaceDrift-b-4oul4owjr1 120s linear infinite;
    box-shadow: 10vw 20vh #00ff00, 10vw 120vh #00ff00, 30vw 80vh #00cc00, 30vw 180vh #00cc00, 60vw 40vh #00ff00, 60vw 140vh #00ff00, 80vw 90vh #ccffcc, 80vw 190vh #ccffcc, 50vw 10vh #00ff00, 50vw 110vh #00ff00;
}

.background--custom[b-4oul4owjr1] {
    position: relative;
    min-height: 100vh;
    display: flex;
    overflow: auto;
    background-color: var(--dark-color);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.background--custom[b-4oul4owjr1]::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at center, transparent 0%, transparent 55%, rgba(0, 0, 0, 0.6) 100%), linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.25) 60%, transparent 100%);
    z-index: 0;
}

.background--custom[b-4oul4owjr1]::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: rgba(34, 227, 255, 0.15);
    mix-blend-mode: overlay;
    z-index: 1;
}

.background--custom > *[b-4oul4owjr1] {
    position: relative;
    z-index: 2;
}

/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {
    .form-content[b-4oul4owjr1] {
        width: 100%;
        /* max-width: 1200px; */
        margin: auto;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    .questions-group[b-4oul4owjr1] {
        width: 35rem;
        height: 40rem;
        display: flex;
        flex-direction: column;
    }

    /**************** Chatbot ****************/

    .chatbot-group[b-4oul4owjr1] {
        width: 28rem;
        height: 40rem;
        position: relative;
    }

    .avatar-stage[b-4oul4owjr1] {
    }

    .bot-bubble[b-4oul4owjr1] {
        position: absolute;
        left: 50%;
        top: -2rem;
        transform: translateX(-5%);
        max-width: 22rem;
        text-align: left;
        color: var(--dark-color);
        background-color: var(--brand);
        border-radius: 12px;
        padding: 10px 12px;
        font-weight: 500;
        font-size: 0.85rem;
        line-height: 1.25;
        box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    }

    .bot-bubble[b-4oul4owjr1]::after {
        content: "";
        position: absolute;
        left: 2.25rem;
        bottom: -19px;
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-top-color: var(--brand);
        filter: drop-shadow(0 6px 8px rgba(0,0,0,0.15));
    }

    .chat-messages[b-4oul4owjr1] {
        flex-grow: 1;
        margin-top: 1rem;
        overflow-y: auto;
        padding-bottom: 10rem;
    }

    .message-bot-group[b-4oul4owjr1] {
        display: flex;
        align-items: start;
        justify-content: start;
        flex-direction: row;
        cursor: pointer;
    }

    .mini-avatar[b-4oul4owjr1] {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        background: var(--brand);
        color: var(--dark-color);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 1rem;
        margin-right: 0.5rem;
    }

    .message-user-group[b-4oul4owjr1] {
        display: flex;
        align-items: center;
        justify-content: end;
        cursor: pointer;
    }

    .message-bot[b-4oul4owjr1] {
        text-align: left;
        color: var(--text-color);
        border-radius: 10px;
        width: fit-content;
        font-weight: 500;
        font-size: 0.85rem;
        padding-top: 8px;
        padding-bottom: 8px;
        padding-right: 12px;
        margin-bottom: 0.5rem;
    }

    .message-user[b-4oul4owjr1] {
        text-align: right;
        color: var(--text-color);
        background-color: var(--light-color);
        border-radius: 10px;
        width: fit-content;
        padding: 8px 12px;
        font-weight: 500;
        margin-bottom: 0.5rem;
        font-size: 0.85rem;
    }

    /**************** Questions ****************/

    .column[b-4oul4owjr1] {
        display: flex;
        align-items: start;
        flex-direction: column;
        justify-content: center;
        margin: 5rem 0rem;
    }

    .question-number[b-4oul4owjr1] {
        color: var(--dark-color);
        background: var(--brand);
        padding: 0.4rem;
        font-size: 0.6rem;
        border-radius: var(--border-radius);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .empty-spacing[b-4oul4owjr1] {
        padding-top: 3rem;
    }

    .form-input-large[b-4oul4owjr1] {
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1.75rem;
        font-weight: 500;
    }

    .form-input-large[b-4oul4owjr1]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    .error-message[b-4oul4owjr1] {
        color: var(--error-color);
        font-weight: 500;
        font-size: 1rem;
    }

    .form-input-medium[b-4oul4owjr1] {
        width: 100%;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1.25rem;
        font-weight: 500;
        opacity: 0.5;
    }

    .form-input-medium[b-4oul4owjr1]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    /**************** Steps ****************/

    .previous-step[b-4oul4owjr1] {
        background-color: transparent;
        color: white;
        padding: 1rem;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        font-weight: 500;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        width: 6.5rem;
    }

    .previous-step:hover[b-4oul4owjr1] {
        background: var(--dark-color);
        transition: 0.5s;
    }

    .previous-button-icon[b-4oul4owjr1] {
        margin-right: 0.5rem;
    }

    .next-step[b-4oul4owjr1] {
        background-color: var(--light-color);
        color: white;
        padding: 1rem;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        font-weight: 500;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        width: 6.5rem;
        margin-top: 1rem;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.3);
    }

    .next-step:hover[b-4oul4owjr1] {
        background-color: var(--brand);
        color: var(--dark-color);
        transition: 0.5s;
    }

    .next-button-icon[b-4oul4owjr1] {
        margin-left: 0.5rem;
    }

    /**************** Powered By ****************/

    .astroform-dock[b-4oul4owjr1] {
        position: fixed;
        right: 16px;
        bottom: calc(24px + env(safe-area-inset-bottom));
        z-index: 2000;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .astroform-dock-btn[b-4oul4owjr1] {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(255,255,255,0.10);
        backdrop-filter: blur(10px);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 1.25rem;
        color: var(--text-color);
        border: 0;
        outline: none;
    }

    .astroform-dock-btn:hover[b-4oul4owjr1] {
        background: var(--brand);
        color: var(--dark-color);
        transition: 0.25s;
    }

    .astroform-dock-btn:disabled[b-4oul4owjr1] {
        opacity: 0.45;
        cursor: not-allowed;
    }

    .astroform-dock-icon[b-4oul4owjr1] {
        width: 22px;
        height: 22px;
    }

    .astroform-dock-pill[b-4oul4owjr1] {
        height: 44px;
        padding: 0 14px;
        background: rgba(255,255,255,0.10);
        backdrop-filter: blur(10px);
        border-radius: 999px;
        backdrop-filter: blur(10px);
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--text-color);
        white-space: nowrap;
        font-weight: 700;
        text-decoration: none;
    }

    .astroform-dock-pill:hover[b-4oul4owjr1] {
        background: var(--brand);
        color: var(--dark-color);
        transition: 0.25s;
        cursor: pointer;
    }

    .astroform-dock-brand[b-4oul4owjr1] {
        font-size: 13px;
        opacity: 0.9;
    }

    .mobile[b-4oul4owjr1] {
        display: none;
    }

    /**************** Animations ****************/

    @keyframes fadeIn-b-4oul4owjr1 {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes fadeOut-b-4oul4owjr1 {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }

    .fade-in[b-4oul4owjr1] {
        animation: fadeIn-b-4oul4owjr1 1s ease-out forwards;
    }

    .fade-out[b-4oul4owjr1] {
        animation: fadeOut-b-4oul4owjr1 1s ease-out forwards;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {
    .form-content[b-4oul4owjr1] {
        width: 100%;
        /* max-width: 1200px; */
        margin: auto;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    .questions-group[b-4oul4owjr1] {
        width: 30rem;
        height: 30rem;
        display: flex;
        flex-direction: column;
    }

    /**************** Chatbot ****************/

    .chatbot-group[b-4oul4owjr1] {
        width: 22rem;
        height: 30rem;
        position: relative;
    }

    .avatar-stage[b-4oul4owjr1] {
    }

    .bot-bubble[b-4oul4owjr1] {
        position: absolute;
        left: 50%;
        top: -3rem;
        transform: translateX(-5%);
        max-width: 22rem;
        text-align: left;
        color: var(--dark-color);
        background-color: var(--brand);
        border-radius: 12px;
        padding: 6px 10px;
        font-weight: 500;
        font-size: 0.75rem;
        line-height: 1.25;
        box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    }

    .bot-bubble[b-4oul4owjr1]::after {
        content: "";
        position: absolute;
        left: 2.25rem;
        bottom: -19px;
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-top-color: var(--brand);
        filter: drop-shadow(0 6px 8px rgba(0,0,0,0.15));
    }

    .chat-messages[b-4oul4owjr1] {
        flex-grow: 1;
        margin-top: 1rem;
        overflow-y: auto;
        padding-bottom: 8rem;
    }

    .message-bot-group[b-4oul4owjr1] {
        display: flex;
        align-items: start;
        justify-content: start;
        flex-direction: row;
        cursor: pointer;
    }

    .mini-avatar[b-4oul4owjr1] {
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        background: var(--brand);
        color: var(--dark-color);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.85rem;
        margin-right: 0.35rem;
    }

    .message-user-group[b-4oul4owjr1] {
        display: flex;
        align-items: center;
        justify-content: end;
        cursor: pointer;
    }

    .message-bot[b-4oul4owjr1] {
        text-align: left;
        color: var(--text-color);
        border-radius: 10px;
        width: fit-content;
        font-weight: 500;
        font-size: 0.75rem;
        padding-top: 6px;
        padding-bottom: 6px;
        padding-right: 10px;
        margin-bottom: 0.35rem;
    }

    .message-user[b-4oul4owjr1] {
        text-align: right;
        color: var(--text-color);
        background-color: var(--light-color);
        border-radius: 10px;
        width: fit-content;
        padding: 6px 10px;
        font-weight: 500;
        margin-bottom: 0.35rem;
        font-size: 0.75rem;
    }

    /**************** Questions ****************/

    .column[b-4oul4owjr1] {
        display: flex;
        align-items: start;
        flex-direction: column;
        justify-content: center;
        margin: 4rem 0rem;
    }

    .question-number[b-4oul4owjr1] {
        color: var(--dark-color);
        background: var(--brand);
        padding: 0.4rem;
        font-size: 0.55rem;
        border-radius: var(--border-radius);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        margin-bottom: 0.35rem;
    }

    .empty-spacing[b-4oul4owjr1] {
        padding-top: 2rem;
    }

    .form-input-large[b-4oul4owjr1] {
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1.5rem;
        font-weight: 500;
    }

    .form-input-large[b-4oul4owjr1]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    .error-message[b-4oul4owjr1] {
        color: var(--error-color);
        font-weight: 500;
        font-size: 0.85rem;
    }

    .form-input-medium[b-4oul4owjr1] {
        width: 100%;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1rem;
        font-weight: 500;
        opacity: 0.5;
    }

    .form-input-medium[b-4oul4owjr1]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    /**************** Steps ****************/

    .previous-step[b-4oul4owjr1] {
        background-color: transparent;
        color: white;
        padding: 0.85rem;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        font-weight: 500;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        width: 6rem;
    }

    .previous-step:hover[b-4oul4owjr1] {
        background: var(--dark-color);
        transition: 0.5s;
    }

    .previous-button-icon[b-4oul4owjr1] {
        margin-right: 0.5rem;
        font-size: 0.85rem;
    }

    .next-step[b-4oul4owjr1] {
        background-color: var(--light-color);
        color: white;
        padding: 0.85rem;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        font-weight: 500;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        width: 6rem;
        /*margin-top: 0.85rem;*/
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.3);
    }

    .next-step:hover[b-4oul4owjr1] {
        background-color: var(--brand);
        color: var(--dark-color);
        transition: 0.5s;
    }

    .next-button-icon[b-4oul4owjr1] {
        margin-left: 0.5rem;
        font-size: 0.85rem;
    }

    /**************** Animations ****************/

    @keyframes fadeIn-b-4oul4owjr1 {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes fadeOut-b-4oul4owjr1 {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }

    .fade-in[b-4oul4owjr1] {
        animation: fadeIn-b-4oul4owjr1 1s ease-out forwards;
    }

    .fade-out[b-4oul4owjr1] {
        animation: fadeOut-b-4oul4owjr1 1s ease-out forwards;
    }

    /**************** Powered By ****************/

    .astroform-dock[b-4oul4owjr1] {
        position: fixed;
        right: 16px;
        bottom: calc(24px + env(safe-area-inset-bottom));
        z-index: 2000;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .astroform-dock-btn[b-4oul4owjr1] {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(255,255,255,0.10);
        backdrop-filter: blur(10px);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 1.25rem;
        color: var(--text-color);
        border: 0;
        outline: none;
    }

    .astroform-dock-btn:hover[b-4oul4owjr1] {
        background: var(--brand);
        color: var(--dark-color);
        transition: 0.25s;
    }

    .astroform-dock-btn:disabled[b-4oul4owjr1] {
        opacity: 0.45;
        cursor: not-allowed;
    }

    .astroform-dock-icon[b-4oul4owjr1] {
        width: 18px;
        height: 18px;
    }

    .astroform-dock-pill[b-4oul4owjr1] {
        height: 36px;
        padding: 0 14px;
        background: rgba(255,255,255,0.10);
        backdrop-filter: blur(10px);
        border-radius: 999px;
        backdrop-filter: blur(10px);
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--text-color);
        white-space: nowrap;
        font-weight: 700;
        text-decoration: none;
    }

    .astroform-dock-pill:hover[b-4oul4owjr1] {
        background: var(--brand);
        color: var(--dark-color);
        transition: 0.25s;
        cursor: pointer;
    }

    .astroform-dock-brand[b-4oul4owjr1] {
        font-size: 13px;
        opacity: 0.9;
    }

    .mobile[b-4oul4owjr1] {
        display: none;
    }

    /**************** Animations ****************/

    @keyframes fadeIn-b-4oul4owjr1 {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes fadeOut-b-4oul4owjr1 {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }

    .fade-in[b-4oul4owjr1] {
        animation: fadeIn-b-4oul4owjr1 1s ease-out forwards;
    }

    .fade-out[b-4oul4owjr1] {
        animation: fadeOut-b-4oul4owjr1 1s ease-out forwards;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {

    .form-content[b-4oul4owjr1] {
        width: 100%;
        /* max-width: 1200px; */
        margin: auto;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    .questions-group[b-4oul4owjr1] {
        width: 100%;
        height: 30rem;
        display: flex;
        flex-direction: column;
    }

    .chatbot-group[b-4oul4owjr1] {
        display: none;
    }

    /**************** Questions ****************/

    .column[b-4oul4owjr1] {
        display: flex;
        align-items: start;
        flex-direction: column;
        justify-content: center;
        margin: 0rem 1rem;
    }

    .question-number[b-4oul4owjr1] {
        color: var(--dark-color);
        background: var(--brand);
        padding: 0.4rem;
        font-size: 0.55rem;
        border-radius: var(--border-radius);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        margin-bottom: 0.35rem;
    }

    .form-input-large[b-4oul4owjr1] {
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1.5rem;
        font-weight: 500;
    }

    .form-input-large[b-4oul4owjr1]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    .error-message[b-4oul4owjr1] {
        color: var(--error-color);
        font-weight: 500;
        font-size: 0.85rem;
    }

    .form-input-medium[b-4oul4owjr1] {
        width: 100%;
        background: transparent;
        color: var(--text-color);
        text-align: left;
        font-size: 1rem;
        font-weight: 500;
        opacity: 0.5;
    }

    .form-input-medium[b-4oul4owjr1]::placeholder {
        color: var(--text-color);
        opacity: 0.5;
    }

    /**************** Steps ****************/

    .steps-container[b-4oul4owjr1] {
        width: 100%;
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        bottom: 0;
        padding: 1rem;
    }

    .previous-step[b-4oul4owjr1] {
        background-color: var(--brand);
        color: var(--dark-color);
        padding: 0.85rem;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 500;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        width: 3rem;
    }

    .previous-button-icon[b-4oul4owjr1] {
        font-size: 1rem;
    }

    .next-step[b-4oul4owjr1] {
        background-color: var(--brand);
        color: var(--dark-color);
        padding: 0.85rem;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 700;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        width: 100%;
        /*margin-top: 0.85rem;*/
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.3);
    }

    .next-button-icon[b-4oul4owjr1] {
        margin-left: 0.5rem;
        font-size: 1rem;
    }

    .desktop[b-4oul4owjr1] {
        display: none;
    }

    /**************** Powered By ****************/

    .astroform-dock[b-4oul4owjr1] {
        display: none;
    }

    /**************** Animations ****************/

    @keyframes fadeIn-b-4oul4owjr1 {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes fadeOut-b-4oul4owjr1 {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }

    .fade-in[b-4oul4owjr1] {
        animation: fadeIn-b-4oul4owjr1 1s ease-out forwards;
    }

    .fade-out[b-4oul4owjr1] {
        animation: fadeOut-b-4oul4owjr1 1s ease-out forwards;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Pages/Response.razor.rz.scp.css */
/*********************************************/
/*                                           */
/*               Shared / Base               */
/*        (mobile-first, shared rules)       */
/*                                           */
/*********************************************/

@keyframes spaceDrift-b-kvjv7k4bpa {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100vh);
    }
}

.background[b-kvjv7k4bpa] {
    min-height: 100vh;
    display: flex;
    overflow: auto;
    position: relative;
    background: radial-gradient(circle at top, #1c2944 0, #060b19 55%, #020309 100%);
    background-attachment: fixed;
}

.background[b-kvjv7k4bpa]::before,
.background[b-kvjv7k4bpa]::after {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 200vh;
    background: transparent;
    pointer-events: none;
    mix-blend-mode: screen;
}

.background[b-kvjv7k4bpa]::before {
    width: 1px;
    height: 1px;
    opacity: 0.8;
    animation: spaceDrift-b-kvjv7k4bpa 150s linear infinite;
    box-shadow: 10vw 10vh #fff, 10vw 110vh #fff, 15vw 80vh #fff, 15vw 180vh #fff, 35vw 12vh #fff, 35vw 112vh #fff, 80vw 22vh #fff, 80vw 122vh #fff, 70vw 80vh #fff, 70vw 180vh #fff, 12vw 95vh #fff, 12vw 195vh #fff, 45vw 45vh #fff, 45vw 145vh #fff, 95vw 95vh #fff, 95vw 195vh #fff, 22vw 33vh #fff, 22vw 133vh #fff, 65vw 12vh #fff, 65vw 112vh #fff, 11vw 65vh #fff, 11vw 165vh #fff, 88vw 44vh #fff, 88vw 144vh #fff, 55vw 55vh #fff, 55vw 155vh #fff, 30vw 90vh #fff, 30vw 190vh #fff, 60vw 30vh #fff, 60vw 130vh #fff, 25vw 25vh #fff, 25vw 125vh #fff, 75vw 75vh #fff, 75vw 175vh #fff, 40vw 60vh #fff, 40vw 160vh #fff, 98vw 50vh #fff, 98vw 150vh #fff, 5vw 5vh #fff, 5vw 105vh #fff;
}

.background[b-kvjv7k4bpa]::after {
    width: 2px;
    height: 2px;
    opacity: 0.6;
    animation: spaceDrift-b-kvjv7k4bpa 100s linear infinite;
    box-shadow: 20vw 20vh #b4dcff, 20vw 120vh #b4dcff, 85vw 15vh #fff, 85vw 115vh #fff, 40vw 80vh #b4dcff, 40vw 180vh #b4dcff, 60vw 60vh #fff, 60vw 160vh #fff, 10vw 90vh #b4dcff, 10vw 190vh #b4dcff, 90vw 40vh #fff, 90vw 140vh #fff, 30vw 50vh #b4dcff, 30vw 150vh #b4dcff, 75vw 85vh #fff, 75vw 185vh #fff;
}

.main-container[b-kvjv7k4bpa] {
    width: 100%;
    max-width: 550px;
    padding: 1rem;
    height: auto;
    margin-top: 6rem;
    margin-left: auto;
    margin-right: auto;
}

.questions-list[b-kvjv7k4bpa] {
    list-style-type: none;
    padding-bottom: 8rem;
}

.question-card[b-kvjv7k4bpa] {
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
}

.question-number[b-kvjv7k4bpa] {
    color: var(--dark-color);
    background: var(--brand);
    padding: 0.4rem;
    font-size: 0.6rem;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-bottom: 0.5rem;
    gap: 0.25rem;
}

.question-details[b-kvjv7k4bpa] {
    display: flex;
    position: relative;
    width: 100%;
}

.viewed-badge[b-kvjv7k4bpa] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: var(--brand);
    color: var(--dark-color);
    opacity: 0.5;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
}

.error[b-kvjv7k4bpa] {
    background: var(--error-color);
}

.form-input-large[b-kvjv7k4bpa] {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-color);
    text-align: left;
    font-size: 1.5rem;
    font-weight: 500;
}

.text-input[b-kvjv7k4bpa] {
    width: 100%;
    color: var(--text-muted);
    font-size: 1.5rem;
    font-weight: 500;
    opacity: 0.75;
}

.empty-spacing[b-kvjv7k4bpa] {
    margin-top: 0.5rem;
}

.vertical-statistics-column[b-kvjv7k4bpa] {
    display: none;
}

/*********************************************/
/*                                           */
/*              Laptop and up                */
/*                                           */
/*********************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {
    .main-container[b-kvjv7k4bpa] {
        display: flex;
        max-width: 700px;
        margin: auto;
        height: 30rem;
        flex-direction: column;
        width: 100%;
        padding: 0;
        margin-top: 8rem;
    }

    .questions-list[b-kvjv7k4bpa] {
        padding-bottom: 6rem;
    }

    .question-card[b-kvjv7k4bpa] {
        padding: 1.5rem 0;
    }

    .question-number[b-kvjv7k4bpa] {
        font-size: 0.55rem;
        margin-bottom: 0.35rem;
    }

    .form-input-large[b-kvjv7k4bpa] {
        font-size: 1.5rem;
    }

    .text-input[b-kvjv7k4bpa] {
        font-size: 1.25rem;
    }

    .vertical-statistics-column[b-kvjv7k4bpa] {
        display: flex;
        flex-direction: column;
        position: fixed;
        z-index: 0;
        right: 2rem;
        height: 100%;
        align-items: center;
        justify-content: center;
        gap: 3rem;
    }

    .vertical-statistics-column[b-kvjv7k4bpa]::-webkit-scrollbar {
        height: 0px;
    }
}

/*********************************************/
/*                                           */
/*              Desktop and up               */
/*                                           */
/*********************************************/

@media screen and (min-width: 1626px) {
    .main-container[b-kvjv7k4bpa] {
        display: flex;
        max-width: 900px;
        margin: auto;
        height: 35rem;
        flex-direction: column;
        width: 100%;
        padding: 0;
        margin-top: 10rem;
    }

    .questions-list[b-kvjv7k4bpa] {
        padding-bottom: 8rem;
    }

    .form-input-large[b-kvjv7k4bpa] {
        font-size: 1.75rem;
    }

    .text-input[b-kvjv7k4bpa] {
        font-size: 1.5rem;

    }

    .vertical-statistics-column[b-kvjv7k4bpa] {
        display: flex;
        flex-direction: column;
        position: fixed;
        z-index: 0;
        right: 3rem;
        height: 100%;
        align-items: center;
        justify-content: center;
        gap: 3rem;
    }

    .vertical-statistics-column[b-kvjv7k4bpa]::-webkit-scrollbar {
        height: 0px;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Pages/Responses.razor.rz.scp.css */
/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {

    @keyframes spaceDrift-b-slc0ghnz5b {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(-100vh);
        }
    }

    .background[b-slc0ghnz5b] {
        min-height: 100vh;
        display: flex;
        overflow: auto;
        position: relative;
        background: radial-gradient(circle at top, #1c2944 0, #060b19 55%, #020309 100%);
        background-attachment: fixed;
    }

    .background[b-slc0ghnz5b]::before,
    .background[b-slc0ghnz5b]::after {
        content: "";
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 200vh;
        background: transparent;
        pointer-events: none;
        mix-blend-mode: screen;
    }

    .background[b-slc0ghnz5b]::before {
        width: 1px;
        height: 1px;
        opacity: 0.8;
        animation: spaceDrift-b-slc0ghnz5b 150s linear infinite;
        box-shadow: 10vw 10vh #fff, 10vw 110vh #fff, 15vw 80vh #fff, 15vw 180vh #fff, 35vw 12vh #fff, 35vw 112vh #fff, 80vw 22vh #fff, 80vw 122vh #fff, 70vw 80vh #fff, 70vw 180vh #fff, 12vw 95vh #fff, 12vw 195vh #fff, 45vw 45vh #fff, 45vw 145vh #fff, 95vw 95vh #fff, 95vw 195vh #fff, 22vw 33vh #fff, 22vw 133vh #fff, 65vw 12vh #fff, 65vw 112vh #fff, 11vw 65vh #fff, 11vw 165vh #fff, 88vw 44vh #fff, 88vw 144vh #fff, 55vw 55vh #fff, 55vw 155vh #fff, 30vw 90vh #fff, 30vw 190vh #fff, 60vw 30vh #fff, 60vw 130vh #fff, 25vw 25vh #fff, 25vw 125vh #fff, 75vw 75vh #fff, 75vw 175vh #fff, 40vw 60vh #fff, 40vw 160vh #fff, 98vw 50vh #fff, 98vw 150vh #fff, 05vw 05vh #fff, 05vw 105vh #fff;
    }

    .background[b-slc0ghnz5b]::after {
        width: 2px;
        height: 2px;
        opacity: 0.6;
        animation: spaceDrift-b-slc0ghnz5b 100s linear infinite;
        box-shadow: 20vw 20vh #b4dcff, 20vw 120vh #b4dcff, 85vw 15vh #fff, 85vw 115vh #fff, 40vw 80vh #b4dcff, 40vw 180vh #b4dcff, 60vw 60vh #fff, 60vw 160vh #fff, 10vw 90vh #b4dcff, 10vw 190vh #b4dcff, 90vw 40vh #fff, 90vw 140vh #fff, 30vw 50vh #b4dcff, 30vw 150vh #b4dcff, 75vw 85vh #fff, 75vw 185vh #fff;
    }

    /**************** Greetings ****************/

    .main-container[b-slc0ghnz5b] {
        display: flex;
        max-width: 900px;
        margin: auto;
        height: 35rem;
        flex-direction: column;
        width: 100%;
    }

    /**************** Stats Cards ****************/

    .statistics-group[b-slc0ghnz5b] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .statistics-row[b-slc0ghnz5b] {
        display: flex;
        flex-direction: row;
    }

    .statistics-row[b-slc0ghnz5b]::-webkit-scrollbar {
        height: 0px;
    }

    /**************** Globe ****************/

    #globe-canvas[b-slc0ghnz5b] {
        width: 100%;
        height: 100%;
        display: block;
        cursor: grab;
    }

    #globe-container[b-slc0ghnz5b] {
        height: 40rem;
        background: transparent;
    }

    /**************** Responses List ****************/

    .responses-list[b-slc0ghnz5b] {
        list-style-type: none;
        padding-bottom: 8rem;
    }

    /**************** Page Content ****************/

    .listings-content[b-slc0ghnz5b] {
        max-width: 1000px;
        margin: 0 auto auto auto;
        /*margin: auto;*/
        display: flex;
        width: 100%;
        flex-direction: column;
    }

    .responses-group[b-slc0ghnz5b] {
        display: flex;
        width: 100%;
        margin-bottom: 10rem;
    }

    /**************** Bar Graph ****************/

    .statistics-graph[b-slc0ghnz5b] {
        width: 100%;
        max-width: 850px;
    }

    .statistics-header-group[b-slc0ghnz5b] {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
    }

    .tab-option-row[b-slc0ghnz5b] {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
    }

    .tab-chip[b-slc0ghnz5b] {
        border-radius: 50px;
        cursor: pointer;
        font-weight: 700;
        font-size: 0.75rem;
        position: relative;
        display: inline-flex;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        text-align: center;
        align-items: center;
        justify-content: center;
        width: fit-content;
        background: var(--light-color);
        color: var(--text-color);
    }

    .tab-chip:hover[b-slc0ghnz5b] {
        background-color: var(--brand);
        color: var(--dark-color);
    }

    .tab-selected-chip[b-slc0ghnz5b] {
        border-radius: 50px;
        cursor: pointer;
        font-weight: 700;
        font-size: 0.75rem;
        position: relative;
        display: inline-flex;
        text-align: center;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        align-items: center;
        justify-content: center;
        width: fit-content;
        background-color: var(--brand);
        color: var(--dark-color);
    }

    .bar-chart[b-slc0ghnz5b] {
        margin-top: 0;
        padding: 0;
        border: 0;
        width: 100%;
        height: 300px;
        display: flex;
        justify-content: stretch;
        align-items: stretch;
        flex-direction: row;
        position: relative;
    }

    ul.bar-chart[b-slc0ghnz5b], ol.bar-chart[b-slc0ghnz5b] {
        list-style: none;
    }

    .max-label[b-slc0ghnz5b] {
        color: var(--text-color);
        font-weight: bold;
        margin-right: 0.25rem;
        top: 0;
        position: sticky;
    }

    .min-label[b-slc0ghnz5b] {
        color: var(--text-color);
        font-weight: bold;
        margin-right: 0.25rem;
        bottom: 0;
        position: absolute;
        left: 0;
    }

    .invisible-label[b-slc0ghnz5b] {
        color: var(--text-color);
        font-weight: bold;
        margin-right: 0.25rem;
        top: 0;
        position: sticky;
        visibility: hidden;
    }

    .bar-chart-bar[b-slc0ghnz5b] {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0;
        height: calc(100% * (var(--end)));
        background: var(--brand);
        border-radius: 15px;
        align-self: flex-end;
        margin-right: 4px;
        border: 2px solid var(--brand);
        width: 15px;
        transition: 1s;
    }

    .bar-chart-bar .tooltip[b-slc0ghnz5b] {
        font-size: 0.75rem;
        color: var(--text-color);
        z-index: 100;
        font-weight: bold;
        white-space: nowrap;
        display: none;
        justify-content: center;
        margin-bottom: 2rem;
        top: -1.5rem;
        position: relative;
    }

    .bar-chart-bar:hover .tooltip[b-slc0ghnz5b] {
        display: flex;
        opacity: 1;
    }

    .bar-chart-labels[b-slc0ghnz5b] {
        margin-top: 0.25rem;
        width: 100%;
        display: flex;
        justify-content: stretch;
        align-items: stretch;
        flex-direction: row;
        margin-bottom: 4rem;
    }

    .bar-chart-label-item[b-slc0ghnz5b] {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0;
        color: var(--text-color);
        font-weight: bold;
        white-space: nowrap;
        justify-content: center;
        display: flex;
        font-size: 0.75rem;
    }

    /**************** Left-side ****************/

    .responses-left-side[b-slc0ghnz5b] {
        height: 100%;
        width: 35%;
        display: flex;
        align-items: center;
        padding-right: 1rem;
        flex-direction: column;
        min-height: 40rem;
    }

    .column-section[b-slc0ghnz5b] {
        height: 100%;
        width: 100%;
        display: flex;
        /*align-items: center;*/
        justify-content: start;
        flex-direction: column;
    }

    .column-title-filters[b-slc0ghnz5b] {
        color: var(--text-color);
        font-size: 1.5rem;
        font-weight: 500;
    }

    .column-title-responses[b-slc0ghnz5b] {
        color: var(--text-color);
        font-size: 1.5rem;
        font-weight: 500;
    }

    .column-group-filters[b-slc0ghnz5b] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
        height: 2.5rem;
    }

    /**************** Filter ****************/

    .divider[b-slc0ghnz5b] {
        height: 2px;
        background-color: var(--brand);
        border: none;
        margin-top: 1rem;
        margin-bottom: 1rem;
        opacity: 0.15;
    }

    .filter-group[b-slc0ghnz5b] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
    }

    .filter-title[b-slc0ghnz5b] {
        color: var(--text-color);
        font-size: 1rem;
        font-weight: 500;
    }

    .filter-collapse-button[b-slc0ghnz5b] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
        cursor: pointer;
        border-radius: 50%;
        font-size: 0.75rem;
        color: var(--brand);
    }

    .filter-collapse-button:hover[b-slc0ghnz5b] {
        background: var(--light-color);
    }

    .filter-collapse-button i[b-slc0ghnz5b] {
        transition: transform 0.18s ease;
    }

    .filter-group.open .filter-collapse-button i[b-slc0ghnz5b] {
        transform: rotate(180deg);
    }

    .filter-chips-row[b-slc0ghnz5b] {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 1rem;
        margin-top: 0.5rem;
        gap: 0.35rem;
    }

    .chip-icon[b-slc0ghnz5b] {
        margin-right: 0.25rem;
    }

    .selected-filter-chip[b-slc0ghnz5b] {
        background: var(--brand);
        color: var(--dark-color);
        padding: 0.5rem 0.75rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 1.25rem;
        font-size: 0.75rem;
        font-weight: 600;
        white-space: nowrap;
        text-decoration: none;
        width: fit-content;
        cursor: pointer;
    }

    .filter-chip[b-slc0ghnz5b] {
        background: var(--light-color);
        color: var(--text-muted);
        border: 1px solid transparent;
        padding: 0.5rem 0.75rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 1.25rem;
        font-size: 0.75rem;
        font-weight: 600;
        white-space: nowrap;
        text-decoration: none;
        width: fit-content;
        cursor: pointer;
    }

    .filter-chip:hover[b-slc0ghnz5b] {
        border: 1px solid var(--brand);
    }

    .clear-chip[b-slc0ghnz5b] {
        background: var(--transparent);
        color: var(--text-color);
        border: 2px solid var(--brand);
        padding: 0.5rem 0.75rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 1.25rem;
        font-size: 0.75rem;
        font-weight: 600;
        margin-right: 0.5rem;
        white-space: nowrap;
        text-decoration: none;
        width: fit-content;
        cursor: pointer;
    }

    .clear-chip:hover[b-slc0ghnz5b] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .clear-icon[b-slc0ghnz5b] {
        margin-right: 0.5rem;
    }

    .filter-title-group[b-slc0ghnz5b] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .checkbox-text[b-slc0ghnz5b] {
        color: var(--text-color);
        font-size: 0.75rem;
    }

    .filter-caption[b-slc0ghnz5b] {
        color: var(--text-color);
        font-weight: 500;
        font-size: 0.75rem;
        margin-top: 1rem;
    }

    .filter-subtext[b-slc0ghnz5b] {
        font-size: 0.6rem;
        color: var(--text-color);
    }

    .filter-subtext-row[b-slc0ghnz5b] {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 95%;
        margin-top: 0.25rem;
        margin-bottom: 1.25rem;
    }

    .column-options-group[b-slc0ghnz5b] {
        margin-bottom: 1rem;
        margin-top: 0.5rem;
    }

    .column-options[b-slc0ghnz5b] {
        display: flex;
        align-items: center;
        /*margin-bottom: 5px;*/
        padding-bottom: 10px;
        cursor: pointer;
    }

    .column-options:hover[b-slc0ghnz5b] {
        opacity: 0.9;
    }

    .column-options input[type="checkbox"][b-slc0ghnz5b] {
        margin-right: 0.5rem;
        appearance: none; /* Hide the default checkbox */
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 16px;
        height: 16px;
        border: 2px solid var(--brand);
        border-radius: var(--border-radius);
        position: relative;
        cursor: pointer;
    }

    .column-options input[type="checkbox"]:checked[b-slc0ghnz5b]::before {
        content: '';
        position: absolute;
        left: 3px;
        top: 0;
        width: 4px;
        height: 8px;
        border: solid var(--brand);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    .column-options input[type="checkbox"]:checked[b-slc0ghnz5b] {
        background-color: var(--brand);
    }

    /**************** Search ****************/

    .search-container[b-slc0ghnz5b] {
        width: 100%;
        background: var(--light-color);
        border-radius: var(--border-radius);
        padding: 1rem;
        height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 0.5rem;
        margin-bottom: 1.25rem;
    }

    .clear-search-icon[b-slc0ghnz5b] {
        color: var(--brand);
        font-size: 1.5rem;
    }

    .search-text[b-slc0ghnz5b] {
        color: var(--dark-color);
        font-size: 1.5rem;
        font-weight: bold;
        margin-left: 0.75rem;
    }

    .search-column-start[b-slc0ghnz5b] {
        width: fit-content;
        margin-right: 0.25rem;
        background: var(--dark-color);
        border-radius: 15px;
        padding: 1.25rem;
        height: 3.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .form-control[b-slc0ghnz5b] {
        padding-top: 1px;
        padding-bottom: 1px;
        width: 100%;
        outline: none;
        color: var(--text-color);
        font-size: 12px;
        height: 3rem;
        background: transparent;
        border-color: transparent;
    }

    .form-control[b-slc0ghnz5b]::placeholder {
        color: var(--text-muted);
        font-weight: 300;
    }

    .input-container[b-slc0ghnz5b] {
        position: relative;
        display: inline-block;
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
    }

    .icon-container[b-slc0ghnz5b] {
        position: absolute;
        top: 60%;
        left: 8.5rem;
        transform: translateY(-60%);
    }

    .clear-icon-container[b-slc0ghnz5b] {
        position: absolute;
        top: 60%;
        right: 8.5rem;
        transform: translateY(-60%);
        cursor: pointer;
    }

    /**************** Pagination ****************/

    .column-group-responses[b-slc0ghnz5b] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .column-group[b-slc0ghnz5b] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .results-summary-text[b-slc0ghnz5b] {
        font-size: 12px;
        font-weight: 500;
        color: var(--text-color);
    }

    .pagination[b-slc0ghnz5b] {
        display: flex;
        padding: 1rem;
        justify-content: center;
        align-items: center;
        margin-bottom: 2rem;
    }

    .page-scroll-button[b-slc0ghnz5b] {
        color: var(--brand);
        cursor: pointer;
        background: transparent;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        margin: 0 4px;
    }

    .page-scroll-button:hover[b-slc0ghnz5b] {
        background-color: var(--light-color);
    }

    .page-scroll-button-disabled[b-slc0ghnz5b] {
        color: var(--brand);
        background: transparent;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        opacity: 0.4;
        margin: 0 4px;
    }

    .page-ellipsis[b-slc0ghnz5b] {
        padding: 1rem;
        color: var(--text-color);
        font-size: 1.5rem;
        height: 3rem;
        width: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
    }

    .page-button[b-slc0ghnz5b] {
        padding: 1rem;
        background-color: transparent;
        color: var(--text-color);
        border: none;
        border-radius: 15px;
        cursor: pointer;
        font-size: 1.5rem;
        height: 3rem;
        width: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        margin: 0 4px;
    }

    .page-button:hover[b-slc0ghnz5b] {
        background-color: var(--light-color);
    }

    .page-button-selected[b-slc0ghnz5b] {
        padding: 1rem;
        background-color: var(--brand);
        color: var(--dark-color);
        border: none;
        border-radius: 15px;
        font-size: 1.5rem;
        height: 3rem;
        width: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        margin: 0 4px;
    }

    /**************** Right-side ****************/

    .responses-right-side[b-slc0ghnz5b] {
        height: 100%;
        width: 65%;
        display: flex;
        flex-direction: column;
    }

    /**************** Animations ****************/

    @keyframes fadeIn-b-slc0ghnz5b {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .fade-in[b-slc0ghnz5b] {
        animation: fadeIn-b-slc0ghnz5b 1s ease-out forwards;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {
    
    @keyframes spaceDrift-b-slc0ghnz5b {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(-100vh);
        }
    }

    .background[b-slc0ghnz5b] {
        min-height: 100vh;
        display: flex;
        overflow: auto;
        position: relative;
        background: radial-gradient(circle at top, #1c2944 0, #060b19 55%, #020309 100%);
        background-attachment: fixed;
    }

    .background[b-slc0ghnz5b]::before,
    .background[b-slc0ghnz5b]::after {
        content: "";
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 200vh;
        background: transparent;
        pointer-events: none;
        mix-blend-mode: screen;
    }

    .background[b-slc0ghnz5b]::before {
        width: 1px;
        height: 1px;
        opacity: 0.8;
        animation: spaceDrift-b-slc0ghnz5b 150s linear infinite;
        box-shadow: 10vw 10vh #fff, 10vw 110vh #fff, 15vw 80vh #fff, 15vw 180vh #fff, 35vw 12vh #fff, 35vw 112vh #fff, 80vw 22vh #fff, 80vw 122vh #fff, 70vw 80vh #fff, 70vw 180vh #fff, 12vw 95vh #fff, 12vw 195vh #fff, 45vw 45vh #fff, 45vw 145vh #fff, 95vw 95vh #fff, 95vw 195vh #fff, 22vw 33vh #fff, 22vw 133vh #fff, 65vw 12vh #fff, 65vw 112vh #fff, 11vw 65vh #fff, 11vw 165vh #fff, 88vw 44vh #fff, 88vw 144vh #fff, 55vw 55vh #fff, 55vw 155vh #fff, 30vw 90vh #fff, 30vw 190vh #fff, 60vw 30vh #fff, 60vw 130vh #fff, 25vw 25vh #fff, 25vw 125vh #fff, 75vw 75vh #fff, 75vw 175vh #fff, 40vw 60vh #fff, 40vw 160vh #fff, 98vw 50vh #fff, 98vw 150vh #fff, 05vw 05vh #fff, 05vw 105vh #fff;
    }

    .background[b-slc0ghnz5b]::after {
        width: 2px;
        height: 2px;
        opacity: 0.6;
        animation: spaceDrift-b-slc0ghnz5b 100s linear infinite;
        box-shadow: 20vw 20vh #b4dcff, 20vw 120vh #b4dcff, 85vw 15vh #fff, 85vw 115vh #fff, 40vw 80vh #b4dcff, 40vw 180vh #b4dcff, 60vw 60vh #fff, 60vw 160vh #fff, 10vw 90vh #b4dcff, 10vw 190vh #b4dcff, 90vw 40vh #fff, 90vw 140vh #fff, 30vw 50vh #b4dcff, 30vw 150vh #b4dcff, 75vw 85vh #fff, 75vw 185vh #fff;
    }

    /**************** Greetings ****************/

    .main-container[b-slc0ghnz5b] {
        display: flex;
        max-width: 700px;
        margin: auto;
        height: 30rem;
        flex-direction: column;
        width: 100%;
    }

    /**************** Stats Cards ****************/

    .statistics-group[b-slc0ghnz5b] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .statistics-row[b-slc0ghnz5b] {
        display: flex;
        flex-direction: row;
    }

    .statistics-row[b-slc0ghnz5b]::-webkit-scrollbar {
        height: 0px;
    }

    /**************** Globe ****************/

    #globe-canvas[b-slc0ghnz5b] {
        width: 100%;
        height: 100%;
        display: block;
        cursor: grab;
    }

    #globe-container[b-slc0ghnz5b] {
        height: 34rem;
        background: transparent;
    }

    /**************** Responses List ****************/

    .responses-list[b-slc0ghnz5b] {
        list-style-type: none;
        padding-bottom: 6rem;
    }

    /**************** Page Content ****************/

    .listings-content[b-slc0ghnz5b] {
        max-width: 800px;
        margin: 0 auto auto auto;
        /*margin: auto;*/
        display: flex;
        width: 100%;
        flex-direction: column;
        margin-top: 2rem;
    }

    .responses-group[b-slc0ghnz5b] {
        display: flex;
        width: 100%;
        margin-bottom: 10rem;
    }

    /**************** Bar Graph ****************/

    .statistics-graph[b-slc0ghnz5b] {
        width: 100%;
        max-width: 750px;
    }

    .statistics-header-group[b-slc0ghnz5b] {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
    }

    .tab-option-row[b-slc0ghnz5b] {
        display: flex;
        flex-direction: row;
    }

    .tab-chip[b-slc0ghnz5b] {
        border-radius: 50px;
        cursor: pointer;
        font-weight: 700;
        font-size: 0.75rem;
        position: relative;
        display: inline-flex;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        text-align: center;
        align-items: center;
        justify-content: center;
        width: fit-content;
        background: var(--light-color);
        color: var(--text-color);
    }

    .tab-chip:hover[b-slc0ghnz5b] {
        background-color: var(--brand);
        color: var(--dark-color);
    }

    .tab-selected-chip[b-slc0ghnz5b] {
        border-radius: 50px;
        cursor: pointer;
        font-weight: 700;
        font-size: 0.75rem;
        position: relative;
        display: inline-flex;
        text-align: center;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        align-items: center;
        justify-content: center;
        width: fit-content;
        background-color: var(--brand);
        color: var(--dark-color);
    }

    .status-group[b-slc0ghnz5b] {
        display: flex;
        align-items: center;
        justify-content: start;
    }

    .bar-chart[b-slc0ghnz5b] {
        margin-top: 0;
        padding: 0;
        border: 0;
        width: 100%;
        height: 275px;
        display: flex;
        justify-content: stretch;
        align-items: stretch;
        flex-direction: row;
        position: relative;
    }

    ul.bar-chart[b-slc0ghnz5b], ol.bar-chart[b-slc0ghnz5b] {
        list-style: none;
    }

    .max-label[b-slc0ghnz5b] {
        color: var(--text-color);
        font-weight: bold;
        margin-right: 0.25rem;
        top: 0;
        position: sticky;
        font-size: 0.75rem;
    }

    .min-label[b-slc0ghnz5b] {
        color: var(--text-color);
        font-weight: bold;
        margin-right: 0.25rem;
        bottom: 0;
        position: absolute;
        left: 0;
        font-size: 0.75rem;
    }

    .invisible-label[b-slc0ghnz5b] {
        color: var(--text-color);
        font-weight: bold;
        margin-right: 0.25rem;
        top: 0;
        position: sticky;
        visibility: hidden;
    }

    .bar-chart-bar[b-slc0ghnz5b] {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0;
        height: calc(100% * (var(--end)));
        background: var(--brand);
        border-radius: 8px;
        align-self: flex-end;
        margin-right: 4px;
        border: 2px solid var(--brand);
        width: 15px;
        transition: 1s;
        cursor: pointer;
    }

    .bar-chart-bar .tooltip[b-slc0ghnz5b] {
        font-size: 0.65rem;
        color: var(--text-color);
        z-index: 100;
        font-weight: bold;
        white-space: nowrap;
        display: none;
        justify-content: center;
        top: -1.25rem;
        position: relative;
    }

    .bar-chart-bar:hover .tooltip[b-slc0ghnz5b] {
        display: flex;
        opacity: 1;
    }

    .bar-chart-labels[b-slc0ghnz5b] {
        margin-top: 0.25rem;
        width: 100%;
        display: flex;
        justify-content: stretch;
        align-items: stretch;
        flex-direction: row;
    }

    .bar-chart-label-item[b-slc0ghnz5b] {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0;
        color: var(--text-color);
        font-weight: bold;
        white-space: nowrap;
        justify-content: center;
        display: flex;
        font-size: 0.5rem;
    }

    /**************** Left-side ****************/

    .responses-left-side[b-slc0ghnz5b] {
        height: 100%;
        width: 35%;
        display: flex;
        align-items: center;
        padding-right: 1rem;
        flex-direction: column;
        min-height: 40rem;
    }

    .column-section[b-slc0ghnz5b] {
        height: 100%;
        width: 100%;
        display: flex;
        /*align-items: center;*/
        justify-content: start;
        flex-direction: column;
    }

    .column-title-filters[b-slc0ghnz5b] {
        color: var(--text-color);
        font-size: 1.25rem;
        font-weight: 500;
    }

    .column-title-responses[b-slc0ghnz5b] {
        color: var(--text-color);
        font-size: 1.25rem;
        font-weight: 500;
    }

    .column-group-filters[b-slc0ghnz5b] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
        height: 2.5rem;
    }

    /**************** Right-side ****************/

    .responses-right-side[b-slc0ghnz5b] {
        height: 100%;
        width: 65%;
        display: flex;
        flex-direction: column;
    }

    /**************** Filter ****************/

    .divider[b-slc0ghnz5b] {
        height: 1px;
        background-color: var(--brand);
        border: none;
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
        opacity: 0.15;
    }

    .filter-group[b-slc0ghnz5b] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
    }

    .filter-title[b-slc0ghnz5b] {
        color: var(--text-color);
        font-size: 0.85rem;
        font-weight: 500;
    }

    .filter-collapse-button[b-slc0ghnz5b] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.25rem;
        height: 1.25rem;
        cursor: pointer;
        border-radius: 50%;
        font-size: 0.65rem;
        color: var(--brand);
    }

    .filter-collapse-button:hover[b-slc0ghnz5b] {
        background: var(--light-color);
    }

    .filter-collapse-button i[b-slc0ghnz5b] {
        transition: transform 0.18s ease;
    }

    .filter-group.open .filter-collapse-button i[b-slc0ghnz5b] {
        transform: rotate(180deg);
    }

    .filter-chips-row[b-slc0ghnz5b] {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 1rem;
        margin-top: 0.5rem;
        gap: 0.35rem;
    }

    .chip-icon[b-slc0ghnz5b] {
        margin-right: 0.25rem;
    }

    .selected-filter-chip[b-slc0ghnz5b] {
        background: var(--brand);
        color: var(--dark-color);
        padding: 0.5rem 0.7rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 1.25rem;
        font-size: 0.7rem;
        font-weight: 600;
        white-space: nowrap;
        text-decoration: none;
        width: fit-content;
        cursor: pointer;
    }

    .filter-chip[b-slc0ghnz5b] {
        background: var(--light-color);
        color: var(--text-muted);
        border: 1px solid transparent;
        padding: 0.5rem 0.7rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 1.25rem;
        font-size: 0.7rem;
        font-weight: 600;
        white-space: nowrap;
        text-decoration: none;
        width: fit-content;
        cursor: pointer;
    }

    .filter-chip:hover[b-slc0ghnz5b] {
        border: 1px solid var(--brand);
    }

    .clear-chip[b-slc0ghnz5b] {
        background: var(--transparent);
        color: var(--text-color);
        border: 2px solid var(--brand);
        padding: 0.5rem 0.75rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 1.25rem;
        font-size: 0.75rem;
        font-weight: 600;
        margin-right: 0.5rem;
        white-space: nowrap;
        text-decoration: none;
        width: fit-content;
        cursor: pointer;
    }

    .clear-chip:hover[b-slc0ghnz5b] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .clear-icon[b-slc0ghnz5b] {
        margin-right: 0.5rem;
    }

    .filter-title-group[b-slc0ghnz5b] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .checkbox-text[b-slc0ghnz5b] {
        color: var(--text-color);
        font-size: 0.75rem;
    }

    .filter-caption[b-slc0ghnz5b] {
        color: var(--text-muted);
        font-weight: 500;
        font-size: 0.75rem;
    }

    .filter-subtext[b-slc0ghnz5b] {
        font-size: 0.6rem;
        color: var(--text-color);
    }

    .filter-subtext-row[b-slc0ghnz5b] {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        margin-top: 0.25rem;
        margin-bottom: 1.25rem;
    }

    .column-options-group[b-slc0ghnz5b] {
        margin-bottom: 1rem;
        margin-top: 0.5rem;
    }

    .column-options[b-slc0ghnz5b] {
        display: flex;
        align-items: center;
        /*margin-bottom: 5px;*/
        padding-bottom: 10px;
        cursor: pointer;
    }

    .column-options:hover[b-slc0ghnz5b] {
        opacity: 0.9;
    }

    .column-options input[type="checkbox"][b-slc0ghnz5b] {
        margin-right: 0.5rem;
        appearance: none; /* Hide the default checkbox */
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 16px;
        height: 16px;
        border: 2px solid var(--brand);
        border-radius: var(--border-radius);
        position: relative;
        cursor: pointer;
    }

    .column-options input[type="checkbox"]:checked[b-slc0ghnz5b]::before {
        content: '';
        position: absolute;
        left: 3px;
        top: 0;
        width: 4px;
        height: 8px;
        border: solid var(--brand);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    .column-options input[type="checkbox"]:checked[b-slc0ghnz5b] {
        background-color: var(--brand);
    }

    /**************** Search ****************/

    .search-container[b-slc0ghnz5b] {
        width: 100%;
        background: var(--light-color);
        border-radius: var(--border-radius);
        padding: 1rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 0.5rem;
        margin-bottom: 1rem;
    }

    .clear-search-icon[b-slc0ghnz5b] {
        color: var(--brand);
        font-size: 1.5rem;
    }

    .search-text[b-slc0ghnz5b] {
        color: var(--dark-color);
        font-size: 1.5rem;
        font-weight: bold;
        margin-left: 0.75rem;
    }

    .search-column-start[b-slc0ghnz5b] {
        width: fit-content;
        margin-right: 0.25rem;
        background: var(--dark-color);
        border-radius: 15px;
        padding: 1.25rem;
        height: 3.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .form-control[b-slc0ghnz5b] {
        padding-top: 1px;
        padding-bottom: 1px;
        width: 100%;
        outline: none;
        color: var(--text-color);
        font-size: 12px;
        height: 3rem;
        background: transparent;
        border-color: transparent;
    }

    .form-control[b-slc0ghnz5b]::placeholder {
        color: var(--text-muted);
        font-weight: 300;
    }

    .input-container[b-slc0ghnz5b] {
        position: relative;
        display: inline-block;
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
    }

    .icon-container[b-slc0ghnz5b] {
        position: absolute;
        top: 60%;
        left: 8.5rem;
        transform: translateY(-60%);
    }

    .clear-icon-container[b-slc0ghnz5b] {
        position: absolute;
        top: 60%;
        right: 8.5rem;
        transform: translateY(-60%);
        cursor: pointer;
    }

    /**************** Pagination ****************/

    .column-group-responses[b-slc0ghnz5b] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .column-group[b-slc0ghnz5b] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .results-summary-text[b-slc0ghnz5b] {
        font-size: 10px;
        font-weight: 500;
        color: var(--text-color);
    }

    .pagination[b-slc0ghnz5b] {
        display: flex;
        padding: 1rem;
        justify-content: center;
        align-items: center;
        margin-bottom: 2rem;
    }

    .page-scroll-button[b-slc0ghnz5b] {
        color: var(--brand);
        cursor: pointer;
        background: transparent;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        margin: 0 2px;
        font-size: 0.85rem;
    }

    .page-scroll-button:hover[b-slc0ghnz5b] {
        background-color: var(--light-color);
    }

    .page-scroll-button-disabled[b-slc0ghnz5b] {
        color: var(--brand);
        background: transparent;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        opacity: 0.4;
        margin: 0 2px;
    }

    .page-ellipsis[b-slc0ghnz5b] {
        padding: 1rem;
        color: var(--text-color);
        font-size: 1.25rem;
        height: 2.5rem;
        width: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
    }

    .page-button[b-slc0ghnz5b] {
        padding: 1rem;
        background-color: transparent;
        color: var(--text-color);
        border: none;
        border-radius: 10px;
        cursor: pointer;
        font-size: 1.25rem;
        height: 2.5rem;
        width: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        margin: 0 2px;
    }

    .page-button:hover[b-slc0ghnz5b] {
        background-color: var(--light-color);
    }

    .page-button-selected[b-slc0ghnz5b] {
        padding: 1rem;
        background-color: var(--brand);
        color: var(--dark-color);
        border: none;
        border-radius: 10px;
        font-size: 1.25rem;
        height: 2.5rem;
        width: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        margin: 0 2px;
    }

    /**************** Animations ****************/

    @keyframes fadeIn-b-slc0ghnz5b {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .fade-in[b-slc0ghnz5b] {
        animation: fadeIn-b-slc0ghnz5b 1s ease-out forwards;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    @keyframes spaceDrift-b-slc0ghnz5b {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(-100vh);
        }
    }

    .background[b-slc0ghnz5b] {
        min-height: 100vh;
        display: flex;
        overflow: auto;
        position: relative;
        background: radial-gradient(circle at top, #1c2944 0, #060b19 55%, #020309 100%);
        background-attachment: fixed;
    }

    .background[b-slc0ghnz5b]::before,
    .background[b-slc0ghnz5b]::after {
        content: "";
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 200vh;
        background: transparent;
        pointer-events: none;
        mix-blend-mode: screen;
    }

    .background[b-slc0ghnz5b]::before {
        width: 1px;
        height: 1px;
        opacity: 0.8;
        animation: spaceDrift-b-slc0ghnz5b 150s linear infinite;
        box-shadow: 10vw 10vh #fff, 10vw 110vh #fff, 15vw 80vh #fff, 15vw 180vh #fff, 35vw 12vh #fff, 35vw 112vh #fff, 80vw 22vh #fff, 80vw 122vh #fff, 70vw 80vh #fff, 70vw 180vh #fff, 12vw 95vh #fff, 12vw 195vh #fff, 45vw 45vh #fff, 45vw 145vh #fff, 95vw 95vh #fff, 95vw 195vh #fff, 22vw 33vh #fff, 22vw 133vh #fff, 65vw 12vh #fff, 65vw 112vh #fff, 11vw 65vh #fff, 11vw 165vh #fff, 88vw 44vh #fff, 88vw 144vh #fff, 55vw 55vh #fff, 55vw 155vh #fff, 30vw 90vh #fff, 30vw 190vh #fff, 60vw 30vh #fff, 60vw 130vh #fff, 25vw 25vh #fff, 25vw 125vh #fff, 75vw 75vh #fff, 75vw 175vh #fff, 40vw 60vh #fff, 40vw 160vh #fff, 98vw 50vh #fff, 98vw 150vh #fff, 05vw 05vh #fff, 05vw 105vh #fff;
    }

    .background[b-slc0ghnz5b]::after {
        width: 2px;
        height: 2px;
        opacity: 0.6;
        animation: spaceDrift-b-slc0ghnz5b 100s linear infinite;
        box-shadow: 20vw 20vh #b4dcff, 20vw 120vh #b4dcff, 85vw 15vh #fff, 85vw 115vh #fff, 40vw 80vh #b4dcff, 40vw 180vh #b4dcff, 60vw 60vh #fff, 60vw 160vh #fff, 10vw 90vh #b4dcff, 10vw 190vh #b4dcff, 90vw 40vh #fff, 90vw 140vh #fff, 30vw 50vh #b4dcff, 30vw 150vh #b4dcff, 75vw 85vh #fff, 75vw 185vh #fff;
    }

    /**************** Greetings ****************/

    .main-container[b-slc0ghnz5b] {
        width: 100%;
        max-width: 550px;
        padding: 1rem;
        height: auto;
        margin-top: 6rem;
        margin-right: auto;
        margin-left: auto;
    }

    /**************** Forms List ****************/

    .forms-list[b-slc0ghnz5b] {
        list-style-type: none;
        padding-bottom: 8rem;
    }

    /**************** Page Content ****************/

    .listings-content[b-slc0ghnz5b] {
        display: flex;
        width: 100%;
        flex-direction: column;
        margin-top: 2rem;
    }

    .responses-group[b-slc0ghnz5b] {
        display: flex;
        width: 100%;
        margin-bottom: 10rem;
    }

    /**************** Add Button ****************/

    .add-forms-group[b-slc0ghnz5b] {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 1rem;
        padding-bottom: 7rem;
    }

    /**************** Left-side ****************/

    .responses-left-side[b-slc0ghnz5b] {
        display: none;
    }

    /**************** Pagination ****************/

    .column-group-responses[b-slc0ghnz5b] {
        display: flex;
        justify-content: start;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .column-group[b-slc0ghnz5b] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .results-summary-text[b-slc0ghnz5b] {
        font-size: 12px;
        font-weight: 500;
        color: var(--text-color);
    }

    .pagination[b-slc0ghnz5b] {
        display: flex;
        padding: 1rem;
        justify-content: center;
        align-items: center;
        margin-bottom: 2rem;
    }

    .page-scroll-button[b-slc0ghnz5b] {
        color: var(--brand);
        cursor: pointer;
        background: transparent;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        margin: 0 4px;
    }

    .page-scroll-button:hover[b-slc0ghnz5b] {
        background-color: var(--light-color);
    }

    .page-scroll-button-disabled[b-slc0ghnz5b] {
        color: var(--brand);
        background: transparent;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        opacity: 0.4;
        margin: 0 4px;
    }

    .page-ellipsis[b-slc0ghnz5b] {
        padding: 1rem;
        color: var(--text-color);
        font-size: 1.5rem;
        height: 3rem;
        width: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
    }

    .page-button[b-slc0ghnz5b] {
        padding: 1rem;
        background-color: transparent;
        color: var(--text-color);
        border: none;
        border-radius: 15px;
        cursor: pointer;
        font-size: 1.5rem;
        height: 3rem;
        width: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        margin: 0 4px;
    }

    .page-button:hover[b-slc0ghnz5b] {
        background-color: var(--light-color);
    }

    .page-button-selected[b-slc0ghnz5b] {
        padding: 1rem;
        background-color: var(--brand);
        color: var(--dark-color);
        border: none;
        border-radius: 15px;
        font-size: 1.5rem;
        height: 3rem;
        width: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        margin: 0 4px;
    }

    /**************** Right-side ****************/

    .responses-right-side[b-slc0ghnz5b] {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    /**************** Stats Cards ****************/

    .statistics-group[b-slc0ghnz5b] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
    }

    .statistics-row[b-slc0ghnz5b] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
        margin-bottom: 2rem;
        width: 100%;
    }

    .statistics-row[b-slc0ghnz5b]::-webkit-scrollbar {
        height: 0px;
    }

    /**************** Globe ****************/

    #globe-canvas[b-slc0ghnz5b] {
        width: 100%;
        height: 100%;
        display: block;
    }

    .globe-section[b-slc0ghnz5b] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    #globe-container[b-slc0ghnz5b] {
        width: 100%;
        height: 25rem;
        background: transparent;
    }

    .globe-latest-panel[b-slc0ghnz5b] {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .globe-latest-header h4[b-slc0ghnz5b] {
        margin-bottom: 0.5rem;
        color: var(--text-color);
        font-size: 1.25rem;
    }

    .globe-latest-list[b-slc0ghnz5b] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 8rem;
    }

    .globe-latest-card[b-slc0ghnz5b] {
        display: flex;
        justify-content: start;
        align-items: center;
        padding: 0.8rem;
        border-radius: 0.75rem;
        background: var(--background-color);
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .globe-latest-card:hover[b-slc0ghnz5b] {
        border: 1px solid var(--brand);
        transition: 0.25s;
        cursor: pointer;
    }

    .globe-latest-main[b-slc0ghnz5b] {
        width: 100%;
    }

    .globe-latest-title[b-slc0ghnz5b] {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-color);
    }

    .globe-latest-meta[b-slc0ghnz5b] {
        display: flex;
        justify-content: space-between;
        margin-top: 0.15rem;
        font-size: 0.8rem;
        color: var(--text-muted);
    }

    /**************** Bar Graph ****************/

    .statistics-graph[b-slc0ghnz5b] {
        width: 100%;
    }

    .statistics-header-group[b-slc0ghnz5b] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        padding-bottom: 0.25rem;
        scroll-snap-type: x proximity;
        margin-bottom: 1rem;
    }

    .statistics-header-group[b-slc0ghnz5b]::-webkit-scrollbar {
        height: 0px;
    }

    .statistics-header-group[b-slc0ghnz5b] {
        scrollbar-width: none;
    }

    .tab-option-row[b-slc0ghnz5b] {
        display: inline-flex;
        flex-wrap: nowrap;
        gap: 0.5rem;
        scroll-snap-align: start;
        flex: 0 0 auto;
    }

    .tab-chip[b-slc0ghnz5b] {
        border-radius: 50px;
        cursor: pointer;
        font-weight: 700;
        font-size: 0.75rem;
        position: relative;
        display: inline-flex;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        text-align: center;
        align-items: center;
        justify-content: center;
        width: fit-content;
        background: var(--light-color);
        color: var(--text-color);
    }

    .tab-chip:hover[b-slc0ghnz5b] {
        background-color: var(--brand);
        color: var(--dark-color);
    }

    .tab-selected-chip[b-slc0ghnz5b] {
        border-radius: 50px;
        cursor: pointer;
        font-weight: 700;
        font-size: 0.75rem;
        position: relative;
        display: inline-flex;
        text-align: center;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        align-items: center;
        justify-content: center;
        width: fit-content;
        background-color: var(--brand);
        color: var(--dark-color);
    }

    .bar-chart[b-slc0ghnz5b] {
        display: none;
    }

    /**************** Animations ****************/

    @keyframes fadeIn-b-slc0ghnz5b {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .fade-in[b-slc0ghnz5b] {
        animation: fadeIn-b-slc0ghnz5b 1s ease-out forwards;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Pages/Settings.razor.rz.scp.css */
/*********************************************/
/*                                           */
/*               Shared / Base               */
/*        (mobile-first, shared rules)       */
/*                                           */
/*********************************************/

@keyframes spaceDrift-b-815kyxbbta {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100vh);
    }
}

@keyframes fadeIn-b-815kyxbbta {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.background[b-815kyxbbta] {
    min-height: 100vh;
    display: flex;
    overflow: auto;
    position: relative;
    background: radial-gradient(circle at top, #1c2944 0, #060b19 55%, #020309 100%);
    background-attachment: fixed;
}

.background[b-815kyxbbta]::before,
.background[b-815kyxbbta]::after {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 200vh;
    background: transparent;
    pointer-events: none;
    mix-blend-mode: screen;
}

.background[b-815kyxbbta]::before {
    width: 1px;
    height: 1px;
    opacity: 0.8;
    animation: spaceDrift-b-815kyxbbta 150s linear infinite;
    box-shadow: 10vw 10vh #fff, 10vw 110vh #fff, 15vw 80vh #fff, 15vw 180vh #fff, 35vw 12vh #fff, 35vw 112vh #fff, 80vw 22vh #fff, 80vw 122vh #fff, 70vw 80vh #fff, 70vw 180vh #fff, 12vw 95vh #fff, 12vw 195vh #fff, 45vw 45vh #fff, 45vw 145vh #fff, 95vw 95vh #fff, 95vw 195vh #fff, 22vw 33vh #fff, 22vw 133vh #fff, 65vw 12vh #fff, 65vw 112vh #fff, 11vw 65vh #fff, 11vw 165vh #fff, 88vw 44vh #fff, 88vw 144vh #fff, 55vw 55vh #fff, 55vw 155vh #fff, 30vw 90vh #fff, 30vw 190vh #fff, 60vw 30vh #fff, 60vw 130vh #fff, 25vw 25vh #fff, 25vw 125vh #fff, 75vw 75vh #fff, 75vw 175vh #fff, 40vw 60vh #fff, 40vw 160vh #fff, 98vw 50vh #fff, 98vw 150vh #fff, 5vw 5vh #fff, 5vw 105vh #fff;
}

.background[b-815kyxbbta]::after {
    width: 2px;
    height: 2px;
    opacity: 0.6;
    animation: spaceDrift-b-815kyxbbta 100s linear infinite;
    box-shadow: 20vw 20vh #b4dcff, 20vw 120vh #b4dcff, 85vw 15vh #fff, 85vw 115vh #fff, 40vw 80vh #b4dcff, 40vw 180vh #b4dcff, 60vw 60vh #fff, 60vw 160vh #fff, 10vw 90vh #b4dcff, 10vw 190vh #b4dcff, 90vw 40vh #fff, 90vw 140vh #fff, 30vw 50vh #b4dcff, 30vw 150vh #b4dcff, 75vw 85vh #fff, 75vw 185vh #fff;
}

.fade-in[b-815kyxbbta] {
    animation: fadeIn-b-815kyxbbta 260ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    .fade-in[b-815kyxbbta] {
        animation: none;
    }

    .background[b-815kyxbbta]::before,
    .background[b-815kyxbbta]::after {
        animation: none;
    }
}

/**************** Title and Description ****************/

.settings-title-group[b-815kyxbbta] {
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 100%;
    z-index: 2;
    margin-bottom: 1rem;
}

.settings-title[b-815kyxbbta] {
    font-size: 1.25rem;
    color: var(--text-color);
    font-weight: 700;
}

.settings-description[b-815kyxbbta] {
    font-size: 1rem;
    width: 100%;
    color: var(--text-muted);
    display: block;
}

/**************************** Core Listings ****************************/

.main-container[b-815kyxbbta] {
    width: 100%;
    max-width: 550px;
    padding: 1rem;
    height: auto;
    margin-top: 6rem;
    margin-left: auto;
    margin-right: auto;
}

/**************** Options ****************/

.settings-list[b-815kyxbbta] {
    list-style-type: none;
    margin: 0;
    width: 100%;
    padding-bottom: 2rem;
}

.settings-group[b-815kyxbbta] {
    background: transparent;
    border-radius: 12px;
    border: 2px solid transparent;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1rem 0rem;
}

.settings-column[b-815kyxbbta] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
}

.settings-item-title[b-815kyxbbta] {
    font-weight: bold;
    font-size: 1.15rem;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.settings-item-description[b-815kyxbbta] {
    font-size: 1rem;
    width: 100%;
    color: var(--text-muted);
    display: none;
}

.settings-icon[b-815kyxbbta] {
    margin-right: 0.5rem;
    color: var(--brand);
}

.settings-value[b-815kyxbbta] {
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 600;
}

.icon-wrap[b-815kyxbbta] {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-left: 0.25rem;
}

.text-input[b-815kyxbbta] {
    color: var(--text-color);
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    outline: none;
    text-align: right;
    background: transparent;
}

.delete-cta[b-815kyxbbta] {
    width: 5rem;
    height: 2.75rem;
    font-size: 1rem;
    border-radius: 50rem;
    border: none;
    background: var(--error-color);
    color: var(--text-color);
    font-weight: 600;
    cursor: pointer;
}

/**************** Toggle Switch ****************/

.switch-container[b-815kyxbbta] {
    display: flex;
    align-items: center;
}

.switch[b-815kyxbbta] {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
    margin-right: 6px;
}

.switch input[b-815kyxbbta] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-815kyxbbta] {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: var(--light-color);
    transition: 0.4s;
    border-radius: 24px;
}

.slider[b-815kyxbbta]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 3px;
    background-color: var(--dark-color);
    transition: 0.4s;
    border-radius: 50%;
}

input:checked + .slider[b-815kyxbbta] {
    background-color: var(--brand);
}

input:checked + .slider[b-815kyxbbta]:before {
    transform: translateX(24px);
}

/**************** Plans (Mobile carousel) ****************/

.plans-grid[b-815kyxbbta] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.25rem 0.25rem 0.5rem;
    margin: 1rem 0rem 1rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.plans-grid[b-815kyxbbta]::-webkit-scrollbar {
    display: none;
}

.plans-grid > .plan-card[b-815kyxbbta] {
    scroll-snap-align: start;
    min-height: unset;
}

.plan-card[b-815kyxbbta] {
    background: var(--background-color);
    border-radius: 16px;
    padding: 1.25rem;
    position: relative;
    display: flex;
    flex-direction: column;
    border: 2px solid var(--light-color);
}

.plan-card.is-current[b-815kyxbbta] {
    border: 2px solid var(--brand);
}

.plan-badge[b-815kyxbbta] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: var(--brand);
    color: var(--dark-color);
    opacity: 0.5;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
}

.plan-head .plan-name[b-815kyxbbta] {
    font-size: 1.125rem;
    color: var(--text-color);
    margin: 0;
}

.plan-sub[b-815kyxbbta] {
    color: var(--light-color);
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

.plan-price[b-815kyxbbta] {
    font-size: 2rem;
    font-weight: 700;
    margin: 0.75rem 0 1rem;
    color: var(--text-color);
}

.plan-price .per[b-815kyxbbta] {
    font-size: 0.9rem;
    margin-left: 0.25rem;
    opacity: 0.7;
}

.plan-cta[b-815kyxbbta] {
    width: 100%;
    height: 2.75rem;
    font-size: 1rem;
    border-radius: 10px;
    background: transparent;
    color: var(--text-color);
    font-weight: 600;
    cursor: pointer;
    border: 2px solid var(--brand);
}

.plan-cta:hover[b-815kyxbbta] {
    background: var(--brand);
    color: var(--dark-color);
    transition: 0.25s;
}

.plan-cta:disabled[b-815kyxbbta] {
    background: var(--light-color);
    color: var(--text-muted);
    cursor: default;
}

.plan-features[b-815kyxbbta] {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.5rem;
    color: var(--text-color);
}

.plan-features i[b-815kyxbbta] {
    color: var(--brand);
    margin-right: 0.5rem;
}

.plan-foot[b-815kyxbbta] {
    margin-top: auto;
    padding-top: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.undo-button[b-815kyxbbta] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: 50rem;
    color: var(--text-color);
    border: 2px solid var(--brand);
}

.undo-button:hover[b-815kyxbbta] {
    color: var(--dark-color);
    background: var(--brand);
    transition: 0.25s;
}

.danger-button[b-815kyxbbta] {
    background: var(--error-color);
    border: none;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: 50rem;
    color: var(--text-color);
}

.danger-button:hover[b-815kyxbbta] {
    filter: brightness(1.20);
    transition: 0.25s;
}

.empty-spacing[b-815kyxbbta] {
    padding-bottom: 10rem;
}

/**************************** Avatar ****************************/

.team-list[b-815kyxbbta] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.team-row[b-815kyxbbta] {
    display: grid;
    grid-template-columns: 40px 1fr 100px;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1.5rem;
}

.avatar[b-815kyxbbta] {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 700;
    color: var(--dark-color);
    background: var(--brand);
    box-shadow: 0 1px 2px rgba(0,0,0,.08) inset, 0 1px 2px rgba(0,0,0,.06);
}

.meta .name[b-815kyxbbta] {
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-color);
}

.meta .email[b-815kyxbbta] {
    font-size: 0.85rem;
    color: var(--text-color);
    line-height: 1.2;
    opacity: 0.7;
}

.button-container[b-815kyxbbta] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.button[b-815kyxbbta] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 50rem;
    padding: 0.85rem 1.25rem;
    gap: 0.5rem;
    margin-top: 1rem;
    background: transparent;
    color: var(--text-color);
    outline: none;
    border: 2px solid var(--brand);
}

.button:hover[b-815kyxbbta] {
    cursor: pointer;
    background: var(--brand);
    transition: 0.25s;
    color: var(--dark-color);
}

.button-icon[b-815kyxbbta] {
    font-size: 0.85rem;
}

/**************************** Modal (Mobile sheet) ****************************/

.modal[b-815kyxbbta] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.75);
    animation: backdropIn-b-815kyxbbta .28s ease forwards;
    z-index: 999;
}

.modal-content[b-815kyxbbta] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
    max-height: 75vh;
    overflow: auto;
    border-radius: 16px 16px 0 0;
    border: 1px solid var(--light-color);
    box-shadow: 0 -12px 32px rgba(0,0,0,.22);
    padding: 1.5rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
    transform: translateY(100%);
    animation: sheetIn-b-815kyxbbta .28s cubic-bezier(.2,.7,.2,1) forwards;
    will-change: transform;
    background: var(--dark-color);
}

.modal.closing[b-815kyxbbta] {
    animation: backdropOut-b-815kyxbbta .22s ease forwards;
}

    .modal.closing .modal-content[b-815kyxbbta] {
        animation: sheetOut-b-815kyxbbta .22s cubic-bezier(.4,.2,.2,1) forwards;
    }

@keyframes sheetIn-b-815kyxbbta {
    from {
        transform: translateY(100%);
        opacity: .98;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes sheetOut-b-815kyxbbta {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(100%);
        opacity: .98;
    }
}

@keyframes backdropIn-b-815kyxbbta {
    from {
        background: rgba(0,0,0,0);
    }

    to {
        background: rgba(0,0,0,.35);
    }
}

@keyframes backdropOut-b-815kyxbbta {
    from {
        background: rgba(0,0,0,.35);
    }

    to {
        background: rgba(0,0,0,0);
    }
}

.confirmation-icon[b-815kyxbbta] {
    font-size: 5rem;
    color: var(--brand);
    padding-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-message[b-815kyxbbta] {
    color: var(--text-color);
    font-weight: 500;
    text-align: center;
    font-size: 20px;
    margin-bottom: 1rem;
}

.modal-options[b-815kyxbbta] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
    width: 100%;
    gap: 1rem;
}

.modal-save[b-815kyxbbta],
.modal-save-error[b-815kyxbbta],
.modal-cancel[b-815kyxbbta] {
    background-color: transparent;
    color: var(--text-color);
    padding: 1rem 1.5rem;
    border-radius: var(--sleek-border-radius);
    font-weight: 600;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    width: 50%;
    gap: 0.75rem;
}

.modal-save[b-815kyxbbta] {
    border: 2px solid var(--brand);
    cursor: pointer;
}

.modal-save:active[b-815kyxbbta] {
    background-color: var(--brand);
    color: var(--dark-color);
}

.modal-save-error[b-815kyxbbta] {
    border: 2px solid var(--error-color);
}

.modal-cancel[b-815kyxbbta] {
    border: 2px solid transparent;
    cursor: pointer;
}

.invite-title[b-815kyxbbta] {
    margin-bottom: 1rem;
    color: var(--text-color);
}

.invite-text-input-container[b-815kyxbbta] {
    height: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.invite-text-input[b-815kyxbbta] {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-color);
    font-size: 1.5rem;
    font-weight: 500;
    border-bottom: 2px solid var(--light-color);
    text-align: center;
}

.invite-text-input:focus[b-815kyxbbta] {
    border-bottom: 2px solid var(--brand);
}

.invite-text-input[b-815kyxbbta]::placeholder {
    color: var(--text-muted);
}

.invite-badge[b-815kyxbbta] {
    background: var(--brand);
    color: var(--dark-color);
    opacity: 0.5;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    width: fit-content;
}

.error[b-815kyxbbta] {
    margin-top: 0.75rem;
    color: var(--error-color);
}

/*********************************************/
/*                                           */
/*              Laptop and up                */
/*                                           */
/*********************************************/

@media (min-width: 992px) {

    .settings-title-group[b-815kyxbbta] {
        margin-bottom: 0.5rem;
    }

    .settings-title[b-815kyxbbta] {
        font-size: 1.15rem;
    }

    .settings-description[b-815kyxbbta] {
        font-size: 0.85rem;
    }

    .main-container[b-815kyxbbta] {
        display: flex;
        max-width: 700px;
        margin: auto;
        height: 40rem;
        flex-direction: column;
        width: 100%;
        padding: 0;
        margin-top: 8rem;
    }

    .settings-group[b-815kyxbbta] {
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
        background: var(--background-color);
        padding: 1rem 1.25rem;
        border: 1px solid var(--light-color);
    }

    .settings-group:hover[b-815kyxbbta] {
        border: 1px solid var(--brand);
        transition: 0.25s;
    }

    .settings-item-title[b-815kyxbbta] {
        font-size: 1rem;
    }

    .settings-item-description[b-815kyxbbta] {
        display: block;
        font-size: 0.85rem;
    }

    .settings-value[b-815kyxbbta] {
        font-size: 0.95rem;
        font-weight: 700;
    }

    .text-input[b-815kyxbbta] {
        font-size: 0.95rem;
        font-weight: 700;
    }

    .delete-cta[b-815kyxbbta] {
        height: 2.5rem;
        font-size: 0.95rem;
    }

    .plans-grid[b-815kyxbbta] {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-auto-flow: initial;
        grid-auto-columns: initial;
        overflow: visible;
        scroll-snap-type: none;
        padding: 0;
        gap: 0.5rem;
        margin-top: 1rem;
    }

    .plans-grid > .plan-card[b-815kyxbbta] {
        scroll-snap-align: initial;
        min-height: 100%;
    }

    .plan-card[b-815kyxbbta] {
        border: 1px solid var(--light-color);
        border-radius: 14px;
        padding: 1rem;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    }

    .plan-card.is-current[b-815kyxbbta] {
        outline: 1px solid var(--brand);
        border: 1px solid var(--light-color);
    }

    .plan-price[b-815kyxbbta] {
        font-size: 1.75rem;
        margin: 0.75rem 0 0.75rem;
    }

    .plan-features[b-815kyxbbta] {
        margin: 0.75rem 0 0;
        font-size: 0.85rem;
    }

    .plan-features i[b-815kyxbbta] {
        margin-right: 0.25rem;
    }

    .plan-cta[b-815kyxbbta] {
        height: 2.5rem;
        font-size: 14px;
    }

    .empty-spacing[b-815kyxbbta] {
        padding-bottom: 6rem;
    }

    .modal[b-815kyxbbta] {
        display: block;
        animation: none;
        background-color: rgba(0, 0, 0, 0.75);
    }

    .modal-content[b-815kyxbbta] {
        position: absolute;
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        transform: translate(-50%, -50%);
        width: 22rem;
        max-height: none;
        overflow: visible;
        border-radius: var(--border-radius);
        border: none;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        padding: 2rem;
        animation: none;
        will-change: auto;
    }

    .invite-text-input-container[b-815kyxbbta] {
        height: 6rem;
    }

    .invite-text-input[b-815kyxbbta] {
        width: 250px;
        font-size: 1.15rem;
    }

    .modal-options[b-815kyxbbta] {
        margin-top: 0.75rem;
        gap: 0.5rem;
    }

    .modal-save[b-815kyxbbta],
    .modal-cancel[b-815kyxbbta] {
        padding: 0.75rem 1rem;
        font-size: 14px;
        width: 50%;
        gap: 0.5rem;
        border-radius: 50px;
    }

    .modal-save[b-815kyxbbta] {
        border: 2px solid var(--brand);
    }

    .modal-cancel[b-815kyxbbta] {
        border: 2px solid transparent;
    }

    .modal-cancel:hover[b-815kyxbbta] {
        background-color: var(--light-color);
        color: var(--text-color);
    }

    .modal-save:hover[b-815kyxbbta] {
        background-color: var(--brand);
        color: var(--dark-color);
    }

    .invite-title[b-815kyxbbta] {
        margin-bottom: 1rem;
    }

    .invite-badge[b-815kyxbbta] {
        width: fit-content;
    }
}

/*********************************************/
/*                                           */
/*              Desktop and up               */
/*                                           */
/*********************************************/

@media (min-width: 1626px) {

    .settings-title-group[b-815kyxbbta] {
        margin-bottom: 1rem;
    }

    .settings-title[b-815kyxbbta] {
        font-size: 1.25rem;
    }

    .settings-description[b-815kyxbbta] {
        font-size: 1rem;
    }

    .main-container[b-815kyxbbta] {
        max-width: 800px;
        height: 40rem;
        margin-top: 10rem;
    }

    .settings-group[b-815kyxbbta] {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        padding: 1.25rem 1.5rem;
    }

    .settings-item-title[b-815kyxbbta] {
        font-size: 1.15rem;
    }

    .settings-item-description[b-815kyxbbta] {
        font-size: 1rem;
    }

    .settings-value[b-815kyxbbta] {
        font-size: 1rem;
    }

    .text-input[b-815kyxbbta] {
        font-size: 1rem;
    }

    .plan-card[b-815kyxbbta] {
        border-radius: 16px;
        padding: 1.25rem;
    }

    .plan-price[b-815kyxbbta] {
        font-size: 2rem;
        margin: 0.75rem 0 1rem;
    }

    .plan-features[b-815kyxbbta] {
        margin: 1rem 0 0;
        font-size: 1rem;
    }

    .plan-features i[b-815kyxbbta] {
        margin-right: 0.5rem;
    }

    .empty-spacing[b-815kyxbbta] {
        padding-bottom: 10rem;
    }

    .modal-content[b-815kyxbbta] {
        width: 30rem;
        padding-top: 3rem;
        padding-bottom: 2rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .invite-text-input-container[b-815kyxbbta] {
        height: 8rem;
    }

    .invite-text-input[b-815kyxbbta] {
        width: 350px;
        font-size: 1.5rem;
    }

    .modal-options[b-815kyxbbta] {
        gap: 1rem;
        margin-top: 1rem;
    }

    .modal-save[b-815kyxbbta],
    .modal-cancel[b-815kyxbbta] {
        padding: 1rem 1.5rem;
        font-size: 20px;
        width: 50%;
        gap: 0.75rem;
    }

    .modal-save[b-815kyxbbta] {
        border-radius: 50px;
    }

    .modal-cancel[b-815kyxbbta] {
        border-radius: 50px;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Pages/SignIn.razor.rz.scp.css */
/*********************************************/
/*                                           */
/*               Shared / Base               */
/*        (mobile-first, shared rules)       */
/*                                           */
/*********************************************/

@keyframes spaceDrift-b-4bd7ihb2id {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100vh);
    }
}

.fade-in[b-4bd7ihb2id] {
    animation: fadeIn 260ms ease-out both;
}

.background[b-4bd7ihb2id],
.auth-wrap[b-4bd7ihb2id] {
    min-height: 100vh;
    display: flex;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at top, #1c2944 0, #060b19 55%, #020309 100%);
    background-attachment: fixed;
}

.background[b-4bd7ihb2id]::before,
.background[b-4bd7ihb2id]::after,
.auth-wrap[b-4bd7ihb2id]::before,
.auth-wrap[b-4bd7ihb2id]::after {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 200vh;
    background: transparent;
    pointer-events: none;
    mix-blend-mode: screen;
}

.background[b-4bd7ihb2id]::before,
.auth-wrap[b-4bd7ihb2id]::before {
    width: 1px;
    height: 1px;
    opacity: 0.8;
    animation: spaceDrift-b-4bd7ihb2id 150s linear infinite;
    box-shadow: 10vw 10vh #fff, 10vw 110vh #fff, 15vw 80vh #fff, 15vw 180vh #fff, 35vw 12vh #fff, 35vw 112vh #fff, 80vw 22vh #fff, 80vw 122vh #fff, 70vw 80vh #fff, 70vw 180vh #fff, 12vw 95vh #fff, 12vw 195vh #fff, 45vw 45vh #fff, 45vw 145vh #fff, 95vw 95vh #fff, 95vw 195vh #fff, 22vw 33vh #fff, 22vw 133vh #fff, 65vw 12vh #fff, 65vw 112vh #fff, 11vw 65vh #fff, 11vw 165vh #fff, 88vw 44vh #fff, 88vw 144vh #fff, 55vw 55vh #fff, 55vw 155vh #fff, 30vw 90vh #fff, 30vw 190vh #fff, 60vw 30vh #fff, 60vw 130vh #fff, 25vw 25vh #fff, 25vw 125vh #fff, 75vw 75vh #fff, 75vw 175vh #fff, 40vw 60vh #fff, 40vw 160vh #fff, 98vw 50vh #fff, 98vw 150vh #fff, 5vw 5vh #fff, 5vw 105vh #fff;
}

.background[b-4bd7ihb2id]::after,
.auth-wrap[b-4bd7ihb2id]::after {
    width: 2px;
    height: 2px;
    opacity: 0.6;
    animation: spaceDrift-b-4bd7ihb2id 100s linear infinite;
    box-shadow: 20vw 20vh #b4dcff, 20vw 120vh #b4dcff, 85vw 15vh #fff, 85vw 115vh #fff, 40vw 80vh #b4dcff, 40vw 180vh #b4dcff, 60vw 60vh #fff, 60vw 160vh #fff, 10vw 90vh #b4dcff, 10vw 190vh #b4dcff, 90vw 40vh #fff, 90vw 140vh #fff, 30vw 50vh #b4dcff, 30vw 150vh #b4dcff, 75vw 85vh #fff, 75vw 185vh #fff;
}

/**************** Auth base (mobile/tablet) ****************/

.auth-wrap[b-4bd7ihb2id] {
    z-index: 1;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.auth-hero[b-4bd7ihb2id] {
    display: none;
}

.auth-panel[b-4bd7ihb2id] {
    background: transparent;
    position: relative;
    width: 100%;
}

.auth-panel label[b-4bd7ihb2id] {
    display: block;
    margin: 0.25rem 0;
    font-weight: 600;
}

.text-input[b-4bd7ihb2id] {
    width: 100%;
    padding: 0.85rem 0.85rem 0.85rem 1.5rem;
    border: 2px solid var(--text-color);
    border-radius: var(--sleek-border-radius);
    margin-bottom: 1rem;
    font-size: 1rem;
    background: transparent;
    color: var(--text-color);
    outline: none;
}

.btn[b-4bd7ihb2id] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.85rem;
    border-radius: var(--sleek-border-radius);
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 1.15rem;
}

.btn.primary[b-4bd7ihb2id] {
    background: var(--brand);
    color: var(--dark-color);
}

.btn.primary:hover[b-4bd7ihb2id] {
    filter: brightness(1.20);
    transition: 0.25s ease-in;
}

.btn.company[b-4bd7ihb2id] {
    border: 2px solid var(--brand);
    background: transparent;
    text-decoration: none;
    color: var(--text-color);
}

.btn.company:hover[b-4bd7ihb2id] {
    background: var(--brand);
    transition: 0.25s ease-in;
    border: 2px solid var(--dark-color);
    color: var(--dark-color);
}

.btn.company .icon[b-4bd7ihb2id],
.btn.company .icon-wrap[b-4bd7ihb2id] {
    width: 20px;
    height: 20px;
    display: inline-block;
}

.spacing[b-4bd7ihb2id] {
    margin-bottom: 1rem;
}

.btn.link[b-4bd7ihb2id] {
    background: transparent;
    border: none;
    text-decoration: none;
}

.or[b-4bd7ihb2id] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
}

.or[b-4bd7ihb2id]::before,
.or[b-4bd7ihb2id]::after {
    content: "";
    flex: 1;
    height: 2px;
    background-color: var(--brand);
    opacity: 0.15;
}

.or span[b-4bd7ihb2id] {
    font-size: .9rem;
    color: var(--text-color);
    opacity: 0.5;
    font-weight: 500;
}

.error[b-4bd7ihb2id] {
    margin-top: 0.75rem;
    color: var(--error-color);
    position: absolute;
    top: -0.5rem;
    white-space: nowrap;
}

.signup-cta[b-4bd7ihb2id] {
    font-size: 0.9rem;
    color: var(--text-color);
    text-align: center;
    margin-top: 3rem;
}

.signup-cta .link[b-4bd7ihb2id] {
    color: var(--brand);
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--sleek-border-radius);
    padding: 0.5rem 1rem;
    background: var(--brand);
    color: var(--dark-color);
    margin-left: 0.5rem;
}

.signup-cta .link:hover[b-4bd7ihb2id] {
    filter: brightness(1.20);
    transition: 0.25s ease-in;
}

/**************** Code input (shared) ****************/

.open-envelope[b-4bd7ihb2id] {
    font-size: 3rem;
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.title[b-4bd7ihb2id] {
    font-size: 28px;
    color: var(--text-color);
    margin-bottom: 1rem;
    text-align: center;
}

.code-input-container[b-4bd7ihb2id] {
    text-align: center;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.code-input[b-4bd7ihb2id] {
    height: 3.5rem;
    width: 3rem;
    font-size: 20px;
    text-align: center;
    background-color: var(--light-color);
    border-radius: var(--border-radius);
    border: none;
    box-shadow: 0 2px 4px 0 var(--shadow-color);
    color: var(--text-color);
}

.code-input:focus[b-4bd7ihb2id] {
    outline: none;
}

/**************** Invite confirmation (shared) ****************/

.confirm-banner[b-4bd7ihb2id] {
    --bg: color-mix(in oklab, var(--brand, #ff7a00) 12%, white);
    --fg: var(--brand, #ff7a00);
    --ring: color-mix(in oklab, var(--brand, #ff7a00) 40%, transparent);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 12px;
    background: var(--bg);
    border: 2px solid var(--ring);
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    color: var(--dark-color, #222);
    position: relative;
    margin-bottom: 1rem;
}

.confirm-banner .fa-circle-check[b-4bd7ihb2id] {
    font-size: 1.5rem;
    color: var(--fg);
    margin-top: 0.125rem;
    flex: 0 0 auto;
}

.confirm-text[b-4bd7ihb2id] {
    margin: 0;
    line-height: 1.35;
    color: var(--text-color);
}

.confirm-text strong[b-4bd7ihb2id] {
    color: var(--fg);
    font-weight: 700;
}

/*********************************************/
/*                                           */
/*              Laptop and up                */
/*                                           */
/*********************************************/
@media (min-width: 992px) {

    .background[b-4bd7ihb2id],
    .auth-wrap[b-4bd7ihb2id] {
        overflow: auto;
    }

    .auth-wrap[b-4bd7ihb2id] {
        display: grid;
        grid-template-columns: 3fr 2fr;
        padding: 2rem 4rem;
        align-items: center;
    }

    .auth-hero[b-4bd7ihb2id] {
        display: flex;
        text-align: left;
        height: 100%;
        align-items: center;
        justify-content: center;
    }

    .auth-panel[b-4bd7ihb2id] {
        padding: 2rem;
        max-width: 28rem;
    }

    .signup-cta[b-4bd7ihb2id] {
        position: absolute;
        margin-left: 5rem;
        margin-top: 3rem;
        text-align: center;
    }

    .btn.company:hover[b-4bd7ihb2id] {
        background: var(--brand);
        transition: 0.25s ease-in;
        border: 2px solid var(--brand);
        color: var(--dark-color);
    }

    .glow-panel[b-4bd7ihb2id] {
        position: relative;
        width: 100%;
        max-width: 650px;
        background: rgba(0, 0, 0, 0.1);
        border: 3px solid rgba(255, 255, 255, 0.1);
        border-radius: 24px;
        padding: 6rem 2.5rem;
        z-index: 1;
        backdrop-filter: blur(12px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    }

    .glow-panel[b-4bd7ihb2id]::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: radial-gradient( 600px circle at var(--x) var(--y), color-mix(in srgb, var(--brand), transparent 85%), transparent 40% );
        opacity: 0;
        transition: opacity 0.5s ease;
        z-index: -1;
    }

    .glow-panel[b-4bd7ihb2id]::after {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: inherit;
        padding: 2px;
        background: radial-gradient( 400px circle at var(--x) var(--y), var(--brand), transparent 40% );
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        opacity: 0;
        transition: opacity 0.5s ease;
        pointer-events: none;
        z-index: -1;
    }

    .glow-panel:hover[b-4bd7ihb2id]::before,
    .glow-panel:hover[b-4bd7ihb2id]::after {
        opacity: 1;
    }

    .glow-blob[b-4bd7ihb2id] {
        position: absolute;
        top: -50%;
        left: -50%;
        width: 120%;
        height: 120%;
        background: radial-gradient(circle, var(--brand) 0%, transparent 60%);
        opacity: 0.15;
        filter: blur(100px);
        z-index: 0;
        animation: pulseGlow-b-4bd7ihb2id 12s ease-in-out infinite alternate;
    }

    @keyframes pulseGlow-b-4bd7ihb2id {
        0% {
            transform: scale(1) translate(0,0);
        }

        100% {
            transform: scale(1.1) translate(20px, 20px);
        }
    }

    .panel-content[b-4bd7ihb2id] {
        position: relative;
        z-index: 1;
    }

    .feature-list[b-4bd7ihb2id] {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .feature-card[b-4bd7ihb2id] {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1.25rem;
        transition: all 0.3s ease;
        cursor: default;
    }

    .icon-badge[b-4bd7ihb2id] {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        background: rgba(0, 0, 0, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: var(--brand);
        flex-shrink: 0;
    }

    .feature-card .text[b-4bd7ihb2id] {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .feature-card strong[b-4bd7ihb2id] {
        color: var(--text-color);
        font-weight: 700;
        font-size: 1rem;
    }

    .feature-card span[b-4bd7ihb2id] {
        color: rgba(255, 255, 255, 0.6);
        line-height: 1.4;
        font-size: 0.9rem;
    }

    .confirm-banner[b-4bd7ihb2id] {
        --bg: color-mix(in oklab, var(--brand, #ff7a00) 12%, transparent);
    }
}

/*********************************************/
/*                                           */
/*              Desktop and up               */
/*                                           */
/*********************************************/
@media (min-width: 1626px) {
    .glow-panel[b-4bd7ihb2id] {
        padding: 8rem 3.5rem;
    }

    .feature-card strong[b-4bd7ihb2id] {
        font-size: 1.1rem;
    }

    .feature-card span[b-4bd7ihb2id] {
        font-size: 0.95rem;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Pages/Signup.razor.rz.scp.css */
/*********************************************/
/*                                           */
/*               Shared / Base               */
/*        (mobile-first, shared rules)       */
/*                                           */
/*********************************************/

@keyframes spaceDrift-b-kdvteypn7u {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100vh);
    }
}

.fade-in[b-kdvteypn7u] {
    animation: fadeIn 260ms ease-out both;
}

.background[b-kdvteypn7u],
.auth-wrap[b-kdvteypn7u] {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at top, #1c2944 0, #060b19 55%, #020309 100%);
    background-attachment: fixed;
}

.background[b-kdvteypn7u]::before,
.background[b-kdvteypn7u]::after,
.auth-wrap[b-kdvteypn7u]::before,
.auth-wrap[b-kdvteypn7u]::after {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 200vh;
    background: transparent;
    pointer-events: none;
    mix-blend-mode: screen;
}

.background[b-kdvteypn7u]::before,
.auth-wrap[b-kdvteypn7u]::before {
    width: 1px;
    height: 1px;
    opacity: 0.8;
    animation: spaceDrift-b-kdvteypn7u 150s linear infinite;
    box-shadow: 10vw 10vh #fff, 10vw 110vh #fff, 15vw 80vh #fff, 15vw 180vh #fff, 35vw 12vh #fff, 35vw 112vh #fff, 80vw 22vh #fff, 80vw 122vh #fff, 70vw 80vh #fff, 70vw 180vh #fff, 12vw 95vh #fff, 12vw 195vh #fff, 45vw 45vh #fff, 45vw 145vh #fff, 95vw 95vh #fff, 95vw 195vh #fff, 22vw 33vh #fff, 22vw 133vh #fff, 65vw 12vh #fff, 65vw 112vh #fff, 11vw 65vh #fff, 11vw 165vh #fff, 88vw 44vh #fff, 88vw 144vh #fff, 55vw 55vh #fff, 55vw 155vh #fff, 30vw 90vh #fff, 30vw 190vh #fff, 60vw 30vh #fff, 60vw 130vh #fff, 25vw 25vh #fff, 25vw 125vh #fff, 75vw 75vh #fff, 75vw 175vh #fff, 40vw 60vh #fff, 40vw 160vh #fff, 98vw 50vh #fff, 98vw 150vh #fff, 5vw 5vh #fff, 5vw 105vh #fff;
}

.background[b-kdvteypn7u]::after,
.auth-wrap[b-kdvteypn7u]::after {
    width: 2px;
    height: 2px;
    opacity: 0.6;
    animation: spaceDrift-b-kdvteypn7u 100s linear infinite;
    box-shadow: 20vw 20vh #b4dcff, 20vw 120vh #b4dcff, 85vw 15vh #fff, 85vw 115vh #fff, 40vw 80vh #b4dcff, 40vw 180vh #b4dcff, 60vw 60vh #fff, 60vw 160vh #fff, 10vw 90vh #b4dcff, 10vw 190vh #b4dcff, 90vw 40vh #fff, 90vw 140vh #fff, 30vw 50vh #b4dcff, 30vw 150vh #b4dcff, 75vw 85vh #fff, 75vw 185vh #fff;
}

.auth-wrap[b-kdvteypn7u] {
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.auth-hero[b-kdvteypn7u] {
    display: none;
}

.auth-panel[b-kdvteypn7u] {
    background: transparent;
    width: 100%;
}

.text-input[b-kdvteypn7u] {
    width: 100%;
    padding: 0.85rem 0.85rem 0.85rem 1.5rem;
    border: 2px solid var(--text-color);
    border-radius: var(--sleek-border-radius);
    margin-bottom: 1rem;
    font-size: 1rem;
    background: transparent;
    color: var(--text-color);
    outline: none;
}

.btn[b-kdvteypn7u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.85rem;
    border-radius: var(--sleek-border-radius);
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 1.15rem;
}

.btn.primary[b-kdvteypn7u] {
    background: var(--brand);
    color: var(--dark-color);
}

.btn.primary:hover[b-kdvteypn7u] {
    filter: brightness(1.20);
    transition: 0.25s ease-in;
}

.btn.company[b-kdvteypn7u] {
    border: 2px solid var(--brand);
    background: transparent;
    text-decoration: none;
    color: var(--text-color);
}

.btn.company:hover[b-kdvteypn7u] {
    transition: 0.25s ease-in;
    background: var(--brand);
    color: var(--dark-color);
}

.btn.company .icon[b-kdvteypn7u],
.btn.company .icon-wrap[b-kdvteypn7u] {
    width: 20px;
    height: 20px;
    display: inline-block;
}

.spacing[b-kdvteypn7u] {
    margin-bottom: 1rem;
}

.btn.link[b-kdvteypn7u] {
    background: transparent;
    border: none;
    text-decoration: none;
}

.or[b-kdvteypn7u] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
}

.or[b-kdvteypn7u]::before,
.or[b-kdvteypn7u]::after {
    content: "";
    flex: 1;
    height: 2px;
    background-color: var(--brand);
    opacity: 0.15;
}

.or span[b-kdvteypn7u] {
    font-size: .9rem;
    color: var(--text-color);
    opacity: 0.5;
    font-weight: 500;
}

.error[b-kdvteypn7u] {
    margin-top: 0.75rem;
    color: var(--error-color);
    white-space: nowrap;
}

.signup-cta[b-kdvteypn7u] {
    font-size: 0.9rem;
    color: var(--text-color);
    text-align: center;
    margin-top: 3rem;
}

.signup-cta .link[b-kdvteypn7u] {
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--sleek-border-radius);
    padding: 0.5rem 1rem;
    background: var(--brand);
    color: var(--dark-color);
    margin-left: 0.5rem;
}

.signup-cta .link:hover[b-kdvteypn7u] {
    filter: brightness(1.20);
    transition: 0.25s ease-in;
}

.open-envelope[b-kdvteypn7u] {
    font-size: 3rem;
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.title[b-kdvteypn7u] {
    font-size: 28px;
    color: var(--text-color);
    margin-bottom: 1rem;
    text-align: center;
}

.code-input-container[b-kdvteypn7u] {
    text-align: center;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.code-input[b-kdvteypn7u] {
    height: 3.5rem;
    width: 3rem;
    font-size: 20px;
    text-align: center;
    background-color: var(--light-color);
    border-radius: var(--border-radius);
    border: none;
    box-shadow: 0 2px 4px 0 var(--shadow-color);
    color: var(--text-color);
}

.code-input:focus[b-kdvteypn7u] {
    outline: none;
}

/*********************************************/
/*                                           */
/*              Laptop and up                */
/*                                           */
/*********************************************/
@media (min-width: 992px) {
    .auth-wrap[b-kdvteypn7u] {
        display: grid;
        grid-template-columns: 3fr 4fr;
        padding: 2rem 4rem;
        overflow: hidden;
    }

    .auth-hero[b-kdvteypn7u] {
        display: flex;
        text-align: left;
        height: 100%;
        align-items: center;
        justify-content: center;
    }

    .auth-panel[b-kdvteypn7u] {
        display: flex;
        justify-content: end;
    }

    .auth-window[b-kdvteypn7u] {
        padding: 2rem;
        max-width: 28rem;
        position: relative;
    }

    .signup-cta[b-kdvteypn7u] {
        position: absolute;
        margin-left: 5rem;
        margin-top: 3rem;
        text-align: center;
    }

    .glow-panel[b-kdvteypn7u] {
        position: relative;
        width: 100%;
        max-width: 650px;
        background: rgba(0, 0, 0, 0.1);
        border: 3px solid rgba(255, 255, 255, 0.1);
        border-radius: 24px;
        padding: 6rem 2.5rem;
        z-index: 1;
        backdrop-filter: blur(12px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    }

    .glow-panel[b-kdvteypn7u]::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: radial-gradient( 600px circle at var(--x) var(--y), color-mix(in srgb, var(--brand), transparent 85%), transparent 40% );
        opacity: 0;
        transition: opacity 0.5s ease;
        z-index: -1;
    }

    .glow-panel[b-kdvteypn7u]::after {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: inherit;
        padding: 2px;
        background: radial-gradient( 400px circle at var(--x) var(--y), var(--brand), transparent 40% );
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        opacity: 0;
        transition: opacity 0.5s ease;
        pointer-events: none;
        z-index: -1;
    }

    .glow-panel:hover[b-kdvteypn7u]::before,
    .glow-panel:hover[b-kdvteypn7u]::after {
        opacity: 1;
    }

    .glow-blob[b-kdvteypn7u] {
        position: absolute;
        top: -50%;
        left: -50%;
        width: 120%;
        height: 120%;
        background: radial-gradient(circle, var(--brand) 0%, transparent 60%);
        opacity: 0.15;
        filter: blur(100px);
        z-index: 0;
        animation: pulseGlow-b-kdvteypn7u 12s ease-in-out infinite alternate;
    }

    @keyframes pulseGlow-b-kdvteypn7u {
        0% {
            transform: scale(1) translate(0,0);
        }

        100% {
            transform: scale(1.1) translate(20px, 20px);
        }
    }

    .panel-content[b-kdvteypn7u] {
        position: relative;
        z-index: 1;
    }

    .feature-list[b-kdvteypn7u] {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .feature-card[b-kdvteypn7u] {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1.25rem;
        transition: all 0.3s ease;
        cursor: default;
    }

    .icon-badge[b-kdvteypn7u] {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        background: rgba(0, 0, 0, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: var(--brand);
        flex-shrink: 0;
    }

    .feature-card .text[b-kdvteypn7u] {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .feature-card strong[b-kdvteypn7u] {
        color: var(--text-color);
        font-weight: 700;
        font-size: 1rem;
    }

    .feature-card span[b-kdvteypn7u] {
        color: rgba(255, 255, 255, 0.6);
        line-height: 1.4;
        font-size: 0.9rem;
    }
}

/*********************************************/
/*                                           */
/*              Desktop and up               */
/*                                           */
/*********************************************/
@media (min-width: 1626px) {
    .glow-panel[b-kdvteypn7u] {
        padding: 8rem 3.5rem;
    }

    .feature-card strong[b-kdvteypn7u] {
        font-size: 1.1rem;
    }

    .feature-card span[b-kdvteypn7u] {
        font-size: 0.95rem;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Pages/Support.razor.rz.scp.css */
a[b-2vxaw2itw8] {
    color: var(--text-color);
    text-decoration: none;
}

a:hover[b-2vxaw2itw8] {
    color: var(--brand);
}

@keyframes spaceDrift-b-2vxaw2itw8 {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100vh);
    }
}

.background[b-2vxaw2itw8] {
    min-height: 100vh;
    display: flex;
    overflow: auto;
    position: relative;
    background: radial-gradient(circle at top, #1c2944 0, #060b19 55%, #020309 100%);
    background-attachment: fixed;
}

.background[b-2vxaw2itw8]::before,
.background[b-2vxaw2itw8]::after {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 200vh;
    background: transparent;
    pointer-events: none;
    mix-blend-mode: screen;
}

.background[b-2vxaw2itw8]::before {
    width: 1px;
    height: 1px;
    opacity: 0.8;
    animation: spaceDrift-b-2vxaw2itw8 150s linear infinite;
    box-shadow: 10vw 10vh #fff, 10vw 110vh #fff, 15vw 80vh #fff, 15vw 180vh #fff, 35vw 12vh #fff, 35vw 112vh #fff, 80vw 22vh #fff, 80vw 122vh #fff, 70vw 80vh #fff, 70vw 180vh #fff, 12vw 95vh #fff, 12vw 195vh #fff, 45vw 45vh #fff, 45vw 145vh #fff, 95vw 95vh #fff, 95vw 195vh #fff, 22vw 33vh #fff, 22vw 133vh #fff, 65vw 12vh #fff, 65vw 112vh #fff, 11vw 65vh #fff, 11vw 165vh #fff, 88vw 44vh #fff, 88vw 144vh #fff, 55vw 55vh #fff, 55vw 155vh #fff, 30vw 90vh #fff, 30vw 190vh #fff, 60vw 30vh #fff, 60vw 130vh #fff, 25vw 25vh #fff, 25vw 125vh #fff, 75vw 75vh #fff, 75vw 175vh #fff, 40vw 60vh #fff, 40vw 160vh #fff, 98vw 50vh #fff, 98vw 150vh #fff, 05vw 05vh #fff, 05vw 105vh #fff;
}

.background[b-2vxaw2itw8]::after {
    width: 2px;
    height: 2px;
    opacity: 0.6;
    animation: spaceDrift-b-2vxaw2itw8 100s linear infinite;
    box-shadow: 20vw 20vh #b4dcff, 20vw 120vh #b4dcff, 85vw 15vh #fff, 85vw 115vh #fff, 40vw 80vh #b4dcff, 40vw 180vh #b4dcff, 60vw 60vh #fff, 60vw 160vh #fff, 10vw 90vh #b4dcff, 10vw 190vh #b4dcff, 90vw 40vh #fff, 90vw 140vh #fff, 30vw 50vh #b4dcff, 30vw 150vh #b4dcff, 75vw 85vh #fff, 75vw 185vh #fff;
}

/**************** Animations ****************/

@keyframes fadeIn-b-2vxaw2itw8 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fade-in[b-2vxaw2itw8] {
    animation: fadeIn-b-2vxaw2itw8 1s ease-out forwards;
}

/**************************************/
/*                                    */
/*              Desktop               */
/*                                    */
/**************************************/

@media screen and (min-width: 1626px) {
    .main-container[b-2vxaw2itw8] {
        display: flex;
        max-width: 900px;
        margin: auto;
        height: 35rem;
        flex-direction: column;
        width: 100%;
    }

    /**************** Section Titles ****************/

    .header[b-2vxaw2itw8] {
        text-align: center;
        margin-bottom: 3.25rem;
    }

    .kicker[b-2vxaw2itw8] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 0.75rem;
        letter-spacing: 0.12em;
        color: var(--text-muted);
        border: 1px solid rgba(255, 255, 255, 0.14);
        padding: 0.4rem 0.75rem;
        border-radius: 999px;
        margin-bottom: 1rem;
        background: transparent;
    }

    .title[b-2vxaw2itw8] {
        font-size: clamp(1.8rem, 3vw, 2.6rem);
        line-height: 1.15;
        margin: 0 0 0.75rem 0;
        color: var(--text-color);
    }

    .subtitle[b-2vxaw2itw8] {
        margin: 0 auto;
        max-width: 56ch;
        font-size: 1.05rem;
        line-height: 1.6;
        color: var(--text-muted);
    }

    /**************** Tabs ****************/

    .tab-option-row[b-2vxaw2itw8] {
        display: flex;
        flex-direction: row;
        gap: 0.75rem;
        justify-content: center;
        margin-bottom: 2rem;
    }

    .tab-chip[b-2vxaw2itw8] {
        border-radius: 50rem;
        color: var(--text-color);
        cursor: pointer;
        font-weight: 700;
        font-size: 1rem;
        padding: 0.75rem 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--light-color);
        gap: 0.5rem;
    }

    .tab-chip:hover[b-2vxaw2itw8] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .tab-selected-chip[b-2vxaw2itw8] {
        border-radius: 50rem;
        color: var(--dark-color);
        cursor: pointer;
        font-weight: 700;
        font-size: 1rem;
        padding: 0.75rem 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--brand);
        gap: 0.5rem;
    }

    /**************** Common Questions ****************/

    /* List */
    .faq-list[b-2vxaw2itw8] {
        display: grid;
        gap: 0.6rem;
        padding-bottom: 15rem;
    }

    /* Each item: transparent by default */
    .faq-item[b-2vxaw2itw8] {
        border-radius: 14px;
        overflow: hidden;
        background: transparent;
        border: 1px solid transparent;
        transition: background 180ms ease, border-color 180ms ease;
    }

    /* Only show background on hover/open */
    .faq-item:hover[b-2vxaw2itw8],
    .faq-item[open][b-2vxaw2itw8] {
        background: rgba(15, 15, 30, 0.6); /* --background-color */
        border-color: var(--brand);
    }

    /* Question row */
    .faq-q[b-2vxaw2itw8] {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem 1.1rem;
        user-select: none;
        color: var(--text-color);
        font-weight: 700;
    }

    .faq-q[b-2vxaw2itw8]::-webkit-details-marker {
        display: none;
    }

    /* Chevron icon */
    .faq-chevron[b-2vxaw2itw8] {
        width: 2rem;
        height: 2rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        /* keep it minimal */
        background: transparent;
        border: 1px solid transparent;
        color: var(--text-muted);
        flex: 0 0 auto;
        transition: transform 220ms ease, color 180ms ease, background 180ms ease, border-color 180ms ease;
    }

    /* Rotate chevron when open */
    .faq-item[open] .faq-chevron[b-2vxaw2itw8] {
        transform: rotate(180deg);
    }

    /* Answer wrapper (smooth open/close) */
    .faq-a[b-2vxaw2itw8] {
        padding: 1rem;
        padding-top: 0;
        color: var(--text-muted);
    }

    .faq-a-inner[b-2vxaw2itw8] {
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transform: translateY(-6px);
        transition: max-height 260ms ease, opacity 180ms ease, transform 220ms ease;
        will-change: max-height, opacity, transform;
        padding: 0;
    }

    .faq-item[open] .faq-a-inner[b-2vxaw2itw8] {
        max-height: 500px; /* bump if you ever add long answers */
        opacity: 1;
        transform: translateY(0);
        padding: 0 0 1.05rem 0;
    }

    .faq-a-inner p[b-2vxaw2itw8] {
        margin: 0;
        color: var(--text-muted);
        line-height: 1.65;
    }
}

/**************************************/
/*                                    */
/*              Laptop                */
/*                                    */
/**************************************/

@media screen and (min-width: 992px) and (max-width: 1625px) {
    .main-container[b-2vxaw2itw8] {
        display: flex;
        max-width: 700px;
        margin: auto;
        height: 30rem;
        flex-direction: column;
        width: 100%;
    }

    /**************** Section Titles ****************/

    .header[b-2vxaw2itw8] {
        text-align: center;
        margin-bottom: 3.25rem;
    }

    .kicker[b-2vxaw2itw8] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 0.75rem;
        letter-spacing: 0.12em;
        color: var(--text-muted);
        border: 1px solid rgba(255, 255, 255, 0.14);
        padding: 0.4rem 0.75rem;
        border-radius: 999px;
        margin-bottom: 1rem;
        background: transparent;
    }

    .title[b-2vxaw2itw8] {
        font-size: clamp(1.8rem, 3vw, 2.6rem);
        line-height: 1.15;
        margin: 0 0 0.75rem 0;
        color: var(--text-color);
    }

    .subtitle[b-2vxaw2itw8] {
        margin: 0 auto;
        max-width: 56ch;
        font-size: 1.05rem;
        line-height: 1.6;
        color: var(--text-muted);
    }

    /**************** Tabs ****************/

    .tab-option-row[b-2vxaw2itw8] {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        justify-content: center;
        margin-bottom: 1.5rem;
    }

    .tab-chip[b-2vxaw2itw8] {
        border-radius: 50rem;
        color: var(--text-color);
        cursor: pointer;
        font-weight: 700;
        font-size: 0.85rem;
        padding: 0.65rem 0.85rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--light-color);
        gap: 0.35rem;
    }

    .tab-chip:hover[b-2vxaw2itw8] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .tab-selected-chip[b-2vxaw2itw8] {
        border-radius: 50rem;
        color: var(--dark-color);
        cursor: pointer;
        font-weight: 700;
        font-size: 0.85rem;
        padding: 0.65rem 0.85rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--brand);
        gap: 0.35rem;
    }

    /**************** Common Questions ****************/

    /* List */
    .faq-list[b-2vxaw2itw8] {
        display: grid;
        gap: 0.6rem;
        padding-bottom: 8rem;
    }

    /* Each item: transparent by default */
    .faq-item[b-2vxaw2itw8] {
        border-radius: 14px;
        overflow: hidden;
        background: transparent;
        border: 1px solid transparent;
        transition: background 180ms ease, border-color 180ms ease;
    }

    /* Only show background on hover/open */
    .faq-item:hover[b-2vxaw2itw8],
    .faq-item[open][b-2vxaw2itw8] {
        background: rgba(15, 15, 30, 0.6); /* --background-color */
        border-color: var(--brand);
    }

    /* Question row */
    .faq-q[b-2vxaw2itw8] {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem 1.1rem;
        user-select: none;
        color: var(--text-color);
        font-weight: 700;
    }

    .faq-q[b-2vxaw2itw8]::-webkit-details-marker {
        display: none;
    }

    /* Chevron icon */
    .faq-chevron[b-2vxaw2itw8] {
        width: 2rem;
        height: 2rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        /* keep it minimal */
        background: transparent;
        border: 1px solid transparent;
        color: var(--text-muted);
        flex: 0 0 auto;
        transition: transform 220ms ease, color 180ms ease, background 180ms ease, border-color 180ms ease;
    }

    /* Rotate chevron when open */
    .faq-item[open] .faq-chevron[b-2vxaw2itw8] {
        transform: rotate(180deg);
    }

    /* Answer wrapper (smooth open/close) */
    .faq-a[b-2vxaw2itw8] {
        padding: 1rem;
        padding-top: 0;
        color: var(--text-muted);
    }

    .faq-a-inner[b-2vxaw2itw8] {
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transform: translateY(-6px);
        transition: max-height 260ms ease, opacity 180ms ease, transform 220ms ease;
        will-change: max-height, opacity, transform;
        padding: 0;
    }

    .faq-item[open] .faq-a-inner[b-2vxaw2itw8] {
        max-height: 500px; /* bump if you ever add long answers */
        opacity: 1;
        transform: translateY(0);
        padding: 0 0 1.05rem 0;
    }

    .faq-a-inner p[b-2vxaw2itw8] {
        margin: 0;
        color: var(--text-muted);
        line-height: 1.65;
    }
}

/**************************************/
/*                                    */
/*          Mobile & Tablet           */
/*                                    */
/**************************************/

@media screen and (max-width: 991px) {
    .main-container[b-2vxaw2itw8] {
        width: 100%;
        max-width: 550px;
        padding: 1rem;
        height: auto;
        margin-top: 6rem;
        margin-right: auto;
        margin-left: auto;
    }

    /**************** Section Titles ****************/

    .header[b-2vxaw2itw8] {
        text-align: center;
        margin-bottom: 3.25rem;
    }

    .kicker[b-2vxaw2itw8] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 0.75rem;
        letter-spacing: 0.12em;
        color: var(--text-muted);
        border: 1px solid rgba(255, 255, 255, 0.14);
        padding: 0.4rem 0.75rem;
        border-radius: 999px;
        margin-bottom: 1rem;
        background: transparent;
    }

    .title[b-2vxaw2itw8] {
        font-size: clamp(1.8rem, 3vw, 2.6rem);
        line-height: 1.15;
        margin: 0 0 0.75rem 0;
        color: var(--text-color);
    }

    .subtitle[b-2vxaw2itw8] {
        margin: 0 auto;
        max-width: 56ch;
        font-size: 1.05rem;
        line-height: 1.6;
        color: var(--text-muted);
    }

    /**************** Tabs ****************/

    .tab-option-row[b-2vxaw2itw8] {
        display: flex;
        flex-direction: row;
        justify-content: start;
        margin-bottom: 1rem;
    }

    .tab-option-row[b-2vxaw2itw8] {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        gap: 0.5rem;
        padding-bottom: 0.25rem;
    }

    .tab-option-row .tab-chip[b-2vxaw2itw8],
    .tab-option-row .tab-selected-chip[b-2vxaw2itw8] {
        flex: 0 0 auto;
    }

    .tab-option-row[b-2vxaw2itw8] {
        scrollbar-width: none;
    }

    .tab-option-row[b-2vxaw2itw8]::-webkit-scrollbar {
        display: none;
    }

    .tab-chip[b-2vxaw2itw8] {
        border-radius: 50rem;
        color: var(--text-color);
        cursor: pointer;
        font-weight: 700;
        font-size: 1rem;
        padding: 0.75rem 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--light-color);
        gap: 0.5rem;
        white-space: nowrap;
    }

    .tab-chip:hover[b-2vxaw2itw8] {
        background: var(--brand);
        color: var(--dark-color);
    }

    .tab-selected-chip[b-2vxaw2itw8] {
        border-radius: 50rem;
        color: var(--dark-color);
        cursor: pointer;
        font-weight: 700;
        font-size: 1rem;
        padding: 0.75rem 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--brand);
        gap: 0.5rem;
        white-space: nowrap;
    }

    /**************** Common Questions ****************/

    .common-questions[b-2vxaw2itw8] {
        padding: 6rem 2rem;
        width: 100%;
        margin: 0 auto;
        color: var(--text-color);
    }

    /* List */
    .faq-list[b-2vxaw2itw8] {
        display: grid;
        gap: 0.6rem;
        padding-bottom: 10rem;
    }

    /* Each item: transparent by default */
    .faq-item[b-2vxaw2itw8] {
        border-radius: 14px;
        overflow: hidden;
        background: transparent;
        border: 1px solid transparent;
        transition: background 180ms ease, border-color 180ms ease;
    }

    /* Only show background on hover/open */
    .faq-item:hover[b-2vxaw2itw8],
    .faq-item[open][b-2vxaw2itw8] {
        background: rgba(15, 15, 30, 0.6); /* --background-color */
        border-color: var(--brand);
    }

    /* Question row */
    .faq-q[b-2vxaw2itw8] {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem 1.1rem;
        user-select: none;
        color: var(--text-color);
        font-weight: 700;
    }

    .faq-q[b-2vxaw2itw8]::-webkit-details-marker {
        display: none;
    }

    /* Chevron icon */
    .faq-chevron[b-2vxaw2itw8] {
        width: 2rem;
        height: 2rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        /* keep it minimal */
        background: transparent;
        border: 1px solid transparent;
        color: var(--text-muted);
        flex: 0 0 auto;
        transition: transform 220ms ease, color 180ms ease, background 180ms ease, border-color 180ms ease;
    }

    /* Rotate chevron when open */
    .faq-item[open] .faq-chevron[b-2vxaw2itw8] {
        transform: rotate(180deg);
    }

    /* Answer wrapper (smooth open/close) */
    .faq-a[b-2vxaw2itw8] {
        padding: 1rem;
        padding-top: 0;
        color: var(--text-muted);
    }

    .faq-a-inner[b-2vxaw2itw8] {
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transform: translateY(-6px);
        transition: max-height 260ms ease, opacity 180ms ease, transform 220ms ease;
        will-change: max-height, opacity, transform;
        padding: 0;
    }

    .faq-item[open] .faq-a-inner[b-2vxaw2itw8] {
        max-height: 500px; /* bump if you ever add long answers */
        opacity: 1;
        transform: translateY(0);
        padding: 0 0 1.05rem 0;
    }

    .faq-a-inner p[b-2vxaw2itw8] {
        margin: 0;
        color: var(--text-muted);
        line-height: 1.65;
    }
}
/* _content/AstroFormsFrontendServer.App/Components/Pages/TermsOfService.razor.rz.scp.css */
/**************** Header ****************/

html[b-0xc2v7zmp9], body[b-0xc2v7zmp9] {
    width: 100%;
    overflow-x: hidden;
}

@keyframes spaceDrift-b-0xc2v7zmp9 {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100vh);
    }
}

main[b-0xc2v7zmp9] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    background: radial-gradient(circle at top, #1c2944 0, #060b19 55%, #020309 100%);
    background-attachment: fixed;
}

main[b-0xc2v7zmp9]::before,
main[b-0xc2v7zmp9]::after {
    content: "";
    position: fixed;
    inset: 0;
    height: 200vh;
    width: 100vw;
    background: transparent;
    pointer-events: none;
    mix-blend-mode: screen;
}

main[b-0xc2v7zmp9]::before {
    width: 1px;
    height: 1px;
    opacity: 0.8;
    animation: spaceDrift-b-0xc2v7zmp9 150s linear infinite;
    box-shadow: 10vw 10vh #fff, 10vw 110vh #fff, 15vw 80vh #fff, 15vw 180vh #fff, 35vw 12vh #fff, 35vw 112vh #fff, 80vw 22vh #fff, 80vw 122vh #fff, 70vw 80vh #fff, 70vw 180vh #fff, 12vw 95vh #fff, 12vw 195vh #fff, 45vw 45vh #fff, 45vw 145vh #fff, 95vw 95vh #fff, 95vw 195vh #fff, 22vw 33vh #fff, 22vw 133vh #fff, 65vw 12vh #fff, 65vw 112vh #fff, 11vw 65vh #fff, 11vw 165vh #fff, 88vw 44vh #fff, 88vw 144vh #fff, 55vw 55vh #fff, 55vw 155vh #fff, 30vw 90vh #fff, 30vw 190vh #fff, 60vw 30vh #fff, 60vw 130vh #fff, 25vw 25vh #fff, 25vw 125vh #fff, 75vw 75vh #fff, 75vw 175vh #fff, 40vw 60vh #fff, 40vw 160vh #fff, 98vw 50vh #fff, 98vw 150vh #fff, 05vw 05vh #fff, 05vw 105vh #fff;
}

main[b-0xc2v7zmp9]::after {
    width: 2px;
    height: 2px;
    opacity: 0.6;
    animation: spaceDrift-b-0xc2v7zmp9 100s linear infinite;
    box-shadow: 20vw 20vh #b4dcff, 20vw 120vh #b4dcff, 85vw 15vh #fff, 85vw 115vh #fff, 40vw 80vh #b4dcff, 40vw 180vh #b4dcff, 60vw 60vh #fff, 60vw 160vh #fff, 10vw 90vh #b4dcff, 10vw 190vh #b4dcff, 90vw 40vh #fff, 90vw 140vh #fff, 30vw 50vh #b4dcff, 30vw 150vh #b4dcff, 75vw 85vh #fff, 75vw 185vh #fff;
}

.policy[b-0xc2v7zmp9] {
    max-width: 860px;
    margin-top: 120px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 8vh;
    padding: 0 24px 0px;
    color: var(--text-muted);
    line-height: 1.6;
}

.policy h1[b-0xc2v7zmp9] {
    font-size: 2rem;
    margin: 0 0 8px;
    color: var(--text-color);
}

.policy .updated[b-0xc2v7zmp9] {
    color: var(--text-color);
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.policy h2[b-0xc2v7zmp9] {
    font-size: 1.25rem;
    margin: 28px 0 8px;
    color: var(--text-color);
}

.policy h3[b-0xc2v7zmp9] {
    font-size: 1.05rem;
    margin: 18px 0 6px;
    color: var(--text-color);
}

.policy p[b-0xc2v7zmp9] {
    margin: 8px 0 12px;
}

.policy ul[b-0xc2v7zmp9] {
    margin: 8px 0 16px 18px;
}

.policy li[b-0xc2v7zmp9] {
    margin: 6px 0;
}

.policy blockquote[b-0xc2v7zmp9] {
    background: var(--background-color);
    border-left: 4px solid var(--brand);
    padding: 12px 14px;
    border-radius: 6px;
    color: var(--text-muted);
}

a[b-0xc2v7zmp9] {
    color: var(--text-color);
}

a:hover[b-0xc2v7zmp9] {
    color: var(--brand);
}