/** Auth **/
body{
    background-color: var(--root-background);
}

.form-group-stack > * {
    margin-block-end: 0;
    margin-block-start: 0;
}
.form-group-stack > * + * {
    margin-block-start: 1rem;
}

.form-label--space-between {
    display: flex;
    justify-content: space-between;
}

.auth-form {
    margin-block: auto;
}
.auth-form > * {
    margin-block-end: 0;
    margin-block-start: 0;
}
.auth-form > * + * {
    margin-block-start: 1rem;
}
.auth-form__social > * {
    margin-block-end: 0;
    margin-block-start: 0;
}
.auth-form__social > * + * {
    margin-block-start: 1rem;
}
.auth-form__order-card{
    width: 385px;
    height: 420px;
    background: #FFF;
    border-radius: 24px;
    padding: 16px;
}
.auth-form__order-card-data {
    display: flex;
    justify-content: center;
}
.auth-form__separator {
    align-items: center;
    display: flex;
    font-size: 0.875rem;
    gap: 1rem;
    margin-block-start: 1.5rem;
    text-transform: uppercase;
}
.auth-form__separator::before, .auth-form__separator::after {
    background-color: var(--spruce-base-color-border);
    block-size: 1px;
    content: "";
    display: flex;
    inline-size: 100%;
}
.auth-form__title{
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: -0.006em;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}
.auth-form__subtitle{
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

}

/*** Login with buttons ***/

:root {
    --root-scrollbar-color-thumb-background: hsla(0, 0%, 0%, 0.15);
    --root-scrollbar-color-thumb-background-hover: hsla(0, 0%, 0%, 0.25);
    --root-scrollbar-color-track-background: hsla(0, 0%, 0%, 0.05)
}

:root {
    --spruce-btn-color-primary-background: #292524;
    --spruce-btn-color-primary-background-hover: #1b1818;
    --spruce-btn-color-primary-foreground: hsl(0, 0%, 100%);
    --spruce-btn-color-primary-shadow: rgba(27, 24, 24, 0.25);
    --spruce-btn-color-secondary-background: hsl(227, 92%, 55%);
    --spruce-btn-color-secondary-background-hover: #0937dc;
    --spruce-btn-color-secondary-foreground: hsl(0, 0%, 100%);
    --spruce-btn-color-secondary-shadow: #ced8fd;
    --spruce-btn-color-dark-background: hsl(205, 100%, 2%);
    --spruce-btn-color-dark-background-hover: hsl(205, 100%, 5%);
    --spruce-btn-color-dark-foreground: hsl(0, 0%, 100%);
    --spruce-btn-color-dark-outline-border: hsl(260, 4%, 70%);
    --spruce-btn-color-dark-outline-foreground: hsl(205, 100%, 2%);
    --spruce-btn-color-dark-outline-foreground-hover: hsl(0, 0%, 100%);
    --spruce-btn-color-dark-outline-background-hover: hsl(205, 100%, 2%);
    --spruce-btn-color-dark-outline-focus-ring: hsl(205, 100%, 2%);
    --spruce-btn-color-delete-background: #fceeee;
    --spruce-btn-color-delete-background-hover: hsl(0, 71%, 51%);
    --spruce-btn-color-delete-focus-ring: hsl(0, 71%, 51%);
    --spruce-btn-color-delete-foreground: hsl(0, 71%, 51%);
    --spruce-btn-color-delete-foreground-hover: hsl(0, 0%, 100%);
    --spruce-btn-color-light-background: hsl(262, 71%, 98%);
    --spruce-btn-color-light-background-hover: #292524;
    --spruce-btn-color-light-focus-ring: #292524;
    --spruce-btn-color-light-foreground: #292524;
    --spruce-btn-color-light-foreground-hover: hsl(0, 0%, 100%);
    --spruce-btn-color-pagination-background: hsl(263, 40%, 96%);
    --spruce-btn-color-pagination-background-hover: #292524;
    --spruce-btn-color-pagination-foreground: #292524;
    --spruce-btn-color-pagination-foreground-hover: hsl(0, 0%, 100%);
    --spruce-btn-color-pagination-focus-ring: #292524;
    --root-base-color-background: hsl(0, 0%, 100%);
    --root-main-color-background: hsl(210, 60%, 98%);
    --root-base-color-border: hsl(215, 100%, 96%);
    --root-header-color-background: hsla(0, 0%, 100%, 0.95);
    --root-base-color-heading: hsl(205, 100%, 2%);
    --root-font-size-base: 0.938rem;
    --root-base-color-text: hsl(208, 9%, 42%);
    --root-base-color-primary-lightest: hsl(240, 30%, 16%);
    --root-base-background: #F5F5F4;
    --root-background: #FAFAF9;
    --root-border-radius-sm: 0.45rem;
    --root-container-inline-size: 38rem;
}

