* {
	margin: 0;
	padding: 0;
}

body {
	height: 100vh;
	/* background-color: #eff4fa; */

}

body.dark {
	background-color: #18171d;
}

nav {
	/* border: 1px solid red; */
}

nav button {
	width: auto;
	height: 40px;
	border-radius: 0;
	margin-left: 5px;
	padding-left: 10px;
	padding-right: 10px;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	position: relative;
	top: 2px;
	
	transition: .2s;
	top: 7px;
	z-index: 0;
	border: 1px solid #ced4da;
	border-bottom: none;
	background: #e7e7e7;
	color: #797979;
}

.dark nav button {
	border: 1px solid #4a465d;
	border-bottom: none;
	background: #201e28;
	color: #c3c3c3;
}

nav .active {
	transition: .2s;
	top: 1px;
	z-index: 1;
	background: #fff;
	color: #333;
}

.dark nav .active {
	background: #22202b;
	color: #fff;
}

#app {
	opacity: 0;
	transition: 200ms;
	/* border: 1px solid blue; */
}

red {
	color: red;
}

blue {
	color: #00aaff;
}

green {
	color: #00aa00;
}

gray {
	color: #999;
}

purple {
	color: #e646ff;
}

mark {
	padding-left: 3px;
	padding-right: 3px;
	margin-left: 2px;
	margin-right: 2px;
	border-radius: 3px;
	background-color: #f3f4f4;
	border: 1px solid #e7eaed;
	color: #666;
}

.dark mark {
	background-color: #35323f;
	border: 1px solid #3c3943;
	color: #acacac;
}




.sildeArea {

	display: flex;
	/* border: solid 1px red; */

	.outputs .output, .parameter-group {
		background-color: #fff;
		box-shadow: 0 5px 8px rgba(0, 0, 0, 0.1);
		border: solid 1px #dddddd;
		padding: 10px 15px 10px 10px;
		border-radius: 10px;
		position: relative;
	}

	.outputs .output, .parameter-group {
		display: none;
	}

	.parameter-group {
		width: 520px;
		/* margin-right: 15px; */
		/* z-index: 10; */
	}

	.outputs {
		display: none;
		position: relative;
		/* border: 1px solid red; */


		.output {
			overflow: hidden;

			legend {
				color: #333;
			}
		}

		#draw2D {
			position: relative;

			.setBox {
				width: 100px;
				/* height: 102.3%; */
				/* border: solid 1px red; */
				/* box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); */
				padding: 0px 10px 0px;
				position: absolute;
				top: -2.3%;
				right: 0;

				ul {
					list-style-type: none;
					padding-left: 0;
					font-size: 15px;
					color: #666;

					li {
						line-height: 28px;
						/* border: solid 1px red; */
					}
				}
			}

			.drawBoard {
				width: 100%;
				/* border: solid 1px red; */
			}

			.copyCommandBox {
				width: calc(100% - 20px);
				height: 40px;
				position: absolute;
				bottom: 3%;
				/* border: 1px solid red; */

				button {
					width: 48%;
					height: 100%;
					transition: 200ms;
					border: 1px solid transparent;
					border-radius: 3px;
				}

				button:nth-child(1) {
					float: left;
				}

				button:nth-child(2) {
					float: right;
				}

				button:hover {
					/* box-shadow: 0 0 0 0px rgba(0, 170, 255, 0.8); */
					background-color: #d3e9ff;
					border: solid 1px #00aaff;
				}
			}
		}
	}

	.outputs.active {
		display: block;
	}
}

.dark .sildeArea {
	.outputs .output, .parameter-group {
		background-color: #22202b;
		box-shadow: 0 5px 8px rgba(255, 255, 255, 0.1);
		border: solid 1px #4a465d;
	}

	.outputs {
		.output {
			legend {
				color: #d3d3d3;
			}
		}

		#draw2D {
			
			.setBox {

				ul {
					color: #666;
				}
			}

			.copyCommandBox {

				button {
					background-color: #353341;
					color: #b8b8b8;
				}

				button:hover {
					/* box-shadow: 0 0 0 0px rgba(0, 170, 255, 0.8); */
					background-color: #5d5b68;
					border: solid 1px #c1c1c1;
				}
			}
		}
	}

}

