.loader {
	font-size: 10px;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	position: relative;
	text-indent: -9999em;
	animation: mulShdSpin 1.1s infinite ease;
	transform: translateZ(0)
}

@keyframes mulShdSpin {
	0%,to {
			box-shadow: 0 -2.6em #fff,1.8em -1.8em #fff3,2.5em 0 #fff3,1.75em 1.75em #fff3,0 2.5em #fff3,-1.8em 1.8em #fff3,-2.6em 0 #ffffff80,-1.8em -1.8em #ffffffb3
	}

	12.5% {
			box-shadow: 0 -2.6em #ffffffb3,1.8em -1.8em #fff,2.5em 0 #fff3,1.75em 1.75em #fff3,0 2.5em #fff3,-1.8em 1.8em #fff3,-2.6em 0 #fff3,-1.8em -1.8em #ffffff80
	}

	25% {
			box-shadow: 0 -2.6em #ffffff80,1.8em -1.8em #ffffffb3,2.5em 0 #fff,1.75em 1.75em #fff3,0 2.5em #fff3,-1.8em 1.8em #fff3,-2.6em 0 #fff3,-1.8em -1.8em #fff3
	}

	37.5% {
			box-shadow: 0 -2.6em #fff3,1.8em -1.8em #ffffff80,2.5em 0 #ffffffb3,1.75em 1.75em #fff,0 2.5em #fff3,-1.8em 1.8em #fff3,-2.6em 0 #fff3,-1.8em -1.8em #fff3
	}

	50% {
			box-shadow: 0 -2.6em #fff3,1.8em -1.8em #fff3,2.5em 0 #ffffff80,1.75em 1.75em #ffffffb3,0 2.5em #fff,-1.8em 1.8em #fff3,-2.6em 0 #fff3,-1.8em -1.8em #fff3
	}

	62.5% {
			box-shadow: 0 -2.6em #fff3,1.8em -1.8em #fff3,2.5em 0 #fff3,1.75em 1.75em #ffffff80,0 2.5em #ffffffb3,-1.8em 1.8em #fff,-2.6em 0 #fff3,-1.8em -1.8em #fff3
	}

	75% {
			box-shadow: 0 -2.6em #fff3,1.8em -1.8em #fff3,2.5em 0 #fff3,1.75em 1.75em #fff3,0 2.5em #ffffff80,-1.8em 1.8em #ffffffb3,-2.6em 0 #fff,-1.8em -1.8em #fff3
	}

	87.5% {
			box-shadow: 0 -2.6em #fff3,1.8em -1.8em #fff3,2.5em 0 #fff3,1.75em 1.75em #fff3,0 2.5em #fff3,-1.8em 1.8em #ffffff80,-2.6em 0 #ffffffb3,-1.8em -1.8em #fff
	}
}



#file_device_content::-webkit-scrollbar {
	width:10px;
	margin:4px;
	direction: ltr;
}

#file_device_content::-webkit-scrollbar-track {
	background-color: #e4e4e4;
	border-radius: 100px;
}
  
#file_device_content::-webkit-scrollbar-thumb {
	border-radius: 100px;
	border: 6px solid rgba(0, 0, 0, 0.18);
	border-left: 0;
	border-right: 0;
	background-color: #8070d4;
}

#panel::-webkit-scrollbar {
	width: 6px;
	margin:4px;
	direction: ltr;
}
  
#panel::-webkit-scrollbar-track {
	background-color: #e4e4e4;
	border-radius: 100px;
}
  
#panel::-webkit-scrollbar-thumb {
	border-radius: 100px;
	border: 6px solid rgba(0, 0, 0, 0.18);
	border-left: 0;
	border-right: 0;
	background-color: #8070d4;
}

