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

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

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  white-space: nowrap;
  overflow-x: hidden;
  background-color: var(--bg-color);
  color: var(--txt-color);
}

body {
  display: flex;
  flex-direction: column;
}

.fontdflt {
  font: caption;
}

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

p {
  margin: 1em 2em;
}

#searchbox {
  flex: none;
  z-index: 1; /* Is in a display: flex (body), so can have a z-index */
  margin: 0.5em;
  border: 1px solid #7A7A7A;
  background-color: #E0E0E0;
  transition: height 0.5s;
  overflow: hidden;
}

#searchbox:hover {
  border: 1px solid #171717;	
}

#searchbox:focus-within {
  border: 1px solid #0078D7;	
}

#firstrow {
  position: relative; /* So that it can have a z-index */
  z-index: 3;
  display: flex;
  flex-direction: row;
}

button {
  box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
              inset -2px -2px 3px rgba(0, 0, 0, .6);
  border: 0;
  border-image-width: 0;
  line-height: 0;
  padding: 0;
  padding-block: 0;
  padding-inline: 0;
  appearance: none;
}

button::-moz-focus-inner,
input[type="color"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
  border: 0;
  padding-block: 0;
  padding-inline: 0;
}

button:enabled:active {
  box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
              inset 2px 2px 3px rgba(0, 0, 0, .6);
}

.butgray {
  background-color: #E0E0E0;
}

.butgray:enabled:hover {
  background-color: #FFFFFF;
}

.butred {
  background-color: #E0E0E0;
}

.butred:enabled {
  background-color: #D00000;
}

.butred:enabled:hover {
  background-color: #FF0000;
}

#buttoncontainer {
  z-index: 4;  /* Is in a display: flex (#firstrow), so can have a z-index */
  transition: width 0.5s;
  overflow: hidden;
  display: flex;
  flex-direction: row;
}

#expmenu {
  position: relative; /* So that it can have a z-index */
  z-index: 6;
}

#twistmenu {
  height: 20px;
  width: 11px;
}

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

.expmenuo:hover {
  background-image: url("/icons/butexpmenuof.png");
}

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

.expmenuc:hover {
  background-image: url("/icons/butexpmenucf.png");
}

#sresetflt {
  position: relative;
  z-index: 5;
  transition: left 0.5s;
}

#sfilters {
  height: 20px;
  width: 21px;
}

button:disabled #sfilters {
  background-image: url("/icons/butresetfiltersdis.png");
}

button:enabled #sfilters {
  background-image: url("/icons/butresetfiltersen.png");
}

.sfilterall {
  border-radius: 0% 0% 0% 0%;
}

.sfilterfldr {
  border-radius: 0% 0% 100% 0%;
}

.sfilterbkmk {
  border-radius: 100% 0% 0% 0%;
}

.swboth {
  background-color: #D00000;
}

.swboth:hover {
  background-color: #FF0000;
}

.swtitle {
  background-image: linear-gradient(to bottom right, #D00000 0%, #D00000 50%, white 51%, white 100%);
}

.swtitle:hover {
  background-image: linear-gradient(to bottom right, #FF0000 0%, #FF0000 50%, white 51%, white 100%);
}

.swurl {
  background-image: linear-gradient(to bottom right, white 0%, white 50%, #D00000 51%, #D00000 100%);
}

.swurl:hover {
  background-image: linear-gradient(to bottom right, white 0%, white 50%, #FF0000 51%, #FF0000 100%);
}

.srboth {
  background-color: #3B679E;
}

.srboth:hover {
  background-color: #2B88D9;
}

.srtitle {
  background-image: linear-gradient(to bottom right, #3B679E 0%, #3B679E 50%, white 51%, white 100%);
}

.srtitle:hover {
  background-image: linear-gradient(to bottom right, #2B88D9 0%, #2B88D9 50%, white 51%, white 100%);
}

.srurl {
  background-image: linear-gradient(to bottom right, white 0%, white 50%, #3B679E 51%, #3B679E 100%);
}

.srurl:hover {
  background-image: linear-gradient(to bottom right, white 0%, white 50%, #2B88D9 51%, #2B88D9 100%);
}

#mglass {
  height: 20px;
  width: 21px;
}

#searchtext {
  flex: 1;
  background-color: white;
  color: black;
  border: 0;
  outline-style: none;
}

#cancelsearch {
  background-color: white;
  cursor: default;
}

#secondrow {
  position: relative;
  z-index: 2;
  transition: top 0.5s;
  display: flex;
  flex-direction: row;
}

#undo {
  height: 20px;
  width: 21px;
  background-image: url("/icons/butundo.png");
}

#redo {
  height: 20px;
  width: 21px;
  background-image: url("/icons/butredo.png");
}

#searchresult {
  height: 20%;
  max-height: 80%;
  min-height: 10%;
  min-width: 100%;
  margin: 0 0 0 0;
  border-top: 1px solid white;
  overflow-x: hidden;
  resize: vertical;
  border-bottom: thin solid black;
  flex: none;
}

.rscrollok {
  overflow-y: auto;
}

.rscrollko {
  overflow-y: hidden;
}

#waiting, #waitingsearch {
  margin-left: 20px;
}

