added cross-package variable import

added cross-package variable import

@import "{ox2:typography}/lib/oo-font-variables.import.less";

[oo-Text] {
  font-family: @normal;
  user-select: text;
  font-size: 1.5rem;
  text-align: left;
  color: #5A5A5A;

  img {
    width: 100%;
  }

  h1, h2, h3 {
    margin-top: .5em;
    margin-bottom: .3em;
  }

  h4, h5, h6 {
    margin-top: .3em;
    margin-bottom: .3em;
  }

  p {
    font-size: 1em;
    margin: 0 0 .5em;
  }

  h1 {
    font-size: 1.7em;
  }

  h2 {
    font-size: 1.4em;
  }

  h3 {
    font-size: 1.2em;
  }

  h4 {
    font-size: 1em;
  }

  h5 {
    font-size: .8em;
  }

  h6 {
    font-size: .6em;
  }

  li {
    font-size: 1em;
  }
}

[oo-Text~="center"] {
  text-align: center;
}

[oo-Text~="right"] {
  text-align: right;
}

[oo-Text~="push"] {
  padding: 2rem;
}

[oo-Text~="push:top:2"] {
  padding-top: 2rem;
}

[oo-Text~="push:bottom:4"] {
  padding-bottom: 4rem;
}

[oo-Text~="push:bottom:5"] {
  padding-bottom: 5rem;
}

[oo-Text] {
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  user-select: text;
  font-size: 1.5rem;
  text-align: left;
  color: #5A5A5A;

  img {
    width: 100%;
  }

  h1, h2, h3 {
    margin-top: .5em;
    margin-bottom: .3em;
  }

  h4, h5, h6 {
    margin-top: .3em;
    margin-bottom: .3em;
  }

  p {
    font-size: 1em;
    margin: 0 0 .5em;
  }

  h1 {
    font-size: 1.7em;
  }

  h2 {
    font-size: 1.4em;
  }

  h3 {
    font-size: 1.2em;
  }

  h4 {
    font-size: 1em;
  }

  h5 {
    font-size: .8em;
  }

  h6 {
    font-size: .6em;
  }

  li {
    font-size: 1em;
  }
}

[oo-Text~="center"] {
  text-align: center;
}

[oo-Text~="right"] {
  text-align: right;
}

[oo-Text~="push"] {
  padding: 2rem;
}

[oo-Text~="push:top:2"] {
  padding-top: 2rem;
}

[oo-Text~="push:bottom:4"] {
  padding-bottom: 4rem;
}

[oo-Text~="push:bottom:5"] {
  padding-bottom: 5rem;
}


Add bottom margin to detail pane popout

Add bottom margin to detail pane popout

position: relative;
text-align: center;
.clearfix;
min-width: 200px;

.no-results {
  color: #666;
  width: 30em;
  margin: auto;
  padding: 0 0.5em;
  display: none;

  &.visible {
    display: block;
  }

  .no-workspace-access {
    font-style: italic;
    padding: 0.5em;

    .dropdown-menu {
      text-align: left;
    }

    .btn-link {
      padding: 0;
    }
  }

  &.someVerticesFound {
    @background: #FFFFE0;
    background: @background;
    width: 100%;
    margin: 0;
    padding: 0;
    text-shadow: 0 1px 0 white;
    border-bottom: 2px solid darken(desaturate(@background, 30%), 10%);

    .dropdown-menu a {
      text-shadow: none;
    }
    h1 {
      margin: 0;
      font-size: 140%;
    }
    p.return-to-lumify {
      display: none;
    }
  }

  h1 {
      margin-top: 2em;
      padding: inherit;
  }
}

.detail-pane {
  text-align: left;
  padding: 0;
  margin: 0;
  height: auto;
  position: relative;
  overflow: none;

  .highlight-button {
    display: none;
  }

  .content {
    background: white;
    margin: 3%;
    border: 1px solid #ddd;
    position: relative;
    overflow: visible;
    height: auto;
  }

  .content .detail-toolbar {
    background: inherit;
  }
}

&.onlyone {
  .entities-container, .artifacts-container {
    width: auto;
    .box-sizing(border-box);

  }
  .detail-pane {
    width: 100% !important;
    margin: auto;
    &.type-entity {
      max-width: 50em !important;
    }
  }
  .close-detail-pane {
    display: none;
  }
}

&.artifacts-0 {
  .entities-container {
    width: 100%;
  }
}

// 2 Column Entities, 1 column
@media (min-width: 37em) {

  .detail-pane.type-entity {
    display: inline-block;
    vertical-align: top;
    width: 50%;
  }

  &.entities-1 .detail-pane.type-entity {
    display: inline-block;
    vertical-align: top;
    width: 100%;
  }
}

// 3 Column Entities, 1 column
@media (min-width: 50em) {

  &.entity-cols-1 .detail-pane.type-entity,
  &.entity-cols-3 .detail-pane.type-entity {
    display: inline-block;
    vertical-align: top;
    width: 33%;
  }
}

// 4 Column Entities, 1 column
@media (min-width: 70em) {

  &.entity-cols-1 .detail-pane.type-entity,
  &.entity-cols-4 .detail-pane.type-entity {
    display: inline-block;
    vertical-align: top;
    width: 25%;
  }
}

@media (min-width: 50em) {
  &.has-artifacts.has-entities {
    .detail-pane .content {
      margin: 1em 0 0 1em;
    }
    .entities-container {
      .detail-pane.type-entity {
        width: 100%;
      }
      position: absolute;
      float: left;
      width: 30%;
      margin-bottom: 1em;
    }
    .artifacts-container {
      width: 70%;
      padding: 0;
      .box-sizing(border-box);
      float: right;
      margin-bottom: 1em;

      .detail-pane .content {
        margin-right: 1em;
      }
    }
  }
}

position: relative;
text-align: center;
.clearfix;
min-width: 200px;

.no-results {
  color: #666;
  width: 30em;
  margin: auto;
  padding: 0 0.5em;
  display: none;

  &.visible {
    display: block;
  }

  .no-workspace-access {
    font-style: italic;
    padding: 0.5em;

    .dropdown-menu {
      text-align: left;
    }

    .btn-link {
      padding: 0;
    }
  }

  &.someVerticesFound {
    @background: #FFFFE0;
    background: @background;
    width: 100%;
    margin: 0;
    padding: 0;
    text-shadow: 0 1px 0 white;
    border-bottom: 2px solid darken(desaturate(@background, 30%), 10%);

    .dropdown-menu a {
      text-shadow: none;
    }
    h1 {
      margin: 0;
      font-size: 140%;
    }
    p.return-to-lumify {
      display: none;
    }
  }

  h1 {
      margin-top: 2em;
      padding: inherit;
  }
}

.detail-pane {
  text-align: left;
  padding: 0;
  margin: 0;
  height: auto;
  position: relative;
  overflow: none;

  .highlight-button {
    display: none;
  }

  .content {
    background: white;
    margin: 3%;
    border: 1px solid #ddd;
    position: relative;
    overflow: visible;
    height: auto;
  }

  .content .detail-toolbar {
    background: inherit;
  }
}

&.onlyone {
  .entities-container, .artifacts-container {
    width: auto;
    .box-sizing(border-box);

  }
  .detail-pane {
    width: 100% !important;
    margin: auto;
    &.type-entity {
      max-width: 50em !important;
    }
  }
  .close-detail-pane {
    display: none;
  }
}

&.artifacts-0 {
  .entities-container {
    width: 100%;
  }
}

// 2 Column Entities, 1 column
@media (min-width: 37em) {

  .detail-pane.type-entity {
    display: inline-block;
    vertical-align: top;
    width: 50%;
  }

  &.entities-1 .detail-pane.type-entity {
    display: inline-block;
    vertical-align: top;
    width: 100%;
  }
}

// 3 Column Entities, 1 column
@media (min-width: 50em) {

  &.entity-cols-1 .detail-pane.type-entity,
  &.entity-cols-3 .detail-pane.type-entity {
    display: inline-block;
    vertical-align: top;
    width: 33%;
  }
}

// 4 Column Entities, 1 column
@media (min-width: 70em) {

  &.entity-cols-1 .detail-pane.type-entity,
  &.entity-cols-4 .detail-pane.type-entity {
    display: inline-block;
    vertical-align: top;
    width: 25%;
  }
}

@media (min-width: 50em) {
  &.has-artifacts.has-entities {
    .detail-pane .content {
      margin: 1em 0 0 1em;
    }
    .entities-container {
      .detail-pane.type-entity {
        width: 100%;
      }
      position: absolute;
      float: left;
      width: 30%;
    }
    .artifacts-container {
      width: 70%;
      padding: 0;
      .box-sizing(border-box);
      float: right;

      .detail-pane .content {
        margin-right: 1em;
      }
    }
  }
}


Align popup to center of the new badges

Align popup to center of the new badges

Bug: T141677
Change-Id: I24c1a12f325ca6a432d6fe9cc5635fbde10b1685

@import '../echo.variables';

.mw-echo-ui-notificationBadgeButtonPopupWidget {
	position: relative;

	> .oo-ui-popupWidget {
		// #p-personal li has a font-size of 0.75em, but we want the
		// font size here to be exactly 0.875em, so we must override
		// the parent em sizing by dividing.
		font-size: 0.875em / 0.75em;

		// Align the popup with the center of the button
		/* @noflip */
		left: 0.8em;

		> .oo-ui-popupWidget-popup {
			> .oo-ui-popupWidget-head {
				height: 3.5em;
				border-bottom: 1px solid #dddddd;

				> .oo-ui-iconWidget {
					/* ( 3.5 - 1.875 ) / 2 = 0.8125 */
					margin: 0.8125em 0 0.8125em 1em;
					float: left;
					opacity: @opacity-mid;
				}

				> .oo-ui-labelElement-label {
					font-size: 1.2em;
					padding: 0.3em;
					margin-left: 0;
					font-weight: bold;
				}

				.mw-echo-ui-notificationsWidget-markAllReadButton {
					margin: 1.25em 1em 0 0;
				}
			}

			> .oo-ui-popupWidget-body {
				// Work around scrollbar rendering bug in Chrome
				overflow-y: visible;
				// Work around OO.ui.FloatableElement bug (T130153)
				overflow-x: auto;

				> .mw-echo-ui-notificationsListWidget > .mw-echo-ui-notificationItemWidget {
					// The popup body itself has a border. We need to override the notification
					// item widget styles so that the edge borders of the items are not duplicated
					border-left: 0;
					border-right: 0;
					&:last-child {
						border-bottom: 0;
					}
				}
			}

			> .oo-ui-popupWidget-footer {
				border-top: 1px solid #DDDDDD;
				width: 100%;

				> .oo-ui-buttonGroupWidget {
					display: block;
				}

				.mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons {
					display: table-row;

					.oo-ui-buttonElement {
						display: table-cell;
						white-space: normal;
						font-weight: bold;
						width: @notification-popup-width / 2;
						box-sizing: border-box;

						&:last-child {
							border-left: 1px solid #DDDDDD;
						}

						> .oo-ui-buttonElement-button {
							display: block;
							line-height: 2.6em;
							margin: 0;
							border: 0;
							padding: 0.5em;

							.oo-ui-iconElement-icon {
								// HACK: these are absolutely positioned in OOUI, and our line-height: 4em;
								// rule breaks that.
								// FIXME: We should really use a different widget here
								position: static;
								opacity: @opacity-mid;
							}
						}
					}
				}
			}
		}
	}

}

@import '../echo.variables';

.mw-echo-ui-notificationBadgeButtonPopupWidget {
	position: relative;

	> .oo-ui-popupWidget {
		// #p-personal li has a font-size of 0.75em, but we want the
		// font size here to be exactly 0.875em, so we must override
		// the parent em sizing by dividing.
		font-size: 0.875em / 0.75em;

		// Align the popup with the center of the button
		/* @noflip */
		left: 1em;

		> .oo-ui-popupWidget-popup {
			> .oo-ui-popupWidget-head {
				height: 3.5em;
				border-bottom: 1px solid #dddddd;

				> .oo-ui-iconWidget {
					/* ( 3.5 - 1.875 ) / 2 = 0.8125 */
					margin: 0.8125em 0 0.8125em 1em;
					float: left;
					opacity: @opacity-mid;
				}

				> .oo-ui-labelElement-label {
					font-size: 1.2em;
					padding: 0.3em;
					margin-left: 0;
					font-weight: bold;
				}

				.mw-echo-ui-notificationsWidget-markAllReadButton {
					margin: 1.25em 1em 0 0;
				}
			}

			> .oo-ui-popupWidget-body {
				// Work around scrollbar rendering bug in Chrome
				overflow-y: visible;
				// Work around OO.ui.FloatableElement bug (T130153)
				overflow-x: auto;

				> .mw-echo-ui-notificationsListWidget > .mw-echo-ui-notificationItemWidget {
					// The popup body itself has a border. We need to override the notification
					// item widget styles so that the edge borders of the items are not duplicated
					border-left: 0;
					border-right: 0;
					&:last-child {
						border-bottom: 0;
					}
				}
			}

			> .oo-ui-popupWidget-footer {
				border-top: 1px solid #DDDDDD;
				width: 100%;

				> .oo-ui-buttonGroupWidget {
					display: block;
				}

				.mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons {
					display: table-row;

					.oo-ui-buttonElement {
						display: table-cell;
						white-space: normal;
						font-weight: bold;
						width: @notification-popup-width / 2;
						box-sizing: border-box;

						&:last-child {
							border-left: 1px solid #DDDDDD;
						}

						> .oo-ui-buttonElement-button {
							display: block;
							line-height: 2.6em;
							margin: 0;
							border: 0;
							padding: 0.5em;

							.oo-ui-iconElement-icon {
								// HACK: these are absolutely positioned in OOUI, and our line-height: 4em;
								// rule breaks that.
								// FIXME: We should really use a different widget here
								position: static;
								opacity: @opacity-mid;
							}
						}
					}
				}
			}
		}
	}

}


[INTERNAL] Fiori 3 Less Parameter value changes

Change-Id: I06988123e86c0d5aae36727a074f7bce73f66f9f

// ==================================
// Global CSS for 'sap_fiori_3' theme
// ==================================

// =====================================
// Semantic Theming Mapping
// =====================================

// ==========================================================
// Quick Theming (these Parameters can be linked in controls)
// ==========================================================

