

$main-color: #FF6B6B;
$sub-color: #6E6EFF;
$third-color: #63D6FF;
$hot-color: #F76FFF;
$pcolor: #61D861;
$mobile-xs-screen: 480px;
$tablet-sm-screen: 767px;
$desk-md-screen: 991px;
$desk-xlg-screen: 1200px;


@font-face {
	font-family: NeoSansArabic;
	src: local("../fonts/NeoSansArabic"),
		 local("../fonts/NeoSansArabic"),
		 url(../fonts/NeoSansArabic.ttf);
}

@font-face {
    font-family: "JF_Flat";
    src: url('../fonts//JF-Flat-regular.eot');
    src: url('../fonts//JF-Flat-regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts//JF-Flat-regular.svg#JF Flat Regular') format('svg'),
    url('../fonts//JF-Flat-regular.woff') format('woff'),
    url('../fonts//JF-Flat-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: DroidKufiRegular;
	src: local("../fonts/DroidKufi-Regular.ttf"),
		 url(../fonts/DroidKufi-Regular.ttf);
}

@font-face {
	font-family: DroidKufiBold;
	src: local("../fonts/DroidKufi-Bold.ttf"),
		 url(../fonts/DroidKufi-Bold.ttf);
}

/* ----------------------------------------------------------------
     [  Start Basics ]
-----------------------------------------------------------------*/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	outline: none;
	list-style: none;

}

body {
	color: #414d5f;
	background: #F8F9FA;
	line-height: 1.3;
	font-weight: 400;
	font-size: 14px;
	font-family: 'Cairo', sans-serif;
	text-align: right;
	overflow-x: hidden !important;
}

h1,h2,h3,h4,h5,h6{
	font-weight: 500;
	line-height: 1.5;
	margin: 0;
}

h1 {
	font-size: 50px;
}

h2 {
	font-size: 35px;
}

h3 {
	font-size: 28px;
}

h4 {
	font-size: 22px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 15px;
}

p, .text {
	font-family: 'DroidKufiRegular', 'Cairo', sans-serif;
	font-size: 13px;
	color: #838c97;
	line-height: 30px;
	margin: 0;
}

.main-color{ color :$main-color !important;}
.sub-color{ color :$sub-color !important;}
.third-color{ color :$third-color !important;}
.hot-color{ color :$hot-color !important;}
.pcolor{ color :$pcolor !important;}

