// RowHeader styles for collapsible card sections (lumina)
.RowHeader {
	display: flex;
	padding: var(--slds-g-spacing-2) var(--slds-g-spacing-0) var(--slds-g-spacing-4);
	align-items: center;
	gap: var(--slds-g-spacing-2);
	flex-shrink: 0;
	align-self: stretch;
	cursor: default;
	user-select: none;

	&.collapsible {
		cursor: pointer;
	}

	.RowHeader-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;

		.SvgIconMask {
			width: var(--slds-g-sizing-5);
			height: var(--slds-g-sizing-5);
			background-color: var(--slds-g-color-on-surface-3);
		}
	}

	.RowHeader-title {
		flex: 1;
		overflow: hidden;
		color: var(--slds-g-color-on-surface-3);
		font-feature-settings: 'liga' off, 'clig' off;
		text-overflow: ellipsis;
		font-family: var(--slds-g-font-family);
		font-size: var(--slds-g-font-scale-3);
		font-style: normal;
		font-weight: var(--slds-g-font-weight-4);
		line-height: var(--slds-g-font-line-height-3);
		white-space: nowrap;

		@media @phone {
			line-height: 28px;
		}
	}
}

// Section container for grouped cards
.RowSection {
	&.collapsed {
		.RowSection-cards {
			display: none;
		}
	}

	.RowSection-cards {
		display: grid;
		grid-auto-rows: min-content;
		gap: var(--slds-g-spacing-4);
	}
}

.CardArea{
	margin-left: 0.925em;
	@media @phone {
		margin-left: 0.693em;
	}

	&.CardArea--lumina {
		margin-left: var(--slds-g-spacing-0);
		display: grid;
		grid-auto-rows: min-content;
		gap: var(--slds-g-spacing-4);
		max-width: 100%;
		overflow-x: hidden;
		padding-right: var(--slds-g-spacing-5);
		padding-top: var(--slds-g-spacing-4);

		@media @phone {
			padding-right: var(--slds-g-spacing-2);
		}

		.Card {
			margin: var(--slds-g-spacing-0);
			display: flex;
			flex-direction: column;
			max-width: 100%;
			overflow: hidden;
		}
	}
}

// Sectioned CardArea: smaller gap between RowSections (grid items) than between cards in flat grid
.CardArea.CardArea-sectioned.CardArea--lumina {
	gap: var(--slds-g-spacing-2);

	@media @phone {
		gap: var(--slds-g-spacing-4);

		// Let grid tracks collapse to the container instead of a section's min-content, so cards stay in bounds.
		.RowSection {
			min-width: 0;
		}
	}
}

// Floating layout sections within a Lumina sectioned card area.
// Uses float-based columns (reading order) with dynamic card heights instead of CSS grid.
// Margins match the legacy card spacing (0.925em tablet / 0.693em phone) to preserve
// visual consistency when a RowHeader switches a section to layout="floating".
.RowSection-cards.RowSection-cards--floating {
	display: block;
	overflow: hidden; // clearfix for floated columns
	margin-right: calc(-1 * var(--slds-g-spacing-4)); // absorb trailing right margin of the last card in each row
	@media @phone {
		margin-right: calc(-1 * var(--slds-g-spacing-3));
	}

	.Column {
		float: left;
	}

	.Card.Card--floating {
		margin: 0 var(--slds-g-spacing-4) var(--slds-g-spacing-4) 0;
		@media @phone {
			margin: 0 var(--slds-g-spacing-3) var(--slds-g-spacing-3) 0;
		}

		&:last-child {
			margin-bottom: 0;
		}
	}
}

// Override fixed height for floating layout cards: use dynamic height
.Card.Card--floating {
	.CardContainer.CardContainer--lumina,
	.SyncCardContainer.CardContainer--lumina {
		height: auto;
		min-height: unset;
	}
}