@media (min-width: 100px){
	
	.modal-low{
		display:none;align-items:center;justify-content:center;position:absolute;top:0px;left:0px;bottom:0px;right:0px;z-index:100;
	}
	
	.modal-low div.exit{
		z-index:10;position:absolute;top:0px;left:0px;right:0px;bottom:0px;background:rgba(0,0,0,0.7);
	}
	
	.modal-low div.content{
		display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; 
		flex-direction: column;padding:10px;position:relative;z-index:20;background:white;border-radius:5px;
	}
	
	#chatMore{
		position:absolute;
		top:20px;
		right:10px;
		z-index:10;
		width:20px;
		background:none;
		outline:none;
		border:none;
		cursor:pointer;
	}
	
	#hideChatMessage{
		display:none;
		max-width: 180px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 4px;
    border-radius: 20px;
    font-size: 13px;
    direction: rtl;
    text-align: right;
    color: #000000;
		z-index: 25;
	}
	
	#hideChatMessage div.userMessage{
		background: white;
    padding: 15px;
	}
	#hideChatMessage div.userMessage span.message{color:black;}
	#errorSocket{
		display:none;
		position: absolute;
    top: 20px;
    width: 300px;
    left: calc(50% - 150px);
    background: red;
    color: white;
    z-index: 1000;
    padding: 10px;
    text-align: center;
    border-radius: 50px;
    box-shadow: 0px 0px black;
    font-size: 13px;
		direction:rtl;
	}
	
	#webynarTools{
		position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    background: white;
    z-index: 100;
    display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex; 
    justify-content: space-between;
    flex-direction: row;
    height: 40px;
	}
	
	#webynarTools div{
		display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; 
	}

	#webynarTools button{
		width: 40px;
    height: 100%;
    border: none;
    outline: none;
    display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; 
    padding: 5px;
    justify-content: center;
    margin: 0px 5px 0px 5px;
    align-items: center;
    background: none;
    cursor: pointer;
		border-radius:5px;
	}
	
	#webynarTools button svg{
		width:100%;
	}
	
	#webynarTools button:hover{
		background:#70f9b8;
	}
	
	#shapesFlower{
		position:fixed;
		z-index: 10;
		flex-direction: column;
		cursor: pointer;
		direction: ltr;
		z-index: 19;
		border-radius:5px;
		box-shadow:0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
	
	}

	#shapesFlower .selector{
		height:30px;
		display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; 
		flex-direction: row;
		flex-wrap: nowrap;
		background-color:rgb(151, 151, 151);
		display:none;
	}
	#shapesFlower .selector>div{
		padding:5px;
	}
	#shapesFlower .selector .sizes div{
		position: relative;
    top: -3px;
	}
	#shapesFlower .selector div div{
		display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; 
		justify-content: center;
		align-items: center;
	}

	#shapesFlower .element{
		display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; 
		flex-direction: row;	
		background: white;
		padding: 5px;
		border-radius:5px;
	}

	#shapesFlower .element .shapes,#shapesFlower .element .colors, #shapesFlower .element .sizes{
		display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; 
		flex-direction: row;
		width: 100px;
		flex-wrap: wrap;
		align-content: flex-start;
	}

	#shapesFlower .element .shapes button{
		width: 16px;
		height: 16px;
		background: transparent;
		border: none;
		padding: 0px;
		margin:2px;
		display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; 
	}

	#shapesFlower .element .colors div,#shapesFlower .element .sizes div{
		width: 16px;
		height: 16px;
		display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; 
		justify-content: center;
		align-items: center;
		margin: 1px;
		font-size: 9px;
		padding: 1px;
	}

	#shapesFlower .element .sizes div:hover{
		background-color: #008500;
	}

	#shapesFlower .element .colors div:hover{
		opacity: 0.5;
	}

	#shapesFlower .element .shapes button:hover{
		background-color: #008500;
	}
	

	input[type="submit"]{
		white-space: normal;
		word-wrap: break-word;
	}

	#getUserInfoForOnline{
		width: 250px;
		position:absolute;
		left: calc(50% - 125px);
		top : 200px;
		padding:30px;
		z-index : 11;
		background: white;
    	border-radius: 20px;
		display: none;
	}

	#getUserInfoForOnline input{
		width: 100%;
		padding: 5px;
		border: none;
		outline: none;
		direction: rtl;
		font-size: 13px;
		border-bottom: 1px solid #8b8bfa;
		font-family: 'myf';
	}

	#getUserInfoForOnline button{
		width: 100%;
		margin-top: 20px;
		outline: none;
		color: white;
		padding: 10px 10px;
		background: green;
		border: none;
		border-radius: 20px;
		box-shadow: 0px 5px 7px 0px #9b9b9b;
		direction: rtl;
	}

	#showAllUserInClass{
		position:absolute;
		bottom:70px;
		padding:10px;
		right:10px;
		border-radius: 30px;
		width: 45px;
		height: 45px;
		overflow: hidden;
		font-size: 10px;
		border: none;
		outline: none;
		z-index: 15;
		display: none;
		background-color: black;
	}

	#showAllUserInClassDiv{
		position:absolute;
		bottom:135px;
		right:10px;
		border-radius: 30px;
		width: 200px;
		max-height: 300px;
		background-color: white;
		border-radius: 20px;
		content-visibility: auto;
		z-index: 100000000000000000000;
		display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; 
		flex-direction: column;
		box-shadow: 1px 6px 12px 1px #bababa;
	}

	#showAllUserInClassDiv .header{
		width: 100%;
		box-shadow: 0px 1px 5px #cecece;
		padding:10px 10px;
		display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; 
		flex-direction: row;
		justify-content: space-between;
		direction: rtl;
	}

	#showAllUserInClassDiv .users{
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		direction: rtl;
		overflow: auto;
	}

	#showAllUserInClassDiv .user{
		width: 100%;
		padding:10px 10px;
		display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; 
		flex-direction: row;
		justify-content: space-between;
		direction: rtl;
	}

	#teacherVideo{
		width: 100%;
	}
	#sendTeacherSampleVideoModal{
		width: 100%;
		height: 100%;
		display: none;
	}
	#sendTeacherSampleVideoForm{
		width: 80%;
		position:fixed;
		top:10%;
		left:10%;
		max-height: 80%;
		background-color: white;
		z-index: 999999999999;
		border-radius: 20px;
		content-visibility: auto;
		padding: 30px 20px;
		overflow: auto;
	}

	#sendTeacherSampleVideoMobileValidate{display: none;}
	#sendTeacherSampleVideoForm input {
		width: 100%;
	}

	#sendTeacherSampleVideoForm input[type="text"]{
		border-top:none;
		border-left : none;
		border-right: none;
		border-bottom: 1px solid rgb(0, 0, 0);
		outline: none;
		font-family: myf;
		margin-bottom:15px;
		padding:5px;
	}

	#sendTeacherSampleVideoForm input[type="submit"]{
		background-color: #01c801;
		border-radius: 5px;
		border:none;
		outline: none;
		padding: 10px;
		font-family: myf;
		color: white;
		margin-top: 10px;
	}

	.sendTeacherSampleVideoLogin,.sendTeacherSampleVideoSubmit{
		width: 100%;
		padding: 10px 20px;
		color: white;
		font-size: 15px;
		border-radius: 5px;
		outline: none;
		border: none;
		margin-top:10px
	}

	.sendTeacherSampleVideoLogin{background-color: red;margin-bottom: 20px;}
	.sendTeacherSampleVideoSubmit{background-color: blue;}

	#sendTeacherSampleVideoLoginForm,#sendTeacherSampleVideoSubmitForm{display: none;}

	#meet{
		position:absolute;
		left:40px;
		bottom:60px;
		right:0px;
		height: 50%;
		z-index: 10;
		border-radius: 10px;
	}

	#fileModal{top:60px;left:10px;bottom:60px;right:10px;}
	#fileModalRight{width:100%;height:20%;}
	#fileModalRight div{width:30%;height:50%;line-height:350%;text-align:center;padding-right:0px;}
	
	#fileModalLeft{width:100%;height:80%;}
	.fileModalLeftDiv{width:100%;height:100%;}
	.fileModalLeftTop{width:100%;height:10%;}
	.fileModalLeftBottom{width:100%;height:100%;}
	
	.file_modal_img{width:100%;height:auto;margin:0px;}

	.file_modal_video{width:100%;height:auto;margin:0px;}

	#panel button{
		width:100%;
		height:30px;
		padding:2px;
	}
	#panel button svg{
			width:90%;
			height:90%;
	}
	#panel{width:30px;top:10px;bottom:auto;}
	.bookPageDivStyle{width:46%;height:60%;margin:5px;}
	.bookTypeDIV,.imagesTypeDIV{width:90%;height:15%;margin:auto;clear:both;margin-bottom:20px;line-height:350%;}
	.MbookTypeDIV{width:90%;height:15%;margin:auto;clear:both;margin-bottom:20px;line-height:350%;}
	.categoryDIVStyle{width:90%;height:15%;margin:auto;clear:both;margin-bottom:20px;line-height:350%;}

	#inputForFocus{width:90%;left:10%;}
	.buttonLTR{width:10%;}
	#settingModal{top:10%;left:5%;width:90%;height:80%;}
	.modal{width:90%;height:80%;top:10%;left:5%;}
	
	#create_element_tool_div div{
		height:20px;
		margin-left:10px;
	}

	#create_element_tool_div svg{
		width:25px;
		height:100%;
	}
	
	.aboutMagicBoardDivDiv1{
		width:50%;
		padding: 5px;
	}
	.aboutMagicBoardDivDiv2{
		width:50%;
		padding: 0px;
	}
	.aboutMagicBoardDivDiv1 a{padding:10px;font-size:15px;}
	.aboutMagicBoardDivDiv2 p{font-size:15px;}

}

