/* NOTE: This file was generated as an optimized version of "library.source.less" for the Theme Designer. */

/*!
 * OpenUI5
 * (c) Copyright 2009-2026 SAP SE or an SAP affiliate company.
 * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
 */

@import "../../../../../Base/baseLib/baseTheme/base.less"; /* ORIGINAL IMPORT PATH: "../../../../sap/ui/core/themes/base/base.less" */

@import "../../../../sap/ui/core/themes/base/global.less";

/* START "AvatarGroup.less" */
/* ============================= */
/* CSS for control sap.f/AvatarGroup  */
/* Base theme                    */
/* ============================= */
.sapFAvatarGroup {
	width: 100%;
	overflow: hidden;
	padding: 0.0625rem;
	margin: 0px;
	display: inline-block;
	white-space: nowrap;
	max-width: 100%;

	&.sapFAvatarGroupXS {
		min-width: 2rem;
		max-height: 2.00625rem;
	}

	&.sapFAvatarGroupS {
		min-width: 3rem;
		max-height: 3.00625rem;
	}

	&.sapFAvatarGroupM {
		min-width: 4rem;
		max-height: 4.00625rem;
	}

	&.sapFAvatarGroupL {
		min-width: 5rem;
		max-height: 5.00625rem;
	}

	&.sapFAvatarGroupXL {
		min-width: 7rem;
		max-height: 7.00625rem;
	}
}

.sapFAvatarGroup:focus {
	outline: @sapContent_FocusWidth @sapContent_FocusStyle @sapUiContentFocusColor;
}

.sapFAvatarGroupGroup {
	cursor: pointer;

	.sapFAvatarGroupItem {
		display: inline-block;
	}
}

.sapFAvatarGroupNonInteractive {
	pointer-events: none;

	&.sapFAvatarGroupIndividual .sapFAvatarGroupItem {
		pointer-events: none;
	}
}

.sapFAvatarGroupIndividual {
	pointer-events: none;

	.sapFAvatar {
		pointer-events: none;
	}

	.sapFAvatarGroupMoreButton {
		pointer-events: all;
		cursor: pointer;
	}

	.sapFAvatarGroupItem {
		pointer-events: all;
		display: inline-block;
		cursor: pointer;
		padding: 0;
		margin: 0;
	}

	.sapFAvatarGroupItem:focus {
		outline: @sapContent_FocusWidth @sapContent_FocusStyle @sapUiContentFocusColor;
	}

	.sapFAvatarGroupItemXS {
		height: 2rem;

		&.sapFAvatarGroupItem:not(:last-child) {
			margin-right: 0.0625rem;
		}
	}

	.sapFAvatarGroupItemS {
		height: 3rem;

		&.sapFAvatarGroupItem:not(:last-child) {
			margin-right: 0.125rem;
		}
	}

	.sapFAvatarGroupItemM {
		height: 4rem;

		&.sapFAvatarGroupItem:not(:last-child) {
			margin-right: 0.125rem;
		}
	}

	.sapFAvatarGroupItemL {
		height: 5rem;

		&.sapFAvatarGroupItem:not(:last-child) {
			margin-right: 0.25rem;;
		}
	}

	.sapFAvatarGroupItemXL {
		height: 7rem;

		&.sapFAvatarGroupItem:not(:last-child) {
			margin-right: 0.25rem;;
		}
	}

	.sapFAvatarGroupItemCustom {
		height: inherit;

		&.sapFAvatarGroupItem:not(:last-child) {
			margin-right: 0.125rem;
		}
	}
}

.sapFAvatarGroupGroup:not(.sapFAvatarGroupShowMore) {
	pointer-events: all;
}

.sapFAvatarGroupGroup {
	.sapFAvatarGroupItem:not(:last-child) {
		&.sapFAvatarGroupItemXS {
			margin-right: -0.75rem;
		}

		&.sapFAvatarGroupItemS {
			margin-right: -1.25rem;
		}

		&.sapFAvatarGroupItemM {
			margin-right: -1.625rem;
		}

		&.sapFAvatarGroupItemL {
			margin-right: -2rem;
		}

		&.sapFAvatarGroupItemXL {
			margin-right: -2.75rem;
		}

		&.sapFAvatarGroupItemCustom {
			margin-right: var(--sapUiAvatarGroupCustomMarginRight);
		}
	}

	.sapFAvatar,
	.sapFAvatarGroupMoreButton {
		pointer-events: none;
	}
}

.sapFAvatarGroupMoreButton.sapMBtn {
	padding: 0;
 }

 .sapFAvatarGroupMoreButton.sapMBtn:focus .sapMBtnFocusDiv {
	border: none;
}

.sapFAvatarGroupMoreButton.sapMBtn:focus > .sapMBtnInner.sapMFocusable.sapMIE {
	outline: @sapContent_FocusWidth @sapContent_FocusStyle @sapUiContentFocusColor;
}

 .sapFAvatarGroupMoreButton.sapMBtn:focus > .sapMFocusable.sapMBtnInner {
	outline-offset: 0;
}

 .sapFAvatarGroupMoreButton .sapMBtnInner {
	border-radius: 50%;
 }

 .sapMBtn.sapFAvatarGroupMoreButton.sapFAvatarGroupMoreButtonXS {
	 height: 2rem;
 }

 .sapMBtn.sapFAvatarGroupMoreButton.sapFAvatarGroupMoreButtonS {
	height: 3rem;
}

.sapMBtn.sapFAvatarGroupMoreButton.sapFAvatarGroupMoreButtonM {
	height: 4rem;
}

.sapMBtn.sapFAvatarGroupMoreButton.sapFAvatarGroupMoreButtonL {
	height: 5rem;
}

.sapMBtn.sapFAvatarGroupMoreButton.sapFAvatarGroupMoreButtonXL {
	height: 7rem;
}

.sapMBtn.sapFAvatarGroupMoreButton.sapFAvatarGroupMoreButtonCustom {
	height: inherit;
	min-width: inherit;
	font-size: inherit;
	line-height: inherit;
}

 .sapFAvatarGroupMoreButtonXS .sapMBtnInner {
	height: 2rem;
	min-width: 2rem;
	font-size: 0.75rem;

	.sapMBtnContent {
		line-height: 2rem;
	}
 }

 .sapFAvatarGroupMoreButtonS .sapMBtnInner {
	height: 3rem;
	min-width: 3rem;
	font-size: 1.125rem;

	.sapMBtnContent {
		line-height: 3rem;
	}
 }

 .sapFAvatarGroupMoreButtonM .sapMBtnInner {
	height: 4rem;
	min-width: 4rem;
	font-size: 1.625rem;

	.sapMBtnContent {
		line-height: 4rem;
	}
 }

 .sapFAvatarGroupMoreButtonL .sapMBtnInner {
	height: 5rem;
	min-width: 5rem;
	font-size: 2rem;

	.sapMBtnContent {
		line-height: 5rem;
	}
 }

 .sapFAvatarGroupMoreButtonXL .sapMBtnInner {
	height: 7rem;
	min-width: 7rem;
	font-size: 2.75rem;

	.sapMBtnContent {
		line-height: 7rem;
	}
 }

.sapFAvatarGroupMoreButtonCustom .sapMBtnInner {
	height: inherit;
	min-width: inherit;
	font-size: inherit;

	.sapMBtnContent {
		line-height: inherit;
	}
}
/* END "AvatarGroup.less" */

/* START "CalendarPlaceholder.less" */
/* ======================================================== */
/* CSS for control sap.f.cards.loading/CalendarPlaceholder	*/
/* Base theme																							 */
/* ======================================================== */

.sapFCard .sapFCardContentCalendarPlaceholder .sapFCardLoadingShimmer {
	background-size: unset;
}

.sapFCardCalendarContent.sapMPCInCardTwoColumns .sapFCardContentCalendarPlaceholder {
	display: flex;
}

.sapFCardContentCalendarPlaceholder {
	.sapFCardContentCalendarPartPlaceholder {
		height: 13rem;
		min-width: 18rem;
		margin: 1rem;
	}
	.sapFCardContentLegendItemsListPlaceholder {
		column-width: 9rem;
	}
	.sapFCardContentItemsListPlaceholder {
		margin: 1rem;
	}
	.sapFCardListPlaceholderItem {
		height: 4.75rem;
		display: block;
		&.sapFCardListPlaceholderLegendItem {
			width: 15rem;
			height: 1.75rem;
			.sapFCardListPlaceholderImg,
			.sapFCardListPlaceholderRows {
				display: inline-block;
			}
			.sapFCardListPlaceholderImg {
				margin: 0.5rem 0.5rem 0.5rem 0;
				height: 1rem;
				width: 1rem;
			}
			.sapFCardListPlaceholderRows {
				.sapFCardListPlaceholderRow {
					width: 6rem;
					margin-left: 0;
				}
				width: 8rem;
			}
		}
		.sapFCardListPlaceholderFromTo {
			height: 1rem;
			width: 5rem;
			display: inline-block;
		}
		.sapFCardListPlaceholderRows {
			.sapFCardListPlaceholderRow {
				height: 1rem;
				width: 8rem;
				margin-left: 2rem;
				&.sapFCardListPlaceholderTextRow {
					height: 0.75rem;
					width: 6rem;
				}
			}
		}
	}
}

.sapUiSizeCompact .sapFCardContentCalendarPlaceholder .sapFCardContentItemsListPlaceholder .sapFCardListPlaceholderItem {
	height: 4.75rem;
}
/* END "CalendarPlaceholder.less" */

/* START "Card.less" */
/* ================================== */
/* CSS for control sap.f/Card         */
/* Base theme                         */
/* ================================== */

@_sap_f_Card_BoxShadow: @sapUiContentShadow0;
@_sap_f_Card_HeaderBorder: 0.0625rem solid @sapUiTileSeparatorColor; // used as top or bottom border
@_sap_f_Card_HeaderFocusBorderRadius: none;
@_sap_f_Card_BorderRadius: @sapUiElementBorderCornerRadius;
@_sap_f_Card_ContentPadding: 1rem;
@_sap_f_Card_HeaderFocusBorderBottomOffset: 1px;
@_sap_f_Card_HeaderFocusBorderTopOffset: 1px;
@_sap_f_Card_HeaderFocusBorderLeftOffset: 1px;
@_sap_f_Card_HeaderFocusBorderRightOffset: 1px;
@_sap_f_Card_Badge_Background: @sapUiBrand;
@_sap_f_Card_Badge_Color: @sapUiContentContrastTextColor;
@_sap_f_Card_Badge_Border: 0.0625rem solid @sapUiButtonLiteBorderColor;
@_sap_f_Card_TitleFontSize: @sapMFontHeader5Size;

.sapFCard {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	vertical-align: top;
	box-sizing: border-box;
	background: @sapUiTileBackground;
	box-shadow: @_sap_f_Card_BoxShadow;
	border-radius: @_sap_f_Card_BorderRadius;
	border: 0.0625rem solid @sapUiTileBorderColor;
	width: 100%;
	height: auto;
	font-family: @sapUiFontFamily;
	font-size: @sapUiFontSize;
	color: @sapUiGroupTitleTextColor;
	outline: none;
}

/* ui5-restricted task center */
.sapFCardTransparent.sapFCard,
ui-integration-card.sapFCardTransparent > [data-sap-ui-area] > .sapFCard {
	border: none;
	border-radius: 0%;
	background: transparent;
	box-shadow: unset;
	overflow: visible;

	& > .sapFCardContent {
		overflow: visible;
	}

	& > .sapFCardHeader,
	& > .sapFCardFilterBar,
	& > .sapFCardFooter {
		background: transparent;
		border: none;
		border-radius: 0%;
	}

	& > .sapFCardFooter .sapMTB {
		background: transparent;
	}
}

.sapFCardMaxItems > .sapMGrowingList,
.sapFCardMaxItems .sapSuiteUiCommonsTimelineShowMoreWrapper {
	display: none;
}

.sapFCard .sapFCardFilterBar {
	padding: 0.5rem @_sap_f_Card_ContentPadding;
	background: @sapUiTileBackground;
	border-bottom: @_sap_f_Card_HeaderBorder;

	.sapFCardFilterBarContent {
		overflow: hidden;

		&.sapFCardFilterBarAFLayout {
			column-gap: 0.5rem;
		}

		&:not(.sapFCardFilterBarAFLayout) .sapFCardFilter {
			max-width: 100%;

			.sapFCardDateRangeField {
				width: 14rem;
				max-width: 100%;
			}
		}
	}
}

