/**
 * EC Map Renderer
 * Copyright 2023 by Rainer Kaufmann (DraconisMC)
 *
 * Marker Styles
 */

.marker {
	position: absolute;
	background-color: #fff;
	opacity: 0.7;
	cursor: pointer;
	display: none;
}

.markermap .marker {
	display: block;
}

.marker div {
	position: absolute;
}

.marker.active {
	box-shadow: 0 0 10px 5px #fff;
	display: block !important;
}

.marker.hovered {
	box-shadow: 0 0 10px 5px #f00;
}

.marker.Stadt {
	background-color: #fc0;
	border: 1px solid #fc0;
}

.marker.Stadt.hovered {
	box-shadow: 0 0 10px 5px #ff0;
}

.marker.Train {
	background-color: #00c;
	border: 1px solid #00c;
}

.marker.Train.hovered {
	box-shadow: 0 0 10px 5px #00f;
}

.marker.Conduit {
	background-color: #ccf;
	border: 1px solid #00f;
	width: 1px;
	height: 1px;
	z-index: 302 !important;
}


.marker.Conduit div {
	background-color: #ccf;
	z-index: 302 !important;
}

.zoom100 .marker.Conduit div {
	border: 2px solid #00f;
	width: 1px;
	height: 1px;
	margin-top: -2px;
	margin-left: -2px;
}

.zoom150 .marker.Conduit div {
	border: 3px solid #00f;
	width: 1px;
	height: 1px;
	margin-top: -3px;
	margin-left: -3px;
}

.zoom200 .marker.Conduit div {
	border: 4px solid #00f;
	width: 2px;
	height: 2px;
	margin-top: -4px;
	margin-left: -4px;
}

.zoom250 .marker.Conduit div {
	border: 5px solid #00f;
	width: 2px;
	height: 2px;
	margin-top: -5px;
	margin-left: -5px;
}

.zoom300 .marker.Conduit div {
	border: 6px solid #00f;
	width: 3px;
	height: 3px;
	margin-top: -6px;
	margin-left: -6px;
}

.zoom350 .marker.Conduit div {
	border: 7px solid #00f;
	width: 3px;
	height: 3px;
	margin-top: -7px;
	margin-left: -7px;
}

.zoom400 .marker.Conduit div {
	border: 8px solid #00f;
	width: 4px;
	height: 4px;
	margin-top: -8px;
	margin-left: -8px;
}

.marker.Conduit.active div {
	border: 1px solid #00f;
	border-radius: 50%;
	background-color: rgba(64,64,128,0.7);
}

.marker.Conduit.hovered {
	box-shadow: 0 0 10px 5px #00f;
}

/* Cuboid: 135 x 135 x 135 */
.zoom100 .marker.Conduit.active { box-shadow: 0 0 0 67px rgba(32,32,64,1.0); }
.zoom150 .marker.Conduit.active { box-shadow: 0 0 0 101px rgba(32,32,64,1.0); }
.zoom200 .marker.Conduit.active { box-shadow: 0 0 0 134px rgba(32,32,64,1.0); }
.zoom250 .marker.Conduit.active { box-shadow: 0 0 0 168px rgba(32,32,64,1.0); }
.zoom300 .marker.Conduit.active { box-shadow: 0 0 0 201px rgba(32,32,64,1.0); }
.zoom350 .marker.Conduit.active { box-shadow: 0 0 0 235px rgba(32,32,64,1.0); }
.zoom400 .marker.Conduit.active { box-shadow: 0 0 0 268px rgba(32,32,64,1.0); }

.zoom100 .marker.Conduit.active.size2 { box-shadow: 0 0 0 45px rgba(32,32,64,1.0); }
.zoom150 .marker.Conduit.active.size2 { box-shadow: 0 0 0 67px rgba(32,32,64,1.0); }
.zoom200 .marker.Conduit.active.size2 { box-shadow: 0 0 0 89px rgba(32,32,64,1.0); }
.zoom250 .marker.Conduit.active.size2 { box-shadow: 0 0 0 112px rgba(32,32,64,1.0); }
.zoom300 .marker.Conduit.active.size2 { box-shadow: 0 0 0 134px rgba(32,32,64,1.0); }
.zoom350 .marker.Conduit.active.size2 { box-shadow: 0 0 0 157px rgba(32,32,64,1.0); }
.zoom400 .marker.Conduit.active.size2 { box-shadow: 0 0 0 179px rgba(32,32,64,1.0); }