@sapUiBrand: @sapBrandColor;                            // #427cac
@sapUiHighlight: @sapHighlightColor;                    // #427cac
@sapUiBaseColor: @sapBaseColor;
@sapUiShellColor: @sapShellColor;						// transparent
@sapUiBaseBG: @sapBackgroundColor;						// #fafafa
@sapUiGlobalBackgroundColor: @sapBackgroundColor;

@sapUiFontFamily: @sapFontFamily;
@sapUiFontSize: 16px; // @sapFontSize;

@sapUiBaseText: @sapTextColor;							// #333333
@sapUiLink: @sapLinkColor;								// #0070b1

@sapUiGlobalLogo: @sapCompanyLogo;
@sapUiGlobalBackgroundImage: @sapBackgroundImage;
@sapUiBackgroundImage: @sapBackgroundImage;
@sapUiUx3ShellBackgroundImageURL: @sapBackgroundImage;

@sapUiGlobalBackgroundImageOpacity: @sapBackgroundImageOpacity;
@sapUiGlobalBackgroundRepeat: @sapBackgroundImageRepeat;

// ==============================================================
// Expert Theming (these Parameters should be linked in controls)
// ==============================================================

@sapUiSelected: @sapSelectedColor;
@sapUiActive: @sapActiveColor;
@sapUiHighlightTextColor: @sapHighlightTextColor;
@sapUiTextTitle: @sapTitleColor;			// was "Quick" default #333333

@sapUiElementLineHeight: @sapElement_LineHeight;
@sapUiElementHeight: @sapElement_Height;
@sapUiElementBorderWidth: @sapElement_BorderWidth;

@sapUiContentLineHeight: @sapContent_LineHeight; // 1.3;
@sapUiContentElementHeight: @sapContent_ElementHeight; // 1.37em;
@sapUiContentElementHeightPX: @sapContent_ElementHeight_PX; // 22px;
@sapUiContentIconHeight: @sapContent_IconHeight; // 16px;
@sapUiContentIconColor: @sapContent_IconColor;
@sapUiContentContrastIconColor: @sapContent_ContrastIconColor;
@sapUiContentNonInteractiveIconColor: @sapContent_NonInteractiveIconColor;
@sapUiContentMarkerIconColor: @sapContent_MarkerIconColor;
@sapUiContentMarkerTextColor: @sapContent_MarkerTextColor;
@sapUiContentImagePlaceholderBackground: @sapContent_ImagePlaceholderBackground;
@sapUiContentImagePlaceholderForegroundColor: @sapContent_ImagePlaceholderForegroundColor;
@sapUiContentFocusColor: @sapContent_FocusColor;
@sapUiContentContrastFocusColor: @sapContent_ContrastFocusColor;
@sapUiContentShadowColor: @sapContent_ShadowColor;
@sapUiContentContrastShadowColor: @sapContent_ContrastShadowColor;
@sapUiContentSearchHighlightColor: @sapContent_SearchHighlightColor;
@sapUiContentHelpColor: @sapContent_HelpColor;
@sapUiContentLabelColor: @sapContent_LabelColor;
@sapUiContentDisabledTextColor: @sapContent_DisabledTextColor;
@sapUiContentDisabledOpacity: @sapContent_DisabledOpacity;
@sapUiContentContrastTextThreshold: @sapContent_ContrastTextThreshold;
@sapUiContentContrastTextColor: @sapContent_ContrastTextColor;
@sapUiContentForegroundColor: @sapContent_ForegroundColor;
@sapUiContentForegroundBorderColor: @sapContent_ForegroundBorderColor;
@sapUiContentForegroundTextColor: @sapContent_ForegroundTextColor;
@sapUiContentBadgeBackground: @sapContent_BadgeBackground;

@sapUiShellBackground: @sapShell_Background;
@sapUiShellBackgroundImage: @sapShell_BackgroundImage;
@sapUiShellBackgroundImageOpacity: @sapShell_BackgroundImageOpacity;
@sapUiShellBackgroundImageRepeat: @sapShell_BackgroundImageRepeat;
@sapUiShellBackgroundPatternColor: @sapShell_BackgroundPatternColor;
@sapUiShellBackgroundGradient: @sapShell_BackgroundGradient;
@sapUiShellBorderColor: @sapShell_BorderColor;
@sapUiShellTextColor: @sapShell_TextColor;
@sapUiShellInteractiveTextColor: @sapShell_InteractiveTextColor;
@sapUiShellFavicon: @sapShell_Favicon;

@sapUiButtonBorderWidth: @sapButton_BorderWidth;
@sapUiButtonBorderCornerRadius: @sapButton_BorderCornerRadius; // 2px;
@sapUiButtonBackground: @sapButton_Background;
@sapUiButtonBorderColor: @sapButton_BorderColor;
@sapUiButtonTextColor: @sapButton_TextColor;
@sapUiButtonHoverBackground: @sapButton_Hover_Background;
@sapUiButtonHoverBorderColor: @sapButton_Hover_BorderColor;
@sapUiButtonHoverTextColor: @sapButton_Hover_TextColor;
@sapUiButtonEmphasizedBackground: @sapButton_Emphasized_Background;
@sapUiButtonEmphasizedBorderColor: @sapButton_Emphasized_BorderColor;
@sapUiButtonEmphasizedTextColor: @sapButton_Emphasized_TextColor;
@sapUiButtonRejectBackground: @sapButton_Reject_Background;
@sapUiButtonAcceptBackground: @sapButton_Accept_Background;

@sapUiFieldBorderWidth: @sapField_BorderWidth;
@sapUiFieldBorderCornerRadius: @sapField_BorderCornerRadius;
@sapUiFieldBackground: @sapField_Background;
@sapUiFieldBorderColor: @sapField_BorderColor;
@sapUiFieldTextColor: @sapField_TextColor;
@sapUiFieldHelpBackground: @sapField_HelpBackground;
@sapUiFieldHoverBackground: @sapField_Hover_Background;
@sapUiFieldHoverBorderColor: @sapField_Hover_BorderColor;
@sapUiFieldHoverHelpBackground: @sapField_Hover_HelpBackground;
@sapUiFieldFocusBackground: @sapField_Focus_Background;
@sapUiFieldFocusBorderColor: @sapField_Focus_BorderColor;
@sapUiFieldFocusHelpBackground: @sapField_Focus_HelpBackground;
@sapUiFieldReadOnlyBackground: @sapField_ReadOnly_Background;
@sapUiFieldReadOnlyBorderColor: @sapField_ReadOnly_BorderColor;
@sapUiFieldReadOnlyHelpBackground: @sapField_ReadOnly_HelpBackground;
@sapUiFieldRequiredColor: @sapField_RequiredColor;
@sapUiFieldInvalidColor: @sapField_InvalidColor;
@sapUiFieldInvalidBackground: @sapField_InvalidBackground;
@sapUiFieldWarningColor: @sapField_WarningColor;
@sapUiFieldWarningBackground: @sapField_WarningBackground;
@sapUiFieldSuccessColor: @sapField_SuccessColor;
@sapUiFieldSuccessBackground: @sapField_SuccessBackground;

@sapUiGroupTitleBackground: @sapGroup_TitleBackground;
@sapUiGroupTitleBorderColor: @sapGroup_TitleBorderColor;
@sapUiGroupTitleTextColor: @sapGroup_TitleTextColor;
@sapUiGroupContentBackground: @sapGroup_ContentBackground;
@sapUiGroupContentBorderColor: @sapGroup_ContentBorderColor;
@sapUiGroupBorderWidth: @sapGroup_BorderWidth;
@sapUiGroupFooterBackground: @sapGroup_FooterBackground;

@sapUiToolbarBackground: @sapToolbar_Background;
@sapUiToolbarSeparatorColor: @sapToolbar_SeparatorColor;

@sapUiListHeaderBackground: @sapList_HeaderBackground;
@sapUiListHeaderBorderColor: @sapList_HeaderBorderColor;
@sapUiListHeaderTextColor: @sapList_HeaderTextColor;
@sapUiListBorderColor: @sapList_BorderColor;
@sapUiListBorderWidth: @sapList_BorderWidth;
@sapUiListHighlightColor: @sapList_HighlightColor;
@sapUiListSelectionBackgroundColor: @sapList_SelectionBackgroundColor;
@sapUiListBackground: @sapList_Background;
@sapUiListHoverBackground: @sapList_Hover_Background;

@sapUiScrollBarFaceColor: @sapScrollBar_FaceColor;
@sapUiScrollBarTrackColor: @sapScrollBar_TrackColor;
@sapUiScrollBarBorderColor: @sapScrollBar_BorderColor;
@sapUiScrollBarSymbolColor: @sapScrollBar_SymbolColor;
@sapUiScrollBarDimension: @sapScrollBar_Dimension;
@sapUiScrollBarHoverFaceColor: @sapScrollBar_Hover_FaceColor;

@sapUiPageHeaderBackground: @sapPageHeader_Background;
@sapUiPageHeaderBorderColor: @sapPageHeader_BorderColor;
@sapUiPageHeaderTextColor: @sapPageHeader_TextColor;
@sapUiPageFooterBackground: @sapPageFooter_Background;
@sapUiPageFooterTextColor: @sapPageFooter_TextColor;

@sapUiInfobarBackground: @sapInfobar_Background;

@sapUiObjectHeaderBackground: @sapObjectHeader_Background;

@sapUiBlockLayerBackground: @sapBlockLayer_Background;

@sapUiTileBackground: @sapTile_Background;
@sapUiTileBorderColor: @sapTile_BorderColor;
@sapUiTileTitleTextColor: @sapTile_TitleTextColor;
@sapUiTileTextColor: @sapTile_TextColor;
@sapUiTileIconColor: @sapTile_IconColor;

@sapUiChart1: @sapChart_OrderedColor_1;
@sapUiChart2: @sapChart_OrderedColor_2;
@sapUiChart3: @sapChart_OrderedColor_3;
@sapUiChart4: @sapChart_OrderedColor_4;
@sapUiChart5: @sapChart_OrderedColor_5;
@sapUiChart6: @sapChart_OrderedColor_6;
@sapUiChart7: @sapChart_OrderedColor_7;
@sapUiChart8: @sapChart_OrderedColor_8;
@sapUiChart9: @sapChart_OrderedColor_9;
@sapUiChart10: @sapChart_OrderedColor_10;
@sapUiChart11: @sapChart_OrderedColor_11;

@sapUiChartBad: @sapChart_Bad;
@sapUiChartCritical: @sapChart_Critical;
@sapUiChartGood: @sapChart_Good;
@sapUiChartNeutral: @sapChart_Neutral;

@sapUiChartSequence1: @sapChart_Sequence_1;
@sapUiChartSequence2: @sapChart_Sequence_2;
@sapUiChartSequence3: @sapChart_Sequence_3;
@sapUiChartSequence4: @sapChart_Sequence_4;
@sapUiChartSequence5: @sapChart_Sequence_5;
@sapUiChartSequence6: @sapChart_Sequence_6;
@sapUiChartSequence7: @sapChart_Sequence_7;
@sapUiChartSequence8: @sapChart_Sequence_8;
@sapUiChartSequence9: @sapChart_Sequence_9;
@sapUiChartSequence10: @sapChart_Sequence_10;
@sapUiChartSequence11: @sapChart_Sequence_11;
@sapUiChartSequenceNeutral: @sapChart_Sequence_Neutral;

// ============================================
// UX Reference Set - do not use in Controls!!
// ============================================

@sapUiContentGridSize: @sapContent_GridSize; // 1rem;

// =====================================
// Primary Colors
// =====================================

@sapUiPrimary1: @sapPrimary1;
@sapUiPrimary2: @sapPrimary2;
@sapUiPrimary3: @sapPrimary3;
@sapUiPrimary4: @sapPrimary4;
@sapUiPrimary5: @sapPrimary5;
@sapUiPrimary6: @sapPrimary6;
@sapUiPrimary7: @sapPrimary7;

// =====================================
// Accent Colors
// =====================================

@sapUiAccent1: @sapAccentColor1; // #f0ab00
@sapUiAccent2: @sapAccentColor2; // #f27020
@sapUiAccent3: @sapAccentColor3; // #e52929
@sapUiAccent4: @sapAccentColor4; // #ab218e
@sapUiAccent5: @sapAccentColor5; // #007cc0
@sapUiAccent6: @sapAccentColor6; // #008a3b
@sapUiAccent7: @sapAccentColor7; // #004990
@sapUiAccent8: @sapAccentColor8; // #009de0
@sapUiAccent9: @sapAccentColor9;
@sapUiAccent10: @sapAccentColor10;

// =====================================
// Semantic Colors
// =====================================

// Semantic Background Colors

@sapUiErrorBG: @sapErrorBackground;     // #fbdfdf
@sapUiWarningBG: @sapWarningBackground; // #fffcb5
@sapUiSuccessBG: @sapSuccessBackground; // #e0f1e7
@sapUiInformationBG: @sapInformationBackground;
@sapUiNeutralBG: @sapNeutralBackground; // #e6f2f9

// Semantic Border Colors

@sapUiErrorBorder:  @sapErrorBorderColor;    //  #e52929;
@sapUiWarningBorder: @sapWarningBorderColor; //  #f0ab00;
@sapUiSuccessBorder: @sapSuccessBorderColor; //  #008a3b;
@sapUiInformationBorder: @sapInformationBorderColor;
@sapUiNeutralBorder: @sapNeutralColor;       //  #007cc0;

// Semantic Foreground Elements

@sapUiNegativeElement: @sapNegativeElementColor;  // #bb0000
@sapUiCriticalElement: @sapCriticalElementColor;  // #e78c07
@sapUiPositiveElement: @sapPositiveElementColor;  // #2b7c2b
@sapUiInformativeElement: @sapInformativeElementColor;
@sapUiNeutralElement: @sapNeutralElementColor;    // #5e696e

// Semantic Text

@sapUiNegativeText: @sapNegativeTextColor; // #bb0000
@sapUiCriticalText: @sapCriticalTextColor; // #e78c07
@sapUiPositiveText: @sapPositiveTextColor; // #2b7c2b
@sapUiInformativeText: @sapInformativeTextColor;
@sapUiNeutralText: @sapNeutralTextColor;   // #5e696e

// =======================================================
// Semantic Foreground Colors - do not use in Controls!!
// =======================================================

