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

/*!
 * OpenUI5
 * (c) Copyright 2009-2019 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;

	&.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: 0.0625rem dotted @sapUiContentFocusColor;
}

.sapFAvatarGroupGroup {
	cursor: pointer;

	.sapFAvatarGroupItem {
		display: inline-block;
	}
}

.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: 0.0625rem dotted @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;;
		}
	}
}

.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;
		}
	}

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

.sapFAvatarFocusable:focus {
	outline: 0.0625rem dotted @sapUiContentFocusColor;
}

.sapFAvatarGroupMoreButton.sapMBtn {
	padding: 0;
 }

 .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;
}

 .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;
	}
 }
/* END "AvatarGroup.less" */

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

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

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

	.sapFDynamicPageContentWrapperTransparent>.sapFDynamicPageContent {
		background: transparent;
	}

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

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

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

/* TODO remove after 1.62 version */
html[data-sap-ui-browser^="ie"] {
	.sapFDynamicPageContent {
		flex-shrink: 0;
	}
}

.sapFDynamicPageContentWrapper {
	.sapFDynamicPageContentWrapperSpacer {
		height: 4rem;
		flex: 0 0 4rem;
	}
}

.sapUiSizeCompact {
	.sapFDynamicPageContentWrapper {
		.sapFDynamicPageContentWrapperSpacer {
			height: 3.5rem;
			flex: 0 0 3.5rem;
		}
	}
}

.sapFDynamicPageContent,
.sapFDynamicPageContentFitContainer {
	position: relative;
	padding: 1rem 3rem 0 3rem;
}

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

	&.sapFDynamicPageContentFitContainerFooterVisible {
		bottom: 4rem;
	}
}

.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;
		}
	}

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

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

.sapFDynamicPageContentWrapper {
	width: 100%;
	height: 100%;
	position: relative;
	will-change: transform;
	-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;
}

.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;
	}
}

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

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

.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: 3rem;
			width: auto;
			bottom: 0;
			right: 0;
			left: 0;
			border-radius: 0.25rem;
			margin-left: 0.5rem;
			margin-right: 0.5rem;
			margin-bottom: 0.5rem;
		}
	}
}

.sapUiSizeCompact .sapFDynamicPage .sapFDynamicPageFooter .sapFDynamicPageActualFooterControl {
	height: 2.5rem;
}

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

	.sapMBtnInner {
		position: absolute !important;
		border-radius: 0.1875rem;
	}
}

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

.sapFDynamicPageToggleHeaderIndicator,
.sapFDynamicPage:not(.sapFDynamicPageTitleClickEnabled) .sapFDynamicPageHeaderPinButton {
	margin-left: -1.25rem;
}

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

.sapFDynamicPageHeaderPinButton {
	margin-left: 0.25rem;
}

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

