/* tiles */
img.tile {
    position:absolute;
    transform-origin:0 0;
    -ms-transform-origin:0 0;
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -o-transform-origin:0 0;

    opacity: 0;

    -webkit-transition: opacity 200ms linear;
    transition: opacity 200ms linear;
    -moz-transition: opacity 200ms linear;
}

img.tile-loaded {
    opacity: 1;
}
img.tile-removing {
    opacity: 0;
}

/* base styles */
path {
    fill: none;
}

use {
    pointer-events: none;
}

g.point .shadow,
g.vertex .shadow,
g.midpoint .shadow {
    pointer-events: all;
}

path.shadow {
    pointer-events: stroke;
}

.shadow {
    -webkit-transition: 200ms;
       -moz-transition: 200ms;
            transition: 200ms;
}

/* points */

g.point .stroke {
    stroke: #444;
    stroke-width: 1;
    fill: #fff;
}

g.point .shadow {
    fill: none;
    stroke: #f6634f;
    stroke-width: 8;
    stroke-opacity: 0;
}

g.point.hover:not(.selected) .shadow {
    stroke-opacity: 0.5;
}

g.point.selected .shadow {
    stroke-opacity: 0.7;
}

g.point.active, g.point.active * {
    pointer-events: none;
}

/* vertices and midpoints */

g.vertex .fill {
    fill: #000;
}

g.vertex .stroke {
    stroke: #666;
    stroke-width: 1;
    fill: white;
}

g.vertex.shared .stroke {
    fill: #aaa;
}

g.midpoint .fill {
    fill: #eee;
    stroke: #444;
    stroke-opacity: .6;
    opacity: .7;
}

g.midpoint.tag-highway-pedestrian .fill,
g.midpoint.tag-highway-steps .fill,
g.midpoint.tag-highway-path .fill,
g.midpoint.tag-highway-footway .fill,
g.midpoint.tag-highway-cycleway .fill,
g.midpoint.tag-highway-bridleway .fill {
    fill: #fff;
    stroke: #333;
    stroke-opacity: .8;
    opacity: .8;
}

g.vertex .shadow,
g.midpoint .shadow {
    fill: #f6634f;
    fill-opacity: 0;
}

g.vertex.vertex-hover {
    display: none;
}

.mode-draw-area g.vertex.vertex-hover,
.mode-draw-line g.vertex.vertex-hover,
.mode-add-area  g.vertex.vertex-hover,
.mode-add-line  g.vertex.vertex-hover,
.mode-add-point g.vertex.vertex-hover,
.mode-drag-node g.vertex.vertex-hover {
    display: block;
}

g.vertex.hover:not(.selected) .shadow,
g.midpoint.hover:not(.selected) .shadow {
    fill-opacity: 0.3;
}

g.vertex.selected .shadow {
    fill-opacity: 0.5;
}

.mode-draw-area g.midpoint,
.mode-draw-line g.midpoint,
.mode-add-area g.midpoint,
.mode-add-line g.midpoint,
.mode-add-point g.midpoint {
  display: none;
}

/* lines */

path.line {
    stroke-linecap: round;
    stroke-linejoin: bevel;
}

path.stroke {
    stroke: black;
    stroke-width: 4;
}

path.shadow {
    stroke: #f6634f;
    stroke-width: 10;
    stroke-opacity: 0;
}

path.shadow.hover:not(.selected) {
    stroke-opacity: 0.3;
}

path.shadow.selected {
    stroke-opacity: 0.7;
}

path.line.stroke {
    stroke: white;
    stroke-width: 2;
}

path.area.stroke {
    stroke: white;
    stroke-width: 1;
}
path.area.fill {
    stroke-width: 0;
    stroke: rgba(255, 255, 255, 0.3);
    fill: rgba(255, 255, 255, 0.3);
    fill-rule: evenodd;
}
.preset-icon-fill-area {
    border: 1px solid rgb(170, 170, 170);
    background-color: rgba(170, 170, 170, 0.3);
}

path.stroke.tag-natural {
    stroke: rgb(182, 225, 153);
}
path.fill.tag-natural {
    stroke: rgba(182, 225, 153, 0.3);
    fill: rgba(182, 225, 153, 0.3);
}
.preset-icon-fill-area.tag-natural {
    border-color: rgb(182, 225, 153);
    background-color: rgba(182, 225, 153, 0.3);
}

