.toast-center-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.toast-top-center {
    top: 0;
    right: 0;
    width: 100%
}

.toast-bottom-center {
    bottom: 0;
    right: 0;
    width: 100%
}

.toast-top-full-width {
    top: 0;
    right: 0;
    width: 100%
}

.toast-bottom-full-width {
    bottom: 0;
    right: 0;
    width: 100%
}

.toast-top-left {
    top: 12px;
    left: 12px
}

.toast-top-right {
    top: 12px;
    right: 12px
}

.toast-bottom-right {
    right: 12px;
    bottom: 12px
}

.toast-bottom-left {
    bottom: 12px;
    left: 12px
}

.toast-title {
    font-weight: 700
}

.toast-message {
    word-wrap: break-word
}

.toast-message a,
.toast-message label {
    color: #fff
}

.toast-message a:hover {
    color: #ccc;
    text-decoration: none
}

.toast-close-button {
    position: relative;
    right: -.3em;
    top: -.3em;
    float: right;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 0 #ffffff
}

.toast-close-button:hover,
.toast-close-button:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: .4
}

button.toast-close-button {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0
}

.toast-container {
    pointer-events: none;
    position: fixed;
    z-index: 999999
}

.toast-container * {
    box-sizing: border-box
}

.toast-container .ngx-toastr {
    position: relative;
    overflow: hidden;
    margin: 0 0 6px;
    padding: 15px 15px 15px 50px;
    width: 300px;
    border-radius: 3px;
    background-position: 15px center;
    background-repeat: no-repeat;
    background-size: 24px;
    box-shadow: 0 0 12px #999;
    color: #fff
}

.toast-container .ngx-toastr:hover {
    box-shadow: 0 0 12px #000;
    opacity: 1;
    cursor: pointer
}

.toast-info {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJyB3aWR0aD0nNTEyJyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTI1NiA4QzExOS4wNDMgOCA4IDExOS4wODMgOCAyNTZjMCAxMzYuOTk3IDExMS4wNDMgMjQ4IDI0OCAyNDhzMjQ4LTExMS4wMDMgMjQ4LTI0OEM1MDQgMTE5LjA4MyAzOTIuOTU3IDggMjU2IDh6bTAgMTEwYzIzLjE5NiAwIDQyIDE4LjgwNCA0MiA0MnMtMTguODA0IDQyLTQyIDQyLTQyLTE4LjgwNC00Mi00MiAxOC44MDQtNDIgNDItNDJ6bTU2IDI1NGMwIDYuNjI3LTUuMzczIDEyLTEyIDEyaC04OGMtNi42MjcgMC0xMi01LjM3My0xMi0xMnYtMjRjMC02LjYyNyA1LjM3My0xMiAxMi0xMmgxMnYtNjRoLTEyYy02LjYyNyAwLTEyLTUuMzczLTEyLTEydi0yNGMwLTYuNjI3IDUuMzczLTEyIDEyLTEyaDY0YzYuNjI3IDAgMTIgNS4zNzMgMTIgMTJ2MTAwaDEyYzYuNjI3IDAgMTIgNS4zNzMgMTIgMTJ2MjR6Jy8+PC9zdmc+)
}

.toast-error {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJyB3aWR0aD0nNTEyJyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTI1NiA4QzExOSA4IDggMTE5IDggMjU2czExMSAyNDggMjQ4IDI0OCAyNDgtMTExIDI0OC0yNDhTMzkzIDggMjU2IDh6bTEyMS42IDMxMy4xYzQuNyA0LjcgNC43IDEyLjMgMCAxN0wzMzggMzc3LjZjLTQuNyA0LjctMTIuMyA0LjctMTcgMEwyNTYgMzEybC02NS4xIDY1LjZjLTQuNyA0LjctMTIuMyA0LjctMTcgMEwxMzQuNCAzMzhjLTQuNy00LjctNC43LTEyLjMgMC0xN2w2NS42LTY1LTY1LjYtNjUuMWMtNC43LTQuNy00LjctMTIuMyAwLTE3bDM5LjYtMzkuNmM0LjctNC43IDEyLjMtNC43IDE3IDBsNjUgNjUuNyA2NS4xLTY1LjZjNC43LTQuNyAxMi4zLTQuNyAxNyAwbDM5LjYgMzkuNmM0LjcgNC43IDQuNyAxMi4zIDAgMTdMMzEyIDI1Nmw2NS42IDY1LjF6Jy8+PC9zdmc+)
}

.toast-success {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJyB3aWR0aD0nNTEyJyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTE3My44OTggNDM5LjQwNGwtMTY2LjQtMTY2LjRjLTkuOTk3LTkuOTk3LTkuOTk3LTI2LjIwNiAwLTM2LjIwNGwzNi4yMDMtMzYuMjA0YzkuOTk3LTkuOTk4IDI2LjIwNy05Ljk5OCAzNi4yMDQgMEwxOTIgMzEyLjY5IDQzMi4wOTUgNzIuNTk2YzkuOTk3LTkuOTk3IDI2LjIwNy05Ljk5NyAzNi4yMDQgMGwzNi4yMDMgMzYuMjA0YzkuOTk3IDkuOTk3IDkuOTk3IDI2LjIwNiAwIDM2LjIwNGwtMjk0LjQgMjk0LjQwMWMtOS45OTggOS45OTctMjYuMjA3IDkuOTk3LTM2LjIwNC0uMDAxeicvPjwvc3ZnPg==)
}

.toast-warning {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1NzYgNTEyJyB3aWR0aD0nNTc2JyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTU2OS41MTcgNDQwLjAxM0M1ODcuOTc1IDQ3Mi4wMDcgNTY0LjgwNiA1MTIgNTI3Ljk0IDUxMkg0OC4wNTRjLTM2LjkzNyAwLTU5Ljk5OS00MC4wNTUtNDEuNTc3LTcxLjk4N0wyNDYuNDIzIDIzLjk4NWMxOC40NjctMzIuMDA5IDY0LjcyLTMxLjk1MSA4My4xNTQgMGwyMzkuOTQgNDE2LjAyOHpNMjg4IDM1NGMtMjUuNDA1IDAtNDYgMjAuNTk1LTQ2IDQ2czIwLjU5NSA0NiA0NiA0NiA0Ni0yMC41OTUgNDYtNDYtMjAuNTk1LTQ2LTQ2LTQ2em0tNDMuNjczLTE2NS4zNDZsNy40MTggMTM2Yy4zNDcgNi4zNjQgNS42MDkgMTEuMzQ2IDExLjk4MiAxMS4zNDZoNDguNTQ2YzYuMzczIDAgMTEuNjM1LTQuOTgyIDExLjk4Mi0xMS4zNDZsNy40MTgtMTM2Yy4zNzUtNi44NzQtNS4wOTgtMTIuNjU0LTExLjk4Mi0xMi42NTRoLTYzLjM4M2MtNi44ODQgMC0xMi4zNTYgNS43OC0xMS45ODEgMTIuNjU0eicvPjwvc3ZnPg==)
}

.toast-container.toast-top-center .ngx-toastr,
.toast-container.toast-bottom-center .ngx-toastr {
    width: 300px;
    margin-left: auto;
    margin-right: auto
}

.toast-container.toast-top-full-width .ngx-toastr,
.toast-container.toast-bottom-full-width .ngx-toastr {
    width: 96%;
    margin-left: auto;
    margin-right: auto
}

.ngx-toastr {
    background-color: #030303;
    pointer-events: auto
}

.toast-success {
    background-color: #51a351
}

.toast-error {
    background-color: #bd362f
}

.toast-info {
    background-color: #2f96b4
}

.toast-warning {
    background-color: #f89406
}

.toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    background-color: #000;
    opacity: .4
}

@media all and (max-width: 240px) {
    .toast-container .ngx-toastr.div {
        padding: 8px 8px 8px 50px;
        width: 11em
    }

    .toast-container .toast-close-button {
        right: -.2em;
        top: -.2em
    }
}

@media all and (min-width: 241px) and (max-width: 480px) {
    .toast-container .ngx-toastr.div {
        padding: 8px 8px 8px 50px;
        width: 18em
    }

    .toast-container .toast-close-button {
        right: -.2em;
        top: -.2em
    }
}

@media all and (min-width: 481px) and (max-width: 768px) {
    .toast-container .ngx-toastr.div {
        padding: 15px 15px 15px 50px;
        width: 25em
    }
}

:root {
    --src-font-family-sans: "Inter", sans-serif;
    --src-font-family-mono: monospace
}

@supports (font-variation-settings: normal) {
    @font-face {
        font-family: Inter;
        src: url("https://metabox.3dsource.com/assets/Inter-VariableFont_slnt,wght-W6IMCKD4.woff2") format("woff2 supports variations"), url("https://metabox.3dsource.com/assets/Inter-VariableFont_slnt,wght-W6IMCKD4.woff2") format("woff2-variations");
        font-weight: 100 900;
        font-stretch: 50% 100%
    }
}

:root {
    --src-space-0: 0px;
    --src-space-px: 1px;
    --src-space-0-5: 2px;
    --src-space-1: 4px;
    --src-space-1-5: 6px;
    --src-space-2: 8px;
    --src-space-2-5: 10px;
    --src-space-3: 12px;
    --src-space-3-5: 14px;
    --src-space-4: 16px;
    --src-space-5: 20px;
    --src-space-6: 24px;
    --src-space-7: 28px;
    --src-space-8: 32px;
    --src-space-9: 36px;
    --src-space-10: 40px;
    --src-space-11: 44px;
    --src-space-12: 48px;
    --src-space-14: 56px;
    --src-space-16: 64px;
    --src-space-20: 80px;
    --src-space-24: 96px;
    --src-space-28: 112px;
    --src-space-32: 128px;
    --src-space-36: 144px;
    --src-space-40: 160px;
    --src-space-44: 176px;
    --src-space-48: 192px;
    --src-space-52: 208px;
    --src-space-56: 224px;
    --src-space-60: 240px;
    --src-space-64: 256px;
    --src-space-72: 288px;
    --src-space-80: 320px;
    --src-space-96: 384px;
    --src-color-neutral-50: #fafafaff;
    --src-color-accent-50: #f1f6ffff;
    --src-color-accent-100: #d6e9ffff;
    --src-color-accent-200: #add4ffff;
    --src-color-accent-300: #7dbbffff;
    --src-color-accent-400: #4ea4ffff;
    --src-color-accent-500: #017bffff;
    --src-color-accent-600: #016fe6ff;
    --src-color-accent-700: #0162ccff;
    --src-color-accent-800: #014ca3ff;
    --src-color-accent-900: #003a7aff;
    --src-color-accent-950: #00244dff;
    --src-color-neutral-100: #f5f5f5ff;
    --src-color-neutral-200: #e5e5e5ff;
    --src-color-neutral-300: #d4d4d4ff;
    --src-color-neutral-400: #a3a3a3ff;
    --src-color-neutral-500: #737373ff;
    --src-color-neutral-600: #525252ff;
    --src-color-neutral-700: #404040ff;
    --src-color-neutral-800: #262626ff;
    --src-color-neutral-900: #171717ff;
    --src-color-neutral-950: #0a0a0aff;
    --src-color-grey-50: #f9fafbff;
    --src-color-grey-100: #f3f4f6ff;
    --src-color-grey-200: #e5e7ebff;
    --src-color-grey-300: #d1d5dbff;
    --src-color-grey-400: #9ca3afff;
    --src-color-grey-500: #6b7280ff;
    --src-color-grey-600: #4b5563ff;
    --src-color-grey-700: #374151ff;
    --src-color-grey-800: #1f2937ff;
    --src-color-grey-900: #111827ff;
    --src-color-grey-950: #030712ff;
    --src-color-green-50: #f0fdf4ff;
    --src-color-green-100: #dcfce7ff;
    --src-color-green-200: #bbf7d0ff;
    --src-color-green-300: #86efacff;
    --src-color-green-400: #4ade80ff;
    --src-color-green-500: #22c55eff;
    --src-color-green-600: #16a34aff;
    --src-color-green-700: #15803dff;
    --src-color-green-800: #166534ff;
    --src-color-green-900: #14532dff;
    --src-color-green-950: #052e16ff;
    --src-color-red-50: #fef3f1ff;
    --src-color-red-100: #fde2ddff;
    --src-color-red-200: #fbc5bcff;
    --src-color-red-300: #f79482ff;
    --src-color-red-400: #f56b52ff;
    --src-color-red-500: #f24122ff;
    --src-color-red-600: #c5280cff;
    --src-color-red-700: #9f200aff;
    --src-color-red-800: #731807ff;
    --src-color-red-900: #430e04ff;
    --src-color-red-950: #450a0aff;
    --src-color-blue-50: #f0f5fdff;
    --src-color-blue-100: #e8f0fdff;
    --src-color-blue-200: #bbd4f7ff;
    --src-color-blue-300: #93baf1ff;
    --src-color-blue-400: #6699e1ff;
    --src-color-blue-500: #3e7dd5ff;
    --src-color-blue-600: #2463bcff;
    --src-color-blue-700: #144995ff;
    --src-color-blue-800: #0e356cff;
    --src-color-blue-900: #10294cff;
    --src-color-blue-950: #051123ff;
    --src-color-orange-50: #fffbebff;
    --src-color-orange-100: #fef3c7ff;
    --src-color-orange-200: #fde68aff;
    --src-color-orange-300: #fcd34dff;
    --src-color-orange-400: #fbbf24ff;
    --src-color-orange-500: #f59b18ff;
    --src-color-orange-600: #d97706ff;
    --src-color-orange-700: #b45309ff;
    --src-color-orange-800: #92400eff;
    --src-color-orange-900: #78350fff;
    --src-color-orange-950: #451a03ff;
    --src-color-yellow-50: #fefdf0ff;
    --src-color-yellow-100: #fdfbe5ff;
    --src-color-yellow-200: #fbf7caff;
    --src-color-yellow-300: #f9f4b3ff;
    --src-color-yellow-400: #f7f097ff;
    --src-color-yellow-500: #f0e442ff;
    --src-color-yellow-600: #d3c93aff;
    --src-color-yellow-700: #bbb233ff;
    --src-color-yellow-800: #9e962cff;
    --src-color-yellow-900: #787221ff;
    --src-color-yellow-950: #605b1aff;
    --src-color-alpha-default-10: #94a3b814;
    --src-color-alpha-default-50: #94a3b829;
    --src-color-alpha-default-100: #94a3b83d;
    --src-color-alpha-default-200: #4755693d;
    --src-color-alpha-default-600: #475569a3;
    --src-color-alpha-white-10: #ffffff0a;
    --src-color-alpha-white-50: #ffffff1f;
    --src-color-alpha-white-100: #ffffff29;
    --src-color-alpha-white-600: #ffffff70;
    --src-color-alpha-dark-10: #0000000a;
    --src-color-alpha-dark-50: #00000014;
    --src-color-alpha-dark-100: #00000029;
    --src-color-alpha-dark-200: #0000003d;
    --src-color-alpha-dark-600: #000000a3;
    --src-color-alpha-test-10: #94a3b814;
    --src-color-alpha-test-50: #94a3b829;
    --src-color-alpha-test-100: #94a3b83d;
    --src-color-alpha-test-200: #4755693d;
    --src-color-alpha-test-600: #475569a3;
    --src-color-alpha-accent-10: #017bff14;
    --src-color-alpha-accent-50: #017bff1f;
    --src-color-alpha-accent-100: #017bff29;
    --src-color-alpha-warning-10: #f5a80f14;
    --src-color-alpha-warning-50: #f5a80f1f;
    --src-color-alpha-warning-100: #f5a80f29;
    --src-color-alpha-warning-200: #f5a80f3d;
    --src-color-alpha-warning-300: #f5a80f52;
    --src-color-alpha-warning-400: #f5a80f5c;
    --src-color-alpha-success-10: #16a34a14;
    --src-color-alpha-accent-200: #017bff3d;
    --src-color-alpha-accent-300: #017bff52;
    --src-color-alpha-accent-400: #017bff5c;
    --src-color-alpha-destruct-10: #ef444414;
    --src-color-alpha-success-50: #16a34a1f;
    --src-color-alpha-success-100: #16a34a29;
    --src-color-alpha-success-200: #16a34a3d;
    --src-color-alpha-success-300: #16a34a5c;
    --src-color-alpha-success-400: #16a34a70;
    --src-color-alpha-destruct-50: #ef44441f;
    --src-color-alpha-destruct-100: #ef444429;
    --src-color-alpha-destruct-200: #ef44443d;
    --src-color-alpha-attention-10: #f0e44214;
    --src-color-alpha-attention-50: #f0e4421f;
    --src-color-alpha-attention-100: #f0e44229;
    --src-color-alpha-attention-200: #f0e4423d;
    --src-color-alpha-attention-300: #f0e44252;
    --src-color-alpha-attention-400: #f0e4425c
}

:root {
    --src-surface-background: var(--src-color-grey-50);
    --src-ui-accent-default: var(--src-color-accent-500);
    --src-ui-accent-default-hover: var(--src-color-accent-600);
    --src-ui-accent-disabled: var(--src-color-alpha-test-200);
    --src-ui-accent-success: var(--src-color-green-500);
    --src-ui-accent-success-hover: var(--src-color-green-600);
    --src-ui-accent-error: var(--src-color-red-500);
    --src-ui-accent-error-hover: var(--src-color-red-600);
    --src-ui-accent-active: var(--src-color-grey-700);
    --src-ui-accent-active-hover: var(--src-color-grey-900);
    --src-ui-secondary-default: var(--src-color-alpha-default-10);
    --src-ui-secondary-default-hover: var(--src-color-alpha-default-50);
    --src-ui-secondary-disabled: var(--src-color-alpha-white-10);
    --src-ui-secondary-active: var(--src-color-alpha-accent-50);
    --src-ui-secondary-info: var(--src-color-alpha-accent-10);
    --src-ui-secondary-info-hover: var(--src-color-alpha-accent-50);
    --src-ui-secondary-success: var(--src-color-alpha-success-10);
    --src-ui-secondary-success-hover: var(--src-color-alpha-success-50);
    --src-ui-secondary-error: var(--src-color-alpha-destruct-10);
    --src-ui-secondary-error-hover: var(--src-color-alpha-destruct-100);
    --src-ui-secondary-progress: var(--src-color-alpha-progress-10);
    --src-ui-input-default: var(--src-color-alpha-white-10);
    --src-ui-input-secondary: var(--src-color-alpha-default-10);
    --src-ui-input-hover: var(--src-color-alpha-accent-10);
    --src-ui-input-disabled: var(--src-color-alpha-default-50);
    --src-ui-input-success: var(--src-color-alpha-white-10);
    --src-ui-input-success-hover: var(--src-color-alpha-success-10);
    --src-ui-input-error: var(--src-color-alpha-white-10);
    --src-ui-input-error-hover: var(--src-color-alpha-destruct-10);
    --src-surface-curtain: var(--src-color-alpha-default-600);
    --src-surface-fade: var(--src-color-alpha-white-600);
    --src-surface-bg: var(--src-color-alpha-default-200);
    --src-ui-light: var(--src-light);
    --src-border-control-default: var(--src-color-neutral-300);
    --src-border-control-hover: var(--src-color-neutral-500);
    --src-border-button-basic: var(--src-color-grey-200);
    --src-border-button-basic-hover: var(--src-color-grey-400);
    --src-border-button-info: var(--src-color-accent-300);
    --src-border-button-info-hover: var(--src-color-accent-500);
    --src-border-button-success: var(--src-color-green-400);
    --src-border-button-success-hover: var(--src-color-green-500);
    --src-border-button-error: var(--src-color-red-300);
    --src-border-button-error-hover: var(--src-color-red-500);
    --src-border-button-disabled: var(--src-color-grey-200);
    --src-border-input-basic: var(--src-color-grey-300);
    --src-border-input-hover: var(--src-color-grey-400);
    --src-border-input-filled: var(--src-color-grey-300);
    --src-border-input-active: var(--src-color-accent-500);
    --src-border-input-success: var(--src-color-green-500);
    --src-border-input-success-hover: var(--src-color-green-600);
    --src-border-input-error: var(--src-color-red-500);
    --src-border-input-error-hover: var(--src-color-red-500);
    --src-border-container-basic: var(--src-color-grey-300);
    --src-border-container-hover: var(--src-color-grey-400);
    --src-border-container-light: var(--src-color-alpha-default-50);
    --src-border-container-active: var(--src-color-accent-400);
    --src-border-container-success: var(--src-color-green-200);
    --src-border-container-error: var(--src-color-red-200);
    --src-text-body-main: var(--src-color-grey-900);
    --src-text-body-secondary: var(--src-color-grey-600);
    --src-text-body-grey: var(--src-color-grey-400);
    --src-text-body-lable: var(--src-color-grey-500);
    --src-text-body-disabled: var(--src-color-grey-400);
    --src-text-body-main-invert: var(--src-color-grey-50);
    --src-text-body-secondary-invert: var(--src-color-grey-300);
    --src-icon-default: var(--src-color-grey-700);
    --src-icon-label: var(--src-color-grey-500);
    --src-icon-hover: var(--src-color-grey-900);
    --src-icon-grey: var(--src-color-grey-400);
    --src-icon-disabled: var(--src-color-grey-400);
    --src-icon-main-invert: var(--src-light);
    --src-icon-secondary-invert: var(--src-color-grey-200);
    --src-icon-info: var(--src-color-accent-500);
    --src-icon-info-hover: var(--src-color-accent-600);
    --src-icon-success: var(--src-color-green-600);
    --src-icon-success-hover: var(--src-color-green-700);
    --src-icon-error: var(--src-color-red-500);
    --src-icon-error-hover: var(--src-color-red-600);
    --src-icon-warning: var(--src-color-orange-600);
    --src-icon-warning-hover: var(--src-color-orange-700);
    --src-icon-attention: var(--src-color-yellow-800);
    --src-icon-attention-hover: var(--src-color-yellow-900);
    --src-graphics-positive: var(--src-color-green-500);
    --src-graphics-negative: var(--src-color-red-500);
    --src-graphics-accent: var(--src-color-accent-500);
    --src-graphics-dark-grey: var(--src-color-grey-500);
    --src-graphics-orange: #f5a80fff;
    --src-graphics-yellow: #f0e442ff;
    --src-graphics-turquoise: #00ced1ff;
    --src-graphics-brown: #8b4513ff;
    --src-graphics-black: var(--src-color-grey-700);
    --src-text-body-accent: var(--src-color-accent-600);
    --src-text-body-success: var(--src-color-green-600);
    --src-text-body-destruct: var(--src-color-red-600);
    --src-text-ui-primary-main: var(--src-light);
    --src-text-ui-primary-secondary: var(--src-color-grey-200);
    --src-text-ui-primary-disabled: var(--src-color-grey-400);
    --src-text-ui-primary-main-invert: var(--src-color-grey-50);
    --src-text-ui-primary-secondary-invert: var(--src-color-grey-200);
    --src-text-ui-secondary-main: var(--src-color-grey-900);
    --src-text-ui-secondary-secondary: var(--src-color-grey-600);
    --src-text-ui-secondary-grey: var(--src-color-grey-400);
    --src-text-ui-secondary-disabled: var(--src-color-grey-400);
    --src-text-ui-secondary-main-invert: var(--src-color-grey-50);
    --src-text-ui-secondary-secondary-invert: var(--src-color-grey-300);
    --src-shadow-hard: var(--src-color-alpha-test-200);
    --src-shadow-light: var(--src-color-alpha-default-50);
    --src-shadow-accent-light: var(--src-color-alpha-accent-100);
    --src-shadow-accent-hard: var(--src-color-alpha-accent-200);
    --src-shadow-success: var(--src-color-alpha-success-50);
    --src-shadow-success-hover: var(--src-color-alpha-success-200);
    --src-shadow-error: var(--src-color-alpha-destruct-100);
    --src-shadow-error-hover: var(--src-color-alpha-destruct-200);
    --src-text-ui-accent-main: var(--src-color-accent-600);
    --src-text-ui-accent-hover: var(--src-color-accent-700);
    --src-text-ui-success-main: var(--src-color-green-600);
    --src-text-ui-success-hover: var(--src-color-green-700);
    --src-text-ui-distruct-main: var(--src-color-red-500);
    --src-text-ui-distruct-hover: var(--src-color-red-600);
    --src-surface-container-main: var(--src-light);
    --src-surface-container-on-top: var(--src-color-alpha-default-10);
    --src-surface-container-secondary: var(--src-color-grey-50);
    --src-surface-container-info: var(--src-color-accent-50);
    --src-surface-container-success: var(--src-color-green-50);
    --src-surface-container-error: var(--src-color-red-50);
    --src-surface-toast-basic: var(--src-color-alpha-default-50);
    --src-surface-toast-info: var(--src-color-accent-600);
    --src-surface-toast-success: var(--src-color-green-600);
    --src-surface-toast-error: var(--src-color-red-500);
    --src-border-infoPrompt-basic: var(--src-color-grey-300);
    --src-border-infoPrompt-light: var(--src-color-alpha-default-50);
    --src-border-infoPrompt-info: var(--src-color-accent-200);
    --src-border-infoPrompt-success: var(--src-color-green-200);
    --src-border-infoPrompt-error: var(--src-color-red-200);
    --src-gradient-light-start: var(--src-color-alpha-test-100);
    --src-gradient-light-end: var(--src-color-alpha-default-10);
    --src-gradient-accent-light: var(--src-color-alpha-accent-10);
    --src-gradient-accent-hard: var(--src-color-alpha-accent-50);
    --src-gradient-success: var(--src-color-alpha-success-50);
    --src-gradient-success-hover: var(--src-color-alpha-success-200);
    --src-gradient-error: var(--src-color-alpha-destruct-100);
    --src-gradient-error-hover: var(--src-color-alpha-destruct-200);
    --src-tech-sticker: var(--src-color-orange-100);
    --wireframe-main: var(--src-color-neutral-600);
    --wireframe-secondary: var(--src-color-neutral-500);
    --wireframe-light: var(--src-color-neutral-300);
    --wireframe-surface-primary: var(--src-light);
    --wireframe-surface-secondary: var(--src-color-alpha-default-50);
    --wireframe-border: var(--src-color-alpha-default-200);
    --wireframe-invert: var(--src-light);
    --src-tech-description: var(--src-color-orange-900);
    --src-light: #ffffffff;
    --src-dark: #000000ff;
    --src-ui-status-basic-neutral: var(--src-color-grey-500);
    --src-ui-status-basic-neutral-hover: var(--src-color-grey-600);
    --src-ui-status-basic-critical: var(--src-color-red-500);
    --src-ui-status-basic-critical-hover: var(--src-color-red-600);
    --src-ui-status-basic-info: var(--src-color-accent-500);
    --src-ui-status-basic-info-hover: var(--src-color-accent-600);
    --src-ui-status-basic-success: var(--src-color-green-500);
    --src-ui-status-basic-success-hover: var(--src-color-green-500);
    --src-ui-status-basic-warning: var(--src-color-orange-500);
    --src-ui-status-basic-warning-hover: var(--src-color-orange-600);
    --src-ui-status-basic-attention: var(--src-color-yellow-500);
    --src-ui-status-basic-attention-hover: var(--src-color-yellow-600);
    --src-ui-status-light-neutral: var(--src-color-alpha-default-100);
    --src-ui-status-light-neutral-hover: var(--src-color-alpha-default-200);
    --src-ui-status-light-critical: var(--src-color-alpha-destruct-100);
    --src-ui-status-light-critical-hover: var(--src-color-alpha-destruct-200);
    --src-ui-status-light-info: var(--src-color-alpha-accent-200);
    --src-ui-status-light-info-hover: var(--src-color-alpha-accent-300);
    --src-ui-status-light-success: var(--src-color-alpha-success-100);
    --src-ui-status-light-success-hover: var(--src-color-alpha-success-200);
    --src-ui-status-light-warning: var(--src-color-alpha-warning-200);
    --src-ui-status-light-warning-hover: var(--src-color-alpha-warning-300);
    --src-ui-status-light-attention: var(--src-color-alpha-attention-200);
    --src-ui-status-light-attention-hover: var(--src-color-alpha-attention-300);
    --src-text-ui-warning-main: var(--src-color-orange-600);
    --src-text-ui-warning-hover: var(--src-color-orange-700);
    --src-text-ui-attention-main: var(--src-color-yellow-800);
    --src-text-ui-attention-hover: var(--src-color-yellow-900)
}

