:root {
  color-scheme: light dark;
}
/* Put any overrides needed for dark mode in here.
@media (prefers-color-scheme: dark) { }
*/
body { font-family: Candara; padding:20px; margin: auto; max-width:800px; }
button { font-family: Candara; padding:10px; box-shadow: 4px 4px 1px grey; }
.intro { text-wrap:balance; text-align: center; }
.noscript { color: red; font-weight: bold; text-align: center; padding:10px; }
#divLog {
  padding-top: 20px;
  font-family: monospace;
}

#divDemoLink { width:100%; text-align: center; font-size:x-small; }
#divHowItWorks { max-width:800px; display:none }
#inputFiles {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
#spanPrivate {
	font-size: 0.7em;
}

#inputFiles + label {
    font-size: 1.00em;
    font-weight: 700;
    color: white;
    background-color: black;
    display: inline-block;
    cursor: pointer; /* "hand" cursor */
}

#inputFiles:focus + label,
#inputFiles + label:hover {
    background-color: green;
}
/* Unhide table if body has rows. */
#tableFiles:has(>tbody>tr) {
    display: table;
}
#tableFiles {
    border: 1px dotted;
    min-width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    border-collapse:collapse; /*https://stackoverflow.com/questions/31632806/setting-background-color-of-a-table-row*/
    display: none;
}
#tableFiles > tbody > tr > td:nth-child(1) {
  text-align: center;
}
#tableFiles > tbody > tr > td:nth-child(2) {
  text-align: center;
}
#tableFiles > tbody > tr > td:nth-child(3) {
  text-align: right;
}
#tableFiles > tbody > tr > td:nth-child(4) {
  text-align: right;
}

.cellRemove {
   color:red;
   cursor: pointer;
}

th {
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid silver; 
}

td {
  padding: 5px;
}

tr:hover {
    background: LightYellow !important;
    color:black;
}

tr:nth-child(even) {
  background-color: #14fea12e;
}