/* The Bootstrap semantic-variable remap this app used to define locally
   now lives in base/css/styles.css's :root, applied site-wide. */

#features-root .card.bg-dark {
  background-color: var(--ioe-bg-elevated);
  color: var(--ioe-text);
  border-color: var(--ioe-border);
}
#features-root .text-muted {
  color: var(--ioe-text-muted) !important;
}

.feature-title {
  color: var(--ioe-heading);
  text-decoration: none;
  font-weight: 600;
}
.feature-title:hover {
  text-decoration: underline;
}

.vote-count {
  min-width: 2ch;
  text-align: center;
}

.feature-detail-header {
  align-items: stretch;
}
.feature-icon-col {
  width: 15%;
  min-width: 96px;
  background-color: rgba(159, 176, 226, 0.04);
  border-right: 1px solid var(--ioe-border);
}
.feature-icon-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.feature-icon-placeholder {
  font-size: 2.5rem;
  color: var(--ioe-text-muted);
}
.feature-info-col {
  width: 85%;
}

.feature-form-control {
  background-color: var(--ioe-bg-elevated);
  color: var(--ioe-text);
  border: 1px solid var(--ioe-border-strong);
}
.feature-form-control:focus {
  background-color: var(--ioe-bg-elevated);
  color: var(--ioe-text);
  border-color: var(--ioe-accent);
  box-shadow: none;
}
.feature-form-control::placeholder {
  color: var(--ioe-text-muted);
}