:root {
  --colour1: #c62432;
  --colour2: #cf5732;
}
.card-title {
  min-height: 50px;
}
#banner::before {
  content: "";
  background: url("https://storage.googleapis.com/medbugs/dragons.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: none;
  min-width: 100%;
  opacity: 1;
}
th a, h1 a {
  color: var(--black);
  text-decoration:none;
}
h1 a:hover {
  color:var(--colour1);
}
tr.archived td,
tr.archived a {
  color: var(--black);
}
tr.archived a.btn-primary {
  color: white;
}
tr.archived a.btn-outline-primary {
  color: var(--colour1);
}
.active > .page-link,
.page-link.active {
  background-color: var(--colour1);
  border-color: var(--colour2);
}
.card:hover {
  transform: none;
}
.case-attempt {
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: end;
}
.card-img-top {
  height: 120px;
  object-fit: cover;
}
@media (max-width: 768px) {
  .card-img-top {
    height: 220px;
  }
}
.saq-nav {
  border: 1px solid var(--grey);
  border-left: 0;
  border-right: 0;
}
.saq-category-badge {
  text-decoration: none;
  padding: 3px 12px;
}
.banner-txt {
  position: absolute;
  bottom: 20px;
}
.intro {
  white-space: pre-wrap;
}

.compact-item.featured {
  border-left: 4px solid var(--colour1);
}

.compact-thumb img {
  width: 70px;
  height: 70px;
  border-radius: 10px;
  object-fit: cover;
}
.star {
  font-size: 1rem;
  color: #bbb;
}

.star.selected {
  color: gold;
}

.star-rating .star.selected {
  color: var(--colour1);
}
.star-rating .star.hovered {
  color: var(--colour2);
}
.star-rating .star {
  color: #ccc;
  font-size: 2em;
  cursor: pointer;
}
#timer-display {
  max-width: 400px;
  margin: 0 auto;
}
.draft {
  font-style: italic;
}
.disabled-textarea {
  background: var(--bg-alt);
  opacity: 0.7;
  cursor: not-allowed;
}

.grade-bar {
  width: 100%;
  height: 6px;
  background: #eee;
  border-radius: 4px;
}

.grade-fill {
  height: 6px;
  background: var(--colour1);
  border-radius: 4px;
}
.muted {
  background: var(--light-black);
  opacity: 0.7;
  display: none !important;
}
.show-muted .muted {
  display:block !important;
}
.muted .group-answer,
.muted .feedback-content {
  font-style: italic;
}
.answer-icons .dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  display: inline-block;
}
.dot-tutor  { background: #000;
    border: 1px solid; }
.dot-peer    { background: #18a352; }
.dot-self   { background: var(--grey); }

.data-usage-content {
  border-left: 3px solid var(--colour1) !important;
}
@media (max-width: 768px) {
  .saq-banner {
    height: 260px;
  }
  .saq-banner h1 {
    font-size: 1.35rem;
  }
  .saq-banner p {
    font-size: 0.8rem;
  }
  .shadow {
    box-shadow: none !important;
  }
  .mobile-no-border {
    border: none !important;
  }
}