.map-container { width: 100%; height: calc(70vh - 56px); min-height: 250px; }
.data-container { height: 40vh; min-height: 250px; width: 100%; text-align: center; overflow: hidden; margin: 0; padding: 0; }

#start-box {
    color: #fff;
    padding: 5rem 1rem;
    font-size: 2rem;
    line-height: 1;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#data-box { display: flex; height: 100%; min-height: 100%; }
#image-box { width: 40%; height: 100%; max-height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; }
#mp-box { padding: 2rem 0 0 0; background: black; width: 60%; height: 100%; float: left; overflow-y: auto; }

.mp_card { display: flex; flex-direction: row; justify-content: center; align-items: center; margin: 0 0 2rem 0; }
.party_image img { width: 50px; border-radius: 100%; box-shadow: 0 .5rem .75rem -.25rem rgb(39 48 54 / 5%); margin: 0 10px; }
.mp_supporter, .mp_prospect { width: 50px; height: 50px; color: #fff; border-radius: 100%; margin: 0 10px; }
.mp_supporter { background: #3abd76; }
.mp_prospect { background: var(--orangecolor); }

.name { margin: 0 0.5rem 0.5rem 0.5rem; font-size: 1.5rem; line-height: 1; color: #fff; }
.constituency { margin: 0 0.5rem; font-size: 1rem; line-height: 1; color: #fff; }

.buttons { margin-bottom: 2rem; }
.buttons a.btn { width: 90%; margin: 0 5% 5% 5%; line-height: 1.2; }
.buttons a.btn:hover { color: #000; background-color: var(--greencolor); border-color: var(--greencolor); }

.map-legend {
    position: absolute;
    right: 0; top: 0;
    width: 100%;
    max-width: 175px;
    overflow: hidden;
    background: #000000b0;
    color: #fff;
    border-bottom-left-radius: 10px;
    padding: 5px 2px 8px 2px;
}
.map-legend .main-title { font-size: 110%; text-align: center; margin: 5px 0 10px 0; font-weight: 700; line-height: 1; }
.map-legend .legend-title { font-size: 90%; line-height: 1; text-align: center; font-weight: 400; margin: 0 0 10px 0; }
.map-legend .legend-icons { display: grid; justify-content: center; align-items: center; }

.map-legend .icon-green,
.map-legend .icon-orange,
.map-legend .icon-grey { width: 100%; text-align: left; display: inline-table; padding: 0 0 5px 0; font-size: 12px; }
.map-legend .icon-green span.legend-dot,
.map-legend .icon-orange span.legend-dot,
.map-legend .icon-grey span.legend-dot { width: 20px; height: 20px; display: block; border-radius: 100%; float: left; margin-right: 10px; }
.map-legend .icon-green span.legend-dot { background: var(--greencolor); }
.map-legend .icon-orange span.legend-dot { background: var(--orangecolor); }
.map-legend .icon-grey span.legend-dot { background: #BABABA; }

.map-legend .legend-thermometer { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-top: 10px; }
.map-legend .thermometer-bar-green,
.map-legend .thermometer-bar-orange,
.map-legend .thermometer-bar-grey { width: 95%; height: 18px; line-height: 18px; border-radius: 10px; text-align: center; font-weight: 700; font-size: 8px; }
.map-legend .thermometer-bar-green { background: linear-gradient(to right, rgb(178, 225, 199), rgb(24, 111, 63)); color: #032b15; }
.map-legend .thermometer-bar-orange { background: linear-gradient(to right, rgb(255, 222, 170), rgb(255, 108, 0)); color: #7e3805; }
.map-legend .thermometer-bar-grey { background: linear-gradient(to right, rgb(230, 230, 230), rgb(170, 170, 170)); color: #032b15; }

.map-legend .thermometer-labels { display: flex; justify-content: space-between; width: 95%; line-height: 1; color: #fff; font-size: 8px; }
.map-legend .thermometer-labels div { text-align: center; flex: 1; margin-top: 3px; }

@media (min-width: 576px) {
    .party_image img,
    .mp_supporter,
    .mp_prospect { width: 60px; height: 60px; }

    .map-legend { max-width: 225px; padding: 10px 10px 14px 10px; }
    .map-legend .main-title { font-size: 130%; }
    .map-legend .legend-title { font-size: 100%; }
    .map-legend .thermometer-bar-green,
    .map-legend .thermometer-bar-orange,
    .map-legend .thermometer-bar-grey { font-size: 10px; }
    .map-legend .thermometer-labels { font-size: 10px; }
}

@media (min-width: 768px) {
    .map-container { min-height: 100vh; height: 100%; }
    .data-container { min-height: 100vh; height: 100%; }

    #start-box {
        margin-top: 2rem;
        padding: 200px 1rem 1rem 1rem;
        height: 600px;
        display: block;
    }

    #data-box { display: block; }
    #image-box { width: 100%; height: auto; max-height: none; display: block; }
    #image-box img { min-height: 250px; height: auto; }
    #mp-box { padding: 1rem 0 0 0; width: 100%; height: auto; float: none; }

    .party_image img,
    .mp_supporter,
    .mp_prospect { width: 65px; height: 65px; }

    .name { margin-top: 2rem; }

    .map-legend { max-width: 270px; padding: 1rem; }
    .map-legend .main-title { font-size: 1.5rem; }
    .map-legend .legend-title { font-size: 1.2rem; }
    .map-legend .thermometer-bar-green,
    .map-legend .thermometer-bar-orange,
    .map-legend .thermometer-bar-grey { font-size: 12px; }
    .map-legend .thermometer-labels { font-size: 12px; }
    .map-legend .icon-green,
    .map-legend .icon-orange,
    .map-legend .icon-grey { font-size: 1rem; }
}

@media (min-width: 992px) {
    .map-container { min-height: 1000px; height: 100vh; }
}