/************************************
*	In The Name Of Allah			*
*	Fallon WebApp Fremework 		*
*	By Farhang Saeedi				*
*	mail:Saeedi.Farhang@gmail.com 	*
*	Phone:09368719623				*
*************************************/

html{
	height:100%;
	float:left;
}

body{
	width:100%;
	height:100%;
	float:left;
	font-size: medium;
	font-family: nazanin , "b nazanin" , bnazanin , zar , bzar ;
}
a:HOVER{
	text-decoration: none;
}

/****** Other CSS OverWrites *****/
.blockquote{
	margin:5px 2px 5px 0px;
}

/****** Tools ******/
.ltr{ direction: ltr ; }
.rtl{ direction: rtl ; }
.float_left{ float: left ; } 
.float_right{ float: right ; } 
.align_left{ text-align: left ; } 
.align_right{ text-align: right ; } 
.align_center{ text-align: center ; }
.font-10px { font-size: 10px;}
.font-11px { font-size: 11px;}
.font-12px { font-size: 12px;}
.font-13px { font-size: 13px;}
.font-14px { font-size: 14px;}
.font-15px { font-size: 15px;}
.font-16px { font-size: 16px;}
.font-17px { font-size: 17px;}
.font-18px { font-size: 18px;}
.font-19px { font-size: 19px;}
.font-20px { font-size: 20px;}
.font-21px { font-size: 21px;}
.font-22px { font-size: 22px;}
.font-bold{font-weight: bold;}
.font-bolder{font-weight: bolder;}
.font-verdana{font-family: verdana , nazanin , "b nazanin" , bnazanin , zar , bzar;}
.font-tahoma{font-family: tahoma , nazanin , "b nazanin" , bnazanin , zar , bzar;}
.font-comic{font-family: "Comic Sans MS" , nazanin , "b nazanin" , bnazanin , zar , bzar;}

._5{width: 5%; }
._10{width: 10%; }
._15{width: 15%; }
._20{width: 20%; }
._25{width: 25%; }
._30{width: 30%; }
._35{width: 35%; }
._40{width: 40%; }
._45{width: 45%; }
._50{width: 50%; }
._55{width: 55%; }
._60{width: 60%; }
._65{width: 65%; }
._70{width: 70%; }
._75{width: 75%; }
._80{width: 80%; }
._85{width: 85%; }
._90{width: 90%; }
._95{width: 95%; }
._100{width: 100%; }

.padding0  { padding: 0px; }
.padding1  { padding: 1px; }
.padding2  { padding: 2px; }
.padding3  { padding: 3px; }
.padding4  { padding: 4px; }
.padding5  { padding: 5px; }
.padding6  { padding: 6px; }
.padding7  { padding: 7px; }
.padding8  { padding: 8px; }
.padding9  { padding: 9px; }
.padding10 { padding: 10px; }

.pad-left0  { padding-left: 0px; }
.pad-left1  { padding-left: 1px; }
.pad-left2  { padding-left: 2px; }
.pad-left3  { padding-left: 3px; }
.pad-left4  { padding-left: 4px; }
.pad-left5  { padding-left: 5px; }
.pad-left6  { padding-left: 6px; }
.pad-left7  { padding-left: 7px; }
.pad-left8  { padding-left: 8px; }
.pad-left9  { padding-left: 9px; }
.pad-left10 { padding-left: 10px; }

.pad-right0  { padding-right: 0px; }
.pad-right1  { padding-right: 1px; }
.pad-right2  { padding-right: 2px; }
.pad-right3  { padding-right: 3px; }
.pad-right4  { padding-right: 4px; }
.pad-right5  { padding-right: 5px; }
.pad-right6  { padding-right: 6px; }
.pad-right7  { padding-right: 7px; }
.pad-right8  { padding-right: 8px; }
.pad-right9  { padding-right: 9px; }
.pad-right10 { padding-right: 10px; }

