styles = html`
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet">
<style>
#map-denegations-legend span {
font-size: 14px;
}
#map-denegations-lead {
max-width: 900px;
}
#map-denegations-legend div {
display: ${isMobile ? "block" : "flex"};
flex-wrap: wrap;
justify-content: center;
}
svg * {
font-family: 'Lato', sans-serif;
}
.observablehq * {
font-family: 'Lato', sans-serif;
}
#map-denegations-province-resume, #map-denegations-hover-note {
margin-left: ${!isMobile ? "20px" : "0px"};
}
#map-denegations-hover-note {
text-align:center;
font-style: italic;
background-color: #f1f1f1;
padding:0.5rem;
width:${chartWidth - 16}px
}
#map-denegations-province-resume h4 {
margin-bottom:10px;
}
svg#chart-denegations path, svg#chart-denegations line {
display: none
}
@media only screen and (max-width: 600px) {
/* Set margin on both sides to let user do scroll and show the borderline */
#map-denegations {
display: block;
margin: auto;
margin-top: 10px;
border: 1px solid #c1c1c1;
}
}
</style>
`