/*
@font-face {
    font-family: "yekan";
    src: url(../fonts/BYekan+.ttf) format('truetype');
	font-display: swap;
}@font-face {
    font-family: "webyekan";
    src: url(../fonts/webyakan/Yekan.ttf) format('truetype'),
		url(../fonts/webyakan/Yekan.eot) format('eot'),
		url(../fonts/webyakan/Yekan.woff) format('woff');
		font-display: swap;
}
@font-face {
    font-family: "yekanBold";
    src: url(../fonts/BYekan+Bold.ttf) format('truetype');
	font-display: swap;
}

@font-face
{
 font-family:'webyekan';
src: url(../fonts/webyekan/Yekan.eot) format('eot'),  /* IE6–8 */
 /*   url(../fonts/webyekan/Yekan.woff) format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+ */
 /*   url(../fonts/webyekan/Yekan.ttf) format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
/*	font-display: swap;
}
@font-face
{
 font-family:'iransans';
src: url(../fonts/IRANSans.eot) format('eot'),  /* IE6–8 */
/*    url(../fonts/IRANSans.woff) format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
/*    url(../fonts/IRANSans.ttf) format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
/*	font-display: swap;
}

/*WebYekanNumberFont*/
/*
@font-face
{
 font-family:'webyekanNumber';
src: url(../fonts/webyekan/yekannumbers-regular.eot) format('eot'),  /* IE6–8 */
/*    url(../fonts/webyekan/yekannumbers-regular.woff) format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
/*    url(../fonts/webyekan/yekannumbers-regular.ttf) format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
/*	font-display: swap;
}

 */
 @font-face {
    font-family: Early;
    src: url("/fonts/Early.otf");
	font-display: swap;
}
@font-face
{
 font-family:'vazir';
src: url(../fonts/Vazir.ttf) format('truetype'),  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
	url(../fonts/vazir-webfont.woff) format('woff');
	font-display: swap;
}
html{width:100%;height:100%;}
body{background:#e9ecef;font-family:"IranSans","vazir",calibri;direction:rtl;text-align:right;
width:100%;height:100%;}
text{font-family: "IranSans" !important;}
p{text-align:justify;} 
header{background:#058097;}
.profile-header{background: url(/image/header-image-left.jpg) 0%;background-size:auto 100%;}
.user-profile-header{background: url(/image/user-profile-header.jpg) 0% 60%;}

h1{	font-family:"vazir";}
.form{padding:20px;margin:0 auto;color:#000;background:#fff;}
.col,.col-md-9,.col-lg-9,.col-sm-12,.col-12{
	padding:0px;
}a{text-decoration:none;color:#444;}
a:hover{text-decoration:none;color:#444;}
.form-control{border-radius:0px;margin-top:10px;}
.navbar-dark .navbar-nav .nav-link{
	color: rgba(255,255,255,1);
}
.navbar-expand-md .navbar-nav .nav-link {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}
.nav-link:hover{
	background:#ffca0b;
	border-radius:5px;
}
.navbar{
	padding:0px;
	
}
.navbar-brand{
	margin-right:0px;
}
.navbar-dark .navbar-toggler{
	border:none;
}
.delay1{
	animation-delay: 1s;
}.delay2{
	animation-delay: 2s;
}.delay3{
	animation-delay: 3s;
}.delay4{
	animation-delay: 4s;
}
.jumbotron{
	border-radius:0px;
}

.logo-text{
	color:#206496;
	text-shadow:-1px 1px 2px #fff;
}

.card{
    text-overflow: ellipsis;
	max-height:280px;
	min-height:280px;
	margin:0px;
	box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.12);
	transition:all .5s;
	padding:20px;
	border:none;
}
.card-holder{
	padding:5px;
	margin:0px;
	float:right;
	position:relative;
	transition:all .5s;
}
.card-body{
	padding:0px;
}
.card img{
	position:relative;

	padding:5px;
	display:block;
	margin:0 auto;
	width:80px;
	height:80px;
	box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.45);
}

.course-img img{
	position:relative;
	border-radius:50px;
	width:100px;
	height:100px;
	box-shadow:2px 2px 3px #555,-2px -2px 3px #555;
	padding:5px;
	display:block;
	margin:0 auto;
}
.course-subject{
	text-align:center;
}
.card-text{color:#000;font-size:12px;}
.card-title{
	position:relative;
	padding:5px;
	margin-bottom:0px;
}
.card-title h5,h5 {
	text-align:center;
	padding-top:10px;
}
 .middle-box{
	text-align:center;
	display:block;
	height:100%;
	/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Chrome, and Opera */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

}
.btn-add{
	width:50px;
	height:50px;
	background:url(/image/appSprite.png)  -126px 75px green;
	box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);
	position:fixed;
	bottom:20px;
	right:100;
	border-radius:50px;
}
.btn-add:hover{background-color:#22aa00;}
.fas,.fa{position:relative}
.note{font-size:13px;display:inherit;}
.btn-default{border:1px solid #bbb;}
/* toggle switch */
 /* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 55px;
  height: 28px;
}

/* The slider */
span.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

span.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

/* Hide default HTML checkbox */
.switch input {display:none;}
/* The slider */

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
.slidecontainer {
  width: 100%;
  position:relative;
}

input[type=range].slider {
  -webkit-appearance: none;
  width: 95%;
  height: 10px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  
}

input[type=range].slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 23px;
  height: 24px;
  border: 0;
   background:gray;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 23px;
  height: 24px;
  border: 0;
 background:gray;
  cursor: pointer;

}
input[type=text],input[type=password],.rem,label,a{
	font-size:13px !important;
}
input{
border-radius:3px ;
}
label.note{
	color:#aaa;
}
/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
} 
.list-options{
	position:absolute;
	height:100%;
	z-index:10;
	left:0px;
	top:0px;
	 background:#fff;
	font-size:14px;
	padding:0px;
	font-size:25px;
	overflow:hidden;
	white-space:nowrap;
	direction:ltr;
	text-align:left;
	-webkit-transition: all .5s ease;  
  -moz-transition: all .5s ease;  
  -o-transition: all .5s ease;  
  -ms-transition: all .5s ease;  
  transition: all .5s ease;
  border-right:1px dotted;

}
.list-options-closed{
	width:50px;
}
.list-options-opened {
  width: 100%;
  border-right:5px solid;
background:#fff !important;
}

.list-group-item{position:relative;overflow:auto;}
.list-group-item:first-child,.list-group-item:last-child{border-radius:0px;}
div.list-group-item{background:#e7e3e3}
.list-group-item a{display:block;white-space:nowrap;}
.list-options a{
	display:inline-block;
	min-width:50px;
	height:100%;
	padding:5px;
	color:#000;
	text-align:center;
} 
.list-options span{font-size:20px;}
.content{
	background:#f2f2f2;
	padding:15px;
	color:#262626; 
}
.content img{
	max-width:100%;
}
.data,.art-text{
	background:#f2f2f2; 
	margin:0px auto;
	max-width:820px;
	min-height:100%;
}
.art-text{background: #f2f2f2;
padding: 15px;
color: #262626;}
.content-item{
	background:-moz-linear-gradient(to right,#fff ,#92c4c9);
}.content-item span{
	font-size:20px;
}
.subject-item {
	display:none;
}
.subject-item p{
	text-align:none !important;
	direction:rtl;
}
.course-area{
	padding-bottom:10px;

	min-height: 100%;

}
.loader{
position: fixed;
z-index: 1500;
width: 30px;
height: 30px;
background: url(/image/ajax-loader2.gif) 38% 65% no-repeat #fff;
display: none;
top: 50%;
left: 50%;
padding: 0px;
box-shadow: 2px 2px 30px #e36e55,-2px -2px 30px #5bd19b;
animation: heartbeat 1s infinite;
border-radius:40px;
}
.ques-content{
	display:none;
}
.active{
	display:block;
}
.modal-title{
	text-align:center;
	width:100%;
	font-size:18px;
}
.my-wysi {
	position:relative;
	overflow:auto;
}
.my-toolbar{
	position:sticky;
	border:1px solid red;
	top:0px;
	width:100%;
	height:40px;
}
.my-toolbar .toolbar{
	position:absolute;
}
.toolbar-bold{
	font-weight:bold;
}
#contentFroala {
	direction:rtl;
	text-align:right;

}
.notice{
	background:#eeea87;
	border-right:5px solid #c9c54c;
	padding:10px;
	direction:rtl;
}
.notice-green{
padding:10px;
background: #e9e9e9;
border-right: 7px solid #000;
color:#000;
}
.fr-view{
	max-width:938px;
	background:#fff;
	margin:0px auto;
	box-shadow:1px 1px 3px #aaa;
	margin:10px auto;
}
.fr-wraper{
	background:#e6e9ea;
	padding:10px; 
}
.container{
	padding:0px;
}
.container-fluid {
	padding-left:0px;
	padding-right:0px;

}
.history-bar{margin:5px 0px;padding:10px;background:#fff;border-radius:3px;
overflow:auto;white-space:nowrap;}
.row{margin:0px;}
.my-row{box-shadow: 0 0 0 1px rgba(0,0,0,.1),0 2px 3px rgba(0,0,0,.2);
background: #fff;width:500px;margin:0px auto;}
.my-row:hover{background:#eee;}

.mt3{margin-top:3px;}
.my-row div{
	background:transparent;
}
.play-header{
	background:rgb(134, 134, 134);
	height:93px;
}.play-header-items {
	list-style:none;
	padding:0px;
	margin:0px;
	margin-top:20px;
	color:#fff;
	transition:all 0.5s;
}.play-header-items li{
	display:inline-block;
	margin:5px;
	height:100%;
	margin:0px;
}.play-header-items h5{
	font-weight:bold;
	text-shadow: 1px 1px 4px #1a1717; 
}
.show-point{
	margin-top: 20px;
	font-size: 18px;
	text-shadow: 1px 1px 4px #1a1717;
	float: left;
	color: #fff;
	background: #6c6c6c;
width: 100%;
border-radius: 30px;
padding: 0px 20px;
border: 1px dashed;
box-shadow: 2px 2px 2px #444;
}
#subtitle{display:none;font-size:30px;transition:all 0.5s;text-shadow:1px 1px 1px #b5b2b2;font-weight: bold;}
.btn{padding:4px;font-size:14px;position:relative;overflow:hidden;}
.btn-file {
	position: relative;
	overflow: hidden;
    }
.btn-file input[type=file] {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	text-align: right;
	filter: alpha(opacity=0);
	opacity: 0;
	outline: none;
	background: white;
	cursor: inherit;
	display: block;
} 
.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
  cursor:pointer;
}
.upload-btn-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
div.msgbox{
	position:fixed;
	z-index:1300;
	min-width:200px;
	min-height:150px;
	display:none;
	box-shadow:2px 2px 5px #555;
	border:1px solid black;
	padding:2px;
	text-align:center;
	background:#fff;	
}
#progress {direction:ltr; position:relative;display:none; width:100%; padding: 1px; border-radius: 3px; }
#bar { background-color: #1876BA; width:0%; height:5px; border-radius: 3px; transition:all 1s;}
#percent { position:absolute;  top:3px; left:48%;margin-top:-10px; font-size:8px;}
/*.progress-bar{background:#058097}*/
.modal{
	z-index:1400;
}
.middle-box{
	/* Internet Explorer 10 */
	display:-ms-flexbox;
	-ms-flex-pack:center;
	-ms-flex-align:center;

	/* Firefox */
	display:-moz-box;
	-moz-box-pack:center;
	-moz-box-align:center;

	/* Safari, Opera, and Chrome */
	display:-webkit-box;
	-webkit-box-pack:center;
	-webkit-box-align:center;

	/* W3C */
	display:box;
	box-pack:center;
	box-align:center;
}
#blah{
	width:100px;
	height:100px;
	border-radius:50px;
	box-shadow:1px 1px 2px rgba(0,0,0,.5);
}
.navbar-stage .n-s{
	overflow: auto;
	white-space:nowrap;
	padding-left:10px;
	transition:all .5s;
}
.navbar-stage{
	padding:0px;
	text-align:left;
	margin:0px;
	height:30px;
	background:#424344; 
	padding-left:70px;
    width: 100%;
    
	
}.stage-item{
	display:inline-block;
	width:75px;
	color:#ded5d5;
	margin:0 -9px 0 -10px;
	height:100%;
	cursor:pointer;
	text-align:center;
	position:relative;
}
.stage-item-selected{
	
	background:url(/image/appSprite.png)-154px 320px;
	
}
.stage-item-disabled{
	display:inline-block;
	width:75px;
	margin:0 -9px 0 -10px;
	height:100%;
	text-align:center;
	color:#aaa;
	cursor:default;
}
.left{
	float:left;
}
.right{
	float:right;
}.right-arrow{
	position:absolute;
	right:0px;
}
 /* Customize the label (the container) */
label.container {
  display: block;
  position: relative;
  padding-right: 35px;
  margin-bottom: 12px;
  cursor: pointer;
	float:right;

	width:auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
label.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  right: 0;
  height: 30px;
  width: 30px;
  background-color:#848484;
  
}
.multi-choice{
	position: relative;
	background:	#fff;
	border: 1px solid #eee;
	padding: 10px 10px 0px;
	cursor: pointer;
}
.multi-choice  .checkmark {
	height: 100%;
  width: 100%;
  border-radius:30px;
}
.multi-choice .container{
	height:40px;
	width:40px;
}
.multi-choice  input[type='text']{
	border:none;
	border-bottom:1px solid #888;
	width:100%;
	transition:all .5s;
	
}.multi-choice  input[type='text']:focus ,.multi-choice  input[type='text']:active{
	border:none;
	border-bottom:3px solid red;
	box-shadow:none;
}
/* On mouse-over, add a grey background color */
label.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
label.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
label.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
label.container .checkmark:after {
  left: 40%;
  width: 10px;
  height: 30px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
 
} 
/* Create a custom radio button */
.radiomark {
  position: absolute;
  top: 0;
  right: 0;
  height: 30px;
  width: 30px;
  background-color: #eee;
  border-radius: 50%;
  transition:all .5s;
}

/* On mouse-over, add a grey background color */
label.container:hover input ~ .radiomark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
label.container input:checked ~ .radiomark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radiomark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
label.container input:checked ~ .radiomark:after {
  display: block;
}
/* Style the indicator (dot/circle) */
label.container .radiomark:after {
  top: 11px;
  left: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}
.check-answer,.check-answer2,.check-answer3 {
position:relative;
	width:50px;
	height:50px;
	background:url(/image/appSprite.png) 5px 5px green;
	border-radius:50px;
	cursor:pointer;
}
.next-subject {
	position:fixed;
	bottom:7px;
	right:40px;
	width:50px;
	height:50px;
	background:url(/image/appSprite.png) -165px -5px rgb(100, 221, 23);
	border-radius:50px;
	padding:5px;
	color:#fff;
	cursor:pointer;
}
.quiz-wrong-result,.quiz-correct-result,.quiz-correct-result-point{
	display:none;
	position:absolute;
	width:330px;
	height:120px;
	padding:10px;
	box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);
	z-index:1500;
}
.quiz-text,.msg-text,.given-point{
	font-size:25px;
	text-align:left;
	padding:25px 0px;
	float:right;
	width:200px;
}
.msg-text{
	font-size:15px;
}
.quiz-wrong-result{
	background:#feeee0;
	color:#ff2561;
}
.quiz-wrong-icon{
	width:50px;
	height:100%;
	margin-left:40px;
	float:left;
	background:url(/image/appSprite.png) -420px -150px;
}
.quiz-next{
	position:absolute;
	display:block;
	bottom:-25px;
	right:25px;
	width:60px;
	height:60px;
	border-radius:50px;
	cursor:pointer;
	background:url(/image/appSprite.png) -160px 0 #5daa05;
	box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);
}

.quiz-ok-btn{
	position:absolute;
	display:block;
	bottom:-20px;
	right:20px;
	width:50px;
	height:50px;
	border-radius:50px;
	cursor:pointer;
	background:url(/image/appSprite.png) 8px 7px #5daa05 ;
	box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);
	
}

.quiz-refresh{
	position:absolute;
	bottom:-25px;
	right:25px;
	width:60px;
	height:60px;
	background:url(/image/appSprite.png) -160px -120px #ff2561;
	border-radius:50px;
	cursor:pointer;
	box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);
}
.quiz-refresh:hover{
	box-shadow:0 10px 22px rgba(0,0,0,.25),0 6px 7px rgba(0,0,0,.26);
}
.quiz-correct-result{
	background:#f1ffe0;
	color:#5daa05;
}
.quiz-correct-icon{
	width:50px;
	height:100%;
	margin-left:40px;
	float:left;
	background:url(/image/appSprite.png) -290px -160px;
}

