* {
	margin: 0;
	padding: 0;
}

body {
	overflow: hidden;
	margin: none;
	font-family: 'Open Sans', sans-serif;
	touch-action: pan-y;
}

button:hover {
	cursor: pointer;
}


img {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

.container {
	overflow: hidden;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	background: rgb(29, 29, 27);
}

.container.polygon-editing {
	cursor: crosshair;
}

#container-transform {
	transform-origin: left top;
	position: absolute;
	top: 0;
	left: 0;
}

.polygon-div {
	position: absolute;
	top: 0;
	left: 0;
}

.roof-poly {
	z-index: 1;
	fill: transparent;
	stroke: #fcd304;
	stroke-width: 2.6;
}

.container[data-stage="3"] .roof-poly[data-type="sports-field"] {
	fill: rgba(144, 214, 143, 0.4);
}

.container[data-stage="3"] .roof-poly[data-type="parking-lot"] {
	fill: rgba(172, 67, 133, 0.4);
}

svg polygon {
	transform-box: fill-box;
	transform-origin: center;
}

.blocks-container-parent {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: top left;
}

.blocks-container-offset[data-type="sports-field"],
.blocks-container-offset[data-type="parking-lot"] {
	display: none;
}

.blocks-container div {
	transform-origin: top left;
	border-radius: 2px;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
	border: solid 0.77px black;
}

.blocks-container>div::after {
	color: white;
	font-weight: bold;
	position: absolute;
	transform-origin: top left;
	text-align: center;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;

}

.blocks-container .letter-alef::after {
	content: "א";
}

.blocks-container .letter-beit::after {
	content: "ב";
}

.blocks-container .letter-gimel::after {
	content: "ג";
}

.center-bottom-button-container {
	display: none;
	bottom: -6px;
	height: 239px;
	width: 239px;
	left: 50%;
	transform: translateX(-50%);
	position: absolute;
}

.center-bottom-button-container img {
	position: absolute;
}

.center-bottom-button-container area:hover {
	cursor: pointer;
}

.top-right-button-container {
	position: absolute;
	top: 34px;
	right: 30px;
}


.opacity-container {
	border-radius: 15px;
	background: white;
	display: block;
	width: 60px;
	height: 80px;
	margin-top: 11px;
	padding: 30px 0;
	position: relative;
}

.opacity-bar {
	background: black;
	width: 4px;
	height: 80px;
	margin: 0 auto;
	border-radius: 5px;
}

.opacity-toggle {
	width: 16px;
	height: 16px;
	background: #AA4283;
	border-radius: 50%;
	position: absolute;
	top: 20px;
	left: 22px;
}


.trash-button,
.move-button {
	position: absolute;
	top: 34px;
	right: 398px;
	z-index: 0;
	-moz-transform: none;
	-webkit-transform: none;
	-o-transform: none;
	-ms-transform: none;
	transform: none;
}

.trash-button button,
.move-button button {
	border: none;
	position: relative;
	cursor: pointer;
	border-radius: 15px;
	background: white;
	display: block;
	width: 60px;
	height: 60px;
	border: 3px solid rgb(252, 211, 4);
}

.trash-button svg,
.move-button svg {
	top: 50%;
	left: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
}

.top-right-button-container button {
	cursor: pointer;
	border: none;
	border-radius: 15px;
	background: white;
	display: block;
	width: 60px;
	height: 60px;
	margin-top: 11px;
}

.top-right-button-container button:first-child {
	margin-top: 0;
}

#add-polygon-btn {
	display: none;
	user-select: none;
	position: absolute;
	width: 254px;
	height: 60px;
	top: 34px;
	right: 134px;

	background-color: #aa4283;
	border-radius: 15px;
	border: none;

	color: #ffffff;
	font-size: 24px;

	cursor: pointer;
}

.add-polygon-types-container {
	list-style-type: none;
	position: absolute;
	padding: 25px 11px;
	right: 134px;
	top: 98px;
	width: 232px;
	background-color: #ffffff;
	border-radius: 15px;
}

