/*0013 18 OCT 2020*/
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;

  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html{
	overflow: hidden;
	height: 100%;
	width: 100%;
}
body{
	font-family: 'Arial', monospace;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #051015;;
	height: 100%;
	width: 100%;
	position: relative;
	color: #efefef;
	overflow: hidden;
	font-size: 16px;
}

#app-container{
	display: flex;
	height: 100%;
	width: 100%;
	max-width: 1200px;
	max-height: 900px;
	min-height: 250px;
	min-width: 250px;
	box-shadow: 0px 0px 15em #182828;
	border:  1px solid #2c2c2c;
}

#renderer-container{
	height: 100%;
	width: 100%;
	cursor: crosshair;
	overflow: hidden;
	position: relative;
}

#renderer-container > canvas{
	position: absolute;
	top:  -20%;
	left: 0;
	height: 120%;
	width: 100%;
}

#renderer-container.landscape{
	width: 50%;
}


#interface-container{
	position: absolute;
	bottom: 2%;
	z-index: 10;
	width: 100%;
	height: 270px;
	border-top: 1px solid red;
	border-bottom: 1px solid #a00000;
	background: rgba(0, 0, 0, 0.5);
	color: #b7b7b7;
	display: flex;
	justify-content: center;
	align-items: center;

}

#interface-wrapper{
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: flex-end;
	flex-direction: column;
	align-items: center;
	position: relative;
	min-height: 270px;
}



#draft-container{
	position: absolute;
	background: black;
	border-top: 1px solid red;
	height: calc(80px + 0.8vw);
	width: calc(190px + 3vw);
	bottom: 92%;
	border-radius: 5%;
	display: flex;
	justify-content: center;
	align-items: center;
}

#draft-label{
	position: absolute;
	bottom: -1.2em;
	left: 0;
	font-size: 0.7em;
	letter-spacing: 0.05em;
	width: 100%;
	text-align: center;
	color: #919191;

}

#draft-container > svg{
	display: block;
	width: 90%;
	/*width: 100px;*/

}

#interface-wrapper > h3 {
	font-weight: lighter;
	font-size: 0.75em;
	margin: 0.3em 0 0.7em;
	padding-left: 3%;
	letter-spacing: 0.1em;
	color: #919191;
}
#check-button{
	position: absolute;
	top:  15%;
	font-size: calc(0.75em + 0.75vh);
	padding: 0.25em 2em;
	background: #760000;
	border: 1px solid red;
	color: #aeaeae;
	border-radius: 3px;
	cursor: pointer;
}

#interface-container.landscape{
	height: 100%;
	width: 50%;
	justify-content: center;
	border: none;
	position: initial;
	bottom: initial;
	top: initial;
	left: initial;

}

.landscape #interface-wrapper{
	justify-content: space-around;
	max-width: 400px;
	max-height: 400px;
	transform-origin: center center;
	padding-bottom: 0;
	/*transform: scale(1.5);*/

}

.landscape #check-button,
.landscape #draft-container{
	position: relative;
	top: initial;
	bottom: initial;
	left: initial;
}

.landscape #draft-container{
	border: 1px solid #3e0000;
	margin-bottom: 3vh;
}
.landscape #draft-label{
	font-size: 0.9em;
	bottom:  -1.75em;

}

.number-slider{
	width: 100%;
	height: 70px;
	overflow: hidden;
	font-size: 20px;
	font-family: Arial;
	position: relative;
	user-select: none;
	background: #2c282859;
	padding: 0.5em 0;
	box-shadow: inset 0px -2px 5px rgba(0, 0, 0, 0.7), inset 0px 2px 5px rgba(0, 0, 0, 0.7);
	cursor: pointer;
	border:  1px solid #191919;
}

.number-slider:after{
	content: "";
	display: block;
	position: absolute;
	bottom: 0%;
	left: calc(50% - 15px);
	border: 15px solid transparent;

	border-bottom-color: red;
	transform: scaleX(0.5);

}

.number-slider-wrapper{
	white-space: nowrap;
	position: relative;
	height: 80%;
	margin-left: 50%;
	width: 100%;
}

.number-slider-unit{
	height: 100%;
	width: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateX(0);
}

.nsu-bar-group{
	position: absolute;
	top: 0;
	left: 0;
	height: 50%;
	width: 100%;
	display: flex;
}

.nsu-long-bar,
.nsu-short-bar{
	border-left: 1px solid red;
	height: 100%;
	width: 20%;
	margin-left: -0.5px;
}

.nsu-short-bar{
	height: 70%;
}

.nsu-label{
	position: absolute;
	width: 50%;
	left: -25%;
	top: 60%;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.number-slider-unit.max .nsu-short-bar{
	opacity: 0;

}

.nsu-meter{
	font-size: 0.5em;
	padding-bottom: 0.3em;
}

#meter-slider{
	height: 70px;
	font-size: 20px;
}
#meter-slider:after{
	bottom: initial;
	top:  0;
	transform: scaleX(0.5) rotate(180deg);
}

#centimeter-slider{
	letter-spacing: 0.06em;
}

.nsu-centimeter-value{
	font-size: 0.8em;
	transform: scaleX(0.8);
}

#centimeter-slider .nsu-bar-group{
	top: initial;
	bottom: 0;
	height: 15%;
}
#centimeter-slider .nsu-label{
	top: initial;
	bottom: 20%;

}
#centimeter-slider .nsu-short-bar{
	opacity: 0;
}








