/* ------------------------------------------------------- */
/* --- THIS FILE CONTAINS GLOBAL STYLES FOR WEB2PORTAL --- */
/* --- File is used by multiple Experience Sites --------- */
/* ------------------------------------------------------- */

/* MAIN LAYOUT */
html {
    overflow-y: scroll; /* enables scrollbar by default on the page to prevent layout shift when modal is open */
    width: 100%;
}
html,
body {
    height: 100%;
}
body {
    margin: 0;
}

/* on mobile .scrollIntoView(...) should account roughly for the mobile header height */
@media (max-width: 1024px) {
    * {
        scroll-margin-top: 96px;
    }
}

/* Disable UI effects (underlines, ripple) on lightning-button */
[kx-scope='button'][kx-type='underline']:after,
[kx-scope^='button-'][kx-type='ripple']:after,
[kx-scope='button-brand']:hover:before {
    content: none;
}

/* HEADER & FOOTER LOGO OVERRIDES TO PREVENT FLICKERING */
dxp_content_layout-site-logo .dxp-content-layout-site-logo[role='img'] {
    height: auto; /* For some reason OOTB component has set height and it is only changed after the image is loaded */
    max-height: none;
}

/* PREVENTS SLOT CONTENTS FROM MESSING WITH GRID AND FLEX */
webruntime-slot-container {
    display: contents;
}

dialog {
    color: inherit;
}

/* FONTS */
:root {
    --web2p-font-family: var(--dxp-s-body-font-family), Helvetica, sans-serif;
    --dxp-g-root-font-family: var(--web2p-font-family);
    --dxp-g-heading-font-family: var(--web2p-font-family);
    --dxp-s-button-font-family: var(--web2p-font-family);
}

