body, html {font-family: Roboto, Arial, sans; min-height: 100%; height: 100%; padding: 0; margin: 0; background: #fffbec}
* {box-sizing: border-box}
a, button {transition: 0.4s;}

.modalInner {
	p {text-align: center; font-size: 18px; line-height: 1.4}
	button.modalClose {background: #bb0000; color: white; font-weight: bold; padding: 10px 24px; border: none; border-radius: 6px; font-size: 16px; cursor: pointer; margin-top: 8px !important; letter-spacing: 1px;
	-webkit-font-smoothing: antialiased; font-smooth: always;}
	button.modalClose:hover {background: #ee0000; box-shadow: 2px 3px 4px rgba(0,0,0,0.2);}
	svg {width: 60px; height: 60px}
	svg.ok {fill: green}
	svg.notOk {fill: red}
}

#wrapper {text-align: center; min-height: 100%; height: 100%; position: relative}

#topBar {background: rgba(0,0,0,0.1); display: flex; justify-content: space-between; align-items: center;position: fixed; top: 0; width: 100%; padding: 0 12px;}

#meTitle {font-weight: bolder; color: rgba(0,0,0,0.35); font-size: 21px; pointer-events: none; user-select: none; -webkit-user-select: none; z-index: 0; display: flex; align-items: center;
	span {font-weight: normal; color: black; max-width: 200px; overflow: hidden; display: inline-block; white-space: nowrap; margin-left: 6px; text-overflow: ellipsis;}
}

#topBarApproach {flex: 1;
	> div {display: flex; align-items: center; background: #806655; width: fit-content; margin: auto; padding: 0 24px; border-radius: 64px; border: 3px solid #fffbec; border-width: 0 3px 0 3px; color: rgba(255,255,255,0.8); box-shadow: 0 0 4px rgba(0,0,0,0.1);
		> div {display: flex; gap: 2px; margin: 0 0 0 12px;}
		label {color: white; padding: 12px 10px; border-radius: 4px; cursor: pointer; transition:background-color 0.2s ease, color 0.2s ease; display: block;}
		label:has(input[type="radio"]:checked) {background-color: #c10000; color: #ffffff; font-weight: bold;}
		input[type="radio"] {display: none;}
	}
}

#topBarTimber {width: 230px; font-weight: bolder; color: rgba(0,0,0,0.4); font-size: 21px;}

#meFooter {display: flex; position: fixed; bottom: 8px; right: 0; left: 0; gap: 12px; width: 100%; justify-content: space-between; padding: 0 18px;
	> div {display: flex; gap: 12px; align-items: center;}
	button {padding: 8px 18px; background: darkorange; color: white; cursor: pointer; border-radius: 6px; font-size: 18px;font-weight: bold;
		svg {fill: white; vertical-align: middle; width: 12px; height: 12px; margin-right: 6px;}
	}
	button.biggerButton { font-size: 20px; text-transform: uppercase; letter-spacing: 1px; padding: 12px 24px; background: #b32d00;
		&:hover {background: #ff0000;}
	}
	button:hover {background: #c66c00; color: white; box-shadow: var(--materialShadowHover); box-shadow: 4px 5px 8px rgba(0,0,0,0.2);}
	
	.info {text-decoration: none; font-weight: bold;
		svg {height: 16px; width: 16px; fill: blue; vertical-align: middle; margin: 0 4px 0 0;}
	}
	
}


#meMeter {position: absolute; top: calc( 100% + 5px); left: 5px; display: flex; gap: 6px; color: #777; padding: 8px 10px;  background: rgba(0,0,0,0.1); flex-direction: column; gap: 3px; font-size: 14px;
	span {font-weight: bold; color: #222; font-size: 18px}
	.meMeterButtons {display: flex; gap: 6px; justify-content: center; margin: 8px auto 0 auto}
	button {padding: 4px 22px; background: orange; color: white; cursor: pointer; border-radius: 6px; font-size: 1px;
		svg {height: 14px; width: 14px}
	}
	button:hover {background: darkorange; color: white; box-shadow: var(--materialShadowHover);}
	
	div {}

}

.modalWindow {position: fixed; top: 10px; left: 50%; transform: translateX(-50%); background: rgba(230,230,230,1); font-size: 16px; z-index: 10; padding: 12px 24px; box-shadow: 2px 3px 4px rgba(0,0,0,0.15);}

#useLargeDisplay .modalInner {padding: 24px 18px; border-radius: 8px; box-shadow: 2px 3px 4px rgba(0,0,0,0.2);
	h6 {display: block; color: #777; font-size: 22px; text-align: center; margin: 0 auto;}
	p {display: block; color: #333; font-size: 18px; text-align: center; margin: 8px auto;}
}

#helper {}


#meContainer {display: flex; flex-direction: row; align-items: stretch;}


#timberWrap {flex: 1; display: flex; height: 98vh;

	#timber {width: 100%; height: 100%;
		svg {margin: 0 auto; height: 100%; width: 100%; max-width: 1800px; max-height: 1800px;}
	}
}

#storageWrap {width: 250px; display: flex; overflow-y: auto; flex-direction: column; align-items: flex-start;

	#storage {align-self: flex-start; margin: 0 auto; height: calc(100vh - 80px); overflow-y: auto; border-left: 1px solid rgba(0,0,0,0.1); padding-top: 64px;
	
		p {display: none; text-align: center; font-weight: bold; font-size: 20px; color: grey; width: auto; margin: 10px auto}

		svg {margin: 0 auto; width: 220px; height: auto;}
		svg > g > g:hover {
		filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
		cursor: cell;}

	}
}