path.stroke.tag-landuse,
path.stroke.tag-natural-wood,
path.stroke.tag-natural-tree,
path.stroke.tag-natural-grassland,
path.stroke.tag-natural-grass,
path.stroke.tag-leisure-nature_reserve,
path.stroke.tag-leisure-pitch,
path.stroke.tag-leisure-park {
    stroke: rgb(140, 208, 95);
}
path.fill.tag-landuse,
path.fill.tag-natural-wood,
path.fill.tag-natural-tree,
path.fill.tag-natural-grassland,
path.fill.tag-natural-grass,
path.fill.tag-leisure-nature_reserve,
path.fill.tag-leisure-pitch,
path.fill.tag-leisure-park {
    stroke: rgba(140, 208, 95, 0.3);
    fill: rgba(140, 208, 95, 0.3);
}
.preset-icon-fill-area.tag-landuse,
.preset-icon-fill-area.tag-natural-wood,
.preset-icon-fill-area.tag-natural-tree,
.preset-icon-fill-area.tag-natural-grassland,
.preset-icon-fill-area.tag-natural-grass,
.preset-icon-fill-area.tag-leisure-nature_reserve,
.preset-icon-fill-area.tag-leisure-pitch,
.preset-icon-fill-area.tag-leisure-park {
    border-color: rgb(140, 208, 95);
    background-color: rgba(140, 208, 95, 0.3);
}

path.stroke.tag-natural-water,
path.stroke.tag-landuse-basin,
path.stroke.tag-landuse-reservoir {
    stroke: rgb(119, 211, 222);
}
path.fill.tag-landuse-basin,
path.fill.tag-landuse-reservoir,
path.fill.tag-natural-water {
    stroke: rgba(119, 211, 222, 0.3);
    fill: rgba(119, 211, 222, 0.3);
}
.preset-icon-fill-area.tag-landuse-basin,
.preset-icon-fill-area.tag-landuse-reservoir,
.preset-icon-fill-area.tag-natural-water {
    border-color: rgb(119, 211, 222);
    background-color: rgba(119, 211, 222, 0.3);
}

path.stroke.tag-amenity-childcare,
path.stroke.tag-amenity-kindergarten,
path.stroke.tag-amenity-school,
path.stroke.tag-amenity-college,
path.stroke.tag-amenity-university {
    stroke: rgb(255, 255, 148);
}
path.fill.tag-amenity-childcare,
path.fill.tag-amenity-kindergarten,
path.fill.tag-amenity-school,
path.fill.tag-amenity-college,
path.fill.tag-amenity-university {
    stroke: rgba(255, 255, 148, 0.15);
    fill: rgba(255, 255, 148, 0.15);
}
.preset-icon-fill-area.tag-amenity-childcare,
.preset-icon-fill-area.tag-amenity-kindergarten,
.preset-icon-fill-area.tag-amenity-school,
.preset-icon-fill-area.tag-amenity-college,
.preset-icon-fill-area.tag-amenity-university {
    border-color: rgb(255, 255, 148);
    background-color: rgba(255, 255, 148, 0.15);
}

path.stroke.tag-landuse-residential {
    stroke: rgb(196, 189, 25);
}
path.fill.tag-landuse-residential {
    stroke: rgba(196, 189, 25, 0.3);
    fill: rgba(196, 189, 25, 0.3);
}
.preset-icon-fill-area.tag-landuse-residential {
    border-color: rgb(196, 189, 25);
    background: none;
    box-shadow: inset 0 0 0 5px rgba(196, 189, 25, 0.3);
}

path.stroke.tag-landuse-retail,
path.stroke.tag-landuse-commercial {
    stroke: rgb(214, 136, 26);
}
path.fill.tag-landuse-retail,
path.fill.tag-landuse-commercial {
    stroke: rgba(214, 136, 26, 0.3);
    fill: rgba(214, 136, 26, 0.3);
}
.preset-icon-fill-area.tag-landuse-retail,
.preset-icon-fill-area.tag-landuse-commercial {
    border-color: rgb(214, 136, 26);
    background: none;
    box-shadow: inset 0 0 0 5px rgba(214, 136, 26, 0.3);
}