.sildeArea > .active, .sildeArea .outputs > .active {
	display: block!important;
}

.examples {
	width: 200px;
	/* height: 80%; */
	background-color: #fff;
	box-shadow: 0 5px 8px rgba(0, 0, 0, 0.1);
	border: solid 1px #dddddd;
	padding: 10px 15px 10px 10px;
	border-radius: 10px;

	overflow-y: auto;
	/* z-index: 10; */
	display: none;

	* {
		transition: all 550ms cubic-bezier(0.08, 0.3, 0, 1);
	}


	::-webkit-scrollbar {
		width: 2px;
		/* height: 15px; */
		/* background: #1d1d1d; */
	}

	::-webkit-scrollbar-thumb {
		background: #999;
		border-radius: 50px;
	}

	::-webkit-scrollbar-thumb:active {
		background: #3f3f3f;
	}

	ul {
		list-style-type: none;
		padding-left: 5px;
		margin: 0;
		/* border: solid 1px red; */
	}

	li {
		width: 100%;
		height: 45px;
		border-bottom: 1px solid #d5d5d5;
		color: #666;
	}

	li * {
		pointer-events: none;
	}

	li:hover {
		cursor: pointer;
		background-color: #f6f6f6;
	}

	li .img {
		width: 30px;
		height: 30px;
		margin: 7.5px;
		background-size: auto 100%;
		background-position: center center;
		float: left;
		border-radius: 2px;
	}

	li p {
		padding-top: 5px;
		margin: 0;
		font-size: 12px;
	}

	li span {
		font-size: 11px;
		opacity: 1;
	}

	

	li button {
		border: none;
		margin: 12.5px 0;
		float: right;
		padding-right: 2.5%;
		color: #666;
		background: none;
		border-radius: 2px;
		display: none;
		color: #00aaff;
	}

	li.active {
		background-color: #f4f4f4;

		button {
			display: block;
		}
	}

	.empty {
		color: #666;
		font-size: 14px;
		text-align: center;
		line-height: 50vh;
	}

	.endText {
		color: #d3d3d3;
		font-size: 14px;
		text-align: center;
	}
}

.examples.active {
	display: block;
}

.dark .examples {
	background-color: #22202b;
	box-shadow: 0 5px 8px rgba(255, 255, 255, 0.1);
	border: solid 1px #4a465d;

	legend {
		color: #d1d1d1;
	}

	::-webkit-scrollbar-thumb {
		background: #999;
	}

	::-webkit-scrollbar-thumb:active {
		background: #3f3f3f;
	}


	li {
		border-bottom: 1px solid #4a465d;
		color: #9f9f9f;

	}

	li:hover {
		background-color: #2f2d3c;
	}

	li button {
		color: #666;
		color: #bf9bff;
	}

	li.active {
		background-color: #2f2d3c;
	}

	.empty {
		color: #757575;
	}

	.endText {
		color: #454545;
	}
}

.tools {
	width: 95%;
	height: 26px;
	font-size: 13px;
	/* border: solid 1px red; */
	position: absolute;
	bottom: 5px;

	button {
		padding: 5px;
		width: auto;
		height: 100%;
		border: none;
		background-color: transparent;
		border-radius: 5px;
		transition: 240ms;
		color: #666;
	}

	button:hover {
		background-color: rgba(0, 0, 0, 0.05);
	}
	
	button:active {
		transform: scale(0.95);
	}
}

.dark .tools {
	button {
		color: #949494;
	}

	button:hover {
		background-color: rgba(255, 255, 255, 0.05);
	}
}



table {
	table-layout: fixed;
	transition: 300ms all;
	font-size: 13px;
	/* border: solid 1px red; */
}

table tr td:nth-child(1) {
	width: 18%;
	min-width: 73px;
	text-align: center;
}

table tr td {
	width: 20%;
	padding: 2.5px 4px 2.5px 4px;
	color: #666666;
	/* border: solid 1px red; */
}

