@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
span.badge-coins {
  color: aliceblue !important;
  background-color: goldenrod !important;
}

span.badge-notes {
  color: aliceblue !important;
  background-color: darkolivegreen !important;
}

span.n1 {
  color: #ffc107;
}

span.n2 {
  color: #198754;
}

td.denomination-start,
th.denomination-start {
  border-left-color: var(--bs-table-border-color);
  border-left-width: calc(var(--bs-border-width) * 2);
}

td.denomination,
th.denomination {
  border-left-color: var(--bs-table-border-color);
  border-left-width: var(--bs-border-width);
}

div.table-layout-container {
  max-height: 77vh;
  overflow: auto;
}

img.coin-mint-image,
img.note-issuer-image {
  max-height: 1.2em;
  width: auto;
  vertical-align: -0.125em;
  fill: currentColor;
}

.coin-images img,
.note-images img {
  background-color: var(--bs-warning-bg-subtle);
}

.card-body .counts .count {
  padding-right: 1rem;
}

.card-footer .counts .count {
  padding-right: 0.5rem;
}

.currency-countries .currency-country i {
  font-size: 1em;
}
.currency-countries .currency-country img.country {
  height: 1em;
}
.currency-countries a.historical-country {
  color: #6c757d !important;
}
.currency-countries a.historical-country img {
  opacity: 0.6;
  filter: grayscale(1);
}
.currency-countries a.historical-country:hover {
  color: #cd5c5c !important;
}
.currency-countries a.historical-country:hover img {
  opacity: 0.9;
  filter: grayscale(0);
}

.album-currencies .obsolete-currency,
.country-currencies .obsolete-currency {
  color: #cd5c5c !important;
  opacity: 0.7;
}
.album-currencies .obsolete-currency a,
.country-currencies .obsolete-currency a {
  color: #cd5c5c !important;
}
.album-currencies .obsolete-currency a:hover,
.country-currencies .obsolete-currency a:hover {
  color: #6c757d !important;
  opacity: 1 !important;
}

.countries .historical-country {
  position: relative;
  background-color: rgba(255, 255, 255, 0.7) !important;
}
.countries .historical-country .card-body, .countries .historical-country .card-footer {
  position: relative;
  z-index: 1;
}
.countries .historical-country::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/images/void.svg") no-repeat center/80%;
  opacity: 0.1;
  z-index: 0;
  pointer-events: none;
}

.currencies .obsolete-currency {
  position: relative;
  background-color: rgba(255, 255, 255, 0.7) !important;
}
.currencies .obsolete-currency .card-body, .currencies .obsolete-currency .card-footer {
  position: relative;
  z-index: 1;
}
.currencies .obsolete-currency::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/images/void.svg") no-repeat center/80%;
  opacity: 0.1;
  z-index: 0;
  pointer-events: none;
}

sup.iso {
  font-size: 0.5em;
}

sup.mode {
  font-size: 0.5em;
}

.badge img.country {
  height: 1em;
}

.album img.album-details {
  max-height: 90px;
}

.country i.country-details {
  font-size: 3em;
}
.country img.country-details {
  width: 100%;
  padding: 0.25rem !important;
}

img.country-title {
  max-height: 40px;
  max-width: 54px;
}

img.presence {
  height: 1em;
  width: auto;
  vertical-align: -0.125em;
}

img.presence-p {
  animation: opacity-pulse 2s infinite ease-in-out;
}

@keyframes opacity-pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
a.presence {
  font-size: 0.85em;
  font-weight: bolder;
}

span.item-title {
  font-size: 0.9em;
  text-decoration: underline;
}

span.item-variant {
  font-style: italic;
  font-size: 0.9em;
}

span.item-kind-s {
  color: darkcyan;
}

span.item-kind-m {
  color: cornflowerblue;
}

span.item-kind-a {
  color: cadetblue;
}

span.item-kind-b {
  color: chocolate;
}

.see-also a {
  text-decoration: none !important;
}

.preview div.card-footer {
  font-size: 0.7em;
}

div.batch div img {
  max-height: 70px;
  max-width: 50px;
}

div.modal span.item-kind-c span.item-kind-c,
div.modal span.item-kind-m span.item-kind-m,
div.modal span.item-kind-a span.item-kind-a,
div.modal span.item-kind-s span.item-kind-s,
div.modal span.item-kind-b span.item-kind-b,
div.modal span.item-kind-g span.item-kind-g,
div.modal span.item-kind-p span.item-kind-p,
div.modal span.item-kind-e span.item-kind-e,
div.modal span.item-kind-t span.item-kind-t {
  display: block;
}

i.presence-x {
  color: darkolivegreen;
}

i.presence-p {
  color: cadetblue;
}

i.presence-w {
  color: crimson;
}

div.modal span.presence-x i.presence-x,
div.modal span.presence-p i.presence-p,
div.modal span.presence-w i.presence-w {
  display: block;
}

div.modal span span.item-kind,
div.modal span i.presence {
  display: none;
}

.item-uuid {
  font-size: 0.7em;
}

.item-kinds {
  font-size: 0.5em;
}

img.coin-image {
  max-width: 90%;
  max-height: 90%;
}

img.note-image {
  max-width: 90%;
  max-height: 90%;
}

img.preview-image {
  max-width: 90%;
  max-height: 90%;
}

form.card-filter {
  flex-grow: 1;
  max-width: 50%;
}

form.card-filter-collapse {
  flex-grow: 1;
  max-width: 400px;
  padding-right: 10px;
}

.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; /* Bootstrap shadow-lg equivalent */
  border-color: var(--bs-primary) !important;
}

/* Optional: Make icons distinct color */
.icon-feature {
  color: var(--bs-primary);
}

.section-category {
  font-size: 4em;
}

.section-statistics {
  font-size: 1.8em;
}

.coin .item-color {
  color: #ffc107;
}

.note .item-color {
  color: #198754;
}

.batch .batch-color {
  color: #0aa2c0;
}

.album .album-color {
  color: #59359a;
}
.album .card-body {
  background-color: rgba(238, 238, 238, 0.2);
}
.album .card-footer {
  background-color: rgba(238, 238, 238, 0.1);
}

.country .country-color {
  color: #c9184a;
}
.country .card-body {
  background-color: rgba(238, 238, 238, 0.2);
}
.country .card-footer {
  background-color: rgba(238, 238, 238, 0.1);
}

.currency .currency-color {
  color: #fd7e14;
}
.currency .card-body {
  background-color: rgba(238, 238, 238, 0.2);
}
.currency .card-footer {
  background-color: rgba(238, 238, 238, 0.1);
}

.border-album,
.border-country,
.border-currency {
  border-color: rgba(68, 68, 68, 0.5) !important;
}
.border-album .card-footer,
.border-country .card-footer,
.border-currency .card-footer {
  border-top-color: rgba(68, 68, 68, 0.2);
}

.border-coin {
  border-color: #ffc107;
}

.border-note {
  border-color: #198754;
}

.border-batch {
  border-color: #0aa2c0;
}
.border-batch .card-footer {
  border-top-color: rgba(10, 162, 192, 0.175);
}