form .row {
	container-type: inline-size;
}

form .col {
	margin-bottom: 15px;
}

.col-field {
	margin-bottom: 15px;
}

.page form .col-field {
	flex: 0 0 auto;
	width: 100%;
}

/* */

:root {
	--ga-control-disabled-background: #f0f0f0;
}

form ul {
	margin-bottom: 0;
}

form fieldset {
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	padding: .375rem .75rem;
	height: calc(100% - 30px);
}

form .buttons {
	margin-top: 20px;
	pointer-events: none;
}

form .buttons button {
	pointer-events: all;
}

form .form-control:disabled,
form .form-select:disabled,
form div [contenteditable=false] {
	background-color: var(--ga-control-disabled-background);
}

form .input-group {
	flex-wrap: nowrap;
}

form .form-check-input[type=checkbox] {
	margin-right: 6px;
}

form .form-label {
	color: steelblue;
}

hr {
	border-top: 0;
	border-bottom: 2px solid darkgray;
	margin: 20px 0 15px 0;
}

h4 {
	font-size: 19px;
	margin-bottom: 15px;
}

div[contenteditable]:not(.one-line) {
	min-height: 64px;
}

form .buttons button {
	box-shadow: var(--bs-box-shadow);
}

button.btn-password {
	border-radius: 0 5px 5px 0 !important;
}

/* bootstrap: eliminar outline verde e icono check en campos válidos */
.was-validated .form-control:valid {
	border-color: var(--bs-border-color);
	background-image: none;
}

.was-validated .form-control:valid:focus {
	border-color: #86b7fe;
	box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}

/* ------------------------------------------------------------------------------------ */
/* responsive */

@container (width <= 600px) {
	form .row .col {
		min-width: 100% !important;
	}
}

@container (width >= 700px) {
	.page form .col-field {
		flex: 0 0 auto;
		width: 50%;
	}
	.page form .col-field:nth-child(odd) {
		padding-right: 10px;
	}
}

@container (width >= 1200px) {
	.page form .col-field {
		flex: 0 0 auto;
		width: 33.333333%;
	}
	.page form .col-field {
		padding-right: 10px;
	}
	.page form .col-field:nth-child(3n) {
		padding-right: 0px;
	}
}