:root {
    --font-family-sans-serif: "Roboto", Helvetica, Arial, sans-serif;

    --color-text-alt: #fff;
    --color-text-primary: #3B3E3F;
    --color-text-secondary: #737373;

    --font-size-small: 12px;
    --font-size-medium: 14px;
    --font-size-large: 20px;

    --site-max-width: 1200px;

    /* DXP Style Overrides and Defaults */
    --dxp-g-root: #fff;
    --dxp-g-brand-1: #0067A0;
    --dxp-s-text-heading-extra-large-font-family: var(--font-family-sans-serif);
    --dxp-s-text-heading-large-font-family: var(--font-family-sans-serif);
    --dxp-s-text-heading-medium-font-family: var(--font-family-sans-serif);
    --dxp-s-text-heading-small-font-family: var(--font-family-sans-serif);
    --dxp-s-body-font-family: var(--font-family-sans-serif);
    --dxp-s-body-small-font-family: var(--font-family-sans-serif);
    --dxp-s-button-font-family: var(--font-family-sans-serif);
    /* DXP Style Overrides and Defaults */
}

/* Use this class on the topmost component placed on the page to restrict the max-width and keep all contents centered on the page */
.content {
    max-width: var(--site-max-width, 1200px);
    margin: 0 auto;
}

/* SLDS Component Overrides */
c-sl-status-bar {
    --slds-g-color-brand-base-50: #00A03A;
    --dxp-c-progress-bar-color-background: #00A03A;
    --dxp-c-progress-icon-color: #00A03A;
    --slds-g-color-brand-base-50: transparent;
}

c-sl-status-bar .slds-progress__item {
    width: 8px;
}

c-sl-status-bar button.slds-button.slds-progress__marker.slds-button_icon.slds-progress__marker_icon {
    color: transparent;
}

c-sl-status-bar button.slds-button.slds-progress__marker {
    border-color: white;
    background-color: white;
    cursor: default;
}

c-sl-status-bar button.slds-button.slds-progress__marker:active,
c-sl-status-bar button.slds-button.slds-progress__marker:focus {
    box-shadow: none;
}
/* SLDS Component Overrides */

/* Media queries for responsive design */

/* Medium */
@media (min-width: 768px) {
    :root {
        --font-size-small: 14px;
        --font-size-medium: 16px;
        --font-size-large: 24px;
    }
}

/* Large */
@media (min-width: 1024px) {

}
/* Media queries for responsive design /*