html,
body {
  height: 100%;
  margin: 0;
  font-family: 'Inter', sans-serif;
}

#app {
  height: 100%;
  width: 100%;
}

.btn-outline {
  color: #fdd397;
  border-color: #fdd397;
}

.btn-outline:hover {
  color: #000;
  background-color: #fdd397;
  border-color: #fdd397;
}

.btn-check:focus+.btn-outline,
.btn-outline:focus {
  box-shadow: 0 0 0 0.25rem rgba(253, 211, 151, 0.5);
}

.btn-check:checked+.btn-outline,
.btn-check:active+.btn-outline,
.btn-outline:active,
.btn-outline.active,
.btn-outline.dropdown-toggle.show {
  color: #000;
  background-color: #fdd397;
  border-color: #fdd397;
}

.btn-check:checked+.btn-outline:focus,
.btn-check:active+.btn-outline:focus,
.btn-outline:active:focus,
.btn-outline.active:focus,
.btn-outline.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(253, 211, 151, 0.5);
}

.btn-outline:disabled,
.btn-outline.disabled {
  color: #fdd397;
  background-color: transparent;
}

.table {
  --bs-table-bg: #fdd397;
  --bs-table-striped-bg: #f0c88f;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #e4be88;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #eac38c;
  --bs-table-hover-color: #000;
  color: #000;
  border-color: #e4be88;
}

.alert {
  color: #000;
  border: 1px solid #000;
}

.alert .alert-link {
  color: #000;
  font-weight: bold;
}

.bg {
  background-color: #fdd397 !important;
}

.border {
  border-color: 1px solid black;
}

.link {
  color: #fdd397;
}

.link:hover,
.link:focus {
  color: #fddcac;
}

.list-group-item {
  color: #65543c;
  background-color: #fff6ea;
}

.list-group-item.list-group-item-action:hover,
.list-group-item.list-group-item-action:focus {
  color: #65543c;
  background-color: #e6ddd3;
}

.list-group-item.list-group-item-action.active {
  color: #fff;
  background-color: #65543c;
  border-color: #65543c;
}

.btn {
  color: #000000;
  background-color: #fdd397;
  border: 1px solid #000;
  font-weight: bold;
}

.btn:hover {
  color: #000000;
  border: 1px solid #000;
  background-color: #fdb577;
}

.btn-check:focus+.btn,
.btn:focus {
  color: #000000;
  background-color: #fddaa7;
  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.5);
}

.btn-check:checked+.btn,
.btn-check:active+.btn,
.btn:active,
.btn.active,
.show>.btn.dropdown-toggle {
  color: #000000;
  background-color: #fddcac;
  border: 1px solid #000;
}

.btn-check:checked+.btn:focus,
.btn-check:active+.btn:focus,
.btn:active:focus,
.btn.active:focus,
.show>.btn.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(215, 179, 128, 0.5);
}

.btn:disabled,
.btn.disabled {
  color: #000000;
  background-color: #fdd397;
  border: 1px solid #000;
}

.btn-secondary {
  color: #000;
  background-color: transparent;
  border: 1px solid #000;
  font-weight: bold;
}

.btn-secondary:hover {
  color: #000;
  background-color: #f8f8f8;
  border-color: #000;
}

.btn-secondary:focus {
  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.5);
}

.btn.btn-danger {
  color: #ffffff;
  background-color: #ff4c4c;
  border: 1px solid #000;
  font-weight: bold;
  transition: background-color 0.3s, color 0.3s;
}

.btn.btn-danger:hover {
  background-color: #cc0000;
  color: #ffffff;
  border: 1px solid #000;
  border-color: #990000;
}

/* Dropdown button */
.dropdown-toggle {
  color: #000000;
  background-color: #fdd397;
  border: 1px solid #000;
  border-radius: 3px;
  font-weight: bold;
}

/* Hover state for dropdown button */
.dropdown-toggle:hover {
  color: #000000;
  background-color: #fdb577;
  border: 1px solid #000;
}

/* Dropdown menu */
.dropdown-menu {
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

/* Dropdown items */
.dropdown-item {
  color: #000000;
  font-weight: 500;
  padding: 8px 16px;
}

/* Dropdown item hover */
.dropdown-item:hover {
  background-color: #fff1e1;
  color: #000000;
}

/* Active dropdown item */
.dropdown-item.active,
.dropdown-item:active {
  background-color: #fdd397;
  color: #000000;
}

/* Dropdown divider */
.dropdown-divider {
  border-top: 1px solid #e9ecef;
}

.form-control:focus {
  border-color: #000000; 
  box-shadow: 0 0 0 .25rem rgba(253, 211, 151, 0.25);
}