html, body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
  position: absolute;
  top: 0px; }

body {
  background: #f0e4fe;
  font-family: sans-serif;
  display: flex;
  flex-direction: column; }

header {
  background: #7e49fb;
  display: flex;
  flex-direction: row;
  color: white;
  padding: 0em 1em;
  height: 2.2em;
  align-items: center;
  justify-content: space-between; }
  header .headerLeft, header .headerCenter, header .headerRight {
    display: flex;
    flex-direction: row;
    align-items: center; }
  header .language {
    cursor: pointer;
    user-select: none;
    margin-left: 0.5em; }

.bold {
  font-weight: bold; }

main {
  position: relative;
  height: 100%;
  overflow: hidden; }
  main .gridContainer {
    height: 100%;
    overflow: auto; }
    main .gridContainer .grid-stack {
      height: 100%; }

#widgetToolbox {
  position: absolute;
  height: 100%;
  max-width: 200px;
  top: 0;
  left: 0%;
  padding: 0 16px;
  box-sizing: border-box;
  z-index: 100;
  background: #bbb;
  overflow-x: hide;
  overflow-y: auto;
  transition: left 0.3s; }
  #widgetToolbox .row {
    display: flex;
    align-items: center;
    margin-top: 1em; }
  #widgetToolbox .toolboxLabel {
    margin-left: 0.5em;
    color: gray; }

#widgetToolbox.hide {
  left: -200px; }

#trash {
  color: #aaa;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.15em 1em;
  font-size: 150%;
  border-radius: 10px; }

#trash:hover {
  background: pink; }

#addNewWidget, #run, #stop {
  display: flex;
  align-items: center;
  font-size: 150%;
  margin-right: 1em;
  cursor: pointer;
  user-select: none; }

#addNewWidget.hide, #run.hide, #stop.hide, #trash.hide, #connectMenu.hide {
  display: none; }

#connectGroup {
  display: flex;
  margin-left: auto;
  margin-right: 0.2em; }
  #connectGroup #connectionStatus {
    padding: 0.4em 0.5em 0.2em 0.5em;
    border-radius: 0.5em 0 0 0.5em;
    background: red;
    color: white; }
  #connectGroup #connectionStatus.connected {
    background: green; }
  #connectGroup #connectMenu {
    padding: 0.4em 0.5em 0.2em 0.45em;
    border-radius: 0 0.5em 0.5em 0;
    color: #7e49fb;
    background: white;
    cursor: pointer;
    user-select: none; }

ul.menuDropDown {
  background: #f0e4fe;
  border: solid 1px #bbbbbb;
  position: absolute;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border-radius: 0 0 0.5em 0.5em;
  overflow: hidden;
  box-shadow: 0px 10px 6px 0px rgba(0, 0, 0, 0.25); }
  ul.menuDropDown li {
    display: block;
    color: gray;
    padding: 0.5em; }
  ul.menuDropDown li:hover {
    background: white; }
  ul.menuDropDown li.underline {
    border-bottom: solid 1px #bbbbbb; }
  ul.menuDropDown .tick {
    color: green; }

ul.menuDropDownRightAlign {
  top: 100%; }

.dialogWindow .shareLink {
  font-weight: bold;
  overflow-wrap: anywhere;
  display: flex;
  align-items: center; }
  .dialogWindow .shareLink .copy {
    cursor: pointer;
    user-select: none;
    padding: 0.2em 0.5em;
    border-radius: 0.5em;
    background: white;
    color: gray;
    flex-shrink: 0;
    height: 1em; }

#linkQRCode {
  display: flex;
  justify-content: center;
  height: 180px;
  width: 180px;
  margin: auto;
  padding: 15px;
  box-sizing: border-box;
  background: white; }