@sapUiNegative: @sapNegativeColor; // #cc1919, rgb(204, 25, 25)
@sapUiCritical: @sapCriticalColor; // #d14900, rgb(209, 73, 0)
@sapUiPositive: @sapPositiveColor; // #007833, rgb(0, 120, 51)
@sapUiInformative: @sapInformativeColor;
@sapUiNeutral: @sapNeutralColor;   // #007cc0, rgb(0, 124, 192)

// =====================================
// Indication Colors
// =====================================

@sapUiIndication1: @sapIndicationColor_1;
@sapUiIndication2: @sapIndicationColor_2;
@sapUiIndication3: @sapIndicationColor_3;
@sapUiIndication4: @sapIndicationColor_4;
@sapUiIndication5: @sapIndicationColor_5;

// =====================================
// Font
// =====================================

@sapUiFontCondensedFamily: "72 Condensed", 'Arial Narrow', HelveticaNeue-CondensedBold, Arial, sans-serif;

@sapUiFontHeaderFamily: @sapUiFontFamily;

@sapUiFontHeaderWeight: normal;

// use these "sapM"-prefixed parameters for sap.m controls
@sapMFontHeader1Size: 2.25rem;   //  36px
@sapMFontHeader2Size: 1.5rem;    //  24px
@sapMFontHeader3Size: 1.250rem;  //  20px
@sapMFontHeader4Size: 1.125rem;  //  18px
@sapMFontHeader5Size: 1rem;      //  16px
@sapMFontHeader6Size: 0.875rem;  //  14px

@sapMFontSmallSize: 0.75rem;   // 12px
@sapMFontMediumSize: 0.875rem; // 14px
@sapMFontLargeSize: 1rem;      // 16px

@sapUiTranslucentBGOpacity: 0;

@sapMPlatformDependent: false;

// =====================================
// Desktop (sap.ui.commons)
// =====================================

@sapUiDesktopFontFamily: @sapUiFontFamily;

@sapUiDesktopFontSize: 12px;

// use these for desktop controls only
@sapUiFontLargeSize: 13px;
@sapUiFontSmallSize: 11px;
@sapUiFontHeader1Size: 26px;
@sapUiFontHeader2Size: 20px;
@sapUiFontHeader3Size: 18px;
@sapUiFontHeader4Size: 16px;
@sapUiFontHeader5Size: 14px;
@sapUiFontHeader6Size: @sapUiFontLargeSize;

@sapUiLineHeight: 18px;

// ===============================================
// SOME important control-specific parameters...
// Derived from Expert Theming
// (these Parameters should be linked in controls)
// ===============================================

// Derived Chart Colors

@sapUiChartLabelHoverColor: @sapUiButtonHoverBackground;            // #ebebeb
@sapUiChartLabelPressedColor: darken(@sapUiButtonBackground, 17);   // #cccccc
@sapUiChartCategoryAxisLabelFontColor: @sapUiContentForegroundTextColor;    // #333333
@sapUiChartValueAxisLabelFontColor: lighten(@sapUiContentForegroundTextColor, 24);  // #707070
@sapUiChartCategoryAxisLabelFontSize: @sapMFontSmallSize;           // 12px
@sapUiChartValueAxisLabelFontSize: @sapMFontSmallSize;              // 12px
@sapUiChartCategoryAxisLineColor: darken(@sapUiChartGridlineColor, 10);  // #cccccc
@sapUiChartValueAxisLineColor: darken(@sapUiChartGridlineColor, 10);  // #cccccc
@sapUiChartCategoryAxisTickColor: darken(@sapUiChartGridlineColor, 10);  // #cccccc
@sapUiChartValueAxisTickColor: darken(@sapUiChartGridlineColor, 10);   // #cccccc
@sapUiChartBackgroundColor: transparent;
@sapUiChartLabelFontWeight: normal;
@sapUiChartLegendLabelFontColor: @sapUiContentForegroundTextColor;  // #333333
@sapUiChartLegendTitleFontColor: @sapUiGroupTitleTextColor;         // #333333
@sapUiChartLegendTitleFontSize: @sapMFontMediumSize;                // 14px
@sapUiChartLegendLabelFontSize: @sapMFontSmallSize;                 // 12px
@sapUiChartPaletteUndefinedColor: darken(@sapUiBaseText, 20);       // #000000
@sapUiChartGridlineColor: lighten(@sapUiContentForegroundBorderColor, 15);  // #e5e5e5
@sapUiChartReferenceLineColor: darken(@sapUiChartGridlineColor, 70);   // #333333
@sapUiChartDataLabelFontColor: darken(@sapUiBaseText, 20);          // #000000
@sapUiChartReferenceLineLabelColor: @sapUiContentContrastTextColor; // #ffffff
@sapUiChartDataLabelFontSize: @sapMFontSmallSize;                   // 12px
@sapUiChartPopoverDataItemFontColor: darken(@sapUiBaseText, 20);    // #000000
@sapUiChartPopoverGroupFontColor: @sapUiContentForegroundTextColor; // #333333
@sapUiChartPopoverDataItemFontSize: @sapMFontMediumSize;            // 14px
@sapUiChartPopoverGroupFontSize: @sapMFontMediumSize;               // 14px
@sapUiChartPopoverGroupFontWeight: bold;
@sapUiChartScrollBarThumbColor: @sapUiScrollBarFaceColor;           // #b2b2b2
@sapUiChartScrollBarTrackColor: @sapUiScrollBarTrackColor;          // #ffffff
@sapUiChartScrollBarThumbHoverColor: @sapUiScrollBarHoverFaceColor; // #ababab
@sapUiChartMainTitleFontColor: @sapUiGroupTitleTextColor;           // #333333
@sapUiChartAxisTitleFontColor: @sapUiGroupTitleTextColor;           // #333333
@sapUiChartMainTitleFontSize: @sapMFontLargeSize;                   // 16px
@sapUiChartAxisTitleFontSize: @sapMFontSmallSize;                   // 12px
@sapUiChartTitleFontWeight: bold;
@sapUiChartAxisTitleFontWeight: regular;
@sapUiChartLightText: lighten(@sapUiContentForegroundTextColor, 24);  // #707070
@sapUiChartZeroAxisColor: darken(@sapUiChartGridlineColor, 50);     // #666666

@sapUiChartDataPointBorderColor: lighten(@sapUiGroupContentBackground, 2);  // #ffffff
@sapUiChartDataPointBorderHoverSelectedColor: darken(@sapUiChartGridlineColor, 50);  // #666666
@sapUiChartDataPointNotSelectedBackgroundOpacity: 0.6;

@sapUiChartValueAxisLineOpacity: 0;
@sapUiChartCategoryAxisLabelFontHoverColor: @sapUiContentForegroundTextColor;  // #333333
@sapUiChartCategoryAxisLabelFontPressedColor: @sapUiContentForegroundTextColor;  // #333333

@sapUiChartTargetColor: darken(@sapUiChartGridlineColor, 70);       // #333333
@sapUiChartTargetShadowColor: @sapUiContentContrastShadowColor;     // #ffffff
@sapUiChartBubbleBGOpacity: 0.8;

@sapUiChartScrollbarBorderColor: lighten(@sapUiScrollBarBorderColor, 25);  // #f2f2f2
@sapUiChartScrollbarBorderSize: 0;
@sapUiChartScrollbarThumbPadding: 0;

@sapUiChartNegativeLargeText: @sapUiChartBad;  //#dc0d0e
@sapUiChartCriticalLargeText: @sapUiChartCritical;  // #de890d
@sapUiChartPositiveLargeText: @sapUiChartGood;  // #3fa45b
@sapUiChartNeutralLargeText: saturate(darken(@sapUiChartNeutral, 10), 1);  // #69767c

@sapUiChartDataPointBG: saturate(lighten(@sapUiChartNeutral, 30), 1);  // #d5dadc
@sapUiChartDataPointBGBorderColor: saturate(lighten(@sapUiChartNeutral, 30), 1);  // #d5dadc
@sapUiChartDataLineColorWithBG: darken(@sapUiChartGridlineColor, 70);   // #333333
@sapUiChartDataLineColor: darken(@sapUiChartGridlineColor, 70);   // #333333

@sapUiChartRadialRemainingCircle: lighten(@sapUiChartNeutral, 35);  // #e3e6e7
@sapUiChartRadialRemainingCircleBorderColor: lighten(@sapUiChartNeutral, 35);  // #e3e6e7
@sapUiChartRadialBG: lighten(@sapUiGroupContentBackground, 2);  // #ffffff

@sapUiChartLegendHoverBackground: @sapUiListHoverBackground;  // #f0f0f0
@sapUiChartLegendSelectionBackground: @sapUiListSelectionBackgroundColor;  // #e8eff6
@sapUiChartLegendSelectionHoverBackground: @sapUiListSelectionHoverBackground;  // #dde8f1

// qualitative palette

@sapUiChartPaletteQualitativeHue1: @sapUiChart1;
@sapUiChartPaletteQualitativeHue2: @sapUiChart2;
@sapUiChartPaletteQualitativeHue3: @sapUiChart3;
@sapUiChartPaletteQualitativeHue4: @sapUiChart4;
@sapUiChartPaletteQualitativeHue5: @sapUiChart5;
@sapUiChartPaletteQualitativeHue6: @sapUiChart6;
@sapUiChartPaletteQualitativeHue7: @sapUiChart7;
@sapUiChartPaletteQualitativeHue8: @sapUiChart8;
@sapUiChartPaletteQualitativeHue9: @sapUiChart9;
@sapUiChartPaletteQualitativeHue10: @sapUiChart10;
@sapUiChartPaletteQualitativeHue11: @sapUiChart11;
@sapUiChartPaletteQualitativeHue12: darken(saturate(@sapUiChartSequence1, 13), 20);
@sapUiChartPaletteQualitativeHue13: darken(saturate(@sapUiChartSequence2, 21), 17);
@sapUiChartPaletteQualitativeHue14: darken(saturate(@sapUiChartSequence3, 21), 15);
@sapUiChartPaletteQualitativeHue15: darken(saturate(@sapUiChartSequence4, 10), 17);
@sapUiChartPaletteQualitativeHue16: darken(saturate(@sapUiChartSequence5, 12), 11);
@sapUiChartPaletteQualitativeHue17: darken(saturate(@sapUiChartSequence6, 8), 12);
@sapUiChartPaletteQualitativeHue18: darken(desaturate(@sapUiChartSequence7, 18), 15);
@sapUiChartPaletteQualitativeHue19: darken(saturate(@sapUiChartSequence8, 22), 16);
@sapUiChartPaletteQualitativeHue20: darken(saturate(@sapUiChartSequence9, 16), 16);
@sapUiChartPaletteQualitativeHue21: darken(desaturate(@sapUiChartSequence10, 13), 16);
@sapUiChartPaletteQualitativeHue22: darken(saturate(@sapUiChartSequence11, 20), 10);

// semantic palette

@sapUiChartPaletteSemanticBadLight3: lighten(@sapUiChartBad, 32);
@sapUiChartPaletteSemanticBadLight2: lighten(@sapUiChartBad, 22);
@sapUiChartPaletteSemanticBadLight1: lighten(@sapUiChartBad, 12);
@sapUiChartPaletteSemanticBad: @sapUiChartBad;
@sapUiChartPaletteSemanticBadDark1: darken(desaturate(@sapUiChartBad, 1), 7);
@sapUiChartPaletteSemanticBadDark2: darken(desaturate(@sapUiChartBad, 1), 15);

@sapUiChartPaletteSemanticCriticalLight3: lighten(@sapUiChartCritical, 30);
@sapUiChartPaletteSemanticCriticalLight2: lighten(@sapUiChartCritical, 17);
@sapUiChartPaletteSemanticCriticalLight1: lighten(@sapUiChartCritical, 7);
@sapUiChartPaletteSemanticCritical: @sapUiChartCritical;
@sapUiChartPaletteSemanticCriticalDark1: darken(@sapUiChartCritical, 5);
@sapUiChartPaletteSemanticCriticalDark2: darken(@sapUiChartCritical, 12);

@sapUiChartPaletteSemanticGoodLight3: lighten(@sapUiChartGood, 30);
@sapUiChartPaletteSemanticGoodLight2: lighten(@sapUiChartGood, 17);
@sapUiChartPaletteSemanticGoodLight1: lighten(@sapUiChartGood, 7);
@sapUiChartPaletteSemanticGood: @sapUiChartGood;
@sapUiChartPaletteSemanticGoodDark1: darken(@sapUiChartGood, 7);
@sapUiChartPaletteSemanticGoodDark2: darken(@sapUiChartGood, 15);

@sapUiChartPaletteSemanticNeutralLight3: saturate(lighten(@sapUiChartNeutral, 30), 1);
@sapUiChartPaletteSemanticNeutralLight2: saturate(lighten(@sapUiChartNeutral, 20), 1);
@sapUiChartPaletteSemanticNeutralLight1: saturate(lighten(@sapUiChartNeutral, 10), 1);
@sapUiChartPaletteSemanticNeutral: @sapUiChartNeutral;
@sapUiChartPaletteSemanticNeutralDark1: saturate(darken(@sapUiChartNeutral, 10), 1);
@sapUiChartPaletteSemanticNeutralDark2: saturate(darken(@sapUiChartNeutral, 17), 1);

// sequential palette

@sapUiChartPaletteSequentialHue1Light3: lighten(saturate(@sapUiChartSequence1, 13), 23);
@sapUiChartPaletteSequentialHue1Light2: lighten(saturate(@sapUiChartSequence1, 5), 15);
@sapUiChartPaletteSequentialHue1Light1: lighten(saturate(@sapUiChartSequence1, 2), 7);
@sapUiChartPaletteSequentialHue1: @sapUiChartSequence1;
@sapUiChartPaletteSequentialHue1Dark1: darken(desaturate(@sapUiChartSequence1, 7), 11);
@sapUiChartPaletteSequentialHue1Dark2: darken(saturate(@sapUiChartSequence1, 13), 20);

@sapUiChartPaletteSequentialHue2Light3: lighten(saturate(@sapUiChartSequence2, 21), 20);
@sapUiChartPaletteSequentialHue2Light2: lighten(@sapUiChartSequence2, 21);
@sapUiChartPaletteSequentialHue2Light1: lighten(saturate(@sapUiChartSequence2, 5), 7);
@sapUiChartPaletteSequentialHue2: @sapUiChartSequence2;
@sapUiChartPaletteSequentialHue2Dark1: darken(desaturate(@sapUiChartSequence2, 1), 9);
@sapUiChartPaletteSequentialHue2Dark2: darken(saturate(@sapUiChartSequence2, 21), 17);

