.non-touch-hide {
  display: none;
}
.touch-hide {
  display: block;
}
.non-mobile-hide {
  display: none;
}
.mobile-hide {
  display: block;
}
* {
  --header-height: 32px;
  --navbar-margin: 20px;
  --logo-height: calc(var(--header-height) * 0.625);
  --footer-height: 24px;
  --font-monospace: 'Courier New','Lucida Console',monospace;
  --font-sans-serif: 'OpenSans','Arial','Verdana',sans-serif;
  /*--font-sans-serif: 'Lato','Arial','Verdana',sans-serif;*/
  --font-serif: 'Lora','Times New Roman','Georgia',serif;
  font-family: var(--font-serif);
  font-weight: 400;
  --ui-radius: 4px;
  --ui-width: 200px;
  --ui-font: var(--font-monospace);
  --label-width: 200px;
  --input-height: 14px;
  --select-height: 20px;
  --button-height: 24px;
  --button-radius: calc(var(--button-height) / 2);
  --color-background: #FFF;
  --color-bar: #FFF;
  --color-normal: #000;
  --color-hover: #0A0;
  --color-selected: #060;
  --color-running: #F60;
  --color-note: #080;
  --color-ok: #000;
  --color-good: #080;
  --color-warn: #F80;
  --color-alert: #F00;
  --color-button: #5A5;
  --color-button-outline: #080;
  --color-button-hover: #0A0;
  --color-button-disabled: #CCC;
  --color-input: #EEE;
  --color-on: #080;
  color: var(--color-normal);
  ::-webkit-font-smoothing: antialiased;
  /*--scrollbar-bg: #00F;*/
  --scrollbar-bg: transparent;
  --scrollbar-thumb: #FC8;
  --scrollbar-thumb-hover: #FA4;
  --scrollbar-thumb-size: 8px;
  --scrollbar-shadow: calc(var(--scrollbar-thumb-size) / 3.0);
  --scrollbar-radius: calc(var(--scrollbar-thumb-size) / 2.0);
}
::-webkit-scrollbar
{
  width: var(--scrollbar-thumb-size);
  background: var(--scrollbar-bg);
}
::-webkit-scrollbar-thumb
{
  background: var(--scrollbar-thumb);
  border-radius: var(--scrollbar-radius);
}
::-webkit-scrollbar-thumb:hover
{
  background-color: var(--scrollbar-thumb-hover);
}
html, body
{
  background: var(--color-background);
  font-family: var(--font-sans-serif);
  font-weight: 500;
  font-size: 12px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  overflow: hidden;
}
.disabled
{
  pointer-events: none;
  opacity: 0.25;
}
.bold
{
  color: #EEE;
  font-weight: bold;
}
.font-monospace, .font-monospace option
{
  font-family: monospace;
}
.font-sans-serif
{
  font-family: var(--font-sans-serif);
}
.font-serif
{
  font-family: var(--font-serif);
}
.visible
{
  visibility: visible;
}
.invisible
{
  visibility: hidden;
}
hr
{
  background: var(--color-bar);
  border-top: 0.1px solid var(--color-normal);
}
table
{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0;
  padding: 0;
}
table.compact
{
  width: unset;
  border-collapse: separate;
  border-spacing: 16px 0;
}
th.settings-group
{
  font-weight: bold;
  text-align: left;
  margin: 0;
  padding: 0;
}
.report
{
  font-family: var(--font-sans-serif);
}
td.center
{
  text-align: center;
}
td.padded
{
  padding-left: 0px;
  padding-right: 0px;
}
a
{
  cursor: pointer;
  color: #060;
  text-decoration: none;
}
a:link
{
  cursor: pointer;
  color: #080;
}
a:visited
{
  color: #080;
}
a:hover
{
  color: #0A0;
}
.navbar a
{
  text-decoration: none;
}
.navbar a.selected
{
  cursor: default;
  color: var(--color-selected);
}
.navbar a:not(.selected)
{
  cursor: pointer;
  color: var(--color-normal);
}
.navbar a:link
{
  color: var(--color-normal);
}
.navbar a:visited
{
  color: var(--color-normal);
}
.navbar a:not(.selected):hover
{
  color: var(--color-hover);
}
.selectable
{
  user-select: all;
  font-weight: bold;
}
.selectable::selection
{
  color: #080;
}
.email-container
{
  position: relative;
  font-family: var(--font-serif);
  font-size:14px;
  line-height: 21px;
  width: 90%;
  height: 90%;
  margin: 5%;
}
div.main
{
  max-width:800px;
}
div.top
{
  position: absolute;
  top: 0;
}
div.bottom
{
  position: absolute;
  bottom: 0;
}
.center
{
  text-align: center;
}
.vcenter
{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.center > div, .center > table
{
  margin-left: auto;
  margin-right: auto;
}
.top
{
  top: 0;
}
.bottom
{
  bottom: 0;
}
.left
{
  left: 0;
}
.right
{
  right: 0;
}
.selected
{
  color: var(--color-selected);
}
.running
{
  background-color: var(--color-running);
}
.smart-logo
{
  font-family: var(--font-sans-serif);
  font-size: 10px;
  width: 48px;
}
.image-label
{
  /*margin-left: 4px;*/
  font-family: var(--font-sans-serif);
  font-size: 12px;
  line-height: 14px;
  /*display: block;*/
}
.header
{
  background: var(--color-bar);  
  width: 100%;
  height: var(--header-height);
  position:relative;
}
.navbar
{
  font-family: var(--font-sans-serif);
  font-weight: bold;
  font-size: 12px;
  height: var(--header-height);
  margin-left: var(--navbar-margin);
  margin-right: var(--navbar-margin);
  white-space: nowrap;
}
.navbar:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}
.logo-container
{
  cursor: pointer;
  width: 10%;
  height: var(--header-height);
  display: inline-block;
  margin-left: 0px;
  vertical-align: middle;
  text-align: left;
}
.logo
{
  float: left;
  width: var(--logo-height);
  height: var(--logo-height);
  margin-left: 0px;
  margin-right: 15px;
}
.logo-text
{
  left: calc(var(--logo-height) * 1.125 + var(--navbar-margin));
}
.logo-name
{
  font-family: var(--font-sans-serif);
  font-weight: bold;
  color: #A50;
}
.menu-container
{
  width:  90%;
  height: 17px;
  display: inline-block;
  vertical-align: middle;
}
.menu-item
{
  float: right;
  padding-left: 20px;
}
.fine-print
{
  font-family: var(--font-sans-serif);
  font-size: 10px;
  line-height: 1;
}
.content
{
  position: relative;
  font-family: var(--font-serif);
  font-size:14px;
  line-height: 21px;
  width: 94%;
  height: calc(100% - (var(--header-height) + var(--footer-height)));
  text-align: left;
  margin-top: 0%;
  margin-left: 5%;
  overflow-y: auto;
}
.content-body
{
  height: calc(100% - var(--footer-height));
  margin-right: 4px;
}
.linkPage
{
  cursor: pointer;
}
/*
.link-page:hover
{
  filter: brightness(150%);
}
*/

