:root{
  --bg-color: white; 
  --txt-color: #222426;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg-color: #38383d;
    --txt-color: #f9f9fa;
  }
}

html {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--bg-color);
}

body {
  margin: 0px;
  height: calc(100% - 0px);
  width: calc(100% - 0px);
  display: grid;
  grid-template-columns: min-content minmax(400px, auto);
  grid-template-rows: 420px minmax(200px, auto);
  background-color: var(--bg-color);
}

.fontdflt {
  font: caption;
}

.fontwin {
  font: 12px "Segoe UI";
}

#pane {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 3;
  overflow: auto;
  resize: horizontal;
  width: 200px;
  min-width: 200px;
  max-width: 400px;
  border: 1px solid #F0F0F0;
  background-color: var(--bg-color);
  color: var(--txt-color);
  display: flex;
  flex-direction: column;
}

#displayopt {
  margin: 0 0 0 0;
  border: 1px solid #F0F0F0;
  border-right-color: #E0E0E0;
  background: #F0F0F0;
  color: #222426;
  flex: none;
}

#bookmarks {
  margin: 0 0 0 0;
  border-top: 1px solid var(--bg-color);
  flex: auto;
}

.bscrollok {
  overflow: auto;
}

.bscrollko {
  overflow: hidden;
}

table {
  min-width: calc(100% - 2px);
  border-spacing: 0;
}

tbody {
  min-width: 100%;
}

