:root {
  --background-color-light: rgb(223.23975, 225.1476768293, 226.59225);
  --text-color-light: hsl(205.8536585366, 77.2131147541%, -2.1176470588%);
  --text-highlight-light: #1e6499;
  --button-background-color-light: #1e6499;
  --button-highlight-color-light: rgb(21.6393442623, 72.131147541, 110.3606557377);
  --button-text-color-light: snow;
  --selection-highlight-color-light: rgba(39.3928278689, 113.2139994002, 169.1071721311, 0.22);
  --selection-area-highlight-color-light: rgb(39.3928278689, 113.2139994002, 169.1071721311);
  --border-color-light: rgb(10.3908196721, 50.4663094762, 80.8091803279);
  --scroll-color-thumb-light: rgb(16.2014754098, 78.6876009596, 125.9985245902);
  --scroll-color-thumb-hover-light: hsl(205.8536585366, 77.2131147541%, -12.1176470588%);
  --scroll-color-background-light: rgb(223.23975, 225.1476768293, 226.59225);
  --hover-background-color-light: rgb(196.3189158357, 199.8440522829, 202.5130841643);
  --selected-hover-background-color-light: rgb(29.7571721311, 85.5213664534, 127.7428278689);
  --separator-color-light: rgb(169.3980816713, 174.5404277365, 178.4339183287);
  --mandatory-color-light: rgb(10.3908196721, 50.4663094762, 80.8091803279);
  --mandatory-background-color-light: rgba(255, 254, 194, 0.7607843137);
  --readonly-color-light: lightgrey;
  --alert-color-light: #1e6499;
  --background-color-dark: rgb(16.928, 19.2368172043, 26.688);
  --text-color-dark: rgb(239.047, 240.4099032258, 242.427);
  --text-highlight-dark: rgb(55.5191489362, 119.4553191489, 214.0808510638);
  --button-background-color-dark: rgb(38.9446808511, 99.7957446809, 189.8553191489);
  --button-highlight-color-dark: rgb(21.5829787234, 55.3063829787, 105.2170212766);
  --button-text-color-dark: snow;
  --selection-highlight-color-dark: rgba(41.6779255319, 94.1554049417, 171.8220744681, 0.6);
  --selection-area-highlight-color-dark: rgb(41.6779255319, 94.1554049417, 171.8220744681);
  --border-color-dark: rgb(56.515674248, 64.223871378, 89.100325752);
  --scroll-color-thumb-dark: rgb(36.721837124, 41.7303442911, 57.894162876);
  --scroll-color-thumb-hover-dark: rgb(76.309511372, 86.7173984648, 120.306488628);
  --scroll-color-background-dark: rgb(16.928, 19.2368172043, 26.688);
  --hover-background-color-dark: hsl(225.8064516129, 22.3771093177%, -1.4478431373%);
  --selected-hover-background-color-dark: rgb(31.7220744681, 71.663949897, 130.7779255319);
  --separator-color-dark: rgb(56.515674248, 64.223871378, 89.100325752);
  --mandatory-color-dark: yellow;
  --mandatory-background-color-dark: #292929;
  --readonly-color-dark: rgb(36.721837124, 41.7303442911, 57.894162876);
  --alert-color-dark: rgb(38.9446808511, 99.7957446809, 189.8553191489);
}

html, body {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  height: 100%;
  width: 100%;
}

html, body, input, textarea {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 400;
  background-color: rgba(0, 0, 0, 0);
  margin: 0;
  padding: 0;
  text-align: left;
  -ms-touch-action: none;
  touch-action: none;
  position: absolute;
  font-size: 15px;
}

.panel.title {
  font-size: large;
  font-weight: 600;
  margin: 0;
  padding: 0;
  position: absolute;
}

div {
  box-sizing: border-box;
}

#main {
  position: fixed;
  background-color: var(--background-color);
  width: 100%;
  left: 0%;
  height: 100%;
  top: 0%;
}

.panel {
  color: var(--text-color);
  background-color: rgba(0, 0, 0, 0);
}

.banner {
  border: 2px solid var(--border-color);
  border-radius: 5px;
}

.label {
  color: var(--text-color);
  background-color: rgba(0, 0, 0, 0);
}