/* Set scrollbar background, including padding */
/*
::-webkit-scrollbar {
  background: var(--scrollbar-bg);
}
*/

/* Set scrollbar thumb size */
/*
.simplebar-track.simplebar-vertical {
  width: var(--scrollbar-thumb-size);
}
.simplebar-track.simplebar-horizontal {
  height: var(--scrollbar-thumb-size);
}
*/

/* SimpleBar track does not cover scrollbar padding - see above */
/*
.simplebar-track {
  background-color: var(--scrollbar-bg);
  background-color: #0F0;
}
.simplebar-scrollbar {
  pointer-events: all;
  background-color: var(--scrollbar-thumb);
  border-radius: var(--scrollbar-radius);
  -webkit-box-shadow: inset 0 0 var(--scrollbar-shadow) #000000;
}
.simplebar-scrollbar:hover {
  background-color: var(--scrollbar-thumb-hover);
}
*/

/* Override SimpleBar transitions */
/*
.simplebar-scrollbar:before {
  transition: opacity 0s linear;
}
.simplebar-scrollbar.simplebar-visible:before {
  opacity: 0;
}
*/
.hover:hover {
  cursor: pointer;
  filter: brightness(0%) saturate(100%) invert(42%) sepia(93%) saturate(600%) hue-rotate(90deg) brightness(80%);
}
.tool-column {
  position: relative;
  left: 2px;
}
.tool-group-top {
  position:absolute;
  top:0px;
}
.tool-group-bottom {
  position:absolute;
  bottom:0px;
}
.nop {
  height: 8px;
}
.opentab {
  width: 16px;
  content:url(/icons/opentab_mono_48.png);
}
.replay {
  width: 16px;
  content:url(/icons/replay_mono_48.png);
}
.toggleplay {
  width: 16px;
  content:url(/icons/play_mono_48.png);
}
.togglemute {
  width: 16px;
  content:url(/icons/muted_mono_48.png);
}

