/* needed for map having 100% height and width*/
html, body, #main-content-container, #map {
    width: 100%;
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

.station-polygon.selectable:hover {
    stroke: black;
    stroke-width: 1px;
}

.station-blob {
    pointer-events: none;
}

.route-line {
    stroke: rgba(0, 0, 0, 1);
    fill: none;
    pointer-events: none;
}

.selected-route-line {
    stroke-width: 5px;
    stroke-dasharray: 3;
}

@keyframes dash {
    from {
        stroke-dashoffset: 10000px;
    }
}

.split-ticket-tree {
    stroke-linecap: round;
}

#sidebar {
    width: 400px;
    padding: 20px;
    overflow: auto; /* scroll bar shows if too much content */
}

#map {
    flex: 1;
}

#map .selectable {
    cursor: pointer;
    pointer-events: all;
}

.leaflet-pane {
    pointer-events: none; /* otherwise mouseover is very very very slow on firefox >:( */
}

.leaflet-overlay-pane path {
    cursor: inherit; /* otherwise it will always show pointer cursor, not grabby */
}

.fare-card-header {
    overflow: hidden
}

.navbar-button-group {
    margin-right: 10px;
}

.split-ticket-modal-dialog {
    max-width: 1000px;
}

/*increases clickable area of button*/
.station-deselect-button {
    padding: 1em;
    margin: -1em;
}

#color-key {
    background: linear-gradient(to right, hsla(0,100%,50%,1), hsla(90,100%,50%,1), hsla(180,100%,50%,1), hsla(270,100%,50%,1), hsla(360,100%,50%,1));
    border: 2px solid white;
    border-radius: .2rem;
    cursor: crosshair;
    width: 10%;
    height: 2em;
}