#Whiteboard {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
	padding-left: 48px;
}

#Whiteboard .WhiteBoardNav {
	padding: 4px;
	margin-left: -48px;
	background: #3c8dbc;
	border-bottom: 1px solid #0782C1;
	min-height: 42px;
}
.btn-DisplayLessonPlan{
	float: left;
	width: 34px;
	height: 34px;
	text-align: center;
	margin-right: 6px;
	color: #fff;
	line-height: 34px;
	cursor: pointer;
}
.btn-DisplayLessonPlan:hover{
	color: #F0AD4E;
}
#Whiteboard .WhiteBoardNavList .boardBtn{
	float: left;
	height: 34px;
	line-height: 34px;
	background: rgba(255,255,255,0.3);
	color: #fff;
	position: relative;
	z-index: 5;
	cursor: pointer;
	margin-right: 1px;
}
#Whiteboard .WhiteBoardNav.disabled .btn-group{
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	opacity:0.5;
}
#Whiteboard .WhiteBoardNavList .boardBtn .name{
	position: relative;
	float: left;
	width: 100%;
	padding: 0 10px;
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow: hidden;
}
#Whiteboard .WhiteBoardNavList .boardBtn .name span{
	display: block;
	position: absolute;
	top: -34px;
	right:-34px;
	text-align: center;
	width: 30px;
	height: 30px;
	line-height: 24px;
	padding: 0 0 6px 6px;
	background: rgba(255,000,000,0.8);
	border-bottom-left-radius: 100%;
	transition: .3s;
	color: #fff;
}
#Whiteboard .WhiteBoardNavList .boardBtn.active,#Whiteboard .WhiteBoardNavList .boardBtn:hover{
	color: #0097BC;
	background: #fff;
}
#Whiteboard .WhiteBoardNavList .boardBtn:hover span{
	right: 0; top: 0;
}
#Whiteboard .WhiteBoardNavList .boardBtn span:hover i{
	color: #F0AD4E;
}
#Whiteboard .WhiteBoardNavList .boardBtn .navPreview{
	display: none;
	width: 470px;
	position: absolute;
	left:0;
	top: 38px;
	border:5px solid #FFA500;
	background-color: #EEEEEE;
	z-index: 9999;
}
#Whiteboard .WhiteBoardNavList .boardBtn .navPreview span{
	position: absolute;
	top:-4px;
    left:2px;
    width: 8px;
    height: 8px;
    margin-top: -5px;
    margin-left: -5px;
    border-left: 1px solid #FFA500;
    border-top: 1px solid #FFA500;
    background-color: #FFA500;
    transform:rotate(45deg);
	-ms-transform:rotate(45deg); /* Internet Explorer */
	-moz-transform:rotate(45deg); /* Firefox */
	-webkit-transform:rotate(45deg); /* Safari 和 Chrome */
	-o-transform:rotate(45deg); /* Opera */
}
#Whiteboard .WhiteBoardNavList .boardBtn .navPreview-titel{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	line-height: 34px;
	background: rgba(0,0,0,.5);
	color: #fff;
	text-indent: 10px;
	z-index: 999;
}
#Whiteboard .WhiteBoardNavList .boardBtn .navPreview .previewCan img{
	width: 100%;
	height: auto;
}
#Whiteboard .WhiteBoardNavList .boardBtn .boardType{
	position: absolute;
	left: 0;
	top: 0;
	border:10px solid rgba(255,255,255,0);
}
#Whiteboard .WhiteBoardNavList .boardBtn .boardType.lp{
	border-top-color:#FFA500;
	border-left-color:#FFA500;
}
#Whiteboard .WhiteBoardNavList .boardBtn .boardType.quiz{
	border-top-color:#00ACD6;
	border-left-color:#00ACD6;
}
#Whiteboard .WhiteBoardNavList .boardBtn .boardType.problem{
	border-top-color:#F00000;
	border-left-color:#F00000;
}

#Whiteboard .addWhiteBoar{
	width: 34px;
	height: 34px;
	background: #fff;
	color: #0097BC;
	text-align: center;
	line-height: 34px;
}
#Whiteboard .addWhiteBoar:hover{
	cursor: pointer;
	background: rgba(255,255,255,0.8);
}

#Whiteboard .toolbar {
	float: left;
	margin-left: -48px;
	width: 48px;
	background-color: #3c8dbc;
	min-height: 536px;
	border-right: #3870a0 solid 1px;
}

#Whiteboard .toolbar .btn-group-vertical,#Whiteboard .ActionBar .btn-group-vertical {
	width: 36px;
	margin: 6px;
}