.brow {
  min-width: 100%;
  background-color: var(--bg-color);
  border: 1px solid var(--bg-color);
  padding: 0;
  min-height: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.selbrow {
  min-width: 100%;
  background-color: #D9D9D9;
  border-color: #D9D9D9 #D9D9D9 #CCCCCC;
  border-width: 1px;
  border-style: solid;
  padding: 0;
  min-height: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.brow:hover, .selbrow:hover {
  background-color: #D7EDFF;
  border-color: #D7EDFF;
}

.brow:focus, .selbrow:focus {
  outline: none;
  background-color: #CDE8FF;
  border-color: #7BC3FF;
}

.seqnum {
  height: 16px;
  width: 5ch;
  flex: none;
  cursor: default;
}

.nocursor {
  flex: none;
  height: 16px;
  width: 16px;
  vertical-align: text-bottom;
}

.urcursor {
  flex: none;
  height: 16px;
  width: 16px;
  vertical-align: text-bottom;
  background-image: url("/icons/urcursor.png");
}

.urcursortop {
  flex: none;
  height: 16px;
  width: 16px;
  vertical-align: text-bottom;
  background-image: url("/icons/urcursortop.png");
}

.histicon {
  flex: none;
  height: 16px;
  width: 16px;
  margin-right: 4px;
  vertical-align: text-bottom;
}

.started {
  background-image: url("/icons/started.png");
}

.cleared {
  background-image: url("/icons/cleared.png");
}

.reloaded {
  background-image: url("/icons/reloaded.png");
}

.reloadeda {
  background-image: url("/icons/reloadeda.png");
}

.created {
  background-image: url("/icons/created.png");
}

.created_u {
  background-image: url("/icons/created_u.png");
}

.created_r {
  background-image: url("/icons/created_r.png");
}

.moved {
  background-image: url("/icons/moved.png");
}

.movedd {
  background-image: url("/icons/movedd.png");
}

.moved_u {
  background-image: url("/icons/moved_u.png");
}

.moved_r {
  background-image: url("/icons/moved_r.png");
}

.reordered {
  background-image: url("/icons/reordered.png");
}

.reorderedd {
  background-image: url("/icons/reorderedd.png");
}

.reordered_u {
  background-image: url("/icons/reordered_u.png");
}

.reordered_r {
  background-image: url("/icons/reordered_r.png");
}

.removed {
  background-image: url("/icons/removed.png");
}

.removedd {
  background-image: url("/icons/removedd.png");
}

.removed_u {
  background-image: url("/icons/removed_u.png");
}

.removed_r {
  background-image: url("/icons/removed_r.png");
}

.changed {
  background-image: url("/icons/changed.png");
}

.changedd {
  background-image: url("/icons/changed.png");
}

.changed_u {
  background-image: url("/icons/changed_u.png");
}

.changed_r {
  background-image: url("/icons/changed_r.png");
}

.inactive {
  opacity: 0.5;
}

.meta {
  flex: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: default;
  border-top: solid 2px transparent;
  border-bottom: solid 2px transparent;
  margin-top: -2px;
  margin-bottom: -2px;
}

.bkmkitem_b, .bkmkitem_f, .bkmkitem_mlst, .bkmkitem_mb, .bkmkitem_mf, .bkmkitem_urlst, .bkmkitem_u, .bkmkitem_r {
  flex: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: default;
  border-top: solid 2px transparent;
  border-bottom: solid 2px transparent;
  margin-top: -2px;
  margin-bottom: -2px;
}

.bkmkitem_mb, .bkmkitem_mf, .bkmkitem_urlst, .bkmkitem_u, .bkmkitem_r {
  flex: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: default;
  border-top: solid 2px transparent;
  border-bottom: solid 2px transparent;
  margin-top: -2px;
  margin-bottom: -2px;
  margin-left: 16px;
}

.bkmkitem_s {
  flex: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-top: solid 2px transparent;
  border-bottom: solid 2px transparent;
  margin-top: -2px;
  margin-bottom: -2px;
}

.bkmkitem_ms {
  flex: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-top: solid 2px transparent;
  border-bottom: solid 2px transparent;
  margin-top: -2px;
  margin-bottom: -2px;
  margin-left: 16px;
}

.favseparator {
  flex: auto;
  border-bottom: 1px solid #222426;
}

.brow:hover .favseparator, .brow:focus .favseparator, .selbrow .favseparator {
  border-bottom-color: #222426;
}

.favseparatorend {
  flex: none;
  width: 1px;
  height: 16px;
}

.ffavicon {
  flex: none;
  height: 16px;
  width: 16px;
  vertical-align: text-bottom;
  background-image: url("/icons/folder.png");
}

.mfavicon {
  flex: none;
  height: 16px;
  width: 16px;
  vertical-align: text-bottom;
  background-image: url("/icons/multiple.png");
}

.nofavicon {
  flex: none;
  height: 16px;
  width: 16px;
  vertical-align: text-bottom;
  background-image: url("/icons/nofavicon.png");
}

.vbar {
  flex: none;
  height: 16px;
  width: 16px;
  margin-left: 20px;
  margin-right: 16px;
  vertical-align: text-bottom;
  background-image: url("/icons/vbar.png");
}

.vbarend {
  flex: none;
  height: 16px;
  width: 16px;
  margin-left: 20px;
  vertical-align: text-bottom;
  background-image: url("/icons/vbarend.png");
}

.urfavicon {
  flex: none;
  height: 16px;
  width: 16px;
  vertical-align: text-bottom;
  background-image: url("/icons/urfavicon.png");
}

.favicon {
  flex: none;
  height: 16px;
  width: 16px;
  vertical-align: text-bottom;
}

.uritemicon {
  flex: none;
  height: 16px;
  width: 16px;
  margin-left: 52px;
  vertical-align: text-bottom;
}

.undo {
  background-image: url("/icons/undo.png");
}

.redo {
  background-image: url("/icons/redo.png");
}

.favtext {
  margin-left: 3px;
  white-space: pre;
}

.favtextm {
  margin-left: 3px;
  white-space: pre;
  color: #808080;
  font-style: italic;
}

.incompleteop {
  color: red;
}

.twistieac {
  flex: none;
  height: 16px;
  width: 16px;
  vertical-align: text-bottom;
  background-image: url("/icons/twistieac.png");
  cursor: pointer;
}

.brow:hover .twistieac, .selbrow:hover .twistieac {
  background-image: url("/icons/twistieacf.png");
}

.twistieao {
  flex: none;
  height: 16px;
  width: 16px;
  vertical-align: text-bottom;
  background-image: url("/icons/twistieao.png");
  cursor: pointer;
}

.brow:hover .twistieao, .selbrow:hover .twistieao {
  background-image: url("/icons/twistieaof.png");
}

#node {
  overflow: auto;
  border: 1px solid #F0F0F0;
  border-bottom-color: #E0E0E0;
  background: #F0F0F0;
}

#ndtable {
  width: calc(100% - 2px);
}

.ndcol1 {
  min-width: 80px;
  width: 80px;
}

.ndcol2 {
  min-width: 120px;
  width: 120px;
}

/*
.ndcol3 {
}
*/

.ndrrule {
  border-top: 1px solid #A0A0A0;	
  border-bottom: 1px solid #A0A0A0;
  padding: 0;	
}

.ndfield1 {
  border: 1px solid #A0A0A0;
  padding: 0 4px 0 4px;
  width: 25ch;
}

.ndfield2 {
  border: 1px solid #A0A0A0;
  padding: 0 4px 0 4px;
  width: calc(100% - 10px);
  white-space: pre;
}

#actions { 
  overflow: auto;
  border: 1px solid #F0F0F0;
  border-top-color: #E0E0E0;
  background: #F0F0F0;
  display: flex;
  flex-direction: column;
}

#buttons {
  flex: none;
}

#atextlog {
  flex: none;
}

#alog {
  flex: auto;
  width: calc(100% - 10px);
  margin-left: 2px;
  resize: none;
  font-size: x-small;
  white-space: pre;
  background: #F0F0F0;
  overflow: visible;
}