path.stroke.tag-landuse-industrial {
    stroke: rgb(228, 164, 245);
}
path.fill.tag-landuse-industrial {
    stroke: rgba(228, 164, 245, 0.3);
    fill: rgba(228, 164, 245, 0.3);
}
.preset-icon-fill-area.tag-landuse-industrial {
    border-color: rgb(228, 164, 245);
    background: none;
    box-shadow: inset 0 0 0 5px rgba(228, 164, 245, 0.3);
}

path.stroke.tag-landuse-quarry {
    stroke: rgb(166, 149, 123);
}
path.fill.tag-landuse-quarry {
    stroke: rgba(166, 149, 123, 0.2);
    fill: rgba(166, 149, 123, 0.2);
}
.preset-icon-fill-area.tag-landuse-quarry {
    border-color: rgb(166, 149, 123);
    background-color: rgba(166, 149, 123, 0.2);
}

path.stroke.tag-landuse-landfill {
    stroke: rgb(255, 153, 51);
}
path.fill.tag-landuse-landfill {
    stroke: rgba(255, 153, 51, 0.2);
    fill: rgba(255, 153, 51, 0.2);
}
.preset-icon-fill-area.tag-landuse-landfill {
    border-color: rgb(255, 153, 51);
    background-color: rgba(255, 153, 51, 0.2);
}

.pattern-color-construction {
    fill: rgba(196, 189, 25, 0.2);
}
path.stroke.tag-landuse-construction {
    stroke: rgb(196, 189, 25);
}
.preset-icon-fill-area.tag-landuse-construction {
    border-color: rgb(196, 189, 25);
    background-color: rgba(196, 189, 25, 0.2);
}

path.stroke.tag-landuse-military {
    stroke: rgb(214, 136, 26);
}
path.fill.tag-landuse-military {
    stroke: rgba(214, 136, 26, 0.2);
    fill: rgba(214, 136, 26, 0.2);
}
.preset-icon-fill-area.tag-landuse-military {
    border-color: rgb(214, 136, 26);
    background-color: rgba(214, 136, 26, 0.2);
}

.pattern-color-wetland {
    fill: rgba(182, 225, 153, 0.2);
}
path.stroke.tag-natural-wetland {
    stroke: rgb(182, 225, 153);
}
.preset-icon-fill-area.tag-natural-wetland {
    border-color: rgb(182, 225, 153);
    background-color: rgba(182, 225, 153, 0.2);
}

.pattern-color-meadow {
    fill: rgba(182, 225, 153, 0.2);
}
path.stroke.tag-landuse-meadow {
    stroke: rgb(182, 225, 153);
}
.preset-icon-fill-area.tag-landuse-meadow {
    border-color: rgb(182, 225, 153);
    background-color: rgba(182, 225, 153, 0.2);
}

.pattern-color-beach {
    fill: rgba(255, 255, 126, 0.2);
}
path.stroke.tag-natural-beach {
    stroke: rgb(255, 255, 126);
}
.preset-icon-fill-area.tag-natural-beach {
    border-color: rgb(255, 255, 126);
    background-color: rgba(255, 255, 126, 0.2);
}

.pattern-color-scrub {
    fill: rgba(219, 240, 139, 0.2);
}
path.stroke.tag-natural-scrub {
    stroke: rgb(219, 240, 139);
}
.preset-icon-fill-area.tag-natural-scrub {
    border-color: rgb(219, 240, 139);
    background-color: rgba(219, 240, 139, 0.2);
}

.pattern-color-farm,
.pattern-color-farmland {
    fill: rgba(140, 208, 95, 0.2);
}
path.stroke.tag-landuse-farm,
path.stroke.tag-landuse-farmland {
    stroke: rgb(140, 208, 95);
}
.preset-icon-fill-area.tag-landuse-farm,
.preset-icon-fill-area.tag-landuse-farmland {
    background-color: rgba(140, 208, 95, 0.2);
}

.pattern-color-cemetery,
.pattern-color-orchard {
    fill: rgba(140, 208, 95, 0.2);
}
path.stroke.tag-landuse-cemetery,
path.stroke.tag-landuse-orchard {
    stroke: rgb(140, 208, 95);
}
.preset-icon-fill-area.tag-landuse-cemetery,
.preset-icon-fill-area.tag-landuse-orchard {
    background-color: rgba(140, 208, 95, 0.2);
}