@media (min-width: 500px){
	
	#webynarTools{height:50px;}

	#teacherVideo{
		width: 50%;
	}

	#meet{
		position:absolute;
		left:50%;
		bottom:70px;
		right:0px;
		height: calc(100% - 70px);
		z-index: 10;
		border-radius: 10px;
	}

	#fileModal{top:5%;left:5%;width:90%;height:90%;border-radius:10px;}
	#fileModalRight{width:20%;height:100%;}
	#fileModalRight div{width:100%;height:60px;line-height:60px;text-align:right;padding-right:10px;}
	
	#fileModalLeft{width:80%;height:100%;}
	.fileModalLeftDiv{width:100%;height:100%;}
	.fileModalLeftTop{width:100%;height:10%;}
	.fileModalLeftBottom{width:100%;height:100%;}
	
	.file_modal_img{width:48%;height:48%;margin:3px;}

	.file_modal_video{width:48%;height:48%;margin:3px;}
	#panel button{
		width:100%;
		height:30px;
		padding:2px;
	}
	#panel button svg{
			width:90%;
			height:90%;
	}
	#panel{width:30px;top:10px;bottom:auto;}
	.bookPageDivStyle{width:30%;height:50%;margin:5px;}
	.bookTypeDIV,.imagesTypeDIV{width:45%;height:15%;float:right;clear:none;margin:5px;line-height:450%;}
	.MbookTypeDIV{width:45%;height:15%;float:right;clear:none;margin:5px;line-height:450%;}
	.categoryDIVStyle{width:45%;height:15%;float:right;clear:none;margin:5px;line-height:450%;}
	
	#inputForFocus{width:40%;left:10%;}
	.buttonLTR{width:10%;}
	#buttonLTR{width:10%;}
	#buttonLTR{width:10%;}
	.modal{width:90%;height:80%;top:10%;left:5%;}
	.aboutMagicBoardDivDiv1{
		width:50%;
		padding: 5px;
	}
	.aboutMagicBoardDivDiv2{
		width:50%;
		padding: 0px;
	}
	.aboutMagicBoardDivDiv1 a{padding:20px;font-size:17px;}
	.aboutMagicBoardDivDiv2 p{font-size:17px;}
}

@media (min-width: 850px){

	#sendTeacherSampleVideoForm{
		width: 40%;
		top:10%;
		left:30%;
	}
	#teacherVideo{
		width: 25%;
	}

	#fileModal{top:5%;left:5%;width:90%;height:90%;border-radius:10px;}
	#fileModalRight{width:20%;height:100%;}
	#fileModalRight div{width:100%;height:60px;line-height:60px;text-align:right;padding-right:10px;}
	
	#fileModalLeft{width:80%;height:100%;}
	.fileModalLeftDiv{width:100%;height:100%;}
	.fileModalLeftTop{width:100%;height:10%;}
	.fileModalLeftBottom{width:100%;height:100%;}
	
	.file_modal_img{width:30%;height:48%;margin:3px;}

	.file_modal_video{width:30%;height:48%;margin:3px;}
	#panel button{
		width:100%;
		height:30px;
		padding:2px;
	}
	#panel button svg{
			width:90%;
			height:90%;
	}
	#panel{width:30px;top:10px;bottom:auto;}
	.bookPageDivStyle{width:17%;height:50%;margin:5px;}
	.bookTypeDIV,.imagesTypeDIV{width:32%;height:15%;float:right;clear:none;margin:5px;}
	.MbookTypeDIV{width:32%;height:15%;float:right;clear:none;margin:5px;}
	.categoryDIVStyle{width:30%;height:15%;float:right;clear:none;margin:5px;line-height:450%;}
	#inputForFocus{width:30%;left:10%;}
	.buttonLTR{width:10%;}
	#settingModal{top:10%;left:20%;width:60%;height:80%;}
	.modal{width:80%;height:80%;top:10%;left:10%;}
	.aboutMagicBoardDivDiv1{
		width:70%;
		padding: 50px;
	}
	.aboutMagicBoardDivDiv2{
		width:30%;
		padding: 0px;
	}
	.aboutMagicBoardDivDiv1 a{padding:20px;font-size:18px;}
	.aboutMagicBoardDivDiv2 p{font-size:18px;}
}

#board{
	width:100%;
	height:100%;
	position:relative;
	overflow: hidden;
	border-radius:8px;
	box-shadow:0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
	/*display:none;*/
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	touch-action: none;
}

