.map-controls-wrapper {
    z-index: 1000;
    position: absolute;
    right: 20px;
    bottom: 20px;
}

    .map-controls .toolbar {
        display: inline-block;
        background: rgba(18, 41, 63, 0.7);
        border-radius: 10px 0 0 10px;
        padding: 10px 30px 10px 10px;
        margin-bottom: 14px;
    }

    .map-controls .btn-group {
        float: right;
    }

        .map-controls .btn-group button {
            width: 32px;
            padding: 0;
        }

            .map-controls .btn-group button:focus {
                outline: none;
            }

        .map-controls .btn-group button + button {
            margin-left: -1px;
        }

    .map-controls .pan-wheel-wrapper {
        display: inline-block;
        width: 80px;
        height: 80px;
        margin-left: -15px;
        vertical-align: bottom;
        position: relative;
    }

    .map-controls .reset-btn {
        padding: 0 10px;
        margin: 0 40px 0 0;
    }

    .map-controls .icon {
        background: url("images/zoom-sprite.svg");
        display: inline-block;
        width: 18px;
        height: 18px;
        background-size: 36px 18px;
        margin-top: 4px;
    }

        .map-controls .icon.zoom-out {
            background-position: -18px 0;
        }

    .touch-areas,
    .touch-areas div {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .touch-areas div {
        height: 33%;
        bottom: auto;
        right: auto;
        cursor: pointer;
    }

    .touch-areas div.up,
    .touch-areas div.down {
        left: 25%;
        width: 50%;
    }

    .touch-areas div.down {
        top: 66%;
    }

    .touch-areas div.left,
    .touch-areas div.right {
        top: 33%;
        width: 50%;
    }

    .touch-areas div.right {
        left: 50%;
    }