/* ============= */
/* 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;
}
/* 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;

	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%;
			dispaly: 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;
	}
}

.sapFDynamicPageTitle .sapFDynamicPageTitleMainContent .sapMTB .sapMBarChild {
	&:last-child,
	&:first-child {
	   margin: 0 0.25rem;
	}
 }

/* TODO remove after 1.62 version */
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 1.62 version */
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: 48px;

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

		.sapFDynamicPageTitleMainHeadingInner {
			min-width: 1px;
			max-width: 100%;
			color: @sapUiGroupTitleTextColor;
			font-size: @sapMFontHeader3Size;
			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: 48px;
		padding: 0 0 0.5rem 0.5rem;
	}

	.sapFDynamicPageTitleMainActions {
		margin-left: auto;
		min-width: 48px;

	.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                               */
/* ======================================== */

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

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

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

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

.sapFDynamicPageHeader:focus {
	outline: none;
}

.sapFDynamicPageHeaderHidden {
	display: none;
}

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

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

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

.sapFDynamicPageHeader.sapFDynamicPageHeaderWithContent {
	.sapMObjectAttributeDiv .sapMText,
	.sapMObjectAttributeDiv .sapMObjectAttributeTitle,
	.sapMObjectAttributeDiv .sapMObjectAttributeColon,
	.sapMObjectAttributeDiv .sapMObjectAttributeText {
		vertical-align: middle;
	}
}
/* END "DynamicPageHeader.less" */

/* START "Card.less" */
/* ================================== */
/* CSS for control sap.f/Card  */
/* Base theme          */
/* ================================== */
@_sap_f_Card_ContentPadding: 1rem;
@_sap_f_Card_HeaderIconColor: #6a6d70;
@_sap_f_Card_HeaderBorderBottom: 1px solid darken(@sapUiTileBackground, 20);
@_sap_f_Card_HeaderHoverColor: @sapUiTileHoverBackground;
@_sap_f_Card_HeaderActiveColor: @sapUiTileActiveBackground;

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

//This class can be used for styling a Widget as a card
.sapFCardBase {
  position: relative;
  box-sizing: border-box;
  background: @sapUiTileBackground;
  box-shadow: @sapUiShadowLevel0;
  border-radius: @sapUiElementBorderCornerRadius;
  color: @sapUiGroupTitleTextColor;
  outline: none;
}

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

.sapFCardObjectContent {
	padding: 1rem 1rem 0 1rem;
}

.sapFCardObjectGroup {
	padding-bottom: 1.75rem;

	& .sapFCardObjectItemTitle {
		margin-bottom: 0.5rem;
	}
	& .sapFCardObjectItemLabel {
		margin-top: 1rem;
	}

	& .sapFCardObjectItemText {
		margin-top: 0.25rem;
	}

	& .sapFCardObjectItemAvatar {
		margin-right: 0.5rem;
	}
}

.sapFCardObjectGroup.sapFCardObjectGroupLastInColumn {
	padding-bottom: 1rem;
}

.sapFCardObjectSpaceBetweenGroup {
	margin-right: 2rem;
}

.sapFCard .sapFCardHeader {
	position: relative;
	flex-shrink: 0;
	background: @sapUiTileBackground;
	border-bottom: @_sap_f_Card_HeaderBorderBottom;
	padding: @_sap_f_Card_ContentPadding;
	display: flex;
	align-items: flex-start;
	outline: none;

	.sapFCardIcon.sapFAvatar:not(.sapFAvatarImage ):not(.sapFAvatarInitials ){
		background-color: transparent;
		border: none;
	}

	.sapFCardIcon.sapFAvatar {
		flex-shrink: 0;
		margin-right: 0.75rem;
		display: flex;
		align-items: center;
		justify-content: center;
		.sapUiIcon {
			align-self: center;
			font-size: 2rem;
			color: @_sap_f_Card_HeaderIconColor;
		}
	}

	.sapFCardHeaderText {
		flex: 1 1 auto;

		.sapFCardTitle {
			margin: 0px;
			display: block;
			font-family: @sapUiFontHeaderFamily;
			font-size: @sapMFontHeader5Size;
			font-weight: @sapUiFontHeaderWeight;
			color: @sapUiTileTitleTextColor;
			min-height: 1rem;
		}
	}

	.sapFCardSubtitle {
		margin: 0.5rem 0 0 0;
		font-family: @sapUiFontFamily;
		font-size: @sapMFontMediumSize;
		font-weight: normal;
		color: @sapUiTileTextColor;
		min-height: 1rem;
	}

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

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

	.sapFCardHeaderText {
		width: 100%;
	}
}

.sapFCard.sapFCardBottomHeader .sapFCardHeader {
	border-bottom: none;
	border-top: @_sap_f_Card_HeaderBorderBottom;
}

.sapFCard .sapFCardHeader.sapFCardNumericHeader {
	display: block;

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

	.sapFCardSubtitle {
		display: flex;
		align-items: flex-end;

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

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

	.sapFCardHeaderDetails {
		margin-top: 0.25rem;
		font-size: @sapMFontSmallSize;
		color: @sapUiTileTextColor;
	}

	.sapFCardHeaderIndicators {
		margin-top: 0.25rem;
		display: flex;
		justify-content: flex-start;

		.sapFCardHeaderMainIndicator {
			flex-shrink: 0;
			height: 2.875rem;
			.sapMNCValue {
				line-height: 2.875rem;
			}
			.sapMNCInner {
				padding-top: 0px;
			}
		}

		.sapFCardHeaderIndicatorsGap {
			flex: 1 0 1rem;
			max-width: 3rem;
		}

		.sapFCardHeaderSideIndicators {
			min-width: 0; // allows items to shrink and truncate the content inside
			display: flex;
			align-items: flex-end;
			padding: 0.5rem 0;
			.sapFCardHeaderSideIndicator:nth-child(2) {
				margin-left: 1rem;
			}
		}
	}
}

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



.sapFCard .sapFCardContent {
	flex: 1 0 auto;
	overflow: hidden;
	position: relative;
	display: flex;

	.sapFCardTemporaryContent,
	.sapFCardBaseContent {
		max-width: 100%;
		flex: 1;
	}
}

.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;
		}
	}

	.sapMListItems li:last-child {
		border-bottom: none;
	}

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

