.container {
    position: relative;
}

main#map {
    position: relative;
    height: calc(100vh - 56px); /* - Height of navbar */
    width: 100vw;
    background-color: var(--surface-bg-muted);
}

#map_detail_template {
    width: 30vw;
    flex-direction: column;
    align-items: flex-start;
    overflow-y: auto;
}

#add_opportunity_template {
    width: 50vw;
    overflow-y: hidden;
}

#add_opportunity_template > h5 {
    margin-bottom: 1rem;
}

#map_detail_template, #add_opportunity_template {
    box-shadow: var(--shadow-panel);
}

#add_opportunity_form {
    display: grid;
    padding-top: 0.5rem;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    height: calc(100% - 1rem - 20px);
}

#add_opportunity_form .form-fields {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    overflow-x: visible;
    padding-top: 0.5rem;
    gap: 0.5rem;
}

#add_opportunity_form .preview {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
}

#add_opportunity_form .preview label {
    margin-bottom: 0.5rem;
}

div.preview {
    flex: 1;
    overflow-y: auto;
    height: 100%;
    box-sizing: border-box;
}

#add_opportunity_form #markdown_preview {
    flex: 1;
    padding: 0.5rem;
    box-sizing: border-box;
}

#add_opportunity_form .button-group {
    grid-column: 1 / -1;
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: auto;
    height: fit-content;
}

#add_opportunity_form > small {
    grid-column: 1 / -1;
    text-align: center;
}

@media (max-width: 1000px) {
    #map_detail_template, #add_opportunity_template {
        width: 100vw;
        max-width: 100vw; /* In case the user rotates their phone or uses a foldable device */
        bottom: 0;
        left: 0;
        top: auto;
        height: 50%;
        border-radius: 0;
        resize: vertical;
    }
}

#details.form-control {
    field-sizing: content;
    resize: none;
    min-height: 15rem;
}

#create_opportunity {
    font-family: var(--body-font-family);
    position: fixed;
    z-index: 401; 
    right: 1%;
    bottom: 2%;
    height: 48px;
    border-radius: var(--radius-pill); /* 24 + 16 */
    gap: 0.25rem;
    padding: 8px;
    box-shadow: var(--shadow-panel-strong);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-bg);
}

#create_opportunity:hover svg {
    animation: rotate 0.75s ease-in-out;
}

#date_pattern {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#recurrence_times_container {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    gap: 1rem;
}

#recurrence_times_container > .recurrence-time-group {
    display: flex;
    flex-direction: row;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 0.25rem;
}

#recurrence_times_container > .recurrence-time-group > .form-control {
    width: min-content;
}

input::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

.mapboxgl-ctrl-logo {
    filter: invert(1);
    opacity: 0.4;
}

.mapboxgl-control-container > .mapboxgl-ctrl-top-right > .mapboxgl-ctrl-attrib {
    background-color: var(--overlay-bg);
    color: var(--text);
}

div.mapboxgl-control-container > div.mapboxgl-ctrl-top-right > div.mapboxgl-ctrl-attrib > div.mapboxgl-ctrl-attrib-inner { /* God would you please make this easier to style Mapbox */
    background-color: transparent;
}

div.mapboxgl-control-container > div.mapboxgl-ctrl-top-right > div.mapboxgl-ctrl-attrib > div.mapboxgl-ctrl-attrib-inner > * {
    color: var(--text);
    font-size: 0.75rem;
}