/*
 * EXT:form frontend styles (TYPO3 v14 markup)
 *
 * Since v14 the core form templates use Bootstrap-5-like classes
 * (form-element, form-label, form-control, form-select, ...).
 * The site does not ship Bootstrap, so these styles are defined here.
 */

.frame-type-form_formframework form {
    max-width: 560px;
}

/* Field wrapper */
.frame-type-form_formframework .form-element {
    margin-bottom: 1.25rem;
}

/* Labels */
.frame-type-form_formframework .form-label {
    display: block;
    margin-bottom: .35rem;
    font-weight: bold;
}

.frame-type-form_formframework .required {
    color: var(--red, #cd0000);
    margin-left: .15em;
}

/* Inputs, selects, textareas */
.frame-type-form_formframework .form-control,
.frame-type-form_formframework .form-select {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: .55rem .75rem;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--greyDark, #333);
    background-color: var(--white, #fff);
    border: 1px solid var(--greyLight3, #d1d1d1);
    border-radius: 4px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.frame-type-form_formframework .form-control::placeholder {
    color: #999;
}

.frame-type-form_formframework .form-control:focus,
.frame-type-form_formframework .form-select:focus {
    outline: 0;
    border-color: var(--main, #008dce);
    box-shadow: 0 0 0 3px rgba(0, 141, 206, .2);
}

.frame-type-form_formframework .form-select {
    padding-right: 2.25rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 14px 10px;
    cursor: pointer;
}

.frame-type-form_formframework textarea.form-control {
    min-height: 180px;
    resize: vertical;
}

/* File upload */
.frame-type-form_formframework input[type="file"].form-control {
    padding: .4rem;
    cursor: pointer;
}

.frame-type-form_formframework input[type="file"].form-control::file-selector-button {
    margin-right: .75rem;
    padding: .4rem .9rem;
    font-family: inherit;
    font-size: .95rem;
    color: var(--white, #fff);
    background: var(--main, #008dce);
    border: 0;
    border-radius: 3px;
    cursor: pointer;
}

.frame-type-form_formframework input[type="file"].form-control:hover::file-selector-button {
    background: var(--blueDark1, #004e72);
}

/* Checkboxes / radios */
.frame-type-form_formframework .form-check,
.frame-type-form_formframework .form-check-wrapping-label {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: .4rem;
}

.frame-type-form_formframework .form-check-input {
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    margin: .2rem 0 0;
    accent-color: var(--main, #008dce);
}

/* Static text / headlines inside the form */
.frame-type-form_formframework .form-element-statictext {
    margin-top: 2rem;
}

.frame-type-form_formframework .form-element-statictext h2 {
    margin: 0 0 .35rem;
    font-size: 1.3rem;
    color: var(--main, #008dce);
}

/* Fieldsets */
.frame-type-form_formframework fieldset {
    margin: 0 0 2rem;
    padding: 0;
    border: 0;
}

.frame-type-form_formframework fieldset legend {
    margin-bottom: .75rem;
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--main, #008dce);
}

/* Help text + validation */
.frame-type-form_formframework .form-text {
    display: block;
    margin-top: .3rem;
    font-size: .875rem;
    color: #666;
}

.frame-type-form_formframework .is-invalid .form-control,
.frame-type-form_formframework .is-invalid .form-select,
.frame-type-form_formframework .form-control.is-invalid {
    border-color: var(--red, #cd0000);
}

.frame-type-form_formframework .invalid-feedback {
    display: block;
    margin-top: .3rem;
    font-size: .875rem;
    color: var(--red, #cd0000);
}

.frame-type-form_formframework .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Submit */
.frame-type-form_formframework .actions {
    margin-top: 1.75rem;
}