@import 'src/Components/GlobalStyles/colors';
@import 'src/Components/GlobalStyles/mixins';

.container {
	width: 860px;
	margin: 0 auto;

	@media (max-width: 1000px) {
		width: auto;
	}

	ul {
		width: 860px;
		margin: 0 auto;

		@media (max-width: 1000px) {
			width: auto;
			display: flex;
			flex-wrap: nowrap;

			li {
				display: flex;
				flex-wrap: nowrap;

				span {
					white-space: nowrap;
				}
			}
		}

		h4 {
			margin: 60px 0 41px;
			// background-color: rgba($primary, 0.4);
			background-color: rgba($primary, 0.13);
			padding: 20px 10px;
			color: $dark;
		}

		li {
			list-style-type: none;
			display: flex;
			justify-content: space-between;
			margin: 28px 0;
		}
	}

	.accordionContainer {
		width: 860px;
		margin: 50px auto;

		&.print {
			margin: 0px auto;
		}

		@media (max-width: 1000px) {
			width: auto;
			margin-left: 20px;
		}

		@media (max-width: 800px) {
			width: auto;
			margin-left: 0;
		}

		:global([class$='MuiPaper-root-MuiAccordion-root']),
		:global([class*='MuiPaper-root'][class*='MuiAccordion-root']) {
			box-shadow: none;
		}

		:global([class*='MuiAccordionDetails-root']) {
			padding: 0;
		}

		.nonSelected {
			background-color: rgba($primary, 0.03);
			border: 1px solid rgba($primary, 0.13);
			// background-color: transparent;
			min-height: 54px;
		}

		.selected {
			background-color: rgba($primary, 0.13);
			color: rgba(0, 0, 0, 0.87);
			min-height: 54px;
			max-height: 54px;
		}

		.accordionDetails {
			// .listOfItems {
			li {
				display: flex;
				justify-content: space-between;
				margin: 28px 0;

				small {
					font-size: 16px;
					padding: 10px 0;
				}
			}
			// }

			&.print {
				li {
					margin: 0px 0;
					line-height: 1;
				}
			}
		}
	}
}

.horizontalLine {
	@include HorizontalLine;

	margin-top: 25px;
	background-color: $font-light-grey;
}