.add-polygon-types-container button {
	position: relative;
	width: 100%;
	height: 70px;
	border: none;
	border-radius: 0;
	border-bottom: solid 1px #e3e3e3;
	background-color: #ffffff;
	transition: .3s background-color;
}

.add-polygon-types-container button:hover {
	background-color: #fcd20f;
}

.add-polygon-types-container button span {
	position: absolute;
	right: 65px;
	transform: translateY(-50%);
	text-align: right;
}

.add-polygon-types-container button span.polygon-icon {
	top: 50%;
	right: 10px;
}

.add-polygon-types-container button span.polygon-icon img {
	display: block;
}

.crosshair {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 41px;
	height: 41px;
	transform: translateX(-21px) translateY(-21px);
}

.crosshair div {
	position: absolute;
	background: rgb(252, 211, 4);
}


.crosshair .crosshair-circle {
	position: absolute;
	left: 15px;
	top: 15px;
	width: 9px;
	height: 9px;
	background: none;
	border-radius: 50%;
	border: 1px solid rgb(252, 211, 4);
	outline: 1px solid black;
}

.crosshair .crosshair-top {
	top: 0;
	left: 19px;
	width: 1px;
	height: 15px;
	border-right: 1px solid black;
	border-left: 1px solid black;
}

.crosshair .crosshair-left {
	top: 19px;
	right: 0;
	width: 15px;
	height: 1px;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
}

.crosshair .crosshair-right {
	top: 19px;
	left: 0;
	width: 15px;
	height: 1px;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
}

.crosshair .crosshair-bottom {
	bottom: 0;
	left: 19px;
	width: 1px;
	height: 15px;
	border-right: 1px solid black;
	border-left: 1px solid black;
}

.container.container-touch.polygon-editing .crosshair {
	display: block;
}


#add-element-btn {
	display: none;
	user-select: none;
	position: absolute;
	width: 254px;
	height: 60px;
	top: 34px;
	right: 134px;

	background-color: #aa4283;
	border-radius: 15px;
	border: none;

	color: #ffffff;
	font-size: 24px;

	cursor: pointer;
}

.elements-icon {
	display: none;
	z-index: 5;
	position: absolute;
	right: 101px;
	top: 34px;
	width: 60px;
	height: 60px;
	border-radius: 15px;
	background-color: #ffffff;
	transition: .3s background-color;
}

.elements-icon .element-icon {
    top: 50%;
    left: 50%;
}

.elements-icon .element-icon img {
	position: absolute;
	transform: translateX(50%) translateY(-50%);
}

.elements-icon .element-icon + .burger {
	display: none;
}

.elements-container {
	list-style-type: none;
	position: absolute;
	padding: 25px 11px;
	right: 134px;
	top: 98px;
	width: 234px;
	background-color: #ffffff;
	border-radius: 15px;

}

.elements-container button {
	position: relative;
	width: 100%;
	height: 68px;
	background-color: transparent;
	border: none;
	border-bottom: 1px solid black;
	transition: background-color .3s;

}

.elements-container button:hover {
	background-color: #fcd20f;
}

.elements-container .element-icon {
	position: absolute;
	top: 31px;
    right: 15px;
    width: 40px;
    text-align: center;
}

.elements-container .element-icon img {
	position: absolute;
	transform: translateX(50%) translateY(-50%);
}

.menu-icon {
	z-index: 5;
	position: absolute;
	right: 101px;
	top: 34px;
	width: 60px;
	height: 60px;
	border-radius: 15px;
	background-color: #ffffff;
	transition: .3s background-color;
}

span {
	position: absolute;
	font-size: 18px;
	font-weight: bold;
	font-stretch: normal;
	font-style: normal;
	letter-spacing: normal;
	text-align: left;
	color: #000;
}


#polygon-finish {
	position: absolute;
	top: 0;
	left: 0;
	width: 9px;
	height: 9px;
	margin-top: -5px;
	margin-left: -5px;
	background: yellow;
	border: 1px solid purple;
}

#polygon-finish:hover,
.container.polygon-editing.polygon-finish #polygon-finish {
	box-shadow: 0px 0px 10px rgba(252, 210, 15, 0.8);
}

