:root {
  --narrow: 12px;
  --medium: 13px;
  --wide: 15px;
  --icon: 16px;
  --vicon: 2vw;
  --tricon: -1vw;
}

image {
  z-index: 5000;
}
polyline {
    stroke-linejoin: round;
}
.svgselected {
  fill: orange;
  stroke: rgba(255, 20, 145, 0.257);
  stroke-width: 10px;
}
.imgselected {
  height: 64px; 
  width: 64px;
}

.tp { /* text for textpath */
  fill: rgb(60, 58, 53);
  font: 2vw Arial;
  text-anchor: middle;
}

.sea {
  background-color: blue; /* For browsers that do not support gradients */
  background-image: radial-gradient(lightblue, blue, darkblue);
}
.soil {
  background-color: rgb(233, 181, 79);
  background-image: radial-gradient(NavajoWhite, BurlyWood, SandyBrown);
}

/*.g { height: var(--icon); width: var(--icon); cursor: context-menu; } */
.g { height: auto; width: var(--vicon); cursor: context-menu; transform: translate(var(--tricon), var(--tricon));}
.h { height: var(--icon); width: var(--icon); pointer-events: none; }
.i { fill: none; pointer-events: none; }
.j { fill: none; cursor: help; }
.k { pointer-events: none; }
.l { cursor: help; }
.m { fill: none; cursor: cell; }
.n { cursor: cell; }

.w2 { stroke-width: 2px; }
.w3 { stroke-width: 3px; }
.w4 { stroke-width: 4px; }
.w5 { stroke-width: 5px; }

.f1 { fill: red; }
.f2 { fill: grey; }
.f3 { fill: red; }
.f4 { fill: red; }
.f5 { fill: red; }
.f6 { fill: red; }
.f7 { fill: red; }
.f8 { fill: red; }
.s1 { stroke: red; }
.s2 { stroke: grey; }

