html,
body {
  margin: 5px;
  box-sizing: border-box;
  font-size: 12pt;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

:root {
  --col-action: 24px;
  --col-name: 350px;
  --col-short-name: 150px;
  --col-size: 100px;
  --col-datetime: 155px;
  --col-date: 95px;
}

a {
  text-decoration: none;
  color: inherit;
}

.btn {
  padding: 0 7px 3px 7px;
  border-radius: 10px;
  background-color: lightcyan;
}

.btn:hover,
.btn.active {
  background-color: #00c0ff;
}

.error {
  color: red;
}

.file > div {
  float: left;
}

.file > div:nth-child(1) {
  cursor: pointer;
  color: blue;
}

.file > div:nth-child(1):hover {
  text-decoration: underline;
}

.info {
  color: green;
}

.header > span {
  background-color: lightgray;
}

.action {
  padding: 0 !important;
}

.icon-delete::after {
  content: "❌";
  cursor: pointer;
}

.icon-dir::after {
  content: "📁";
}

.icon-file::after {
  content: "📄";
}

.icon-up::after {
  content: "⮤";
}

.row { display: block; margin: 2px 0; height: var(--col-action); }
.row > span { display: inline-block; margin-right: 5px; padding: 0 5px; }
.row > span:nth-child(1) { width: calc(var(--col-action) - 5px); text-align: center; }
.row > span:nth-child(2) { width: calc(var(--col-action) - 5px); text-align: center; }
.row > span:nth-child(3) { width: var(--col-name); overflow-x: clip; text-overflow: ellipsis; }
.row > span:nth-child(4) { width: var(--col-short-name); }
.row > span:nth-child(5) { width: var(--col-size); text-align: right; }
.row > span:nth-child(6) { width: var(--col-size); text-align: right; }
.row > span:nth-child(7) { width: var(--col-datetime); }
.row > span:nth-child(8) { width: var(--col-datetime); }
.row > span:nth-child(9) { width: var(--col-date); }

.name {
  text-wrap: nowrap;
  color: blue;
}

.name > span {
  padding-left: 0;
}

.name:hover {
  cursor: pointer;
  text-decoration: underline;
}