body {
  font-family: system-ui, -apple-system, sans-serif;
  background: #f4f6f8;
}

.hidden {
  display:none;
}

h3 { text-align:center; }

table {
  width:100%;
  border-collapse: collapse;
}

input, textarea {
  width:100%;
  font-size:16px;
  margin-bottom:2px;
  border:1px solid #ccc;
  transition: width 0.2s ease;
}

input.expanded {
  width: 100vw;
}

#diveTable {
  font-size:14px;
}

th {
  position: sticky;
  top:0;
  background:#1976D2;
  color:white;
  padding:4px;
}

td {
  padding:2px;
}

td input {
  padding:2px;
  font-size:14px;
}

button {
  border:none;
  border-radius:8px;
  background:#1976D2;
  color:white;
}

button:disabled {
  background: silver;
}

.trash-can {
  padding:0;
  font-size:14pt;
  margin: 0;
  float:right;
  padding: 0 5px 0 5px;
}

#gearButton {
  padding: 5px 10px 5px 10px;
  font-size: 24pt;
  float:left;
}

#addPageButton {
  padding: 5px 10px 5px 10px;
  font-size: 24pt;
  float:right;
}

#settingsDoneButton {
  margin-top: 10px;
  padding: 5px 10px 5px 10px;
  font-size: 14pt;
}

#uploadButton {
  width: 100%;
  margin-top: 8px;
  padding:14px;
  font-weight: bold;
  font-size:16px;
  margin-bottom:10px;
}

button.secondary {
  background:#555;
}

.list-item {
  background:#fff;
  padding:8px;
  margin-bottom:5px;
  border-radius:6px;
  font-size:14px;
}

/* Hide the spin buttuns on numeric inputs */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance:textfield; /* Firefox */
}