#Whiteboard .toolbar button {
    padding: 4px 12px !important;
}
#Whiteboard .toolbar .btn-group-vertical button {
	border: none;
}
#Whiteboard .toolbar button.active{
	background: #3870a0 ;
}
#Whiteboard .toolbar hr {
	width: 32px;
	margin: 8px auto;
	background-color: #3C8DBC;
	border-color: #3870a0;
}

#Whiteboard .Workspace {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #f4f4f4;
	overflow: hidden;
}

#Whiteboard .Workspace #trajectory {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 4;
}

#Whiteboard .Workspace .textbox {
	position: absolute;
	display: none;
	margin: 0;
	padding: 5px;
	border: 1px dashed #666;
	z-index: 5;
}

#Whiteboard .input-group-addon {
	height: 40px;
	background-color: #3C8DBC;
	border: none;
}
#Whiteboard .input-group-addon i{
	margin: 0 auto;
}
input.laydate-icon {
	width: 100%;
	height: 34px;
	border-color: #ddd;
	padding: 5px 10px;
	line-height: 24px;
	color: #666;
}

#Whiteboard .pptList {
	position: absolute;
	right:-200px;
	top: 0;
	z-index: 90;
	background-color: #fff;
	width: 200px;
	height: 100%;
	transition: .5s;
	-moz-transition: .5s;
	-webkit-transition: .5s;
	-o-transition: .5s;
}
#Whiteboard .pptList.show{
	right:0;
}
#Whiteboard .pptList .pptList-show{
	position: absolute;
	left: -30px;
	width: 30px;
	padding: 5px;
	line-height: 20px;
	text-align: center;
	color: #fff;
	background-color: rgba(000,000,000,.3);
}
#Whiteboard .canDaBtn{
	display: none;
	float: right;
	width: 140px;
	height: 34px;
	background: #3c8dbc;
}
#Whiteboard .canDaBtn .canDaPrevious,#Whiteboard .canDaBtn .canDaNext {
	width: 25%;
}
#Whiteboard .canDaBtn .canPage{
	width: 50%;
}
#Whiteboard .canDaBtn .canPage button{
	width: 100%;
}
#Whiteboard .pptList .list-group{
	width: 100%;
	height: 100%;
	border: 1px solid #1AB7EA;
}
#Whiteboard .pptList .list-group:hover{
	overflow: auto;
}
#Whiteboard .pptList .list-group-item {
	border-radius: 0;
	cursor: pointer;
	position: relative;
	height: 180px;
	border: none;
	margin: 0;
	border-bottom: 1px solid #1AB7EA;
}

#Whiteboard .pptList .list-group-item:hover {
	border: 5px solid #1AB7EA;
}

#Whiteboard .pptList li.active {
	border: 5px solid #1AB7EA;
}

#Whiteboard .Whiteboardlogin {
	display: show;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, .8);
}

#Whiteboard .panel {
	width: 600px;
	margin: 200px auto;
	min-height: 200px;
	padding: 60px 40px;
	text-align: center;
}

.canLoading {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border: 2px solid skyblue;
	background: #fff;
	z-index: 9999;
}
.canLoading h3{ text-align: center; margin-top: 200px;}
.colorpicker{z-index: 9999;}


/*****禁止学生操作******/
.disabled {
	pointer-events: none;
	color: #ddd;
	border-color: #ddd;
}
.disabled button{
	background: none;
	color: #CCCCCC;
}
.disabled .active{
	background: none;
	color: #CCCCCC;
}
.disabled .WhiteBoardNavList button{
	background: #ccc;
	color: #fff;
}
.WhiteBoardNavList button font{
	display: inline-block;
	width: 100%;
	max-width: 120px;
	white-space:nowrap;
	text-overflow:ellipsis;
}
#Whiteboard .toolbar .disabled button.active{
	background: none;
	color: #CCCCCC;
}

.problem-disable{
	pointer-events: none;
	color: #ddd;
	border-color: #ddd;
}
.previewBg,#canvasBg{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background: #fff;
}
.previewJa,#canvasJa{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
}
.previewCan,#canvas{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 3;
}
.previewCan{ width: 100%;}

.canImg-table{display:table;  width: 100%; height: 100%;}
.canImg-center-cell{width: 100%; height: 100%; margin: 0 auto; display: table-cell; vertical-align: middle; text-align: center;  border-radius: 2px; overflow: hidden;}
.canImg-center-cell img{max-width: 100%; max-height: 100%; margin:0 auto; display:block;}

