@charset "utf-8";

/* CSS Document */

.rect2 {
  fill: blue;
  stroke: pink;
  stroke-width: 5;
  fill-opacity: 0.1;
  stroke-opacity: 0.9;
}
.rect2b {
  x: 150;
  y: 100;
  width: 100px;
  height: 200px;
  rx: 100%;
  ry: 10%
}
.sqSVG {
  width: 400px;
  height: 400px;
  border: 1px solid black;
}
.sqSVG.mapAPI {  
    width: 400px;
  min-height: 400px;
    height: 100%;
  border: 1px solid black;
}
.rect3 {
  x: 50;
  y: 50;
  width: 150px;
  height: 150px;
}
.rect3b {
  fill: blue;
  stroke: pink;
  stroke-width: 5;
  opacity: 0.5;
}
.rect4 {
  x: 100;
  y: 100;
  width: 200px;
  height: 200px;
  stroke: black;
  stroke-width: 10px;
  stroke-opacity: .8;
  fill: yellow;
  fill-opacity: .1;
  rx: 50;
  ry: 80;
}
.rectA {
	x: 150;
	y: 125;
	width: 100px;
	height: 125px;
	fill: green;	
}
.rectCenter {
	x: 100;
	y: 100;
	width: 200px;
	height: 200px;
	fill: blue;
}
.cir {
  cx: 200;
  cy: 200;
  r: 150;
  stroke: black;
  stroke-width: 5px;
  fill: red;
}
.cir2 {
  cx: 200;
  cy: 200;
  r: 50;
  stroke: black;
  stroke-width: 5px;
  fill: white;
}
.centerCir {
  cx: 50%;
  cy: 50%;
}
.ellipse {
  cy: 25%;
  cx: 50%;
  rx: 50;
  ry: 120px;
  fill: lime;
}
.line1 {
  stroke: red;
  stroke-width: 10px;
}
.poly {
	fill: green;
	stroke: black;
	stroke-width: 3px;
}
.poly2	{
	fill: gray;
	stroke: blue;
	stroke-width: 5px;
	fill-rule: nonzero;
}
.path {
	stroke: black;
	stroke-width: 5px;
	fill: none;
}
.path2 {
	stroke: black;
	stroke-width: 5px;
	fill: none;
}
.redDot {
	r: 3;
	fill: red;
}
.blackDot {
	r: 3;
	fill: black;
}
.orangeDot {
	r: 3;
	fill: orange;
}
.radial {
	stroke: url(#grad1);
	stroke-width: 5;
}