#hideBoard{
	position:absolute;
	bottom:0px;
	left:0px;
	outline:none;
	border-radius: 50px;
	width: 50px;
	height: 50px;
	color: white;
	background: green;
	text-align: center;
	line-height: 57px;
	font-size: 11px;
	z-index:10000;
}
#hideBoard p{float:right;width:50px;height:25px;}
#hideBoardDivA{line-height:35px;}
#hideBoardDivB{line-height:15px;}
#hideUsersBoard{
	position:absolute;
	bottom:0px;
	left:80px;
	outline:none;
	border-radius: 50px;
	width: 50px;
	height: 50px;
	color: white;
	background: green;
	text-align: center;
	line-height: 57px;
	font-size: 11px;
	z-index:10000;
}
#hideUsersBoard p{float:right;width:50px;height:25px;}
#hideUsersBoardDivA{line-height:35px;}
#hideUsersBoardDivB{line-height:15px;}
#canvas{position:absolute;top:0px;left:0px;z-index: 1;}
#panel{
	position:absolute;
	left : 10px;
	top : 10px;
	padding-bottom: 1px;
	border-radius:5px;
	border: 1px solid white;
	overflow:auto;
	direction: rtl;
	z-index: 50;
	background-color: black;
}

#setColor{width:40px;height:20px;}

#panel button{
	border:none;
	outline:none;
	border-bottom:1px solid white;
	background:none;
	cursor:pointer;
	float:right;
	padding:4px;
}

#panel button svg{
	fill : white;
}

#blackDiv{display:none;position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.6);z-index:110;}
#insertFILE{position:absolute;
display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; }
#insertPDFInput{opacity:0;}
#insertFILE span, #insertFILE span{position:absolute;top:0px;left:0px;width:100%;height:20px;}


#sizeModal{width:100%;height:25%;background:white;}
#sizeModal div{width:7%;float:left;text-align:center;font-size:75%;height:100%;}
#sizeModal div:hover{background:#e5e5e5;cursor:pointer;}


#colorModal{width:100%;height:25%;background:white;}
#colorModal div{float:left;width:5%;height:100%;}
#colorModal div:hover{background:#e5e5e5;cursor:pointer;}

.inputForFocus{display:none;height:30px;direction:rtl;text-align:right;z-index:9999999;position:absolute;bottom:80px;border-radius:5px;}
.buttonLTR{display: none;
    align-content: center;
    align-items: center;
    justify-content: center;font-size:7px;outline:none;border:0px;background:green;color:white;height:30px;direction:rtl;text-align:right;z-index:9999999;position:absolute;bottom:80px;left:30px;border-radius:5px;}

#settingModal{	
  /* animation-name: fileModal;
  animation-duration: 0.3s; */
  z-index:200;display:none;box-shadow:0px 0px 00px 0px white;direction:rtl;position:absolute;border-radius:10px;background:white;color:black;}
#rightSetting,#leftSetting{display:flex;}
#rightSetting{border-left:2px solid #d1d1d1;flex-direction:column;}
#leftSetting{flex-direction:column;}
#settingHeader{justify-content:flex-start;display:flex;align-items:center;margin-right:30px;}
#settingItemUl{display:flex;flex-direction:column;}
#settingItemUl li{display:flex;list-style:none;padding:15px 15px 15px 15px;cursor:pointer;}
#settingItemUl li:hover{background-color:#e8e8e8;}
#settingItemUl li:active{background-color:#dcdcdc;}
.flex-grow-1{flex-grow:1;}
.flex-grow-2{flex-grow:2;}
.flex-grow-3{flex-grow:3;}
.flex-grow-4{flex-grow:4;}
.flex-grow-5{flex-grow:5;}
.flex-grow-6{flex-grow:6;}
.flex-grow-7{flex-grow:7;}
.flex-grow-8{flex-grow:8;}
.flex-grow-9{flex-grow:9;}
.flex-grow-10{flex-grow:10;}
.flex-grow-11{flex-grow:11;}
#audioSetting{overflow: auto;}
#audioSetting div{width:80%;height:80%;margin:auto;}

#audioSetting div select{width:100%;height:50px;background:#f6f6f6;border-radius:5px;margin-top:10px;box-shadow:2px 2px 9px 0px #c7c7c7;}
#cameraSetting{display:none;overflow:scroll;}
#cameraSetting div{width:80%;height:80%;margin:auto;}
#cameraSetting div p{margin-top:10px;}
#cameraSetting div select{width:100%;height:50px;background:#f6f6f6;border-radius:5px;margin-top:10px;box-shadow:2px 2px 9px 0px #c7c7c7;}
#audiooutput,#audioinput,#videoinput{text-align:left;direction:ltr;}
#frameRate,#cameraBitRate,#cameraWidth,#cameraHeight,#audioBitRate{margin-top:10px;	direction:ltr;width:100%;}

#moveOnBoardSetting{display:none;overflow: auto;}
#moveOnBoardSetting img{width:100px;height:100px;}

#pdfModal{overflow:auto;z-index:15;display:none;box-shadow:0px 0px 00px 0px white;direction:rtl;position:absolute;top:5%;left:10%;width:80%;height:90%;border-radius:5px;background:white;color:black;}
#setColor{background-color:blue !important;}

/*File Modal Setting*/
#fileModal{
	/* animation-name: fileModal;
    animation-duration: 0.3s; */
	content-visibility: auto;border-radius:30px;display:none;z-index:150;direction:rtl;position:absolute;color:black;}

@keyframes fileModal {
  from {transform: scale(0.1);}
  to {transform: scale(1);}
}


#fileModalRight{background:#dde8ff;float:right;}
#fileModalRight div{cursor:pointer;float:right;}
#fileModalRight div:hover{background:#d7d7d7;}

#fileModalLeft{float:right;background:white;}
.fileModalLeftDiv{display:none;float:right;width:100%;height:100%;position:relative;}
.fileModalLeftTop{background:blue;float:right;}
.fileModalLeftBottom{float:right;width:100%;height:100%;padding-top:40px;}

#insertFILEDiv{
	position: absolute;
	margin: 1px;
	padding: 10px;
	left: 20px;
	right: 20px;
	border-radius: 20px;
	background: lightseagreen;
	color: black;
	box-shadow: -1px 9px 8px 0px #727272;
	text-align: center;
}
#insertFILEDiv span{font-family:myf;text-align:center;outline:none;border:0;color:white;}
#insertFILE{position:absolute;top:0px;left:0px;width:100%;height:100%;opacity:0;}

