/* > Page's A{k} formats */
#app{--Ak_o1:21;--Ak_o2:29.7;}
#app[data-format="A4"]{--k:1;}
#app[data-format="A3"]{--k:2;}
#app[data-format="A5"]{--k:0.5;}
/* < */
/* > Page's orientation */
#app[data-orientation="landscape"]{
	--paper-width: calc(var(--k) * var(--Ak_o2) * 1cm);
	--paper-height:calc(var(--k) * var(--Ak_o1) * 1cm);
}
#app[data-orientation="portrait"]{
	--paper-width: calc(var(--k) * var(--Ak_o1) * 1cm);
	--paper-height:calc(var(--k) * var(--Ak_o2) * 1cm);
}
/* < */
/* > Page's flow's columns count */
#app[data-columns="1"]{--columns:1;}
#app[data-columns="2"]{--columns:2;}
#app[data-columns="3"]{--columns:3;}
#app[data-columns="4"]{--columns:4;}
#app[data-columns="6"]{--columns:6;}
#app[data-columns="8"]{--columns:8;}
/* < */
/* > Global layout */
html, body {
	height: 100%;
	max-height: 100%;
}
html, body, html *{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: Arial;
}
@media print{
	#app{
		#screen{
			display:none !important;
		}
		#print{
			display:block;
			.leaflet-control-container{
				display:none;
			}
		}
	}
}
@media screen{
	#app{
		#screen{
			display:grid;
			grid-template-areas:"toolbar""workspace";
			grid-template-rows:max-content 1fr;
			height: 100%;
			max-height: 100%;
			overflow:hidden;
			#app__toolbar{
				grid-area:toolbar;
				display:flex;
				flex-direction:row;
			}
			#app__workspace{
				grid-area:workspace;
				height: 100%;
				max-height: 100%;
				overflow-y:auto;
			}
		}
		#print{
			display:none;
		}
	}
}
#app[data-format="A4"][data-orientation="landscape"]{
	--page-width:calc(
		var(--paper-width)
		
	);
	--page-height:calc(
		var(--paper-height) 
		
	);
}

.pagesViewer{
	--column_width:calc( var(--page-width) / var(--columns));
	width:var(--page-width);
	height:var(--page-height);

	overflow:auto;
	.container{
		height:var(--page-height);
		padding-top:1cm;
		padding-bottom:1cm;
		display:flex;
		flex-direction:column;
		flex-wrap:wrap;
		Justify-content:flex-start;
		align-items:flex-start;
		align-content:flex-start;
		.pageblock{
			width:var(--column_width);
			min-width:var(--column_width);
			max-width:var(--column_width);
		}
	}
}
.pagesPrinter{
	width:var(--page-width);
	--column_width:calc( var(--page-width) / var(--columns));
	> table{
		margin-top:1cm;
		margin-bottom:1cm;
		height:calc( var(--page-height) -1cm -1cm);
		width:var(--page-width);
		border-collapse:collapse;
		page-break-after:always;
		tr{
			td{
				border:#fff 1px solid;
				--cell_width:calc(var(--column_width) - 2px);
				width:var(--cell_width);
				max-width:var(--cell_width);
				min-width:var(--cell_width);
				vertical-align:top;
				.pageblock{
					padding:0 0;
				}
			}
		}
	}
	overflow-y:auto;
}
.pagesViewer, 
.pagesPrinter{
	.pageblock{
		padding:0 0;
	}
}
/* < */
/* > Page's template */
#app[data-template="template-1"]{
	.pageblock > inner{
		margin:0 10px;

	}
	.pageblock--location >  .inner{
		display:grid;
		grid-template-areas:
			"number address";
		gap:10px;
		margin-bottom:10px;
		grid-template-columns:max-content 1fr; 
		.number{
			grid-area:number;
			position: relative;
			border-radius: 50%;
			background-color: #f59e1d;
			width: 30px;
			height: 30px;
			color: #fff;
			font-size: 20px;
			float: left;
			text-align: center;
			line-height: 20px;
			font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
			.text{
				position: absolute;
				color: #fff;
				font-size: 20px;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
		.address{
			grid-area:address;
			font-size:12px;
			.street{
				display:block;
			}
			.locality{
				display:block;
				text-align:right;
			}
		}
		
	}
	.pageblock > .inner{
		margin-left:15px;
		margin-right:15px;
	}
	.pageblock--organisation_name >    .inner{
		font-weight:bold;
		font-size:16px;
		background:#eaeaea;
		text-align:center;
		margin-top:10px;
		margin-bottom:5px;
		padding:4px 0;
	}
	.pageblock--activity__title >      .inner{
		font-size:14px;
		font-weight:bold;
		margin-bottom:10px;
	}
	.pageblock--activity__summary__p       > .inner,
	.pageblock--activity__summary__ol__li  > .inner,
	.pageblock--activity__summary__ul__li  > .inner,
	.pageblock--organisation__misc__p      > .inner,
	.pageblock--organisation__misc__ol__li > .inner,
	.pageblock--organisation__misc__ul__li > .inner{
		font-size:12px;
		padding-bottom:5px;
		text-align:justify;
	}
}
#app[data-template="template-2"]{
	
}