@keyframes check-border--entrance {
	 100% {
		 transform: rotateZ(315deg);
	}
}
 @keyframes check-symbol--entrance {
	 0% {
		 opacity: 0;
	}
}
 @keyframes check-top--entrance {
	 0% {
		 height: 0px;
	}
}
 @keyframes check-bottom--entrance {
	 0% {
		 width: 0px;
	}
}

.check-animated {
	 position: relative;
	 min-height: 2vw;
	 min-width: 2vw;
	 border-radius: 50%;
	 box-shadow: 0 10px 5px rgba(0, 0, 0, .02);
}
 .check-border, .check-symbol {
	 position: absolute;
}
 .check-border {
	 border: 2px solid #00B4D1;
	 border-right-color: transparent;
	 top: 0;
	 left: 0;
	 right: 0;
	 bottom: 0;
	 border-radius: 50%;
	 transform: rotateZ(-45deg);
	 animation: check-border--entrance 0.5s ease;
}
 .check-border::before, .check-border::after {
	 content: "";
	 width:  2px
	 height: 2px;
	 background: #00B4D1;
	 position: absolute;
}
 .check-border::before {
	 top: 9px;
	 right: 11px;
	 border-radius: 0 50% 50% 50%;
}
 .check-border::after {
	 bottom: 9px;
	 right: 11px;
	 border-radius: 50% 50% 50% 0%;
}
 .check-symbol {
	 transform: rotateZ(45deg);
	 top: -15%;
	 right: 20%;
	 bottom: 30%;
	 left: 45%;
	 animation: check-symbol--entrance 0.4s ease;
}
 .check-top, .check-bottom {
	 position: absolute;
	 background: #00B4D1;
	 border-radius: 12px;
}
 .check-top {
	 width: 2px;
	 right: 0;
	 height: 100%;
	 bottom: 0;
	 animation: check-top--entrance 0.3s ease 0.3s backwards;
}
 .check-bottom {
	 height: 2px;
	 left: 0;
	 width: 100%;
	 bottom: 0;
	 animation: check-bottom--entrance 0.3s ease backwards;
}



.modal-container{
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: initial !important;
	bottom: 100% !important;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 2;
	transform: translateY(0);
}

.modal-container.active{
	transform: translateY(100%);
}

.modal-backdrop{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 1;
}

.modal-content{
	max-height: 100vh;
	z-index: 2;
}






.interface-modal{
	z-index: 999;
}

.interface-result{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 300px;
	height: 250px;
	border:  1px solid red;
	border-radius: 5px;
	transform: translateY(-15vh);
	background: #161a1d;
	text-transform: uppercase;
	color: #b9b9b9;
}

.interface-result.good{
	border:  1px solid #00b4d1;
}

.interface-result h3{
	font-size: 1.2em;
	font-weight: lighter;
	letter-spacing: 0.1em;
	color: #bf3434;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.interface-result.good h3{
	color: #14beda;
}

.result-animation{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100px;
	width: 100px;
	position: relative;
}

.result-table{
	margin-top: 1em;
	width: 90%;
	text-transform: initial;
	border-collapse: collapse;
	border: 1px solid rgba(0, 0, 0, 0.5);

}
.result-table td{
	height: 2em;
	padding: 0 0.5em;
	text-align: right;
}
.result-table .result-value{
	width: 50%;
	padding-right: 15%;
}
.result-table tr:nth-child(odd){
	background: rgba(0, 0, 0, 0.5);
}

.interface-result tr:nth-child(3){
	color: #bf3434;
}
.interface-result.good tr:nth-child(3){
	color: #14beda;
}
.interface-result .check-animated{
	position: absolute;
	top: 8px;
	width: 70px;
	height: 70px;
}

.interface-result svg{
	position: absolute;
	bottom: -10px;
	height: 120px;
}

#inaccurate-svg path{
	fill: #931212;
}

#good-thumb{
	opacity: 0.2;
	animation: good_opacity 50ms ease-out 100ms forwards;

}
#good-circle{
	opacity: 0.2;
	animation: good_opacity 50ms ease-out 100ms forwards;

}

#good-sparkle{
	transform-box: fill-box;
	transform-origin: center center;
	animation: good_sparkle 700ms ease-out 300ms forwards;
	opacity: 0;
	transform: scale(0.9);
}
#good-sparkle polygon{
	transform-box: fill-box;
	transform-origin: center center;
	transform: scale(1.2);
	animation: good_scale 700ms ease-out 300ms forwards;
}

#precise-arrow{
	transform-box: fill-box;
	transform-origin: center center;
	animation: precise_arrow 50ms ease-out 700ms forwards;
	transform: translate(150%, -150%);
	opacity: 0;
}

#precise-effect{
	transform-box: fill-box;
	transform-origin: center center;
	animation: precise_effect 100ms ease-out 750ms forwards;
	transform: scale(1);
	opacity: 0;
	stroke: #7e7015 !important;
}


@keyframes precise_effect{
	0% {
		transform: scale(1);
		opacity: 1;
	}
	100%{
		transform: scale(1.5);
		opacity: 0;
	}
}
@keyframes precise_arrow{
	0% {
		opacity: 0;
		transform: translate(150%, -150%);
	}
	10%{
		opacity: 1;
	}
	100%{
		opacity: 1;
		transform: translate(0, 0);
	}
}

@keyframes good_opacity{
	0% {
		opacity: 0.2;
	}
	100%{
		opacity: 1;
	}
}

@keyframes good_scale{
	0% {
		transform: scale(1.2);
	}
	100%{
		transform: scale(0);
	}
}
@keyframes good_sparkle{
	0% {
		opacity: 0;
		transform: rotate(0deg) scale(0.9);
	}
	100%{
		opacity: 1;
		transform: rotate(5deg) scale(1.2);
	}
}