/**
 *
 * CoreUI
 * 
 * Supporting CSS for CoreUI components
 * 
**/

/**
 * Font Import(s)
 *
 * Inter is the default font of CoreUI
**/

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@font-face {
	font-family: 'AP Type Pro Text';
	src:
		url('fonts/APTypeProText-Light.woff2') format('woff2'),
		url('fonts/APTypeProText-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'AP Type Pro Text';
	src:
		url('fonts/APTypeProText-LightItalic.woff2') format('woff2'),
		url('fonts/APTypeProText-LightItalic.woff') format('woff');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'AP Type Pro Text';
	src:
		url('fonts/APTypeProText-Regular.woff2') format('woff2'),
		url('fonts/APTypeProText-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'AP Type Pro Text';
	src:
		url('fonts/APTypeProText-RegularItalic.woff2') format('woff2'),
		url('fonts/APTypeProText-RegularItalic.woff') format('woff');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'AP Type Pro Text';
	src:
		url('fonts/APTypeProText-Medium.woff2') format('woff2'),
		url('fonts/APTypeProText-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'AP Type Pro Text';
	src:
		url('fonts/APTypeProText-MediumItalic.woff2') format('woff2'),
		url('fonts/APTypeProText-MediumItalic.woff') format('woff');
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'AP Type Pro Text';
	src:
		url('fonts/APTypeProText-Bold.woff2') format('woff2'),
		url('fonts/APTypeProText-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'AP Type Pro Text';
	src:
		url('fonts/APTypeProText-BoldItalic.woff') format('woff2'),
		url('fonts/APTypeProText-BoldItalic.woff') format('woff');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

:root {
	/* Icons referenced via {ICON_NAME} */
	--dcore-svg-sprite-sheet: /sfsites/c/resource/coreui/icons/symbols.svg;
	/* Icons referenced via lib:{ICON_NAME} */
	--dcore-svg-sprite-sheet-lib: /sfsites/c/resource/coreui/icons/symbols-lib.svg;
	/* Icons referenced via sf:{ICON_NAME} */
	--dcore-svg-sprite-sheet-sf: /sfsites/c/resource/coreui/icons/symbols-sf.svg;
	/* Icons referenced via ap:{ICON_NAME} */
	--dcore-svg-sprite-sheet-ap: /sfsites/c/resource/customerportal/icons/symbols-ap.svg;
	--global-main-wrapper-padding: 16px;
	--global-main-wrapper-width: 1400px;
}

/** Resets **/

*,
*::before,
*::after {
	border: 0;
	box-sizing: border-box;
	font: inherit;
	margin: 0;
	padding: 0;
}
html {
	line-height: 1;
	text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	font-family: var(--dcore-typography-body-default-desktop-regular-font-family);
	font-size: var(--dcore-typography-body-default-desktop-regular-font-size);
	font-weight: var(--dcore-typography-body-default-desktop-regular-font-weight);
	letter-spacing: var(--dcore-typography-body-default-desktop-regular-letter-spacing);
	line-height: var(--dcore-typography-body-default-desktop-regular-line-height);
	text-decoration: var(--dcore-typography-body-default-desktop-regular-text-decoration);
	text-transform: var(--dcore-typography-body-default-desktop-regular-text-case);
	background: var(--dcore-colors-background-primary-100);
	color: var(--dcore-theme-fg-default);
	scroll-padding-top: calc(var(--header-height) + 30px);
}

webruntime-router-container community_layout-slds-flexible-layout .content-container,
webruntime-router-container community_layout-slds-flexible-layout .content-container community_layout-section,
webruntime-router-container community_layout-slds-flexible-layout .content-container .columns-content {
	height: 100%;
}
webruntime-router-container community_layout-slds-flexible-layout .content-container .columns-content community_layout-column {
	flex: 1;
}

/* Structure */

dialog {
	margin: auto;
}

.main-wrapper {
	margin: 0;
	max-width: calc(var(--global-main-wrapper-width) + var(--global-main-wrapper-padding) * 2);
	padding: 0 var(--global-main-wrapper-padding);
	width: 100%;
	background: var(--dcore-colors-background-primary-100);
}
.main-wrapper-centered .main-wrapper {
	--global-main-wrapper-width: 1260px;
	margin: 0 auto;
	max-width: calc(var(--global-main-wrapper-width) + var(--global-main-wrapper-padding) * 2);
}
main .main-wrapper {
	padding: 0;
}

.two-column-layout {
	display: grid;
	grid-template-columns: 1fr; /* Stack on mobile */
	grid-template-rows: auto 1fr; /* first-column: auto height, second-column: remaining space */
}

.three-column-layout {
	display: grid;
	grid-template-columns: 1fr; /* Stack on mobile */
	grid-template-rows: auto 1fr auto; /* first-column: auto height, second-column: remaining space */
}

@media (min-width: 992px) {
	.two-column-layout {
		grid-template-columns: 260px 1fr; /* Side-by-side on desktop */
		grid-template-rows: 1fr;
	}
}

@media (min-width: 1024px) {
	.three-column-layout {
		grid-template-columns: 260px 1fr 25%; /* Side-by-side on desktop */
		grid-template-rows: 1fr;
	}
}

.full-height {
	height: 100%;
}


@media screen and (min-width: 992px) {
	:root {
		--global-main-wrapper-padding: 24px; /*changed to 24px from 30px referring to CXTA-31229*/
	}
	main .main-wrapper {
		padding: 0 var(--global-main-wrapper-padding) 0 0;
	}
}

/* Screen reader only utility */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/**
 * Typography
 *
 * Additional typography focused classes seperates style from semantics
**/
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
	margin-bottom: var(--dcore-spacing-sm);
}
p {
	margin-bottom: var(--dcore-spacing-lg);
}

a {
	text-decoration: var(--dcore-link-default-label-text-decoration-underline);
	border-radius: var(--dcore-link-border-radius);
	color: var(--dcore-link-default-default-text-color);
}
a:hover,
a:visited:hover {
	color: var(--dcore-link-default-hover-text-color);
	text-decoration: none;
}
a:active,
a:visited:active {
	color: var(--dcore-link-default-active-text-color);
}
a:focus-visible,
a:visited:focus-visible {
	color: var(--dcore-link-default-focus-text-color);
	outline: var(--dcore-link-outline-width) solid var(--dcore-link-default-focus-outline-color);
}

a:visited {
	color: var(--dcore-link-default-default-text-color);
}


h1,
.h1 {
	font-family: var(--dcore-typography-heading-1-mobile-bold-font-family);
	font-size: var(--dcore-typography-heading-1-mobile-bold-font-size);
	font-weight: var(--dcore-typography-heading-1-mobile-bold-font-weight);
	letter-spacing: var(--dcore-typography-heading-1-mobile-bold-letter-spacing);
	line-height: var(--dcore-typography-heading-1-mobile-bold-line-height);
	text-decoration: var(--dcore-typography-heading-1-mobile-bold-text-decoration);
	text-transform: var(--dcore-typography-heading-1-mobile-bold-text-case);
}
h2,
.h2 {
	font-family: var(--dcore-typography-heading-2-mobile-bold-font-family);
	font-size: var(--dcore-typography-heading-2-mobile-bold-font-size);
	font-weight: var(--dcore-typography-heading-2-mobile-bold-font-weight);
	letter-spacing: var(--dcore-typography-heading-2-mobile-bold-letter-spacing);
	line-height: var(--dcore-typography-heading-2-mobile-bold-line-height);
	text-decoration: var(--dcore-typography-heading-2-mobile-bold-text-decoration);
	text-transform: var(--dcore-typography-heading-2-mobile-bold-text-case);
}
h3,
.h3 {
	font-family: var(--dcore-typography-heading-3-mobile-bold-font-family);
	font-size: var(--dcore-typography-heading-3-mobile-bold-font-size);
	font-weight: var(--dcore-typography-heading-3-mobile-bold-font-weight);
	letter-spacing: var(--dcore-typography-heading-3-mobile-bold-letter-spacing);
	line-height: var(--dcore-typography-heading-3-mobile-bold-line-height);
	text-decoration: var(--dcore-typography-heading-3-mobile-bold-text-decoration);
	text-transform: var(--dcore-typography-heading-3-mobile-bold-text-case);
}
h4,
.h4 {
	font-family: var(--dcore-typography-heading-4-all-sizes-bold-font-family);
	font-size: var(--dcore-typography-heading-4-all-sizes-bold-font-size);
	font-weight: var(--dcore-typography-heading-4-all-sizes-bold-font-weight);
	letter-spacing: var(--dcore-typography-heading-4-all-sizes-bold-letter-spacing);
	line-height: var(--dcore-typography-heading-4-all-sizes-bold-line-height);
	text-decoration: var(--dcore-typography-heading-4-all-sizes-bold-text-decoration);
	text-transform: var(--dcore-typography-heading-4-all-sizes-bold-text-case);
}
h5,
.h5 {
	font-family: var(--dcore-typography-heading-5-all-sizes-bold-font-family);
	font-size: var(--dcore-typography-heading-5-all-sizes-bold-font-size);
	font-weight: var(--dcore-typography-heading-5-all-sizes-bold-font-weight);
	letter-spacing: var(--dcore-typography-heading-5-all-sizes-bold-letter-spacing);
	line-height: var(--dcore-typography-heading-5-all-sizes-bold-line-height);
	text-decoration: var(--dcore-typography-heading-5-all-sizes-bold-text-decoration);
	text-transform: var(--dcore-typography-heading-5-all-sizes-bold-text-case);
}
h6,
.h6 {
	font-family: var(--dcore-typography-heading-6-all-sizes-bold-font-family);
	font-size: var(--dcore-typography-heading-6-all-sizes-bold-font-size);
	font-weight: var(--dcore-typography-heading-6-all-sizes-bold-font-weight);
	letter-spacing: var(--dcore-typography-heading-6-all-sizes-bold-letter-spacing);
	line-height: var(--dcore-typography-heading-6-all-sizes-bold-line-height);
	text-decoration: var(--dcore-typography-heading-6-all-sizes-bold-text-decoration);
	text-transform: var(--dcore-typography-heading-6-all-sizes-bold-text-case);
}
.medium,
.small.medium,
.large.medium {
	font-weight: var(--dcore-font-weights-body-medium);
}
b,
strong,
.bold,
.strong,
.small.bold,
.small.strong,
.large.bold,
.large.strong {
	font-weight: var(--dcore-font-weights-body-bold);
}
.italic,
.italics,
.small.italic,
.small.italics,
.large.italic,
.large.italics {
	font-style: italic;
}
p,
ul li,
ol li {
	font-family: var(--dcore-typography-body-default-mobile-regular-font-family);
	font-size: var(--dcore-typography-body-default-mobile-regular-font-size);
	font-weight: var(--dcore-typography-body-default-mobile-regular-font-weight);
	letter-spacing: var(--dcore-typography-body-default-mobile-regular-letter-spacing);
	line-height: var(--dcore-typography-body-default-mobile-regular-line-height);
	text-decoration: var(--dcore-typography-body-default-mobile-regular-text-decoration);
	text-transform: var(--dcore-typography-body-default-mobile-regular-text-case);
}
span.large,
p.large {
	font-family: var(--dcore-typography-body-large-mobile-regular-font-family);
	font-size: var(--dcore-typography-body-large-mobile-regular-font-size);
	font-weight: var(--dcore-typography-body-large-mobile-regular-font-weight);
	letter-spacing: var(--dcore-typography-body-large-mobile-regular-letter-spacing);
	line-height: var(--dcore-typography-body-large-mobile-regular-line-height);
	text-decoration: var(--dcore-typography-body-large-mobile-regular-text-decoration);
	text-transform: var(--dcore-typography-body-large-mobile-regular-text-case);
}
span.small,
p.small {
	font-family: var(--dcore-typography-body-small-mobile-regular-font-family);
	font-size: var(--dcore-typography-body-small-mobile-regular-font-size);
	font-weight: var(--dcore-typography-body-small-mobile-regular-font-weight);
	letter-spacing: var(--dcore-typography-body-small-mobile-regular-letter-spacing);
	line-height: var(--dcore-typography-body-small-mobile-regular-line-height);
	text-decoration: var(--dcore-typography-body-small-mobile-regular-text-decoration);
	text-transform: var(--dcore-typography-body-small-mobile-regular-text-case);
}
span.caption,
p.caption {
	font-family: var(--dcore-typography-caption-all-sizes-font-family);
	font-size: var(--dcore-typography-caption-all-sizes-font-size);
	font-weight: var(--dcore-typography-caption-all-sizes-font-weight);
	letter-spacing: var(--dcore-typography-caption-all-sizes-letter-spacing);
	line-height: var(--dcore-typography-caption-all-sizes-line-height);
	text-decoration: var(--dcore-typography-caption-all-sizes-text-decoration);
	text-transform: var(--dcore-typography-caption-all-sizes-text-case);
}
ul,
ol {
	list-style-position: inside;
	margin-bottom: var(--dcore-spacing-lg);
}
/* Base list styles */
.rich-text-editor__output ul,
.rich-text-editor__output ol {
	list-style-position: inside;
	padding-left: 1.5em;
	position: relative;
}
.rich-text-editor__output ul:last-child,
.rich-text-editor__output ol:last-child {
	/* margin-bottom: 0; */
}

.rich-text-editor__output ul {
	list-style: disc;
	margin-bottom: 0;
}

.rich-text-editor__output ol {
	counter-reset: li;
	list-style: none;
}

.rich-text-editor__output li {
	position: relative;
	line-height: var(--dcore-line-heights-body-145, 1.45);
}

.rich-text-editor__output li:last-child {
	margin-bottom: 0;
}

.rich-text-editor__output li ul,
.rich-text-editor__output li ol {
	margin: 5px 0;
}

.rich-text-editor__output li li {
	margin-bottom: 5px;
}

/* Clearlist utility */
.rich-text-editor__output ul.clearlist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rich-text-editor__output ul.clearlist li,
.rich-text-editor__output ul.clearlist li::before {
	margin: 0;
	background: none;
	content: "";
}

/* Ordered list numbering */
.rich-text-editor__output ol li {
	list-style: none;
	margin-bottom: 10px;
}

.rich-text-editor__output ol li::before {
	content: counter(li, decimal) ".";
	counter-increment: li;
	position: absolute;
	margin: 3px 0 0 -15px;
	line-height: 1;
}

.rich-text-editor__output ol ul li::before {
	content: none;
}

.rich-text-editor__output ol ul li {
	list-style: unset;
}

.rich-text-editor__output ol li ol {
	/* margin: 10px 0 20px; */
}

.rich-text-editor__output ol {
	counter-reset: level1;
}

.rich-text-editor__output ol > li {
	counter-increment: level1;
}

.rich-text-editor__output ol > li::before {
	content: counter(level1) ".";
}

/* Level 2: lower-alpha */
.rich-text-editor__output ol > li > ol {
	counter-reset: level2;
}

.rich-text-editor__output ol > li > ol > li {
	counter-increment: level2;
}

.rich-text-editor__output ol > li > ol > li::before {
	content: counter(level2, lower-alpha) ".";
}

/* Level 3: lower-roman */
.rich-text-editor__output ol > li > ol > li > ol {
	counter-reset: level3;
}

.rich-text-editor__output ol > li > ol > li > ol > li {
	counter-increment: level3;
}

.rich-text-editor__output ol > li > ol > li > ol > li::before {
	content: counter(level3, lower-roman) ".";
}

.rich-text-editor__output a {
	display: inline-flex;
	border-radius: var(--dcore-link-border-radius, 4px);
	color: var(--dcore-link-default-text-color);
	font-family: var(--dcore-link-default-label-font-family, 'Inter', sans-serif);
	font-size: var(--dcore-link-default-label-font-size, 14px);
	font-weight: var(--dcore-link-default-label-font-weight);
	letter-spacing: var(--dcore-link-default-label-letter-spacing, auto);
	line-height: var(--dcore-link-default-label-line-height, 24px);
	text-decoration: var(--dcore-link-default-label-text-decoration, none);
	text-transform: var(--dcore-link-default-label-text-case, none);
}
.rich-text-editor__output a:visited {
	color: var(--dcore-link-default-text-color);
}
.rich-text-editor__output a:hover {
	color: var(--dcore-link-default-hover-text-color, #3142c4);
	text-decoration: var(--dcore-link-default-label-hover-text-decoration, none);
}
.rich-text-editor__output a:active {
	color: var(--dcore-link-default-active-text-color, #3142c4);
}
.rich-text-editor__output a:focus-visible {
	color: var(--dcore-link-default-focus-text-color);
	outline: var(--dcore-link-outline-width, 2px) solid var(--dcore-link-default-focus-outline-color, #3d53f5);
	outline-offset: var(--dcore-link-outline-offset);
	text-decoration: none;
}
.rich-text-editor__output a.overflow-ellipses:focus-visible {
	outline-offset: calc(-1 * var(--dcore-link-outline-width, 2px));
}

label.small,
.label.small {
	font-family: var(--dcore-typography-label-small-font-family);
	font-size: var(--dcore-typography-label-small-font-size);
	font-weight: var(--dcore-typography-label-small-font-weight);
	letter-spacing: var(--dcore-typography-label-small-letter-spacing);
	line-height: var(--dcore-typography-label-small-line-height);
	text-decoration: var(--dcore-typography-label-small-text-decoration);
	text-transform: var(--dcore-typography-label-small-text-case);
}
label.large,
.label.large {
	font-family: var(--dcore-typography-label-large-font-family);
	font-size: var(--dcore-typography-label-large-font-size);
	font-weight: var(--dcore-typography-label-large-font-weight);
	letter-spacing: var(--dcore-typography-label-large-letter-spacing);
	line-height: var(--dcore-typography-label-large-line-height);
	text-decoration: var(--dcore-typography-label-large-text-decoration);
	text-transform: var(--dcore-typography-label-large-text-case);
}

@media only screen and (min-width: 992px) {
	h1,
	.h1 {
		font-family: var(--dcore-typography-heading-1-desktop-bold-font-family);
		font-size: var(--dcore-typography-heading-1-desktop-bold-font-size);
		font-weight: var(--dcore-typography-heading-1-desktop-bold-font-weight);
		letter-spacing: var(--dcore-typography-heading-1-desktop-bold-letter-spacing);
		line-height: var(--dcore-typography-heading-1-desktop-bold-line-height);
		text-decoration: var(--dcore-typography-heading-1-desktop-bold-text-decoration);
		text-transform: var(--dcore-typography-heading-1-desktop-bold-text-case);
	}
	h2,
	.h2 {
		font-family: var(--dcore-typography-heading-2-desktop-bold-font-family);
		font-size: var(--dcore-typography-heading-2-desktop-bold-font-size);
		font-weight: var(--dcore-typography-heading-2-desktop-bold-font-weight);
		letter-spacing: var(--dcore-typography-heading-2-desktop-bold-letter-spacing);
		line-height: var(--dcore-typography-heading-2-desktop-bold-line-height);
		text-decoration: var(--dcore-typography-heading-2-desktop-bold-text-decoration);
		text-transform: var(--dcore-typography-heading-2-desktop-bold-text-case);
	}
	h3,
	.h3 {
		font-family: var(--dcore-typography-heading-3-desktop-bold-font-family);
		font-size: var(--dcore-typography-heading-3-desktop-bold-font-size);
		font-weight: var(--dcore-typography-heading-3-desktop-bold-font-weight);
		letter-spacing: var(--dcore-typography-heading-3-desktop-bold-letter-spacing);
		line-height: var(--dcore-typography-heading-3-desktop-bold-line-height);
		text-decoration: var(--dcore-typography-heading-3-desktop-bold-text-decoration);
		text-transform: var(--dcore-typography-heading-3-desktop-bold-text-case);
	}
	p,
	ul li,
	ol li {
		font-family: var(--dcore-typography-body-default-desktop-regular-font-family);
		font-size: var(--dcore-typography-body-default-desktop-regular-font-size);
		font-weight: var(--dcore-typography-body-default-desktop-regular-font-weight);
		letter-spacing: var(--dcore-typography-body-default-desktop-regular-letter-spacing);
		line-height: var(--dcore-typography-body-default-desktop-regular-line-height);
		text-decoration: var(--dcore-typography-body-default-desktop-regular-text-decoration);
		text-transform: var(--dcore-typography-body-default-desktop-regular-text-case);
	}
	span.large,
	p.large {
		font-family: var(--dcore-typography-body-large-desktop-regular-font-family);
		font-size: var(--dcore-typography-body-large-desktop-regular-font-size);
		font-weight: var(--dcore-typography-body-large-desktop-regular-font-weight);
		letter-spacing: var(--dcore-typography-body-large-desktop-regular-letter-spacing);
		line-height: var(--dcore-typography-body-large-desktop-regular-line-height);
		text-decoration: var(--dcore-typography-body-large-desktop-regular-text-decoration);
		text-transform: var(--dcore-typography-body-large-desktop-regular-text-case);
	}
	span.small,
	p.small {
		font-family: var(--dcore-typography-body-small-desktop-regular-font-family);
		font-size: var(--dcore-typography-body-small-desktop-regular-font-size);
		font-weight: var(--dcore-typography-body-small-desktop-regular-font-weight);
		letter-spacing: var(--dcore-typography-body-small-desktop-regular-letter-spacing);
		line-height: var(--dcore-typography-body-small-desktop-regular-line-height);
		text-decoration: var(--dcore-typography-body-small-desktop-regular-text-decoration);
		text-transform: var(--dcore-typography-body-small-desktop-regular-text-case);
	}
}

/* Core-ui overrides */
/* TODO: should be fixed in figma and updated tokens.css */
:root {
	--dcore-card-fill-default-border-color-top: transparent;
	--dcore-card-fill-default-border-color-bottom: transparent;
	--dcore-card-fill-default-border-color-right: transparent;
	--dcore-card-fill-default-border-color-left: transparent;
}
c-core-ui-card {
	--card-height: auto;
}

/* Component library */
.lib-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--dcore-spacing-xxl, 2rem);
}
.main-content {
	flex-grow: 1;
	padding: 2rem;
	border-radius: 16px 16px 0 0;
	background: white;
	flex: 1;
	position: relative;
}

.embeddedMessagingLiveRegion {
	height: 0 !important;
}

body.table-full-width {
	--global-main-wrapper-width: 100dvw;
}

@media screen and (max-width: 991px) {
	.open-navigation .side-navigation {
		padding: 16px !important;
		display: block !important;
		position: fixed !important;
		left: 0 !important;
		top: 0 !important;
	}
}
.rich-text-editor__output .tableView-content-wrap div {
	width: 100% !important;
}