body {
	/* background-color: #0062CC; */
	line-height: 0;
	z-index: -1;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	background-color: white;
	-webkit-tap-highlight-color: transparent;
}

html,
body {
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
}

.animate1 {
	position: relative;
	display: none;


	cursor: none;
	/* width: 6.26rem; */
	/* height: 4.7rem; */
	margin: 0 auto;
	z-index: 2000;
}

.bgc {
	position: relative;
	/* margin: 0 auto; */
	background-color: #E4F0E2;
	/* width: 970px; */
	/* height: 728px; */
	z-index: 10;
}



.title {
	cursor: initial;
	width: 100%;
	height: 12%;
	position: absolute;
	top: 0rem;
	left: 0rem;
	z-index: 10;
}

.shadow-div {
	width: 16%;
	height: 8%;
	position: absolute;
	top: 1%;
	left: 0.5%;
	box-shadow: 0.1rem -0.003rem 0.12rem #000000;
	z-index: 1;
}

img,
button {
	cursor: pointer;
	transition: width 0s, height 0s, background 0s, transform 0s;
}

.foot {
	width: 26%;
	position: absolute;
	bottom: 0rem;
	left: 0rem;
	cursor: pointer;
	z-index: 10;
}

.shadow-div-foot {
	width: 16%;
	height: 3%;
	position: absolute;
	bottom: 1.6%;
	left: -0%;
	box-shadow: 0.08rem -0.005rem 0.2rem #F2F2F2;
	z-index: 1;
}

.left {
	position: absolute;
	background-color: #F0F6EF;
	width: 15.5%;
	height: 83%;
	top: 10%;
	left: 0rem;
	box-shadow: 0.04rem 0 0.1rem #D1DACF;
}

.zt,
.zhuiti,
.ts,
.zj1,
.dl,
.cs,
.lt {
	/* background-size: 1rem 0.7rem; */
	width: 63%;
	height: 12%;
	border: none;
	transition: width 0s, height 0s, background 0s, transform 0s;
	left: 18%;
}

.lt {
	left: 19%;
	top: 3%;

	width: 63%;
	height: 11%;
	background: url(../imgs/liti.png) no-repeat;
	background-size: 100% 100%;
	position: absolute;

}

.lt-hover {
	transform: scale(1.05);
	background: url(../imgs/liti3.png) no-repeat;
	background-size: 100% 100%;
	/* left: 17%; */
}

.lt-focus {
	/* top: 2%;
	left: 15.5%; */
	transform: scale(1.05);
	background: url(../imgs/liti2.png) no-repeat;
	background-size: 100% 100%;
}

.selectTyle2 {
	display: none;
	background: url(../imgs/select1.png) no-repeat;
	background-size: 100% 110%;
	width: 150%;
	height: 13%;
	position: absolute;
	left: 78%;
	top: 1.5%;
	z-index: 8;
}

.zt,
.zhuiti {
	position: absolute;
	width: 43%;
	height: 78%;
	top: 21%;
}


.zt {
	left: 8%;
	transform: scale(1);
	background-position: center;
	background: url(../imgs/jiaozhui1.png) no-repeat;
	background-size: 100% 100%;
}

.zt-hover {
	transform: scale(1.05);
	background: url(../imgs/jiaozhui2.png) no-repeat;
	background-size: 100% 100%;
}

.zt-focus {
	transform: scale(0.96);
	background: url(../imgs/jiaozhui3.png) no-repeat;
	background-size: 100% 100%;
}

.zhuiti {
	left: 52%;
	transform: scale(1);
	background: url(../imgs/yuanzhu1.png) no-repeat;
	background-size: 100% 100%;
}

.zhuiti-hover {
	transform: scale(1.05);
	background: url(../imgs/yuanzhu2.png) no-repeat;
	background-size: 100% 100%;
}

.zhuiti-focus {
	transform: scale(0.96);

	background: url(../imgs/yuanzhu3.png) no-repeat;
	background-size: 100% 100%;
}

.zt-hover,
.zt-focus,
.zhuiti-hover,
.zhuiti-focus {
	top: 18%;
}

.heng {
	background-color: #FFFFFF;
	width: 45%;
	height: 0.025rem;
	border-radius: 10%;
	position: absolute;
	left: 27%;
	top: 16.2%;
}