:root {
    --src-font-family-header: Inter;
    --src-font-family-body: Inter;
    --src-font-family-mono: PT Mono;
    --src-font-weight-bold: Bold;
    --src-font-weight-semiBold: SemiBold;
    --src-font-weight-medium: Medium;
    --src-font-weight-regular: Regular;
    --src-font-size-tech: 9px;
    --src-font-size-xs: 12px;
    --src-font-size-sm: 14px;
    --src-font-size-base: 16px;
    --src-font-size-md: 20px;
    --src-font-size-lg: 24px;
    --src-font-size-xl: 28px;
    --src-font-size-2xl: 32px;
    --src-font-size-3xl: 40px;
    --src-font-line-tech: 12px;
    --src-font-size-4xl: 48px;
    --src-font-line-xs: 16px;
    --src-font-line-sm: 20px;
    --src-font-line-base: 24px;
    --src-font-line-md: 28px;
    --src-font-line-lg: 32px;
    --src-font-line-xl: 36px;
    --src-font-line-2xl: 44px;
    --src-font-line-3xl: 52px;
    --src-font-line-4xl: 56px;
    --src-font-spacing-tech: 1.2000000476837158px;
    --src-font-spacing-xl: -.20000000298023224px;
    --src-font-spacing-2xl: -.30000001192092896px;
    --src-font-spacing-3xl: -.5px;
    --src-font-spacing-4xl: -1px
}

[class*=--size-sm] {
    --src-media-thumbnail: 32px;
    --src-media-preview: 640px;
    --src-padding-xs: var(--src-space-1-5);
    --src-padding-sm: var(--src-space-2);
    --src-padding-md: var(--src-space-3);
    --src-padding-lg: var(--src-space-4);
    --src-padding-xl: var(--src-space-6);
    --src-height-xs: var(--src-space-3);
    --src-icon-size: var(--src-space-4);
    --src-icon-line-width: 1.2400000095367432px;
    --src-border-border: 1px;
    --src-height-sm: var(--src-space-4);
    --src-height-base: var(--src-space-7);
    --src-border-rounded-none: 0px;
    --src-height-lg: 40px;
    --src-border-rounded-xs: var(--src-space-0-5);
    --src-border-rounded: var(--src-space-1);
    --src-border-rounded-parent: var(--src-space-2);
    --src-border-rounded-lg: var(--src-space-3);
    --src-border-rounded-full: 9999px;
    --src-gap-none: 0px;
    --src-gap-md: var(--src-space-1);
    --src-gap-lg: var(--src-space-2);
    --src-text-weight-base: var(--src-font-weight-medium);
    --src-text-lineHeight: var(--src-font-line-xs);
    --src-gap-sm: var(--src-space-0-5);
    --src-gap-xl: var(--src-space-3);
    --src-text-fontSize: var(--src-font-size-xs);
    --src-text-weight-bold: var(--src-font-weight-Bold);
    --src-text-weight-medium: var(--src-font-weight-semiBold);
    --src-shadow-focused: var(--src-space-1);
    --src-shadow-ambient-inner: -1px;
    --src-shadow-ambient-inner-light: 1px;
    --src-shadow-ambient-outer: 1px;
    --src-shadow-blur: 1px
}

:root {
    --src-media-thumbnail: 48px;
    --src-media-preview: 1024px;
    --src-padding-xs: var(--src-space-2);
    --src-padding-sm: var(--src-space-3);
    --src-padding-md: var(--src-space-4);
    --src-padding-lg: var(--src-space-5);
    --src-padding-xl: var(--src-space-7);
    --src-height-xs: var(--src-space-4);
    --src-icon-size: var(--src-space-5);
    --src-icon-line-width: 1.440000057220459px;
    --src-border-border: 1px;
    --src-height-sm: var(--src-space-5);
    --src-height-base: var(--src-space-9);
    --src-border-rounded-none: 0px;
    --src-height-lg: 52px;
    --src-border-rounded-xs: var(--src-space-1);
    --src-border-rounded: var(--src-space-1-5);
    --src-border-rounded-parent: var(--src-space-2-5);
    --src-border-rounded-lg: var(--src-space-4);
    --src-border-rounded-full: 9999px;
    --src-gap-none: 0px;
    --src-gap-md: var(--src-space-1-5);
    --src-gap-lg: var(--src-space-2-5);
    --src-text-weight-base: var(--src-font-weight-Medium);
    --src-text-lineHeight: var(--src-font-line-sm);
    --src-gap-sm: var(--src-space-1);
    --src-gap-xl: var(--src-space-3-5);
    --src-text-fontSize: var(--src-font-size-sm);
    --src-text-weight-bold: var(--src-font-weight-Bold);
    --src-text-weight-medium: var(--src-font-weight-semiBold);
    --src-shadow-focused: var(--src-space-1);
    --src-shadow-ambient-inner: -1px;
    --src-shadow-ambient-inner-light: 1px;
    --src-shadow-ambient-outer: 1px;
    --src-shadow-blur: 1px
}

[class*=--size-lg] {
    --src-media-thumbnail: 64px;
    --src-media-preview: 1280px;
    --src-padding-xs: var(--src-space-2-5);
    --src-padding-sm: var(--src-space-4);
    --src-padding-md: var(--src-space-5);
    --src-padding-lg: var(--src-space-6);
    --src-padding-xl: var(--src-space-8);
    --src-height-xs: var(--src-space-5);
    --src-icon-size: var(--src-space-6);
    --src-icon-line-width: 1.6399999856948853px;
    --src-border-border: 2px;
    --src-height-sm: var(--src-space-6);
    --src-height-base: var(--src-space-11);
    --src-border-rounded-none: 0px;
    --src-height-lg: 64px;
    --src-border-rounded-xs: var(--src-space-1-5);
    --src-border-rounded: var(--src-space-2);
    --src-border-rounded-parent: var(--src-space-3);
    --src-border-rounded-lg: var(--src-space-5);
    --src-border-rounded-full: 9999px;
    --src-gap-none: 0px;
    --src-gap-md: var(--src-space-2);
    --src-gap-lg: var(--src-space-3-5);
    --src-text-weight-base: var(--src-font-weight-Medium);
    --src-text-lineHeight: var(--src-font-line-base);
    --src-gap-sm: var(--src-space-1-5);
    --src-gap-xl: var(--src-space-4);
    --src-text-fontSize: var(--src-font-size-base);
    --src-text-weight-bold: var(--src-font-weight-Bold);
    --src-text-weight-medium: var(--src-font-weight-semiBold);
    --src-shadow-focused: var(--src-space-1-5);
    --src-shadow-ambient-inner: -2px;
    --src-shadow-ambient-inner-light: 2px;
    --src-shadow-ambient-outer: 2px;
    --src-shadow-blur: 2px
}

[class*=--size-xl] {
    --src-media-thumbnail: 96px;
    --src-media-preview: 1440px;
    --src-padding-xs: var(--src-space-3-5);
    --src-padding-sm: var(--src-space-5);
    --src-padding-md: var(--src-space-6);
    --src-padding-lg: var(--src-space-7);
    --src-padding-xl: var(--src-space-9);
    --src-height-xs: var(--src-space-6);
    --src-icon-size: var(--src-space-7);
    --src-icon-line-width: 1.840000033378601px;
    --src-border-border: 2px;
    --src-height-sm: var(--src-space-7);
    --src-height-base: var(--src-space-14);
    --src-border-rounded-none: 0px;
    --src-height-lg: 76px;
    --src-border-rounded-xs: var(--src-space-1-5);
    --src-border-rounded: var(--src-space-2-5);
    --src-border-rounded-parent: var(--src-space-4);
    --src-border-rounded-lg: var(--src-space-6);
    --src-border-rounded-full: 9999px;
    --src-gap-none: 0px;
    --src-gap-md: var(--src-space-2);
    --src-gap-lg: var(--src-space-3-5);
    --src-text-weight-base: var(--src-font-weight-Medium);
    --src-text-lineHeight: var(--src-font-line-md);
    --src-gap-sm: var(--src-space-2);
    --src-gap-xl: var(--src-space-4);
    --src-text-fontSize: var(--src-font-size-md);
    --src-text-weight-bold: var(--src-font-weight-Bold);
    --src-text-weight-medium: var(--src-font-weight-semiBold);
    --src-shadow-focused: var(--src-space-1-5);
    --src-shadow-ambient-inner: -3px;
    --src-shadow-ambient-inner-light: 3px;
    --src-shadow-ambient-outer: 3px;
    --src-shadow-blur: 3px
}

@media (min-width: 640px) {
    :root {
        --src-layout-padding-const-xs: var(--src-space-1);
        --src-layout-padding-const-sm: var(--src-space-2);
        --src-layout-padding-const-md: var(--src-space-3);
        --src-layout-padding-const-lg: var(--src-space-4);
        --src-layout-padding-const-xl: var(--src-space-6);
        --src-layout-padding-const-2xl: var(--src-space-8);
        --src-layout-padding-var-xs: var(--src-space-1);
        --src-layout-padding-table-sm: var(--src-space-1-5);
        --src-layout-padding-var-sm: var(--src-space-2);
        --src-layout-padding-var-md: var(--src-space-3);
        --src-layout-padding-var-lg: var(--src-space-4);
        --src-layout-padding-var-xl: var(--src-space-6);
        --src-layout-padding-var-2xl: var(--src-space-8);
        --src-layout-gap-const-none: 0px;
        --src-layout-gap-const-xs: var(--src-space-1);
        --src-layout-gap-const-sm: var(--src-space-2);
        --src-layout-gap-const-md: var(--src-space-3);
        --src-layout-gap-const-lg: var(--src-space-4);
        --src-layout-gap-const-xl: var(--src-space-6);
        --src-layout-gap-const-2xl: var(--src-space-8);
        --src-layout-gap-var-none: 0px;
        --src-layout-gap-var-sm: var(--src-space-1);
        --src-layout-gap-var-md: var(--src-space-2);
        --src-layout-gap-var-lg: var(--src-space-3);
        --src-layout-gap-var-xl: var(--src-space-6);
        --src-layout-height-const-sm: var(--src-space-7);
        --src-layout-height-const-md: var(--src-space-8);
        --src-layout-height-const-lg: var(--space-9);
        --src-layout-height-const-h-xl: var(--src-space-10);
        --src-layout-height-const-h-2xl: var(--src-space-16);
        --src-layout-height-var-xs: var(--src-space-6);
        --src-layout-height-var-sm: var(--src-space-8);
        --src-layout-height-var-base: var(--src-space-16);
        --src-layout-height-var-md: var(--src-space-14);
        --src-layout-height-var-lg: var(--src-space-20);
        --src-layout-height-var-xl: var(--src-space-32);
        --src-layout-radius-var-rounded-kid: var(--src-space-1);
        --src-layout-radius-var-rounded-parent: var(--src-space-2);
        --src-layout-radius-rounded-none: 0px;
        --src-layout-border-border: 1px;
        --src-layout-table-height: var(--src-space-11);
        --src-layout-radius-const-rounded-sm: var(--src-space-1-5);
        --src-layout-radius-const-rounded: var(--src-space-2);
        --src-layout-radius-const-rounded-md: var(--src-space-3);
        --src-layout-radius-const-rounded-lg: var(--src-space-4);
        --src-layout-radius-const-rounded-xl: var(--src-space-6);
        --src-layout-radius-const-rounded-2xl: var(--src-space-8);
        --src-layout-radius-rounded-ui-full: 9999px;
        --src-shadow-basic: var(--src-space-1);
        --src-graphs-label: var(--src-space-2);
        --src-graphs-label-var: var(--src-space-2);
        --src-graphs-height-label-var: var(--src-space-5);
        --src-graphs-height-label-const: var(--src-space-5);
        --src-graphs-height-s: var(--src-space-7);
        --screen-width: 640px;
        --card-width: 216px;
        --preview-width: 216px;
        --src-typography-var-p-sm-lineHeight: var(--src-font-line-height-xs);
        --src-typography-var-p-sm-weight: var(--src-font-weight-Regular);
        --src-typography-var-p-sm-fontSize: var(--src-font-size-xs);
        --src-typography-var-p-md-fontSize: var(--src-font-size-sm);
        --src-typography-var-p-md-weight: var(--src-font-weight-Regular);
        --src-typography-var-p-md-lineHeight: var(--src-font-line-height-sm);
        --src-typography-var-h-sm-fontSize: var(--src-font-size-base);
        --src-typography-var-h-sm-weight: var(--src-font-weight-Semi-Bold);
        --src-typography-var-h-sm-lineHeight: var(--src-font-line-height-base);
        --src-typography-var-h-md-fontSize: var(--src-font-size-md);
        --src-typography-var-h-md-weight: var(--src-font-weight-Semi-Bold);
        --src-typography-var-h-md-lineHeight: var(--src-font-line-height-md);
        --src-typography-var-h-lg-fontSize: var(--src-font-size-xl);
        --src-typography-var-h-lg-weight: var(--src-font-weight-Semi-Bold);
        --src-typography-var-h-lg-lineHeight: var(--src-font-line-height-lg);
        --src-typography-var-h-xl-fontSize: var(--src-font-size-3xl);
        --src-typography-var-h-xl-weight: var(--src-font-weight-Semi-Bold);
        --src-typography-var-h-xl-lineHeight: var(--src-font-line-height-3xl);
        --src-typography-var-p-lg-fontSize: var(--src-font-size-md);
        --src-typography-var-p-lg-weight: var(--src-font-weight-Regular);
        --src-typography-var-p-lg-lineHeight: var(--src-font-line-height-md);
        --src-layout-table-height-2: var(--src-space-11)
    }
}

@media (min-width: 768px) {
    :root {
        --src-layout-padding-const-xs: var(--src-space-1);
        --src-layout-padding-const-sm: var(--src-space-2);
        --src-layout-padding-const-md: var(--src-space-3);
        --src-layout-padding-const-lg: var(--src-space-4);
        --src-layout-padding-const-xl: var(--src-space-6);
        --src-layout-padding-const-2xl: var(--src-space-8);
        --src-layout-padding-var-xs: var(--src-space-2);
        --src-layout-padding-table-sm: var(--src-space-3);
        --src-layout-padding-var-sm: var(--src-space-3);
        --src-layout-padding-var-md: var(--src-space-4);
        --src-layout-padding-var-lg: var(--src-space-5);
        --src-layout-padding-var-xl: var(--src-space-8);
        --src-layout-padding-var-2xl: var(--src-space-11);
        --src-layout-gap-const-none: 0px;
        --src-layout-gap-const-xs: var(--src-space-1);
        --src-layout-gap-const-sm: var(--src-space-2);
        --src-layout-gap-const-md: var(--src-space-3);
        --src-layout-gap-const-lg: var(--src-space-4);
        --src-layout-gap-const-xl: var(--src-space-6);
        --src-layout-gap-const-2xl: var(--src-space-8);
        --src-layout-gap-var-none: 0px;
        --src-layout-gap-var-sm: var(--src-space-2);
        --src-layout-gap-var-md: var(--src-space-3);
        --src-layout-gap-var-lg: var(--src-space-4);
        --src-layout-gap-var-xl: var(--src-space-8);
        --src-layout-height-const-sm: var(--src-space-7);
        --src-layout-height-const-md: var(--src-space-8);
        --src-layout-height-const-lg: var(--src-space-9);
        --src-layout-height-const-h-xl: var(--src-space-10);
        --src-layout-height-const-h-2xl: var(--src-space-16);
        --src-layout-height-var-xs: var(--src-space-8);
        --src-layout-height-var-sm: var(--src-space-10);
        --src-layout-height-var-base: var(--src-space-20);
        --src-layout-height-var-md: var(--src-space-28);
        --src-layout-height-var-lg: var(--src-space-24);
        --src-layout-height-var-xl: var(--src-space-36);
        --src-layout-radius-var-rounded-kid: var(--src-space-2);
        --src-layout-radius-var-rounded-parent: var(--src-space-3);
        --src-layout-radius-rounded-none: 0px;
        --src-layout-border-border: 1px;
        --src-layout-table-height: var(--src-space-14);
        --src-layout-radius-const-rounded-sm: var(--src-space-1-5);
        --src-layout-radius-const-rounded: var(--src-space-2);
        --src-layout-radius-const-rounded-md: var(--src-space-3);
        --src-layout-radius-const-rounded-lg: var(--src-space-4);
        --src-layout-radius-const-rounded-xl: var(--src-space-6);
        --src-layout-radius-const-rounded-2xl: var(--src-space-8);
        --src-layout-radius-rounded-ui-full: 9999px;
        --src-shadow-basic: var(--src-space-1-5);
        --src-graphs-label: var(--src-space-2);
        --src-graphs-label-var: var(--src-space-2-5);
        --src-graphs-height-label-var: var(--src-space-7);
        --src-graphs-height-label-const: var(--src-space-5);
        --src-graphs-height-s: var(--src-space-8);
        --screen-width: 768px;
        --card-width: 320px;
        --preview-width: 216px;
        --src-typography-var-p-sm-lineHeight: var(--src-font-line-height-base);
        --src-typography-var-p-sm-weight: var(--src-font-weight-Regular);
        --src-typography-var-p-sm-fontSize: var(--src-font-size-sm);
        --src-typography-var-p-md-fontSize: var(--src-font-size-base);
        --src-typography-var-p-md-weight: var(--src-font-weight-Regular);
        --src-typography-var-p-md-lineHeight: var(--src-font-line-height-base);
        --src-typography-var-h-sm-fontSize: var(--src-font-size-md);
        --src-typography-var-h-sm-weight: var(--src-font-weight-Semi-Bold);
        --src-typography-var-h-sm-lineHeight: var(--src-font-line-height-md);
        --src-typography-var-h-md-fontSize: var(--src-font-size-lg);
        --src-typography-var-h-md-weight: var(--src-font-weight-Semi-Bold);
        --src-typography-var-h-md-lineHeight: var(--src-font-line-height-lg);
        --src-typography-var-h-lg-fontSize: var(--src-font-size-xl);
        --src-typography-var-h-lg-weight: var(--src-font-weight-Semi-Bold);
        --src-typography-var-h-lg-lineHeight: var(--src-font-line-height-xl);
        --src-typography-var-h-xl-fontSize: var(--src-font-size-4xl);
        --src-typography-var-h-xl-weight: var(--src-font-weight-Semi-Bold);
        --src-typography-var-h-xl-lineHeight: 48px;
        --src-typography-var-p-lg-fontSize: var(--src-font-size-lg);
        --src-typography-var-p-lg-weight: var(--src-font-weight-Regular);
        --src-typography-var-p-lg-lineHeight: var(--src-font-line-height-lg);
        --src-layout-table-height-2: var(--src-space-14)
    }
}

@media (min-width: 1440px) {
    :root {
        --src-layout-padding-const-xs: var(--src-space-1);
        --src-layout-padding-const-sm: var(--src-space-2);
        --src-layout-padding-const-md: var(--src-space-3);
        --src-layout-padding-const-lg: var(--src-space-4);
        --src-layout-padding-const-xl: var(--src-space-6);
        --src-layout-padding-const-2xl: var(--src-space-8);
        --src-layout-padding-var-xs: var(--src-space-3);
        --src-layout-padding-table-sm: var(--src-space-3-5);
        --src-layout-padding-var-sm: var(--src-space-4);
        --src-layout-padding-var-md: var(--src-space-5);
        --src-layout-padding-var-lg: var(--src-space-6);
        --src-layout-padding-var-xl: var(--src-space-10);
        --src-layout-padding-var-2xl: var(--src-space-12);
        --src-layout-gap-const-none: 0px;
        --src-layout-gap-const-xs: var(--src-space-1);
        --src-layout-gap-const-sm: var(--src-space-2);
        --src-layout-gap-const-md: var(--src-space-3);
        --src-layout-gap-const-lg: var(--src-space-4);
        --src-layout-gap-const-xl: var(--src-space-6);
        --src-layout-gap-const-2xl: var(--src-space-8);
        --src-layout-gap-var-none: 0px;
        --src-layout-gap-var-sm: var(--src-space-3);
        --src-layout-gap-var-md: var(--src-space-4);
        --src-layout-gap-var-lg: var(--src-space-5);
        --src-layout-gap-var-xl: var(--src-space-11);
        --src-layout-height-const-sm: var(--src-space-7);
        --src-layout-height-const-md: var(--src-space-8);
        --src-layout-height-const-lg: var(--src-space-9);
        --src-layout-height-const-h-xl: var(--src-space-10);
        --src-layout-height-const-h-2xl: var(--src-space-16);
        --src-layout-height-var-xs: var(--src-space-10);
        --src-layout-height-var-sm: var(--src-space-12);
        --src-layout-height-var-base: var(--src-space-24);
        --src-layout-height-var-md: var(--src-space-36);
        --src-layout-height-var-lg: var(--src-space-28);
        --src-layout-height-var-xl: var(--src-space-44);
        --src-layout-radius-var-rounded-kid: var(--src-space-3);
        --src-layout-radius-var-rounded-parent: var(--src-space-5);
        --src-layout-radius-rounded-none: 0px;
        --src-layout-border-border: 2px;
        --src-layout-table-height: var(--src-space-20);
        --src-layout-radius-const-rounded-sm: var(--src-space-1-5);
        --src-layout-radius-const-rounded: var(--src-space-2);
        --src-layout-radius-const-rounded-md: var(--src-space-3);
        --src-layout-radius-const-rounded-lg: var(--src-space-4);
        --src-layout-radius-const-rounded-xl: var(--src-space-6);
        --src-layout-radius-const-rounded-2xl: var(--src-space-8);
        --src-layout-radius-rounded-ui-full: 9999px;
        --src-shadow-basic: var(--src-space-2);
        --src-graphs-label: var(--src-space-2);
        --src-graphs-label-var: var(--src-space-3);
        --src-graphs-height-label-var: var(--src-space-8);
        --src-graphs-height-label-const: var(--src-space-5);
        --src-graphs-height-s: var(--src-space-9);
        --screen-width: 1024px;
        --card-width: 420px;
        --preview-width: 216px;
        --src-typography-var-p-sm-lineHeight: var(--src-font-line-height-base);
        --src-typography-var-p-sm-weight: var(--src-font-weight-Medium);
        --src-typography-var-p-sm-fontSize: var(--src-font-size-base);
        --src-typography-var-p-md-fontSize: var(--src-font-size-lg);
        --src-typography-var-p-md-weight: var(--src-font-weight-Medium);
        --src-typography-var-p-md-lineHeight: var(--src-font-line-height-lg);
        --src-typography-var-h-sm-fontSize: var(--src-font-size-xl);
        --src-typography-var-h-sm-weight: var(--src-font-weight-Semi-Bold);
        --src-typography-var-h-sm-lineHeight: var(--font-line-height-xl);
        --src-typography-var-h-md-fontSize: var(--src-font-size-2xl);
        --src-typography-var-h-md-weight: var(--src-font-weight-Semi-Bold);
        --src-typography-var-h-md-lineHeight: var(--src-font-line-height-2xl);
        --src-typography-var-h-lg-fontSize: var(--src-font-size-3xl);
        --src-typography-var-h-lg-weight: var(--src-font-weight-Semi-Bold);
        --src-typography-var-h-lg-lineHeight: var(--src-font-line-height-3xl);
        --src-typography-var-h-xl-fontSize: 56px;
        --src-typography-var-h-xl-weight: var(--src-font-weight-Semi-Bold);
        --src-typography-var-h-xl-lineHeight: 56px;
        --src-typography-var-p-lg-fontSize: var(--src-font-size-2xl);
        --src-typography-var-p-lg-weight: var(--src-font-weight-Medium);
        --src-typography-var-p-lg-lineHeight: var(--src-font-line-height-2xl);
        --src-layout-table-height-2: var(--src-space-20)
    }
}

