body {
  color: var(--nmg-black);
  background-color: var(--nmg-bg-alt);
}

a {
  color: var(--nmg-black);
}

a:hover {
  color: var(--nmg-link-hover);
}

.bg-nmg {
  background-color: var(--nmg-bg-alt)!important;
}

.bg-nmg-light {
  background-color: var(--nmg-bg-light)!important;
}

.border-nmg {
  border-color: var(--nmg-border) !important;
}

.btn-nmg {
  color: var(--nmg-black);
  background-color: var(--nmg-bg-alt);
  border-color: var(--nmg-border);
}

.btn-nmg:hover {
  color: var(--nmg-bg-alt);
  background-color: var(--nmg-border);
}

.btn-nmg-cancel {
  background-color: var(--nmg-warning);
  color: var(--nmg-black);
  border-color: var(--nmg-border);
}

.btn-nmg-cancel:hover {
  background-color: var(--nmg-border);
  border-color: var(--nmg-warning);
  color: var(--nmg-warning);
}

.btn-nmg-delete {
  background-color: var(--nmg-danger);
  opacity: .7 !important;
  border-radius: var(--bs-border-radius) !important;
}

.btn-nmg-delete:hover {
  opacity: 1 !important;
}

.card {
  background-color: var(--nmg-bg-light);
  border-color: var(--nmg-border);
}

.card-private .card-header {
  background-color: var(----nmg-private);
}

.card-admin {
  background-color: var(--nmg-admin-bg);
  color: var(--nmg-admin-text);
  border-color: var(--nmg-color-alt) !important;
}

.card-admin .card-header {
  background-color: var(--nmg-admin-header);
}

.card-admin a {
  color: var(--nmg-admin-text);
}

.card-admin a:hover {
  color: var(--nmg-color-alt);
}

.form-control {
  background-color: var(--nmg-bg-light);
  color: var(--nmg-black);
  border-color: var(--nmg-border);
}

.img-thumbnail {
  border-color: var(--nmg-border);
  background-color: var(--nmg-bg-alt);
}

.profile-thumbnail {
  max-width: 64px;
  min-width: 48px;
  width: 100%;
  height: auto;
}

.profile-view-img {
  min-width: 128px;
  min-height: 128px;
}

.forum-thumbnail {
  width: 48px;
  height: 48px;
  border-color: var(--nmg-border);
}

.thread-thumbnail {
  width: 128px;
  height: 128px;
  border-color: var(--nmg-border);
}

.thread-user {
  min-width: 156px;
}

.thread-message {
  min-height: 156px;
  border-radius: var(--bs-border-radius) !important;
}

.clipped {
  background-color: var(--nmg-blue);
  border-color: var(--nmg-blue);
  color: var(--nmg-black);
}

.navbar-nmg {
  background-color: var(--nmg-bg-alt);
}

.navbar-nmg .navbar-nav > li > ul {
  color: var(--nmg-black);
  background-color: var(--nmg-bg-alt);
}

.navbar-nmg .navbar-nav .navbar-link {
  color: var(--nmg-black);
}

.navbar-nmg .navbar-nav .nav-link {
  color: var(--nmg-black);
}

.navbar-nmg .navbar-nav .nav-link:hover {
  color: var(--nmg-nav-hover);
}

.navbar-nmg a.dropdown-item {
  color: var(--nmg-black);
}

.navbar-nmg a.dropdown-item:focus, .navbar-nmg a.dropdown-item:hover {
  background-color: var(--nmg-bg-light);
  color: var(--nmg-nav-hover);
}

.table-nmg {
  color: var(--nmg-black);
}

.min-h-450px {
  min-height: 450px;
}

.modal-content {
  background-color: var(--nmg-bg-alt);
}

.image-grid.fix-height {
  max-height: 400px;
  overflow: hidden;
  margin-inline: auto;
  width: fit-content;
  margin-right: auto !important;
  margin-left: auto !important;
}

.image-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
  max-height: 85vh;
  border: var(--bs-border-width) outset var(--nmg-bg-light);
}
.image-grid img:hover {
  border-color: var(--nmg-color);
}

.image-grid.fix-height img {
  max-height: 400px;
}

.image-grid span.remaining {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  z-index: 1;
  text-align: center;
}

.image-grid span.remaining::before {
  content: '';
  position: absolute;
  top: 0;
  left: 4px;
  width: 100%;
  height: 100%;
  background-image: url('/assets/images/logo-256.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
  opacity: 0.5;
  z-index: -1;
}

.centered-logo-line {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  font-size: 2rem;
  color: var(--nmg-color);
}

#profile_image {
  width: 168px;
  height: 168px;
}

.profile-crop-wrapper {
  width: 300px;
  height: 300px;
}