html,body{
	height: 100%;
}
body{
	padding: 0;
	margin: 0;
}
.unselectable{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/*

LOADING WINDOW

*/
.windowLoading{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	z-index: 9999;
	transition: all 0.5s linear;
	opacity: 1;
}
.windowLoading.complete{
	opacity: 0;
}
.loadingContainer{
	position: absolute;
	top: 40%;
	width: 100%;
}
.loadingContainer .li{
	color: white;
	margin: 5px 10%;
	text-align: center;
}

/*

MAP CONTAINER

*/

.mapContainer{
	width: 100%;
	height: 100%;
	position: relative;
	top:0;
	left:0;
	overflow: hidden;
}
.mapLayerSwitcher{
	position: absolute;
	width: 55px;
	height: 12px;
	background: rgba(255,255,255,1);
	padding: 10px 5px;
	overflow: hidden;
	font-size: 12px;
	text-align: center;
	border-radius: 5px;
	cursor: pointer;
	border: 1px solid black;
	transition: all 0.25s linear;
	background: linear-gradient(to right, rgba(255,255,255,1), rgba(0,255,0,1));
}
.mapLayerSwitcher.off{
	background: rgba(200,200,200,1);
	color: rgba(0,0,0,0.25);
	background: linear-gradient(to right, rgba(255,0,0,1), rgba(255,255,255,1));
}

.containerCanvas{
	overflow: hidden;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

canvas{
	margin: auto;
	display: block;
}

.containerSVG{
	overflow: hidden;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
svg{
	margin:auto;
	display:block;
}
svg .groupMain{
	opacity: 1;
}
svg .groupMain.EditMode{
	opacity: 0.5;
}

/*
SVG ROAD
*/
svg .road{
	fill: none;
	stroke: rgba(120,120,120,1);
	stroke-width: 2;
}
svg.Zoom_14 .road{stroke-width: 10;}
svg.Zoom_15 .road{stroke-width: 7;}
svg.Zoom_16 .road{stroke-width: 5;}
svg.Zoom_17 .road{stroke-width: 4;}
svg.Zoom_18 .road{stroke-width: 4;}
svg.Zoom_19 .road{stroke-width: 3;}
svg.Zoom_20 .road{stroke-width: 2;}
svg.Zoom_21 .road{stroke-width: 1;}

/*
SVG BUILD
*/
svg .build{
	fill: rgba(160,160,160,0.5);
	stroke: rgb(100,100,100);
	stroke-width: 1;
}
svg .build.select{
	fill: rgba(120,120,120,1);
	stroke: rgba(255,155,0,1);
	stroke-width: 3;
}
svg .build:hover{
	fill: rgba(120,120,120,0.75);
	stroke: rgba(100,100,0,1);
}

/*
SVG RAILWAY
*/
svg .railway{
	fill:none;
	stroke:rgb(175,0,0);
	stroke-width:2;
}
/*svg .railway{
	fill:none;
	stroke:#000000;
	stroke-width:4;
	stroke-linejoin:miter;
	stroke-dasharray:none;
	stroke-opacity:1;
}
svg .railway2{
	fill:none;
	stroke:#ffffff;
	stroke-width:3;
	stroke-linejoin:miter;
	stroke-dasharray:8, 8;
	stroke-opacity:1;
}*/
svg.Zoom_14 .railway{stroke-width: 12;}
svg.Zoom_15 .railway{stroke-width: 8;}
svg.Zoom_16 .railway{stroke-width: 6;}
svg.Zoom_17 .railway{stroke-width: 5;}
svg.Zoom_18 .railway{stroke-width: 4;}
svg.Zoom_19 .railway{stroke-width: 3;}
svg.Zoom_20 .railway{stroke-width: 3;}
svg.Zoom_21 .railway{stroke-width: 2;}

/*
SVG HYDRO
*/
svg .hydro{
	fill: none;
	stroke: rgba(0,0,255,1);
	stroke-width: 1;
}
svg.Zoom_14 .hydro{stroke-width: 12;}
svg.Zoom_15 .hydro{stroke-width: 8;}
svg.Zoom_16 .hydro{stroke-width: 6;}
svg.Zoom_17 .hydro{stroke-width: 5;}
svg.Zoom_18 .hydro{stroke-width: 4;}
svg.Zoom_19 .hydro{stroke-width: 3;}
svg.Zoom_20 .hydro{stroke-width: 3;}
svg.Zoom_21 .hydro{stroke-width: 2;}

/*
SVG WIRE
*/
svg .wire{
	cursor: pointer;
	fill: none;
	stroke: rgb(180,0,0);
	stroke-width: 2;
}
svg .EditMode .wire{
	cursor: default;
}
svg .wire path[data-subtype="0.4kV"]{
	stroke: rgb(0,220,0);
}
svg .wire path[data-subtype="6kV"]{
	stroke: rgb(190,0,0);
}
svg .wire path[data-subtype="10kV"]{
	stroke: rgb(220,0,0);
}
svg.Zoom_14 .wire{stroke-width: 12;}
svg.Zoom_15 .wire{stroke-width: 8;}
svg.Zoom_16 .wire{stroke-width: 6;}
svg.Zoom_17 .wire{stroke-width: 5;}
svg.Zoom_18 .wire{stroke-width: 4;}
svg.Zoom_19 .wire{stroke-width: 3;}
svg.Zoom_20 .wire{stroke-width: 3;}

/*
SVG PILLAR
*/
svg .pillar circle{
	cursor: pointer;
	fill: rgb(0,0,0);
	stroke: rgb(255,0,0);
	stroke-width: 10;
	r: 20;
}
svg .EditMode .pillar{
	cursor: default;
}
svg .pillar circle[data-subtype="lamp"]{
	stroke: rgb(255,220,0);
}
svg .pillar circle[data-subtype="electric"]{
	stroke: rgb(255,0,0);
}

/*
SVG SUBSTATION
*/
svg .substation{
	/*fill: rgb(190,80,80);*/
	fill: rgba(255,255,255,0);
	/*stroke: rgb(100,100,100);*/
	stroke: rgb(190,0,0);
	stroke-width: 5;
	cursor: pointer;
}
svg .EditMode .substation{
	cursor: default;
}

/*
SVG IDD
*/
svg .idd{
	fill: rgb(0,220,0);
	stroke: rgb(100,100,100);
	stroke-width: 2;
	cursor: pointer;
}
svg .EditMode .idd{
	cursor: default;
}

/*
SVG EDIT OBJECT MODE
*/
svg .editPoint{
	fill: rgb(0,0,0);
	stroke: rgb(0,0,0);
}
svg.Zoom_14 .editPoint{r: 45;}
svg.Zoom_15 .editPoint{r: 40;}
svg.Zoom_16 .editPoint{r: 35;}
svg.Zoom_17 .editPoint{r: 30;}
svg.Zoom_18 .editPoint{r: 25;}
svg.Zoom_19 .editPoint{r: 20; stroke-width: 10;}
svg.Zoom_20 .editPoint{r: 15; stroke-width: 7;}
svg.Zoom_21 .editPoint{r: 10; stroke-width: 5;}

/*svg .helpPath{
	fill: none;
	stroke: red;
	stroke-width: 2;
}
svg .helpPath.withFill{
	fill: rgba(180,0,0,0.25);
}*/
svg.Zoom_14 .helpPath{stroke-width: 12;}
svg.Zoom_15 .helpPath{stroke-width: 8;}
svg.Zoom_16 .helpPath{stroke-width: 6;}
svg.Zoom_17 .helpPath{stroke-width: 5;}
svg.Zoom_18 .helpPath{stroke-width: 4;}
svg.Zoom_19 .helpPath{stroke-width: 3;}
svg.Zoom_20 .helpPath{stroke-width: 3;}
svg.Zoom_21 .helpPath{stroke-width: 2;}


/*

WINDOW EDIT OBJECTS

*/

.EditorWindow{
	position: absolute;
	top: 70px;
	/*left: -400px;*/
	left: 20px;
	width: 300px;
	/*height: 400px;*/
	height: 280px;
	display: block;
	opacity: 1;
	background: white;
	border: 1px solid black;
	border-radius: 5px;
	/*transition: all 0.25s linear;*/
}
.EditorWindow.show{
	top: 70px;
	left: 20px;
	opacity: 1;
	display: block;
}
.EditorWindow .container{
	margin-top: 26px;
	border-top: 1px solid rgba(0,0,0,0.5);
	/*padding: 10px;*/
}
.EditorWindow .close{
	position: absolute;
	top: 0px;
	right: 0px;
	padding: 3px 7px;
	border: 1px solid rgba(0,0,0,0);
	border-radius: 5px;
	cursor: pointer;
}
.EditorWindow .close:hover{
	background: rgba(255,0,0,0.25);
	border: 1px solid red;
}
.EditorWindow .container .li{
	margin: 7px 25px;
}
.EditorWindow .container select{
	width: 250px;
	margin: auto;
	display: block;
	cursor: pointer;
}
.EditorWindow .container textarea{
	width: 245px;
	height: 95px;
	resize: none;
	overflow: scroll; 
	overflow-y: scroll; 
	overflow-x: hidden; 
}
.EditorWindow .container .li.buttons{
	text-align: center;
	margin-top: 20px;
}
.EditorWindow .container input[type="text"]{
	width: 240px;
}
.EditorWindow .container input[type="button"]{
	background: rgb(255, 255, 255);
	color: rgb(0, 0, 0);
	width: 125px;
	border: 2px solid black;
	border-radius: 5px;
	cursor: pointer;
}
.EditorWindow .container input[type="button"].delete{
	width: 75px;
	display: block;
	position: absolute;
	right: 5px;
	background: rgb(255,117,117);
}
.EditorWindow .container input:hover[type="button"]{
	background: rgb(255,155,0);
}
.EditorWindow .note{
	color: green;
}

/*

WINDOW INFORMATION ABOUT OBJECT

*/

.WindowAboutObject{
	position: absolute;
	top: 70px;
	left: 20px;
	width: 225px;
	height: 250px;
	display: block;
	background: white;
	border: 1px solid black;
	border-radius: 5px;
}
.WindowAboutObject .close{
	position: absolute;
	top: 0px;
	right: 0px;
	padding: 3px 7px;
	border: 1px solid rgba(0,0,0,0);
	border-radius: 5px;
	cursor: pointer;
}
.WindowAboutObject .container{
	margin-top: 26px;
	border-top: 1px solid rgba(0,0,0,0.5);
}
.WindowAboutObject .container .li{
	margin: 5px 10px;
}
.WindowAboutObject .container .li .note{
	height: 130px;
	overflow: hidden;
	overflow-y: scroll;
}
.WindowAboutObject .container .li.buttons{
	text-align: center;
	position: absolute;
	width: 100%;
	margin: 0;
	bottom: 10px;
}
.WindowAboutObject .container input[type="button"]{
	background: rgb(255, 255, 255);
	color: rgb(0, 0, 0);
	width: 125px;
	border: 2px solid black;
	border-radius: 5px;
	cursor: pointer;
}
.WindowAboutObject .container input:hover[type="button"]{
	background: rgb(255,155,0);
}

/*

BUTTONS

*/
.ButtonLayers{
	position: absolute;
	bottom: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	background: rgb(255,255,255);
	background-image: url('/images/layers.png');
	background-size: contain;
	background-repeat: no-repeat;
	border-radius: 5px;
	border: 1px solid rgba(0,0,0,0.5);
	cursor: pointer;
}
.ButtonLayers:hover{
	background-image: url('/images/layersHover.png');
}
.ButtonCreate{
	position: absolute;
	top: 250px;
	left: 10px;
	width: 75px;
	height: 19px;
	padding: 5px;
	text-align: center;
	background: rgb(255,255,255);
	color: rgb(0,0,0);
	border: 1px solid black;
	border-radius: 5px;
	cursor: pointer;
}
.ButtonCreate:hover{
	background: rgb(255,155,0);
}

/*

SELECT TYPE ADD OBJECT ON MAP

*/
.SelectTypeAddObject{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	/*display: none;*/
	display: block;
	background: rgba(50,50,50,0.75);
	color: white;
	text-align: center;
}
.SelectTypeAddObject.show{
	display: block;
}
.SelectTypeAddObject .close{
	position: absolute;
	top: 5px;
	right: 5px;
	padding: 3px;
	cursor: pointer;
	color: red;
	background: black;
	border: 1px solid black;
	border-radius: 5px;
}
.SelectTypeAddObject .container{
	padding-top: 100px;
}
.SelectTypeAddObject .container select{
	width: 275px;
	display: block;
	margin: auto;
	text-align: center;
	margin-top: 10px;
}

/*

MAP LAYERS LIST

*/
.MapLayers{
	position: absolute;
	bottom: 50px;
	right: 10px;
	width: 75px;
	height: 84px;
	background: rgb(255,255,255);
	border-radius: 5px;
	border: 1px solid rgba(0,0,0,0.5);
	overflow: hidden;
}
.MapLayers a{
	display: block;
	padding: 5px;
	cursor: pointer;
}
.MapLayers a:hover{
	background: rgb(255,155,0);
}
.MapLayers a.select{
	color: rgb(0,200,0);
}