// Floating layout sections within a Lumina sectioned card area.
// Uses float-based columns (reading order) with dynamic card heights instead of CSS grid.
// Margins match the legacy card spacing (0.925em tablet / 0.693em phone) to preserve
// visual consistency when a RowHeader switches a section to layout="floating".
.RowSection-cards.RowSection-cards--floating {
	display: block;
	overflow: hidden; // clearfix for floated columns
	margin-right: calc(-1 * var(--slds-g-spacing-4)); // absorb trailing right margin of the last card in each row
	@media @phone {
		margin-right: calc(-1 * var(--slds-g-spacing-3));
	}

	.Column {
		float: left;
	}

	.Card.Card--floating {
		margin: 0 var(--slds-g-spacing-4) var(--slds-g-spacing-4) 0;
		@media @phone {
			margin: 0 var(--slds-g-spacing-3) var(--slds-g-spacing-3) 0;
		}

		&:last-child {
			margin-bottom: 0;
		}
	}
}

// Override fixed height for floating layout cards: use dynamic height
.Card.Card--floating {
	.CardContainer.CardContainer--lumina,
	.SyncCardContainer.CardContainer--lumina {
		height: auto;
		min-height: unset;
	}
}

.CardArea, .GoogleMapDetails{
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;

	.Card {
		margin: 0.925em 0.925em 0.925em 0px;
		@media @phone {
			margin: 0.693em 0.693em 0.693em 0px;
		}
	}
	.Column {
		float :left;
	}

	.NoDataMessageContainer {
		margin-top:0.924em; //16px
		@media @phone {
			margin-top: 0.693em
		}

		/* Next-gen UX: Remove top margin for better centering */
		&.lumina {
			margin-top: 0;
		}
	}

	.VisitDetailsContainer {
		margin-top:0.924em; //16px
		@media @phone {
			margin-top: 0.693em
		}
	}

	.UserWelcomeContainer {
		margin-top:0.924em; //16px
		@media @phone {
			margin-top: 0.693em
		}
	}

	.CockpitSections {
		padding: 0 4px 0 4px; // as 12px of card padding +4px =16px
		.CockpitSection {
			margin-top:16px;
			@media @phone {
				margin-top: 0.693em;
			}
			padding-bottom:8px;

			.SwitchSection {
				align-items: center;
				justify-items: stretch;
				display: grid;
				grid-template-columns: 2.080rem auto 2.080rem; //36px auto 36px
				grid-gap: 0.462rem; //8px

				.SwitchValueContainer  {
					display: inline-flex;
					justify-content: center;
					align-items: center;
					overflow: hidden;
				}

				.ImageButton {
					width: auto;
					display: inline-block;
					vertical-align: middle;
					overflow: hidden;
					white-space: nowrap;
					margin-right: 0.667rem;
					font: 0.693rem Regular; //12px
					height: 2.080rem; //36px
					margin: 0.116rem; //2px
					min-width: 1.849rem; //32px
					padding: 0 0.693rem; //12px
					border-radius: 1.849rem; //32px
					border: solid 0.116rem; //2px
					div:nth-child(2) {
						max-width: 72%;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					};

					.ImageButtonText{
						display: inline-block;
						vertical-align: middle;
						font: 0.693rem Regular; //12px
					};
				}

				button img {
					width: 1.334rem;
					height: 1.334rem;
					display: inline-block;
					vertical-align: middle;
				}

				button img + div{
					margin-left: 0.289rem; //5px
				}

				.SwitchImage{
					width: 2.080rem; //36px
				}
				
				.SwitchText{
					font: 0.809rem Medium; //14px
					width: auto;
					justify-content: center;
					align-items: center;
					word-break: break-all;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}

				.SwitchText + .ImageButton{
					margin-left: 0.578rem; //10px
					display: flex;
					align-items: center;
				}
			}

			.SummaryContainer{
				font-family: "Regular", sans-serif;
				padding: 0 0.578rem; //10px
				border-radius: 1.040rem; //18px
				height: 2.080rem; //36px
				justify-content: center;
			  	align-items: center;
				display: grid;
			  	grid-template-columns: repeat(8, fit-content(100%));
				grid-gap: 0.289rem; //5px
				overflow: hidden;
				padding-left: 0.693rem; //12px
    			padding-right: 0.693rem; //12px
			
				.SummaryItem{
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
	
				.SummaryItemSeperator{
					width: 0.058rem;
					height: 1rem;
					width: 0.087rem; //1.5px;
					margin-left: 0.116rem; //2px
					margin-right: 0.116rem; //2px
				}
				
				.PrimarySummaryItem{
					font: 1.387rem Regular; //24px
				}
				
				.SecondarySummaryItem{
					  font: 0.693rem Regular; //12px
					align-self: center;
					text-align: center;
					vertical-align: middle;;
				}
			}

			.ThreeColumnLayout{
				width: 100%;
				word-break: break-word;
				display:flex;
				.Col1,.Col3 {
					flex : 1;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
				}
				.Col1{
					min-width: 72px; // image width 58px+padding 14px
					.col1row1{
						margin-right: 14px;
					}
				}
				.Col2 {
					flex:4;
					.col2row1,.col2row2,.col2row3,.col2row4{
						margin-bottom: 2px;
						.phoneSection,.emailSection{
							margin-top:8px;
							display: flex;
							align-items: center;
							.dialer,.email {
								button {
									padding: 0px 5px 0px 0px;
									background-color: inherit;
								}
								.image{
									box-sizing: border-box;
									height: 36px;
									width: 36px;
									border: 2px solid;
									border-radius: 50%;
									padding: 5px;
									img{
										max-width: 100%;
										max-height: 100%;
									}
								}
							}
							.number,.emailId {
								font-family: "Regular";
								font-size: 13px;
								line-height: 15px;
								overflow: hidden;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								word-break: break-word;
							}
						}
					}
					> :first-child {
						.phoneSection,.emailSection{
							margin-top: 8px; // cockpitsection margin-top 8px + margin-top 8px
						}
					}
				}
				.Col3 {
					min-width: 46px; // image width 32px + padding 14px
					.col3row1{
						margin-left: 14px;
					}
				}
			}
			.ItemImportant,.ItemIdentifier,.ItemSecondary,.ItemInfoGrey{
				font-family: "Regular";
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.ItemImportant{
				font: 0.925rem Medium; //16px
				line-height: 1.098rem; //19px
			}

			.ItemIdentifier{
				font-size: 16px;
				line-height: 19px;
			}

			.ItemSecondary {
				font-size: 13px;
				line-height: 15px;
			}

			.previewImageInnerContainer,.Col1ImageWrapper {
				display: inline-block;
				width: 58px;
				height: 58px;
				overflow: hidden;
				img {
					max-width: 100%;
					max-height: 100%;
					width: 100%;
					height: 100%;
				}
			}

			.Col3ImageWrapper {
				width:32px;
				height: 32px;
				display: inline-block;
				img {
					max-width: 100%;
					max-height: 100%;
				}
			}

			&:last-child {
				padding-bottom: 0; //already card Inner coantiner has padding 12px
			}

			&.Separator {
				border-bottom: 1px solid;
			}
		}
	}
}

.CardContainer,.SyncCardContainer{
	background: inherit;
	overflow: hidden;
	border-radius : 0.116em;
	box-shadow: 0.116em 0px 0.116em rgba(0,0,0,0.2);
	//transform - Required as sometimes fa with fa-spin animation causing layout issues, so forcing
	//the hardware accelaration to recover from such situations
	transform: translateZ(0);

	// lumina cards: no box-shadow, more rounded corners, flex layout
	&.CardContainer--lumina {
		box-shadow: none;
		border-radius: var(--slds-g-radius-border-3);
		display: flex;
		flex-direction: column;
		height: 375px;
		min-height: 375px;
		flex: none;

		&.CardContainer--dynamicHeight {
			flex: 1;
			height: auto;
			min-height: unset;
		}

		&.CardContainer--collapsed {
			height: auto;
			min-height: unset;
		}
	}
}

.CardContainer:has(.UserWelcomeV2) {
  background: none !important;
  box-shadow: none;
}

.CardContainer:has(.InfoControl) {
  background: none !important;
  box-shadow: none;
}

.CardContainer:has(.EmbeddedList.ListV2) {
  background: none !important;
}

// Map CardContainer: prevent stretching in grid layout, maintain fixed height
.CardContainer.CardContainer--lumina:has(.CockpitMap) {
  align-self: start;
  flex: none;
  position: relative;
}

.CardContainer.InnerContainer,.SyncCardContainer.InnerContainer{
	padding: 0.7em;
	overflow: hidden;
	@media @phone {
		padding:0.693em
	}
	.EmbeddedList {
		-ms-flex-flow:row;
		table.List tr:last-child {
			border: none;
		}
	}
}

// Inner Container for lumina (BEM naming - standalone selector to match CardContainer__inner class)
.CardContainer__inner.CardContainer__inner--lumina {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: var(--slds-g-spacing-0);
	overflow: hidden;

	&.CardContainer__inner--noHeader {
		padding: var(--slds-g-spacing-0);
	}
}

.CardContainer.loading{
	height:11.557em;
	line-height: 11.557em;
	text-align:center;
	display: flex;
    justify-content: center;

	&.CardContainer--lumina {
		flex: 1;
		align-items: center;

		.SvgIconMask.SLDSSpinner--medium {
			width: 80px;
			height: 80px;
			background-color: var(--slds-g-color-accent-1);
		}
	}
}

 .CardContainer.ColorStatusBar{
	 height: 0.462em;
	 border-top-left-radius: inherit;
	 border-top-right-radius: inherit;
 }

.CardContainerHeader.Main{
   width: 100%;
   display: flex;
   line-height: 1.040em; //Should be same as the title font size
}

.CardContainerHeader.Headertext{
	display: flex;
	width: 100%;
	flex-flow: row nowrap;
	overflow: auto;
	align-self:center;
}

.CardContainerHeader.Title{
	margin: 0 0.333em 0 0px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2; // not supported in IE
	-webkit-box-orient: vertical;
	word-break: break-word;
	align-self: flex-end;
}

.CardContainerHeader.Info{
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 2.857em;
	flex: 1;
	align-self: flex-end;
	width:inherit;
	padding-bottom: 0.071em;

}

.CardContainerHeader.Collapse ,.CardContainerHeader.Max
{
	width: 1.040em;
	height: 1.040em;
	min-width: 1.040em;
	position: relative;
	margin: 0.347em 0.693em;
	img {
		position: absolute;
		width:auto;
		height:auto;
	}
}

.CardContainerHeader.Collapse{
	img {
		top:0.231em;
	}
}
.CardContainerHeader.Max{
	img {
		top:0;
	}
}

.LinkBar{
	text-align: center;
	display: flex;
	height: 2.774em;

		.ImageButton {
			background: inherit;
			width: 100%;
			display: inline-block;
			vertical-align: middle;
			overflow: hidden;
			white-space: nowrap;
			text-transform: uppercase;
			margin : auto;

			div:nth-child(2) {
				max-width :78%;
				text-overflow: ellipsis;
				overflow: hidden;
			}
		}
	button img {
		width:1.334em;
		height:1.334em;
	}
}

.LinkBar.SeperatorContainer{
	display: flex;
    justify-content: center;
	min-width: 0.058em;
}

.LinkBar.SeperatorBar{
    width: 0.058em;
    height: 1.387em;
	align-self: center;
}

.ActionBar{
	text-align: center;
	display: flex;
	width:100%;

	@media @phone {
		margin-top: 0.693em;
	}

	.ImageButton {
		width: 100%;
		display: inline-block;
		vertical-align: middle;
		overflow: hidden;
		white-space: nowrap;
		margin-right: 0.667em;

		div:nth-child(2) {
			max-width :72%;
			text-overflow: ellipsis;
			overflow: hidden;
		}
	}
	button img {
		width:1.334em;
		height:1.334em;
	}
}

.ActionBar.PrimaryActionBtn {
	width:100%
}

.ActionBar.SecondaryActionBtn {
	width:100%
}

// ============ LUMINA CARD CONTAINER STYLES (BEM naming) ============

// Card Container lumina - use border-radius token (12px) per spec
.CardContainer.CardContainer--lumina, .SyncCardContainer.CardContainer--lumina {
	border-radius: var(--slds-g-radius-border-3);
	background: var(--slds-g-color-surface-container-1);
	box-shadow: none;
	overflow: hidden;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: var(--slds-g-spacing-4);
	gap: var(--slds-g-spacing-4);
}

// No-header card container: no outer padding for all
.CardContainer.CardContainer--lumina:has(.CardContainer__inner--noHeader),
.SyncCardContainer.CardContainer--lumina:has(.CardContainer__inner--noHeader) {
	padding: var(--slds-g-spacing-0);
}

// No-header without NoDataMessage: remove border-radius; with NoDataMessage keep rounded corners
.CardContainer.CardContainer--lumina:has(.CardContainer__inner--noHeader):not(:has(.NoDataMessageContainer)),
.SyncCardContainer.CardContainer--lumina:has(.CardContainer__inner--noHeader):not(:has(.NoDataMessageContainer)) {
	border-radius: 0;
}

// CockpitMap inside card: clip map to card rounded corners
.CardContainer.CardContainer--lumina .CockpitMap {
	overflow: hidden;
	border-radius: var(--slds-g-radius-border-3);

	&:has(.NoDataMessageContainer.lumina) {
		display: flex;
		flex-direction: column;
	}
}

// Inner Container for lumina
.CardContainer__inner.CardContainer__inner--lumina, .SyncCardContainer__inner.CardContainer__inner--lumina {
	padding: var(--slds-g-spacing-0);
	overflow: hidden;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	gap: var(--slds-g-spacing-4);
}

// Content area for lumina (below header, contains actionBar and uiPlugin)
.CardContainer__content.CardContainer__content--lumina {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--slds-g-spacing-4);
	min-height: 0;
	overflow: hidden;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;

	> div:has(.NoDataMessageContainer.lumina) {
		flex: 1 1 0%;
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	> .NoDataMessageContainer.lumina {
		flex: 1 1 0%;
		min-height: 0;
	}
}

// Editable card: spacing between GroupElements
.CardContainer__editableGroups {
	display: flex;
	flex-direction: column;
	gap: var(--slds-g-spacing-4);
}

// Color Status Bar for lumina
.CardContainer__statusBar.CardContainer__statusBar--lumina {
	border-radius: var(--slds-g-radius-border-3) var(--slds-g-radius-border-3) 0 0;
}

// Header Main container for lumina
.CardHeader.CardHeader--lumina {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--slds-g-spacing-3);
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

// Header text container for lumina
.CardHeader__textGroup.CardHeader__textGroup--lumina {
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: var(--slds-g-spacing-3);
	overflow: hidden;

	@media @phone {
		gap: var(--slds-g-spacing-2);
	}

	@media @tablet {
		.fw-portrait & {
			gap: var(--slds-g-spacing-2);
		}
	}
}

// Title for lumina
.CardHeader__title.CardHeader__title--lumina {
	color: var(--slds-g-color-on-surface-2);
	font-family: var(--slds-g-font-family);
	font-weight: var(--slds-g-font-weight-5);
	font-size: var(--slds-g-font-scale-2);
	line-height: var(--slds-g-font-line-height-3);
	margin: var(--slds-g-spacing-0);
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

// Subtitle for lumina
.CardHeader__subtitle.CardHeader__subtitle--lumina {
	color: var(--slds-g-color-on-surface-1);
	font-family: var(--slds-g-font-family);
	font-weight: var(--slds-g-font-weight-4);
	font-size: var(--slds-g-font-scale-2);
	line-height: var(--slds-g-font-line-height-3);
	margin: var(--slds-g-spacing-0);
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

// Collapse button for lumina
.CardHeader__collapseBtn.CardHeader__collapseBtn--lumina {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: var(--slds-g-spacing-1);
	cursor: pointer;
	flex: 0 0 auto;
	&:active {
		background: none; // Override global button:active in fw-components.less
	}

	.CardHeader__collapseIcon--lumina.SvgIconMask {
		width: var(--slds-g-sizing-5);
		height: var(--slds-g-sizing-5);
		background-color: var(--slds-g-color-on-surface-3) !important;
	}
}

// Maximize button for lumina - uses ImageButton secondary variant
.CardHeader__maximizeBtn.ImageButton--lumina {
	flex: 0 0 auto;
	margin: var(--slds-g-spacing-0);
}

// Action Bar for lumina - Secondary Buttons
.ActionBar.ActionBar--lumina {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--slds-g-spacing-4);
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;

	// Undo the legacy .ActionBar phone margin-top for Lumina only
	@media @phone {
		margin-top: 0;
	}

	&:not(:has(.ImageButton--lumina)) {
		display: none;
	}

	.ImageButton {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 0;
		margin: var(--slds-g-spacing-0);
		flex: 1 1 0;
	}
}

// Link Bar for lumina - Tertiary Buttons
.LinkBar.LinkBar--lumina {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--slds-g-spacing-4);
	background: transparent;
	border-top: none;
	width: 100%;
	max-width: 100%;
	height: auto !important;
	box-sizing: border-box;
	text-align: left;

	&:not(:has(.ImageButton--lumina)) {
		display: none;
	}

	.ImageButton {
		display: flex;
		align-items: center;
		justify-content: center;
		width: auto !important;
		max-width: 100%;
		min-width: 0;
		text-transform: none;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		background: transparent;
		flex: 1 1 0;
		margin: var(--slds-g-spacing-0);

		// Ensure button content doesn't overflow
		button {
			max-width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	// Hide separator in lumina (not used, but kept for safety)
	.SeperatorContainer, .SeperatorBar {
		display: none;
	}
}

// ============ END NEW UX CARD CONTAINER STYLES ============

// To show the ellipsis after the two lines of title in cards for windows since the --webkit-line-clamp property is not supported in IE
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	/* IE10+ specific styles go here */
	.CardContainerHeader.Title {
		display: inline-block;
		margin: 0 0.333em 0 0px;
		///* hide text if it more than N lines  */
		overflow: hidden;
		///* for set '...' in absolute position */
		position: relative;
		///* use this value to count block height */
		line-height: 1.2em;
		///* max-height = line-height (1.2) * lines max number (3) */
		max-height: 2.4em;
		///* fix problem when last visible word doesn't adjoin right side  */
		text-align: justify;
		///* place for '...' */
		//margin-right: -1em;
		padding-right: .75em;
		word-break: break-all;
		align-self: flex-end;
	}

	.CardContainerHeader.Title:before {
		/* points in the end */
		content: '...';
		/* absolute position */
		position: absolute;
		/* set position to right bottom corner of block */
		right: 0;
		bottom: 0;
	}

	.CardContainerHeader.Title:after {
		/* points in the end */
		content: '';
		/* absolute position */
		position: absolute;
		/* set position to right bottom corner of text */
		right: 0;
		/* set width and height */
		width: .75em;
		height: 1em;
		margin-top: 0.2em;
		/* bg color = bg color under block */
	}

	.CardContainerHeader.Collapse ,.CardContainerHeader.Max
	{
		img {
			width:inherit;
			height:inherit;
		}
	}
	.CardContainerHeader.Collapse{
		img {
			top: 0px;
		}
	}
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   .CardContainer.InnerContainer .EmbeddedList table.List td {
   		max-width:10em;
   }
}