path.stroke.tag-amenity-parking {
    stroke: rgb(170, 170, 170);
}
path.fill.tag-amenity-parking {
    stroke: rgba(170, 170, 170, 0.3);
    fill: rgba(170, 170, 170, 0.3);
}
.preset-icon-fill-area.tag-amenity-parking {
    border-color: rgb(170, 170, 170);
    background-color: rgba(170, 170, 170, 0.3);
}

path.fill.tag-place,
path.fill.tag-boundary {
    fill: none;
}

/* highways */

path.shadow.tag-highway {
    stroke-width:16;
}
path.casing.tag-highway {
    stroke:#444;
    stroke-width:10;
}
path.stroke.tag-highway {
    stroke:#ccc;
    stroke-width:8;
}

.low-zoom path.shadow.tag-highway {
    stroke-width:12;
}
.low-zoom path.casing.tag-highway {
    stroke-width:6;
}
.low-zoom path.stroke.tag-highway {
    stroke-width:4;
}

path.stroke.tag-highway-motorway,
path.stroke.tag-highway-motorway_link,
path.stroke.tag-construction-motorway {
    stroke:#58a9ed;
}

path.casing.tag-highway-motorway,
path.casing.tag-highway-motorway_link,
path.casing.tag-construction-motorway {
    stroke:#2c5476;
}

path.stroke.tag-highway-trunk,
path.stroke.tag-highway-trunk_link,
path.stroke.tag-construction-trunk {
    stroke:#8cd05f;
}
path.casing.tag-highway-trunk,
path.casing.tag-highway-trunk_link,
path.casing.tag-construction-trunk {
    stroke:#46682f;
}

path.stroke.tag-highway-primary,
path.stroke.tag-highway-primary_link,
path.stroke.tag-construction-primary {
    stroke:#e06d5f;
}
path.casing.tag-highway-primary,
path.casing.tag-highway-primary_link,
path.casing.tag-construction-primary {
    stroke:#70372f;
}

path.stroke.tag-highway-secondary,
path.stroke.tag-highway-secondary_link,
path.stroke.tag-construction-secondary {
    stroke:#eab056;
}
path.casing.tag-highway-secondary,
path.casing.tag-highway-secondary_link,
path.casing.tag-construction-secondary {
    stroke:#75582b;
}

path.stroke.tag-highway-tertiary,
path.stroke.tag-highway-tertiary_link,
path.stroke.tag-construction-tertiary {
    stroke:#ffff7e;
}
path.casing.tag-highway-tertiary,
path.casing.tag-highway-tertiary_link,
path.casing.tag-construction-tertiary {
    stroke:#7f7f3f;
}

path.stroke.tag-highway-unclassified,
path.stroke.tag-construction-unclassified {
    stroke:#eaeaea;
}
path.casing.tag-highway-unclassified,
path.casing.tag-construction-unclassified {
    stroke:#444;
}

path.stroke.tag-highway-residential,
path.stroke.tag-construction-residential {
    stroke:#fff;
}
path.casing.tag-highway-residential,
path.casing.tag-construction-residential {
    stroke:#444;
}

path.stroke.tag-highway-living_street {
    stroke:#ccc;
    stroke-width:4;
}
path.casing.tag-highway-living_street {
    stroke:#fff;
    stroke-width:6;
}

path.stroke.tag-highway-pedestrian {
    stroke:#fff;
    stroke-dasharray: 2, 8;
    stroke-width:4;
}
path.casing.tag-highway-pedestrian {
    stroke:#8cd05f;
    stroke-width:6;
}
path.stroke.area.tag-highway-pedestrian {
    stroke:#fff;
    stroke-dasharray: none;
    stroke-width: 2;
}

path.stroke.tag-highway-service {
    stroke:#fff;
    stroke-width:4;
}
path.casing.tag-highway-service {
    stroke:#666;
    stroke-width:6;
}
.low-zoom path.stroke.tag-highway-service {
    stroke-width:2;
}
.low-zoom path.casing.tag-highway-service {
    stroke-width:4;
}

path.stroke.tag-highway-track {
    stroke: #fff;
    stroke-width: 4;
}
path.casing.tag-highway-track {
    stroke: #996600;
    stroke-width: 6;
    stroke-linecap: butt;
    stroke-dasharray: 6, 6;
}
.low-zoom path.stroke.tag-highway-track {
    stroke-width:2;
}
.low-zoom path.casing.tag-highway-track {
    stroke-width:4;
}