.sapFCard .sapFCardHeader {
	position: relative;
	flex-shrink: 0;
	justify-content: space-between;
	background: @sapUiTileBackground;
	border-bottom: @_sap_f_Card_HeaderBorder;
	border-radius: @_sap_f_Card_BorderRadius @_sap_f_Card_BorderRadius 0 0;
	padding: @_sap_f_Card_ContentPadding;
	display: flex;

	.sapFCardHeaderWrapper {
		outline: none;
		display: flex;
		min-width: 0;
		flex: 1;
		height: fit-content;
	}

	.sapFCardHeaderImage {
		position: relative;
	}

	.sapFCardIcon.sapFAvatar {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;

		&.sapFAvatarColorTransparent {
			.sapUiIcon {
				color: @sapUiTileIconColor;
				font-size: 2rem;
				align-self: center;
			}
		}
	}

	.sapFCardHeaderText {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		//fixes bug with flex
		min-width: 0;
		width: 100%;

		.sapFCardTitle {
			min-width: 0;
			display: block;
			font-family: @sapUiFontHeaderFamily;
			font-size: @_sap_f_Card_TitleFontSize;
			font-weight: @sapUiFontHeaderWeight;
			color: @sapUiTileTitleTextColor;
			min-height: 1rem;
			position: relative;
		}
	}

	.sapFCardSubtitle {
		position: relative;
		font-family: @sapUiFontFamily;
		font-size: @sapMFontMediumSize;
		font-weight: normal;
		color: @sapUiTileTextColor;
		min-height: 1rem;
		flex-grow: 1;
	}

	.sapFCardStatus {
		position: relative;
		font-family: @sapUiFontFamily;
		font-size: @sapMFontSmallSize;
		color: @sapUiTileTextColor;
		text-align: right;
		line-height: normal;
		margin-left: 1rem;
		margin-top: 0.188rem;
		display: inline-block;
		white-space: nowrap;
	}

	.sapFCardHeaderTextFirstLine {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.sapFCardHeaderTextSecondLine {
		margin-top: 0.25rem;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.sapFCardDataTimestamp {
		color: @sapUiTileTextColor;
		font-size: @sapMFontSmallSize;
		margin-left: auto;
		flex-shrink: 0;
	}

	.sapFCardHeaderLineIncludesDataTimestamp .sapFCardSubtitle {
		margin-right: 1rem;
	}

	.sapFCardHeaderToolbarCont .sapFCardHeaderToolbar {
		margin: -0.25rem 0 -0.25rem 0.5rem;
	}

	.sapFCardHeaderBanner {
		display: flex;
		justify-content: flex-end;
		margin: 0.25rem -(@_sap_f_Card_ContentPadding) 0;

		.sapFCardHeaderBannerInner {
			padding-inline-start: 0.25rem;
			padding-inline-end: @_sap_f_Card_ContentPadding;
			background-color: @sapUiInfobarNonInteractiveBackground;
			border-radius: 0.125rem 0 0 0.125rem;

			.sapFCardHeaderBannerLine {
				display: flex;
				justify-content: flex-end;
				padding: 0.125rem 0;

				.sapMText {
					font-size: @sapUiFontSmallSize;
					color: @sapUiTileTitleTextColor;
				}

				.sapMText.sapFCardHeaderBannerLineDiminished {
					color: @sapUiTileTextColor;
				}
			}
		}
	}
}

.sapFCard .sapFCardIcon.sapFAvatar {
	margin-right: 0.75rem;

	&:not(.sapFAvatarImage):not(.sapFAvatarInitials) {
		border: none;
	}
}

.sapFCard.sapFCardBottomHeader {
	.sapFCardHeader {
		border-top: @_sap_f_Card_HeaderBorder;
		border-bottom: none;
		border-radius: 0 0 @_sap_f_Card_BorderRadius @_sap_f_Card_BorderRadius;
	}

	.sapFCardContent {
		border-radius: @_sap_f_Card_BorderRadius @_sap_f_Card_BorderRadius 0 0;
	}
}

.sapFCard .sapFCardHeader.sapFCardNumericHeader {

	.sapFCardHeaderContent {
		outline: none;
		min-width: 0; // fixes Chrome issue
		flex: 1;
	}

	.sapFCardStatus {
		min-width: fit-content;
	}

	.sapFCardSubtitle {
		margin: 0.25rem 0 0 0;
		display: flex;
		align-items: flex-end;

		.sapFCardHeaderUnitOfMeasurement {
			flex-shrink: 0;
			max-height: 1rem;
		}

		&.sapFCardSubtitleAndUnit .sapFCardHeaderUnitOfMeasurement {
			margin-left: 0.25rem;
			padding-left: 0.25rem;
			border-left: 1px solid @sapUiTileTextColor;
		}
	}

	.sapFCardHeaderText .sapFCardSubtitle .sapMText {
		color: @sapUiTileTextColor;
	}

	.sapFCardAvatarAndIndicatorsLine {
		display: flex;
		align-items: center;

		.sapFCardIcon.sapFAvatar {
			margin-top: 0.5rem;
			margin-right: 0;
		}
	}

	.sapFCardNumericIndicators {
		margin-top: 0.25rem;
		flex: 1;
		min-width: 0; // allows items to shrink and truncate the content inside

		.sapFCardHeaderSideIndicator .sapFCardHeaderSITitle,
		.sapFCardHeaderSINumber,
		.sapFCardHeaderSINumber .sapMText {
			font-size: @sapMFontSmallSize;
		}

		.sapFCardNumericIndicatorsSide {
			padding: 0.5rem 0;
		}
	}

	.sapFCardHeaderDetailsWrapper {
		margin-top: 0.25rem;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.sapFCardHeaderDetails {
		font-size: @sapMFontSmallSize;
		color: @sapUiTileTextColor;
		position: relative;
		flex-grow: 1;
	}

	.sapFCardHeaderLineIncludesDataTimestamp .sapFCardHeaderDetails {
		margin-right: 1rem;
	}
}

.sapFCardHeaderSideIndicator {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	min-width: 0; // allows items to shrink and truncate the content inside
	.sapFCardHeaderSITitle {
		color: @sapUiTileTextColor;
		padding-bottom: 0.25rem;
		position: relative;
	}
	.sapFCardHeaderSINumber,
	.sapFCardHeaderSINumber .sapMText {
		color: @sapUiTileTitleTextColor;
		position: relative;
	}
}

// Value colors for the Side Indicators in the Numeric header
.sapFCard .sapFCardHeaderSideIndicatorStateCritical .sapFCardHeaderSINumber span {
	color: @sapUiCriticalText;
}

.sapFCard .sapFCardHeaderSideIndicatorStateError .sapFCardHeaderSINumber span {
	color: @sapUiNegativeText;
}

.sapFCard .sapFCardHeaderSideIndicatorStateGood .sapFCardHeaderSINumber span {
	color: @sapUiPositiveText;
}

.sapFCard .sapFCardHeaderSideIndicatorStateNeutral .sapFCardHeaderSINumber span {
	color: @sapUiNeutralText;
}

.sapFCard .sapFCardContent {
	flex: 1 1 auto;
	overflow: hidden;
	position: relative;
	display: flex;
	border-radius: 0 0 @_sap_f_Card_BorderRadius @_sap_f_Card_BorderRadius;

	.sapFCardContentListPlaceholder,
	.sapFCardBaseContent {
		max-width: 100%;
		flex: 1;
		box-sizing: border-box;
	}
}

.sapFCard.sapFCardNoHeader > .sapFCardContent {
	border-radius: @_sap_f_Card_BorderRadius;

	&:focus {
		border-radius: inherit;
	}
}

.sapFCard .sapFCardContent {
	.sapVizFrame {
		min-height: inherit;

		.ui5-viz-controls-app {
			min-height: inherit;
		}
	}

	.sapMLIB.sapMSLINoDescIcon {
		padding: 0 1rem 0 0.125rem; // padding left is for alignment with the header
	}

	.sapMLIBContent {
		.sapMSLIDiv {
			flex: 1 1 auto;
		}
	}

	.sapUiView.sapUiXMLView > .sapMImg {
		display: block; // Fix for unwanted space under the only image inside Component Card content
	}

	.sapFCardIcon.sapFAvatarColorTransparent {
		.sapUiIcon {
			color: @sapUiContentNonInteractiveIconColor;
		}
	}
}

html[data-sap-ui-browser^="sf"] .sapFCard,
html[data-sap-ui-browser^="cr"] .sapFCard {
	.sapFCardHeaderText {
		flex: 1;
	}

	.sapFCardContent {
		.sapMLIBContent {
			.sapMSLIDiv {
				flex: 1;
			}
		}
	}
}

.sapFCard.sapFCardNoContent .sapFCardHeader {
	border-bottom: none;
	border-radius: @_sap_f_Card_BorderRadius;
	flex-grow: 1;
}

.sapFCard.sapFCardSectionInteractive {
	&[data-sap-ui-draggable=true] {
		.sapMText {
			cursor: grab;
		}
	}

	&:not(.sapFCardTransparent) {
		.sapFCardSectionClickable:hover {
			background: @sapUiTileHoverBackground;
		}

		.sapFCardSectionClickable:active {
			background: @sapUiTileActiveBackground;
		}
	}

	.sapFCardSectionClickable,
	.sapFCardSectionClickable svg {
		cursor: pointer !important;

		.sapMText {
			cursor: pointer;
		}
	}
}

.sapFCardHeader:not(.sapFCardHeaderToolbarFocused):focus-within::before,
.sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus > .sapFCard > .sapFCardHeader:not(.sapFCardHeaderToolbarFocused)::before, // focus inside Grid Container
.sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus > .sapFCard.sapFCardNoHeader::before { // ... focus on a card without header
	content: '';
	display: block;
	position: absolute;
	left: @_sap_f_Card_HeaderFocusBorderLeftOffset;
	bottom: @_sap_f_Card_HeaderFocusBorderBottomOffset;
	right: @_sap_f_Card_HeaderFocusBorderRightOffset;
	top: @_sap_f_Card_HeaderFocusBorderTopOffset;
	border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
	border-radius: @_sap_f_Card_HeaderFocusBorderRadius;
	pointer-events: none;
}

.sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus > .sapFCard.sapFCardNoHeader::before { // focus inside GridContainer on a card without header
	bottom: 1px;
	z-index: 1;
}

.sapUiSizeCompact {
	.sapFCard .sapFCardContent {

		.sapMLIB.sapMSLINoDescIcon {
			padding: 0 1rem 0 0;

			.sapMSLIImgIcon.sapUiIcon {
				font-size: 1rem;
				height: 1rem;
				line-height: 1rem;
			}
		}
		.sapMListTbl {
			padding-bottom: 0.5rem;
		}
	}
}

.sapFCardAdaptiveContent {
	.sapFCardAdaptiveContentChoiceSetWrapper {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: flex-start;
		height: fit-content;
	}
	.sapFTimeInput {
		width: 13.125rem;
	}
}

.sapFCardTableContent {
	.sapMListTbl {
		border: none;
	}
}

.sapFCard .ac-adaptiveCard {
	outline: none;
}

.sapFCard.sapMBadge .sapMBadgeIndicator {
	padding: 0 0.5rem;
	top: -0.6125rem;
	right: 0;
	height: auto;
}

.sapFCard.sapMBadge .sapMBadgeIndicator:after {
	background: @_sap_f_Card_Badge_Background;
	color: @_sap_f_Card_Badge_Color;
	border: @_sap_f_Card_Badge_Border;

}

.sapFCard.sapMBadge .sapMBadgeIndicator:before {
	background: @_sap_f_Card_Badge_Background;
	color: @_sap_f_Card_Badge_Color;
	border: @_sap_f_Card_Badge_Border;
}

.sapFCardExperimentalCaching {
	.sapFCardDataTimestamp {
		min-width: 100px;
		padding-right: 1px;
	}

	.sapFCardDataTimestamp:not(.sapFCardDataTimestampUpdating) {
		cursor: pointer;
		&:hover:before {
			content: "\e010";
			font-family: "SAP-icons";
			margin-right: 4px;
			font-size: 0.7rem;
		}
	}
}

.sapFCardFooter {
	padding: 0.5rem 1rem 0.7rem;
}

.sapFCardContentMessageContainer {
	position: absolute;
	padding: 1rem;
	z-index: 1;
	pointer-events: none;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;

	.sapFCardContentMessage {
		pointer-events: all;
		box-shadow: @sapUiShadow;
	}
}

/* END "Card.less" */

/* START "CardLoading.less" */
/* ================================== */
/* CSS for control sap.f/CardLoading  */
/* Base theme                         */
/* ================================== */
@_sap_f_Card_FocusBorderWidth: 1px;
@sap_f_Card_Background_Placeholder_Color: @sapContent_Placeholderloading_Background;
@sap_f_Card_Placeholder_Gradient: linear-gradient(to right, @sapContent_Placeholderloading_Background 0%, @sapContent_Placeholderloading_Background 35%, darken(@sapContent_Placeholderloading_Background, 5) 50%, @sapContent_Placeholderloading_Background 65%, @sapContent_Placeholderloading_Background 100%);

.sapFCard {

	.sapFCardHeader.sapFCardHeaderLoading,
	&.sapFCardPreview .sapFCardHeader {

		.sapFCardHeaderImage.sapFCardHeaderItemBinded {
			height: 3rem;
			width: 3rem;
			margin-right: 0.75rem;
			//hide the fallback icon
		}

		.sapFCardHeaderText .sapFCardHeaderTextFirstLine {

			.sapFCardTitle.sapFCardHeaderItemBinded {
				flex: 1 0;
				position: relative;
			}

			.sapFCardStatus.sapFCardHeaderItemBinded {
				min-width: 1.5rem;
				min-height: 1rem;
			}
		}

		.sapFCardHeaderItemBinded::after {
			.sapFCardLoadingShimmerMixin();
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}
	}

	&.sapFCardPreview .sapFCardFilter,
	.sapFCardFilterLoading {
		position: relative;
		&::after {
			.sapFCardLoadingShimmerMixin();
			content: "";
			position: absolute;
			top: 2px;
			bottom: 2px;
			left: 0;
			right: 0;
		}
	}

	&.sapFCardPreview .sapFCardFooter,
	.sapFCardFooterLoading {
		.sapUiIntActionsStrip {
			position: relative;
			&::after {
				content: "";
				position: absolute;
				width: 100%;
				height: 100%;
				background-color: @sapUiTileBackground;
			}
		}
	}

	.sapFCardNumericHeader.sapFCardHeaderLoading,
	&.sapFCardPreview .sapFCardNumericHeader {
		.sapFCardNumericIndicatorsMain .sapFCardHeaderItemBinded {
			min-width: 5rem;
		}

		.sapFCardHeaderSideIndicator.sapFCardHeaderItemBinded {
			flex: 1 0;
			min-height: 2rem;
		}

		.sapFCardHeaderDetails.sapFCardHeaderItemBinded {
			flex: 1 0;
			min-height: 0.5rem;
			width: 100%;
		}
	}

	.sapFCardContent {

		.sapFCardContentHidden {
			display: none;
		}

		.sapFCardBaseContent.sapFCardContentLoading:not(.sapFCardObjectContent) > :not(.sapFCardContentPlaceholder):not(.sapFCardContentMessageContainer) {
			display: none;
		}

		.sapFCardContentPlaceholder {
			outline: none;
		}

		.sapFCardContentPlaceholder:focus::before {
			content: '';
			display: block;
			position: absolute;
			left: 1px;
			bottom: 1px;
			right: 1px;
			top: 1px;
			border: @_sap_f_Card_FocusBorderWidth dotted @sapUiContentFocusColor;
			pointer-events: none;
		}

		.sapFCardContentGenericPlaceholder,
		.sapFCardContentAnalyticalPlaceholder {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;

			.sapFCardSVG {
				fill: @sapUiTileBackground;
			}
		}

		.sapFCardContentAnalyticalPlaceholder > div {
			padding: 0.5rem;
		}

		.sapFCardContentGenericPlaceholder {
			.sapFCardLoadingShimmer {
				max-width: 144px;
				max-height: 144px;
				height: ~"calc(100% - 4px)"; /* leave place for the focus */
			}
		}
	}

	.sapFCardLoadingShimmer {
		.sapFCardLoadingShimmerMixin();
	}

	.sapFCardLoadingShimmerMixin() {
		background-color: @sap_f_Card_Background_Placeholder_Color;
		background-image: @sap_f_Card_Placeholder_Gradient;
		background-repeat: no-repeat;
		background-size: 800px 100%;
		position: relative;
		border-radius: 0.25rem;

		[data-sap-ui-animation-mode="full"] & {
			animation-duration: 2.5s;
			animation-fill-mode: forwards;
			animation-iteration-count: infinite;
			animation-name: placeHolderShimmer;
			animation-timing-function: linear;
		}

		[data-sap-ui-animation-mode="basic"] &,
		[data-sap-ui-animation-mode="minimal"] & {
			animation-duration: 8s;
			animation-fill-mode: forwards;
			animation-iteration-count: infinite;
			animation-name: placeHolderShimmer;
			animation-timing-function: linear;
		}
	}

	@keyframes placeHolderShimmer {
		0% {
			background-position: -468px 0;
		}

		100% {
			background-position: 468px 0;
		}
	}

	&.sapFCardPreview {
		.sapFCardHeaderItemBinded::after,
		.sapFCardFilter::after,
		.sapFCardLoadingShimmer,
		.sapUiIntActionsStrip::after {
			background-image: unset !important;
			animation-name: unset !important;
		}
	}
}

/* END "CardLoading.less" */

/* START "CardNumericIndicators.less" */
/* ============================================= */
/* CSS for control sap.f.cards/NumericIndicators */
/* Base theme                                    */
/* ============================================= */

.sapFCardNumericIndicators {
	display: flex;
	align-items: flex-start;

	&.sapFCardNumericIndicatorsSideAlignBegin .sapFCardNumericIndicatorsGap {
		max-width: 3rem;
	}

	.sapFCardNumericIndicatorsMain .sapMNC.WithoutMargin {
		height: 100%;

		.sapMNCInner.WithoutMargin {
			position: relative;
		}
	}

	.sapFCardNumericIndicatorsGap {
		flex: 1 0 1rem;
	}

	.sapFCardNumericIndicatorsSide {
		min-width: 0; // allows items to shrink and truncate the content inside
		display: flex;

		.sapFCardHeaderSideIndicator {
			margin-right: 1rem;
			position: relative;
		}
		.sapFCardHeaderSideIndicator:last-child {
			margin-right: 0;
		}
	}
}
/* END "CardNumericIndicators.less" */

/* START "DynamicPage.less" */
/* ================================== */
/* CSS for control sap.f/DynamicPage  */
/* Base theme                         */
/* ================================== */

@_sap_f_DynamicPage_FooterHeight: 3rem;
@_sap_f_DynamicPage_FooterHeight_Compact: 2.5rem;
@_sap_f_DynamicPage_FooterMarginBottom: 0.5rem;
@_sap_f_DynamicPage_OverlayScrollbarWidth: 12px;

.sapFDynamicPage {
	width: 100%;
	height: 100%;
	position: relative;
	isolation: isolate;
	z-index: 0;

	.sapFDynamicPageContentWrapperStandard,
	.sapFDynamicPageContentWrapperSolid {
		&>.sapFDynamicPageContent {
			background: @sapUiBaseBG;
		}
	}

	.sapFDynamicPageHeaderSolid {
		background: @sapUiBaseBG;
	}

	.sapFDynamicPageContentWrapperTransparent>.sapFDynamicPageContent {
		background: transparent;
	}

	.sapFDynamicPageContentWrapperList>.sapFDynamicPageContent {
		background: @sapUiGroupContentBackground;
	}
}

.sapFDynamicPageTitleWrapper {
	position: absolute;
	padding-right: 0;
	top: 0;
	right: 0;
	left: 0;
	z-index: 2;
}

.sap-desktop .sapFDynamicPage.sapFDynamicPageWithOverlayScrollbar {
	.sapFDynamicPageHeaderWrapper {
		padding-right: @_sap_f_DynamicPage_OverlayScrollbarWidth;
	}

	&:not(.sapFDynamicPage-Std-Phone).sapUiNoContentPadding .sapFDynamicPageContent .sapFDynamicPageStickySubheader:not(.sapFDynamicPageHeaderWrapper .sapFDynamicPageStickySubheader),
	&:not(.sapFDynamicPage-Std-Phone).sapUiNoContentPadding .sapFDynamicPageContent .sapMITH:not(.sapFDynamicPageHeaderWrapper .sapMITH) {
		margin-right: @_sap_f_DynamicPage_OverlayScrollbarWidth;
	}
}

.sap-desktop .sapFDynamicPage.sapFDynamicPage-Std-Phone.sapFDynamicPageWithOverlayScrollbar {
	.sapFDynamicPageContent .sapFDynamicPageAlignContent {
		margin-right: 0;
	}

	&.sapUiNoContentPadding .sapFDynamicPageContent {
		margin-right: @_sap_f_DynamicPage_OverlayScrollbarWidth;
	}
}

.sapFDynamicPageContent {
	flex-grow: 1;
	-webkit-flex-grow: 1;
	z-index: 0;

	.sapFDynamicPageAlignContent {
		margin-left: -@sapUiMarginSmall;
		margin-right: -@sapUiMarginSmall;
	}
}

/* TODO remove after the end of support for Internet Explorer */
html[data-sap-ui-browser^="ie"] {
	.sapFDynamicPageContent {
		flex-shrink: 0;
	}
}

.sapFDynamicPageContent,
.sapFDynamicPageContentFitContainer {
	position: relative;
	padding: 1rem 3rem 0 3rem;
	box-sizing: border-box;
}

.sapFDynamicPageContent > .sapFDynamicPageContentFitContainer {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

// adds space underneath the footer (when page in scrollable mode)
.sapFDynamicPageContentFitContainerFooterVisible:not(.sapFDynamicPageContentFitContainer) {
	padding-bottom: ~"calc(@{_sap_f_DynamicPage_FooterHeight} + ( @{_sap_f_DynamicPage_FooterMarginBottom} * 2 ) )";
}

.sapUiSizeCompact {
	.sapFDynamicPageContentFitContainerFooterVisible:not(.sapFDynamicPageContentFitContainer) {
		padding-bottom: ~"calc(@{_sap_f_DynamicPage_FooterHeight_Compact} + ( @{_sap_f_DynamicPage_FooterMarginBottom} * 2 ) )";
	}
}

// adds space underneath the footer (when page in non-scrollable mode)
.sapFDynamicPageContentFitContainerFooterVisible.sapFDynamicPageContentFitContainer {
	max-height: ~"calc(100% - (@{_sap_f_DynamicPage_FooterHeight} + ( @{_sap_f_DynamicPage_FooterMarginBottom} * 2 ) ))";
}

.sapUiSizeCompact {
	.sapFDynamicPageContentFitContainerFooterVisible.sapFDynamicPageContentFitContainer {
		max-height: ~"calc(100% - (@{_sap_f_DynamicPage_FooterHeight_Compact} + ( @{_sap_f_DynamicPage_FooterMarginBottom} * 2 ) ))";
	}
}

.sapFDynamicPage-Std-Tablet {
	.sapFDynamicPageContent,
	.sapFDynamicPageContentFitContainer {
		padding: 2rem 2rem 0 2rem;
	}
}

.sapFDynamicPage-Std-Phone {
	.sapFDynamicPageContent,
	.sapFDynamicPageContentFitContainer {
		padding: 2rem 1rem 0 1rem;
	}
}

.sapUiContainerContentPadding(~".sapFDynamicPage", ~".sapFDynamicPageContent");
.sapUiContainerContentPadding(~".sapFDynamicPage", ~".sapFDynamicPageContentFitContainer");

.sapFDynamicPage.sapUiContentPadding,
.sapFDynamicPage.sapUiNoContentPadding,
.sapFDynamicPage.sapUiResponsiveContentPadding {
	.sapFDynamicPageAlignContent {
		margin: 0;
	}
}

.sapFDynamicPage.sapUiContentPadding {
	.sapFDynamicPage-Std-Phone {
		.sapFDynamicPageAlignContent {
			margin: 0 -1rem;
		}
	}
}

.sapFDynamicPage.sapUiResponsiveContentPadding {
	&.sapFDynamicPage-Std-Phone {
		.sapFDynamicPageContent,
		.sapFDynamicPageContentFitContainer {
			padding: 0;
			padding-top: 1rem;
		}
	}

	&.sapFDynamicPage-Std-Tablet {
		.sapFDynamicPageContent,
		.sapFDynamicPageContentFitContainer {
			padding: 1rem;
		}
	}

	&.sapFDynamicPage-Std-Desktop {
		.sapFDynamicPageContent,
		.sapFDynamicPageContentFitContainer {
			padding: 1rem 2rem;
		}
	}
}

.sapFDynamicPageFooterVisible .sapFDynamicPageContentWrapper,
.sapFDynamicPageFooterVisible .sapFDynamicPageContentFitContainer *[style*="overflow: hidden auto;"] {
	scroll-padding-bottom: ~"calc(@{_sap_f_DynamicPage_FooterHeight} +  @{_sap_f_DynamicPage_FooterMarginBottom} + 2px)";
}

.sapUiSizeCompact {
	.sapFDynamicPageFooterVisible .sapFDynamicPageContentWrapper,
	.sapFDynamicPageFooterVisible .sapFDynamicPageContentFitContainer *[style*="overflow: hidden auto;"] {
		scroll-padding-bottom: ~"calc(@{_sap_f_DynamicPage_FooterHeight_Compact} +  @{_sap_f_DynamicPage_FooterMarginBottom} + 2px)";
	}
}

.sapFDynamicPageContentWrapper {
	width: 100%;
	height: 100%;
	position: relative;
	will-change: scroll-position;
	-webkit-overflow-scrolling: auto;

	display: -webkit-box;
	display: -webkit-flex;
	display: flex;

	-webkit-flex-direction: column;
	flex-direction: column;

	// Scroll anchoring adjusts the scroll position to prevent visible jumps (or "reflows"),
	// when content changes above the viewport.
	// See: https://github.com/WICG/ScrollAnchoring/blob/master/explainer.md
	overflow-anchor: none;

	overflow-y: auto;
}

.sapFDynamicPageSupressScroll {
	.sapFDynamicPageContentWrapper {
		overflow: hidden;
	}
}

.sapFDynamicPage .sapFDynamicPageTitleWrapper {
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	flex-shrink: 0;
	-webkit-flex-shrink: 0;
}

html.sap-desktop .sapFDynamicPage.sapFDynamicPageWithScroll {

	.sapFDynamicPageFooter .sapFDynamicPageActualFooterControl {
		right: @_sap_f_DynamicPage_OverlayScrollbarWidth;
	}
}

.sapFDynamicPageContentWrapper {
	-webkit-flex-grow: 1;
	flex-grow: 1;
}

.sapFDynamicPage,
.sapFDynamicPage.sapFNavItem {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
}

// DynamicPageTitle hover
.sapFDynamicPage.sapFDynamicPageTitleClickEnabled {
	.sapFDynamicPageTitle:hover,
	&.sapFDynamicPageTitleForceHovered .sapFDynamicPageTitle {
		cursor: pointer;

		.sapMFlexBox {
			cursor: default;
		}
	}
}

// Overstyle for Comparison Pattern
.sapFDynamicPage.sapFDynamicPageTitleClickEnabled.sapUiComparisonContainer {
	.sapFDynamicPageTitleMainInner:hover {
		cursor: pointer;
	}

	.sapFDynamicPageTitle:hover,
	&.sapFDynamicPageTitleForceHovered .sapFDynamicPageTitle {
		cursor: default;
	}
}

// Reflection: Overwritten styles
.sapFDynamicPageTitleMainHeading,
.sapFDynamicPageTitleMainContent,
.sapFDynamicPageTitleMainActions {
	// BCP: 1870261908 - CSS cursor reset is needed here to prevent showing pointer for not clickable control types
	cursor: default;
}

.sapFDynamicPage {
	.sapFDynamicPageFooter {
		position: relative;

		.sapFDynamicPageActualFooterControl {
			position: absolute;
			height: @_sap_f_DynamicPage_FooterHeight;
			width: auto;
			bottom: 0;
			right: 0;
			left: 0;
			border-radius: 0.25rem;
			margin-left: 0.5rem;
			margin-right: 0.5rem;
			margin-bottom: @_sap_f_DynamicPage_FooterMarginBottom;
		}
	}
}

.sapUiSizeCompact .sapFDynamicPage .sapFDynamicPageFooter .sapFDynamicPageActualFooterControl {
	height: @_sap_f_DynamicPage_FooterHeight_Compact;
}

/* ============================== */
/* Toggle Header Visual Indicator */
/* ============================== */
.sapFDynamicPageToggleHeaderIndicator.sapMBtn,
.sapFDynamicPageHeaderPinButton.sapMBtn {
	position: absolute;
	left: 50%;
	padding: 0;

	// Reflection: Overwritten styles
	.sapMBtnInner {
		position: absolute !important;
		border-radius: 0.1875rem;
	}
}

/* Tablet and Desktop */
.sapFDynamicPageToggleHeaderIndicator,
.sapFDynamicPageHeaderPinButton {
	bottom: -1.375rem;
}

.sapFDynamicPageToggleHeaderIndicator,
.sapFDynamicPageToggleHeaderIndicator.sapUiHidden ~ .sapFDynamicPageHeaderPinButton {
	margin-left: -1.25rem;
}

.sapFDynamicPageHeaderPinnable .sapFDynamicPageToggleHeaderIndicator {
	margin-left: -2.5rem;
}

.sapFDynamicPageHeaderPinButton {
	margin-left: 0.25rem;
}

/* Compact */
.sapUiSizeCompact {
	.sapFDynamicPageToggleHeaderIndicator,
	.sapFDynamicPageHeaderPinButton {
		bottom: -0.875rem;

		// Reflection: Overwritten styles
		.sapMBtnInner.sapMBtnIconFirst:not(.sapMBtnBack) {
			padding-left: 0;
			padding-right: 0;
		}
	}
}

/* ============= */
/* Animations    */
/* ============= */

html[data-sap-ui-animation='on'] .sapFDynamicPage {
	.sapFDynamicPageActualFooterControlShow {
		-webkit-animation: bounceShow 0.35s forwards ease-in-out;
		animation: bounceShow 0.35s forwards ease-in-out;
	}
	.sapFDynamicPageActualFooterControlHide {
		-webkit-animation: bounceHide 0.35s forwards ease-in-out;
		animation: bounceHide 0.35s forwards ease-in-out;
	}

	@-webkit-keyframes bounceShow {
		0% {
			-webkit-transform: translateY(100%);
			transform: translateY(100%);
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	@keyframes bounceShow {
		0% {
			transform: translateY(100%);
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	@-webkit-keyframes bounceHide {
		0% {
			-webkit-transform: translateY(-5%);
			transform: translateY(-5%);
			opacity: 1;
		}
		100% {
			-webkit-transform: translateY(100%);
			transform: translateY(100%);
			opacity: 0;
		}
	}
	@keyframes bounceHide {
		0% {
			transform: translateY(-5%);
			opacity: 1;
		}
		100% {
			transform: translateY(100%);
			opacity: 0;
		}
	}
}


/* Vertically align items in the table-like view with the items in the sap.m.Carousel control,
part of DynamicPageTitle snapped content and DynamicPageHeader content.
To be used in Comparison pattern scenario. */
.sapUiComparisonContent .sapUiComparisonItem  {
	padding-left: 2.25rem;
	padding-right: 1rem;
}

.sapUiComparisonContent :first-child.sapUiComparisonItem {
	padding-left: 1rem;
}

.sapUiComparisonContainer .sapFDynamicPageTitleSnapped + .sapFDynamicPageContentWrapper .sapUiComparisonContent  {
	margin-right: -1rem;
}

// Avoid visible gap between content and header when title is snapped
.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnapped + .sapFDynamicPageContentWrapper > .sapFDynamicPageHeaderWrapper {
	background: @sapUiObjectHeaderBackground;
}

.sapFDynamicPageWithOverlayScrollbar .sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnapped + .sapFDynamicPageContentWrapper > .sapFDynamicPageHeaderWrapper {
	margin-inline-end: @_sap_f_DynamicPage_OverlayScrollbarWidth;
}

/* END "DynamicPage.less" */

/* START "DynamicPageTitle.less" */
/* ======================================= */
/* CSS for control sap.f/DynamicPageTitle  */
/* Base theme                              */
/* ======================================= */
.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnapped > .sapFDynamicPageTitle,
.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleOnly > .sapFDynamicPageTitle {
	box-shadow: @sapUiShadowHeader;

	.sapFDynamicPageHeader {
		border-bottom: none;
	}
}

.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnapped > .sapFDynamicPageTitle {
	.sapFDynamicPageTitleMain {
		.sapFDynamicPageTitleMainContent {
			padding-bottom: 0;
		}
	}
}

.sapFDynamicPageTitle {
	z-index: 3;
	position: relative;
	min-height: 3rem;
	padding: 0.5rem 2rem 0.5rem 3rem;
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	box-sizing: border-box;
	background: @sapUiObjectHeaderBackground;

	.sapFDynamicPageToggleHeaderIndicator.sapUiHidden {
		display: none;
	}

	.sapFDynamicPageTitleExpanded.sapUiHidden *,
	.sapFDynamicPageTitleSnapped.sapUiHidden * {
		visibility: hidden;
	}

	.sapFDynamicPageTitleMain > .sapFDynamicPageTitleMainInner {
		.sapFDynamicPageTitleMainContent .sapMTB {
			padding-left: 0.5rem;
			padding-right: 0.5rem;
		}

		.sapFDynamicPageTitleMainActions {
			padding-left: 0.5rem;
		}
	}

	html.sap-desktop & {
		&.sapFDynamicPageTitleFocus {
			outline: 0.0625rem dotted @sapUiContentFocusColor;
			outline-offset: -0.0625rem;
		}
	}

	.sapFDynamicPageTitleFocusSpan {
		outline: none;
	}

	.sapFDynamicPageTitleTop {
		display: flex;
		display: -webkit-flex;
		align-items: center;
		-webkit-align-items: center;

		justify-content: space-between;
		-webkit-justify-content: space-between;

		&> .sapFDynamicPageTitleTopLeft {
			min-height: 1rem;
			width: 75%;

			&> :first-child {
				margin: 0;
			}
		}

		&> .sapFDynamicPageTitleTopRight {
			width: 25%;
			display: flex;
			display: -webkit-flex;
			align-items: center;
			-webkit-align-items: center;
			justify-content: flex-end;
			-webkit-justify-content: flex-end;
		}

		&.sapFDynamicPageTitleTopBreadCrumbsOnly > .sapFDynamicPageTitleTopLeft {
			width: 100%;
		}

		&.sapFDynamicPageTitleTopNavActionsOnly > .sapFDynamicPageTitleTopRight{
			width: 100%;
		}
	}

	.sapFDynamicPageTitleMain {
		position: relative;
		display: flex;
		display: -webkit-flex;
		align-items: flex-start;
		-webkit-align-items: flex-start;
		flex-direction: row;
		-webkit-flex-direction: row;
		box-sizing: border-box;

		&.sapUiHidden {
			position: absolute;
		}

		&> .sapFDynamicPageTitleMainNavigationArea,
		&> .sapFDynamicPageTitleMainNavigationArea > .sapFDynamicPageTitleMainNavigationAreaInner{
			display: flex;
			display: -webkit-flex;
			align-items: center;
			-webkit-align-items: center;
		}
	}

	.sapFDynamicPageTitleActionsBar.sapMTB {
		justify-content: flex-end;
		-webkit-justify-content: flex-end;
		overflow: visible;
	}
}

 .sapFDynamicPageTitleMainNavigationAreaInner .sapMIBar.sapMTB .sapMBarChild:first-child {
	 margin-left: 0.25rem;
 }

 .sapFDynamicPageTitleMainContent .sapMIBar.sapMTB .sapMBarChild:first-child {
	margin-left: 0;
}

/* TODO remove after the end of support for Internet Explorer */
html[data-sap-ui-browser^="ie"].sap-desktop,
html[data-sap-ui-browser^="ed"].sap-desktop {
	.sapFDynamicPageTitleMain {
		height: 100%; /* fixes IE flexbox item centering issue BCP: 1680351222 */
	}
}

/* IE and Edge ignores outline-offset. Use an overlay: */
/* TODO remove after the end of support for Internet Explorer */
html[data-sap-ui-browser^="ie"].sap-desktop,
html[data-sap-ui-browser^="ed"].sap-desktop {
	.sapFDynamicPageTitle.sapFDynamicPageTitleFocus {
		outline: none;
		position: relative;
	}
	.sapFDynamicPageTitle.sapFDynamicPageTitleFocus:before {
		content: " ";
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		border: 0.0625rem dashed @sapUiContentFocusColor;
		pointer-events: none;
	}
}

/* Firefox fix due to focus cut out from top and left */
html[data-sap-ui-browser^="ff"].sap-desktop {
	.sapFDynamicPageTitle.sapFDynamicPageTitleFocus {
		outline: none;
		position: relative;
	}
	.sapFDynamicPageTitle.sapFDynamicPageTitleFocus:before {
		content: " ";
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		border: 0.0625rem dotted @sapUiContentFocusColor;
		pointer-events: none;
	}
}

/* ========== */
/* Title Main */
/* ========== */

/* Heading area */
.sapFDynamicPageTitleMain > .sapFDynamicPageTitleMainInner {
	display: flex;
	display: -webkit-flex;
	align-items: flex-start;
	-webkit-align-items: flex-start;
	flex-grow: 1;
	width: 100%; // to make Edge work

	.sapFDynamicPageTitleMainHeading {
		display: flex;
		display: -webkit-flex;
		align-items: flex-start;
		-webkit-align-items: flex-start;
		flex-direction: column;
		-webkit-flex-direction: column;
		justify-content: space-between;
		-webkit-justify-content: space-between;
		min-width: 0;

		.sapFDynamicPageTitleMainHeadingInner,
		.sapFDynamicPageTitleMainHeadingSnappedExpandContent {
			text-overflow: ellipsis;
			white-space: nowrap;
			box-sizing: border-box;
			vertical-align: middle;
		}

		.sapFDynamicPageTitleMainHeadingInner {
			min-width: 1px;
			max-width: 100%;
			color: @sapUiGroupTitleTextColor;
			margin-top: 0.1875rem;

			/* Override Title styles, required by VD */
			.sapMTitle {
				font-size: @sapMFontHeader3Size;
			}
		}

		.sapFDynamicPageTitleMainHeadingSnappedExpandContent {
			color: @sapUiContentLabelColor;
			font-size: @sapMFontMediumSize;
		}

		.sapFDynamicPageTitleMainHeadingSnappedExpandContent.sapFDynamicPageTitleMainSnapContentVisible,
		.sapFDynamicPageTitleMainHeadingSnappedExpandContent.sapFDynamicPageTitleMainExpandContentVisible {
			min-width: 4rem;
			max-width: 100%;
		}
	}

	.sapFDynamicPageTitleMainContent {
		min-width: 0.0625rem;
		padding: 0 0 0 0.5rem;

		&.sapFDynamicPageTitleMainContentHasContent {
			min-width: 3rem;
			flex-grow: 1;
		}
	}

	.sapFDynamicPageTitleMainActions {
		margin-left: auto;
		min-width: 0.0625rem;
		flex-grow: 1;

		&.sapFDynamicPageTitleMainActionsHasContent {
			min-width: 3rem;
		}

	.sapFDynamicPageTitleActionsBar .sapMLabel.sapMLabelMaxWidth,
	.sapFDynamicPageTitleActionsBar .sapMLnk.sapMLnkMaxWidth {
		// overwriting the existing max-width constraint of sapMLabel and sapMLnk
		// because in this context the label/link parent should instead adjust its flex-basis with respect to its content width
		max-width: none;
	}
  }
}

.sapFDynamicPageTitleMain.sapFDynamicPageTitleMainNoContent > .sapFDynamicPageTitleMainInner {
	width: 60%;
}
.sapFDynamicPageTitleMain.sapFDynamicPageTitleMainNoContent > .sapFDynamicPageTitleMainRight {
	width: 40%;
}

/* Tablet Size */
.sapFDynamicPage-Std-Tablet {

	// Needed because on some high-end phones in landscape mode,
	// the width of the viewport is bigger than 600 (Tablet breakpoint).
	.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnappedTitleOnMobile > .sapFDynamicPageTitle {
		padding: 0 0.25rem 0 2rem;
		min-height: 2rem;
		height: 2rem;
	}

	.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnapped > .sapFDynamicPageTitle {
		padding: 0.5rem 1rem 1rem 2rem;
	}

	.sapFDynamicPageTitle {
		padding: 0.5rem 1rem 0.5rem 2rem;

		.sapFDynamicPageTitleTop > .sapFDynamicPageTitleTopLeft {
			width: 65%;
		}

		.sapFDynamicPageTitleTop > .sapFDynamicPageTitleTopRight {
			width: 35%;
		}

		.sapFDynamicPageTitleTop.sapFDynamicPageTitleTopBreadCrumbsOnly > .sapFDynamicPageTitleTopLeft {
			width: 100%;
		}

		.sapFDynamicPageTitleTop.sapFDynamicPageTitleTopNavActionsOnly > .sapFDynamicPageTitleTopRight {
			width: 100%;
		}
	}
}

.sapFDynamicPageTitle .sapFDynamicPageTitleSnappedTitleOnMobile {
	min-height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 0 1 auto;

	.sapUiIcon {
		flex: 0 0 2rem;
	}
}

/* Phone Size */
.sapFDynamicPage-Std-Phone {

	.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnapped > .sapFDynamicPageTitle {
		.sapFDynamicPageTitleMain {
			.sapFDynamicPageTitleMainContent {
				padding-bottom: 0;
			}
		}
	}

	.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnappedTitleOnMobile > .sapFDynamicPageTitle {
		padding: 0 0.25rem 0 1rem;
		min-height: 2rem;
		height: 2rem;
	}

	.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnapped > .sapFDynamicPageTitle {
		padding: 0.5rem 0rem 1rem 1rem;
	}

	.sapFDynamicPageTitle,
	.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleOnly > .sapFDynamicPageTitle {
		padding: 0.5rem 0rem 0.5rem 1rem;

		.sapFDynamicPageTitleTop > .sapFDynamicPageTitleTopLeft {
			width: 60%;
		}

		.sapFDynamicPageTitleTop > .sapFDynamicPageTitleTopRight {
			width: 40%;
		}

		.sapFDynamicPageTitleTop.sapFDynamicPageTitleTopBreadCrumbsOnly > .sapFDynamicPageTitleTopLeft {
			width: 100%;
		}

		.sapFDynamicPageTitleTop.sapFDynamicPageTitleTopNavActionsOnly > .sapFDynamicPageTitleTopRight {
			width: 100%;
		}
	}
}

/* END "DynamicPageTitle.less" */

/* START "DynamicPageHeader.less" */
/* ======================================== */
/* CSS for control sap.f/DynamicPageHeader  */
/* Base theme                               */
/* ======================================== */

// Synced with ObjectPageLayout.HEADER_CONTENT_PADDING_BOTTOM and DynamicPage.HEADER_CONTENT_PADDING_BOTTOM
@_sap_f_DynamicPageHeader_PaddingBottom: 1rem;

// Default base icon for the pin button
@_sap_f_DynamicPageHeader_PinButton_Icon: pushpin-off;

.sapFDynamicPageHeader {
	z-index: 2;
	position: relative;

	-webkit-flex-shrink: 0;
	flex-shrink: 0;
	box-sizing: border-box;
	background: @sapUiObjectHeaderBackground;
}

.sapFDynamicPageHeader.sapFDynamicPageHeaderWithContent {
	padding: 1rem 3rem @_sap_f_DynamicPageHeader_PaddingBottom 3rem;
	box-shadow: @sapUiContentHeaderShadow;
}

.sapFDynamicPageHeader.sapFDynamicPageHeaderPinnable {
	min-height: 2rem;
}

.sapFDynamicPageHeader:focus {
	outline: none;
}

.sapFDynamicPageHeaderHidden {
	display: none;
}

.sapFDynamicPage-Std-Tablet {
	.sapFDynamicPageHeaderWithContent {
		padding: 1rem 2rem @_sap_f_DynamicPageHeader_PaddingBottom 2rem;
	}

	.sapFDynamicPageHeader.sapFDynamicPageHeaderPinnable {
		min-height: 3rem;
	}
}

.sapFDynamicPage-Std-Phone {
	.sapFDynamicPageHeaderWithContent {
		padding: 0.5rem 1rem @_sap_f_DynamicPageHeader_PaddingBottom 1rem;
	}
}

.sapFDynamicPageHeader.sapFDynamicPageHeaderWithContent {
	.sapMObjectAttributeDiv .sapMText,
	.sapMObjectAttributeDiv .sapMObjectAttributeTitle,
	.sapMObjectAttributeDiv .sapMObjectAttributeColon,
	.sapMObjectAttributeDiv .sapMObjectAttributeText {
		vertical-align: middle;
	}

	.sapMFFResetSpacer {
		margin-left: 0;
	}
}
/* END "DynamicPageHeader.less" */

/* START "GridListItem.less" */
/* =================================== */
/* CSS for control sap.f/GridListItem  */
/* Base theme                          */
/* =================================== */

@_sap_f_GridListItem_HeaderBoxShadow: inset 0 -0.0625rem @sapUiPageHeaderBorderColor;
@_sap_f_GridListItem_Overflow: unset;
@_sap_f_GridListItem_HeaderHeight: 3rem;
@_sap_f_GridListItem_Compact_HeaderHeight: 2rem;
@_sap_f_GridListItem_FocusedHighlightOffset: 0.125rem;
@_sap_f_GridListItem_HighlightBorderRadius: 0.25rem;
@_sap_f_GridListItem_FocusedHighlightBorderRadius: 0px;

.sapFGLI {
	padding: 0;
	border-radius: @sapUiTileBorderCornerRadius;
	border: none;
	box-shadow: @sapUiContentShadow0;
	overflow: @_sap_f_GridListItem_Overflow;

	// Highlighted items
	> .sapMLIBHighlight {
		z-index: 1;
		border-top-left-radius: @_sap_f_GridListItem_HighlightBorderRadius;
		border-bottom-left-radius: @_sap_f_GridListItem_HighlightBorderRadius;
	}

	&.sapMLIBFocusable:focus > .sapMLIBHighlight {
		top: @_sap_f_GridListItem_FocusedHighlightOffset;
		bottom: @_sap_f_GridListItem_FocusedHighlightOffset;
		border-top-left-radius: @_sap_f_GridListItem_FocusedHighlightBorderRadius;
		border-bottom-left-radius: @_sap_f_GridListItem_FocusedHighlightBorderRadius;
	}

	.sapFGLIWrapper {
		width: 100%;
		height: 100%;

		// Header Toolbar
		.sapFGLIToolbar {
			height: @_sap_f_GridListItem_HeaderHeight;
			box-shadow: @_sap_f_GridListItem_HeaderBoxShadow;
			padding: 0 0.5rem;
			display: flex;
			align-items: center;

			.sapFGLIToolbarSpacer {
				flex: 1;
			}

			.sapMLIBCounter {
				padding: 0;
			}

			// add spacing between the items, except for the first item
			>:not(:first-child) {
				margin: 0 0 0 0.5rem;
			}
		}

		// Content
		.sapMLIBContent {
			height: 100%;;
		}

		.sapFGLIToolbar + .sapMLIBContent {
			height: calc(100% ~"-" @_sap_f_GridListItem_HeaderHeight);
		}
	}
}

/* GridList with highlighted GridListItems */
.sapFGridList .sapMListHighlight .sapFGLI .sapFGLIWrapper {

	.sapMLIBContent:first-child {
		margin-left: 0;
	}
}

.sapFGLI.sapMLIBActionable .sapFGLIWrapper .sapMLIBImgNav {
	cursor: pointer;
}

/* Interaction states */
.sapFGLI {
	&.sapMLIBHoverable:hover {
		box-shadow: 0 0 0 0.0625rem @sapUiTileInteractiveBorderColor;
	}

	&.sapMLIB.sapMLIBSelected {
		border-bottom: none;
		box-shadow: 0 0 0 0.125rem @sapUiListSelectionBorderColor;
	}
}

/* Compact size */
.sapUiSizeCompact .sapFGLI .sapFGLIWrapper {

	.sapFGLIToolbar {
		height: @_sap_f_GridListItem_Compact_HeaderHeight;
	}

	// Content
	.sapMLIBContent {
		height: 100%;;
	}

	.sapFGLIToolbar + .sapMLIBContent {
		height: calc(100% ~"-" @_sap_f_GridListItem_Compact_HeaderHeight);
	}
}

/* END "GridListItem.less" */

/* START "GridContainer.less" */
/* =================================== */
/* CSS for control sap.f/GridContainer */
/* Base theme                          */
/* =================================== */

@_sap_f_GridContainer_FocusBorderOffset: 0;

.sapFGridContainer {
	position: relative;
	display: grid;
	outline: none;

	&.sapFGridContainerDenseFill {
		grid-auto-flow: row dense;
	}

	&.sapFGridContainerSnapToRow .sapFGridContainerItemWrapper > * {
		min-height: 100%;
	}

	.sapFGridContainerItemWrapper.sapFGridContainerItemFixedRows > * {
		max-height: 100%;
	}

	.sapFGridContainerItemWrapper {
		min-width: 0;
		outline: none;

		&.sapFGridContainerInvisiblePlaceholder {
			display: none;
		}
	}

	.sapFGridContainerItemWrapper:not(.sapFGridContainerItemWrapperNoVisualFocus):focus::before {
		content: '';
		position: absolute;
		left: @_sap_f_GridContainer_FocusBorderOffset;
		bottom: @_sap_f_GridContainer_FocusBorderOffset;
		right: @_sap_f_GridContainer_FocusBorderOffset;
		top: @_sap_f_GridContainer_FocusBorderOffset;
		z-index: 1;
		border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
		pointer-events: none;

	}

	.sapFGridContainerItemWrapper {
		position: relative;
	}

  	.sapFGridContainerDummyArea {
	  	position: fixed;
	}

	.sapUiIntCard.sapUiIntCardAnalytical {
		min-height: 100%;
	}
}

/* END "GridContainer.less" */

/* START "FlexibleColumnLayout.less" */
/* =========================================== */
/* CSS for control sap.f/FlexibleColumnLayout  */
/* Base theme                                  */
/* =========================================== */

// synced with FlexibleColumnLayout.COLUMN_SEPARATOR_WIDTH
@_sap_f_FCL_SeparatorWidth: 1rem;
@_sap_f_FCL_SeparatorActiveDecorationColors: @sapUiHighlight, @sapUiHighlight;
@_sap_f_FCL_SeparatorDecorationColors: @sapUiHighlight, fade(@sapUiHighlight, 0);
@_sap_f_FCL_SeparatorBorder: none;
@_sap_f_FCL_SeparatorHoverIconBorderColor: @sapUiButtonLiteBorderColor;
@_sap_f_FCL_SeparatorHoverIconBackground: @sapUiButtonLiteBackground;
@_sap_f_FCL_SeparatorButtonColor: @sapUiContentIconColor;

.sapFFCL {
	&, &.sapMNavItem:not(.sapMNavItemHidden) {
		display: -webkit-flex;
		display: flex;
		width: 100%;
		height: 100%;
		overflow: hidden;
		isolation: isolate;
		z-index: 0;
		position: relative;
	}


	.sapFFCLColumn {
		height: 100%;
		position: relative;
		visibility: hidden;
		box-sizing: border-box;

		// When there is content in a panel, it needs min-width
		&.sapFFCLColumnActive {
			visibility: visible;
		}

		&.sapFFCLColumnHidden {
			display: none;
		}

		.sapFFCLContainer {
			height: 100%;
		}

		&.sapFFCLPinnedColumn {
			overflow-x: hidden;

			.sapFFCLColumnContent {
				position: absolute;
				right: 0;
			}
		}

		&.sapFFCLColumnInset {
			padding: 0 0 0 @_sap_f_FCL_SeparatorWidth;
		}
	}

	.sapFFCLColumnContent {
		height: 100%;
	}

	.sapUiLocalBusyIndicator {
		z-index: 4;
	}
}

.sapFFCL .sapFFCLColumnSeparator {
	color: @_sap_f_FCL_SeparatorButtonColor;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	background-color: @sapUiShellBackground;
	box-sizing: border-box;
}

.sapFFCLOverlay {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.sapFFCL.sapFFLActiveResize {
	.sapFFCLOverlay {
		display: block;
	}
	.sapFFCLColumnContent {
		pointer-events: none;
	}
}

.sapFFCLOverlay > .sapFFCLOverlaySeparator {
	position: absolute;
	z-index: 3;

	.sapFFCLColumnSeparatorDecorationBefore {
		flex-grow: 1;
		background-image: linear-gradient(to top, @_sap_f_FCL_SeparatorActiveDecorationColors);
	}

	.sapFFCLColumnSeparatorDecorationAfter {
		flex-grow: 1;
		background-image: linear-gradient(to bottom ,@_sap_f_FCL_SeparatorActiveDecorationColors);
	}
}

.sapFFCL .sapFFCLColumnSeparator {
	cursor: col-resize;
	width: 1rem;
	height: 100%;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-left: @_sap_f_FCL_SeparatorBorder;
	border-right: @_sap_f_FCL_SeparatorBorder;
	vertical-align: top;

	.sapFFCLColumnSeparatorDecorationBefore {
		width: 1rem;
		height: 4rem;
		background-image: linear-gradient(to top, @_sap_f_FCL_SeparatorDecorationColors);
		background-size: 0.0625rem 100%;
		background-repeat: no-repeat;
		background-position: center;
	}

	.sapFFCLColumnSeparatorDecorationAfter {
		width: 1rem;
		height: 4rem;
		height: 4rem;
		background-image: linear-gradient(to bottom, @_sap_f_FCL_SeparatorDecorationColors);
		background-size: 0.0625rem 100%;
		background-repeat: no-repeat;
		background-position: center;
	}

	.sapFFCLColumnSeparatorGrip {
		cursor: col-resize;
		width: 1.5rem;
		height: 2rem;
		line-height: 2rem;
		position: relative;
		z-index: 1;

		.sapFFCLColumnSeparatorGripIcon {
			cursor: col-resize;
			line-height: 1.625rem - @sapUiButtonBorderWidth - @sapUiButtonBorderWidth; // center the icon vertically
			box-sizing: border-box;
			height: 1.625rem;
			width: 1.5rem;
			margin-top: 3px;
			border: @sapUiButtonBorderWidth solid @sapUiButtonLiteBorderColor;
			border-radius: @sapUiButtonBorderCornerRadius;
			background: @sapUiButtonLiteBackground;
		}
	}

	&:hover {
		.sapFFCLColumnSeparatorDecorationBefore,
		.sapFFCLColumnSeparatorDecorationAfter {
			flex-grow: 1;
			transition: all 0.1s ease-in;
		}

		.sapFFCLColumnSeparatorGripIcon {
			background: @_sap_f_FCL_SeparatorHoverIconBackground;
			border-color: @_sap_f_FCL_SeparatorHoverIconBorderColor;
		}
	}
}


// focus outline
.sapFFCL > .sapFFCLColumnSeparator,
.sapFFCL > .sapFFCLOverlay > .sapFFCLOverlaySeparator {
	position: relative;

	&:focus {
		outline: none;
	}

	&:focus::after {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
	}
}


.sapFFCLNavigationButton,
.sapUiSizeCompact & .sapFFCLNavigationButton {
	// Button hit area size
	width: 1.5rem;
	height: 1.5rem;
	padding: 0; // Vertical button hit area must be the same size as its visible area
	transition: all 0.1s ease-in;
	margin-left: -0.25rem;
	margin-right: -0.25rem;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	overflow: visible;
	cursor: col-resize;

	// Reflection: styles overwritten
	.sapMBtnInner {
		width: 1.5rem;
		height: 1.5rem;
		min-width: auto;

		.sapMBtnIcon {
			line-height: 1.5rem;
			width: 1rem;
			font-size: 1rem;
			margin-left: 0;
			margin-right: 0;
		}
	}
	&:before {
		background-image: linear-gradient(to top, @sapUiHighlight, fade(@sapUiHighlight, 0));
		background-position-y: -0.3125rem;
		bottom: 100%;
	}

	&:after {
		background-image: linear-gradient(to bottom, @sapUiHighlight,  fade(@sapUiHighlight, 0));
		background-position-y: 0.3125rem;
		top: 100%;
	}

	&:after,
	&:before {
		content: '';
		position: absolute;
		left: 0;
		height: 4rem;
		width: 100%;
		transition: all 0.1s ease-in;
		background-repeat: no-repeat;
		background-size: 0.0625rem 100%;
		background-position-x: calc(50% - 0.03125rem);
	}
	&:hover{
			&:after,
			&:before {
				height: 7rem;
			}
	}
}

// In order to have reveal effect, columns should overlap each other
.sapFFCLColumnBegin {
	z-index: 3;
	flex-shrink: 0;
	width: 0;
}

.sapFFCLColumnMid {
	z-index: 2;
	width:100%;
	overflow-x: auto;
}

.sapFFCLColumnEnd {
	z-index: 1;
	flex-shrink: 0;
	width: 0;
}

html[data-sap-ui-animation='on'] {
	.sapFFCL {
		.sapFFCLColumn.sapFFCLAnimatedColumn {
			transition: width 560ms cubic-bezier(0.1, 0, 0.05, 1), visibility 560ms ease-in;
			-webkit-transition: width 560ms cubic-bezier(0.1, 0, 0.05, 1), visibility 560ms ease-in;
		}
	}
}


/* END "FlexibleColumnLayout.less" */

/* START "SemanticPage.less" */
/* =================================== */
/* CSS for control sap.f/SemanticPage  */
/* Base theme                          */
/* =================================== */

.sapFSemanticPage {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;

	.sapFDynamicPageContent {
		.sapFSemanticPageAlignContent {
			margin-left: -@sapUiMarginSmall;
			margin-right: -@sapUiMarginSmall;
		}
	}

	.sapFDynamicPage.sapUiContentPadding,
	.sapFDynamicPage.sapUiNoContentPadding,
	.sapFDynamicPage.sapUiResponsiveContentPadding {
		.sapFSemanticPageAlignContent {
			margin: 0;
		}
	}

	.sapFDynamicPage.sapUiContentPadding {
		.sapFDynamicPage-Std-Phone {
			.sapFSemanticPageAlignContent {
				margin: 0 -@sapUiMarginSmall;
			}
		}
	}
}
/* END "SemanticPage.less" */

/* START "GridList.less" */
/* ============================== */
/* CSS for control sap.f/GridList */
/* Base theme                     */
/* ============================== */

@_sap_f_GridList_ItemFocusBorderRadius: unset;
@_sap_f_GridList_ItemHighlightBorderRadius: 0px;
@_sap_f_GridList_ItemFocusedHighlightOffset: 0px;
@_sap_f_GridList_ItemOverflow: unset;

.sapFGridList {
	/* List headers overrides */
	& > .sapMListHdrText,
	& > .sapMListHdrTBar {
		margin-bottom: 0.5rem;
	}

	.sapMLIBCounter {
		padding-right: 1rem;
	}

	> .sapMListUl {
		> .sapMLIBFocusable:focus {
			outline: none;
		}

		> .sapMLIBFocusable:focus::after {
			border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
			border-radius: @_sap_f_GridList_ItemFocusBorderRadius;
			position: absolute;
			content: " ";
			top: 1px;
			right: 1px;
			bottom: 1px;
			left: 1px;
			z-index: 2;
			pointer-events: none;
		}
	}

}

.sapFGridList ul {
	margin-bottom: 0.5rem;
}

.sapFGridListDefault {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	grid-gap: 0.5rem 0.5rem;
}

/* List Group headers overrides. */
.sapFGridListGroup {
	& > .sapMLIB.sapMGHLI {
		background: none;
		border: none;
		padding-top: 0.25rem;
		grid-column: ~"1 / -1";
		width: 100%;

		& .sapMGHLITitle {
			font-size: 1.125rem;
			color: @sapUiGroupTitleTextColor;
		}
	}
}

// Overrides for various list items, except for GridListItem. It has its own independent styles
.sapFGridList > .sapMListUl > .sapMLIB:not(.sapMGHLI):not(.sapFGLI) {
	border-radius: @sapUiTileBorderCornerRadius;
	border: none;
	box-shadow: @sapUiContentShadow0;
	overflow: @_sap_f_GridList_ItemOverflow;

	// Highlighted items
	> .sapMLIBHighlight {
		border-top-left-radius: 0.25rem;
		border-bottom-left-radius: 0.25rem;
	}
	
	&.sapMLIBFocusable:focus > .sapMLIBHighlight {
		top: @_sap_f_GridList_ItemFocusedHighlightOffset;
		bottom: @_sap_f_GridList_ItemFocusedHighlightOffset;
		border-top-left-radius: @_sap_f_GridList_ItemHighlightBorderRadius;
		border-bottom-left-radius: @_sap_f_GridList_ItemHighlightBorderRadius;
	}

	> .sapMLIBContent {
		height: 100%;
	}
}

.sapFGridList > .sapMListUl.sapMGrowingList {
	border-radius: @sapUiTileBorderCornerRadius;
}

.sapFGridList > .sapMListUl > .sapUiBlockLayerTabbable {
	// There are "span" helpers, which purpose is to block navigation into the blocked controls content.
	// If the focus reaches the span before the blocked/busy control it is forwarded to the one after the control.
	// These spans should not be visible.
	position: absolute;
}
/* END "GridList.less" */

/* START "ListPlaceholder.less" */
/* ==================================================== */
/* CSS for control sap.f.cards.loading/ListPlaceholder  */
/* Base theme                                           */
/* ==================================================== */

.sapFCardListPlaceholderItem {
	height: 2.75rem;
	padding: 0 1rem 0 1rem;
	box-sizing: border-box;
	display: flex;
	position: relative;
	align-items: center;
	flex: 1 1 auto;

	.sapFCardListPlaceholderImg {
		margin: 0rem 0.75rem 0rem 0rem;
		height: 2rem;
		width: 2rem;
		display: inline-block;
	}

	.sapFCardListPlaceholderRows {
		flex-grow: 1;

		.sapFCardListPlaceholderRow {
			height: 0.75rem;
			margin-bottom: 0.5rem;
			margin-top: 0.5rem;
			display: flex;

			&.sapFCardListPlaceholderRowCombined {
				height: 1.5rem;
				max-width: 35%;
			}

			.sapFCardListPlaceholderAttr {
				flex-grow: 1;

				&:first-of-type {
					margin-right: 1rem;
				}

				&:only-child {
					max-width: 25%;
				}
			}
		}
	}
}

.sapUiSizeCompact .sapFCardListPlaceholderItem {
	height: 2rem;
}
/* END "ListPlaceholder.less" */

/* START "ObjectPlaceholder.less" */
/* ====================================================== */
/* CSS for control sap.f.cards.loading/ObjectPlaceholder  */
/* Base theme                                             */
/* ====================================================== */

.sapFCardContentObjectPlaceholder {
	display: flex;
	column-gap: 2rem;
	padding: 0 1rem 1rem 1rem;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 1;

	.sapFCardObjectPlaceholderColumn {
		flex: 1;

		.sapFCardObjectPlaceholderGroupFirstRow {
			height: 1rem;
			width: 100%;
			margin-bottom: 0.25rem;
			margin-top: 1rem;
		}

		.sapFCardObjectPlaceholderGroupSecondRow {
			width: 65%;
			height: 1rem;
		}
	}

}

.sapFCardObjectContent.sapFCardContentLoading {
	> div:not(.sapFCardContentObjectPlaceholder) {
		visibility: hidden;
	}
}

.sapUiIntCardWithFooter .sapFCardContentObjectPlaceholder {
	padding-bottom: 0;
}

/* END "ObjectPlaceholder.less" */

/* START "ProductSwitch.less" */
.sapMPopoverCont .sapFProductSwitch-Popover-CTX {
	padding: 1.5rem 1rem;
}
/* END "ProductSwitch.less" */

/* START "ProductSwitchItem.less" */
.sapFPSItemContainer {
	border-radius: @sapUiElementBorderCornerRadius;
	background: @sapUiListBackground;
	padding: 0.5rem;
	width: 11.25rem;
	height: 7rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: @sapUiContentIconColor;
	box-sizing: border-box;
	text-decoration: none;
	cursor: pointer;
	user-select: none;

	.sapFPSItemTextSection {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.sapFPSItemMainTitle {
		font-size: @sapMFontHeader6Size;
		color: @sapUiGroupTitleTextColor;
	}

	.sapFPSItemIconPlaceholder {
		height: 3rem;
	}

	.sapFPSItemTitle {
		line-height: 1.25rem;
		max-width: 10.25rem;
		cursor: pointer;
		text-align: center;
	}

	.sapUiIcon {
		cursor: pointer;
		font-size: 1.5rem;
		line-height: 3rem;
	}

	.sapFPSItemSubTitle {
		font-size: @sapMFontSmallSize;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		color: @sapUiContentLabelColor;
	}

	&:hover {
		background: @sapUiListHoverBackground;
	}

	&.sapFPSItemActive,
	&.sapFPSItemSelected.sapFPSItemActive,
	&:active,
	&.sapFPSItemSelected:active,
	&.sapFPSItemSelected:hover:active {
		background: @sapUiListActiveBackground;
		color: @sapUiListActiveTextColor;
		border: none;

		.sapFPSItemMainTitle,
		.sapFPSItemSubTitle {
			color: @sapUiListActiveTextColor;
		}
	}

	&.sapFPSItemSelected:not(:active) {
		background: @sapUiListSelectionBackgroundColor;
		border: 0.125rem solid @sapUiListSelectionBorderColor;
		padding: 0.375rem;;
	}
}

.sapUiMedia-Std-Phone .sapFPSItemContainer {
	flex-direction: row;
	height: 5rem;
	padding: 0;
	width: 100%;
	border-radius: 0;

	&.sapFPSItemSelected:not(:active) {
		padding: 0;
	}

	.sapFPSItemTextSection {
		align-items: flex-start;
		box-sizing: border-box;
		padding-right: 1rem;
		width: 100%;
	}

	.sapFPSItemIconPlaceholder {
		padding-left: 1rem;
		padding-right: 0.75rem;
	}

	.sapUiIcon {
		cursor: pointer;
		font-size: 1.25rem;
		width: 3rem;
		color: @sapUiContentNonInteractiveIconColor;
	}

	&.sapFPSItemActive,
	&:active {
		.sapUiIcon {
			color: @sapUiListActiveTextColor;
		}
	}

	.sapFPSItemTitle {
		width: 100%;
		max-width: 100%;
		line-height: normal;
		text-align: left;
	}

	.sapFPSItemSubTitle {
		padding-top: 0.75rem;
	}

	&.sapFPSItemSelected {
		border: none;
		border-bottom: 0.0625rem solid @sapUiListSelectionBorderColor;
	}
}

.sapFPSItemContainer:focus {
	outline-width: @sapUiContentFocusWidth;
	outline-color: @sapUiContentFocusColor;
	outline-offset: -2px;
	outline-style: @sapUiContentFocusStyle;
}

.sapFPSItemContainer.sapFPSItemSelected:focus {
	outline-offset: -4px;
}

.sapFPSItemSelected.sapFPSItemActive:focus,
.sapFPSItemActive:focus,
.sapFPSItemContainer:active:focus {
	outline-color: @sapUiContentContrastFocusColor;
	outline-offset: -2px;
}

.sapUiMedia-Std-Phone .sapFPSItemContainer.sapFPSItemSelected:focus {
	outline-offset: -2px;
}

html[data-sap-ui-browser^="ed"].sap-desktop .sapFPSItemContainer:focus {
	outline-style: dashed;
}

html[dir="rtl"].sapUiMedia-Std-Phone .sapFPSItemContainer .sapFPSItemTitle {
	text-align: right;
}
/* END "ProductSwitchItem.less" */

/* START "ShellBar.less" */
@_sap_f_ShellBar_PaddingDesktop: 3rem;
@_sap_f_ShellBar_PaddingTablet: 2rem;
@_sap_f_ShellBar_PaddingPhone: 1rem;
@_sap_f_ShellBar_CoPilotWidth: 3rem;
@_sap_f_ShellBar_CoPilotHalfWidth: 1.5rem;
@_sap_f_ShellBar_SearchHalfMaxWidth: 17.5rem;

@_sap_f_ShellBar_PrimaryTitle_FontSize: @sapMFontMediumSize;
@_sap_f_ShellBar_SecondTitle_FontSize: @sapMFontSmallSize;

.sapFShellBar {
	height: 3rem;
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
	z-index: 1;
	padding: 0 @_sap_f_ShellBar_PaddingDesktop;
	display: flex;
	align-items: center;

	.sapFShellBarOLHB,
	.sapFShellBarORHB {
		margin-right: 0;
		margin-left: 0;
		display: inline-flex;
		vertical-align: top;
		box-sizing: border-box;
		align-items: center;
		min-width: 1px;
		max-width: 100%;
		height: 100%;
	}

	.sapFShellBarORHB {
		padding-left: 0.5rem;
		flex-grow: 1;
		flex-shrink: 1;
	}

	.sapFShellBarOLHB {
		padding-right: 0.5rem;
		max-width: 75%;
		flex-shrink: 0;
		flex-grow: 0;
		.sapFShellBarSearchIsOpen& {
			max-width: 50%;
		}
	}

	.sapFShellBarOAHB {
		flex-shrink: 1;
		flex-grow: 1;
		min-width: 1px;
		max-width: 100%;
	}

	.sapMBtn.sapFShellBarProfile:focus > .sapMFocusable {
		outline-offset: -0.125rem;
	}

	.sapFShellBarTitleHidden {
		position: absolute;
		top: -10000px;
		left: -10000px;
	}

	.sapMBarChild {
		flex-shrink: 0;
	}

	.sapFShellBarItem,
	.sapMIBar.sapMTB .sapFShellBarItem.sapMBarChild{
		margin: 0 0 0 0.5rem;
	}

	.sapFShellBarOLHB>.sapFShellBarItem:first-child,
	.sapFShellBarOLHB>.sapFShellBarOAHB:first-child > .sapFShellBarItem:first-child {
		margin-left: 0;
	}
	.sapMIBar.sapMTB .sapMTBSpacer + .sapFShellBarItem.sapMBarChild,
	.sapFShellBarCopilot + .sapFShellBarItem {
		margin-left: 0;
	}

	// Reflection: styles overwritten
	.sapMBtn .sapMBtnInner {
		.sapFAvatar {
			vertical-align: middle;
		}
		&:after {
			content: "";
			display: inline-block;
			vertical-align: middle;
			height: 100%;
		}
	}

	.sapFShellBarOTB.sapMIBar.sapMTB {
		height: 3rem;
		padding: 0;
		flex-shrink: 1;
		flex-grow: 1;
		overflow: visible;
		min-width: 0;
		>:first-child {
			margin-left: 0;
		}

		.sapUiHiddenPlaceholder:first-child + * {
			margin-left: 0;
		}

		.sapFShellBarGridButton {
			margin-right: 0;
		}
	}

	.sapFSHMegaMenu {
		max-width: 100%;
		display: inline-block;
		vertical-align: middle;
		font-weight: bold;
		overflow: hidden;

		// Reflection: styles overwritten
		.sapMBtnInner > img {
			width: auto !important;
			max-width: none !important;
			height: 2rem;
		}
		.sapMBtnInner::after {
			content: '\E287';
			font-size: 1rem;
			line-height: 2.2rem;
			font-weight: bold;
		}
	}

	.sapFShellBarHomeIcon {
		height: 2rem;
		vertical-align: middle;
		&.sapMNoImg {
			width: 0;
		}
	}

	.sapFShellBarSearch {
		max-width: 28rem; // max width of searchField + button width
		width: 100%;
		flex-grow: 1;
		flex-shrink: 1;
		box-sizing: border-box;

		.sapMSF {
			max-width: 25rem;
			margin-right: 0.5rem;
			min-width: auto;
		}

		.sapFShellBarSearchCancelButton {
			margin-left: 0.5rem;
			display: none;
		}
		.sapFShellBarSearchWrap {
			display: flex;
			width: 100%;
		}

		&.sapFShellBarSearchOpenTick {
			min-width: 12rem;
		}
	}

	.CPImage {
		width: ~"@{_sap_f_ShellBar_CoPilotWidth}";
		height: ~"@{_sap_f_ShellBar_CoPilotWidth}";
		overflow: hidden;
		cursor: pointer;
		outline: none;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		margin: 0;
		html[data-sap-ui-animation='on'] & {
			&:hover svg {
				transition: transform 0.30s;
				transform: scale(1.1);
			}
			&:active svg {
				transition: transform 0.05s;
				transform: scale(1.2);
			}
		}
		html[data-sap-ui-animation='off'] & {
			&:hover svg {
				transform: scale(1.1);
			}
			&:active svg {
				transform: scale(1.2);
			}
		}
		.color1 {
			stop-color: #00B8F3;
		}
		.color2 {
			stop-color: #1C61BA;
		}
		.opacity7 {
			stop-opacity:0.7;
		}
		.opacity36 {
			stop-opacity: 0.36;
		}
		.opacity2 {
			stop-opacity: 0.2;
		}
		&:focus {
			outline: 1px dotted @sapUiContentFocusColor;
			outline-offset: -0.3125rem;
		}
		html[data-sap-ui-browser^="ed"] &:focus {
			outline-style: dashed;
		}
		html[data-sap-ui-browser^="ie"] &:focus {
			outline: none;
		}
		html[data-sap-ui-browser^="ie"] &:focus:before {
			content: " ";
			box-sizing: border-box;
			width: 88%;
			height: 88%;
			position: absolute;
			left: 3px;
			top: 3px;
			border: 1px dashed @sapUiContentFocusColor;
			pointer-events: none;
		}
	}

	.sapFSHMegaMenu .sapMBtnContent {
		font-weight: bold;
		max-width: 100%;
	}

	&.sapFShellBarSizeTablet{
		padding: 0 @_sap_f_ShellBar_PaddingTablet;
	}

	&.sapFShellBarSizePhone {
		padding: 0 @_sap_f_ShellBar_PaddingPhone;
		.sapFShellBarProfile {
			margin-right: 0;
		}
		.sapFShellBarORHB {
			padding-left: ~"@{_sap_f_ShellBar_CoPilotHalfWidth}";
		}
	}

	.sapFShellBarProfile {
		user-select: none;
		-ms-user-select: none;
		margin-left: 0.5rem;

		&::before {
			content: "";
			position: absolute;
			top: -0.125rem;
			left: -0.125rem;
			bottom: -0.125rem;
			right: -0.125rem;
			z-index: -1;
			border-radius: @sapUiButtonBorderCornerRadius;
		}

		&:hover::before {
			background-color: @sapUiShellHoverBackground;
		}

		&:active::before {
			background-color: @sapUiShellActiveBackground;
		}
	}

	.sapFShellBarPrimaryTitle,
	.sapFShellBarSecondTitle {
		vertical-align: middle;
	}

	.sapFShellBarPrimaryTitle {
		overflow: hidden;
		text-overflow: ellipsis;
		background: transparent;
		color: @sapUiShellTextColor;
		font-size: @_sap_f_ShellBar_PrimaryTitle_FontSize;
		line-height: 2.75rem;
		vertical-align: middle;
		font-weight: bold;
	}

	.sapFShellBarSecondTitle {
		font-family: @sapUiFontFamily;
		font-size: @_sap_f_ShellBar_SecondTitle_FontSize;
		color: @sapUiShellTextColor;
		line-height: 2rem;
		vertical-align: middle;
	}

	.sapFShellBarProfile,
	.sapFShellBarGridButton,
	.sapFShellBarSearchWrap .sapMBtn {
		flex-shrink: 0;
	}

	.sapUiSizeCompact & {
		&.sapMPageHeader .sapMIBar {
			height: 3rem;
		}
		.sapFShellBarProfile {
			height: 2rem;
		}

		.sapFShellBarSearch {
			max-width: 27.5rem; // max width of searchField + button width

			.sapMSF {
				max-width: 25rem;
				min-width: auto;
				margin-right: 0.5rem;
			}

			&.sapFShellBarSearchFullWidth {
				max-width: 100%;
				.sapMSF {
					max-width: 100%;
				}
			}
		}
		&.sapFShellBarFullSearch {
			.sapFShellBarSearch,
			.sapMSF {
				max-width: 100%;
			}
		}

		// Reflection: styles overwritten
		.sapMBtnInner {
			&.sapMBtnIconFirst:not(.sapMBtnText),
			&.sapMBadgeTopRight.sapMBadge.sapMBtnIconFirst:not(.sapMBtnText){
				padding: 0;
			}
			&.sapMBadgeTopRight.sapMBadge .sapMBadgeIndicator {
				top: -0.3125rem;
				right: -0.4375rem;
				padding-right: 0.125rem;
				line-height: normal;
				position: absolute;
				display: block;
			}
		}
	}
	&.sapFShellBarFullSearch  {
		.sapFShellBarOLHB,
		.sapFShellBarORHB,
		.sapFShellBarOTB {
			position: static;
		}
		& * {
			visibility: hidden;
		}
		.sapFShellBarSearch,
		.sapFShellBarSearch * {
			visibility: visible;
		}
		.sapFShellBarSearchWrap {
			 box-sizing: border-box;
			 padding: 0 1.25rem;
			 position: absolute;
			 align-items: center;
			 right: 0;
			 left: 0;
			 top: 0;
			 bottom: 0;
		 }
		.sapMSF,
		.sapFShellBarSearch {
			max-width: 100%;
		}
		.sapFShellBarSearchFullWidth {
			height: 100%;
			min-width: 1px;
		}
		.sapFShellBarSearchCancelButton {
			display: block;
		}
	}
}

.sapFShellBar.sapFShellBarSizeExtraLargeDesktop {
	.sapFShellBarSearch {
		max-width: 35rem; // max width of searchField + button width
		width: 100%;
		flex-grow: 1;
		flex-shrink: 1;
		box-sizing: border-box;
		position: absolute;
		left: ~"calc(50% - @{_sap_f_ShellBar_SearchHalfMaxWidth})";

		.sapMSF {
			max-width: 35rem;
			min-width: auto;
		}
	}

	&.sapFShellBarWithSearch {
		.sapFShellBarORHB {
			width: 50%;
			padding-left: ~"calc(@{_sap_f_ShellBar_SearchHalfMaxWidth} + 0.5rem)";
		}
		.sapFShellBarOLHB {
			width: 50%;
			padding-right: ~"calc(@{_sap_f_ShellBar_SearchHalfMaxWidth} + 0.5rem)";

		}
	}
}
.sapFButtonNotifications[data-notifications],
.sapFShellBarOverflowButton[data-notifications] {
	overflow: visible;
	&:after
	{
		content: attr(data-notifications);
		position: absolute;
		top: 0.125rem;
		right: -0.125rem;

		box-sizing: border-box;
		padding: 0 0.3125rem;
		border-radius: 1.125rem;
		height: 1.125rem;
		max-width: 3.75rem;

		line-height: 1.125rem;
		font-size: 0.6875rem;
		font-family: @sapUiFontFamily;

		background-color: @sapUiContentBadgeBackground;
		border-color: @sapUiContentBadgeBackground;
		color: @sapUiShellTextColor;

		text-overflow: ellipsis;
		overflow: hidden;

	}
}

.sapFShellBarSearchOverflowToolbar {
	max-width: 100%;
	width: 100%;

	.sapMBtnContent {
		text-align: left;
	}
}

.sapFButtonNotifications ~ .sapFShellBarOverflowButton,
.sapFButtonNotifications[data-notifications=""],
.sapFShellBarOverflowButton[data-notifications=""] {
	&:after {
		display: none;
	}
}

.sapFShellBar:not(.sapFShellBarNotifications) {
	.sapFShellBarOverflowButton[data-notifications]:after {
		display: none;
	}
}

.sapFShellBarTitleCollapsed {
	&>span {
		display: none;
	}

}

/* END "ShellBar.less" */

/* START "TablePlaceholder.less" */
/* ==================================================== */
/* CSS for control sap.f.cards.loading/TablePlaceholder  */
/* Base theme                                           */
/* ==================================================== */

.sapFCardTablePlaceholderItem {
	height: 2.75rem;
	padding: 0 1rem 0 1rem;
	box-sizing: border-box;
	display: flex;
	position: relative;
	align-items: center;
	flex: 1 1 auto;

	.sapFCardTablePlaceholderRows {
		flex-grow: 1;
		display: flex;
		gap: 0.75rem;
	}

	.sapFCardTablePlaceholderColumns {
		height: 0.75rem;
		width: 100%;
		display: inline-block;
	}
}

.sapFCardTablePlaceholderItem:first-of-type .sapFCardTablePlaceholderColumns {
	height: 1.5rem;
}

.sapUiSizeCompact .sapFCardTablePlaceholderItem {
	height: 2rem;
}
/* END "TablePlaceholder.less" */

/* START "TimelinePlaceholder.less" */
/* ==================================================== */
/* CSS for control sap.f.cards.loading/TimelinePlaceholder  */
/* Base theme                                           */
/* ==================================================== */


.sapFCardContentTimelinePlaceholder {
	padding-block-start: 0.5rem;
	flex: 1;
}

.sapFCardTimelinePlaceholderItem {
	height: 2.75rem;
	padding-inline: 1rem;
	box-sizing: border-box;
	display: flex;
	position: relative;
	align-items: flex-start;
	flex: 1 1 auto;

	.sapFCardTimelineNavGroup {
		display: flex;
		flex-direction: column;
		height: 100%;
		align-items: center;
	}

	.sapFCardTimelinePlaceholderImg {
		height: 2rem;
		width: 2rem;
		display: inline-block;
	}

	.sapFCardTimelinePlaceholderLine {
		flex: 1;
		min-height: 0;
		width: 2px;
	}

	.sapFCardTimelinePlaceholderRows {
		flex-grow: 1;
		padding-inline-start: 0.75rem;

		.sapFCardTimelinePlaceholderRow {
			height: 1rem;
			margin-block-end: 0.25rem;
			display: flex;

			&.sapFCardTimelinePlaceholderRowCombined {
				height: 1.5rem;
				max-width: 35%;
			}

			.sapFCardTimelinePlaceholderAttr {
				flex-grow: 1;

				&:first-of-type {
					margin-inline-end: 1rem;
				}

				&:only-child {
					max-width: 25%;
				}
			}
		}

		.sapFCardTimelinePlaceholderRow60 {
			width: 60%;
		}

		.sapFCardTimelinePlaceholderRow40 {
			width: 40%;
		}
	}
}

.sapUiSizeCompact .sapFCardTimelinePlaceholderItem {
	height: 2rem;
}
/* END "TimelinePlaceholder.less" */

/* START "GridDragAndDrop.less" */
.sapUiDnDGridIndicator {
	background: fade(@sapUiContentDragAndDropActiveColor, 5%);
	border: 0.125rem solid @sapUiContentDragAndDropActiveColor;
	box-sizing: border-box;
}
/* END "GridDragAndDrop.less" */

/* START "SidePanel.less" */
/* =============================== */
/* CSS for control sap.f/SidePanel */
/* Base theme                      */
/* =============================== */

@_sap_ui_layout_Splitter_BarDecorationColors: @sapUiHighlight, fade(@sapUiHighlight, 0);
@_sap_ui_layout_Splitter_BarActiveDecorationColors: @sapUiHighlight, @sapUiHighlight;

/***** Desktop *****/

// Cozy
.sapFSP {
	height: 100%;
	display: flex;
	margin: 0;
	touch-action: none;

	// Main content
	.sapFSPMain {
		flex: 1 1;
		padding: 0.5rem;
		overflow: hidden auto;
	}

	// Splitter
	.sapFSPSplitterBar {
		cursor: col-resize;
		width: 1rem;
		height: 100%;
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-left: none;
		border-right: none;
		vertical-align: top;
		color: @sapUiContentIconColor;
		position: absolute;
		left: -1rem;

		&:focus {
			outline: none;
		}

		&:focus:not(:active)::after {
			content: "";
			display: block;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
		}

		.sapFSPSplitterBarDecorationBefore {
			width: 1rem;
			height: 4rem;
			background-image: linear-gradient(to top, @_sap_ui_layout_Splitter_BarDecorationColors);
			background-size: 0.0625rem 100%;
			background-repeat: no-repeat;
			background-position: center;
		}

		.sapFSPSplitterBarDecorationAfter {
			width: 1rem;
			height: 4rem;
			height: 4rem;
			background-image: linear-gradient(to bottom, @_sap_ui_layout_Splitter_BarDecorationColors);
			background-size: 0.0625rem 100%;
			background-repeat: no-repeat;
			background-position: center;
		}

		.sapFSPSplitterBarGrip {
			cursor: col-resize;
			width: 1.5rem;
			height: 2rem;
			line-height: 2rem;
			position: relative;
			z-index: 1;

			.sapFSPSplitterBarGripIcon {
				cursor: col-resize;
				line-height: 1.625rem - @sapUiButtonBorderWidth - @sapUiButtonBorderWidth;
				box-sizing: border-box;
				height: 1.625rem;
				width: 1.5rem;
				margin-top: 3px;
				border: @sapUiButtonBorderWidth solid @sapUiButtonLiteBorderColor;
				border-radius: @sapUiButtonBorderCornerRadius;
				background: @sapUiButtonLiteBackground;
			}
		}

		&:active {
			.sapFSPSplitterBarDecorationBefore {
				flex-grow: 1;
				background-image: linear-gradient(to top, @_sap_ui_layout_Splitter_BarActiveDecorationColors);
			}
			.sapFSPSplitterBarDecorationAfter {
				flex-grow: 1;
				background-image: linear-gradient(to bottom, @_sap_ui_layout_Splitter_BarActiveDecorationColors);
			}
		}

		&:hover {
			.sapFSPSplitterBarDecorationBefore,
			.sapFSPSplitterBarDecorationAfter {
				flex-grow: 1;
				transition: all 0.1s ease-in;
			}

			.sapFSPSplitterBarGripIcon {
				background: @sapUiButtonLiteBackground;
				border-color: @sapUiButtonLiteBorderColor;
			}
		}
	}

	// Side panel
	.sapFSPSide {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		margin: 0.5rem 0 0.5rem 1rem;
		min-width: 4.25rem;
		width: 4.25rem;
		min-height: 14rem;
		z-index: 1;

		.sapFSPSideInner {
			box-sizing: border-box;
			position: absolute;
			top: 0;
			right: 0;
			height: 100%;
			width: 100%;
			display: flex;
			flex-direction: row-reverse;
			align-items: stretch;
			border-radius: @sapUiTileBorderCornerRadius 0 0 @sapUiTileBorderCornerRadius;
			box-shadow: 0 0 1rem fade(@sapUiContentShadowColor, 10);
			background-color: @sapUiGroupContentBackground;
			min-width: 4.25rem;
			width: 100%;

			.sapFSPExpanded {
				width: 100%;
			}

			.sapFSPSideContent {
				display: flex;
				flex-direction: column;
				flex-grow: 1;
				width: auto;
				overflow: hidden;
				padding: 0.5rem 0 0.5rem 1rem;
				z-index: 1;

				.sapFSPSideContentHeader {
					height: 2.25rem;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					gap: 0.75rem;
					margin-right: 1rem;

					& > .sapUiIcon {
						color: @sapUiContentIconColor;
					}

					.sapMTitle {
						flex-grow: 2;
						font-family: @sapUiFontBoldFamily;
						font-size: @sapMFontHeader6Size;
						font-style: normal;
						font-weight: 700;
						color: @sapUiBaseText;

						& > span {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}

				.sapFSPSideContentInner {
					display: flex;
					padding-right: 1rem;
					overflow: hidden auto;
				}
			}
		}

		.sapFSPActionBar {
			height: 100%;
			min-width: 4.25rem;
			width: 4.25rem;
			overflow: hidden;
		}

		.sapFSPActionBarList {
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			align-items: start;
			margin-top: 4.25rem;
			margin-bottom: 0.5rem;
			gap: 2rem;

			.sapFSPItem {
				box-sizing: border-box;
				display: flex;
				align-items: center;
				position: relative;
				height: 3.125rem;
				width: 100%;
				padding: 0.1875rem 0.75rem;
				gap: 0.75rem;
				cursor: pointer;

				.sapFSPItemText {
					font-family: @sapUiFontSemiboldDuplexFamily;
					font-size: @sapMFontHeader6Size;
					font-style: normal;
					font-weight: 600;
					color: @sapUiBaseText;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.sapUiIcon {
					display: flex;
					flex-shrink: 0;
					align-items: center;
					justify-content: center;
					font-size: @sapMFontHeader4Size;
					background-color: @sapUiGroupContentBackground;
					color: @sapUiContentSelectedForegroundColor;
					width: 2.75rem;
					height: 2.75rem;
					box-sizing: border-box;
					border-radius: 50%;
					border: 0.0625rem solid @sapUiContentSelectedForegroundColor;
					cursor: pointer;
				}

				&.sapFSPDisabled {
					opacity: @sapUiContentDisabledOpacity;

					&:hover {
						background-color: initial;
					}
				}

				&.sapFSPOverflowItem {
					visibility: hidden;

					.sapUiIcon {
						color: @sapUiContentSelectedForegroundColor;
					}

					&:not(.sapFSPSelected):not(:hover) {
						.sapUiIcon {
							border: none;
						}
					}

					&.sapFSPSelected {
						&::before {
							display: none;
						}

						.sapUiIcon {
							border-color: @sapUiContentSelectedForegroundColor;
							background-color: @sapUiListSelectionBackgroundColor;
							color: @sapUiContentSelectedForegroundColor;
						}
					}
				}

				&:focus {
					outline: none;

					&::after {
						content: "";
						position: absolute;
						box-sizing: border-box;
						left: 0;
						top: 0;
						right: 0;
						bottom: 0;
						border: 0.0625rem dotted @sapUiContentFocusColor;
						pointer-events: none;
					}
				}

				&:hover {
					background-color: @sapUiListHoverBackground;

					&.sapFSPOverflowItem .sapUiIcon {
						border-color: @sapUiContentSelectedForegroundColor;
					}
				}

				&.sapFSPSelected {
					&::before {
						position: absolute;
						left: 0;
						content: "";
						height: 3.125rem;
						width: 0.1875rem;
						background-color: @sapUiContentSelectedForegroundColor;
						border-radius: 0 0.1875rem 0.1875rem 0;
					}

					.sapUiIcon {
						border-color: @sapUiContentSelectedForegroundColor;
						background-color: @sapUiContentSelectedForegroundColor;
						color: @sapUiContentContrastIconColor;
					}

					&:focus::after {
						border-left-color: transparent;
					}
				}
			}
		}

		.sapFSPExpandCollapse {
			position: absolute;
			top: 0.25rem;
			right: 1rem;
		}
	}

	&.sapFSPActionBarExpanded {
		&:not(.sapFSPSideContentExpanded) .sapFSPSide {
			width: 20rem;
		}

		.sapFSPActionBar {
			max-width: 100%;
			width: 100%;
			flex-shrink: 0;

			.sapFSPActionBarList {
				flex-grow: 0;
				width: 100%;
			}
		}

		&.sapFSPSideContentExpanded {
			.sapFSPSide:not(.sapFSPSplitView) {
				.sapFSPSideContent {
					display: none;
				}

				.sapFSPActionBar {
					min-width: 100%;
					width: 100%;
					border-left-width: 0;
				}
			}
		}

	}

	&:not(.sapFSPSingleItem) .sapFSPSideContent {
		border-right: 0.0625rem solid @sapUiGroupContentBorderColor;
	}

	&.sapFSPSingleItem {
		&.sapFSPSideContentExpanded	{
			.sapFSPExpandCollapse,
			.sapFSPActionBar {
				display: none;
			}
		}

		.sapFSPExpanded {
			display: none;
		}
	}

	.sapFSPMinWidth,
	.sapFSPMaxWidth {
		position: absolute;
		top: 0;
		left: 0;
		height: 0;
		overflow: hidden;
	}
}

.sapFSP.sapFSPSingleItem.sapFSPSideContentExpanded .sapFSPSide .sapFSPActionBarList {
	width: 0;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

.sapFSPOverflowMenu .sapUiMnuItm {
	.sapUiMnuItmIco {
		color: @sapUiContentSelectedForegroundColor;
	}

	.sapUiMnuItmTxt {
		font-family: @sapUiFontFamily;
		font-size: @sapMFontHeader6Size;
		font-style: normal;
		font-weight: 600;
	}

	&.sapUiMnuItmDsbl {
		.sapUiMnuItmTxt {
			opacity: @sapUiContentDisabledOpacity;
		}
	}

	&:not(.sapUiMnuItmHov:active) .sapUiMnuItmTxt,
	&.sapUiMnuItmDsbl.sapUiMnuItmHov:active .sapUiMnuItmTxt {
		color: @sapUiBaseText;
	}
}

// Compact
.sapUiSizeCompact {
	.sapFSP {
		.sapFSPSide {
			min-width: 4rem;
			width: 4rem;
			min-height: 13rem;

			.sapFSPSideInner {
				min-width: 4rem;
				width: 100%;

				.sapFSPActionBar {
					min-width: 4rem;
					width: 4rem;
				}
			}

			.sapFSPActionBarList {
				.sapFSPItem {
					height: 2.375rem;
					padding: 0.1875rem 1rem;

					&.sapFSPSelected::before {
						height: 2.375rem;
					}

					.sapUiIcon {
						font-size: @sapMFontHeader5Size;
						width: 2rem;
						height: 2rem;
						line-height: 1.75rem;
					}
				}
			}

			div.sapFSPSideContent .sapFSPSideContentHeader {
				height: 2rem;
			}

			.sapFSPExpandCollapse {
				top: 0.5rem;
				right: 1rem;
			}
		}

		&.sapFSPActionBarExpanded {
			.sapFSPSideInner .sapFSPActionBar {
				width: 100%;
				max-width: 100%;
			}
		}
	}
}

.sapFSP.sapFSPLeft {
	flex-direction: row-reverse;
	.sapFSPSide {
		margin: 0.5rem 1rem 0.5rem 0;
		.sapFSPSideInner {
			border-radius: 0 @sapUiTileBorderCornerRadius @sapUiTileBorderCornerRadius 0;
			flex-direction: row;
		}
		.sapFSPExpandCollapse {
			right: auto;
			left: 1rem;
		}
		.sapFSPActionBarList {
			.sapFSPItem {
				flex-direction: row-reverse;
				&.sapFSPSelected {
					&::before {
						right: 0;
						left: auto;
					}
				}
			}
		}
	}
}

.sapFSP.sapFSPLeft:not(.sapFSPSingleItem) .sapFSPSideContent {
	border-right: none;
	border-left: 0.0625rem solid @sapUiGroupContentBorderColor;
}

/***** Phone *****/

html.sap-phone {

	// Cozy
	.sapFSP {
		flex-direction: column;

		.sapFSPExpandCollapse {
			display: none;
		}

		.sapFSPMain {
			overflow: hidden auto;
			margin-right: 0;
		}

		.sapFSPSide {
			position: inherit;
			border-radius: 0;
			margin: 0;
			flex-direction: column;
			width: 100%;
			height: 6.125rem;
			min-height: initial;
			overflow: hidden;
			flex: 0 0 4.125rem;

			.sapFSPSideInner {
				position: inherit;
				min-width: 100%;
				width: auto;
				overflow: hidden;
				border-radius: 0;
				border: none;
				border-top: 0.0625rem solid @sapUiGroupContentBorderColor;

				.sapFSPActionBar {
					position: relative;
					height: auto;
					min-width: 100%;
					width: 100%;
				}

				.sapFSPActionBarListWrapper {
					overflow: auto hidden;
					height: 6.125rem;
					box-sizing: border-box;
					flex-shrink: 0;
				}

				.sapFSPSideContent {
					border-radius: 0;
					border-width: 0;
					padding: 0;

					.sapFSPSideContentInner {
						padding: 0.1875rem 1rem;
						flex-wrap: wrap;
						width: auto;
					}

					.sapFSPSideContentHeader {
						text-align: center;
						height: 2.25rem;
						padding: 0.1875rem 1rem;
						border-bottom: 0.0625rem solid @sapUiGroupContentBorderColor;
						margin-right: 0;

						& > .sapUiIcon {
							width: 2.125rem;
							visibility: hidden;
						}
					}
				}

				.sapFSPActionBarList {
					display: flex;
					align-items: center;
					flex-direction: row;
					border-radius: 0;
					margin-top: 0;
					margin-bottom: 0;
					width: 100%;
					gap: 0;
					height: 6.125rem;

					&.sapFSPCenteredItems {
						justify-content: center;
					}

					.sapFSPItem {
						margin: 0;
						flex-direction: column;
						padding: 0.875rem 0.125rem 0 0.125rem;
						margin-left: 0;
						width: 25vw;
						min-width: 25vw;
						height: 6.125rem;
						gap: 0.4375rem;

						&:hover {
							background: none;
						}

						.sapUiIcon {
							width: 2.875rem;
							height: 2.375rem;
							border-radius: 4rem;
						}

						&.sapFSPSelected::before {
							left: 0;
							top: 0;
							width: 100%;
							height: 0.1875rem;
							border-radius: 0 0 0.1875rem 0.1875rem;
						}

						.sapFSPItemText {
							display: -webkit-box;
							-webkit-line-clamp: 2;
  							-webkit-box-orient: vertical;
							margin: 0;
							overflow: hidden;
							white-space: normal;
							text-overflow: ellipsis;
							text-align: center;
							width: 100%;
							font-weight: 700;
							font-size: 0.75rem;
							height: 1.875rem;
						}
					}
				}
			}
		}

		&.sapFSPSingleItem .sapFSPSideContentHeader {
			flex-direction: row-reverse;
			justify-content: center;
		}

		&.sapFSPActionBarExpanded {
			&.sapFSPSideContentExpanded .sapFSPSide:not(.sapFSPSplitView) .sapFSPSideContent {
				display: flex;
			}

			.sapFSPSide {
				flex: 0 0 6.125rem;
				max-width: initial;
				width: initial;

				.sapFSPSideInner .sapFSPSideContent {
					flex-grow: 1;
				}
			}
		}

		&.sapFSPSingleItem {
			.sapFSPSide {
				flex: 0 0 4.125rem;
				width: 100%;

				.sapFSPSideInner {
					justify-content: center;
					height: 100%;
					width: 100%;

					.sapFSPActionBarListWrapper {
						height: inherit;
						width: 100%;
						display: flex;
						border: none;

						.sapFSPActionBarList {
							height: inherit;

							.sapFSPItem {
								flex-direction: row;
								width: 100%;
								max-width: 100%;
								height: inherit;
								padding: 0.875rem 1rem;
								align-items: center;
								justify-content: center;
								gap: 0.75rem;

								.sapUiIcon {
									border-width: 0;
									width: 2.25rem;
								}
								.sapFSPItemText {
									display: inline;
									font-size: 0.875rem;
									height: 1rem;
									white-space: nowrap;
									width: auto;
								}

								&.sapFSPSelected::before {
									display: none;
								}
							}
						}
					}

					.sapFSPSideContent .sapFSPSideContentHeader {
						flex-direction: row-reverse;
						justify-content: center;

						> .sapUiIcon {
							display: none;
						}

						.sapMTitle {
							flex-grow: 0;
						}
					}
				}
			}

			&.sapFSPSideContentExpanded .sapFSPSide .sapFSPSideInner .sapFSPActionBarListWrapper {
				height: 0;
				overflow: hidden;
				border: none;
			}
		}

		&.sapFSPSideContentExpanded .sapFSPSide {
			flex: 0 0 100%;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background: @sapBackgroundColor;
			height: 100%;

			.sapFSPSideInner {
				display: flex;
				flex-direction: column-reverse;
				flex-wrap: nowrap;
				align-items: stretch;
				width: 100%;
				border: none;

				.sapFSPActionBarListWrapper {
					border-top: 0.0625rem solid @sapUiGroupContentBorderColor;
				}
			}
		}

		&:not(.sapFSPActionBarExpanded):not(.sapFSPSingleItem) .sapFSPSide .sapFSPSideInner .sapFSPActionBarListWrapper {
			height: 4.125rem;
			width: 100%;
		}
	}

	// Compact
	.sapUiSizeCompact {
		.sapFSP {
			.sapFSPSide {
				flex: 0 0 3.75rem;

				.sapFSPSideInner {
					.sapFSPActionBarListWrapper {
						height: 5.5rem;
					}

					.sapFSPSideContent .sapFSPSideContentHeader {
						padding: 0.5rem 1rem;
						height: 1.625rem;
					}

					.sapFSPActionBarList {
						height: 5.5rem;

						.sapFSPItem {
							height: 5.5rem;
							padding-top: 0.875rem;

							.sapUiIcon {
								width: 2.75rem;
								height: 2rem;
								border-radius: 4rem;
							}

							.sapFSPItemText {
								height: 1.75rem;
							}
						}
					}
				}
			}

			&.sapFSPActionBarExpanded .sapFSPSide {
				flex: 0 0 5.5rem;
			}

			&.sapFSPSideContentExpanded .sapFSPSide {
				height: 100%;

				.sapFSPSideInner {
					.sapFSPSideContentInner {
						padding: 0.5rem 1rem;
					}

					.sapFSPSideContentHeader {
						& > .sapUiIcon {
							width: 2rem;
						}
					}
				}
			}

			&:not(.sapFSPActionBarExpanded) .sapFSPSide .sapFSPSideInner .sapFSPActionBarListWrapper {
				height: 3.75rem;
			}

			&.sapFSPSingleItem {
				.sapFSPSide {
					.sapFSPSideInner {
						.sapFSPActionBarListWrapper .sapFSPActionBarList .sapFSPItem .sapUiIcon {
							width: 2rem;
						}

						.sapFSPSideContent .sapFSPSideContentHeader > .sapUiIcon {
							display: none;
						}
					}
				}
				&.sapFSPSideContentExpanded .sapFSPSide .sapFSPSideInner .sapFSPActionBarListWrapper {
					height: 0;
					overflow: hidden;
				}
			}
		}
	}
}
/* END "SidePanel.less" */