.checkbox-widget {display: none}




#main-content {
	padding: 60px 50px 50px;
	margin: 0 auto;
	width: 100%;
	max-width: 1280px
}

#main-workWrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
	min-height: 100%
}

#main-workWrapper>div {
	display: block;
	flex: 1 auto
}

#main-workWrapper>div.working-area {
	text-align: center;
	padding-top: 10px
}

@media screen and (min-height:800px) {
	#main-workWrapper>div.working-area {
		padding-top: 50px
	}
}

@media screen and (min-height:1000px) {
	#main-workWrapper>div.working-area {
		padding-top: 100px
	}
}

@media screen and (min-height:1400px) {
	#main-workWrapper>div.working-area {
		padding-top: 150px
	}
}

#main-workWrapper #outerCircle,
#main-workWrapper #work-wrapper {
	text-align: center;
	margin: 0 auto;
	min-height: 100%
}

#main-workWrapper>div.timber-area {
	max-width: 300px
}

.footr_icons {
	margin: 0 0 0 15px;
	text-align: left;
	white-space: nowrap;
	position: absolute;
	bottom: 0;
	left: 0
}

.footr_icons div {
	display: inline-block;
	margin: 0 5px 10px;
	text-align: center;
	font-size: 12px;
	max-width: 120px;
	vertical-align: top;
	line-height: 18px;
	white-space: normal;
	color: rgba(0, 0, 0, .4);
	font-weight: 500
}

.footr_icons div img,
.footr_icons div svg {
	fill: rgba(0, 0, 0, .4);
	display: block;
	margin: 0 auto 5px;
	max-height: 16px;
	max-width: 16px
}

#me-actions {
	position: fixed;
	bottom: 8px;
	right: 8px;
	z-index: 800;
	text-align: right
}

#me-actions-wrap {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	background: #eee;
	width: auto;
	color: #fff;
	padding: 0;
	box-shadow: 0 0 12px rgba(0, 0, 0, .3);
	margin: 0 auto;
	text-align: right
}

#me-actions #me-actions-wrap>div {
	display: block;
	flex: 1 auto;
	vertical-align: middle;
	text-align: center;
	padding: 20px
}

#me-actions #me-actions-wrap>div a svg,
#me-actions #me-actions-wrap>div a ul {
	display: inline-block;
	vertical-align: middle;
	list-style: none;
	padding: 0;
	margin: 0;
	cursor: pointer
}

#me-actions #me-actions-wrap>div a ul li {
	display: block;
	vertical-align: middle;
	list-style: none;
	padding: 0;
	margin: 0;
	font-weight: 700
}

#me-actions #me-actions-wrap>div a svg {
	height: 20px;
	width: 20px;
	margin: 0 5px 0 0;
	fill: #999
}

#me-actions #me-actions-wrap>div a:hover svg {
	fill: #444
}

#me-actions #me-actions-wrap>div a {
	display: block;
	vertical-align: middle;
	padding: 10px 0;
	color: #999;
	background: rgba(0, 0, 0, .01);
	border-radius: 32px;
	font-size: 20px;
	cursor: pointer;
	border: 2px solid rgba(0, 0, 0, .2);
	text-transform: uppercase;
	min-width: 250px
}

#me-actions #me-actions-wrap>div a:hover {
	color: #555;
	background: hsla(0, 0%, 100%, .2);
	border: 2px solid #888;
	box-shadow: 2px 4px 6px rgba(0, 0, 0, .1);
	text-decoration: none
}

#zero_level {
	position: absolute;
	top: 0;
	width: 100%;
	height: 5px;
	background-color: red;
	z-index: 800
}

.zero_handler {
	position: absolute;
	top: -13px;
	right: -33px;
	background: red;
	border-radius: 100%;
	color: #fff;
	font-size: 12px;
	padding: 9px 8px;
	letter-spacing: 1px;
	font-weight: 700;
	text-align: center;
	transition: .3s
}

.zero_handler:active,
.zero_handler:hover {
	cursor: pointer
}

.zero_handler:hover {
	background: #d00
}

.zero_handler:active {
	background: #d00;
	color: #d00
}

#work-wrapper {
	position: relative
}

.outerCircle {
	width: 620px;
	height: 620px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 0 24px rgba(0, 0, 0, .25)
}

.innerCircle,
.outerCircle {
	border-radius: 50%
}

.innerCircle,
.minCircle {
	width: 450px;
	height: 450px;
	display: flex;
	justify-content: center;
	align-items: center
}

.minCircle {
	border: 2px dashed #4e4e4e;
	border-radius: 50%
}

.coreCircle {
	margin: auto;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center
}