path.stroke.tag-highway-path {
    stroke: #000;
    stroke-width: 1 !important;
    stroke-linecap: butt;
    stroke-dasharray: 8, 4;
}
path.casing.tag-highway-path {
    stroke-width: 1 !important;
    stroke: #fff;
}

path.stroke.tag-highway-footway,
path.stroke.tag-highway-cycleway,
path.stroke.tag-highway-bridleway {
    stroke-width: 4;
    stroke-linecap: butt;
    stroke-dasharray: 6, 6;
}
path.casing.tag-highway-footway,
path.casing.tag-highway-cycleway,
path.casing.tag-highway-bridleway {
    stroke-width: 6;
    stroke: #fff;
}

.low-zoom path.stroke.tag-highway-footway,
.low-zoom path.stroke.tag-highway-cycleway,
.low-zoom path.stroke.tag-highway-bridleway {
    stroke-width: 2;
}
.low-zoom path.casing.tag-highway-footway,
.low-zoom path.casing.tag-highway-cycleway,
.low-zoom path.casing.tag-highway-bridleway {
    stroke-width: 4;
}

path.stroke.tag-highway-footway {
    stroke: #ae8681;
}
path.stroke.tag-highway-cycleway {
    stroke: #58a9ed;
}
path.stroke.tag-highway-bridleway {
    stroke: #e06d5f;
}

path.stroke.tag-highway-steps {
    stroke: #81d25c;
    stroke-width: 4;
    stroke-linecap: butt;
    stroke-dasharray: 3, 3;
}
path.casing.tag-highway-steps {
    stroke-width: 6;
    stroke: #fff;
}

/* aeroways */

path.stroke.tag-aeroway-taxiway {
    stroke: #805C80;
    stroke-width: 4;
}
path.shadow.tag-aeroway-runway {
    stroke-width: 20;
}
path.stroke.tag-aeroway-runway {
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: butt;
    stroke-dasharray: 24, 48;
}
path.casing.tag-aeroway-runway {
    stroke-width: 10;
    stroke: #000;
    stroke-linecap: square;
}
path.fill.tag-aeroway-runway {
    stroke: rgba(0, 0, 0, 0.6);
    fill: rgba(0, 0, 0, 0.6);
}
path.stroke.tag-aeroway-apron {
    stroke: #805C80;
}
path.fill.tag-aeroway-apron {
    stroke: rgba(128, 92, 128, 0.2);
    fill: rgba(128, 92, 128, 0.2);
}


/* railways */

path.stroke.tag-railway {
    stroke: #eee;
    stroke-width: 2;
    stroke-linecap: butt;
    stroke-dasharray: 12,12;
}

path.casing.tag-railway {
    stroke: #555;
    stroke-width: 4;
}

path.stroke.tag-railway-abandoned {
    stroke: #eee;
}
path.casing.tag-railway-abandoned {
    stroke: #999;
}

path.stroke.tag-railway-subway {
    stroke: #666;
}
path.casing.tag-railway-subway {
    stroke: #222;
}

path.stroke.tag-railway-platform {
    stroke: #999;
    stroke-width: 4;
    stroke-dasharray: none;
}
path.casing.tag-railway-platform {
    stroke: none;
}

.area.stroke.tag-railway {
    stroke: white;
    stroke-width: 1;
    stroke-dasharray: none;
}
.area.casing.tag-railway {
    stroke: none;
}

/* waterways */

path.fill.tag-waterway {
    stroke: rgba(119, 211, 222, 0.3);
    fill: rgba(119, 211, 222, 0.3);
}

path.stroke.tag-waterway {
    stroke: #77d3de;
    stroke-width: 2;
}
path.casing.tag-waterway {
    stroke: #77d3de;
    stroke-width: 4;
}

path.stroke.tag-waterway-river {
    stroke-width: 4;
}
path.casing.tag-waterway-river {
    stroke-width: 6;
}

path.stroke.tag-waterway-ditch {
    stroke: #6591ff;
    stroke-width: 1;
}
path.casing.tag-waterway-ditch {
    stroke: #6591ff;
    stroke-width: 3;
}

/* power */

path.stroke.tag-power {
    stroke: #939393;
    stroke-width: 2;
}
path.casing.tag-power {
    stroke: none;
}

/* boundary */

path.stroke.tag-boundary {
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: butt;
    stroke-dasharray: 20, 5, 5, 5;
}
path.casing.tag-boundary {
    stroke: #82B5FE;
    stroke-width: 6;
}

