@eclipse-scout/core/dist/eclipse-scout-core-theme.css

Eclipse Scout runtime

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.2_webpack@5.97.1_esbuild@0.24.0_/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!../node_modules/.pnpm/less-loader@12.2.0_less@4.2.1_webpack@5.97.1_esbuild@0.24.0_/node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./src/index.less ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Copyright (c) 2010, 2025 BSI Business Systems Integration AG
 *
 * This program and the accompanying materials are made
 * available under the terms of the Eclipse Public License 2.0
 * which is available at https://www.eclipse.org/legal/epl-2.0/
 *
 * SPDX-License-Identifier: EPL-2.0
 */
/*
 * Copyright (c) 2010, 2024 BSI Business Systems Integration AG
 *
 * This program and the accompanying materials are made
 * available under the terms of the Eclipse Public License 2.0
 * which is available at https://www.eclipse.org/legal/epl-2.0/
 *
 * SPDX-License-Identifier: EPL-2.0
 */
html {
  height: 100%;
  width: 100%;
}
body {
  background-color: #fff;
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-size: 13px;
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
  cursor: default;
  color: #000;
  letter-spacing: 0.2px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -moz-user-select: -moz-none;
  /* Prevent mobile safari from adjusting text, due to our dynamic layouting it will be always wrong */
  -webkit-text-size-adjust: none;
  /* Disable highlight color. May be enabled for specific elements if required */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body.ios {
  /* Body can be moved on ios even if it isn't scrollable. Prevent it by using position: fixed.
    Drawback: it seems something invisible happens nevertheless, actions like a button click won't be executed if the user tried to scroll right before.
    He has to wait until the invisible scrolling has finished before he can try to click the button.
    Another drawback: there is a flickering effect of labels on certain screens (e.g. beamer) with chrome when a popup (e.g. smart field popup) is shown and position is set to fixed.
    Hence it is important to only activate it on ios. */
  position: fixed;
}
/* -moz variant is required, see https://bugzilla.mozilla.org/show_bug.cgi?id=509958 */
::-moz-selection {
  background: #1561A7;
  color: #fff;
}
::selection {
  background: #1561A7;
  color: #fff;
}
::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.55);
  opacity: 1;
  /* necessary for firefox */
}
:-moz-placeholder {
  /* older versions of firefox */
  color: rgba(0, 0, 0, 0.55);
  opacity: 1;
  /* necessary for firefox */
}
::-moz-placeholder {
  color: rgba(0, 0, 0, 0.55);
  opacity: 1;
  /* necessary for firefox */
}
:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.55);
  opacity: 1;
  /* necessary for firefox */
}
::placeholder {
  /* Most modern browsers */
  color: rgba(0, 0, 0, 0.55);
  opacity: 1;
  /* necessary for firefox */
}
/* Hide IE decorations for text input fields: */
/* - Clear button ("X"): https://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx */
/* - Password reveal button: https://msdn.microsoft.com/en-us/library/windows/apps/hh465773.aspx */
/* Note: Set width/height to 0 instead of "display: none", because of http://stackoverflow.com/a/17986002 */
::-ms-clear {
  width: 0;
  height: 0;
}
::-ms-reveal {
  width: 0;
  height: 0;
}
:focus,
:focus-visible {
  outline: none;
}
.disabled::-moz-selection {
  background: #666666;
  color: #EFEFEF;
}
.disabled::selection {
  background: #666666;
  color: #EFEFEF;
}
.disabled::-webkit-input-placeholder {
  /* Fade a little to make it distinguishable from real text. Don't use opacity here because it affects background as well (IE). */
  color: rgba(128, 128, 128, 0.5);
  /* Fill color is inherited, make sure it is ignored and the current color is used instead. Needed for iOS, see usage of -webkit-text-fill-color below*/
  -webkit-text-fill-color: currentcolor;
}
.disabled:-moz-placeholder {
  /* older versions of firefox */
  /* Fade a little to make it distinguishable from real text. Don't use opacity here because it affects background as well (IE). */
  color: rgba(128, 128, 128, 0.5);
}
.disabled::-moz-placeholder {
  /* Fade a little to make it distinguishable from real text. Don't use opacity here because it affects background as well (IE). */
  color: rgba(128, 128, 128, 0.5);
}
.disabled:-ms-input-placeholder {
  /* Fade a little to make it distinguishable from real text. Don't use opacity here because it affects background as well (IE). */
  color: rgba(128, 128, 128, 0.5);
}
/* Add this class to temporary remove an element from the document flow. */
/* !important is used to override any specific "display" values (because this */
/* call would in most cases be less specific than the element's rules). */
.hidden {
  display: none !important;
  /* NOSONAR (!important is okay here) */
}
/* Add this class to temporary hide (but not remove from flow) an element. Similar to "hidden". */
.invisible {
  visibility: hidden !important;
  /* NOSONAR (!important is okay here) */
}
*,
*::before,
*::after {
  /* NOSONAR (universal selector is okay here) */
  box-sizing: border-box;
}
/* Workaround for firefox bug https://bugzilla.mozilla.org/show_bug.cgi?id=648624 */
/* use -moz-none to allow child element to set -moz-user-select: text */
/* See also: focusUtil.js, isSelectableText() */
.table-cell,
.table-header-item,
.tree-node,
.table-footer,
.table-control,
.table-info-item,
.table-header-menu-group-text {
  -moz-user-select: -moz-none;
}
input,
textarea,
button {
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-size: 13px;
  letter-spacing: 0.2px;
}
input,
textarea,
.input-field {
  background-color: transparent;
  color: #000;
  border: 1px solid rgba(0, 0, 0, 0.23);
  border-radius: 3px;
}
input.disabled,
textarea.disabled,
.input-field.disabled {
  background-color: transparent;
  border-color: #DADADA;
  color: #666666;
}
input:focus,
textarea:focus,
.input-field:focus,
input.focused,
textarea.focused,
.input-field.focused {
  outline: none;
  box-shadow: 0 0 0 3px #93c5f4;
  border-color: #64adf0;
}
input.has-error,
textarea.has-error,
.input-field.has-error {
  border-color: #D53F3F;
  background-color: #FEE0E0;
}
input.has-error:focus,
textarea.has-error:focus,
.input-field.has-error:focus,
input.has-error.focused,
textarea.has-error.focused,
.input-field.has-error.focused {
  outline: none;
  box-shadow: 0 0 0 3px rgba(213, 63, 63, 0.4);
}
input.read-only,
textarea.read-only,
.input-field.read-only {
  background-color: transparent;
  border-color: transparent;
  border-bottom: dashed 1px #DADADA;
  color: #000;
}
textarea.read-only {
  border: 1px dashed #DADADA;
}
input[type="text"].alternative,
input[type="password"].alternative {
  /* Add 1px padding to prevent the text from moving a little when field is focused due to the 2px focus border */
  padding-bottom: 1px;
  /* Compensate padding-bottom to align input text with label on the left */
  /* It won't be perfect (especially when zoomed) but should be good enough */
  padding-top: 2px;
}
input.alternative,
.input-field.alternative {
  background-color: transparent;
  border-color: transparent;
  border-bottom-color: rgba(0, 0, 0, 0.23);
  border-radius: 0;
  border-left-width: 0;
  border-right-width: 0;
  padding-left: 0;
  padding-right: 0;
}
input.alternative.disabled,
.input-field.alternative.disabled {
  color: #808080;
  border-bottom-style: dashed;
  border-bottom-color: #CFCFCF;
}
input.alternative:focus,
.input-field.alternative:focus,
input.alternative.focused,
.input-field.alternative.focused {
  color: #1561A7;
  border-bottom-color: #1561A7;
  border-bottom-width: 2px;
  box-shadow: none;
  padding-bottom: 0;
}
input.alternative.has-error,
.input-field.alternative.has-error {
  color: #D53F3F;
  border-bottom-color: #D53F3F;
}
input.alternative.has-error:focus,
.input-field.alternative.has-error:focus,
input.alternative.has-error.focused,
.input-field.alternative.has-error.focused {
  border-bottom-color: #D53F3F;
  border-bottom-width: 2px;
  box-shadow: none;
  padding-bottom: 0;
}
input.alternative.read-only,
.input-field.alternative.read-only {
  color: #000;
}
input {
  padding: 0 10px;
  /* remove platform specific styling, mainly used to remove shadow on iOS Safari */
  /* text inputs on Safari have 2px top and bottom margin -> remove*/
  margin: 0;
}
input:not([type=checkbox]):not([type=radio]) {
  -webkit-appearance: none;
  -moz-appearance: none;
}
input.disabled,
textarea.disabled {
  /* Only setting the color has no effect for input elements on iOS Safari -> set fill color, too */
  /* It is activated for input elements only since the rule would be inherited by sub elements and therefore would change theirs colors as well */
  /* Unfortunately currentcolor variable does seem to not work anymore so we have to use the less variable (somehow it still works for the placeholder) */
  -webkit-text-fill-color: #808080;
  opacity: 1;
}
input.disabled.read-only,
textarea.disabled.read-only {
  -webkit-text-fill-color: #000;
}
input.disabled::selection,
textarea.disabled::selection {
  -webkit-text-fill-color: #EFEFEF;
}
textarea.alternative {
  background-color: transparent;
}
textarea.alternative.disabled:not(.read-only) {
  background-color: transparent;
  border: 1px dashed #DADADA;
  color: #808080;
}
input[type="text"],
textarea {
  /* Explicitly set 'user-select' to something other than 'none', otherwise the focus manager */
  /* might prevent text selection (scout.focusUtils.isSelectableText()). Some browsers already */
  /* provide such a rule in the user style sheet, but some do not (e.g. Chrome 62). */
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
textarea {
  /* these two properties are required for FF, otherwise the editable textarea is 2px too large, */
  /* and the DOM inspector does not include these 2 pixels. */
  margin: 0 auto;
  padding: 7px 10px;
  resize: none;
  /* Override default overflow value 'scroll' */
  overflow: auto;
  /* IE/Edge: show scrollbars on textarea if the content is too big to fit */
  /* overflow:auto alone is not sufficient because -ms-overflow-style could be set on a parent element and textarea inherits this property */
  -ms-overflow-style: auto;
  /* remove platform specific styling, mainly used to remove shadow on ios safari */
  -webkit-appearance: none;
  -moz-appearance: none;
}
textarea.alternative {
  border-radius: 3px;
}
.input-field {
  padding: 7px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
button {
  padding: 2px 7px;
  margin: 0;
  /* reset user agent style, e.g. on safari */
}
/* cursor handling */
.col-resize,
.col-resize * {
  /* NOSONAR (universal selector is okay here) */
  cursor: col-resize !important;
  /* NOSONAR !important is necessary to override any defined cursor on underlying components */
}
.row-resize,
.row-resize * {
  /* NOSONAR (universal selector is okay here) */
  cursor: row-resize !important;
  /* NOSONAR !important is necessary to override any defined cursor on underlying components */
}
.n-resize,
.n-resize * {
  /* NOSONAR (universal selector is okay here) */
  cursor: n-resize !important;
  /* NOSONAR !important is necessary to override any defined cursor on underlying components */
}
.ne-resize,
.ne-resize * {
  /* NOSONAR (universal selector is okay here) */
  cursor: ne-resize !important;
  /* NOSONAR !important is necessary to override any defined cursor on underlying components */
}
.e-resize,
.e-resize * {
  /* NOSONAR (universal selector is okay here) */
  cursor: e-resize !important;
  /* NOSONAR !important is necessary to override any defined cursor on underlying components */
}
.se-resize,
.se-resize * {
  /* NOSONAR (universal selector is okay here) */
  cursor: se-resize !important;
  /* NOSONAR !important is necessary to override any defined cursor on underlying components */
}
.s-resize,
.s-resize * {
  /* NOSONAR (universal selector is okay here) */
  cursor: s-resize !important;
  /* NOSONAR !important is necessary to override any defined cursor on underlying components */
}
.sw-resize,
.sw-resize * {
  /* NOSONAR (universal selector is okay here) */
  cursor: sw-resize !important;
  /* NOSONAR !important is necessary to override any defined cursor on underlying components */
}
.w-resize,
.w-resize * {
  /* NOSONAR (universal selector is okay here) */
  cursor: w-resize !important;
  /* NOSONAR !important is necessary to override any defined cursor on underlying components */
}
.nw-resize,
.nw-resize * {
  /* NOSONAR (universal selector is okay here) */
  cursor: nw-resize !important;
  /* NOSONAR !important is necessary to override any defined cursor on underlying components */
}
/* Used to temporarily disable pointer events on iframes while dragging elements */
.dragging-in-progress {
  pointer-events: none;
}
/* remove the dotted border in firefox */
button::-moz-focus-inner {
  border: 0;
}
.drag-handle {
  content: '';
  width: 100%;
  height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: -5px;
  cursor: move;
  z-index: 10;
}
.closer {
  font-family: scoutIcons, Arial, sans-serif;
  font-weight: normal;
  speak: none;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 17px;
  cursor: pointer;
  color: #999999;
  padding: 4px;
  border-radius: 3px;
}
.closer::before {
  content: '\E045';
}
.closer:hover {
  background-color: rgba(0, 0, 0, 0.08);
  color: #262626;
}
.closer:active,
.closer.active {
  background-color: rgba(0, 0, 0, 0.12);
}
.save-needer {
  font-family: scoutIcons, Arial, sans-serif;
  font-weight: normal;
  speak: none;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 12px;
  color: #999999;
}
.save-needer::before {
  content: '\E050';
}
/* Used to display errors from server when desktop is not available */
.fatal-error {
  margin: 10px;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
.application-loading-root {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: #fff;
  pointer-events: none;
}
.application-loading-root.fadeout {
  -webkit-animation: application-loading-fade-out 250ms linear 1 forwards;
  -moz-animation: application-loading-fade-out 250ms linear 1 forwards;
  -o-animation: application-loading-fade-out 250ms linear 1 forwards;
  animation: application-loading-fade-out 250ms linear 1 forwards;
}
@-webkit-keyframes application-loading-fade-out {
  to {
    opacity: 0;
  }
}
@keyframes application-loading-fade-out {
  to {
    opacity: 0;
  }
}
.application-loading01 {
  height: 80px;
  width: 80px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.application-loading01::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 6px 3px rgba(21, 97, 167, 0.9);
  -webkit-animation: pulsate 2s ease-out infinite;
  -moz-animation: pulsate 2s ease-out infinite;
  -o-animation: pulsate 2s ease-out infinite;
  animation: pulsate 2s ease-out infinite;
}
.application-loading02 {
  height: 120px;
  width: 120px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.application-loading02::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: inset 0 0 4px 2px #1FC9AA;
  -webkit-animation: pulsate 2.84s ease-out infinite;
  -moz-animation: pulsate 2.84s ease-out infinite;
  -o-animation: pulsate 2.84s ease-out infinite;
  animation: pulsate 2.84s ease-out infinite;
}
a,
.link,
.app-link {
  color: #1561A7;
  text-decoration: none;
  cursor: pointer;
}
a:hover,
.link:hover,
.app-link:hover {
  color: #1b7bd4;
}
a:active,
.link:active,
.app-link:active,
a.active,
.link.active,
.app-link.active {
  color: #2F3C45;
}
a:focus,
.link:focus,
.app-link:focus {
  outline: none;
  box-shadow: 0 0 0 3px #93c5f4;
}
.font-icon {
  font-family: scoutIcons, Arial, sans-serif;
  font-weight: normal;
  speak: none;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.white-space-nowrap {
  white-space: nowrap;
}
.startup-error {
  position: relative;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  margin: 100px 50px;
  padding: 13px 12px 13px 23px;
  background-color: #FEE0E0;
  border-radius: 8px;
}
.startup-error::before {
  content: '';
  position: absolute;
  border: 2px solid #D53F3F;
  background-color: #D53F3F;
  margin: 7px 0 7px 9px;
  border-radius: 2px;
  top: 0;
  left: 0;
  width: 0;
  height: calc(100% -  7px * 2);
}
.startup-error-title {
  font-weight: bold;
  padding-bottom: 10px;
}
/* --- z-index --- */
/* Rule: All child elements of .scout get the same z-index 0 assigned. This spawns a new stacking context for each */
/* of these elements (iff they are "positioned"). To bring a new element to the top, add it to the end of the list. */
/* https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context */
.scout > .desktop-navigation,
.scout > .desktop-header,
.scout > .desktop-bench,
.scout > .splitter,
.scout > .glasspane,
.scout > .busyindicator,
.scout > .dialog,
.scout > .popup-window,
.scout > .messagebox,
.scout > .file-chooser,
.scout > .tooltip,
.scout > .popup,
.scout > .notifications {
  z-index: 0;
}
noscript {
  display: block;
}
noscript > .wrapper > .box-content > h1 {
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 13px;
}
/* Internet explorer applies the -ms-user-select setting: none (inherited from body) also to iframe contents.
 * Other browsers do not, websites within an iframe should decide on their own if they are selectable (or not).
 * Reset to default.
 */
iframe {
  -ms-user-select: element;
}
.error-popup-correlation-id {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-size: 11px;
  color: #808080;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/*
 * Copyright (c) 2010, 2025 BSI Business Systems Integration AG
 *
 * This program and the accompanying materials are made
 * available under the terms of the Eclipse Public License 2.0
 * which is available at https://www.eclipse.org/legal/epl-2.0/
 *
 * SPDX-License-Identifier: EPL-2.0
 */
.accordion {
  /* Necessary if field is not scrollable to prevent overlaps */
  overflow: hidden;
}
.accordion.scrollable {
  padding-right: 15px;
}
.accordion > .group:not(.first):not(.collapse-bottom) > .group-header {
  border-top: 1px solid #DADADA;
}
.accordion > .group > .group-body {
  margin-bottom: 10px;
}
.accordion > .group,
.accordion > .scrollbar {
  opacity: 1;
  transition: opacity 250ms;
}
.accordion.loading > .group,
.accordion.loading > .scrollbar {
  opacity: 0;
}
.accordion.loading > .loading-glasspane > .loading-indicator {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -15px;
  margin-left: -15px;
  -webkit-animation: fade-in 0.15s;
  -moz-animation: fade-in 0.15s;
  -o-animation: fade-in 0.15s;
  animation: fade-in 0.15s;
}
.accordion.loading > .loading-glasspane > .loading-indicator::before {
  -webkit-animation: pulsate 2s cubic-bezier(0.5, 0.1, 0.1, 0.5) infinite;
  -moz-animation: pulsate 2s cubic-bezier(0.5, 0.1, 0.1, 0.5) infinite;
  -o-animation: pulsate 2s cubic-bezier(0.5, 0.1, 0.1, 0.5) infinite;
  animation: pulsate 2s cubic-bezier(0.5, 0.1, 0.1, 0.5) infinite;
  content: '';
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  border: 1px rgba(21, 97, 167, 0.8) solid;
  width: 30px;
  height: 30px;
}
.accordion.loading > .loading-glasspane > .loading-indicator.animate-remove {
  -webkit-animation: fade-out-from-current 0.15s;
  -moz-animation: fade-out-from-current 0.15s;
  -o-animation: fade-out-from-current 0.15s;
  animation: fade-out-from-current 0.15s;
}
/*
 * Copyright (c) 2010, 2023 BSI Business Systems Integration AG
 *
 * This program and the accompanying materials are made
 * available under the terms of the Eclipse Public License 2.0
 * which is available at https://www.eclipse.org/legal/epl-2.0/
 *
 * SPDX-License-Identifier: EPL-2.0
 */
.action {
  cursor: pointer;
}
.action:hover {
  color: #1561A7;
}
.action:active {
  color: #1561A7;
}
.action.disabled {
  color: #808080;
  cursor: default;
}
.action.overflown {
  display: none;
}
.action.loading > .text,
.action.loading > .icon,
.action.loading > .submenu-icon {
  opacity: 0;
  transition: opacity 250ms;
}
.action.loading > .loading-indicator {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -10px;
  margin-left: -10px;
  -webkit-animation: fade-in 0.15s;
  -moz-animation: fade-in 0.15s;
  -o-animation: fade-in 0.15s;
  animation: fade-in 0.15s;
}
.action.loading > .loading-indicator::before {
  -webkit-animation: pulsate 2s cubic-bezier(0.5, 0.1, 0.1, 0.5) infinite;
  -moz-animation: pulsate 2s cubic-bezier(0.5, 0.1, 0.1, 0.5) infinite;
  -o-animation: pulsate 2s cubic-bezier(0.5, 0.1, 0.1, 0.5) infinite;
  animation: pulsate 2s cubic-bezier(0.5, 0.1, 0.1, 0.5) infinite;
  content: '';
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  border: 1px rgba(21, 97, 167, 0.8) solid;
  width: 20px;
  height: 20px;
}
.action.loading > .loading-indicator.animate-remove {
  -webkit-animation: fade-out-from-current 0.15s;
  -moz-animation: fade-out-from-current 0.15s;
  -o-animation: fade-out-from-current 0.15s;
  animation: fade-out-from-current 0.15s;
}
/*
 * Copyright (c) 2010, 2023 BSI Business Systems Integration AG
 *
 * This program and the accompanying materials are made
 * available under the terms of the Eclipse Public License 2.0
 * which is available at https://www.eclipse.org/legal/epl-2.0/
 *
 * SPDX-License-Identifier: EPL-2.0
 */
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1561A7;
  background-color: transparent;
  --border-color: #1561A7;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  cursor: pointer;
  padding: 2px 7px;
}
.button.borderless {
  background-color: transparent;
  border: 0;
}
.button.borderless:focus {
  outline: none;
  box-shadow: inset 0 0 0 3px #93c5f4;
}
.button > .text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}
.button > .icon {
  /* Padding only relevant for icons larger than the container */
  padding-top: 2px;
  padding-bottom: 2px;
}
.button > .icon.with-label {
  margin-right: 8px;
}
.button > .icon.loading,
.button > .icon.broken {
  display: none !important;
  /* NOSONAR (!important is okay here) */
}
.button > .icon.image-icon {
  max-height: 100%;
}
.button > .font-icon {
  font-size: 16px;
}
.button > .submenu-icon {
  font-family: scoutIcons, Arial, sans-serif;
  font-weight: normal;
  speak: none;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  padding-left: 8px;
}
.selected.button > .submenu-icon {
  -webkit-transform: rotateX(180deg) translateY(-1px);
  -ms-transform: rotateX(180deg) translateY(-1px);
  transform: rotateX(180deg) translateY(-1px);
}
.button > .button-label,
.button > .icon,
.button > .submenu-icon {
  opacity: 1;
  transition: opacity 250ms;
}
.button:hover {
  color: #1561A7;
  background-color: rgba(0, 0, 0, 0.08);
}
.button:active,
.button.active {
  color: #1561A7;
  background-color: rgba(0, 0, 0, 0.12);
}
.button.selected {
  color: #fff;
  background-color: #1561A7;
  border-color: #1561A7;
}
.button.selected:hover {
  background-color: #014786;
  border-color: #014786;
}
.button.selected.active,
.button.selected:active {
  background-color: #012c53;
  border-color: #012c53;
}
.button.selected.has-popup {
  color: #1561A7;
  background-color: rgba(0, 0, 0, 0.12);
}
.button:focus {
  outline: none;
  box-shadow: 0 0 0 3px #93c5f4;
  border-color: #64adf0;
}
.button.default {
  background-color: #1561A7;
  /* border is necessary to align the text with text from buttons with a real border */
  border-color: #1561A7;
  color: #fff;
}
.button.default:hover {
  background-color: #014786;
  border-color: #014786;
}
.button.default:active,
.button.default.active {
  color: #fff;
  background-color: #012c53;
  border-color: #012c53;
}
.button.default.selected {
  color: #fff;
  background-color: #012c53;
  border-color: #012c53;
}
.button.default:focus {
  outline: none;
  box-shadow: 0 0 0 3px #93c5f4;
  border-color: #64adf0;
}
.button:disabled,
.button.disabled {
  background-color: transparent;
  border-color: #DADADA;
  color: #808080;
  cursor: default;
}
.button:disabled:hover,
.button.disabled:hover,
.button:disabled.active,
.button.disabled.active,
.button:disabled:active,
.button.disabled:active,
.button:disabled.selected,
.button.disabled.selected {
  background-color: transparent;
  border-color: #DADADA;
  color: #808080;
}
.button:disabled.selected,
.button.disabled.selected {
  color: #fff;
  background-color: #808080;
  border-color: #808080;
}
.button:disabled.selected.has-popup,
.button.disabled.selected.has-popup {
  color: #808080;
  background-color: rgba(0, 0, 0, 0.12);
  border-color: rgba(0, 0, 0, 0.12);
}
.button.loading > .button-label,
.button.loading > .icon,
.button.loading > .submenu-icon {
  opacity: 0;
  transition: opacity 250ms;
}
.button.loading > .loading-indicator {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -10px;
  margin-left: -10px;
  -webkit-animation: fade-in 0.15s;
  -moz-animation: fade-in 0.15s;
  -o-animation: fade-in 0.15s;
  animation: fade-in 0.15s;
}
.button.loading > .loading-indicator::before {
  -webkit-animation: pulsate 2s cubic-bezier(0.5, 0.1, 0.1, 0.5) infinite;
  -moz-animation: pulsate 2s cubic-bezier(0.5, 0.1, 0.1, 0.5) infinite;
  -o-animation: pulsate 2s cubic-bezier(0.5, 0.1, 0.1, 0.5) infinite;
  animation: pulsate 2s cubic-bezier(0.5, 0.1, 0.1, 0.5) infinite;
  content: '';
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  border: 1px rgba(21, 97, 167, 0.8) solid;
  width: 20px;
  height: 20px;
}
.button.loading > .loading-indicator.animate-remove {
  -webkit-animation: fade-out-from-current 0.15s;
  -moz-animation: fade-out-from-current 0.15s;
  -o-animation: fade-out-from-current 0.15s;
  animation: fade-out-from-current 0.15s;
}
.button.loading.default > .loading-indicator::before {
  border-color: #fff;
}
/*
 * Copyright (c) 2010, 2024 BSI Business Systems Integration AG
 *
 * This program and the accompanying materials are made
 * available under the terms of the Eclipse Public License 2.0
 * which is available at https://www.eclipse.org/legal/epl-2.0/
 *
 * SPDX-License-Identifier: EPL-2.0
 */
/**
 * Used for static pages like login, logout, unsupported-browser and noscript section.
 * Note: This box must not depend on javascript because it is used for the noscript section as well.
 */
.box {
  display: table;
  position: absolute;
  height: 75%;
  width: 100%;
}
.box > .wrapper {
  display: table-cell;
  vertical-align: middle;
}
.box-content {
  border: 0 solid #DADADA;
  border-radius: 12px;
  background-color: #fff;
  max-width: 450px;
  margin: 15px auto;
  padding: 45px 95px 50px 95px;
  box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.2);
  font-size: 14px;
}
.box-content > .header {
  text-align: center;
}
.box-content > .header > .logo {
  margin-top: 4px;
  margin-bottom: 40px;
  max-height: 30px;
}
.box-content.small > .header > .logo {
  max-width: 50%;
}
.box-content > .button-bar {
  padding-top: 32px;
  text-align: center;
}
.box-content > .button-bar > .button {
  padding: 7px 7px;
  font-size: 14px;
}
.box-content.centered {
  text-align: center;
}
@media (max-width: 490px) {
  .box-content {
    padding: 40px;
    margin-left: 10px;
    margin-right: 10px;
  }
  .box-content > .header > .logo {
    margin-bottom: 30px;
    margin-top: 0;
  }
}
@media (max-height: 400px) {
  .box-content {
    padding-top: 25px;
    padding-bottom: 25px;
  }
  .box-content > .header > .logo {
    margin-bottom: 20px;
    margin-top: 0;
  }
}
@media (max-height: 700px) {
  .box {
    height: calc(100% -  15px * 2);
  }
}
/*
 * Copyright (c) 2010, 2023 BSI Business Systems Integration AG
 *
 * This program and the accompanying materials are made
 * available under the terms of the Eclipse Public License 2.0
 * which is available at https://www.eclipse.org/legal/epl-2.0/
 *
 * SPDX-License-Identifier: EPL-2.0
 */
.box-buttons > .box-button {
  padding: 6px 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 16px;
  min-width: 104px;
}
.box-buttons > .box-button:last-child {
  margin-right: 0;
}
/*
 * Copyright (c) 2010, 2023 BSI Business Systems Integration AG
 *
 * This program and the accompanying materials are made
 * available under the terms of the Eclipse Public License 2.0
 * which is available at https://www.eclipse.org/legal/epl-2.0/
 *
 * SPDX-License-Identifier: EPL-2.0
 */
.check-box {
  cursor: pointer;
  position: relative;
  display: inline-block;
  text-align: center;
  width: 18px;
  height: 18px;
  border: 1px solid #999999;
  border-radius: 3px;
  background-color: transparent;
}
.check-box:focus {
  outline: none;
  box-shadow: 0 0 0 3px #93c5f4;
  border-color: #64adf0;
}
.check-box.checked {
  background-color: #1561A7;
  border-color: #1561A7;
  color: #fff;
}
.check-box.checked::before {
  position: absolute;
  display: block;
  line-height: 18px;
  width: 16px;
  font-family: scoutIcons, Arial, sans-serif;
  font-weight: normal;
  speak: none;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: '\E005';
  font-size: 11px;
}
.check-box.undefined {
  background-color: #1561A7;
  border-color: #1561A7;
}
.check-box.undefined::before {
  content: '';
  position: absolute;
  top: calc(50% - 1px);
  left: calc(50% - 5px);
  width: 10px;
  border-radius: 1px;
  height: 2px;
  background-color: #fff;
}
.check-box.disabled {
  cursor: default;
  border-color: #DADADA;
}
.check-box.disabled.checked {
  background-color: #808080;
  border-color: #808080;
}
.check-box.disabled.undefined {
  background-color: #808080;
  border-color: #808080;
}
#scout .checkbox-checked-disabled {
  background-color: #808080;
  border-color: #808080;
}
/*
 * Copyright (c) 2010, 2024 BSI Business Systems Integration AG
 *
 * This program and the accompanying materials are made
 * available under the terms of the Eclipse Public License 2.0
 * which is available at https://www.eclipse.org/legal/epl-2.0/
 *
 * SPDX-License-Identifier: EPL-2.0
 */
.calendar {
  white-space: nowrap;
  padding-left: 0;
}
.calendar-scrollable-components {
  height: 100%;
}
.calendar-header {
  position: relative;
  display: block;
  white-space: nowrap;
  padding: 8px 20px 12px 0;
}
.calendar-header > .busyindicator-label {
  display: table-cell;
  vertical-align: middle;
  text-indent: 0;
}
.calendar-header.mobile {
  padding-right: 6px;
}
.calendar-header-row {
  display: table;
  width: 100%;
}
.calendar-header-row.last {
  padding-top: 10px;
}
.calendar-range {
  display: table-cell;
  vertical-align: middle;
  padding-left: 8px;
  width: 1%;
}
.calendar-previous,
.calendar-today,
.calendar-next {
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  text-align: center;
  height: 30px;
  color: #000;
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.23);
  border-radius: 3px;
  margin-right: 5px;
  line-height: 29px;
}
.calendar-previous:hover,
.calendar-today:hover,
.calendar-next:hover {
  color: #1561A7;
}
.calendar-today {
  padding-left: 15px;
  padding-right: 15px;
}
.calendar-title {
  display: table-cell;
  vertical-align: middle;
  color: #000;
}
.calendar-header-row.last > .calendar-title {
  text-align: center;
}
.calendar-select {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  font-size: 16px;
  margin-left: 15px;
  margin-right: 15px;
}
.calendar-previous:hover::before,
.calendar-next:hover::before {
  color: #1561A7;
}
.calendar-previous::before {
  font-family: scoutIcons, Arial, sans-serif;
  font-weight: normal;
  speak: none;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  position: relative;
  font-size: 20px;
  width: 29px;
  content: '\E012';
  color: #000;
  text-align: center;
}
.calendar-next::before {
  font-family: scoutIcons, Arial, sans-serif;
  font-weight: normal;
  speak: none;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  position: relative;
  font-size: 20px;
  width: 29px;
  content: '\E013';
  color: #000;
  text-align: center;
}
.calendar-commands {
  display: table-cell;
  vertical-align: middle;
  text-align: right;
  white-space: nowrap;
}
.calendar-mode,
.calendar-toggle-sidebar,
.calendar-toggle-list {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  height: 30px;
  line-height: 29px;
  cursor: pointer;
}
.calendar-mode {
  padding: 0 8px;
  min-width: 65px;
  border-top: 1px solid rgba(0, 0, 0, 0.23);
  border-bottom: 1px solid rgba(0, 0, 0, 0.23);
  border-left: 1px solid rgba(0, 0, 0, 0.23);
}
.calendar-mode.first {
  border-left: 1px solid rgba(0, 0, 0, 0.23);
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.calendar-mode.last {
  border-right: 1px solid rgba(0, 0, 0, 0.23);
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  margin-right: 5px;
}
.calendar-mode:hover {
  color: #1561A7;
}
.calendar-mode.selected {
  color: #2F3C45;
  background-color: #E9F0F6;
}
.calendar-mode-menu {
  padding: 5px 12px;
  border: 1px solid rgba(0, 0, 0, 0.23);
  border-radius: 3px;
}
.calendar-toggle-sidebar,
.calendar-toggle-list {
  margin-left: 5px;
}
.calendar-toggle-sidebar:hover::before,
.calendar-toggle-list:hover::before {
  color: #1561A7;
}
.calendar-toggle-sidebar::before {
  font-family: scoutIcons, Arial, sans-serif;
  font-weight: normal;
  speak: none;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  position: relative;
  font-size: 18px;
  width: 29px;
  content: '\E029';
  color: #000;
  text-align: center;
}
.calendar-toggle-list::before {
  font-family: scoutIcons, Arial, sans-serif;
  font-weight: normal;
  speak: none;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  position: relative;
  font-size: 18px;
  width: 29px;
  content: '\E01C';
  color: #000;
  text-align: center;
}
.calendar-component {
  display: flex;
  flex-direction: row;
  position: relative;
  float: left;
  line-height: 24px;
  height: 24px;
  min-height: 20px;
  width: calc(100% -  32px);
  text-align: left;
  color: #000;
  /* Default colors used when component has no specific class */
  background-color: #E9F0F6;
  /* Colors for type Appointment */
  /* Colors for type Task */
}
.calendar-component > .content {
  overflow: hidden;
  text-overflow: ellipsis;
}
.calendar-component > .content > .icon {
  padding-right: 3px;
  font-size: 14px;
  display: inline-block;
  min-width: 20px;
}
.calendar-component > .content > .subject {
  vertical-align: top;
}
.calendar-component > .calendar-component-leftcolorborder {
  flex-shrink: 0;
  top: 0;
  left: 0;
  width: 4px;
  margin-right: 4px;
  background-color: #C1DEF9;
  /* Default colors used when component has no specific class */
}
.calendar-component:hover {
  background-color: #C1DEF9;
}
.calendar-component:hover > .calendar-component-leftcolorborder {
  background-color: #1561A7;
}
.calendar-component.comp-selected {
  background-color: #74A8D8;
}
.calendar-component.comp-selected > .calendar-component-leftcolorborder {
  background-color: #1561A7;
}
.calendar-component.calendar-appointment {
  background-color: #FCF0E5;
}
.calendar-component.calendar-appointment > .calendar-component-leftcolorborder {
  background-color: #FFBE6B;
}
.calendar-component.calendar-appointment:hover {
  background-color: #FDE1B1;
}
.calendar-component.calendar-appointment:hover > .calendar-component-leftcolorborder {
  background-color: #FE9915;
}
.calendar-component.calendar-appointment.comp-selected {
  background-color: #FFBE6B;
}
.calendar-component.calendar-appointment.comp-selected > .calendar-component-leftcolorborder {
  background-color: #FE9915;
}
.calendar-component.calendar-task {
  background-color: #DCFBF5;
}
.calendar-component.calendar-task > .calendar-component-leftcolorborder {
  background-color: #67E9D1;
}
.calendar-component.calendar-task:hover {
  background-color: #BDF2E8;
}
.calendar-component.calendar-task:hover > .calendar-component-leftcolorborder {
  background-color: #67E9D1;
}
.calendar-component.calendar-task.comp-selected {
  background-color: #67E9D1;
}
.calendar-component.calendar-task.comp-selected > .calendar-component-leftcolorborder {
  background-color: #1FC9AA;
}
.widget-popup > .calendar-component-tooltip-content.tooltip-content {
  padding: 0;
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-size: 13px;
  max-width: 300px;
  max-height: 500px;
}
.calendar-component-header {
  padding: 18px 18px 10px 18px;
  background-color: #F5F5F5;
}
.calendar-component-header:not(.with-description) {
  padding-bottom: 18px;
}
.calendar-component-title-label {
  color: #666666;
  font-size: 11px;
  padding-bottom: 4px;
}
.calendar-component-title {
  font-weight: bold;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar-component-intro {
  font-size: 11px;
  margin-top: 9px;
  color: #999999;
}
.calendar-component-intro > .icon {
  padding-right: 9px;
  display: inline-block;
  font-size: 12px;
  line-height: 15px;
  min-width: 27px;
  text-align: center;
  vertical-align: middle;
}
.calendar-component-description-container {
  padding: 10px 18px 18px 18px;
}
.calendar-component-description-element {
  display: flex;
  align-items: center;
}
.calendar-component-description-element > .icon {
  padding-right: 9px;
  display: inline-block;
  min-width: 27px;
  vertical-align: top;
  text-align: center;
}
.calendar-component-description-element > .text {
  display: inline-block;
  vertical-align: top;
  word-wrap: break-word;
  word-break: break-word;
}
.calendar-component-description-element:not(.first) {
  padding-top: 10px;
  border-top: 1px solid #DADADA;
}
.calendar-component-description-element:not(.last) {
  padding-bottom: 10px;
}
.calendar-list-container {
  display: inline-block;
  vertical-align: top;
  width: 0;
  padding: 0;
  overflow: hidden;
}
.calendar-list {
  width: 270px;
  padding: 0 0 0 30px;
  height: 100%;
}
.calendar-list > .calendar-component {
  cursor: pointer;
  height: auto;
  width: calc(100% - 10px);
  background-color: transparent !important;
  /* NOSONAR (required to override original component background color) */
  margin-top: 12px;
  color: #000;
}
.calendar-list > .calendar-component > .content {
  width: 100%;
  white-space: normal;
  line-height: normal;
}
.calendar-list-title {
  position: relative;
  width: calc(100% - 10px);
  height: 25px;
  line-height: 25px;
  font-weight: bold;
  color: #000;
}
.calendar-list-title::after {
  position: absolute;
  height: 1px;
  width: 100%;
  left: 0;
  bottom: -1px;
  content: '';
  background-color: #DADADA;
}
.calendar-grids {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  --min-full-day-components: 2;
  --max-full-day-components: 4;
  --full-day-components: 0;
  --day-of-month-height: 30px;
  --component-height: 24px;
  --component-vgap: 2px;
  --component-height-with-gap: calc(var(--component-height) + var(--component-vgap));
  --top-grid-height: calc(25px + var(--day-of-month-height) + (max(min(var(--full-day-components), var(--max-full-day-components)), var(--min-full-day-components)) * var(--component-height-with-gap)) - (min(max(var(--full-day-components), var(--min-full-day-components)), 1) * var(--component-vgap)) + 1px);
}
.calendar-grids.calendar-grids-month {
  --top-grid-height: 25px + 1px;
}
.calendar-grid {
  display: block;
  height: calc(100% -  var(--top-grid-height));
  padding-right: 20px;
}
.calendar-grid + .scroll-shadow {
  --scroll-shadow-inset-right: 20px;
}
.calendar-grid.mobile {
  padding-right: 6px;
}
.calendar-grid.mobile + .scroll-shadow {
  --scroll-shadow-inset-right: 6px;
}
.calendar-top-grid {
  display: block;
  overflow: hidden;
  border-bottom: 1px solid #DADADA;
  height: var(--top-grid-height);
  margin-right: 20px;
}
.calendar-top-grid.mobile {
  margin-right: 6px;
}
.calendar-week-header,
.calendar-week {
  display: block;
  width: 100%;
  white-space: nowrap;
}
.calendar-week-allday-container {
  height: calc(100% -  25px);
}
.calendar-week-allday-container > .calendar-week-name {
  height: calc(100% -  25px - 9px);
}
.calendar-week-allday-container > .calendar-day > .resource-column {
  padding-top: 30px;
}
.calendar-week-header,
.calendar-week-header > .calendar-day-name,
.calendar-week-header > .calendar-week-name,
.calendar-week-header > .calendar-day-name > .resource-column {
  height: 25px;
}
.calendar-week {
  position: relative;
  overflow: hidden;
}
.calendar-week-name {
  width: 45px;
}
.calendar-day-name,
.calendar-week-name,
.calendar-day,
.resource-column {
  position: relative;
  display: inline-block;
  overflow: hidden;
  z-index: 1;
  /* draw over grid */
}
.calendar-day {
  padding: 0;
  height: 100%;
  /* helps to center days between 10 and 19 nicer */
}
.calendar-day:not(.calendar-no-label)::before {
  position: absolute;
  content: attr(data-day-name);
  color: #666666;
  left: 7px;
  top: 7px;
  z-index: 1;
  /* draw over calendar items */
}
.calendar-day.out {
  background-color: transparent;
}
.calendar-day.out::before {
  color: #CFCFCF;
}
.calendar-day.weekend::before {
  color: #014786;
}
.calendar-day.weekend-out {
  background-color: transparent;
}
.calendar-day.weekend-out::before {
  color: #74A8D8;
}
.calendar-day.now::before {
  color: #FE9915;
  font-weight: bold;
}
.calendar-day.selected.center-nice::before {
  padding-right: 2px;
}
.calendar-day .calendar-component {
  margin-left: 32px;
  margin-bottom: 1px;
  margin-top: 1px;
}
.calendar-day .calendar-component.component-month.compact {
  top: 30px;
  margin-left: 0;
  width: 100%;
}
.calendar-day .calendar-component.component-day,
.calendar-day .calendar-component.component-task {
  position: absolute;
  word-break: break-all;
  left: 0;
  margin: 0;
  width: 100%;
  height: 24px;
  line-height: 24px;
}
.calendar-day .calendar-component.component-open-top {
  overflow: visible;
  padding-top: 10px;
  /* Compensate for open top padding */
}
.calendar-day .calendar-component.component-open-top > .calendar-component-leftcolorborder {
  height: calc(100% + 10px);
  top: -10px;
  position: relative;
}
.calendar-day .calendar-component.component-open-top::before {
  position: absolute;
  display: block;
  content: '';
  width: 16px;
  height: 16px;
  left: calc(50% - 8px);
  top: -8px;
  transform: rotate(45deg);
  background-color: #fff;
}
.calendar-day .calendar-component.component-open-bottom {
  overflow: visible;
  border-bottom: none;
  /* Compensate for calendar-component border */
}
.calendar-day .calendar-component.component-open-bottom::after {
  position: absolute;
  display: block;
  content: '';
  width: 16px;
  height: 16px;
  left: calc(50% - 8px);
  bottom: -8px;
  transform: rotate(45deg);
  background-color: inherit;
}
.calendar-day.selected.now::before {
  left: 4px;
  top: 3px;
  font-weight: normal;
  border: solid 4px #FE9915;
  border-radius: 50%;
  background-color: #FE9915;
  color: #fff;
}
.calendar-day.selected::before {
  text-align: center;
  left: 4px;
  top: 3px;
  width: 23px;
  height: 23px;
  border: solid 4px #1561A7;
  border-radius: 50%;
  background-color: #1561A7;
  color: #fff;
}
.calendar-week-name {
  font-size: 11px;
  color: #999999;
  padding-top: 9px;
  text-align: center;
}
.calendar-day::after,
.calendar-day-name::after,
.resource-column::after {
  position: absolute;
  width: 1px;
  height: 100%;
  left: 0;
  top: 0;
  content: '';
  background-color: #DADADA;
}
.calendar-week:not(.calendar-week-noborder)::after {
  position: absolute;
  height: 1px;
  width: 100%;
  left: 0;
  top: 0;
  content: '';
  background-color: #DADADA;
}
.calendar-day-name::before {
  position: absolute;
  content: attr(data-day-name);
  color: #666666;
  left: 7px;
  bottom: 0;
  z-index: 1;
  /* draw over calendar items */
  line-height: 25px;
}
.calendar-week-axis {
  position: absolute;
  left: 39px;
  width: calc(100% - 45px + 6px);
}
.calendar-week-axis:not(.first)::after {
  position: absolute;
  height: 1px;
  width: 100%;
  content: '';
  background-color: rgba(0, 0, 0, 0.07);
}
.calendar-week-axis:not(.first).hour::after {
  background-color: rgba(0, 0, 0, 0.2);
}
.calendar-week-axis:not(.first)::before {
  position: absolute;
  font-size: 12px;
  left: -35px;
  top: -8px;
  color: #999999;
  content: attr(data-axis-name);
}
.calendar-week-task {
  position: relative;
  left: 0;
  width: 100%;
}
.calendar-week-task::after {
  position: relative;
  height: 1px;
  width: 100%;
  content: '';
  background-color: #DADADA;
}
.calendar-week-task::before {
  position: absolute;
  font-size: 11px;
  top: 28px;
  left: 7px;
  color: #999999;
  content: attr(data-axis-name);
}
.calendar-range-selector {
  background-color: #1561A7;
  position: absolute;
  opacity: 0.3;
  width: 100%;
}
.calendar-day > .resource-column {
  height: 100%;
}
.resource-column::before {
  position: absolute;
  content: attr(data-resource-name);
  color: #666666;
  left: 7px;
  bottom: 0;
  z-index: 1;
  /* draw over calendar items */
  line-height: 25px;
}
/*
 * Copyright (c) 2010, 2024 BSI Business Systems Integration AG
 *
 * This program and the accompanying materials are made
 * available under the terms of the Eclipse Public License 2.0
 * which is available at https://www.eclipse.org/legal/epl-2.0/
 *
 * SPDX-License-Identifier: EPL-2.0
 */
.calendar-color-red.calendar-component {
  background-color: #FEE0E0;
}
.calendar-color-red.calendar-component > .calendar-component-leftcolorborder {
  background-color: #FF8888;
  background-image: repeating-linear-gradient(-48deg, transparent 0 5px, rgba(0, 0, 0, 0) 5px 10px);
}
.calendar-color-red.calendar-component.hover {
  background-color: #FFBFBF;
}
.calendar-color-red.calendar-component.hover > .calendar-component-leftcolorborder {
  background-color: #FF5555;
  background-image: none;
}
.calendar-color-red.calendar-component.comp-selected {
  background-color: #FF8888;
}
.calendar-color-red.calendar-component.comp-selected > .calendar-component-leftcolorborder {
  background-color: #FF5555;
  background-image: none;
}
.calendar-color-red > .tree-node-checkbox > .check-box.checked {
  background-color: #FF5555;
  border-color: #FF5555;
}
.calendar-color-green.calendar-component {
  background-color: #DCFBF5;
}
.calendar-color-green.calendar-component > .calendar-component-leftcolorborder {
  background-color: #67E9D1;
  background-image: repeating-linear-gradient(-48deg, transparent 0 5px, rgba(0, 0, 0, 0) 5px 10px);
}
.calendar-color-green.calendar-component.hover {
  background-color: #BDF2E8;
}
.calendar-color-green.calendar-component.hover > .calendar-component-leftcolorborder {
  background-color: #1FC9AA;
  background-image: none;
}
.calendar-color-green.calendar-component.comp-selected {
  background-color: #67E9D1;
}
.calendar-color-green.calendar-component.comp-selected > .calendar-component-leftcolorborder {
  background-color: #1FC9AA;
  background-image: none;
}
.calendar-color-green > .tree-node-checkbox > .check-box.checked {
  background-color: #1FC9AA;
  border-color: #1FC9AA;
}
.calendar-color-orange.calendar-component {
  background-color: #FCF0E5;
}
.calendar-color-orange.calendar-component > .calendar-component-leftcolorborder {
  background-color: #FFBE6B;
  background-image: repeating-linear-gradient(-48deg, transparent 0 5px, rgba(0, 0, 0, 0) 5px 10px);
}
.calendar-color-orange.calendar-component.hover {
  background-color: #FDE1B1;
}
.calendar-color-orange.calendar-component.hover > .calendar-component-leftcolorborder {
  background-color: #FE9915;
  background-image: none;
}
.calendar-color-orange.calendar-component.comp-selected {
  background-color: #FFBE6B;
}
.calendar-color-orange.calendar-component.comp-selected > .calendar-component-leftcolorborder {
  backgrou