/*Style Sheet

Description: This CSS sheet contains the mapping between the standard hooks and groupUI tokens.

*/

:root {

    /*********************** Theme Panel Properties ********************************************/

    /* erWin GroupUI Grid*/

    --dxp-s-header-content-max-width: var(--groupui-sys-media-query-xl);
    --dxp-s-section-columns-max-width: calc(var(--groupui-sys-media-query-xl) - var(--dxp-s-section-content-spacing-inline-start) - var(--dxp-s-section-content-spacing-inline-end));
    --dxp-s-footer-content-max-width: var(--groupui-sys-media-query-xl);
    --dxp-s-section-content-spacing-inline-start: var(--groupui-sys-spacing-1800);
    --dxp-s-section-content-spacing-inline-end: var(--groupui-sys-spacing-1800);
    --dxp-s-section-content-spacing-block-start: var(--groupui-sys-spacing-1800);
    --dxp-s-section-content-spacing-block-end: var(--groupui-sys-spacing-1800);

    /* Background Colors */
    --dxp-g-root: var(--groupui-sys-color-background-base);
    --dxp-g-root-1: var(--groupui-sys-color-background-canvas);
    --dxp-g-root-2: var(--groupui-sys-color-text-weak);
    --dxp-g-root-3: var(--groupui-sys-color-light-basic-hover);

    /*Header Background Color*/

    /* --com-c-layout-header-background-color: var(--groupui-sys-color-brand-core); */
    --com-c-layout-header-background-color: var(--groupui-vwgroup-ref-color-grey-100);

    /* Text Colors */
    --dxp-g-root-contrast: var(--groupui-sys-color-text-normal);
    --dxp-g-root-contrast-1: var(--groupui-sys-color-neutral-basic-default);
    --dxp-g-root-contrast-2: var(--groupui-sys-color-text-weakest);
    --dxp-g-root-contrast-3: var(--groupui-sys-color-action-muted-hover);

    /* Heading 1 */
    --dxp-s-text-heading-extra-large-font-family: 'TheGroupTEXTPro-Regular';
    --dxp-s-text-heading-extra-large-color: var(--groupui-sys-color-text-normal);
    --dxp-s-text-heading-extra-large-font-size: var(--groupui-sys-font-size-850);
    --dxp-s-text-heading-extra-large-line-height: var(--groupui-sys-line-height-l);
    --dxp-s-text-heading-extra-large-font-weight: var(--groupui-sys-font-weight-normal);

    /* Heading 2 */
    --dxp-s-text-heading-large-font-family: 'TheGroupTEXTPro-Regular';
    --dxp-s-text-heading-large-color: var(--groupui-sys-color-text-normal);
    --dxp-s-text-heading-large-font-size: var(--groupui-sys-font-size-750);
    --dxp-s-text-heading-large-line-height: var(--groupui-sys-line-height-l);
    --dxp-s-text-heading-large-font-weight: var(--groupui-sys-font-weight-normal);


    /* Heading 3 */
    --dxp-s-text-heading-medium-font-family: 'TheGroupTEXTPro-Regular';
    --dxp-s-text-heading-medium-color: var(--groupui-sys-color-text-normal);
    --dxp-s-text-heading-medium-font-size: var(--groupui-sys-font-size-650);
    --dxp-s-text-heading-medium-line-height: var(--groupui-sys-line-height-l);
    --dxp-s-text-heading-medium-font-weight: var(--groupui-sys-font-weight-normal);

    /* Heading 4 */
    --dxp-s-text-heading-small-font-family: 'TheGroupTEXTPro-Regular';
    --dxp-s-text-heading-small-color: var(--groupui-sys-color-text-normal);
    --dxp-s-text-heading-small-font-size: var(--groupui-sys-font-size-550);
    --dxp-s-text-heading-small-line-height: var(--groupui-sys-line-height-xl);
    --dxp-s-text-heading-small-font-weight: var(--groupui-sys-font-weight-normal);

    /* Heading 5 */
    --dxp-s-text-heading-extra-small-font-family: 'TheGroupTEXTPro-Regular';
    --dxp-s-text-heading-extra-small-color: var(--groupui-sys-color-text-normal);
    --dxp-s-text-heading-extra-small-font-size: var(--groupui-sys-font-size-500);
    --dxp-s-text-heading-extra-small-line-height: var(--groupui-sys-line-height-xl);
    --dxp-s-text-heading-extra-small-font-weight: var(--groupui-sys-font-weight-normal);

    /* Heading 6 */
    --dxp-s-text-heading-extra-extra-small-font-family: 'TheGroupTEXTPro-Regular';
    --dxp-s-text-heading-extra-extra-small-color: var(--groupui-sys-color-text-normal);
    --dxp-s-text-heading-extra-extra-small-font-size: var(--groupui-sys-font-size-450);
    --dxp-s-text-heading-extra-extra-small-line-height: var(--groupui-sys-line-height-xxl);
    --dxp-s-text-heading-extra-extra-small-font-weight: var(--groupui-sys-font-weight-normal);


    /* Paragraph 1 */
     --dxp-s-body-font-family: 'TheGroupTEXTPro-Regular';
    --dxp-s-body-text-color:  var(--groupui-sys-color-text-normal);
    --dxp-s-body-font-size: var(--groupui-sys-font-size-400);
    --dxp-s-body-line-height: var(--groupui-sys-line-height-xxl);
    --dxp-s-body-font-weight: var(--groupui-sys-font-weight-normal);
    /* Paragraph 2 */
    --dxp-s-body-small-font-family: 'TheGroupTEXTPro-Regular';
    --dxp-s-body-small-text-color:  var(--groupui-sys-color-text-normal);
    --dxp-s-body-small-font-size: var(--groupui-sys-font-size-350);
    --dxp-s-body-small-line-height: var(--groupui-sys-line-height-xxl);
    --dxp-s-body-small-font-weight: var(--groupui-sys-font-weight-normal);

    /* Base Font Family and Size */
    --dxp-s-html-font-family: 'TheGroupTEXTPro-Regular';
    --dxp-s-html-font-size: var(--groupui-sys-font-size-400);


    /* Link Text */
    --dxp-s-link-text-decoration: underline;
    --dxp-s-link-text-decoration-focus: underline;
    --dxp-s-link-text-decoration-hover: underline;

    /* Links Color */
    --dxp-s-link-text-color: var(--groupui-sys-color-link-primary-unvisited-default);
    /* Link Color */
    --dxp-s-link-text-color-hover: var(--groupui-sys-color-link-primary-unvisited-hover);
    /* Link Hover Color */

    /* Brand Colors */
    --dxp-g-brand: var(--groupui-sys-color-link-primary-unvisited-default);
    --dxp-g-brand-1: var(--groupui-sys-color-link-primary-unvisited-hover);
    --dxp-g-brand-2: var(--groupui-sys-color-hero-basic-default);
    --dxp-g-brand-3: var(--groupui-sys-color-brand-core);

    /* Brand Foreground Color */
    --dxp-g-brand-contrast: var(--groupui-sys-color-background-base);
    --dxp-g-brand-contrast-1: var(--groupui-sys-color-text-normal);
    --dxp-g-brand-contrast-2: var(--groupui-sys-color-neutral-basic-pressed);
    --dxp-g-brand-contrast-3: var(--groupui-sys-color-neutral-basic-default);

    /* Forms Color */
    --dxp-s-form-element-label-color: var(--groupui-sys-color-text-normal);
    --dxp-s-form-element-placeholder-text-color: var(--groupui-sys-color-text-weakest);
    --dxp-s-form-element-text-color: var(--groupui-sys-color-text-normal);
    --dxp-s-form-element-text-color-focus: var(--groupui-sys-color-text-normal);
    --dxp-s-form-element-color-background: var(--groupui-sys-color-action-silent-default);
    --dxp-s-form-element-color-background-active: var(--groupui-sys-color-action-silent-default);
    --dxp-s-form-element-color-border-focus: var(--groupui-sys-color-action-muted-default);
    --dxp-s-form-checkbox-color-background: var(--groupui-sys-color-action-silent-default);
    --dxp-s-form-checkbox-color-background-checked: var(--groupui-sys-color-action-basic-default);
    --dxp-s-form-checkbox-color-border: var(--groupui-sys-color-action-muted-default);
    --dxp-s-form-checkbox-color-border-checked: var(--groupui-sys-color-on-action-basic-default);

    /* Form Spacing */
    --dxp-s-form-element-spacing-block-start: var(--groupui-sys-spacing-200);
    --dxp-s-form-element-spacing-horizontal-end: var(--groupui-sys-spacing-300);
    --dxp-s-form-element-spacing-block-end: var(--groupui-sys-spacing-200);
    --dxp-s-form-element-spacing-horizontal-start: var(--groupui-sys-spacing-300);

    /* Form Borders */
    --dxp-s-form-element-radius-border: var(--groupui-sys-border-radius-s);
    --dxp-s-form-element-width-border: 1px;
    --dxp-s-form-checkbox-radius-border: var(--groupui-sys-border-radius-s);
    --dxp-s-form-checkbox-width-border: 1px;
    --dxp-s-form-element-border-radius: var(--dxp-g-border-radius-small, 0.25rem);
    --dxp-s-form-element-border-width: var(--dxp-g-border-width-thin, 1px);
    --dxp-s-form-element-color-border: var(--groupui-sys-color-action-muted-default);
    --dxp-s-form-element-color-background: var(--dxp-g-color-background-input, #FFF);

    /* Field Labels, Input Text, and Caption Text */
    --dxp-s-form-element-label-font-size: var(--groupui-sys-font-size-400);
    --dxp-s-form-element-text-font-size: var(--groupui-sys-font-size-450);
    --dxp-s-form-element-label-font-family: 'TheGroupTEXTPro-Regular';
    --dxp-s-form-element-label-font-weight: var(--groupui-sys-font-weight-bold);
    --dxp-s-form-element-level-text-transform: none;
    --dxp-s-form-element-level-line-height: 1.5;
    --dxp-s-form-element-level-letter-spacing: normal;

    /* Dropdowns Color */
    --dxp-s-dropdown-text-color: var(--groupui-sys-color-text-normal);
    --dxp-s-dropdown-color-background: var(--groupui-sys-color-background-base);
    --dxp-s-dropdown-text-color-hover: var(--groupui-sys-color-text-normal);
    --dxp-s-dropdown-color-background-hover: var(--groupui-sys-color-action-subtle-hover);
    --dxp-s-dropdown-color-border: var(--groupui-sys-color-background-connect);

    /* Buttons */
    --dxp-s-button-font-family: 'TheGroupTEXTPro-Regular';
    --dxp-s-button-font-style: medium;
    --dxp-s-button-font-weight: var(--groupui-sys-font-weight-action);
    --dxp-s-button-text-transform: none;
    --dxp-s-button-text-decoration: none;
    --dxp-s-button-line-height: 150%;
    --dxp-s-button-letter-spacing: var(--groupui-sys-letter-spacing-regular);
    --sds-c-button-shadow-focus: none;

    /* Standard Button Values */
    --dxp-s-button-padding: unset;
    --dxp-s-button-padding-block-start: var(--groupui-sys-spacing-200);
    --dxp-s-button-padding-block-end: var(--groupui-sys-spacing-200);
    --dxp-s-button-padding-inline-start: var(--groupui-sys-spacing-500);
    --dxp-s-button-padding-inline-end: var(--groupui-sys-spacing-500);
    --dxp-s-button-radius-border: var(--groupui-sys-border-radius-xl);
    --dxp-s-button-font-size: var(--groupui-sys-font-size-400);


    /* Small Button Values */
    --dxp-s-button-small-padding: unset;
    --dxp-s-button-small-padding-block-start: var(--groupui-sys-spacing-200);
    --dxp-s-button-small-padding-block-end: var(--groupui-sys-spacing-200);
    --dxp-s-button-small-padding-inline-start: var(--groupui-sys-spacing-400);
    --dxp-s-button-small-padding-inline-end: var(--groupui-sys-spacing-400);
    --dxp-s-button-small-font-size: var(--groupui-sys-font-size-350);
    --dxp-s-button-small-radius-border: var(--groupui-sys-border-radius-xl);

    /* Large Button Values */
    --dxp-s-button-large-padding: unset;
    --dxp-s-button-large-padding-block-start: var(--groupui-sys-spacing-200);
    --dxp-s-button-large-padding-block-end: var(--groupui-sys-spacing-200);
    --dxp-s-button-large-padding-inline-start: var(--groupui-sys-spacing-600);
    --dxp-s-button-large-padding-inline-end: var(--groupui-sys-spacing-600);
    --dxp-s-button-large-font-size: var(--groupui-sys-font-size-450);
    --dxp-s-button-large-radius-border: var(--groupui-sys-border-radius-xl);

    /* Button Color */
    /* Primary Buttons */
    --dxp-s-button-color: var(--groupui-sys-color-action-basic-default);
    --dxp-s-button-border-color: var(--groupui-sys-color-action-basic-default);
    --dxp-s-button-color-contrast: var(--groupui-sys-color-background-base);
    --dxp-s-button-color-hover: var(--groupui-sys-color-action-basic-hover);
    --dxp-s-button-border-color-hover: var(--groupui-sys-color-action-basic-hover);
    --dxp-s-button-color-hover-contrast: var(--groupui-sys-color-background-base);
    --dxp-s-button-color-focus: var(--groupui-sys-color-action-basic-hover);
    --dxp-s-button-border-color-focus: var(--groupui-sys-color-action-basic-hover);
    --dxp-s-button-color-focus-contrast: var(--groupui-sys-color-background-base);
    --dxp-s-button-color-focus: var(--groupui-sys-color-action-basic-pressed);
    --dxp-s-button-border-color-focus: var(--groupui-sys-color-action-basic-pressed);


    /* Secondary Buttons */
    --dxp-s-secondary-button-color: var(--groupui-sys-color-action-subtle-default);
    --dxp-s-secondary-button-border-color: var(--groupui-sys-color-action-basic-default);
    --dxp-s-secondary-button-text-color: var(--groupui-sys-color-action-basic-default);
    --dxp-s-secondary-button-color-hover: var(--groupui-sys-color-action-subtle-hover);
    --dxp-s-secondary-button-border-color-hover: var(--groupui-sys-color-action-basic-default);
    --dxp-s-secondary-button-text-color-hover: var(--groupui-sys-color-action-basic-default);
    --dxp-s-secondary-button-color-focus: var(--groupui-sys-color-action-subtle-pressed);
    --dxp-s-secondary-button-border-color-focus: var(--groupui-sys-color-action-basic-default);
    --dxp-s-secondary-button-text-color-focus: var(--groupui-sys-color-action-basic-default);

    /* Tertiary Buttons */
    --dxp-s-tertiary-button-color: var(--groupui-sys-color-action-subtle-default);
    --dxp-s-tertiary-button-border-color: var(--groupui-sys-color-action-subtle-default);
    --dxp-s-tertiary-button-text-color: var(--groupui-sys-color-action-basic-default);
    --dxp-s-tertiary-button-color-hover: var(--groupui-sys-color-action-subtle-hover);
    --dxp-s-tertiary-button-border-color-hover: var(--groupui-sys-color-action-subtle-default);
    --dxp-s-tertiary-button-text-color-hover: var(--groupui-sys-color-action-basic-default);
    --dxp-s-tertiary-button-color-focus: var(--groupui-sys-color-action-subtle-pressed);
    --dxp-s-tertiary-button-border-color-focus: var(--groupui-sys-color-action-subtle-default);
    --dxp-s-tertiary-button-text-color-focus: var(--groupui-sys-color-action-basic-default);


    /*SLDS Hooks*/
    --sds-c-button-shadow-focus: none;

}

/*Text size for mobile*/

@media (max-width: 768px) {

    :root {
        /* Heading 1 */
        --dxp-s-text-heading-extra-large-font-size: var(--groupui-sys-font-size-800);
        --dxp-s-text-heading-extra-large-line-height: var(--groupui-sys-line-height-l);
        /* Heading 2 */
        --dxp-s-text-heading-large-font-size: var(--groupui-sys-font-size-700);
        --dxp-s-text-heading-large-line-height: var(--groupui-sys-line-height-l);
        /* Heading 3 */
        --dxp-s-text-heading-medium-font-size: var(--groupui-sys-font-size-600);
        --dxp-s-text-heading-medium-line-height: var(--groupui-sys-line-height-l);
        /* Heading 4 */
        --dxp-s-text-heading-small-font-size: var(--groupui-sys-font-size-500);
        --dxp-s-text-heading-small-line-height: var(--groupui-sys-line-height-xl);
        /* Heading 5 */
        --dxp-s-text-heading-extra-small-font-size: var(--groupui-sys-font-size-450);
        --dxp-s-text-heading-extra-small-line-height: var(--groupui-sys-line-height-xxl);
        /* Heading 6 */
        --dxp-s-text-heading-extra-extra-small-font-size: var(--groupui-sys-font-size-400);
        --dxp-s-text-heading-extra-extra-small-line-height: var(--groupui-sys-line-height-xxl);
        /* Paragraph 1 */
        --dxp-s-body-font-size: var(--groupui-sys-font-size-350);
        --dxp-s-body-line-height: var(--groupui-sys-line-height-xxl);
        /* Paragraph 2 */
        --dxp-s-body-small-font-size: var(--groupui-sys-font-size-350);
        --dxp-s-body-small-line-height: var(--groupui-sys-line-height-xxl);

        /*Form Label*/

        --dxp-s-form-element-label-font-size: var(--groupui-sys-font-size-350);

        /*Form input text*/

        --dxp-s-form-element-text-font-size: var(--groupui-sys-font-size-350);
    }
}


* {

    --dxp-c-navigation-list-hover-background-color-contrast: var(--groupui-sys-color-brand-core);
    --dxp-c-navigation-list-background-color: var(--groupui-sys-color-brand-core);
    --dxp-c-navigation-list-hover-background-color: var(--groupui-sys-color-brand-core);
    --dxp-c-navigation-list-hover-background-color-contrast: var(--groupui-sys-color-brand-core);
    --dxp-c-navigation-list-selected-background-color: var(--groupui-sys-color-brand-core);
    --dxp-c-navigation-text-color: var(--groupui-sys-color-text-normal-inverse);
    --com-c-my-account-user-profile-login-link-color: var(--groupui-sys-color-text-normal-inverse);
    --dxp-s-body-font-family: 'TheGroupTEXTPro-Regular';
    --dxp-s-button-font-family: 'TheGroupTEXTPro-Regular';
    --dxp-c-navigation-list-nested-outline: none;
    --dxp-c-navigation-item-focus-color: var(--groupui-sys-color-hero-basic-default);
    --com-c-product-pricing-negotiated-price-label-color: var(--groupui-sys-color-text-normal);
    --com-c-commerce-product-variant-pill-border-color: var(--groupui-sys-color-action-basic-hover);
    --com-c-commerce-product-variant-pill-border-selected-color: var(--groupui-sys-color-action-basic-hover);
    --com-c-drilldown-nav-hamburger-button: var(--groupui-sys-color-navigation-unselected-basic-default-inverse);

    /*SLDS Hooks*/
    --slds-g-shadow-inset-focus-1: none;
    --slds-g-shadow-outline-focus-1: none;
    --slds-c-card-radius-border: 0.5rem;
    --slds-c-card-width-border: 1px;
    --slds-c-card-color-border: var(--groupui-sys-color-card-border-level-2);
    --slds-c-card-color-background: var(--groupui-sys-color-background-base);
    --slds-c-card-shadow: none;
    --slds-g-color-border-base-1: var(--groupui-sys-color-line-weak) !important;

    /* Button Tertiary Padding */

    --slds-c-button-spacing-inline-end: 20px;
    --slds-c-button-spacing-block-start: 8px;
    --slds-c-button-spacing-inline-start: 20px;
    --slds-c-button-spacing-block-end: 8px;

    /*Form Element input Shadow When Focus*/

    --slds-c-input-shadow-focus: 0 0 0 var(--groupui-sys-border-width-s) var(--groupui-sys-color-action-basic-default) !important;
    --slds-c-textarea-shadow-focus: 0 0 0 var(--groupui-sys-border-width-s) var(--groupui-sys-color-action-basic-default) !important;
}

/*Global CSS Classes

Description: This CSS sheet contains global css classes to be reused. 

*/
community_layout-section.vwgroupui-16-section-spacing.comm-section-container {
    padding-top: 32px !important;
    padding-bottom: 0px !important;
}
c-er-win-price-reduction-banner {
    margin-bottom: 0px !important;
}

c-er-win-dashboard-contract-license-banner {
    margin-bottom: 0px !important;
}

.vwgrupui-notification-banner-contracted-license{
    margin-bottom: 40px !important;

}

/*Region / Section Spacing*/

community_layout-section.vwgroupui-spacing-400 {
    --dxp-s-section-content-spacing-block-start: var(--groupui-sys-font-size-400);
    --dxp-s-section-content-spacing-inline-end: var(--groupui-sys-font-size-400);
    --dxp-s-section-content-spacing-block-end: var(--groupui-sys-font-size-400);
    --dxp-s-section-content-spacing-inline-start: var(--groupui-sys-font-size-400);
}

community_layout-section.vwgroupui-spacing-1000 {
    --dxp-s-section-content-spacing-block-start: var(--groupui-sys-font-size-1000);
    --dxp-s-section-content-spacing-inline-end: var(--groupui-sys-font-size-1000);
    --dxp-s-section-content-spacing-block-end: var(--groupui-sys-font-size-1000);
    --dxp-s-section-content-spacing-inline-start: var(--groupui-sys-font-size-1000);
}

community_layout-section.vwgroupui-spacing-500 {
    --dxp-s-section-content-spacing-block-start: var(--groupui-sys-font-size-500);
    --dxp-s-section-content-spacing-inline-end: var(--groupui-sys-font-size-500);
    --dxp-s-section-content-spacing-block-end: var(--groupui-sys-font-size-500);
    --dxp-s-section-content-spacing-inline-start: var(--groupui-sys-font-size-500);
}

/*Spacing*/


.vwgroupui-spacing-1000{
    margin-top: var(--groupui-sys-spacing-1000) !important;
}


.vwgroupui-spacing-600{
    margin-top: var(--groupui-sys-spacing-600) !important;
}


/*BreadCrumb Standard Component*/

.vwgroupui-breadcrumb .slds-text-heading_small {
    font-size: var(--groupui-sys-font-size-350) !important;
}

/*Product Detail Page*/

/*Product Image*/

.vwgroupui-product-image img {
    width: 317px !important;
}

.vwgroupui-banner-image-background .dxp-block-image-host {
    border-radius: 8px !important;
}

/*Product Rich Text Editor Custom Spacing Class*/
.vwgroupui-paragraph-m-bottom p {
    margin-bottom: var(--groupui-sys-spacing-200) !important;
}

/*Resource VW Group UI Cards*/


.vwgroupui-content-card {
    border: 1px solid var(--groupui-sys-color-card-border-level-2) !important;
    border-radius: var(--groupui-sys-border-radius-m) !important;
}

.vwgroupui-content-image img {
    border-top-left-radius: var(--groupui-sys-border-radius-m) !important;
    border-top-right-radius: var(--groupui-sys-border-radius-m) !important;
}

.vwgroupui-card-content-title {
    min-height: 54px !important;
}

/*VW Group UI Link*/

.vwgroupui-link p {

    color: var(--groupui-sys-color-link-primary-unvisited-default) !important;
}

.vwgroupui-link p:hover {
    color: var(--groupui-sys-color-link-primary-unvisited-hover) !important;
}

/*VW GroupUI Form Elements

Description: The class  .vwgroupui-form-element-responsive is to be used in a input element.

*/
.vwgroupui-text-input {
    font-size: 16px !important;
}



/*Desktop*/
@media (min-width: 1025px) {

 .vwgroupui-icon-size{   
    width: 32px;
    height: 32px;
 }

   .vwgroupui-form-element-responsive{
        height: 48px !important;
   }

    .vwgroupui-dropdown-icon {
        width: 32px !important;
        height: 32px !important;
    }

    .vwgroupui-dropdown-icon-container {
        width: 32px !important;
        height: 32px !important;
    }

    .slds-input-has-icon .slds-input__icon.vwgroupui-dropdown-icon-container  {
    
    top: 36% !important;
    
}

        .slds-input{
            height: 48px !important;
        }

        .slds-combobox__input {
            height: 48px !important;
            align-items: center !important;
        }
}

/*Tablet*/

@media (min-width: 769px) and (max-width: 1024px) {
      .vwgroupui-form-element-responsive{
        height: 40px !important;
   }

     .vwgroupui-dropdown-icon {
        width: 24px !important;
        height: 24px !important;
    }

    .vwgroupui-dropdown-icon-container {
        width: 24px !important;
        height: 24px !important;
    }

     .slds-input-has-icon .slds-input__icon.vwgroupui-dropdown-icon-container  {
    
    top: 36% !important;
    
}

 .slds-input{
            height: 40px !important;
        }

.slds-combobox__input {
            height: 40px !important;
            align-items: center !important;
        }
 .vwgroupui-icon-size{   
    width: 24px;
    height: 24px;
 }
}

/*Mobile*/

@media (max-width: 768px) {

       .vwgroupui-form-element-responsive{
        height: 32px !important;
   }

    .vwgroupui-dropdown-icon {
        width: 16px !important;
        height: 16px !important;
    }

    .vwgroupui-dropdown-icon-container {
        width: 16px !important;
        height: 16px !important;
    }
    .slds-input-has-icon .slds-input__icon.vwgroupui-dropdown-icon-container  {
    
    top: 50% !important;
    
}

 .slds-input{
            height: 32px !important;
        }

        .slds-combobox__input {
            height: 32px !important;
            align-items: center !important;
        }

 .vwgroupui-icon-size{   
    width: 16px;
    height: 16px;
 }
}

.erwin-modal {
    display: flex;
    justify-content: center;
    align-items: center;
}
.erwin-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--groupui-sys-color-background-backdrop);
    z-index: 1000;
}

 .erwin-modal-container {
     position: fixed;
     top: 50%;
     transform: translate(0%, -50%);
     background: #fff;
     border-radius: var(--groupui-sys-border-radius-m);
     box-shadow: 0 4px 24px rgba(0,0,0,0.2);
     z-index: 1001;
     max-width: 640px;
     display: flex;
     flex-direction: column;
     overflow: hidden;
     width: -webkit-fill-available;
}