/* GLOBAL CSS VARIABLES */
:root {
    --web2p-font-weight-bold: 600;

    /* Brand colors might be different for all web2p sites. */
    /* More more brand related colors refer to the variables defined below. */
    --web2p-brand-color-80: var(--web2p-override-brand-color-80, #1a247d);
    --web2p-brand-color: var(--dxp-g-brand);
    --web2p-brand-color-20: var(--web2p-override-brand-color-20, #b3e5fc);
    --web2p-brand-color-15: var(--web2p-override-brand-color-15, #dcf0fa);
    --web2p-brand-color-10: var(--web2p-override-brand-color-10, #e0f5ff);
    --web2p-brand-color-05: var(--web2p-override-brand-color-05, #effaff);

    /* TODO: remove these properties in the future as these have been renamed - temporarily left them here for the transition period */
    --web2p-dark-brand-color: var(--web2p-override-brand-color-80, #1a247d);
    --web2p-background-light-brand-color: var(--web2p-override-brand-color-20, #b3e5fc);
    --web2p-background-very-light-brand-color: var(--web2p-override-brand-color-10, #e0f5ff);

    /* Even though many of the brand colors are blue, we might need some blue colors for components that shouldn't have different branding per site. */
    --web2p-color-blue-30: #7dd6ff;

    --web2p-color-green-10: #e6f4e0;
    --web2p-color-green-60: #5eaf1e;

    --web2p-color-grey-02: #f9f9f9;
    --web2p-color-grey-04: #f8f8f8;
    --web2p-color-grey-10: #eeeeef;
    --web2p-color-grey-12: #ededed;
    --web2p-color-grey-40: #989a9d;
    --web2p-color-grey-50: #76787c;
    --web2p-color-grey-60: #54565b;
    --web2p-color-grey-80: #333333;

    --web2p-color-orange-50: #ffa500;

    --web2p-color-pink-10: #f8e7e6;

    --web2p-color-red-60: #b20600;

    --web2p-border-radius-normal: 8px;
    --web2p-border-color: #ddddde;
    --web2p-border-color-dark: #bbbbbd;

    --web2p-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    --web2p-box-shadow-subtle: 0px 8px 16px 0px rgba(0, 0, 0, 0.08);

    --web2p-bg1-color: var(--web2p-override-bg1-color, #00bfa6);
    --web2p-bg2-color: var(--web2p-override-bg2-color, #bd2d24);
    --web2p-bg3-color: var(--web2p-override-bg3-color, #ff6e00);
    --web2p-bg4-color: var(--web2p-override-bg4-color, #00c2df);
    --web2p-bg5-color: var(--web2p-override-bg5-color, #e3b100);
    --web2p-bg6-color: var(--web2p-override-bg6-color, #8f24ab);
    --web2p-bg7-color: var(--web2p-override-bg7-color, #c41261);
    --web2p-bg8-color: var(--web2p-override-bg8-color, #9ace0b);
    --web2p-bg1-background-color: var(--web2p-override-bg1-background-color, #e0f2f2);
    --web2p-bg2-background-color: var(--web2p-override-bg2-background-color, #f8eae9);
    --web2p-bg3-background-color: var(--web2p-override-bg3-background-color, #fff1e6);
    --web2p-bg4-background-color: var(--web2p-override-bg4-background-color, #ccf3f9);
    --web2p-bg5-background-color: var(--web2p-override-bg5-background-color, #fff9d9);
    --web2p-bg6-background-color: var(--web2p-override-bg6-background-color, #f2e5f5);
    --web2p-bg7-background-color: var(--web2p-override-bg7-background-color, #f9e7ef);
    --web2p-bg8-background-color: var(--web2p-override-bg8-background-color, #f3fcda);
    --web2p-bg1-background-color-dark: var(--web2p-override-bg1-background-color-dark, rgba(0, 191, 166, 0.25));
    --web2p-bg2-background-color-dark: var(--web2p-override-bg2-background-color-dark, rgba(189, 45, 36, 0.25));
    --web2p-bg3-background-color-dark: var(--web2p-override-bg3-background-color-dark, rgba(255, 110, 0, 0.25));
    --web2p-bg4-background-color-dark: var(--web2p-override-bg4-background-color-dark, rgba(0, 194, 223, 0.25));
    --web2p-bg5-background-color-dark: var(--web2p-override-bg5-background-color-dark, rgba(255, 214, 0, 0.25));
    --web2p-bg6-background-color-dark: var(--web2p-override-bg6-background-color-dark, rgba(143, 36, 171, 0.25));
    --web2p-bg7-background-color-dark: var(--web2p-override-bg7-background-color-dark, rgba(196, 18, 97, 0.25));
    --web2p-bg8-background-color-dark: var(--web2p-override-bg8-background-color-dark, rgba(173, 235, 0, 0.25));
}
:root,
::backdrop {
    --web2p-overlay-color: rgba(51, 51, 51, 0.64);
    --web2p-overlay-light-color: rgba(51, 51, 51, 0.32);
}

/* CONTAINERS */
/* web2p prefix added to avoid conflict with framework prebuilt classes */
/* using variables to let other components (like modal) refer to them */
:root {
    --web2p-content-container-horizontal-padding: var(--dxp-g-spacing-xlarge);
    --web2p-narrow-content-width: 1232px;
    --web2p-content-width: 1544px;
    --web2p-wide-content-width: 1920px;
}
.web2p-content-container,
.web2p-content-container_wide,
.web2p-content-container_narrow {
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--web2p-content-container-horizontal-padding);
    padding-right: var(--web2p-content-container-horizontal-padding);
}
.web2p-content-container_narrow {
    max-width: var(--web2p-narrow-content-container-max-width, 100%);
}
.web2p-content-container {
    max-width: var(--web2p-content-container-max-width, 100%);
}
.web2p-content-container_wide {
    max-width: var(--web2p-wide-content-container-max-width, 100%);
}
@media (max-width: 1279.98px) {
    :root {
        --web2p-content-container-horizontal-padding: var(--dxp-g-spacing-large);
    }
}
@media (max-width: 1024.98px) {
    :root {
        --web2p-content-container-horizontal-padding: var(--dxp-g-spacing-medium);
    }
}
@media (min-width: 1280px) {
    :root {
        --web2p-narrow-content-container-max-width: min(
            65%,
            calc(var(--web2p-narrow-content-width) + 2 * var(--web2p-content-container-horizontal-padding))
        );
        --web2p-content-container-max-width: min(
            90%,
            calc(var(--web2p-content-width) + 2 * var(--web2p-content-container-horizontal-padding))
        );
        --web2p-wide-content-container-max-width: calc(
            var(--web2p-wide-content-width) + 2 * var(--web2p-content-container-horizontal-padding)
        );
    }
}

/* UTILS */
.margin-0 {
    margin: 0 !important;
}
.rotate-180 {
    transform: rotate(180deg);
}

/* TEXT UTILS */
.text-color-white a,
.text-color-white {
    color: #fff !important;
    --sds-c-button-brand-text-color: #fff !important;
}
.text-color-brand {
    color: var(--web2p-brand-color) !important;
}
.text-color-dark-brand {
    color: var(--web2p-brand-color-80);
}
.text-color-dark-grey {
    color: var(--web2p-color-grey-60);
}
.text-color-grey {
    color: var(--web2p-color-grey-50);
}
.text-color-red {
    color: var(--web2p-color-red-60);
}
/* to be deprecated and replaced by text-color-dark-brand */
.text-color-dark-blue {
    color: var(--web2p-brand-color-80);
}
.text-bold {
    font-weight: var(--web2p-font-weight-bold);
}
a.link-grey {
    --dxp-c-link-text-color: var(--web2p-color-grey-60);
}
a.link-black {
    --dxp-c-link-text-color: var(--web2p-color-grey-80);
}
a.link-grey:hover,
a.link-black:hover {
    --dxp-s-link-text-color-hover: var(--web2p-brand-color);
}
a.link-no-underline {
    --dxp-c-link-text-decoration: none;
}
a.link-no-hover-underline {
    --dxp-s-link-text-decoration-hover: none;
}
a.link-no-default-styles {
    --dxp-c-link-text-color: none;
    --dxp-c-link-text-color-hover: none;
    --dxp-c-link-text-decoration: none;
    --dxp-s-link-text-decoration-hover: none;
    --dxp-c-link-color-background: none;
    --dxp-c-link-color-background-hover: none;
    --dxp-c-link-text-shadow: none;
    --dxp-c-link-text-shadow-hover: none;
    --dxp-c-link-transition: none;
}
.text-xs {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.text-2xs {
    font-size: 0.75rem;
    line-height: 1.125rem;
}
.text-sm {
    font-size: 1rem;
    line-height: 1.25rem;
}
.text-md {
    font-size: 1.125rem;
    line-height: 1.4625rem;
}
.text-lg {
    font-size: 1.25rem;
    line-height: 1.625rem;
}
.text-xl {
    font-size: 1.5rem;
    line-height: 1.95rem;
}
.text-2xl {
    font-size: 2rem;
    line-height: 2.6rem;
}
.text-3xl {
    font-size: 2.5rem;
    line-height: 3.25rem;
}
.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}
@media only screen and (max-width: 1024px) {
    .text-2xl {
        font-size: 1.5rem;
        line-height: 1.95rem;
    }
    .text-3xl {
        font-size: 2rem;
        line-height: 2.6rem;
    }
    .text-4xl {
        font-size: 2.5rem;
        line-height: 3.25rem;
    }
}
/* LOB COLORS */
.BG1-text-color {
    color: var(--web2p-bg1-color);
}
.BG2-text-color {
    color: var(--web2p-bg2-color);
}
.BG3-text-color {
    color: var(--web2p-bg3-color);
}
.BG4-text-color {
    color: var(--web2p-bg4-color);
}
.BG5-text-color {
    color: var(--web2p-bg5-color);
}
.BG6-text-color {
    color: var(--web2p-bg6-color);
}
.BG7-text-color {
    color: var(--web2p-bg7-color);
}
.BG8-text-color {
    color: var(--web2p-bg8-color);
}

/* LINK UTILS */
.link-with-icon {
    display: inline-flex;
    align-items: center;
}
.link-with-icon lightning-icon {
    margin-left: var(--dxp-g-spacing-xxsmall);
}
.link-with-icon .slds-icon {
    --slds-c-icon-color-foreground: var(--web2p-brand-color);
}
.link-underlined {
    text-decoration: underline;
}

/* GRID/FLEXBOX UTILS */
.grid-gap-3xs {
    gap: var(--dxp-g-spacing-xxxsmall);
}
.grid-gap-2xs {
    gap: var(--dxp-g-spacing-xxsmall);
}
.grid-gap-xs {
    gap: var(--dxp-g-spacing-xsmall);
}
.grid-gap-sm {
    gap: var(--dxp-g-spacing-small);
}
.grid-gap-md {
    gap: var(--dxp-g-spacing-medium);
}
.grid-gap-lg {
    gap: var(--dxp-g-spacing-large);
}

/* SPECIFIC CONTENT UTILS */
.article {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 500;
}
.article h2 {
    color: var(--web2p-brand-color-80);
    font-size: 1.5rem;
    line-height: 2rem;
    padding: 0.75rem 0 !important;
    font-weight: var(--web2p-font-weight-bold);
}
.article h3 {
    color: var(--web2p-brand-color-80);
    font-size: 1.25rem;
    line-height: 2rem;
    padding: 0.75rem 0 !important;
    font-weight: var(--web2p-font-weight-bold);
}
.article h4,
.article h5,
.article h6 {
    color: var(--web2p-brand-color-80);
    font-size: 1.125rem;
    font-weight: var(--web2p-font-weight-bold);
}
.article.subtitle p {
    font-size: 1.5rem;
}
lightning-formatted-rich-text.article table {
    width: unset !important;
    display: block;
    overflow: auto;
}
.legal h2 {
    font-size: 1.125rem;
    font-weight: var(--web2p-font-weight-bold);
    color: #000;
    margin: 0 0 0.2rem !important;
}
.legal ul {
    padding: 0 !important;
}

.column__text h2 {
    font-size: 2rem;
    color: var(--web2p-brand-color-80);
    font-weight: var(--web2p-font-weight-bold);
    line-height: 1.3;
    margin: 0 0 1rem;
}

.column__text {
    color: var(--web2p-color-grey-80);
    font-size: 1rem;
    margin: 0 0 1.2rem;
}

.whitespace-unset .cb-outputRichText-container.ql-editor {
    white-space: unset;
}

@media (max-width: 767px) {
    .article {
        font-size: 1rem;
    }
    .article.subtitle p {
        font-size: 1.3rem;
    }
    .column__text h2 {
        font-size: 1.5rem;
    }
}

/* SLDS OVERRIDES - ICONS */
:root {
    /* use this property to change the size of the icons to a specific value if available sizes are not enough (works with default sized lightning-icon) */
    --web2p-slds-icon-size: 1.5rem;
}
.slds-icon:not(.slds-icon_xx-small):not(.slds-icon_x-small):not(.slds-icon_small):not(.slds-icon_large) {
    width: var(--web2p-slds-icon-size);
    height: var(--web2p-slds-icon-size);
}
.slds-icon_small {
    width: 1.25rem;
    height: 1.25rem;
}
lightning-primitive-icon {
    display: var(--web2p-lightning-primitive-icon-display, inline);
}
.slds-button {
    --web2p-lightning-primitive-icon-display: flex;
}
.slds-icon-text-error {
    --slds-c-icon-color-foreground: var(--web2p-color-red-60);
}
.slds-icon-text-success {
    --slds-c-icon-color-foreground: var(--web2p-color-green-60);
}

/* SLDS OVERRIDES - BUTTON & BUTTON ICONS */
:root {
    --dxp-s-button-line-height: 1.5;
    --sds-c-button-brand-text-color: white;

    /* use this property to change the size of the lightning-button-icons to a specific value if available sizes are not enough (works with default sized lightning-button-icon) */
    --web2p-slds-button-icon-size: 2.5rem;

    /* use this property to change the size of the svg inside the lightning-button-icons to a specific value if available sizes are not enough */
    --web2p-slds-button-icon-svg-size: 1.25rem;

    --web2p-slds-button-horizontal-padding: 1rem;
    --web2p-slds-button-vertical-padding: 0;

    --sds-c-button-neutral-color-border: var(--web2p-border-color-dark);
}
.slds-button {
    vertical-align: middle;
    --dxp-s-button-font-weight: var(--web2p-font-weight-bold);
    --dxp-s-button-font-size: 0.75rem;
    transition:
        0.2s background-color,
        border 0.2s !important;
    box-shadow: var(--web2p-button-box-shadow, none);
}
.slds-button:active:not([disabled]):not(.slds-accordion__summary-action),
.slds-button:focus:not([disabled]):not(.slds-accordion__summary-action) {
    box-shadow: none;
    outline: 2px solid var(--web2p-border-color);
}
.slds-button:focus:not(:active) .slds-button__icon,
.slds-button:hover:not(:active) .slds-button__icon {
    fill: var(--web2p-lightning-button-icon-color-hover-focus, currentColor);
}
.slds-button:not(.slds-button_icon) {
    --slds-c-button-spacing-inline-start: var(--web2p-slds-button-horizontal-padding);
    --slds-c-button-spacing-inline-end: var(--web2p-slds-button-horizontal-padding);
    --slds-c-button-spacing-block-start: var(--web2p-slds-button-vertical-padding);
    --slds-c-button-spacing-block-end: var(--web2p-slds-button-vertical-padding);
    min-height: 2rem;
}
.slds-button_neutral {
    color: var(--dxp-s-body-text-color);
    --sds-c-button-text-color-hover: var(--dxp-s-body-text-color);
}
.slds-button__icon {
    --dxp-s-button-font-size: var(--web2p-slds-button-icon-svg-size);
}
.slds-button_icon-bare,
.slds-button_icon-brand,
.slds-button_icon-border,
.slds-button_icon-border-filled {
    width: var(--web2p-slds-button-icon-size);
    height: var(--web2p-slds-button-icon-size);
    border-width: 1px;
}
.slds-button_icon-brand,
.slds-button_icon-border,
.slds-button_icon-border-filled {
    border-width: 1px;
}
lightning-button-icon[size='small'] button,
.slds-button_icon-brand.slds-button_icon-small,
.slds-button_icon-border.slds-button_icon-small,
.slds-button_icon-border-filled.slds-button_icon-small {
    width: 2rem;
    height: 2rem;
}
lightning-button-icon[size='x-small'] button,
.slds-button_icon-brand.slds-button_icon-x-small,
.slds-button_icon-border.slds-button_icon-x-small,
.slds-button_icon-border-filled.slds-button_icon-x-small {
    width: 1.5rem;
    height: 1.5rem;
}
.slds-button_icon-brand.slds-button_icon-xx-small,
.slds-button_icon-border.slds-button_icon-xx-small,
.slds-button_icon-border-filled.slds-button_icon-xx-small {
    width: 1.25rem;
    height: 1.25rem;
}
.slds-button_icon-border,
.slds-button_icon-border-filled {
    --slds-c-button-color-border: var(--web2p-border-color-dark);
    --slds-c-button-color-border-active: var(--dxp-g-neutral-3);
    --slds-c-button-color-border-hover: var(--dxp-g-neutral-3);
    border-color: var(--web2p-button-icon-border-color, var(--web2p-border-color-dark));
}
.slds-button_icon-border-filled {
    background-color: white;
    --slds-c-button-color-background: white;
    --slds-c-button-color-background-active: white;
    --slds-c-button-color-background-hover: white;
}
.slds-button_icon.slds-button_icon-border:not(.slds-button_icon-brand),
.slds-button_icon.slds-button_icon-border-filled,
.slds-button_icon.slds-button_icon-bare {
    color: var(--web2p-button-icon-color, var(--dxp-s-body-text-color));
}
.slds-button_icon-border:not(.slds-button_icon-brand):hover,
.slds-button_icon-border-filled:hover,
.slds-button_icon-bare:hover {
    color: var(--web2p-button-icon-hover-color, var(--web2p-brand-color));
}
.slds-button_icon-border:not(.slds-button_icon-brand):active,
.slds-button_icon-border-filled:active,
.slds-button_icon-bare:active {
    color: var(--web2p-button-icon-active-color, var(--web2p-brand-color));
}
.slds-button_icon[disabled] svg {
    opacity: var(--web2p-button-icon-disabled-opacity, 0.15);
}
.slds-button_icon.slds-button_icon-brand[disabled] {
    --sds-c-button-brand-color-background: white;
    --sds-c-button-brand-text-color: var(--dxp-s-body-text-color);
    --sds-c-button-brand-color-border: var(--dxp-g-neutral-1);
}
.slds-button:disabled,
.slds-button[disabled] {
    background-color: var(--web2p-button-background-color-disabled, transparent);
}
.slds-button--brand:disabled,
.slds-button--brand[disabled],
.slds-button_brand:disabled,
.slds-button_brand[disabled] {
    --web2p-button-background-color-disabled: var(--slds-g-color-neutral-base-80, #c9c7c5);
    border-color: var(--slds-g-color-neutral-base-80, #c9c7c5);
    color: var(--slds-g-color-neutral-base-100, #fff);
}

/* SLDS OVERRIDES - INPUTS */
:root {
    --sds-c-checkbox-color-background-checked: var(--web2p-brand-color);
    --sds-c-checkbox-color-border-checked: var(--web2p-brand-color);
    --sds-c-checkbox-mark-color-foreground: white;

    --slds-c-checkbox-toggle-color-background-hover: var(--web2p-brand-color);
    --sds-c-checkbox-toggle-color-background-checked: var(--web2p-brand-color);
    --slds-c-checkbox-toggle-color-border: var(--web2p-brand-color);
    --sds-c-checkbox-toggle-color-border-checked: var(--web2p-brand-color);
}
.slds-checkbox [type='checkbox']:active + .slds-checkbox__label .slds-checkbox_faux,
.slds-checkbox [type='checkbox']:focus + .slds-checkbox__label .slds-checkbox_faux {
    box-shadow: none;
    outline: 2px solid var(--web2p-border-color);
}
.slds-checkbox [type='checkbox'][disabled] + .slds-checkbox__label .slds-checkbox_faux {
    border-color: var(--slds-g-color-border-base-1, #c9c9c9);
    background-color: var(--slds-g-color-neutral-base-95, #f3f3f3);
    outline: none;
}
.slds-input__icon_left-0,
.slds-input__icon_left-0 .slds-input__icon_left {
    left: 0;
}
.slds-input__icon_left-0 input {
    padding-left: 1.2rem;
    padding-right: 0;
    --slds-c-input-spacing-horizontal-start: 1.2rem;
    --slds-c-input-spacing-horizontal-end: 0;
}

/* BUTTON UTILS - after SLDS overrides for higher CSS importance */
.button-lg .slds-button:not(.slds-button_icon) {
    min-height: 3rem;
    --dxp-s-button-font-size: 0.875rem;
    --web2p-slds-button-horizontal-padding: var(--web2p-slds-button-lg-horizontal-padding, 1.25rem);
}
@media (max-width: 1024px) {
    .button-lg .slds-button:not(.slds-button_icon) {
        min-height: 2.5rem;
    }
    .button_mobile-stretch .slds-button:not(.slds-button_icon) {
        width: 100%;
    }
}
.button-md .slds-button:not(.slds-button_icon) {
    min-height: 2.5rem;
    --dxp-s-button-font-size: 0.875rem;
}
.button-round .slds-button:not(.slds-button_icon) {
    width: 2rem;
    height: 2rem;
    padding: 0;
}
.button-lg.button-round .slds-button:not(.slds-button_icon) {
    width: 3rem;
    height: 3rem;
}
.button-light-blue button {
    --sds-c-button-neutral-color-background: var(--web2p-brand-color-10);
    --sds-c-button-neutral-color-background-hover: var(--web2p-brand-color-20);
    --sds-c-button-neutral-color-background-active: var(--web2p-brand-color-20);
    --sds-c-button-neutral-color-border: var(--web2p-brand-color-10);
    --sds-c-button-neutral-color-border-hover: var(--web2p-brand-color-20);
    --sds-c-button-neutral-color-border-active: var(--web2p-brand-color-20);
}
.button-color-brand {
    color: var(--web2p-brand-color);
}

/* BUTTON ICON UTILS - after SLDS overrides for higher CSS importance */
.button-md .slds-button_icon {
    width: 2.8rem;
    height: 2.8rem;
    --web2p-slds-button-icon-svg-size: 1.375rem;
}
.button-lg .slds-button_icon {
    width: 3rem;
    height: 3rem;
    --web2p-slds-button-icon-svg-size: 1.5rem;
}
.button-xl .slds-button_icon {
    width: 3.5rem;
    height: 3.5rem;
    --web2p-slds-button-icon-svg-size: 1.75rem;
}

/* BUTTONS WITH SPINNER - add data-show-spinner={isProcessing} attribute to the lightning-button, and make sure button is disabled */
lightning-button[data-show-spinner='true'] button[disabled] {
    position: relative;
    --button-with-spinner-padding: 2.25rem;
    padding-right: var(--button-with-spinner-padding);
}
lightning-button[data-show-spinner='true'] button[disabled].slds-button_stretch {
    padding-left: var(--button-with-spinner-padding);
}
lightning-button[data-show-spinner='true'] button[disabled] .slds-button__icon_right {
    display: none;
}
lightning-button[data-show-spinner='true'] button[disabled]:after {
    content: '';
    position: absolute;
    right: 7px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--web2p-brand-color);
    border-bottom-color: var(--web2p-brand-color);
    animation: button-spinner-rotation 0.8s ease infinite;
}
lightning-button[data-show-spinner='true'].button-md button[disabled] {
    --button-with-spinner-padding: 2.5rem;
}
lightning-button[data-show-spinner='true'].button-md button[disabled]:after {
    width: 27px;
    height: 27px;
}
lightning-button[data-show-spinner='true'].button-lg button[disabled] {
    --button-with-spinner-padding: 3rem;
}
lightning-button[data-show-spinner='true'].button-lg button[disabled]:after {
    width: 30px;
    height: 30px;
    right: 10px;
}
@keyframes button-spinner-rotation {
    to {
        transform: rotate(360deg);
    }
}

/* ACCORDION */
.slds-accordion__summary-content {
    font-size: 1.125rem;
    font-weight: 700;
}

/* FOOTER */
.footer-links-gap {
    gap: 1.25rem;
    flex-wrap: wrap;
}
/* Mobile Version Max Width Resolution 767px */
@media only screen and (max-width: 767px) {
    .footer-links-gap {
        gap: 0.625rem;
    }
}

/* REUSABLE ANIMATIONS */
.animate-pop-in {
    animation: 350ms ease 1 pop-in-animation;
}
@keyframes pop-in-animation {
    0% {
        transform: scale(0);
    }
    60% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}