:root {
  --form-body-background: transparent;
  --form-input-border: #a0a1a3;
  --form-input-background: #ffffff;
  --form-input-color: #000000;
  --form-input-disabled-background: #f0f0f0;
  --form-input-disabled-color: #666666;
  --form-placeholder-color: #b0b0b0;
  --form-selector-border: #aebacd;
  --form-button-color: #778;
  --form-button-background: #f6f6f6;
  --form-button-border: #c0c0c0;
  --form-button-border-bottom: #b0b0b0;
  --form-button-border-left: #e0e0e0;
  --form-button-hover-background: #e6e6e6;
  --form-button-hover-border-left: #c9c9c9;
  --form-button-active-background: #d9d9d9;
  --form-button-active-border: #a3a3a3;
  --form-button-focus-background: #e3e3e3;
  --form-error-color: #a00;
  --form-success-color: #060;
  --form-label-color: #444;
  --form-section-border-top: #bbb;
  --form-section-border-bottom: #eee;
  --form-lookup-background: #fff;
  --form-lookup-border: #888;
  --form-lookup-highlight: #eee;
  --form-lookup-text: #000000;
  --form-html-frame-border: #777;
  --form-html-frame-disabled-bg: #ccc;
  --form-pipe-background: #fff;
  --form-pipe-border: #777;
  --form-pipe-disabled-bg: #ccc;
  --form-pipe-item-background: #eee;
  --form-pipe-item-border: #666;
  --form-pipe-item-close: #990;
  --form-captcha-button-color: #333;
  --form-captcha-button-bg: #dadada;
  --form-rich-wrapper-border: #606060;
  --form-rich-format-bg: #d6d6d6;
  --form-rich-format-border: #b6b6b6;
  --form-rich-toolbar-bg: #ffffff;
  --form-rich-toolbar-border: #606060;
  --form-rich-icon-bg: #ffffff;
  --form-rich-icon-border: #ffffff;
  --form-rich-icon-hover-border: #c0c0c0;
  --form-rich-frame-border: #fff;
  --form-scrollbar-base: #e6ebf0;
  --form-scrollbar-face: #fafafa;
}

:root[data-theme="dark"] {
  --form-body-background: #1a1a1a;
  --form-input-border: #444;
  --form-input-background: #1a1a1a;
  --form-input-color: #eee;
  --form-input-disabled-background: #0f0f0f;
  --form-input-disabled-color: #666666;
  --form-placeholder-color: #666666;
  --form-selector-border: #444;
  --form-button-color: #b0b1b3;
  --form-button-background: #1a1a1a;
  --form-button-border: #333;
  --form-button-border-bottom: #2a2a2a;
  --form-button-border-left: #222;
  --form-button-hover-background: #252525;
  --form-button-hover-border-left: #2a2a2a;
  --form-button-active-background: #2a2a2a;
  --form-button-active-border: #444;
  --form-button-focus-background: #252525;
  --form-error-color: #ff6666;
  --form-success-color: #66cc66;
  --form-label-color: #b0b1b3;
  --form-section-border-top: #333;
  --form-section-border-bottom: #222;
  --form-lookup-background: #1a1a1a;
  --form-lookup-border: #444;
  --form-lookup-highlight: #2a2a2a;
  --form-lookup-text: #b0b1b3;
  --form-html-frame-border: #444;
  --form-html-frame-disabled-bg: #0f0f0f;
  --form-pipe-background: #1a1a1a;
  --form-pipe-border: #444;
  --form-pipe-disabled-bg: #0f0f0f;
  --form-pipe-item-background: #2a2a2a;
  --form-pipe-item-border: #444;
  --form-pipe-item-close: #cc9900;
  --form-captcha-button-color: #b0b1b3;
  --form-captcha-button-bg: #252525;
  --form-rich-wrapper-border: #444;
  --form-rich-format-bg: #1a1a1a;
  --form-rich-format-border: #333;
  --form-rich-toolbar-bg: #1a1a1a;
  --form-rich-toolbar-border: #444;
  --form-rich-icon-bg: #1a1a1a;
  --form-rich-icon-border: #1a1a1a;
  --form-rich-icon-hover-border: #444;
  --form-rich-frame-border: #222;
  --form-scrollbar-base: #1a1a1a;
  --form-scrollbar-face: #252525;
}

#divData::-webkit-scrollbar {
  width: 17px;
}

#divData::-webkit-scrollbar-track {
  background-color: var(--form-scrollbar-base);
}

#divData::-webkit-scrollbar-thumb {
  border: solid 1px var(--form-scrollbar-base);
  background-color: var(--form-scrollbar-face);
}

#divData::-webkit-scrollbar-button {
  height: 17px;
  border: solid 1px var(--form-scrollbar-base);
}

/*color is set by fill%3D%22%23777777%22*/
#divData::-webkit-scrollbar-button:start {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201024%201024%22%3E%3Cpath%20fill%3D%22%23777777%22%20d%3D%22M1024%20832q0%20-26%20-19%20-45l-448%20-448q-19%20-19%20-45%20-19t-45%2019l-448%20448q-19%2019%20-19%2045t19%2045t45%2019h896q26%200%2045%20-19t19%20-45z%22%2F%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50%;
}

