.sidebarBox{
	width: 200px;
	// background: #282f45;
	//@include theme('background-color','sidebar_bgColor');
	@include theme('color','sidebar_color');
	display: flex;
	flex-direction: column;
	transition: all 0.3s ease;
	user-select: none;
	position: relative;
	// position: relative;
	// z-index: 100;
	&.disabled_transition{
		transition: none;
	}
	&.mini{
		width: 48px !important;
		.dragBtn{
			display: none;
		}
		.sildeBody {
			overflow: visible;
			background-size: 70%;
		}
		.childrenBox {
			overflow: visible;
			position: relative;
			.header{
				.icon{
					width: 30px;
					transform: scale(1.2);
				}
				.name,.pointer{
					opacity: 0;
				}

			}
			&:hover{
				// .header{
				//     .icon{
				//         &.itemColor_0{
				//             color: #4098e3 !important;
				//         }
				//         &.itemColor_1{
				//             color: #ffa310 !important;
				//         }
				//         &.itemColor_2{
				//             color: #c87ccd !important;
				//         }
				//         &.itemColor_3{
				//             color: #00c05f !important;
				//         }
				//     }
				// }
				.children{
					display: block !important;
					visibility: visible;
					// left: 42px;
					opacity: 1;
					transform: scale(1);
					//background: #fff;
					@include theme('background-color','wrapper_bgColor2');
					border-radius: $radius_mini;
					padding: 10px;
				}
			}
			.children{
				display: block !important;
				visibility: hidden;
				opacity: 0;
				width: 210px;
				position: absolute;
				border-radius: 5px;
				top: 0;
				z-index: 999;
				transition: all 0.2s ease 0.2s;
				transform: scale(0.8);
				transform-origin: 0 0;
				left: 42px;
				box-shadow: 0 3px 6px -4px rgb(0 0 0 / 12%), 0 6px 16px 0 rgb(0 0 0 / 8%), 0 9px 28px 8px rgb(0 0 0 / 5%);

			}
		}


		.pageName{
			.icon{
				margin-left: 8px;
			}
			.name{
				display: none;
			}
		}
	}

	.sildetop{
		height: 48px;
		line-height: 48px;
		padding-left: 15px;
		// color: #acb5ce;
		&:hover{
			color: #d4dbef;
		}
		&:active{
			color: #acb5ce;
		}
		i{
			cursor: pointer;
		}
	}
	.sildeBody{
		flex-grow: 1;
		overflow: auto;
		background:  url("gy-webcode3/img/slogan.png") bottom no-repeat;
		&.seriesLogoHide{
			background-image: none;
		}
	}
	.pageName{
		height: 65px;
		display: flex;
		overflow: hidden;
		align-items: center;
		.icon{
			font-size: 26px;
			width: 30px;
			height: 30px;
			margin-left: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.name{
			margin-left: 10px;
			font-size: 18px;
			//width: 500px;
			//flex-shrink:0;
		}
	}

	.childrenBox{
		transition: all 0.3s ease;
		overflow: hidden;
		//border: 1px solid #f00;
		margin:0 $spacing ;

		.header{
			height: 42px;
			line-height: 42px;
			display: flex;
			// padding-left: 8px;
			// color: #acb5ce;
			cursor: pointer;
			transition: all 0.3s ease;
			position: relative;
			//color: #262626;
			&:hover{
				// color: #60abff ;
				@include themeColor('color','hover');
			}
			.icon{
				transition:  all 0.3s ease;
				width: 36px;
				//color: #595959;
				text-align: center;
				position: absolute;
				left: 0;
				bottom: 0;

				top: 0;
			}
			.name{
				transition:  all 0.3s ease;
				flex: 1;
				padding-left: 36px;
			}
			.pointer{
				transition:  all 0.3s ease;
				width: 26px;
				font-size: 10px;
				//border: 1px solid #ff0;
				text-align: center;
				transform:  rotate(-180deg);
				@include theme('color','sidebar_color',0.5);
				.open{
					display: none;
				}
				.hide{
					display: inline;
				}
			}
		}
		.children{

			font-size: 14px;
			// padding: 4px ;
			// padding: 0 4px;
			ul{
				//padding-top: $spacing;
				//padding-left: $spacing;
				//padding-right: $spacing;
				overflow: hidden;

				// padding: 5px 0 5px 45px;
				li{
					overflow: hidden;
					line-height: 42px;
					cursor: pointer;
					padding-right: 10px;
					padding-left: 36px;
					// color: #acb5ce;
					transition: all 0.3s ease;
					// margin: 4px ;
					//margin-bottom: 8px;
					border-radius: $radius_mini;
					&:hover{
						@include themeColor('color','sidebar_menu2_activeColor');
						//background: #fff;

						//@include themeColor('color','sidebar_menu2_hoverColor');
						//@include themeColor('background-color','sidebar_menu2_hoverBgColor');
					}
					&:active{
						@include themeColor('color','sidebar_menu2_activeColor',0.5);
						//background: rgba($color: #fff, $alpha: 0.5);
						//@include themeColor('background-color','sidebar_menu2_activeBgColor')
					}
					&.active{
						//background: #fff;
						@include theme('background-color','sidebar_children_activeBgColor');
						@include themeColor('color','sidebar_menu2_activeColor');
					}
				}
			}
		}

		&.open{
			.header{
				@include themeColor('color','sidebar_menu1_activeColor');
				.icon{
					//color: #262626;
					@include themeColor('color','sidebar_menu1_activeColor');
					// color: #2394e6 !important;
					// &.itemColor_0{
					//     color: #4098e3;
					// }
					// &.itemColor_1{
					//     color: #ffa310;
					// }
					// &.itemColor_2{
					//     color: #c87ccd;
					// }
					// &.itemColor_3{
					//     color: #00c05f;
					// }
				}
				.pointer{
					//@include themeColor('color','active');
					@include themeColor('color','sidebar_menu2_activeColor');
					transform:  rotate(0);
					.open{
						display: inline;
					}
					.hide{
						display: none;
					}
				}
			}
		}
	}

	.dragBtn{
		position: absolute;
		width: 4px;
		//background: #f00;
		right: 0;
		top: 0;
		z-index: 20;
		bottom: 0;
		user-select: none;
		&:hover{
			cursor: e-resize;
		}
	}
}