[data-theme-mode=dark] {
    color-scheme: dark;
}
[data-theme-mode=dark] select.form-control:not([multiple]):not([size]) {
    background-image: url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M12,12.507l-3.816,-3.815c-0.171,-0.172 -0.45,-0.172 -0.622,-0l-0.933,0.933c-0.172,0.172 -0.172,0.451 0,0.623l5.06,5.06c0.172,0.172 0.45,0.172 0.622,0l5.06,-5.06c0.172,-0.172 0.172,-0.451 -0,-0.623l-0.933,-0.933c-0.172,-0.172 -0.451,-0.172 -0.622,-0l-3.816,3.815Z" style="fill:hsl%280, 0%, 100%%29;"/%3e%3c/svg%3e');
}

.btn--dark {
    background-color: var(--spruce-btn-color-dark-background);
    border-color: var(--spruce-btn-color-dark-background);
    color: var(--spruce-btn-color-dark-foreground);
}
.btn--dark:focus-visible {
    outline: 2px solid var(--spruce-btn-color-dark-background);
    outline-offset: 2px;
}
.btn--dark:hover {
    background-color: var(--spruce-btn-color-dark-background-hover);
    border-color: var(--spruce-btn-color-dark-background-hover);
    color: var(--spruce-btn-color-dark-foreground);
}

.btn--outline-dark {
    background-color: transparent;
    border-color: var(--spruce-btn-color-dark-outline-border);
    color: var(--spruce-btn-color-dark-outline-foreground);
}
.btn--outline-dark:focus-visible {
    outline: 2px solid var(--spruce-btn-color-dark-outline-focus-ring);
    outline-offset: 2px;
}
.btn--outline-dark:hover {
    background-color: var(--spruce-btn-color-dark-outline-background-hover);
    border-color: var(--spruce-btn-color-dark-outline-background-hover);
    color: var(--spruce-btn-color-dark-outline-foreground-hover);
}

.btn--delete {
    background-color: var(--spruce-btn-color-delete-background);
    border-color: var(--spruce-btn-color-delete-background);
    color: var(--spruce-btn-color-delete-foreground);
}
.btn--delete:focus-visible {
    outline: 2px solid var(--spruce-btn-color-delete-focus-ring);
    outline-offset: 2px;
}
.btn--delete:hover {
    background-color: var(--spruce-btn-color-delete-background-hover);
    border-color: var(--spruce-btn-color-delete-background-hover);
    color: var(--spruce-btn-color-delete-foreground-hover);
}

.btn--light {
    background-color: var(--spruce-btn-color-light-background);
    border-color: var(--spruce-btn-color-light-background);
    color: var(--spruce-btn-color-light-foreground);
}
.btn--light:focus-visible {
    outline: 2px solid var(--spruce-btn-color-light-focus-ring);
    outline-offset: 2px;
}
.btn--light:hover {
    background-color: var(--spruce-btn-color-light-background-hover);
    border-color: var(--spruce-btn-color-light-background-hover);
    color: var(--spruce-btn-color-light-foreground-hover);
}
.btn--light.btn--active {
    background-color: var(--spruce-btn-color-light-background-hover);
    border-color: var(--spruce-btn-color-light-background-hover);
    color: var(--spruce-btn-color-light-foreground-hover);
}

[x-cloak] {
    display: none !important;
}

/*****************/
/** Integration **/
/*****************/

.onboarding__steps-block {
    padding-top: 32px;
    padding-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.onboarding__steps-block-titles {
    display: flex;
    align-items: center;
    gap: 8px;
}

.onboarding__steps-block-title {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--root-base-color-text);
}