.erwin-modal-close-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    padding-top: var(--groupui-sys-spacing-400);
    padding-right: var(--groupui-sys-spacing-400);
    box-sizing: border-box;
}

.erwin-modal-title-row {
    width: 100%;
    box-sizing: border-box;
    padding-bottom: var(--groupui-sys-spacing-400);

}

.erwin-modal-title {
    text-align: left;  
}

.erwin-modal-close {
    width: 24px;
    height: 24px;
    cursor: pointer;
}


.erwin-modal-body {
    overflow-y: auto;
    flex: 1;
    gap: var(--groupui-sys-spacing-400);
    display: flex;
    flex-direction: column;
}

.erwin-modal-content-container{

    padding-bottom: var(--groupui-sys-spacing-1000);
    padding-right: var(--groupui-sys-spacing-1000);
    padding-left: var(--groupui-sys-spacing-1000);

}

.erwin-modal-button-group {
    width: 100%;
    justify-content: flex-end;
    display: flex;
    gap: var(--groupui-sys-spacing-400);
    padding-bottom: var(--groupui-sys-spacing-1000);
    padding-right: var(--groupui-sys-spacing-1000);
}


/*Tablet*/

@media (max-width: 1024px) {
    .erwin-modal-container {

        margin-left: var(--groupui-sys-spacing-400);
        margin-right: var(--groupui-sys-spacing-400);
}
  
}


