.container {
display: flex;
flex-wrap: wrap;
gap: 2rem;
}
section {
width: 100%;
}
.choix {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 1rem;
grid-row-gap: 1rem;
cursor: pointer;
}
.choix p {
display: flex;
gap: 0.2rem;
}
.material-icons {
vertical-align: middle;
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
}
section {
display: flex;
gap: 1rem;
}
.map {
width: 100%;
height: 50vh;
}
.data-parent {
width: 50%;
height: 50vh;
overflow: auto;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
scrollbar-color: var(--e-global-color-primary) white;
}
.data-parent div {
width: 100%;
border-bottom: solid 1px var(--e-global-color-primary);
padding: 1rem 1rem 0 1rem;
}
h2.title-selected {
text-align: center;
}
div.data-parent div p:first-child {
font-weight: bolder;
}
div.data-item {
cursor: pointer;
}
div.data-item:hover {
background-color: #EAF4FD;
}
div.leaflet-popup-content-wrapper {
width: max-content;
}
@media (max-width: 767px) and (orientation: portrait) {
.choix {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, 1fr);
}
.data-container {
display: flex;
flex-wrap: wrap;
}
.data-parent {
width: 100%;
}
}