@primaryColor: #1CC0F3;
@borderColor: #323232;
@second-textColor: #5b5b5b; //文本副级颜色
.syllabus-container{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	font-family: 'NotoSerif', '微软正黑体', 'Microsoft JhengHei UI', 'Microsoft JhengHei', Sans-serif;
	.syllabus-header{
		position: relative;
		height:60px;
		width: 100%;
		border-bottom: 1px solid @borderColor;
		display: flex;
		align-items: center;
		padding-left: 15px;
		z-index: 999;
		
		.subject-select{
			&-item{
				margin-left: 10px;
				display: inline-block;
				padding: 4px 14px;
				color: #fff;
				background-color: #595959;
				cursor: pointer;
			}
			
			.item-active{
				background-color: #1fb06d;
			}
		}
		
		.btn-save-modify{
			position: absolute;
			right: 20px;
			background-color: #1fb06d;
			color: #fff;
			border: none;
		}
	}
	
	.syllabus-content{
		height: calc(100% - 60px);
		display: flex;
		
		&-header{
			height:40px;
			width: 100%;
			border-bottom: 1px solid @borderColor;
			display: flex;
			align-items: center;
			padding-left: 15px;
			color: #bdbdbd;
			position: relative;
			
			
			&::before {
				content: '';
				display: inline-block;
				border: 4px solid #1ee6aa;
				border-radius: 50%;
				margin-right: 10px;
				margin-bottom: 3px;
			}
			
			&-tools{
				position: absolute;
				right: 0;
				
				.ivu-icon{
					cursor: pointer;
					margin-right: 15px;
				}
				
				.ivu-btn{
					background: none;
					border: none;
					color: #bdbdbd;
					margin-right: 5px;
				}
			}
		}
		
		.syllabus-left{
			height: 100%;
			width: 20%;
			border-right: 1px solid @borderColor;
			
			.volume-list{
				display: flex;
				flex-direction: column;
				margin-left: 10px;
				overflow: hidden;
				padding-bottom: 40px;
				.volume-item{
					padding: 10px 0 10px 20px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					border-bottom: 1px solid @borderColor;
					cursor: pointer;
					&-name{
						color: #fff;
						font-size: 16px;
						font-weight: bold;
						margin: 10px 0;
						padding-right: 10px;
					}
					&-info{
						span{
							color: #9f9f9f;
							font-size: 12px;
							&:nth-child(2){
								margin: 0 8px;
							}
						}
					}
					&:hover{
						.volume-active;
					}
				}
			}
		}
		.syllabus-mid{
			height: 100%;
			width: 30%;
			border-right: 1px solid @borderColor;
			z-index: 1;
			
			.syllabus-tree-box{
				height: 100%;
				z-index: 0;
			}
		}
		.syllabus-right{
			height: 100%;
			width: 50%;
			border-right: 1px solid @borderColor;
			
			.syllabus-tree-box{
				height: 100%;
				overflow: auto;
				padding-bottom: 80px;
			}
			
			.node-resource-box{
				display: flex;
				flex-direction: column;
				padding: 10px 20px;
				overflow: auto;
				
				.node-resource-item{
					position: relative;
					border: 1px solid #5d5d5d;
					padding: 15px 20px;
					margin-top: 5px;
					color: #DDDDDD;
					display: flex;
					align-items: center;
					background: #282828;
					box-shadow: inset 0px 0px 0px 4px #2d2d2d;
					
					&:hover{
						.node-resource-tools{
							display: flex;
						}
					}
					
					img{
						width: 25px;
						height: 25;
						margin-right: 20px;
					}
					
					.node-resource-tools{
						position: absolute;
						right: 30px;
						align-items: center;
						display: none;
						
						.node-resource-tool{
							display: flex;
							align-items: center;
							margin-right: 15px;
							cursor: pointer;
						}
						
						.ivu-icon{
							color: #ddd;
							font-size: 20px;
							margin-right: 5px;
						}
					}
				}
			}
		}
		
		
	}
	
	.volume-active {
	    background-image: -webkit-linear-gradient(90deg, rgba(30,30,30,0) 0%, rgba(110,110,110,.2) 50%, rgba(110,110,110,.4) 100%);
	    background-image: -o-linear-gradient(90deg, rgba(30,30,30,0) 0%, rgba(110,110,110,.2) 50%, rgba(110,110,110,.4) 100%);
	    background-image: -moz-linear-gradient(90deg, rgba(30,30,30,0) 0%, rgba(110,110,110,.2) 50%, rgba(110,110,110,.4) 100%);
	    background-image: linear-gradient(90deg, rgba(30,30,30,0) 0%, rgba(110,110,110,.2) 50%, rgba(110,110,110,.4) 100%);
	}
	
	.image-viewer {
	    background-color: rgba(0, 0, 0, 0.8);
	    z-index: 9999;
	    width: 100%;
	    height: 100%;
	    position: fixed;
	    top: 0;
	    left: 0;
	    overflow-y: scroll;
	    overflow-x: hidden;
	    text-align: center;
	    /*display: flex;
	    justify-content: center;
	    align-items: center;*/
	    padding:50px;
	    padding-top:8%;
	    .close-icon {
	        position: absolute;
	        right: -16px;
	        top: -16px;
	        font-size: 24px;
	        color: black;
	        cursor: pointer;
	        border-radius:50px;
	        background:white;
	        padding:2px;
	    }
	}
}
