body {

    font-family: Arial, sans-serif;
}

header {
    text-align: center;
}

/* main {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 10px;
}

#map {
    flex: 1 1 500px;
    min-width: 200px;
    height: 85dvh;
} */

#partyTitle {
    color: white;
    font-size: 24px;
    container-name: partyTitle;
}

@container partyTitle (min-width: 500px) {
    #partyTitle {
        font-size: 18px;
    }
}

body {
    margin: 0
}

@media (max-width: 900px) {
    /* main {
        flex-direction: column;
    } */
    table.cards {
        display: block !important;
    }
    table.table {
        display: none;
    }
}

#tableContainer {
    flex: 1 1;
    display: grid;
    align-self: flex-start;
    margin: 0 auto;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;

}

th[scope="col"] {
  background-color: #505050;
  color: #fff;
}

th[scope="row"] {
  background-color: #d6ecd4;
}

td {
  text-align: center;

}

table {
  border-collapse: collapse;
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

.newCall {
    background-color: #d6ecd4;
}

.youngCall {
    background-color: #f9f9a0;
}

.oldCall {
    background-color: #f9d6d6;
}

.deadCall {
    background-color: #f9a0a0;
}

.leaflet-top {
   top: 50px !important
}

#stationInfoCardContainer { 
    position: absolute; 
    bottom: 0px; 
    z-index: 1000; 
    background-color: white; 
    width: 100%;
}

#stationCard {
    padding: 10px;
}

#stationCardHeader {
    display: flex;
    width: 100%;
}

#stationCardHeader h2 {
    flex-grow: 1;
    margin: 8px 0px;
    border-bottom: 2px solid black;
}

#stationCardHeader button {
    border-radius: .5em;
    font-size: 1.5em;
    margin-left: 10px;
}

#stationCardHeader button svg {
    margin: auto;
    width: 1em;
    display: flex;
}

#stationCardHeader button div {
    font-size: 0.5em;
}

#stationCard dt {
    font-weight: bold;
    text-transform: uppercase;
}

#stationCard dt::after {
    content: ":";
}