.ts {
	position: absolute;
	top: 18.5%;
	left: 18%;

	background: url(../imgs/toushi1.png) no-repeat;
	background-size: 100% 100%;
}

.ts-hover {
	transform: scale(1.05);
	background: url(../imgs/toushi2.png) no-repeat;
	background-size: 100% 100%;
}

.ts-focus {
	transform: scale(1.05);
	background: url(../imgs/toushi3.png) no-repeat;
	background-size: 100% 100%;
}

.zj1 {
	position: absolute;
	top: 33%;
	left: 18%;

	background: url(../imgs/zhijia2.png) no-repeat;
	background-size: 100% 100%;
}

.zj1-hover {
	transform: scale(1.05);
	background: url(../imgs/zhijia1.png) no-repeat;
	background-size: 100% 100%;
}

.zj1-focus {
	transform: scale(1.05);
	background: url(../imgs/zhijia3.png) no-repeat;
	background-size: 100% 100%;
}

.hui {
	display: none;
	background: url(../imgs/zhijia.png) no-repeat;
	background-size: 100% 100%;
	width: 63%;
	height: 11.2%;
	position: absolute;
	left: 16.8%;
	top: 33.3%;
}

.dl {
	position: absolute;
	top: 47%;
	left: 17%;

	width: 64.5%;
	height: 12.25%;
	background: url(../imgs/dingLengmian1.png) no-repeat;
	background-size: 100% 100%;

}

.dl-hover {
	transform: scale(1.05);

	background: url(../imgs/dingLengmian2.png) no-repeat;
	background-size: 100% 100%;
}

.dl-focus {
	transform: scale(1.05);

	background: url(../imgs/dingLengmian3.png) no-repeat;
	background-size: 100% 100%;
}

.selectTyle {
	display: none;
	background: url(../imgs/select1.png) no-repeat;
	background-size: 100% 100%;
	width: 140%;
	height: 11.3%;
	position: absolute;
	top: 47.6%;
	left: 78%;
	z-index: 50;
}



.d,
.l,
.m,
.gray,
.grays {
	width: 29%;
	height: 88%;
	top: 7%;
	border: none;
	z-index: 11;
	transition: width 0s, height 0s, background 0s, transform 0s;
	position: absolute;
}

.d,
.gray {
	left: 7%;
	background: url(../imgs/ding1.png) no-repeat;
	background-size: 100% 100%;
}

.d-hover {
	transform: scale(1.05);

	background: url(../imgs/ding3.png) no-repeat;
	background-size: 100% 100%;
}

.d-focus {
	transform: scale(1.05);

	background: url(../imgs/ding2.png) no-repeat;
	background-size: 100% 100%;
}

.gray {
	z-index: 100;
	display: none;
	background: url(../imgs/dingGray2.png) no-repeat;
	background-size: 100% 100%;
}

.l,
.grays {
	left: 36%;
	background: url(../imgs/leng1.png) no-repeat;
	background-size: 100% 100%;
}

.l-hover {
	transform: scale(1.05);
	background: url(../imgs/leng3.png) no-repeat;
	background-size: 101% 101%;
}

.l-focus {
	transform: scale(1.05);

	background: url(../imgs/leng2.png) no-repeat;
	background-size: 101% 101%;
}

.grays {
	z-index: 100;
	display: none;
	background: url(../imgs/lengGray.png) no-repeat;
	background-size: 100% 100%;
	/* background-position-x: -0.01rem; */
}

.m {
	left: 65%;
	background: url(../imgs/mian1.png) no-repeat;
	background-size: 100% 100%;
	position: absolute;
}

.m-hover {
	transform: scale(1.05);

	background: url(../imgs/mian3.png) no-repeat;
	background-size: 101% 101%;
}

.m-focus {
	transform: scale(1.05);

	background: url(../imgs/mian2.png) no-repeat;
	background-size: 101% 101%;
}

.two {
	position: absolute;
	top: 60.5%;
}

.jietu~img,
.cs~img,
.wenhao~img {
	display: none;
	position: absolute;
	left: 68%;

	height: 5.1%;
}

.jietu:hover~img,
.cs:hover~img,
.wenhao:hover~img {
	display: block !important;
}

.jietu:active~img,
.wenhao:active~img,
.cs:active~img {
	display: none;
}