@media (min-width: 1920px) {
    :root {
        --src-layout-padding-const-xs: var(--src-space-1);
        --src-layout-padding-const-sm: var(--src-space-2);
        --src-layout-padding-const-md: var(--src-space-3);
        --src-layout-padding-const-lg: var(--src-space-4);
        --src-layout-padding-const-xl: var(--src-space-6);
        --src-layout-padding-const-2xl: var(--src-space-8);
        --src-layout-padding-var-xs: var(--src-space-4);
        --src-layout-padding-table-sm: var(--src-space-4);
        --src-layout-padding-var-sm: var(--src-space-5);
        --src-layout-padding-var-md: var(--src-space-6);
        --src-layout-padding-var-lg: var(--src-space-8);
        --src-layout-padding-var-xl: var(--src-space-12);
        --src-layout-padding-var-2xl: var(--src-space-14);
        --src-layout-gap-const-none: 0px;
        --src-layout-gap-const-xs: var(--src-space-1);
        --src-layout-gap-const-sm: var(--src-space-2);
        --src-layout-gap-const-md: var(--src-space-3);
        --src-layout-gap-const-lg: var(--src-space-4);
        --src-layout-gap-const-xl: var(--src-space-6);
        --src-layout-gap-const-2xl: var(--src-space-8);
        --src-layout-gap-var-none: 0px;
        --src-layout-gap-var-sm: var(--src-space-4);
        --src-layout-gap-var-md: var(--src-space-5);
        --src-layout-gap-var-lg: var(--src-space-6);
        --src-layout-gap-var-xl: var(--src-space-20);
        --src-layout-height-const-sm: var(--src-space-7);
        --src-layout-height-const-md: var(--src-space-8);
        --src-layout-height-const-lg: var(--src-space-9);
        --src-layout-height-const-h-xl: var(--src-space-10);
        --src-layout-height-const-h-2xl: var(--src-space-16);
        --src-layout-height-var-xs: var(--src-space-12);
        --src-layout-height-var-sm: var(--src-space-14);
        --src-layout-height-var-base: var(--src-space-32);
        --src-layout-height-var-md: var(--src-space-44);
        --src-layout-height-var-lg: var(--src-space-32);
        --src-layout-height-var-xl: var(--src-space-56);
        --src-layout-radius-var-rounded-kid: var(--src-space-5);
        --src-layout-radius-var-rounded-parent: var(--src-space-8);
        --src-layout-radius-rounded-none: 0px;
        --src-layout-border-border: 2px;
        --src-layout-table-height: var(--src-space-24);
        --src-layout-radius-const-rounded-sm: var(--src-space-1-5);
        --src-layout-radius-const-rounded: var(--src-space-2);
        --src-layout-radius-const-rounded-md: var(--src-space-3);
        --src-layout-radius-const-rounded-lg: var(--src-space-4);
        --src-layout-radius-const-rounded-xl: var(--src-space-6);
        --src-layout-radius-const-rounded-2xl: var(--src-space-8);
        --src-layout-radius-rounded-ui-full: 9999px;
        --src-shadow-basic: var(--src-space-3);
        --src-graphs-label: var(--src-space-2);
        --src-graphs-label-var: var(--src-space-3-5);
        --src-graphs-height-label-var: var(--src-space-10);
        --src-graphs-height-label-const: var(--src-spaces-20);
        --src-graphs-height-s: var(--src-space-10);
        --screen-width: 1280px;
        --card-width: 480px;
        --preview-width: 216px;
        --src-typography-var-p-sm-lineHeight: var(--src-font-line-height-xl);
        --src-typography-var-p-sm-weight: var(--src-font-weight-Semi-Bold);
        --src-typography-var-p-sm-fontSize: var(--src-font-size-lg);
        --src-typography-var-p-md-fontSize: var(--src-font-size-xl);
        --src-typography-var-p-md-weight: var(--src-font-weight-Semi-Bold);
        --src-typography-var-p-md-lineHeight: var(--src-font-line-height-xl);
        --src-typography-var-h-sm-fontSize: var(--src-font-size-2xl);
        --src-typography-var-h-sm-weight: var(--src-font-weight-Bold);
        --src-typography-var-h-sm-lineHeight: var(--src-font-line-height-2xl);
        --src-typography-var-h-md-fontSize: var(--src-font-size-3xl);
        --src-typography-var-h-md-weight: var(--src-font-weight-Bold);
        --src-typography-var-h-md-lineHeight: var(--src-font-line-height-3xl);
        --src-typography-var-h-lg-fontSize: var(--src-font-size-4xl);
        --src-typography-var-h-lg-weight: var(--src-font-weight-Bold);
        --src-typography-var-h-lg-lineHeight: var(--src-font-line-height-3xl);
        --src-typography-var-h-xl-fontSize: 64px;
        --src-typography-var-h-xl-weight: var(--src-font-weight-Bold);
        --src-typography-var-h-xl-lineHeight: 64px;
        --src-typography-var-p-lg-fontSize: var(--src-font-size-3xl);
        --src-typography-var-p-lg-weight: var(--src-font-weight-Semi-Bold);
        --src-typography-var-p-lg-lineHeight: var(--src-font-line-height-3xl);
        --src-layout-table-height-2: var(--src-space-24)
    }
}

:root {
    --src-color-brand-700: #0162cc;
    --src-color-brand-500: #017bff;
    --src-color-brand-50: #f1f6ff;
    --src-color-gray-900: #111827;
    --src-color-gray-800: #1f2937;
    --src-color-gray-700: #374151;
    --src-color-gray-600: #4b5563;
    --src-color-gray-500: #6b7280;
    --src-color-gray-400: #abb2be;
    --src-color-gray-300: #d1d5db;
    --src-color-gray-200: #e5e7eb;
    --src-color-gray-100: #f1f2f3;
    --src-color-gray-100-trnsp: rgba(17, 24, 39, .06);
    --src-color-gray-50: #f9fafb;
    --src-color-gray-0: #ffffff;
    --src-color-blue-900: #10294c;
    --src-color-blue-800: #0e356c;
    --src-color-blue-700: #144995;
    --src-color-blue-600: #2463bc;
    --src-color-blue-500: #3e7dd5;
    --src-color-blue-400: #6699e1;
    --src-color-blue-300: #93baf1;
    --src-color-blue-200: #bbd4f7;
    --src-color-blue-100: #e8f0fd;
    --src-color-blue-50: #f0f5fd;
    --src-color-red-900: #430e04;
    --src-color-red-800: #731807;
    --src-color-red-700: #9f200a;
    --src-color-red-600: #c5280c;
    --src-color-red-500: #f24122;
    --src-color-red-400: #f56b52;
    --src-color-red-300: #f79482;
    --src-color-red-200: #fbc5bc;
    --src-color-red-100: #fde2dd;
    --src-color-red-50: #fef3f1;
    --src-color-yellow-900: #4d2e05;
    --src-color-yellow-800: #875c08;
    --src-color-yellow-700: #b77e0b;
    --src-color-yellow-600: #d89b0d;
    --src-color-yellow-500: #f2b322;
    --src-color-yellow-400: #f5c452;
    --src-color-yellow-300: #f8d990;
    --src-color-yellow-200: #fae5b2;
    --src-color-yellow-100: #fcf0d4;
    --src-color-yellow-50: #fef8ec;
    --src-color-green-900: #0c3b2f;
    --src-color-green-800: #125443;
    --src-color-green-700: #007a5c;
    --src-color-green-600: #16a679;
    --src-color-green-500: #23c48c;
    --src-color-green-400: #50dca9;
    --src-color-green-300: #a1edd0;
    --src-color-green-200: #c0f2dd;
    --src-color-green-100: #e0f8ee;
    --src-color-green-50: #f0fdf8
}

:root {
    --src-color-text-default: var(--src-color-gray-800);
    --src-color-text-default-disabled: var(--src-color-gray-400);
    --src-color-text-default-subdued: var(--src-color-gray-500);
    --src-color-text-inverse: var(--src-color-gray-0);
    --src-color-text-primary: var(--src-color-brand-500);
    --src-color-text-critical: var(--src-color-red-700);
    --src-color-bg-default: var(--src-color-gray-0);
    --src-color-bg-default-subdued: var(--src-color-gray-50);
    --src-color-bg-default-hover: var(--src-color-gray-100);
    --src-color-bg-default-disabled: var(--src-color-gray-50);
    --src-color-bg-default-active: var(--src-color-brand-50);
    --src-color-bg-primary: var(--src-color-brand-500);
    --src-color-bg-primary-hover: var(--src-color-brand-700);
    --src-color-bg-primary-disabled: var(--src-color-gray-200);
    --src-color-bg-strong-subdued: var(--src-color-gray-100);
    --src-color-bg-strong-subdued-hover: var(--src-color-gray-200);
    --src-color-bg-strong: var(--src-color-gray-200);
    --src-color-bg-strong-disabled: var(--src-color-gray-100);
    --src-color-bg-critical: var(--src-color-red-600);
    --src-color-bg-critical-strong: var(--src-color-red-700);
    --src-color-bg-critical-subdued: var(--src-color-red-50);
    --src-color-icon-default: var(--src-color-gray-500);
    --src-color-icon-default-hover: var(--src-color-gray-600);
    --src-color-icon-default-disabled: var(--src-color-gray-400);
    --src-color-icon-primary: var(--src-color-brand-500);
    --src-color-icon-critical: var(--src-color-red-700);
    --src-color-border-default: var(--src-color-gray-200);
    --src-color-border-strong: var(--src-color-gray-400);
    --src-color-border-strong-hover: var(--src-color-gray-500);
    --src-color-border-strong-disabled: var(--src-color-gray-300);
    --src-color-border-primary: var(--src-color-brand-500);
    --src-color-border-critical-strong: var(--src-color-red-700)
}

:root {
    --src-fs-small: 12px;
    --src-fs-base: 14px;
    --src-fs-medium: 16px;
    --src-fs-large: 18px;
    --src-fs-xlarge: 20px;
    --src-fs-2xlarge: 24px;
    --src-fs-3xlarge: 28px;
    --src-fs-huge: 32px;
    --src-fs-massive: 40px;
    --src-lh-small: 16px;
    --src-lh-base: 20px;
    --src-lh-medium: 24px;
    --src-lh-large: 26px;
    --src-lh-xlarge: 28px;
    --src-lh-2xlarge: 32px;
    --src-lh-3xlarge: 36px;
    --src-lh-huge: 40px;
    --src-lh-massive: 48px;
    --src-fw-regular: 400;
    --src-fw-medium: 500;
    --src-fw-semibold: 600;
    --src-fw-bold: 700;
    --src-ls-small: -.2px;
    --src-ls-medium: -.3px;
    --src-ls-large: -.5px;
    --src-ls-massive: -1px
}

:root {
    --src-br-4: 4px;
    --src-br-8: 8px;
    --src-br-16: 16px;
    --src-br-24: 24px;
    --src-br-9999: 9999px;
    --src-br-small: var(--src-br-4);
    --src-br-medium: var(--src-br-8);
    --src-br-large: var(--src-br-16);
    --src-br-xlarge: var(--src-br-24);
    --src-br-full: var(--src-br-9999)
}

:root {
    --src-shadow-small: 0px 1px 2px rgba(0, 0, 0, .05);
    --src-shadow-large: 0px 3px 6px rgba(23, 24, 24, .08), 0px 8px 20px rgba(23, 24, 24, .12);
    --src-shadow-large-top: 0px -4px 20px rgba(23, 24, 24, .12);
    --src-shadow-xlarge: 0px 0px 1px rgba(0, 0, 0, .2), 0px 26px 80px rgba(0, 0, 0, .2)
}

.section_3dsourcecom,
.cdk-overlay-container {
    width: 100%;
    height: 100%
}

.section_3dsourcecom *,
.section_3dsourcecom *:before,
.section_3dsourcecom *:after,
.cdk-overlay-container *,
.cdk-overlay-container *:before,
.cdk-overlay-container *:after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    font-family: var(--src-font-family-body)
}

.section_3dsourcecom code,
.cdk-overlay-container code {
    font-family: monospace
}

.section_3dsourcecom button,
.cdk-overlay-container button {
    margin: 0;
    font-family: var(--src-font-family-body);
    cursor: pointer
}

.section_3dsourcecom button:focus,
.cdk-overlay-container button:focus {
    outline: none
}

.section_3dsourcecom .src-select,
.section_3dsourcecom select,
.section_3dsourcecom .src-input,
.section_3dsourcecom input,
.section_3dsourcecom .src-textarea,
.section_3dsourcecom textarea,
.cdk-overlay-container .src-select,
.cdk-overlay-container select,
.cdk-overlay-container .src-input,
.cdk-overlay-container input,
.cdk-overlay-container .src-textarea,
.cdk-overlay-container textarea {
    margin: 0
}

.section_3dsourcecom .src-select:focus-visible,
.section_3dsourcecom .src-select:focus,
.section_3dsourcecom select:focus-visible,
.section_3dsourcecom select:focus,
.section_3dsourcecom .src-input:focus-visible,
.section_3dsourcecom .src-input:focus,
.section_3dsourcecom input:focus-visible,
.section_3dsourcecom input:focus,
.section_3dsourcecom .src-textarea:focus-visible,
.section_3dsourcecom .src-textarea:focus,
.section_3dsourcecom textarea:focus-visible,
.section_3dsourcecom textarea:focus,
.cdk-overlay-container .src-select:focus-visible,
.cdk-overlay-container .src-select:focus,
.cdk-overlay-container select:focus-visible,
.cdk-overlay-container select:focus,
.cdk-overlay-container .src-input:focus-visible,
.cdk-overlay-container .src-input:focus,
.cdk-overlay-container input:focus-visible,
.cdk-overlay-container input:focus,
.cdk-overlay-container .src-textarea:focus-visible,
.cdk-overlay-container .src-textarea:focus,
.cdk-overlay-container textarea:focus-visible,
.cdk-overlay-container textarea:focus {
    outline: none
}

.section_3dsourcecom input[type=checkbox],
.section_3dsourcecom input[type=radio],
.section_3dsourcecom input [type=range],
.section_3dsourcecom progress,
.cdk-overlay-container input[type=checkbox],
.cdk-overlay-container input[type=radio],
.cdk-overlay-container input [type=range],
.cdk-overlay-container progress {
    accent-color: var(--src-color-accent-500)
}

.section_3dsourcecom table,
.section_3dsourcecom .src-table,
.cdk-overlay-container table,
.cdk-overlay-container .src-table {
    border-spacing: 0
}

.section_3dsourcecom p,
.cdk-overlay-container p {
    margin-top: 0
}

.section_3dsourcecom h1,
.section_3dsourcecom h2,
.section_3dsourcecom h3,
.section_3dsourcecom h4,
.section_3dsourcecom h5,
.section_3dsourcecom h6,
.section_3dsourcecom .src-heading-massive,
.section_3dsourcecom .src-heading-h1,
.section_3dsourcecom .src-heading-h2,
.section_3dsourcecom .src-heading-h3,
.section_3dsourcecom .src-heading-h4,
.section_3dsourcecom .src-heading-h5,
.section_3dsourcecom .src-heading-h6,
.cdk-overlay-container h1,
.cdk-overlay-container h2,
.cdk-overlay-container h3,
.cdk-overlay-container h4,
.cdk-overlay-container h5,
.cdk-overlay-container h6,
.cdk-overlay-container .src-heading-massive,
.cdk-overlay-container .src-heading-h1,
.cdk-overlay-container .src-heading-h2,
.cdk-overlay-container .src-heading-h3,
.cdk-overlay-container .src-heading-h4,
.cdk-overlay-container .src-heading-h5,
.cdk-overlay-container .src-heading-h6 {
    margin: 0;
    font-style: normal;
    font-family: var(--src-font-family-header);
    font-weight: var(--src-font-weight-semiBold, 600);
    text-wrap: balance
}

.section_3dsourcecom .src-heading-massive,
.cdk-overlay-container .src-heading-massive {
    font-size: var(--src-fs-massive);
    line-height: var(--src-lh-massive);
    letter-spacing: var(--src-ls-massive)
}

.section_3dsourcecom [class^=src-heading],
.cdk-overlay-container [class^=src-heading] {
    letter-spacing: 0
}

.section_3dsourcecom h1,
.section_3dsourcecom .src-heading-h1,
.cdk-overlay-container h1,
.cdk-overlay-container .src-heading-h1 {
    font-size: var(--src-fs-huge);
    line-height: var(--src-lh-huge);
    letter-spacing: var(--src-ls-large)
}

.section_3dsourcecom h2,
.section_3dsourcecom .src-heading-h2,
.cdk-overlay-container h2,
.cdk-overlay-container .src-heading-h2 {
    font-size: var(--src-fs-3xlarge);
    line-height: var(--src-lh-3xlarge);
    letter-spacing: var(--src-ls-medium)
}

.section_3dsourcecom h3,
.section_3dsourcecom .src-heading-h3,
.cdk-overlay-container h3,
.cdk-overlay-container .src-heading-h3 {
    font-size: var(--src-fs-2xlarge);
    line-height: var(--src-lh-2xlarge);
    letter-spacing: var(--src-ls-small)
}

.section_3dsourcecom h4,
.section_3dsourcecom .src-heading-h4,
.cdk-overlay-container h4,
.cdk-overlay-container .src-heading-h4 {
    font-size: var(--src-fs-xlarge);
    line-height: var(--src-lh-xlarge)
}

.section_3dsourcecom h5,
.section_3dsourcecom .src-heading-h5,
.cdk-overlay-container h5,
.cdk-overlay-container .src-heading-h5 {
    font-size: var(--src-fs-large);
    line-height: var(--src-lh-large)
}

.section_3dsourcecom h6,
.section_3dsourcecom .src-heading-h6,
.cdk-overlay-container h6,
.cdk-overlay-container .src-heading-h6 {
    font-size: var(--src-font-size-base);
    line-height: var(--src-font-line-base)
}

.section_3dsourcecom body,
.cdk-overlay-container body {
    font-size: var(--src-font-size-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--font-line-sm, 20px)
}

.section_3dsourcecom body p,
.cdk-overlay-container body p {
    color: var(--src-color-text-default);
    font-size: var(--src-font-size-sm, 14px);
    font-weight: var(--src-font-weight-regular, 400);
    line-height: var(--src-font-line-sm, 20px)
}

.section_3dsourcecom strong,
.cdk-overlay-container strong {
    font-weight: var(--src-font-weight-medium, 500)
}

.section_3dsourcecom .visuallyhidden:not(:focus):not(:active),
.section_3dsourcecom .src-visuallyhidden:not(:focus):not(:active),
.cdk-overlay-container .visuallyhidden:not(:focus):not(:active),
.cdk-overlay-container .src-visuallyhidden:not(:focus):not(:active) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%)
}

.section_3dsourcecom .hidden,
.section_3dsourcecom .src-hidden,
.cdk-overlay-container .hidden,
.cdk-overlay-container .src-hidden {
    display: none !important
}

.section_3dsourcecom .disabled,
.section_3dsourcecom .src-disabled,
.cdk-overlay-container .disabled,
.cdk-overlay-container .src-disabled {
    pointer-events: none
}

.src-list {
    display: block;
    width: 100%;
    margin: 0;
    list-style: none;
    padding: 8px
}

.src-list .src-list__item {
    margin-bottom: 4px
}

.src-list--compact {
    padding: 0
}

.src-list--compact .src-list__item {
    margin-bottom: 0
}

.src-list__item {
    --srcListItemBgColor: transparent;
    --srcListItemBgHoverColor: var(--src-ui-secondary-default-hover, rgba(148, 163, 184, .16));
    --srcListItemBorderRadius: var(--src-border-rounded, 4px);
    --srcListItemBoxShadow: none;
    --srcListItemFontColor: var(--src-text-body-secondary, #4b5563);
    --srcListItemFontSize: var(--src-text-fontSize, 12px);
    --srcListItemFontWeight: 500;
    --srcListItemLineHeight: var(--src-text-lineHeight, 16px);
    --srcListItemPaddings: var(--src-padding-xs, 8px) var(--src-padding-xs, 8px) var(--src-padding-xs, 8px) var(--src-padding-sm, 8px);
    --srcListItemTextTransform: default;
    --srcListItemDisplay: block;
    position: relative;
    display: var(--srcListItemDisplay);
    width: 100%;
    padding: var(--srcListItemPaddings);
    text-align: left;
    line-height: var(--srcListItemLineHeight);
    font-size: var(--srcListItemFontSize);
    font-weight: var(--srcListItemFontWeight);
    color: var(--srcListItemFontColor);
    text-transform: var(--srcListItemTextTransform);
    letter-spacing: 0;
    white-space: normal;
    background-color: var(--srcListItemBgColor);
    border-radius: var(--srcListItemBorderRadius);
    cursor: pointer;
    word-break: break-word
}

.src-list__item--flex {
    --srcListItemDisplay: inline-flex;
    align-items: flex-start;
    gap: var(--src-gap-md, 6px)
}

@media (hover: hover) and (pointer: fine) {

    .src-list__item:hover,
    .src-list__item:focus-visible {
        background-color: var(--srcListItemBgHoverColor)
    }
}

.src-list__item:active {
    background-color: var(--src-ui-secondary-active, rgba(1, 123, 255, .12))
}

.src-list__item:disabled,
.src-list__item[disabled],
.src-list__item.disabled,
.src-list__item.src-list__item--disabled {
    cursor: default;
    pointer-events: none;
    --srcListItemFontColor: var(--src-color-text-default-disabled);
    background-color: var(--src-color-bg-default)
}

.src-list__item--selected {
    --srcListItemBgColor: var(--src-color-bg-default-active)
}

@media (hover: hover) and (pointer: fine) {

    .src-list__item--selected:hover,
    .src-list__item--selected:focus-visible {
        --srcListItemBgHoverColor: var(--src-color-bg-default-active)
    }
}

.src-list__item--destructive,
.src-list__item--context-error {
    --srcListItemBgColor: transparent;
    --srcListItemBgHoverColor: var(--src-color-bg-critical-subdued);
    --srcListItemFontColor: var(--src-color-text-critical)
}

.src-button {
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-light, rgba(148, 163, 184, .16));
    --srcButtonBoxShadow: 0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, .24)) inset, 0 var(--src-shadow-ambient-outer, 1px) 0 0 var(--src-shadow-light, rgba(148, 163, 184, .16));
    --_defaultFontColor: var(--src-text-ui-secondary-main, #111827);
    --srcButtonBgColor: transparent;
    --srcButtonBorderColor: var(--src-border-button-basic, #e5e7eb);
    --srcButtonBorder: 1px solid var(--srcButtonBorderColor);
    --srcButtonBorderRadius: var(--src-border-rounded, var(--src-space-1-5));
    --srcButtonFontColor: var(--_defaultFontColor);
    --srcButtonIconColor: var(--src-icon-default, #374151);
    --srcButtonFontSize: var(--src-text-fontSize, var(--src-font-size-sm));
    --srcButtonFontWeight: var(--src-font-weight-medium, 500);
    --srcButtonLineHeight: var(--src-text-lineHeight, var(--src-font-line-sm));
    --srcButtonPaddings: 0px var(--src-padding-sm, var(--src-space-3));
    --srcButtonTextTransform: none;
    --srcButtonWidth: auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--srcButtonWidth);
    height: var(--src-height-base, var(--src-space-9));
    padding: var(--srcButtonPaddings);
    font-weight: var(--srcButtonFontWeight);
    font-size: var(--srcButtonFontSize);
    font-style: normal;
    line-height: var(--srcButtonLineHeight);
    text-align: center;
    color: var(--srcButtonFontColor);
    text-transform: var(--srcButtonTextTransform);
    letter-spacing: 0;
    white-space: nowrap;
    border: none;
    background-color: var(--srcButtonBgColor);
    border-radius: var(--srcButtonBorderRadius);
    box-shadow: var(--srcButtonBoxShadow);
    cursor: pointer
}

.src-button:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: var(--srcButtonBorderRadius);
    border: var(--srcButtonBorder)
}

