:root {
    /* Colors. */
    --color-waterMint: #B9F5D2;
    --color-darkBlue: #32131b;
    --color-lighterGray: #9c9fa1;
    --color-lightGray: #6f7070;
    --color-mediumGray: #464646;
    --color-darkGray: #020202;
    --color-darkerGray: #020202;
    --color-light: white;
    --color-dark: black;
    --color-limeGreen: #d1c62d;
    --color-brightCyan: #36abc0;
    --color-lightCyan: #a8d5d6;
    --color-red: #e74754;
    --color-darkRed: #b20922;
    --color-footer: #565759;

    --background-color: var(--color-light);
    --color-accent: var(--color-darkRed);
    --text-color: var(--color-darkerGray);

    /* Buttons. */
    --button-primary-background: var(--color-limeGreen);
    --button-primary-color: var(--color-light);
    --button-neutral-background: var(--color-lightGray);
    --button-neutral-color: var(--color-light);

    /* 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;
    }
}