input {
  border: 1px solid var(--border-color);
  border-radius: 5px;
  outline: none;
  margin: 0;
  padding: 5px 2px;
  color: var(--text-color);
  background-color: var(--background-color);
  box-sizing: border-box;
}

/* Specific states of input */
input:valid,
input[readonly]:valid,
input[required]:valid {
  border: 1px solid var(--border-color);
  background-color: var(--background-color);
}

input:invalid {
  border: 2px solid red;
}

input:focus,
input[readonly]:focus,
input[required]:focus {
  border: 2px solid var(--selection-highlight-color);
}

input[required] {
  border: 1px solid var(--mandatory-color);
  background-color: var(--mandatory-background-color);
}

input[readonly] {
  background-color: var(--readonly-color);
  border: 1px solid var(--border-color);
}

.login-label {
  font-size: 14px;
  text-align: left;
  color: var(--button-background-color);
}

.login-field {
  font-size: 18px;
  position: absolute;
}

.login-response {
  font-size: 16px;
  text-align: center;
  position: absolute;
  color: var(--alert-color);
  border: 1px dotted var(--alert-color);
  border-radius: 5px;
  background-color: var(--readonly-color);
}

textarea {
  border: 1px solid var(--border-color);
  border-radius: 5px;
  outline: none;
  margin: 0;
  padding: 5px 2px;
  color: var(--text-color);
  background-color: var(--background-color);
  box-sizing: border-box;
  resize: none;
}

textarea:valid,
textarea[readonly]:valid,
textarea[required]:valid {
  border: 1px solid var(--border-color);
  background-color: var(--background-color);
}

textarea:invalid {
  border: 2px solid red;
}

textarea:focus,
textarea[readonly]:focus,
textarea[required]:focus {
  border: 2px solid var(--selection-highlight-color);
}

textarea[required] {
  border: 1px solid var(--mandatory-color);
  background-color: var(--mandatory-background-color);
}

textarea[readonly] {
  background-color: var(--readonly-color);
  border: 1px solid var(--border-color);
}

.image-scroller::-webkit-scrollbar {
  width: 20px;
  height: 20px;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-corner {
  background: var(--scroll-color-background);
}

::-webkit-scrollbar-track {
  background: var(--scroll-color-background);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: var(--scroll-color-thumb);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-color-thumb-hover);
  border-radius: 5px;
}

.table-container {
  box-sizing: border-box;
  overflow: auto;
}

.table {
  font-size: 14px;
  box-sizing: border-box;
  padding: 10px;
  border-collapse: collapse;
  width: 100%;
}

thead {
  display: table-row-group; /* Set thead to be full width */
  position: sticky;
  top: 0;
}

.table td, .table th {
  box-sizing: border-box;
  border: 1px solid var(--separator-color);
  border-left: 0; /* Remove the left border */
  border-right: 0; /* Remove the right border */
  width: auto;
  padding: 5px 10px;
}

table tr:first-child th {
  border-top: 0;
}

th {
  font-weight: normal;
  text-align: left;
}

.table-header {
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  font-weight: normal;
  text-align: left;
}

.table-header-cell {
  padding: 5px 10px;
}

.table-row {
  color: var(--text-color);
  background-color: var(--background-color);
}

.table-row-cell {
  padding: 2px 10px;
}

.table-row.selected {
  color: var(--text-color);
  filter: brightness(60%);
}

.table-row:hover {
  filter: brightness(80%);
  cursor: pointer;
}

.table-row.selected:hover {
  filter: brightness(70%);
}

input[type=checkbox] {
  margin-right: 5px;
}

.checkbox-container {
  padding-top: 5px;
}

.html-table-inner-container {
  position: absolute;
  overflow: auto;
  overflow-wrap: anywhere;
  width: 100%;
  height: 100%;
  padding-right: 2px;
}

.bar-button {
  margin: 0;
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  border: 1px solid var(--button-text-color);
  padding: 5px 10px;
  position: absolute;
  text-align: center;
  cursor: pointer;
  border-radius: 5px;
  display: table-cell;
  vertical-align: middle;
  box-sizing: border-box;
}