path.casing.tag-boundary-protected_area,
path.casing.tag-boundary-national_park {
    stroke: #b0e298;
}

/* barriers */

path.stroke.tag-barrier {
    stroke: #ddd;
    stroke-width: 3px;
    stroke-linecap: round;
    stroke-dasharray: 15, 5, 1, 5;
}
.low-zoom path.stroke.tag-barrier {
    stroke-width: 2px;
    stroke-linecap: butt;
    stroke-dasharray: 8, 2, 2, 2;
}

/* bridges */

path.casing.tag-bridge {
    stroke-width: 16;
    stroke-opacity: 0.6;
    stroke: #000;
    stroke-linecap: butt;
}

path.shadow.tag-bridge {
    stroke-width: 22;
}

path.casing.line.tag-railway.tag-bridge,
path.casing.tag-highway-living_street.tag-bridge,
path.casing.tag-highway-path.tag-bridge,
path.casing.line.tag-highway-pedestrian.tag-bridge,
path.casing.tag-highway-service.tag-bridge,
path.casing.tag-highway-track.tag-bridge,
path.casing.tag-highway-steps.tag-bridge,
path.casing.tag-highway-footway.tag-bridge,
path.casing.tag-highway-cycleway.tag-bridge,
path.casing.tag-highway-bridleway.tag-bridge {
    stroke-width: 10;
}

path.shadow.line.tag-railway.tag-bridge,
path.shadow.tag-highway-living_street.tag-bridge,
path.shadow.tag-highway-path.tag-bridge,
path.shadow.line.tag-highway-pedestrian.tag-bridge,
path.shadow.tag-highway-service.tag-bridge,
path.shadow.tag-highway-track.tag-bridge,
path.shadow.tag-highway-steps.tag-bridge,
path.shadow.tag-highway-footway.tag-bridge,
path.shadow.tag-highway-cycleway.tag-bridge,
path.shadow.tag-highway-bridleway.tag-bridge {
    stroke-width: 17;
}


.low-zoom path.casing.tag-bridge {
    stroke-width: 10;
    stroke-opacity: 0.6;
    stroke: #000;
    stroke-linecap: butt;
}

.low-zoom path.shadow.tag-bridge {
    stroke-width: 14;
}

.low-zoom path.casing.line.tag-railway.tag-bridge,
.low-zoom path.casing.tag-highway-living_street.tag-bridge,
.low-zoom path.casing.tag-highway-path.tag-bridge,
.low-zoom path.casing.line.tag-highway-pedestrian.tag-bridge,
.low-zoom path.casing.tag-highway-service.tag-bridge,
.low-zoom path.casing.tag-highway-track.tag-bridge,
.low-zoom path.casing.tag-highway-steps.tag-bridge,
.low-zoom path.casing.tag-highway-footway.tag-bridge,
.low-zoom path.casing.tag-highway-cycleway.tag-bridge,
.low-zoom path.casing.tag-highway-bridleway.tag-bridge {
    stroke-width: 6;
}

.low-zoom path.shadow.line.tag-railway.tag-bridge,
.low-zoom path.shadow.tag-highway-living_street.tag-bridge,
.low-zoom path.shadow.tag-highway-path.tag-bridge,
.low-zoom path.shadow.line.tag-highway-pedestrian.tag-bridge,
.low-zoom path.shadow.tag-highway-service.tag-bridge,
.low-zoom path.shadow.tag-highway-track.tag-bridge,
.low-zoom path.shadow.tag-highway-steps.tag-bridge,
.low-zoom path.shadow.tag-highway-footway.tag-bridge,
.low-zoom path.shadow.tag-highway-cycleway.tag-bridge,
.low-zoom path.shadow.tag-highway-bridleway.tag-bridge {
    stroke-width: 13;
}

/* tunnels */

path.stroke.tag-tunnel {
    stroke-opacity: 0.3;
}

path.casing.tag-tunnel {
    stroke-opacity: 0.5;
}

/* embankments / cuttings */

path.casing.tag-embankment,
path.casing.tag-cutting {
    stroke-opacity: 0.5;
    stroke: #000;
    stroke-width: 22;
    stroke-dasharray: 2, 4;
    stroke-linecap: butt;
}

path.shadow.tag-embankment,
path.shadow.tag-cutting {
    stroke-width: 28;
}