.main-bg-color{ background-color :$main-color !important; color: #fff;}
.sub-bg-color{ background-color :$sub-color !important; color: #fff;}
.third-bg-color{ background-color :$third-color !important; color: #fff;}
.hot-bg-color{ background-color :$hot-color !important; color: #fff;}
.pbg-color{ background-color :$pcolor !important; color: #fff;}

.wel-text{

	.path{

		a{
			color: #8d9aa8;
			font-size: 13px;
			font-family: 'JF_Flat', 'Cairo', sans-serif;

			&:last-of-type{
				color: $main-color !important;
			}
		}

		span{
			margin: 0 20px;
		}
	}

	h6{
		margin-bottom: 15px;
		font-weight: 700;
	}
}

img {
	width: 100%;
	height: auto;
}

ul{
	margin-bottom: 0;
}

span, a, a:hover {
	display: inline-block;
	text-decoration: none;
	color: inherit;
}

a:focus, a:hover{
	color: inherit;
	outline: none;
}

.section-padding{
	padding: 100px 0;
}

.clear-fix{
	clear: both;
}

.sm-padding{
	padding: 0 10px;
}

.sam-height{
	height: 100%;
}

.half-padding{
	padding: 120px 5%;
}

.bg-gray{
	background: #F8F9FA;
}

.o-hidden {
	overflow: hidden;
}

.ontop{
	position: relative;
	z-index: 4;
}

.position-re {
	position: relative;
}

.full-width{
	width: 100% !important;
}

.lg-line-height{
	line-height: 1.5;
}

.bg-img{
	background-size: cover;
	background-repeat: no-repeat;
}

.bg-fixed{
	background-attachment: fixed;
}

.valign{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.export{
	background: $sub-color;
	color: #fff;
	font-weight: 600;
	font-size: 13px;
	position: fixed;
	left: -60px;
	top: 25vh;
	min-width: 100px;
	padding-left: 10px;
	transition: all .4s;

	&:hover{
		color: #fff;
		left: 0;
	}

	&:focus{
		color: #fff;
	}

	img{
		width: 40px;
		padding: 10px;
	}
}


// Owl Setting

.owl-theme .owl-nav.disabled+.owl-dots{
	margin-top: 15px;
	display: inline-block;
}

.owl-theme .owl-dots{
	text-align: center;
}

.owl-theme .owl-dots .owl-dot span{
	width: 10px;
	height: 10px;
	margin: 0 5px;
	border-radius: 50%;
	background: rgba(200,200,200,.4);
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span{
	background: $main-color;
}


.stylebar{

	&::-webkit-scrollbar {
		width: 5px;
	}
	
	  /* Track */
	&::-webkit-scrollbar-track {
		background: #f1f1f1; 
	}
	
	  /* Handle */
	&::-webkit-scrollbar-thumb {
		background: #ccc; 
	}
	
	  /* Handle on hover */
	&::-webkit-scrollbar-thumb:hover {
		background: #888; 
	}
}

.styled-checkbox {
	position: absolute;
	opacity: 0;
	left: 0;

	& + label {
		position: relative;
		cursor: pointer;
		padding: 0;
		display: block;
		width: 100%;
		font-weight: 400;

		&:after, &:before{
			position: absolute;
			left: 0;
		}
	}

	& + label:before {
		content: '';
		margin-right: 10px;
		display: inline-block;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: #f8f8f8;
		border: 1px solid #eee;
	}

	&:hover + label:before {
		background: $sub-color;
	}
	
	&:focus + label:before {
		box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
	}

	&:checked + label:before {
		background: $sub-color;
	}

	&:checked + label:after {
		content: '\f00c';
		position: absolute;
		left: 6px;
		top: 4px;
		font-size: 10px;
		font-family: "Font Awesome 5 Free";
		font-weight: 700;
		color: #fff;
	}
}


/* ----------------------------------------------------------------
     [ End Basics ]
-----------------------------------------------------------------*/


/* ----------------------------------------------------------------
     [  Start Buttons ]
-----------------------------------------------------------------*/

.butn{
	padding: 11px 30px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 30px;
	transition: all .4s;

	span{
		transition: all .4s;
	}

	&.icon{
		padding: 12px 25px;

		i{
			margin-left: 10px;
			padding-left: 10px;
			border-left: 1px solid transparent;
		}
	}

	&.online{
		color: $main-color;
	}
}

.butn-bg{
	background: $main-color;
	border-color: $main-color;

	&:hover{
		background: $sub-color;
		border-color: $sub-color;
	}

	&.icon{

		i{
			color: #fff;
			border-left-color: rgba(200,200,200,.4);
		}
	}

	span{
		color: #fff;
	}
}

.butn-bord{
	border-color: $sub-color;

	&:hover{
		background: $sub-color;
		border-color: $sub-color;

		span{
			color: #fff;
		}
	}

	&.icon{

		i{
			color: $sub-color;
			border-left-color: rgba(200,200,200,.4);
		}
	}

	span{
		color: $sub-color;
	}
}

.butn-bg.light{
	background: #fff;
	border-color: #fff;

	&:hover{
		background: $sub-color;
		border-color: $sub-color;

		span{
			color: #fff;
		}
	}

	span{
		color: $main-color;
	}
}

.butn-gray{
	background: #f5f5f5;
	
	&:hover{
		background: $main-color;
		border-color: $main-color;

		span{
			color: #fff;
		}
	}

	&.icon{

		i{
			border-left-color: rgba(0,0,0,.2);
		}
	}
}

/* ----------------------------------------------------------------
     [ End Buttons ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
     [  Start Side-bar ]
-----------------------------------------------------------------*/

.side-bar{
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	background: #fff;
	box-shadow: 0 8px 10px 0 rgba(183, 192, 206, 0.2);
	width: 240px;
	padding-bottom: 40px;
	z-index: 99;
	transition: all .5s;
	overflow-y: auto;
	overflow-x: hidden;

	&.big{
		width: 380px;

		&:hover{
			width: 380px !important;
		}
	}

	&:hover{
		width: 240px !important;
		transition: all .3s;

		.user-profile{
			
			.cont{
				visibility: visible !important;
				opacity: 1 !important;
				transition-delay: .15s;
			}
		
		}

		.nav-list{

			li{

				.text{
					visibility: visible !important;
					opacity: 1 !important;
					transition: all .4s;
					transition-delay: .15s !important;
				}
			}
		}

		.collapse.show {
			display: block;
		}
	}

	.bg-img{
		position: absolute;
		width: 100%;
		height: 40%;
		top: 0;
		left: 0;
		z-index: -1;

		&:before{
			background: #fff none repeat scroll 0 0;
			content: "";
			height: 100%;
			left: 0;
			opacity: 0.8;
			position: absolute;
			top: 0;
			width: 100%;
			z-index: 1;
		}
	
		&:after{
			background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
			background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
			background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
			content: "";
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
			z-index: 1;
		}
	}

	.user-profile{
		position: relative;
		border-bottom: 1px solid #f8f8f8;
		padding: 20px 10px;

		.profile-img{
			width: 45px;
			height: 45px;
			border-radius: 50%;
			overflow: hidden;
			cursor: pointer;
		}

		.cont{
			margin-right: 60px;
			line-height: 45px;
			position: absolute;
			top: 22px;
			transition: all .4s;

			h6{
				font-size: 13px;

				strong{
					display: block;
				}
			}
		}
	}

	.nav-list{
		margin-top: 30px;

		li{
			padding: 8px 0;
			font-size: 12px;
			position: relative;
			z-index: 3;

			a{
				padding: 0 15px 0 5px;
				width: 100%;
			}

			&:hover{
				background: #f8f8f8;
				color: $sub-color;

				.text, i{
					color: $sub-color;
				}
			}

			.text{
				line-height: 30px;
				color: #4d575d;
				position: absolute;
				transition: all .4s;
			}

			.icon{
				width: 30px;
				display: inline-block;
				line-height: 30px;
			}

			.drop-icon{
				position: absolute;
				left: 15px;
				top: 15px;
				z-index: -1;
			}

			.card{
				padding: 0;
				border: 0;
				background: transparent;

				button{
					padding: 0;
					border: 0;
					background: transparent;
					text-align: right;
					width: 100%;
					outline: none !important;
				}

				.card-body{
					padding: 20px 10px;
					background: #fbfbff;

					.card-body{
						background: #fff;
						margin-top: 20px;
					}

					li{
						padding: 10px 0;
						color: #838c97;
						
						a{
							width: auto;
						}

						&:hover{
							color: $sub-color;

							i{
								color: $sub-color;
							}
						}

						i{
							margin-left: 7px;
							color: #838c97;
						}
					}
				}
			}
		}
	}

	&.small{

		width: 80px;

		.user-profile{
			
			.cont{
				visibility: hidden;
				opacity: 0;
				overflow: hidden;
			}
		
		}

		.nav-list{

			li{

				.text{
					visibility: hidden;
					opacity: 0;
				}
			}
		}

		.collapse {
			display: none;
		}
	}
}

/* ----------------------------------------------------------------
     [ End Side-bar ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
    [  Start Main ]
-----------------------------------------------------------------*/

main{
	padding: 20px 260px 20px 20px;
	overflow: hidden;
	transition: all .5s;

	&.full-width{
		padding-right: 100px !important;
	}

	&.small{
		padding: 20px 400px 20px 20px;
	}

	&.full{
		padding: 20px !important;
	}
}

/* ----------------------------------------------------------------
     [ End Main ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
     [  Start nav-top ]
-----------------------------------------------------------------*/

.nav-top{
	background: #fff;
	padding: 15px;
	border-radius: 5px;
	box-shadow: 0px 5px 20px rgba(200,200,200,.4);
	position: relative;

	&.no-shadow{
		box-shadow: none;
	}

	.flex{
		display: inline-block;
		float: right;
	}

	.toggle-icon, .nav-full-icon{
		font-size: 25px;
		margin-left: 15px;
		cursor: pointer;
	}

	.search-form{

		form{
			position: relative;

			input{
				width: 280px;
				padding: 8px 15px 8px 30px;
				border-radius: 30px;
				background: transparent;
				border: 1px solid #eee;
			}

			button{
				position: absolute;
				left: 5px;
				top: 0;
				border: 0;
				padding: 9px;
				background: transparent;
				outline: none;
				color: #838c97;
			}
		}
	}

	.quick-links{
		float: left;

		> ul > li{
			display: inline-block;
			margin-right: 40px;
			float: right;

			.item{

				> div{
					position: relative;
				}

				i{
					font-size: 20px;
					display: inline-block;
					height: 40px;
					line-height: 40px;
					cursor: pointer;
				}

				.num{
					width: 16px;
					height: 16px;
					border-radius: 4px;
					position: absolute;
					right: -12px;
					top: 0px;
					text-align: center;
					line-height: 16px;
					color: #fff;
					font-size: 12px;
				}
			}
		}

		.user-area{

			.profile-img{
				width: 40px;
				height: 40px;
				border-radius: 50%;
				overflow: hidden;
				cursor: pointer;
				box-shadow: 0px 5px 10px rgba(0,0,0,.05);
			}

			.dropdown-menu{
				width: 180px;
			}
		}

		.messages{

			.num{
				background: #FF6B6B;
			}
		}

		.noti{

			.num{
				background: #3ACE9C;
			}
		}

		.messages,.noti{

			.dropdown-menu{
				padding: 20px 0;

				.head{
					margin-bottom: 30px;
					overflow: hidden;
					padding: 0 20px;

					span{
						font-size: 13px;
					}

					.clear{
						float: left;
						color: $sub-color;
					}
				}

				ul{
					height: 280px;
					overflow: auto;
				}

				li{
					padding: 20px;
					border-top: 1px solid #f7f7f7;

					.text{
						width: 55px;
						height: 55px;
						line-height: 55px;
						text-align: center;
						background: #f7f7f7;
						float: right;
						border-radius: 50%;
						overflow: hidden;
						font-size: 20px;
					}

					.img{
						width: 50px;
						height: 50px;
						float: right;
						border-radius: 50%;
						overflow: hidden;
						position: relative;
						bottom: -10px;
					}

					.cont{
						margin-right: 70px;

						h6{
							margin-bottom: 5px;
							font-weight: 600;
							font-size: 14px;
						}

						p{
							font-size: 12px;
							line-height: 1.7;
							color: #4d575d;
						}

						span{
							font-size: 11px;
							color: #838c97;
							margin-top: 5px;
						}
					}
				}

				.bottom{
					border-top: 1px solid #f5f5f5;
					text-align: center;
					padding: 20px 20px 0;
					color: $sub-color;
				}
			}
		}
	}

	.dropdown-menu{
		background: #fff;
		box-shadow: 0 0 30px rgba(0,0,0,0.1);
		width: 300px;
		border: none;
		border-radius: 0px;
		margin-top: 15px;

		&:after{
			content: '';
			width: 0;
			height: 0;
			border-right: 8px solid transparent;
			border-left: 8px solid transparent;
			border-bottom: 10px solid #fff;
			position: absolute;
			top: -10px;
			left: 20px;
		}
		
		.dropdown-item{
			padding: 10px 25px;
			line-height: 20px;
			font-size: 11px;
			color: #212529;

			i{
				margin-left: 10px;
			}

			&.logout{
				border-top: 1px solid #F8F9FA;

				.icon{
					margin-right: 15px;
					font-size: 18px;
					color: $main-color;
					line-height: 20px;
					transform: rotate(180deg);
					position: relative;
					bottom: -3px;
					margin-left: 0;
				}
			}
		}
	}

	.dropdown-item.active, .dropdown-item:active{
		background: $main-color;
	}
}

.nav-scroll{
	position: fixed;
	top: -100px;
	left: 0;
	width: 100%;
	transition: transform .5s;
	transform: translateY(100px);
	z-index: 9;
}

/* ----------------------------------------------------------------
     [ End nav-top ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
     [  Start home-content ]
-----------------------------------------------------------------*/

.home-content{

	.welcome{
		margin: 50px 0;

		.top-bar-chart{
			float: left;
			padding-top: 12px;
			width: 100%;
	
			.quick-report {
				display: table;
				float: left;
				padding-right: 50px;

				h3{
					font-size: 18px;
				}
			}
		
			.quick-report-infos {
				float: left;
				padding-right: 18px;
			}
	
			.quick-report > svg {
				float: right;
				margin-top: 10px;
			}
		}
	}

	.panel-content{

		.mini-stats-sec{

			.widget{
				padding: 20px;
				background: #fff;
				border-radius: 7px;
				margin-bottom: 20px;
				overflow: hidden;

				.icon-circle{
					float: right;

					.icon{
						width: 65px;
						height: 65px;
						line-height: 65px;
						text-align: center;
						border-radius: 50%;
						font-size: 28px;
					}
				}

				.cont{
					margin-right: 80px;

					p{
						margin-bottom: 5px;

						i{
							margin-left: 4px;
							font-size: 12px;
						}
					}
				}
			}

			.total-sales-sec{
				padding: 40px 20px;

				.circle-chart {
					float: right;
					margin-left: 35px;
					position: relative;

					.cirlce-chart-detail {
						left: 0;
						margin-top: -6px;
						position: absolute;
						text-align: center;
						top: 50%;
						transform: translateY(-50%);
						width: 100%;

						span{
							margin-bottom: 4px;
						}
					}

					svg.radial-progress {
						height: auto;
						max-width: 140px;
						transform: rotate(-90deg);
						width: 100%;
					}
					
					svg.radial-progress circle {
						fill: rgba(0,0,0,0);
						stroke: #fff;
						stroke-dashoffset: 219.91148575129; /* Circumference */
						stroke-width: 8;
					}
					
					svg.radial-progress circle.incomplete { opacity: 0.25; }
					
					  svg.radial-progress circle.complete { stroke-dasharray: 219.91148575129; /* Circumference */ }
					
					svg.radial-progress circle { stroke: #faa5ff; }
				}

				.total-sales-info {
					display: table-cell;
					vertical-align: middle;
					width: 100%;

					> span {
						color: #777777;
						float: right;
						font-size: 12px;
						margin-bottom: 10px;
						width: 100%;
					}

					> h3 {
						color: #4d575d;
						float: right;
						font-size: 21px;
						padding-bottom: 15px;
						margin-bottom: 6px;
						position: relative;
						width: 100%;

						&:before {
							background: #e6e6e6;
							bottom: 0;
							content: "";
							height: 1px;
							right: 0;
							position: absolute;
							width: 100px;
						}
					}

					> ul {
						float: right;
						margin: 20px 0 0;
						padding: 0;
						width: 100%;
					}

					li {
						float: right;
						width: 33.3333%;

						span {
							color: #777777;
							font-size: 13px;
						}

						h5 {
							color: #4d575d;
							font-size: 18px;
							margin: 4px 0 0;
						}
					}
				}
			}
		}

		.activity{
			padding: 20px;
			background: #fff;
			border-radius: 7px;
			margin-bottom: 20px;

			.title{
				margin-bottom: 40px;

				.title-text{
					display: inline-block;
				}

				h6{
					margin-bottom: 2px;
				}

				.tabs{
					float: left;

					.nav-tabs{
						border: 1px solid $sub-color;
						border-radius: 5px;
						overflow: hidden;
					}

					.nav-item{
						padding: 8px 12px;
						border: 0;
						border-radius: 0;
						border-left: 1px solid $sub-color;
						font-size: 10px;
						cursor: pointer;

						&:last-of-type{
							border: 0;
						}

						&:hover, &.active{
							background: $sub-color;
							color: #fff;
							transition: all .2s;
						}
					}
				}
			}

			.graph-details{
				margin-top: 40px;
				overflow: hidden;

				ul{

					li{
						float: right;
						width: 50%;

						span{
							padding: 2px 5px;
							border-radius: 2px;
							font-size: 11px;
							margin-bottom: 5px;
						}

						strong{
							font-weight: 400;
							margin-right: 20px;
						}
					}
				}
			}
		}
	}

	.blocks{

		.col-lg-4{
			margin-bottom: 20px;
		}

		.item{
			height: 100%;
			padding: 30px 40px;
			background: #fff;
			border-radius: 7px;
			overflow: hidden;
			background-size: cover;
			background-repeat: no-repeat;
		}

		.product{
			position: relative;
			
			.cont{
				position: absolute;
				bottom: 50px;
				left: 0;
				width: 100%;
				padding: 0 30px;
				color: #fff;

				h5{
					font-weight: 600;
					margin-bottom: 10px;
				}

				p{
					font-size: 12px;
					color: #eee;
				}

				.price{
					margin-top: 15px;
					color: $main-color;
					font-size: 18px;
					float: left;

					span{
						margin: 0 4px;
					}

					.icon{
						font-size: 25px;
					}

					.del{
						text-decoration: line-through;
						color: #eee;
						opacity: .7;
					}
				}
			}
		}

		.clients{

			.title{

				p{
					font-size: 13px;
				}

				form{
					margin-top: 15px;

					input{
						width: 100%;
						padding: 10px;
						border: 1px solid #eee;
						border-radius: 30px;
					}
				}
			}

			.chat-box{
				height: 230px;
				overflow: auto;
				margin-top: 40px;

				li{
					margin-bottom: 30px;
					width: 100%;

					.user-status{
						position: relative;
						width: 50px;
						height: 50px;
						line-height: 50px;
						text-align: center;
						font-size: 20px;
						font-weight: 600;
						border-radius: 50%;
						float: right;

						&:before{
							border-radius: 50%;
							content: "";
							height: 6px;
							right: 0;
							position: absolute;
							top: 0;
							width: 6px;
						}

						&.online{

							&:before{
								background: #5bdd5e;
							}
						}

						&.offline{

							&:before{
								background: #ff6a7f;
							}
						}

						&.away{

							&:before{
								background: #ffda2b;
							}
						}
					}

					.client-info {
						padding-right: 65px;
						position: relative;
						vertical-align: middle;
						width: 100%;

						h3{
							font-size: 16px;
							font-weight: 600;
						}

						.icon{
							position: absolute;
							left: 10px;
							bottom: 10px;
							color: #838c97;
							font-size: 12px;
							opacity: .5;
						}
					}
				}
			}
		}

		.follow{
			text-align: center;
			position: relative;

			&:before{
				background: #fff none repeat scroll 0 0;
				content: "";
				height: 100%;
				left: 0;
				opacity: 0.8;
				position: absolute;
				top: 0;
				width: 100%;
				z-index: 1;
			}

			&:after{
				background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
				background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
				background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
				content: "";
				height: 100%;
				left: 0;
				position: absolute;
				top: 0;
				width: 100%;
				z-index: 1;
			}

			.top{
				position: relative;
				z-index: 2;
			}

			.img{
				width: 85px;
				height: 85px;
				border-radius: 50%;
				border: 3px solid #eee;
				overflow: hidden;
				margin: 30px auto 20px;
			}

			.butn{
				padding: 11px 35px;
				color: $main-color;
				background: #fff;
				border-radius: 5px;
				margin: 30px 0 50px;
				font-size: 16px;
			}

			.icons{
				
				ul{
					overflow: hidden;
				}

				li{
					text-align: center;
					width: 33.33333%;
					float: right;
					margin-bottom: 20px;

					.icon{
						width: 40px;
						height: 40px;
						line-height: 40px;
						border-radius: 50%;
						margin: auto;
						margin-bottom: 10px;
						display: block;
					}

					strong{
						font-weight: 600;
					}
				}
			}
		}

		.tasks{

			.title{

				h6{
					font-weight: 600;
				}

				p{
					font-size: 13px;
					margin-top: 5px;	
				}
			}

			form{
				position: relative;
				margin: 20px 0 40px;

				input{
					width: 100%;
					border: 1px solid #eee;
					border-radius: 30px;
					padding: 10px;
				}

				button{
					background: transparent;
					border: 0;
					padding: 10px;
					position: absolute;
					left: 10px;
					top: 2px;
				}
			}

			li{
				color: #838c97;
				font-size: 13px;
				padding: 10px 0;
				position: relative;

				i{
					position: absolute;
					height: 100%;
					width: 2px;
					right: -40px;
					top: 0;
				}

				&:last-of-type{
					margin-bottom: 0;
				}
			}
		}

		.chating{
			
			.title{

				h6{
					font-weight: 600;
				}

				p{
					font-size: 13px;
					margin-top: 5px;	
				}
			}

			.chating-box{
				margin-top: 40px;

				ul{
					max-height: 200px;

					li{
						margin-bottom: 15px;
						overflow: hidden;

						span{
							border: 1px solid #f7f7f7;
							padding: 12px 15px;
							border-radius: 30px;
							font-size: 13px;
						}

						&.self{

							span{
								float: left;
								background: $third-color;
								border-color: $third-color;
								color: #fff;
							}
						}
					}
				}

				form{
					position: relative;
					margin-top: 40px;

					input{
						width: 100%;
						padding: 20px;
						background: $third-color;
						color: #fff;
						border: 0;
						border-radius: 5px;
					}

					button{
						position: absolute;
						left: 0;
						top: 0;
						padding: 20px;
						background: transparent;
						border: 0;
						color: #fff;
						font-size: 20px;
					}

					::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
						color: #eee;
						opacity: 1; /* Firefox */
					}
					
					  :-ms-input-placeholder { /* Internet Explorer 10-11 */
						color: #eee;
					}
					
					  ::-ms-input-placeholder { /* Microsoft Edge */
						color: #eee;
					}
				}
			}
		}

		.twitter-feed{

			.twitter-account {
				float: right;
				margin-bottom: 19px;
				width: 100%;

				i {
					color: #ace9ff;
					float: left;
					font-size: 58px;
					margin-right: 15px;
				}

				h3 {
					color: #2e2e2e;
					display: block;
					font-size: 18px;
					margin: 10px 0 2px;
				}

				span {
					color: #777777;
					font-size: 13px;
					font-weight: 300;
				}
			}

			.twitter-widget{
				margin-top: 20px;
			}
		}
	}
}

/* ----------------------------------------------------------------
     [ End home-content ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
     [  Start categories ]
-----------------------------------------------------------------*/

.categories{
	padding: 50px 0 20px;

	.item{
		padding: 0 30px;
		min-height: 150px;
		box-shadow: 0px 10px 30px -10px rgba(0, 0, 0, 0.1);
		border-radius: 10px;
		margin-bottom: 30px;
		color: #fff;
		position: relative;

		&:before, &:after{
			content: '';
			width: 85px;
			height: 85px;
			border-radius: 50%;
			background: rgba(255,255,255,.05);
			position: absolute;
		}

		&:before{
			left: -5px;
			top: 20px;
		}

		&:after{
			top: 80px;
			left: -25px;
		}

		.icon{
			font-size: 30px;
			margin-bottom: 10px;
		}

		h6{
			font-weight: 600;
			line-height: 1.8;
		}
	}

	.blue{
		background: #289cf5;
		background: linear-gradient(135deg, #289cf5, #4f8bb7);
	}

	.green{
		background: #65a986;
		background: linear-gradient(135deg, #23bdb8 0, #65a986 100%);
	}

	.purple{
		background: #8e4cf1;
		background: linear-gradient(135deg, #8e4cf1 0, #c554bc 100%);
	}

	.orange{
		background: #f48665;
		background: linear-gradient(135deg, #f48665 0, #d68e41 100%);
	}

	.pink{
		background: #f953c6;
		background: linear-gradient(135deg, #f953c6, #b91d73);
	}

	.life{
		background: #43e97b;
		background: linear-gradient(135deg, #43e97b 0, #38f9d7 100%);
	}

	.plum{
		background: #764ba2;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}

	.heaven{
		background: #d9afd9;
		background: linear-gradient(135deg, #d9afd9 0, #97d9e1 100%);
	}

	.care{
		background: #fdd6bd;
		background: linear-gradient(135deg, #f794a4 0, #fdd6bd 100%);
	}

	&.style2{
		margin-top: 140px;

		.tab-content{
			display: none;
		}
	
		.tab-content.current{
			display: block;
		}

		.flip-box{
			text-align: center;

			.front,.back{
				box-shadow: 0px 10px 30px rgba(0,0,0,.05);
				border-radius: 5px;
				overflow: hidden;
				color: #fff;

				p{
					color: #eee;
				}
			}

			.front{
				padding: 50px 25px;
				position: relative !important;

				&:before, &:after{
					content: '';
					width: 95px;
					height: 95px;
					border-radius: 50%;
					background: rgba(255,255,255,.05);
					position: absolute;
				}
		
				&:before{
					left: -5px;
					top: 30px;
				}
		
				&:after{
					top: 90px;
					left: -25px;
				}
			}

			.back{
				padding: 0 25px;
				position: absolute !important;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;

				.icon{
					position: absolute;
					top: -20px;
					left: -20px;
					font-size: 120px;
					opacity: .1;
					transform: rotate(30deg);
					z-index: -1;
				}
			}

			.icon{
				font-size: 50px;
				margin-bottom: 20px;
			}
	
			h6{
				font-size: 18px;
			}
			
			p{
				font-size: 16px;
			}
		}
	}
	
	&.style3{
		margin-top: 140px;

		.tab-content{
			display: none;
		}
	
		.tab-content.current{
			display: block;
		}

		.accordion{

			.card{
				background: transparent;
				border: 0;
				border: 0 !important;
				border-radius: 5px;
				border-radius: 0;
				margin-bottom: 15px;
				text-align: right;
				transition: all .4s;

				.card-header{
					background: transparent;
					border: 0;
					border-radius: 0;
					padding: 0;

					button{
						padding: 35px 30px;
						width: 100%;
						border: 0;
						color: inherit;
						text-align: right;
						text-decoration: none;
						outline: none;
						overflow: hidden;
						position: relative;

						&.collapsed{

							&:after{
								content: "\e64b";
								position: absolute;
								left: 15px;
								top: 50%;
								transform: translateY(-50%);
								font-family: 'themify';
								font-size: 11px;
								color: #fff;
							}
						}

						&:after{
							content: "\e648";
							position: absolute;
							left: 15px;
							top: 50%;
							transform: translateY(-50%);
							font-family: 'themify';
							font-size: 11px;
							color: #fff;
						}

						.icon{
							float: right;
							font-size: 20px;
							color: #eee;
							width: 50px !important;
							height: 50px;
							display: inline-block;
							line-height: 50px;
							text-align: center;
							border-radius: 50%;
							background: rgba(255,255,255,.05);
						}

						h6{
							margin-right: 15px;
							font-size: 13px;
							font-weight: 600;
							line-height: 1.8;
							color: #fff;
						}
					}
				}
			}

			.card-body{
				background: #fff;

				li{
					margin-bottom: 20px;
					padding-right: 25px;
					position: relative;

					&:after{
						content: "\e64c";
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
						font-family: 'themify';
						font-size: 10px;
						color: $sub-color;
					}
				}
			}
		}
	}
}

/* ----------------------------------------------------------------
     [ End categories ]
-----------------------------------------------------------------*/




/* ----------------------------------------------------------------
     [  Start settings ]
-----------------------------------------------------------------*/

.settings{
	margin-bottom: 50px;

	.col-lg-4{
		margin-top: 50px;
	}

	.item{
		padding: 40px 30px;
		background: #fff;
		border-radius: 5px;
		height: 100%;

		.head{

			h5{
				font-size: 16px;
				font-weight: 700;
				margin-bottom: 40px;
				padding-bottom: 20px;
				border-bottom: 1px solid #f7f7f7;
			}
		}

		form{

			label{
				font-size: 12px;
				font-weight: 700;
				margin-bottom: 10px;
			}

			input{
				width: 100%;
				padding: 12px;
				background: #F8F9FA;
				border: 1px solid #F6F7FB;
				border-radius: 5px;
				margin-bottom: 30px;
			}

			&.left-form{
				text-align: left;

				input{
					text-align: left;
				}
			}
		}

		button{
			width: 100%;
			padding: 12px;
			border: 1px solid $sub-color;
			background: $sub-color;
			color: #fff;
			transition: all .4s;
			margin-top: 30px;
			cursor: pointer;

			&:hover{
				background: $pcolor;
				border-color: $pcolor;
			}
		}
	}
}

/* ----------------------------------------------------------------
     [ End settings ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
     [  Start users-list ]
-----------------------------------------------------------------*/

.users-list{
	margin-top: 50px;

	.search{
		
		form{
			float: left;
			width: 100%;
			position: relative;

			input{
				width: 100%;
				padding: 15px;
				border: 1px solid #eee;
				border-radius: 5px;
			}

			button{
				position: absolute;
				top: 0;
				left: 0;
				padding: 15px;
				border: 1px solid transparent;
				background: transparent;
				cursor: pointer;
			}
		}
	}

	.block-table{
		width: 100%;
		margin-top: 40px;
		padding: 40px 20px;
		background: #fff;
		border-radius: 5px;
		margin-bottom: 30px;
	}

	table{
		display: table;
	}

	tbody{
		width: 100%;
		font-family: 'JF_Flat', 'Cairo', sans-serif;

		tr{
			display: table-row;
			
			&:nth-of-type(even){
				background: #fbfbff;
				border-top: 1px solid #F6F7FB;
				border-bottom: 1px solid #F6F7FB;
			}

			&:nth-of-type(odd){
				background: #fff;
				border: 0;
			}

			th,td{
				padding: 0 15px;
				height: 60px;
				vertical-align: middle;
				font-size: 13px;
				position: relative;
				color: #6c757d;

				.img{
					width: 40px;
					height: 40px;
					border-radius: 50%;
					border: 2px solid #fff;
					box-shadow: 0px 5px 10px rgba(0,0,0,0.05);
					overflow: hidden;
					margin-top: 10px;
					float: right;
				}

				.check-box{
					position: absolute;
					right: 15px;
					top: 30px;

					.custom-control-label:before,.custom-control-label:after{
						width: 15px;
						height: 15px;
						top: -7px;
						right: 0;
						cursor: pointer;
						border-radius: 50%;
					}
				}

				span{
					margin-right: 10px;
					color: $sub-color;
					line-height: 60px;
					font-weight: 600;
					color: #414d5f;
				}

				i{
					display: inline-block;
					margin: auto;
					text-align: center;
					padding: 8px 11px;
					border-radius: 4px;
					background: #98a6ad;
					color: #fff;
					font-size: 10px;
					cursor: pointer;
					transition: all .3s;

					&:hover{
						background: #83949C;
					}
				}
			}
		}
	}
}

/* ----------------------------------------------------------------
     [ End users-list ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
     [  Start reports ]
-----------------------------------------------------------------*/

.reports{
	margin-top: 50px;

	.blocks{
		width: 100%;
		margin-top: 40px;
		padding: 40px 20px;
		background: #fff;
		border-radius: 5px;
		margin-bottom: 30px;
		
		.item{
			margin-bottom: 30px;
			position: relative;

			h6{
				margin-bottom: 10px;
				padding-right: 5px;
				font-weight: 700;
				font-size: 14px;
			}
		}

		.aselect {
			position: relative;
		}
		
		.aselect select {
			display: none;
		}
		
		.select-selected,input[type="text"]{
			width: 100%;
			padding: 12px;
			background: #F8F9FA;
			border: 1px solid #F6F7FB;
			border-radius: 5px;
		}
		
		.select-selected:after {
			position: absolute;
			content: "";
			top: 20px;
			left: 10px;
			width: 0;
			height: 0;
			border: 6px solid transparent;
			border-color: #444 transparent transparent transparent;
		}
		
		.select-selected.select-arrow-active:after {
			border-color: transparent transparent #444 transparent;
			top: 7px;
		}
		
		.select-items div,.select-selected {
			padding: 12px 20px;
			cursor: pointer;
			user-select: none;
		}
		
		.select-items {
			position: absolute;
			background-color: $sub-color;
			top: 100%;
			left: 0;
			right: 0;
			z-index: 99;
			box-shadow: 0px 5px 10px rgba(200,200,200,.3);
			max-height: 200px;
			overflow: auto;

			&::-webkit-scrollbar {
				width: 5px;
			}
			
			  /* Track */
			&::-webkit-scrollbar-track {
				background: #f1f1f1; 
			}
			
			  /* Handle */
			&::-webkit-scrollbar-thumb {
				background: #ccc; 
			}
			
			  /* Handle on hover */
			&::-webkit-scrollbar-thumb:hover {
				background: #888; 
			}
	
			> div{
				background: #fff;
	
				&:hover{
					color: #fff !important;
				}
			}
		}
		
		.select-hide {
			display: none;
		}
		
		.select-items div:hover, .same-as-selected {
			background-color: rgba(0, 0, 0, 0.1);
		}
	}

	&.style2{

		.blocks{
			background: #F8F9FA;

			h6{
				color: #212529;
				position: relative;
				margin-bottom: 0;
				padding-right: 5px;
				font-weight: 700;
				font-size: 14px;

				.icon{
					opacity: .5;
					margin-left: 15px;
				}
			}

			.dropdown{

				button{
					text-align: right;
					width: 100%;
					padding: 18px;
					background: #fff;
					border: 1px solid #fff;
					border-radius: 5px;
					position: relative;
					outline: none !important;

					&:after{
						position: absolute;
						left: 20px;
						top: 50%;
					}
				}

				.dropdown-menu{
					width: 100%;
					top: 5px !important;
					border: 0;
					box-shadow: 0px 5px 10px rgba(200, 200, 200, 0.3);
    				max-height: 200px;
					position: relative;
					overflow: auto;

					li{
						padding: 14px 20px;
						font-size: 13px;
						cursor: pointer;
						user-select: none;

						&:hover{
							background-color: $sub-color;
							color: #fff;
						}
					}
				}
			}

			&.accordion{

				.card{
					border: 0;
					background: transparent;
					border-radius: 0;
					margin-bottom: 15px;
				}

				button{
					text-align: right;
					width: 100%;
					padding: 18px;
					background: #fff;
					border: 1px solid #fff;
					border-radius: 5px;
					position: relative;
					outline: none !important;

					h6{
						width: 100%;
						display: block;

						.icon{
							float: left;
						}
					}
				}

				.card-body{
					background: #fff;
					margin-top: 15px;
					box-shadow: 0px 5px 10px rgba(200, 200, 200, 0.3);
    				max-height: 200px;
					position: relative;
					overflow: auto;

					li{
						padding: 14px 20px;
						font-size: 13px;
						cursor: pointer;
						user-select: none;

						&:hover{
							background-color: $sub-color;
							color: #fff;
						}
					}
				}
				
				.item{

					h6{
						padding-right: 5px;
					}
				}
			}
	
			.form-group{
				position: relative;
				margin-top: 10px;

				.icon{
					position: absolute;
					left: 15px;
					top: 30%;
					font-size: 22px;
					opacity: .5;
				}
			}
			
			input[type="text"]{
				width: 100%;
				padding: 18px;
				background: #fff;
				border: 1px solid #fff;
				border-radius: 5px;
			}
		}
	}
}

.reportup{
	margin-top: 40px;
	transition: all .5s;

	&.down{
		margin-top: 100px !important;
	}

	.box{
		padding: 40px 20px;
		background: #fff;
		border-radius: 5px;
		margin-top: 40px;
		border-radius: 5px;

		.search{
			
			a{
				text-align: center;
				background: $sub-color;
				color: #fff;
				width: 100%;
				display: block;
				margin: auto;
				height: 100%;
				border-radius: 5px;

				&:hover{
					opacity: .9;
				}

				.icon{
					margin-top: 50%;
					transform: translateY(-40%);
					font-size: 20px;

					i{
						display: block;
						font-size: 45px;
						margin-bottom: 15px;
					}
				}
			}
		}
	}

	.blocks{	

		.item{
			margin-bottom: 15px;
			position: relative;

			&:last-of-type{
				margin-bottom: 0;
			}

			button{
				text-align: right;
				width: 100%;
				padding: 14px 18px;
				background: #F8F9FA;
				border: 1px solid #F8F9FA;
				border-radius: 5px;
				position: relative;
				outline: none !important;
				color: #212529;
				font-weight: 600;
				font-size: 14px;

				.icon{
					float: left;
					opacity: .5;
				}
			}

			h6{
				margin-bottom: 10px;
				padding-right: 5px;
				font-weight: 700;
				font-size: 14px;
			}
		}

		.modal-dialog{
			margin: auto;
			position: relative;
			width: 100%;
			height: 100%;
		}
	}

	.date-box{
		text-align: center;
		border: 1px solid #eee;
		padding: 5px;
		border-radius: 5px;
		height: 100%;
		cursor: pointer;

		.modal-content{
			background: #fff;
			padding: 10px 0 0;
			border-radius: 5px;
			max-width: 440px;
			max-height: 100%;
			margin-right: 20px;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			border: 4px solid #eee;
			overflow: hidden;
	
			ul{
				max-height: 380px;
				overflow: auto;
			}
		}

		.icon{
			color: #999;
			font-size: 40px;
			margin-bottom: 15px;
		}

		h6{
			font-size: 13px;
			font-weight: 700;
		}

		.day{
			font-size: 34px;
			font-weight: 400;
			color: $sub-color;
			margin: 15px auto;
		}

		.month{
			font-weight: 400;
			font-size: 13px;
			color: #212529;
		}

		.modal-dialog{
			margin: auto;
			position: relative;
			width: 100%;
			height: 100%;
		}
	}

	.modal-content{
		background: #fff;
		padding: 10px 0 0;
		border-radius: 5px;
		max-width: 320px;
		max-height: 500px;
		margin-right: 90px;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		border: 4px solid #eee;
		overflow: hidden;

		ul{
			max-height: 380px;
			overflow: auto;
		}

		&::-webkit-scrollbar {
			width: 5px;
		}
		
		  /* Track */
		&::-webkit-scrollbar-track {
			background: #ccc; 
		}
		
		  /* Handle */
		&::-webkit-scrollbar-thumb {
			background: #777; 
		}
		
		  /* Handle on hover */
		&::-webkit-scrollbar-thumb:hover {
			background: #888; 
		}

		li{
			padding: 12px 15px;
			position: relative;

			label{
				margin-bottom: 0;
			}

			&:hover{
				background: #F6F7FB;
			}
		}

		.confirm{
			margin-top: 10px;
			height: 40px;

			.butn{
				width: 100%;
				border-radius: 0;
				text-align: center;
				background: $sub-color;
				border-color: $sub-color;

				&:hover{
					background: $main-color;
					border-color: $main-color;
				}
			}
		}

		.datepicker-inline{
			width: 100%;
			max-width: 100%;
			max-height: 100%;
			text-align: right;

			ul{
				width: 100%;
				max-width: 100%;
				height: auto;
				overflow: hidden;

				li{
					padding: 0;
				}

				li[data-view="month current"]{
					width: calc(100% - 60px);
					color: $sub-color;
					font-weight: 700;

					&:hover{
						background: transparent;
					}
				}

				&[data-view="week"],&[data-view="days"]{
					text-align: center;
					margin: 10px auto;

					li{
						float: none;
						text-align: center;
						display: inline-block;
						height: 50px;
						width: 50px;
						line-height: 50px;
						border-radius: 50%;
					}
				}

				&[data-view="week"]{
					background: #f7f7f7;

					li{
						background: transparent;
					}
				}

				&[data-view="days"]{

					.picked{
						background: $sub-color;
						color: #fff;
					}

					.muted{
						color: #ccc;
					}
				}
			}
		}
	}
}

.reports-table{
	min-width: 900px;
	overflow: auto;
	width: 100%;
	margin-top: 40px;
	padding: 40px 20px;
	background: #fff;
	border-radius: 5px;
	margin-bottom: 30px;
	text-align: left;
	direction: ltr;

	&::-webkit-scrollbar {
		width: 5px;
	}
	
	  /* Track */
	&::-webkit-scrollbar-track {
		background: #f1f1f1; 
	}
	
	  /* Handle */
	&::-webkit-scrollbar-thumb {
		background: #ccc; 
	}
	
	  /* Handle on hover */
	&::-webkit-scrollbar-thumb:hover {
		background: #888; 
	}

	table{
		display: table;
	}

	tbody{
		width: 100%;
		font-family: 'JF_Flat', 'Cairo', sans-serif;

		.header{
			background: $sub-color !important;

			th{
				color: #fff !important;
				border-right: 1px solid rgba(255,255,255,.1);
			}
		}

		tr{
			display: table-row;
			
			&:nth-of-type(odd){
				background: #fbfbff;
				border-top: 1px solid #F6F7FB;
				border-bottom: 1px solid #F6F7FB;
			}

			th,td{
				padding: 0 15px;
				height: 60px;
				vertical-align: middle;
				font-size: 13px;
				position: relative;
				color: #6c757d;
			}

			td{
				padding: 0 5px 0 15px;
			}
		}

		.popimg{
			text-align: center;

			i{
				display: inline-block;
				margin: auto;
				text-align: center;
				padding: 7px 8px;
				border-radius: 4px;
				background: #98a6ad;
				color: #fff;
				font-size: 10px;
				cursor: pointer;
				-webkit-transition: all .3s;
				transition: all .3s;

				&:hover{
					background: #83949C;
				}
			}

			span{
				display: block;
				font-weight: 600;
				font-size: 10px;
				margin-top: 5px;
			}
		}
	}
}

/* ----------------------------------------------------------------
     [ End reports ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
     [ Start datepicker ]
-----------------------------------------------------------------*/

.ui-widget.ui-widget-content{
	min-width: 350px;
}

.ui-state-default, .ui-widget-content .ui-state-default{
	background: transparent;
	border: 0;
	padding: 15px;
}

.ui-widget.ui-widget-content{
	border-color: #eee;
}

.ui-widget-header{
	background: #fafafa;
	border: 0;
	padding: 5px !important;
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next{
	top: 5px;
}

thead{
	border-bottom: 1px solid #f5f5f5;
}

.ui-datepicker th{
	padding: 12px;
}

tbody{
	padding: 10px;

	tr{
		display: table-row;
		
		&:nth-of-type(odd){
			background: #fbfbff;
			border-top: 1px solid #F6F7FB;
			border-bottom: 1px solid #F6F7FB;
		}

		th,td{
			padding: 0 15px;
			vertical-align: middle;
			font-size: 13px;
			position: relative;
			color: #6c757d;
		}
	}
}

.ui-state-default{
	text-align: center !important;
	color: #888 !important;
}

.ui-state-hover{
	background: $sub-color !important;
	color: #fff !important;
}

.ui-state-highlight.ui-state-active{
	color: #fff !important;
	background: $main-color !important;
}

/* ----------------------------------------------------------------
     [ End datepicker ]
-----------------------------------------------------------------*/




/* ----------------------------------------------------------------
     [ Start Footer ]
-----------------------------------------------------------------*/

footer{
	padding-bottom: 30px;
}

/* ----------------------------------------------------------------
     [ End Footer ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
 	 [ 16 Responsive ]
-----------------------------------------------------------------*/

@media screen and (min-width: $desk-xlg-screen){

	.container{
		max-width: 1200px;
	}

}

@media screen and (max-width: $desk-md-screen){

	.nav-top{
		display: none;
	}

	.nav-mobile{
		display: block;
	}

	.about .feat{
		margin-top: 30px;
	}

	.about .feat li{
		display: inline-block;
	}

	.numbers .item{
		margin: 10px 0;
	}

	.contact .contact-info .item{
		text-align: center;

		.icon{
			float: none;
			border: 0;
			padding: 0;
			margin-bottom: 20px;
		}

		.cont{
			margin: 0;
		}
	}

	.register .register-info{
		margin-top: 50px;
	}
	
	.order-1{
		order: 2 !important;
	}

	.order-2{
		order: 1 !important;
	}
}

@media screen and (max-width: $tablet-sm-screen){

	.details .block .img .title h5 .price{
		display: block;
		margin-top: 5px;
		float: none;
	}
}

@media screen and (max-width: $mobile-xs-screen){

	
}

