:root {
  --nav-height: 30px;
  --section-header-height: 35px;
  --main-fg-color: #ffcc66;
  --dark-fg-color: #ffa566;
  --darklight-fg-color: #ffd2b2;
  --light-fg-color: #fffcee;
  --comp-color: #a6ffed;
  --comp-light-color: #a6ffed;
  --comp-dark-color: #97ffea;
  --comp-dark2-color: #3dcc87;
  --main-bg-color: #fff0cb;
  --dark-bg-color: #998f7a;
  --dark2-bg-color: #544F43;
  --dark3-bg-color: #211F1A;
}

body, div, p, span, input, h1, table, tbody, th, tr, td {
  margin: 0;
  padding: 0;
}

pre {
  margin: 10px;
}

html {
  margin: 0;
  padding: 0;

  width: 100%;
  height: 100%;
}

body {
  background-color: var(--main-bg-color);
  display: flex;
  flex-direction: column;

  width: 100%;
  height: 100%;
}

* {
  font-family: monospace;
  font-size: 14px;
}

.button {
  display: block;
  height: 23px;
  line-height: 23px;
  padding: 0 5px;
  border: 1px solid var(--dark-bg-color);
  font-size: 18px;
  text-decoration: none;
  text-align: center;
  color: black;
  user-select: none;
}

.button.disabled {
  background-color: var(--dark-bg-color);
  border: 1px solid black;
}

.nav {
  width: 100%;
  height: var(--nav-height);
  flex-shrink: 0;

  display: flex; 
  color: var(--main-fg-color);
  background-color: var(--dark-bg-color);
}

.nav__item {
  display: block;

  height: 20px;
  line-height: 20px;
  padding: 5px 10px;
  text-decoration: none;

  color: var(--main-fg-color);
  background-color: var(--dark-bg-color);
}

.nav__item--logo {
  font-weight: bold;
  background-color: var(--dark2-bg-color);
}

.nav__item--selected {
  font-weight: bold;
  color: var(--comp-dark2-color);
  background-color: var(--main-bg-color);
}

.section {
  display: none;
}

.section--selected {
  display: block;

  flex-grow: 1;
  height: 100px; /* workaround: layout flexbox by container size not content size */
}

.section--selected.section--split {
  display: flex;
  flex-direction: row;
}

.section--split > .split--rightpane {
  flex-grow: 1;
}

.section__header {
  display: flex;

  box-sizing: border-box;
  padding: 5px;
  height: var(--section-header-height);
  line-height: var(--section-header-height);
  width: 100%;
  background-color: var(--main-bg-color);
  border-bottom: 1px solid var(--dark-bg-color);
}

.splitbar {
  min-width: 5px;
  background-color: var(--dark-bg-color);
  cursor: ew-resize;
}

.drag_parent > * {
  user-select: none;
}

.content__table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}

.content__entry {
}

.content__entry:hover {
  background-color: var(--light-fg-color);
}

.content__entry--cursor {
  /* Material Icon keyboard_arrow_right: https://github.com/google/material-design-icons */
  background: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"><path d="M8.59,16.59L13.17,12L8.59,7.41L10,6l6,6l-6,6L8.59,16.59z"/><path fill="none" d="M0,0h24v24H0V0z"/></svg>') no-repeat left -5px center;
}

.content__cell {
  padding: 5px;
}

.preview {
  z-index: 100;
  position: absolute;

  top: var(--nav-height);
  height: calc(100% - 22px - var(--nav-height));
  width: calc(100% - 22px);
  margin: 10px;
  border: 1px solid var(--dark-bg-color);
  box-shadow: 1px 1px 2px 1px rgba(153,153,153,1);
  background-color: var(--light-fg-color);
}

.preview__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  flex-direction: row;
  height: 30px;
  width: 100%;
  background-color: var(--darklight-fg-color);
}

.preview__title {
  padding: 3px;
  flex-grow: 1;

  font-weight: bold;
}

.preview__close {
  margin-right: 3px;
}

.preview__content {
  height: calc(100% - 30px);

  overflow: auto;
}

.preview__imgcont {
  height: calc(100% - 30px);
}

.preview__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: scale-down;
  /* margin-left: auto; */
  /* margin-right: auto; */
  margin: auto;
}

.preview__entry:hover {
  background-color: var(--comp-color);
}

