/*<![CDATA[*/

  html {
	font-size: 12px;
}


div.attention {
	text-align: center;
	border: 2px solid black;
	margin: 0rem 2rem;
	padding: 0rem 2rem;
}


div.sample {
	margin-top: 0.5rem;
	border: 2px solid black;
}

div.sample > div {
	margin-top: 1rem;
	display: flex;
}

.requisites {
	flex: 3;
}

.area {
	flex: 2;
	display: flex;
}

.area > div {
	flex: 1;
}

.code {
	display: inline-block;
	border: 3px solid black;
	height: 2.2rem;
	line-height: 2.2rem;
	padding: 0rem 1.5rem;
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
}


table.bank {
	width: calc(100% - 2rem);
	border-spacing: 0px;
	border-collapse: collapse;
	margin-bottom: 0.5rem;
}

table.bank tr td:nth-child(2) {
	text-align: center;
	vertical-align: middle;
	width: 5rem;
}

table.bank tr:nth-child(2) td {
	border-bottom: 2px solid black;
	font-weight: bold;
}

table.bank tr:nth-child(2) td:nth-child(2) {
	border: 3px solid black;
	text-align: center;
	height: 2.2rem;
	padding: 0rem 2rem;
}



.requisites > div {
	display: flex;
	margin-bottom: 0.5rem;
}

.requisites > div div:nth-child(1) {
	min-width: 7rem;
}



div.area {
	display: flex;
}

@media print {
	body {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		/* WA: https://bugs.chromium.org/p/chromium/issues/detail?id=603559#c64 */
		/*width: 210mm;*/
		/*height: 297mm;*/
	}
}

/*
@page {
	size: A4;
	margin: 10mm;
}
*/


div.area > div {
	display: flex;
	justify-content: flex-end;
	flex-direction: column;
	margin-bottom: 0.5rem;
}

div.area div div {
	text-align: center;
}

div.area div div:nth-child(2) {
	border-width: 3px 0px 0px 3px;
}

div.area div div:nth-child(3) {
	border-width: 3px 0px 3px 3px;
}

div.empty-area {
	border: 3px solid black;
	border-width: 0px 0px 3px 3px;
	margin-right: 5px;
}

.invoice-title {
	margin-top: 2.5rem;
	margin-bottom: 0px;
}

/* https://stackoverflow.com/a/4151770/4632019 */
hr.thick {
	border: none;
	border-bottom: 3px solid black;
	margin-top: 0.2rem;
}


.contacts > div {
	display: flex;
	margin-bottom: 0.8rem;
}

.contacts > div div:nth-child(1) {
	min-width: 9rem;
}

.contacts > div div:nth-child(2) {
	padding-left: 1rem;
	text-indent: -1rem;
}


/* The layout for invoice items */
.the-grid {
	display: grid;
	grid-template-columns: 1fr 2.5fr 13.5fr 2fr 2fr 3fr 3fr;
	grid-template-rows: auto;
}

.items-grid {
	border: 2px solid black;
	/*position: relative; /* see below*/
}

/* All cells should be aligned vertically by center */
.items-grid > dt {
	display: grid;
	align-items: center;
	padding: 0rem 0.2rem;
	min-height: 1.5rem;
	page-break-inside: avoid;
	/*position: relative; /* Possible WA: when pbi:avoid works in Chrome */
}

.details {
	grid-column: span 4;
	padding: 0 0 !important;
}

.details > dl {
	grid-template-columns: 13.5fr 2fr 2fr 3fr;
	display: grid;
	column-gap: 1px;
	background: black;
	margin-block-start: 0em;
	margin-block-end: 0em;
}

.details > dl > dt {
	display: grid;
	padding: 0rem 0.2rem;
	background: white;
}

/* Do not display right border for last column */
.items-grid > dt:not(.subtotal) {
	border-right: 1px solid black;
}
/* Do not display bottom border for last row */
.items-grid > dt:not(:nth-last-child(-n+4)) {
	border-bottom: 1px solid black;
}


/* Columns: N, Code */
.items-grid > dt.nn,
.items-grid > dt:nth-child(4n +1)
{
	justify-items: center;
	align-items: start;
}

/* Suma */
.items-grid > dt.subtotal
{
	align-items: start;
	justify-items: end;
}

/* Columns: Qty, Price */
.details > dl > dt:nth-child(4n ),
.details > dl > dt:nth-child(4n +2)
{
	justify-items: end;
}


/* Columns: Qty, Label, Price */
.details > dl > dt:nth-child(4n +2),
.details > dl > dt:nth-child(4n +3),
.details > dl > dt:nth-child(4n +4)
{
	align-items: center;
}


/** STYLING FIRST ROW **/
.items-grid > dt:nth-child(-n+7) {
	font-weight: bold;
	justify-items: center;
	text-align: center;
	background-color: LightGrey;
	/*height: 2.5rem;*/

	/*https://specs.rivoal.net/css-repeat/#repeat-on-break*/
	/*display: table-header-group; <-- this is not available for CSS GRID yet*/
}

/* 'Quantity' column is splitted by two later */
.items-grid > dt:nth-child(4) {
	grid-column-start: span 2;
}

/* added for parity cell should be hidden */
.items-grid > dt:nth-child(5) {
	display: none;
}

/* SUMMARY */
.summary > dt:nth-child(2n -1) {
	grid-column-start: span 3;
	text-align: end;
	font-weight: bold;
}

.summary > dt:nth-child(2n) {
	grid-column-start: span 4;
	text-align: end;
	font-weight: bold;
}


/* SIGNATURE */
.signature {
	width: 50%;
	margin-left: auto;
	margin-right: 0px;
	margin-top: 2rem;
}

.signature > div {
	display: inline-block;
}

.signature > div +div {
	float: right;
	margin-right: 1rem;
}


/*DETAILS*/
/* The layout for invoice items */
.the-grid.details {
	display: grid;
	grid-template-columns: 1fr 2.5fr 13.5fr 2fr 2fr 3fr 3fr;
	grid-template-rows: auto;
}


/*]]>*/