#file_device_content{width:100%;height:calc(90% - 29px);overflow:auto;}
.file_modal_pdf{border-radius: 10px;content-visibility: auto;display: flex;flex-direction: column;box-shadow:0 17px 50px 0 rgb(0 0 0 / 19%), 0 12px 15px 0 rgb(0 0 0 / 24%);float:right;width:90%;height:50%;margin:10px 5% 10px 5%;background:white;}
.file_modal_pdf div{display:flex;overflow:auto;width:100%;height:90%;padding:5px;}
.file_modal_pdf button{height:40px;font-size:10px;outline:0;border:0px;width:100%;text-align:center;background:red;color:white;}
.file_modal_pdf div img{height:100%;width:auto;}

.file_modal_img{float:right;background:white;overflow:auto;}
.file_modal_img div{width:100%;}
.file_modal_img button{font-size:10px;outline:0;border:0px;width:100%;height:10%;text-align:center;background:red;color:white;}
.file_modal_img div img{max-width:100%;margin:auto;}

.file_modal_video{float:right;background:white;}
.file_modal_video div{width:100%;}
.file_modal_video button{font-size:10px;outline:0;border:0px;width:100%;height:10%;text-align:center;background:red;color:white;}
.file_modal_video div video{max-width:100%;margin:auto;}

#file_books_div{position:relative;}
#file_books_content{width:100%;height:100%;overflow:auto;padding:0px 25px;position:relative;}
#file_images_content{width:100%;height:100%;overflow:auto;padding:0px 25px;position:relative;}

#file_moallem_mohtava_div{position:relative;overflow:auto;}
#file_moallem_mohtava_content{width:100%;height:100%;overflow:auto;padding:0px 25px;position:relative;}
#file_moallem_mohtava_content{width:100%;height:100%;overflow:auto;padding:0px 25px;position:relative;}

#file_books_div_undo{display:none;position:absolute;top:10px;right:10px;z-index:10000000;}
#file_images_div_undo{display:none;position:absolute;top:10px;right:10px;z-index:10000000;}

#exitFileModal{z-index:9999999999999;position:absolute;top:13px;left:13px;width:30px;height:30px;border-radius:30px;background:#ff4646;}
#exitFileModal span{position:absolute;top:-8px;left:4px;transform:rotate(45deg);color:white;font-size:30px;}

#exitAboutMagicBoardModal{z-index:9999999999999;position:absolute;top:3px;left:3px;width:30px;height:30px;border-radius:30px;background:#ff4646;}
#exitAboutMagicBoardModal span{position:absolute;top:-8px;left:4px;transform:rotate(45deg);color:white;font-size:30px;}


.bookPageDivStyle{float:right;background:white;color:white;display:none;box-shadow: 0px 0px 14px 0px #d2d2d2;border-radius: 5px;}
.bookTypeDIV,.imagesTypeDIV{overflow:hidden;background:white;color:black;box-shadow: 0px 6px 14px #d2d2d2;border-radius: 5px;text-align:center;}
.MbookTypeDIV{overflow:hidden;background:white;color:black;box-shadow: 0px 6px 14px #d2d2d2;border-radius: 5px;text-align:center;}
.categoryDIVStyle{height:auto;overflow:hidden;display:none;background:white;color:black;box-shadow: 0px 0px 14px 0px #d2d2d2;border-radius: 5px;text-align:center;}
.categoryMohtavaDIVStyle{float:right;margin:5px;height:200px;width:200px;overflow:hidden;display:none;background:white;color:black;box-shadow: 0px 0px 14px 0px #d2d2d2;border-radius: 5px;text-align:center;}

.categoryMohtavaDIVStyle video{width:100%;height:180px;float:right;}
.categoryMohtavaDIVStyle img{width:100%;height:180px;float:right;}
.categoryMohtavaDIVStyle button{width:100%;height:20px;font-size:12px;}

.modal{
	/* animation-name: fileModal;
  	animation-duration: 0.3s; */
	  overflow:auto;display:none;position:absolute;z-index:9999999999999;background:white;border-radius:10px;}
#backgroundModal{direction: rtl;padding: 10px;}

.modalElementAdditional{padding:5px;overflow:auto;display:none;position:absolute;z-index:9999999999999;background:white;border-radius:10px;width:150px;}
.modalElementAdditional h3{font-size:13px;}

.firstSettingModal {
	width: 100%;
	max-height: 100%;
	margin:0 auto;
	position: absolute;
	background: white;
	border-radius: 10px;
	left: 0;
	right:0;
	bottom:0;
	top:0;
	border:1px solid;
	z-index: 99999999;
	overflow:auto;
}

.firstSettingModal p {
	width: 100%;
	float: right;
	text-align: right;
	direction: rtl;
	font-family: myf;
	margin: 5px;
	font-size: 14px;
}

.firstSettingModal input {
	width: 100%;
	float: right;
}

.firstSettingModal button {
	width: 100%;
	float: right;
	margin-top: 17px;
	background: blue;
	color: white;
	border-radius: 5px;
	text-align: center;
	font-family: myf;
	border: 0;
	outline: none;
	height: 30px;
}

#usersBoard{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 9000000000;
	background: black;
	display: none;
}


.firstSettingModal input[type="text"]{
	border: none;
    border-bottom: 2px solid gray;
    margin-bottom: 10px;
    padding: 3px 5px;
    font-family: myf;
    direction: rtl;
    text-align: right;
    outline: none;
}

.modal-error{
	/* animation-name: fileModal;
  	animation-duration: 0.3s; */
	position:absolute;
	top:40%;
	left:10%;
	width:80%;
	height:auto;
	background:red;
	color:white;
	padding:10px;
	border-radius:10px;
	display:none;
	z-index:999999999999;
}
.modal-error span.icon{
	width: 30px;
  height: 30px;
  background: #990000;
  border-radius: 50%;
  border: 1px solid white;
  color: white;
  font-size: 20px;
  font-family: myf;
	padding: 2px 9px 0px 9px
}

.modal-error span.message{
	margin-top:3px;
	float:right;
	direction:rtl;
	text-align:right;
}

#recordTimer{
	position:absolute;
	top:1px;
	margin:auto;
	width:163px;
	background:red;
	padding:5px;
	border-radius:5px;
	color:white;
	font-size:14px;
	display:none;
	left: calc(50% - 81px);
	z-index:15;
}
#recordTimer span.text{float:right;}

#hideElementModalElements{
	/* animation-name: fileModal;
  	animation-duration: 0.3s; */
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	height:80%;
	background:rgba(0,0,0,0.2);
}
#hideElementModalAnimations{
	position:absolute;
	bottom:0px;
	left:0px;
	right:0px;
	height:20%;
	background:green;
}
#hideElementModalAnimations div{padding:0px 5px;color:white;border:2px solid green;flex-grow:1;display:flex;align-items:center;text-align:center;}
.modal-bottom{
	position:absolute;
	bottom:0px;
	left:0px;
	right:0px;
	top:0px;
	z-index:100000;
	border-radius:10px;
	background:rgba(0,0,0,0.32);
	content-visibility:auto;
	display : none;
}
#elementAnimationSetting{padding-top:36px;}
#settingFrom , #settingTo{
	float:left;
	width:40%;
	height:40%;
	padding:10px;
}