.mtitle{
	height:45px;
	text-align:center;
	padding-top:7px;
}
.mtitle-window{
	box-shadow:none;
	border-bottom:1px solid #ccc;
}
.mtitle-1{
	background:#b03bc9;
	color:#fff;
}.mtitle-2{
	background:#801896;
	color:#fff;
}.mtitle-3{
	background:#3f70a3;
	color:#fff;
}.mtitle-4{
	background:#13a953;
	color:#fff;
}.mtitle-5{
	background:#107d3e;
	color:#fff;
}.mtitle-6{
	background:#fa3636;
	color:#fff;
}.mtitle-7{
	background:#ce2c2c;
	color:#fff;
}.mtitle-8{
	background:#45dff1;
	color:#000;
}.mtitle-9{
	background:#3cbfd6;
	color:#fff;
}.mtitle-10{
	background:#003f61;
	color:#fff;
}.mtitle-11{
	background:#ece9e9;
	color:#000;
	font-weight:bold;
}.mtitle-12{
	background:#FFCA0B;
	color:#000;
	font-weight:bold;
}.mtitle-13{
	background:#18517C;
	color:#fff;
	font-weight:bold;
}.mtitle-header{
	background:#058097;
	color:#fff;
	font-weight:bold;
}
.mtitle-info{
	background:#f4f6b1;
	color:#000;
	text-align:right;
	padding-right:15px;
}.mtitle-info span{
	color:blue;
	font-size:23px;
	margin-left:15px;
}
.container-white{
	background-color:#fff;
	padding:20px;
}
.container-red{
	background:#888;
	padding:20px;
	color:white;
}
@keyframes heartbeat
{
  0%{
    transform: scale( 1);
  } 

  40% {
    transform: scale( 1.1);
  } 

  80% {
    transform: scale( 1);
  }
  
  100% {
    transform: scale( 1);
	
  }
}
@-webkit-keyframes heartbeat
{
  0%{
    transform: scale( 1);
  } 
 
  40%  {
    transform: scale( 1.1);

  } 

  80%  {
    transform: scale( 1);

  }
  
  100% {
    transform: scale( 1);
	
  }
}
.heart{
  position: absolute;
  width: 150px;
  height: 150px;
  top:40%;
  left:40%;
  animation: heartbeat 2s infinite;
  -webkit-animation: heartbeat 2s infinite;
  background:#36ABCB;
  border-radius:50%;
  white-space:nowrap;
  overflow:hidden !important;
  text-overflow: ellipsis;
  padding:40px 10px 0px 0px;
  text-align:center;
  font-size:18px;
  box-shadow: 2px 2px 3px #555,-2px -2px 3px #555;

}
.blink
{
	background-color:red;
  position: absolute;
  animation: heartbeat 2s infinite;
  -webkit-animation: heartbeat 2s infinite;
  border-radius:50%;
  white-space:nowrap;
  overflow:hidden !important;
  text-overflow: ellipsis;
  padding:45px 10px 0px 0px;
  
}
.progress{
	direction:ltr;
	border-radius:0px;
	height:3px;
	z-index:1040;
	left:0;
	top:0;
	position:fixed;
}
.course-xps .progress{
	z-index:1000;
}
/*menu*/
.overlay {
    height: 100%;
    width: 0px;
    position: fixed;
    z-index:1100;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 50px;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 0px;
    right: 10px;
	color:#fff;
    font-size: 60px;
	line-height:50px;
	
}
.myNav-btn{
	position:fixed;
	top:20px;
	left:20px;
	z-index:1100;
	font-size:30px;
	cursor:pointer;
}
#myNav{
	color:#fff;
}


