:root {
  --current-background-color: $ui-white;
}

/* reset lists */
/* clearfix */
/* set icon font */
/*	Define global font formats as placeholders
	and extend them where needed
	based on: https://collab-ui.virtual-identity.com/display/NOC/Schrift

	$xsmall:  300px;
	$small:   600px;
	$medium:  768px;
	$large:   992px;
	$desktop: 1024px;
	$xlarge:  1200px; */
/* stylelint-disable declaration-no-important */
div.mgnlEditorBar {
  font-weight: normal;
}
div.mgnlEditorBar.area {
  background-color: #f6f6f6 !important;
  color: black !important;
  border: 1px solid #dadada !important;
}
div.mgnlEditorBar.area.focus {
  background-color: #00358e !important;
  z-index: 65537 !important;
}
div.mgnlEditorBar.area.childFocus {
  background-color: #132c64 !important;
  color: #ffffff !important;
}
div.mgnlEditorBar.component {
  background-color: #dadada !important;
  border: 1px solid #c3c3c3 !important;
  color: black !important;
}
div.mgnlEditorBar.component.focus {
  background-color: #2d9d00 !important;
  z-index: 65537 !important;
}
div.mgnlEditorBar.component.childFocus {
  background-color: #b6dfaa !important;
}
div.mgnlEditorBar.focus {
  color: #ffffff !important;
  border: 0 !important;
}

.sublayout-wrapper {
  --grid-gap: calc(100% / 12 * .6);
  width: calc(8.3333333333% * var(--sublayout-span, 1) - 3px) !important;
  display: inline-block;
}
.sublayout-wrapper--centered {
  margin-left: calc(8.3333333333% * (12 - var(--sublayout-span)) / 2);
}

/* used for links-navigation component */
#header .mgnlEditorBar {
  border-radius: 15px;
  position: absolute !important;
  left: 40%;
}
#header .mgnlEditorBar:nth-of-type(2) {
  top: 32px;
}
#header .mgnlEditorBar.end {
  display: none;
}

.shadow-wrapper .mgnlEditorBar,
.shadow-wrapper .mgnlPlaceholder,
.shadow-wrapper .mgnlPlaceholder.mgnlEditorBar {
  z-index: 20 !important;
}

/* stylelint-enable declaration-no-important */
/* reducing space in case of container component */
.mgnlEditorBar.component + ui-cms-container {
  margin-top: 0;
}