/* Wrapper de formulario */
.default-abm-form-wrapper {
    display: flex;
    container: form-wrapper / inline-size;
}

.default-abm-form-wrapper.left {
    justify-content: flex-start;
}

.default-abm-form-wrapper.center {
    justify-content: center;
}

.default-abm-form-wrapper.right {
    justify-content: flex-end;
}

.default-abm-form {
    width: 100%;
    margin-bottom: 20px;
}

/* Ancho del formulario segun ancho del wrapper */
@container form-wrapper (width >=600px) {
    .default-abm-form {
        width: 85cqi;
    }
}

@container form-wrapper (width >=800px) {
    .default-abm-form {
        width: 68cqi;
    }
}

@container form-wrapper (width >=1000px) {
    .default-abm-form {
        width: 58cqi;
    }
}

@container form-wrapper (width >=1300px) {
    .default-abm-form {
        width: 50cqi;
    }
}

@container form-wrapper (width >=1500px) {
    .default-abm-form {
        width: 45cqi;
    }
}

/* default-form-field: utilizada como selector para parsley.
    Ver educativa/base.js => classHandler
*/
.default-abm-form .default-form-field {
    margin-bottom: 1rem;
}

/* Legend de un fieldset */
.default-abm-form .default-form-fieldsetlegend {
    margin-bottom: 12px;
    padding-bottom: 2px;
    font-weight: 700;
    letter-spacing: .25px;
    color: var(--bs-body-color);
}

.default-abm-form .default-form-fieldsetlegend a {
    color: var(--bs-body-color);
}

.default-abm-form .default-form-field .form-label.required::after {
    content: " *";
}

/* Estilos de los labels cuando hay errores:

El 1er selector cubre la mayoría de los labels:
    form-label:not(.filter) es para evitar aplicarle a los labels de inputs de
    filtrado de la dualbox-widget (control nuevo).

El 2do selector es para los casos de labels de checkboxes y radios.
*/
.default-abm-form .default-form-field.has-error .form-label:not(.filter),
.default-abm-form .default-form-field.has-error .form-check-label {
    color: var(--bs-form-invalid-color);
}

/* Estilos de los controles cuando hay errores:

El 1er selector cubre la mayoría de los controles:
    form-control:not(.filter) es para evitar aplicarle a los inputs de filtrado
    de bootstrap-duallistbox (control viejo) y dualbox-widget (control nuevo).

El 2do selector es para marcar como obligatoria solamente a la 2da caja de
bootstrap-duallistbox (control viejo).

El 3er selector, idem anterior para dualbox-widget (control nuevo).

El 4to selector es para los casos de select simples.
*/
.default-abm-form .default-form-field.has-error .form-control:not(.filter),
.default-abm-form .default-form-field.has-error .bootstrap-duallistbox-container .box2 select[multiple],
.default-abm-form .default-form-field.has-error .dualbox-widget-box.selected-box ul,
.default-abm-form .default-form-field.has-error .select2-container--default {
    border-color: var(--bs-form-invalid-border-color);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}

/* Botones de submit */
.default-abm-form .default-form-wrapper-submit {
    display: flex;
    margin-top: 32px;
}

.default-abm-form .default-form-wrapper-submit input ~ input,
.default-abm-form .default-form-wrapper-submit input ~ button,
.default-abm-form .default-form-wrapper-submit button ~ button{
    margin-left: 10px;
}

/* Posicionamos el bt submit */
.default-abm-form .default-form-wrapper-submit.left {
    justify-content: left;
}

.default-abm-form .default-form-wrapper-submit.center {
    justify-content: center;
}

.default-abm-form .default-form-wrapper-submit.right {
    justify-content: right;
}