@sapUiChartPaletteSequentialHue3Light3: lighten(desaturate(@sapUiChartSequence3, 32), 31);
@sapUiChartPaletteSequentialHue3Light2: lighten(desaturate(@sapUiChartSequence3, 31), 20);
@sapUiChartPaletteSequentialHue3Light1: lighten(desaturate(@sapUiChartSequence3, 26), 10);
@sapUiChartPaletteSequentialHue3: @sapUiChartSequence3;
@sapUiChartPaletteSequentialHue3Dark1: darken(saturate(@sapUiChartSequence3, 8), 8);
@sapUiChartPaletteSequentialHue3Dark2: darken(saturate(@sapUiChartSequence3, 21), 15);

@sapUiChartPaletteSequentialHue4Light3: lighten(saturate(@sapUiChartSequence4, 1), 23);
@sapUiChartPaletteSequentialHue4Light2: lighten(@sapUiChartSequence4, 15);
@sapUiChartPaletteSequentialHue4Light1: lighten(@sapUiChartSequence4, 7);
@sapUiChartPaletteSequentialHue4: @sapUiChartSequence4;
@sapUiChartPaletteSequentialHue4Dark1: darken(desaturate(@sapUiChartSequence4, 5), 8);
@sapUiChartPaletteSequentialHue4Dark2: darken(saturate(@sapUiChartSequence4, 10), 17);

@sapUiChartPaletteSequentialHue5Light3: lighten(desaturate(@sapUiChartSequence5, 1), 24);
@sapUiChartPaletteSequentialHue5Light2: lighten(@sapUiChartSequence5, 16);
@sapUiChartPaletteSequentialHue5Light1: lighten(@sapUiChartSequence5, 8);
@sapUiChartPaletteSequentialHue5: @sapUiChartSequence5;
@sapUiChartPaletteSequentialHue5Dark1: darken(saturate(@sapUiChartSequence5, 4), 5);
@sapUiChartPaletteSequentialHue5Dark2: darken(saturate(@sapUiChartSequence5, 12), 11);

@sapUiChartPaletteSequentialHue6Light3: lighten(desaturate(@sapUiChartSequence6, 26), 29);
@sapUiChartPaletteSequentialHue6Light2: lighten(desaturate(@sapUiChartSequence6, 27), 19);
@sapUiChartPaletteSequentialHue6Light1: lighten(desaturate(@sapUiChartSequence6, 26), 10);
@sapUiChartPaletteSequentialHue6: @sapUiChartSequence6;
@sapUiChartPaletteSequentialHue6Dark1: darken(saturate(@sapUiChartSequence6, 4), 6);
@sapUiChartPaletteSequentialHue6Dark2: darken(saturate(@sapUiChartSequence6, 8), 12);

@sapUiChartPaletteSequentialHue7Light3: lighten(saturate(@sapUiChartSequence7, 1), 15);
@sapUiChartPaletteSequentialHue7Light2: lighten(@sapUiChartSequence7, 10);
@sapUiChartPaletteSequentialHue7Light1: lighten(saturate(@sapUiChartSequence7, 1), 5);
@sapUiChartPaletteSequentialHue7: @sapUiChartSequence7;
@sapUiChartPaletteSequentialHue7Dark1: darken(desaturate(@sapUiChartSequence7, 12), 8);
@sapUiChartPaletteSequentialHue7Dark2: darken(desaturate(@sapUiChartSequence7, 18), 15);

@sapUiChartPaletteSequentialHue8Light3: lighten(saturate(@sapUiChartSequence8, 6), 26);
@sapUiChartPaletteSequentialHue8Light2: lighten(saturate(@sapUiChartSequence8, 2), 17);
@sapUiChartPaletteSequentialHue8Light1: lighten(@sapUiChartSequence8, 9);
@sapUiChartPaletteSequentialHue8: @sapUiChartSequence8;
@sapUiChartPaletteSequentialHue8Dark1: darken(saturate(@sapUiChartSequence8, 9), 8);
@sapUiChartPaletteSequentialHue8Dark2: darken(saturate(@sapUiChartSequence8, 22), 16);

@sapUiChartPaletteSequentialHue9Light3: lighten(desaturate(@sapUiChartSequence9, 2), 34);
@sapUiChartPaletteSequentialHue9Light2: lighten(@sapUiChartSequence9, 22);
@sapUiChartPaletteSequentialHue9Light1: lighten(@sapUiChartSequence9, 11);
@sapUiChartPaletteSequentialHue9: @sapUiChartSequence9;
@sapUiChartPaletteSequentialHue9Dark1: darken(saturate(@sapUiChartSequence9, 6), 8);
@sapUiChartPaletteSequentialHue9Dark2: darken(saturate(@sapUiChartSequence9, 16), 16);

@sapUiChartPaletteSequentialHue10Light3: lighten(saturate(@sapUiChartSequence10, 9), 22);
@sapUiChartPaletteSequentialHue10Light2: lighten(saturate(@sapUiChartSequence10, 5), 14);
@sapUiChartPaletteSequentialHue10Light1: lighten(saturate(@sapUiChartSequence10, 2), 7);
@sapUiChartPaletteSequentialHue10: @sapUiChartSequence10;
@sapUiChartPaletteSequentialHue10Dark1: darken(desaturate(@sapUiChartSequence10, 8), 8);
@sapUiChartPaletteSequentialHue10Dark2: darken(desaturate(@sapUiChartSequence10, 13), 16);

@sapUiChartPaletteSequentialHue11Light3: lighten(desaturate(@sapUiChartSequence11, 24), 24);
@sapUiChartPaletteSequentialHue11Light2: lighten(desaturate(@sapUiChartSequence11, 22), 16);
@sapUiChartPaletteSequentialHue11Light1: lighten(desaturate(@sapUiChartSequence11, 17), 8);
@sapUiChartPaletteSequentialHue11: @sapUiChartSequence11;
@sapUiChartPaletteSequentialHue11Dark1: darken(saturate(@sapUiChartSequence11, 7), 4);
@sapUiChartPaletteSequentialHue11Dark2: darken(saturate(@sapUiChartSequence11, 20), 10);

@sapUiChartPaletteSequentialNeutralLight3: saturate(lighten(@sapUiChartSequenceNeutral, 30), 1);
@sapUiChartPaletteSequentialNeutralLight2: saturate(lighten(@sapUiChartSequenceNeutral, 20), 1);
@sapUiChartPaletteSequentialNeutralLight1: saturate(lighten(@sapUiChartSequenceNeutral, 10), 1);
@sapUiChartPaletteSequentialNeutral: @sapUiChartSequenceNeutral;
@sapUiChartPaletteSequentialNeutralDark1: saturate(darken(@sapUiChartSequenceNeutral, 10), 1);
@sapUiChartPaletteSequentialNeutralDark2: saturate(darken(@sapUiChartSequenceNeutral, 17), 1);

@sapUiChartPaletteNoSemDiv1Light3: #f3dec9;
@sapUiChartPaletteNoSemDiv1Light2: #e3cbb3;
@sapUiChartPaletteNoSemDiv1Light1: #c8ab8e;
@sapUiChartPaletteNoSemDiv1: #b08e6d;
@sapUiChartPaletteNoSemDiv1Dark1: #8e6c4b;
@sapUiChartPaletteNoSemDiv1Dark2: #754f2a;

@sapUiChartPaletteMidArea: desaturate(lighten(@sapUiChartSequenceNeutral, 40), 7);

@sapUiChoroplethBG: lighten(@sapUiChartSequenceNeutral, 42);
@sapUiChoroplethRegionBorder: lighten(@sapUiChartGridlineColor, 10);
@sapUiChoroplethRegionBG: @sapUiChartPaletteSemanticNeutralLight2;
@sapUiMapLegendBG: lighten(@sapUiGroupContentBackground, 2);
@sapUiMapLegendBorderColor: darken(@sapUiChartGridlineColor, 10);