.pptList .listBg{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background: #fff;
}
.pptList .listJa{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
}
.pptList .listCan{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
}
.WhiteBoardNavBox{
	width: 90%;
	height: 34px;
}
.pptListLabel{
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	height: 20px;
	text-align: center;
	line-height: 20px;
	z-index: 4;
	color: #fff;
}
.answerPreview{
	display: none;
	position: absolute;
	left: 210px;
	top: 10px;
	right: 210px;
	border: 5px solid orange;
	background: #fff;
	z-index: 10;
	box-shadow: 3px 3px 10px #bbb;
}
/**翻页保存按钮**/
.btn-saveNote{
	display: none;
}
/******页面设置*******/
.boardSetUpModal{
	display: none;
	position: absolute;
	left: 60px;
	top: 60px;
	z-index: 999999;;
	border: 1px solid #1AB7EA;
	width: 480px;
	background: #fff;
	box-shadow: 5px 5px 10px #ddd;
	overflow: hidden;
}
.boardSetUpModal dl{
	margin-bottom: 10px;
}
.boardSetUpModal dt,.boardSetUpModal dd{
	padding-bottom: 10px;
}
.boardSetUpModal span{padding-left: 10px;}

.box-header-primary{
	background:#3c8dbc;
	color: #fff;
}
.product-info .btn-group{
	width: 100%;
	margin: 0;
	padding: 0;
}
.product-info .btn-group button{
	float: left;
	margin-bottom: 2px;
}
.product-info .btn-group button.btn-danger{
	background: #E74C3C;
}
.product-info .btn-group button.btn-warning{
	background: #F39C12;
}
.product-info .btn-group button.btn-success{
	background: #1ABC9C;
}
.open-board-modal .img-box{
	margin-bottom: 15px;
}
.open-board-modal .cursorPointer:hover{
	border-color: #3498DB;
	box-shadow: 3px 3px 10px #999;
}
.contentWrapper{
	padding-right: 260px;
	border-right: 1px #fff solid;
}
.img-box-label{
	position: absolute;
	left: 0;
	top: 0;
	line-height: 32px;
	width: 32px;
	height: 32px;
	text-align: center;
	color: #FFFFFF;
	border-bottom-right-radius: 4px;
}
.img-box-label.carrot{
	background: #1ABC9C;
}
.img-box-label.prterRiver{
	background: #3498DB;
}
.img-box-label.allzarin{
	background: #E74C3C;
}
.img-box-label.amethyst{
	background: #9B59B6;
}
.nav-tabs-custom.videos,.nav-tabs-custom.previewVideos{
	padding: 10px;
}
.nav-tabs-custom .video-item{
	display: flex;
	align-items: center;
	line-height: 36px;
	margin-bottom: 10px;
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow: hidden;
	transition: 0.3s;
	-webkit-transition: 0.3s;
	cursor: pointer;
	position: relative;
	border-bottom: 1px solid #eeeeee;
}
.nav-tabs-custom .video-item .n{
	flex: 1;
	width: 1%;
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow: hidden;
}
.nav-tabs-custom .video-item .r{
	flex-shrink: 0;
	display: flex;
}
.nav-tabs-custom .video-item:hover{
	background-color: #eeeeee;
}
.nav-tabs-custom .video-item.active{
	background-color: rgba(42, 200, 69, 0.2);
}
.nav-tabs-custom .video-item .r .t-btn{
	padding: 3px 5px;
	line-height: 1;
	border-radius: 6px;
	border: 1px solid #00a0e9;
	color: #00a0e9;
	transition: 0.3s;
	-webkit-transition: 0.3s;
	cursor: pointer;
	margin-left: 5px;
}
.nav-tabs-custom .video-item .r .t-btn:hover{
	color: #ffffff;
	background-color: #00a0e9;
}
.nav-tabs-custom .video-item.active{
	border-color: #3498DB;
	background-color: #3498DB;
	color: #ffffff;
}
.nav-tabs-custom .plus-btn{
	text-align: center;
	line-height: 36px;
	border: 1px solid #3498DB;
	color: #3498DB;
	text-align: center;
	border-radius: 6px;
	justify-content: center;
}
.nav-tabs-custom .plus-btn:hover{
	background-color: #3498DB;
	color: #ffffff;
}
.nav-tabs-custom .video-item .vi-label{
	position: absolute;
	left: 2px;
	top: 2px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #2ac845;
}
.ntc-test{
	border-bottom: 1px solid #dddddd;
}
.ntc-test-t{
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #f0ad4e;
	color: #ffffff;
	padding: 0 10px;
	height: 40px;
}
.ntc-test-btn{
	border: 1px solid #dddddd;
	height: 22px;
	line-height: 20px;
	padding: 0 3px;
	font-size: 12px;
	box-sizing: border-box;
	border-radius: 4px;
	transition: 0.3s;
	margin-left: 2px;
	-webkit-transition: 0.3s;
	cursor: pointer;
}
.ntc-test-btn:hover{
	background-color: #ffb400;
}
.ntc-test .box-layer.active{
	border: 1px solid #00a0e9;
}
.nav-tabs-custom.test{
	overflow: auto;
}