.zoom100 .marker.Conduit.active.size1 { box-shadow: 0 0 0 29px rgba(32,32,64,1.0); }
.zoom150 .marker.Conduit.active.size1 { box-shadow: 0 0 0 44px rgba(32,32,64,1.0); }
.zoom200 .marker.Conduit.active.size1 { box-shadow: 0 0 0 59px rgba(32,32,64,1.0); }
.zoom250 .marker.Conduit.active.size1 { box-shadow: 0 0 0 74px rgba(32,32,64,1.0); }
.zoom300 .marker.Conduit.active.size1 { box-shadow: 0 0 0 88px rgba(32,32,64,1.0); }
.zoom350 .marker.Conduit.active.size1 { box-shadow: 0 0 0 103px rgba(32,32,64,1.0); }
.zoom400 .marker.Conduit.active.size1 { box-shadow: 0 0 0 117px rgba(32,32,64,1.0); }

/* 100*/
.zoom100 .marker.Conduit.active div {
	width: 191px;
	height: 191px;
	margin-top: -96px;
	margin-left: -96px;
}
.zoom100 .marker.Conduit.active.size2 div {
	width: 129px;
	height: 129px;
	margin-top: -64px;
	margin-left: -64px;
}
.zoom100 .marker.Conduit.active.size1 div {
	width: 85px;
	height: 85px;
	margin-top: -42px;
	margin-left: -42px;
}

/* 150 */
.zoom150 .marker.Conduit.active div {
	width: 287px;
	height: 287px;
	margin-top: -144px;
	margin-left: -144px;
}
.zoom150 .marker.Conduit.active.size2 div {
	width: 191px;
	height: 191px;
	margin-top: -96px;
	margin-left: -96px;
}
.zoom150 .marker.Conduit.active.size1 div {
	width: 127px;
	height: 127px;
	margin-top: -63px;
	margin-left: -63px;
}

/* 200 */
.zoom200 .marker.Conduit.active div {
	width: 383px;
	height: 383px;
	margin-top: -192px;
	margin-left: -192px;
}
.zoom200 .marker.Conduit.active.size2 div {
	width: 257px;
	height: 257px;
	margin-top: -128px;
	margin-left: -128px;
}
.zoom200 .marker.Conduit.active.size1 div {
	width: 129px;
	height: 129px;
	margin-top: -64px;
	margin-left: -64px;
}

/* 250 */
.zoom250 .marker.Conduit.active div {
	width: 479px;
	height: 479px;
	margin-top: -240px;
	margin-left: -240px;
}
.zoom250 .marker.Conduit.active.size2 div {
	width: 321px;
	height: 321px;
	margin-top: -160px;
	margin-left: -160px;
}
.zoom250 .marker.Conduit.active.size1 div {
	width: 211px;
	height: 211px;
	margin-top: -105px;
	margin-left: -105px;
}

/* 300 */
.zoom300 .marker.Conduit.active div {
	width: 575px;
	height: 575px;
	margin-top: -288px;
	margin-left: -288px;
}
.zoom300 .marker.Conduit.active.size2 div {
	width: 385px;
	height: 385px;
	margin-top: -192px;
	margin-left: -192px;
}
.zoom300 .marker.Conduit.active.size1 div {
	width: 253px;
	height: 253px;
	margin-top: -126px;
	margin-left: -126px;
}

/* 350 */
.zoom350 .marker.Conduit.active div {
	width: 671px;
	height: 671px;
	margin-top: -336px;
	margin-left: -336px;
}
.zoom350 .marker.Conduit.active.size2 div {
	width: 449px;
	height: 449px;
	margin-top: -224px;
	margin-left: -224px;
}
.zoom350 .marker.Conduit.active.size1 div {
	width: 295px;
	height: 295px;
	margin-top: -147px;
	margin-left: -147px;
}

/* 400 */
.zoom400 .marker.Conduit.active div {
	width: 767px;
	height: 767px;
	margin-top: -384px;
	margin-left: -384px;
}
.zoom400 .marker.Conduit.active.size2 div {
	width: 513px;
	height: 513px;
	margin-top: -256px;
	margin-left: -256px;
}
.zoom400 .marker.Conduit.active.size1 div {
	width: 337px;
	height: 337px;
	margin-top: -168px;
	margin-left: -168px;
}

.marker.Lift {
	background-color: #fc0;
	border: 1px solid #c00;
}

.marker.Lift.hovered {
	box-shadow: 0 0 10px 5px #f00;
}

.marker.POI {
	background-color: #0c0;
	border: 1px solid #0c0;
}

.marker.POI.hovered {
	box-shadow: 0 0 10px 5px #0f0;
}

/**
 * Marker Details
 */

.marker-details {
	background-color: #333;
	display: none;
}

.markermap .marker-details {
	display: block;
}

.marker-tooltip {
	background-color: #333 !important;
	background-image: none !important;
	padding: 2px 8px;
}