#settingFrom input[type=range],#settingTo input[type=range]{
	width:100%;
}

#elementAnimationSettingExit{
	position:absolute;
	top:5px;
	right:5px;
	background:red;
	color:white;
	width: 30px;
	height: 30px;
	font-size: 20px;
	font-family: "myf";
	border-radius: 30px;
	margin-left: 10px;
}
#elementAnimationSettingExit span{margin-left:8px;}

#elementAnimationSettingAddition{
	display:flex;
	justify-content:center;
	width:100%;
	flex-wrap:wrap;
}

#elementAnimationSettingAddition div{
	background:red;
	float:right;
	padding:5px;
	color:white;
	border-radius:5px;
	direction:rtl;
	text-align:right;
	width:auto;
	height:100%;
}


#elementAnimationSettingAddition input{
	direction:rtl;
	text-align:center;
	border-radius:4px;
	width:80px;
	height:100%;
	margin-right:10px;
}

#elementAnimationSettingAddition div.position,#elementAnimationSettingAddition div.name,#elementAnimationSettingAddition div.repeat,#elementAnimationSettingAddition div.time{
	background:red;
	margin-right:5px;
	margin-top:5px;
}
#elementAnimationSettingAddition div.position span,#elementAnimationSettingAddition div.name span,#elementAnimationSettingAddition div.repeat span,#elementAnimationSettingAddition div.time span{
	float:right;
}


#elementAnimationSettingPlay,#elementAnimationSettingYoyo,#elementAnimationSettingAutoPlay,#elementAnimationSettingKill{
	border: none;
	outline: none;
	width: auto;
	height: 36px;
	margin-top: 5px;
	margin-left: 5px;
	padding: 2px 5px 5px 5px;;
	border-radius: 5px;
	background:#00ff00;
}
#elementAnimationSettingPlay:disabled{background:#73ff73;}

#headingSettingAdditional{
	width:20%;float:left;
}
#headingSettingAdditional p{
	float:left;
	width:100%;
	direction:rtl;
	text-align:righ;
	color:white;
}

#create_element_tool_div{
	position: absolute;
	top: 10px;
	left: 10px;
	display: none;
	background-color: white;
	box-shadow: rgb(200, 200, 200) 0px 0px 8px 1px;
	padding: 3px 8px 3px 3px;
	border-radius:15px;
	z-index: 2147483647;
	flex-wrap: wrap;
	align-items: center;
}


.btnInDiv{
	float:right;
	width:100%;
	margin:0px;
	color:white;
	background:blue;
	border:0px;
	outline:none;
	font-size:15px;
}

.hideboard{display:none;}
.showboard{display:block;}
.showbtnboard{display:block;}
.hidebtnboard{display:none;}
.btnRecordForAudioOk{margin:5px;border-radius:5px;width:100%;height:30px;background:green;color:white;border:0px;outline:none;float:right;clear:both;}
.btnRecordForAudioNo{margin:5px;border-radius:5px;width:100%;height:30px;background:red;color:white;border:0px;outline:none;float:right;clear:both;}

.pages,.addPage{border-radius:20px;display: flex;align-items: center;justify-content: center;float:right;width:150px;height:150px;margin:5px;color:black;background:white;box-shadow:0px 0px 10px #d1d1d1;}
.saveBtn{position:absolute;top:10px;right:10px;border:0px;outline:none;background:green;padding:5px;box-shadow:0px 0px 3px gray;border-radius:10px;line-height:6px;color:white;z-index:20;}
.deleteProject{margin-bottom:20px;width:100%;border:0px;display:none;outline:none;background:red!important;padding:5px;border-radius:10px;color:white!important;}
#selectAndRemoveBackgroundAndSaveInput{height:26px;z-index:200;width:170px;direction:rtl;text-align:right;padding:5px;outline:none;border:0px;border-radius:5px;background:blue;position:absolute;bottom:100px;right:0px;display:none;color:white;}
#exportImgToBoard{z-index:200;width:26px;height:26px;direction:rtl;text-align:right;padding:5px;outline:none;border:0px;border-radius:5px;background:green;position:absolute;bottom:100px;right:180px;display:none;}
#removeBackground{z-index:200;width:26px;height:26px;direction:rtl;text-align:right;padding:5px;outline:none;border:0px;border-radius:5px;background:green;position:absolute;bottom:100px;right:215px;display:none;}


#qrcode video{height:90%;}

#iframQrcode{display:none;position:absolute;top:0px;left:0px;bottom:0px;right:0px;overflow:auto;background:white;z-index:999999999999;}
#iframQrcodeContent{width:100%;height:100%;overflow:auto;}
#iframQrcodeClose{width:40px;height:40px;font-size:20px;border:0px;outline:none;position:absolute;top:10px;right:10px;background:red;border-radius:20px;color:white;}

#exportImgFromPdf{
	padding: 5px 4px;
	text-align: center;
	background: #f85c5c;
	margin: 12px;
	border:0px;
	box-shadow: 0px 10px 10px 0px #cfcfcf;
  border-radius: 20px;
}

