:root {
    --x-color-danger-100: #ffebeb;
    --x-color-danger-200: #ffc7c7;
    --x-color-danger-300: #ffa3a3;
    --x-color-danger-400: #ff7f7f;
    --x-color-danger-500: #ff5b5b;
    --x-color-danger-600: #ff3737;
    --x-color-danger-700: #d82a2a;
    --x-color-danger-800: #b21e1e;
    --x-color-danger-900: #8c1212;
    --x-color-danger: var(--x-color-danger-600);
    --x-color-danger-hover: var(--x-color-danger-700);
    --x-color-neutral-0: #ffffff;
    --x-color-neutral-100: #f8f8fa;
    --x-color-neutral-200: #e8e8eb;
    --x-color-neutral-300: #d6d6d9;
    --x-color-neutral-400: #d4d4d7;
    --x-color-neutral-500: #909093;
    --x-color-neutral-600: #757578;
    --x-color-neutral-700: #50505e;
    --x-color-neutral-800: #3a3a3d;
    --x-color-neutral-900: #1c1c1f;
    --x-color-neutral: var(--x-color-neutral-300);
    --x-color-primary-100: #e8f0fe;
    --x-color-primary-200: #c5dafd;
    --x-color-primary-300: #a2c5fc;
    --x-color-primary-400: #7faffb;
    --x-color-primary-500: #0c47eb;
    --x-color-primary-600: #0a3fcc;
    --x-color-primary-700: #082f99;
    --x-color-primary-800: #051f66;
    --x-color-primary-900: #031033;
    --x-color-primary: var(--x-color-primary-500);
    --x-color-primary-hover: var(--x-color-primary-600);
    --x-color-success-100: #e8f9e8;
    --x-color-success-200: #c5f0c5;
    --x-color-success-300: #a2e8a2;
    --x-color-success-400: #80e080;
    --x-color-success-500: #5dd85d;
    --x-color-success-600: #3ad03a;
    --x-color-success-700: #2eb32e;
    --x-color-success-800: #228622;
    --x-color-success-900: #165916;
    --x-color-success: var(--x-color-success-700);
    --x-color-warning-100: #fff9c4;
    --x-color-warning-200: #fff59d;
    --x-color-warning-300: #fff176;
    --x-color-warning-400: #ffee58;
    --x-color-warning-500: #ffeb3b;
    --x-color-warning-600: #fdd835;
    --x-color-warning-700: #fbc02d;
    --x-color-warning-800: #f9a825;
    --x-color-warning-900: #f57f17;
    --x-color-warning: var(--x-color-warning-700);

    --x-font-family: system-ui, sans-serif;
    --x-font-size-xs: 0.75rem;
    --x-font-size-sm: 0.875rem;
    --x-font-size-md: 1rem;
    @media (max-width: 799px) {
        --x-font-size-lg: 1rem;
        --x-font-size-xl: 1.5rem;
        --x-font-size-xxl: 2rem;
    }
    @media (min-width: 800px) {
        --x-font-size-lg: 1.25rem;
        --x-font-size-xl: 2rem;
        --x-font-size-xxl: 3rem;
    }
    --x-color-body-text: var(--x-color-primary-900);

    --x-color-border: var(--x-color-neutral-200);
    --x-color-border-focus: var(--x-color-primary-hover);
    --x-color-input-placeholder: var(--x-color-neutral-500);

    --x-border-radius: 0.25rem;

    --x-focus-outline: 2px solid var(--x-color-primary-hover);
    --x-focus-outline-offset: -2px;

    --x-color-shadow: rgba(0, 0, 0, 0.075);
    --x-color-shadow-inset: rgba(0, 0, 0, 0.05);
    --x-box-shadow-inset: inset 0 0 4px var(--x-color-shadow-inset);

    --x-spacing-none: 0;
    --x-spacing-xxs: 0.25rem;
    --x-spacing-xs: 0.5rem;
    --x-spacing-sm: 0.75rem;
    --x-spacing-md: 1rem;
    --x-spacing-lg: 1.25rem;
    @media (max-width: 799px) {
        --x-spacing-xl: 1.5rem;
        --x-spacing-xxl: 2.5rem;
    }
    @media (min-width: 800px) {
        --x-spacing-xl: 2.75rem;
        --x-spacing-xxl: 4rem;
    }

    --x-width-xxs: 120px;
    --x-width-xs: 240px;
    --x-width-sm: 320px;
    --x-width-md: 480px;
    --x-width-lg: 640px;
    --x-width-xl: 820px;
    --x-width-xxl: 960px;
    --x-content-max-width: 1160px;
}

* {
    overscroll-behavior: none;
    box-sizing: border-box;
    line-height: 1.25;
}

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

body {
    font-family: var(--x-font-family);
    color: var(--x-color-body-text);
}

a {
    color: var(--x-color-primary);

    &:hover,
    &:focus-visible {
        color: var(--x-color-primary-hover);
    }
}

h1 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;

    &:not(:last-child) {
        margin-bottom: 2rem;
    }

    @media (max-width: 799px) {
        font-size: 1.5rem;

        &:not(:last-child) {
            margin-bottom: 1rem;
        }
    }
}

h2 {
    font-size: 1.5rem;

    @media (max-width: 799px) {
        font-size: 1.25rem;
    }
}

h3 {
    font-size: 1.35rem;

    @media (max-width: 799px) {
        font-size: 1rem;
    }
}

h4 {
    font-size: 1rem;
    font-weight: 400;
    text-decoration: underline;

    @media (max-width: 799px) {
        font-weight: normal;
    }
}

h2,
h3,
h4,
h5 {
    margin: 0;

    &:not(:first-child) {
        margin-top: 2rem;
    }

    &:not(:last-child) {
        margin-bottom: 1.25em;
    }
}

h1,
h2,
h3,
h4,
h5,
p {
    &.no-margin {
        margin: 0;
    }
}

p {
    margin: 0;
    line-height: 1.5;

    &:not(:first-child) {
        margin-top: 1.25em;
    }

    &:not(:last-child) {
        margin-bottom: 1.25em;
    }

    &.sm {
        font-size: var(--x-font-size-sm);
    }

    &.md {
        font-size: var(--x-font-size-md);
    }

    &.lg {
        font-size: var(--x-font-size-lg);
    }

    &.grey {
        color: var(--x-color-neutral-600);
    }
}

ul,
ol {
    margin-bottom: 1.25em;
    padding-left: 2.5em;
}

ul {
    list-style-type: square;
}

li {
    line-height: 1.5;

    &:not(:first-child) {
        margin-top: 6px;
    }

    &:not(:last-child) {
        margin-bottom: 6px;
    }
}

body {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100vw;
}

#container {
    flex-grow: 1;
    min-height: 0;
    display: flex;
}

#container-inner {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: none;
}

main {
    min-height: 100%;
}

#menu x-card-header {
    border-bottom: 0;
}

#menu,
#menu-toggle {
    @media (min-width: 800px) {
        display: none;
    }
}

#logo-container {
    width: 100%;
}

#logo {
    display: inline-block;
    text-decoration: none;
    position: fixed;
    z-index: 2000;
}

#logo-image {
    height: 1.25rem;
    width: auto;
}

#create-auction {
    @media (max-width: 799px) {
        display: none;
    }
}

#breadcrumb {
    padding: var(--x-spacing-xl) var(--x-spacing-xl) 0 var(--x-spacing-xl);

    @media (min-width: 800px) {
        display: none;
    }
}

.stretch {
    flex-grow: 1;
}

x-footer-brand {
    flex-grow: 1.5;
}