.sapFCard .sapMLIBImgNav {
	display: none;
}

.sapFCard :not(.sapMListModeDelete) > .sapMLIB.sapMLIBTypeNavigation {
	padding-right: 1rem;
}

.sapFCard .sapMListTblNavCol:last-child,
.sapUiSizeCompact .sapFCard .sapMListTblNavCol:last-child {
	width: 0;
}



.sapFCard .sapMListTblHasNav .sapMListTblCell:nth-last-child(2) {
	padding-right: 1rem;
}

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

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

.sapFCard.sapFCardNoContent .sapFCardHeader {
	border-bottom: none;
}

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

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

		.sapMText {
			cursor: pointer;
		}

		&.sapFCardClickable:hover{
			background: @_sap_f_Card_HeaderHoverColor;
		}

		&.sapFCardClickable:active{
			background: @_sap_f_Card_HeaderActiveColor;
		}
	}
}

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

html[data-sap-ui-browser^="ie"] .sapFCardHeader:focus::before,
html[data-sap-ui-browser^="ie"] .sapFCard .sapFCardHeader.sapFCardNumericHeader:focus::before {
	border: 1px dashed @sapUiContentFocusColor;
}

.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;
		}
	}
}


/* END "Card.less" */

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

@_sap_f_GridListItem_Header_BoxShadow: inset 0 -0.0625rem @sapUiPageHeaderBorderColor;
@_sap_f_GridListItem_HeaderHeight: 3rem;
@_sap_f_GridListItem_Compact_HeaderHeight: 2rem;

.sapFGLI {
	padding: 0;
	border-radius: 0.25rem;
	border: none;
	box-shadow: @sapUiShadowLevel0;

	// Highlighted items
	.sapMLIBHighlight {
		border-top-left-radius: 0.25rem;
		border-bottom-left-radius: 0.25rem;
		z-index: 1;
	}

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

		// Header Toolbar
		.sapFGLIToolbar {
			height: @_sap_f_GridListItem_HeaderHeight;
			box-shadow: @_sap_f_GridListItem_Header_BoxShadow;
			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) {
				padding: 0 0 0 0.5rem;
				margin: 0;
			}
		}

		// 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,
.sapFGridList .sapMLIB {

	&.sapMLIBHoverable:hover {
		box-shadow: 0 0 0 1px fade(@sapUiContentShadowColor, 30);
	}

	&.sapMLIB.sapMLIBSelected {
		box-shadow: 0 0 0px 0.125rem @sapUiSelected, 0 0 1px @sapUiListBackground inset;
	}

	&.sapMLIBActive {
		.sapFGLIWrapper .sapFGLIToolbar {
			box-shadow: none;
		}
	}
}