#studentState,#challenge-statistic,#challenge-statistic-user{
	height:100%;
	width:100%;
}
.challenge .mtitle{
	font-size:14px;
}
.time,.date{position:absolute;left:100px;top:0px;text-align:left;font-size:10px !important;}
.date{left:10px;}
.follower,.following{font-family:Early;margin-bottom:5px;}
@media screen and (max-width: 600px) {
#display-wiki-result{width:95% !important;left:10px !important;right:10px;}
#display-wiki-result img{width:100% !important;}
div.msgbox{width:90%;}
.title-welcome{padding-right: 10px; font-size: 26px !important;}
.title-welcome-sub{padding-right: 10px; font-size:14px !important;     margin-top: 20px;}
h1{font-size:25px !important;} 
h4{
  font-size:15px;
}
.card-holder{
  padding:5px !important;
}
.nav-links{
	width:100% !important;
}
.navtitle{
	display:none;
}
.my-row{width:100%;}
#course-items .col-6{padding:0px;}
.welcome-text{width:90% !important;}
}
.myCharts{
	direction:ltr;
}
.navtitle{
	cursor:pointer;
	}
.gray{
	color:#aaa;
}

.black{
	color:#000 !important;
}.white{
	color:#fff !important;
}
.home-header-darker{box-shadow:0 0 1000px 1000px rgba(0,0,0,.7) inset;
}
.user-pic ,.user-info,.course-xps{text-align:center;}