.exportImgFromPdfInput{
	display: flex;
	width: 50%;
	margin: 10px;
	padding: 5px;
	border-radius: 20px;
	text-align: center;
	color: black;
	box-shadow: 1px 8px 16px #cecece;
	outline:none;
	font-family:myf;
	border:0px;
}

#exportImgFromPdfDivInputs{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	margin: 14px;
}
.aboutMagicBoardDiv{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: center;
}

.aboutMagicBoardDivDiv1{
	background:white;
}
.aboutMagicBoardDivDiv2{
	background:#005fae;
}
.aboutMagicBoardDivDiv1,.aboutMagicBoardDivDiv2{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	align-items: center;
  overflow: auto;
}
.aboutMagicBoardDivDiv1 a{
	width: 100%;
	border-radius: 20px;
	box-shadow: 0px 5px 5px #848484;
	text-decoration: none;
	margin: 10px;
	text-align: center;
	background: darkturquoise;
	color: white;
}

.aboutMagicBoardDivDiv2 svg{width: 80%;
    margin-bottom: 24px;}
.aboutMagicBoardDivDiv2 span{clear:both;width:100%;}
.aboutMagicBoardDivDiv2 p{width:100%;padding:5px;direction:rtl;text-align:center;color:white;font-family:myf;list-style:none;}

#copyDone{
	animation-name: copyDone;
  	animation-duration: 0.3s;
	display:none;
	position:absolute;top:10px;right:10px;padding:10px;box-shadow:0px 0px 10px black;color:white;background:green;z-index:999999999;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: center;
	align-items: center;
	width: 200px;
	height: 30px;
	direction: rtl;
	padding: 30px 20px;
	border-radius: 20px;
	font-size: 18px;
}

#copyDone svg{
	width: 30px;
    margin-left: 10px;
}
	
@keyframes copyDone {
  from {right:-50px;}
  to {right:10px;}
}

#copyPanel{
	position:absolute;
	bottom:70px;
	top:50px;
	right:10px;
	border-radius:8px;
	padding:8px;
	width:40px;
	height:auto;
	background:black;
	display:flex;
	flex-direction: column;
	z-index:20;
	overflow:auto;
}
#copyPanel button{
	width:100%;
	height:auto;
  padding: 3px;
	background: rgba(0,0,0,0);
	border: 0px;
	outline: none;
	cursor:pointer;
}

#copyPanel hr{
	width: 100%;
	margin-top: 5px;
	margin-bottom:9px;
}
#ewebynarADDExit{
	position:absolute;
	top:-49px;
	right:4px;
	width:40px;
	height:40px;
	background:red;
	color:white;
	line-height: 40px;
	font-size: 20px;
	border-radius: 40px;
	padding-left: 13px;
	padding-top: 3px;
}
#ewebynarADD{
	display: none;
	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 0px;
	width: 100%;
	z-index: 9999999999999999999;
	background: white;
	height: 80px;
	flex-direction:row-reverse;
	align-items : center;
	text-decoration:none;
	animation-name:ewebynarADD;
	animation-duration:1s;
}

div.ewebynarADD_img{
	flex-grow:1;	
	margin-top: 10px;
}
div.ewebynarADD_img img{
	width:80px;
	height:80px;
}
div.ewebynarADD_btn{
		flex-grow:1;    
		display: flex;
    align-items: center;
    justify-content: center;
		padding:20px 20px;
}
div.ewebynarADD_btn a{
		padding:10px 15px;
		border-radius:20px;
		outline:none;
		border:0px;
		background:black;
		color:white;
		text-decoration:none;
}
div.ewebynarADD_content{
	flex-grow:2;
	direction:rtl;
	text-align:right;
	color:black;
	padding:10px 15px 10px 0px;
	font-size:16px;
}

@keyframes ewebynarADD {
  from {bottom:-150px;}
  to {bottom:0px;}
}
a{text-decoration:none;}

#animationsPanel{
	position: absolute;
	top:0px;
	right:0px;
	bottom:0px;
	width: 200px;
	height: 100%;
	display: none;
	background-color: rgba(0,0,0,0.3);
	z-index: 999999999999999;
	animation-name: animationsPanel;
	animation-duration: 0.3s;
	touch-action: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
@keyframes animationsPanel {
	from {right:-100px;}
	to {right:0px;}
}
#animationsPanelSelectedElementAnimation{
	width: 100%;
	height: 100%;
	overflow: auto;
	position: relative;
	
}
#animationsPanelSelectedElementAnimationDiv{
	width: 100%;
	height: 100%;
	padding:5px;
}
#animationsPanelSelectedElementAnimationDiv > div.animationsElement{
	width: 100%;
	height: 40px;
	position: relative;
	box-shadow :-2px 8px 12px 0px #5a5a5a;
	margin-bottom:11px;
	border-radius: 10px;
	content-visibility: auto;
	background-color: #60ba65;
}
#animationsPanelSelectedElementAnimationDiv > div.animationsElement > div{
	line-height: 30px;
	height: 30px;
	width: 30px;
	margin: 5px;
	border-radius: 30px;
	background: white;
	text-align: center;
}
#animationsPanelSelectedElementAnimationDiv > div.animationsElement > div.number{
	float: right;
}
#animationsPanelSelectedElementAnimationDiv > div.animationsElement > div.number > input{
	border: none;
    outline: none;
    border-radius: 30px;
    width: 100%;
    height: 100%;
    text-align: center;
}
#animationsPanelSelectedElementAnimationDiv > div.animationsElement > div.delete{
	float: left;
	padding:5px;
	cursor: pointer;
}
#animationsPanelSelectedElementAnimationDiv > div.animationsElement > div:hover{
	background-color: crimson;
}
#animationsPanelSelectedElementAnimationDiv > div.animationsElement > div.run{
	float: left;
	cursor: pointer;
}
#animationsPanelSelectedElementAnimationDiv > div.animationsElement > div:hover{
	background-color: crimson;
}