.jietu~img {

	top: 68%;
}

.cs~img {
	top: 79%;
}

.wenhao~img {
	top: 91%;
}

.jietu,
.cs,
.wenhao {
	position: absolute;
	width: 37%;
	height: 9.2%;
	left: 30%;
	cursor: pointer;
	border: none;
	transition: width 0s, height 0s, background 0s, transform 0s;
}

.jietu:hover,
.wenhao:hover,
.cs:hover {
	transform: scale(1.1);
}

.jietu:active,
.wenhao:active,
.cs:active {
	transform: scale(1.1);
}



.jietu {
	top: 63%;
	background: url(../imgs/jietu1.png) no-repeat;
	background-size: 100% 100%;
}

.jietu:active {
	background: url(../imgs/jietu2.png) no-repeat;
	background-size: 100% 100%;
}

.cs {
	top: 74.3%;
	background: url(../imgs/cs1.png) no-repeat;
	background-size: 100% 100%;
}

.cs:active {
	background: url(../imgs/cs2.png) no-repeat;
	background-size: 100% 100%;
}

.three {
	position: absolute;
	left: 0.45rem;
	top: 3.45rem;
}

.wenhao {
	background: url(../imgs/shuoming1.png) no-repeat;
	background-size: 100% 100%;
	top: 86%;
}

.wenhao:active {
	background: url(../imgs/shuoming2.png) no-repeat;
	background-size: 100% 100%;
}

/* left btn  end */
/* 中间部分 */
.canvasBg {
	cursor: initial;
	width: 57.5%;
	height: 77.5%;
	position: absolute;
	top: 13.5%;
	left: 18.1%;
	z-index: -3;
}

.up,
.down {
	position: absolute;
	width: 8%;
	height: 6%;
	border: none;
	z-index: 30;
}

.left1,
.right {
	position: absolute;
	width: 0.4rem;
	height: 0.5rem;
	border: none;
	z-index: 30;
}

.up {
	background: url(../imgs/p41-jiantou0001.png) no-repeat;
	background-size: 100% 100%;
	top: 16.8%;
	left: 43%;
}

.down {
	background: url(../imgs/p41-jiantou30001.png) no-repeat;
	background-size: 100% 100%;
	top: 81%;
	left: 43%;
}

.left1 {
	background: url(../imgs/p41-jiantou10001.png) no-repeat;
	background-size: 100% 100%;
	top: 46%;
	left: 20%;
}

.right {
	background: url(../imgs/p41-jiantou20001.png) no-repeat;
	background-size: 100% 100%;
	top: 46%;
	left: 66.5%;
}

.center {
	cursor: initial;
	/* .canvasBg background-color: white; */
	position: absolute;
	top: 15%;
	left: 20%;
	width: 53%;
	height: 73%;
	z-index: -3;
}

/* 中间end */


/* 答题版 */

.dati {
	background: url(../imgs/answer.png) no-repeat;
	background-size: 100% 100%;
	width: 22%;
	height: 72%;
	border-radius: 0.1rem;
	position: absolute;
	top: 14%;
	left: 76.5%;
	/* background-color: #F0F6EF; */
	/* box-shadow: 0.0025rem 0.0025rem 0.1rem #B5B5B5; */
}



/* .txName::before{
	content: "正方體";
} */
.add,
.reduce,
.addGray,
.reduceGray {
	width: 20%;
	height: 8%;
	border: none;
	left: 39.5%;
}

.add,
.addGray {
	top: 29%;
}

.add {
	background: url(../imgs/add.png) no-repeat;
	background-size: 100% 100%;
	position: absolute;
	transition: width 0.2s, height 0.2s, background 0.2s, transform 0.2s;
}

.addGray {
	cursor: default;
	display: none;
	background: url(../imgs/addGray.png) no-repeat;
	background-size: 100% 100%;
	position: absolute;
}

.add-hover {
	background: url(../imgs/add-hover.png) no-repeat;
	background-size: 100% 100%;
}

.add-focus {
	background: url(../imgs/add-focus.png) no-repeat;
	background-size: 100% 100%;
}

.reduce,
.reduceGray {
	top: 50%;
}

.reduce {
	background: url(../imgs/reduce.png) no-repeat;
	background-size: 100% 100%;
	position: absolute;
	transition: width 0.2s, height 0.2s, background 0.2s, transform 0.2s;
}