.pad-top0  { padding-top: 0px; }
.pad-top1  { padding-top: 1px; }
.pad-top2  { padding-top: 2px; }
.pad-top3  { padding-top: 3px; }
.pad-top4  { padding-top: 4px; }
.pad-top5  { padding-top: 5px; }
.pad-top6  { padding-top: 6px; }
.pad-top7  { padding-top: 7px; }
.pad-top8  { padding-top: 8px; }
.pad-top9  { padding-top: 9px; }
.pad-top10 { padding-top: 10px; }

.pad-bottom0  { padding-bottom: 0px; }
.pad-bottom1  { padding-bottom: 1px; }
.pad-bottom2  { padding-bottom: 2px; }
.pad-bottom3  { padding-bottom: 3px; }
.pad-bottom4  { padding-bottom: 4px; }
.pad-bottom5  { padding-bottom: 5px; }
.pad-bottom6  { padding-bottom: 6px; }
.pad-bottom7  { padding-bottom: 7px; }
.pad-bottom8  { padding-bottom: 8px; }
.pad-bottom9  { padding-bottom: 9px; }
.pad-bottom10 { padding-bottom: 10px; }

@media screen and (max-width:767px){

	.padding0  { padding: 0px; }
	.padding1  { padding: 0.5px; }
	.padding2  { padding: 1px; }
	.padding3  { padding: 1.5px; }
	.padding4  { padding: 2px; }
	.padding5  { padding: 2.5px; }
	.padding6  { padding: 3px; }
	.padding7  { padding: 3.5px; }
	.padding8  { padding: 4px; }
	.padding9  { padding: 4.5px; }
	.padding10 { padding: 5px; }

	.pad-left0  { padding-left: 0px; }
	.pad-left1  { padding-left: 0.5px; }
	.pad-left2  { padding-left: 1px; }
	.pad-left3  { padding-left: 1.5px; }
	.pad-left4  { padding-left: 2px; }
	.pad-left5  { padding-left: 2.5px; }
	.pad-left6  { padding-left: 3px; }
	.pad-left7  { padding-left: 3.5px; }
	.pad-left8  { padding-left: 4px; }
	.pad-left9  { padding-left: 4.5px; }
	.pad-left10 { padding-left: 5px; }

	.pad-right0  { padding-right: 0px; }
	.pad-right1  { padding-right: 0.5px; }
	.pad-right2  { padding-right: 1px; }
	.pad-right3  { padding-right: 1.5px; }
	.pad-right4  { padding-right: 2px; }
	.pad-right5  { padding-right: 2.5px; }
	.pad-right6  { padding-right: 3px; }
	.pad-right7  { padding-right: 3.5px; }
	.pad-right8  { padding-right: 4px; }
	.pad-right9  { padding-right: 4.5px; }
	.pad-right10 { padding-right: 5px; }

	.pad-top0  { padding-top: 0px; }
	.pad-top1  { padding-top: 0.5px; }
	.pad-top2  { padding-top: 1px; }
	.pad-top3  { padding-top: 1.5px; }
	.pad-top4  { padding-top: 2px; }
	.pad-top5  { padding-top: 2.5px; }
	.pad-top6  { padding-top: 3px; }
	.pad-top7  { padding-top: 3.5px; }
	.pad-top8  { padding-top: 4px; }
	.pad-top9  { padding-top: 4.5px; }
	.pad-top10 { padding-top: 5px; }

	.pad-bottom0  { padding-bottom: 0px; }
	.pad-bottom1  { padding-bottom: 0.5px; }
	.pad-bottom2  { padding-bottom: 1px; }
	.pad-bottom3  { padding-bottom: 1.5px; }
	.pad-bottom4  { padding-bottom: 2px; }
	.pad-bottom5  { padding-bottom: 2.5px; }
	.pad-bottom6  { padding-bottom: 3px; }
	.pad-bottom7  { padding-bottom: 3.5px; }
	.pad-bottom8  { padding-bottom: 4px; }
	.pad-bottom9  { padding-bottom: 4.5px; }
	.pad-bottom10 { padding-bottom: 5px; }

}

.LoadSign{
	position: fixed;
	width: 100%;
	height: 100%;
	background: #98999b ;
	z-index: 1000 ;
}