/*Mobile*/
@media (max-width: 768px) {

    .erwin-modal-button-group {
    flex-direction: column;
    display: flex;
    gap: var(--groupui-sys-spacing-400);
    padding-bottom: var(--groupui-sys-spacing-600);
    padding-right: var(--groupui-sys-spacing-400);
    padding-left: var(--groupui-sys-spacing-400);
}

.erwin-modal-body {

    gap: var(--groupui-sys-spacing-200);

}

.erwin-modal-content-container{

    padding-bottom: var(--groupui-sys-spacing-600);
    padding-right: var(--groupui-sys-spacing-400);
    padding-left: var(--groupui-sys-spacing-400);

}

.erwin-modal-title-row {
    width: 100%;
    box-sizing: border-box;
    padding-bottom: var(--groupui-sys-spacing-200);

}

.erwin-modal-close-row {
  
    padding-bottom: var(--groupui-sys-spacing-200);
  
}


   
}

/*Text Styles*/

.vwgroupui-card-title {
    margin-bottom: var(--groupui-sys-spacing-200);
}

.vwgroupui-card-content {
    margin-bottom: var(--groupui-sys-spacing-600);
}

.vwgroupui-section-title {
    margin-top: var(--groupui-sys-spacing-1000);
    margin-bottom: var(--groupui-sys-spacing-1000);
}

.vwgroupui-subtitle-annotation{
    color: var(--groupui-sys-color-text-weaker);
}

.erwin-disabled-link a  {
    color: #A8ADB3 !important;
    pointer-events: none;
    cursor: not-allowed;
}

.vwgroupui-card-title {
    margin-bottom: var(--groupui-sys-spacing-200);
}

.vwgroupui-card-content {
    margin-bottom: var(--groupui-sys-spacing-600);
}

.vwgroupui-section-title {
    margin-top: var(--groupui-sys-spacing-1000);
    margin-bottom: var(--groupui-sys-spacing-1000);
}

.vwgroupui-subtitle-annotation{
    color: var(--groupui-sys-color-text-weaker);
}


.delete-button .erwin-link-container .erwin-link{
    pointer-events: none !important;
    cursor: pointer !important;
    color: var(--groupui-sys-color-danger-basic-default);
}

/*CSS Override for Standard and Custom components

Description: This CSS sheet contains the css overrides for the standard salesforce library. 

*/
/*Cart Page*/
commerce_cart-managed-contents footer {
    background: unset !important;
}

.cart-items-container {
    top: -32px !important;
}

.cart-items-container .li-layout {
    padding: 24px 0px 0px 0px !important;
}

.commerce-cart-item:not(:has(.original-price)) {
  row-gap: 8px;
}

.delete-button button:hover {
    color: #D01628 !important;
    text-decoration: underline !important;
    background: none !important;
}

.delete-button button:active {
    color: #D01628 !important;
    text-decoration: underline !important;
    background: none !important;
}

.delete-button button {
    padding: 0px !important;
    width: min-content !important;
}

