body {
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
}

select {
    width: 100%;

    height: 30pt;
    font-family: Helvetica Neue;
    font-size: medium;
    padding: 5pt;
}

table {
    border-collapse: collapse;
}

th {
     vertical-align:text-top;
     padding: 5px;
}

#filterBar {
    background-color: #303030;
    overflow-y: scroll;

    max-height: calc(100vh - 100pt);
    color: white;
}

#searchBarContainer {
    background-color: cadetblue;
}

#searchBar {
    /* font-size: 16pt; */
    /* padding: 5pt; */
    margin-left: 10pt;
    margin-right: 10pt;
    width: calc(100% - 33pt);

    background-color: #4c4c4c;
    border: 3px solid #67d6d7;
    border-radius: 10px;
    font-size: 19pt;
    padding: 7px;
    color: white;
}

#typeSelectorContainer {
    padding: 10pt;
    background-color: #151515;
    color: white;
}

#resultsPanel {
    /*background-color: red;*/
    position: relative;
    left: 10pt;
    width: calc(100% - 40pt);
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 10pt;
    height: auto;
    /*overflow: scroll;*/
}

#resultsListPanel {
    /*background-color: blue;*/
    overflow-y: scroll;

    max-height: calc(100vh - 100pt);

    background-color: #151515;

    color: white;
}

#resultsMapPanel {
    background-color: #151515;
}

#map {
    height: 100%;
}

#mainContent {
    /*background-color: rebeccapurple;*/
    width: 100%;
    height: 100%;

    padding: 0;
    margin: 0;


    /**/
    display: grid;
    grid-template-columns: 400pt auto;
}

#typeSelector {
    margin-bottom: 10pt;
}

#typeFilters {
    padding: 10pt;
}
.filterCell {
    display: grid;
    grid-template-rows: auto 1fr;

    row-gap: 5pt;
    column-gap: 10pt;
    padding-bottom: 10pt;
}

.resultCell {
    width: calc(100% - 10pt);
    height: 20pt;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 2pt;
    /*margin-top: 5pt;*/
    padding: 5pt;
}

.resultCell:hover {
    cursor: pointer;
    background-color: rgb(130,130,130) !important;
}

.resultCellLabel {
    position: relative;
    overflow: clip;
    top: 50%;
    transform: translateY(-30%);
}
.resultCellUnderline {
    width: 100%;
    height: 1pt;
    background-color: black;
}


.leaflet-popup-content-wrapper {
    border-radius: 5px; /* Adds rounded corners to the content wrapper */
    border: 2px solid #151515; /* Changes the border of the content wrapper to a 2px red solid line */
}
.leaflet-popup-content {
    margin: 0 !important;
    overflow: hidden;
    border-radius: 10px;
    width: auto !important;
}

.leaflet-popup-tip {
    /* Styles for the popup tip/arrow can also be adjusted here */
    background: #151515 !important; /* Changes the color of the popup tip */
}

#legendContainer {
    position: absolute;
    width: 200pt;
    /* height: 300pt; */
    top: 10pt;
    right: 10pt;
    background-color: whitesmoke;
    z-index: 400;
    overflow-y: scroll;
    max-height: calc(100vh - 20pt);
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
    display: none;
}

#legendTitle {
    position: relative;
    height: 30pt;
    text-align: center;
    line-height: 30pt;
    font-size: 22pt;
    background-color: lightgrey;
    border: 3px solid black;
    border-bottom: none;
}

.legendCell {
    font-size: 16pt;
    text-align: left;
}

.legendLineDiv {
    margin: 0; 
    width: 30pt;
    height: 5pt;
    background-color: red;
    transform: translate(4px,-3px);
}

.legendImg {
    text-align: center;
    position: relative;
    aspect-ratio: 1;
    width: 20pt;
    transform: translate(10px, 6px);
}

#legendButton {
    position: absolute;
    top: 18pt;
    right: 15pt;
    width: 20pt;
    height: 20pt;
    z-index: 450;
    cursor: pointer;
}

#legendButton img {
    position: relative;
    width: 100%;
    height: 100%;
}