.src-button>div,
.src-button>span {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    font-weight: inherit;
    text-transform: inherit;
    gap: var(--src-gap-md, var(--src-space-1-5));
    width: auto
}

.src-button:disabled,
.src-button[disabled],
.src-button.disabled {
    --srcButtonBoxShadow: none;
    --srcButtonBorder: none;
    --srcButtonBorderColor: transparent;
    --srcButtonFontColor: var(--src-text-ui-secondary-disabled, #9ca3af);
    --srcButtonBgColor: var(--src-ui-accent-disabled, rgba(148, 163, 184, .24));
    --srcButtonIconColor: var(--src-icon-disabled, #9ca3af);
    cursor: default;
    pointer-events: none
}

.src-button:focus-visible {
    --srcButtonIconColor: var(--src-icon-hover, #111827);
    --srcButtonBorderColor: var(--src-border-button-basic-hover, #9ca3af);
    outline: none;
    box-shadow: var(--srcButtonFocusRing)
}

@media (pointer: fine) {
    .src-button:hover {
        --srcButtonBgColor: var(--src-ui-secondary-default-hover, rgba(148, 163, 184, .08));
        --srcButtonBorderColor: var(--src-border-button-basic-hover, #9ca3af);
        --srcButtonIconColor: var(--src-icon-hover, #111827)
    }
}

.src-button:active,
.src-button.src-button--pressed {
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-light, rgba(148, 163, 184, .16));
    --srcButtonBoxShadow: none;
    --srcButtonBorder: none;
    --srcButtonBorderColor: transparent;
    --srcButtonFontColor: var(--src-text-ui-primary-main, #fff);
    --srcButtonBgColor: var(--src-ui-accent-active, #374151);
    --srcButtonIconColor: var(--src-icon-main-invert, #fff)
}

@media (pointer: fine) {

    .src-button:active:hover,
    .src-button.src-button--pressed:hover {
        --srcButtonBgColor: var(--src-ui-accent-active-hover, #111827);
        --srcButtonFontColor: var(--src-text-ui-primary-main, #fff);
        --srcButtonIconColor: var(--src-icon-main-invert, #fff)
    }
}

.src-button--context-info {
    --srcButtonFontColor: var(--src-text-ui-accent-main, #016fe6);
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-accent-light, rgba(1, 123, 255, .16));
    --srcButtonBoxShadow: 0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, .24)) inset, 0 var(--src-shadow-ambient-outer, 1px) 0 0 var(--src-shadow-light, rgba(148, 163, 184, .16));
    --srcButtonBorderColor: var(--src-border-button-info, #7dbbff);
    --srcButtonIconColor: var(--src-icon-info, #017bff)
}

.src-button--context-info:hover {
    --srcButtonFontColor: var(--src-text-ui-accent-hover, #0162cc)
}

.src-button--context-info:focus-visible {
    --srcButtonBgColor: var(--src-ui-secondary-active, rgba(1, 123, 255, .12));
    --srcButtonIconColor: var(--src-icon-info, #017bff);
    --srcButtonBorderColor: var(--src-border-button-info, #7dbbff)
}

@media (pointer: fine) {
    .src-button--context-info:hover {
        --srcButtonBgColor: var(--src-ui-secondary-info, rgba(1, 123, 255, .08));
        --srcButtonBorderColor: var(--src-border-button-info-hover, #017bff);
        --srcButtonIconColor: var(--src-icon-info-hover, #016fe6)
    }
}

.src-button--context-error,
.src-button--context-destructive {
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-error, rgba(239, 68, 68, .16));
    --srcButtonFontColor: var(--src-text-ui-distruct-main, #c5280c);
    --srcButtonBoxShadow: 0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, .24)) inset, 0 var(--src-shadow-ambient-outer, 1px) 0 0 var(--src-shadow-light, rgba(148, 163, 184, .16));
    --srcButtonBorderColor: var(--src-border-button-error, #f79482);
    --srcButtonIconColor: var(--src-icon-error, #f24122)
}

.src-button--context-error:hover,
.src-button--context-destructive:hover {
    --srcButtonFontColor: var(--src-text-ui-distruct-hover, #9f200a)
}

.src-button--context-error:focus-visible,
.src-button--context-destructive:focus-visible {
    --srcButtonBgColor: var(--src-ui-secondary-error, rgba(239, 68, 68, .08));
    --srcButtonIconColor: var(--src-icon-error, #f24122);
    --srcButtonBorderColor: var(--src-border-button-error, #f79482)
}

@media (pointer: fine) {

    .src-button--context-error:hover,
    .src-button--context-destructive:hover {
        --srcButtonBgColor: var(--src-ui-secondary-error, rgba(239, 68, 68, .08));
        --srcButtonBorderColor: var(--src-border-button-error-hover, #f24122);
        --srcButtonIconColor: var(--src-icon-error-hover, #c5280c)
    }
}

.src-button--context-success {
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-success, rgba(22, 163, 74, .12));
    --srcButtonFontColor: var(--src-text-ui-success-main, #16a34a);
    --srcButtonBoxShadow: 0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, .24)) inset, 0 var(--src-shadow-ambient-outer, 1px) 0 0 var(--src-shadow-light, rgba(148, 163, 184, .16));
    --srcButtonBorderColor: var(--src-border-button-success, #4ade80);
    --srcButtonIconColor: var(--src-icon-success, #16a34a)
}

.src-button--context-success:hover {
    --srcButtonFontColor: var(--src-text-ui-success-hover, #15803d)
}

.src-button--context-success:focus-visible {
    --srcButtonBgColor: var(--src-ui-secondary-success, rgba(22, 163, 74, .08));
    --srcButtonIconColor: var(--src-icon-success, #16a34a);
    --srcButtonBorderColor: var(--src-border-button-success, #4ade80)
}

@media (pointer: fine) {
    .src-button--context-success:hover {
        --srcButtonBgColor: var(--src-ui-secondary-success, rgba(22, 163, 74, .08));
        --srcButtonBorderColor: var(--src-border-button-success-hover, #22c55e);
        --srcButtonIconColor: var(--src-icon-success-hover, #15803d)
    }
}

.src-button--primary {
    --srcButtonFontColor: var(--src-text-ui-primary-main, #fff);
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-accent-light, rgba(1, 123, 255, .16));
    --srcButtonBgColor: var(--src-ui-accent-default, #017bff);
    --srcButtonBorder: none;
    --srcButtonIconColor: var(--src-icon-main-invert, #fff)
}

.src-button--primary:hover {
    --srcButtonFontColor: var(--src-text-ui-primary-main, #fff)
}

.src-button--primary:focus-visible {
    --srcButtonIconColor: var(--src-icon-main-invert, #fff)
}

@media (pointer: fine) {
    .src-button--primary:hover {
        --srcButtonBgColor: var(--src-ui-accent-default-hover, #016fe6);
        --srcButtonIconColor: var(--src-icon-main-invert, #fff)
    }
}

.src-button--primary.src-button--context-error,
.src-button--primary.src-button--context-destructive {
    --srcButtonFontColor: var(--src-text-ui-primary-main, #fff);
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-error, rgba(239, 68, 68, .16));
    --srcButtonBgColor: var(--src-ui-accent-error, #f24122);
    --srcButtonIconColor: var(--src-icon-main-invert, #fff)
}

.src-button--primary.src-button--context-error:hover,
.src-button--primary.src-button--context-destructive:hover {
    --srcButtonFontColor: var(--src-text-ui-primary-main, #fff)
}

@media (pointer: fine) {

    .src-button--primary.src-button--context-error:hover,
    .src-button--primary.src-button--context-destructive:hover {
        --srcButtonBgColor: var(--src-ui-accent-error-hover, #f24122);
        --srcButtonIconColor: var(--src-icon-main-invert, #fff)
    }
}

.src-button--primary.src-button--context-error:active,
.src-button--primary.src-button--context-error.src-icon-button--pressed,
.src-button--primary.src-button--context-destructive:active,
.src-button--primary.src-button--context-destructive.src-icon-button--pressed {
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-light, rgba(148, 163, 184, .16));
    --srcButtonBoxShadow: none;
    --srcButtonBorder: none;
    --srcButtonBorderColor: transparent;
    --srcButtonFontColor: var(--src-text-ui-primary-main, #fff);
    --srcButtonBgColor: var(--src-ui-accent-active, #374151);
    --srcButtonIconColor: var(--src-icon-main-invert, #fff)
}

@media (pointer: fine) {

    .src-button--primary.src-button--context-error:active:hover,
    .src-button--primary.src-button--context-error.src-icon-button--pressed:hover,
    .src-button--primary.src-button--context-destructive:active:hover,
    .src-button--primary.src-button--context-destructive.src-icon-button--pressed:hover {
        --srcButtonBgColor: var(--src-ui-accent-active-hover, #111827);
        --srcButtonFontColor: var(--src-text-ui-primary-main, #fff);
        --srcButtonIconColor: var(--src-icon-main-invert, #fff)
    }
}

.src-button--primary.src-button--context-success {
    --srcButtonFontColor: var(--src-text-ui-primary-main, #fff);
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-success, rgba(22, 163, 74, .12));
    --srcButtonBgColor: var(--src-ui-accent-success, #22c55e);
    --srcButtonIconColor: var(--src-icon-main-invert, #fff)
}

.src-button--primary.src-button--context-success:hover {
    --srcButtonFontColor: var(--src-text-ui-primary-main, #fff)
}

@media (pointer: fine) {
    .src-button--primary.src-button--context-success:hover {
        --srcButtonBgColor: var(--src-ui-accent-success-hover, #16a34a);
        --srcButtonIconColor: var(--src-icon-main-invert, #fff)
    }
}

.src-button--primary.src-button--context-success:active,
.src-button--primary.src-button--context-success.src-icon-button--pressed {
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-light, rgba(148, 163, 184, .16));
    --srcButtonBoxShadow: none;
    --srcButtonBorder: none;
    --srcButtonBorderColor: transparent;
    --srcButtonFontColor: var(--src-text-ui-primary-main, #fff);
    --srcButtonBgColor: var(--src-ui-accent-active, #374151);
    --srcButtonIconColor: var(--src-icon-main-invert, #fff)
}

@media (pointer: fine) {

    .src-button--primary.src-button--context-success:active:hover,
    .src-button--primary.src-button--context-success.src-icon-button--pressed:hover {
        --srcButtonBgColor: var(--src-ui-accent-active-hover, #111827);
        --srcButtonFontColor: var(--src-text-ui-primary-main, #fff);
        --srcButtonIconColor: var(--src-icon-main-invert, #fff)
    }
}

.src-button--ghost {
    --srcButtonBoxShadow: none;
    --srcButtonBorder: none;
    --srcButtonBorderColor: transparent;
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-light, rgba(148, 163, 184, .16));
    --srcButtonBgColor: var(--src-ui-secondary-default, rgba(148, 163, 184, .16));
    --srcButtonIconColor: var(--src-icon-default, #374151);
    --srcButtonBorderColor: var(--src-border-button-basic-hover, #9ca3af);
    border: none;
    --srcButtonFontColor: var(--src-text-ui-secondary-secondary, #4b5563)
}

.src-button--ghost:focus-visible {
    --srcButtonBgColor: var(--src-ui-secondary-default-hover, rgba(148, 163, 184, .08));
    --srcButtonBorder: 1px solid var(--srcButtonBorderColor);
    --srcButtonIconColor: var(--src-icon-default, #374151)
}

.src-button--ghost:focus-visible:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: var(--srcButtonBorderRadius);
    border: var(--srcButtonBorder)
}

@media (pointer: fine) {
    .src-button--ghost:hover {
        --srcButtonBgColor: var(--src-ui-secondary-default-hover, rgba(148, 163, 184, .08));
        --srcButtonIconCOlor: var(--src-icon-hover, #111827)
    }
}

.src-button--ghost.src-button--context-info {
    --srcButtonBgColor: var(--src-ui-secondary-info, rgba(1, 123, 255, .08));
    --srcButtonBorderColor: var(--src-border-button-info, #7dbbff);
    --srcButtonIconColor: var(--src-icon-info, #017bff);
    --srcButtonFontColor: var(--src-text-ui-accent-main, #016fe6);
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-accent-light, rgba(1, 123, 255, .16))
}

.src-button--ghost.src-button--context-info:hover {
    --srcButtonFontColor: var(--src-text-ui-accent-hover, #0162cc)
}

@media (pointer: fine) {
    .src-button--ghost.src-button--context-info:hover {
        --srcButtonBgColor: var(--src-ui-secondary-info-hover, rgba(1, 123, 255, .12));
        --srcButtonIconColor: var(--src-icon-info-hover, #016fe6)
    }
}

.src-button--ghost.src-button--context-error,
.src-button--ghost.src-button--context-destructive {
    --srcButtonBgColor: var(--src-ui-secondary-error, rgba(239, 68, 68, .08));
    --srcButtonBorderColor: var(--src-border-button-error, #f79482);
    --srcButtonIconColor: var(--src-icon-error, #f24122);
    --srcButtonFontColor: var(--src-text-ui-distruct-main, #c5280c);
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-error, rgba(239, 68, 68, .16))
}

.src-button--ghost.src-button--context-error:hover,
.src-button--ghost.src-button--context-destructive:hover {
    --srcButtonFontColor: var(--src-text-ui-distruct-hover, #9f200a)
}

@media (pointer: fine) {

    .src-button--ghost.src-button--context-error:hover,
    .src-button--ghost.src-button--context-destructive:hover {
        --srcButtonBgColor: var(--src-ui-secondary-error-hover, rgba(239, 68, 68, .16));
        --srcButtonIconColor: var(--src-icon-error-hover, #c5280c)
    }
}

.src-button--ghost.src-button--context-success {
    --srcButtonBgColor: var(--src-ui-secondary-success, rgba(22, 163, 74, .08));
    --srcButtonBorderColor: var(--src-border-button-success, #4ade80);
    --srcButtonIconColor: var(--src-icon-success, #16a34a);
    --srcButtonFontColor: var(--src-text-ui-success-main, #16a34a);
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-success, rgba(22, 163, 74, .12))
}

.src-button--ghost.src-button--context-success:hover {
    --srcButtonFontColor: var(--src-text-ui-success-hover, #15803d)
}

.src-button--ghost.src-button--context-success:focus-visible {
    --srcButtonBgColor: var(--src-ui-secondary-success, rgba(22, 163, 74, .08))
}

@media (pointer: fine) {
    .src-button--ghost.src-button--context-success:hover {
        --srcButtonBgColor: var(--src-ui-secondary-success-hover, rgba(22, 163, 74, .12));
        --srcButtonIconColor: var(--src-icon-success-hover, #15803d)
    }
}

.src-button--ghost:active,
.src-button--ghost.src-button--pressed {
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-light, rgba(148, 163, 184, .16));
    --srcButtonBoxShadow: none;
    --srcButtonBorder: none;
    --srcButtonBorderColor: transparent;
    --srcButtonFontColor: var(--src-text-ui-primary-main, #fff);
    --srcButtonBgColor: var(--src-ui-accent-active, #374151);
    --srcButtonIconColor: var(--src-icon-main-invert, #fff)
}

@media (pointer: fine) {

    .src-button--ghost:active:hover,
    .src-button--ghost.src-button--pressed:hover {
        --srcButtonBgColor: var(--src-ui-accent-active-hover, #111827);
        --srcButtonFontColor: var(--src-text-ui-primary-main, #fff);
        --srcButtonIconColor: var(--src-icon-main-invert, #fff)
    }
}

.src-button--plain {
    --srcButtonBoxShadow: none;
    --srcButtonBorder: none;
    --srcButtonBorderColor: transparent;
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-light, rgba(148, 163, 184, .16));
    --srcButtonBgColor: transparent;
    --srcButtonIconColor: var(--src-icon-default, #374151)
}

.src-button--plain:focus-visible {
    --srcButtonBgColor: var(--src-ui-secondary-default-hover, rgba(148, 163, 184, .08));
    --srcButtonBorder: 1px solid var(--srcButtonBorderColor);
    --srcButtonIconColor: var(--src-icon-hover, #111827);
    --srcButtonBorderColor: var(--src-border-button-basic-hover, #9ca3af)
}

@media (pointer: fine) {
    .src-button--plain:hover {
        --srcButtonBgColor: var(--src-ui-secondary-default-hover, rgba(148, 163, 184, .08));
        --srcButtonIconColor: var(--src-icon-hover, #111827)
    }
}

.src-button--plain:active,
.src-button--plain.src-button--pressed {
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-light, rgba(148, 163, 184, .16));
    --srcButtonBoxShadow: none;
    --srcButtonBorder: none;
    --srcButtonBorderColor: transparent;
    --srcButtonFontColor: var(--src-text-ui-accent-main, #016fe6);
    --srcButtonIconColor: var(--src-icon-info, #017bff);
    --srcButtonBgColor: var(--src-ui-secondary-default, rgba(148, 163, 184, .16))
}

.src-button--plain:active:hover,
.src-button--plain.src-button--pressed:hover {
    --srcButtonFontColor: var(--src-text-ui-accent-hover, #0162cc)
}

@media (pointer: fine) {

    .src-button--plain:active:hover,
    .src-button--plain.src-button--pressed:hover {
        --srcButtonBgColor: var(--src-ui-secondary-default-hover, rgba(148, 163, 184, .08));
        --srcButtonFontColor: var(--src-text-ui-accent-hover, #0162cc);
        --srcButtonIconColor: var(--src-icon-info-hover, #016fe6)
    }
}

.src-button--inline {
    --srcButtonBoxShadow: none;
    --srcButtonBorder: none;
    --srcButtonBorderColor: transparent;
    --srcButtonBgColor: transparent;
    --srcButtonFontColor: var(--src-text-ui-secondary-secondary, #4b5563);
    --srcButtonIconColor: var(--src-icon-default, #374151);
    --srcButtonBorderRadius: var(--src-border-rounded, 4px);
    --srcButtonPaddings: 0;
    text-decoration: underline;
    height: auto
}

.src-button--inline>div,
.src-button--inline>span {
    gap: var(--src-gap-sm, var(--src-space-1))
}

@media (pointer: fine) {
    .src-button--inline:hover {
        --srcButtonFontColor: var(--src-text-ui-accent-hover, #0162cc);
        --srcButtonBgColor: transparent;
        --srcButtonIconColor: var(--src-icon-info-hover, #016fe6)
    }
}

.src-button--inline:active {
    --srcButtonBgColor: transparent;
    --srcButtonFontColor: var(--src-text-ui-secondary-secondary, #4b5563);
    --srcButtonIconColor: var(--src-icon-hover, #111827)
}

.src-button--inline.src-button--pressed {
    --srcButtonFontColor: var(--src-text-ui-secondary-secondary, #4b5563);
    --srcButtonBgColor: transparent;
    --srcButtonIconColor: var(--src-icon-hover, #111827)
}

.src-button--inline.src-button--pressed:hover {
    --srcButtonFontColor: var(--src-text-ui-accent-hover, #0162cc);
    --srcButtonBgColor: transparent;
    --srcButtonIconColor: var(--src-icon-info-hover, #016fe6)
}

.src-button--inline.src-button--inverted {
    --srcButtonFontColor: var(--src-text-ui-secondary-secondary-invert, #d1d5db);
    --srcButtonBgColor: transparent;
    --srcButtonIconColor: var(--src-text-ui-secondary-secondary-invert, #d1d5db)
}

.src-button--inline.src-button--inverted:hover {
    --srcButtonFontColor: var(--src-text-ui-secondary-main-invert, #f9fafb)
}

.src-button--inline.src-button--inverted:hover {
    --srcButtonIconColor: var(--src-text-ui-secondary-main-invert, #f9fafb)
}

.src-button--inline.src-button--inverted:active,
.src-button--inline.src-button--inverted.src-button--pressed {
    --srcButtonBgColor: transparent;
    --srcButtonFontColor: var(--src-text-ui-secondary-grey, #9ca3af)
}

.src-button--inline.src-button--context-info {
    --srcButtonFontColor: var(--src-text-ui-accent-main, #016fe6);
    --srcButtonBgColor: transparent;
    --srcButtonIconColor: var(--src-icon-info, #017bff)
}

.src-button--inline.src-button--context-info:hover {
    --srcButtonFontColor: var(--src-text-ui-accent-hover, #0162cc)
}

.src-button--inline.src-button--context-info:hover {
    --srcButtonIconColor: var(--src-icon-info-hover, #016fe6)
}

.src-button--inline.src-button--context-success {
    --srcButtonFontColor: var(--src-text-ui-success-main, #16a34a);
    --srcButtonBgColor: transparent;
    --srcButtonIconColor: var(--src-icon-success, #16a34a)
}

.src-button--inline.src-button--context-success:hover {
    --srcButtonFontColor: var(--src-text-ui-success-hover, #15803d)
}

.src-button--inline.src-button--context-success:hover {
    --srcButtonIconColor: var(--src-icon-success-hover, #15803d)
}

.src-button--inline.src-button--context-error,
.src-button--inline.src-button--context-destructive {
    --srcButtonFontColor: var(--src-text-ui-distruct-main, #c5280c);
    --srcButtonBgColor: transparent;
    --srcButtonIconColor: var(--src-icon-error, #f24122)
}

.src-button--inline.src-button--context-error:hover,
.src-button--inline.src-button--context-destructive:hover {
    --srcButtonFontColor: var(--src-text-ui-distruct-hover, #9f200a)
}

.src-button--inline.src-button--context-error:hover,
.src-button--inline.src-button--context-destructive:hover {
    --srcButtonIconColor: var(--src-icon-error-hover, #c5280c)
}

.src-button--inline:disabled,
.src-button--inline[disabled],
.src-button--inline.disabled {
    --srcButtonFontColor: var(--src-text-ui-secondary-disabled, #9ca3af);
    --srcButtonBgColor: transparent
}

.src-icon-button {
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-light, rgba(148, 163, 184, .16));
    --srcButtonBoxShadow: 0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, .24)) inset, 0 var(--src-shadow-ambient-outer, 1px) 0 0 var(--src-shadow-light, rgba(148, 163, 184, .16));
    --srcButtonBgColor: transparent;
    --srcButtonIconColor: var(--src-icon-default, #374151);
    --srcButtonBorderRadius: var(--src-border-rounded, var(--src-space-1-5));
    --srcButtonBorder: 1px solid var(--srcButtonBorderColor);
    --srcButtonBorderColor: var(--src-border-button-basic, #e5e7eb);
    --srcButtonPaddings: 0px var(--src-padding-xs, var(--src-space-2));
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: var(--src-height-base, var(--src-space-9));
    padding: var(--srcButtonPaddings);
    color: var(--srcButtonIconColor);
    background-color: var(--srcButtonBgColor);
    border: none;
    box-shadow: var(--srcButtonBoxShadow);
    border-radius: var(--srcButtonBorderRadius);
    cursor: pointer
}

.src-icon-button:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: var(--srcButtonBorderRadius);
    border: var(--srcButtonBorder)
}

.src-icon-button>*:not(src-badge) {
    width: var(--src-icon-size, var(--src-space-5));
    height: var(--src-icon-size, var(--src-space-5))
}

.src-icon-button:disabled,
.src-icon-button[disabled],
.src-icon-button.disabled {
    --srcButtonBoxShadow: none;
    --srcButtonBorder: none;
    --srcButtonBorderColor: transparent;
    --srcButtonBgColor: var(--src-ui-accent-disabled, rgba(148, 163, 184, .24));
    --srcButtonIconColor: var(--src-icon-disabled, #9ca3af);
    cursor: default;
    pointer-events: none
}

.src-icon-button:focus-visible {
    --srcButtonIconColor: var(--src-icon-hover, #111827);
    --srcButtonBorderColor: var(--src-border-button-basic-hover, #9ca3af);
    outline: none;
    box-shadow: var(--srcButtonFocusRing)
}

@media (pointer: fine) {
    .src-icon-button:hover {
        --srcButtonBgColor: var(--src-ui-secondary-default-hover, rgba(148, 163, 184, .08));
        --srcButtonBorderColor: var(--src-border-button-basic-hover, #9ca3af);
        --srcButtonIconColor: var(--src-icon-hover, #111827)
    }
}

.src-icon-button:active,
.src-icon-button.src-icon-button--pressed {
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-light, rgba(148, 163, 184, .16));
    --srcButtonBoxShadow: none;
    --srcButtonBorder: none;
    --srcButtonBorderColor: transparent;
    --srcButtonFontColor: var(--src-text-ui-primary-main, #fff);
    --srcButtonBgColor: var(--src-ui-accent-active, #374151);
    --srcButtonIconColor: var(--src-icon-main-invert, #fff)
}

@media (pointer: fine) {

    .src-icon-button:active:hover,
    .src-icon-button.src-icon-button--pressed:hover {
        --srcButtonBgColor: var(--src-ui-accent-active-hover, #111827);
        --srcButtonFontColor: var(--src-text-ui-primary-main, #fff);
        --srcButtonIconColor: var(--src-icon-main-invert, #fff)
    }
}

.src-icon-button--round {
    --srcButtonBorderRadius: 50%
}

.src-icon-button--context-info {
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-accent-light, rgba(1, 123, 255, .16));
    --srcButtonBoxShadow: 0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, .24)) inset, 0 var(--src-shadow-ambient-outer, 1px) 0 0 var(--src-shadow-light, rgba(148, 163, 184, .16));
    --srcButtonBorderColor: var(--src-border-button-info, #7dbbff);
    --srcButtonIconColor: var(--src-icon-info, #017bff)
}

.src-icon-button--context-info:focus-visible {
    --srcButtonBgColor: var(--src-ui-secondary-active, rgba(1, 123, 255, .12));
    --srcButtonIconColor: var(--src-icon-info, #017bff);
    --srcButtonBorderColor: var(--src-border-button-info, #7dbbff)
}

@media (pointer: fine) {
    .src-icon-button--context-info:hover {
        --srcButtonBorderColor: var(--src-border-button-info-hover, #017bff);
        --srcButtonBgColor: var(--src-ui-secondary-info, rgba(1, 123, 255, .08));
        --srcButtonIconColor: var(--src-icon-info-hover, #016fe6)
    }
}

.src-icon-button--context-warning {
    --srcButtonBoxShadow: 0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, .24)) inset, 0 var(--src-shadow-ambient-outer, 1px) 0 0 var(--src-shadow-light, rgba(148, 163, 184, .16));
    --srcButtonIconColor: var(--src-icon-warning)
}

.src-icon-button--context-warning:focus-visible {
    --srcButtonIconColor: var(--src-icon-warning);
    --srcButtonBorderColor: var(--src-border-button-error, #f79482)
}

@media (pointer: fine) {
    .src-icon-button--context-warning:hover {
        --srcButtonIconColor: var(--src-icon-warning-hover)
    }
}

.src-icon-button--context-error {
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-error, rgba(239, 68, 68, .16));
    --srcButtonBoxShadow: 0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, .24)) inset, 0 var(--src-shadow-ambient-outer, 1px) 0 0 var(--src-shadow-light, rgba(148, 163, 184, .16));
    --srcButtonBorderColor: var(--src-border-button-error, #f79482);
    --srcButtonIconColor: var(--src-icon-error, #f24122)
}

.src-icon-button--context-error:focus-visible {
    --srcButtonBgColor: var(--src-ui-secondary-error, rgba(239, 68, 68, .08));
    --srcButtonIconColor: var(--src-icon-error, #f24122);
    --srcButtonBorderColor: var(--src-border-button-error, #f79482)
}

@media (pointer: fine) {
    .src-icon-button--context-error:hover {
        --srcButtonBorderColor: var(--src-border-button-error-hover, #f24122);
        --srcButtonBgColor: var(--src-ui-secondary-error-hover, rgba(239, 68, 68, .16));
        --srcButtonIconColor: var(--src-icon-error-hover, #c5280c)
    }
}

.src-icon-button--context-success {
    --srcButtonBoxShadow: 0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, .24)) inset, 0 var(--src-shadow-ambient-outer, 1px) 0 0 var(--src-shadow-light, rgba(148, 163, 184, .16));
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-success, rgba(22, 163, 74, .12));
    --srcButtonBorderColor: var(--src-border-button-success, #4ade80);
    --srcButtonIconColor: var(--src-icon-success, #16a34a)
}

.src-icon-button--context-success:focus-visible {
    --srcButtonBgColor: var(--src-ui-secondary-success, rgba(22, 163, 74, .08));
    --srcButtonIconColor: var(--src-icon-success, #16a34a);
    --srcButtonBorderColor: var(--src-border-button-success, #4ade80)
}

@media (pointer: fine) {
    .src-icon-button--context-success:hover {
        --srcButtonBorderColor: var(--src-border-button-success-hover, #22c55e);
        --srcButtonBgColor: var(--src-ui-secondary-success, rgba(22, 163, 74, .08));
        --srcButtonIconColor: var(--src-icon-success-hover, #15803d)
    }
}

.src-icon-button--primary {
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-accent-light, rgba(1, 123, 255, .16));
    --srcButtonBgColor: var(--src-ui-accent-default, #017bff);
    --srcButtonBorder: none;
    --srcButtonIconColor: var(--src-icon-main-invert, #fff)
}

.src-icon-button--primary:focus-visible {
    --srcButtonIconColor: var(--src-icon-main-invert, #fff)
}

@media (pointer: fine) {
    .src-icon-button--primary:hover {
        --srcButtonBgColor: var(--src-ui-accent-default-hover, #016fe6);
        --srcButtonIconColor: var(--src-icon-main-invert, #fff)
    }
}

.src-icon-button--primary.src-icon-button--context-error {
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-error, rgba(239, 68, 68, .16));
    --srcButtonBgColor: var(--src-ui-accent-error, #f24122);
    --srcButtonIconColor: var(--src-icon-main-invert, #fff)
}

@media (pointer: fine) {
    .src-icon-button--primary.src-icon-button--context-error:hover {
        --srcButtonBgColor: var(--src-ui-accent-error-hover, #f24122);
        --srcButtonIconColor: var(--src-icon-main-invert, #fff)
    }
}

.src-icon-button--primary.src-icon-button--context-error:active,
.src-icon-button--primary.src-icon-button--context-error.src-icon-button--pressed {
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-light, rgba(148, 163, 184, .16));
    --srcButtonBoxShadow: none;
    --srcButtonBorder: none;
    --srcButtonBorderColor: transparent;
    --srcButtonFontColor: var(--src-text-ui-primary-main, #fff);
    --srcButtonBgColor: var(--src-ui-accent-active, #374151);
    --srcButtonIconColor: var(--src-icon-main-invert, #fff)
}

@media (pointer: fine) {

    .src-icon-button--primary.src-icon-button--context-error:active:hover,
    .src-icon-button--primary.src-icon-button--context-error.src-icon-button--pressed:hover {
        --srcButtonBgColor: var(--src-ui-accent-active-hover, #111827);
        --srcButtonFontColor: var(--src-text-ui-primary-main, #fff);
        --srcButtonIconColor: var(--src-icon-main-invert, #fff)
    }
}

.src-icon-button--primary.src-icon-button--context-success {
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-success, rgba(22, 163, 74, .12));
    --srcButtonBgColor: var(--src-ui-accent-success, #22c55e);
    --srcButtonIconColor: var(--src-icon-main-invert, #fff)
}

@media (pointer: fine) {
    .src-icon-button--primary.src-icon-button--context-success:hover {
        --srcButtonBgColor: var(--src-ui-accent-success-hover, #16a34a);
        --srcButtonIconColor: var(--src-icon-main-invert, #fff)
    }
}

.src-icon-button--primary.src-icon-button--context-success:active,
.src-icon-button--primary.src-icon-button--context-success.src-icon-button--pressed {
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-light, rgba(148, 163, 184, .16));
    --srcButtonBoxShadow: none;
    --srcButtonBorder: none;
    --srcButtonBorderColor: transparent;
    --srcButtonFontColor: var(--src-text-ui-primary-main, #fff);
    --srcButtonBgColor: var(--src-ui-accent-active, #374151);
    --srcButtonIconColor: var(--src-icon-main-invert, #fff)
}

@media (pointer: fine) {

    .src-icon-button--primary.src-icon-button--context-success:active:hover,
    .src-icon-button--primary.src-icon-button--context-success.src-icon-button--pressed:hover {
        --srcButtonBgColor: var(--src-ui-accent-active-hover, #111827);
        --srcButtonFontColor: var(--src-text-ui-primary-main, #fff);
        --srcButtonIconColor: var(--src-icon-main-invert, #fff)
    }
}

.src-icon-button--ghost {
    --srcButtonBoxShadow: none;
    --srcButtonBorder: none;
    --srcButtonBorderColor: transparent;
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-light, rgba(148, 163, 184, .16));
    --srcButtonIconColor: var(--src-icon-default, #374151);
    --srcButtonBgColor: var(--src-ui-secondary-default, rgba(148, 163, 184, .16));
    --srcButtonBorderColor: var(--src-border-button-basic-hover, #9ca3af);
    border: none;
    --srcButtonFontColor: var(--src-text-ui-secondary-secondary, #4b5563)
}

.src-icon-button--ghost:focus-visible {
    --srcButtonBgColor: var(--src-ui-secondary-default-hover, rgba(148, 163, 184, .08));
    --srcButtonBorder: 1px solid var(--srcButtonBorderColor);
    --srcButtonIconColor: var(--src-icon-default, #374151)
}

.src-icon-button--ghost:focus-visible:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: var(--srcButtonBorderRadius);
    border: var(--srcButtonBorder)
}

@media (pointer: fine) {
    .src-icon-button--ghost:hover {
        --srcButtonBgColor: var(--src-ui-secondary-default-hover, rgba(148, 163, 184, .08));
        --srcButtonIconCOlor: var(--src-icon-hover, #111827)
    }
}

.src-icon-button--ghost:active,
.src-icon-button--ghost.src-icon-button--pressed {
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-light, rgba(148, 163, 184, .16));
    --srcButtonBoxShadow: none;
    --srcButtonBorder: none;
    --srcButtonBorderColor: transparent;
    --srcButtonFontColor: var(--src-text-ui-accent-main, #016fe6);
    --srcButtonIconColor: var(--src-icon-info, #017bff);
    --srcButtonBgColor: var(--src-ui-secondary-default, rgba(148, 163, 184, .16))
}

@media (pointer: fine) {

    .src-icon-button--ghost:active:hover,
    .src-icon-button--ghost.src-icon-button--pressed:hover {
        --srcButtonBgColor: var(--src-ui-secondary-default-hover, rgba(148, 163, 184, .08));
        --srcButtonFontColor: var(--src-text-ui-accent-hover, #0162cc);
        --srcButtonIconColor: var(--src-icon-info-hover, #016fe6)
    }
}

.src-icon-button--inline {
    --srcButtonBoxShadow: none;
    --srcButtonBorder: none;
    --srcButtonBorderColor: transparent;
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-light, rgba(148, 163, 184, .16));
    --srcButtonBgColor: transparent;
    --srcButtonIconColor: var(--src-icon-default, #374151);
    --srcButtonBorderRadius: var(--src-border-rounded, 4px);
    --srcButtonPaddings: 0;
    text-decoration: underline;
    height: auto
}

@media (pointer: fine) {
    .src-icon-button--inline:hover {
        --srcButtonBgColor: transparent;
        --srcButtonIconColor: var(--src-icon-info-hover, #016fe6)
    }
}

.src-icon-button--inline:active,
.src-icon-button--inline.src-icon-button--pressed {
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-light, rgba(148, 163, 184, .16));
    --srcButtonBoxShadow: none;
    --srcButtonBorder: none;
    --srcButtonBorderColor: transparent;
    --srcButtonFontColor: var(--src-text-ui-accent-main, #016fe6);
    --srcButtonIconColor: var(--src-icon-info, #017bff);
    --srcButtonBgColor: var(--src-ui-secondary-default, rgba(148, 163, 184, .16))
}

@media (pointer: fine) {

    .src-icon-button--inline:active:hover,
    .src-icon-button--inline.src-icon-button--pressed:hover {
        --srcButtonBgColor: var(--src-ui-secondary-default-hover, rgba(148, 163, 184, .08));
        --srcButtonFontColor: var(--src-text-ui-accent-hover, #0162cc);
        --srcButtonIconColor: var(--src-icon-info-hover, #016fe6)
    }
}

.src-icon-button--inline:active:hover,
.src-icon-button--inline.src-icon-button--pressed:hover {
    --srcButtonBgColor: transparent
}

.src-icon-button--inline.src-icon-button--context-info {
    --srcButtonBgColor: transparent;
    --srcButtonIconColor: var(--src-icon-info, #017bff)
}

.src-icon-button--inline.src-icon-button--context-info:hover {
    --srcButtonBgColor: transparent;
    --srcButtonIconColor: var(--src-icon-info-hover, #016fe6)
}

.src-icon-button--inline.src-icon-button--context-success {
    --srcButtonBgColor: transparent;
    --srcButtonIconColor: var(--src-icon-success, #16a34a)
}

.src-icon-button--inline.src-icon-button--context-success:hover {
    --srcButtonBgColor: transparent;
    --srcButtonIconColor: var(--src-icon-success-hover, #15803d)
}

.src-icon-button--inline.src-icon-button--context-error,
.src-icon-button--inline.src-icon-button--context-destructive {
    --srcButtonBgColor: transparent;
    --srcButtonIconColor: var(--src-icon-error, #f24122)
}

.src-icon-button--inline.src-icon-button--context-error:hover,
.src-icon-button--inline.src-icon-button--context-destructive:hover {
    --srcButtonBgColor: transparent;
    --srcButtonIconColor: var(--src-icon-error-hover, #c5280c)
}

.src-icon-button--inline.src-icon-button--context-warning {
    --srcButtonBgColor: transparent;
    --srcButtonIconColor: var(--src-icon-warning, #d97706)
}

.src-icon-button--inline.src-icon-button--context-warning:hover {
    --srcButtonBgColor: transparent;
    --srcButtonIconColor: var(--src-icon-warning-hover, #b45309)
}

.src-icon-button--inline:disabled,
.src-icon-button--inline[disabled],
.src-icon-button--inline.disabled {
    --srcButtonFontColor: var(--src-text-ui-secondary-disabled, #9ca3af);
    --srcButtonBgColor: transparent
}

.src-icon-button--plain {
    --srcButtonBoxShadow: none;
    --srcButtonBorder: none;
    --srcButtonBorderColor: transparent;
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-light, rgba(148, 163, 184, .16));
    --srcButtonBgColor: transparent;
    --srcButtonIconColor: var(--src-icon-default, #374151)
}

.src-icon-button--plain:focus-visible {
    --srcButtonBgColor: var(--src-ui-secondary-default-hover, rgba(148, 163, 184, .08));
    --srcButtonBorder: 1px solid var(--srcButtonBorderColor);
    --srcButtonIconColor: var(--src-icon-hover, #111827);
    --srcButtonBorderColor: var(--src-border-button-basic-hover, #9ca3af)
}

@media (pointer: fine) {
    .src-icon-button--plain:hover {
        --srcButtonBgColor: var(--src-ui-secondary-default-hover, rgba(148, 163, 184, .08));
        --srcButtonIconColor: var(--src-icon-hover, #111827)
    }
}

.src-icon-button--plain:active,
.src-icon-button--plain.src-icon-button--pressed {
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-light, rgba(148, 163, 184, .16));
    --srcButtonBoxShadow: none;
    --srcButtonBorder: none;
    --srcButtonBorderColor: transparent;
    --srcButtonFontColor: var(--src-text-ui-accent-main, #016fe6);
    --srcButtonIconColor: var(--src-icon-info, #017bff);
    --srcButtonBgColor: var(--src-ui-secondary-default, rgba(148, 163, 184, .16))
}

@media (pointer: fine) {

    .src-icon-button--plain:active:hover,
    .src-icon-button--plain.src-icon-button--pressed:hover {
        --srcButtonBgColor: var(--src-ui-secondary-default-hover, rgba(148, 163, 184, .08));
        --srcButtonFontColor: var(--src-text-ui-accent-hover, #0162cc);
        --srcButtonIconColor: var(--src-icon-info-hover, #016fe6)
    }
}

.src-icon-button--plain.src-icon-button--context-info {
    --srcButtonBoxShadow: none;
    --srcButtonBorder: none;
    --srcButtonBorderColor: transparent;
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-accent-light, rgba(1, 123, 255, .16));
    --srcButtonBgColor: transparent;
    --srcButtonIconColor: var(--src-icon-info, #017bff);
    --srcButtonBorder: 1px solid var(--srcButtonBorderColor)
}

.src-icon-button--plain.src-icon-button--context-info:focus-visible {
    --srcButtonBgColor: var(--src-ui-secondary-active, rgba(1, 123, 255, .12));
    --srcButtonIconColor: var(--src-icon-info, #017bff);
    --srcButtonBorderColor: var(--src-border-button-info-hover, #017bff)
}

@media (pointer: fine) {
    .src-icon-button--plain.src-icon-button--context-info:hover {
        --srcButtonBgColor: var(--src-ui-secondary-info, rgba(1, 123, 255, .08));
        --srcButtonIconColor: var(--src-icon-info-hover, #016fe6)
    }
}

.src-icon-button--plain.src-icon-button--context-error {
    --srcButtonBoxShadow: none;
    --srcButtonBorder: none;
    --srcButtonBorderColor: transparent;
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-error, rgba(239, 68, 68, .16));
    --srcButtonBgColor: transparent;
    --srcButtonIconColor: var(--src-icon-error);
    --srcButtonBorder: 1px solid var(--srcButtonBorderColor)
}

.src-icon-button--plain.src-icon-button--context-error:focus-visible {
    --srcButtonBgColor: var(--src-ui-secondary-error, rgba(239, 68, 68, .08));
    --srcButtonIconColor: var(--src-icon-error, #f24122);
    --srcButtonBorderColor: var(--src-border-button-error, #f79482)
}

@media (pointer: fine) {
    .src-icon-button--plain.src-icon-button--context-error:hover {
        --srcButtonBgColor: var(--src-ui-secondary-error-hover, rgba(239, 68, 68, .16));
        --srcButtonIconColor: var(--src-icon-error-hover, #c5280c)
    }
}

.src-icon-button--plain.src-icon-button--context-success {
    --srcButtonBoxShadow: none;
    --srcButtonBorder: none;
    --srcButtonBorderColor: transparent;
    --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-success, rgba(22, 163, 74, .12));
    --srcButtonBgColor: transparent;
    --srcButtonIconColor: var(--src-icon-success);
    --srcButtonBorder: 1px solid var(--srcButtonBorderColor)
}

.src-icon-button--plain.src-icon-button--context-success:focus-visible {
    --srcButtonBgColor: var(--src-ui-secondary-success);
    --srcButtonIconColor: var(--src-icon-success);
    --srcButtonBorderColor: var(--src-border-button-success)
}

@media (pointer: fine) {
    .src-icon-button--plain.src-icon-button--context-success:hover {
        --srcButtonBgColor: var(--src-ui-secondary-success-hover);
        --srcButtonIconColor: var(--src-icon-success-hover)
    }
}

.src-form {
    --srcFormRowGap: 16px;
    --srcFormItemsGap: 12px;
    --srcFormOffset: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--srcFormRowGap);
    padding: var(--srcFormOffset)
}

.src-form__row-group {
    display: flex;
    flex-direction: column;
    gap: 0
}

.src-form__row-group .src-form__row+.src-form__row {
    margin-top: var(--srcFormRowGap)
}

.src-form__row {
    display: grid;
    gap: var(--srcFormItemsGap);
    grid-template-columns: minmax(0, 1fr)
}

.src-form__row--double {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.src-form__row--triple {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.src-form__item {
    width: 100%;
    display: flex;
    flex-direction: column
}

.src-form__button-row {
    display: flex;
    gap: var(--srcFormItemsGap);
    justify-content: flex-end;
    align-items: center
}

.src-input {
    --srcInputFontSize: var(--src-text-fontSize, var(--src-font-size-sm));
    --srcInputLineHeight: var(--src-text-lineHeight, var(--src-font-line-sm));
    --srcInputFontColor: var(--src-text-ui-secondary-main, #111827);
    --srcInputFieldBg: var(--src-surface-container-main, #fff);
    --srcInputFieldBorderColor: var(--src-border-input-basic, #d1d5db);
    --srcInputFieldBorder: 1px solid var(--srcInputFieldBorderColor);
    --srcInputHeight: 36px;
    --srcInputBorderRadius: var(--src-border-rounded, var(--src-space-1-5));
    --srcInputFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-focus, rgba(1, 123, 255, .16));
    position: relative;
    border-radius: var(--srcInputBorderRadius);
    font-size: var(--srcInputFontSize);
    line-height: var(--srcInputLineHeight);
    color: var(--srcInputFontColor);
    padding: var(--src-padding-xs, var(--src-space-2)) var(--src-padding-xs, var(--src-space-2)) var(--src-padding-xs, var(--src-space-2)) var(--src-padding-sm, var(--src-space-3));
    font-family: var(--src-font-family-body);
    font-style: normal;
    font-weight: var(--src-font-weight-Medium, 500);
    background: var(--srcInputFieldBg);
    border: var(--srcInputFieldBorder);
    box-shadow: none;
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--srcInputHeight)
}

.src-input[type=number] {
    -moz-appearance: textfield
}

.src-input:-webkit-autofill,
.src-input:-webkit-autofill:focus {
    transition: background-color 0s 600000s, color 0s 600000s
}

.src-input::-webkit-outer-spin-button,
.src-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.src-input:hover {
    --srcInputFieldBorderColor: var(--src-border-input-hover, #9ca3af);
    --srcInputFieldBg: var(--src-ui-input-secondary, rgba(148, 163, 184, .08))
}

.src-input:active {
    --srcInputFieldBorderColor: var(--src-border-input-active, #017bff)
}

.src-input:focus-visible {
    --srcInputFieldBorderColor: var(--src-border-input-active, #017bff);
    --srcInputFieldBg: var(--src-surface-container-main, #fff);
    outline: none;
    box-shadow: var(--srcInputFocusRing)
}

.src-input:focus-visible:hover {
    --srcInputFieldBg: var(--src-ui-input-hover, rgba(1, 123, 255, .08))
}

.src-input[disabled],
.src-input:disabled {
    --srcInputFieldBg: var(--src-ui-input-disabled, rgba(148, 163, 184, .16));
    --srcInputFieldBorderColor: transparent;
    --srcInputFontColor: var(--src-text-ui-secondary-secondary, #4b5563);
    pointer-events: none
}

.src-input[class*=--size-sm] {
    --srcInputHeight: 28px
}

.src-input[class*=--size-md] {
    --srcInputHeight: 36px
}

.src-input[class*=--size-lg] {
    --srcInputHeight: 44px
}

.src-input[class*=--size-xl] {
    --srcInputHeight: 56px
}

.src-input.src-input--secondary {
    --srcInputFieldBg: var(--src-ui-input-secondary, rgba(148, 163, 184, .08));
    --srcInputFieldBorder: none;
    --srcInputFontColor: var(--src-text-ui-secondary-main, #111827)
}

.src-input.src-input--secondary:hover {
    --srcInputFieldBg: var(--src-ui-input-hover, rgba(1, 123, 255, .08));
    --srcInputFieldBorder: none
}

.src-input.src-input--ghost {
    --srcInputFieldBg: transparent;
    --srcInputFieldBorder: none;
    --srcInputFontColor: var(--src-text-ui-secondary-main, #111827)
}

.src-input.src-input--ghost:hover {
    --srcInputFieldBg: var(--src-ui-input-hover, rgba(1, 123, 255, .08));
    --srcInputFieldBorder: none
}

.src-input--context-error {
    --srcInputFieldBorderColor: var(--src-border-input-error, #f24122);
    --srcInputFocusRing: 0px 0px 0px var(--src-shadow-focused, 4px) var(--src-shadow-error, rgba(239, 68, 68, .16));
    --srcInputFontColor: var(--src-text-ui-distruct-main, #c5280c)
}

.src-input--context-error:hover {
    --srcInputFieldBorderColor: var(--src-border-input-error, #f24122);
    --srcInputFieldBg: linear-gradient(0deg, var(--src-ui-input-error-hover, rgba(239, 68, 68, .08)) 0%, var(--src-ui-input-error-hover, rgba(239, 68, 68, .08)) 100%), var(--src-surface-container-main, #fff)
}

.src-input--context-error:active {
    --srcInputFieldBorderColor: var(--src-border-input-error, #f24122)
}

.src-input--context-error:focus-visible {
    --srcInputFieldBorderColor: var(--src-border-input-error, #f24122);
    --srcInputFieldBg: var(--src-surface-container-main, #fff)
}

.src-input--context-error:focus-visible:hover {
    --srcInputFieldBg: var(--src-ui-input-error-hover, rgba(239, 68, 68, .08))
}

.src-input--context-success {
    --srcInputFieldBorderColor: var(--src-border-input-success, #22c55e);
    --srcInputFocusRing: 0px 0px 0px var(--src-shadow-focused, 4px) var(--src-shadow-success, rgba(22, 163, 74, .12));
    --srcInputFontColor: var(--src-text-ui-success-main, #16a34a)
}

.src-input--context-success:hover {
    --srcInputFieldBorderColor: var(--src-border-input-success-hover, #16a34a);
    --srcInputFieldBg: linear-gradient(0deg, var(--src-ui-input-success-hover, rgba(22, 163, 74, .08)) 0%, var(--src-ui-input-success-hover, rgba(22, 163, 74, .08)) 100%), var(--src-surface-container-main, #fff)
}

.src-input--context-success:active {
    --srcInputFieldBorderColor: var(--src-border-input-success-hover, #16a34a)
}

.src-input--context-success:focus-visible {
    --srcInputFieldBorderColor: var(--src-border-input-success, #22c55e);
    --srcInputFieldBg: var(--src-surface-container-main, #fff)
}

.src-input--context-success:focus-visible:hover {
    --srcInputFieldBg: var(--src-ui-input-success-hover, rgba(22, 163, 74, .08))
}

.src-input--disabled {
    --srcInputFieldBg: var(--src-ui-input-disabled, rgba(148, 163, 184, .16));
    --srcInputFieldBorder: none;
    --srcInputFontColor: var(--src-text-ui-secondary-secondary, #4b5563);
    pointer-events: none
}

.src-select {
    --srcSelectFontSize: var(--src-text-fontSize, var(--src-font-size-sm));
    --srcSelectLineHeight: var(--src-text-lineHeight, var(--src-font-line-sm));
    --srcSelectFontColor: var(--src-text-ui-secondary-main, #111827);
    --srcSelectFieldBg: var(--src-surface-container-main, #fff);
    --srcSelectFieldBorderColor: var(--src-border-input-basic, #d1d5db);
    --srcSelectFieldBorder: 1px solid var(--srcSelectFieldBorderColor);
    --srcSelectHeight: 36px;
    --srcSelectBorderRadius: var(--src-border-rounded, var(--src-space-1-5));
    --srcSelectFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-focus, rgba(1, 123, 255, .16));
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--srcSelectHeight);
    border-radius: var(--srcSelectBorderRadius);
    font-size: var(--srcSelectFontSize);
    line-height: var(--srcSelectLineHeight);
    color: var(--srcSelectFontColor);
    padding: var(--src-padding-xs, var(--src-space-2)) var(--src-padding-xs, var(--src-space-2)) var(--src-padding-xs, var(--src-space-2)) var(--src-padding-sm, var(--src-space-3));
    font-family: var(--src-font-family-body);
    font-style: normal;
    font-weight: var(--src-font-weight-Medium, 500);
    border: var(--srcSelectFieldBorder);
    background-color: var(--srcSelectFieldBg);
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.40573 4.3L0.805725 1.7C0.489058 1.38333 0.418392 1.021 0.593725 0.613C0.768392 0.204333 1.08073 0 1.53073 0H6.68072C7.13072 0 7.44306 0.204333 7.61772 0.613C7.79306 1.021 7.72239 1.38333 7.40573 1.7L4.80572 4.3C4.70572 4.4 4.59739 4.475 4.48073 4.525C4.36406 4.575 4.23906 4.6 4.10573 4.6C3.97239 4.6 3.84739 4.575 3.73073 4.525C3.61406 4.475 3.50573 4.4 3.40573 4.3Z' fill='%236B7280'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: calc(100% - 12px) center;
    box-shadow: none
}

.src-select:hover {
    --srcSelectFieldBorderColor: var(--src-border-input-hover, #9ca3af);
    --srcSelectFieldBg: var(--src-ui-input-secondary, rgba(148, 163, 184, .08))
}

.src-select:active {
    --srcSelectFieldBorderColor: var(--src-border-input-active, #017bff)
}

.src-select:focus-visible {
    --srcSelectFieldBorderColor: var(--src-border-input-active, #017bff);
    --srcSelectFieldBg: var(--src-surface-container-main, #fff);
    outline: none;
    box-shadow: var(--srcSelectFocusRing)
}

.src-select:focus-visible:hover {
    --srcSelectFieldBg: var(--src-ui-input-hover, rgba(1, 123, 255, .08))
}

.src-select[disabled],
.src-select:disabled {
    --srcSelectFieldBg: var(--src-ui-input-disabled, rgba(148, 163, 184, .16));
    --srcSelectFieldBorderColor: transparent;
    --srcSelectFontColor: var(--src-text-ui-secondary-secondary, #4b5563);
    pointer-events: none
}

.src-select option {
    background-color: #fff
}

.src-select[class*=--size-sm] {
    --srcSelectHeight: 28px
}

.src-select[class*=--size-md] {
    --srcSelectHeight: 36px
}

.src-select[class*=--size-lg] {
    --srcSelectHeight: 44px
}

.src-select[class*=--size-xl] {
    --srcSelectHeight: 56px
}

.src-select.src-select--secondary {
    --srcSelectFieldBg: var(--src-ui-input-secondary, rgba(148, 163, 184, .08));
    --srcSelectFieldBorder: none;
    --srcSelectFontColor: var(--src-text-ui-secondary-main, #111827)
}

.src-select.src-select--secondary:hover {
    --srcSelectFieldBg: var(--src-ui-input-hover, rgba(1, 123, 255, .08));
    --srcSelectFieldBorder: none
}

.src-select.src-select--ghost {
    --srcSelectFieldBg: transparent;
    --srcSelectFieldBorder: none;
    --srcSelectFontColor: var(--src-text-ui-secondary-main, #111827)
}

.src-select.src-select--ghost:hover {
    --srcSelectFieldBg: var(--src-ui-input-hover, rgba(1, 123, 255, .08));
    --srcSelectFieldBorder: none
}

.src-select--context-error {
    --srcSelectFieldBorderColor: var(--src-border-input-error, #f24122);
    --srcSelectFocusRing: 0px 0px 0px var(--src-shadow-focused, 4px) var(--src-shadow-error, rgba(239, 68, 68, .16));
    --srcSelectFontColor: var(--src-text-ui-distruct-main, #c5280c)
}

.src-select--context-error:hover {
    --srcSelectFieldBorderColor: var(--src-border-input-error, #f24122);
    --srcSelectFieldBg: linear-gradient(0deg, var(--src-ui-input-error-hover, rgba(239, 68, 68, .08)) 0%, var(--src-ui-input-error-hover, rgba(239, 68, 68, .08)) 100%), var(--src-surface-container-main, #fff)
}

.src-select--context-error:active {
    --srcSelectFieldBorderColor: var(--src-border-input-error, #f24122)
}

.src-select--context-error:focus-visible {
    --srcSelectFieldBorderColor: var(--src-border-input-error, #f24122);
    --srcSelectFieldBg: var(--src-surface-container-main, #fff)
}

.src-select--context-error:focus-visible:hover {
    --srcSelectFieldBg: var(--src-ui-input-error-hover, rgba(239, 68, 68, .08))
}

.src-select--context-success {
    --srcSelectFieldBorderColor: var(--src-border-input-success, #22c55e);
    --srcSelectFocusRing: 0px 0px 0px var(--src-shadow-focused, 4px) var(--src-shadow-success, rgba(22, 163, 74, .12));
    --srcSelectFontColor: var(--src-text-ui-success-main, #16a34a)
}

.src-select--context-success:hover {
    --srcSelectFieldBorderColor: var(--src-border-input-success-hover, #16a34a);
    --srcSelectFieldBg: linear-gradient(0deg, var(--src-ui-input-success-hover, rgba(22, 163, 74, .08)) 0%, var(--src-ui-input-success-hover, rgba(22, 163, 74, .08)) 100%), var(--src-surface-container-main, #fff)
}

.src-select--context-success:active {
    --srcSelectFieldBorderColor: var(--src-border-input-success-hover, #16a34a)
}

.src-select--context-success:focus-visible {
    --srcSelectFieldBorderColor: var(--src-border-input-success, #22c55e);
    --srcSelectFieldBg: var(--src-surface-container-main, #fff)
}

.src-select--context-success:focus-visible:hover {
    --srcSelectFieldBg: var(--src-ui-input-success-hover, rgba(22, 163, 74, .08))
}

.src-select--disabled {
    --srcSelectFieldBg: var(--src-ui-input-disabled, rgba(148, 163, 184, .16));
    --srcSelectFieldBorder: none;
    --srcSelectFontColor: var(--src-text-ui-secondary-secondary, #4b5563);
    pointer-events: none
}

.src-textarea {
    --srcTexareaFontSize: var(--src-text-fontSize, var(--src-font-size-sm));
    --srcTexareaLineHeight: var(--src-text-lineHeight, var(--src-font-line-sm));
    --srcTexareaFontColor: var(--src-text-ui-secondary-main, #111827);
    --srcTexareaBg: var(--src-surface-container-main, #fff);
    --srcTexareaBorderColor: var(--src-border-input-basic, #d1d5db);
    --srcTexareaBorder: 1px solid var(--srcTexareaBorderColor);
    --srcTexareaMinHeight: 36px;
    --srcTexareaBorderRadius: var(--src-border-rounded, var(--src-space-1-5));
    --srcTexareaBoxShadow: none;
    --srcTextareaFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-focus, rgba(1, 123, 255, .16));
    position: relative;
    width: 100%;
    min-height: var(--srcTexareaMinHeight);
    display: flex;
    align-items: center;
    padding: var(--src-padding-xs, var(--src-space-2)) var(--src-padding-xs, var(--src-space-2)) var(--src-padding-xs, var(--src-space-2)) var(--src-padding-sm, var(--src-space-3));
    font-family: var(--src-font-family-body);
    font-style: normal;
    font-weight: var(--src-font-weight-Medium, 500);
    font-size: var(--srcTexareaFontSize);
    line-height: var(--srcTexareaLineHeight);
    color: var(--srcTexareaFontColor);
    border: var(--srcTexareaBorder);
    border-radius: var(--srcTexareaBorderRadius);
    background: var(--srcTexareaBg);
    box-shadow: var(--srcTexareaBoxShadow);
    resize: vertical
}

.src-textarea:hover {
    --srcTexareaBorderColor: var(--src-border-input-hover, #9ca3af);
    --srcTexareaBg: linear-gradient(0deg, var(--src-ui-input-secondary, rgba(148, 163, 184, .08)) 0%, var(--src-ui-input-secondary, rgba(148, 163, 184, .08)) 100%), var(--src-surface-container-main, #fff)
}

.src-textarea:active {
    --srcTexareaBorderColor: var(--src-border-input-active, #017bff)
}

.src-textarea:focus-visible {
    --srcTexareaBorderColor: var(--src-border-input-active, #017bff);
    --srcTexareaBg: var(--src-surface-container-main, #fff);
    outline: none;
    box-shadow: var(--srcTextareaFocusRing)
}

.src-textarea:focus-visible:hover {
    --srcTexareaBg: var(--src-ui-input-hover, rgba(1, 123, 255, .08))
}

.src-textarea[disabled],
.src-textarea:disabled {
    --srcTextareaBg: var(--src-color-bg-default-disabled);
    --srcTextareaBorderColor: var(--src-color-border-strong-disabled);
    --srcTextareaBoxShadow: none;
    color: var(--src-color-text-default-disabled);
    pointer-events: none
}

.src-textarea[class*=--size-sm] {
    --srcTexareaMinHeight: 28px
}

.src-textarea[class*=--size-md] {
    --srcTexareaMinHeight: 36px
}

.src-textarea[class*=--size-lg] {
    --srcTexareaMinHeight: 44px
}

.src-textarea[class*=--size-xl] {
    --srcTexareaMinHeight: 56px
}

.src-textarea.src-input--secondary {
    --srcTexareaBg: var(--src-ui-input-secondary, rgba(148, 163, 184, .08));
    --srcTexareaBorder: none;
    --srcTexareaColor: var(--src-text-ui-secondary-main, #111827)
}

.src-textarea.src-input--secondary:hover {
    --srcTexareaBg: var(--src-ui-input-hover, rgba(1, 123, 255, .08));
    --srcTexareaBorder: none
}

.src-textarea.src-input--ghost {
    --srcTexareaBg: transparent;
    --srcTexareaBorder: none;
    --srcTexareaColor: var(--src-text-ui-secondary-main, #111827)
}

.src-textarea.src-input--ghost:hover {
    --srcTexareaBg: var(--src-ui-input-hover, rgba(1, 123, 255, .08));
    --srcTexareaBorder: none
}

.src-textarea--context-error {
    --srcTexareaBorderColor: var(--src-border-input-error, #f24122);
    --srcTexareaRing: 0px 0px 0px var(--src-shadow-focused, 4px) var(--src-shadow-error, rgba(239, 68, 68, .16));
    --srcTexareaFontColor: var(--src-text-ui-distruct-main, #c5280c)
}

.src-textarea--context-error:hover {
    --srcTexareaBorderColor: var(--src-border-input-error, #f24122);
    --srcTexareaBg: linear-gradient(0deg, var(--src-ui-input-error-hover, rgba(239, 68, 68, .08)) 0%, var(--src-ui-input-error-hover, rgba(239, 68, 68, .08)) 100%), var(--src-surface-container-main, #fff)
}

.src-textarea--context-error:active {
    --srcTexareaBorderColor: var(--src-border-input-error, #f24122)
}

.src-textarea--context-error:focus-visible {
    --srcTexareaBorderColor: var(--src-border-input-error, #f24122);
    --srcTexareaBg: var(--src-surface-container-main, #fff)
}

.src-textarea--context-error:focus-visible:hover {
    --srcTexareaBg: var(--src-ui-input-error-hover, rgba(239, 68, 68, .08))
}

.src-textarea--context-success {
    --srcTexareaBorderColor: var(--src-border-input-success, #22c55e);
    --srcTexareaFocusRing: 0px 0px 0px var(--src-shadow-focused, 4px) var(--src-shadow-success, rgba(22, 163, 74, .12));
    --srcTexareaFontColor: var(--src-text-ui-success-main, #16a34a)
}

.src-textarea--context-success:hover {
    --srcTexareaBorderColor: var(--src-border-input-success-hover, #16a34a);
    --srcTexareaBg: linear-gradient(0deg, var(--src-ui-input-success-hover, rgba(22, 163, 74, .08)) 0%, var(--src-ui-input-success-hover, rgba(22, 163, 74, .08)) 100%), var(--src-surface-container-main, #fff)
}

.src-textarea--context-success:active {
    --srcTexareaBorderColor: var(--src-border-input-success-hover, #16a34a)
}

.src-textarea--context-success:focus-visible {
    --srcTexareaBorderColor: var(--src-border-input-success, #22c55e);
    --srcTexareaBg: var(--src-surface-container-main, #fff)
}

.src-textarea--context-success:focus-visible:hover {
    --srcTexareaBg: var(--src-ui-input-success-hover, rgba(22, 163, 74, .08))
}

.src-textarea--disabled {
    --srcTexareaBg: var(--src-ui-input-disabled, rgba(148, 163, 184, .16));
    --srcTexareaBorder: none;
    --srcTexareaFontColor: var(--src-text-ui-secondary-secondary, #4b5563);
    pointer-events: none
}

.src-label {
    --srcLabelFontSize: var(--src-font-size-tech, 9px);
    --srcLabelLineHeight: var(--src-font-line-xs, 16px);
    --srcLabelFontWeight: 600;
    --srcLabelColor: var(--src-text-body-lable, #6b7280);
    --srcLabelMarginBottom: 4px;
    --srcLabelLetterSpacing: var(--src-font-spacing-tech, 1.2px);
    display: block;
    font-size: var(--srcLabelFontSize);
    line-height: var(--srcLabelLineHeight);
    font-family: var(--src-font-family-body);
    font-style: normal;
    font-weight: var(--srcLabelFontWeight);
    color: var(--srcLabelColor);
    margin-bottom: var(--srcLabelMarginBottom);
    letter-spacing: var(--srcLabelLetterSpacing);
    text-transform: uppercase
}

.src-checkbox {
    --srcCheckboxBorderColor: var(--src-border-input-basic, #d1d5db);
    --srcCheckboxSize: var(--src-icon-size, var(--src-space-5));
    --srcCheckboxBorderWidth: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer
}

.src-checkbox input[type=checkbox] {
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    width: var(--srcCheckboxSize);
    height: var(--srcCheckboxSize);
    padding: 2px;
    border-radius: var(--src-border-rounded-xs, var(--src-space-1));
    background-color: #fff;
    border: var(--srcCheckboxBorderWidth) solid var(--srcCheckboxBorderColor);
    cursor: pointer
}

.src-checkbox input[type=checkbox]:hover {
    --srcCheckboxBorderColor: var(--src-border-input-hover, #9ca3af)
}

.src-checkbox input[type=checkbox]:checked {
    background-color: #007bff;
    --srcCheckboxBorderColor: #007bff
}

.src-checkbox input[type=checkbox]:checked:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--srcCheckboxSize) - 2 * var(--srcCheckboxBorderWidth));
    height: calc(var(--srcCheckboxSize) - 2 * var(--srcCheckboxBorderWidth));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 8'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M9.72.24c.35.33.37.9.06 1.27L4.4 7.71A.83.83 0 0 1 3.8 8a.83.83 0 0 1-.62-.26L.25 4.64a.94.94 0 0 1 0-1.28.82.82 0 0 1 1.2 0l2.3 2.43L8.52.3a.82.82 0 0 1 1.2-.05Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-size: 10px 8px;
    background-position: center;
    background-repeat: no-repeat
}

.src-checkbox input[type=checkbox]:checked:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-accent-light, rgba(1, 123, 255, .16))
}

.src-checkbox input[type=checkbox]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-light, rgba(148, 163, 184, .16))
}

.src-checkbox .src-checkbox__label {
    padding-left: var(--src-gap-lg, var(--src-space-3));
    font-size: var(--src-text-fontSize, var(--src-font-size-sm));
    line-height: var(--src-text-lineHeight, var(--src-font-line-sm));
    letter-spacing: 0;
    font-weight: 500;
    color: var(--src-text-body-main, #111827)
}

.src-radio-group {
    --srcRadioGroupGap: 6px;
    --srcRadioSize: 20px;
    --srcRadioBgColor: var(--src-color-bg-default);
    --srcRadioBorderColor: var(--src-border-input-basic, #d1d5db);
    --srcRadioBorderWidth: 2px;
    --srcRadioFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-accent-light, rgba(1, 123, 255, .16));
    display: flex;
    flex-direction: column;
    gap: var(--srcRadioGroupGap)
}

.src-radio-group--horizontal {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--srcRadioGroupGap)
}

.src-radio {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer
}

.src-radio input[type=radio] {
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    width: var(--srcRadioSize);
    height: var(--srcRadioSize);
    border-radius: 50%;
    background-color: #fff;
    border: var(--srcRadioBorderWidth) solid var(--srcRadioBorderColor);
    cursor: pointer
}

.src-radio input[type=radio]:hover {
    --srcRadioBorderColor: var(--src-border-input-hover, #9ca3af)
}

.src-radio input[type=radio]:checked {
    --srcRadioBorderColor: var(--src-ui-accent-default, #017bff);
    box-shadow: inset 0 0 0 3px var(--srcRadioBorderColor)
}

.src-radio input[type=radio]:checked:hover {
    --srcRadioBorderColor: var(--src-ui-accent-default-hover, #016fe6)
}

.src-radio input[type=radio][disabled] {
    --srcRadioBorderColor: var(--src-ui-accent-disabled, rgba(148, 163, 184, .24))
}

.src-radio .src-radio__label {
    padding-left: var(--src-gap-lg, var(--src-space-3));
    font-size: var(--src-text-fontSize, var(--src-font-size-sm));
    line-height: var(--src-text-lineHeight, var(--src-font-line-sm));
    letter-spacing: 0;
    font-weight: 500;
    color: var(--src-text-body-main, #111827)
}

.src-toggle {
    --srcToggleWidth: 44px;
    --srcToggleHeight: 24px;
    --srcToggleThumbSize: 20px;
    --srcToggleInputBg: var(--src-ui-secondary-default, rgba(148, 163, 184, .16));
    --srcToggleThumbBg: var(--src-color-bg-default);
    --srcToggleThumbShadow: var(--src-shadow-large);
    --srcToggleLabelMargin: 20px;
    --srcToggleTransitionWidth: 100%;
    display: inline-flex;
    align-items: center;
    gap: var(--srcToggleLabelMargin);
    cursor: pointer
}

.src-toggle input[type=checkbox] {
    position: relative;
    width: var(--srcToggleWidth);
    height: var(--srcToggleHeight);
    margin: 0;
    padding: 0;
    vertical-align: top;
    background: var(--srcToggleInputBg);
    border: 1px solid var(--src-border-input-basic, #d1d5db);
    border-radius: var(--src-border-rounded-full, 9999px);
    outline: none;
    cursor: pointer;
    transition: all .3s cubic-bezier(.2, .85, .32, 1.2);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    overflow: hidden
}

.src-toggle input[type=checkbox]:hover {
    --srcToggleInputBg: var(--src-ui-secondary-default-hover, rgba(148, 163, 184, .08))
}

.src-toggle input[type=checkbox]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-light, rgba(148, 163, 184, .16))
}

.src-toggle input[type=checkbox]:disabled,
.src-toggle input[type=checkbox][disabled] {
    --srcToggleInputBg: var(--src-surface-bg, rgba(71, 85, 105, .24));
    cursor: default;
    opacity: 1;
    pointer-events: none
}

.src-toggle input[type=checkbox]:after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: var(--srcToggleThumbSize);
    height: var(--srcToggleThumbSize);
    background-color: var(--srcToggleThumbBg);
    border-radius: 50%;
    transform: translate(0);
    box-shadow: 0 8px 20px #1718181f, 0 3px 6px #17181814;
    transition: all .3s cubic-bezier(.2, .85, .32, 1.2)
}

.src-toggle input[type=checkbox]:checked:after {
    background-color: var(--srcToggleThumbBg);
    transform: translate(var(--srcToggleTransitionWidth))
}

.src-toggle input[type=checkbox]:checked {
    --srcToggleInputBg: var(--src-ui-accent-default, #017bff);
    border-color: transparent
}

.src-toggle input[type=checkbox]:checked:focus-visible {
    box-shadow: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-accent-light, rgba(1, 123, 255, .16))
}

.src-toggle input[type=checkbox]:checked:disabled,
.src-toggle input[type=checkbox]:checked[disabled] {
    --srcToggleInputBg: var(--src-surface-bg, rgba(71, 85, 105, .24));
    cursor: default;
    opacity: 1;
    pointer-events: none
}

.src-toggle .src-toggle__label {
    margin-bottom: 0;
    color: var(--src-text-body-main, #111827);
    line-height: var(--src-text-lineHeight, var(--src-font-line-sm));
    font-size: var(--src-text-fontSize, var(--src-font-size-sm));
    letter-spacing: 0;
    font-weight: 500
}

.src-modal {
    --srcModalWidth: 422px;
    --srcModalMaxWidth: calc(100% - 16px);
    --srcModalMaxHeight: 80vh;
    --srcModalBg: var(--src-surface-container-main, #fff);
    --srcModalBoxShadow: 0 16px 36px 4px var(--src-shadow-hard, rgba(71, 85, 105, .24)), 0 1px 4px 0 var(--src-shadow-light, rgba(148, 163, 184, .16));
    --srcModalBorderRadius: var(--src-layout-radius-const-rounded-md, 12px);
    --srcModalTitleSize: var(--src-font-size-base, 16px);
    --srcModalTitleLineHeight: var(--src-font-line-base, 24px);
    --srcModalTitleColor: var(--src-text-body-main, #111827);
    --srcModalBodyPadding: var(--src-layout-padding-const-lg, 16px) var(--src-layout-padding-const-xl, 24px) var(--src-layout-padding-const-2xl, 32px) var(--src-layout-padding-const-xl, 24px);
    --srcModalTitleBorder: none;
    --srcModalFooterBorder: 1px solid var(--src-border-container-light, rgba(148, 163, 184, .16));
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: var(--srcModalWidth);
    max-width: var(--srcModalMaxWidth);
    max-height: var(--srcModalMaxHeight);
    margin: auto;
    background-color: var(--srcModalBg);
    border-radius: var(--srcModalBorderRadius);
    box-shadow: var(--srcModalBoxShadow);
    color: var(--src-text-body-secondary, #4b5563);
    font-family: var(--src-font-family-header, Inter);
    font-size: var(--src-font-size-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--src-font-line-sm, 20px)
}

.src-modal .src-modal__header {
    position: relative;
    display: flex;
    padding: 0;
    width: 100%;
    border-bottom: var(--srcModalTitleBorder)
}

.src-modal .src-modal__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--src-layout-gap-const-md, 12px);
    padding: var(--srcModalBodyPadding);
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--src-color-border-default) transparent
}

.src-modal .src-modal__body .src-modal__title,
.src-modal .src-modal__body .src-modal__scroll-box {
    grid-column: 1/-1
}

.src-modal .src-modal__body--icon {
    grid-template-columns: 24px minmax(0, 1fr)
}

.src-modal .src-modal__body--icon .src-modal__icon {
    grid-column: 1/2;
    grid-row: 1/-1
}

.src-modal .src-modal__body--icon .src-modal__title,
.src-modal .src-modal__body--icon .src-modal__scroll-box {
    grid-column: 2/-1
}

.src-modal .src-modal__body::-webkit-scrollbar {
    width: 4px
}

.src-modal .src-modal__body::-webkit-scrollbar-track {
    background: transparent
}

.src-modal .src-modal__body::-webkit-scrollbar-thumb {
    background-color: var(--src-color-border-default);
    border-radius: 10px
}

.src-modal .src-modal__footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: var(--src-layout-padding-const-md, 12px) var(--src-layout-padding-const-xl, 24px) var(--src-layout-padding-const-lg, 16px) var(--src-layout-padding-const-xl, 24px);
    width: 100%;
    border-top: var(--srcModalFooterBorder);
    gap: 8px
}

@media (max-width: 767px) {
    .src-modal .src-modal__footer {
        flex-direction: column-reverse
    }

    .src-modal .src-modal__footer .src-modal__footer-group {
        width: 100%
    }

    .src-modal .src-modal__footer .src-modal__footer-group src-button {
        flex-grow: 1
    }

    .src-modal .src-modal__footer .src-modal__footer-group src-button .src-button {
        --srcButtonWidth: 100%
    }
}

.src-modal .src-modal__footer:has(.src-modal__footer-group:nth-child(2)) {
    justify-content: space-between
}

.src-modal .src-modal__footer-group {
    display: flex;
    gap: 10px
}

.src-modal .src-modal__title {
    font-size: var(--srcModalTitleSize);
    font-weight: 600;
    line-height: var(--srcModalTitleLineHeight);
    color: var(--srcModalTitleColor);
    word-break: break-word
}

.src-modal .src-modal__close {
    position: absolute;
    top: 4px;
    right: 4px;
    margin-left: auto;
    z-index: 1
}

dialog {
    padding: 0;
    border: none;
    background-color: transparent;
    overflow: hidden !important
}

dialog:-internal-dialog-in-top-layer::backdrop {
    background-color: #00000080
}

.src-popover {
    --srcPopoverWidth: 320px;
    --srcPopoverMaxHeight: 80vh;
    --srcPopoverBg: var(--src-color-bg-default);
    --srcPopoverBoxShadow: var(--src-shadow-large);
    --srcPopoverBorderRadius: var(--src-border-rounded-parent);
    --srcPopoverTitleSize: var(--src-font-size-base);
    --srcPopoverTitleLineHeight: var(--src-font-line-base);
    --srcPopoverTitleColor: var(--src-color-text-default);
    --srcPopoverBodyPadding: 20px;
    --srcPopoverTitleBorder: 1px solid var(--src-color-border-default, #e5e7eb);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: var(--srcPopoverWidth);
    max-height: var(--srcPopoverMaxHeight);
    margin: auto;
    background-color: var(--srcPopoverBg);
    border-radius: var(--srcPopoverBorderRadius);
    box-shadow: var(--srcPopoverBoxShadow)
}

.src-popover .src-popover__body {
    padding: var(--srcPopoverBodyPadding);
    width: var(--srcPopoverWidth);
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--src-color-border-default) transparent
}

.src-popover .src-popover__body::-webkit-scrollbar {
    width: 4px
}

.src-popover .src-popover__body::-webkit-scrollbar-track {
    background: transparent
}

.src-popover .src-popover__body::-webkit-scrollbar-thumb {
    background-color: var(--src-color-border-default);
    border-radius: 10px
}

.src-popover .src-popover__body .src-list src-list-item:last-child {
    margin-bottom: 0
}

.src-popover-panel--mobile src-popover {
    width: 100%
}

.src-popover-panel--mobile .src-popover {
    --srcPopoverWidth: 100%;
    --srcPopoverBorderRadius: var(--src-border-rounded-parent) var(--src-border-rounded-parent) 0 0;
    --srcPopoverBoxShadow: var(--src-shadow-large-top)
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0
}

body {
    min-height: 100%
}

:root {
    --mat-form-field-container-height: auto;
    --mat-form-field-leading-icon-color: var(--src-color-icon-default);
    --mat-form-field-outlined-input-text-placeholder-color: var(--src-text-ui-secondary-grey, #9ca3af);
    --mat-form-field-disabled-leading-icon-color: var(--src-color-icon-disabled);
    --mat-form-field-trailing-icon-color: var(--src-color-icon-default);
    --mat-form-field-outlined-focus-outline-width: 1px;
    --mat-form-field-outlined-outline-color: var(--src-border-input-basic, #d1d5db);
    --mat-form-field-outlined-hover-outline-color: var(--src-border-input-hover, #9ca3af);
    --mat-form-field-outlined-focus-outline-color: var(--src-border-input-active, #017bff);
    --mat-form-field-outlined-error-outline-color: var(--src-border-input-error, #f24122);
    --mat-form-field-outlined-error-focus-outline-color: var(--src-border-input-error, #f24122);
    --mat-form-field-outlined-error-hover-outline-color: var(--src-border-input-error-hover, #f24122);
    --mat-form-field-outlined-disabled-outline-color: transparent
}

.mat-form-field-appearance-outline {
    --_bgColor: var(--src-surface-container-main, #fff);
    background-color: var(--_bgColor, #fff)
}

.mat-form-field-appearance-outline:hover {
    --_bgColor: var(--src-ui-input-secondary, rgba(148, 163, 184, .08))
}

.mat-form-field-appearance-outline.mat-focused {
    --_bgColor: var(--src-surface-container-main, #fff);
    box-shadow: var(--srcFormElementFocusRing)
}

.mat-form-field-appearance-outline.mat-focused:hover {
    --_bgColor: var(--src-ui-input-hover, rgba(1, 123, 255, .08))
}

.mat-form-field-appearance-outline[class*=--state-success]: hover {
    --_bgColor: var(--src-ui-input-success-hover, rgba(22, 163, 74, .08))
}

.mat-form-field-appearance-outline[class*=--state-error]: hover,
.mat-form-field-appearance-outline.mat-form-field-invalid:hover {
    --_bgColor: var(--src-ui-input-error-hover, rgba(239, 68, 68, .08))
}

.mat-form-field-appearance-outline.src-input--secondary {
    --_bgColor: var(--src-ui-input-secondary, rgba(148, 163, 184, .08))
}

.mat-form-field-appearance-outline.src-input--secondary:hover {
    --_bgColor: var(--src-ui-input-hover, rgba(1, 123, 255, .08))
}

.mat-form-field-appearance-outline.src-input--secondary.mat-focused {
    --_bgColor: var(--src-surface-container-main, #fff)
}

.mat-form-field-appearance-outline.src-input--secondary.mat-focused:hover {
    --_bgColor: var(--src-ui-input-hover, rgba(1, 123, 255, .08))
}

.mat-form-field-appearance-outline.src-input--secondary[class*=--state-success] {
    --_bgColor: var(--src-surface-container-main, #fff)
}

.mat-form-field-appearance-outline.src-input--secondary[class*=--state-success]: hover,
.mat-form-field-appearance-outline.src-input--secondary[class*=--state-success].mat-focused:hover {
    --_bgColor: var(--src-ui-input-success-hover, rgba(22, 163, 74, .08))
}

.mat-form-field-appearance-outline.src-input--secondary[class*=--state-error],
.mat-form-field-appearance-outline.src-input--secondary.mat-form-field-invalid {
    --_bgColor: var(--src-surface-container-main, #fff)
}

.mat-form-field-appearance-outline.src-input--secondary[class*=--state-error]: hover,
.mat-form-field-appearance-outline.src-input--secondary.mat-form-field-invalid:hover,
.mat-form-field-appearance-outline.src-input--secondary[class*=--state-error].mat-focused:hover,
.mat-form-field-appearance-outline.src-input--secondary.mat-form-field-invalid.mat-focused:hover {
    --_bgColor: var(--src-ui-input-error-hover, rgba(239, 68, 68, .08))
}

.mat-form-field-appearance-outline.mat-form-field-disabled {
    --_bgColor: var(--src-ui-input-disabled, rgba(148, 163, 184, .16))
}

.mat-form-field-appearance-outline {
    width: 100%;
    --mat-mdc-form-field-floating-label-scale: 1;
    --mat-form-field-container-height: auto;
    --mat-form-field-outlined-container-shape: var(--src-border-rounded, var(--src-space-1-5));
    --mat-form-field-outlined-input-text-color: var(--src-text-ui-secondary-main, #111827);
    --srcFormElementFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-focus, rgba(1, 123, 255, .16));
    border-radius: var(--mat-form-field-outlined-container-shape)
}

.mat-form-field-appearance-outline[class*=--state-success] {
    --mat-form-field-outlined-input-text-color: var(--src-text-ui-success-main, #16a34a);
    --srcFormElementFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-success, rgba(22, 163, 74, .12));
    --mat-form-field-leading-icon-color: var(--src-color-icon-success, #16a34a);
    --mat-form-field-trailing-icon-color: var(--src-color-icon-success, #16a34a);
    --mat-form-field-outlined-outline-color: var(--src-border-input-success, #22c55e);
    --mat-form-field-outlined-hover-outline-color: var(--src-border-input-success-hover, #16a34a);
    --mat-form-field-outlined-focus-outline-color: var(--src-border-input-success, #22c55e)
}

.mat-form-field-appearance-outline[class*=--state-error],
.mat-form-field-appearance-outline.mat-form-field-invalid {
    --mat-form-field-outlined-input-text-color: var(--src-text-ui-distruct-main, #c5280c);
    --srcFormElementFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-error, rgba(239, 68, 68, .16));
    --mat-form-field-leading-icon-color: var(--src-icon-error, #f24122);
    --mat-form-field-trailing-icon-color: var(--src-icon-error, #f24122);
    --mat-form-field-outlined-outline-color: var(--src-border-input-error);
    --mat-form-field-outlined-hover-outline-color: var(--src-border-input-error-hover);
    --mat-form-field-outlined-focus-outline-color: var(--src-border-input-error)
}

.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper {
    padding-left: var(--src-padding-sm, var(--src-space-3));
    padding-right: var(--src-padding-xs, var(--src-space-2));
    border-radius: var(--mat-form-field-outlined-container-shape);
    font-family: var(--src-font-family-header, Inter);
    font-size: var(--src-text-fontSize, var(--src-font-size-sm));
    font-style: normal;
    font-weight: 500;
    line-height: var(--src-text-lineHeight, var(--src-font-line-sm));
    letter-spacing: 0
}

.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-text-field__input {
    white-space: nowrap;
    text-overflow: ellipsis
}

.mat-form-field-appearance-outline .mat-mdc-form-field-infix {
    width: auto;
    --mat-form-field-container-vertical-padding: var(--src-padding-xs, var(--src-space-2));
    --mat-form-field-filled-with-label-container-padding-top: var(--src-padding-xs, var(--src-space-2))
}

.src-input--secondary {
    --mat-form-field-outlined-input-text-placeholder-color: var(--src-text-ui-secondary-grey, #9ca3af);
    --mat-form-field-outlined-outline-color: transparent;
    --mat-form-field-outlined-hover-outline-color: transparent
}

.src-input--ghost,
.src-input--ghost[class*=--state-success],
.src-input--ghost[class*=--state-error] {
    --mat-form-field-outlined-outline-color: transparent;
    --mat-form-field-outlined-hover-outline-color: transparent
}

.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align {
    display: none;
    height: 0
}

.mat-mdc-form-field-text-prefix {
    display: flex;
    align-items: center
}

.mat-mdc-form-field-text-prefix label {
    padding-right: var(--src-gap-md, 6px);
    white-space: nowrap;
    display: flex;
    color: var(--src-text-body-lable, #6b7280);
    font-family: var(--src-font-family-header, Inter);
    font-size: var(--src-text-fontSize, 12px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--src-text-lineHeight, 16px)
}

.mat-mdc-form-field-flex {
    align-items: center
}

.mat-mdc-form-field-has-icon-prefix .mat-mdc-form-field-flex,
.mat-mdc-form-field-has-icon-suffix .mat-mdc-form-field-flex {
    display: grid;
    align-items: center;
    grid-template-columns: var(--formFieldWithIconsGrid);
    gap: 0;
    color: var(--src-icon-grey)
}

.mat-mdc-form-field-has-icon-prefix .mat-mdc-form-field-flex .mat-mdc-form-field-infix,
.mat-mdc-form-field-has-icon-suffix .mat-mdc-form-field-flex .mat-mdc-form-field-infix {
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%
}

.mat-mdc-form-field-has-icon-prefix .mat-mdc-form-field-icon-prefix,
.mat-mdc-form-field-has-icon-prefix .mat-mdc-form-field-icon-suffix,
.mat-mdc-form-field-has-icon-suffix .mat-mdc-form-field-icon-prefix,
.mat-mdc-form-field-has-icon-suffix .mat-mdc-form-field-icon-suffix {
    aspect-ratio: 1;
    height: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.mat-mdc-form-field-flex:has([class*=-prefix]) {
    --formFieldWithIconsGrid: auto minmax(0, 1fr)
}

.mat-mdc-form-field-flex:has([class*=-suffix]) {
    --formFieldWithIconsGrid: minmax(0, 1fr) auto
}

.mat-mdc-form-field-flex:has([class*=-prefix]):has([class*=-suffix]) {
    --formFieldWithIconsGrid: auto minmax(0, 1fr) auto
}

:root {
    --mat-checkbox-label-text-color: var(--src-text-body-main, #111827);
    --mat-checkbox-selected-checkmark-color: var(--src-icon-main-invert);
    --mat-checkbox-disabled-selected-checkmark-color: var(--src-icon-main-invert);
    --mat-checkbox-unselected-icon-color: var(--src-border-input-basic, #d1d5db);
    --mat-checkbox-selected-icon-color: var(--src-ui-accent-default, #017bff);
    --mat-checkbox-unselected-hover-icon-color: var(--src-border-input-hover, #9ca3af);
    --mat-checkbox-selected-hover-icon-color: var(--src-ui-accent-default-hover, #016fe6);
    --mat-checkbox-unselected-focus-icon-color: var(--src-border-input-basic, #d1d5db);
    --mat-checkbox-selected-focus-icon-color: var(--src-ui-accent-default, #017bff);
    --mat-checkbox-disabled-selected-icon-color: var(--src-ui-accent-disabled, rgba(148, 163, 184, .24));
    --mat-checkbox-disabled-unselected-icon-color: var(--src-border-input-basic, #d1d5db);
    --mat-checkbox-selected-focus-state-layer-opacity: 1;
    --mat-checkbox-unselected-focus-state-layer-opacity: 1;
    --mat-checkbox-unselected-hover-state-layer-opacity: 0;
    --mat-checkbox-selected-hover-state-layer-opacity: 0;
    --mat-checkbox-selected-focus-state-layer-color: transparent;
    --mat-checkbox-unselected-focus-state-layer-color: transparent
}

.mat-mdc-checkbox {
    --srcCheckboxSize: var(--src-icon-size, var(--src-space-5));
    --mat-checkbox-state-layer-size: var(--srcCheckboxSize);
    --mat-checkbox-label-text-size: var(--src-text-fontSize, var(--src-font-size-sm));
    --mat-checkbox-label-text-line-height: var(--src-text-lineHeight, var(--src-font-line-sm));
    --mat-checkbox-label-text-tracking: 0;
    --mat-checkbox-label-text-weight: 500;
    --bgColor: var(--src-surface-container-main, #fff)
}

.mat-mdc-checkbox:hover {
    --bgColor: linear-gradient(0deg, var(--src-surface-container-on-top, rgba(148, 163, 184, .08)) 0%, var(--src-surface-container-on-top, rgba(148, 163, 184, .08)) 100%) var(--src-surface-container-main, #fff)
}

.mat-mdc-checkbox .mdc-checkbox {
    width: var(--srcCheckboxSize);
    height: var(--srcCheckboxSize);
    flex: 0 0 var(--srcCheckboxSize);
    padding: calc((var(--mat-checkbox-state-layer-size, 40px) - var(--srcCheckboxSize)) / 2)
}

.mat-mdc-checkbox .mdc-checkbox__ripple {
    border-radius: var(--src-border-rounded-xs, var(--src-space-1));
    box-shadow: var(--srcFormElementFocusRing)
}

.mat-mdc-checkbox .mdc-checkbox__native-control:focus-visible+.mdc-checkbox__ripple {
    --srcFormElementFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-light, rgba(148, 163, 184, .16))
}

.mat-mdc-checkbox .mdc-checkbox__native-control:focus-visible:checked+.mdc-checkbox__ripple {
    --srcFormElementFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-accent-light, rgba(1, 123, 255, .16))
}

.mat-mdc-checkbox .mdc-checkbox__background {
    width: var(--srcCheckboxSize);
    height: var(--srcCheckboxSize);
    top: calc((var(--mat-checkbox-state-layer-size, 40px) - var(--srcCheckboxSize)) / 2);
    left: calc((var(--mat-checkbox-state-layer-size, 40px) - var(--srcCheckboxSize)) / 2);
    border-radius: var(--src-border-rounded-xs, var(--src-space-1));
    border: var(--src-border-border, 1px) solid var(--src-border-input-basic, #d1d5db);
    background: var(--bgColor);
    transform: none
}

.mat-mdc-checkbox .mdc-checkbox__background .mdc-checkbox__checkmark {
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    right: 10%;
    bottom: 10%
}

.mat-mdc-checkbox .mat-internal-form-field>label {
    padding-left: var(--src-gap-lg, var(--src-space-3))
}

.mat-pseudo-checkbox.mat-pseudo-checkbox-full {
    --srcCheckboxSize: var(--src-icon-size, var(--src-space-5));
    --mat-pseudo-checkbox-full-selected-icon-color: var(--src-ui-accent-default, #017bff);
    --mat-pseudo-checkbox-full-selected-checkmark-color: #fff;
    --mat-pseudo-checkbox-full-unselected-icon-color: var(--src-border-input-basic, #d1d5db);
    width: var(--srcCheckboxSize);
    height: var(--srcCheckboxSize);
    border-radius: var(--src-border-rounded-xs, var(--src-space-1));
    border-width: 1px
}

:root {
    --mat-radio-label-text-color: var(--src-text-body-main, #111827);
    --mat-radio-ripple-color: transparent;
    --mat-radio-checked-ripple-color: transparent;
    --mat-radio-unselected-icon-color: var(--src-border-input-basic, #d1d5db);
    --mat-radio-selected-icon-color: var(--src-ui-accent-default, #017bff);
    --mat-radio-unselected-hover-icon-color: var(--src-border-input-hover, #9ca3af);
    --mat-radio-selected-hover-icon-color: var(--src-ui-accent-default-hover, #016fe6);
    --mat-radio-unselected-focus-icon-color: var(--src-border-input-basic, #d1d5db);
    --mat-radio-selected-focus-icon-color: var(--src-ui-accent-default, #017bff);
    --mat-radio-disabled-selected-icon-color: var(--src-ui-accent-disabled, rgba(148, 163, 184, .24));
    --mat-radio-disabled-unselected-icon-color: var(--src-border-input-basic, #d1d5db)
}

.mat-mdc-radio-button.mat-accent {
    --srcRadioSize: var(--src-icon-size, var(--src-space-5));
    --mat-radio-state-layer-size: var(--srcRadioSize);
    --mat-radio-label-text-line-height: var(--src-text-lineHeight, var(--src-font-line-sm));
    --mat-radio-label-text-size: var(--src-text-fontSize, var(--src-font-size-sm));
    --mat-radio-label-text-tracking: 0;
    --mat-radio-label-text-weight: 500
}

.mat-mdc-radio-button.mat-accent .mdc-radio {
    width: var(--srcRadioSize);
    height: var(--srcRadioSize);
    padding: calc((var(--mat-radio-state-layer-size, 40px) - var(--srcRadioSize)) / 2)
}

.mat-mdc-radio-button.mat-accent.mat-mdc-radio-checked {
    --mdc-radio-selected-icon-color: var(--src-color-border-primary);
    --mdc-radio-selected-hover-icon-color: var(--src-color-border-primary)
}

.mat-mdc-radio-button.mat-accent .mdc-radio__outer-circle {
    border-width: 2px
}

.mat-mdc-radio-button.mat-accent .mdc-radio__native-control:checked+.mdc-radio__background>.mdc-radio__inner-circle {
    display: none
}

.mat-mdc-radio-button.mat-accent .mdc-radio__native-control:enabled:checked+.mdc-radio__background>.mdc-radio__outer-circle {
    border-width: 4px
}

.mat-mdc-radio-button.mat-accent .mdc-radio__background {
    width: 100%;
    height: 100%
}

.mat-mdc-radio-button.mat-accent .mat-internal-form-field>label {
    padding-left: var(--src-gap-lg, var(--src-space-3))
}

.mat-mdc-radio-button .mdc-radio__native-control+.mdc-radio__background:before {
    opacity: 1 !important;
    top: calc(-1 * (var(--mat-radio-state-layer-size, 40px) - var(--srcRadioSize)) / 2);
    left: calc(-1 * (var(--mat-radio-state-layer-size, 40px) - var(--srcRadioSize)) / 2)
}

.mat-mdc-radio-button .mdc-radio__native-control:focus-visible+.mdc-radio__background:before {
    box-shadow: var(--srcFormElementFocusRing)
}

.mat-mdc-radio-group {
    display: flex;
    flex-direction: column;
    gap: 6px
}

:root {
    --mat-select-panel-background-color: var(--src-surface-container-main, #fff);
    --mat-select-enabled-arrow-color: var(--src-icon-default, #374151);
    --mat-select-disabled-arrow-color: var(--src-icon-disabled, #9ca3af);
    --mat-select-focused-arrow-color: var(--src-icon-label, #6b7280);
    --mat-select-invalid-arrow-color: var(--src-icon-error, #f24122);
    --mat-select-placeholder-text-color: var(--src-color-text-default-disabled);
    --mat-option-selected-state-layer-color: var(--src-ui-secondary-active, rgba(1, 123, 255, .12));
    --mat-option-selected-state-label-text-color: var(--src-text-body-secondary, #4b5563);
    --mat-option-hover-state-layer-color: var(--src-ui-secondary-default-hover, rgba(148, 163, 184, .08));
    --mat-option-focus-state-layer-color: var(--src-ui-secondary-default-hover, rgba(148, 163, 184, .08))
}

.mat-form-field-appearance-outline {
    --mat-select-enabled-trigger-text-color: var(--src-text-ui-secondary-main, #111827)
}

.mat-form-field-appearance-outline[class*=--state-success] {
    --mat-select-enabled-trigger-text-color: var(--src-text-ui-success-main, #16a34a)
}

.mat-form-field-appearance-outline[class*=--state-error],
.mat-form-field-appearance-outline.mat-form-field-invalid {
    --mat-select-enabled-trigger-text-color: var(--src-text-ui-distruct-main, #c5280c)
}

.mat-form-field-appearance-outline .mat-mdc-select-trigger {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto
}

.mat-form-field-appearance-outline .mat-mdc-select-trigger .mat-mdc-select-arrow-wrapper {
    height: initial
}

.src-select-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    scrollbar-color: rgba(148, 163, 184, .16) transparent;
    scrollbar-width: thin
}

.src-select-panel::-webkit-scrollbar {
    width: 4px
}

.src-select-panel::-webkit-scrollbar-track {
    background-color: transparent
}

.src-select-panel::-webkit-scrollbar-thumb {
    background-color: #94a3b829;
    outline: none
}

.src-select-panel__header,
.src-panel__footer {
    width: 100%;
    padding: 0 8px
}

.src-select-panel__body {
    max-height: 100%;
    width: 100%;
    overflow-y: auto;
    scrollbar-gutter: stable;
    scrollbar-color: var(--src-color-border-strong) var(--src-color-border-default);
    scrollbar-width: thin
}

.src-select-panel__body::-webkit-scrollbar {
    width: 4px
}

.src-select-panel__body::-webkit-scrollbar-track {
    background-color: var(--src-color-border-default)
}

.src-select-panel__body::-webkit-scrollbar-thumb {
    background-color: var(--src-color-border-strong);
    outline: none
}

.mat-mdc-option.src-list__item {
    display: flex;
    min-height: initial;
    border-radius: var(--src-border-rounded, 4px);
    padding: var(--src-padding-xs, 6px) var(--src-padding-xs, 6px) var(--src-padding-xs, 6px) var(--src-padding-sm, 8px);
    font-size: var(--src-text-fontSize, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--src-text-lineHeight, 20px)
}

.mat-mdc-option.src-list__item .mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-checked:after {
    width: 10px;
    height: 5px;
    color: var(--src-icon-info)
}

:root {
    --matToggleShadow: 0 4px 12px 0 var(--src-shadow-light, rgba(148, 163, 184, .16)), 0 0 2px 0 var(--src-shadow-hard, rgba(71, 85, 105, .24));
    --mat-slide-toggle-track-height: 24px;
    --mat-slide-toggle-track-width: 44px;
    --mat-slide-toggle-unselected-icon-size: 0;
    --mat-slide-toggle-selected-icon-size: 0;
    --mat-slide-toggle-track-outline-width: 1px;
    --mat-slide-toggle-selected-track-outline-width: 0;
    --mat-slide-toggle-disabled-unselected-track-outline-width: 0;
    --mat-slide-toggle-track-outline-color: var(--src-border-input-basic, #d1d5db);
    --mat-slide-toggle-handle-shape: var(--src-border-rounded-full, 9999px);
    --mat-slide-toggle-track-shape: var(--src-border-rounded-full, 9999px);
    --mat-slide-toggle-unselected-handle-color: var(--src-surface-container-main, #fff);
    --mat-slide-toggle-unselected-focus-handle-color: var(--src-surface-container-main, #fff);
    --mat-slide-toggle-unselected-hover-handle-color: var(--src-surface-container-main, #fff);
    --mat-slide-toggle-unselected-pressed-handle-color: var(--src-surface-container-main, #fff);
    --mat-slide-toggle-unselected-track-color: var(--src-ui-secondary-default, rgba(148, 163, 184, .16));
    --mat-slide-toggle-unselected-hover-track-color: var(--src-ui-secondary-default-hover, rgba(148, 163, 184, .08));
    --mat-slide-toggle-unselected-focus-track-color: var(--src-ui-secondary-default, rgba(148, 163, 184, .16));
    --mat-slide-toggle-unselected-pressed-track-color: var(--src-ui-secondary-default, rgba(148, 163, 184, .16));
    --mat-slide-toggle-disabled-unselected-track-color: var(--src-ui-secondary-default, rgba(148, 163, 184, .16));
    --mat-slide-toggle-with-icon-handle-size: 20px;
    --mat-slide-toggle-pressed-handle-size: 20px;
    --mat-slide-toggle-selected-handle-size: 20px;
    --mat-slide-toggle-disabled-track-opacity: 1;
    --mat-slide-toggle-disabled-selected-handle-opacity: 1;
    --mat-slide-toggle-disabled-unselected-handle-opacity: 1;
    --mat-slide-toggle-disabled-unselected-icon-opacity: 1;
    --mat-slide-toggle-disabled-selected-icon-opacity: 1;
    --mat-slide-toggle-selected-handle-color: var(--src-surface-container-main, #fff);
    --mat-slide-toggle-selected-focus-handle-color: var(--src-surface-container-main, #fff);
    --mat-slide-toggle-selected-hover-handle-color: var(--src-surface-container-main, #fff);
    --mat-slide-toggle-selected-pressed-handle-color: var(--src-surface-container-main, #fff);
    --mat-slide-toggle-selected-track-color: var(--src-ui-accent-default, #017bff);
    --mat-slide-toggle-selected-focus-track-color: var(--src-ui-accent-default, #017bff);
    --mat-slide-toggle-selected-hover-track-color: var(--src-ui-accent-default-hover, #016fe6);
    --mat-slide-toggle-selected-pressed-track-color: var(--src-ui-accent-default, #017bff);
    --mat-slide-toggle-disabled-selected-track-color: var(--src-surface-bg, rgba(71, 85, 105, .24));
    --mat-slide-toggle-disabled-unselected-handle-color: var(--src-surface-container-main, #fff);
    --mat-slide-toggle-disabled-selected-handle-color: var(--src-surface-container-main, #fff);
    --mat-slide-toggle-unselected-with-icon-handle-horizontal-margin: 0 2px;
    --mat-slide-toggle-selected-with-icon-handle-horizontal-margin: 0 22px;
    --mat-slide-toggle-handle-elevation-shadow: var(--matToggleShadow)
}

.mat-mdc-slide-toggle .mdc-switch {
    border-radius: var(--mat-sys-corner-full, 9999px)
}

.mat-mdc-slide-toggle .mdc-label {
    color: var(--src-text-body-main, #111827);
    line-height: var(--src-text-lineHeight, var(--src-font-line-sm));
    font-size: var(--src-text-fontSize, var(--src-font-size-sm));
    letter-spacing: 0;
    font-weight: 500
}

.mdc-form-field.mat-internal-form-field>label {
    padding-left: var(--src-gap-lg, var(--src-space-3))
}

.mdc-form-field.mat-internal-form-field.mdc-form-field--align-end>label {
    padding-left: 0;
    padding-right: var(--src-gap-lg, var(--src-space-3))
}

.mat-mdc-slide-toggle.cdk-focused {
    --srcToggleFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-light, rgba(148, 163, 184, .16))
}

.mat-mdc-slide-toggle.cdk-focused.mat-mdc-slide-toggle-checked {
    --srcToggleFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-accent-light, rgba(1, 123, 255, .16))
}

.mat-mdc-slide-toggle.cdk-focused .mdc-switch {
    box-shadow: var(--srcToggleFocusRing)
}

.mdc-switch__ripple:after {
    display: none !important
}

.mat-mdc-slide-toggle.src-toggle--size-sm {
    --mat-slide-toggle-track-width: 36px;
    --mat-slide-toggle-track-height: 20px;
    --mat-slide-toggle-with-icon-handle-size: 16px;
    --mat-slide-toggle-pressed-handle-size: 16px;
    --mat-slide-toggle-selected-with-icon-handle-horizontal-margin: 0 18px
}

:root {
    --mat-autocomplete-background-color: var(--src-color-bg-default)
}

.toast-container {
    font-family: var(--src-font-family-body)
}

.toast-container.inline {
    position: absolute;
    bottom: 12px;
    left: 12px
}

.toast-container .ngx-toastr {
    --srcToastrBg: #1f2937;
    --srcToastrIconColor: #fff;
    --srcToastrMaxWidth: 400px;
    --srcToastrMinWidth: 120px;
    --srcToastrMessageFontSize: 16px;
    --srcToastrTitleFontSize: 18px;
    --srcToastrActionFontSize: 14px;
    --srcToastrBorderRadius: 8px;
    --srcToastrContentMaxWidth: 100%;
    --srcToastrShadow: 0px 3px 6px 0px rgba(23, 24, 24, .08), 0px 8px 20px 0px rgba(23, 24, 24, .12);
    width: auto;
    max-width: var(--srcToastrMaxWidth);
    min-width: var(--srcToastrMinWidth);
    padding: 12px 16px;
    background: var(--srcToastrBg);
    border-radius: var(--srcToastrBorderRadius);
    box-shadow: var(--srcToastrShadow)
}

.toast-container .ngx-toastr.toast-error {
    --srcToastrBg: var(--src-color-bg-critical, #c5280c)
}

.toast-container .ngx-toastr.toast-info {
    --srcToastrBg: var(--src-color-blue-600)
}

.toast-container .ngx-toastr.toast-warning {
    --srcToastrBg: var(--src-color-yellow-800)
}

.toast-container .ngx-toastr.toast-success {
    --srcToastrBg: var(--src-color-green-700)
}

.toast-container .ngx-toastr:hover {
    box-shadow: var(--srcToastrShadow)
}

.toast-container .ngx-toastr .toast-message {
    font-size: var(--srcToastrMessageFontSize);
    line-height: 1.3;
    padding-right: 40px
}

.toast-container .ngx-toastr .toast-close-button {
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
    padding: 4px;
    border: none;
    background-color: transparent
}

.toast-container .ngx-toastr .toast-close-button>span {
    display: none
}

.toast-container .ngx-toastr .toast-close-button:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14'%3E%3Cpath fill='%23fff' d='m7 8.4-4.9 4.9a.95.95 0 0 1-.7.27.95.95 0 0 1-.7-.27.95.95 0 0 1-.27-.7c0-.28.09-.52.27-.7L5.6 7 .7 2.1a.95.95 0 0 1-.27-.7c0-.28.09-.52.27-.7a.95.95 0 0 1 .7-.27c.28 0 .52.09.7.27L7 5.6 11.9.7a.95.95 0 0 1 .7-.27c.28 0 .52.09.7.27.18.18.27.42.27.7 0 .28-.09.52-.27.7L8.4 7l4.9 4.9c.18.18.27.42.27.7 0 .28-.09.52-.27.7a.95.95 0 0 1-.7.27.95.95 0 0 1-.7-.27L7 8.4Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat
}

:root {
    --headerH: 60px;
    --sidebar-left-width: 214px;
    --sidebar-right-width: 292px;
    --trDuration: .5s;
    --unreal-footer: 72px
}

@media (width >=1900px) {
    : root {
        --headerH: 60px
    }
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0
}

input[type=number] {
    -webkit-appearance: textfield;
    appearance: textfield
}

.tile {
    position: relative;
    width: 100%
}

.tile .title--color-picker .tile__image {
    position: relative
}

.tile .title--color-picker .tile__image:after {
    content: "";
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 20px;
    height: 20px;
    background-image: url(https://metabox.3dsource.com/assets/images/webp/colorpicker.webp);
    background-size: contain
}

.tile__image {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding: 1px;
    overflow: hidden;
    color: #67686a;
    background-color: #f9fafb;
    background-repeat: repeat;
    border: 1px solid #e2e5ed;
    border-radius: 4px;
    cursor: pointer;
    aspect-ratio: 1/1
}

.tile__image:hover,
.tile__image:active,
.tile__image.active {
    border-color: var(--src-color-border-primary)
}

.tile__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center
}

.tile__image--color img {
    object-fit: cover
}

.tile__counter {
    position: absolute;
    right: 4px;
    bottom: 4px;
    min-width: 20px;
    height: 15px;
    font-weight: 500;
    font-size: 10px;
    line-height: 14px;
    text-align: center;
    color: #7a8895;
    background: #fff;
    border: 1px solid #e2e5ed;
    border-radius: 1px
}

.delete-tile {
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 1
}

.delete-tile .src-icon-button {
    --srcButtonBgColor: #fff
}

.tile__title {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-end;
    max-width: 100%;
    padding: 5px 0 3px;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.2;
    color: #000;
    letter-spacing: .01em;
    word-break: break-word
}

.tile__panel-opener {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
    font-weight: 400;
    font-size: 10px;
    line-height: 22px;
    color: #7a8895;
    letter-spacing: .01em;
    background: transparent;
    border: none;
    cursor: pointer
}

.tile__panel-opener:hover {
    text-decoration: underline
}

.tile__panel-opener:after {
    content: "";
    width: 5px;
    height: 8px;
    margin-top: -2px;
    margin-left: 5px;
    background-image: url("data:image/svg+xml,%3Csvg width='5' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.8 4.001 2.4 0H.1l2.415 4.001L0 8h2.4l2.4-3.999Z' fill='%237A8895'/%3E%3C/svg%3E")
}

.tile__panel-opener--icon {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: #ffffffc2;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.846 4.597a.568.568 0 0 1 .374.534v9.739c0 .238-.15.452-.373.533l-7.653 2.783a.57.57 0 0 1-.388 0l-7.652-2.783a.569.569 0 0 1-.374-.533V5.13c0-.238.15-.451.374-.533l7.652-2.783a.57.57 0 0 1 .388 0l7.652 2.783ZM2.23 15.197l7.652 2.782a.35.35 0 0 0 .238 0l7.652-2.782A.348.348 0 0 0 18 14.87V5.13v9.74a.348.348 0 0 1-.229.327l-7.652 2.782a.35.35 0 0 1-.238 0L2.23 15.197Zm.467-1.106V5.374l6.956-2.53-6.956 2.53v8.717ZM9.432 3.159l-6.516 2.37v8.248l6.516-2.37V3.159Zm.916 8.401V2.845l6.956 2.529-6.956-2.53v8.716Zm6.736 2.216V5.528l-6.516-2.37v8.249l6.516 2.37Zm-4.276-.58L10 12.174l-2.808 1.022L10 14.216l2.808-1.02Zm-3.826 1.391-2.808-1.021-2.809 1.021 2.809 1.021 2.808-1.021Zm3.826 1.391L10 14.957l-2.808 1.021L10 17l2.808-1.022Zm-1.79-1.391 2.808 1.021 2.808-1.021-2.808-1.021-2.808 1.021Z' fill='%23415566'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    border: none;
    border-radius: 50%;
    cursor: pointer
}

.tile__panel-opener--icon:hover {
    background-color: #fff
}

app-avatar-uploader .uploader {
    position: relative;
    display: block;
    width: 100%;
    min-height: 88px;
    height: 100%;
    margin: 0 auto
}

app-avatar-uploader .uploader .drag-input {
    width: 100%;
    height: 100%
}

app-avatar-uploader .uploader .uploaded-file {
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    display: flex;
    justify-content: center;
    align-items: center
}

app-avatar-uploader .uploader .uploaded-file .uploader-box__label {
    margin-bottom: 0;
    padding-top: 0;
    color: var(--fontColor)
}

app-avatar-uploader .uploader .uploaded-file .uploader-box__label strong {
    color: var(--src-text-ui-accent-main)
}

app-avatar-uploader .uploader .uploaded-file img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center
}

app-avatar-uploader .uploader .uploaded-file__change {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #fff;
    letter-spacing: .005em;
    text-shadow: none;
    background: #0505058a;
    border-radius: 6px;
    opacity: 0;
    transition: all .35s ease
}

app-avatar-uploader .uploader.is-rounded {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 50%
}

app-avatar-uploader .uploader.is-rounded .uploaded-file img {
    border-radius: 50%;
    object-fit: cover
}

app-avatar-uploader:hover .uploaded-file__change {
    opacity: 1
}

app-avatar-uploader .drop-form__input-group {
    width: 100%;
    height: inherit
}

app-avatar-uploader .drop-form__input-group .drop-form__input-label {
    display: block;
    width: 100%;
    height: 100%
}

.edit-product-info app-avatar-uploader .uploader,
.edit-environment-info app-avatar-uploader .uploader {
    height: 250px;
    width: 100%
}

.src-panel {
    --srcPanelWidth: 620px;
    --srcPanelMaxWidth: calc(100% - 16px);
    --srcPanelMaxHeight: 100vh;
    --srcPanelBg: var(--src-color-bg-default);
    --srcPanelBoxShadow: var(--src-shadow-large);
    --srcPanelBorderRadius: var(--src-br-medium);
    --srcPanelTitleSize: var(--src-font-size-base);
    --srcPanelTitleLineHeight: var(--src-font-line-base);
    --srcPanelTitleColor: var(--src-text-body-main);
    --srcPanelBodyPadding: 0;
    --srcPanelTitleBorder: 1px solid var(--src-border-container-basic, #e5e7eb);
    --srcPanelFooterBorder: 1px solid var(--src-border-container-basic, #e5e7eb);
    width: var(--srcPanelWidth);
    height: 100%;
    display: grid;
    background: #fff;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0;
    box-shadow: inset 0 0 0 1px #11182714
}

.src-panel--empty {
    grid-template-rows: auto minmax(0, 1fr) auto
}

.src-panel--with-filters .src-panel__header {
    flex-direction: column
}

.src-panel__header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 16px 12px 16px 16px;
    border-bottom: var(--srcPanelTitleBorder)
}

.src-panel__header .src-panel__close {
    margin-left: auto
}

.src-panel__header-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    padding-bottom: 16px
}

.src-panel__header-wrap .src-panel__close {
    margin-left: auto
}

.src-panel__filter-row {
    min-height: 32px;
    display: grid;
    gap: 16px;
    align-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    width: 100%;
    padding-bottom: 8px
}

.src-panel__filter-row strong {
    color: var(--src-text-body-main, #1f2937);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px
}

.src-panel__title {
    font-size: var(--srcPanelTitleSize);
    font-weight: var(--src-fw-semibold, 600);
    line-height: var(--srcPanelTitleLineHeight);
    color: var(--srcPanelTitleColor);
    word-break: break-word
}

.src-panel__back {
    margin-right: 8px
}

.src-panel__close {
    margin-left: auto
}

.src-panel__body {
    position: relative;
    padding: var(--srcPanelBodyPadding)
}

.src-panel__body .ng-scrollbar {
    --scrollbar-offset: 8
}

.src-panel__body--scrollable {
    padding: 0 0 0 var(--srcPanelBodyPadding)
}

.src-panel__body--scrollable .ng-scrollbar {
    --scrollbar-border-radius: 0px;
    --scrollbar-thickness: 3;
    --scrollbar-offset: 8;
    --scrollbar-track-color: transparent;
    --scrollbar-thumb-color: var(--src-border-container-basic, #e5e7eb);
    --scrollbar-thumb-hover-color: var(--scrollbar-thumb-color)
}

.src-panel__footer {
    display: flex;
    justify-content: flex-end;
    padding: 16px;
    width: 100%;
    border-top: var(--srcPanelFooterBorder);
    gap: 10px
}

.src-table table {
    width: 100%;
    max-width: 100%
}

.src-table th.mat-sort-header-sorted {
    color: #000
}

.src-table .mat-mdc-table-sticky {
    z-index: 1;
    color: #6b7280;
    font-size: 13px;
    font-style: normal;
    line-height: 16px;
    background-color: #f9fafb;
    font-weight: 500
}

.src-table .mat-mdc-header-row,
.src-table .mat-mdc-row {
    min-height: 40px;
    min-width: 100%
}

.src-table .mat-mdc-header-row:last-child .mat-mdc-cell,
.src-table .mat-mdc-row:last-child .mat-mdc-cell {
    border-bottom: 1px solid var(--src-border-container-basic)
}

.src-table .mat-mdc-header-row {
    height: 39px;
    min-height: auto
}

.src-table .mat-mdc-header-cell {
    border-bottom-color: #e5e7eb
}

.src-table .mat-mdc-cell {
    position: relative;
    align-items: flex-start;
    padding: 16px 16px 15px;
    color: var(--src-text-body-main, #1f2937);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    overflow: visible;
    background: #fff;
    border-bottom-color: var(--src-border-container-basic);
    cursor: pointer
}

.src-table .mat-column-select {
    padding-right: 0;
    width: 36px
}

.src-table .mat-mdc-header-row .mat-mdc-header-cell,
.src-table .mat-mdc-row:hover .mat-mdc-cell {
    background-color: #f9fafb
}

.src-table .mat-mdc-row:hover .table__cell-content--name .actions {
    opacity: 1;
    pointer-events: all
}

.src-table .table__cell-content {
    word-break: break-word
}

.src-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid var(--src-border-container-light, rgba(148, 163, 184, .16));
    border-radius: 12px;
    background-color: var(--src-surface-container-main, #fff)
}

.src-box__heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    gap: 8px
}

.src-box__title {
    display: flex;
    align-items: center;
    color: var(--src-text-body-main, #1f2937);
    font-size: var(--src-font-size-sm);
    font-weight: 600;
    line-height: var(--src-font-line-sm)
}

.src-box__action {
    margin-left: auto
}

.cdk-dialog-container {
    outline: none
}

.src-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff9;
    z-index: 1
}

:root .accordion {
    padding: 16px 8px 0;
    margin-bottom: 16px;
    --mat-expansion-header-collapsed-state-height: 32px;
    --mat-expansion-header-expanded-state-height: 32px;
    --mat-expansion-container-shape: 0;
    --mat-expansion-header-indicator-color: var(--src-icon-default);
    --mat-expansion-container-background-color: transparent;
    --mat-expansion-header-text-color: #1f2937;
    --mat-expansion-header-text-size: var(--src-font-size-base);
    --mat-expansion-header-text-weight: 500;
    --mat-expansion-header-text-tracking: 0;
    --mat-expansion-header-text-line-height: var(--src-font-line-base)
}

:root .accordion .mat-expansion-panel-header {
    padding: 0 20px 0 0
}

:root .accordion .mat-content {
    align-items: center
}

:root .accordion .mat-expansion-panel {
    box-shadow: none;
    border-bottom: 1px solid #e2e5ed
}

:root .accordion .mat-expansion-panel-body {
    padding: 14px 3px
}

.start-stream-btn {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translate(-50%);
    z-index: 1
}

.start-stream-btn .src-button {
    --srcButtonBorderRadius: var(--src-br-full)
}

.render .start-stream-btn {
    top: 88px
}

.unreal-view-selector {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.unreal-view-selector .selected-box__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 13px;
    line-height: 22px;
    color: var(--src-text-body-main);
    letter-spacing: .01em
}

.unreal-view-selector .selected-box__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0 4px 0 0
}

.right-side .rightside-title {
    display: flex;
    align-items: center;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 22px;
    font-family: var(--src-font-family-body);
    color: var(--src-text-body-main);
    letter-spacing: 0;
    margin-bottom: 4px
}

.right-side .rightside-title .info {
    margin-left: 8px;
    color: var(--src-icon-info)
}

.cards-list {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding: 10px 0 0 24px
}

.renders-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px
}

.cards-list__header {
    min-height: 32px;
    display: grid;
    gap: 16px;
    align-items: center;
    grid-template-columns: .5fr;
    grid-template-rows: auto auto;
    padding-right: 24px;
    padding-bottom: 8px
}

.cards-list__header.renders {
    grid-template-columns: 1fr;
    grid-template-rows: auto
}

.cards-list__header strong {
    color: var(--src-text-body-main);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px
}

.cards-list__content {
    position: relative;
    height: 100%;
    overflow: hidden;
    padding-top: 9px;
    padding-bottom: 0
}

.cards-list__scrollbar {
    height: 100%
}

.cards-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 216px));
    gap: 15px 16px;
    margin-bottom: 24px
}

.page-content {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr)
}

.layout-tabs,
.layout-narrow {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    padding: 24px 24px 0;
    height: 100%;
    width: 100%
}

.layout-tabs .source-tab-container,
.layout-narrow .source-tab-container {
    height: 100%
}

.layout-table {
    height: 100%;
    padding-right: 20px;
    padding-left: 20px;
    background-color: #f8f8fb
}

.table-container {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr)
}

.table-container__heading {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px
}

.table-container__heading app-search {
    width: 100%
}

.table-container__scrollbar {
    position: relative
}

.table-container__body {
    border: 1px solid var(--src-border-container-light, rgba(148, 163, 184, .16));
    background: var(--src-surface-container-main);
    box-shadow: 0 1px 2px #0000000d;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto
}

.no-results-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    gap: 4px;
    padding: 40px 0
}

.no-results-wrapper .search-icon {
    margin-bottom: 12px;
    padding: 8px;
    border-radius: 99px;
    background: #f9fafb;
    color: #6b7280
}

.no-results-wrapper .no-results-wrapper__header {
    color: #1f2937;
    font-family: var(--src-font-family-body);
    font-size: var(--src-font-size-sm);
    font-style: normal;
    font-weight: 600;
    line-height: var(--src-font-line-sm);
    text-align: center
}

.no-results-wrapper .no-results-wrapper__description {
    color: #6b7280;
    font-family: var(--src-font-family-body);
    font-size: var(--src-font-size-sm);
    font-style: normal;
    font-weight: 400;
    line-height: var(--src-font-line-sm);
    text-align: center
}

.layout-one-column {
    width: 100%;
    height: 100%;
    display: grid;
    gap: 16px;
    padding: 0;
    grid-template-columns: minmax(0, 1fr)
}

.layout-two-column {
    width: 100%;
    height: 100%;
    display: grid;
    gap: 16px;
    padding: 0
}

.layout-two-column--left-side {
    grid-template-columns: minmax(0, 1fr) 33%
}

.layout-two-column--right-side {
    grid-template-columns: 33% minmax(0, 1fr)
}

.src-form {
    --srcFormOffset: 4px
}

.section_3dsourcecom .src-hint,
.cdk-overlay-container .src-hint {
    position: relative;
    margin: var(--srcHintMargin)
}

.src-list .src-list__item app-src-icon {
    color: var(--src-color-icon-default);
    width: var(--src-icon-size);
    height: var(--src-icon-size)
}

.src-list .src-list__item.src-list__item--destructive app-src-icon {
    color: var(--src-color-text-critical)
}

src-tooltip .src-tooltip .src-tooltip__content {
    word-break: break-all
}

.src-popover {
    --srcPopoverBodyPadding: 0
}

.src-modal__body--scrollable {
    padding: 0 0 0 var(--srcModalBodyPadding)
}

.src-modal__body--scrollable .src-modal__scroll-box.ng-scrollbar {
    --scrollbar-offset: 8
}

.src-modal__body .src-modal__scroll-box {
    max-height: 100%
}

.src-tabs__nav-item {
    text-transform: capitalize
}

.src-tabs__nav--swiper .src-tabs__nav-slide {
    max-width: 350px;
    overflow: hidden;
    white-space: nowrap
}

.src-tabs__nav--swiper .src-tabs__nav-slide .src-tabs__nav-item {
    overflow: hidden;
    text-overflow: ellipsis
}

.src-modal__scroll-box {
    word-break: break-word
}

.src-badge {
    white-space: nowrap
}

html,
body {
    width: 100%;
    height: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%
}

body {
    width: inherit;
    height: inherit;
    min-height: 100%;
    margin: 0;
    overflow: hidden;
    background-color: #f9fafb;
    scroll-behavior: smooth;
    text-rendering: optimizespeed
}

.cdk-overlay-container ng-scrollbar,
.section_3dsourcecom ng-scrollbar {
    --scrollbar-offset: 0;
    --scrollbar-thickness: 3;
    --scrollbar-hover-thickness: 3;
    --scrollbar-track-color: transparent;
    --scrollbar-border-radius: 7px;
    --scrollbar-thumb-color: var(--src-border-container-basic);
    --scrollbar-thumb-hover-color: var(--src-border-container-hover)
}

.disabled {
    opacity: .5 !important;
    pointer-events: none !important
}

.cdk-overlay-container {
    z-index: 1200
}

.cdk-overlay-container:empty {
    display: none
}

body.grabbing,
body.grabbing .tile__image {
    cursor: grabbing !important
}

.cdk-global-scrollblock {
    overflow: visible
}

button {
    background: transparent
}

/*# sourceMappingURL=styles-IKBNDDYQ.css.map */