/*color is set by fill%3D%22%23777777%22*/
#divData::-webkit-scrollbar-button:end {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201024%201024%22%3E%3Cpath%20fill%3D%22%23777777%22%20d%3D%22M1024%20320q0%20-26%20-19%20-45t-45%20-19h-896q-26%200%20-45%2019t-19%2045t19%2045l448%20448q19%2019%2045%2019t45%20-19l448%20-448q19%20-19%2019%20-45z%22%2F%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50%;
}

html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: helvetica, verdana;
  background-color: var(--form-body-background);
}

input,
select,
textarea {
  border-radius: 2px;
  padding: 4px;
  font-family: helvetica, verdana;
  font-size: 0.8em;
  box-sizing: border-box;
  border: 1px solid var(--form-input-border);
  background-color: var(--form-input-background);
  color: var(--form-input-color);
}

input,
select {
  height: 28px;
}

input:disabled,
select:disabled,
textarea:disabled {
  background-color: var(--form-input-disabled-background);
  color: var(--form-input-disabled-color);
}

input::placeholder,
textarea::placeholder,
input::-ms-input-placeholder,
textarea::-ms-input-placeholder,
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: var(--form-placeholder-color);
  opacity: 1;
}

@media print {
  #divData {
    height: auto !important;
  }

  #spnFootprint::before {
    font-size: 11px;
    content: attr(data-footprintHost);
    display: inline-block;
    margin-top: 33px;
    margin-left: 3px;
    color: #778;
  }

  #spnFootprint::after {
    font-size: 11px;
    content: attr(data-footprint);
    display: inline-block;
    margin-top: 33px;
    color: #000;
  }

  input:disabled,
  select:disabled,
  textarea:disabled {
    background-color: #fff !important;
    color: #000 !important;
  }

  #ddSelector,
  #divButtons {
    display: none !important;
  }

  .el,
  .tx,
  .htmlFrame,
  .htmlFrameDisabled,
  .pipeContainer,
  .pipeContainerDisabled {
    border: 1px solid #ffffff !important;
    border-bottom: 1px dotted #404040 !important;
  }

  .tx-lu,
  .tx-sl {
    display: none !important;
  }

  select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
  }

  select::-ms-expand {
    display: none !important;
  }

  .richWrapperDiv {
    border: 1px solid #404040 !important;
  }

  .richFormatBarDiv,
  .richToolBarDiv {
    display: none !important;
  }
}

#divTools {
  padding-left: 16px;
}

#ddSelector {
  float: left;
  width: 90%;
  max-width: 280px;
  height: 24px;
  border: 1px solid var(--form-selector-border);
  margin: 4px 0 4px 2px;
  padding: 2px;
  font-family: helvetica, verdana;
  font-size: 0.8em;
  background-color: var(--form-input-background);
  color: var(--form-input-color);
}

#ddSelector.hidden {
  margin: 0;
  visibility: hidden;
}

#divButtons {
  clear: both;
  margin-left: 2px;
}

#divButtons>button {
  width: 58px;
  height: 28px;
  margin: 0;
  font-size: 0;
  cursor: pointer;
  color: var(--form-button-color);
  background-color: var(--form-button-background);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--form-button-border);
  border-bottom-color: var(--form-button-border-bottom);
  border-left-color: var(--form-button-border-left);
  border-radius: 0;
  vertical-align: middle;
}

#divButtons>button:hover {
  background-color: var(--form-button-hover-background);
  border-left-color: var(--form-button-hover-border-left);
}

#divButtons>button:active {
  background-color: var(--form-button-active-background) !important;
  border: 1px solid var(--form-button-active-border) !important;
  outline: 0;
}

#divButtons>button:focus {
  background-color: var(--form-button-focus-background);
  border-left-color: var(--form-button-hover-border-left);
  outline: 0;
}

#MessageLabel {
  display: inline;
  font-size: 0.8em;
  white-space: nowrap;
  margin: 2px;
  line-height: 24px;
}

.errorMessageLabel {
  color: var(--form-error-color);
}

.successMessageLabel {
  color: var(--form-success-color);
}

#divData {
  clear: both;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  padding-left: 16px;
  margin: 0;
  max-width: 1024px;
}

#spnFootprint {
  display: inline-block;
  white-space: pre;
}

.field {
  padding: 0;
  margin-bottom: 4px;
}

.lb {
  text-overflow: ellipsis;
  font-size: 0.8em;
  width: 90%;
  margin: 4px;
  vertical-align: bottom;
  color: var(--form-label-color);
}

.lb.section-label {
  font-weight: bold;
  display: inline-block;
  scroll-padding-top: 10px;
}

.el {
  width: 90%;
  margin: 2px;
}

.el[type="checkbox"] {
  border-style: none;
  width: auto;
}

.el.section-line {
  height: 0;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  cursor: default;
  border-top: 1px solid var(--form-section-border-top);
  border-bottom: 1px solid var(--form-section-border-bottom);
}

.tx {
  width: 90%;
  margin: 2px;
  vertical-align: middle;
}

.tx::-ms-clear {
  display: none;
}