#container-transform[data-scale="0.2"] #polygon-finish {
	width: 45px;
	height: 45px;
	margin-top: -23px;
	margin-left: -23px;
	border-width: 5px;
}

#container-transform[data-scale="0.296"] #polygon-finish {
	width: 31px;
	height: 31px;
	margin-top: -16px;
	margin-left: -16px;
	border-width: 3.5px;
}

#container-transform[data-scale="0.44"] #polygon-finish {
	width: 21px;
	height: 21px;
	margin-top: -10px;
	margin-left: -10px;
	border-width: 2.5px;
}

#container-transform[data-scale="0.66"] #polygon-finish {
	width: 13px;
	height: 13px;
	margin-top: -7px;
	margin-left: -7px;
	border-width: 1.5px;
}
/*
#container-transform[data-scale="1"] #polygon-finish {
}

#container-transform[data-scale="1.5"] #polygon-finish {
	width: 6px;
	height: 6px;
	margin-top: -3px;
	margin-left: -3px;
}

#container-transform[data-scale="2.25"] #polygon-finish {
	width: 4px;
	height: 4px;
	margin-top: -2px;
	margin-left: -2px;
}

#container-transform[data-scale="3.375"] #polygon-finish {
	width: 3px;
	height: 3px;
	margin-top: -2px;
	margin-left: -2px;
}

#container-transform[data-scale="5"] #polygon-finish {
	width: 2px;
	height: 2px;
	margin-top: -1px;
	margin-left: -1px;
}
*/

.polygon-details {
	position: absolute;
	bottom: 20px;
	left: 20px;
	padding: 10px 15px;
	background: white;
	border-radius: 10px;
}

.polygon-details span {
	position: static;
	font-size: 14px;
	font-weight: 100;
}

.polygon-details button {
	margin-top: 10px;
	width: 50px;
	height: 50px;
	background: white;
	border: 3px solid rgb(252, 211, 4);
    border-radius: 10px;
}


.polygon-details .segment-length,
.polygon-details .add-vertex {
	display: none;
}

.polygon-details .add-vertex .close {
	display: none;
}

.container.polygon-editing.polygon-finish .polygon-details .add-vertex .close {
	display: inline;
}

.container.polygon-editing.polygon-finish .polygon-details .add-vertex .add {
	display: none;
}

.polygon-editing .polygon-details .segment-length,
.container-touch.polygon-editing .polygon-details .add-vertex {
	display: inline-block;
}

.container[data-stage="1"].polygon-editing .center-bottom-button-container,
.polygon-editing .polygon-details .unselect-polygon {
	display: none;
}


.larger-text {
	bottom: 34px;
	right: 83px;
}

.smaller-text {
	bottom: 15px;
	right: 83px;
	font-size: 14px;
	font-weight: 100;
}

.centered-text {
	right: 82px;
	transform: translateY(-50%);
}


.pin-group {
	display: none;
}

.pin-group svg {
	position: absolute;
	top: 0;
	left: 0;
}

.pin-group img {
	transform: translateX(-50%);
	position: absolute;
}

.pin-group .pin-background {
	width: 44px;
	height: 54px;
	transform: translate(50%, -90%);
	position: absolute;
}

.roof-types {
	position: absolute;
	right: 101px;
	top: 34px;
	user-select: none;
}

.roof-types li {
	display: inline-flex;
	position: relative;
	margin-right: 5.5px;
}

.roof-types li:first-child {
	margin: 0;
}


.roof-types button {
	width: 204px;
	height: 60px;
	border: none;
	border-radius: 15px;
	background-color: #ffffff;
	transition: .3s background-color;
}

.roof-types button:hover {
	background-color: #fcd20f;
}

.roof-types span {
	position: absolute;
	right: 76px;
	transform: translateY(-50%);
	text-align: right;
}

.roof-types img {
	position: absolute;
	right: 24px;
	top: 12px;
}

.delete-selection img {
	right: auto;
	top: auto;
	transform: translate(50%, -50%);
}

#delete-selection-btn {
	width: 60px;
	height: 60px;
}

