/* Naming Convention: BEM convention:
***Block component***
.btn {}
***Element that depends upon the block***
.btn__price {}
***Modifier that changes the style of the block***
.btn--orange {}
.btn--big {}
***Extra
Two-parts Names -
*/
/* Styling Note: we can only add Padding and Border for Window, Frame, Splitter and Notebook */

/*******************************
 * General *
 ********************************/
html {
  /* colors */
  /* https://material.io/design/color/the-color-system.html#color-theme-creation */
  --primary-color: #fafafa;
  --primary-light-color: #ffffff;
  --primary-dark-color: #c7c7c7;
  --secondary-color: #1e88e5;
  --secondary-light-color: #6ab7ff;
  --secondary-dark-color: #005cb2;
  --error-color: #ff0000;
  --on-primary-color: #000;
  --on-secondary-color: #000;
  --on-error-color: #fff;
  --active-icon-color: #000;
  /* opacity 50% of active */
  --inactive-icon-color: #7f7f7f;
  --window-header-height: 32px;
  --button-border-radius: 4px;
  --disabled-foreground-color: rgba(0, 0, 0, 0.26);
  --window-box-shadow-transition: box-shadow 0.3s
    cubic-bezier(0.25, 0.8, 0.25, 1);
  --window-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
    0 3px 6px rgba(0, 0, 0, 0.23);
  --window-focused-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
    0 10px 10px rgba(0, 0, 0, 0.22);
  --splitter-sash-color: rgb(70, 70, 70);
  --splitter-active-color: #797979;
  --notebook-content-border-color: #a7a7a7;
  --notebook-tab-visited-background-color: #fff;
  --notebook-tab-visited-border-color: #f8f8f8;
  --webkit-progress-bar-box-shadow: 0 0.143em 0.357em rgba(0, 0, 0, 0.25) inset;
  --webkit-progress-bar-background-image: -webkit-linear-gradient(
      -45deg,
      transparent 33%,
      rgba(0, 0, 0, 0.1) 33%,
      rgba(0, 0, 0, 0.1) 66%,
      transparent 66%
    ),
    -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25)),
    -webkit-linear-gradient(left, #09c, #f44);
  --moz-progress-bar-background-image: -moz-linear-gradient(
      135deg,
      transparent 33%,
      rgba(0, 0, 0, 0.1) 33%,
      rgba(0, 0, 0, 0.1) 66%,
      transparent 66%
    ),
    -moz-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25)),
    -moz-linear-gradient(left, #09c, #f44);
  /* This z-index variable is used for the full-screen window as well as menus and notifications. The z-index
  of the full-screen window should be higher than the top window and z-index of menus and notifications should
  be the highest even higher than the full screen window */
  --zIndex: 0;
  /* 100vh is the fallback for browsers that do not support Custom Properties */
  height: var(--bvh, 100vh);
  /* right and left padding for text fields */
  --textfield-padding-right: 0.35em;
  --textfield-padding-top: 0.2em;
  --min-mouse-target-width: 26px;
  --min-mouse-target-height: 26px;
  --min-touch-target-height: 36px;
  --min-touch-target-width: 64px;
  --border-radius: 0.286em;
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*:focus {
  outline: 0.01em auto var(--secondary-light-color);
}

body {
  background-color: var(--primary-color);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/*******************************
 * Website Header  *
 ********************************/

body > header {
  display: flex;
  align-items: center;
  order: 0;
  background-color: var(--primary-light-color);
}

header nav {
  display: flex;
  width: 100%;
}

/*******************************
 * Website Footer (Taskbar) *
 ********************************/

footer {
  display: flex;
  align-self: flex-end;
  order: 2;
  flex-shrink: 0;
  background-color: var(--secondary-light-color);
  width: 100%;
  align-items: center;
}

.taskbar {
  display: flex;
  overflow: hidden;
  flex: 1 1 0;
}

.taskbar div {
  display: flex;
  align-items: center;
  color: var(--on-secondary-color);
  margin: 0 0.2em;
  border-bottom: 0.25em solid var(--secondary-dark-color);
  max-width: 10em;
  flex: 1 1 0;
  overflow: hidden;
  min-height: 2em;
}

.taskbar div span {
  order: 1;
  margin-left: 0.2em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.taskbar__system-tray {
  display: flex;
  margin-left: auto;
}

.TaskbarIcon {
  width: 1.4em;
  height: 1.4em;
  margin: 0 0.2em;
}

.taskbar div:hover {
  background-color: var(--secondary-dark-color);
}

.taskbar--selected {
  background-color: var(--secondary-dark-color);
}

.toggle-device {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: inherit;
  border: 0;
  padding: 0;
  order: 1;
}

.toggle-device > svg {
  width: 1.5em;
  height: 1.4em;
  fill: var(--active-icon-color);
}

.taskbar img,
.taskbar svg {
  flex-shrink: 0;
  max-width: 2em;
  max-height: 2em;
}

.taskbar__close {
  order: 2;
  margin-left: auto;
  fill: var(--error-color);
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.3em;
}

/*******************************
 * Context Menu *
 ********************************/

.Contextmenu {
  position: absolute;
  border: 0;
  z-index: calc(var(--zIndex) + 1);
  background-color: var(--primary-color);
}

.Contextmenu .Menu__item__container:hover,
.Contextmenu__items .Menu__item__container:hover {
  background-color: var(--secondary-light-color);
}

/*******************************
 * Universe *
 ********************************/

.Universe {
  flex: 1 0 auto;
  order: 1;
  position: relative;
  overflow: hidden;
}

.Universe:focus {
  outline: none;
}

/*******************************
 * Window *
 ********************************/

.Window {
  display: flex;
  flex-direction: column;
  position: absolute;
  border: 0;
  box-shadow: var(--window-box-shadow);
  background-color: var(--primary-light-color);
  transition: var(--window-box-shadow-transition);
  border-radius: var(--border-radius);
}

/*** Header ***/
.Window header {
  display: flex;
  align-items: stretch;
  background-color: var(--primary-light-color);
  overflow: hidden;
  height: var(--window-header-height);
  opacity: 0.5;
  order: 0;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.Window__icon {
  margin: 0.1em 0.4em;
  max-height: 1.45em;
  align-self: center;
  order: 0;
}

.Window__titlebar {
  flex: 1;
  order: 1;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  touch-action: none;
}

/* in a custom titlebar, we don't have access to the element in order to set the `draggable` attribute; 
instead we can use the following CSS property */
.Window__titlebar img,
.Window__titlebar svg {
  -webkit-user-drag: none;
}

.Window__titlebar .Menubar {
  position: absolute;
  white-space: nowrap;
}

.Window__caption {
  color: var(--on-primary-color);
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  touch-action: none;
}

.Window__caption--center {
  margin: auto 0;
  /* Prevent the text from cutting off from bottom -> Improve */
  padding: 0.1em;
}

.Window__buttons {
  cursor: pointer;
  background-color: inherit;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.01em;
  order: 2;
  width: var(--window-header-height);
}

.Window__buttons > svg {
  width: 1.2em;
  height: 1.2em;
  fill: var(--active-icon-color);
}

.Window__close-button:hover {
  fill: var(--error-color);
}

.Window__buttons:hover {
  background-color: var(--primary-dark-color);
}

/* selecting close button */
.Window__buttons:last-child:hover {
  background-color: var(--error-color);
}

.Window__buttons:last-child:hover > svg {
  fill: var(--on-error-color);
}

/*** Window Menubar ***/
.Window > nav {
  order: 1;
}

/*** Window Content ***/
.Window__body {
  background-color: var(--primary-color);
  position: relative;
  overflow: auto hidden;
  flex: 1 1 auto;
  order: 2;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

/*** Window Resize Handles ***/
.resize-handle {
  position: absolute;
  opacity: 0;
  touch-action: none;
  width: 0.643em;
  height: 0.643em;
  top: 0;
  left: 0;
}

.resize-handle-n {
  transform: translateY(-50%);
  width: 100%;
  cursor: n-resize;
}

.resize-handle-s {
  top: 100%;
  transform: translateY(-50%);
  width: 100%;
  cursor: s-resize;
}

.resize-handle-w {
  transform: translateX(-50%);
  height: 100%;
  cursor: w-resize;
}

.resize-handle-e {
  left: 100%;
  transform: translateX(-50%);
  height: 100%;
  cursor: e-resize;
}

.resize-handle-nw {
  transform: translate(-50%, -50%);
  cursor: nw-resize;
}

.resize-handle-ne {
  left: 100%;
  transform: translate(-50%, -50%);
  cursor: ne-resize;
}

.resize-handle-sw {
  top: 100%;
  transform: translate(-50%, -50%);
  cursor: sw-resize;
}

.resize-handle-se {
  top: 100%;
  left: 100%;
  transform: translate(-50%, -50%);
  cursor: se-resize;
}

.Window--maximize {
  border: 0;
  padding: 0;
}

.Window--maximize header {
  cursor: auto;
}

.Window--maximize .resize-handle {
  display: none;
}

/* disable clicking on modal windows's parent when modal windows are shown */
.Window--disabled * {
  pointer-events: none;
}

.Window--disabled {
  cursor: not-allowed;
}

.Window--unsynced {
  display: none !important;
}

.Window--focused {
  outline: none;
  box-shadow: var(--window-focused-box-shadow);
}

.Window--focused header {
  opacity: 1;
}

/*******************************
 * Splitter *
 ********************************/
.Splitter {
  position: absolute;
  background-color: var(--primary-color);
}

.Splitter__sash {
  position: absolute;
  fill: var(--splitter-sash-color);
}

/*******************************
 * Choice *
 ********************************/

.Choice {
  position: absolute;
  min-height: var(--min-mouse-target-height);
  border-radius: var(--border-radius);
}

/*******************************
 * ColourChoice *
 ********************************/

.ColourChoice {
  position: absolute;
  border-radius: var(--button-border-radius);
}

.ColourChoice .button {
  position: relative;
  background-color: inherit;
  color: inherit;
}

.ColourChoice input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/*******************************
 * MessageView *
 ********************************/

.MessageView {
  overflow: auto;
  white-space: pre;
  border: solid var(--secondary-dark-color) 1px;
  padding: 0.143em;
  position: absolute;
  display: grid;
  grid-template-columns: min-content 1fr;
  gap: 0.3em;
  grid-auto-rows: 1em;
  background-color: var(--primary-color);
  color: var(--on-primary-color);
}

/* line number */
.MessageView__line-number::before {
  counter-increment: line;
  content: counter(line);
  white-space: pre;
}

.MessageView__line-number {
  text-align: right;
}

.MessageView__line-number--hide .MessageView__line-number::before {
  display: none;
}

/*******************************
 * ToggleButton *
 ********************************/

.ToggleButton {
  position: absolute;
  background-color: var(--primary-color);
}

.ToggleButton.active {
  background-color: var(--secondary-light-color) !important;
}

/*******************************
 * Radiobox *
 ********************************/

.Radiobox {
  display: flex;
  background-color: var(--primary-color);
  position: absolute;
}

.Radiobox span {
  display: flex;
  flex: 1;
  align-items: center;
  padding: 0.2em 0.3em;
  white-space: nowrap;
}

.Radiobox-V {
  flex-direction: column;
}

.Radiobox__label {
  padding-left: 0.1em;
}

.Radiobox svg {
  display: none;
}

/*******************************
 * Slider *
 ********************************/

.Slider {
  position: absolute;
  margin: 0;
}

/*******************************
 * Progress Bar *
 ********************************/
.ProgressBar {
  position: absolute;
}

progress[value] {
  /* Reset the default appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Chrome */
progress[value]::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 0.143em;
  box-shadow: var(--webkit-progress-bar-box-shadow);
}

progress[value]::-webkit-progress-value {
  transition: width 0.5s;
  background-image: var(--webkit-progress-bar-background-image);
  border-radius: 0.143em;
  background-size: 2.5em 1.429em, 100% 100%, 100% 100%;
}

/* Firefox */
/* TODO: animation in Firefox -> https://snook.ca/archives/html_and_css/animating-progress */
progress[value]::-moz-progress-bar {
  background-image: var(--moz-progress-bar-background-image);
  border-radius: 0.143em;
  background-size: 2.5em 1.429em, 100% 100%, 100% 100%;
}

/*******************************
 * Frame *
 ********************************/

.Frame {
  position: absolute;
  border: 1px inset var(--secondary-dark-color);
}

.Frame > div {
  height: 100%;
  width: 100%;
}

/*******************************
 * Button *
 ********************************/

.Button {
  background-color: var(--primary-color);
  position: absolute;
}

/* common class for all buttons */
.button {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.87);
  outline: none;
  border: none;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  text-decoration: none;
  justify-content: center;
  align-items: center;
  min-height: var(--min-mouse-target-height);
  padding: 0 0.5rem;
  overflow: hidden;
  transition: background 400ms cubic-bezier(0.25, 0.8, 0.25, 1),
    box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

/* in case there is a caption for the button */
.button--caption {
  padding: 0 0.7rem;
}

.button--caption img {
  margin-right: 0.2rem;
}

.button:active {
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
    0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.button[disabled],
.button[disabled]:hover,
.button[disabled]:active {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.14),
    0 0 0 0 rgba(0, 0, 0, 0.12);
  background-color: rgba(0, 0, 0, 0.12);
  color: var(--disabled-foreground-color);
  opacity: 1;
}

.button[disabled] img {
  opacity: 0.26;
}

.button--round {
  border-radius: var(--button-border-radius);
}

.button--ripple {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  animation: ripple 450ms;
  opacity: 0;
}

.button__focus-overlay {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
  background-color: #000;
  transition: opacity 200ms cubic-bezier(0.35, 0, 0.25, 1),
    background-color 200ms cubic-bezier(0.35, 0, 0.25, 1);
}

.button:focus .button__focus-overlay {
  opacity: 0.12;
}

.button:hover:not([disabled]) .button__focus-overlay {
  opacity: 0.04;
}

.button span span {
  white-space: pre;
}

/*******************************
 * Checkbox *
 ********************************/

.Checkbox {
  display: flex;
  align-items: center;
  white-space: nowrap;
  position: absolute;
  min-width: var(--min-mouse-target-width);
  min-height: var(--min-mouse-target-height);
}

.Checkbox__label {
  padding-left: 0.2em;
}

.Checkbox__input {
  position: relative;
  /* to show the focus outline correctly */
  left: 1px;
}

.Checkbox__input:focus-visible {
  outline-offset: 0;
  outline: 1px solid var(--secondary-light-color);
}

/*******************************
 * Notebook *
 ********************************/

.Notebook {
  position: absolute;
  background-color: var(--primary-color);
}

.Notebook--ignore-tab-change {
  cursor: not-allowed;
}

.Notebook__content {
  border: 0.05em solid var(--notebook-content-border-color);
}

/* we cannot use display: hide for hiding the notebook content because then layout doesn't work */
.Notebook__content--hidden {
  visibility: hidden;
}

.Notebook__content > div {
  position: relative;
  height: 100%;
}

/* Notebook Tabs */

.Notebook__tabs {
  white-space: pre;
  overflow: hidden;
  padding-top: 0.2em;
}

.Notebook__tab {
  border: 1px solid rgba(1, 1, 1, 0.1);
  border-radius: 4px 4px 0 0;
  padding: 4px;
  transition: background-color 0.4s, top 0.4s;
  cursor: inherit;
  position: relative;
  top: 4px;
  min-width: 3em;
  min-height: 2em;
  vertical-align: top;
}

.Notebook__tabs:not(.Notebook--ignore-tab-change) .Notebook__tab:hover {
  background-color: var(--secondary-light-color);
}

.Notebook__tab:focus {
  outline: none;
}

.Notebook__tab--visited {
  background-color: var(--notebook-tab-visited-background-color) !important;
  top: 0;
}

/* Notebook Navigation Buttons */

.Notebook__navs {
  position: absolute;
  right: 0;
  top: 0;
  padding: 0;
}

.Notebook__navs svg {
  display: block;
  width: 1.4em;
  height: 1.4em;
}

.Notebook__navs__left,
.Notebook__navs__right {
  padding: 0;
}

.Notebook__navs__left svg {
  transform: rotate(180deg);
}

/********************************
 * Menubar *
 ********************************/
.Menubar {
  display: block;
  background-color: var(--primary-color);
}

.Menubar > .Menu {
  border: none;
  position: static;
}

.Menubar > .Menu:focus > span {
  background-color: var(--secondary-light-color);
}

/*******************************
 * Html *
 ********************************/

.Html {
  position: absolute;
}

.Html body {
  overflow: hidden;
  margin: 0;
}

.Html iframe {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: relative;
}

/*******************************
 * Toolbar Button *
 ********************************/

.ToolbarButton {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid transparent 1px;
  background-color: var(--primary-color);
  min-width: var(--min-mouse-target-width);
  min-height: var(--min-mouse-target-height);
}

/* mobile browsers treat :hover differently than desktop browsers. When you tap a button, it stays in the 
:hover state until you tap somewhere else, causing the effect to "stick." */
@media (hover: hover) {
  .ToolbarButton:hover {
    background-color: var(--secondary-light-color) !important;
  }
}

/*******************************
 * Label *
 ********************************/

.Label {
  display: inline-flex;
  white-space: pre;
  align-items: center;
  position: absolute;
  background-color: transparent !important;
}

/*******************************
 * TextField *
 ********************************/

.TextField {
  position: absolute;
  padding: var(--textfield-padding-top) var(--textfield-padding-right);
  border-radius: var(--border-radius);
  white-space: pre;
}

textarea {
  resize: none;
}

::placeholder {
  /* Uppercase Fashion soll nicht auf Placeholder wirken */
  text-transform: none;
}

/*******************************
 * Grid *
 *******************************/

.Grid {
  background-color: var(--primary-color);
  border: 0.15em inset;
  position: absolute;
}

.GridEditor {
  border: 0;
  padding: 0;
  position: absolute;
  /* in mobile devices, we have set a "min-width" property for all inputs with the type "time" or "date". 
  This "min-width" could be higher than the width of Grid's cell. So with the following line, we ignore that 
  property and the editor's width is equal to the Grid's cell width */
  min-width: unset !important;
}

.Grid__scrolldiv {
  overflow: auto;
  position: relative;
  width: 100%;
  height: 100%;
  /*  -webkit-overflow-scrolling: touch;  Ein Ziehen über die Grenzen hinaus lässt es nicht gut aussehen*/
}

.GridCell {
  position: absolute;
  visibility: hidden;
  padding: 0px;
  border: 1px solid;
}

/*******************************
 * List *
 ********************************/
.List {
  position: absolute;
  background-color: var(--primary-color);
}

.List select,
.List ul {
  width: 100%;
  height: 100%;
}

.List select {
  background-color: inherit;
  color: inherit;
}

.List .selected {
  background-color: var(--secondary-light-color);
  color: var(--on-secondary-color);
}

/* mobile */
.List ul {
  position: relative;
  list-style: none;
  overflow: auto;
  padding: 0;
  /* Only for Safari */
  -webkit-overflow-scrolling: touch;
}

.List ul li {
  min-height: var(--min-touch-target-height);
  line-height: var(--min-touch-target-height);
}

/*******************************
 * Terminal *
 ********************************/

.Terminal {
  position: absolute;
  overflow: hidden;
}

/*******************************
 * Tree *
 ********************************/

.Tree {
  position: absolute;
  overflow: auto;
}

.Tree,
.Tree ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.Tree:focus {
  outline: none;
}

.Tree ul {
  display: flex;
  flex-direction: column;
}

.Tree li {
  cursor: default;
  white-space: pre;
  margin-left: 1.4em;
}

.Tree *,
Tree ul * {
  position: relative;
}

.Tree__branch {
  cursor: pointer;
}

.Tree__branch svg {
  width: 1.5em;
  height: 1.5em;
  cursor: pointer;
  fill: var(--active-icon-color);
}

.Tree__nested::before {
  content: "";
  display: inline-block;
  height: 100%;
  border-style: dotted;
  border-width: 0 0 0 0.1em;
  border-color: var(--secondary-dark-color);
  position: absolute;
  left: 1.4em;
  bottom: 0.3em;
}

.Tree li::before {
  display: inline-block;
  content: "";
  border-bottom: 0.1em dotted var(--secondary-dark-color);
  width: 1em;
  height: 1em;
  margin: 0 0.2em;
}

.Tree__branch .Tree__branch--expanded {
  transform: rotate(45deg);
}

.Tree__branch span {
  padding: 0.2em;
  border-radius: 1em;
  transition: background-color 0.5s;
}

.Tree__branch--selected {
  background-color: var(--secondary-dark-color);
}

/*******************************
 * Page *
 ********************************/

.Page {
  position: absolute;
  background-color: var(--primary-color);
}

/*******************************
 * Form *
 ********************************/

.Form {
  position: absolute;
  background-color: var(--primary-color);
}

/*******************************
 * TableManager *
 ********************************/

.TableManager {
  position: absolute;
  background-color: var(--primary-color);
}

/*******************************
 * Combobox *
 ********************************/

.Combobox {
  position: absolute;
  border-radius: var(--border-radius);
  background-color: field;
  color: fieldtext;
}

.Combobox__input {
  position: relative;
  width: 100%;
  height: 100%;
  padding: var(--textfield-padding-top, 0.2em)
    var(--textfield-padding-right, 0.35em);
  border-radius: inherit;
  background: url("A918076D98FAB4D5660DD50AF93D6C7F") no-repeat right
    var(--textfield-padding-right, 0.35em) center;
  background-size: 0.8rem;
  background-color: inherit;
  color: inherit;
}

/* remove the default indicator */
.Combobox__input::-webkit-calendar-picker-indicator {
  display: none !important;
}

/*******************************
 * Graph *
 ********************************/

.Graph {
  --background-color: var(--primary-color);
  --foreground-color: var(--on-primary-color);
  background-color: var(--background-color);
  position: absolute;
}

.Graph__splitter {
  position: relative;
  height: 0.2em;
  background-color: var(--foreground-color);
  cursor: ns-resize;
}

/*******************************
 * PieChart *
 ********************************/

.PieChart {
  --background-color: var(--primary-color);
  --foreground-color: var(--on-primary-color);
  background-color: var(--background-color);
  position: absolute;
}

/*******************************
 * Field3D *
 ********************************/

.Field3D {
  position: absolute;
}

/*******************************
 * StaticValue *
 ********************************/

.StaticValue {
  position: absolute;
  white-space: pre;
  display: flex;
  align-items: center;
}

.StaticValue canvas {
  width: 100%;
  height: 100%;
}

/*******************************
 * Image *
 ********************************/
.Image {
  position: absolute;
}

/*******************************
 * Wrap *
 ********************************/
.Wrap {
  position: absolute;
}

/*******************************
 * Separator *
********************************/
.Separator {
  position: absolute;
  background-color: var(--primary-color);
}

/*******************************
 * Overlay *
 ********************************/
.Overlay {
  position: absolute;
  background-color: var(--primary-color);
  white-space: pre;
  display: flex;
  align-items: center;
}

.Overlay canvas {
  width: 100%;
  height: 100%;
}

/*******************************
 * Menu *
 ********************************/

.Menu {
  position: absolute;
  background-color: var(--primary-color);
}

.Menu__items {
  display: none;
  /* in case of having scrollbar in browser, the menu items will be moved while scrolling.
     we cannot have both overflow=hidden for containers such as form, page ... and an absolute
     child with a height more than the parent size. It is impossible!
     https://stackoverflow.com/questions/5513382/absolute-position-and-overflowhidden
     solution: add menuitems to the body instead in case you want a scrollbar in universe
 */
  position: absolute;
  min-width: 10em;
  z-index: calc(var(--zIndex) + 1);
  box-shadow: var(--window-focused-box-shadow);
  padding: 0;
  margin: 0;
  list-style: none;
  white-space: pre;
  /* must be the same as ".Menu" background-color */
  background-color: var(--primary-color);
}

.Menu__items--show {
  display: block;
}

/* menu caption in button mode */
.Menu > span {
  padding: 0.25em 0.45em;
}

/* Menu item */
.Menu__item {
  text-align: start;
  cursor: default;
  border: none;
  border-radius: 0;
  display: flex;
}

.Menu__item__container {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  /* for desktop */
  min-height: 22px;
  align-items: stretch;
}

.Menu__item .Separator {
  /* for both desktop and mobile */
  min-height: 12px;
}

.Menu__item__container hr {
  flex: 1;
}

.Menu__item--hovered > span:not(.Separator) {
  animation: changeBgColor 0.3s forwards;
}

.Menu__item span img,
.Menu__item span svg {
  position: absolute;
  height: 1em;
  width: 1em;
  top: 50%;
  left: 0;
  /* Half the height to center the image */
  margin-top: -0.5em;
  margin-left: 0.4em;
}

.Menu__item__container > span,
.Menu__item__container > label {
  padding: 0 0.3em 0 2.2em;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}

/* caption and shortcut in Buttons and Toggle Buttons */
.Menu__item__container.Button > span,
.Menu__item__container.ToggleButton > span {
  justify-content: space-between;
}

/* Radiobox in Menu */
.Menu__item .Radiobox__input {
  display: none;
}

.Menu__item .Radiobox__input:checked ~ svg {
  display: block;
}

.Menu__item__container.Menu > span svg {
  margin-left: auto;
  margin-top: 0;
  position: static;
}

/* Popup Menu Styles */
.Menu__popup {
  position: absolute;
  border: 0;
  z-index: calc(var(--zIndex) + 1);
}

.Menu__popup > span {
  display: none;
}

.Menu__popup > .Menu__items {
  position: relative;
}

.Menu--long-width {
  width: 100vw;
  overflow: auto;
}

.Menu--long-height {
  height: calc(var(--bvh, 100vh) - 1em);
  overflow: auto;
}

/* Used in contextmenu */
.Menu__item__title {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 10em;
}

/* for menus in button mode */
.Menu.button {
  display: block;
  padding: 0;
}

/********************************
 * Responsive Webpage: Mobile and Tablet Devices *
 ********************************/

/* Back caret for submenus */
.Menu__item__back svg {
  transform: rotate(180deg);
}

/* Hamburger menu in document header */
.menu {
  width: var(--min-touch-target-height);
  height: var(--min-touch-target-height);
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  background-color: var(--primary-light-color);
  order: 3;
  margin-left: auto;
}

.menu > svg {
  width: calc(var(--min-touch-target-height) / 2);
  height: calc(var(--min-touch-target-height) / 2);
  fill: var(--on-primary-color);
}

.menu__items {
  z-index: calc(var(--zIndex) + 1);
  background-color: var(--primary-light-color);
  top: var(--min-touch-target-height);
  left: auto;
  border: none;
  width: 50vw;
  -webkit-animation: fadeIn 0.5s;
  animation: fadeIn 0.5s;
  list-style: none;
  /* Webkit default position for an element with popover property is static while Chrome V8 default position 
   is fixed */
  position: fixed;
}

.menu__items .taskbar {
  flex-direction: column;
}

.menu__items .taskbar div {
  min-width: 100%;
  min-height: var(--min-touch-target-height);
}

.menu__items .taskbar div img {
  order: 0;
}

.menu__items .TaskbarIcon {
  width: var(--min-touch-target-height);
  height: var(--min-touch-target-height);
}

.menu__items .toggle-device {
  width: var(--min-touch-target-height);
  height: var(--min-touch-target-height);
}

.mobile .TextField input,
.mobile .TextField textarea {
  padding: 0.4em var(--textfield-padding-right);
}

.mobile .button,
.mobile .ToolbarButton,
.mobile .Checkbox,
.Menu__item__container:not(.Separator),
.mobile .Choice {
  min-height: var(--min-touch-target-height);
}

.mobile .button,
.mobile .ToolbarButton,
.mobile .Checkbox,
.Menu__item__container:not(.Separator) {
  min-width: var(--min-touch-target-width);
}

/* the following css rule is only applied as a workaround for the input size problem in Firefox
https://stackoverflow.com/questions/64331670/height-of-input-with-white-spacepre-wrap-in-firefox-android-is-bigger-than  */
.mobile input[type="date"],
.mobile input[type="time"],
.mobile input[type="datetime-local"] {
  white-space: normal !important;
  min-width: 10em;
}

/* for mobile browsers, specially iphone, to disable auto zooming of input fields */
.mobile input,
.mobile select,
.mobile textarea,
.mobile button {
  font-size: max(16px, 1rem);
}

.mobile {
  .GridCell {
    padding: 0.5em 0.2em 0.5em 0.2em;
  }
}

/*******************************
 * Animations *
 ********************************/

.scaleAnimation {
  animation: scale 0.5s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes scale {
  50% {
    transform: scale(1.05);
  }
}

@keyframes changeBgColor {
  to {
    background-color: var(--secondary-light-color);
  }
}

@keyframes ripple {
  from {
    opacity: 1;
    transform: scale(0);
  }

  to {
    opacity: 0;
    transform: scale(1);
  }
}

/* context menu styles */
.contextmenu {
  position: absolute;
  visibility: hidden;
  background-color: var(--primary-color);
  z-index: calc(var(--zIndex) + 1);
  box-shadow: var(--window-focused-box-shadow);
}

.contextmenu:focus {
  outline: none;
}

.contextmenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contextmenu__item {
  border: none;
  margin: 0.25em;
  width: 12em;
}

.contextmenu__item--hovered {
  background-color: var(--secondary-light-color);
}

.contextmenu__item--disabled {
  color: var(--disabled-foreground-color);
}

.contextmenu__item--disabled svg {
  fill: var(--disabled-foreground-color);
}

.contextmenu__item__wrapper {
  height: 100%;
  width: 100%;
  position: relative;
  display: block;
}

.contextmenu__item__wrapper > span {
  flex: 1 1 auto;
}

.contextmenu__item__wrapper > span:not(.separator) {
  display: flex;
  margin-left: 10%;
}

.contextmenu__item__wrapper svg {
  position: absolute;
  height: 100%;
  width: 10%;
  top: 0;
  left: 0;
}

/* Resize helper box */
.resize_helper {
  position: absolute;
  visibility: hidden;
  border: medium dashed var(--primary-dark-color);
  z-index: calc(var(--zIndex) + 1);
}

/*******************************
 * Utility Classes *
 ********************************/

/* A class for making text unselectable */
.unselectable {
  -webkit-user-select: none;
  user-select: none;
}

.hidden {
  display: none !important;
}

.fullscreen {
  z-index: calc(var(--zIndex)) !important;
  position: fixed;
  top: 0 !important;
  left: 0 !important;
  width: 100dvw !important;
  height: 100dvh !important;
}

/* Fonts */
.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.teletype {
  font-family: monospace;
}

.pointerEvents--disabled {
  pointer-events: none;
}

.disabled {
  pointer-events: none;
  opacity: 0.26;
}

.wrap input,
.wrap textarea {
  white-space: pre-wrap !important;
}

/* Common classes for Page, Form and Table */
.paddles {
  position: absolute;
  background: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.paddles:focus {
  outline: none;
}

.paddles svg {
  width: 1.5em;
  height: 1.5em;
}

.paddleLeft,
.paddleRight {
  width: 1em;
  height: 100%;
}

.paddleLeft {
  top: 0;
  left: 0;
}

.paddleLeft svg {
  transform: rotate(180deg);
}

.paddleRight {
  top: 0;
  right: 0;
}

.paddleTop,
.paddleBottom {
  width: 100%;
  height: 1em;
}

.paddleTop {
  top: 0;
}

.paddleBottom {
  bottom: 0;
}

.paddleTop svg {
  transform: rotate(-90deg);
}

.paddleBottom svg {
  transform: rotate(90deg);
}

.Outer-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.Inner-wrapper {
  position: relative;
}

.notifications {
  position: absolute;
  bottom: 2em;
  right: 0.1em;
  /* notification should be stacked on top of everything */
  z-index: calc(var(--zIndex) + 1);
}

/*   Open state of the notification  */
.notification[open] {
  opacity: 1;
}

/*   Closed state of the notification   */
.notification {
  position: static;
  border: 1px solid #ccc;
  padding: 1rem;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 0.7s ease-out, display 0.7s ease-out allow-discrete;
  background-color: white;
  width: 100%;
  margin: 0.5rem 0;
  max-width: 22em;
}

/*   Before-open state  */
/* Needs to be after the previous notification[open] rule to take effect,
    as the specificity is the same */
@starting-style {
  notification[open] {
    opacity: 0;
  }
}

.notification__header {
  display: flex;
  place-items: center;
  margin-bottom: 0.5rem;
  gap: 0.5rem;
}

.notification__content {
  display: flex;
  place-items: center;
  gap: 0.5rem;
  justify-content: space-between;
}

.notification__close-button {
  background-color: transparent;
  width: 1em;
  height: 1em;
  border: none;
  flex-shrink: 0;
  margin-left: auto;
}

.notification__icon {
  width: 1.5em;
  height: 1.5em;
  flex-shrink: 0;
}

.notification__close-icon {
  width: 100%;
  height: 100%;
  fill: red;
}

.notification--info {
  background-color: #94eaff;
}

.notification--info .notification__icon {
  fill: blue;
}

.notification--error {
  background-color: #f9a0a0;
}

.notification--error .notification__icon {
  fill: red;
}

.notification--warning {
  background-color: #fff39e;
}

.notification--warning .notification__icon {
  fill: #ff8f00;
}

.notification--success {
  background-color: #c7f9a2;
}

.notification--success .notification__icon {
  fill: green;
}