.user-info a{display:block;max-width:150px;font-size:13px;color:#000;text-align:right;position:relative;}
.course-xps{
	font-size:13px;
}
.user-name{
	font-family:Vazir ,calibri;margin-top:7px;white-space:nowrap;
}
.user-level{font-size:12px;color:#aaa;}
.user-pic img{
	border-radius:100px;
	width:120px;
	height:120px;
	border:2px solid #aaa;
	box-shadow:2px 2px 3px rgba(0,0,0,.5),-2px -2px 3px rgba(0,0,0,.5);	
}

.u-panel span{font-size:17px;}
.highlight{
	background:#faa;
}
.blank-box{
	border:0px;
	text-align:center;
	background:transparent;
	font-size:inherit;
	border-bottom:1px solid;
	line-height:0px;
	transition:all 0.2s ;
	border-radius:0px;
}
input.fill-item{
	cursor: pointer;
background: #81c8f2;
padding-left: 10px;
padding-right: 10px;
border-radius: 4px;
}
.blank-box:focus{
	box-shadow:3px 3px 15px gray;
	outline:none;
	
}
.course-item ,.chapter-item{
	opacity:0.3;
	cursor:auto;
}
.course-item.active,.chapter-item.active{
	cursor:pointer;
	opacity:1;
}

.panel-item{display:none;}
.panel-item.active{display:block;}
span.uname,span.ulevel{display:block;}
span.ulevel{
	font-size:12px;
}
.activity-item,.skill-item,.challenge-item,.waiting{
background:#fff;transition:all 0.5s;
margin:0px;padding:5px;width:100%;
overflow:hidden;font-size:14px;min-height:50px;}
.challenge-item{cursor:pointer;}
.challenge{position:relative;}

.activity-item img,.challenge-item img,.challenge img{
width:55px;height:55px;border-radius:60px;border:1px solid #ddd;}
.has-coin{border:4px solid #f6e314 !important;} 
.user-avatar{margin-left:5px;}
.u-a{width:30px;height:30px;border-radius:30px;border:1px solid #888;margin-top:-6px;}
.u-a:hover{border:2px solid #888;} 
.red-underline{border-bottom:1px solid red;}
.fbox{
	display:none;
	background:#fff;
	position:fixed;
	z-index:1200;
	width:100%;
	height:100%;
	top:0px;
	right:0px;
transition:width .3s ease,left .3s ease,right .3s ease;
	overscroll-behavior: contain;

}
.fbox .mtitle{
position: fixed;
width: 100%;
z-index: 1500;
}
.fbody{
	margin-top: 45px;
	overflow:auto;
	max-height:93%;

}
.result label{
white-space:nowrap;
font-family:arial;
font-size: 25px !important;
font-weight:bold;
padding:0px 7px;
color:#888;
margin:0px;
}
.result img{
width: 30px;
height: 30px;
margin: 0px;
border-radius: 0px;
}

.cont,.msg-cont,.m-count{font-family:calibri;border-radius:30px;width:20px;height:20px;background:red;color:#fff;position:absolute;display:none;font-size:15px !important;top:8px;padding:2px;text-align:center}
.m-count{top:0px;right:50px;padding:0px;}
.btn-back{
	background:url(/image/appSprite.png) -165px -5px ;
	width:40px;
	height:40px;
	margin-top:-8px;
	cursor:pointer;
	margin-right:10px;
}
/*the container must be positioned relative:*/
.custom-select {
  position: relative;
  font-family: Arial;
}
.custom-select select {
  display: none; /*hide original SELECT element:*/
}
.select-selected {
  background-color: DodgerBlue;
}
/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}
/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
}
/*style items (options):*/
.select-items {
  position: absolute;
  background-color: DodgerBlue;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}
/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}
.select-items div:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.logo-bg{
	position:absolute;
	width:50%;
	height:50%;
	opacity:0.1;
	background:url(/image/logo.png) no-repeat 50% 20% ; 
	background-size:250px 270px;
	left:0%; 
}
span.fr-img-caption.fr-dib {
  margin: 5px auto;
  display: block;
  float: none;
  vertical-align: top;
}
.fr-img-caption {
  text-align: center;
}
.fr-img-caption .fr-img-wrap {
  padding: 0px;
  display: inline-block;
  margin: auto;
  text-align: center;
}
.fr-img-caption .fr-img-wrap img {
  display: block;
  margin: auto;
}
.fr-img-caption .fr-img-wrap > span {
  margin: auto;
  display: block;
  padding: 5px 5px 10px;
  font-size: 14px;
  font-weight: initial;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-opacity: 0.9;
  -moz-opacity: 0.9;
  opacity: 0.9;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  width: 100%;
  text-align: center;
} 
.b-n,.wiki-note{color:#000;}

.ripple {
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 1);
  transform: scale(0);
  position: absolute;
  opacity: 1;
}
.rippleEffect {
    animation: rippleDrop .4s linear;
}
@keyframes rippleDrop {

100% {
    transform: scale(2);
    opacity: 0;
  }
}
.left-menu{
	position:fixed;
	height:95%;
	width:200px;
	left:-220px;
	transition:all .5s ease;
	top:-50px;
	z-index:1800;
	background:#fff;
	box-shadow: 5px 5px 5px rgba(0,0,0,.3);
}
.cs-login-error,.error-msg{
color:#f94949;
background:#fff1ef;
width:100%;
margin-top:10px;
padding:10px;
display:none;
}

.u-panel{
text-align:center;
font-size:15px;
padding-top:7px;
display:block;
cursor:pointer;
border-radius:0px !important;
overflow:hidden;
}
.is{text-align:right;}
.hes{text-align:left;}
.hes .user-pic{width:30px; height:30px;border-radius:40px;}
.isend,.hesend{
	background:#eee;
	border-radius:20px;
	padding:10px;
	max-width:300px;
	position:sticky;
	margin-top:10px;
	padding-right:30px;
	display:inline-block;
}
.hesend{
	background:#fff;
	left:0px !important;
	
	border:1px solid #eee;
}
.write-area{
	padding:5px 10px;
	position:fixed;
	bottom:0px;
	background:#fff;
	padding-right: 50px;
}
.write-area span{
position: absolute;
right: 5px;
color: #fff;
top: 3px;
font-size: 20px;
cursor: pointer;
background: #058097;
padding: 12px;
border-radius: 30px;
}
.write-area input,.write-area input:active,.write-area input:focus{
	border:1px solid #aaa;
	margin:0px;
	outline:none;
	box-shadow:none;
	border-radius:30px;
	padding:10px;
}
.message-area{
	padding:10px;
	overflow:auto;
	margin-bottom:50px;
	bottom:80px;
	top:0px;
}
.msg-preview{white-space:pre;}
.seen0{background:url(/image/tick.svg) no-repeat;}
.seen1{background:url(/image/double-tick-indicator.svg) no-repeat;}
.seen0,.seen1{
	width:20px;
	height:20px;
	right:4px;
	background-size:15px 15px;
	position:absolute;
}
.break-date{text-align:center;color:#aaa;font-size:10px !important;}
.break-date label{margin-right:10px;}
.break-date img {float:left;}
.light-box{
	display:none;
	background:rgba(0,0,0,0.9);
	position:fixed;
	width:100%;
	z-index:1500;
	height:100%;
	top:0px;
	left:0px;
	text-align:center;
}
.light-box img {max-width:100%;}
#display-wiki-result{
	position:absolute;
	display:none;
	box-shadow:6px 6px 15px rgba(100,100,100,0.3),-3px -3px 7px rgba(100,100,100,0.3);
	border:1px solid #aaa;
	padding:0px;
	text-align:justify;
	background:#e1e0e0;
	z-index:1501;
	width:400px;
	font-size:13px;
}#display-wiki-result p{padding:20px;}
#display-wiki-result img{
	float:left;
	margin-right:10px;
	width:100%;

}#display-wiki-result label{
float:left;
color:blue;
width:80%;
margin:0px;
}
.triangle{ 
z-index: 1500;
position: absolute;
width: 14px;
top: -7px;
height: 0px;
border-bottom: 8px solid #b9b6b6;
border-left: 7px solid transparent;
border-right: 7px solid transparent;

}.triangle-border{ 
z-index: 1500;
position: absolute;
width: 11px;
top: -6px;
height: 11px;
border-top: 1px solid #aaa;
border-left: 1px solid #aaa;
transform: rotate(45deg);
}  
.p-close{color:red;cursor:pointer;}
.geust-message{cursor:pointer;transition:all 1s;left:-150px;display:none;width:200px;border-radius: 0px;
box-shadow: 3px 3px 20px #000;
top:70px;background:red;padding:5px;padding-right:15px;position:fixed;z-index:1500;}
.geust-message a{color:#fff;}
.coin-message{text-align:center;margin-top:10px;padding:10px;display:none;}
.seke{ 
font-size: 23px;
position: absolute;
left: 0px;
border-right: 1px solid #ea9d29;
margin: 0px;
height: 100%;
top: 0px;
width: 40px;
color: #8c6b1e;
text-align: center;
text-shadow: 2px 2px 3px #f8f695;	
}
.notify2{background:#eee;}
.fa-volume-up{cursor: pointer;margin-left: 8px;margin-right: 8px;color: #36abcb;}
.pronunciation{text-decoration:none;}
.center-label{
position: absolute;
left: 9px;
width: 48px;
height: 48px;
text-align: center;
padding-top: 18px;
border-radius: 50px;
background-image: radial-gradient(circle, #fff,#a5a4a4);
top: 14px;
}
.center{text-align:center;}
.course-text{
	text-align: left;
    font-size: 13px;
    padding-top: 32px;
    padding-right: 3px;
	width:65%;
}
.big-pic{
position: fixed;
width: 300px !important;
height: 300px !important;
z-index: 1600;
transition: all .5s;
border-radius: 0px !important;
}
.pic-holder{
position: relative;
width: 100%;
height: 120px;
}.footer-pics {
	position:absolute;
	bottom:0px;
	width:100%;
	overflow:auto;
	text-align:center;
	padding:10px;
	white-space:nowrap;
}.footer-pics img{
	width:50px;
	height:50px;
	margin-right:5px;
}.table-ltr{direction:ltr;}
.table-ltr tr{direction:rtl;}
.login-point-avatar{transform: rotate(-45deg);
    right: -15px;
    transition: all .5s;}
.rating{position: absolute;
left: 20px;
top: 20px;
padding-top: 4px;
width: 30px;
height: 30px;
text-align: center;
border-radius: 20px;
background: #1481ab;
color: #fff;}
.show-toolbar{top: 60px;
padding: 8px;
background: rgb(5, 5, 5) none repeat scroll 0% 0%;
text-align: center;
width: 40px;
height: 40px;
border-radius: 40px;
color: rgb(255, 255, 255);
display: none;
position: fixed;
z-index: 1200;
left: 0px;}
.shadow-box{padding:10px;margin-top:5px;box-shadow:0 1px 3px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.12);}
.btn-alert {
    border: none; /* Remove borders */
    color: white; /* Add a text color */
    padding: 14px 28px; /* Add some padding */
    cursor: pointer; /* Add a pointer cursor on mouse-over */
}
.success {background-color: #4CAF50;} /* Green */
.success:hover {background-color: #46a049;}
.info {background-color: #2196F3;} /* Blue */
.info:hover {background: #0b7dda;}
.warning {background-color: #ff9800;} /* Orange */
.warning:hover {background: #e68a00;}

.danger {background-color: #f44336;} /* Red */
.danger:hover {background: #da190b;}
.default {background-color: #e7e7e7; color: black;} /* Gray */
.default:hover {background: #ddd;}
.comment,.alert{font-size: 14px;}
.padding-5{padding:5px;}
.direction-ltr{direction:ltr !important;text-align:left !important;display:inline-block;}
.direction-ltr-2{direction:ltr !important;text-align:left !important;}
.direction-rtl{direction:rtl !important;text-align:right !important;}
.challenge-form{
		display:none;
		padding-top:20px;
		text-align:center;
	}
	.challenge-form img {
		width:100px;
		height:100px;
		border-radius:100px;
	
	}
	.challenge-footer{
		position:fixed;
		bottom:0px;
		left:0px;
		width:100%;
		padding:5px;
		border-top:1px solid #aaa;
		background:#F9F9F9;
	}
	.me,.he{
		text-align:center;
	}
	@media screen and (min-height: 600px) {
	.challenge-form{
		padding-top:50px;
	}
}
.point{
	width:200px;
	margin:0 auto;
	margin-top:20px;
	color:#6AE56A;
	border:2px solid #6AE56A;
}
.vs{
	font-size:25px;
	padding:0px;
	padding-top:30px;
}
.ctitle{
	font-size:20px;
	margin-bottom:50px;
}.multi-choice .container{
	height:40px;
}
.empty-result { text-align:center;color:#aaa;margin-top:10px;}
.empty-result span.preview{ font-size:200px;}
.empty-result a{margin-top:10px;border-radius:100px;width:50px; height:50px;padding:8px;box-shadow:0 1px 3px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.12);}
.empty-result a span{font-size:30px;}
.empty-result .alert{text-align:justify;color:#000;}
.raise-input {position:relative;padding:5px;margin-top:20px}
.raise-input .form-control{margin:0px}
.raise-input label{color:#0b6375;right:12px;top:12px;position:absolute;transition:all 0.2s ease-in-out;}
.hljs {
  white-space: normal;
    max-width:100%;
	direction:ltr !important;
	text-align:left;
}
.hljs p{direction:ltr !important;}

/* hamed add code style */
.title-welcome{
	font-size:39px;
}

.title-welcome-sub{
	font-size:21px;
}
.home-slid-button{
	border-radius: 50px;
    width: 150px;
    height: 30px;
}
.selected{
	background:#aadcf3 !important;
}
.h_iframe-aparat_embed_frame{position:relative;}
.h_iframe-aparat_embed_frame .ratio{display:block;width:100%;height:auto;}
.h_iframe-aparat_embed_frame iframe{position:absolute;top:0;left:0;width:100%;height:100%;}
.CodeMirror {direction:ltr;text-align:left;}
code{line-height:2;color:crimson;background:#e8e8e8}
pre {border-left:5px solid #47a23b;direction:ltr;} 

.sortable { list-style-type: none; margin: 0 auto; padding: 0; width: 60%; }
.sortable li {cursor:move; margin:-1px; padding-left: 1.5em; padding: 0.4em;font-size: 1.4em; text-align:left; }
.sortable li .progress{z-index:0;}
.sortable li span { position: absolute; margin-left: -1.3em; }
.ui-state-highlight { height: 1.5em; line-height: 1.2em; }
@media screen and (max-width: 450px){
	  .sortable{width:100%;}
	  .back-button{display:none !important;}
	  .show-point{border-radius:30px 0px 0px 30px;}
}
@media screen and (max-height: 450px) {
  
  .overlay a {font-size: 15px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
  .btn-add{
	  right:20px;
  }
  .shadow-box{margin:5px;}
  
}
.course-title{font-size:20px;color:#000;}
.fr-alternate-rows tr:nth-child(odd){
	background-color:#e2e2e2;
}
.w3-code{ox-shadow: 1px 1px 5px black;overflow: hidden;border-radius: 4px;}
.w4-code{ox-shadow: 1px 1px 5px black;overflow: hidden;border-radius: 4px;}

.mylist{width:120px;float:left;text-align:left;}
.card2{border-radius: 5px;box-shadow: 1px 1px 7px black;overflow: hidden;}
.card2-header{background:#353535;text-align:center;padding:0px 10px;color:#fff;}
.card2-body{padding:10px}
.block-element{font-size:18px;width:120px;color:#fff;background:tomato;text-align:center;padding:30px 0px;}
.rgbSlider,.rgbaSlider{width:95%;}
#rgbResult,#rgbaResult{ 
	text-align:center;background:rgb(50,150,250);margin:10px auto;padding:20px;width:250px;
}
#rgbaResult{background:rgb(50,150,250,0.5);}
div.rgb{
	text-align:center;
	direction:ltr;
}
li.ui-state-default{direction:ltr;}
.ltr p,.ltr div,.ltr{direction:ltr !important;}
.card-shadow{
border-radius: 10px;
overflow: hidden;
box-shadow: 1px 1px 10px #eee,-1px -1px 10px #eee;
}
.play-holder{
background: #ecedee;
text-align: left;
border-radius: 5px;
box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
.play-holder h3{
	direction:rtl;
	text-align:right;
	color:#555555;
	font-size:22px;
}
.play-holder .col-12{
	padding:10px;
}
.play-holder .code-text{
	font-weight:bold;
	color:red;
}
.play-result{
	border:1px solid #ccc;
	min-height:230px;
	background:#fff;
	padding:10px;
	direction:ltr;
	border: 1px solid gray;
}
.play-items{
	padding:10px;
	background:#fff;
	direction:ltr;
}
.play-code {
	background:#fff;
	direction:ltr;
}
.play-holder input{
	margin:10px;
}
.ft{text-align:right;}
.choice-ltr{direction:ltr;text-align:left;}
.choice-ltr .col-2{padding-right:10px !important;}
.fill-items{
	padding:0px 10px;
	text-align:center;
	font-weight:bold;
	display:flex;
	direction:ltr;
	flex-wrap:wrap;
}
label.fill-item{
	transition:all 0.5s;font-size:18px !important;font-weight:bold;cursor: pointer;
background: #81c8f2;
padding: 10px;
border-radius: 4px;
}
.fill-item-holder{
	display:inline-block;
	margin:5px;
	min-height:40px;
	min-width:50px; 
}
.code-font{
	text-align: left;
	direction:ltr;
padding: 10px;
background: #ddd;
font-family: courier;
border-radius: 4px;
overflow:auto; 
}
.step-right,.step-left{
	float: right;
background: #007bff;
padding: 0px;
border-radius: 20px;
width: 30px;
height: 30px;
text-align: center;
margin-left: 10px;
color: #fff;
box-shadow: 0px 3px 5px gray;
}
.step-left{float:left;margin:0px;margin-right:10px;}
.back-button{
position: absolute;
left: 0px;
background: url(/image/appSprite.png);
border-radius: 40px;
background-position: -10px -430px;
width: 40px;
height: 40px;
display:none;
cursor: pointer;
}
.select-article{cursor:pointer;}
.article{border-bottom: 1px dotted #0d45ec;
cursor: pointer;}
.auther-pic{
	width: 30px;
margin-bottom: 10px;
float: right;
display: block;
border-radius: 50px;
height: 30px;
margin-left: 10px;
}
.auth{font-size:11px !important;color:#666;}

.w4-codespan {
  font-size: 105%;color: crimson;
  padding-left: 4px;
  padding-right: 4px;
}
.w4-black {
	background: black;
    display: block;
    direction: ltr;
    text-align: left;
}
.w4-black code{background:black;color:white;} 
pre[class*="language-"]{
	background:#013f4a !important;
	border:.3em solid #004a5b !important;
}
.hljs-ln{
	width:100%;
}