.blk { fill: black; stroke: black; stroke-width: 3px;}
.bk { fill: none; stroke: black; stroke-width: 3px;}
.blu { fill: blue; stroke: blue; stroke-width: 1px;}
.bu { fill: none; stroke: blue; stroke-width: 1px;}
.bu3 { fill: none; stroke: blue; stroke-width: 20px;}
.cya { fill: cyan; stroke: blue; stroke-width: 1px;}
.cy { fill: none; stroke: cyan; stroke-width: 1px;}
.dgy { fill: darkgrey; stroke: rgb(80, 79, 79); stroke-width: 1px;}
.gry { fill: grey; stroke: grey; stroke-width: 1px;}
.gy { fill: none; stroke: grey; stroke-width: 1px;}
.gy3 { fill: none; stroke: grey; stroke-width: 3px;}
.gy9 { fill: none; stroke: grey; stroke-width: 9px;}
.red { fill: red; stroke: red; stroke-width: 1px;}
.rd { fill: none; stroke: red; stroke-width: 1px;}
.wht { fill: AntiqueWhite; stroke: AntiqueWhite; stroke-width: 1px;}
.wt { fill: none; stroke: AntiqueWhite; stroke-width: 1px;}
.pnk { fill: LightCoral; stroke: LightCoral; stroke-width: 1px;}
.pk { fill: none; stroke: LightCoral; stroke-width: 1px;}
.qnk { fill: LightPink; stroke: LightPink; stroke-width: 1px;}
.qk { fill: none; stroke: LightPink; stroke-width: 1px;}
.vio { fill: MediumVioletRed; stroke: MediumVioletRed; stroke-width: 1px;}
.oli { fill: Olive; stroke: olivedrab; stroke-width: 1px;}
.aqu { fill: MediumAquamarine; stroke: DarkCyan; stroke-width: 1px;}
.grn { fill: rgb(103, 188, 94); stroke: rgb(229, 177, 5); stroke-width: 1px;}
.gn { fill: none; stroke: darkgreen; stroke-width: 1px;}
.dgr { fill: darkgreen; stroke: darkseagreen; stroke-width: 1px;}
.bwn { fill: rgba(192, 106, 8, 0.997); stroke: rgb(238, 255, 0); stroke-width: 1px;}
.org { fill: rgba(240, 131, 6, 0.997); stroke: rgb(214, 245, 10); stroke-width: 1px;}
.pnk { fill: rgba(236, 21, 132, 0.997); stroke: rgb(234, 154, 214); stroke-width: 1px;}
.ylw { fill: rgba(218, 224, 110, 0.997); stroke: rgb(197, 234, 154); stroke-width: 1px;}
.gld { fill: gold; stroke: goldenrod; stroke-width: 1px;}
.ired { fill: indianred; stroke: indianred; stroke-width: 1px;}
.bc {fill: none; stroke: red; stroke-width:2px; stroke-dasharray: 2 2;}
.r1 { fill: none; stroke: grey; stroke-width: var(--narrow);}
.ht { fill: none; stroke: rgb(0, 204, 255); stroke-width: var(--medium);}
.ho { fill: none; stroke: rgb(72, 168, 192); stroke-width: var(--wide);}
.hp { fill: none; stroke: gold; stroke-width: var(--wide);}
.hr { fill: none; stroke: lemonchiffon; stroke-width: var(--narrow);}
.ha { fill: none; stroke: indigo; stroke-width: var(--narrow);}
.hv { fill: none; stroke: floralwhite; stroke-width: var(--narrow);}
.hn { fill: none; stroke: darkseagreen; stroke-width: var(--narrow);}
.he { fill: none; stroke: darkorange; stroke-width: var(--narrow); stroke-dasharray: 1 1;}
.hs { fill: none; stroke: red; stroke-width: var(--narrow);}
.hu {fill: none; stroke: deeppink; stroke-width: var(--narrow)}
.hb { fill: none; stroke: blueviolet; stroke-width: var(--narrow); stroke-dasharray: 4 1;}
.hc {fill: none; stroke: crimson; stroke-width : var(--narrow); stroke-dasharray: 4 2;}
.hk {fill: none; stroke: darkorange; stroke-width:var(--narrow); stroke-dasharray: 3 1;}
.hf {fill: none; stroke: rgb(244, 228, 9); stroke-width:var(--narrow); stroke-dasharray: 1 1;}
.nw {stroke: rgb(119, 214, 221); fill: rgba(21, 189, 201, 0.934);}
.ne {fill: mediumaquamarine; stroke: mediumaquamarine;}
.nb {fill: mediumaquamarine; stroke: yellow;}
.nv {fill: rgb(86, 102, 97); stroke: red;}
.nc {fill: rgba(111, 82, 42, 0.394); stroke: black;}

.me {fill: none; stroke: rgba(192, 106, 8, 0.997); stroke-width:2px; stroke-dasharray: 1 1;}
.ra {fill: none; stroke: darkgrey; stroke-width:2px; stroke-dasharray: 2 2;}
.rr {fill: none; stroke: darkgrey; stroke-width:2px; stroke-dasharray: 1 1;}
.ri {fill: none; stroke: grey; stroke-width:2px; stroke-dasharray: 1 1;}
.mg {fill: none; stroke: black; stroke-width:20px; stroke-dasharray: 3 3;}
.mp {fill: none; stroke: blue; stroke-width:2px; stroke-dasharray: 3 3;}
.ln {fill: rgba(144, 238, 144, 0.305); stroke: rgba(128, 128, 0, 0.953); stroke-width:8px; stroke-dasharray: 1 3;} /* bodge, as cant stop this feat.key from overwriting ways/nodes above it!!!! */
.bp {fill: none; stroke: rgba(105, 90, 205, 0.233); stroke-width:100px;}
.ba {fill: none; stroke: rgba(204, 124, 75, 0.233); stroke-width:100px;}