/* CSS for example page. Do not manipulate map itself here, has no effect on prod. */
html, body {
    display: flex;
    flex-direction: column;
    margin: 0;
    height: 100%;
    font-family: sans-serif;

    .mock-body {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        height: 100%;

        .mock-content {
            padding: 1em;
            color: black;
            background: #E0E0E0;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            .content-mock {
                padding: 0.2em;
            }
        }

        /* Not part of MPAPI, but really nice if no background image is configured. */
        .map-background {
            background: #22222222;
            flex-grow: 1;

            #map-div-id {
                /* map container needs a defined height */
                height: 100%;
            }

            #controls {
                right: 15px;
                top: 160px;
                padding: 10px;
                text-align: right;
                position: absolute;
                z-index: 50;
                opacity: 0.9;
                background-color: transparent;

                input:first-child {
                    font-size: 17px;
                    margin-top: 4px;
                    padding: 6px 6px 6px 6px;
                    font-family: "MasterPortalFont Bold", "Arial Narrow", Arial, sans-serif;
                    color: #f3f3f3;
                    background-color: #E10019;
                    box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
                }
            }
        }
    }
}