@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon.eot?zcpech");
  src: url("../fonts/icomoon.eot?zcpech#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?zcpech") format("truetype"), url("../fonts/icomoon.woff?zcpech") format("woff"), url("../fonts/icomoon.svg?zcpech#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block; }
[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-edit:before {
  content: "\e91b"; }

.icon-kebab:before {
  content: "\e918"; }

.icon-plus:before {
  content: "\e91a"; }

.icon-deleteFile:before {
  content: "\e917"; }

.icon-download:before {
  content: "\e915"; }

.icon-upload:before {
  content: "\e916"; }

.icon-newFile:before {
  content: "\e919"; }

.icon-buttonsDown:before {
  content: "\e90e"; }

.icon-buttonsLeft:before {
  content: "\e90f"; }

.icon-buttonsRight:before {
  content: "\e910"; }

.icon-buttonsUp:before {
  content: "\e911"; }

.icon-buttons:before {
  content: "\e912"; }

.icon-buttonsBackspace:before {
  content: "\e913"; }

.icon-buttonsEnter:before {
  content: "\e914"; }

.icon-sensors:before {
  content: "\e90d"; }

.icon-reset:before {
  content: "\e90c"; }

.icon-keyboard:before {
  content: "\e90b"; }

.icon-cameraArc:before {
  content: "\e900"; }

.icon-cameraTop:before {
  content: "\e901"; }

.icon-cameraFollow:before {
  content: "\e902"; }

.icon-ruler:before {
  content: "\e903"; }

.icon-camera:before {
  content: "\e904"; }

.icon-virtualJoystickIndicator:before {
  content: "\e905"; }

.icon-stop:before {
  content: "\e906"; }

.icon-play:before {
  content: "\e907"; }

.icon-globe:before {
  content: "\e908"; }

.icon-virtualJoystick:before {
  content: "\e909"; }

.icon-joystick:before {
  content: "\e90a"; }

main {
  -webkit-tap-highlight-color: #0000;
  user-select: none; }

.newWidget > .grid-stack-item-content > div {
  pointer-events: none; }

.grid-stack {
  background: white; }

.newWidget .grid-stack-item-content {
  height: 80px;
  width: 80px; }
  .newWidget .grid-stack-item-content .placeholder {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px; }

.grid-stack-item-content {
  inset: 2px !important;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 1px #ccc;
  border-radius: 0.5em;
  transition: 0.5s border-color; }

.gridContainer.run .grid-stack-item-content {
  border-color: transparent; }

.grid-stack-item[ioty-type="label"] .label {
  height: calc(100% - 1em);
  width: calc(100% - 1em);
  font-weight: bold;
  display: flex; }

.grid-stack-item[ioty-type="display"] .display {
  height: calc(100% - 1em);
  width: calc(100% - 1em);
  font-weight: bold;
  background: lightgray;
  padding: 0.5em;
  box-sizing: border-box; }

.grid-stack-item[ioty-type="button"] .button {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100% - 1em);
  width: calc(100% - 1em);
  background: #007bff;
  color: white;
  border-radius: 1em;
  font-weight: bold;
  text-align: center;
  padding: 0.2em;
  box-sizing: border-box; }
.grid-stack-item[ioty-type="button"] .button:active {
  border: solid 2px #66b0ff; }

.grid-stack-item[ioty-type="switch"] .switch {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%; }
  .grid-stack-item[ioty-type="switch"] .switch .track {
    width: 100%;
    height: 2em;
    margin: 0.5em 0 0 0;
    border-radius: 1.5em;
    background: lightgray;
    position: relative; }
    .grid-stack-item[ioty-type="switch"] .switch .track .thumb {
      height: 1.6em;
      width: 1.6em;
      background: white;
      border-radius: 1.6em;
      top: 0.2em;
      position: absolute;
      left: 0.3em;
      transition: 0.3s left, 0.3s background-color; }
  .grid-stack-item[ioty-type="switch"] .switch .track.on {
    background-color: #007bff; }
    .grid-stack-item[ioty-type="switch"] .switch .track.on .thumb {
      left: calc(100% - 1.8em); }

.grid-stack-item[ioty-type="hSlider"] .hSlider {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(100% - 1em);
  height: calc(100% - 1em); }
  .grid-stack-item[ioty-type="hSlider"] .hSlider .row1 {
    display: flex;
    justify-content: space-between;
    width: 100%;
    overflow: hidden; }
  .grid-stack-item[ioty-type="hSlider"] .hSlider input[type="range"] {
    width: 100%;
    margin: 1em 0 0 0; }

.grid-stack-item[ioty-type="vSlider"] .vSlider {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: calc(100% - 1em);
  height: calc(100% - 1em); }
  .grid-stack-item[ioty-type="vSlider"] .vSlider .row1 {
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-direction: column;
    overflow: hidden;
    height: 100%; }
    .grid-stack-item[ioty-type="vSlider"] .vSlider .row1 .value {
      text-align: right; }
  .grid-stack-item[ioty-type="vSlider"] .vSlider input[type="range"] {
    appearance: slider-vertical;
    -webkit-appearance: slider-vertical;
    writing-mode: bt-lr;
    height: 100%;
    width: 2em; }

.grid-stack-item[ioty-type="hBar"] .hBar {
  width: calc(100% - 1em);
  height: calc(100% - 1em);
  display: flex;
  flex-direction: column;
  align-items: center; }
  .grid-stack-item[ioty-type="hBar"] .hBar .row1 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    overflow: hidden; }
  .grid-stack-item[ioty-type="hBar"] .hBar .progress {
    height: 1em;
    width: 100%;
    border: solid 1px lightgray;
    display: flex;
    flex-direction: row;
    justify-content: start;
    border-radius: 0.3em;
    margin-top: 1em; }
    .grid-stack-item[ioty-type="hBar"] .hBar .progress div {
      height: 100%;
      background-color: #007bff;
      border-radius: 0.3em;
      transition: width 0.5s; }

.grid-stack-item[ioty-type="vBar"] .vBar {
  width: calc(100% - 1em);
  height: calc(100% - 1em);
  display: flex;
  flex-direction: row;
  justify-content: space-between; }
  .grid-stack-item[ioty-type="vBar"] .vBar .row1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    overflow: hidden; }
    .grid-stack-item[ioty-type="vBar"] .vBar .row1 .value {
      text-align: right; }
  .grid-stack-item[ioty-type="vBar"] .vBar .progress {
    height: 100%;
    width: 1em;
    border: solid 1px lightgray;
    display: flex;
    flex-direction: column;
    justify-content: end;
    border-radius: 0.3em;
    margin-left: 1em; }
    .grid-stack-item[ioty-type="vBar"] .vBar .progress div {
      width: 100%;
      background-color: #007bff;
      border-radius: 0.3em;
      transition: height 0.5s; }

.grid-stack-item[ioty-type="color"] .color {
  height: calc(100% - 1em);
  width: calc(100% - 1em);
  overflow: hidden;
  position: relative; }
  .grid-stack-item[ioty-type="color"] .color .wrapper {
    position: relative;
    left: 20%;
    top: 10%;
    max-width: 80%;
    max-height: 80%;
    aspect-ratio: 1/1; }
  .grid-stack-item[ioty-type="color"] .color img {
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: none; }
  .grid-stack-item[ioty-type="color"] .color .selector {
    position: absolute;
    width: 5%;
    height: 5%;
    border: solid 1px gray;
    border-radius: 100%;
    top: 47.5%;
    left: 47.5%;
    box-sizing: border-box;
    pointer-events: none; }
  .grid-stack-item[ioty-type="color"] .color .label {
    position: absolute;
    top: 0;
    left: 0; }
  .grid-stack-item[ioty-type="color"] .color input[type="range"] {
    width: 1em;
    height: 80%;
    position: absolute;
    top: 15%;
    left: 4%;
    appearance: slider-vertical; }

@keyframes flash {
  0% {
    background-color: #c82333; }
  20% {
    background-color: white; }
  40% {
    background-color: #c82333; }
  60% {
    background-color: white; }
  80% {
    background-color: #c82333; } }
.grid-stack-item[ioty-type="notification"] .notification {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center; }
.grid-stack-item[ioty-type="notification"] .indicator {
  width: 80%;
  height: 80%;
  background: white;
  margin: auto;
  border-radius: 10px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; }
  .grid-stack-item[ioty-type="notification"] .indicator img {
    max-width: 60%;
    max-height: 60%; }
.grid-stack-item[ioty-type="notification"] .indicator.flash {
  animation-name: flash;
  animation-duration: 0.5s;
  animation-iteration-count: 1; }

.grid-stack-item[ioty-type="status"] .status {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center; }
.grid-stack-item[ioty-type="status"] .label {
  font-weight: bold; }
.grid-stack-item[ioty-type="status"] .indicator {
  width: 80%;
  height: 80%;
  border: solid 1px gray;
  margin: auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black; }
.grid-stack-item[ioty-type="status"] .indicator.color1 {
  background-color: #28a745;
  color: white; }
.grid-stack-item[ioty-type="status"] .indicator.color2 {
  background-color: #ffc107;
  color: black; }
.grid-stack-item[ioty-type="status"] .indicator.color3 {
  background-color: #dc3545;
  color: white; }
.grid-stack-item[ioty-type="status"] .indicator.color4 {
  background-color: #007bff;
  color: white; }
.grid-stack-item[ioty-type="status"] .indicator.color5 {
  background-color: #6c757d;
  color: white; }
.grid-stack-item[ioty-type="status"] .indicator.color6 {
  background-color: #343a40;
  color: white; }

.grid-stack-item[ioty-type="text"] .text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: calc(100% - 1em);
  height: calc(100% - 1em); }
.grid-stack-item[ioty-type="text"] .label {
  align-self: start; }
.grid-stack-item[ioty-type="text"] input[type="text"] {
  box-sizing: border-box;
  width: 100%;
  font-size: 100%; }
.grid-stack-item[ioty-type="text"] .send {
  background: #007bff;
  color: white;
  padding: 0.3em;
  border-radius: 0.5em;
  margin-top: 0.2em;
  align-self: end;
  cursor: pointer;
  user-select: none; }

.grid-stack-item[ioty-type="select"] .select {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: calc(100% - 1em);
  height: calc(100% - 1em); }
.grid-stack-item[ioty-type="select"] .label {
  align-self: start; }
.grid-stack-item[ioty-type="select"] select {
  box-sizing: border-box;
  width: 100%;
  font-size: 100%; }

.grid-stack-item[ioty-type="joy"] .joy {
  height: calc(100% - 1em);
  width: calc(100% - 1em);
  overflow: hidden;
  position: relative; }
  .grid-stack-item[ioty-type="joy"] .joy .wrapper {
    position: relative;
    left: 5%;
    top: 5%;
    max-width: 90%;
    max-height: 90%;
    aspect-ratio: 1/1; }
  .grid-stack-item[ioty-type="joy"] .joy img {
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: none; }
  .grid-stack-item[ioty-type="joy"] .joy .selector {
    position: absolute;
    background: rgba(170, 170, 170, 0.5);
    width: 30%;
    height: 30%;
    border-radius: 100%;
    top: 35%;
    left: 35%;
    box-sizing: border-box;
    pointer-events: none; }
  .grid-stack-item[ioty-type="joy"] .joy .label {
    position: absolute;
    top: 0;
    left: 0; }

.grid-stack-item[ioty-type="direction"] .direction {
  height: calc(100% - 1em);
  width: calc(100% - 1em);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center; }
  .grid-stack-item[ioty-type="direction"] .direction .wrapper {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1/1; }
  .grid-stack-item[ioty-type="direction"] .direction img {
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: none; }
  .grid-stack-item[ioty-type="direction"] .direction .text {
    position: absolute;
    text-align: center; }
    .grid-stack-item[ioty-type="direction"] .direction .text .value {
      text-align: center;
      font-size: 200%; }

.grid-stack-item[ioty-type="video"] .video {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center; }
.grid-stack-item[ioty-type="video"] video {
  height: 100%;
  width: 100%;
  pointer-events: none; }

.grid-stack-item[ioty-type="audio"] .audio, .grid-stack-item[ioty-type="audio"] .tts, .grid-stack-item[ioty-type="tts"] .audio, .grid-stack-item[ioty-type="tts"] .tts {
  display: flex;
  justify-content: center;
  align-items: center; }
@keyframes bounce {
  10% {
    transform: scaleY(0.3);
    /* start by scaling to 30% */ }
  30% {
    transform: scaleY(1);
    /* scale up to 100% */ }
  60% {
    transform: scaleY(0.5);
    /* scale down to 50% */ }
  80% {
    transform: scaleY(0.75);
    /* scale up to 75% */ }
  100% {
    transform: scaleY(0.6);
    /* scale down to 60% */ } }
.grid-stack-item[ioty-type="audio"] .musicAnimation, .grid-stack-item[ioty-type="tts"] .musicAnimation {
  pointer-events: none;
  position: absolute;
  display: flex;
  justify-content: space-between;
  width: 3em;
  height: 3em; }
  .grid-stack-item[ioty-type="audio"] .musicAnimation span, .grid-stack-item[ioty-type="tts"] .musicAnimation span {
    width: 0.5em;
    height: 100%;
    background-color: orange;
    border-radius: 0.25em;
    animation: bounce 2.2s ease infinite alternate;
    content: ''; }
    .grid-stack-item[ioty-type="audio"] .musicAnimation span:nth-of-type(2), .grid-stack-item[ioty-type="tts"] .musicAnimation span:nth-of-type(2) {
      animation-delay: -2.2s;
      /* Start at the end of animation */ }
    .grid-stack-item[ioty-type="audio"] .musicAnimation span:nth-of-type(3), .grid-stack-item[ioty-type="tts"] .musicAnimation span:nth-of-type(3) {
      animation-delay: -3.7s;
      /* Start mid-way of return of animation */ }
.grid-stack-item[ioty-type="audio"] .musicAnimation.paused > span, .grid-stack-item[ioty-type="tts"] .musicAnimation.paused > span {
  animation-play-state: paused; }

.grid-stack-item[ioty-type="tts"] .musicAnimation span {
  background-color: orangered; }

.grid-stack-item[ioty-type="image"] .image {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center; }
.grid-stack-item[ioty-type="image"] img {
  max-height: 100%;
  max-width: 100%; }
.grid-stack-item[ioty-type="image"] img.scale {
  object-fit: contain;
  height: 100%;
  width: 100%; }
.grid-stack-item[ioty-type="image"] img.hide {
  display: none; }

.grid-stack-item[ioty-type="rawImage"] .rawImage {
  height: calc(100% - 1em);
  width: calc(100% - 1em);
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center; }
.grid-stack-item[ioty-type="rawImage"] canvas {
  height: 100%;
  width: 100%;
  object-fit: contain; }
.grid-stack-item[ioty-type="rawImage"] canvas.hide {
  visibility: hidden; }

.grid-stack-item[ioty-type="map"] .map {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center; }
  .grid-stack-item[ioty-type="map"] .map .mapEmbed {
    height: calc(100% - 1em);
    width: calc(100% - 1em); }
.grid-stack-item[ioty-type="map"] .percentBox {
  position: absolute;
  left: 30px;
  background: white;
  height: 100%;
  width: 6px;
  border: solid 1px black; }
.grid-stack-item[ioty-type="map"] .percentBar {
  position: absolute;
  background: #EA4335;
  width: 100%;
  height: 0%;
  bottom: 0; }

.grid-stack-item[ioty-type="speech"] .speech {
  height: calc(100% - 1em);
  width: calc(100% - 1em);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center; }
  .grid-stack-item[ioty-type="speech"] .speech .wrapper {
    position: relative;
    left: 0px;
    top: 0px;
    max-width: 80%;
    max-height: 80%;
    aspect-ratio: 1/1; }
    .grid-stack-item[ioty-type="speech"] .speech .wrapper img {
      width: 100%;
      height: 100%; }
    .grid-stack-item[ioty-type="speech"] .speech .wrapper img.top {
      position: absolute;
      position: absolute;
      top: 0;
      left: 0;
      height: auto; }
    .grid-stack-item[ioty-type="speech"] .speech .wrapper .glow {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0px;
      top: 0px;
      border-radius: 50%; }
@keyframes glow {
  0% {
    transform: scale(0.3); }
  100% {
    transform: scale(1); } }
    .grid-stack-item[ioty-type="speech"] .speech .wrapper .glow.animate {
      background: red;
      animation: glow 1.5s ease infinite alternate; }

.grid-stack-item[ioty-type="chart"] .chart {
  position: relative;
  height: calc(100% - 1em);
  width: calc(100% - 1em); }

.grid-stack-item[ioty-type="gauge"] .gauge {
  height: calc(100% - 1em);
  width: calc(100% - 1em);
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center; }
  .grid-stack-item[ioty-type="gauge"] .gauge canvas {
    height: 100%;
    width: 100%;
    object-fit: contain; }
  .grid-stack-item[ioty-type="gauge"] .gauge .text {
    position: absolute;
    text-align: center; }
    .grid-stack-item[ioty-type="gauge"] .gauge .text .value {
      text-align: center;
      font-size: 200%; }

.grid-stack-item[ioty-type="imageTM"] .imageTM {
  position: relative;
  height: calc(100% - 1em);
  width: calc(100% - 1em); }
  .grid-stack-item[ioty-type="imageTM"] .imageTM .wrapper {
    height: 100%;
    width: 100%; }
    .grid-stack-item[ioty-type="imageTM"] .imageTM .wrapper canvas {
      height: 100%;
      width: 100%;
      object-fit: contain; }
  .grid-stack-item[ioty-type="imageTM"] .imageTM .results {
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.5);
    padding: 0.2em; }

.grid-stack-item[ioty-type="remoteImageTM"] .remoteImageTM {
  position: relative;
  height: 100%;
  width: 100%;
  background: lightblue;
  display: flex;
  justify-content: center;
  align-items: center; }
  .grid-stack-item[ioty-type="remoteImageTM"] .remoteImageTM img {
    height: calc(100% - 1em);
    width: calc(100% - 1em);
    object-fit: contain; }
  .grid-stack-item[ioty-type="remoteImageTM"] .remoteImageTM .hidden {
    display: none; }
  .grid-stack-item[ioty-type="remoteImageTM"] .remoteImageTM .results {
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.5);
    padding: 0.2em; }

.grid-stack-item[ioty-type="objectDetector"] .objectDetector {
  position: relative;
  height: calc(100% - 1em);
  width: calc(100% - 1em);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; }
.grid-stack-item[ioty-type="objectDetector"] video {
  max-height: 100%;
  max-width: 100%; }
.grid-stack-item[ioty-type="objectDetector"] img {
  max-height: 100%;
  max-width: 100%; }
.grid-stack-item[ioty-type="objectDetector"] .highlight {
  position: absolute;
  border: solid 1px red;
  color: red;
  margin: 0;
  box-sizing: border-box; }

.grid-stack-item[ioty-type="remoteObjectDetector"] .remoteObjectDetector {
  height: 100%;
  width: 100%;
  background: lightblue;
  display: flex;
  justify-content: center;
  align-items: center; }
.grid-stack-item[ioty-type="remoteObjectDetector"] img {
  height: calc(100% - 1em);
  width: calc(100% - 1em);
  object-fit: contain; }
.grid-stack-item[ioty-type="remoteObjectDetector"] .hidden {
  display: none; }
.grid-stack-item[ioty-type="remoteObjectDetector"] .highlight {
  position: absolute;
  border: solid 1px red;
  color: red;
  margin: 0;
  box-sizing: border-box; }

.grid-stack-item[ioty-type="heartbeat"] .heartbeat {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center; }
.grid-stack-item[ioty-type="heartbeat"] .indicator {
  position: relative;
  width: 80%;
  height: 80%;
  background: white;
  margin: auto;
  border-radius: 10px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; }
  .grid-stack-item[ioty-type="heartbeat"] .indicator img {
    max-width: 80%;
    max-height: 80%;
    position: absolute;
    top: 0;
    left: auto; }
  .grid-stack-item[ioty-type="heartbeat"] .indicator .red {
    display: none; }
  .grid-stack-item[ioty-type="heartbeat"] .indicator .label {
    position: absolute;
    bottom: 0; }
.grid-stack-item[ioty-type="heartbeat"] .indicator.flash .red {
  display: block; }

.grid-stack-item[ioty-type="ecg"] .ecg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center; }
.grid-stack-item[ioty-type="ecg"] .indicator {
  position: relative;
  width: 80%;
  height: 80%;
  background: white;
  margin: auto;
  border-radius: 10px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; }
  .grid-stack-item[ioty-type="ecg"] .indicator img {
    max-width: 80%;
    max-height: 80%;
    position: absolute;
    top: 0;
    left: auto; }
  .grid-stack-item[ioty-type="ecg"] .indicator .hide {
    display: none; }
  .grid-stack-item[ioty-type="ecg"] .indicator .label {
    position: absolute;
    bottom: 0; }

.grid-stack-item[ioty-type="graphXY"] .graphXY {
  height: calc(100% - 1em);
  width: calc(100% - 1em);
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center; }
.grid-stack-item[ioty-type="graphXY"] canvas {
  height: 100%;
  width: 100%;
  object-fit: contain;
  border: solid 1px lightgray; }
.grid-stack-item[ioty-type="graphXY"] canvas.hide {
  visibility: hidden; }

.configuration {
  padding: 0.5em 0em; }
  .configuration input[type=text], .configuration input[type=file], .configuration textarea {
    font-size: 100%;
    background: none;
    border: solid 1px white;
    color: white; }
  .configuration .configurationTitle {
    color: lightgray;
    margin-bottom: 0.1em; }
  .configuration .slider {
    display: flex; }
    .configuration .slider input[type=range] {
      flex-grow: 1; }
    .configuration .slider input[type=text] {
      width: 3em;
      text-align: right; }
  .configuration .text input[type=text] {
    width: 100%; }
  .configuration .check input[type=checkbox] {
    width: 1em;
    height: 1em; }
  .configuration .textarea textarea {
    font-family: unset;
    width: 100%; }

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted white; }

.tooltip .tooltiptext {
  background-color: white;
  color: black;
  border-radius: 6px;
  padding: 0.2em 0.5em;
  position: absolute;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
  max-width: 18em;
  width: max-content; }

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  border-width: 5px;
  border-style: solid; }

.tooltip.bottom .tooltiptext {
  top: 125%;
  left: 50%;
  transform: translateX(-50%); }
.tooltip.bottom .tooltiptext::after {
  margin-left: -5px;
  bottom: 100%;
  left: 50%;
  border-color: transparent transparent white transparent; }

.tooltip.right .tooltiptext {
  top: 50%;
  left: 100%;
  transform: translate(0.5em, -50%); }
.tooltip.right .tooltiptext::after {
  margin-top: -5px;
  right: 100%;
  top: 50%;
  border-color: transparent white transparent transparent; }

.tooltip.left .tooltiptext {
  top: 50%;
  right: 100%;
  transform: translate(-0.5em, -50%); }
.tooltip.left .tooltiptext::after {
  margin-top: -5px;
  left: 100%;
  top: 50%;
  border-color: transparent transparent transparent white; }

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1; }