:root {
	--page-width: 210mm;
	--page-height: 297mm;
	--page-bleed-area: 3mm;
	--page-tot-width: calc(var(--page-width) + 2*var(--page-bleed-area));
	--page-tot-height: calc(var(--page-height) + 2*var(--page-bleed-area));
	--margin-external: calc(var(--page-bleed-area) + 10mm);
	--img-width: calc(var(--page-width) - 20mm);
	--img-height: calc( (var(--page-height) - 25mm) * 0.4);
	--day-height: 62px;
	--largepage-display: block;
	--smallpage-display: none;
}
.hid{visibility:hidden}
@page {
	size: var(--page-tot-width) var(--page-tot-height);
	margin: 0;
}

@media print {
	div.calendar {
		page-break-inside: avoid;
	}

	div.break-after {
		page-break-after: always;
	}
	.no-print,.no-print * {
		display: none !important;
	}
		
}
@media screen {
	div.calendar {
		border: 1px solid black;
	}
}

body {
	margin: 0px;
}

.hidden {
	display: none;
}

.largepage {
	display: var(--largepage-display);
}

.small {
	display: var(--smallpage-display);
}

input {
	border-radius: 2px;
	padding: 2px;
	margin: 2px;
	width: -webkit-fill-available;
}

label {
	font-family: sans-serif;
	font-weight: bold;
	font-size: small;
}

.calendar {
	width: var(--page-tot-width);
	height: calc(var(--page-tot-height) - 1mm);
    background-image:url(./freepik1.jpg);
    background-size:cover;
}

.page-border {
	padding: var(--margin-external);
	padding-top: calc(5mm + var(--margin-external));
	padding-bottom: 0;
}

#cover {
	background-color: #3d5d78;
	height: calc(var(--page-tot-height) - 0.5mm);
}

.table-border {
	padding-top: 5mm;
	display: block;
}

.table-container {
	width: 100%;
	height: 50%;
	max-height: calc(var(--page-height)/2);
}

.img-container {
	width: 100%;
	margin: auto;
}

#cover .img-container {
	 padding-top: calc( var(--page-height) * 0.2 );
}

img.picture {
	height: var(--img-height);
	width: var(--img-width);
	max-height: var(--img-height);
	max-width: var(--img-width);
	margin: auto;

	display: block;
	object-fit: cover;
}

p.description {
	font-family: 'Courgette', cursive;
	margin-block-start: 2mm;
	margin-block-end: 2mm;
	text-align: right;
	width: var(--img-width);
	margin: auto;
}

.caltable {
	border-collapse: collapse;
	width: 100%;
}

.caltable td,th {
	border: 1px solid black;
	font-family: 'Roboto', sans-serif;
	font-size: calc( var(--page-height) * 0.015 );
	width: calc(100% / 7);
	padding: 3px;
}

.weekday {
	text-align: left;
	font-weight: bold;
	border: 0px;
}

.daycell {
	font-weight: bold;
	text-align: left;
	vertical-align: top;
	height: var(--day-height);
	max-height: var(--day-height);
}

.daycell p {
	margin: 0;
}

.daycell p.holidayName {
	font-size: calc( var(--page-height) * 0.007 );
	font-weight: normal;
}

.daycell div {
	overflow: hidden;
	height: calc(var(--day-height) - 6px);
	max-height: calc(var(--day-height) - 6px);
}

.freeday {
	color: #3986c5;
}

p.month {
	font-family: 'Roboto', sans-serif;
	font-size: calc( var(--page-height) * 0.03 );
	color: white;
	text-align: left;
	margin-block-start: 0mm;
	margin-block-end: 0mm;
}

p.year {
	font-family: 'Roboto', sans-serif;
	font-size: calc( var(--page-height) * 0.044 );
	color: black;
	text-align: left;
	margin-block-start: 0mm;
	margin-block-end: 0mm;
}

#cover .year {
	font-size: calc( var(--page-height) * 0.088 );
}

.othermonth {
	opacity: 0.4;
}

hr.emptyline {
	margin-top: 8mm;
	border-width: 1px;
	margin-left: 5mm;
}

.month-row {
	width: 100%;
	margin-block-start: 0mm;
	margin-block-end: 3mm;
}

.monthbox {
	background-color: #bcbcbc;
	margin-left: calc(0mm - var(--margin-external));
	padding-left: var(--margin-external);
	padding-top: 2mm;
	padding-bottom: 2mm;
}

.month-row .monthbox {
	width: 40%;
	display: inline-block;
}

.month-row .lines {
	width: 59%;
	display: inline-block;
}

#cover .monthbox {
	margin-top: calc( var(--page-height) * 0.085 );
	margin-right: calc(0px - var(--margin-external));
}