.login-card {
  /* You can set this to whatever width you like */
  max-width: 600px; 

  /* This keeps the card centered on the page */
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem; /* Adds some space from the top */
}

.login-card a[href^="mailto:"],
.login-card a[href^="tel:"] {
    color: var(--pico-secondary);
    text-decoration: none;
}

.login-card a[href^="mailto:"]:hover,
.login-card a[href^="tel:"]:hover {
    text-decoration: underline;
}

.question-group {
    /* Pico's <fieldset> provides most of the styling, 
       but you can add overrides here if needed. */
    margin-bottom: 1.5rem;
}

.text-container {
    text-align: center;
    padding: 1rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    margin-bottom: 1.5rem;
}

/* --- EQ-5D Vertical Slider (VAS) --- */

.vas-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    border: 1px solid var(--pico-form-element-border-color);
    padding: 1.5rem;
    border-radius: var(--pico-border-radius);
    background-color: var(--pico-card-background-color);
}

.vas-scale {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* This is the known-good, working CSS for the vertical slider */
.vas-slider {
    /* This property is key to overriding default framework styles */
    -webkit-appearance: none;
    appearance: none; 
    
    /* The rest of the original, working styles */
    width: 5px;
    height: 300px;
    background: #A9A9A9;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    writing-mode: vertical-lr;
    direction: rtl;
}

.vas-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 5px;
    background: black;
    cursor: pointer;
}

.vas-slider::-moz-range-thumb {
    width: 20px;
    height: 5px;
    background: black;
    cursor: pointer;
}

.vas-labels { 
    font-size: 1em; 
}

.vas-value-display { 
    font-weight: bold; 
    font-size: 1.2em; 
    text-align: center; 
}

.error-text {
  color: var(--pico-form-element-invalid-border-color);
  margin-top: calc(var(--pico-form-element-spacing-vertical) * -0.5);
  margin-bottom: var(--pico-form-element-spacing-vertical);
  display: block; /* Ensures it takes up its own line */
  color: red
}