.vwgroupui-cart-card {
    padding: 24px;
    border: 1px solid #DFE2E6;
    border-radius: 8px;
}

commerce_cart-item img {
    border-radius: 8px;
    background: var(--groupui-sys-color-brand-core);
}
/*END CART PAGE*/

/* Checkout Page*/
.checkout-summary {
    --dxp-style-c-margin-left: 0% !important;
}

.checkout-summary header {
    display: none;
}

.vwgroupui-no-top-padding-h5 h5 {
    padding-top: 0px !important;
}

.commerce_builder-cart-items.component-wrapper-spacer {
  margin-bottom: 0 !important;
}


/*End Checkout Page*/

/*Confirmation page*/

.confirmation-page-card {
     padding: 24px;
    border: 1px solid #DFE2E6;
    border-radius: 8px;
}

.confirmation-page-card dt {
    font-size: 14px !important;
    font-weight: bold;
}

.confirmation-page-card dd {
    font-size: 16px !important;
}

.vwgroupui-confirmation-page-grid .summary-column .column-content {
    max-width: -webkit-fill-available !important;
}



.vwgroupui-confirmation-page-grid .summary-column {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 3.75rem !important;
    padding-bottom: 3.75rem !important;
}

.vwgroupui-confirmation-page-grid .content-column{
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 3.75rem !important;
    padding-bottom: 3.75rem !important;
}

.vwgroupui-confirmation-page-grid .column-separator{
    display: none !important;
}

/*End Confirmation Page*/

c-sso-login-button.component-wrapper-spacer {
    margin-bottom: unset !important;
}

[name="header"] .component-wrapper-spacer {
    margin: 0 !important;
}

[name="header"] .component-wrapper-spacer:has(hr) {
    height: 1px;
}

/* [name="footer"] .component-wrapper-spacer {
    margin: 0 !important;
} */
/*Replace Dropdown Icon Arrow*/