.footer
{
  background: var(--color-bar);
  height: var(--footer-height);
  width: 100%;
  font-size:10px;
  position: absolute;
  bottom: 0px;
}
.statusbar
{
  /* margin-left: var(--navbar-margin);*/
  margin-left: 0px;
  margin-right: var(--navbar-margin);
}
.statusbar:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}
.notice-heading
{
  font-family: var(--font-serif);
  font-weight: bold;
  font-size:14px;
}
.status-container
{
  width: calc(100% - var(--navbar-margin));
  height: var(--footer-height);
  display: inline-block;
  vertical-align: middle;
}
#status
{
  font-family: var(--font-monospace);
  font-weight: bold;
  font-size:12px;
  padding-top:2px;
}
.status-alert
{
  color: var(--color-alert);
}
.status-warn
{
  color: var(--color-warn);
}
.status-good
{
  color: var(--color-good);
}
.status-ok
{
  color: var(--color-ok);
  font-weight: bold;
}
.status-normal
{
  color: var(--color-normal);
}
.info-container
{
  width: 5%;
  height: var(--footer-height);
  display: inline-block;
  vertical-align: middle;
}
.info
{
  /*
  position: absolute;
  right: calc(var(--navbar-margin) * 2);
  */
}
.version-container
{
  cursor: pointer;
  width: calc(15% - var(--navbar-margin));
  height: var(--footer-height);
  display: inline-block;
  vertical-align: middle;
}
.version
{
  position: absolute;
  right: var(--navbar-margin);
}
.form-alert
{
  color: var(--color-alert);
  display: none;
}


.wrap
{
  display: flex;
  width: 50%;
  height:  100px;
  flex-grow: 1;
  position: relative;
}
.dropzone
{
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  height:  100px;
  justify-content: center;
  align-items: center;
}
.placeholder
{
  width: 100%;
  height: 100px;
  /*max-width: 500px;*/
  padding: 0;
  border-radius: 0.5em;
  background: #EEE;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  cursor: pointer;
}
.placeholder p
{
  font-size: 1.5rem;
  color: #999;
}
/*
#upload-media-dropzone
{
  cursor: pointer;
}
*/
.drag-active
{
  background: #CCFFCC;
  cursor: copy;
}
/*
.viewer
{
  width: 100%;
  height: 100%;
  flex-grow: 1;
  flex-shrink: 1;
  position: absolute;
  top: 0;
  z-index: 0;
}
.axes
{
  width: 100px;
  height: 100px;
  margin: 20px;
  padding: 0px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  z-index: 10;
  pointer-events: none;
}

.upload-btn
{
  margin-top: 0.25em;
}
.upload-btn input
{
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.upload-btn label
{
  color: #353535;
  border: 0;
  border-radius: 3px;
  transition: ease 0.2s background;
  font-size: 0.75rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  padding: 0.125rem 0.5rem;
}
.upload-btn label:hover
{
  background: #DDD;
}
.upload-btn svg
{
  width: 1em;
  height: 1em;
  vertical-align: middle;
  fill: currentColor;
  margin-top: -0.25em;
  margin-right: 0.25em;
}
*/