.roof-btns-container {
	position: absolute;
	width: 184px;
	background-color: #ffffff;
	border-radius: 15px;
	margin-top: 64px;
	padding: 13px 10px;
}

.roof-btns-container button {
	position: relative;
	width: 100%;
	height: 70px;
	border: none;
	border-radius: 0;
	border-bottom: solid 1px #e3e3e3;
}

.roof-btns-container button:last-child {
	border-bottom: none;
}


.roof-btns-container span {
	right: 65px;
}

.arrow {
	width: 21px;
	height: 24px;
	margin-right: 9px;
	margin-top: 7.5px;
	transform-origin: center;
}

.roof-btns-container img {
	right: 0;
	top: 0;
	transform-origin: center;
}

.icon-container {
	position: absolute;
	top: 17.5px;
	right: 10px;
}


.letter {
	width: 21px;
	height: 24px;
	transform: translate(calc(-50% + 1px), -50%);
	transform-origin: center;
}

.hidden-opacity-bar {
	display: none !important;
}

.asbestos-roof-background {
	background-color: #a96d1a;
}

.isolated-panel-background {
	background-color: #cfc8c8;
}
.isolated-panel-background.north-arrow {
	background-color: #002966;
}

.isolated-panel-background.south-arrow {
	background-color: #7cc7ff;
}

.isolated-panel-background.east-arrow {
	background-color: #2a8bd3;
}

.isolated-panel-background.west-arrow {
	background-color: #0e529e;
}

.tiled-roof-background {
	background-color: #d24835;
}

.tiled-roof-background.east-arrow {
	background-color: #d34f3d;
}

.tiled-roof-background.west-arrow {
	background-color: #87190a;
}

.tiled-roof-background.north-arrow {
	background-color: #420800;
}

.tiled-roof-background.south-arrow {
	background-color: #fd9377;
}

.flat-concrete-background {
	background-color: #808080;
}

.flat-concrete-background.-arrow.letter-alef {
	background-color: #494949;
}

.flat-concrete-background.-arrow.letter-biet {
	background-color: #7c7c7c;
}

.flat-concrete-background.-arrow.letter-gimel {
	background-color: #adadad;
}

.west-arrow::before {
	background-image: url("assets/roof-types/arrow-west.svg");
}

.east-arrow::before {
	background-image: url("assets/roof-types/arrow-east.svg");
}

.north-arrow::before {
	background-image: url("assets/roof-types/arrow-north.svg");

}

.south-arrow::before {
	background-image: url("assets/roof-types/arrow-south.svg");

}

.blocks-container [class$="arrow"]::before {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	position: absolute;
	content: "";
	top: 10%;
	left: 10%;
	right: 10%;
	bottom: 10%;
}

.blocks-container div {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.letter-div {
	margin-top: 15px;
}

.roof-btns-container .letter {
	color: white;
	font-size: 27px;
	font-weight: bold;
}

.button-arrow {
	width: 21px;
	height: 24px;
	margin-right: 9px;
}

.button-letter {
	position: absolute;
	top: 40%;
	left: 147.5px;
	font-size: 26px;
	font-weight: bold;
	color: white;
	margin-right: -40px;
}

.selected {
	filter: drop-shadow(0px 0px 10px rgba(252, 210, 15, 0.8))
}

polygon.selected {
	/*stroke-width: 4px;*/
	fill: rgba(252, 210, 15, 0.05);
}

.not-selected {
	filter: drop-shadow(0 0 27px rgba(0, 1, 0, 0.36))
}

.pin-obj {
	width: 24px;
	background-repeat: no-repeat;
	position: absolute;
	left: 12px;
	top: 10px;
}

.small-ac {
	width: 20px;
	height: 15px;
	background-image: url("assets/pin-types/black-white/small-ac.svg");
	top: 15px;
}

.big-ac {
	height: 26px;
	width: 20px;
	background-image: url("assets/pin-types/black-white/big-ac.svg");
}

.large-water-heater1 {
	height: 22px;
	background-image: url("assets/pin-types/black-white/large-water-heater1.svg");
}

.large-water-heater2 {
	height: 22px;
	background-image: url("assets/pin-types/black-white/large-water-heater2.svg");
}

.chimney {
	width: 15px;
	height: 25px;
	background-image: url("assets/pin-types/black-white/chimney.svg");
	left: 14px;
}

.satellite {
	width: 22px;
	height: 25px;
	background-image: url("assets/pin-types/black-white/satellite.svg");
}


.container[data-stage="1"] #add-polygon-btn,
.container[data-stage="1"] .center-bottom-button-container {
	display: block;
}

.container[data-stage="1"].polygon-editing #add-polygon-btn {
	display: none;
}