/*
lightning-base-combobox .slds-input-has-icon .slds-input__icon lightning-primitive-icon svg.slds-icon  {
    display: block !important;
}
    */

    .delete-button button {
    color: var( --groupui-sys-color-danger-basic-default) !important;
   
}
 .slds-listbox_vertical .slds-listbox__option.slds-has-focus {
    outline: none !important;
    inset: none !important;
    border: unset !important;
    color: unset !important;
    background-color: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
lightning-icon.slds-input__icon.slds-input__icon_right.slds-icon-utility-down.slds-icon_container svg {
    display: none !important;
}

    lightning-base-combobox .slds-input-has-icon .slds-input__icon.slds-icon-utility-down lightning-primitive-icon {
  display: block;
    background-image: url('/sfsites/c/resource/GroupUIIcons/GroupUI-Icons/chevron-down-16.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: var(--groupui-sys-icon-size-l) !important;
    height: var(--groupui-sys-icon-size-l) !important;
    fill: transparent !important;
    color: transparent !important;
    transition: transform .2s ease;          /* add animation */
    transform-origin: center center;         /* ensure proper pivot */
}

lightning-base-combobox .slds-combobox.slds-is-open
  .slds-input-has-icon .slds-input__icon.slds-icon-utility-down lightning-primitive-icon {
    transform: rotate(180deg);
}

lightning-base-combobox .slds-input-has-icon .slds-input__icon.slds-icon-utility-down {
    width: unset !important;
    height: unset !important;
    position: inherit !important;
    top: unset !important;
    margin-top: -.4375rem;
    line-height: 1;
    border: 0;
    z-index: 2;
}
/*Tablet*/
@media (min-width: 769px) and (max-width: 1024px) {

    lightning-base-combobox .slds-input-has-icon .slds-input__icon.slds-icon-utility-down lightning-primitive-icon {
    width: 24px !important;
    margin-top: 12% !important;
    height: 24px !important;
}
}


/*Mobile*/

@media (max-width: 768px) {
    lightning-base-combobox .slds-input-has-icon .slds-input__icon.slds-icon-utility-down lightning-primitive-icon {
    width: 16px !important;
        margin-top: 50% !important;

    height: 16px !important;
}

}

/**Site Spacing */

.slds-gutters_direct-small {
    margin-right: 0px;
    margin-left: 0px;
}

header {
    --dxp-g-spacing-xxlarge: 0px !important;
}
.vwgroupui-erwin-home-link a{
    text-decoration: none !important;
    
}
.vwgroupui-erwin-home-link h5 {
    font-family: 'TheGroupHeadPro-Light' !important;
}

.vwgroupui-erwin-home-link {
    text-decoration: none !important;
}


@media (max-width: 1024px) {

    .vwgroupui-header-container.mobile {
        display: block !important;
    }

    .vwgroupui-header-container.desktop {
        display: none !important;
    }

    .vwgroupui-logo-section.mobile {
        max-width: 58px;
        margin: auto;
    }

    .vwgroup-header-icons-container {
        max-width: 6rem;
        float: right;
        right: 1rem;
        position: absolute;
    }
}

.vwgroupui-header-container.mobile {
    display: none;
}

.vwgroupui-logo-section a {
    text-decoration: none !important;
}

.vwgroupui-header-container {
    margin: auto;
    max-width: var(--groupui-sys-media-query-xl);
    background-color: #102732;
}

[data-layout-site-region="header"],
[data-region-label="Header"],
commerce_my_account-my-account-layout [name="header"] {
    /*background: var(--groupui-sys-color-brand-core);*/
    background-color: #102732;
    /*  box-shadow: var(--groupui-sys-shadow-m); */
}

footer {
    --dxp-g-spacing-xxlarge: 0px !important;
}

.vwgroupui-vehicle-services-spacing {
    margin-top: var(--groupui-sys-spacing-1000) !important;
}

.vwgroupui-vehicle-services-dss-image img {
    border-top-right-radius: var(--groupui-sys-border-radius-m) !important;
    border-bottom-right-radius: var(--groupui-sys-border-radius-m) !important;
}

.vwgroupui-vehicle-services-content-text {
    font-size: var(--groupui-sys-font-size-350);
    color:  var(--groupui-sys-color-text-normal);
    line-height: var(--groupui-sys-line-height-xxl);
    font-weight: var(--groupui-sys-font-weight-normal);
}

.vwgroup-footer-brands-container {
    width: 100%;
    max-width: 604px;
    margin: auto;
}

@media (min-width: 768px) {

  .vwgroup-footer-brands-container {
    margin: 0 auto 0 0;
  }

}

@media (min-width: 1024px) {
  .vwgroup-footer-brands-container {
    width: 604px;
    margin: auto;
  }

}

@media (max-width: 480px) {
    .vwgroupui-vehicle-services-spacing {
        margin-top: 0 !important;
    }
}
.vwgroup-footer-menu-link a {
    text-decoration: none !important;
    font-weight: 500 !important;
}

.erwin-nav-menu a:focus {
    color: var(--groupui-sys-color-brand-core-inverse) !important;
}

.vwgroup-footer-menu-link a:hover {
    color: #1B1E1F !important;
    text-decoration: underline !important;
}

.vwgroup-footer-menu-link li {
    padding-top: var(--groupui-sys-spacing-200) !important;
}

/*Profile theme spacing*/

[name="navigation"].slds-grid {
    max-width:var(--groupui-sys-media-query-xl) !important;
    align-content: center;
    justify-content: center;
    margin: auto;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

[name="navigation"] .content {
    --dxp-g-spacing-large: 0px !important;
    --dxp-g-spacing-xlarge: 0px !important;
}

commerce_my_account-navigation-menu-container {
    --dxp-style-c-margin-top: 0px !important;
    --dxp-style-c-margin-left: 0px !important;
}

.vwgroupui-my-erwin-content-section {
    padding-top: var(--groupui-sys-spacing-1000) !important;
}

commerce_my_account-my-account-layout aside.navigation {
    padding-top: var(--dxp-g-spacing-xlarge);
    --dxp-g-spacing-xlarge: 0px !important;
}

.vwgroupui-padding-unset {
    padding-left: var(--dxp-s-section-content-spacing-block-start) !important;
    padding-right: var(--dxp-s-section-content-spacing-block-end) !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.vwgroupui-margin-top-header {
    margin-top: var(--dxp-s-section-content-spacing-block-start);
    margin-bottom: var(--dxp-s-section-content-spacing-block-end);
}


/* ...existing code for overrides, font-face, and other styles... */

footer {
    background-color: var(--groupui-vwgroup-ref-color-grey-100) !important;
}

.vwgroupui-header-dropdown {
    --dxp-s-dropdown-text-color: var(--groupui-sys-color-text-normal-inverse);
    --dxp-s-dropdown-color-background: var(--groupui-sys-color-brand-core);
    --dxp-s-dropdown-text-color-hover: var(--groupui-sys-color-hero-basic-default);
    --dxp-s-dropdown-color-background-hover: transparent;
    --dxp-s-dropdown-color-border: var(--groupui-sys-color-action-muted-default);
}

.vwgroupui-header-dropdown  .profile-menu-item {
    font-size: 16px !important;
}

.vwgroupui-header-dropdown .profile-menu-item_hover {
    font-size: 16px !important;
}

/*External Theme Layout*/

.vwgroupui-external-theme-banner-image .main-content-container {
    height: 100vh !important;
}

.vwgroupui-external-theme-banner-image-register .main-content-container {
    height: 100vh !important;
}


@media (max-width: 1024px) {
    .vwgroupui-external-theme-banner-image-register .main-content-container {
        height: unset !important;
    }
}

/*Login Checkout*/

.vwgroup-login-form .comm-login-form__container {

    gap: 2.5rem;
    padding: 2.5rem;
    box-sizing: border-box;
}

/*Mini cart*/

commerce_cart-mini-cart-panel h2,
commerce_cart-mini-cart-panel p,
commerce_cart-mini-cart-panel span,
commerce_cart-mini-cart-panel li,
commerce_cart-mini-cart-panel a,
commerce_cart-mini-cart-panel button {
    color: var(--dxp-s-body-text-color);
}

/*Template Header*/
commerce-layout-header header {
    display: block !important;
    /* height: 64px !important;
    min-height: 64px !important; */
    padding: 0px !important;
}


.vwgroupui-external-theme-regions {
    padding: unset !important;
}

.vwgroupui-header-banner-active-licenses {
  background: var(--groupui-vwgroup-ref-color-vivid-green-100);
  margin-bottom: 0;
}



/*Home banner*/

/* Commerce header sizing and padding hooks */

dxp_layout-columns.vwgroupui-banner-card {
    background: rgba(0, 128, 110, .67);

    border-radius: var(--groupui-sys-border-radius-m);
    max-width: max-content;
}

.vwgroupui-login-home-button{
    display: flex;
    justify-content: flex-end;
}

.vwgroupui-product-banner-card {
    background-color: white;
    border-radius: var(--groupui-sys-border-radius-m);
    width: 100%;
    max-width: none;
    height: 100%;
}

.vwgroupui-product-banner-card img {
    border-radius: var(--groupui-sys-border-radius-m);
}

.vwgroupui-login-home-header-button {
    background-color: white;
    color: rgba(0, 39, 51, 1);
}

.vwgroupui-home-page-background {
  background-color: #102732;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.vwgroupui-home-page-title-banner{
    color: #C2FE06 !important;
}

.vwgroupui-home-page-text-banner{
    color: var(--groupui-sys-color-brand-core-inverse) !important;
}

.vwgroupui-home-page-text-color-gray-backgroup{
    color: var(--groupui-sys-color-text-normal) !important;
}

.vwgroupui-vertical-line{
    transform: rotate(90deg);
    transform-origin: left top;
}

/*Info Card*/

.column-info-card {
    border-radius: var(--groupui-sys-border-radius-m);
    border: 1px solid var(--groupui-sys-color-card-border-level-2);
    padding-top: var(--groupui-sys-spacing-600) !important;
    padding-right: var(--groupui-sys-spacing-600) !important;
    padding-bottom: var(--groupui-sys-spacing-600) !important;
    padding-left: var(--groupui-sys-spacing-600) !important;
    width: 100%;
    max-width: none;
    height: 100%;
}

.column-info-card a {

    text-decoration: none !important;
    width: fit-content;


}

.column-info-card .vwgroupui-card-link-spacing p {
    padding-top: var(--groupui-sys-spacing-600) !important;
}

.column-info-card a :hover {

    width: fit-content;
}

/**Text Rich **/

.sfgu-p-text {

    color: var(--dxp-s-body-text-color) !important;
}


/*Custom Buttons*/


.hero-button a,
button.hero-button {
    display: inline-flex !important;
    align-content: center !important;
    align-items: center !important;
    color: var(--button-color) !important;
    background-color: var(--groupui-sys-color-hero-basic-default) !important;
    transition: all var(--transition-quick) ease-in-out !important;
    border: var(--border-width-m) solid var(---groupui-sys-color-hero-basic-default) !important;
    border-radius: var(--groupui-sys-border-radius-full) !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    background: var(--groupui-sys-color-hero-basic-default) !important;
    color: var(--groupui-sys-color-on-hero-basic-default) !important;
    padding: 8px 20px 8px 20px !important;

}


.hero-button a:hover,
button.hero-button:hover {
    background-color: var(--groupui-sys-color-hero-basic-hover) !important;
    color: var(--groupui-sys-color-on-hero-basic-default) !important;
}

.hero-button a:focus,
button.hero-button:focus {
    background-color: var(--groupui-sys-color-hero-basic-pressed) !important;
    color: var(--groupui-sys-color-on-hero-basic-default) !important;
}

.white-button a,
button.white-button {
    display: inline-flex !important;
    align-content: center !important;
    align-items: center !important;
    color: var(--button-color) !important;
    background-color: var(--groupui-sys-color-brand-core-inverse) !important;
    transition: all var(--transition-quick) ease-in-out !important;
    border: var(--border-width-m) solid var(---groupui-sys-color-brand-core-inverse) !important;
    border-radius: var(--groupui-sys-border-radius-full) !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    background: var(--groupui-sys-color-brand-core-inverse) !important;
    color: var(--groupui-sys-color-brand-core) !important;
    padding: 8px 20px 8px 20px !important;

}


.white-button a:hover,
button.white-button:hover {
    background-color: var(--groupui-sys-color-hero-basic-hover) !important; /*TO DO - CHECK WHICH COLOR*/
    color: var(--groupui-sys-color-brand-core) !important;
}

.white-button a:focus,
button.white-button:focus {
    background-color: var(--groupui-sys-color-hero-basic-pressed) !important; /*TO DO - CHECK WHICH COLOR*/
    color: var(--groupui-sys-color-brand-core) !important;
}

/*Salesforce Standard Buttons Override*/

/*SLDS Icons*/

button.slds-button.slds-button_icon.slds-button_icon-large {
    width: unset !important;
}

/*Neutral Button*/

.slds-button_neutral {
    border-color: var(--groupui-sys-color-action-subtle-default) !important;
    background-color: var(--groupui-sys-color-action-subtle-default) !important;
    color: var(--groupui-sys-color-action-basic-default) !important;
    padding-top: var(--groupui-sys-spacing-200) !important;
    padding-bottom: var(--groupui-sys-spacing-200) !important;
    padding-left: var(--groupui-sys-spacing-500) !important;
    padding-right: var(--groupui-sys-spacing-500) !important;
    border-radius: var(--groupui-sys-border-radius-xl) !important;
    font-size: var(--groupui-sys-font-size-400) !important;
}

.slds-button_neutral:hover {
    border-color: var(--groupui-sys-color-action-subtle-default) !important;

    background: var(--groupui-sys-color-action-subtle-hover) !important;
    color: var(--groupui-sys-color-action-basic-default) !important;

}

.slds-button_neutral:focus {
    border-color: var(--groupui-sys-color-action-subtle-default) !important;
    background: var(--groupui-sys-color-action-subtle-pressed) !important;
    color: var(--groupui-sys-color-action-basic-default) !important;

}

/*Tertiary button*/

.slds-button.slds-button_neutral,
.slds-button {
    text-decoration: none !important;

}

.slds-button.slds-button_neutral_hover,
.slds-button:hover {
    text-decoration: none !important;

}

.slds-button_icon:hover,
.slds-button_icon:active,
.slds-button_icon:focus {
    background: var(--groupui-sys-color-hero-subtle-default) !important;
}


/*Lighting-button element override*/

.dxp-button-large {
    line-height: 32px !important;
}

.dxp-button-small {
    line-height: 16px !important;
}

[kx-scope=button-brand]:hover,
[kx-scope=button-filled]:hover,
[kx-scope=button-neutral]:hover,
[kx-scope=button-outline]:hover {
    -webkit-transform: none !important;
    transform: none !important;
}

[kx-scope=button-brand]:active,
[kx-scope=button-filled]:active,
[kx-scope=button-neutral]:active,
[kx-scope=button-outline]:active {
    -webkit-transform: none !important;
    transform: none !important;
}

/*Disabled buttons*/

/*Primary Button Disabled State*/
.slds-button_brand[disabled],
.slds-button_brand:disabled,
.slds-button--brand[disabled],
.slds-button--brand:disabled,
lightning-button[variant="brand"]::part(button):disabled {
    background-color: var(--groupui-sys-color-action-basic-disabled) !important;
    border-color: var(--groupui-sys-color-action-basic-disabled) !important;
    color: var(--groupui-sys-color-on-action-basic-disabled) !important;
}

/*Secondary Button Disabled State*/

.slds-button_outline-brand:disabled,
.slds-button_outline-brand[disabled],
lightning-button[variant="brand-outline"]::part(button):disabled {
    background-color: var(--groupui-sys-color-action-subtle-disabled) !important;
    border-color: var(--groupui-sys-color-action-basic-disabled) !important;
    color: var(--groupui-sys-color-action-basic-disabled) !important;
}

/*Tertiary Button Disabled State*/
.slds-button[disabled],
.slds-button:disabled {
    background-color: var(--groupui-sys-color-action-subtle-disabled);
    border-color: var(--groupui-sys-color-action-subtle-disabled);
    color: var(--groupui-sys-color-action-basic-disabled);

}

.hero-button a[disabled],
button.hero-button[disabled] {
    background-color: var(--groupui-sys-color-hero-basic-disabled) !important;
    color: var(--groupui-sys-color-on-hero-basic-disabled) !important;
}


/*Primary Button Success*/
button.slds-button.slds-button_brand.slds-button_success {
    background: var(--groupui-sys-color-success-basic-default) !important;
    color: var(--groupui-sys-color-on-action-basic-default) !important;
    border-color: var(--groupui-sys-color-success-basic-default) !important;
}

button.slds-button.slds-button_brand.slds-button_success:hover {
    background: var(--groupui-sys-color-success-basic-hover) !important;
    border-color: var(--groupui-sys-color-success-basic-hover) !important;
}

button.slds-button.slds-button_brand.slds-button_success:focus {
    background: var(--groupui-sys-color-success-basic-pressed) !important;
    border-color: var(--groupui-sys-color-success-basic-pressed) !important;
}

/*Primary Button Warning*/

button.slds-button.slds-button_brand.slds-button_destructive {
    background: var(--groupui-sys-color-warning-basic-default) !important;
    color: var(--groupui-sys-color-on-action-basic-default) !important;
    border-color: var(--groupui-sys-color-warning-basic-default) !important;
}

button.slds-button.slds-button_brand.slds-button_destructive:hover {
    background: var(--groupui-sys-color-warning-basic-hover) !important;
    border-color: var(--groupui-sys-color-warning-basic-hover) !important;
}

button.slds-button.slds-button_brand.slds-button_destructive:focus {
    background: var(--groupui-sys-color-warning-basic-pressed) !important;
    border-color: var(--groupui-sys-color-warning-basic-pressed) !important;
}

/*Primary Button Danger*/


button.slds-button.slds-button_brand.vwgroupui-button-danger {
    background: var(--groupui-sys-color-danger-basic-default) !important;
    color: var(--groupui-sys-color-on-action-basic-default) !important;
    border-color: var(--groupui-sys-color-danger-basic-default) !important;
}

button.slds-button.slds-button_brand.vwgroupui-button-danger:hover {
    background: var(--groupui-sys-color-danger-basic-hover) !important;
    border-color: var(--groupui-sys-color-danger-basic-hover) !important;
}

button.slds-button.slds-button_brand.vwgroupui-button-danger:focus {
    background: var(--groupui-sys-color-danger-basic-pressed) !important;
    border-color: var(--groupui-sys-color-danger-basic-pressed) !important;
}

/*Secondary Button Success*/

button.slds-button.slds-button_outline-brand.slds-button_success {
    background: var(--groupui-sys-color-action-subtle-default) !important;
    color: var(--groupui-sys-color-success-basic-default) !important;
    border-color: var(--groupui-sys-color-success-basic-default) !important;
}

button.slds-button.slds-button_outline-brand.slds-button_success:hover {
    background: var(--groupui-sys-color-success-subtle-hover) !important;
}

button.slds-button.slds-button_outline-brand.slds-button_success:focus {
    background: var(--groupui-sys-color-success-subtle-pressed) !important;
}

/*Secondary Button Warning*/

button.slds-button.slds-button_outline-brand.slds-button_destructive {
    background: var(--groupui-sys-color-action-subtle-default) !important;
    color: var(--groupui-sys-color-warning-basic-default) !important;
    border-color: var(--groupui-sys-color-warning-basic-default) !important;
}

button.slds-button.slds-button_outline-brand.slds-button_destructive:hover {
    background: var(--groupui-sys-color-warning-subtle-hover) !important;
}

button.slds-button.slds-button_outline-brand.slds-button_destructive:focus {
    background: var(--groupui-sys-color-warning-subtle-pressed) !important;
}

/*Secondary Button Danger*/


button.slds-button.slds-button_outline-brand.vwgroupui-button-danger {
    background: var(--groupui-sys-color-action-subtle-default) !important;
    color: var(--groupui-sys-color-danger-basic-default) !important;
    border-color: var(--groupui-sys-color-danger-basic-default) !important;
}

button.slds-button.slds-button_outline-brand.vwgroupui-button-danger:hover {
    background: var(--groupui-sys-color-danger-subtle-hover) !important;
}

button.slds-button.slds-button_outline-brand.vwgroupui-button-danger:focus {
    background: var(--groupui-sys-color-danger-subtle-pressed) !important;
}

/* To replace icons */

/* Hide the original SVG icon and set a custom background */
commerce_builder-user-profile-menu lightning-primitive-icon svg.slds-icon {
    background-image: url('/sfsites/c/resource/GroupUIIconsWhite/GroupUI-Icons-White/user-32.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: var(--groupui-sys-icon-size-l) !important;
    height: var(--groupui-sys-icon-size-l) !important;
    fill: transparent !important;
    color: transparent !important;
    transition: background-image .0s; /* no delay */

}


commerce_my_account-user-profile-menu button {
    outline: none !important;
}

/* Hide the <use> element so the original icon is not shown */
commerce_builder-user-profile-menu lightning-primitive-icon lightning-primitive-icon svg.slds-icon use {
    display: none !important;
}

/* Color the icon yellow on hover using a CSS filter 
commerce_builder-user-profile-menu lightning-primitive-icon svg.slds-icon:hover {
    filter: brightness(0) saturate(100%) invert(81%) sepia(98%) saturate(749%) hue-rotate(1deg) brightness(104%) contrast(104%) !important;
}
*/
/* Hide the original SVG icon and set a custom background for cart badge */

/* Preload both hover icons (user + cart) */
body::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    /* layer 1 = user inverse, layer 2 = cart inverse */
    background-image:
        url('/sfsites/c/resource/GroupUIIconsWhite/GroupUI-Icons-White/user-inverse-32.svg'),
        url('/sfsites/c/resource/GroupUIIconsWhite/GroupUI-Icons-White/shopping-cart-inverse-32.svg');
    background-repeat: no-repeat, no-repeat;
    background-size: contain, contain;
}

commerce_builder-cart-badge commerce_cart-badge {
    display: block;
    background-image: url('/sfsites/c/resource/GroupUIIconsWhite/GroupUI-Icons-White/shopping-cart-32.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: var(--groupui-sys-icon-size-m) !important;
    height: var(--groupui-sys-icon-size-m) !important;
    fill: transparent !important;
    color: transparent !important;
    transition: background-image .0s; /* no delay */

}

.nav-menu-item-active commerce_builder-cart-badge commerce_cart-badge {
     background-image: url('/sfsites/c/resource/GroupUIIconsWhite/GroupUI-Icons-White/shopping-cart-inverse-32.svg') !important;
}

commerce_builder-cart-badge commerce_cart-badge:hover {
    display: block;
    background-image: url('/sfsites/c/resource/GroupUIIconsWhite/GroupUI-Icons-White/shopping-cart-inverse-32.svg') !important;
}

commerce_builder-cart-badge commerce_cart-badge:hover {
    display: block;
    background-image: url('/sfsites/c/resource/GroupUIIconsWhite/GroupUI-Icons-White/shopping-cart-inverse-32.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: var(--groupui-sys-icon-size-m) !important;
    height: var(--groupui-sys-icon-size-m) !important;
    fill: transparent !important;
    color: transparent !important;

}

commerce_builder-user-profile-menu lightning-primitive-icon svg.slds-icon:hover {
    background-image: url('/sfsites/c/resource/GroupUIIconsWhite/GroupUI-Icons-White/user-inverse-32.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: var(--groupui-sys-icon-size-m) !important;
    height: var(--groupui-sys-icon-size-m) !important;
    fill: transparent !important;
    color: transparent !important;

}

commerce_cart-badge svg.slds-icon.slds-icon-text-default.slds-icon_small.slds-global-actions__notifications.slds-global-actions__item-action {
    outline: unset !important;
}

/*Cart Badge*/

commerce_builder-cart-badge commerce_cart-badge .slds-notification-badge {
    background: var(--groupui-sys-color-hero-basic-default) !important;
    color: var(--groupui-sys-color-text-normal) !important;

    font-weight: 700;
    position: relative;
    left: 15px;
    top: -34px;
    border: 2px solid #102732;
    width: 18px;
    height: 18px;
}

@media (max-width: 1100px) {
    commerce_builder-cart-badge commerce_cart-badge .slds-notification-badge {
        left: 12px;
        top: -37px;
    }
}


/* Hide the <use> element so the original icon is not shown */
commerce_builder-cart-badge commerce_cart-badge use {
    display: none;
}


/*Category Tile Menu*/

.comm-tile-menu__item-box-shadow {
    box-shadow: var(--groupui-sys-shadow-m) !important;
}

.comm-tile-menu__item-title {
    text-decoration: none !important;
    font-family: 'TheGroupTEXTPro-Regular' !important;
}

/*DropDowns*/

.slds-listbox_vertical .slds-listbox__option:focus,
.slds-listbox_vertical .slds-listbox__option:hover {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

/* Style the profile menu dropdown panel */
commerce_builder-user-profile-menu .slds-dropdown,
commerce_builder-user-profile-menu lightning-button-menu .slds-dropdown {
    background: var(--dxp-s-dropdown-color-background) !important;
    color: var(--dxp-s-dropdown-text-color) !important;
    box-shadow: none !important;
    border: none !important;
}

/* Style dropdown menu items */
commerce_builder-user-profile-menu .slds-dropdown__item>a,
commerce_builder-user-profile-menu .slds-dropdown__item>button {
    background: var(--dxp-s-dropdown-color-background) !important;
    color: var(--dxp-s-dropdown-text-color) !important;
}

/* Highlight on hover/focus */
commerce_builder-user-profile-menu .slds-dropdown__item>a:hover,
commerce_builder-user-profile-menu .slds-dropdown__item>button:hover,
commerce_builder-user-profile-menu .slds-dropdown__item.slds-is-selected>a,
commerce_builder-user-profile-menu .slds-dropdown__item.slds-is-selected>button {
    background: var(--dxp-s-dropdown-color-background) !important;
    color: var(--groupui-sys-color-hero-basic-default) !important;
}

/*My Erwin Page Navigation Menu



.myerwin-navigation-menu .slds-nav-vertical__item.slds-is-active .slds-nav-vertical__action {
    color: var(--dxp-s-button-color-hover-contrast);
    font-weight: 700;
    -webkit-box-shadow: inset 4px 0 0 var(--groupui-sys-color-hero-basic-default);
    box-shadow: inset 4px 0 0 var(--groupui-sys-color-hero-basic-default);
}


.myerwin-navigation-menu lightning-vertical-navigation-item.slds-p-vertical_small.slds-nav-vertical__item.slds-is-active {
    background: var(--dxp-s-button-color);
}

.myerwin-navigation-menu .slds-nav-vertical__item.slds-is-active .slds-nav-vertical__action:focus {
    outline: none !important;
}


.myerwin-navigation-menu lightning-vertical-navigation-item.slds-p-vertical_small.slds-nav-vertical__item:hover>a {
    color: var(--dxp-s-button-color-hover-contrast);
    font-weight: 700;
    -webkit-box-shadow: inset 4px 0 0 var(--groupui-sys-color-hero-basic-default);
    box-shadow: inset 4px 0 0 var(--groupui-sys-color-hero-basic-default);
}


.myerwin-navigation-menu lightning-vertical-navigation-item.slds-p-vertical_small.slds-nav-vertical__item:hover {
    background: var(--dxp-s-button-color);
}

.myerwin-navigation-menu .slds-nav-vertical__item .slds-nav-vertical__action:focus {
    outline: none !important;
}
*/
commerce_my_account-my-account-layout .header {
    
    border-bottom: none !important;

}

commerce_my_account-navigation-menu-container {
    padding-top: var(--groupui-sys-spacing-600) !important;
}

.myerwin-navigation-menu .is-leaf.slds-p-vertical_none {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    width: 100%;
}

.myerwin-navigation-menu li.is-leaf.slds-p-vertical_none.is-active {
        border-right: 2px solid var(--groupui-sys-color-navigation-selected-basic-default) !important;
        
}

.myerwin-navigation-menu commerce-link-list {
    display: block !important;
}

/*default*/

.myerwin-navigation-menu .is-leaf.slds-p-vertical_none a{
    text-decoration: none !important;
    color: var(--groupui-sys-color-navigation-unselected-basic-default) !important;
    font-size: var(--groupui-sys-font-size-400) !important;
    font-weight: var(--groupui-sys-font-weight-action) !important;
}


/*is active */

.myerwin-navigation-menu .is-leaf.slds-p-vertical_none.is-active a{
    
    color: var(--groupui-sys-color-navigation-selected-basic-default) !important;
}

/*is hovered*/

.myerwin-navigation-menu .is-leaf.slds-p-vertical_none.is-hovered a{
    
    color: var(--groupui-sys-color-navigation-unselected-basic-hover) !important;
}

/*pressed*/

.myerwin-navigation-menu .is-leaf.slds-p-vertical_none a:focus{
    color: var(--groupui-sys-color-navigation-unselected-basic-pressed) !important;
}

/*is active hovered*/


.myerwin-navigation-menu .is-leaf.slds-p-vertical_none.is-active.is-hovered a{
    
    color: var(--groupui-sys-color-navigation-selected-basic-hover) !important;
}

/*is active pressed*/

.myerwin-navigation-menu .is-leaf.slds-p-vertical_none.is-active.is-hovered a{
    
    color: var(--groupui-sys-color-navigation-selected-basic-pressed) !important;
}

/*My Erwin Account Profile Menu for Tablet*/

@media (max-width: 1024px) {

        commerce_my_account-navigation-menu-container {
    margin-left: 0px !important;
}
}

/*My Erwin Account Profile Menu for mobile*/

@media (max-width: 768px) {

    commerce_my_account-navigation-menu-container {
    margin-left: 0px !important;
}

commerce_my_account-my-account-layout aside.navigation {
    border-right: unset !important;
    border-bottom: 1px solid var(--groupui-sys-color-line-weak) !important;
}

.vwgroupui-my-erwin-content-section {
    padding-top: var(--groupui-sys-spacing-700) !important;
}

commerce_my_account-navigation-menu-container .navigationCtn {
    padding-right: unset !important;
}
 
}


/*Salesforce Payments Component*/

.salesforce-payment-component button {
    border-radius: var(--groupui-sys-border-radius-m);
}

.no-address lightning-input[data-use-same-shipping-address] {
    display: none !important;
}

/*Form Elements*/

.slds-form-element__label {
    margin-bottom: var(--groupui-sys-spacing-100);
}

.slds-section__title,
.slds-section__title .slds-text-title_bold {
    font-size: var(--groupui-sys-font-size-500);
}

.vwgroupui-bold-text {
    font-weight: var(--groupui-sys-font-weight-bold);
}

.vwgroupui-address-compound-fields .slds-form-element_address .slds-form-element__row {

    align-items: start !important;

}

/*PLP - Product Listining Page*/


@media (max-width: 616px) {

    .vwgroupui-product-grid .slds-size_1-of-1 {
        width: 50% !important;
    }

    .slds-grid.slds-grid_align-center.slds-wrap.vwgroupui-product-card-container {
        flex-direction: column !important;
    }

    .vwgroupui-product-card-container .slds-size_1-of-1 {
        width: 100% !important;
    }

    .vwgroupui-product-title-container span {

        font-size: var(--dxp-s-body-small-text-font-size) !important;
    }

    .vwgroupui-product-card-container .slds-p-around_small {
        padding-top: var(--groupui-sys-spacing-200);
        padding-left: var(--groupui-sys-spacing-200);
        padding-bottom: var(--groupui-sys-spacing-200);
        padding-right: var(--groupui-sys-spacing-200);
        padding-right: var(--groupui-sys-spacing-200);
    }
}

@media (max-width: 768px) {
    .vwgroupui-product-grid .slds-size_1-of-1 {
        width: 50%;
    }



    .slds-grid.slds-grid_align-center.slds-wrap.vwgroupui-product-card-container {
        flex-direction: column;
    }

    .vwgroupui-product-card-container .slds-size_1-of-1 {
        width: 100%;
    }

    .vwgroupui-product-title-container span {

        font-size: var(--dxp-s-body-small-text-font-size) !important;
    }

    .vwgroupui-product-card-container {
        margin: 12px !important;
    }


}

@media (max-width: 480px) {
    .vwgroupui-product-card-container {
        margin: 4px !important;
    }

    community_layout-section.vwgroupui-padding-mobile {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

        .vwgroupui-product-grid .slds-size_1-of-1 {
        width: 100% !important;
    }

}

.vwgroupui-hidden-element {
    display: none;
}

.vwgroupui-product-card-container {
    background: #008075;
    border-radius: var(--groupui-sys-border-radius-m);
    padding-top: var(--groupui-sys-spacing-600);
    padding-bottom: var(--groupui-sys-spacing-300);
    margin: 20px;
}


.vwgroupui-product-image-container img {
    width: 213px;
    height: 121px;
}

.vwgroupui-product-title-container span {
    color: var(--groupui-sys-color-navigation-unselected-basic-default-inverse);
    text-decoration: underline;
}

.vwgroupui-banner-title h1 {
    font-size: var(--groupui-sys-font-size-1500) !important;
}

@media (max-width: 480px) {
    .vwgroupui-banner-title h1 {
        font-size: var(--groupui-sys-font-size-1000) !important;
    }
}

community_layout-section.vwgroupui-full-width-container.comm-section-container {
    --dxp-s-section-columns-max-width: 100;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}

/*SLDS Box*/

.slds-box {
    border: 1px solid var(--groupui-sys-color-card-border-level-2) !important;
    border-radius: var(--groupui-sys-border-radius-m) !important;
}

/*SLDS Card*/

.slds-card {
    border-radius: var(--groupui-sys-border-radius-m) !important;
    border: 1px solid var(--groupui-sys-color-card-border-level-2) !important;
    padding: var(--groupui-sys-spacing-600);
}

@media (max-width: 480px) {
    .slds-card {
        padding: var(--groupui-sys-spacing-400);
    }
}



/*VW GroupUI Standard Record Detail component*/

.vwgroupui-r-detail-view .slds-form-element_readonly {
    border-bottom: none !important;
}

.vwgroupui-r-detail-view .slds-form-element__label {
    margin-bottom: var(--groupui-sys-spacing-200) !important;
    font-weight: var(--groupui-sys-font-weight-bold) !important;
}


.vwgroupui-r-card-list .record-list-table-wrapper {
    border-radius: var(--groupui-sys-border-radius-m) !important;
    border-color: var(--groupui-sys-color-card-border-level-2) !important;
    padding: var(--groupui-sys-spacing-600) !important;

}

/*VW GroupUI Standard Record List component*/

.vwgroupui-r-card-list .record-list-table-wrapper .listViewContainer .slds-card__body .slds-size_1-of-3 {
    border-radius: var(--groupui-sys-border-radius-m) !important;
    border-color: var(--groupui-sys-color-card-border-level-2) !important;
    padding: var(--groupui-sys-spacing-600) !important;
}

/*Login Page*/

dxp_layout-columns.vwgroupui-login-form-header {
    max-width: 19rem;
    margin: auto;
    width: -webkit-fill-available;
    border-bottom: 1px solid var(--groupui-sys-color-card-border-level-2);
    padding-bottom: 1.5rem;
}


.vwgroupui-login-page .comm-login-form__container.slds-col.slds-grow.slds-card {
    border: unset !important;
    border-radius: 0px !important;
}

.vwgroupui-login-page .comm-login-form__container {
    padding: 0px !important;
    max-width: 19rem !important;
    padding-top: 1.5rem !important;
}

.vwgroupui-login-page .slds-border--top,
.vwgroupui-login-page .slds-border_top {
    border-top: unset !important;
}

.vwgroupui-login-form-header a {
    text-decoration: none !important;
}

.vwgroup-login-form .slds-form-element__label {
    font-weight: var(--groupui-sys-font-weight-bold) !important;
}

.vwgroupui-login-page .comm-login-form__self-register {
    display: none !important;
}

.vwgroupui-login-page .comm-login-form__link-section {
    justify-content: center;
    margin-top: -12px !important;
}

.vwgroupui-login-page .comm-login-form__link-section a {
    text-decoration: none !important;
}


@media (max-width: 1024px) {

    dxp_content_layout-banner.vwgroupui-external-theme-banner-image .dxp-block-image-host {
        max-height: 321px !important;
        min-height: unset !important;
    }

}


@media (max-width: 480px) {

    dxp_content_layout-banner.vwgroupui-external-theme-banner-image .dxp-block-image-host {
        max-height: 216px !important;
        min-height: unset !important;
    }

}

/*General Spinner*/

.slds-spinner_container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

}


/*Font Family Marketing OverRide*/


.vwgroupui-marketing-font-family h1,
.vwgroupui-marketing-font-family h2,
.vwgroupui-marketing-font-family h3,
.vwgroupui-marketing-font-family h4,
.vwgroupui-marketing-font-family h5,
.vwgroupui-marketing-font-family h6 {
    font-family: "TheGroupHEAD-Light" !important;
}


h1.vwgroupui-marketing-font-family,
h2.vwgroupui-marketing-font-family,
h3.vwgroupui-marketing-font-family,
h4.vwgroupui-marketing-font-family,
h5.vwgroupui-marketing-font-family,
h6.vwgroupui-marketing-font-family {
    font-family: "TheGroupHEAD-Light" !important;
}


/*Salesforce Radio Buttons - Form Elements*/
.slds-radio_faux:hover {
    background: var(--groupui-sys-color-action-subtle-hover) !important;
    border-color: var(--groupui-sys-color-action-basic-default) !important;
}

.slds-radio_faux:focus {
    background: var(--groupui-sys-color-action-silent-default) !important;
    border: 2px solid var(--groupui-sys-color-action-basic-default) !important;
    box-shadow: unset !important;
}

.slds-radio [type="radio"][disabled]+.slds-radio__label .slds-radio_faux {
    background: var(--groupui-sys-color-action-silent-disabled) !important;
    border-color: var(--groupui-sys-color-action-basic-disabled) !important;
}

.slds-radio [type="radio"]:focus:checked+.slds-radio__label .slds-radio_faux {

    box-shadow: unset !important;

}

.slds-radio [type="radio"][disabled]+.slds-radio__label .slds-form-element__label {
    color: var(--groupui-sys-color-text-weakest) !important;
}

.slds-radio .slds-radio--faux,
.slds-radio .slds-radio_faux {
    width: 28px;
    height: 28px;
}

.slds-radio [type=radio]:checked+.slds-radio__label .slds-radio_faux:after {
    width: 20px;
    height: 20px;
}


.slds-radio .slds-form-element__label {
    font-size: var(--groupui-sys-font-size-450) !important;
}

.slds-form-element__control .slds-radio {
    margin-top: 16px !important;
}


/*Tablet*/
@media (max-width: 1024px) {

    .slds-radio .slds-radio--faux,
    .slds-radio .slds-radio_faux {
        width: 24px;
        height: 24px;
    }

    .slds-radio [type=radio]:checked+.slds-radio__label .slds-radio_faux:after {
        width: 16px;
        height: 16px;
    }

    .slds-radio .slds-form-element__label {
        font-size: var(--groupui-sys-font-size-400) !important;
    }

}

.slds-radio .slds-form-element__label {
    font-weight: var(--groupui-sys-font-weight-normal) !important;
}

/*Mobile*/
@media (max-width: 768px) {

    .slds-radio .slds-radio--faux,
    .slds-radio .slds-radio_faux {
        width: 20px !important;
        height: 20px !important;
    }

    .slds-radio [type=radio]:checked+.slds-radio__label .slds-radio_faux:after {
        width: 14px !important;
        height: 14px !important;
    }


    .slds-radio .slds-form-element__label {
        font-size: var(--groupui-sys-font-size-350) !important;
    }
}

/*Salesforce Checkbox*/


.slds-checkbox_faux:hover {
    background: var(--groupui-sys-color-action-subtle-hover) !important;
    border-color: var(--groupui-sys-color-action-basic-default) !important;
}

.slds-checkbox_faux:focus {
    background: var(--groupui-sys-color-action-silent-default);
    border: 2px solid var(--groupui-sys-color-action-basic-default) !important;
    --slds-c-checkbox-shadow: none !important;
    -webkit-transition: unset !important;
    transition: unset !important;
}

.slds-checkbox .slds-checkbox_faux {

      -webkit-transition: unset !important;
    transition: unset !important;
}

.slds-checkbox [type=checkbox][disabled]+.slds-checkbox__label .slds-checkbox_faux {
    background: var(--groupui-sys-color-action-silent-disabled) !important;
    border-color: var(--groupui-sys-color-action-basic-disabled) !important;

}

.slds-checkbox [type="checkbox"]:checked+.slds-checkbox__label .slds-checkbox_faux:focus {

    --slds-c-checkbox-shadow: unset !important;
    box-shadow: unset !important;
    background: var(--groupui-sys-color-action-basic-default) !important;
    border-color: var(--groupui-sys-color-action-basic-default) !important;
    -webkit-transition: unset !important;
    transition: unset !important;
    border: 2px solid var(--groupui-sys-color-action-basic-default) !important;

}

.slds-checkbox [type=checkbox][disabled]+.slds-checkbox__label .slds-form-element__label {
    color: var(--groupui-sys-color-text-weakest) !important;
}

.slds-checkbox [type='checkbox']:focus+.slds-checkbox__label .slds-checkbox_faux {
    --slds-c-checkbox-shadow: unset !important;
    box-shadow: unset !important;
    border: 2px solid var(--groupui-sys-color-action-basic-default) !important;
    -webkit-transition: unset !important;
    transition: unset !important;
}

.slds-checkbox [type="checkbox"]:checked {
    background: var(--groupui-sys-color-action-basic-default) !important;
    border-color: var(--groupui-sys-color-action-basic-default) !important;

}

.slds-checkbox [type="checkbox"]:checked+.slds-checkbox__label .slds-checkbox_faux:active {
    background: var(--groupui-sys-color-action-basic-default) !important;
    border-color: var(--groupui-sys-color-action-basic-default) !important;

}

.slds-checkbox [type="checkbox"]:checked+.slds-checkbox__label .slds-checkbox_faux:hover {
    background: var(--groupui-sys-color-action-basic-default) !important;
    border-color: var(--groupui-sys-color-action-basic-default) !important;
    -webkit-transition: unset !important;
    transition: unset !important;
}

/*Desktop*/

.slds-checkbox .slds-checkbox__label .slds-form-element__label {
    font-size: var(--groupui-sys-font-size-450) !important;
}

.slds-checkbox_faux {
    width: 28px !important;
    height: 28px !important;
}


/*Tablet*/

@media (max-width: 1024px) {

    .slds-checkbox .slds-checkbox__label .slds-form-element__label {
        font-size: var(--groupui-sys-font-size-400) !important;
    }

    .slds-checkbox_faux {
        width: 24px !important;
        height: 24px !important;
    }
}


/*Mobile*/
@media (max-width: 768px) {

    .slds-checkbox .slds-checkbox__label .slds-form-element__label {
        font-size: var(--groupui-sys-font-size-350) !important;
    }

    .slds-checkbox_faux {
        width: 20px !important;
        height: 20px !important;
    }

}

/*SLDS Data Table component*/


.slds-card__body.slds-card__body_inner {
    padding: 0px;
    margin: 0px;
}

.slds-card__header.slds-grid {
    padding: 0px;
    margin: 0px;
    margin-bottom: var(--groupui-sys-spacing-600);
}

.slds-table--bordered, .slds-table_bordered {
    border-collapse: separate;
    border-top: unset !important;
    border-bottom: unset !important;
}

.slds-table thead th {
    background-color: white;
    color: black;
    padding: var(--groupui-sys-spacing-300);
    font-weight: 700;
    line-height: normal;
}

.slds-table td, .slds-table th {
    padding: var(--groupui-sys-spacing-300);
    white-space: nowrap;
    position: relative;
}

.slds-table--bordered tbody td, .slds-table--bordered tbody th, .slds-table_bordered tbody td, .slds-table_bordered tbody th {
    border-top: 1px solid var(--groupui-sys-color-card-border-level-2) !important;
}

tr.slds-hint-parent:hover > td {
    background: var(--groupui-sys-color-background-base) !important;
    outline: none !important;
    box-shadow: none !important;
}

.vwgroupui-help-text{
    font-size: 12px;
    color: var(--groupui-sys-color-text-weak);
}

.vwgroupui-success-text{
    color: var(--groupui-sys-color-success-basic-default);
  
}

.slds-table--cell-buffer tr>td:first-child, .slds-table--cell-buffer tr>th:first-child, .slds-table_cell-buffer tr>td:first-child, .slds-table_cell-buffer tr>th:first-child {
    padding-left: var(--groupui-sys-spacing-300);
}


/*Password Change Standard Component*/

.vwgroupui-password-change .slds-card__body {
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
}


.vwgroupui-password-change b.dxp-text-heading-medium {
    font-size: var(--dxp-s-text-heading-small-font-size) !important;
    font-weight: bold !important;
}

.vwgroupui-password-change .slds-card__header.slds-grid {
    margin-bottom: 0px !important;
}

/*Desktop*/

.vwgroupui-password-change .slds-card {
    min-height: 155.8px !important;
}


[kx-scope=button][kx-type=underline]:after {
  
    background: unset !important;
   
}

/*Profile Update Banner*/


/*Mobile*/

@media (min-width: 120px) and (max-width: 768px) {   
    
    c-er-win-success-notification-banner{

        top: 122px !important;
        right: 1rem;
        left: 1rem;
        margin-right: unset !important;
    }
}

/*Tablet*/

@media (min-width: 1024px) and (max-width: 1280px) {
    c-er-win-success-notification-banner{
    margin-right: 5.4rem;
    top: 104px;
    width: -webkit-fill-available;
    position: fixed;
    justify-self: flex-end;
    max-width: 794px;

}

}


/*Tablet 2*/
@media (min-width: 769px) and (max-width: 1024px) {

    c-er-win-success-notification-banner{
    margin-right: 1.5rem !important;
    top: 172px !important;
    width: -webkit-fill-available;
    position: fixed;
    justify-self: flex-end;
    max-width: 794px;

}
}
/*Desktop*/

c-er-win-success-notification-banner{
    top: 104px;
    width: -webkit-fill-available;
    position: fixed;
    justify-self: flex-end;
    max-width: 794px;

}



/*Standard Tabs*/

.slds-tabs_default__nav{
    border-bottom: 1px solid #DFE2E6 !important;
    gap: 32px !important;
}

.slds-is-active {
    border-bottom: 2px solid #008075!important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.slds-is-active.slds-tabs_default__link{
    color: #008075 !important;
}

.slds-tabs_default__item {
    border-bottom: 1px solid transparent;
    padding-right: 0px !important;
    padding-left: 0px !important;
}

.slds-tabs--default__link, .slds-tabs_default__link{
    height: unset !important;
    padding-bottom: 10px !important;
    padding-left: 0px;
    padding-right: 0px;
}

.slds-tabs--default__item.slds-active .slds-tabs--default__link:hover, .slds-tabs--default__item.slds-active .slds-tabs_default__link:hover, .slds-tabs--default__item.slds-is-active .slds-tabs--default__link:hover, .slds-tabs--default__item.slds-is-active .slds-tabs_default__link:hover, .slds-tabs_default__item.slds-active .slds-tabs--default__link:hover, .slds-tabs_default__item.slds-active .slds-tabs_default__link:hover, .slds-tabs_default__item.slds-is-active .slds-tabs--default__link:hover, .slds-tabs_default__item.slds-is-active .slds-tabs_default__link:hover {
    text-decoration: none !important;
}

.slds-tabs--default__link:hover, .slds-tabs_default__link:hover {
    text-decoration: none !important;
}


/* CONTACT PAGE - FILE UPLOAD COMPONENT */
.fileClass {
    width:100% !important;
}
.fileClass .slds-file-selector {
    width:100% !important;
}
.fileClass .slds-file-selector__dropzone {
    width:100% !important;
}
.fileClass .slds-file-selector__dropzone slot {
    display:inline-block;
    width: 100% !important;
    padding-top: 2%;
    padding-bottom:2%;
}
.fileClass .slds-file-selector__dropzone slot .slds-file-selector__body{
    display: flex !important;
    flex-direction: column !important;
}
.slds-file-selector--files .slds-file-selector__text, .slds-file-selector_files .slds-file-selector__text {
    margin: 0 !important;
}

.slds-breadcrumb__item > a {
	text-decoration: none !important;
}
.slds-breadcrumb__item:not(:first-child) {
	padding-left: 8px;      
}
.slds-breadcrumb__item:last-child > a {
    color: #A8ADB3 !important;
    text-decoration: none !important;
    pointer-events: none;
    cursor: default;
}

.slds-breadcrumb .slds-breadcrumb__item:not(:first-child):before,
.slds-breadcrumb .slds-list__item:not(:first-child):before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16' width='16' height='16'%3E%3Cpath fill='%23008075' fill-rule='evenodd' d='M5.555 12.743l.78.624 4-5a.5.5 0 0 0 .054-.542l-.053-.082-4-5-.781.624 3.75 4.688-3.75 4.688z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
    top: 2px;
}