html,
body {
    height: 100%;
}

html {
    background: white;

    .rich-content-text * {
        max-width: 100% !important;
        min-width: auto !important;
        overflow-wrap: break-word;
    }

    .border-container {
        border: 1px solid var(--ds-color-gray-200);
        border-radius: var(--ds-border-radius);
    }

    /* Text Styles */

    .text-bold {
        font-weight: var(--ds-font-weight-bold);
    }

    .text-semibold {
        font-weight: var(--ds-font-weight-semibold);
        --dxp-s-text-heading-small-font-weight: var(--ds-font-weight-semibold);
        --dxp-s-text-heading-medium-font-weight: var(--ds-font-weight-semibold);
        --dxp-s-text-heading-large-font-weight: var(--ds-font-weight-semibold);
    }

    .text-uppercase {
        text-transform: uppercase;
    }

    .text-link {
        cursor: pointer;
        color: var(--dxp-c-link-text-color, var(--dxp-s-link-text-color, var(--dxp-g-brand)));
        background-color: var(--dxp-c-link-color-background);
        text-decoration: var(--dxp-c-link-text-decoration, var(--dxp-s-link-text-decoration, underline));
        text-shadow: var(--dxp-c-link-text-shadow);
        transition: var(--dxp-c-link-transition);
    }

    .text-link:hover {
        color: var(--dxp-c-link-text-color-hover, var(--dxp-s-link-text-color-hover, var(--dxp-g-brand-1)));
        background-color: var(--dxp-c-link-color-background-hover);
        text-decoration: var(--dxp-s-link-text-decoration-hover);
        text-shadow: var(--dxp-c-link-text-shadow-hover);
    }

    .columns-with-divider {
        dxp_layout-column-spacer {
            position: relative;
        }

        dxp_layout-column-spacer:after {
            content: "";
            position: absolute;
            width: 1px;
            height: 100%;
            background-color: var(--ds-divider-color);
            left: 50%;
        }
    }

    @media (max-width: 1024px) {
        .columns-with-divider {
            dxp_layout-column-spacer:after {
                width: 100%;
                height: 1px;
                top: 50%;
                left: 0;
            }
        }
    }

    h1 {
        font-size: 40px;
    }

    @media (max-width: 767px) {
        h1 {
            font-size: 22px;
        }
    }

    .tag-search-container {
        display: grid;
        grid-template-columns: 1fr;
    }

    .tag-search-container__title {
        font-size: 0.875rem;
        color: var(--ds-text-secondary-color);
    }

    .tag-search-container__tag-name {
        font-size: 2.5rem;
    }

    .contact-header-container:has(c-help-center-information-bar .container__none) {
        display: none !important;
    }
}

body {
    margin: 0;
}

