html {
    font-family: arial, helvetica, sans-serif;
    font-size: 16px;
}

a {
    color: slategray;
}

.main-container {
    display: grid;
    grid-template: auto 1fr / auto 1fr auto;
    column-gap: 12px;
    row-gap: 12px;

    height: 95vh;
}
  
.main-container .header {
    padding: 12px;
    grid-column: 1 / 4;

    display: flex;
    flex-direction: row;
}

.main-container .left-side {
    grid-column: 1 / 2;

    display: flex;
    flex-direction: column;
    row-gap: 24px;
    width: 480px;

    padding-left: 12px;
}

.main-container .main {
    grid-column: 2 / 3;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.main-container .footer {
    grid-column: 1 / 4;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;

    font-size: 14px;
    color: slategray;
}

.hr {
    width: 95%; 
    border: 0; height: 1px; 
    background: linear-gradient(to right, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.75) 50%, rgba(0,0,0,0.05) 100%);
}

#dex-name-logo {
    width: 200px;
    filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.2));
    height: 70px;
    flex-grow: 0;
    flex-shrink: 0;
    background-size: 140px 400px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOTkuOTI2IDExMS4yMjciPjxwYXRoIGZpbGw9IiMwYzRjYTMiIGQ9Ik0yNDIuMTUgMTA4LjE0Yy0uNzIzLTEuNjk3LTEuMjc4LTMuMDk2LTEuMjMzLTMuMTA5LjA0NS0uMDEzIDEuMzA2LS42NDQgMi44LTEuNDAyIDQuNzkxLTIuNDMgNy4zNDEtNS44IDkuNjAxLTEyLjY4NSAxLjIxLTMuNjg0IDEuMi00LjI1Mi0uMDYtMy45NDRsLTEuNzQ4LjQyNWMtLjYzNS4xNTQtLjgxOC4wMDQtLjk5NC0uODE2LTEuNDY2LTYuODUtNC44Ni0xOC4wNDktOS44MTgtMzIuNDAyLTUuODc4LTE3LjAxNi04LjU5OS0yNS4yNC04LjM5LTI1LjM3LjQ0Ny0uMjc2IDguOTUyLTMuMDYxIDkuMDI3LTIuOTU2LjA0MS4wNTcuMzYgMS4wNTcuNzEgMi4yMi43NDkgMi40OTcgMy41NDkgMTEuMzgyIDQuMjI1IDEzLjQwNi4yNi43NzcuOTgzIDMuMDc4IDEuNjA5IDUuMTE2YTMyMS43MiAzMjEuNzIgMCAwMDEuNjA4IDUuMTE1YzMuMDU2IDkuMTUzIDYuMjg1IDIwLjcyIDcuMDY2IDI1LjMxNi4yOTUgMS43MzkuNzMyIDEuOTYxIDEuMDQuNTI4LjEzNS0uNjMyLjQ0NC0xLjc4NS42ODctMi41Ni4yNDMtLjc3Ny43MTYtMi4zNjQgMS4wNS0zLjUyOC4zMzQtMS4xNjUgMS4wOS0zLjcwNSAxLjY4LTUuNjQ1LjU5LTEuOTQgMS4yOC00LjI0MiAxLjUzNC01LjExNS4yNTQtLjg3My45NjktMy4yNTUgMS41ODgtNS4yOTJhNjc4LjgyMSA2NzguODIxIDAgMDAxLjU4Ny01LjI5MWMuMjU0LS44NzQuOTY5LTMuMjU1IDEuNTg4LTUuMjkyYTc2OC4wMjEgNzY4LjAyMSAwIDAwMS41OS01LjI5MmMxLjI2NS00LjMyMyAyLjc0My05LjE1MiAzLjIxMS0xMC40OTVsLjUyMy0xLjVoNS4yNjNjMi44OTQgMCA1LjI2Mi4wNjEgNS4yNjIuMTM2IDAgLjg5Ni0yMi4yNjQgNjYuNjY1LTIzLjI5NSA2OC44MTctMi4wMjQgNC4yMi00LjUwNCA3Ljg1Ny02Ljc2MSA5LjkxNS0yLjA0MSAxLjg2Mi02LjI3MSA0LjE1Ni04LjM5OCA0LjU1NWwtMS4yMzYuMjMyek04Mi43OCA4Ny43MWMtNy43MzMtMS41NDktMTMuNTgzLTYuMTU5LTE2Ljk2LTEzLjM2Ny0xLjc3My0zLjc4LTIuMjktNS40NjctMy4wMzYtOS45MDUtMS4wMzMtNi4xNDUtLjY3My0xNC43NDQuODI4LTE5Ljc1NiAyLjU1My04LjUyNCA4Ljk0NC0xNS4zMzggMTYuNzE2LTE3LjgyIDMuMTg2LTEuMDE4IDEwLjI0MS0uOTk1IDEzLjYxNS4wNDUgMy4wNjguOTQ1IDQuNzYzIDEuODA5IDcuMTE4IDMuNjI3IDMuNjI2IDIuNzk4IDYuNDUgNy40MSA3LjU4NCAxMi4zODUuNjU4IDIuODg4IDEuMjk4IDkuNDYzIDEuMjk4IDEzLjMzNnYyLjcxNUg3Mi45NjdsLjE1OSAzLjYxNmMuMjcgNi4xOTEgMS41NCA5Ljg0NyA0LjQ4IDEyLjkwNCAzLjE4OCAzLjMxNyA2Ljg1OCA0LjY0IDEyLjg4IDQuNjQ0IDUuNTIyLjAwNCA5LjMzNy0xLjIyOSAxMy4xNjctNC4yNTVsMS4yOTUtMS4wMjMgMS43ODIgMi44ODhjMi4wNzcgMy4zNjUgMi4xMzEgMy4xODMtMS43MTQgNS43My02LjE0NSA0LjA3LTE0LjgxMyA1LjcyMS0yMi4yMzcgNC4yMzV6bTE3LjEzNi0zOC44NzdjLS43NDYtOC4yMy0yLjcwNC0xMS44OC03LjU5NS0xNC4xNjUtMi44MS0xLjMxMy03LjQ0Ny0xLjQ4LTEwLjM5NS0uMzc1LTMuOTYyIDEuNDg2LTYuNTYgNC44OTYtNy45OSAxMC40ODMtLjM3NSAxLjQ2Ni0uNjgxIDMuNTkyLS42ODEgNC43MjV2Mi4wNmgyNi45MDh6TTM3Mi43NjIgODcuN2MtMTMuMDk1LTIuNjc0LTIwLjQ3OC0xMy45ODgtMjAuNDU1LTMxLjM0NS4wMTItOC45NyAxLjY1Ny0xNC44NyA1LjY2NS0yMC4zMTYgMy4yNzQtNC40NDkgNi44MzUtNy4yMDIgMTEuNjctOS4wMjUgMi40MzQtLjkxNyAxMC42NzQtMS4xMDYgMTMuNjU2LS4zMTMgNS42MjkgMS40OTcgOS43MjQgNC42MzYgMTMuMTk1IDEwLjExNCAxLjkxOCAzLjAyNyAzLjQxIDExLjI1MSAzLjQyNiAxOC44OTJsLjAwNyAzLjI2M2gtMzYuNjg5djMuNjIzYzAgOC44NjIgMy43OSAxNC42NjggMTEuMDExIDE2Ljg2NCAyLjg4Ljg3NiA5LjQ4OC45NCAxMi4yOTYuMTIgMi4xNDQtLjYyNiA1Ljc0LTIuNTIgNy4zNC0zLjg2N2wxLjA1NC0uODg2IDEuNzg4IDIuOTA2Yy45ODQgMS41OTggMS43ODQgMi45OTIgMS43NzggMy4wOTctLjAxNS4yNjgtMi42NSAyLjIxLTQuNzUyIDMuNS01LjMwOSAzLjI2My0xNC4zODYgNC43MjItMjAuOTkgMy4zNzN6TTM4OS45MiA0OC42NWMtLjMwMy0zLjc5Ni0xLjI0OC03LjQ3OC0yLjQ0NS05LjUyLTIuMDkyLTMuNTctNS45ODUtNS41NjEtMTAuODc1LTUuNTYxLTMuNDI2IDAtNS45NjQuODg1LTguMjE0IDIuODY2LTIuNzQ4IDIuNDE5LTUuMTUgOC41MzctNS4xNSAxMy4xMnYyLjAwNmgyNi45MTZ6TTE3LjMzOCA4Ni45OGMtNS44ODQtMS43MjYtMTAuMjAyLTUuMDYzLTEyLjk2NS0xMC4wMjItMi40NTEtNC40LTMuNTMyLTguMjYzLTQuMTYxLTE0Ljg3NS0uODM3LTguNzk2Ljg0LTE3Ljc0MyA0LjQ2LTIzLjc5MyAxLjY4LTIuODEgNi4xNDMtNy4yNDUgOS4wNzEtOS4wMTcgNS41OTEtMy4zODIgMTIuNDUtMy43NjcgMTguNjcyLTEuMDQ4IDEuNzc4Ljc3OCA0Ljk0MiAyLjk5MyA2LjA1NiA0LjI0LjM3LjQxNC44MDcuNzUzLjk3Ljc1My4xNjUgMCAuMjk5LTcuNDc0LjI5OS0xNi42MDhWMGwuOTcuMTkyYy41MzMuMTA2IDEuNjA1LjI4NSAyLjM4MS4zOTcuNzc2LjExMyAyLjM5Ni4zNzMgMy42LjU3OWwyLjE5LjM3My4xMyAzOS41NjJjLjExNCAzNC41OTcuMjAxIDM5Ljg3My42OTIgNDIuMDMyLjMxIDEuMzU4LjY3MyAyLjc1Mi44MSAzLjA5Ny4yMy41ODYtLjA3Ny42MjEtNC42MzkuNTNsLTQuODg1LS4wOTktLjY4MS0yLjc1My0uNjgxLTIuNzU0LTEuNjIgMS41N2MtMS45MSAxLjg1My00Ljc0OCAzLjQ4My03LjQxNSA0LjI2LTIuNTI2LjczNy0xMC43MzMuNzMyLTEzLjI1NC0uMDA3em0xMS4zMTMtNy41NzRjMy43MDMtLjY3IDguODEtNC4wMzcgMTAuMjM1LTYuNzQ3LjQxMS0uNzgyLjUtMy43OS41LTE2Ljc3MnYtMTUuODJsLTEuNDk4LTEuNDI3Yy0zLjI2Mi0zLjEwNi02LjIwOC00LjExLTEyLjA1OS00LjExLTMuNTY5IDAtNC41MTQuMTE4LTUuODQ1LjczMy0zLjY0NSAxLjY4NS02LjQ2OCA1LjIxNS04LjIwOCAxMC4yNjYtLjk4IDIuODQ3LTEuMDU2IDMuNDYtMS4yMyA5LjkyLS4zMjkgMTIuMjQ3LjY0NCAxNi40NyA0LjgyIDIwLjkyNiAyLjgwMSAyLjk5IDcuNTM4IDQuMDcxIDEzLjI4NSAzLjAzem0xNjAuNDkgNy4zMDNjLTguMjIyLTIuNjgyLTEyLjUzOC03Ljc3LTE1LjQ0OS0xOC4yMTMtLjY0OC0yLjMyNC0uNzM3LTMuNjEtLjczNy0xMC41ODMgMC04LjQzNy4yMS05Ljg3IDIuMjE5LTE1LjE5NSAyLjM4NS02LjMxOSA4LjA4Ny0xMi4zOTIgMTMuOTY3LTE0Ljg3NSA3LjE4OC0zLjAzNSAxNi4yODQtMS4xNDEgMjEuOCA0LjUzOWwxLjMwNyAxLjM0NVYxNi44OWMwLTEwLjQwNy4xMjgtMTYuODM1LjMzNS0xNi44MzUuMTg1IDAgMS4wOTguMTQ1IDIuMDI5LjMyMi45MzEuMTc2IDIuODM0LjUwNyA0LjIzLjczM2wyLjUzNy40MTMuMTQ3IDM5LjA0MmMuMTUxIDQwLjA5NC4xODEgNDAuOTkyIDEuNTA2IDQ1LjQ4bC4yMzQuNzkzaC05LjU4bC0uNTQyLTEuODI4Yy0uMjk5LTEuMDA1LS41NDMtMi4xOTUtLjU0My0yLjY0NSAwLTEuMDgtLjItMS4wMzgtMS43NjYuMzc2LTEuNzYxIDEuNTkxLTQuMTg0IDIuOTgxLTYuOTQgMy45ODEtMS45ODEuNzItMi44ODUuODItNy4yNzMuODA2LTQuMjM0LS4wMTMtNS4zOTQtLjE0LTcuNDgxLS44MjF6bTEyLjAxOC03LjMwNWMxLjE1MS0uMjEgMy4wNjUtLjg1NyA0LjI1My0xLjQzOCAyLjEzLTEuMDQxIDUuNDE3LTMuOTU1IDYuMzM5LTUuNjE5LjM3NC0uNjc1LjQ3NS00LjA3Mi40ODQtMTYuMzAybC4wMTMtMTUuNDQ5LTEuNjc2LTEuODA0Yy0yLjMyMi0yLjUtNS4xODktMy43NjQtOS41NDktNC4yMS0zLjYxOC0uMzctNi42OTUtLjA2My04LjkzOS44OTItMy4xNjQgMS4zNDYtNi42NzIgNi4yMDItOC4wMjcgMTEuMTExLTEuNDA1IDUuMDk0LTEuMzEzIDE4LjgzMy4xNiAyMy42LjggMi41OTEgMy4xODcgNS45OSA1LjIyNCA3LjQ0IDIuNzc0IDEuOTc1IDcuMDY1IDIuNjI2IDExLjcxOCAxLjc3OXptLTg1LjM1NiA2Ljk5NWMuMjk0LS41MDMgMTYuMTktMjQuMTc0IDE5LjUyNi0yOS4wNzdsMi4yMDMtMy4yMzctMi4zOS0zLjQ2NmEyNDUzLjY2NCAyNDUzLjY2NCAwIDAwLTUuOTU5LTguNTgxIDk0OC4zNTYgOTQ4LjM1NiAwIDAxLTQuMTYtNS45OTggMTM2LjAyNyAxMzYuMDI3IDAgMDAtMS41OTctMi4yOTNjLTEuOC0yLjUzMi0zLjQ2NS00LjkzLTMuNzM1LTUuMzgtLjIwOC0uMzQ1Ljk4LS40NCA1LjQ5NC0uNDRoNS43NmwxLjIyNSAyLjAyOGExMjkuNjQ0IDEyOS42NDQgMCAwMTEuNjE2IDIuNzM0Yy4yMTUuMzg4IDEuNjIgMi43NyAzLjEyIDUuMjkyIDEuNTAyIDIuNTIyIDMuMzEyIDUuNTc1IDQuMDIzIDYuNzg0LjcxIDEuMjEgMS4zNzUgMi4yMDIgMS40NzUgMi4yMDUuMTgxLjAwNiAxLjU5LTIuMjY4IDMuMjc0LTUuMjg1LjQ4Ny0uODczIDEuNzM1LTMuMDI0IDIuNzcyLTQuNzc5YTI3OC42NCAyNzguNjQgMCAwMDMuNDczLTYuMDc1bDEuNTg3LTIuODg0IDUuNTc0LS4wMWM0LjQ5Mi0uMDA4IDUuNTIuMDc5IDUuMjkyLjQ1LS4xNTUuMjUyLTQuMDc1IDYuMTI4LTguNzEgMTMuMDU3bC04LjQyOCAxMi41OTggMS45NzIgMi45MDZhOTMyLjAxMiA5MzIuMDEyIDAgMDA0Ljc5NCA2Ljk2MmMxLjU1MSAyLjIzMSAzLjkgNS42MjQgNS4yMiA3LjU0bDIuOTE4IDQuMjM0Yy4yODUuNDEyIDIuMDA3IDIuODggMy44MjcgNS40ODQgMS44MiAyLjYwNCAzLjM5IDQuOTQ2IDMuNDg4IDUuMjAzLjE0NS4zNzgtLjkwNy40Ny01LjQyMy40N2gtNS42MDRsLTcuNzg2LTEyLjI0MmMtNC4yODItNi43MzItNy45MjktMTIuMjg3LTguMTA0LTEyLjM0My0uMTc1LS4wNTYtMS4wMzMgMS4wMzMtMS45MDYgMi40MjFhMTkzLjAxOCAxOTMuMDE4IDAgMDEtMi43MzQgNC4yMjFjLS42My45MzQtMS4xNDYgMS43NjMtMS4xNDYgMS44NDIgMCAuMDgtLjYxMSAxLjA3Ni0xLjM1OCAyLjIxNGEzODMuNjgzIDM4My42ODMgMCAwMC0yLjcgNC4xODUgMjUxLjkwNSAyNTEuOTA1IDAgMDEtMi4yNDUgMy40OGMtLjk5NiAxLjUtMS4xNTcgMS43NjMtMi42OTMgNC4zOTdsLTEuMDU5IDEuODE0LTUuNTc3LjAwNWMtNC4zNjUuMDA0LTUuNTItLjA5LTUuMzItLjQzNnptMTc5LjI1NC0yNi4xMDVsLS4xNDEtMjYuNTQ3LS45MjctMi40MzhjLS45NTgtMi41MjItLjk1OC0zLjAzLjAwNS0zLjAzLjUzNSAwIDIuNTU4LS41NDQgNi4wNjMtMS42MyAxLjA5NC0uMzM5IDEuNjg2LS4zNzIgMi0uMTExLjY3Mi41NTggMS45MTMgNC45ODQgMS45MTMgNi44MjMgMCAuODkyLjA5NCAxLjYyMS4yMDkgMS42MjEuMTE0IDAgMS4wMjctLjY4NSAyLjAyOC0xLjUyMiA0LjY4OC0zLjkyIDguMDM4LTUuNzI2IDEyLjQ3My02LjcyNSAzLjE0LS43MDggNC45My0uNzE0IDcuODM1LS4wMyA2LjEzNSAxLjQ0NyAxMC4xNzcgNS4zMDMgMTEuNzIgMTEuMTg1LjYxMyAyLjMzMi42NiA0LjE4MS42NiAyNS43MzF2MjMuMjJIMzI5LjM3VjY1LjY5N2MwLTIzLjE0NC0uMTYtMjUuNzk2LTEuNjk4LTI4LjA0LTIuMDU4LTMuMDAzLTYuODE1LTMuODgtMTEuNzMtMi4xNjQtMy40NDYgMS4yMDQtNy4xOTQgMy4zNS05LjU5IDUuNDkybC0yLjAyOSAxLjgxM3Y0NC4wNEgyOTUuMnoiLz48L3N2Zz4=");
    background-repeat: no-repeat;
    background-position: left;
}

#csv-select-button {
    width: 150px;
    margin: 12px;
    margin-left: 0;
    padding: 8px;

    font-size: 14px;
}

#file-name-holder {
    font-size: 14px;
    color: slategray;
}

/*
 * Map styles
 */
#map {
    height: 640px;
    width: 1140px;
}

/* Any change to element size must be accounted for in JS createMarker() */
.signal-icon-container {
    box-sizing: border-box;

    width: 120px;
    height: 110px;
    min-height: 80px;
    margin: 0;
    padding-top: 8px;

    background-color: white;
    color: black;
    font-weight: bold;
    text-align: center;
    
    border: 1px solid cornflowerblue;
    border-bottom: 6px solid cornflowerblue;
    border-radius: 8px;

    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

/* Create a small arrow beneath element.
 * Any change to border dimentions must be accounted for in JS createMarker() */
.signal-icon-container:after {
    content:'';
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: 12px solid cornflowerblue;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
}

.signal-icon-container p {
    margin: 0;
    padding-bottom: 4px;
    font-size: 13px;
}

.signal-excellent {
    color: forestgreen;
}

.signal-good {
    color: springgreen;
}

.signal-average {
    color: orange;
}

.signal-poor {
    color: red;
}

.signal-date {
    color: slategray;
}