.container[data-stage="2"] #add-element-btn,
.container[data-stage="2"] .pin-group {
	display: block;
}

.hidden {
	display: none;
}



.container[data-stage="3"] .roof-types,
.container[data-stage="3"] .blocks-container-parent,
.container[data-stage="3"] .menu-icon,
.container[data-stage="3"] .bottom-left-compass-container {
	display: block;
}

.container[data-stage="3"] .roof-types.hidden,
.container[data-stage="3"] .menu-icon.hidden {
	display: none;
}




.elements-icon:hover,
.menu-icon:hover {
	background-color: #fcd20f;
}


.elements-icon .burger,
.menu-icon img {
	position: absolute;
	transform: translate(-100%, 100%);
}

.menu-icon span {
	position: absolute;
	right: 57.5px;
}

.bottom-left-compass-container {
	position: absolute;
	left: 50px;
	bottom: 50px;
}

.compass {
	width: 130px;
	height: 130px;
}

@media only screen and (max-width: 1040px) {
	.container[data-stage="2"] #add-element-btn {
		display: none;
	}

	.container[data-stage="2"] .elements-icon {
		display: block;
	}

	.trash-button, .move-button {
		right: 172px;
	}

	.roof-types li {
		display: block;
	}

	.roof-types {
		margin-top: 64px;
		background-color: white;
		border-radius: 15px;
		border-bottom: solid 1px black;
		padding: 5px 5px;
	}

	.roof-types li button {
		width: 200px;
		margin: 0 5px;
		border-radius: 0;
		border-bottom: solid 1px #e3e3e3;
	}

	.roof-types li {
		margin-right: 0;
	}

	.roof-btns-container {
		position: fixed;
		width: 195px;
		margin-top: 0;
		top: 98px;
		right: 101px;
		z-index: 2;
		padding: 13px 12.5px;
		min-height: 284px;
	}

	.roof-types li .roof-btns-container button {
		width: 100%;
		margin: 0;
	}

	#delete-selection-btn {
		width: 95%;
		border: none;
	}

	#delete-selection-btn img {
		right: 24px;
		transform: translate(-17.5%, -50%);
	}
}

.offset-image-map-mobile {
	display: none;
	margin: 25px;
}

@media only screen and (max-width: 580px) {
	.center-bottom-button-container {
		left: auto;
		right: -25px;
		transform: none;
		bottom: -25px;
	}

	.offset-image-map-desktop {
		display: none;
	}
	.offset-image-map-mobile {
		display: block;
	}

	.bottom-left-compass-container {
		left: 30px;
		bottom: 60px;
	}

	.compass {
		width: 75px;
		height: 75px;
	}

	.roof-types li {
		display: block;
		margin: 0;
	}

	.roof-types li:first-child {
		margin-right: 0px;
	}

	.roof-btns-container {
		z-index: 2;
	}

	.delete-selection {
		width: 204px;
	}
}

@media only screen and (max-width: 420px) {
	.top-right-button-container {
		right: 10px;
	}

	#add-polygon-btn,
	.add-polygon-types-container {
		right: 80px;
	}

	.trash-button,
	.move-button {
		right: 155px;
	}

	.elements-icon,
	.roof-btns-container,
	.menu-icon,
	.roof-types {
		right: 85px;
	}

	.elements-container {
		width: 225px;
		right: 85px;
		padding: 5px 0px;
	}

	.elements-container button {
		width: 95%;
		right: 5px;
	}

}