.low-zoom path.casing.tag-embankment,
.low-zoom path.casing.tag-cutting {
    stroke-width: 10;
}

.low-zoom path.shadow.tag-embankment,
.low-zoom path.shadow.tag-cutting {
    stroke-width: 14;
}


/* construction */

path.stroke.tag-highway-construction,
path.casing.tag-highway-construction {
    stroke-linecap: butt;
    stroke-dasharray: 7, 7;
}

.low-zoom path.stroke.tag-highway-construction,
.low-zoom path.casing.tag-highway-construction {
    stroke-linecap: butt;
    stroke-dasharray: 5, 5;
}

text {
    font-size:10px;
    pointer-events: none;
    color: #222;
    opacity: 1;
}

.oneway .textpath.tag-waterway {
    fill: #002F35;
}

marker#oneway-marker path {
    fill:#000;
    opacity: .5;
}

path.oneway {
    stroke-width: 6px;
}

/* Buildings */

path.stroke.tag-building,
path.stroke.tag-amenity-shelter {
    stroke: rgb(224, 110, 95);
}
path.fill.tag-building,
path.fill.tag-amenity-shelter {
    stroke: rgba(224, 110, 95, 0.3);
    fill: rgba(224, 110, 95, 0.3);
}
.preset-icon-fill-area.tag-building,
.preset-icon-fill-area.tag-amenity-shelter {
    border-color: rgb(224, 110, 95);
    background-color: rgba(224, 110, 95, 0.3);
}


/*
 * Labels
 */

text.arealabel-halo,
text.linelabel-halo,
text.pointlabel-halo,
text.arealabel,
text.linelabel,
text.pointlabel {
    font-size: 12px;
    font-weight: bold;
    fill: #333;
    text-anchor: middle;
    pointer-events: none;
    -webkit-transition: opacity 100ms linear;
    transition: opacity 100ms linear;
    -moz-transition: opacity 100ms linear;
}

.linelabel-halo .textpath,
.linelabel .textpath {
  dominant-baseline: middle;
}

/* Opera doesn't support dominant-baseline. See #715 */
.opera .linelabel-halo .textpath,
.opera .linelabel .textpath {
  baseline-shift: -33%;
  dominant-baseline: auto;
}

.layer-halo text {
    opacity: 0.7;
    stroke: #fff;
    stroke-width: 5px;
    stroke-miterlimit: 1;
}

text.proximate {
    opacity: 0;
}

text.point {
  font-size: 10px;
}

/* Turns */

g.turn rect,
g.turn circle {
    fill: none;
    pointer-events: all;
}

.form-field-restrictions .vertex {
    pointer-events: none;
    cursor: auto !important;
}

/* Cursors */

.map-in-map,
#map {
    cursor: auto; /* Opera */
    cursor: url(img/cursor-grab.png) 9 9, auto; /* FF */
}

.mode-browse .point,
.mode-select .point {
    cursor: pointer; /* Opera */
    cursor: url(img/cursor-select-point.png), pointer; /* FF */
}

.mode-select .vertex,
.mode-browse .vertex {
    cursor: pointer; /* Opera */
    cursor: url(img/cursor-select-vertex.png), pointer; /* FF */
}

.mode-browse .line,
.mode-select .line {
    cursor: pointer; /* Opera */
    cursor: url(img/cursor-select-line.png), pointer; /* FF */
}

.mode-select .area,
.mode-browse .area {
    cursor: pointer; /* Opera */
    cursor: url(img/cursor-select-area.png), pointer; /* FF */
}

.mode-select .midpoint,
.mode-browse .midpoint {
    cursor: pointer; /* Opera */
    cursor: url(img/cursor-select-split.png), pointer; /* FF */
}

.mode-select .behavior-multiselect .point,
.mode-select .behavior-multiselect .vertex,
.mode-select .behavior-multiselect .line,
.mode-select .behavior-multiselect .area {
    cursor: pointer; /* Opera */
    cursor: url(img/cursor-select-add.png), pointer; /* FF */
}

.mode-select .behavior-multiselect .selected {
    cursor: pointer; /* Opera */
    cursor: url(img/cursor-select-remove.png), pointer; /* FF */
}

#map .point:active,
#map .vertex:active,
#map .line:active,
#map .area:active,
#map .midpoint:active,
#map .mode-select .selected {
    cursor: pointer; /* Opera */
    cursor: url(img/cursor-select-acting.png), pointer; /* FF */
}