.bar-button:not(:disabled):hover {
  background-color: var(--button-highlight-color);
}

.bar-button:disabled {
  background-color: var(--readonly-color);
  color: var(--button-disabled-text-color);
  cursor: not-allowed;
}

.menu-panel {
  height: auto;
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: 5px;
}

.menu-title {
  background-color: var(--background-color);
  color: var(--text-color);
  border-bottom: 1px solid var(--separator-color);
  font-weight: bold;
  text-align: center;
  height: auto;
  box-sizing: border-box;
  pointer-events: none;
  padding-top: 2px;
  padding-bottom: 2px;
}

.menu-item {
  background-color: var(--background-color);
  color: var(--text-color);
  padding-left: 8px;
  padding-top: 2px;
  padding-bottom: 2px;
  box-sizing: border-box;
  height: 40px;
  line-height: 40px;
}

.menu-item:hover {
  color: var(--text-highlight);
}

.menu-item-divider {
  border-top: 1px solid var(--separator-color);
  padding-left: 0px;
}

.combo-focused {
  border: 2px solid var(--selection-highlight-color);
}

.combo-blurred {
  border: 1px solid var(--border-color);
}

select {
  background-color: var(--background-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  outline: none;
  margin: 0;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 2px;
  padding-right: 2px;
  box-sizing: border-box;
}

select:valid,
select[disabled]:valid,
select[required]:valid {
  border: 1px solid var(--border-color);
  background-color: var(--background-color);
}

select:invalid {
  border: 2px solid red;
}

select:focus,
select[disabled]:focus,
select[required]:focus {
  border: 2px solid var(--selection-highlight-color);
}

select[required] {
  border: 1px solid var(--mandatory-color);
  background-color: var(--mandatory-background-color);
}

select[disabled] {
  background-color: var(--readonly-color);
  border: 1px solid var(--border-color);
}

select[multiple] {
  position: absolute;
  outline: none;
  height: auto;
  max-height: 150px;
  overflow: auto;
  overflow-y: auto;
  backface-visibility: hidden;
}

select[multiple] option {
  padding-right: 2px;
}

select[multiple]:focus {
  outline: none; /* Removes the default focus outline */
}

select[multiple] option:focus {
  background-color: var(--selected-hover-background-color); /* Resets to default or inherit from select */
  color: var(--text-color);
}

select[multiple]:focus option:checked {
  background-color: var(--selection-area-highlight-color);
  color: var(--text-color);
}

select[multiple]:focus option:focus:checked {
  background-color: var(--selection-area-highlight-color);
  color: var(--text-color);
}

select[multiple] option:hover {
  background-color: var(--hover-background-color);
  cursor: pointer;
}

select[multiple] option:checked {
  background-color: var(--selection-area-highlight-color);
  color: var(--text-color);
}

select[multiple] option:checked:hover {
  background-color: var(--selected-hover-background-color);
  color: var(--text-color);
}

.snackbar {
  visibility: hidden;
  width: 200px;
  margin-left: -100px;
  background-color: var(--selected-hover-background-color);
  color: var(--text-color);
  text-align: center;
  border-radius: 5px;
  padding: 12px;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
}

.snackbar-text {
  flex-grow: 1;
  padding: 0 20px;
}

.close-btn {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  color: var(--text-color);
  font-size: 20px;
  cursor: pointer;
  outline: none;
}

.close-btn:hover {
  color: var(--text-highlight);
}

.snackbar.show {
  visibility: visible;
  opacity: 1;
  -webkit-animation: fadein 0.5s;
  animation: fadein 0.5s;
}

.snackbar.hide {
  visibility: hidden;
  -webkit-animation: fadeout 2.5s;
  animation: fadeout 2.5s;
  opacity: 0;
}

.panel.readonly-mode .button {
  pointer-events: none !important;
}
.panel.readonly-mode .bar-button {
  pointer-events: none !important;
}
.panel.readonly-mode .tickbox {
  pointer-events: none !important;
}
.panel.readonly-mode .onoff {
  pointer-events: none !important;
}

.readonly-look {
  background-color: var(--readonly-color);
  color: var(--text-color);
  border: var(--border-color);
}

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/*# sourceMappingURL=pj.css.map */