html {
    box-sizing: border-box;
    height: 100%;
    overflow-x: hidden;
    background-color: var(--theme-body-color);
    
    /* Prevents the scrollbar from shifting content when overlays are closed and the scrollbar is added back (Both are needed) */
    scrollbar-width: thin;
    scrollbar-gutter: stable;
}

body {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: clip;  /* required for sticky position to work on desktop and mobile */
    font: var(--theme-paragraph-30);
    font-family: var(--theme-font);
    color: var(--theme-body-text-color);
    letter-spacing: var(--theme-paragraph-30-letter-spacing);
    background-color: var(--theme-body-color);

    /*
        Adjust the --theme-container-padding variable to be smaller when viewport is mobile.
        This variable is originally set in variables.css but we need to override it here in
        the body tag.
    */
    @media (max-width: 699px) {
        --theme-container-padding: calc(var(--override-container-padding, 0px) + var(--space-x3));
    }
}

body.has-header-padding {
    padding-top: var(--header-height, 80px);
}

body.is-action-bar-visible {
    padding-bottom: var(--action-bar-height, calc(var(--space) * 15));
}

body.has-scrollbar {
    --theme-scrollbar-offset: var(--theme-scrollbar-width);
}

body a {
    color: inherit;
}

/* Resets */
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
body,
html,
p,
blockquote,
fieldset,
input,
button,
figure {
    padding: 0;
    margin: 0;
}

.keep-html-formatting ul, .keep-html-formatting ol {
    padding: revert;
}

figure img {
    vertical-align: middle;
}

input[type='text'],
input[type='number'],
input[type='email'],
textarea,
select,
input[type='radio'],
input[type='checkbox'] {
    font-family: inherit;
    text-shadow: none;
    appearance: none;
    outline: none;
}

textarea {
    resize: none;
}

/* outline when focused with keyboard */
/* stylelint-disable-next-line no-descending-specificity */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
*:focus-visible {
    border-color: var(--theme-focus-outline-color);
    box-shadow: 0px 0px 0px var(--theme-form-border-width) var(--theme-focus-outline-color);
}

/* Chrome, Safari, Edge, Opera - hide input arrows */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none; /* stylelint-disable-line */
}

/* Firefox - hide input arrows */
input[type="number"] {
    -moz-appearance: textfield; /* stylelint-disable-line */
}

button,
[role="button"] {
    display: inline-block;
    text-decoration: none;
    appearance: none;
    cursor: pointer;
    border: none;
}

fieldset {
    box-sizing: border-box;
    min-inline-size: auto;
    border: none;
}

/* Hiding class, making content visible only to screen readers but not visually */
.visually-hidden:not(:focus, :active) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

div[hidden] {
    display: none;
}

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

/* https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed */
.grecaptcha-badge {
    visibility: hidden;
}

/* text */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--theme-heading-font);
    color: var(--theme-heading-color);
}

.heading-2,
.heading-3,
.heading-4,
.heading-5,
.heading-6 {
    color: var(--theme-heading-color);
}

.heading-1 {
    font: var(--theme-display-10);
    letter-spacing: var(--theme-display-10-letter-spacing);
}

@media (min-width: 700px) {
    .heading-1 {
        font: var(--theme-display-30);
        letter-spacing: var(--theme-display-30-letter-spacing);
    }
}

.heading-2 {
    font: var(--theme-display-10);
    letter-spacing: var(--theme-display-10-letter-spacing);
}

@media (min-width: 700px) {
    .heading-2 {
        font: var(--theme-display-20);
        letter-spacing: var(--theme-display-20-letter-spacing);
    }
}

.heading-3 {
    font: var(--theme-heading-30);
    letter-spacing: var(--theme-heading-30-letter-spacing);
}

@media (min-width: 700px) {
    .heading-3 {
        font: var(--theme-display-10);
        letter-spacing: var(--theme-display-10-letter-spacing);
    }
}

.heading-4 {
    font: var(--theme-heading-20);
    letter-spacing: var(--theme-heading-20-letter-spacing);
}

@media (min-width: 700px) {
    .heading-4 {
        font: var(--theme-heading-30);
        letter-spacing: var(--theme-heading-30-letter-spacing);
    }
}

.heading-5 {
    font: var(--theme-paragraph-30-bold);
    letter-spacing: var(--theme-paragraph-30-letter-spacing);
}

@media (min-width: 700px) {
    .heading-5 {
        font: var(--theme-heading-20);
        letter-spacing: var(--theme-heading-20-letter-spacing);
    }
}

.heading-6 {
    font: var(--theme-paragraph-30-medium);
    letter-spacing: var(--theme-paragraph-30-letter-spacing);
}

@media (min-width: 700px) {
    .heading-6 {
        font: var(--theme-paragraph-30);
    }
}

p {
    font: var(--theme-paragraph-30);
    letter-spacing: var(--theme-paragraph-30-letter-spacing);
}

/* Global Page spacing */

.page {
    padding-top: var(--space-x4);
}

/* global section heading margin */
.heading-with-margin {
    margin-bottom: var(--space-x2);
}