.origin {
	color: red
}

.work-log {
	position: absolute;
	top: 0;
	width: 620px;
	height: 620px;
	border-radius: 50%
}

.box-area {
	border-left: 1px dotted #8f8f8f;
	padding: 5px;
	text-align: center;
	margin-bottom: 10px;
	position: relative;
	min-height: 620px
}

.box-area .box-bg:hover {
	box-shadow: 2px 4px 4px rgba(0, 0, 0, .1)
}

.dropped .box-bg:hover {
	box-shadow: none
}

.trash {
	padding: 5px;
	text-align: center
}

.trash:hover {
	background: rgba(255, 81, 0, .411)
}

.box {
	position: absolute;
	display: inline-block;
	margin: 5px;
	z-index: 100
}

.box .rotate_handle {
	position: absolute;
	top: -1px;
	right: 2px;
	width: 10px;
	opacity: .4;
	cursor: pointer;
	transition: all .15s ease
}

.box:hover .rotate_handle {
	opacity: .7
}

.box .rotate_handle:hover {
	opacity: 1
}

.dropped .rotate_handle {
	opacity: 0
}

.dropped:hover .rotate_handle {
	opacity: .4
}

.dropped .rotate_handle:hover {
	opacity: 1
}

.row:after {
	content: "";
	display: table;
	clear: both
}

.renderImg {
	padding: 3px 6px;
	text-align: center
}

.renderImg canvas {
	width: 100%;
	margin: 0 auto
}

.box-bg {
	cursor: pointer;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #000
}

.dropped .box-bg:hover {
	cursor: default
}

.dropped .box-bg:active {
	cursor: pointer
}

#box_size {
	margin: 0;
	color: #000;
	font-size: 10px;
	letter-spacing: .5px
}

@media screen and (max-width:600px) {

	.column,
	input[type=submit] {
		width: 100%;
		margin-top: 0
	}
}

#exportDialog {
	z-index: 99999
}

#exportXML {
	font-size: 13px;
	max-height: 100px;
	background: #eee;
	overflow-y: auto;
	padding: 0 20px 20px;
	font-family: Courier New, Courier, Lucida Sans Typewriter, monospace;
	line-height: 150%
}

.submit {
	margin-top: 12px;
	float: right
}

.half {
	background-color: transparent;
	z-index: 10
}

.rotate_handle {
	z-index: 100
}

.zero-level--clone {
	position: absolute;
	width: 100%;
	height: 0
}

.zero_handler {
	padding: 4px 6px 4px 7px;
	border-radius: 50%;
	width: 40px;
	top: -17px;
	left: 100%;
	display: flex;
	justify-content: center;
	align-items: center
}

.zero_handler svg {
	width: 30px;
	height: 30px;
	fill: #fff
}

.cutting-level {
	position: absolute;
	width: 100%;
	height: 0;
	z-index: 200
}

.cutting-level--clone {
	border-bottom: 1px dashed red
}

.hidden {
	display: none !important
}

.overlay {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .7);
	z-index: 999
}

.loader,
.overlay {
	position: absolute;
	top: 0;
	left: 0
}

.loader {
	right: 0;
	bottom: 0;
	margin: auto;
	width: 300px;
	height: 150px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 7px;
	box-shadow: 3px 3px 5px rgba(0, 0, 0, .8);
	z-index: 1000;
	background-color: #eee;
	font-size: 24px;
	color: rgba(0, 0, 0, .6);
	letter-spacing: .5px
}

.overlapped-timber {
	background-color: red !important;
	box-shadow: 0 0 3px 8px red;
	opacity: .7;
	z-index: 1000
}

#main-workWrapper {
	position: relative;
	width: 1180px;
	height: 717.5px
}

.working-area {
	padding-top: 100px !important
}

@media screen and (min-width:960px) {
	#main-content {
		zoom: .5
	}
}

@media screen and (min-width:1280px) {
	#main-content {
		zoom: .6
	}
}

@media screen and (min-width:1530px) {
	#main-content {
		zoom: .8
	}
}

@media screen and (min-width:1740px) {
	#main-content {
		zoom: .9
	}
}

@media screen and (min-width:1920px) {
	#main-content {
		zoom: 1
	}
}

@media screen and (min-width:2400px) {
	#main-content {
		zoom: 1.2
	}
}

@media screen and (min-width:2560px) {
	#main-content {
		zoom: 1.3
	}
}

@media screen and (min-width:3000px) {
	#main-content {
		zoom: 1.6
	}
}

@media screen and (min-width:3400px) {
	#main-content {
		zoom: 1.7
	}
}

@media screen and (min-width:3840px) {
	#main-content {
		zoom: 2
	}
}

@media screen and (min-width:4096px) {
	#main-content {
		zoom: 2.1
	}
}

@media screen and (min-width:5120px) {
	#main-content {
		zoom: 2.6
	}
}

@media screen and (min-width:5760px) {
	#main-content {
		zoom: 3
	}
}

@media screen and (min-width:6144px) {
	#main-content {
		zoom: 3.2
	}
}

@media screen and (min-width:7680px) {
	#main-content {
		zoom: 4
	}
}