style.css

:root {
  --card-min-width: 300px;
}

#description-input button {
    background-color: var(--button-primary-background-fill);
    color: var(--button-primary-text-color);
    font-weight: var(--button-large-text-weight);
}

#description-input button:hover {
    background-color: var(--button-primary-background-fill-hover);
    color: var(--button-primary-text-color-hover);
}

#case-counter textarea {
    text-align: center;
    font-weight: 800;
    font-size: calc(var(--block-title-text-size) + 2px);
}

#vote-label {
    text-align: center;
}

#upvote-btn {
    color: var(--button-primary-background-fill);
}

#json-output {
    height: 96px !important;
}

#json-output > div:last-of-type {
    height: 80% !important;
}

#active-selections {
    height: 50px !important;
    overflow-y: scroll;
}

.card-group, .card-group > div {
    background-color: transparent;
    border: 0px;
}

.card-group > div {
    display: grid !important;
    /* grid-template-columns: repeat(3, minmax(var(--card-min-width), 1fr)); */
    grid-auto-rows: auto !important;
    gap: 12px !important;
}

@media (min-width: 768px) {
    .card-group > div {
        grid-template-columns: repeat(1, minmax(var(--card-min-width), 1fr));
    }
}

@media (min-width: 1024px) {
    .card-group > div {
        grid-template-columns: repeat(2, minmax(var(--card-min-width), 1fr));
    }
}

@media (min-width: 1420px) {
    .card-group > div {
        grid-template-columns: repeat(3, minmax(var(--card-min-width), 1fr));
    }
}

.filter-card {
    min-width: min(var(--card-min-width), 100%) !important;
    height: 254px; /* this height clips the option text to help indicate the need to scroll */
    border: var(--block-border-width) solid var(--block-border-color) !important;
    border-radius: var(--block-radius) !important;
    overflow-y: scroll;
}

/* target the span with the card title */
.filter-card > span:first-of-type, .filter-range > div > div > span:first-of-type {
    font-weight: 800;
    font-size: calc(var(--block-title-text-size) + 2px);
    text-decoration: underline;
}

/* target the div with the labels */
.filter-card div:last-of-type {
    display: block;
}

.filter-card label {
    border: 0;
}

.filter-card::-webkit-scrollbar, #active-selections::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
.filter-card::-webkit-scrollbar-thumb, #active-selections::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(150,150,150,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

.filter-range .slider_input_container {
    display: flex !important;
}

.filter-range > div > div > div {
    display: flex !important;
}

.filter-range > div > div > div > input {
    width: 45% !important;
    line-height: 1rem !important;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  width: 24px;
  height: 24px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  display: inline-block;
}