.preview__cell--name {
  padding-left: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.preview__cell--size {
  text-align: right;
  width: 85px;
}

.kvview {
  padding: 5px;
}

.kvview__item {
  display: flex; 
  font-size: 14px;
  height: 20px;
  padding: 5px 0;
  border-bottom: 1px solid var(--dark-bg-color);
}

.kvview__item:hover {
  background-color: var(--light-fg-color);
}

.kvview__label {
  width: 300px; 
}

.kvview__value {
  flex-grow: 1;
}

.infobar {
  display: flex;
  flex-direction: row;

  background-color: var(--dark-fg-color);
}

.infobar__text {
  flex-grow: 1;

  margin-left: 5px;
  line-height: 25px;
  height: 25px;

  font-weight: bold;
  color: var(--dark3-bg-color);
}

.infobar__button {
  background-color: var(--darklight-fg-color); 
}

browse-fs {
  display: flex;
  flex-direction: column;
}

browse-fs.modal {
  background-color: var(--dark-bg-color);
}

browse-fs.hasfocus {
}

.browsefs__header {
  flex-grow: 0;
  flex-shrink: 0;
}

.browsefs__header--query {
  display: none;
}

browse-fs.filtered .browsefs__header--query {
  display: flex;
  background-color: var(--comp-dark-color);
}

.browsefs__confirm {
  display: none;
  flex-direction: column;
  padding: 0;
  height: auto;
}

browse-fs.confirmactive .browsefs__confirm {
  display: flex;
}

.browsefs__confirm--title {
  background-color: var(--dark2-bg-color);
  color: var(--main-fg-color);
  font-weight: bold;
  line-height: 15px;
  padding: 5px;
}

.browsefs__confirm--detail {
  border: 1px solid black;
  background-color: white;
  margin: 3px;
  line-height: 18px;
  padding: 3px;
}

.browsefs__confirm--btnscont {
  display: flex;
  justify-content: flex-end;
  margin: 0 3px 3px;
}

.browsefs__confirm--ok {
  font-weight: bold;
  background-color: var(--darklight-fg-color);
  margin-right: 2px;
}

.browsefs__header--prompt {
  display: none;
}

browse-fs.promptactive .browsefs__header--prompt {
  display: flex;
  background-color: var(--main-bg-color);
}

.browsefs__parentdir {
}

.browsefs__label {
  margin-left: 5px;
  line-height: 25px;
  height: 25px;
}

.browsefs__path {
  flex-grow: 1;
  height: 25px;
  box-sizing: border-box;
}

.browsefs__sort {
  margin-left: 5px;
  height: 25px;
  box-sizing: border-box;
}

.browsefs__upload {
  display: none;
}

.browsefs__label--upload {
  margin-left: 5px;
}

.browsefs__text {
  flex-grow: 1;
  height: 25px;
  box-sizing: border-box;
}

.browsefs__scroll {
  flex-grow: 1;
  overflow-y: scroll;
}

.browsefs__list--empty {
  text-color: #999;
  font-weight: bold;
}

browse-fs.filtered .browsefs__list {
  background-color: var(--comp-light-color);
}

browse-fs.modal .browsefs__list {
  color: var(--main-fg-color);
}

.browsefs__entry {
}

.browsefs__entry:hover {
}

browse-fs.modal .browsefs__entry:hover {
  background-color: var(--dark-bg-color);
}

.browsefs__entry--selected {
  background-color: var(--dark-fg-color);
}

.browsefs__entry--selected:hover {
  background-color: var(--darklight-fg-color);
}

browse-fs.filtered .browsefs__entry {
  display: none;
}

browse-fs.filtered .browsefs__entry--match {
  display: table-row;
}

.browsefs__cell {
}

.browsefs__cell--type {
  padding-left: 13px;
  width: 8px;
}

.browsefs__cell--size {
  text-align: right;
  width: 65px;
}

.browsefs__cell--uid {
  text-align: right;
  width: 45px;
}

.browsefs__cell--gid {
  text-align: right;
  width: 45px;
}

.browsefs__cell--perm_mode {
  text-align: right;
  width: 30px;
}

.browsefs__cell--modified_time {
  text-align: right;
  width: 80px;
}

.browsefs__cell--name {
  white-space: nowrap;
  text-overflow: ellipsis;
}

.browsefs__highlight {
  background-color: var(--comp-dark-color);
  color: #000;
}

.browsefs__action {
  display: none;
}

.browsefs__entry:hover .browsefs__action {
  display: inline;

  font-weight: bold;
  margin-left: 5px;
  padding: 0 5px;
  width: 30px;
  border: 1px solid black;
}

.logview__more {
  display: block;

  padding: 5px;
  width: 100%;
  text-align: center;

  color: var(--dark2-bg-color);
  text-decoration: none;
}

.logview__more:hover {
  background-color: var(--light-fg-color);
  text-decoration: underline;
}

.logview__entry {
  padding: 3px;
  border-top: 1px solid var(--dark2-bg-color);

  display: flex;
}

.logview__entry:hover {
  background-color: var(--light-fg-color);
}

.logview__cell {
  display: block;
  padding: 0 5px;
}

.logview__cell--time {
  text-align: right;
  width: 150px;
  flex: none;
}

.logview__cell--level {
  font-weight: bold;
  flex: none;
}

.logview__cell--category::before { 
  content: "[";
  font-weight: bold;
  color: var(--dark-bg-color);
}
.logview__cell--category::after { 
  content: "]";
  font-weight: bold;
  color: var(--dark-bg-color);
}

.logview__cell--category {
}

.logview__cell--log {
  flex-grow: 1;
}

.logview__cell--location {
  text-align: right;
  color: var(--dark2-bg-color);
}

.loglevel__level {
  display: flex;
}

.loglevel__radio {
  display: none;
}

.loglevel__label {
  display: block;

  margin: -3px 0;
  padding: 3px 5px;

  color: var(--main-fg-color);
  background-color: var(--dark-bg-color);

  border-top: 1px solid var(--dark2-bg-color);
  border-bottom: 1px solid var(--dark2-bg-color);

  border-collapse: collapse;
}

.loglevel__label:first-of-type {
  border-left: 1px solid var(--dark2-bg-color);
}

.loglevel__label:last-of-type {
  border-right: 1px solid var(--dark2-bg-color);
}

.loglevel__radio:checked + .loglevel__label {
  font-weight: bold;
  color: var(--comp-dark-color);
  background-color: var(--main-bg-color);
}

@media (max-width:580px) {
  .browsefs__cell--uid { display: none; }
  .browsefs__cell--gid { display: none; }
  .browsefs__cell--perm_mode { display: none; }
}

.hidden {
  display: none;
}