.dark {
	table tr td {
		color: #919191;
	}
}


input[type="text"],
input[type="number"] {
	width: 90%;
	min-width: 50px;
	height: 25px;
	text-align: center;
	color: #666;
	padding: 2px 3px 2px 3px;
	/* border: 1px solid transparent; */
	border: solid 1px #ced4da;
	outline: none;
	border-radius: 5px;
	background: transparent;
	/* font-size: 12px!important; */
}

input[type="color"] {
	width: 96%;
	height: 30px;
	padding: 2px 3px 2px 3px;
	border-radius: 5px;
	border: solid 1px #c8c8c8;
	background: transparent;
}

input[type="range"] {
	width: 50%;
	position: relative;
	top: 4px;
}

input[type=radio],
input[type=checkbox] {
	transform: scale(1.3);
}

select {
	width: 96%;
	height: 30px;
	border: solid 1px #ced4da;
	color: #757575;
	border-radius: 5px;
	padding: 2px 3px 2px 3px;
	background: transparent;
}

select:focus {
	outline: #00aaff 1px solid;
	border: #00aaff 1px solid;
	box-shadow: 0 0 8px rgba(0, 170, 255, .3);
}

input[type="text"]:focus,
input[type="number"]:focus {
	/* border-top: solid 1px transparent;
		border-left: solid 1px transparent;
		border-right: solid 1px transparent;
		border-bottom: solid 1px #c8c8c8; */
	outline: #00aaff 1px solid;
	border: #00aaff 1px solid;
	box-shadow: 0 0 8px rgba(0, 170, 255, .6);
	transition: 200ms;
}



#xyz_tr {
	input[type="text"], input[type="number"] {
		width: calc(75% - 5px);
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		padding: 2px 0px 2px 0px;
		border-right: none;
	}

	td {
		.lock-btn {
			width: 25%;
			min-width: 25px;
			height: 30.33px;
			border: 1px solid #ced4da;
			border-top-right-radius: 5px;
			border-bottom-right-radius: 5px;

			i {
				pointer-events: none;
			}
		}
	}
}

.expression,
#SE {
	border-radius: 5px;
}

.expression {
	border: 1px solid #00aaff !important;
	width: calc(100% - 10px) !important;
}

#SE:focus {
	outline: #00aaff 1px solid !important;
	border: 1px solid #00aaff !important;
	box-shadow: 0 0 8px rgba(0, 170, 255, 0.5) !important;
}

#SE {
	border: 1px solid #ff55ff !important;
	width: calc(100% - 10px) !important;
}

#SE:focus {
	outline: #ff55ff 1px solid !important;
	border: 1px solid #ff55ff !important;
	box-shadow: 0 0 8px rgba(255, 85, 255, 0.5) !important;
}

#radio_vision_range {
	width: 148px;
	height: 28px;
	/* border: solid 1px transparent; */
	border-radius: 5px;
	line-height: 28px;
	transition: 300ms;
	padding: 2px 3px 2px 3px;
}

#radio_vision_range div {
	float: left;
	padding: 0 5px;
}

#radio_vision_range input {
	transform: translateY(1px) scale(1.3);
}


#grow_tr #grow {
	transition: 240ms;
}

#grow_tr .inactive {
	transform: translateX(-30%);
	opacity: 0;
	pointer-events: none;
}

#grow_tr #tdGrow {
	width: 115px;
	/* border: solid 1px red; */
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	transform: translateY(6px);
	transition: 200ms;
}

#tdGrow input {
	transform: scale(1.3);
}

#tdGrow td:nth-of-type(2) {
	transform: translateX(-100%);
}

#generate {
	width: 97%;
	height: 30px;
	border-radius: 5px;
	background-color: #00aaff;
	border: 1px solid #00aaff;
	color: #fff;
	transition: 100ms;
}

#generate:active {
	transform: translate(1px, 1px);
}