.reduceGray {
	cursor: default;
	display: none;
	background: url(../imgs/reduceGray.png) no-repeat;
	background-size: 100% 100%;
	position: absolute;
	transition: width 0.2s, height 0.2s, background 0.2s, transform 0.2s;
}

.reduce-hover {
	background: url(../imgs/reduce-hover.png) no-repeat;
	background-size: 100% 100%;
}

.reduce-focus {
	background: url(../imgs/reduce-focus.png) no-repeat;
	background-size: 100% 100%;
}

.txName {
	width: 39%;
	position: absolute;
	top: 9%;
	left: 29%;
	cursor: default;
}

.answer-bgm {
	display: inline-block;
	width: 97.5%;
	position: absolute;
	top: 38%;
	text-align: center;
}

.answer-bgm img {
	width: 27%;
	height: 11%;
}

.answer {
	position: absolute;
	top: 43%;
	width: 97.5%;
	text-align: center;
	/* left: 44.2%; */
	font-size: 0.35rem;
	color: #0176C2;
	font-family: "yayuan";
	font-weight: 500;
}

@media screen and (min-width:900) {
	.answer {
		font-size: 0.35rem;
	}
}

@media screen and (min-width:1024px) {
	.answer {
		font-size: 0.35rem;
	}
}

@media screen and (min-width:1120px) {
	.answer {
		font-size: 0.3rem;
	}
}

@media screen and (min-width:1220px) {
	.answer {
		font-size: 0.3rem;
	}
}

@media screen and (min-width:1420px) {
	.answer {
		font-size: 0.25rem;
	}
}

@media screen and (min-width:1520px) {
	.answer {
		font-size: 0.24rem;
	}
}

.answerType {
	/* display: inline-block; */
	width: 74%;
	height: 5%;
	position: absolute;
	top: 40.5%;
	left: 16.5%;
}

.mian {
	background: url(../imgs/sprite%202680001.png) no-repeat;
	background-size: 100% 100%;
	display: block;
}

.bian {
	background: url(../imgs/sprite%202680003.png) no-repeat;
	background-size: 100% 100%;
	display: none;
}

.dian {
	background: url(../imgs/sprite%202680002.png) no-repeat;
	background-size: 100% 100%;
	display: none;
}

.dui,
.cuo {
	width: 18%;
	display: none;
	position: absolute;
	top: 60%;
	left: 57%;
}

.hedui,
.zhanshi {
	width: 56%;
	height: 9%;
	border: none;
	left: 21.5%;
	transition: width 0.2s, height 0.2s, background 0.2s, transform 0.2s;
}

.hedui {
	background: url(../imgs/button%202480001.png) no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top: 73%;
}

.hedui:hover,
.hedui:active {
	transform: scale(1.02);
	background: url(../imgs/button%202480002.png) no-repeat;
	background-size: 100% 100%;
}

.zhanshi {
	background: url(../imgs/button%202440001.png) no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top: 83.5%;
}

.zhanshi:hover,
.zhanshi:active {
	transform: scale(1.02);
	background: url(../imgs/button%202440002.png) no-repeat;
	background-size: 100% 100%;
}



/* 答题版结束 */
/* 输出 */
.shuchu {
	width: 11.3%;
	height: 8.1%;
	border: none;
	background: url(../imgs/p1-output0001.png) no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top: 88%;
	left: 81.6%;
}

.shuchu:hover {
	transform: scale(1.008);
	background: url(../imgs/p1-output0002.png);
	background-size: 100% 100%;
}

.shuchu:active {
	transform: scale(1.008);
	background: url(../imgs/shuchu3.png);
	background-size: 100% 100%;
}

#anim_container {
	position: relative;
}

.modal-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.modal-center {
	/* display: flex !important; */
	justify-content: center;
	align-items: center;
}

.modal-center>.modal-center-content {
	/* margin: 18% auto; */
	/* display: flex;
	justify-content: center;
	align-items: center; */
	/* position: absolute; */
}

.modal4 {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	background-color: rgba(0, 0, 0, 0.5);
}