.onboarding-integration__steps-section {
    padding-top: 64px;
}

.onboarding-integration__logo-container {
    display: flex;
    justify-content: center;
}

.onboarding-integration__logo {
    height: 24px;
}

.onboarding-integration__connect-integration {
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.onboarding-integration__connect-integration-label {
    display: flex;
    gap: 8px;
}

.onboarding-integration__connect-integration-title {
    margin: 0;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
}

.onboarding-integration__divider {
    color: #e2ebf8;
}

.onboarding-integration__form-wrapper {
    display: flex;
}

.onboarding-integration__order-card {
    width: 850px;
    max-height: 420px;
    background: #FFF;
    border-radius: 24px;
    padding: 8px;
}

.onboarding-integration__order-card-data {
    display: flex;
}

.onboarding-integration__order-card-content {
    width: 60%;
    padding: 16px 32px;
    display: flex;
    flex-direction: column;
}

.onboarding-integration__order-card-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
}

.onboarding-integration__order-card-description {
    color: var(--root-base-color-text);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}

.onboarding-integration__continue-button {
    margin-top: auto;
    margin-right: auto;
}

.onboarding-integration__order-card-image-container {
    width: 40%;
}

.onboarding-integration__order-card-image {
    width: 100%;
    min-width: 333px;
    min-height: 368px;
}

.onboarding-integration__page-container {
    display: flex;
    justify-content: center;
}

/** Sider menu **/

.l-main {
    display: flex;
    position: relative;
}

.l-main__sidebar {
    border-radius: 24px;
    background-color: var(--root-base-color-background);
    display: none;
    margin: 1em;
    /*inline-size: var(--root-sidebar-inline-size);*/
    /*inset-block: 0;*/
    /*inset-inline: 0 auto;*/
    position: fixed;
    z-index: 20
}

@media(min-width: 64em) {
    .l-main__sidebar {
        display:block
    }
}

.l-main__sidebar--open {
    display: block
}

.l-main__body {
    /*background-color: var(--root-main-color-background);*/
    inline-size: 100%;
    padding: 1em;
    min-block-size: calc(100lvh - 1em - var(--root-header-block-size))
}

@media(min-width: 64em) {
    .l-main__body {
        inline-size:calc(100% - var(--root-sidebar-inline-size));
        margin-inline-start:var(--root-sidebar-inline-size)}
}

.app-sidebar {
    block-size: 100%;
    /*margin: 1rem;*/
    /*border-inline-end:1px solid var(--root-base-color-border);display: flex;*/
    flex-direction: column;
    gap: 0.5rem;
    padding-block:0 1.5rem}

.app-sidebar__logo {
    block-size: 1.25rem;
    display: inline-flex
}

.app-sidebar__search {
    display: none
}

@media(min-width: 64em) {
    .app-sidebar__search {
        display:flex
    }
}

.app-sidebar__header {
    align-items: center;
    block-size: var(--root-header-block-size);
    border-block-end:1px solid var(--root-base-color-border);display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    margin-inline:1.5rem}

.app-sidebar__body {
    flex-grow: 1;
    margin-inline:calc(1.5rem/2);overflow-y: auto;
    padding-inline:calc(1.5rem/2)}

.app-sidebar__body::-webkit-scrollbar {
    block-size: .5rem;
    inline-size: .5rem
}

.app-sidebar__body::-webkit-scrollbar-thumb {
    background: var(--root-scrollbar-color-thumb-background);
    border-radius: .15em
}

.app-sidebar__body::-webkit-scrollbar-thumb:hover {
    background: var(--root-scrollbar-color-thumb-background-hover)
}

.app-sidebar__body::-webkit-scrollbar-track {
    background: var(--root-scrollbar-color-track-background);
    border-radius: .15em
}

.app-sidebar__body>*+* {
    border-block-start:1px solid var(--root-base-color-border);margin-block-start: 1rem;
    padding-block-start:1rem}

.app-header {
    backdrop-filter: saturate(180%) blur(0.25rem);
    background-color: var(--root-header-color-background);
    border-block-end:1px solid var(--root-base-color-border);inset-block-start: 0;
    inset-block-start: 0;
    position: sticky;
    position: sticky;
    z-index: 15
}