.dark {
	input[type="text"],
	input[type="number"] {
		color: #9a9a9a;
		border: solid 1px #4a465d;
	}


	input[type="color"] {
		border: solid 1px #4a465d;
	}

	select {
		border: solid 1px #4a465d;
		color: #9a9a9a;
	}

	select:focus {
		outline: #00aaff 1px solid;
		border: #00aaff 1px solid;
		box-shadow: 0 0 8px rgba(0, 170, 255, .3);
	}

	input[type="text"]:focus,
	input[type="number"]:focus {
		outline: #00aaff 1px solid;
		border: #00aaff 1px solid;
		box-shadow: 0 0 8px rgba(0, 170, 255, .6);
	}

	#xyz_tr {
		td {
			.lock-btn {
				background-color: #665e8b;
				border: 1px solid #4a465d;
			}
		}
	}

	.expression {
		border: 1px solid #007bb8 !important;
		width: calc(100% - 10px) !important;
	}

	#SE:focus {
		outline: #007bb8 1px solid !important;
		border: 1px solid #007bb8 !important;
		box-shadow: 0 0 8px rgba(0, 170, 255, 0.5) !important;
	}

	#SE {
		border: 1px solid #c241c2 !important;
		width: calc(100% - 10px) !important;
	}

	#SE:focus {
		outline: #c241c2 1px solid !important;
		border: 1px solid #c241c2 !important;
		box-shadow: 0 0 8px rgba(255, 85, 255, 0.5) !important;
	}

	#generate {
		background-color: #7055ae;
		border: 1px solid #7055ae;
	}
}


.tip {
	width: 220px;
	height: auto;
	background-color: #fff;
	position: fixed;
	border-radius: 5px;
	/* display: none; */
	border: 1px solid #bababa;
	z-index: 10;
	top: 0;
	left: 0;
	box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.3);
	transition: opacity 0.2s, transform 0.2s;
	opacity: 1;

	h4 {
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		background-color: #efefef;
		margin: 0;
		text-align: center;
		line-height: 2rem;
		font-weight: 500;
		color: #666;
	}

	.bi {
		position: absolute;
		padding: 2.5% 5%;
		color: #666;
	}

	.bgCover {
		width: calc(100% - 2px);
		height: 100%;
		background-color: #fff;
		border: solid 1px transparent;
		border-radius: 5px;

		p {
			font-size: 13px;
			padding: 5px;
			color: #666;
			/* text-indent: 2em; */
		}
	}

	hr {
		margin: 5px 0;
		border: 1px solid #bababa;
	}

	>.angle {
		width: 30px;
		height: 30px;
		background-color: #fff;
		border: 1px solid #bababa;
		position: absolute;
		bottom: -5px;
		left: 40px;
		z-index: -1 !important;
		transform: rotate(45deg);
	}
}

.tip.hide {
	opacity: 0;
	transform: scale(0.8);
}

.tip.error {
	background-color: #fff;
	box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
	border: 1px solid #ffc9c9;
	color: red;
}

.tip.error h4 {
	background-color: #ffeaea;
	color: #ff0000;
	background-image: url('../img/error.html');
}


.dark {
	.tip {
		background-color: #22202b;
		border: 1px solid #635e76;
		box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.3);
	
		h4 {
			background-color: #2f2c3b;
			color: #c0c1ce;
		}

		.bi {
			color: #c0c1ce;
		}

		hr {
			border: 1px solid #4e4a5b;
		}
	
		.bgCover {
			background-color: #20202b;
	
			p {
				color: #7a7a7a;
			}
		}
	
		>.angle {
			background-color: #22202b;
			border: 1px solid #635e76;
		}
	}
	
	.tip.error {
		background-color: #22202b;
		box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
		border: 1px solid #4a3b3b;
		color: red;
	}
	
	.tip.error h4 {
		background-color: #a59cce;
		color: #ff0000;
	}
}

.Messagebox {
	width: 250px;
	height: auto;
	padding: 5px;
	background-color: #d4edda;
	border: 1px solid #cee1d3;
	text-align: center;
	border-radius: 5px;
	color: #fff;
	font-size: 14px;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	opacity: 0;
	pointer-events: none;
	position: fixed;
	top: 5%;
	left: 50%;
	z-index: 999;
	overflow: hidden;
}



.flashTd {
	text-align: center;
}