// Shell
@sapUiShellHoverBackground: darken(desaturate(@sapShellColor, 7), 5);
@sapUiShellActiveBackground: darken(desaturate(@sapShellColor, 7), 8);
@sapUiShellActiveTextColor: contrast(@sapUiShellActiveBackground, @sapUiBaseText, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiShellHoverToggleBackground: darken(desaturate(@sapShellColor, 7), 8);
@sapUiShellContainerBackground: @sapUiGroupContentBackground;
@sapUiShellAltContainerBackground: @sapUiShellContainerBackground;
@sapUiShellGroupTextColor: @sapUiTextTitle;

@sapUiUx3ShellHeaderColor: @sapShellColor;			// "Quick"
@sapUiUx3ShellBackgroundColor: @sapUiPrimary3;
@sapUiUx3ShellHoverColor: lighten(@sapUiPrimary7, 27);
@sapUiUx3ShellGradientBottom: lighten(@sapUiUx3ShellHeaderColor, 17.3);			// transparent
@sapUiUx3ShellGradientTop: spin(mix(@sapUiHighlight, lighten(@sapUiUx3ShellGradientBottom, 22), 3), 9);			// transparent

// Approved by UX to use a hard coded color value for this
@sapUiUx3ShellToolPaletteIconFontColor: lighten(@sapUiPrimary1, 30);

// Exact
@sapUiUx3ExactLstExpandOffset: -1 -2;
@sapUiUx3ExactLstRootExpandOffset: 0 3;
@sapUiUx3ExactLstContentTop: 25px;

// Link
@sapUiLinkActive:     @sapUiLink;
@sapUiLinkVisited:    @sapUiLink;
@sapUiLinkHover:      darken(@sapUiLink, 10);
@sapUiLinkInverted:   lighten(@sapUiLink, 40);

// Notification Bar
@sapUiNotificationBarBG: fade(@sapUiPrimary7, 98);
@sapUiNotifierSeparator: darken(@sapUiPrimary7, 20);
@sapUiNotifierSeparatorWidth: ~"1px";
@sapUiNotificationBarBorder: lighten(@sapUiPrimary7, 20);

// ToolPopup
@sapUiUx3ToolPopupInverted: ~"false"; // Telling the ToolPopup if it's inverted per default
@sapUiUx3ToolPopupArrowRightMarginCorrection: -1px;
@sapUiUx3ToolPopupShadow: 0px 6px 12px 0px fade(@sapUiContentShadowColor, 30);

// Callout
@sapUiCalloutShadow: 0px 6px 12px 0px fade(@sapUiContentShadowColor, 30);

@sapUiButtonIconColor: contrast(@sapUiButtonBackground, @sapUiContentIconColor, @sapUiContentContrastIconColor, @sapUiContentContrastTextThreshold);
@sapUiButtonActiveBackground: @sapUiActive;
@sapUiButtonActiveBorderColor: @sapUiButtonActiveBackground;
@sapUiButtonActiveTextColor: contrast(@sapUiButtonActiveBackground, @sapUiButtonTextColor, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiButtonEmphasizedHoverBackground: darken(@sapUiButtonEmphasizedBackground, 7);
@sapUiButtonEmphasizedHoverBorderColor: @sapUiButtonEmphasizedHoverBackground;
@sapUiButtonEmphasizedActiveBackground: darken(@sapUiButtonEmphasizedBackground, 10);
@sapUiButtonEmphasizedActiveBorderColor: @sapUiButtonEmphasizedActiveBackground;
@sapUiButtonEmphasizedTextShadow: transparent;
@sapUiButtonAcceptBorderColor: @sapUiPositiveElement;
@sapUiButtonAcceptHoverBackground: darken(@sapUiButtonAcceptBackground, 2);
@sapUiButtonAcceptHoverBorderColor: @sapUiButtonAcceptBorderColor;
@sapUiButtonAcceptActiveBackground: darken(@sapUiPositiveElement, 5);
@sapUiButtonAcceptActiveBorderColor: @sapUiButtonAcceptActiveBackground;
@sapUiButtonAcceptTextColor: contrast(@sapUiButtonAcceptBackground, @sapUiPositiveText, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiButtonRejectBorderColor: @sapUiNegativeElement;
@sapUiButtonRejectHoverBackground: darken(@sapUiButtonRejectBackground, 2);
@sapUiButtonRejectHoverBorderColor: @sapUiButtonRejectBorderColor;
@sapUiButtonRejectActiveBackground: darken(@sapUiNegativeElement, 5);
@sapUiButtonRejectActiveBorderColor: @sapUiButtonRejectActiveBackground;
@sapUiButtonRejectTextColor: contrast(@sapUiButtonRejectBackground, @sapUiNegativeText, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiButtonLiteBackground: transparent;
@sapUiButtonLiteBorderColor: transparent;
@sapUiButtonLiteTextColor: @sapUiButtonTextColor;
@sapUiButtonLiteHoverBackground: fade(darken(@sapUiButtonHoverBackground, 10), 50);
@sapUiButtonLiteHoverBorderColor: @sapUiButtonLiteHoverBackground;
@sapUiButtonLiteActiveBackground: @sapUiButtonActiveBackground;
@sapUiButtonLiteActiveBorderColor: @sapUiButtonLiteActiveBackground;
@sapUiButtonHeaderTextColor: @sapUiButtonTextColor;
@sapUiButtonHeaderDisabledTextColor: @sapUiButtonHeaderTextColor;
@sapUiButtonFooterTextColor: contrast(@sapUiPageFooterBackground, @sapUiButtonTextColor, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiButtonFooterHoverBackground: @sapUiButtonLiteHoverBackground;
@sapUiButtonActionSelectBackground: @sapUiListBackground;
@sapUiButtonActionSelectBorderColor: @sapUiListBorderColor;
@sapUiButtonLiteActionSelectHoverBackground: @sapUiListHoverBackground;
@sapUiToggleButtonPressedBackground: darken(@sapUiSelected, 10);
@sapUiToggleButtonPressedBorderColor: @sapUiToggleButtonPressedBackground;
@sapUiToggleButtonPressedTextColor: contrast(@sapUiToggleButtonPressedBackground, @sapUiButtonTextColor, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiToggleButtonPressedHoverBackground: lighten(@sapUiToggleButtonPressedBackground, 3);
@sapUiToggleButtonPressedHoverBorderColor: @sapUiToggleButtonPressedHoverBackground;
@sapUiSegmentedButtonBackground: @sapUiButtonBackground;
@sapUiSegmentedButtonBorderColor: @sapUiButtonBorderColor;
@sapUiSegmentedButtonTextColor: contrast(@sapUiSegmentedButtonBackground, @sapUiButtonTextColor, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiSegmentedButtonHoverBackground: @sapUiButtonHoverBackground;
@sapUiSegmentedButtonActiveBackground: @sapUiButtonActiveBackground;
@sapUiSegmentedButtonActiveTextColor: contrast(@sapUiSegmentedButtonActiveBackground, @sapUiSegmentedButtonTextColor, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiSegmentedButtonSelectedBackground: @sapUiToggleButtonPressedBackground;
@sapUiSegmentedButtonSelectedTextColor: @sapUiToggleButtonPressedTextColor;
@sapUiSegmentedButtonSelectedHoverBackground: @sapUiToggleButtonPressedHoverBackground;
@sapUiSegmentedButtonSelectedHoverBorderColor: @sapUiToggleButtonPressedHoverBorderColor;
@sapUiSegmentedButtonIconColor: contrast(@sapUiSegmentedButtonBackground, @sapUiContentIconColor, @sapUiContentContrastIconColor, @sapUiContentContrastTextThreshold);
@sapUiSegmentedButtonActiveIconColor: contrast(@sapUiSegmentedButtonActiveBackground, @sapUiContentIconColor, @sapUiContentContrastIconColor, @sapUiContentContrastTextThreshold);
@sapUiSegmentedButtonSelectedIconColor: contrast(@sapUiSegmentedButtonSelectedBackground, @sapUiContentIconColor, @sapUiContentContrastIconColor, @sapUiContentContrastTextThreshold);
@sapUiSegmentedButtonFooterBorderColor: @sapUiSegmentedButtonBorderColor;
@sapUiSegmentedButtonFooterHoverBackground: @sapUiSegmentedButtonHoverBackground;

@sapUiFieldActiveBackground: @sapUiActive;
@sapUiFieldActiveBorderColor: @sapUiActive;
@sapUiFieldActiveTextColor: @sapUiContentContrastTextColor;
@sapUiFieldPlaceholderTextColor: lighten(@sapUiContentLabelColor, 4);

@sapUiListTextColor: @sapUiBaseText;
@sapUiListVerticalBorderColor: @sapUiListBorderColor;
@sapUiListActiveBackground: @sapUiListHighlightColor;
@sapUiListActiveTextColor: contrast(@sapUiListActiveBackground, @sapUiListTextColor, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiListSelectionHoverBackground: contrast(@sapUiListSelectionBackgroundColor, darken(@sapUiListSelectionBackgroundColor, 3), lighten(@sapUiListSelectionBackgroundColor, 3));
@sapUiListFooterBackground: darken(@sapUiListBackground, 2);
@sapUiListFooterTextColor: @sapUiListTextColor;
@sapUiListGroupHeaderBackground: @sapUiListBackground;
@sapUiListTableGroupHeaderBackground: darken(@sapUiListBackground, 3);
@sapUiListTableGroupHeaderBorderColor: darken(@sapUiListBorderColor, 8);
@sapUiListTableGroupHeaderTextColor: contrast(@sapUiListTableGroupHeaderBackground, @sapUiListTextColor, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiListTableFooterBorder: @sapUiListBorderColor;
@sapUiListTableFixedBorder: darken(@sapUiListBorderColor, 8);
@sapUiListTableTextSize: 0.875rem;
@sapUiListTableIconSize: 1rem;

@sapUiPageFooterBorderColor: contrast(@sapUiPageFooterBackground, darken(@sapUiPageFooterBackground, 15), lighten(@sapUiPageFooterBackground, 12), @sapUiContentContrastTextThreshold);

@sapUiInfobarHoverBackground: darken(@sapUiInfobarBackground, 3);
@sapUiInfobarActiveBackground: @sapUiListActiveBackground;

@sapUiObjectHeaderBorderColor: darken(@sapUiObjectHeaderBackground, 15);

@sapUiCalendarColorToday: @sapUiAccent4;

@sapUiDragAndDropColor: @sapUiContentNonInteractiveIconColor;
@sapUiDragAndDropBackground: @sapUiGroupContentBackground;
@sapUiDragAndDropBorderColor: @sapUiContentForegroundBorderColor;
@sapUiDragAndDropActiveColor: @sapUiLink;
@sapUiDragAndDropActiveBackground: fade(@sapUiLink, 5);
@sapUiDragAndDropActiveBorderColor: @sapUiLink;

@sapUiShadowLevel0: 0 0 0 1px fade(@sapUiContentShadowColor, 15);
@sapUiShadowLevel1: 0 0.125rem 0.5rem 0 fade(@sapUiContentShadowColor, 15), @sapUiShadowLevel0;
@sapUiShadowLevel2: 0 0.625rem 1.875rem 0 fade(@sapUiContentShadowColor, 15), @sapUiShadowLevel0;
@sapUiShadowLevel3: 0 1.25rem 5rem 0 fade(@sapUiContentShadowColor, 15), @sapUiShadowLevel0;
@sapUiShadowText: 0 0 0.125rem @sapUiContentContrastShadowColor;
@sapUiShadowHeader: 0 1px 0.5rem 0 fade(@sapUiContentShadowColor, 5), inset 0 -1px 0 0 @sapUiObjectHeaderBorderColor;

//images for shell
@sapUiUx3ShellHeaderImageURL: ~"";

@sapUiUx3ShellApplicationImageURL: @sapUiGlobalLogo;			// "Quick"

// ==================================
// Global CSS for 'sap_fiori_3' theme
// ==================================

// =====================================
// Semantic Theming Mapping
// =====================================

// ==========================================================
// Quick Theming (these Parameters can be linked in controls)
// ==========================================================

@sapUiBrand: @sapBrandColor;                            // #427cac
@sapUiHighlight: @sapHighlightColor;                    // #427cac
@sapUiBaseColor: @sapBaseColor;
@sapUiShellColor: @sapShellColor;						// transparent
@sapUiBaseBG: @sapBackgroundColor;						// #fafafa
@sapUiGlobalBackgroundColor: @sapBackgroundColor;

@sapUiFontFamily: @sapFontFamily;
@sapUiFontSize: 16px; // @sapFontSize;

@sapUiBaseText: @sapTextColor;							// #333333
@sapUiLink: @sapLinkColor;								// #0070b1

@sapUiGlobalLogo: @sapCompanyLogo;
@sapUiGlobalBackgroundImage: @sapBackgroundImage;
@sapUiBackgroundImage: @sapBackgroundImage;
@sapUiUx3ShellBackgroundImageURL: @sapBackgroundImage;

@sapUiGlobalBackgroundImageOpacity: @sapBackgroundImageOpacity;
@sapUiGlobalBackgroundRepeat: @sapBackgroundImageRepeat;

// ==============================================================
// Expert Theming (these Parameters should be linked in controls)
// ==============================================================

@sapUiSelected: @sapSelectedColor;
@sapUiActive: @sapActiveColor;
@sapUiHighlightTextColor: @sapHighlightTextColor;
@sapUiTextTitle: @sapTitleColor;			// was "Quick" default #333333

@sapUiElementLineHeight: @sapElement_LineHeight;
@sapUiElementHeight: @sapElement_Height;
@sapUiElementBorderWidth: @sapElement_BorderWidth;

@sapUiContentLineHeight: @sapContent_LineHeight; // 1.3;
@sapUiContentElementHeight: @sapContent_ElementHeight; // 1.37em;
@sapUiContentElementHeightPX: @sapContent_ElementHeight_PX; // 22px;
@sapUiContentIconHeight: @sapContent_IconHeight; // 16px;
@sapUiContentIconColor: @sapContent_IconColor;
@sapUiContentContrastIconColor: @sapContent_ContrastIconColor;
@sapUiContentNonInteractiveIconColor: @sapContent_NonInteractiveIconColor;
@sapUiContentMarkerIconColor: @sapContent_MarkerIconColor;
@sapUiContentMarkerTextColor: @sapContent_MarkerTextColor;
@sapUiContentImagePlaceholderBackground: @sapContent_ImagePlaceholderBackground;
@sapUiContentImagePlaceholderForegroundColor: @sapContent_ImagePlaceholderForegroundColor;
@sapUiContentFocusColor: @sapContent_FocusColor;
@sapUiContentContrastFocusColor: @sapContent_ContrastFocusColor;
@sapUiContentShadowColor: @sapContent_ShadowColor;
@sapUiContentContrastShadowColor: @sapContent_ContrastShadowColor;
@sapUiContentSearchHighlightColor: @sapContent_SearchHighlightColor;
@sapUiContentHelpColor: @sapContent_HelpColor;
@sapUiContentLabelColor: @sapContent_LabelColor;
@sapUiContentDisabledTextColor: @sapContent_DisabledTextColor;
@sapUiContentDisabledOpacity: @sapContent_DisabledOpacity;
@sapUiContentContrastTextThreshold: @sapContent_ContrastTextThreshold;
@sapUiContentContrastTextColor: @sapContent_ContrastTextColor;
@sapUiContentForegroundColor: @sapContent_ForegroundColor;
@sapUiContentForegroundBorderColor: @sapContent_ForegroundBorderColor;
@sapUiContentForegroundTextColor: @sapContent_ForegroundTextColor;
@sapUiContentBadgeBackground: @sapContent_BadgeBackground;

@sapUiShellBackground: @sapShell_Background;
@sapUiShellBackgroundImage: @sapShell_BackgroundImage;
@sapUiShellBackgroundImageOpacity: @sapShell_BackgroundImageOpacity;
@sapUiShellBackgroundImageRepeat: @sapShell_BackgroundImageRepeat;
@sapUiShellBackgroundPatternColor: @sapShell_BackgroundPatternColor;
@sapUiShellBackgroundGradient: @sapShell_BackgroundGradient;
@sapUiShellBorderColor: @sapShell_BorderColor;
@sapUiShellTextColor: @sapShell_TextColor;
@sapUiShellInteractiveTextColor: @sapShell_InteractiveTextColor;
@sapUiShellFavicon: @sapShell_Favicon;

@sapUiButtonBorderWidth: @sapButton_BorderWidth;
@sapUiButtonBorderCornerRadius: @sapButton_BorderCornerRadius; // 2px;
@sapUiButtonBackground: @sapButton_Background;
@sapUiButtonBorderColor: @sapButton_BorderColor;
@sapUiButtonTextColor: @sapButton_TextColor;
@sapUiButtonHoverBackground: @sapButton_Hover_Background;
@sapUiButtonHoverBorderColor: @sapButton_Hover_BorderColor;
@sapUiButtonHoverTextColor: @sapButton_Hover_TextColor;
@sapUiButtonEmphasizedBackground: @sapButton_Emphasized_Background;
@sapUiButtonEmphasizedBorderColor: @sapButton_Emphasized_BorderColor;
@sapUiButtonEmphasizedTextColor: @sapButton_Emphasized_TextColor;
@sapUiButtonRejectBackground: @sapButton_Reject_Background;
@sapUiButtonAcceptBackground: @sapButton_Accept_Background;

@sapUiFieldBorderWidth: @sapField_BorderWidth;
@sapUiFieldBorderCornerRadius: @sapField_BorderCornerRadius;
@sapUiFieldBackground: @sapField_Background;
@sapUiFieldBorderColor: @sapField_BorderColor;
@sapUiFieldTextColor: @sapField_TextColor;
@sapUiFieldHelpBackground: @sapField_HelpBackground;
@sapUiFieldHoverBackground: @sapField_Hover_Background;
@sapUiFieldHoverBorderColor: @sapField_Hover_BorderColor;
@sapUiFieldHoverHelpBackground: @sapField_Hover_HelpBackground;
@sapUiFieldFocusBackground: @sapField_Focus_Background;
@sapUiFieldFocusBorderColor: @sapField_Focus_BorderColor;
@sapUiFieldFocusHelpBackground: @sapField_Focus_HelpBackground;
@sapUiFieldReadOnlyBackground: @sapField_ReadOnly_Background;
@sapUiFieldReadOnlyBorderColor: @sapField_ReadOnly_BorderColor;
@sapUiFieldReadOnlyHelpBackground: @sapField_ReadOnly_HelpBackground;
@sapUiFieldRequiredColor: @sapField_RequiredColor;
@sapUiFieldInvalidColor: @sapField_InvalidColor;
@sapUiFieldInvalidBackground: @sapField_InvalidBackground;
@sapUiFieldWarningColor: @sapField_WarningColor;
@sapUiFieldWarningBackground: @sapField_WarningBackground;
@sapUiFieldSuccessColor: @sapField_SuccessColor;
@sapUiFieldSuccessBackground: @sapField_SuccessBackground;

@sapUiGroupTitleBackground: @sapGroup_TitleBackground;
@sapUiGroupTitleBorderColor: @sapGroup_TitleBorderColor;
@sapUiGroupTitleTextColor: @sapGroup_TitleTextColor;
@sapUiGroupContentBackground: @sapGroup_ContentBackground;
@sapUiGroupContentBorderColor: @sapGroup_ContentBorderColor;
@sapUiGroupBorderWidth: @sapGroup_BorderWidth;
@sapUiGroupFooterBackground: @sapGroup_FooterBackground;

@sapUiToolbarBackground: @sapToolbar_Background;
@sapUiToolbarSeparatorColor: @sapToolbar_SeparatorColor;

@sapUiListHeaderBackground: @sapList_HeaderBackground;
@sapUiListHeaderBorderColor: @sapList_HeaderBorderColor;
@sapUiListHeaderTextColor: @sapList_HeaderTextColor;
@sapUiListBorderColor: @sapList_BorderColor;
@sapUiListBorderWidth: @sapList_BorderWidth;
@sapUiListHighlightColor: @sapList_HighlightColor;
@sapUiListSelectionBackgroundColor: @sapList_SelectionBackgroundColor;
@sapUiListBackground: @sapList_Background;
@sapUiListHoverBackground: @sapList_Hover_Background;

@sapUiScrollBarFaceColor: @sapScrollBar_FaceColor;
@sapUiScrollBarTrackColor: @sapScrollBar_TrackColor;
@sapUiScrollBarBorderColor: @sapScrollBar_BorderColor;
@sapUiScrollBarSymbolColor: @sapScrollBar_SymbolColor;
@sapUiScrollBarDimension: @sapScrollBar_Dimension;
@sapUiScrollBarHoverFaceColor: @sapScrollBar_Hover_FaceColor;

@sapUiPageHeaderBackground: @sapPageHeader_Background;
@sapUiPageHeaderBorderColor: @sapPageHeader_BorderColor;
@sapUiPageHeaderTextColor: @sapPageHeader_TextColor;
@sapUiPageFooterBackground: @sapPageFooter_Background;
@sapUiPageFooterTextColor: @sapPageFooter_TextColor;

@sapUiInfobarBackground: @sapInfobar_Background;

@sapUiObjectHeaderBackground: @sapObjectHeader_Background;

@sapUiBlockLayerBackground: @sapBlockLayer_Background;

@sapUiTileBackground: @sapTile_Background;
@sapUiTileBorderColor: @sapTile_BorderColor;
@sapUiTileTitleTextColor: @sapTile_TitleTextColor;
@sapUiTileTextColor: @sapTile_TextColor;
@sapUiTileIconColor: @sapTile_IconColor;

@sapUiChart1: @sapChart_OrderedColor_1;
@sapUiChart2: @sapChart_OrderedColor_2;
@sapUiChart3: @sapChart_OrderedColor_3;
@sapUiChart4: @sapChart_OrderedColor_4;
@sapUiChart5: @sapChart_OrderedColor_5;
@sapUiChart6: @sapChart_OrderedColor_6;
@sapUiChart7: @sapChart_OrderedColor_7;
@sapUiChart8: @sapChart_OrderedColor_8;
@sapUiChart9: @sapChart_OrderedColor_9;
@sapUiChart10: @sapChart_OrderedColor_10;
@sapUiChart11: @sapChart_OrderedColor_11;

@sapUiChartBad: @sapChart_Bad;
@sapUiChartCritical: @sapChart_Critical;
@sapUiChartGood: @sapChart_Good;
@sapUiChartNeutral: @sapChart_Neutral;

@sapUiChartSequence1: @sapChart_Sequence_1;
@sapUiChartSequence2: @sapChart_Sequence_2;
@sapUiChartSequence3: @sapChart_Sequence_3;
@sapUiChartSequence4: @sapChart_Sequence_4;
@sapUiChartSequence5: @sapChart_Sequence_5;
@sapUiChartSequence6: @sapChart_Sequence_6;
@sapUiChartSequence7: @sapChart_Sequence_7;
@sapUiChartSequence8: @sapChart_Sequence_8;
@sapUiChartSequence9: @sapChart_Sequence_9;
@sapUiChartSequence10: @sapChart_Sequence_10;
@sapUiChartSequence11: @sapChart_Sequence_11;
@sapUiChartSequenceNeutral: @sapChart_Sequence_Neutral;

// ============================================
// UX Reference Set - do not use in Controls!!
// ============================================

@sapUiContentGridSize: @sapContent_GridSize; // 1rem;

// =====================================
// Primary Colors
// =====================================

@sapUiPrimary1: @sapPrimary1;
@sapUiPrimary2: @sapPrimary2;
@sapUiPrimary3: @sapPrimary3;
@sapUiPrimary4: @sapPrimary4;
@sapUiPrimary5: @sapPrimary5;
@sapUiPrimary6: @sapPrimary6;
@sapUiPrimary7: @sapPrimary7;

// =====================================
// Accent Colors
// =====================================

@sapUiAccent1: @sapAccentColor1; // #f0ab00
@sapUiAccent2: @sapAccentColor2; // #f27020
@sapUiAccent3: @sapAccentColor3; // #e52929
@sapUiAccent4: @sapAccentColor4; // #ab218e
@sapUiAccent5: @sapAccentColor5; // #007cc0
@sapUiAccent6: @sapAccentColor6; // #008a3b
@sapUiAccent7: @sapAccentColor7; // #004990
@sapUiAccent8: @sapAccentColor8; // #009de0
@sapUiAccent9: @sapAccentColor9;
@sapUiAccent10: @sapAccentColor10;

// =====================================
// Semantic Colors
// =====================================

// Semantic Background Colors

@sapUiErrorBG: @sapErrorBackground;     // #fbdfdf
@sapUiWarningBG: @sapWarningBackground; // #fffcb5
@sapUiSuccessBG: @sapSuccessBackground; // #e0f1e7
@sapUiInformationBG: @sapInformationBackground;
@sapUiNeutralBG: @sapNeutralBackground; // #e6f2f9

// Semantic Border Colors

@sapUiErrorBorder:  @sapErrorBorderColor;    //  #e52929;
@sapUiWarningBorder: @sapWarningBorderColor; //  #f0ab00;
@sapUiSuccessBorder: @sapSuccessBorderColor; //  #008a3b;
@sapUiInformationBorder: @sapInformationBorderColor;
@sapUiNeutralBorder: @sapNeutralColor;       //  #007cc0;

// Semantic Foreground Elements

@sapUiNegativeElement: @sapNegativeElementColor;  // #bb0000
@sapUiCriticalElement: @sapCriticalElementColor;  // #e78c07
@sapUiPositiveElement: @sapPositiveElementColor;  // #2b7c2b
@sapUiInformativeElement: @sapInformativeElementColor;
@sapUiNeutralElement: @sapNeutralElementColor;    // #5e696e

// Semantic Text

@sapUiNegativeText: @sapNegativeTextColor; // #bb0000
@sapUiCriticalText: @sapCriticalTextColor; // #e78c07
@sapUiPositiveText: @sapPositiveTextColor; // #2b7c2b
@sapUiInformativeText: @sapInformativeTextColor;
@sapUiNeutralText: @sapNeutralTextColor;   // #5e696e

// =======================================================
// Semantic Foreground Colors - do not use in Controls!!
// =======================================================

@sapUiNegative: @sapNegativeColor; // #cc1919, rgb(204, 25, 25)
@sapUiCritical: @sapCriticalColor; // #d14900, rgb(209, 73, 0)
@sapUiPositive: @sapPositiveColor; // #007833, rgb(0, 120, 51)
@sapUiInformative: @sapInformativeColor;
@sapUiNeutral: @sapNeutralColor;   // #007cc0, rgb(0, 124, 192)

// =====================================
// Indication Colors
// =====================================

@sapUiIndication1: @sapIndicationColor_1;
@sapUiIndication2: @sapIndicationColor_2;
@sapUiIndication3: @sapIndicationColor_3;
@sapUiIndication4: @sapIndicationColor_4;
@sapUiIndication5: @sapIndicationColor_5;

// =====================================
// Font
// =====================================

@sapUiFontCondensedFamily: "72 Condensed", 'Arial Narrow', HelveticaNeue-CondensedBold, Arial, sans-serif;

@sapUiFontHeaderFamily: @sapUiFontFamily;

@sapUiFontHeaderWeight: normal;

// use these "sapM"-prefixed parameters for sap.m controls
@sapMFontHeader1Size: 2.25rem;   //  36px
@sapMFontHeader2Size: 1.5rem;    //  24px
@sapMFontHeader3Size: 1.250rem;  //  20px
@sapMFontHeader4Size: 1.125rem;  //  18px
@sapMFontHeader5Size: 1rem;      //  16px
@sapMFontHeader6Size: 0.875rem;  //  14px

@sapMFontSmallSize: 0.75rem;   // 12px
@sapMFontMediumSize: 0.875rem; // 14px
@sapMFontLargeSize: 1rem;      // 16px

@sapUiTranslucentBGOpacity: 0;

@sapMPlatformDependent: false;

// =====================================
// Desktop (sap.ui.commons)
// =====================================

@sapUiDesktopFontFamily: @sapUiFontFamily;

@sapUiDesktopFontSize: 12px;

// use these for desktop controls only
@sapUiFontLargeSize: 13px;
@sapUiFontSmallSize: 11px;
@sapUiFontHeader1Size: 26px;
@sapUiFontHeader2Size: 20px;
@sapUiFontHeader3Size: 18px;
@sapUiFontHeader4Size: 16px;
@sapUiFontHeader5Size: 14px;
@sapUiFontHeader6Size: @sapUiFontLargeSize;

@sapUiLineHeight: 18px;

// ===============================================
// SOME important control-specific parameters...
// Derived from Expert Theming
// (these Parameters should be linked in controls)
// ===============================================

// Derived Chart Colors

@sapUiChartLabelHoverColor: @sapUiButtonHoverBackground;            // #ebebeb
@sapUiChartLabelPressedColor: darken(@sapUiButtonBackground, 17);   // #cccccc
@sapUiChartCategoryAxisLabelFontColor: @sapUiContentForegroundTextColor;    // #333333
@sapUiChartValueAxisLabelFontColor: lighten(@sapUiContentForegroundTextColor, 24);  // #707070
@sapUiChartCategoryAxisLabelFontSize: @sapMFontSmallSize;           // 12px
@sapUiChartValueAxisLabelFontSize: @sapMFontSmallSize;              // 12px
@sapUiChartCategoryAxisLineColor: darken(@sapUiChartGridlineColor, 10);  // #cccccc
@sapUiChartValueAxisLineColor: darken(@sapUiChartGridlineColor, 10);  // #cccccc
@sapUiChartCategoryAxisTickColor: darken(@sapUiChartGridlineColor, 10);  // #cccccc
@sapUiChartValueAxisTickColor: darken(@sapUiChartGridlineColor, 10);   // #cccccc
@sapUiChartBackgroundColor: transparent;
@sapUiChartLabelFontWeight: normal;
@sapUiChartLegendLabelFontColor: @sapUiContentForegroundTextColor;  // #333333
@sapUiChartLegendTitleFontColor: @sapUiGroupTitleTextColor;         // #333333
@sapUiChartLegendTitleFontSize: @sapMFontMediumSize;                // 14px
@sapUiChartLegendLabelFontSize: @sapMFontSmallSize;                 // 12px
@sapUiChartPaletteUndefinedColor: darken(@sapUiBaseText, 20);       // #000000
@sapUiChartGridlineColor: lighten(@sapUiContentForegroundBorderColor, 15);  // #e5e5e5
@sapUiChartReferenceLineColor: darken(@sapUiChartGridlineColor, 70);   // #333333
@sapUiChartDataLabelFontColor: darken(@sapUiBaseText, 20);          // #000000
@sapUiChartReferenceLineLabelColor: @sapUiContentContrastTextColor; // #ffffff
@sapUiChartDataLabelFontSize: @sapMFontSmallSize;                   // 12px
@sapUiChartPopoverDataItemFontColor: darken(@sapUiBaseText, 20);    // #000000
@sapUiChartPopoverGroupFontColor: @sapUiContentForegroundTextColor; // #333333
@sapUiChartPopoverDataItemFontSize: @sapMFontMediumSize;            // 14px
@sapUiChartPopoverGroupFontSize: @sapMFontMediumSize;               // 14px
@sapUiChartPopoverGroupFontWeight: bold;
@sapUiChartScrollBarThumbColor: @sapUiScrollBarFaceColor;           // #b2b2b2
@sapUiChartScrollBarTrackColor: @sapUiScrollBarTrackColor;          // #ffffff
@sapUiChartScrollBarThumbHoverColor: @sapUiScrollBarHoverFaceColor; // #ababab
@sapUiChartMainTitleFontColor: @sapUiGroupTitleTextColor;           // #333333
@sapUiChartAxisTitleFontColor: @sapUiGroupTitleTextColor;           // #333333
@sapUiChartMainTitleFontSize: @sapMFontLargeSize;                   // 16px
@sapUiChartAxisTitleFontSize: @sapMFontSmallSize;                   // 12px
@sapUiChartTitleFontWeight: bold;
@sapUiChartAxisTitleFontWeight: regular;
@sapUiChartLightText: lighten(@sapUiContentForegroundTextColor, 24);  // #707070
@sapUiChartZeroAxisColor: darken(@sapUiChartGridlineColor, 50);     // #666666

@sapUiChartDataPointBorderColor: lighten(@sapUiGroupContentBackground, 2);  // #ffffff
@sapUiChartDataPointBorderHoverSelectedColor: darken(@sapUiChartGridlineColor, 50);  // #666666
@sapUiChartDataPointNotSelectedBackgroundOpacity: 0.6;

@sapUiChartValueAxisLineOpacity: 0;
@sapUiChartCategoryAxisLabelFontHoverColor: @sapUiContentForegroundTextColor;  // #333333
@sapUiChartCategoryAxisLabelFontPressedColor: @sapUiContentForegroundTextColor;  // #333333

@sapUiChartTargetColor: darken(@sapUiChartGridlineColor, 70);       // #333333
@sapUiChartTargetShadowColor: @sapUiContentContrastShadowColor;     // #ffffff
@sapUiChartBubbleBGOpacity: 0.8;

@sapUiChartScrollbarBorderColor: lighten(@sapUiScrollBarBorderColor, 25);  // #f2f2f2
@sapUiChartScrollbarBorderSize: 0;
@sapUiChartScrollbarThumbPadding: 0;

@sapUiChartNegativeLargeText: @sapUiChartBad;  //#dc0d0e
@sapUiChartCriticalLargeText: @sapUiChartCritical;  // #de890d
@sapUiChartPositiveLargeText: @sapUiChartGood;  // #3fa45b
@sapUiChartNeutralLargeText: saturate(darken(@sapUiChartNeutral, 10), 1);  // #69767c

@sapUiChartDataPointBG: saturate(lighten(@sapUiChartNeutral, 30), 1);  // #d5dadc
@sapUiChartDataPointBGBorderColor: saturate(lighten(@sapUiChartNeutral, 30), 1);  // #d5dadc
@sapUiChartDataLineColorWithBG: darken(@sapUiChartGridlineColor, 70);   // #333333
@sapUiChartDataLineColor: darken(@sapUiChartGridlineColor, 70);   // #333333

@sapUiChartRadialRemainingCircle: lighten(@sapUiChartNeutral, 35);  // #e3e6e7
@sapUiChartRadialRemainingCircleBorderColor: lighten(@sapUiChartNeutral, 35);  // #e3e6e7
@sapUiChartRadialBG: lighten(@sapUiGroupContentBackground, 2);  // #ffffff

@sapUiChartLegendHoverBackground: @sapUiListHoverBackground;  // #f0f0f0
@sapUiChartLegendSelectionBackground: @sapUiListSelectionBackgroundColor;  // #e8eff6
@sapUiChartLegendSelectionHoverBackground: @sapUiListSelectionHoverBackground;  // #dde8f1

// qualitative palette

@sapUiChartPaletteQualitativeHue1: @sapUiChart1;
@sapUiChartPaletteQualitativeHue2: @sapUiChart2;
@sapUiChartPaletteQualitativeHue3: @sapUiChart3;
@sapUiChartPaletteQualitativeHue4: @sapUiChart4;
@sapUiChartPaletteQualitativeHue5: @sapUiChart5;
@sapUiChartPaletteQualitativeHue6: @sapUiChart6;
@sapUiChartPaletteQualitativeHue7: @sapUiChart7;
@sapUiChartPaletteQualitativeHue8: @sapUiChart8;
@sapUiChartPaletteQualitativeHue9: @sapUiChart9;
@sapUiChartPaletteQualitativeHue10: @sapUiChart10;
@sapUiChartPaletteQualitativeHue11: @sapUiChart11;
@sapUiChartPaletteQualitativeHue12: darken(saturate(@sapUiChartSequence1, 13), 20);
@sapUiChartPaletteQualitativeHue13: darken(saturate(@sapUiChartSequence2, 21), 17);
@sapUiChartPaletteQualitativeHue14: darken(saturate(@sapUiChartSequence3, 21), 15);
@sapUiChartPaletteQualitativeHue15: darken(saturate(@sapUiChartSequence4, 10), 17);
@sapUiChartPaletteQualitativeHue16: darken(saturate(@sapUiChartSequence5, 12), 11);
@sapUiChartPaletteQualitativeHue17: darken(saturate(@sapUiChartSequence6, 8), 12);
@sapUiChartPaletteQualitativeHue18: darken(desaturate(@sapUiChartSequence7, 18), 15);
@sapUiChartPaletteQualitativeHue19: darken(saturate(@sapUiChartSequence8, 22), 16);
@sapUiChartPaletteQualitativeHue20: darken(saturate(@sapUiChartSequence9, 16), 16);
@sapUiChartPaletteQualitativeHue21: darken(desaturate(@sapUiChartSequence10, 13), 16);
@sapUiChartPaletteQualitativeHue22: darken(saturate(@sapUiChartSequence11, 20), 10);

// semantic palette

@sapUiChartPaletteSemanticBadLight3: lighten(@sapUiChartBad, 32);
@sapUiChartPaletteSemanticBadLight2: lighten(@sapUiChartBad, 22);
@sapUiChartPaletteSemanticBadLight1: lighten(@sapUiChartBad, 12);
@sapUiChartPaletteSemanticBad: @sapUiChartBad;
@sapUiChartPaletteSemanticBadDark1: darken(desaturate(@sapUiChartBad, 1), 7);
@sapUiChartPaletteSemanticBadDark2: darken(desaturate(@sapUiChartBad, 1), 15);

@sapUiChartPaletteSemanticCriticalLight3: lighten(@sapUiChartCritical, 30);
@sapUiChartPaletteSemanticCriticalLight2: lighten(@sapUiChartCritical, 17);
@sapUiChartPaletteSemanticCriticalLight1: lighten(@sapUiChartCritical, 7);
@sapUiChartPaletteSemanticCritical: @sapUiChartCritical;
@sapUiChartPaletteSemanticCriticalDark1: darken(@sapUiChartCritical, 5);
@sapUiChartPaletteSemanticCriticalDark2: darken(@sapUiChartCritical, 12);

@sapUiChartPaletteSemanticGoodLight3: lighten(@sapUiChartGood, 30);
@sapUiChartPaletteSemanticGoodLight2: lighten(@sapUiChartGood, 17);
@sapUiChartPaletteSemanticGoodLight1: lighten(@sapUiChartGood, 7);
@sapUiChartPaletteSemanticGood: @sapUiChartGood;
@sapUiChartPaletteSemanticGoodDark1: darken(@sapUiChartGood, 7);
@sapUiChartPaletteSemanticGoodDark2: darken(@sapUiChartGood, 15);

@sapUiChartPaletteSemanticNeutralLight3: saturate(lighten(@sapUiChartNeutral, 30), 1);
@sapUiChartPaletteSemanticNeutralLight2: saturate(lighten(@sapUiChartNeutral, 20), 1);
@sapUiChartPaletteSemanticNeutralLight1: saturate(lighten(@sapUiChartNeutral, 10), 1);
@sapUiChartPaletteSemanticNeutral: @sapUiChartNeutral;
@sapUiChartPaletteSemanticNeutralDark1: saturate(darken(@sapUiChartNeutral, 10), 1);
@sapUiChartPaletteSemanticNeutralDark2: saturate(darken(@sapUiChartNeutral, 17), 1);

// sequential palette

@sapUiChartPaletteSequentialHue1Light3: lighten(saturate(@sapUiChartSequence1, 13), 23);
@sapUiChartPaletteSequentialHue1Light2: lighten(saturate(@sapUiChartSequence1, 5), 15);
@sapUiChartPaletteSequentialHue1Light1: lighten(saturate(@sapUiChartSequence1, 2), 7);
@sapUiChartPaletteSequentialHue1: @sapUiChartSequence1;
@sapUiChartPaletteSequentialHue1Dark1: darken(desaturate(@sapUiChartSequence1, 7), 11);
@sapUiChartPaletteSequentialHue1Dark2: darken(saturate(@sapUiChartSequence1, 13), 20);

@sapUiChartPaletteSequentialHue2Light3: lighten(saturate(@sapUiChartSequence2, 21), 20);
@sapUiChartPaletteSequentialHue2Light2: lighten(@sapUiChartSequence2, 21);
@sapUiChartPaletteSequentialHue2Light1: lighten(saturate(@sapUiChartSequence2, 5), 7);
@sapUiChartPaletteSequentialHue2: @sapUiChartSequence2;
@sapUiChartPaletteSequentialHue2Dark1: darken(desaturate(@sapUiChartSequence2, 1), 9);
@sapUiChartPaletteSequentialHue2Dark2: darken(saturate(@sapUiChartSequence2, 21), 17);

@sapUiChartPaletteSequentialHue3Light3: lighten(desaturate(@sapUiChartSequence3, 32), 31);
@sapUiChartPaletteSequentialHue3Light2: lighten(desaturate(@sapUiChartSequence3, 31), 20);
@sapUiChartPaletteSequentialHue3Light1: lighten(desaturate(@sapUiChartSequence3, 26), 10);
@sapUiChartPaletteSequentialHue3: @sapUiChartSequence3;
@sapUiChartPaletteSequentialHue3Dark1: darken(saturate(@sapUiChartSequence3, 8), 8);
@sapUiChartPaletteSequentialHue3Dark2: darken(saturate(@sapUiChartSequence3, 21), 15);

@sapUiChartPaletteSequentialHue4Light3: lighten(saturate(@sapUiChartSequence4, 1), 23);
@sapUiChartPaletteSequentialHue4Light2: lighten(@sapUiChartSequence4, 15);
@sapUiChartPaletteSequentialHue4Light1: lighten(@sapUiChartSequence4, 7);
@sapUiChartPaletteSequentialHue4: @sapUiChartSequence4;
@sapUiChartPaletteSequentialHue4Dark1: darken(desaturate(@sapUiChartSequence4, 5), 8);
@sapUiChartPaletteSequentialHue4Dark2: darken(saturate(@sapUiChartSequence4, 10), 17);

@sapUiChartPaletteSequentialHue5Light3: lighten(desaturate(@sapUiChartSequence5, 1), 24);
@sapUiChartPaletteSequentialHue5Light2: lighten(@sapUiChartSequence5, 16);
@sapUiChartPaletteSequentialHue5Light1: lighten(@sapUiChartSequence5, 8);
@sapUiChartPaletteSequentialHue5: @sapUiChartSequence5;
@sapUiChartPaletteSequentialHue5Dark1: darken(saturate(@sapUiChartSequence5, 4), 5);
@sapUiChartPaletteSequentialHue5Dark2: darken(saturate(@sapUiChartSequence5, 12), 11);

@sapUiChartPaletteSequentialHue6Light3: lighten(desaturate(@sapUiChartSequence6, 26), 29);
@sapUiChartPaletteSequentialHue6Light2: lighten(desaturate(@sapUiChartSequence6, 27), 19);
@sapUiChartPaletteSequentialHue6Light1: lighten(desaturate(@sapUiChartSequence6, 26), 10);
@sapUiChartPaletteSequentialHue6: @sapUiChartSequence6;
@sapUiChartPaletteSequentialHue6Dark1: darken(saturate(@sapUiChartSequence6, 4), 6);
@sapUiChartPaletteSequentialHue6Dark2: darken(saturate(@sapUiChartSequence6, 8), 12);

@sapUiChartPaletteSequentialHue7Light3: lighten(saturate(@sapUiChartSequence7, 1), 15);
@sapUiChartPaletteSequentialHue7Light2: lighten(@sapUiChartSequence7, 10);
@sapUiChartPaletteSequentialHue7Light1: lighten(saturate(@sapUiChartSequence7, 1), 5);
@sapUiChartPaletteSequentialHue7: @sapUiChartSequence7;
@sapUiChartPaletteSequentialHue7Dark1: darken(desaturate(@sapUiChartSequence7, 12), 8);
@sapUiChartPaletteSequentialHue7Dark2: darken(desaturate(@sapUiChartSequence7, 18), 15);

@sapUiChartPaletteSequentialHue8Light3: lighten(saturate(@sapUiChartSequence8, 6), 26);
@sapUiChartPaletteSequentialHue8Light2: lighten(saturate(@sapUiChartSequence8, 2), 17);
@sapUiChartPaletteSequentialHue8Light1: lighten(@sapUiChartSequence8, 9);
@sapUiChartPaletteSequentialHue8: @sapUiChartSequence8;
@sapUiChartPaletteSequentialHue8Dark1: darken(saturate(@sapUiChartSequence8, 9), 8);
@sapUiChartPaletteSequentialHue8Dark2: darken(saturate(@sapUiChartSequence8, 22), 16);

@sapUiChartPaletteSequentialHue9Light3: lighten(desaturate(@sapUiChartSequence9, 2), 34);
@sapUiChartPaletteSequentialHue9Light2: lighten(@sapUiChartSequence9, 22);
@sapUiChartPaletteSequentialHue9Light1: lighten(@sapUiChartSequence9, 11);
@sapUiChartPaletteSequentialHue9: @sapUiChartSequence9;
@sapUiChartPaletteSequentialHue9Dark1: darken(saturate(@sapUiChartSequence9, 6), 8);
@sapUiChartPaletteSequentialHue9Dark2: darken(saturate(@sapUiChartSequence9, 16), 16);

@sapUiChartPaletteSequentialHue10Light3: lighten(saturate(@sapUiChartSequence10, 9), 22);
@sapUiChartPaletteSequentialHue10Light2: lighten(saturate(@sapUiChartSequence10, 5), 14);
@sapUiChartPaletteSequentialHue10Light1: lighten(saturate(@sapUiChartSequence10, 2), 7);
@sapUiChartPaletteSequentialHue10: @sapUiChartSequence10;
@sapUiChartPaletteSequentialHue10Dark1: darken(desaturate(@sapUiChartSequence10, 8), 8);
@sapUiChartPaletteSequentialHue10Dark2: darken(desaturate(@sapUiChartSequence10, 13), 16);

@sapUiChartPaletteSequentialHue11Light3: lighten(desaturate(@sapUiChartSequence11, 24), 24);
@sapUiChartPaletteSequentialHue11Light2: lighten(desaturate(@sapUiChartSequence11, 22), 16);
@sapUiChartPaletteSequentialHue11Light1: lighten(desaturate(@sapUiChartSequence11, 17), 8);
@sapUiChartPaletteSequentialHue11: @sapUiChartSequence11;
@sapUiChartPaletteSequentialHue11Dark1: darken(saturate(@sapUiChartSequence11, 7), 4);
@sapUiChartPaletteSequentialHue11Dark2: darken(saturate(@sapUiChartSequence11, 20), 10);

@sapUiChartPaletteSequentialNeutralLight3: saturate(lighten(@sapUiChartSequenceNeutral, 30), 1);
@sapUiChartPaletteSequentialNeutralLight2: saturate(lighten(@sapUiChartSequenceNeutral, 20), 1);
@sapUiChartPaletteSequentialNeutralLight1: saturate(lighten(@sapUiChartSequenceNeutral, 10), 1);
@sapUiChartPaletteSequentialNeutral: @sapUiChartSequenceNeutral;
@sapUiChartPaletteSequentialNeutralDark1: saturate(darken(@sapUiChartSequenceNeutral, 10), 1);
@sapUiChartPaletteSequentialNeutralDark2: saturate(darken(@sapUiChartSequenceNeutral, 17), 1);

@sapUiChartPaletteNoSemDiv1Light3: #f3dec9;
@sapUiChartPaletteNoSemDiv1Light2: #e3cbb3;
@sapUiChartPaletteNoSemDiv1Light1: #c8ab8e;
@sapUiChartPaletteNoSemDiv1: #b08e6d;
@sapUiChartPaletteNoSemDiv1Dark1: #8e6c4b;
@sapUiChartPaletteNoSemDiv1Dark2: #754f2a;

@sapUiChartPaletteMidArea: desaturate(lighten(@sapUiChartSequenceNeutral, 40), 7);

@sapUiChoroplethBG: lighten(@sapUiChartSequenceNeutral, 42);
@sapUiChoroplethRegionBorder: lighten(@sapUiChartGridlineColor, 10);
@sapUiChoroplethRegionBG: @sapUiChartPaletteSemanticNeutralLight2;
@sapUiMapLegendBG: lighten(@sapUiGroupContentBackground, 2);
@sapUiMapLegendBorderColor: darken(@sapUiChartGridlineColor, 10);

// Shell
@sapUiShellHoverBackground: darken(@sapUiBrand, 10);
@sapUiShellActiveBackground: darken(@sapUiBrand, 17);
@sapUiShellActiveTextColor: lighten(@sapUiBrand, 55);
@sapUiShellHoverToggleBackground: darken(@sapUiBrand, 32);
@sapUiShellContainerBackground: lighten(@sapUiShellBackground, 16);
@sapUiShellAltContainerBackground: darken(saturate(@sapUiShellBackground, 6), 28);
@sapUiShellGroupTextColor: darken(desaturate(@sapUiShellTextColor, 100), 16.5);

@sapUiUx3ShellHeaderColor: @sapShellColor;			// "Quick"
@sapUiUx3ShellBackgroundColor: @sapUiPrimary3;
@sapUiUx3ShellHoverColor: lighten(@sapUiPrimary7, 27);
@sapUiUx3ShellGradientBottom: lighten(@sapUiUx3ShellHeaderColor, 17.3);			// transparent
@sapUiUx3ShellGradientTop: spin(mix(@sapUiHighlight, lighten(@sapUiUx3ShellGradientBottom, 22), 3), 9);			// transparent

// Approved by UX to use a hard coded color value for this
@sapUiUx3ShellToolPaletteIconFontColor: lighten(@sapUiPrimary1, 30);

// Exact
@sapUiUx3ExactLstExpandOffset: -1 -2;
@sapUiUx3ExactLstRootExpandOffset: 0 3;
@sapUiUx3ExactLstContentTop: 25px;

// Link
@sapUiLinkActive:     @sapUiLink;
@sapUiLinkVisited:    @sapUiLink;
@sapUiLinkHover:      darken(@sapUiLink, 10);
@sapUiLinkInverted:   lighten(@sapUiLink, 40);

// Notification Bar
@sapUiNotificationBarBG: fade(@sapUiPrimary7, 98);
@sapUiNotifierSeparator: darken(@sapUiPrimary7, 20);
@sapUiNotifierSeparatorWidth: ~"1px";
@sapUiNotificationBarBorder: lighten(@sapUiPrimary7, 20);

// ToolPopup
@sapUiUx3ToolPopupInverted: ~"false"; // Telling the ToolPopup if it's inverted per default
@sapUiUx3ToolPopupArrowRightMarginCorrection: -1px;
@sapUiUx3ToolPopupShadow: 0px 6px 12px 0px fade(@sapUiContentShadowColor, 30);

// Callout
@sapUiCalloutShadow: 0px 6px 12px 0px fade(@sapUiContentShadowColor, 30);

@sapUiButtonIconColor: contrast(@sapUiButtonBackground, @sapUiContentIconColor, @sapUiContentContrastIconColor, @sapUiContentContrastTextThreshold);
@sapUiButtonActiveBackground: @sapUiActive;
@sapUiButtonActiveBorderColor: @sapUiButtonActiveBackground;
@sapUiButtonActiveTextColor: contrast(@sapUiButtonActiveBackground, @sapUiButtonTextColor, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiButtonEmphasizedHoverBackground: darken(@sapUiButtonEmphasizedBackground, 7);
@sapUiButtonEmphasizedHoverBorderColor: @sapUiButtonEmphasizedHoverBackground;
@sapUiButtonEmphasizedActiveBackground: darken(@sapUiButtonEmphasizedBackground, 10);
@sapUiButtonEmphasizedActiveBorderColor: @sapUiButtonEmphasizedActiveBackground;
@sapUiButtonEmphasizedTextShadow: transparent;
@sapUiButtonAcceptBorderColor: @sapUiPositiveElement;
@sapUiButtonAcceptHoverBackground: darken(@sapUiButtonAcceptBackground, 2);
@sapUiButtonAcceptHoverBorderColor: @sapUiButtonAcceptBorderColor;
@sapUiButtonAcceptActiveBackground: darken(@sapUiPositiveElement, 5);
@sapUiButtonAcceptActiveBorderColor: @sapUiButtonAcceptActiveBackground;
@sapUiButtonAcceptTextColor: contrast(@sapUiButtonAcceptBackground, @sapUiPositiveText, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiButtonRejectBorderColor: @sapUiNegativeElement;
@sapUiButtonRejectHoverBackground: darken(@sapUiButtonRejectBackground, 2);
@sapUiButtonRejectHoverBorderColor: @sapUiButtonRejectBorderColor;
@sapUiButtonRejectActiveBackground: darken(@sapUiNegativeElement, 5);
@sapUiButtonRejectActiveBorderColor: @sapUiButtonRejectActiveBackground;
@sapUiButtonRejectTextColor: contrast(@sapUiButtonRejectBackground, @sapUiNegativeText, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiButtonLiteBackground: transparent;
@sapUiButtonLiteBorderColor: transparent;
@sapUiButtonLiteTextColor: @sapUiButtonTextColor;
@sapUiButtonLiteHoverBackground: fade(darken(@sapUiButtonHoverBackground, 10), 50);
@sapUiButtonLiteHoverBorderColor: @sapUiButtonLiteHoverBackground;
@sapUiButtonLiteActiveBackground: @sapUiButtonActiveBackground;
@sapUiButtonLiteActiveBorderColor: @sapUiButtonLiteActiveBackground;
@sapUiButtonHeaderTextColor: @sapUiButtonTextColor;
@sapUiButtonHeaderDisabledTextColor: @sapUiButtonHeaderTextColor;
@sapUiButtonFooterTextColor: contrast(@sapUiPageFooterBackground, @sapUiButtonTextColor, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiButtonFooterHoverBackground: @sapUiButtonLiteHoverBackground;
@sapUiButtonActionSelectBackground: @sapUiListBackground;
@sapUiButtonActionSelectBorderColor: @sapUiListBorderColor;
@sapUiButtonLiteActionSelectHoverBackground: @sapUiListHoverBackground;
@sapUiToggleButtonPressedBackground: darken(@sapUiSelected, 10);
@sapUiToggleButtonPressedBorderColor: @sapUiToggleButtonPressedBackground;
@sapUiToggleButtonPressedTextColor: contrast(@sapUiToggleButtonPressedBackground, @sapUiButtonTextColor, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiToggleButtonPressedHoverBackground: lighten(@sapUiToggleButtonPressedBackground, 3);
@sapUiToggleButtonPressedHoverBorderColor: @sapUiToggleButtonPressedHoverBackground;
@sapUiSegmentedButtonBackground: @sapUiButtonBackground;
@sapUiSegmentedButtonBorderColor: @sapUiButtonBorderColor;
@sapUiSegmentedButtonTextColor: contrast(@sapUiSegmentedButtonBackground, @sapUiButtonTextColor, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiSegmentedButtonHoverBackground: @sapUiButtonHoverBackground;
@sapUiSegmentedButtonActiveBackground: @sapUiButtonActiveBackground;
@sapUiSegmentedButtonActiveTextColor: contrast(@sapUiSegmentedButtonActiveBackground, @sapUiSegmentedButtonTextColor, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiSegmentedButtonSelectedBackground: @sapUiToggleButtonPressedBackground;
@sapUiSegmentedButtonSelectedTextColor: @sapUiToggleButtonPressedTextColor;
@sapUiSegmentedButtonSelectedHoverBackground: @sapUiToggleButtonPressedHoverBackground;
@sapUiSegmentedButtonSelectedHoverBorderColor: @sapUiToggleButtonPressedHoverBorderColor;
@sapUiSegmentedButtonIconColor: contrast(@sapUiSegmentedButtonBackground, @sapUiContentIconColor, @sapUiContentContrastIconColor, @sapUiContentContrastTextThreshold);
@sapUiSegmentedButtonActiveIconColor: contrast(@sapUiSegmentedButtonActiveBackground, @sapUiContentIconColor, @sapUiContentContrastIconColor, @sapUiContentContrastTextThreshold);
@sapUiSegmentedButtonSelectedIconColor: contrast(@sapUiSegmentedButtonSelectedBackground, @sapUiContentIconColor, @sapUiContentContrastIconColor, @sapUiContentContrastTextThreshold);
@sapUiSegmentedButtonFooterBorderColor: @sapUiSegmentedButtonBorderColor;
@sapUiSegmentedButtonFooterHoverBackground: @sapUiSegmentedButtonHoverBackground;

@sapUiFieldActiveBackground: @sapUiActive;
@sapUiFieldActiveBorderColor: @sapUiActive;
@sapUiFieldActiveTextColor: @sapUiContentContrastTextColor;
@sapUiFieldPlaceholderTextColor: lighten(@sapUiContentLabelColor, 4);

@sapUiListTextColor: @sapUiBaseText;
@sapUiListVerticalBorderColor: @sapUiListBorderColor;
@sapUiListActiveBackground: @sapUiListHighlightColor;
@sapUiListActiveTextColor: contrast(@sapUiListActiveBackground, @sapUiListTextColor, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiListSelectionHoverBackground: contrast(@sapUiListSelectionBackgroundColor, darken(@sapUiListSelectionBackgroundColor, 3), lighten(@sapUiListSelectionBackgroundColor, 3));
@sapUiListFooterBackground: darken(@sapUiListBackground, 2);
@sapUiListFooterTextColor: @sapUiListTextColor;
@sapUiListGroupHeaderBackground: @sapUiListBackground;
@sapUiListTableGroupHeaderBackground: darken(@sapUiListBackground, 3);
@sapUiListTableGroupHeaderBorderColor: @sapUiListBorderColor;
@sapUiListTableGroupHeaderTextColor: contrast(@sapUiListTableGroupHeaderBackground, @sapUiListTextColor, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiListTableFooterBorder: @sapUiListBorderColor;
@sapUiListTableFixedBorder: darken(@sapUiListBorderColor, 8);
@sapUiListTableTextSize: 0.875rem;
@sapUiListTableIconSize: 1rem;

@sapUiPageFooterBorderColor: contrast(@sapUiPageFooterBackground, darken(@sapUiPageFooterBackground, 8), lighten(@sapUiPageFooterBackground, 12));

@sapUiInfobarHoverBackground: darken(@sapUiInfobarBackground, 3);
@sapUiInfobarActiveBackground: @sapUiListActiveBackground;

@sapUiObjectHeaderBorderColor: darken(@sapUiObjectHeaderBackground, 41);

@sapUiCalendarColorToday: @sapUiAccent4;

@sapUiDragAndDropColor: @sapUiContentNonInteractiveIconColor;
@sapUiDragAndDropBackground: @sapUiGroupContentBackground;
@sapUiDragAndDropBorderColor: @sapUiContentForegroundBorderColor;
@sapUiDragAndDropActiveColor: @sapUiLink;
@sapUiDragAndDropActiveBackground: fade(@sapUiLink, 5);
@sapUiDragAndDropActiveBorderColor: @sapUiLink;

@sapUiShadowLevel0: 0 0 0 1px fade(@sapUiContentShadowColor, 15);
@sapUiShadowLevel1: 0 0.125rem 0.5rem 0 fade(@sapUiContentShadowColor, 15), @sapUiShadowLevel0;
@sapUiShadowLevel2: 0 0.625rem 1.875rem 0 fade(@sapUiContentShadowColor, 15), @sapUiShadowLevel0;
@sapUiShadowLevel3: 0 1.25rem 5rem 0 fade(@sapUiContentShadowColor, 15), @sapUiShadowLevel0;
@sapUiShadowText: 0 0 0.125rem @sapUiContentContrastShadowColor;
@sapUiShadowHeader: 0 1px 0.5rem 0 fade(@sapUiContentShadowColor, 5), inset 0 -1px 0 0 @sapUiObjectHeaderBorderColor;

//images for shell
@sapUiUx3ShellHeaderImageURL: ~"";

@sapUiUx3ShellApplicationImageURL: @sapUiGlobalLogo;			// "Quick"


fixing alignment of add and remove label inputs

@import "../../colors";

.ek-label-editor {
    &__input {
        margin: 7px 5px 0 0;
        padding: 10px;
        height: 30px;
        color: @black;
        font-weight: normal;
        width: 300px;
        max-width: 300px;
    }

    &__add--enabled {
        color: @grey450;
        cursor: pointer;
        margin: 10px 0 0 0;
    }

    &__add--disabled {
        color: @grey200;
        cursor: default;
        margin: 10px 0 0 0;
    }

    &__label {
        margin-bottom: 10px;

        &__input {
            margin: 7px 5px 0 0;
            padding: 10px;
            height: 30px;
            color: @grey500;
            font-weight: normal;
            width: 300px;
            max-width: 300px;
        }

        &__remove {
            color: @grey450;
            cursor: pointer;
            margin: 10px 0 0 0;
        }

    }
}

@import "../../colors";

.ek-label-editor {
    &__input {
        margin: 7px 5px 0 0;
        padding: 10px;
        height: 30px;
        color: @black;
        font-weight: normal;
        width: 300px;
        max-width: 300px;
    }

    &__add--enabled {
        color: @grey450;
        cursor: pointer;
    }

    &__add--disabled {
        color: @grey200;
        cursor: default;
    }

    &__label {
        margin-bottom: 10px;

        &__input {
            margin: 7px 5px 0 0;
            padding: 10px;
            height: 30px;
            color: @grey500;
            font-weight: normal;
            width: 300px;
            max-width: 300px;
        }

        &__remove {
            color: @grey450;
            cursor: pointer;
        }

    }
}


Don't wrap inside language indicators

Don't wrap inside language indicators


Fix #40 - fade distance

Fix #40 - fade distance


Hide input clear button on IE.

Hide input clear button on IE.

@import 'variables';

// Base styles for reusable components like form elements.
.base--input {
  padding: @padding / 2;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid darken(@color__white, 20%);

  &:focus {
    outline: none;
    border-bottom-color: @color__blue--dark;
  }

  &::-ms-clear {
    width: 0;
    height: 0;
  }
}

.base--button {
  padding: (@padding / 2) @padding;
  background-color: @color__blue--light;
  color: @color__white;
  border: none;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  font-size: 80%;
  user-select: none;

  &:hover {
    background-color: darken(@color__blue--light, 5%);
    cursor: pointer;
  }

  &[disabled] {
    background-color: desaturate(@color__blue--light, 50%);
    &:hover {
      cursor: not-allowed;
    }
  }

  i {
    margin-right: @padding / 2;
  }
}

@import 'variables';

// Base styles for reusable components like form elements.
.base--input {
  padding: @padding / 2;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid darken(@color__white, 20%);

  &:focus {
    outline: none;
    border-bottom-color: @color__blue--dark;
  }
}

.base--button {
  padding: (@padding / 2) @padding;
  background-color: @color__blue--light;
  color: @color__white;
  border: none;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  font-size: 80%;
  user-select: none;

  &:hover {
    background-color: darken(@color__blue--light, 5%);
    cursor: pointer;
  }

  &[disabled] {
    background-color: desaturate(@color__blue--light, 50%);
    &:hover {
      cursor: not-allowed;
    }
  }

  i {
    margin-right: @padding / 2;
  }
}