.modal-content4 {
	position: relative;

	width: 66%;
	height: 78%;
	border-radius: 0.05rem;
	-webkit-animation: zoom 1s;
	animation: zoom 0.8s;
	resize: both;
	/* overflow: auto; */
	background: url(../imgs/modal4.png) no-repeat;
	background-size: 100% 100%;
}


/* @-webkit-keyframes zoom {
	from {
		-webkit-transform: scale(0)
	}

	to {
		-webkit-transform: scale(1)
	}
}

@keyframes zoom {
	from {
		transform: scale(0)
	}

	to {
		transform: scale(1)
	}
}
 */


.modal-body4 {
	position: absolute;
	top: 11%;

	box-sizing: border-box;
	width: 96%;
	height: 49%;

	display: table-cell;
	vertical-align: middle;
	text-align: center;

	/* background-color: #E9F6FE; */
}

.modal-body4>img {

	z-index: 12;
	cursor: inherit;
}

.modal-footer4 {
	position: absolute;
	bottom: 3%;
	left: 0;
	width: 96%;
	height: 37%;
}

#sure4,
#cancel4,
.showPhoto {
	border: none;
	width: 20%;
	height: 33%;
	position: absolute;
	bottom: 14%;
}




#sure4 {
	background: url(../imgs/sure.png) no-repeat;
	background-size: 100% 100%;

	left: 13%;
}

#cancel4 {
	background: url(../imgs/cancel.png) no-repeat;
	background-size: 100% 100%;

	left: 69%;
}

.yulan {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}

.showPhoto {
	background: url(../imgs/yulan.png);
	background-size: 100% 100%;

	left: 41%;
}

.modal-footer4 label {
	position: absolute;

	width: 25%;
	height: 20%;
	font-weight: 600;
	color: #626060;
	text-align: center;
}

.selectColor1 {
	top: 23%;
	left: 16%;
}

.selectColor2 {
	top: 23%;
	right: 26%;
}

#single {
	display: none;
}

.modal-footer4 label>span {
	position: absolute;
	/* left: -10%; */
	width: 42%;
	height: 53%;
	text-align: center;
	margin-left: 8%;
	cursor: pointer;
	display: inline-block;
}

.selectColor1 span {
	background: url(../imgs/radio_colorful.png) no-repeat;
	background-size: 100% 100%;
}

.selectColor2 span {
	background: url(../imgs/radio_gary.png) no-repeat;
	background-size: 100% 100%;
}

.single span {
	background: url(../imgs/radio_sign.png) no-repeat;
	background-size: 100% 100%;
}

.modal-footer4 label>input[type="radio"] {
	cursor: pointer;
	opacity: 1;
	appearance: none;
	-webkit-appearance: none;
	outline: none;
	border: none;

	position: absolute;
	width: 14%;
	height: 55%;
}

.modal-footer4 label>input[type="radio"]:after {
	position: absolute;
	top: -15%;
	left: -80%;
	cursor: pointer;
	display: block;
	content: "";

	width: 100%;
	height: 100%;
	background: #fff;
	border-radius: 50%;
	border: 0.015rem solid #8E8E8E;
}

.modal-footer4 label>input[type="radio"]:checked:after {
	position: absolute;
	top: -15%;
	left: -80%;
	cursor: pointer;
	content: '';
	border: none;
	background: url(../imgs/shape%20225.png) no-repeat;
	background-size: 100% 100%;
	width: 133%;
	height: 122%;
}


.modal-footer4 .showPhoto:hover {
	background: url(../imgs/yulan1.png) no-repeat !important;
	background-size: 100% 100% !important;
	cursor: pointer;
}

.modal-footer4 .showPhoto:active {
	background: url(../imgs/yulan3.png) no-repeat !important;
	background-size: 100% 100% !important;
	cursor: pointer;
}

.modal-footer4 #sure4:hover {
	background: url(../imgs/queding.png) no-repeat !important;
	background-size: 100% 100% !important;
	cursor: pointer;
}

.modal-footer4 #sure4:active {
	background: url(../imgs/queding3.png) no-repeat !important;
	background-size: 100% 100% !important;
	cursor: pointer;
}

#cancel4:hover {
	background: url(../imgs/cancel1.png) no-repeat !important;
	background-size: 100% 100% !important;
	cursor: pointer;
}

#cancel4:active {
	background: url(../imgs/cancel3.png) no-repeat !important;
	background-size: 100% 100% !important;
	cursor: pointer;
}