@media (min-width: 700px) {
    .heading-with-margin {
        margin-bottom: var(--space-x4);
    }
}

/* icons */
.material-icon {
    flex-shrink: 0;
    width: var(--theme-icon-20-font-size);
    overflow: hidden;
    font-size: var(--theme-icon-20-font-size);

    /* Hide icons as best as possible while they are loading */
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

/*
* .fonts--loaded is added in global.js once the fonts load.
* This allows us to display icons once they are available.
*/
.fonts--loaded .material-icon {
    opacity: 1;
}

.material-symbols-filled {
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

/* container */
.container {
    box-sizing: border-box;
    max-width: var(--theme-max-container);
    padding-right: var(--theme-container-padding);
    padding-left: var(--theme-container-padding);
    margin-right: auto;
    margin-left: auto;
}

@media (max-width: 700px) {
    .container--fullwidth {
        margin-right: calc(var(--theme-container-padding) * -1);
        margin-left: calc(var(--theme-container-padding) * -1);
    }
}

@media (min-width: 700px) {
    .container--fullwidth {
        margin-right: auto;
        margin-left: auto;
    }
}

.container--fullwidth-padding {
    padding-right: var(--theme-container-padding);
    padding-left: var(--theme-container-padding);
}

@media (min-width: 700px) {
    .container--fullwidth-padding {
        padding-right: 0;
        padding-left: 0;
    }
}

.custom-scrollbar {
    -webkit-overflow-scrolling: touch;
    overflow: hidden scroll; /* always show scrollbar for overflow-y to avoid width reflow */
    visibility: hidden;
}

/* Touch device */
@media (pointer: coarse) {
    .custom-scrollbar {
        visibility: visible;
    }
}

.custom-scrollbar-inner {
    visibility: visible;
}

/* Show scrollbar on hover */
.custom-scrollbar:hover {
    animation: 0s linear 0.1s forwards delayed-visible;
}

@keyframes delayed-visible {
    to {
        visibility: visible;
    }
}

body::-webkit-scrollbar,
.custom-scrollbar::-webkit-scrollbar {
    width: var(--theme-scrollbar-width);
    background: var(--theme-scrollbar-color);
}

body::-webkit-scrollbar-thumb,
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--theme-scrollbar-thumb-color);
    border-radius: var(--theme-scrollbar-width);
}

body[dialog-size="large"].is-mobile.custom-scrollbar::-webkit-scrollbar {
    background: var(--theme-scrollbar-color);
}

body[dialog-variant="halfsheet"] main {
    filter: blur(3px);
}

.main-content {
    position: relative;
    z-index: var(--theme-z-index-main);
    overflow-x: clip;
}

/* page loader */
.page-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
}

/* list styles */
.bulleted-list {
    margin-left: var(--space-x4);
    list-style: none;
}

.bulleted-list li {
    position: relative;
    font-weight: var(--theme-font-weight-light);
}

.bulleted-list li::before {
    position: absolute;
    top: calc(var(--theme-font-size-base) / 3);
    left: 0;
    width: 6px;
    height: 6px;
    margin-left: calc(var(--space-x3) * -1);
    content: "";
    background-color: var(--theme-text-10);
    border-radius: 50%;
}

.site-logo {
    font: var(--theme-display-10);
    color: var(--theme-heading-color);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: var(--theme-display-10-letter-spacing);
}

/* action bar */
.action-bar__container {
    display: flex;
    gap: var(--space-x2);
    width: 100%;
    padding: var(--space-x3) var(--space-x4);
    background: var(--theme-surface-20);
    border-top: 1px solid var(--theme-divider-20);
}

.action-bar__button {
    width: 100%;
}

/* Alternative to JS viewport hiding (isDesktop()) so that content doesn't flash in/out */

/* Desktop ONLY */
@media (min-width: 992px) {
    .desktop--hidden {
        display: none !important;
    }
}

/* Tablet ONLY */
@media (min-width: 700px) and (max-width: 991px) {
    .tablet--hidden {
        display: none !important;
    }
}

/* Mobile ONLY */
@media (max-width: 699px) {
    .mobile--hidden {
        display: none !important;
    }
}

.material-icon-svg > svg {
    width: var(--material-icon-width, 24px);
    height: var(--material-icon-height, 24px);
    fill: currentcolor;
}

.icon--sm svg {
    width: 16px;
    height: 16px;
}

.icon--emphasis svg {
    fill: var(--theme-emphasis-fill);
}

.icon--success svg {
    fill: var(--theme-success-fill);
}

.icon--warning svg {
    fill: var(--theme-warning-fill);
}

.scrollbar--hidden {
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
}

.scrollbar--hidden::-webkit-scrollbar {
    display: none;
}

.is-clickable {
    cursor: pointer;
}

.ui-image-wrapper {
    all: inherit;
    border-radius: var(--theme-border-radius-image);
}

.ui-image {
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -webkit-user-select: none; /* Safari */
    user-select: none; /* Prevent selecting image */
}

.ui-action-bar-container {
    position: fixed;
    bottom: 0;
    z-index: var(--theme-z-index-action-bar);
    display: flex;
    width: 100%;
}