:root {
    /* Colors. */
    --color-waterMint: #B9F5D2;
    --color-darkBlue: #263B58;
    --color-lighterGray: #f6f6f6;
    --color-lightGray: #ddd;
    --color-mediumGray: #3e4444;
    --color-darkGray: #323737;
    --color-darkerGray: #2a2e30;
    --color-light: white;
    --color-dark: black;
    --color-limeGreen: #b9f5d2;
    --color-brightCyan: #46ece6;
    --color-lightCyan: #d4fbf9;
    --color-red: #c60f13;
    --color-darkRed: #5b2a2a;

    --background-color: var(--color-light);
    --color-accent: var(--color-brightCyan);
    --text-color: var(--color-dark);

    /* Buttons. */
    --button-primary-background: var(--color-waterMint);
    --button-primary-color: var(--color-darkBlue);
    --button-neutral-background: var(--color-lightGray);
    --button-neutral-color: var(--color-darkGray);

    /* Sizes and spaces */
    --gutter: 8px;
    --panel-gutter: 10px;
    --panel-bottom: 40px;
    --panel-header-height: 36px;
    --panel-width: 400px;
    --header-height: 46px;
    --current-header-height: 0px;
    --footer-height: 32px;
    --current-footer-height: 0px;
    --control-size: 36px;
    --border-radius: 4px;
    --box-padding: 20px;
    --box-margin: 14px;
    --text-margin: 7px;

    /* z-indexes (leaflet CSS sets the map at 400 by default) */
    --zindex-alert: 500;
    --zindex-loader: 490;
    --zindex-toolbar: 480;
    --zindex-autocomplete: 470;
    --zindex-dialog: 460;
    --zindex-contextmenu: 455;
    --zindex-tooltip: 445;
    --zindex-panels: 440;
    --zindex-controls: 430;
    --zindex-dragover: 410;

    --block-shadow: 0 1px 7px var(--color-mediumGray);
}
.dark {
    --background-color: var(--color-darkGray);
    --text-color: #efefef;
}

@media only screen and (max-width:770px) {
    :root {
        --box-padding: 10px;
        --box-margin: 7px;
    }
}