.loader-xxs {
	left: 30%;
	position: 		absolute;
	border: 		4px solid #5475b7;
	border-radius: 	50%;
	border-top: 	4px solid #545c6d;
	border-bottom: 	4px solid #545c6d;
	border-left: 	4px solid transparent;
	border-right: 	4px solid transparent;
	width: 	20px;
	height: 20px;
	-webkit-animation: spinloader 0.8s infinite;
	animation: spinloader 0.8s infinite;
}

.loader-xs {
	left: 35%;
	position: 		absolute;
	border: 		9px solid #5475b7;
	border-radius: 	50%;
	border-top: 	9px solid #545c6d;
	border-bottom: 	9px solid #545c6d;
	border-left: 	9px solid transparent;
	border-right: 	9px solid transparent;
	width: 	45px;
	height: 45px;
	-webkit-animation: spinloader 0.8s infinite;
	animation: spinloader 0.8s infinite;
}

.loader-sm {
	left: 40%;
	position: 		absolute;
	border: 		13px solid #5475b7;
	border-radius: 	50%;
	border-top: 	13px solid #545c6d;
	border-bottom: 	13px solid #545c6d;
	border-left: 	13px solid transparent;
	border-right: 	13px solid transparent;
	width: 	75px;
	height: 75px;
	-webkit-animation: spinloader 0.8s infinite;
	animation: spinloader 0.8s infinite;
}

.loader {
	left: 45%;
	position: 		absolute;
	border: 		16px solid #5475b7;
	border-radius: 	50%;
	border-top: 	16px solid #545c6d;
	border-bottom: 	16px solid #545c6d;
	border-left: 	16px solid transparent;
	border-right: 	16px solid transparent;
	width: 110px;
	height: 110px;
	-webkit-animation: spinloader 0.8s infinite;
	animation: spinloader 0.8s infinite;
}

@-webkit-keyframes spinloader {
  	0% { -webkit-transform: rotate(0deg); }
  	100% { -webkit-transform: rotate(360deg); }
}

@keyframes spinloader {
  	0% { transform: rotate(0deg); }
  	100% { transform: rotate(360deg); }
}


.square {
 
}
.square:after {
  content: "";
  display: block;
  padding-bottom: 110%;
}
.square-content {
  position: absolute;
  left:0.5%;
  top:0.5%;
  width: 100%;
  height: 100%;
}

.f-checkbox {
  min-height: 1rem;
  padding-left: 0;
  margin-right: 0;
  cursor: pointer; 
}
.f-checkbox .custom-control-indicator {
	content: "";
	display: inline-block;
	position: relative;
	width: 30px;
	height: 10px;
	background-color: #818181;
	border-radius: 15px;
	margin-right: 10px;
	-webkit-transition: background .3s ease;
	transition: background .3s ease;
	vertical-align: middle;
	margin: 0 16px;
	box-shadow: none; 
}
.f-checkbox .custom-control-indicator:after {
	content: "";
	position: absolute;
	display: inline-block;
	width: 18px;
	height: 18px;
	background-color: #f1f1f1;
	border-radius: 21px;
	box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
	left: -2px;
	top: -4px;
	-webkit-transition: left .3s ease, background .3s ease, box-shadow .1s ease;
	transition: left .3s ease, background .3s ease, box-shadow .1s ease; 
}
.f-checkbox .custom-control-input:checked ~ .custom-control-indicator {
	background-color: #84c7c1;
	background-image: none;
	box-shadow: none !important; 
}
.f-checkbox .custom-control-input:checked ~ .custom-control-indicator:after {
	background-color: #84c7c1;
	left: 15px; 
}
.f-checkbox .custom-control-input:focus ~ .custom-control-indicator {
	box-shadow: none !important; 
}

 /* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  background-color: #333; /* Black background color */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 2px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 99999999999999999999999999; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  top: 100px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {top: 0; opacity: 0;}
  to {top: 50px; opacity: 1;}
}

