textarea {
    font-size: 1em;
    height: initial;
}

select {height: 2.655rem;}
.form-control {margin-bottom: 16px;}
#course_info {margin: 0 0 1em 0;}
#course_info p,
#course_info select,
#course_info label {
    margin: 4px;
}

#course_info p,
#course_info label {
    padding: 0 2px;
}

label[id$="-error"] {
    margin-top: -8px;
}

[class^="header-"] {
    display: none;
    align-self: end;
    font-weight: 600;
    border-bottom: 1px solid black;
    padding-left: 2px;
    padding-bottom: 4px;
}

p[class^="data-"] {
    padding: 0;
    margin: 0;
}

p[class^="data-"]:before {font-weight: 600;}
#course_info p.data-event_id {margin-top: 30px;}
.data-location-type {text-transform: capitalize;}

@media (min-width: 992px) {
    .form-control {
        margin-bottom: 0;
    }
}

@media (min-width: 1024px) {
    fieldset {
        display: grid;
        grid-template-rows: auto;
        grid-gap: 2em;
        margin-bottom: 2em;
    }

    .field-r1 {grid-template-columns: 1fr 3fr 1fr 3fr;}
    .field-r2 {grid-template-columns: 0.4fr 3fr;}
    .field-r3 {grid-template-columns: 1fr 1fr 1fr;}
    .field-r4 {grid-template-columns: 0.7fr 2.1fr 3fr}
    .field-r5 {grid-template-columns: 1fr 2.4fr 2.4fr 2.4fr;}
    fieldset:last-of-type {margin-bottom: 4em; }
    [class^="header-"] {display: initial;}

    #course_info {
        margin: 2em 0 4em 0;
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: 0.8fr 0.2fr 0.4fr 0.4fr 0.1fr 0.2fr 0.4fr;
    }

    p[class^="data-"]:before {display: none;}
    #course_info p.data-event_id {margin-top: 4px;}
}

input,
select,
textarea {
    border: 1px solid silver;
    border-radius: 4px;
    padding: 0.5em 1em;
}

input:focus,
select:focus,
textarea:focus {
    outline: 1px solid var(--bg-blue-dark);
    border: 1px solid white;
}

label,
[class^="header-"] {
    padding: 0.5em 0;
}

.header-checkbox {border-bottom:none;}

#courseBookingForm {
    width: initial;
    margin-top: 30px;
}

.required-asterisk {color: red;}

.breakline {
    display: block;
    color: darkgray;
}

#course_info .data-time {
    min-width: 11rem;
    padding: 0;
}
.field-payment label {display:block;}