.text-monospace {
  font-family: "Roboto Mono", monospace;
}

form {
  margin-block-end: 0em;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 90px; /* Margin bottom by footer height */
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px; /* Set the fixed height of the footer here */
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}

/* Dark/Light Mode Toggle Overrides */
.btn label.switch-on,
.btn label.switch-off {
  margin-bottom: 0px;
  border: 0;
  border-radius: 0;
}

/* Dark Mode Overrides */
.bootstrap {
  --table-row-success: #c3e6cb;
  --table-row-danger: #f5c6cb;
  --table-row-success-border: #8fd19e;
  --table-row-danger-border: #ed969e;
  --table-row-success-text: #212529;
  --table-row-danger-text: #212529;
}

.bootstrap[data-bs-theme="dark"] {
  --table-row-success: #142c15;
  --table-row-danger: #492121;
  --table-row-success-border: #244f2d;
  --table-row-danger-border: #2c1517;
  --table-row-success-text: #e4e4e4;
  --table-row-danger-text: #e4e4e4;
}

.bootstrap input[type=search] {
  outline-offset: unset;
}

#app .table-success,
#app .table-success > td,
#app .table-success > th {
  background-color: var(--table-row-success);
  color: var(--table-row-success-text);
  border-color: var(--table-row-success-border);
}

#app .table-danger,
#app .table-danger > td,
#app .table-danger > th {
  background-color: var(--table-row-danger);
  color: var(--table-row-danger-text);
  border-color: var(--table-row-danger-border);
}

#app .table.table-sm thead th {
  border-bottom: none;
}

#app .table-top-colorbar {
  height: 4px;
  padding: 0rem;
  border: none;
}

#app .table-side-colorbar {
  width: 4px;
  padding: 0rem;
  border: none;
}

.bootstrap[data-bs-theme="dark"] a {
  color: #007bff;
}

.bootstrap[data-bs-theme="dark"] .popover-header {
  color: #212529;
}

.bootstrap .badge {
  --bs-badge-padding-x: 0.4em;
  --bs-badge-padding-y: 0.25em;
}

.puzzle-answer {
  max-width: 400px;
  overflow-wrap: anywhere;
}

.bootstrap .navbar-themed {
  --bs-navbar-padding-x: 1rem !important;
  background-color: #f8f9fa !important;
}

.bootstrap[data-bs-theme="dark"] .navbar-themed {
  background-color: #343a40 !important;
}

.bootstrap button.cb-btn-compact,
.bootstrap div.cb-btn-compact button,
.bootstrap[data-bs-theme="dark"] button.cb-btn-compact,
.bootstrap[data-bs-theme="dark"] div.cb-btn-compact button {
  padding: .15rem .7rem;
  line-height: normal;
}

.clickable-puzzle-cell {
  cursor: pointer;
  min-height: 1.4rem;
  width: 100%;
}

.clickable-puzzle-cell:hover {
  background-color: #ffe579;
}

:root {
  --bs-navbar-padding-y: .5rem;
  --bs-nav-link-padding-x: 1rem;
  --bs-nav-link-padding-y: .5rem;
  --bs-nav-link-color: var(--bs-link-color);
}