/* 输出结束 */

/* 预览开始 */
.modal5 {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1100;
	background-color: rgba(0, 0, 0, 0.5);
}

.modal-content5 {
	position: relative;

	width: 66%;
	height: 81%;
	border-radius: 0.05rem;
	-webkit-animation: zoom 0.6s;
	animation: zoom 0.6s;
	resize: both;
	/* overflow: auto; */
	background: url(../imgs/modal5.png) no-repeat;
	background-size: 100% 100%;
}


@-webkit-keyframes zoom {
	from {
		-webkit-transform: scale(0)
	}

	to {
		-webkit-transform: scale(1)
	}
}

@keyframes zoom {
	from {
		transform: scale(0)
	}

	to {
		transform: scale(1)
	}
}

.modal-body5 {
	position: absolute;
	top: 11%;

	box-sizing: border-box;
	width: 96%;
	height: 68%;

	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.modal-body5>img {
	/* width: ; */
	cursor: inherit;
}


.modal-footer5 {
	position: absolute;
	bottom: 3%;
	left: 0;
	width: 96%;
	height: 18%;
}

#sure5 {
	background: url(../imgs/sure.png) no-repeat;
	background-size: 100% 100%;
	border: none;
	width: 20%;
	height: 65%;
	position: absolute;
	top: 19%;
	left: 43%;
}

.modal-footer5 #sure5:hover {
	transform: scale(1.01);
	background: url(../imgs/queding.png) no-repeat !important;
	background-size: 100% 100% !important;
	cursor: pointer;
}

.modal-footer5 #sure5:active {
	/* background-color: #95b4ed; */
	background: url(../imgs/queding3.png) no-repeat !important;
	background-size: 100% 100% !important;
	cursor: pointer;
}



/* modal */
/* modal1 */

.modal {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	background-color: rgba(0, 0, 0, 0.5);
}



.modal-content {
	position: relative;

	width: 67%;
	height: 67%;
	border-radius: 0.05rem;
	-webkit-animation: zoom 0.6s;
	animation: zoom 0.6s;
	resize: both;
	/* overflow: auto; */
	background: url(../imgs/modal1.png) no-repeat;
	background-size: 100% 100%;
}

@-webkit-keyframes zoom {
	from {
		-webkit-transform: scale(0)
	}

	to {
		-webkit-transform: scale(1)
	}
}

@keyframes zoom {
	from {
		transform: scale(0)
	}

	to {
		transform: scale(1)
	}
}


.modal-body {
	position: absolute;
	top: 15%;
	left: 4.5%;

	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;

	width: 89%;
	background-color: #E9F6FE;
}

.modal-body button {
	padding: 2%;
	margin: 3% 1.8%;
	width: 17%;

	background-color: #E9F6FE;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	border: 0.02rem solid #E9F6FE;
	border-radius: 8%;
}

.modal-body button img {
	width: 100%;
	height: 100%;
}


.modal-footer {
	position: absolute;
	bottom: 3%;
	left: 0;
	width: 96%;
	height: 18%;
}

#cancel,
#sure,
#cancel2,
#sure2,
.sure_gray1,
.sure_gray2 {
	border: none;
	top: 5%;
	width: 19.7%;
	height: 73%;
	position: absolute;
}

#cancel:active,
#cancel2:active,
#cancel3:active,
#sure4:active,
#cancel3:hover,
#sure:hover,
#sure3:hover,
#sure4:hover,
#cancel4:hover,
.showPhoto:hover,
#sure4:active,
#cancel4:active,
.showPhoto:active {
	transform: scale(1.02);
}

.sure_gray1 {
	left: 20%;
	z-index: 2;
	display: none;
}

.sure_gray2 {
	left: 20%;
	z-index: 2;
	display: block;
}

#sure {
	background: url(../imgs/sure.png) no-repeat;
	background-size: 100% 100%;
	left: 20%;
}

#cancel {
	background: url(../imgs/cancel.png) no-repeat;
	background-size: 100% 100%;
	left: 63%;
}

#sure:hover {

	background: url(../imgs/queding.png) no-repeat !important;
	background-size: 100% 100% !important;
	cursor: pointer;
}

#sure:active {

	background: url(../imgs/queding3.png) no-repeat !important;
	background-size: 100% 100% !important;
}