.viewer-progressbar.ui-progressbar
{
  height:10px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
}
.viewer-progressbar .ui-progressbar-value
{
  background-color: #4CAF50;
}

.swal-confirm-btn,
.swal-cancel-btn,
.swal-deny-btn
{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2%;
  opacity: 1 !important;
  visibility: visible !important;
  color: white !important;
  background-color: #3085d6 !important;
}
.swal-cancel-btn
{
  background-color: #aaa !important;
}
.swal-deny-btn
{
  background-color: #000 !important;
}
.swal2-validation-message
{
  color: #000;
}
.swal2-title
{
  line-height: 1.1;
}

h1
{
  color: var(--color-normal);
  font-family: var(--font-sans-serif);
  font-weight: 300;
  font-size: 30px;
  margin: 0;
  padding: 0;
}
h2
{
  color: var(--color-normal);
  font-family: var(--font-sans-serif);
  font-weight: bold;
  font-size: 24px;
  margin: 0;
  padding-bottom: 0.5em;
}
h3
{
  color: var(--color-normal);
  font-family: var(--font-sans-serif);
  font-weight: bold;
  font-size: 18px;
  margin-block-start: 1em;
  margin-block-end: 0.5em;
}
embed
{
  scrollbar-color: #F00;
  frameBorder: 0;
  border: 0;
  seamless: seamless;
  /*scrolling: no;*/
  overflow: hidden;
}
iframe
{
  scrollbar-color: #00FF00;
  frameBorder: 0;
  border: 0;
  seamless: seamless;
  scrolling: yes
  overflow: hidden;
}

ul
{
  margin-top: 0;
  margin-bottom: 0;
}
ul.top
{
  padding: 0;
  list-style-position: inside;
}

video
{
  width:300px;
  height:300px;
  object-fit: contain;
  background: white;
}

.input-background
{
  border: 0;
  padding-left: 4px;
  padding-right: 4px;
  background: var(--color-input);
  font-family: var(--ui-font);
  font-size: var(--input-height);
}

.clearfix:after
{
  overflow: auto;
  content: "";
  clear: both;
  display: table;
}
label
{
  vertical-align: middle;
  text-align: right;
  font-family: var(--font-sans-serif);
  font-size: 12px;
}
.label-right
{
  width: 110px;
  text-align: right;
}
.form
{
  width: 350px;
  float: left;
}
input
{
  vertical-align: middle;
  border: 0;
  border-radius: var(--ui-radius);
  width: var(--ui-width);
  background: var(--color-input);
  font-family: var(--ui-font);
  font-size: var(--input-height);
}
input[type="checkbox"]
{
  vertical-align: middle;
  width: 13px;
  height: 13px;
  background-color: transparent;
}
input[type="checkbox"]:checked
{
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance:none;
}
input[type='checkbox']:checked:after
{
  position: relative;
  top: -6px;
  content: "\2705";
}
select
{
  border: 0;
  border-radius: var(--ui-radius);
  width: var(--ui-width);
  height: var(--select-height);
  background: var(--color-input);
  font-family: var(--font-sans-serif);
  font-size: var(--input-height);
}
option
{
  font-size: var(--input-height);
}
textarea
{
  margin-top: 0.75%;
  border: 0;
  border-radius: var(--ui-radius);
  width: var(--ui-width);
  height: 4em;
  background: var(--color-input);
  font-family: var(--ui-font);
  font-size: var(--input-height);
}

