div {
    margin: 5px;
}

h2,
h3 {
    font-family: Arial, Helvetica, sans-serif;
}

p {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: 14px;
}

#year-slider {
    margin: 30px;
}

.map {
    background-color: #e6e6e6;
    border: 1px solid black;
}

.state {
    stroke: #e1e1e1;
    fill: #cecece;
    stroke-width: 0.5;
}

.box {
    display: flex;
}

.flexible {
    flex-grow: 1;
}

.grid {
    stroke: #f4f4f4;
    stroke-width: 1.5px;
}

.facet-marker-1 {
    stroke: rgb(0, 160, 214);
    stroke-width: 3px;
}

.facet-marker-2 {
    stroke: orange;
    stroke-width: 3px;
}

.line-plot {
    stroke: black;
    fill: none;
    stroke-width: 1px;
}

.similarity-rectangle {
    fill: red;
}

.euclidian-rectangle {
    fill: green;
}

.euclidian-warm {
    fill: red;
}

.euclidian-cold {
    fill: blue;
}

.station {
    fill: blue;
}

#selected-station {
    fill: rgb(182, 0, 182);
}

.comparison-line-plot-1 {
    stroke: rgb(0, 160, 214);
    fill: none;
    stroke-width: 3px;
}

.comparison-line-plot-2 {
    stroke: orange;
    fill: none;
    stroke-width: 3px;
}

.comparison-line-plot-3 {
    stroke: rgb(182, 0, 182);
    fill: none;
    stroke-width: 3px;
}