/* 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(--forms-title-text-color);
}

.default-abm-form .default-form-fieldsetlegend a {
    color: var(--forms-title-text-color);
}

/* Labels */
.default-abm-form .required-fields-text,
.default-abm-form .default-form-field .form-label,
.default-abm-form .default-form-field .form-check-label {
    color: var(--forms-label-text-color);
}

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

.default-abm-form .default-form-field.has-error .form-label,
.default-abm-form .default-form-field.has-error .form-check-label {
    color: var(--bs-form-invalid-color);
}

/* Estilos de 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 la duallistbox.
El 2do selector es para marcar como obligatoria solo la 2da caja de duallistbox.
El 3er 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 .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;
}