.button-label
{
  vertical-align: middle;
  font-family: var(--font-sans-serif);
  font-size:12px;
}
button
{
  vertical-align: middle;
  cursor: pointer;
  border: 2px;
  border-style: solid;
  border-radius: var(--button-radius);
  font-family: var(--font-sans-serif);
  font-size: 10px;
  font-weight: bold;
  transition: 0.25s;
  height: var(--button-height);
}
button:disabled
{
  background: var(--color-button-disabled);
  border-color: var(--color-button-disabled);
  color: #AAA;
}
button:not([disabled])
{
  border-color: var(--color-button-outline);
  background: none;
}
button:not([disabled]):hover
{
  /*filter: brightness(110%);*/
  box-shadow: inset 0 0 0 2em var(--color-button-hover);
  border-color: var(--color-button-hover);
  color: #FFF;
}
a.button
{
  /*font-family: var(--font-serif);*/
  color: var(--color-normal);
  cursor: pointer;
  border: 2px;
  border-style: solid;
  border-radius: var(--button-radius);
  border-color: var(--color-button-outline);
  font-size: 10px;
  font-weight: bold;
  transition: 0.25s;
  height: var(--button-height);
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 6px;
  padding-right: 6px;
}
a.button:hover
{
  box-shadow: inset 0 0 0 2em var(--color-button-hover);
  border-color: var(--color-button-hover);
  color: #FFF;
}
/*
.button-fill:not([disabled]):hover,
.button-fill:not([disabled]):focus
{
  box-shadow: inset 0 0 0 2em var(--color-button-hover);
}
.button-pulse:not([disabled]):hover,
.button-pulse:not([disabled]):focus
{
  animation: pulse 1s;
  box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);
}
@keyframes pulse
{
  0%
  {
    box-shadow: 0 0 0 0 var(--color-button-hover);
  }
}
*/


.camera-off
{
  color: var(--color-on);
  font-weight: 900; 
}
.camera-on
{
  color: var(--color-on);
  font-weight: 900; 
}

progressbar
{
  width: 100%;
  background-color: var(--color-input);
}
progressbar:disabled
{
  background-color: var(--color-background);
}
progress
{
  width: 0%;
  height: 100%;
  background-color: var(--color-bar);
}

.ui-tooltip-content
{
  font-family: var(--font-sans-serif);
  font-size:8pt;
}
.combobox-container
{
  background-color: var(--color-input);
  position: relative;
  top: 1px;
  width: 100%;
  height: 20px;
}
.custom.combobox,
.combobox
{
  background-color: var(--color-input);
  position: relative;
  display: inline-block;
  width: 95%;

}
div.background
{
  background-color: var(--color-background);
}
.custom-combobox-input,
.ui-autocomplete-input,
.combobox-input
{
  background-color: var(--color-input);
  position: absolute;
  top: 0px;
  height: 16px;
  width: 95%;
  margin: 0;
}
.combobox-button
{
  background-color: var(--color-input);
  position: absolute;
  top: 1px;
  right: 5px;
  height: 8px;
  font-size:12px;
  margin: 0;
}
.custom-combobox-toggle
{
  font-weight: 900;
}
.ui-menu-item-wrapper,
.ui-menu-item
{
  border: 0;
  width: 98%;
  /*background: var(--color-input);*/
  /*background-color: #8FF;*/
  font-family: var(--ui-font);
  font-size: 12px;
}
  /*filter: brightness(90%);*/
/*
.ui-menu-item-wrapper:hover
{
  background-color: #F00;
}
*/
/*
option:hover
{
  background-color: yellow;
}
option:active
{
  background-color: green;
}
option:focus
{
  background-color: cyan;
}
*/
/*
option:checked
{
  background-color: magenta;
}
*/
/*
select option:checked
{
  box-shadow: 0 0 10px 100px #444 inset;
}
select option:hover
{
  box-shadow: 0 0 10px 100px #888 inset;
}
select:focus > option:checked
{ 
  background: #F00 !important;
}
*/

