.nav {
	.logo {
		margin-inline: 1.1rem 2rem;
		width: 15rem;
	}

	ul {
		gap: 1rem;

		.submenu {
			opacity: 0;
			background: #fff;
			z-index: 99;
			position: absolute;
			flex-direction: column;
			display: table;
			box-shadow: 0 0 10px 10px rgba(0,0,0,0.1);
			margin-top: 10px;

			li {
				padding: 1em;
				border-top: 1px solid #ccc;
				text-align: center;
				a {
					padding: 0 2em;
				}
			}
		}
	}

	.open-submenu {
		position: relative;
	}
}

.section-breakers {
	padding-block: 0;
}

.btn-menu {
	right: 2rem;
	span {
		width: 2rem;
		height: 2px;
	}
}

.btn--red {
    background-color: red;
    color: #fff;
}

.btn--blue {
    background-color: blue;
    color: #fff;
}

label span.required {
	color: red;
}

label.error {
	color: red;
	font-size: 0.8em;
	font-style: italic;
}

.form-filter {
	padding-bottom: 2rem;
	margin-bottom: 2rem;

	.form__head .form__head-actions {
		margin-left: auto;
	}

	.form__row {
		--filters-per-row: 3;
		--gap: 2rem;
		padding-bottom: 2rem;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: var(--gap);

		&.filter_4 {
			--filters-per-row: 4;
		}

		.form__controls {
			flex: 1 1 calc((100% - var(--gap) * (var(--filters-per-row) - 1)) / var(--filters-per-row));
			min-width: 28.5rem;
			border-radius: 4px;
			box-shadow: 0 1px 4px #00000026;
			background-color: #fff;
		}

		.select {
			padding-bottom: 0;
		}
	}
}

.breaker-control {
	padding: 1rem 0;
}

.accordion__content ul {
	padding-left: 1em;
}

.form-contact .form__body {
	margin-bottom: 2em;
}

.form-login.form-login {
    padding-left: 20rem;
}

.user-error {
	color: red;
    padding-bottom: 2rem;
    font-size: 2rem;
}

.hide {
	display: none !important;
}

@media (min-width: 768px) {
	.desktop-hide {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.mobile-hide {
		display: none !important;
	}

	.form-login.form-login {
    	padding-left: 2rem;
    }

	.nav ul {
		gap: 0;

		a {
			padding-block: 1.2rem 1.7rem;
		}
	}

	.cards {
		--cards-per-row: 1;
		--gap: 1rem;

		.card-filler {
			display: none;
		}
	}
}

@media (max-width: 1023px) {
	.form-filter {
		padding-bottom: 0;

		.form__body {
			padding-top: 1rem;
			padding-bottom: 1rem !important;

			&.active {
				display: inline-block;
			}
		}
	}
}