.mode-draw-line #map,
.mode-draw-area #map,
.mode-add-line  #map,
.mode-add-area  #map,
.mode-drag-node #map {
    cursor: crosshair; /* Opera */
    cursor: url(img/cursor-draw.png) 9 9, crosshair; /* FF */
}

.mode-draw-line .way.hover,
.mode-draw-area .way.hover,
.mode-add-line  .way.hover,
.mode-add-area  .way.hover,
.mode-drag-node .way.hover {
    cursor: crosshair; /* Opera */
    cursor: url(img/cursor-draw-connect-line.png) 9 9, crosshair; /* FF */
}

.mode-draw-line .vertex.hover,
.mode-draw-area .vertex.hover,
.mode-add-line  .vertex.hover,
.mode-add-area  .vertex.hover,
.mode-drag-node .vertex.hover {
    cursor: crosshair; /* Opera */
    cursor: url(img/cursor-draw-connect-vertex.png) 9 9, crosshair; /* FF */
}

.mode-add-point #map,
.mode-browse.lasso #map,
.mode-browse.lasso .way,
.mode-browse.lasso .vertex,
.mode-browse.lasso .midpoint,
.mode-select.lasso #map,
.mode-select.lasso .way,
.mode-select.lasso .vertex,
.mode-select.lasso .midpoint {
    cursor: crosshair; /* Opera */
    cursor: url(img/cursor-draw.png) 9 9, crosshair; /* FF */
}

.turn rect,
.turn circle {
    cursor: pointer; /* Opera */
    cursor: url(img/cursor-pointer.png) 6 1, pointer; /* FF */
}

.lasso #map {
    pointer-events: visibleStroke;
}

/* GPX Paths */
div.layer-gpx {
    pointer-events: none;
}

path.gpx {
    stroke: #FF26D4;
    stroke-width: 2;
    fill: none;
}

text.gpx {
    fill: #FF26D4;
}

/* Mapillary Layer */

.layer-mapillary {
    pointer-events: none;
}

.layer-mapillary g {
    pointer-events: visible;
    cursor: pointer; /* Opera */
    cursor: url(img/cursor-select-mapillary.png) 6 1, pointer; /* FF */
}

.layer-mapillary g * {
    stroke-width: 1;
    stroke: #444;
    fill: #ffc600;
}

.layer-mapillary g:hover * {
    stroke-width: 1;
    stroke: #333;
    fill: #ff9900;
}

.layer-mapillary g.selected  * {
    stroke-width: 2;
    stroke: #222;
    fill: #ff5800;
}

.layer-mapillary g:hover path.viewfield,
.layer-mapillary g.selected path.viewfield,
.layer-mapillary g path.viewfield {
    stroke-width: 0;
    fill-opacity: 0.6;
}

/* Modes */

.mode-draw-line .vertex.active,
.mode-draw-area .vertex.active,
.mode-drag-node .vertex.active {
    display: none;
}

.mode-draw-line .way.active,
.mode-draw-area .way.active,
.mode-drag-node .active {
    pointer-events: none;
}

/* Ensure drawing doesn't interact with area fills. */
.mode-add-point .area.fill,
.mode-draw-line .area.fill,
.mode-draw-area .area.fill,
.mode-add-line .area.fill,
.mode-add-area .area.fill,
.mode-drag-node .area.fill {
    pointer-events: none;
}


/* Fill Styles */
.low-zoom.fill-wireframe path.stroke,
.fill-wireframe path.stroke {
    stroke-width: 1;
    stroke-opacity: 0.5;
    stroke-dasharray: none;
    fill: none;
}

.low-zoom.fill-wireframe path.shadow,
.fill-wireframe path.shadow {
    stroke-width: 8;
}

.fill-wireframe path.shadow.hover:not(.selected) {
    stroke-opacity: 0.2;
}
.fill-wireframe path.shadow.selected {
    stroke-opacity: 0.4;
}

.fill-wireframe .point,
.fill-wireframe .icon,
.fill-wireframe path.casing,
.fill-wireframe path.fill,
.fill-wireframe path.oneway {
    display: none;
}

.fill-partial path.fill {
    fill-opacity: 0;
    stroke-width: 60px;
    pointer-events: visibleStroke;
}