#cancel:hover {

	background: url(../imgs/cancel1.png) no-repeat !important;
	background-size: 100% 100% !important;
	cursor: pointer;
}

#cancel:active {

	background: url(../imgs/cancel3.png) no-repeat !important;
	background-size: 100% 100% !important;
	cursor: pointer;
}


/* model2 */

.modal2 {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	background-color: rgba(0, 0, 0, 0.5);
}

.modal-content2 {
	position: relative;

	width: 67%;
	height: 67%;
	border-radius: 0.05rem;
	-webkit-animation: zoom 0.6s;
	animation: zoom 0.6s;
	resize: both;
	/* overflow: auto; */
	background: url(../imgs/modal1.png) no-repeat;
	background-size: 100% 100%;
}


@-webkit-keyframes zoom {
	from {
		-webkit-transform: scale(0)
	}

	to {
		-webkit-transform: scale(1)
	}
}

@keyframes zoom {
	from {
		transform: scale(0)
	}

	to {
		transform: scale(1)
	}
}



.modal-body2 {
	position: absolute;
	top: 14%;
	left: 5%;

	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;

	width: 89%;
	background-color: #E9F6FE;
}

.modal-body2 button {
	padding: 2%;
	margin: 3.5% 5%;
	width: 18%;

	background-color: #E9F6FE;
	display: table;
	border: 0.02rem solid #E9F6FE;
}

.modal-body2 button:nth-child(4) {
	margin-left: 22%;
}

.modal-body2 button:nth-child(5) {
	margin-right: 22%;
}

.modal-body2 button img {
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	height: 100%;
}



.modal-footer2 {
	position: absolute;
	bottom: 3%;
	left: 0;
	width: 96%;
	height: 18%;
}

#sure2 {
	background: url(../imgs/sure.png) no-repeat;
	background-size: 100% 100%;
	left: 20%;
}

#cancel2 {
	background: url(../imgs/cancel.png) no-repeat;
	background-size: 100% 100%;
	left: 63%;
}

#sure2:hover {
	background: url(../imgs/queding.png) no-repeat !important;
	background-size: 100% 100% !important;
	cursor: pointer;
}

#sure2:active {
	background: url(../imgs/queding3.png) no-repeat !important;
	background-size: 100% 100% !important;
}

#cancel2:hover {
	background: url(../imgs/cancel1.png) no-repeat !important;
	background-size: 100% 100% !important;
	cursor: pointer;
}

#cancel2:active {

	background: url(../imgs/cancel3.png) no-repeat !important;
	background-size: 100% 100% !important;
	cursor: pointer;
}

/* model2 end */

/* MODEL 3 */
.modal3 {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	background-color: rgba(0, 0, 0, 0.5);
}

.modal-content3 {
	position: relative;

	width: 53%;
	height: 41%;
	border-radius: 0.05rem;
	-webkit-animation: zoom 0.6s;
	animation: zoom 0.6s;
	resize: both;
	/* overflow: auto; */
	background: url(../imgs/modal3.png) no-repeat;
	background-size: 100% 100%;
}


@-webkit-keyframes zoom {
	from {
		-webkit-transform: scale(0)
	}

	to {
		-webkit-transform: scale(1)
	}
}

@keyframes zoom {
	from {
		transform: scale(0)
	}

	to {
		transform: scale(1)
	}
}


.modal-footer3 {
	position: absolute;
	bottom: 17%;
	left: 0;
	width: 100%;
	height: 28%;
}

#sure3,
#cancel3 {
	border: none;
	position: absolute;
	width: 24%;
	height: 80%;
	top: 11%;
}

#sure3 {
	background: url(../imgs/sure.png) no-repeat;
	background-size: 100% 100%;
	left: 18%;
}

#cancel3 {
	background: url(../imgs/cancel.png) no-repeat;
	background-size: 100% 100%;

	left: 56%;
}

#sure3:hover {
	background: url(../imgs/queding.png) no-repeat !important;
	background-size: 100% 100% !important;
	cursor: pointer;
}

#sure3:active {
	background: url(../imgs/queding3.png) no-repeat !important;
	background-size: 100% 100% !important;
}

#cancel3:hover {
	background: url(../imgs/cancel1.png) no-repeat !important;
	background-size: 100% 100% !important;
	cursor: pointer;
}

