/* HCP v2 Complex styling for multicomponents structure */
:root {
    --slds-c-tooltip-text-color: var(--hcp-color-med-grey, #748194);
    --slds-c-tooltip-color-background: var(--hcp-background-primary, #F2F4F7);
    --slds-c-checkbox-mark-color-foreground: var(--hcp-color-nineth, #7F56D9);
}

.hcp-v2-theme {
    --dxp-g-destructive: var(--hcp-color-error, #D92D20);
    --slds-g-color-error-base-40: var(--hcp-color-error, #D92D20);
    --slds-c-tabs-list-sizing-border: 0;

    /* Paddings */
    --slds-c-button-spacing-block-start: 10px;
	--slds-c-button-spacing-block-end: 10px;
    --slds-c-button-spacing-inline-start: 18px;
    --slds-c-button-spacing-inline-end: 18px;
    --slds-c-button-neutral-spacing-inline-start: 18px;
    --slds-c-button-neutral-spacing-inline-end: 18px;

    /* Focus styling */
    --slds-g-shadow-6: 0 0 3px var(--hcp-color-focus, #E9D7FE);
    --slds-g-color-brand-base-40: var(--hcp-color-focus, #E9D7FE);
	--sds-c-button-shadow-focus: 0 0 0 3px var(--hcp-color-focus, #E9D7FE);

    /* Button styling */
	--slds-c-button-color-border-active: var(--hcp-color-focus, #E9D7FE);
	--sds-c-button-neutral-color-background: var(--hcp-color-white, #FFFFFF);
    --sds-c-button-neutral-color-border: var(--hcp-color-grey, #D0D5DD);
    --sds-c-button-neutral-color-background-hover: var(--hcp-background-second, #F9FAFB);
    --sds-c-button-neutral-color-border-hover: var(--hcp-color-grey, #D0D5DD);
    --sds-c-button-neutral-color-background-active: var(--hcp-background-second, #F9FAFB);
    --sds-c-button-neutral-color-border-active: var(--hcp-color-grey, #D0D5DD);
    --sds-c-button-outline-brand-color-background: var(--hcp-color-white, #FFFFFF);
    --sds-c-button-outline-brand-color-border: var(--hcp-color-grey, #D0D5DD);
    --sds-c-button-outline-brand-color-background-hover: var(--hcp-background-second, #F9FAFB);
    --sds-c-button-outline-brand-color-border-hover: var(--hcp-color-grey, #D0D5DD);
    --sds-c-button-outline-brand-color-background-active: var(--hcp-background-second, #F9FAFB);
    --sds-c-button-outline-brand-color-border-active: var(--hcp-color-grey, #D0D5DD);
    --sds-c-button-text-destructive-color-border: var(--hcp-color-error, #D92D20);
    --sds-c-button-text-destructive-color-background-hover: var(--hcp-background-second, #F9FAFB);
    --sds-c-button-text-destructive-color-border-hover: var(--dxp-g-destructive-1);
    --sds-c-button-text-destructive-color-background-active: var(--hcp-background-second, #F9FAFB);
    --sds-c-button-text-destructive-color-border-active: var(--dxp-g-destructive-1);

    /* Link styling */
    --dxp-c-link-color-background: transparent;
    --dxp-c-link-color-background-focus: var(--hcp-color-sixth, #F3D8EA);

    /* Toggle styling */
    --slds-c-checkbox-toggle-color-background: var(--hcp-background-primary, #F2F4F7);
    --slds-c-checkbox-toggle-color-border: var(--hcp-background-primary, #F2F4F7);
    --slds-c-checkbox-toggle-switch-color-background: var(--hcp-color-white, #FFFFFF);
    --slds-c-checkbox-toggle-color-background-hover: var(--hcp-color-light-grey, #EAECF0);
    --slds-c-checkbox-toggle-color-border-hover: var(--hcp-color-light-grey, #EAECF0);
    --slds-c-checkbox-toggle-shadow: 0 0 0 2px var(--hcp-color-focus, #E9D7FE), 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    --slds-c-checkbox-toggle-switch-color-background-checked: var(--hcp-color-white, #FFFFFF);
    --slds-c-checkbox-toggle-mark-color-foreground: var(--hcp-color-white, #FFFFFF);
    --slds-c-checkbox-toggle-color-background-checked-focus: var(--hcp-color-nineth, #7F56D9);

    /* Messages */
    --dxp-g-warning-contrast: var(--hcp-color-charcoal, #101828);
    --dxp-g-success-contrast: var(--hcp-color-white, #FFFFFF);
    --dxp-g-success: var(--hcp-color-success, #2E844A);
    --dxp-g-neutral-contrast: var(--hcp-color-charcoal, #101828);
    --dxp-g-neutral: var(--hcp-color-light-grey, #EAECF0);
}

h1 {
	font-size: var(--dxp-s-text-heading-extra-large-font-size,var(--dxp-g-font-size-9));
    font-style: var(--dxp-s-text-heading-extra-large-font-style);
    font-family: var(--dxp-s-text-heading-extra-large-font-family,var(--dxp-g-heading-font-family));
    font-weight: var(--dxp-s-text-heading-extra-large-font-weight);
    text-decoration: var(--dxp-s-text-heading-extra-large-text-decoration);
    text-transform: var(--dxp-s-text-heading-extra-large-text-transform);
    line-height: var(--dxp-s-text-heading-extra-large-line-height);
    letter-spacing: var(--dxp-s-text-heading-extra-large-letter-spacing);
    text-shadow: var(--dxp-s-text-heading-extra-large-text-shadow);
    color: var(--dxp-s-text-heading-extra-large-color,var(--dxp-g-root-contrast));
}

h2 {
	font-size: var(--dxp-s-text-heading-large-font-size,var(--dxp-g-font-size-9));
    font-style: var(--dxp-s-text-heading-large-font-style);
    font-family: var(--dxp-s-text-heading-large-font-family,var(--dxp-g-heading-font-family));
    font-weight: var(--dxp-s-text-heading-large-font-weight);
    text-decoration: var(--dxp-s-text-heading-large-text-decoration);
    text-transform: var(--dxp-s-text-heading-large-text-transform);
    line-height: var(--dxp-s-text-heading-large-line-height);
    letter-spacing: var(--dxp-s-text-heading-large-letter-spacing);
    text-shadow: var(--dxp-s-text-heading-large-text-shadow);
    color: var(--dxp-s-text-heading-large-color,var(--dxp-g-root-contrast));
}

h3 {
	font-size: var(--dxp-s-text-heading-medium-font-size,var(--dxp-g-font-size-7));
    font-style: var(--dxp-s-text-heading-medium-font-style);
    font-family: var(--dxp-s-text-heading-medium-font-family,var(--dxp-g-heading-font-family));
    font-weight: var(--dxp-s-text-heading-medium-font-weight);
    text-decoration: var(--dxp-s-text-heading-medium-text-decoration);
    text-transform: var(--dxp-s-text-heading-medium-text-transform);
    line-height: var(--dxp-s-text-heading-medium-line-height);
    letter-spacing: var(--dxp-s-text-heading-medium-letter-spacing);
    text-shadow: var(--dxp-s-text-heading-medium-text-shadow);
    color: var(--dxp-s-text-heading-medium-color,var(--dxp-g-root-contrast));
}

h4 {
	font-size: var(--dxp-s-text-heading-small-font-size,var(--dxp-g-font-size-5));
    font-style: var(--dxp-s-text-heading-small-font-style);
    font-family: var(--dxp-s-text-heading-small-font-family,var(--dxp-g-heading-font-family));
    font-weight: var(--dxp-s-text-heading-small-font-weight);
    text-decoration: var(--dxp-s-text-heading-small-text-decoration);
    text-transform: var(--dxp-s-text-heading-small-text-transform);
    line-height: var(--dxp-s-text-heading-small-line-height);
    letter-spacing: var(--dxp-s-text-heading-small-letter-spacing);
    text-shadow: var(--dxp-s-text-heading-small-text-shadow);
    color: var(--dxp-s-text-heading-small-color,var(--dxp-g-root-contrast));
}

h5 {
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 2rem;
	color: var(--hcp-color-charcoal, #101828);
}

h6 {
	color: var(--hcp-color-primary, #B80E80);
	font-size: 1.5rem;
	font-style: italic;
	font-weight: 500;
	line-height: 2.25rem;
    margin-top: 2%;
    padding-left: 24px;
    border-left: 2px solid var(--hcp-color-primary, #B80E80);
}

.text-regular {
	font-weight: 400;
}

.text-medium {
	font-weight: 500;
}

.text-semibold {
	font-weight: 600;
}

.text-bold {
	font-weight: 700;
}

.display-xl {
	font-size: 3.75rem;
	line-height: 4.5rem;
	letter-spacing: -1.2px;
}

.display-lg {
	font-size: 3rem;
	line-height: 3.75rem;
	letter-spacing: -0.96px;
}

.display-md {
	font-size: 2.25rem;
	line-height: 2.75rem;
	letter-spacing: -0.72px;
}

.display-sm {
	font-size: 1.875rem;
	line-height: 2.375rem;
}

.display-xs {
	font-size: 1.5rem;
	line-height: 2rem;
}

.text-xl {
	font-size: 1.25rem;
	line-height: 1.875rem;
}

.text-lg {
	font-size: 1.125rem;
	line-height: 1.75rem;
}

.text-md {
	font-size: 1rem;
	line-height: 1.5rem;
}

.text-sm {
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.text-xs {
	font-size: 0.75rem;
	line-height: 1.125rem;
}

.text-interface {
	color: var(--hcp-color-black, #000000);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5rem;
}

.text-intro {
	color: var(--hcp-color-gark-grey, #575756);
	font-size: 1.25rem;
	font-style: italic;
	font-weight: 600;
	line-height: 1.875rem;
}

.text-bodycopy {
    color: var(--hcp-color-gark-grey, #575756);
    font-size: 1.125rem;
	line-height: 1.75rem;
}

.text-primary {
    color: var(--hcp-color-primary, #B80E80);
}

.text-secondary {
    color: var(--hcp-color-charcoal, #101828);
}

.bg-primary {
    background-color: var(--hcp-background-primary, #F2F4F7);
}

.bg-second {
    background-color: var(--hcp-background-second, #F9FAFB);
}

.bg-third {
    background-color: var(--hcp-background-third, #FFFFFF);
}

.bg-fourth {
    background-color: var(--hcp-color-seventh, rgba(243, 216, 234, 0.40));
}

.bg-gradient-primary {
    background: var(--hcp-gradient-primary, linear-gradient(135deg, #42307D 0%, #6B247E 100%));
}

.bg-gradient-second {
    background: var(--hcp-gradient-secondary, linear-gradient(315deg, #B80E80 0%, #4E2C7E 100%));
}

.hcp-id-error {
    --dxp-c-link-text-color: var(--hcp-color-error, #D92D20);
    --dxp-c-link-text-decoration: underline;
    --dxp-c-link-color-outline-focus: var(--hcp-color-error, #D92D20);
}

a:focus {
    --dxp-c-link-color-outline-focus: var(--hcp-color-primary, #B80E80);

    border-radius: 4px;
    outline-style: solid;
    outline-width: 1px;
}

a.slds-button {
    border-radius: var(--dxp-s-button-radius-border, 8px);
}

input:disabled {
    opacity: 1;
}

.slds-button--neutral,
.slds-button_neutral,
.slds-button_outline-brand {
	--sds-c-button-text-color: var(--hcp-color-gark-grey, #575756);
    --sds-c-button-text-color-hover: var(--hcp-color-gark-grey, #575756);
    --sds-c-button-text-color-active: var(--hcp-color-gark-grey, #575756);
}

.slds-button_brand:disabled, .slds-button_brand[disabled] {
    --dxp-g-neutral-2: var(--hcp-color-sixth, #F3D8EA);
    --slds-g-color-neutral-base-80: var(--hcp-color-sixth, #F3D8EA);
    --sds-c-button-brand-color-background-hover: var(--hcp-color-sixth, #F3D8EA);
    --sds-c-button-brand-color-background-active: var(--hcp-color-sixth, #F3D8EA);
    border-color: var(--hcp-color-light-grey, #EAECF0);
}

.slds-button_neutral:disabled, .slds-button_neutral[disabled],
.slds-button_outline-brand:disabled, .slds-button_outline-brand[disabled] {
    --dxp-g-neutral-2: var(--hcp-color-grey, #D0D5DD);
    --slds-g-color-neutral-base-80: var(--hcp-color-grey, #D0D5DD);
    --sds-c-button-text-color-hover: var(--hcp-color-grey, #D0D5DD);
    --sds-c-button-text-color-active: var(--hcp-color-grey, #D0D5DD);
    border-color: var(--hcp-color-light-grey, #EAECF0);
    background-color: var(--hcp-color-white, #FFFFFF);
}

.grey-button,
.language-selector .dxp-language-selector-button-primary button {
    --sds-c-button-neutral-color-background: var(--hcp-background-primary, #F2F4F7);
    --sds-c-button-neutral-color-border: var(--hcp-background-primary, #F2F4F7);
    --sds-c-button-text-color: var(--hcp-color-gark-grey, #575756);
    --sds-c-button-neutral-color-background-hover: var(--hcp-color-grey, #D0D5DD);
    --sds-c-button-neutral-color-border-hover: var(--hcp-color-grey, #D0D5DD);
    --sds-c-button-text-color-hover: var(--hcp-color-gark-grey, #575756);
    --sds-c-button-neutral-color-background-active: var(--hcp-color-grey, #D0D5DD);
    --sds-c-button-neutral-color-border-active: var(--hcp-color-grey, #D0D5DD);
    --sds-c-button-text-color-active: var(--hcp-color-gark-grey, #575756);
}

.pink-button {
    --sds-c-button-brand-color-background: var(--hcp-color-sixth, #F3D8EA);
    --sds-c-button-brand-color-border: var(--hcp-color-sixth, #F3D8EA);
    --sds-c-button-brand-text-color: var(--hcp-color-primary, #B80E80);
    --sds-c-button-brand-color-background-hover: var(--hcp-color-eighth, #E9B9D9);
    --sds-c-button-brand-color-border-hover: var(--hcp-color-eighth, #E9B9D9);
    --sds-c-button-brand-text-color-hover: var(--hcp-color-primary, #B80E80);
    --sds-c-button-brand-color-background-active: var(--hcp-color-sixth, #F3D8EA);
    --sds-c-button-brand-color-border-active: var(--hcp-color-sixth, #F3D8EA);
    --sds-c-button-brand-text-color-active: var(--hcp-color-primary, #B80E80);
    --sds-c-button-text-color-hover: var(--hcp-color-primary, #B80E80);
}

.button-link {
    --slds-c-button-spacing-block-start: 0;
	--slds-c-button-spacing-block-end: 0;
    --slds-c-button-spacing-inline-start: 0;
    --slds-c-button-spacing-inline-end: 0;
}

button .custom-icon {
    margin-right: 8px;
}

.hcp-full-width,
.hcp-full-width button {
    display: block;
    width: 100%;
}

.link-grey {
    --dxp-c-link-text-color: var(--hcp-color-gark-grey, #575756);
    --dxp-c-link-text-color-hover: var(--hcp-color-gark-grey, #575756);
    --dxp-c-link-text-color-focus: var(--hcp-color-gark-grey, #575756);
    --dxp-c-link-text-color-active: var(--hcp-color-gark-grey, #575756);
    --dxp-c-link-color-background-focus: var(--hcp-background-primary, #F2F4F7);
}

.link-grey:focus {
    --dxp-c-link-color-outline-focus: var(--hcp-color-gark-grey, #575756);
}

.link-grey.active {
    --dxp-c-link-text-color: var(--hcp-color-primary, #B80E80);
    --dxp-c-link-text-color-hover: var(--hcp-color-primary, #B80E80);
    --dxp-c-link-text-color-focus: var(--hcp-color-primary, #B80E80);
    --dxp-c-link-text-color-active: var(--hcp-color-primary, #B80E80);
    --dxp-c-link-color-background-focus: var(--hcp-color-sixth, #F3D8EA);
}

.link-grey.active:focus {
    --dxp-c-link-color-outline-focus: var(--hcp-color-primary, #B80E80);
}

.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.banner {
    --dxp-c-link-text-color: #fff;
    --dxp-c-link-text-color-hover: #fff;
    --dxp-c-link-text-color-focus: #fff;
    --dxp-c-link-text-color-active: #fff;

    padding: 14px 12px;
    background: var(--hcp-color-primary, #B80E80);
    color: var(--hcp-color-white, #fff);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.banner a {
    --dxp-c-link-text-decoration: underline;
}

.menu-item {
    margin: 0 0 24px;
    font-size: 30px;
    font-weight: 500;
    line-height: 38px;
}

.menu-item {
    --dxp-c-link-text-color: var(--hcp-color-gark-grey, #575756);
    --dxp-c-link-text-color-hover: var(--hcp-color-gark-grey, #575756);
    --dxp-c-link-text-color-focus: var(--hcp-color-gark-grey, #575756);
    --dxp-c-link-text-color-active: var(--hcp-color-gark-grey, #575756);
    --dxp-c-link-color-background-focus: var(--hcp-background-primary, #F2F4F7);
}

.menu-item:focus {
    --dxp-c-link-color-outline-focus: var(--hcp-color-gark-grey, #575756);
}

.menu-item.active {
    --dxp-c-link-text-color: var(--hcp-color-primary, #B80E80);
    --dxp-c-link-text-color-hover: var(--hcp-color-primary, #B80E80);
    --dxp-c-link-text-color-focus: var(--hcp-color-primary, #B80E80);
    --dxp-c-link-text-color-active: var(--hcp-color-primary, #B80E80);
    --dxp-c-link-color-background-focus: var(--hcp-color-sixth, #F3D8EA);
}

.menu-item.active:focus {
    --dxp-c-link-color-outline-focus: var(--hcp-color-primary, #B80E80);
}

.banner a:focus,
.footer a:focus,
.footer-links .menu-item:focus,
.msg-wrapper .msg-link:focus {
    --dxp-c-link-color-background-focus: initial;
    --dxp-c-link-color-outline-focus: var(--hcp-color-white, #FFFFFF);
}

.header {
    --slds-c-button-spacing-inline-start: 16px;
    --slds-c-button-spacing-inline-end: 16px;
    --slds-c-button-brand-spacing-inline-start: 16px;
    --slds-c-button-brand-spacing-inline-end: 16px;
    --slds-c-button-neutral-spacing-inline-start: 16px;
    --slds-c-button-neutral-spacing-inline-end: 16px;
}

.header-mobile .menuIcon {
    --slds-c-button-spacing-block-start: 8px;
	--slds-c-button-spacing-block-end: 8px;
    --slds-c-button-spacing-inline-start: 8px;
    --slds-c-button-spacing-inline-end: 8px;
}

.header-desktop .logout {
    --sds-c-button-text-color: var(--hcp-color-gark-grey, #575756);
    --sds-c-button-text-color-hover: var(--hcp-color-gark-grey, #575756);
    --sds-c-button-text-color-active: var(--hcp-color-gark-grey, #575756);
    --sds-c-button-neutral-color-background: var(--hcp-color-white, #FFFFFF);
    --sds-c-button-neutral-color-border: var(--hcp-color-white, #FFFFFF);
    --sds-c-button-neutral-color-background-hover: var(--hcp-background-primary, #F2F4F7);
    --sds-c-button-neutral-color-border-hover: var(--hcp-background-primary, #F2F4F7);
    --sds-c-button-neutral-color-background-active: var(--hcp-background-primary, #F2F4F7);
    --sds-c-button-neutral-color-border-active: var(--hcp-background-primary, #F2F4F7);
}

.language-selector {
    --dxp-c-section-content-spacing-block-start: 0;
    --dxp-c-section-content-spacing-block-end: 0;
    --dxp-c-section-content-spacing-inline-start: 0;
    --dxp-c-section-content-spacing-inline-end: 0;
    --dxp-c-section-content-spacing-block-start-mobile: 0;
    --dxp-c-section-content-spacing-block-end-mobile: 0;
    --dxp-c-section-content-spacing-inline-start-mobile: 0;
    --dxp-c-section-content-spacing-inline-end-mobile: 0;
}

.language-selector a:focus {
    border-radius: 0;
    outline: none;

}

.language-selector .dxp_base-languageSelector_languageSelector button {
    --sds-c-button-text-color: var(--hcp-color-gark-grey, #575756);
    --sds-c-button-text-color-hover: var(--hcp-color-gark-grey, #575756);
    --sds-c-button-text-color-active: var(--hcp-color-gark-grey, #575756);
}

.data-protect-nav .menu-item {
    margin: 0;
    padding: 10px 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.msg-wrapper .msg-link,
.footer-links .menu-item {
    --dxp-c-link-text-color: var(--hcp-color-white, #fff);
    --dxp-c-link-text-color-hover: var(--hcp-color-white, #fff);
    --dxp-c-link-text-color-focus: var(--hcp-color-white, #fff);
    --dxp-c-link-text-color-active: var(--hcp-color-white, #fff);
}

.footer .copyright-text,
.alt-footer .copyright-text,
.reg-footer .copyright-text {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.20);
    padding: 20px 0;
    flex-direction: column;
    color: var(--hcp-color-focus, #E9D7FE);
}

.alt-footer .copyright-text,
.reg-footer .copyright-text {
    border: none;
    padding: 0;
}

.component-box {
    border-radius: 12px;
    border: 1px solid var(--hcp-color-light-grey, #EAECF0);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.10);
}

.my-account-card .slds-form-element__label {
    --dxp-s-body-font-size: 1rem;
    --dxp-s-body-line-height: 1.5rem;
    --dxp-s-form-element-label-color: var(--hcp-color-black, #000000);
    font-weight: 600;

}

.my-account-card .slds-form-element__static {
    --dxp-s-body-line-height: 1.5rem;
    --dxp-g-root-contrast: var(--hcp-color-med-grey, #748194);
    font-size: 1rem;
}

.form-wrapper,
.message-wrapper {
    margin-top: 20px;
}

.accordion-panel .message-wrapper {
    margin: 0 0 20px;
}

.form-field .termsLabel {
    --dxp-g-spacing-medium: 20px;
    --dxp-s-form-element-label-font-size: 14px;
    --dxp-c-input-text-font-size: 16px;
    --dxp-c-placeholder-text-color: var(--hcp-color-med-grey, #748194);
    --slds-c-input-spacing-horizontal-start: 14px;
    --dxp-s-body-small-font-size: 14px;
    --dxp-s-form-element-color-border-focus: var(--hcp-color-nineth, #7F56D9);
    --slds-c-input-shadow-focus: 0 0 0 4px var(--hcp-color-focus, #E9D7FE), 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.form-field .slds-form-element__label .termsLabel {
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 6px;
}

.form-field .slds-form-element__help {
    line-height: 20px;
}

.field-select {
    --slds-g-color-neutral-base-50: var(--hcp-color-med-grey, #748194);
    --slds-c-input-color-border: var(--hcp-color-grey, #D0D5DD);
}

.field-select .slds-dropdown {
    --slds-c-icon-color-foreground-default: var(--hcp-color-nineth, #7F56D9);
    --slds-g-color-neutral-base-30: var(--hcp-color-gark-grey, #575756);
}

.field-select .slds-listbox__option-text--entity,
.field-select .slds-listbox__option-text_entity {
    font-weight: 700;
}

.field-select .slds-combobox__input.slds-has-focus,
.field-select .slds-combobox__input:focus {
    --slds-g-color-brand-base-60: var(--hcp-color-nineth, #7F56D9);
    box-shadow: 0 0 0 4px var(--hcp-color-focus, #E9D7FE), 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.field-with-icon {
    position: relative;
}

.field-with-icon .icon {
    --slds-c-button-spacing-inline-start: 5px;
    --slds-c-button-spacing-inline-end: 5px;
    --slds-c-button-spacing-block-start: 5px;
    --slds-c-button-spacing-block-end: 5px;

    position: absolute;
    top: 32px;
    right: 5px;
}

.field-with-icon .password-icon {
    top: 35px;
}

.field-with-icon input {
    padding-right: 37px;
}

.field-with-hint .form-field {
    --dxp-g-spacing-medium: 6px;
}

.field-hint {
    margin-bottom: 20px;
    color: var(--hcp-color-gark-grey, #575756);
}

.file-input {
    --dxp-g-spacing-medium: 5px;
}

.slds-has-error .slds-input:active,
.slds-has-error .slds-input:focus,
.slds-has-error .slds-combobox__input.slds-has-focus,
.slds-has-error .slds-combobox__input:focus {
    box-shadow: 0px 0px 0px 4px var(--hcp-color-seventh, rgba(243, 216, 234, 0.40)), 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.slds-has-error .slds-combobox__input.slds-has-focus,
.slds-has-error .slds-combobox__input:focus {
    border-color: var(--dxp-g-destructive);
}

.form-buttons {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 12px 16px;
    padding: 0 0 32px;
}

.form-buttons-inline {
    flex-direction: row;
    justify-content: center;
}

.secondary-form-button {
    flex-grow: 1;
}

.primary-form-button {
    flex-grow: 2;
}

.sign-up {
    margin-bottom: 32px;
    text-align: center;
}

.sign-up-link {
    margin-left: 4px;
}

.error-icon,
.success-icon  {
    --slds-c-icon-color-foreground-default: var(--hcp-color-white, #FFFFFF);
}

.info-icon {
    --slds-c-icon-color-foreground-default: var(--hcp-color-charcoal, #101828);
}

.warning-icon {
    --slds-c-icon-color-foreground-default: var(--hcp-color-charcoal, #101828);
    --slds-g-color-neutral-base-30: var(--hcp-color-charcoal, #101828);
}

.tag {
    color: var(--hcp-color-gark-grey, #575756);
    border: 1px solid var(--hcp-color-grey, #D0D5DD);
    background-color: var(--hcp-background-primary, #F2F4F7);
    border-radius: 8px;
}

.tag.selected {
    color: var(--hcp-color-primary, #B80E80);
    border-color: var(--hcp-color-eighth, #E9B9D9);
    background-color: var(--hcp-color-sixth, #F3D8EA);
}

.tags-editable .tag {
    position: relative;
    padding-left: 30px;
}

.tags-editable .tag:before {
    position: absolute;
    top: 0;
    left: 5px;
    width: 18px;
    height: 28px;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M9 3.75V14.25M3.75 9H14.25' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.tags-editable .tag:focus,
.tags-editable .tag:hover {
    background-color: var(--hcp-color-grey, #D0D5DD);
}

.tags-editable .tag:focus {
    outline: 0;
    box-shadow: var(--sds-c-button-shadow-focus,0 0 3px var(--dxp-s-button-color-focus, #F4EBFF));
}

.tags-editable .tag.selected {
    padding-left: 8px;
    padding-right: 30px;
}

.tags-editable .tag.selected:before {
    left: auto;
    right: 5px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M9 3L3 9M3 3L9 9' stroke='%23E9B9D9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.tags-editable .tag.selected:focus,
.tags-editable .tag.selected:hover {
    background-color: var(--hcp-color-eighth, #E9B9D9);
}

.tags-editable .tag.selected:hover:before,
.tags-editable .tag.selected:focus:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M9 3L3 9M3 3L9 9' stroke='%23B80E80' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.styled-list {
    margin-left: 16px;
}

.styled-list li {
    position: relative;
    padding-left: 40px;
    padding-bottom: 20px;
    line-height: 28px;
}

.styled-list li:last-of-type {
    padding-bottom: 0;
}

.styled-list li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Crect width='28' height='28' rx='14' fill='%23F3D8EA'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.9458 8.62169L11.5925 16.6834L9.3758 14.315C8.96747 13.93 8.3258 13.9067 7.85913 14.2334C7.40413 14.5717 7.2758 15.1667 7.5558 15.645L10.1808 19.915C10.4375 20.3117 10.8808 20.5567 11.3825 20.5567C11.8608 20.5567 12.3158 20.3117 12.5725 19.915C12.9925 19.3667 21.0075 9.81169 21.0075 9.81169C22.0575 8.73836 20.7858 7.79336 19.9458 8.61002V8.62169Z' fill='%23B80E80'/%3E%3C/svg%3E");
}

.dxp-tab-bar-container {
    gap: 8px;
}

.dxp-tab {
    outline: none;
}

.tile {
    border-radius: 6px;
    background: var(--hcp-color-white, #FFFFFF);
    box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.10);
    margin: 10px 10px 16px;
}

.tile .tile-image {
    margin-bottom: 20px;
}

.tile .tile-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
}

.tile .tile-category,
.tile .tile-name,
.tile-product .tile-button {
    margin-bottom: 10px;
}

.tile .title,
.tile .tile-name {
    overflow-wrap: break-word;
}

.tile .tile-description {
    margin-bottom: 16px;
    color: var(--hcp-color-gark-grey, #575756);
}

.tile-material .tile-image img {
    height: 300px;
}

.button-with-icon {
    --slds-c-button-spacing-inline-start: 45px;
    --slds-c-button-spacing-inline-end: 45px;
}

.button-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20px;
    margin: auto 0;
    width: 20px;
    height: 20px;
}

.tile-product,
.tile-material {
    padding: 15px;
}

.tile-product .tile-category {
    font-size: 12px;
    line-height: 18px;
    text-transform: uppercase;
}

.tile-news .tile-category,
.tile-product .tile-category,
.tile-promo .tile-category,
.tile-events .tile-name {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tile-news .tile-category {
    height: 20px;
}

.tile-product .tile-name h4 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tile-product .tile-description,
.tile-events .tile-description {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tile-team {
    padding: 32px 16px;
    border: 1px solid var(--hcp-color-light-grey, #EAECF0);
    border-radius: 16px;
}

.tile-team .tile-image {
    margin-bottom: 32px;
}

.tile-team .tile-image img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

.tile-team .tile-category {
    margin-bottom: 20px;
    min-height: 50px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tile-team .tile-name {
    display: -webkit-box;
    min-height: 60px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tile-team .tile-description {
    margin-bottom: 0;
    min-height: 72px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.tile-team .tile-description-long {
    margin-bottom: 0;
    min-height: 240px;
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.tile-team .tile-button {
    min-height: 45px;
}

.tile-news {
    padding: 16px 16px 32px 16px;
    border-radius: 0;
}

.tile-news .tile-image {
    margin-bottom: 32px;
}

.tile-news .tile-image img {
    height: 240px;
}

.tile-news .tile-name {
    position: relative;
    padding-right: 30px;
}

.tile-news .tile-link {
    --dxp-c-link-text-color: var(--dxp-s-text-heading-small-color,var(--dxp-g-root-contrast));
    --dxp-c-link-text-color-hover: var(--dxp-s-text-heading-small-color,var(--dxp-g-root-contrast));
    --dxp-c-link-text-color-active: var(--dxp-s-text-heading-small-color,var(--dxp-g-root-contrast));
}

.tile-news .link-icon {
    position: absolute;
    top: 2px;
    right: 0;
}

.tile-news .tile-name h4,
.tile-news .tile-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tile-news .tile-description {
    margin-bottom: 0;
}

.tile-news .tile-label {
    color: var(--hcp-color-med-grey, #748194);
}

.tile-news .tile-journal-image {
    height: 40px; 
    width: auto;
    object-fit: contain;
}

.juisci-tile-url {
    --dxp-s-link-text-decoration-hover: none;
}

.juisci-tile-url:hover .tile-title {
    --dxp-s-text-heading-small-text-decoration: underline;
}

.tile-promo {
    border-radius: 16px;
    border: 1px solid var(--hcp-color-light-grey, #EAECF0);
    overflow: hidden;
}

.tile-promo .tile-image {
    margin-bottom: 0;
}

.tile-promo .tile-image img {
    height: 240px;
    box-shadow: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
}
  
.tile-promo .tile-content {
    padding: 24px;
}

.tile-promo .tile-name {
    margin-bottom: 24px;
}

.tile-promo .tile-name h5 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tile-promo .tile-button {
    width: 100%;
}

.tile-events {
    padding: 24px;
}

.tile-events .tile-image {
    margin-bottom: 24px;
}

.tile-events .tile-event-details {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0 10px;
}

.tile-events .tile-image img {
    height: 160px;
}

.tile-events .tile-category span {
    line-height: 24px;
    vertical-align: middle;
}

.tile-ongoing-events .tile-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.registration-success {
    min-height: 100vh;
}

.registration-success-content {
    max-width: 590px;
    padding: 36px 24px;
    border-radius: 8px;
}

.subscription {
    --dxp-g-spacing-medium: 0;
}

.subscription label {
    --dxp-s-form-element-label-color: var(--hcp-color-primary, #B80E80);
    --dxp-s-form-element-label-font-size: 20px;
    --dxp-g-neutral-2: var(--hcp-color-light-grey, #EAECF0);
    --dxp-s-form-element-label-font-weight: 700;
    --dxp-g-brand: var(--hcp-color-nineth, #7F56D9);
    --slds-g-color-neutral-base-50: var(--hcp-color-light-grey, #EAECF0);
    --slds-g-shadow-5: 0 0 0 2px var(--hcp-color-focus, #E9D7FE), 0px 1px 2px 0px rgba(16, 24, 40, 0.05);

    font-weight: 700;
    flex-direction: column;
}

.video-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.audio-player {
    border: none;
    width: 100%;
    height: 500px;
}

.site-map {
    --dxp-c-link-text-decoration: underline;
}

.site-map .nested-list {
    list-style-position: inside;
}

.loader-wrapper {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0,0,0,0.6);
    z-index: 1000;
}

.loader-content {
    height: 100%;
}

.loader {
    width: 48px;
    height: 48px;
    display: inline-block;
    position: relative;
}

.loader::after,
.loader::before {
    content: '';  
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--hcp-color-white, #FFFFFF);
    position: absolute;
    left: 0;
    top: 0;
    animation: animloader 2s linear infinite;
}

.loader::after {
    animation-delay: 1s;
}
  
.hcp-tabs-and-accordion a[tabsaccordions-tabbar_tabbar] {
    padding: 0 10px;
}

.tile-promo .tile-button img {
    padding-right: 10px;
}

.modal-closeX-button-style .slds-modal__close {
    width: auto;
}

@keyframes animloader {
    0% {
      transform: scale(0);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 0;
    }
}

@media only screen and (min-width: 523px) {
    .audio-player {
        height: 220px;
    }
}

.hcp-list-style ul {
    list-style: inside;
    padding-left: 25px;
}

.hcp-list-style ol {
    list-style: decimal;
    padding-left: 40px;
}

.hcp-search-input input {
    background-color: var(--hcp-color-white, #FFFFFF);
}

.hcp-search-results {
    --dxp-s-text-heading-small-font-size: 16px;
    --dxp-s-text-heading-small-font-weight: 400;
    --dxp-s-text-heading-medium-font-size: 16px;
    --dxp-s-text-heading-medium-font-weight: 400;
}

/* Tablet up */
@media only screen and (min-width: 768px) {
    .tile-product .tile-name {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 72px;
    }
    
    .tile-product .tile-name h4 {
        font-size: 30px;
        line-height: 38px;
    }
    
    .tile-product .tile-category {
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
    }

    .tile-product .tile-description {
        height: 96px;
    }
    
    .tile-news .tile-name {
        height: 65px;
    }
    
    .tile-news .tile-description {
        height: 48px;
    }

    .tile-promo .tile-name {
        height: 96px;
    }

    .tile-promo.related-article .tile-name {
        height: auto;
    }
    
    .tile-past-events .tile-image img {
        height: 240px;
    }
    
    .tile-events .tile-category {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .tile-events .tile-description {
        height: 72px;
        -webkit-line-clamp: 3;
    }

    .subscription label {
        flex-direction: row;
        justify-content: space-between;
    }

    .site-map {
        text-align: center;
    }
    
    .tile-material .tile-name {
        height: 90px;
    }

    .tile-material .tile-name h5 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* Desktop up */
@media only screen and (min-width: 1024px) {
    .container {
        max-width: 1200px;
    }

    .banner {
        text-align: center;
    }

    .footer-links .menu-item {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
    }

    .menu-item {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
    }

    .footer .copyright-text {
        border: none;
        padding: 0;
        flex-direction: row;
    }

    .alt-footer .copyright-text {
        flex-direction: row;
        gap: 0 48px;
        color: var(--hcp-color-gark-grey, #575756);
    }

    .reg-footer .copyright-text {
        flex-direction: row;
        gap: 0 48px;
    }

    .alt-footer .icon {
        filter: brightness(0) saturate(100%) invert(35%) sepia(1%) saturate(0%) hue-rotate(104deg) brightness(93%) contrast(92%);
    }

    .data-protect-nav .navbar ul {
        justify-content: flex-end;
    }

    .data-protect-nav .menu-item {
        padding: 0;
        font-weight: 400;
    }

    .form-buttons {
        flex-direction: row;
    }

    .tile-promo {
        border-radius: 6px;
    }
    
    .tile-promo .tile-image img {
        height: 250px;
    }
    
    .tile-promo .tile-name h5 {
        font-size: 18px;
        line-height: 28px;
    }
    
    .tile-promo .tile-button {
        width: auto;
    }

    .tile-promo.related-article .tile-image {
        padding: 24px 0 24px 24px;
    }

    .tile-promo.related-article .tile-image img {
        height: 240px;
        box-shadow: none;
    }

    .tile-events .tile-event-details {
        flex-direction: row;
    }

    .tile-past-events .tile-event-details {
        min-height: 68px;
    }

    .tile-ongoing-events {
        padding: 0;
        overflow: hidden;
    }

    .tile-ongoing-events .tile-image {
        margin-bottom: 0;
    }

    .tile-ongoing-events .tile-image img {
        height: 430px;
    }

    .tile-ongoing-events .tile-content {
        padding: 24px 45px;
    }

    .tile-ongoing-events:not(.related-article) .tile-name h4 {
        font-size: 24px;
        line-height: 32px;
    }

    .tile-ongoing-events.related-article {
        padding: 24px;
    }

    .tile-ongoing-events.related-article .tile-image img {
        height: 260px;
    }

    .tile-ongoing-events.related-article .tile-content {
        padding: 0 0 0 24px;
    }

    .tile-promo.related-article .tile-image img {
        height: 240px;
        box-shadow: none;
    }

    .registration-success-content {
        padding: 90px 115px;
    }

    .tile-news .tile-specs {
        height: 48px;
    }

    .tile-news .tile-title {
        height: 98px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .tile-news .tile-authors {
        height: 70px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}