.tx-lu,
.tx-sl {
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  border: 0;
  font-size: 0;
  display: inline-block;
  width: 24px;
  height: 22px;
  cursor: pointer;
  border-radius: 0;
  padding-left: 0;
  padding-top: 0;
  color: var(--form-button-color);
  vertical-align: middle;
}

.tx-lu>svg,
.tx-sl>svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.tx-lu {
  margin-left: -52px;
}

.tx-sl {
  margin-left: 0;
}

.lookupdd {
  background-color: var(--form-lookup-background);
  width: 90%;
  margin: -2px 2px 2px 2px;
  height: 100px;
  border: 1px solid var(--form-lookup-border);
}

.lookupdd table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  width: 100%;
  cursor: pointer;
}

.lookupdd table tr td {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  height: 22px;
  font-size: 0.8em;
  color: var(--form-lookup-text);
}

.highlightlookuprow {
  background-color: var(--form-lookup-highlight);
  font-weight: bold;
}

.elError {
  width: 90%;
  margin: 2px;
  border: 1px solid var(--form-error-color);
  background-color: var(--form-input-background);
  color: var(--form-input-color);
}

.lbError {
  color: var(--form-error-color);
  text-overflow: ellipsis;
  font-size: 0.8em;
  width: 90%;
  margin: 2px;
}

.htmlFrame {
  width: 90%;
  height: 400px;
  margin: 2px;
  border: 1px dashed var(--form-html-frame-border);
  padding: 0;
  overflow: auto;
  background-color: transparent;
}

.htmlFrameDisabled {
  width: 90%;
  margin: 2px;
  border: 1px dashed var(--form-html-frame-border);
  padding: 0;
  overflow: auto;
  background-color: var(--form-html-frame-disabled-bg);
}

.pipeContainer {
  overflow: auto;
  width: 90%;
  margin: 2px;
  border: 1px solid var(--form-pipe-border);
  background-color: var(--form-pipe-background);
}

.pipeContainerError {
  overflow: auto;
  width: 90%;
  margin: 2px;
  border: 1px solid var(--form-error-color);
  background-color: var(--form-pipe-background);
}

.pipeContainerDisabled {
  overflow: auto;
  width: 90%;
  margin: 2px;
  border: 1px solid var(--form-pipe-border);
  background-color: var(--form-pipe-disabled-bg);
}

.pipeTextInput {
  border: 0;
  font-size: 16px;
  background-color: var(--form-pipe-background);
  color: var(--form-input-color);
}

.pipeTextInput:focus {
  outline: none;
}

.pipeItem {
  background-color: var(--form-pipe-item-background);
  border: 1px solid var(--form-pipe-item-border);
  padding: 2px 0 2px 4px;
  margin: 2px;
  float: left;
  white-space: nowrap;
  font-size: 0.8em;
}

.pipeItemClose {
  color: var(--form-pipe-item-close);
  cursor: pointer;
  padding-left: 4px;
  padding-right: 4px;
}

#spnCaptcha>button {
  width: 28px;
  height: 28px;
  color: var(--form-captcha-button-color);
  background-color: var(--form-captcha-button-bg);
  border: 1px solid var(--form-input-border);
  vertical-align: top;
}

#spnCaptcha>button>svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  vertical-align: middle;
}

.richWrapperDiv {
  width: 90%;
  border: 1px solid var(--form-rich-wrapper-border);
  border-radius: 4px;
  margin-left: 2px;
}

.richFormatBarDiv {
  background-color: var(--form-rich-format-bg);
  overflow: auto;
  border-bottom: 1px solid var(--form-rich-format-border);
  border-radius: 4px 4px 0 0;
}

.richToolBarDiv {
  background-color: var(--form-rich-toolbar-bg);
  overflow: auto;
  border-bottom: 1px solid var(--form-rich-toolbar-border);
}

.richFormatBarSpan {
  float: left;
  padding: 2px;
}

.richToolBarSpan {
  float: left;
  padding: 2px;
}

.richFormatBarSpan>select {
  padding: 2px;
  line-height: 1;
  border: 1px solid var(--form-rich-wrapper-border);
  -webkit-appearance: none;
}

.richFormatBarSpan>input {
  background-color: var(--form-rich-format-bg);
  border: 1px outset var(--form-button-border);
  -webkit-appearance: none;
}

.richIcon {
  width: 20px;
  height: 20px;
  background-color: var(--form-rich-icon-bg);
  border: 1px solid var(--form-rich-icon-border);
  padding: 2px;
  cursor: pointer;
}

.richIcon:hover {
  background-color: var(--form-rich-icon-bg);
  border: 1px outset var(--form-rich-icon-hover-border);
}

.richIcon:active {
  background-color: var(--form-rich-icon-bg);
  border: 1px inset var(--form-rich-icon-hover-border);
}

.richFrame {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 4px solid var(--form-rich-frame-border);
  box-sizing: border-box;
}

svg.icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

@media only screen and (-webkit-min-device-pixel-ratio: 0) and (max-device-width: 480px) {

  select,
  textarea,
  input,
  #ddSelector {
    font-size: 16px;
  }
}