#Fourier .container {
	width: 100%;
	height: 80%;
	max-height: 280px;
	/* border: solid 1px red; */
	overflow-y: auto;
}

#Fourier .RotorTitle {
	text-align: center;
	color: #666;
	font-weight: 700;
}

#Fourier table {
	table-layout: auto;
	overflow-y: auto;
	/* border: solid 1px red; */
}

#Fourier table th {
	color: #666;
}


#Fourier .add_and_delete_Rotor {
	width: 87.5%;
	display: flex;
	margin: 1% 0 2% 0;
	/* border: solid 1px red; */
	margin-left: 5%;
}

#Fourier .add_and_delete_Rotor button {
	width: 48%;
	height: 30px;
	margin: 0 1% 0 1%;
	border: 1px solid #b6b6b6;
	color: #333;
	border-radius: 5px;
	transition: 200ms;
}

#Fourier .add_and_delete_Rotor button:hover {
	background-color: #e2e2e2;
}

#Fourier .add_and_delete_Rotor button:nth-child(1) {
	float: left;
}

#Fourier .add_and_delete_Rotor button:nth-child(2) {
	float: right;
}

#Fourier .add_and_delete_Rotor button:nth-child(1):hover {
	color: red;
}

#Fourier .add_and_delete_Rotor button:nth-child(2):hover {
	color: #00aa7f;
}

.dark {
	#Fourier .RotorTitle {
		color: #666;
	}

	#Fourier table th {
		color: #666;
	}
	
	#Fourier .add_and_delete_Rotor button {
		border: 1px solid #585665;
		background-color: #484557;
		color: #c7c7c7;
	}
	
	#Fourier .add_and_delete_Rotor button:hover {
		background-color: #5f5b71;
	}
	
	#Fourier .add_and_delete_Rotor button:nth-child(1):hover {
		color: red;
	}
	
	#Fourier .add_and_delete_Rotor button:nth-child(2):hover {
		color: #00aa7f;
	}
}


/* 电脑屏幕 */
@media (min-width: 992px) {

	#app {
		position: fixed;
		top: calc(50% - 280px);
		left: calc(50% - 480px);
		/* transform: translate(-50%, -50%);	 */
	}

	.sildeArea {
		/* background-color: #c6ecff; */
		
		.parameter-group {
			margin-right: 15px;
		}

		.outputs {
			width: 23%;
			width: 320px;
			min-height: 400px;
			margin-right: 15px;
		}

		.output {
			height: calc(100% - 11px);
			top: -10px;
		}

		.examples {
			position: relative;
			/* top: -10px; */
		}
		
	}

	table {
		width: 90%;
		margin: 2% 0 0 4%;
	}
	
}


/* 平板屏幕 */
@media (min-width: 578px) and (max-width: 992px) {
	
	#app {
		position: relative;
		top: 10%;
		left: 2%;
		/* transform: translate(-50%, -50%);	 */
	}

	.sildeArea {
		/* background-color: #c6ecff; */
		
		.parameter-group {
			margin-right: 15px;
		}

		.outputs {
			width: 25%;
			min-height: 400px;
			margin-right: 15px;
		}

		.output {
			height: calc(100% - 11px);
			top: -10px;
		}
		
	}
}

/* 手机屏幕 */
@media (max-width: 577px) {


	nav {
		margin: 2% 0 0 2%;
	}

	.sildeArea {
		flex-wrap: wrap; /* 允许项目换行 */

		/* background-color: #c1fbec; */

		

		.parameter-group {
			margin: 0 2% 2% 2%;
		}

		.outputs {
			width: 100%;
			min-height: 180px;
			margin: 2%;
		}

		.output {
			width: calc(100% - 30px);
			height: calc(100% - 35px);
			top: 10px;
		}

		.examples {
			width: 100%;
			margin: 2%;

			/* 两列 */
			/* ul {
				display: flex;
				
				flex-wrap: wrap; 
			}

			li {
				width: 50%;
			} */
		}
	}

	table {
		width: 100%;
		/* margin: 2% 0 0 4%; */
	}

	#Fourier {
		min-height: 350px;
	}

}