*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
}
ul[role="list"],
ol[role="list"] {
  list-style: none;
}
html:focus-within {
  scroll-behavior: smooth;
}
a:not([class]) {
  text-decoration-skip-ink: auto;
}
body,
html {
  scroll-behavior: smooth;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}

:root {
  --main-bg-color: #333;
  --drag-border-color: #888;
  --drag-over-border-color: #d9d9d9;
  --text-color: #d9d9d9;
  --table-header-bg-color: #111;
}

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

#uploadDrop {
  width: 80%;
  margin: 50px auto;
  border: dashed var(--drag-border-color) 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}
#uploadDrop.over {
  border-color: var(--drag-over-border-color);
}

#result,
.data {
  width: 100%;
  border-collapse: collapse;
}
.data {
  table-layout: fixed;
}
.hidden {
  display: none !important;
}
#result th,
#result td {
  width: 33%;
}
#result td {
  cursor: pointer;
}
#result .data td {
  cursor: default;
}
th {
  font-size: 14px;
  text-transform: uppercase;
  background-color: var(--table-header-bg-color);
  border-spacing: 0;
  border-top: 1px solid grey;
  text-align: left;
  padding: 4px 10px;
}
td {
  padding: 4px 10px;
}
.data td {
  background: #272727;
}