:root {
  --font-size: 1rem;
  --bg: #1f2029;
  --bgSoft: #2f3039;
  --textColor: #ffffff;
}

html,
body {
  margin: 0;
  padding: 0;
}
body {
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
  color: var(--textColor);
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  background-color: var(--bg);
  /* padding: 20px 0; */
  padding: 30px 0;
}

#root {
  --maxWidth: 960px;
  max-width: var(--maxWidth);
  margin: 0 auto;
  padding: 2px 1em;
}

h1 {
  margin-top: 1em;
  font-size: 1.25rem;
}

.folder-data {
  list-style-type: decimal-leading-zero;
}

details {
  --vertical-padding: 0.5em;
  --vartical-top: calc(var(--vertical-padding) + 0.4em);
  margin-bottom: 10px;
  font-size: var(--font-size);
  position: relative;
}

/* details:hover::after { */

details::after {
  content: 'Source file: ' attr(data-file-name);
  /* position: absolute;
top: calc(-1em - var(--vartical-top));
right: 0; */
  position: fixed;
  top: 0.5em;
  left: 0.5em;
  /* background-color: var(--bgSoft); */
  background-color: #000;
  padding: var(--vertical-padding) 0.6em;
  /* padding-bottom: 0; */
  outline: 1px solid var(--textColor);
  z-index: 10;
  font-weight: bold;
  max-width: max(80vw, 50%);
  transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
  display: none;
  /* white-space: nowrap; */
  /* opacity: 0;
visibility: hidden; */
  --max-lines: 3;
  white-space: wrap;
  -webkit-line-clamp: var(--max-lines);
  line-clamp: var(--max-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
}

/* details:has(summary:hover):hover::after { */
details:hover::after {
  /* opacity: 1;
visibility: visible; */
  /* display: inline-block; */
  display: -webkit-box;
  /* display: none; */
}

summary {
  /* font-size: 20px; */
  font-size: 1.25em;
  font-weight: 600;
  cursor: pointer;
}

ol {
  padding: 0;
  margin: 10px 0 0 45px;
}
li {
  margin-bottom: 10px;
}
a {
  text-decoration: none;
  color: #c5c5c5;
}
a:visited {
  color: #c5c5c5;
}
a:hover {
  color: yellow;
}
#backup {
  color: var(--bg);
}
textarea {
  display: none;
}
#copyBackupDataBtn,
#expandToggleBtn {
  position: sticky;
  top: 10px;
  color: white;
  background-color: var(--bg);
  border: none;
  border-radius: 2px;
  outline: 2px solid white;
  text-transform: uppercase;
  padding: 4px 12px;
  cursor: pointer;
  float: right;
  box-shadow: -4px 4px 4px white;
}
#expandToggleBtn {
  position: relative;
  top: 0;
  float: none;
}
#copyBackupDataBtn:hover {
  translate: 2px -2px;
  box-shadow: -5px 5px 6px #afafaf, -2px 0 6px #afafaf;
}
#copyBackupDataBtn:active {
  translate: 1px -1px;
  box-shadow: -5px 5px 6px #afafaf, -2px 0 6px #afafaf;
}

#copyBackupDataBtn.copied {
  border: none;
  outline: 2px solid green;
}

#copyBackupDataBtn.copied::after {
  position: absolute;
  top: -10px;
  right: -10px;
  content: '\\02713';
  width: 14px;
  height: 14px;
  aspect-ratio: 1 !important;
  background-color: var(--bg);
  border-radius: 50%;
  outline: 2px solid green;
  padding: 2px;
  font-size: 10px;
  color: green;
  font-weight: bold;
}
.dim {
  color: #ffffff45;
}

/* .zero-tab-title {
font-size: var(--font-size);
} */

.zero-tab-title,
.zero-tab-link {
  max-width: var(--maxWidth);
  white-space: wrap;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.zero-tab-link-container {
  /* font-size: var(--font-size); */
  position: relative;
  border-top: 1px dotted transparent;
  padding-top: 2px;
}

.zero-tab-link-container:hover {
  border-top-color: red;
}

.zero-tab-link-container:hover::after {
  content: 'LA: ' attr(data-last-accessed);
  position: absolute;
  top: calc(-1em - var(--vartical-top));
  background-color: var(--bgSoft);
  outline: 1px solid var(--textColor);
  padding: var(--vertical-padding) 0.6em;
  padding-bottom: 0;
  right: 0;
  z-index: 10;
  white-space: nowrap;
}

.zero-tab-url {
  font-size: 0.8em;
  overflow-wrap: break-word;
}

.zero-tab-link-container:hover .zero-tab-url {
  color: #ffffffaa;
}

#searchZeroTabsLink {
  color: black;
  padding: 0.2em 0;
  width: 20em;
}

.quick-filter {
  display: flex;
  gap: 1em;
  align-items: center;
  flex-wrap: wrap;
  padding: 1em 0;
  margin-bottom: 1.5em;
}

/* details:not(:has(.zero-tab-link-container[style=''])) {
display: none;
} */
details:not(:has(.visible)) {
  display: none;
}

body:has(#hideUrls:checked) .zero-tab-url {
  display: none;
}

label[for='hideUrls'],
label[for='clearExistingFoldersFirst'] {
  display: flex;
  align-items: center;
  gap: 4px;
}

#drop-file-here {
  position: relative;
  border: 2px dotted red;
  min-width: 100%;
  /* height: 3em; */
  padding: 1em 0;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: default;
}

#drop-file-here::before {
  content: 'Selected: ' attr(data-count) ' files ';
  /* content: attr(data-count) ' files '; */
  color: red;
  /* font-size: 1.5em; */
  /* font-size: 0.85em; */
  position: absolute;
  left: 4px;
  /* top: 4px; */
  bottom: -1.5em;
}

#drop-file-here span {
  text-align: center;
}

.fontContainer input {
  color: #fff;
  background-color: #777;

  border: none;
  padding: 0.2em;
}

.fontContainer input::placeholder {
  color: inherit;
}

.fontContainer input:not(:valid) {
  border: 1px solid red;
  outline: 1px solid red;
}

.hidden {
  display: none;
}