* {
  font-family: sans-serif;
}

:root {
  --main-bg-color: #ffffff;
  --table-header-bg: #dddddd;
  --table-header-text: #000000;
  --table-header-btn-active: #cccccc;
  --table-header-btn-hover: #eeeeee;
  --table-group: #eeeeee;
  --selected-url-bgcolor: #98c5e7;
  --compare-url-bgcolor: #98e7cf;
  --selected-url-text: #000000;
  --header-cookie-key-text: #222288;
  --header-cookie-value-text: #000000;
  --details-text: #000000;
  --details-section-text: #000000;
  --link-server-disconnected: #444444;
  --preview-code-border: #777777;
  --column-border: #dadada;
  --kdb-border: #000000;
  --tag-bg-color: #cf4b8f;
  --tag-server-bg-color: #580ec7;
  --tag-text: #ffffff;
}

body {
  background-color: var(--main-bg-color);
}

header {
  background-color: var(--main-bg-color);
  padding: 0 5px 10px 0;
}

#navbar {
  display: inline-block;
  width: 100%;
  background-color: var(--table-header-bg);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

#navbar .menu-left {
  float: left;
}

#navbar .menu-right {
  float: right;
}

a:link {
  color: var(--header-cookie-key-text);
}

#navbar a {
  color: var(--table-header-text) !important;
  text-decoration: none;
}

#configform {
  display: inline;
}

#help {
  display: none;
}

.previewcode {
  display: block;
  overflow-x: scroll;
  white-space: pre;
  border: 1px solid var(--preview-code-border);
  font-family: monospace;
}

.prewrap {
  white-space: pre-wrap !important;
}

.previewimage {
  border: 1px solid var(--preview-code-border);
}

.icon {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

kbd {
  padding: 1px 2px 0;
  border-radius: 3px;
  border: 1px solid black;
  font-family: monospace;
}