#trace {
  width: calc(100% - 9px);
  resize: none;
  font-size: x-small;
  white-space: pre;
  flex: none;
  margin-left: 4px;
}

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

.bscrollok {
  overflow: auto;
}

.bscrollko {
  overflow: hidden;
}

table {
  min-width: 100%;
  border-spacing: 0;
}

#resultstable {
  width: 100%;
  table-layout: fixed;	
}

tbody {
  min-width: 100%;
}

.cut {
  opacity: 0.5;
}

.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;
  padding: 0;
  min-height: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

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

.curbrow {
  border-top-color: #B9B9B9;
  border-bottom-color: #B9B9B9;
  border-width: 1px;
  border-style: solid;
}

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

.curbrow:hover {
  background-color: #CDE8FF;
  border-top-color: #7BC3FF;
  border-bottom-color: #7BC3FF;
}

.brow:focus, .selbrow:focus, .rselbrow:focus {
  outline: none;
}

.curbrow:focus {
  border-top-color: #7BC3FF;
  border-bottom-color: #7BC3FF;
}

.bkmkitem_b, .bkmkitem_f {
  flex: none;
  cursor: pointer;
  border-top: solid 2px transparent;
  border-bottom: solid 2px transparent;
  margin-top: -2px;
  margin-bottom: -2px;
}

/* Keep separate as this CSSRule is modified by Advanced option to change the cursor attribute */
.rbkmkitem_b {
  flex: none;
  cursor: default;
  border-top: solid 2px transparent;
  border-bottom: solid 2px transparent;
  margin-top: -2px;
  margin-bottom: -2px;
}

.rbkmkitem_f {
  flex: none;
  cursor: default;
  border-top: solid 2px transparent;
  border-bottom: solid 2px transparent;
  margin-top: -2px;
  margin-bottom: -2px;
  width: 100%;
  padding-right: 4px;
  display: flex;
  flex-direction: row;
}

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

.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;
}

.twistiena {
  display: inline-block;
  height: 16px;
  width: 16px;
  vertical-align: text-bottom;
  background-image: url("/icons/twistiena.png");
}

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

.rtwistieac {
  flex: none;
  display: inline-block;
  height: 16px;
  width: 16px;
  vertical-align: text-bottom;
  background-image: url("/icons/rtwistieac.png");
  cursor: default;
}

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

.twistieao {
  display: inline-block;
  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");
}

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

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

.favicon {
  display: inline-block;
  height: 16px;
  width: 16px;
  vertical-align: text-bottom;
}

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

.rfavpath {
  flex-grow: 1;
  text-align: end;
  font-style: italic;
  font-size: 90%;
  padding-left: 10px;
  opacity: 0.6;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

.mymenu {
  position: fixed;
  z-index: 9999;
  visibility: hidden;
  opacity: 1;
  overflow-x: hidden;
  padding: 2px;
  background: #F0F0F0;
  color: #000000;
  border: 1px solid #CCCCCC;
  box-shadow: 4px 4px 3px -2px #808080FF;
  cursor: default;
}

.mymenu div {
  display: block;
  padding: 3px 3px 2px 20px;
  min-width: 150px;
  position: relative;
}

.mymenu div:hover {
  background: #98C8FF;
}

.mymenu hr {
  border: 1px solid #D0D0D0;
  border-bottom: 0;
  margin: 2px 3px 2px 20px;
}

.menuinputradio {
  margin-left: -15px;
}

.menudisabled {
  color: #6D6D6D;
}

.menudisabled:hover {
  background: #E5E5E5;
}

.menudefault {
  font-weight: bold;
}

.notif {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #00000040;
  z-index: 10100;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  visibility: hidden;
}

.dialog {
  border: solid;
  background-color: white;
  color: black;
  width: 90%;
  padding: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: normal;
}