:root {
	--map-width: 73vw;
	--map-width-1000: 97vw;
	--map-height: 98vh;
	--map-height-1000: 48vh;
}

.photos img {
	max-width: 100%;
	max-height: 100%;
}

.wrapper {
	display: grid;
	gap: 10px;
	height: 98vh;
	position: relative;
	grid-template-areas: 'map sidebar';
}

#map {
	height: var(--map-height);
	width: var(--map-width);
	z-index: 1;
	/* position: relative; */
	grid-area: map;
}

#info {
	position: absolute;
	z-index: 2;
	height: var(--map-height);
	width: var(--map-width);
	display: none;
	background: white;
}

#info h2 {
	border-top: 1px solid gray;
}

.year {
	overflow-y: scroll;
	max-height: calc(var(--map-height) / 2);
}

#info header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.close {
	font-size: 125%;
	cursor: pointer;
}

.photos_pfp {
	display: flex;
}

.pfp {
	width: 250px;
	max-height: 20%;
}

.pfp img {
	width: 250px;
}

.placeholder {
	width: 250px;
	color: white;
}

#sidebar {
	grid-area: sidebar;
	overflow: auto;
	scrollbar-width: thin;
}

#sidebar header {
	display: grid;
	grid-template-areas:
		'pie stats'
		'pie stats'
		'progres progres';
}

#pie {
	grid-area: pie;
}

.leaflet-interactive .donut {
	border: 2px solid black !important;
	border-radius: 100%;
}

.leaflet-marker-pane {
	z-index: 700;
}

#stats {
	grid-area: stats;
}

table {
	border-collapse: collapse;
}

#progres {
	grid-area: progres;
	margin-bottom: 15px;
	position: relative;
}

.progress-bar {
	width: 100%;
	height: 15px;
	background: red;
	position: absolute;
}

#t_faite {
	z-index: 2;
	background: lime;
	width: 0;
}

table th,
table td {
	border: 1px solid black;
	text-align: center;
	padding: 3px;
}

th,
.parc-table b {
	cursor: pointer;
}

#p_desc {
	font-size: 150%;
}

@media only screen and (max-width: 1000px) {
	.wrapper {
		grid-template-areas:
			'sidebar'
			'map';
	}

	#sidebar {
		height: var(--map-height-1000);
		overflow: scroll;
	}

	#map {
		height: var(--map-height-1000);
		width: var(--map-width-1000);
	}

	#info {
		bottom: 0;
		height: var(--map-height-1000);
		width: var(--map-width-1000);
		border-top: 1px solid black;
		overflow: scroll;
	}

	.progress-bar {
		width: calc(var(--map-width-1000) - 3vw);
		height: 15px;
		background: red;
		margin-bottom: 15px;
	}

	.photos_pfp {
		display: flex;
		flex-direction: column;
	}

	.pfp img {
		width: 150px;
	}
}

.modal {
	position: absolute;
	top: 50vh;
	z-index: 2;

	color: black;

	display: none;

	/* background: rgba(255, 255, 255, 0.5); */
	background: white;
}

.modal,
.modal * {
	scrollbar-width: thin;
}

.modal h2 {
	margin: 5px;
}

.modal button {
	cursor: pointer;
}

#modalP {
	left: 33%;
	max-height: 45vh;
}

#modalT {
	/* top: 25vh; */
	left: 15vw;
	max-height: 50vh;
	overflow: auto;
	width: 800px;
}

.modal header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.modal-content {
	max-height: 40vh;
	overflow: auto;
}

.problemes-annee {
	max-height: 35vh;
	overflow: auto;
}

.left {
	flex-direction: column;
}

.arborescence {
	max-height: 70vh;
}

.arborescence h2,
.arborescence h3,
.arborescence h4,
.arborescence li {
	cursor: pointer;
}

.info {
	width: 45vw;
	height: 40vh;
	background: white;
}

label {
	font-weight: bold;
}

.error {
	color: red;
	font-style: italic;
}

.key {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-left: -10px;
	margin-right: 3px;
}

.key5 {
	background: red;
}
.key4 {
	background: orange;
}
.key0 {
	background: yellow;
	border: 1px solid black;
}
.key00 {
	background: white;
}

#stats li {
	list-style-type: none;
}

.textIcon {
	/* background: white; */
	font-size: 11px;
}