.eac-document {
	padding: 1rem;
	line-height: 1.6;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	min-height: 60vh;
	font-size: 13px;

	h3 {
		font-size: 14px;
		line-height: 15px;
		margin: 1em 0;
		font-weight: bold;
	}

	&__header {
		min-height: 80px;

		&:after {
			content: '';
			display: block;
			clear: both;
		}

		p {
			font-size: .95em;
			line-height: 1.5;
			padding: 0;
			margin: 0;
		}
	}

	&__logo {
		float: left;
		max-width: 200px;
		max-height: 70px;
		margin-right: 20px;

		img {
			display: block;
			max-width: 100%;
			height: auto;
			width: auto;
			max-height: 70px;
		}
	}

	&__info {
		display: block;
		float: left;

		h2 {
			font-size: 16px;
			font-weight: 600;
			margin: 0;
			padding: 0;
			color: #333;
		}

		p {
			text-align: left;
		}
	}

	&__title {
		display: block;
		float: right;

		h1 {
			font-size: 26px;
			font-weight: 600;
			color: #222;
			margin: 0;
			padding: 0;
			text-align: right;
		}

		p {
			text-align: right;
		}
	}

	&__billings {
		box-sizing: border-box;
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-start;
		justify-content: space-between;
		margin: 1rem 0;
		text-align: left;
		gap: 2rem;

		// each direct div should be max 50%;
		> div {
			box-sizing: border-box;
			flex: 0 0 50%;
		}
	}

	&__divider {
		border-bottom: 1px solid #e5e7eb;
		margin: 20px 0;
	}

	&__items {
		display: block;
		width: 100%;
		margin: 1rem 0;

		table {
			width: 100%;
			border-collapse: collapse;
			border-spacing: 0;
			font-size: 13px;
			line-height: 1.6;
			color: #333;
			border-radius: 4px;
			margin: 0;
			padding: 0;
			text-align: left;

			th {
				background-color: #f6f7f7;
				font-weight: 600;
			}

			th, td {
				padding: 8px 12px;
				margin: 0;
				word-break: break-word;
				border: 0;

				&:not(:first-child) {
					width: 100px;
					text-align: right;
				}

				span.small {
					font-size: 12px;
					color: #777;
					display: block;
				}
			}

			tbody {
				tr {
					&:last-child {
						td {
							border-bottom: 1px solid #ddd;
						}
					}
				}
			}

			tfoot {

				td {
					padding: 8px 12px;
				}

				.col-label {
					font-weight: 600;
					text-align: right;
				}

				.col-amount {
					&--due {
						font-weight: 600;
						color: #d63638;
					}
				}
			}
		}
	}

	&__payments {
		display: block;
		width: 100%;
		margin: 1rem 0;

		table {
			width: 100%;
			border-collapse: collapse;
			border-spacing: 0;
			font-size: 13px;
			line-height: 1.6;
			color: #333;
			border-radius: 4px;
			margin: 0;
			padding: 0;
			text-align: left;

			th {
				background-color: #f6f7f7;
				font-weight: 600;
			}

			th, td {
				padding: 8px 12px;
				margin: 0;
				word-break: break-word;
				border: 0;

				&:last-child {
					text-align: right;
				}
			}
		}
	}

	&__summary {
		table {
			width: 100%;
			border-collapse: collapse;
			border-spacing: 0;
			font-size: 13px;
			line-height: 1.6;
			color: #333;
			border-radius: 4px;
			margin: 0;
			padding: 0;
			text-align: left;

			th, td {
				padding: 8px 12px;
				margin: 0;
				word-break: break-word;
			}

			th {
				font-weight: 600;
				width: 20%;
			}

			td {
				width: 80%;
				border-bottom: 1px dashed #e5e7eb;
			}
		}
	}

	&__footer {
		display: block;
		width: 100%;
		margin-top: 1rem;
		padding-top: 1rem;
		border-top: 1px solid #e5e7eb;
		text-align: center;

		p {
			font-size: 13px;
			line-height: 1.6;
			color: #333;
			margin: 0;
			padding: 0;
		}
	}
}