:root {
    /* Design System Colors and Styles */
    --ds-color-white: #fff;
    --ds-color-black: #000;
    --ds-color-gray-50: #f9f9f9;
    --ds-color-gray-75: #f1f1f1;
    --ds-color-gray-100: #e9e9e9;
    --ds-color-gray-200: #e0e0e0;
    --ds-color-gray-300: #bdbdbd;
    --ds-color-gray-400: #9e9e9e;
    --ds-color-gray-500: #757575;
    --ds-color-gray-600: #4d4d4d;
    --ds-color-gray-700: #424242;
    --ds-color-gray-800: #222;
    --ds-color-gray-900: #101010;
    --ds-color-gray: var(--ds-color-gray-500);
    --ds-color-lightblue-700: #0287d3;
    --ds-color-blue-50: #f1f3f6;
    --ds-color-blue-200: #dbe2ec;
    --ds-color-blue-400: #8faedc;
    --ds-color-blue-500: #0053cf;
    --ds-color-blue-600: #1a4a8f;
    --ds-color-blue-900: #072652;
    --ds-color-cyan: #00bcff;
    --ds-color-yellow-500: #ffd602;
    --ds-color-primary: var(--ds-color-blue-900);
    --ds-color-on-primary: var(--ds-color-white);
    --ds-color-weak-primary: rgba(7, 38, 82, 0.2);
    --ds-color-secondary: var(--ds-color-blue-600);
    --ds-color-on-secondary: var(--ds-color-white);
    --ds-color-focused: #5690f7;
    --ds-color-navy-400: #08388e;
    --ds-color-navy-500: #00184b;
    --ds-color-navy-600: #04193f;
    --ds-color-navy-900: #00184b;
    --ds-color-navy: #042663;
    --ds-outline-color: var(--ds-color-gray-200);
    --ds-outline-inverted-color: var(--ds-color-gray-800);
    --ds-overlay-color: rgb(0 0 0 / 80%);
    --ds-divider-color: var(--ds-color-gray-300);
    --ds-body-background: var(--ds-color-white);
    --ds-text-color: var(--ds-text-primary-color);
    --ds-text-primary-color: var(--ds-color-gray-800);
    --ds-text-secondary-color: var(--ds-color-gray-600);
    --ds-text-tertiary-color: var(--ds-color-gray-500);
    --ds-text-quaternary-color: var(--ds-color-gray-400);
    --ds-link-color: var(--ds-color-blue-500);
    --ds-box-shadow: 0 2px 4px 0 rgb(0 0 0 / 15%);
    --ds-surface-main-color: var(--ds-color-gray-50);
    --ds-surface-main-alt-color: var(--ds-color-gray-75);
    --ds-surface-container-color: var(--ds-color-white);
    --ds-surface-accent-color: var(--ds-color-blue-50);
    --ds-surface-accent-alt-color: var(--ds-color-blue-200);
    --ds-surface-contrast-color: var(--ds-color-blue-50);
    --ds-error-color-400: #fa3636;
    --ds-error-color-500: #ff0000;
    --ds-error-color-600: #cc0000;
    --ds-error-color: var(--ds-error-color-600);
    --ds-warning-color-300: #ffd602;
    --ds-warning-color-500: #ffae36;
    --ds-warning-color-600: #ff8800;
    --ds-warning-color: var(--ds-warning-color-600);
    --ds-success-color-500: #02c702;
    --ds-success-color-600: #007e33;
    --ds-success-color: var(--ds-success-color-600);
    --ds-info-color: #0099cc;
    --ds-border: solid 1px var(--ds-color-gray-100);
    --ds-color-amber-400: #ffb55c;
    --ds-color-sky-400: #84c2f5;
    --ds-color-green-500: #1bb456;
    --ds-color-red-400: #ff6666;
    --ds-color-teal-500: #00b3b3;

    /* Font Styles */
    --ds-font-family-fallback: Arial, sans-serif;
    --ds-font-family-primary: Inter, var(--ds-font-family-fallback);
    --ds-font-family-secondary: monospace;
    --ds-font-weight-regular: 400;
    --ds-font-weight-semibold: 600;
    --ds-font-weight-bold: 700;
    --ds-font-size-level-1: 2.5rem / 140%;
    --ds-font-size-level-2: 2.25rem / 130%;
    --ds-font-size-level-3: 2rem / 140%;
    --ds-font-size-level-4: 1.875rem / 140%;
    --ds-font-size-level-5: 1.75rem / 140%;
    --ds-font-size-level-6: 1.625rem / 140%;
    --ds-font-size-level-7: 1.5rem / 130%;
    --ds-font-size-level-8: 1.375rem / 130%;
    --ds-font-size-level-9: 1.25rem / 140%;
    --ds-font-size-level-10: 1.125rem / 140%;
    --ds-font-size-level-11: 1rem / 130%;
    --ds-font-size-level-12: 0.875rem / 140%;
    --ds-font-size-level-13: 0.75rem / 140%;
    --ds-font-size-level-14: 0.625rem / 130%;
    --ds-font-size-level-15: 0.5rem / 140%;
    --ds-font-size-level-9-2: 1.25rem / 150%;
    --ds-font-size-level-10-2: 1.125rem / 150%;
    --ds-font-size-level-11-2: 1rem / 150%;
    --ds-font-size-level-regular: var(--ds-font-size-level-11);
    --ds-font-root-size: 16px;
    --ds-border-radius: 4px;
    --ds-radius-l: 4px;
    --ds-radius-m: 2px;

    --dxp-s-text-heading-large-font-size: 40px;
    --dxp-s-text-heading-medium-font-size: 24px;

    --slds-c-button-spacing-block-start: 10px;
    --slds-c-button-spacing-block-end: 10px;
    --slds-c-button-brand-spacing-inline-end: 24px;
    --slds-c-button-brand-spacing-inline-start: 24px;
    --dxp-s-button-line-height: 140%;
    --slds-c-button-spacing-inline-end: 24px;
    --slds-c-button-spacing-inline-start: 24px;
    --slds-c-button-outline-brand-spacing-inline-end: 24px;
    --slds-c-button-outline-brand-spacing-inline-start: 24px;
    --sds-c-button-neutral-color-background: var(--ds-color-white);

    --dxp-s-form-element-width-border: 0.5px;
    --slds-c-button-outline-brand-spacing-inlinestart: 0.5rem;
    --slds-c-button-outline-brand-spacing-inlineend: 0.5rem;
    --dxp-s-component-wrapper-spacer-size-mobile: 0;
    --dxp-s-component-wrapper-spacer-size: 0;

    --dxp-s-text-heading-extra-large-font-size: 40px;
    --dxp-s-text-heading-extra-large-font-weight: var(--ds-font-weight-semibold);

    @media (max-width: 767px) {
        --dxp-s-text-heading-large-font-size: 24px;
        --dxp-s-text-heading-medium-font-size: 20px;
        --dxp-s-text-heading-extra-large-font-size: 30px;

        .tag-search-container__tag-name {
            font-size: 1.75rem;
        }
    }
}