/* Set scrollbar background, including padding */
/* For Firefox */
/*
section {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
}
::-webkit-scrollbar {
  background: var(--scrollbar-bg);
}
*/

/* Set scrollbar thumb size */
/*
.simplebar-track.simplebar-vertical {
  width: var(--scrollbar-thumb-size);
}
.simplebar-track.simplebar-horizontal {
  height: var(--scrollbar-thumb-size);
}
*/

/* SimpleBar track does not cover scrollbar padding - see above */
/*
.simplebar-track {
  background-color: var(--scrollbar-bg);
}
.simplebar-scrollbar {
  pointer-events: all;
  background-color: var(--scrollbar-thumb);
  border-radius: var(--scrollbar-radius);
  -webkit-box-shadow: inset 0 0 var(--scrollbar-shadow) #000000;
}
.simplebar-scrollbar:hover {
  background-color: var(--scrollbar-thumb-hover);
}
*/

/* Override SimpleBar transitions */
/*
.simplebar-scrollbar:before {
  transition: opacity 0s linear;
}
.simplebar-scrollbar.simplebar-visible:before {
  opacity: 0;
}
*/

/* This works everywhere except Windows Firefox; using SimpleBar instead */
/* scrollbar.width = thumb-width + 2*scrollbar-thumb.border */
/*
section {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
  scrollbar-width: 10px;
}
section:hover {
  scrollbar-color: var(--scrollbar-thumb-hover) var(--scrollbar-bg);
}

::-webkit-scrollbar {
  background: var(--scrollbar-bg);
  width: 22px;
}
::-webkit-scrollbar-track {
  background: var(--scrollbar-bg);
  background-clip: content-box;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-track-piece {
  background: var(--scrollbar-bg);
  background-color: var(--scrollbar-bg);
  width: 10px;
}
::-webkit-scrollbar-button {
  background: var(--scrollbar-bg);
  background-color: var(--scrollbar-bg);
  display: none;
  width: 10px;
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  background-color: var(--scrollbar-thumb);
  background-clip: padding-box;
  -webkit-box-shadow: inset 0 0 4px #000000;
  border: 6px solid var(--scrollbar-bg);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}
::-webkit-scrollbar-corner {
  background: var(--scrollbar-bg);
}
::-webkit-resizer {
  background: var(--scrollbar-bg);
}
*/

.not-allowed {
  cursor: not-allowed;
}
.drag-vertical {
  cursor: ns-resize ;
}
.drag-horizontal {
  cursor: ew-resize ;
}
.drag-both {
  cursor: move ;
}

/* Touch Device */
@media (hover:none) {
  .non-touch-hide {
    display: block;
  }
  .touch-hide {
    display: none;
  }
  .non-mobile-hide {
    display: none;
  }
  .mobile-hide {
    display: block;
  }
}

/* Mobile */
@media (max-width:600px) {
  .non-touch-hide {
    display: block;
  }
  .touch-hide {
    display: none;
  }
  .non-mobile-hide {
    display: block;
  }
  .mobile-hide {
    display: none;
  }
  * {
    font-family: var(--font-sans-serif);
  }
  html {
    font-size: 10px;
    line-height: 15px;
  }
  body {
    margin-right: 54px;
  }
  ::-webkit-scrollbar-thumb
  {
    display: none;
  }
  ::-webkit-scrollbar-thumb:hover
  {
    display: none;
  }
  h1
  {
    font-size: 18px;
  }
  h2
  {
    font-size: 13px;
    font-weight: 800;
  }
  h3
  {
    font-size: 11px;
  }
  h4
  {
    color: #00F;
    font-weight: 800;
    /*line-height: 2;*/
  }
  /*
  video
  {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  */
  .status-container
  {
    width: calc(60% - var(--navbar-margin));
  }
  .info-container
  {
    width: 25%;
  }
  .image-label
  {
    font-size: 9px;
    line-height: 10px;
  }
  /*
  .logo
  {
    top: 10px;
    right: 20px;
    width: 80px;
  }
  */
}