/* 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          */
/* ================================== */
.sapFGridContainer {
	position: relative;
	display: grid;

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

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

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

	.sapFGridContainerItemWrapper {
		min-width: 0;

		&.sapFGridContainerInvisiblePlaceholder {
			display: none;
		}
	}

	.sapFCard.sapFCardAnalytical {
		min-height: 100%;

		.sapFCardContent {
			min-height: 14rem;
		}
	}
}

html[data-sap-ui-browser^="ie"] .sapFGridContainer {
	.sapFCard.sapFCardAnalytical {
		height: 100%;
	}
}
/* END "GridContainer.less" */

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

@_sap_f_FCL_navigation_arrow_width: 1rem;

.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;

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

		&.sapFFCLColumnHidden {
			display: none;
		}

		.sapFFCLContainer {
			height: 100%;
		}

		&.sapFFCLPinnedColumn {
			position: absolute;
			right: 0;
		}

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

	.sapFFCLColumnContent {
		height: 100%;
	}

	.sapUiLocalBusyIndicator {
		z-index: 400;
	}
}

.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;


	.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{
		.sapMBtnInner:not(.sapMBtnActive) {
			&:after,
			&:before {
				height: 7rem;
			}
		}
	}
}

.sapFFCLArrow
{
	position: relative;
	vertical-align: middle;
	display: inline-block;
	height: 100%;
	z-index: 400;

	&:after {
		content: "";
		display: inline-block;
		vertical-align: middle;
		height: 100%;
	}
}

.sapFFCLBackgroundDesignTransparent .sapFFCLArrow {
	background: transparent;
}

.sapFFCLBackgroundDesignSolid .sapFFCLArrow {
	background: @sapUiObjectHeaderBackground;
}

.sapFFCLBackgroundDesignTranslucent .sapFFCLArrow {
	background: @sapUiShellBackgroundGradient;
}

// In order to have reveal effect, columns should overlap each other
.sapFFCLColumnBegin {
	z-index: 300;
}

.sapFFCLColumnMid {
	z-index: 200;
}

.sapFFCLColumnEnd {
	z-index: 100;
}

html[data-sap-ui-animation='on'] {
	.sapFFCL {
		.sapFFCLColumn {
			&:not(.sapFFCLPinnedColumn) {
				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" */
.sapFGridList {
	/* List headers overrides */
	& > .sapMListHdrText,
	& > .sapMListHdrTBar {
		margin-bottom: 0.5rem;
	}

	.sapMLIBCounter {
		padding-right: 1rem;
	}
}

.sapFGridList ul:not(.sapUiLayoutCSSGridBoxLayoutPolyfill) {
	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;
		}
	}
}

/* List Item overrides. */
.sapFGridList .sapMLIB:not(.sapMGHLI) {
	border-radius: 0.25rem;
	border: none;
	box-shadow: @sapUiShadowLevel0;

	// Highlighted items
	.sapMLIBHighlight {
		border-top-left-radius: 0.25rem;
		border-bottom-left-radius: 0.25rem;
	}
	& > .sapMLIBContent {
		height: 100%;
	}
}

.sapFGridList .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 "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;

		.sapMText {
			text-align: center !important;
		}
	}

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

	.sapFPSItemIconPlaceholder {
		height: 3rem;
	}

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

	.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%;

		.sapMText {
			text-align: left !important;
		}
	}

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

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

	.sapFPSItemTitle {
		width: 100%;
		max-width: 100%;
	}

	&.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;
}
/* END "ProductSwitchItem.less" */

/* START "ShellBar.less" */
@_sap_f_ShellBar_PaddingDesktop: 3rem;
@_sap_f_ShellBar_PaddingTablet: 2rem;
@_sap_f_ShellBar_PaddingPhone: 1rem;
@_sap_f_ShellBar_ChildMargin: 4;
@_sap_f_ShellBar_CoPilotWidth: 48;

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

