.filter-module {
	isolation: isolate;

	& .card {
		padding: 2rem;
		border: none;
		margin: 0;
		z-index: 1;

		& form {

			& fieldset {
				display: flex;
				flex-direction: row;
				gap: 1.5rem;

				& legend {
					margin-bottom: 2rem;
				}
			}

			& .input-group {
				position: relative;
				width: auto;
				margin: 0;

				& .field {
					border: 1px solid #cccccc;
					font-size: 14px;
					font-family: "Roboto", sans-serif;
					color: #2d2d2d;
					text-transform: none;
					margin: 0px;
					transition-property: all;
					transition-duration: 0.2s;
					transition-timing-function: ease-out;
					height: auto;
					padding: 1.125rem 2rem 1.125rem 1rem;
					line-height: 2;

					&:focus {
						border-color: #005596;
					}
				}

				& label {
					cursor: default;
					position: absolute;
					top: 50%;
					left: 0;
					z-index: 2;
					color: #2d2d2d;
					max-width: 100%;
					height: auto;
					overflow: hidden;
					text-align: start;
					text-overflow: ellipsis;
					white-space: nowrap;
					pointer-events: none;
					border: 0 solid transparent;
					transform-origin: 0 0;
					font-family: "Roboto", sans-serif;
					font-weight: 400;
					font-size: 14px;
					line-height: 1.6;
					text-transform: none;
					margin: 0;
					padding: 0 1rem;
					transform: translateY(-50%);
				}

				&.float {
					& .field {
						padding: 1.625rem 2rem 0.625rem .8rem;
					}
					& label {
						transition: opacity .1s ease-in-out, transform .1s ease-in-out;
						transform: translateY(-50%);
					}

					&:focus label,
					&:focus-within label,
					& .field:not(:placeholder-shown) ~ label {
						color: #545454;
						transform: scale(.85) translateY(-1.75rem);
					}
				}

				&.fill {
					flex: 1;
				}

				&.sidecar {
					& .field {
						padding: 1.125rem 2rem 1.125rem 7.5rem;
					}

					& label {
						text-transform: uppercase;
						font-family: "gotham_bold", sans-serif;
					}
				}
			}

			& button[type="submit"] {
				color: #ffffff;
				background-color: #005596;
				padding: 1.125rem 2rem 1.125rem 2rem;
				text-decoration: none;
				text-transform: uppercase;
				font-family: "gotham_bold", sans-serif;
				transition: all 0.15s ease-in-out;
				white-space: nowrap;
				cursor: pointer;
				font-weight: normal;
				width: 100%;

				&:hover,
				&:focus {
					box-shadow: 0 0 0 3px rgba(0, 85, 150, 0.5);
				}
			}
		}
	}

	& .links {
		list-style: none;
		display: flex;
		flex-direction: row;
		gap: 1rem;
		background-color: #ededed;
		margin: 0 auto 0 0;
		padding: 0 1rem 0 2rem;
		position: relative;

		& li {
			padding: 2rem 0.75rem;
			position: relative;

			&:not(:first-child)::before {
				content: '';
				border-right: 1px solid #545454;
				position: absolute;
				left: -0.5rem;
				top: 50%;
				height: 60%;
				transform: translateY(-50%);
			}

			& a {
				font-size: 14px;
				text-decoration: underline;
				color: #005596;
				text-transform: none;

				&:hover,
				&:focus {
					color: #002641;
				}
			}
		}

		&::after {
			content: '';
			position: absolute;
			bottom: 0px;
			right: -100px;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 100px 100px 0 0;
			border-color: #ededed transparent transparent transparent;
		}
	}
}

@media screen and (max-width: 1023px) {
	.filter-module {

		& .card form fieldset {
			flex-direction: column;
			gap: 1rem;

			& .fill {
				order: -1;
			}
		}

		& .links {
			width: 100%;
			justify-content: space-evenly;
			flex-wrap: wrap;
			padding: 1rem;
			gap: .25rem;

			& li {
				padding: .75rem;
				&:not(:first-child)::before {
					border: none;
				}
			}

			&::after {
				border-color: transparent;
			}
		}
	}
}