.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.selection-disable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.movable > *.movable-handle {
  cursor: move;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.animated-moving {
  transition: left 300ms, right 300ms, top 300ms, bottom 300ms;
}
.animated-resizing {
  transition: width 300ms, height 300ms;
}
.resizable {
  position: relative;
}
.resizable > *.resizable-handle {
  position: absolute;
  z-index: 3;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.resizable > *.resizable-handle.left,
.resizable > *.resizable-handle.right {
  width: 12px;
  cursor: ew-resize;
}
.resizable > *.resizable-handle.left:not(.top):not(.bottom),
.resizable > *.resizable-handle.right:not(.top):not(.bottom) {
  height: calc(100% - 12px);
  top: calc(12px / 2);
}
.resizable > *.resizable-handle.top,
.resizable > *.resizable-handle.bottom {
  height: 12px;
  cursor: ns-resize;
}
.resizable > *.resizable-handle.top:not(.left):not(.right),
.resizable > *.resizable-handle.bottom:not(.left):not(.right) {
  width: calc(100% - 12px);
  left: calc(12px / 2);
}
.resizable > *.resizable-handle.left.top,
.resizable > *.resizable-handle.bottom.right {
  cursor: nwse-resize;
}
.resizable > *.resizable-handle.left.bottom,
.resizable > *.resizable-handle.right.top {
  cursor: nesw-resize;
}
.resizable > *.resizable-handle.top {
  top: calc(-1 * 12px / 2);
}
.resizable > *.resizable-handle.bottom {
  bottom: calc(-1 * 12px / 2);
}
.resizable > *.resizable-handle.left {
  left: calc(-1 * 12px / 2);
}
.resizable > *.resizable-handle.right {
  right: calc(-1 * 12px / 2);
}
.flex {
  display: flex;
}
.flex .row {
  flex-direction: row;
}
.flex .column {
  flex-direction: column;
}
.flex .centered {
  justify-content: center;
  align-items: center;
}
.size-as-parent {
  width: 100%;
  height: 100%;
}
.hidden {
  display: none;
}
.disappeared {
  opacity: 0;
}
html > body {
  background-color: white;
}
html > body [data-command] {
  cursor: pointer;
}
html > body .chose-block > *.element {
  border: 1px solid transparent;
}
html > body .chose-block > *.element.selected {
  border-color: black;
}
html > body .chose-block > *.element:not(.selected) {
  cursor: pointer;
}
html > body .chose-block.multiple > *.element {
  cursor: pointer;
}
html > body .test-block {
  width: 300px;
  height: 300px;
  background-color: blue;
  cursor: pointer;
  border-radius: 12px;
  position: relative;
}
html > body .test-block > *.test-block {
  background-color: red;
  width: 120px;
  height: 120px;
  left: 20px;
  top: 30px;
  position: absolute;
}
html > body > *.template {
  display: none;
}
html > body > *.figure {
  box-sizing: border-box;
  position: absolute;
  z-index: 1;
  background-color: rgba(120, 120, 120, 0.7);
}
html > body > *.container:not([data-popup-type]) {
  top: 0px;
  left: 0px;
  position: fixed;
  z-index: 1;
}
html > body > *.container:not([data-popup-type]).focused {
  z-index: 5;
}
html > body > *.container:not([data-popup-type]).focused > *.window {
  z-index: 6;
}
html > body > *.container:not([data-popup-type]).focused > *.window > [data-element="header"] > [data-element="commands"].icons {
  z-index: 8;
}
html > body > *.container:not([data-popup-type]).size-full {
  width: 100vw;
  height: 100vh;
}
html > body > *.container:not([data-popup-type]).modal {
  background-color: rgba(120, 120, 120, 0.5);
}
html > body > *.container:not([data-popup-type]) > .icons,
html > body > *.container:not([data-popup-type]) > * > .icons {
  right: 3px;
}
html > body > *.container:not([data-popup-type]) > * > *[data-element="header"] > *[data-element="commands"] {
  right: 3px;
}
html > body > *.container:not([data-popup-type]) > *.window {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: opacity 1s;
  border: 1px solid blue;
  border-radius: 12px;
  box-shadow: -12px 12px 12px rgba(120, 120, 120, 0.5);
  z-index: 2;
  position: absolute;
  width: fit-content;
  min-width: 21vw;
  /*
                  padding: 20px;
                  border: 10px solid green;
                  margin: 12px;
                  */
}
html > body > *.container:not([data-popup-type]) > *.window .row {
  flex-direction: row;
}
html > body > *.container:not([data-popup-type]) > *.window .column {
  flex-direction: column;
}
html > body > *.container:not([data-popup-type]) > *.window .centered {
  justify-content: center;
  align-items: center;
}
html > body > *.container:not([data-popup-type]) > *.window .row {
  flex-direction: row;
}
html > body > *.container:not([data-popup-type]) > *.window .column {
  flex-direction: column;
}
html > body > *.container:not([data-popup-type]) > *.window .centered {
  justify-content: center;
  align-items: center;
}
html > body > *.container:not([data-popup-type]) > *.window.expanded {
  width: 100vw !important;
  height: 100vh !important;
  left: 0px !important;
  top: 0px !important;
}
html > body > *.container:not([data-popup-type]) > *.window.expanded > *[data-element].main[data-element="header"] > *[data-element][data-element="commands"] {
  flex-direction: row;
}
html > body > *.container:not([data-popup-type]) > *.window.expanded > *[data-element].main[data-element="header"] > *[data-element][data-element="commands"].icons > *[data-command][data-command="expand"] {
  display: none;
}
html > body > *.container:not([data-popup-type]) > *.window:not(.expanded) > *[data-element].main[data-element="header"] > *[data-element][data-element="commands"] {
  flex-direction: row;
}
html > body > *.container:not([data-popup-type]) > *.window:not(.expanded) > *[data-element].main[data-element="header"] > *[data-element][data-element="commands"].icons > *[data-command][data-command="unexpand"] {
  display: none;
}
html > body > *.container:not([data-popup-type]) > *.window > *[data-element] {
  display: flex;
  justify-content: center;
  align-items: center;
}
html > body > *.container:not([data-popup-type]) > *.window > *[data-element] .row {
  flex-direction: row;
}
html > body > *.container:not([data-popup-type]) > *.window > *[data-element] .column {
  flex-direction: column;
}
html > body > *.container:not([data-popup-type]) > *.window > *[data-element] .centered {
  justify-content: center;
  align-items: center;
}
html > body > *.container:not([data-popup-type]) > *.window > *[data-element] .row {
  flex-direction: row;
}
html > body > *.container:not([data-popup-type]) > *.window > *[data-element] .column {
  flex-direction: column;
}
html > body > *.container:not([data-popup-type]) > *.window > *[data-element] .centered {
  justify-content: center;
  align-items: center;
}
html > body > *.container:not([data-popup-type]) > *.window > *[data-element].main {
  position: relative;
}
html > body > *.container:not([data-popup-type]) > *.window > *[data-element].main[data-element="header"] {
  background-color: blue;
  color: white;
  font-size: 1.6em;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: move;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
html > body > *.container:not([data-popup-type]) > *.window > *[data-element].main[data-element="header"] > *[data-element] {
  cursor: pointer;
}
html > body > *.container:not([data-popup-type]) > *.window > *[data-element].main[data-element="header"] > *[data-element][data-element="commands"] {
  flex-direction: row;
}
html > body > *.container:not([data-popup-type]) > *.window > *[data-element].main[data-element="header"] > *[data-element][data-element="commands"].icons {
  width: fit-content;
  top: 1px;
  position: absolute;
  z-index: 4;
  height: 21px;
}
html > body > *.container:not([data-popup-type]) > *.window > *[data-element].main[data-element="header"] > *[data-element][data-element="commands"].icons > *[data-command] {
  width: 21px;
  height: 21px;
}
html > body > *.container:not([data-popup-type]) > *.window > *[data-element].main[data-element="body"] {
  padding: 12px;
  overflow: auto;
  background-color: white;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}
html > body > *.container:not([data-popup-type]) > *.window > *[data-element].main[data-element="commands"] {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  background-color: #785dd2;
  gap: 7px;
}
html > body > *.container:not([data-popup-type]).collapsed > *.window > *:not([data-element="header"]) {
  display: none;
}
html > body > *.container:not([data-popup-type]).collapsed > *.window > *[data-element="header"] > *[data-element][data-element="commands"].icons > *[data-command]:not([data-command="expand"]) {
  display: none;
}
html > body > *.container:not([data-popup-type]).notification {
  position: fixed;
  min-width: 30vw;
  min-height: 21vh;
  background-color: rgba(120, 93, 255, 0.5);
  border-radius: 12px;
  box-shadow: -12px 12px 12px rgba(120, 120, 120, 0.5);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
html > body > *.container:not([data-popup-type]).notification .row {
  flex-direction: row;
}
html > body > *.container:not([data-popup-type]).notification .column {
  flex-direction: column;
}
html > body > *.container:not([data-popup-type]).notification .centered {
  justify-content: center;
  align-items: center;
}
html > body > *.container:not([data-popup-type]).notification .row {
  flex-direction: row;
}
html > body > *.container:not([data-popup-type]).notification .column {
  flex-direction: column;
}
html > body > *.container:not([data-popup-type]).notification .centered {
  justify-content: center;
  align-items: center;
}
html > body > *.container:not([data-popup-type]).notification > *[data-element="commands"] {
  flex-direction: row;
}
html > body > *.container:not([data-popup-type]).notification > *[data-element="commands"].icons {
  width: fit-content;
  top: 1px;
  position: absolute;
  z-index: 4;
  height: 21px;
}
html > body > *.container:not([data-popup-type]).notification > *[data-element="commands"].icons > *[data-command] {
  width: 21px;
  height: 21px;
}
html > body > *.container:not([data-popup-type]).notification > *.content {
  color: white;
  font-weight: bold;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
html > body > *.container:not([data-popup-type]).notification > *.content .row {
  flex-direction: row;
}
html > body > *.container:not([data-popup-type]).notification > *.content .column {
  flex-direction: column;
}
html > body > *.container:not([data-popup-type]).notification > *.content .centered {
  justify-content: center;
  align-items: center;
}
html > body > *.container:not([data-popup-type]).notification > *.content .row {
  flex-direction: row;
}
html > body > *.container:not([data-popup-type]).notification > *.content .column {
  flex-direction: column;
}
html > body > *.container:not([data-popup-type]).notification > *.content .centered {
  justify-content: center;
  align-items: center;
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] {
  position: absolute;
  background-color: rgba(120, 120, 120, 0.4);
  color: white;
  min-width: 120px;
  min-height: 93px;
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow {
  position: absolute;
  width: 16px;
  height: 16px;
  content: '';
  background: inherit;
  border-width: 0px;
  box-shadow: calc(16px / 2) calc(16px / 2) calc(16px / 2) rgba(0, 0, 0, 0.3);
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.left,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="left"],
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.right,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="right"] {
  margin-top: calc(-16px / 2);
  margin-left: calc(-16px / 2);
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.left.centered,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="left"].centered,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.right.centered,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="right"].centered {
  top: 50%;
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.top,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="top"],
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.bottom,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="bottom"] {
  margin-left: calc(-16px / 2);
  margin-top: calc(-16px / 2);
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.top.centered,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="top"].centered,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.bottom.centered,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="bottom"].centered {
  left: 50%;
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.left,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="left"] {
  left: 0px;
  transform: rotate(135deg);
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.right,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="right"] {
  left: 100%;
  transform: rotate(-45deg);
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.top,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="top"] {
  top: 0px;
  transform: rotate(-135deg);
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.bottom,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="bottom"] {
  top: 100%;
  transform: rotate(45deg);
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.left,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="left"],
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.right,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="right"] {
  margin-top: calc(-16px / 2);
  margin-left: calc(-16px / 2);
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.left.centered,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="left"].centered,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.right.centered,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="right"].centered {
  top: 50%;
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.top,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="top"],
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.bottom,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="bottom"] {
  margin-left: calc(-16px / 2);
  margin-top: calc(-16px / 2);
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.top.centered,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="top"].centered,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.bottom.centered,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="bottom"].centered {
  left: 50%;
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.left,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="left"] {
  left: 0px;
  transform: rotate(135deg);
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.right,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="right"] {
  left: 100%;
  transform: rotate(-45deg);
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.top,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="top"] {
  top: 0px;
  transform: rotate(-135deg);
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.bottom,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="bottom"] {
  top: 100%;
  transform: rotate(45deg);
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.selection-disable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.movable > *.movable-handle {
  cursor: move;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.animated-moving {
  transition: left 300ms, right 300ms, top 300ms, bottom 300ms;
}
.animated-resizing {
  transition: width 300ms, height 300ms;
}
.resizable {
  position: relative;
}
.resizable > *.resizable-handle {
  position: absolute;
  z-index: 3;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.resizable > *.resizable-handle.left,
.resizable > *.resizable-handle.right {
  width: 12px;
  cursor: ew-resize;
}
.resizable > *.resizable-handle.left:not(.top):not(.bottom),
.resizable > *.resizable-handle.right:not(.top):not(.bottom) {
  height: calc(100% - 12px);
  top: calc(12px / 2);
}
.resizable > *.resizable-handle.top,
.resizable > *.resizable-handle.bottom {
  height: 12px;
  cursor: ns-resize;
}
.resizable > *.resizable-handle.top:not(.left):not(.right),
.resizable > *.resizable-handle.bottom:not(.left):not(.right) {
  width: calc(100% - 12px);
  left: calc(12px / 2);
}
.resizable > *.resizable-handle.left.top,
.resizable > *.resizable-handle.bottom.right {
  cursor: nwse-resize;
}
.resizable > *.resizable-handle.left.bottom,
.resizable > *.resizable-handle.right.top {
  cursor: nesw-resize;
}
.resizable > *.resizable-handle.top {
  top: calc(-1 * 12px / 2);
}
.resizable > *.resizable-handle.bottom {
  bottom: calc(-1 * 12px / 2);
}
.resizable > *.resizable-handle.left {
  left: calc(-1 * 12px / 2);
}
.resizable > *.resizable-handle.right {
  right: calc(-1 * 12px / 2);
}
.flex {
  display: flex;
}
.flex .row {
  flex-direction: row;
}
.flex .column {
  flex-direction: column;
}
.flex .centered {
  justify-content: center;
  align-items: center;
}
.size-as-parent {
  width: 100%;
  height: 100%;
}
.hidden {
  display: none;
}
.disappeared {
  opacity: 0;
}
html > body {
  background-color: white;
}
html > body [data-command] {
  cursor: pointer;
}
html > body .chose-block > *.element {
  border: 1px solid transparent;
}
html > body .chose-block > *.element.selected {
  border-color: black;
}
html > body .chose-block > *.element:not(.selected) {
  cursor: pointer;
}
html > body .chose-block.multiple > *.element {
  cursor: pointer;
}
html > body .test-block {
  width: 300px;
  height: 300px;
  background-color: blue;
  cursor: pointer;
  border-radius: 12px;
  position: relative;
}
html > body .test-block > *.test-block {
  background-color: red;
  width: 120px;
  height: 120px;
  left: 20px;
  top: 30px;
  position: absolute;
}
html > body > *.template {
  display: none;
}
html > body > *.figure {
  box-sizing: border-box;
  position: absolute;
  z-index: 1;
  background-color: rgba(120, 120, 120, 0.7);
}
html > body > *.container:not([data-popup-type]) {
  top: 0px;
  left: 0px;
  position: fixed;
  z-index: 1;
}
html > body > *.container:not([data-popup-type]).focused {
  z-index: 5;
}
html > body > *.container:not([data-popup-type]).focused > *.window {
  z-index: 6;
}
html > body > *.container:not([data-popup-type]).focused > *.window > [data-element="header"] > [data-element="commands"].icons {
  z-index: 8;
}
html > body > *.container:not([data-popup-type]).size-full {
  width: 100vw;
  height: 100vh;
}
html > body > *.container:not([data-popup-type]).modal {
  background-color: rgba(120, 120, 120, 0.5);
}
html > body > *.container:not([data-popup-type]) > .icons,
html > body > *.container:not([data-popup-type]) > * > .icons {
  right: 3px;
}
html > body > *.container:not([data-popup-type]) > * > *[data-element="header"] > *[data-element="commands"] {
  right: 3px;
}
html > body > *.container:not([data-popup-type]) > *.window {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: opacity 1s;
  border: 1px solid blue;
  border-radius: 12px;
  box-shadow: -12px 12px 12px rgba(120, 120, 120, 0.5);
  z-index: 2;
  position: absolute;
  width: fit-content;
  min-width: 21vw;
  /*
                  padding: 20px;
                  border: 10px solid green;
                  margin: 12px;
                  */
}
html > body > *.container:not([data-popup-type]) > *.window .row {
  flex-direction: row;
}
html > body > *.container:not([data-popup-type]) > *.window .column {
  flex-direction: column;
}
html > body > *.container:not([data-popup-type]) > *.window .centered {
  justify-content: center;
  align-items: center;
}
html > body > *.container:not([data-popup-type]) > *.window .row {
  flex-direction: row;
}
html > body > *.container:not([data-popup-type]) > *.window .column {
  flex-direction: column;
}
html > body > *.container:not([data-popup-type]) > *.window .centered {
  justify-content: center;
  align-items: center;
}
html > body > *.container:not([data-popup-type]) > *.window.expanded {
  width: 100vw !important;
  height: 100vh !important;
  left: 0px !important;
  top: 0px !important;
}
html > body > *.container:not([data-popup-type]) > *.window.expanded > *[data-element].main[data-element="header"] > *[data-element][data-element="commands"] {
  flex-direction: row;
}
html > body > *.container:not([data-popup-type]) > *.window.expanded > *[data-element].main[data-element="header"] > *[data-element][data-element="commands"].icons > *[data-command][data-command="expand"] {
  display: none;
}
html > body > *.container:not([data-popup-type]) > *.window:not(.expanded) > *[data-element].main[data-element="header"] > *[data-element][data-element="commands"] {
  flex-direction: row;
}
html > body > *.container:not([data-popup-type]) > *.window:not(.expanded) > *[data-element].main[data-element="header"] > *[data-element][data-element="commands"].icons > *[data-command][data-command="unexpand"] {
  display: none;
}
html > body > *.container:not([data-popup-type]) > *.window > *[data-element] {
  display: flex;
  justify-content: center;
  align-items: center;
}
html > body > *.container:not([data-popup-type]) > *.window > *[data-element] .row {
  flex-direction: row;
}
html > body > *.container:not([data-popup-type]) > *.window > *[data-element] .column {
  flex-direction: column;
}
html > body > *.container:not([data-popup-type]) > *.window > *[data-element] .centered {
  justify-content: center;
  align-items: center;
}
html > body > *.container:not([data-popup-type]) > *.window > *[data-element] .row {
  flex-direction: row;
}
html > body > *.container:not([data-popup-type]) > *.window > *[data-element] .column {
  flex-direction: column;
}
html > body > *.container:not([data-popup-type]) > *.window > *[data-element] .centered {
  justify-content: center;
  align-items: center;
}
html > body > *.container:not([data-popup-type]) > *.window > *[data-element].main {
  position: relative;
}
html > body > *.container:not([data-popup-type]) > *.window > *[data-element].main[data-element="header"] {
  background-color: blue;
  color: white;
  font-size: 1.6em;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: move;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
html > body > *.container:not([data-popup-type]) > *.window > *[data-element].main[data-element="header"] > *[data-element] {
  cursor: pointer;
}
html > body > *.container:not([data-popup-type]) > *.window > *[data-element].main[data-element="header"] > *[data-element][data-element="commands"] {
  flex-direction: row;
}
html > body > *.container:not([data-popup-type]) > *.window > *[data-element].main[data-element="header"] > *[data-element][data-element="commands"].icons {
  width: fit-content;
  top: 1px;
  position: absolute;
  z-index: 4;
  height: 21px;
}
html > body > *.container:not([data-popup-type]) > *.window > *[data-element].main[data-element="header"] > *[data-element][data-element="commands"].icons > *[data-command] {
  width: 21px;
  height: 21px;
}
html > body > *.container:not([data-popup-type]) > *.window > *[data-element].main[data-element="body"] {
  padding: 12px;
  overflow: auto;
  background-color: white;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}
html > body > *.container:not([data-popup-type]) > *.window > *[data-element].main[data-element="body"] > *.container {
  width: 100%;
}
html > body > *.container:not([data-popup-type]) > *.window > *[data-element].main[data-element="commands"] {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  background-color: #785dd2;
}
html > body > *.container:not([data-popup-type]).collapsed > *.window > *:not([data-element="header"]) {
  display: none;
}
html > body > *.container:not([data-popup-type]).collapsed > *.window > *[data-element="header"] > *[data-element][data-element="commands"].icons > *[data-command]:not([data-command="expand"]) {
  display: none;
}
html > body > *.container:not([data-popup-type]).notification {
  position: fixed;
  min-width: 30vw;
  min-height: 21vh;
  background-color: rgba(120, 93, 255, 0.5);
  border-radius: 12px;
  box-shadow: -12px 12px 12px rgba(120, 120, 120, 0.5);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
html > body > *.container:not([data-popup-type]).notification .row {
  flex-direction: row;
}
html > body > *.container:not([data-popup-type]).notification .column {
  flex-direction: column;
}
html > body > *.container:not([data-popup-type]).notification .centered {
  justify-content: center;
  align-items: center;
}
html > body > *.container:not([data-popup-type]).notification .row {
  flex-direction: row;
}
html > body > *.container:not([data-popup-type]).notification .column {
  flex-direction: column;
}
html > body > *.container:not([data-popup-type]).notification .centered {
  justify-content: center;
  align-items: center;
}
html > body > *.container:not([data-popup-type]).notification > *[data-element="commands"] {
  flex-direction: row;
}
html > body > *.container:not([data-popup-type]).notification > *[data-element="commands"].icons {
  width: fit-content;
  top: 1px;
  position: absolute;
  z-index: 4;
  height: 21px;
}
html > body > *.container:not([data-popup-type]).notification > *[data-element="commands"].icons > *[data-command] {
  width: 21px;
  height: 21px;
}
html > body > *.container:not([data-popup-type]).notification > *.content {
  color: white;
  font-weight: bold;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
html > body > *.container:not([data-popup-type]).notification > *.content .row {
  flex-direction: row;
}
html > body > *.container:not([data-popup-type]).notification > *.content .column {
  flex-direction: column;
}
html > body > *.container:not([data-popup-type]).notification > *.content .centered {
  justify-content: center;
  align-items: center;
}
html > body > *.container:not([data-popup-type]).notification > *.content .row {
  flex-direction: row;
}
html > body > *.container:not([data-popup-type]).notification > *.content .column {
  flex-direction: column;
}
html > body > *.container:not([data-popup-type]).notification > *.content .centered {
  justify-content: center;
  align-items: center;
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] {
  position: absolute;
  background-color: rgba(120, 120, 120, 0.4);
  color: white;
  min-width: 120px;
  min-height: 93px;
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow {
  position: absolute;
  width: 16px;
  height: 16px;
  content: '';
  background: inherit;
  border-width: 0px;
  box-shadow: calc(16px / 2) calc(16px / 2) calc(16px / 2) rgba(0, 0, 0, 0.3);
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.left,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="left"],
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.right,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="right"] {
  margin-top: calc(-16px / 2);
  margin-left: calc(-16px / 2);
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.left.centered,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="left"].centered,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.right.centered,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="right"].centered {
  top: 50%;
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.top,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="top"],
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.bottom,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="bottom"] {
  margin-left: calc(-16px / 2);
  margin-top: calc(-16px / 2);
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.top.centered,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="top"].centered,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.bottom.centered,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="bottom"].centered {
  left: 50%;
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.left,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="left"] {
  left: 0px;
  transform: rotate(135deg);
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.right,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="right"] {
  left: 100%;
  transform: rotate(-45deg);
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.top,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="top"] {
  top: 0px;
  transform: rotate(-135deg);
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.bottom,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="bottom"] {
  top: 100%;
  transform: rotate(45deg);
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.left,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="left"],
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.right,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="right"] {
  margin-top: calc(-16px / 2);
  margin-left: calc(-16px / 2);
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.left.centered,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="left"].centered,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.right.centered,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="right"].centered {
  top: 50%;
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.top,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="top"],
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.bottom,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="bottom"] {
  margin-left: calc(-16px / 2);
  margin-top: calc(-16px / 2);
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.top.centered,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="top"].centered,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.bottom.centered,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="bottom"].centered {
  left: 50%;
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.left,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="left"] {
  left: 0px;
  transform: rotate(135deg);
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.right,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="right"] {
  left: 100%;
  transform: rotate(-45deg);
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.top,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="top"] {
  top: 0px;
  transform: rotate(-135deg);
}
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow.bottom,
html > body > *.container:not([data-popup-type])[data-popup-type="hint"] > .arrow[data-direction="bottom"] {
  top: 100%;
  transform: rotate(45deg);
}
.content > .the-hint
  {color: red;
   font-weight: bold;
   display: none;
  }
[data-loading-state="processing"]
  {display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
  }
[data-loading-state="processing"] > .the-hint
  {display: flex;
  }
audio.is-really-played
  {border: 1px dotted blue;   
  }
/*
[data-loading-state="processed"]
  {border: 1px solid blue;     
  }
*/
td[data-type="title"]
  {max-width: 43px;
   white-space: pre-wrap;
  }
td[data-type="audio"]
  {min-width: 145px;
  }
body[data-for-role="visitor"] #panel-top
  {display: none;
  }