.sapFShellBar {
	height: 3rem;
	box-sizing: border-box;
	overflow: hidden;

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

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

	.sapFShellBarOTB {
		height: 3rem;
		padding: 0 @_sap_f_ShellBar_PaddingDesktop;

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

		:first-child.sapFShellBarHomeIcon {
			margin-left: 1px;
		}

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

		.sapFShellBarOverflowButton {
			order: 1;
		}

		.sapFShellBarGridButton {
			order: 3;
			margin-right: 0;
		}

		.sapFShellBarProfile {
			order: 2;
		}
		.sapFShellBarSecondTitle {
			margin: 0;
		}
	}

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

	.sapFSHMegaMenu {
		max-width: none;
		display: inline-block;
		font-weight: bold;
		overflow: hidden;
		.sapMBtnInner > img {
			margin-top: 0.05rem;
			margin-left: 0.05rem;
			width: auto !important;
			max-width: none !important;
			height: 2rem;
		}
		.sapMBtnInner::after {
			content: '';
			font-size: 1rem;
			line-height: 2.2rem;
			font-weight: bold;
		}
	}

	.sapFShellBarHomeIcon {
		height: 2rem;
	}

	.sapFShellBarSearch {
		display: flex;
		max-width: 28rem; // max width of searchField + button width
		min-width: 12rem; // min width of searchField + button width
		width: 100%;

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

		.sapFShellBarSearchCancelButton {
			margin-left: 0.5rem;
		}
		&.sapFShellBarSearchFullWidth {
			max-width: 100%;
			margin: 0;

			.sapMSF {
				max-width: 100%;
			}
		}

	}

	.CPImage {
		width: ~"@{_sap_f_ShellBar_CoPilotWidth}px";
		height: ~"@{_sap_f_ShellBar_CoPilotWidth}px";
		overflow: hidden;
		cursor: pointer;
		outline: none;
		html[data-sap-ui-animation='on'] & {
			&:hover {
				transition: transform 0.30s;
				transform: scale(1.1);
			}
			&:active {
				transition: transform 0.05s;
				transform: scale(1.2);
			}
		}
		html[data-sap-ui-animation='off'] & {
			&:hover {
				transform: scale(1.1);
			}
			&:active {
				transform: scale(1.2);
			}
		}
		.color1 {
			stop-color: #00B8F3;
		}
		.color2 {
			stop-color: #1C61BA;
		}
		&: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;
			position: relative;
		}
		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;
	}

	&.sapFShellBarSizeTablet .sapFShellBarOTB {
		padding: 0 @_sap_f_ShellBar_PaddingTablet;
	}

	&.sapFShellBarSizePhone {
		.sapFShellBarOTB {
			padding: 0 @_sap_f_ShellBar_PaddingPhone;
		}
		.sapFShellBarProfile {
			margin-right: 0;
		}
	}

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

	.sapFShellBarPrimaryTitle {
		overflow: hidden;
		text-overflow: ellipsis;
		background: transparent;
		color: @sapUiShellTextColor;
		font-size: @_sap_f_ShellBar_PrimaryTitle_FontSize;
		line-height: 1rem;
		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;
	}

	.sapUiSizeCompact & {
		&.sapMPageHeader .sapMIBar {
			height: 3rem;
		}
		.sapFShellBarProfile {
			padding-top: 0;
			height: 2.125rem;
			.sapFAvatar {
				margin-top: 0;
			}
			.sapMBtnInner {
				height: 2.125rem;
			}
		}
		.sapFShellBarSearch {
			max-width: 27.5rem; // max width of searchField + button width
			min-width: 11.5rem; // min width of searchField + button width
			.sapMSF {
				max-width: 25rem;
				min-width: 9rem;
				margin-right: 0.5rem;
			}

			&.sapFShellBarSearchFullWidth {
				max-width: 100%;
				margin: 0;

				.sapMSF {
					max-width: 100%;
				}
			}
		}
	}
}

.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 "GridDragAndDrop.less" */
.sapUiDnDGridIndicator {
	background: @sapUiDragAndDropActiveBackground;
	border: 0.125rem solid @sapUiDragAndDropActiveBorderColor;
	box-sizing: border-box;
}
/* END "GridDragAndDrop.less" */