#colorsDiv{
	position: absolute;
	z-index: 2147483647;
	padding: 5px;
	background: white;
	max-width: 200px;
	display: none;
	flex-direction: row;
	flex-wrap: wrap;
	border-radius: 20px;
	justify-content: center;
}

#colorsDiv div:hover{
	border: 2px dashed black;
}
#colorsDiv div{
	width: 40px;
    height: 40px;
    margin: 3px;
    box-shadow: 0px 0px 4px 0px #7f7f7f;
    border-radius: 13px;
	cursor: pointer;
}

#sizesDiv{
	position: absolute;
	z-index: 2147483647;
	padding: 10px;
	background: white;
	max-width: 200px;
	display: none;
	flex-direction: row;
	flex-wrap: wrap;
	border-radius: 20px;
	justify-content: center;
}

#sizesDiv div:hover{
	background-color: seagreen;
}
#sizesDiv div{
	width: 30px;
    height: 30px;
    margin: 3px;
    box-shadow: 0px 0px 4px 0px #7f7f7f;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.7rem;
    display: flex;
    justify-content: center;
    align-items: center;
	cursor: pointer;
}
#shapesDiv{
	position: absolute;
	z-index: 2147483647;
	padding: 10px;
	background: white;
	display: none;
	border-radius: 20px;
	flex-direction: column;
	max-width: 900px;
	height: 129px;
  overflow: auto;
}

#shapesDiv div button:hover{
	background-color: seagreen;
}
#shapesDiv button{
	width: 30px;
    height: 30px;
    margin: 3px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
	cursor: pointer;
    outline: none;
    border: 0px;
}

#shapesDivSvgs img:hover{
	background-color: seagreen;
	border-radius: 5px;
}
#shapesDivSvgs{
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background: #f6f6f6;
    padding: 3px;
    border-radius: 15px;
    margin-bottom: 5px;
	cursor: pointer;
}

#shapesDivShapes{
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background: #f6f6f6;
    padding: 3px;
    border-radius: 15px;
    margin-bottom: 5px;
}


#shapesDivSvgs img{
	width: 40px;
    height: 40px;
    margin: 3px;
}

#shapeModal{
	position:absolute;
	display: flex;
	bottom: 10px;
	content-visibility: auto;
	border-radius: 5px;
	background: black;
	z-index: 20;
	direction:ltr;
	left:calc(50% - 150px);
	width:300px;
	height:30px;
	flex-direction : row;
	justify-content : center;
	border: 1px solid white;
}
#shapeModal button{padding:7px 2px 7px 2px;width:25px!important}

#shapeModal button svg,#shapeModal button img{fill:white;width:100%;height:100%;}

#shapeModalDiv{display:flex;padding:5px;background:white;}

#shapeModalDiv button svg{width:100%;height: 100%;}
#shapeModalDiv button:hover{
	background-color: #54ffa0;
}
#shapeModal button{
	background: none;
	border:0;
	outline:none;
	display: flex;
 	align-items: center;
	cursor: pointer;
	margin:0px 2px 0px;
}

#colors div{
    width: 100%;
    height: 100%;
    border-radius: 10px;
	box-shadow: grey 0px 0px 10px;

}

#sizes{
	font-size: 20px;
	display: flex;
    align-items: center;
	justify-content: center;
}

#hideAllElement{
	position: absolute;
    right: 9px;
    bottom: 8px;
    width: 20px;
    height: 20px;
    z-index: 16;
    background: #fefffd;
    border-radius: 10px;
    padding: 7px;
}

#panel button:hover{
	background-color: cyan;
}

#saveBoard{
	cursor:pointer;
}

#saveBoard:hover{
	background-color: #1c9d1c;
}

#teacherSampleVideo{
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	padding: 10px;
	overflow: auto;
	z-index: 999999999;
	direction: rtl;
	background-color: white;
	padding-bottom: 80px;
	display: none;
}

#teachersVideo{
	display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; 
	flex-wrap: wrap;
}

#teacherVideo{
	padding-right: 5px;
	padding-left: 5px;
	margin-bottom: 10px;
}

#teacherVideo div{
	background-color: white;
	border-radius: 5px;
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
	width: 100%;
	content-visibility: auto;
}

#teacherVideo div div.body{
	padding:10px;
}

#teacherVideo video{
	width: 100%;
}

#teacherVideo video{
	height: 170px;
}

#teacherVideo h3{
	color: #4f4f4f;
    font-size: 16px;
    margin-bottom: 5px;
}

#teacherVideo p.paragraph{
	color: #7f7f7f;
    font-size: 15px;
    margin-bottom: 5px;
}

#teacherVideo p.teacher{
	color: #008500;
    font-size: 13px;
}

#sendTeacherSampleVideo{
	position: fixed;
	width: 100%;
	bottom: 0px;
	left : 0px;
	right : 0px;
	height : 70px;
	background-color: #249e30;
	color:white;
	border:0px;
	outline: none;
	font-size: 18px;
}

#sendTeacherSampleVideo:hover {
	background-color: #127416;
}

.btn {
	outline: none;
	border: none;
	cursor: pointer;
	padding: 10px;
	border-radius: 10px;
	text-align:center;
	font-size:15px;
	margin: 5px;
	background: none;
}

.btn-danger{
	background-color: #ffc1c1;
	color : #5b0000;
}

.btn-success{
	background-color: #a4ffa4;
	color : #133500;
}

#changeBackgroundSelectFile{
    background: #2ccbff;
    padding: 30px;
    border-radius: 10px;
    margin-top: 10px;
    position: relative;
}
#changeBackgroundSelectFile span,#changeBackgroundSelectFile input{
	position: absolute;
    top: 0;
    left: 0;
    color: #08004d;
    bottom: 0;
    right: 0;
}
#changeBackgroundSelectFile span{
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

#changeBackgroundSelectFile input{
    z-index: 2;
    opacity: 0;
}

#backgroundColorsDiv div{
	height: 100px;
    flex: 1;
}

#backgroundImageDiv {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#backgroundImageDiv div{
	width: 200px;
    height: 200px;
}

#backgroundImageDiv div img{
	width: 100%;
    height: 100%;
}

#panel {
	height : 80%!important;
}