html, body {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 95%;
    color: #101010;
}
/* ---------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    color: #404040;
    font-weight: 600;
}
h1 {
    font-size: 130%;
    font-weight: 900;
}
h2 {
    font-size: 120%;
}
h3 {
    font-size: 100%;
    font-style: italic;
}
h4, h5, h6 {
    font-size: 90%;
}
/* ---------------------------------------------------------------------- */

.content {
    padding-top: 1.6rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.darker-border-checkbox.form-check-input {
    border-color: #446e9b;
    border-width: 2px;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

select.base-select, ::picker(select.base-select) {
    appearance: base-select;
    min-width: 21rem;
}
/* ---------------------------------------------------------------------- */

.flexible-2col-image-text-container {
    display: flex;
    align-items: flex-start; /* Align items at the top */
}
.flexible-2col-image-text-container .col-image {
    flex: 0 0 auto; /* Prevent grow/shrink */
}
.flexible-2col-image-text-container .col-image img {
    height: auto; /* Keep aspect ratio */
    display: block;
}
.flexible-2col-image-text-container .col-content {
    flex: 1 1 auto; /* Grow and shrink as needed */
}

@media (mqx-width: 600px) {
    .flexible-2col-image-text-container {
        display: flex; /* ToDo how to switch from flex to wrap for a bit */
    }
}

@media (max-width: 500px) {
    .flexible-2col-image-text-container {
        display: flex;
        flex-direction: column;
    }
    .flexible-2col-image-text-container .col-image img {
        width: 100%; /* Optional: make image full width on mobile */
    }
}
/* ---------------------------------------------------------------------- */