#cancel3:active {
	background: url(../imgs/cancel3.png) no-repeat !important;
	background-size: 100% 100% !important;
	cursor: pointer;
}



/* MODEL3 END */



#info {
	width: 0 !important;
	height: 0 !important;
	cursor: pointer;
	position: absolute;
	text-align: center;

	top: 16.6%;
	left: 20.1%;
	z-index: -1;
}

#info>canvas {
	/* margin: 0 auto; */
	display: inline-block;
	z-index: 150;
}

.mui-btn,
button,
input[type=button],
input[type=reset],
input[type=submit] {
	padding: 0;
}

#showDati {
	display: none;
}


.mui-btn,
button,
input[type=button],
input[type=reset],
input[type=submit] {
	margin-bottom: 0;
	padding: 0;
	vertical-align: none;
	cursor: pointer;
	text-align: center;
	border: 0;
	border-radius: 0;
}

.mui-btn.mui-active:enabled,
.mui-btn:enabled:active,
button.mui-active:enabled,
button:enabled:active,
input[type=button].mui-active:enabled,
input[type=button]:enabled:active,
input[type=reset].mui-active:enabled,
input[type=reset]:enabled:active,
input[type=submit].mui-active:enabled,
input[type=submit]:enabled:active {
	background-color: transparent;
}

.modal-content2,
.modal-content {
	margin: 0.5rem auto;
}





/* MODEL 3 */
.modal6 {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	background-color: rgba(0, 0, 0, 0.5);
}

.modal-content6 {
	position: relative;
	width: 80%;
	height: 70%;
	border-radius: 0.05rem;
	-webkit-animation: zoom 0.6s;
	animation: zoom 0.6s;
	resize: both;
	/* overflow: auto; */
	background: url(../imgs/userguide_background.png) no-repeat;
	background-size: 100% 100%;
}


@-webkit-keyframes zoom {
	from {
		-webkit-transform: scale(0)
	}

	to {
		-webkit-transform: scale(1)
	}
}

@keyframes zoom {
	from {
		transform: scale(0)
	}

	to {
		transform: scale(1)
	}
}

.modal-body6 {
	position: absolute;
	bottom: 20%;
	left: 0;
	top: 20%;

	height: 63%;
	width: 100%;

	display: flex;
	align-items: center;
	justify-content: center;
}

.close6 {
	cursor: pointer;
	position: absolute;
	top: 1%;
	right: 1%;

	width: 12%;
	height: 18%;

	background: url(../imgs/close-sheet0.png) no-repeat;
	background-size: 100% 100%;
}

.close6:hover {
	background: url(../imgs/close-sheet1.png) no-repeat;
	background-size: 100% 100%;
}

.close6:active {
	background: url(../imgs/close-sheet2.png) no-repeat;
	background-size: 100% 100%;
}

.modal-body6 img {
	height: 100%;
	width: auto;
	margin: 0;
	padding: 0;
}

.modal-footer6 {
	position: absolute;
	bottom: 0%;
	left: 0;
	width: 100%;
	height: 20%;
}
.sure6-grad,
.cancel6-grad{
	z-index: 100;
	display: none;
}

#sure6,
#cancel6,
.sure6-grad,
.cancel6-grad {
	top: 13%;
	border: none;
	position: absolute;
    width: 10%;
    height: 87%;
}

#sure6,.sure6-grad {
	background: url(../imgs/sure6.png) no-repeat;
	background-size: 100% 100%;
	left: 2%;
}

#cancel6,.cancel6-grad  {
	background: url(../imgs/cancel6.png) no-repeat;
	background-size: 100% 100%;
	right: 2%;
}

#sure6:hover {
	background: url(../imgs/sure6-hover.png) no-repeat !important;
	background-size: 100% 100% !important;
	cursor: pointer;
}

#sure6:active {
	background: url(../imgs/sure6-active.png) no-repeat !important;
	background-size: 100% 100% !important;
}

#cancel6:hover {
	background: url(../imgs/cancel6-hover.png) no-repeat !important;
	background-size: 100% 100% !important;
	cursor: pointer;
}

#cancel6:active {
	background: url(../imgs/cancel6-active.png) no-repeat !important;
	background-size: 100% 100% !important;
	cursor: pointer;
}



/* MODEL3 END */