@import '../../../styles/fills';
@import '../../../styles/definitions/breakpoints';
@import '../../../styles/mixins';

.faq {
	&_mainContainer {
		position: relative;
		width: 100%;
		height: 100%;
        background-color: var(--background-color, $white);
	}

	&_divider {
		border-top: $white;
		border-left: $white;
		border-right: $white;
		@include color-midGray;
		width: 100%;
		padding-bottom: 5px;
	}

	&_faqHeader {
		@include title-xLarge;
		width: 100%;
		font-weight: bold;
		line-height: 44px;
		padding-left: 15px;

		@include media-lg-down {
			display: none;
		}
	}

	&_row {
		display: flex;
		flex-wrap: wrap;
		margin-right: $grid-gutter-width * -1;
		margin-left: $grid-gutter-width * -1;
	}

	&_col {
		padding-right: $grid-gutter-width;
		padding-left: $grid-gutter-width;

		@include grid-width(12);

		@include media-lg-up {
			&--nav {
				@include grid-width(3);
			}
			&--faq {
				@include grid-width(9);
			}
		}
	}

	&_nav {
		&--desktop {
			@include media-lg-down {
				display: none;
			}
		}
		&--mobile {
			max-width: 300px;

			@include media-lg-up {
				display: none;
			}
		}
	}

	&_wrapperContainer {
		@include media-lg-down {
			margin-left: $collapsible-group_padding * -1;
			margin-right: $collapsible-group_padding * -1;
		}
	}
}