@keyframes fadein {
  from {top: 0; opacity: 0;}
  to {top: 50px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {top: 50px; opacity: 1;}
  to {top: 0; opacity: 0;}
}

@keyframes fadeout {
  from {top: 50px; opacity: 1;}
  to {top: 0; opacity: 0;}
} 

/*	HTML Design CSS	*/
.programmer{

}

.programmer:hover{
	z-index: 1;
	background-color: lightgray;
	opacity: 0.5;
}

.programmerImg{
	transition-duration : 0.8s ;
	border-color: blue;
	box-shadow: 3px 12px 10px 3px black;
}

.programmerImg:hover{
	transform: scale( 1.05,1.05);
	transition-duration : 0.8s ;
}

.about-link{
	cursor: pointer;
}
.about-link:hover{
	text-decoration: none;
	font-size: 17px;
	
}
/*****************************
******************************
		   Messenger		
*****************************
*****************************/
.post-title{
	font-weight: bolder;
	font-size: 22px;
	padding: 5px ;
	margin: 5px 0px;
}
.post-text{
	font-size: 19px;
	text-align: justify;
	padding: 1px 5px;
	margin: 5px 0px;
}

/* Questions */
.qcreator {
	margin:5px 0px;
	border: 1px solid black;
	width: 100%;
	float: left;
	padding: 10px;
}

/* Exam */
.exam-view {
	margin: 10px 0px;
	padding: 5px;
}

.exam-poster-holder{
	position:absolute;
	top:0px;
	z-index:1;
	text-align: center;
}
.exam-poster-holder .exam-poster{
	width:150px;height:150px;
}
.exam-poster:HOVER{
	transition-duration : 0.3s ;
	transform: scale(1.5,1.5) ;
}

.exam-intel{
	background-color:lightblue;
	margin: 0px;
	margin-top: 80px;
	padding:5px;
	padding-top:80px;
	min-height:400px;
}

.exam-text{
	text-align: center;
}

.exam-exec-publish-list {
	background-color: darkblue ;
	border-radius: 5px;
	border: 1px solid grey ;
	padding: 5px;
}

.exam-exec-btn-holder {
	color: black;
	background-color: white ;
	border: 1px solid grey ;
	border-radius: 10px;
	padding: 5px;
	margin: 5px 1px;
}

.exam-result-intel{
	border: 1px solid grey;
	margin: 5px 0px ;
}
.exam-result-intel:HOVER{
	border: 1px solid black;
	transition-duration : 0.5s;
	box-shadow: 0px 0px 5px black;
}

/*
	Item View
*/
/*			 Lessons		*/
/* 		lessons/read.html	*/
.lesson-read{
	border: none; 
}
.lesson-read:hover{
	box-shadow: none ;
}

/*		lessons/view.html	*/
.item-view{
	border: 1px solid black;
	margin:18px 0px;
	border:1px solid grey;
	border-radius:5px;
	padding:10px;
}

.item-view:hover{
	box-shadow: 0px 0px 5px 5px black;
}

.item-view a:hover{
	font-size: 17px;
	text-decoration: none;
}

.item-view > div {
	margin: 5px 0px;
}

.item-view .item-name{


}
.item-view .item-intels{

}

.item-view .item-lock{

}

.item-view .item-status{
	position: absolute;
	left: 5px;
	top: 0%;
	width: 50px;
	height: 50px;
	overflow: hidden;
	margin: 0px;
	padding: 0px;
}

.item-view .item-status > img {
	width: 50px;
	height: 50px;
}

.item-view > div.MediaAlert{
	padding: 8px;
	/*margin: 0px;
	position: absolute;
	width: 90%;
	top:55%;
	left: 5%;*/
	z-index: 6;
}
.item-view > div.MediaCode{
	/*margin: 0px;*/
	padding: 8px;
	cursor: pointer;
}

/*****************************
******************************
		   LMS		
*****************************
*****************************/
.course-web , .class-web {
	border: 1px solid black ;
	transition-diuration: 0.5s;
	cursor: pointer;
}
.course-web:HOVER , .class-web:HOVER{
	box-shadow: 0px 0px 10px black;
	transition-diuration: 0.5s;
}

.ChSeasonLink button {
	border-radius: 0px;
	border : 0px solid black;
}

.ChSeasonLink button.btn-primary {
	font-size: 20px;
	font-style: normal;
	font-weight: bolder;
}

a.ChSeasonLink{
	padding: 0px;
}

a.ChSeasonLink:hover{
	text-decoration: none;
}

a.ChSeasonLink:hover button{
	font-size: 20px;
}

/*		seasons/list.html 		*/
.seasons-list{
	font-size: 18px;
}

.seasons-intels{
	padding: 0px;
}

.seasons-intels .season-template{
	padding: 0px 5px;
}

.seasons-intels .season-template a:hover{
	font-size: 17px;
}

/*		seasons/view.html 	  */
.season-view {
	border-radius: 5px;
	min-height: 160px;
	margin: 0px 0px 5px 0px;
	cursor: pointer;
}
 
.season-view .season-name{
	font-size: 20px;
	padding:33px 0px;
	margin: 5px 0px;
}

.season-view .season-intel{
	padding: 0px;
	margin: 5px 0px; 
}

.season-view .season-intel > span {
	padding: 0;
}

.season-view:hover .season-lessons{
	color:red;
}

.season-view:hover .season-worth{
	color:green;
}

.season-view.main-season{
	border-radius: 5px;
	padding: 0px;
	min-height: 160px;
	margin: 0px 0px 5px 0px;
	cursor: pointer;
}

.season-view.main-season:hover {
	/*border-radius: 5px;
	border : 1px solid black;
	box-shadow: 0px 0px 4px 6px black;
	transition-duration : 0.1s ;
	transform: scale( 1.001,1.001) linear ;*/
}

.season-view.main-season .season-name{
	font-size: 20px;
	padding:33px 0px;
	margin: 0px;
}

.season-view.main-season .season-intel{
	padding: 0px;
	margin: 12px 5px;
}


/*		seasons/view-child.html 	*/
.season-childs{
	margin: 8px 0px 0px 0px;
	padding: 2px;
	direction: rtl;
}

.season-childs .season-child{
	padding: 15px;
	margin: 0px;
	min-height: 150px;
}

.season-childs .child-season{
	padding: 5px;
	margin: 1px 0px;
	min-height: 149px;
	border-radius: 2px;
	border : 1px solid grey;
	box-shadow: 0px 0px 1px 2px grey;
	cursor: pointer;
}

.season-childs .child-season:hover {
	border-radius: 5px;
	border : 1px solid black;
	box-shadow: 0px 0px 4px 6px black;
	transition-duration : 0.1s ;
	transform: scale( 1.01,1.01) linear ;
}

.season-childs .child-season .season-name{
	padding: 0px;
	margin: 5px 0px; 
}

/*			 Lessons		*/
/* 		lessons/read.html	*/
.lesson-read{
	border: none; 
}
.lesson-read:hover{
	box-shadow: none ;
}

/*		lessons/view.html	*/
.lesson-view{
	border: 1px solid black;
	margin:18px 0px;
	border:1px solid grey;
	border-radius:5px;
	padding:10px;
}

.lesson-view:hover{
	box-shadow: 0px 0px 5px 5px black;
}

.lesson-view a:hover{
	font-size: 17px;
	text-decoration: none;
}

.lesson-view > div {
	margin: 5px 0px;
}

.lesson-view .lesson-name{


}
.lesson-view .lesson-intels{

}

.lesson-view .lesson-lock{

}

.lesson-view .lesson-status{
	position: absolute;
	left: 5px;
	top: 0%;
	width: 50px;
	height: 50px;
	overflow: hidden;
	margin: 0px;
	padding: 0px;
}

.lesson-view .lesson-status > img {
	width: 50px;
	height: 50px;
}

.lesson-view > div.MediaAlert{
	padding: 8px;
	/*margin: 0px;
	position: absolute;
	width: 90%;
	top:55%;
	left: 5%;*/
	z-index: 6;
}
.lesson-view > div.MediaCode{
	/*margin: 0px;*/
	padding: 8px;
	cursor: pointer;
}


/* 		  LMS/Tutors CSS  	 */
/*		Tutors Courses Css		*/
/*	  tutors/courses/list.html 	*/
.course-view , .class-view {
	margin: 10px 0px;
	padding: 0px;
	border: 1px solid black;
}

.course-view:hover , .class-view:hover {
	box-shadow: 0px 0px 2px 5px grey;
}

/*		Tutors Seasons Css		*/
/*	tutors/seasons/list.html	*/
.seasons-list{
	padding: 0px;
}

.seasons-listed{
	padding: 0px;
}

.seasons-listed-intel{
	padding: 0px;
}

.seasons-listed-intel .season-intel{
	text-align: center;
	margin: 5px 0px;
	padding: 5px;
}

.seasons-listed-intel .seasons-listed-childs{
	margin:10px 0px;
	padding:8px;
	border:1px solid blue;
	border-radius: 5px;
	box-shadow: 0px 0px 6px 3px lightblue;
}

.seasons-listed-intel .seasons-listed-childs:hover{
	border:1px solid black;
	box-shadow: 0px 0px 5px 2px black;
	cursor: pointer;
}

.seasons-listed-intel .seasons-listed-childs .season-intel{
	text-align: center;
	margin: 14px 0px 0px 0px;
	padding: 0px;
}

.seasons-listed-intel .seasons-listed-childs:hover .season-lessons{
	color:maroon;
}

.seasons-listed-intel .seasons-listed-childs:hover .season-worth{
	color:green;
}

.seasons-listed-intel .seasons-listed-childs:hover .season-rank{
	color:red;
}

.course-view-mini .course-poster{
	transition-duration:0.2s;
}

.course-view-mini .course-poster:hover{
	border-radius: 50%;
	transition-duration:0.2s;
	transform:scale( 1.3 , 1.3 );
}

/*****************************
******************************
		COMMERCE		
*****************************

/* 		 COMMERCE/Managers CSS  */
/*		Managers Shops Css		*/
/*	  managers/shops/list.html 	*/
.shop-view , .mall-view {
	margin: 10px 0px;
	padding: 0px;
	border: 1px solid black;
}

.shop-view:hover , .mall-view:hover {
	box-shadow: 0px 0px 2px 5px grey;
}

.show-view-client {
	
}

/* 		products/read.html	*/
.product-read{
	border: none; 
}
.product-read:hover{
	box-shadow: none ;
}

/*			 Products		*/
/*		Products/View.html	*/
.product-view{
	border: 1px solid black;
	margin:18px 0px;
	border:1px solid grey;
	border-radius:5px;
	padding:10px;
}

.product-view:hover{
	box-shadow: 0px 0px 5px 5px black;
}

.product-view a:hover{
	font-size: 17px;
	text-decoration: none;
}

.product-view > div {
	margin: 5px 0px;
}

.product-view .product-name{


}

.product-view .product-intels{

}

.product-view .product-lock{

}

.product-view .product-status{
	position: absolute;
	left: 5px;
	top: 0%;
	width: 50px;
	height: 50px;
	overflow: hidden;
	margin: 0px;
	padding: 0px;
}

.product-view .product-status > img {
	width: 50px;
	height: 50px;
}

.product-view > div.MediaAlert{
	padding: 8px;
	/*margin: 0px;
	position: absolute;
	width: 90%;
	top:55%;
	left: 5%;*/
	z-index: 6;
}
.product-view > div.MediaCode{
	/*margin: 0px;*/
	padding: 8px;
	cursor: pointer;
}

/*  tools	*/
.Html5videoPlayer{
	padding: 0px;
	margin: 0px;
	border: 2px solid lightblue ;
	box-shadow: 0px 0px 5px 1px lightblue ;
}
.Html5videoPlayer:hover{
	box-shadow: none;
}
.control-carousel{
	position: absolute;
	top: 50%;
	z-index: 10;
	font-size: 22px;
}

.control-carousel:hover{
	font-size: 25px;
}

.control-carousel.right{
	right:0%;
}

.control-carousel.left{
	left: 0%;
}