.app-header__inner {
    align-items: center;
    block-size: var(--root-header-block-size);
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1rem,5vw,3rem);
    justify-content: space-between;
    margin-inline:var(--root-container-gap)}

.app-header__column {
    align-items: center;
    display: flex;
    flex-grow: 1;
    gap: clamp(1rem,5vw,1.5rem)
}

.app-header__actions {
    align-items: center;
    display: flex;
    gap: clamp(1rem,5vw,1.5rem)
}

.app-header__actions--secondary {
    gap: 1rem
}

.app-header__logo {
    block-size: 1.25rem;
    display: inline-flex
}

@media(min-width: 64em) {
    .app-header__logo {
        display:none
    }
}

.app-header__breadcrumb {
    display: none
}

@media(min-width: 64em) {
    .app-header__breadcrumb {
        display:flex
    }
}

.block-navigation {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    z-index: 1
}

.block-navigation__toggle::before {
    content: "";
    inset: 0;
    position: absolute
}

.block-navigation__title {
    align-items: center;
    color: var(--root-base-color-heading);
    display: flex;
    font-size: var(--root-font-size-base);
    font-weight: 700;
    justify-content: space-between;
    margin-block:0}

.block-navigation__toggle[aria-expanded=true] svg {
    rotate: 180deg
}

.block-navigation__toggle svg {
    pointer-events: none
}

.block-navigation__menu[data-state=closed] {
    display: none
}

.block-navigation__menu[data-state=open] {
    display: block
}

.block-navigation__menu ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.block-navigation__menu a {
    align-items: center;
    color: var(--root-base-color-text);
    display: flex;
    gap: .75em;
    padding-block:.35em;padding-inline:.75em;position: relative;
    text-decoration: none
}

.block-navigation__menu a:hover:not([aria-current=page])::before {
    background-color: var(--root-background)
}

.block-navigation__menu a::before {
    border-radius: var(--root-border-radius-sm);
    content: "";
    inset-block: 0;
    inset-inline: 0;
    position: absolute;
    z-index: -1
}

.block-navigation__menu a[aria-current=page] {
    color: #000
}

.block-navigation__menu a[aria-current=page]::before {
    background-color: var(--root-base-background)
}

.block-navigation__menu a[aria-current=page] svg {
    color: #000
}

.block-navigation__menu a svg {
    --size: 1.15em;
    block-size: var(--size);
    color: #000;
    inline-size: var(--size)
}

.block-navigation__menu--breakout a {
    padding-block:.35em;padding-inline:0}

.block-navigation__menu--breakout a::before {
    inset-inline: -0.75rem -0.35em
}

.disabled-item {
    pointer-events:none;
    opacity:0.6;
}

@media(min-width: 32em) {
    .display--flex\:xs {
        display:flex !important
    }
}

@media(min-width: 48em) {
    .display--flex\:sm {
        display:flex !important
    }
}

@media(min-width: 64em) {
    .display--flex\:md {
        display:flex !important
    }
}

@media(min-width: 80em) {
    .display--flex\:lg {
        display:flex !important
    }
}

@media(min-width: 90em) {
    .display--flex\:xl {
        display:flex !important
    }
}

@media(min-width: 110em) {
    .display--flex\:xxl {
        display:flex !important
    }
}

@media(min-width: 32em) {
    .display--none\:xs {
        display:none !important
    }
}

@media(min-width: 48em) {
    .display--none\:sm {
        display:none !important
    }
}

@media(min-width: 64em) {
    .display--none\:md {
        display:none !important
    }
}

@media(min-width: 80em) {
    .display--none\:lg {
        display:none !important
    }
}

@media(min-width: 90em) {
    .display--none\:xl {
        display:none !important
    }
}

@media(min-width: 110em) {
    .display--none\:xxl {
        display:none !important
    }
}

.m-block\:0 {
    margin-block:0 !important}

.vertical-align\:top {
    vertical-align: top !important
}

:root {
    --root-sidebar-inline-size: 14.5rem;
    --root-header-block-size: 3.5rem;
    --root-container-gap: clamp(0.5rem, 3vw, 0.5rem)
}

body {
    overflow-x: hidden
}