// 字体
$fontFk:zk;
$fontLED:led;

//颜色
$white:#fff;
$inBlue:#02dcd3;
$inBlueHover:#07ffc1;
$inYellow:#ffd014;
$deepBlue:#0b293a;

//渐变
$GradualGreen:180deg, rgba($color: #091e36, $alpha: .8) , rgba($color: #061b27, $alpha: .8);


//内阴影
$shadowList: 0 0 1rem 0 rgba($color: #0b1b25, $alpha:.8);
$shadowTitle: 0 -0.2rem .5rem 0.3rem rgba($color: #19db3f, $alpha: .09) inset;
$shadowListHover:rgba($color: #0567c2, $alpha: .3) 0px 0px 50px inset;
$shadowListHoverI:0 0 3px rgba($color: #41ff84, $alpha: .5), -0 -0 10px rgba($color: #41fff8, $alpha: .9);

//可视化 数字林业
$fBlue:#03c6e2;
$fBlueHover:#07ffc1;
$fBlueG:#0bf3f7;
$fListTitle:#2ac6c6;
$barBgc: rgba($color: #051520, $alpha: .9);
$barShadow: rgba($color: #033551, $alpha: .5) 0px 0px 18px inset;
$barBorder: solid rgba($color: #134040, $alpha: .7);
//icon
$iconBg:#f5ad1b,#58b35d,#0FA2FF,#da8ec5,#78bfc2,#bec278,#ab1316;
$iconColor:#32e583,#f5ad1b,#da8ec5,#5f89ce,#78bfc2,#bec278,#f07779;

//状态
$state-wcl:#ff9c00;
$state-wyc:#1cef84;

//公共
body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

label {
  font-weight: 700;
}

html {
  height: 100%;
  box-sizing: border-box;
}

#app {
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.no-padding {
  padding: 0px !important;
}

.padding-content {
  padding: 4px 0;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

div:focus {
  outline: none;
}

.fr {
  float: right;
}

.fl {
  float: left;
}

.pr-5 {
  padding-right: 5px;
}

.pl-5 {
  padding-left: 5px;
}

.block {
  display: block;
}

.pointer {
  cursor: pointer;
}

.inlineBlock {
  display: block;
}
.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

aside {
  background: #eef1f6;
  padding: 8px 24px;
  margin-bottom: 20px;
  border-radius: 2px;
  display: block;
  line-height: 32px;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  color: #2c3e50;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  a {
    color: #337ab7;
    cursor: pointer;

    &:hover {
      color: rgb(32, 160, 255);
    }
  }
}
iframe{border: 0;}
*{padding: 0;
  margin: 0;
}
a{
	padding: 0;
	margin: 0;
}
ul{
	list-style:none;
}
.sj-container{
	width: 100%;
	height: 100vh;
}

div::-webkit-scrollbar {
		display: none;
}
.w-5{
	    width: 5.5rem;
}
.h-9{
	height: 9vh;
}
.h-30{
		height: 29vh;
}
.h-35 {
		height: 34vh;
}
.h-32{
		height: 31.6vh;
}
.h-25 {
		height: 25vh;
}

.h-26{
	height: 25vh !important;
}
.h-40 {
		height: 39vh;
}
.h-43{
		height: 42vh;
}
.h-60{
	height: 59vh;
}
.h-63{
  height: 62vh;
}
.h-67{
	    height: 66.5vh;
}
.h-80{
	    height: 80vh;
}
.m-r-1rem{margin-right: 1rem;}
.line-h-1{
	line-height: 1rem;
	
}
.w-100p{
	width: 100% !important;
	max-width: 100% !important;
}
.w-50{
	width: 50%;
}
.w-33{
	width: 33%;
}
.flex-d{
	flex-direction: column;
}
.a-item{
	align-items: center;
}
.icon-bigger{
		font-size: 2.4rem!important;
}
.no-padding{
		padding: 0;
}
.m-t-no{
	margin-top: 0!important;
}
.overflow-y{
	overflow-y: scroll;
}

.el-radio{
	margin-right: 1rem;
}
// .el-button{
// 	padding:.8rem 2rem
// }

// 一体化可视化模板
.visual-con {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		background: #020406;
		position: absolute;
		.bottom-btn{
			position: absolute;
			right: 100px;
			bottom: 50px;
			width: 10rem;
			height: 7rem;
			// background: url(/static/img/btn-six.695dcd53.png) no-repeat left;
			background-size: 100%;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			-webkit-transform: translateX(0px);
			transform: translateX(0px);
			-webkit-transition: all 0.5s ease-in-out;
			transition: all 0.5s ease-in-out;
			cursor: pointer;
			font-size: 1rem;
			color: $fBlueG;
		}
		.bottom-btn:hover{
			filter: brightness(2.3);
			-webkit-transform: translateX(-20px);
			transform: translateX(-20px);
			transition: all 0.5s ease-in-out;
		}
		.el-dropdown{
			span{
				color: $white;
				width: 100%;
				display: block;
				height: 40px;
				line-height: 40px;
				font-size: 12px;
			}
		}

		.el-form-item{
			margin-bottom: 1rem;
		}
.visual-body {
			width: 100%;
			display: flex;
			align-items: top;

			.leftbar,.rightbar {
				position: absolute;
				font-size: 14px;
				
				top: 10vh;
				width: 19rem;
				height: 85vh;
				display: flex;
				z-index: 1000;
				flex-direction: column;
				overflow-y: scroll;
			}
			.leftbar{
				left: .5rem;
			}
			.rightbar{
				right: .5rem;
			}
		}
}
.event-l-con {
				width: 100%;

				.this-content {
					width: 100%;
					font-size: 1rem;
					line-height: 2rem;
					padding-left: 15px;
					display: flex;
					padding: 1rem 1rem;
					background-image: -moz-linear-gradient($GradualGreen);
					background-image: -webkit-linear-gradient($GradualGreen);
					background-image: linear-gradient($GradualGreen);
					box-shadow: $shadowTitle;
					margin-bottom: 2vh;

					.icon {
						width: 3.2rem;
						display: flex;
						justify-content: center;
						align-items: center;
						height: 3.2rem;
						font-size: 1.8rem;
						border-radius: 100rem;
						text-align: center;
						color: $white;
						border: .2rem $barBorder;
						background: $deepBlue;
					}

					.text-con {
						width: 65%;
						padding-left: 1rem;
						display: flex;
						flex-direction: column;
						justify-content: center;

						h3 {
							font-weight: bolder;
							align-items: center;
							display: flex;
							justify-content: space-between;

							h4 {
								margin-left: 1rem;
								font-family: $fontLED;
								font-size: 1.5rem;

							}
						}

						.text-con-r {
							display: flex;
							justify-content: space-between;

							.icon-text {
								display: flex;
								font-size: .7;
								color: $fListTitle;
								align-items: center;
								padding: .5rem 0 0 0;

								h5 {
									font-size: .8rem;
									line-height: 1rem;
									margin-right: .3rem;
								}

								h6 {
									font-size: 1rem;
									line-height: 1rem;
									font-family: $fontLED;
									color: $fBlue;
								}
							}

							span {
								font-family: $fontLED;
								color: $fBlueG;
								display: flex;
								align-items: center;

								img {
									width: 21px;
									height: 21px;
									margin-right: 5px;
								}

							}

							span:nth-child(2) {
								font-size: 1.5rem;
							}
						}

					}


				}

				@each $c in $iconColor {
					$i: index($iconColor, $c); // 获取 $c 在数组中的索引，并赋值给 $i 赋值用冒号，不是等号~！

					.this-content:nth-child(#{$i}) .icon {
						// 经典的地方来了，SCSS 循环是从 1 开始，不是 0 哦~
						color: $c; // 背景色

						&:hover {
							color: lighten($c, 10%); // hover 后的颜色
						}
					}
				}

				@each $f in $iconColor {
					$i: index($iconColor, $f); // 获取 $c 在数组中的索引，并赋值给 $i 赋值用冒号，不是等号~！

					.this-content:nth-child(#{$i}) .text-con h3 {

						// 经典的地方来了，SCSS 循环是从 1 开始，不是 0 哦~
						color: $f; // 背景色

						&:hover {
							color: lighten($f, 10%); // hover 后的颜色
						}
					}
				}

			}
.forthis {
				margin-bottom: 2vh;
				-moz-border-radius-topleft: 0;
				-moz-border-radius-bottomright: 0;
				background-color: $barBgc;
				box-shadow: $barShadow;
				border: 1px $barBorder;


				.map-con{
					height:100%!important;
					position: relative!important;
				}


				.this-title {
					width: 100%;
					font-size: 1rem;
					height: 4vh;
					line-height: 4vh;
					padding-left: .5em;
					display: flex;
					justify-content: space-between;
					padding: 0 12px;
					background-image: -moz-linear-gradient($GradualGreen);
					background-image: -webkit-linear-gradient($GradualGreen);
					background-image: linear-gradient($GradualGreen);
					box-shadow: $shadowTitle;

					span {
						font-family: $fontLED;
						color: $fBlueG;
						display: flex;
						align-items: center;

						img {
							width: 21px;
							height: 21px;
							margin-right: 5px;
						}

					}

					span:nth-child(2) {
						font-size: 1.5rem;
					}

				}

				.i-list-con {
					width: 100%;
					overflow-y: scroll;
					padding: .3rem;
					margin-bottom:0.8rem;
					.this-child {
						width: 100% !important;

						.d-l-l-text {
							padding-left: 1.1rem !important;
							width: auto !important;
						}

					}


					.this-con {
						width: 100%;
						padding: 1rem;
						height: 62vh;
						overflow-y: scroll;
						overflow-x: hidden;
						display: flex;
						flex-direction: column;

						.this-con-list-info {
							padding-bottom: 1rem;
							float: left;
							color: #6da0c3;
						}

						.this-con-list {
							padding: 2rem 0;
							height: auto;
							float: left;
							border-bottom: 1px solid #094268;

						}

						.this-con-list:first-child {
							padding-top: 0;

						}

						.this-con-list:last-child {
							border-bottom: 0;

						}

						.z-begin {
							padding: 5px 10px;
							color: #fff;
							background: #3c84b5;
							border-radius: 5px;
							margin-bottom: 10px;
							margin: 0 auto;
						}

						.z-info-list {
							width: 100%;
							margin-top: 2rem;
							display: flex;
							img {
								border-radius: .3rem;
							}

							.z-info-list-con {
								width: 85%;
								display: flex;
								flex-direction: column;
								margin-left: 1rem;

								.z-info {
									padding: 1rem;
									background: #102a3c;
									margin-top: 1rem;
									border-radius: .3rem;
									display: flex;
									flex-direction: column;
								}
							}
						}
					}

					.mg-t-8 {
						margin-top: 8px;
					}

					.user-and-time {
						display: flex;
						align-items: center;

						span:first-child {
							font-size: .8rem;
							color: #01d1eb;
							font-weight: bolder;
							display: inline-block;
						}

						span:last-child {
							font-size: .8rem;
							color: #6da0c3;
							display: inline-block;
							margin-left: 1rem;
							padding-top: .2rem;
						}

						h6 {
							margin: 0;
						}
					}

				}


			}
			.d-l-con {
				font-size: .7rem;
				cursor: pointer;
				display: flex;
				align-items: center;
				padding: .6rem .5rem;
				box-shadow: $shadowList;
				flex-wrap: wrap;
				@each $c in $iconBg {
					$i: index($iconBg, $c); // 获取 $c 在数组中的索引，并赋值给 $i 赋值用冒号，不是等号~！
				
					.icon-con:nth-child(#{$i}) .icon {
						// 经典的地方来了，SCSS 循环是从 1 开始，不是 0 哦~
						background: $c; // 背景色
				
						&:hover {
							background: lighten($c, 10%); // hover 后的颜色
						}
					}
				}
				.icon-con{
					display: flex;
					margin-bottom: 1rem;
					align-items: center;
					.icon-dot{
						width: 1rem;
						height: 1rem;
					}
					.icon-small{
						width: 1.5rem;
						height: 1.5rem;
						font-size: 1rem;
					}
					.icon-mid{
						width: 2.5rem;
						height: 2.5rem;
						font-size: 1.5rem;
					}
					.icon-large{
						width: 3rem;
						height: 3rem;
						font-size: 2rem;
					}
					.icon {
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: .4rem;
						text-align: center;
						color: $white!important;
						border: .2rem $barBorder;
					}
					h3 {
						font-size: .8rem;
						line-height: 1rem;
						color: $fListTitle;
						margin-top: .5rem;
					}
					
					.icon-text {
						display: flex;
						flex-direction: column;
						justify-content: center;
						font-size: .7;
						color: $fListTitle;
						padding: 0 1.5rem 0 .5rem;
						h5 {
							font-size: .8rem;
							line-height: 1rem;
							margin-right: .3rem;
						}
					
						h6 {
							font-size: 1.2rem;
							font-family: $fontLED;
							color: $fBlue;
						}
					}
					
				}

				.el-tag--dark {
					border: 0
				}

				.list-tit {
					color: $fListTitle !important;
					font-size: 0.5rem !important;
					font-weight: normal;
					display: block;
					max-width: 90%;
				}

				.d-l-l-text {
					width: 58%;
					display: flex;
					align-items: center;
					flex: 1;

					h4 {
						font-size: .7rem;
						margin: 0;
						color: $fListTitle;
						font-weight: normal;
						display: block;
						max-width: 90%;
						line-height: 1rem;

					}
					i{
					 margin-right: .6rem;
					}

					.i-small {
						width: .5rem;
						height: .5rem;
						display: inline-block;
						background: #2ee0fb;
					}
					.icon-sxt{
						color: yellow;
						font-size: 1rem;
						display: inline-block;
						background: none;
					}

				}
				.state-wcl , .state-wyc{
					font-size: 0.7rem!important;
					    margin: 0;
					    font-weight: normal;
					    display: block;
					    max-width: 90%;
				}
				.state-wcl{
					color:$state-wcl!important ;
				}
				.state-wyc{
					color:$state-wyc!important ;
				}

				.d-l-l-count {
					width: 25%;
					font-size: 1.2rem;
					text-align: right;
					font-family: $fontLED;
					color: $fBlueG;
				}
				
			

			}
			.d-l-con:hover,
			.on {
				// background: linear-gradient(to left, #051d2b, #006ec8, #051d2b);
				box-shadow: $shadowListHover;

				h4 {
					color: $white;
					font-weight: normal;
				}

				.i-small {
					box-shadow: $shadowListHoverI;
				}
				.icon-sxt{
					color: #ff9c11;
				}

				span {
					color: $white;
				}


			}

//一体化弹层

//覆盖elementUI

// .el-dialog:not(.is-fullscreen) {
//     margin-top: 15vh !important;
// }

//   .dialog-con::-webkit-scrollbar {
//     display: none;
//   }

//   .el-dialog {
//     background: #04080c;
//     box-shadow: rgba($color: #033551, $alpha: 1.0) 0px 0px 18px inset;
// 	border: 1px $barBorder;
//   }

//   .el-dialog__header {
//     padding: 15px 20px !important;
// 	background-image: -moz-linear-gradient($GradualGreen);
// 	background-image: -webkit-linear-gradient($GradualGreen);
// 	background-image: linear-gradient($GradualGreen);
// 	box-shadow: $shadowTitle;

//     .el-dialog__title {
//       font-weight: bolder;
//       color: #3cd7ef;
//     }
//   }


  .el-main {
    background-color: #E9EEF3;
    color: #333;
    height: 100vh;
    padding: 0;

    .ol-attribution ul {
      display: none
    }

    .ol-rotate,
    .ol-attribution,
    .ol-zoom {
      width: -webkit-fit-content;
    }
	}


  .el-dialog__body {
    padding: 1rem;
  }

  .el-tree {
    background: none;

  }
  //下拉菜单
  .el-dropdown-menu--medium{
  	 .el-dropdown-menu__item{
  		 font-size: 12px!important;
  	 }
  }

//树
  // .el-tree__empty-text {
  //   color: #3cd7ef;
  // }

  // .el-tree-node__label {
  //   color: #fff;
  // }


//外层嵌套
  .event-info {
    .event-info-con{
		width: 100%;
		display: flex;
		.e-left{
			width: 32%;
		}
		.e-center{
			width: 30%;
			margin-left: 1%;
			.img-company{
				width: 100%;
				height: 18.3vh;
				img{}
			}
		}
		.e-right{
			margin-left: 1%;
			width: 45%;
		}
	}
	.e-btm-btn{
		width: 100%;
		height: 3rem;
		display: flex;
		justify-content: flex-end
	}


    .el-dialog:not(.is-fullscreen) {
      margin-top: 5.5vh !important;
    }
	//切换
	.el-tabs__nav-wrap::after {
	  background: none !important;
	}

	.el-tabs__active-bar {
	  background: none;
	}

	.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
	  padding-left: 20px;
	  margin-left: 0;
	}

	.el-tabs--top .el-tabs__item.is-top:last-child {
	  padding-right: 20px;
	  margin-right: 0;
	}

	.el-loading-mask {
	  background: none;
	}

	.el-tabs__item {
	  color: #3cd7ef;
	  background:$GradualGreen;
	  margin: 5px;
	  color: #3cd7ef;
	      background: -webkit-gradient(linear, right top, left top, from(#051d2b), color-stop(#00335c), to(#051d2b));
	      background: linear-gradient(to left, #051d2b, #00335c, #051d2b);
	      margin: 5px;
	}

	.el-tabs__item:hover {
	  color: #fff;
	  background: linear-gradient(to left, #051d2b, #006ec8, #051d2b);
	  box-shadow: rgba($color: #0567c2, $alpha: .8) 0px 0px 15px inset;
	}

	.el-tabs__item.is-active {
	  color: #fff;
	  font-size: 15px;
	  font-weight: bolder;
	  background: linear-gradient(to left, #051d2b, #006ec8, #051d2b);
	  box-shadow: rgba($color: #0567c2, $alpha: .8) 0px 0px 15px inset;
	}

  }
  .bignav{
	  white-space: nowrap!important;
  }
