.left{
	width: 17%;
	max-width: 315px;
	min-height: calc(100vh - 59px);
	background-color: #52596b;
	position: relative;
	z-index: 3;
	@media (max-width: 1616px){
		width: 260px;
	}
	@media (max-width: 1240px){
		width: 205px;
	}
	@include br1{
		width: 100%;
		max-width: 100%;
		min-height: auto;
		padding-top: 9rem;
		margin-bottom: 1px;
	}
	@media (max-width: 784px){
		padding-top: 17rem;
	}
	@media (max-width: 355px){
		padding-top: 26rem;
	}
	&:before{
		content: '';
		position: absolute;
		background-color: #424955;
		width: 90px;
		height: 100%;
		left: 0;
		top: 0;
		@media (max-width: 1480px){
			width: 65px
		}
	}
	
	&.hide{
		width: 90px;
		@media (max-width: 1680px){
			.left-head{
				min-height: 88px;
			}
		}
		@media (max-width: 1480px){
			width: 65px;
		}
		@include br1{
			width: 100%;
			.left-head{
				min-height: auto;
			}
			.left-block{
				min-height: auto;
			}
		}
		.left-head{
			.head{
				display: none;
				@include br1{
					display: block;
				}
			}
			&+.left-block{
				.menu-main.main{
					display: none;
					@include br1{
						display: none;
					}
				}
			}
		}
	}
	.left-block{
		position: relative;
		z-index: 1;
		padding: 1.5rem 0;
		min-height: 73px;
		@include br1{
			position: unset;
			min-height: 65px;
		}
		@include align-items(flex-start);
		.menu{
			width: 90px;
			&.gam{
				cursor: pointer;
				position: relative;
				&:before{
					content: '';
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					width: 28px;
					height: 28px;
					background: url($img_dir + 'gamburger.svg') no-repeat center;
					background-size: 100% auto;
				}
			}
			@media (max-width: 1480px){
				width: 65px
			}
			@include br1{
				&.gam{
					width: 65px;
					height: 9rem;
					position: absolute;
					top: 0;
					div{
						background-color: rgba(25,23,43,.2);
						position: relative;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					&+.main{
						padding-left: 8rem;
					}
				}
			}
		}
		.main{
			width: calc(100% - 90px);	
			padding: .8rem 1.3rem;
			@media (max-width: 1480px){
				width: calc(100% - 65px);	
			}
		}
	}
	.left-head{
		background-color: rgba(25, 23, 43, .2);
		border-bottom: 1px solid #757a89;
		border-top: 1px solid #757a89;
		.menu{
			width: 90px;
			margin: auto 0;
			text-align: center;
			@media (max-width: 1480px){
				width: 65px
			}
		}
		.head{
			padding: 1.3rem 2rem;
			@media (max-width: 1680px){
				padding: 1.3rem 1rem;
			}
		}
	}
	.menu-circle{
		@include br1{
			&.menu{
				width: calc(100% - 65px);
				top: 0;
				position: absolute;
				margin-left: 65px;
				ul{
					margin-bottom: 0;
				}
			}
			&+.main{
				margin-left: 6.5rem;
			}
		}
		@include br3{
			&+.main{
				margin-left: 7.2rem;
			}
		}
		ul{
			text-align: center;
			li{
				display: block;
				margin-bottom: 1.7rem;
				@include br1{
					display: inline-block;
					margin: 1rem 1.62rem 0;
				}
				@include br3{
					margin: 1rem 1.2rem 0;
				}
				@media (max-width: 440px){
					margin: 1rem .9rem 0;
				}
				a{
					color: #ffffff;
					font: 0.8rem $HB;
					text-transform: uppercase;
					.circle{
						width: 5rem;
						height: 5rem;
						background-color: #54525d;
						border-radius: 50%;
						margin: 0 auto .6rem;
						position: relative;
						&:before{
							content: '';
							position: absolute;
							width: 3rem;
							height: 3rem;
							left: 50%;
							top: 50%;
							transform: translate(-50%, -50%);
						}		
						@each $name in 'tasks' 'equipment' 'rentals' 'yard' 'gps' 'fuel' 'drivers' 'loads'{
							&-#{$name} {
								&:before{
									background: url($img_dir + '#{$name}.svg') no-repeat center;
									background-size: 90% auto;
								}
							}
						}
					}
					&:hover{
						.circle{
							background-color: #00b2d2;
						}
					}
				}
				&.active{
					a{
						.circle{
							background-color: #00b2d2;
						}
					}
				}
			}
		}
	}
	.menu-main{	
		.item{
			font: 1.4rem/1 $HB;
			color: #fff;
			height: 4rem;
			background-color: rgba(25,23,43,.2);
			@include flex;
			@include align-items(center);
			margin: -2rem -1.3rem 2rem;
			padding-left: 1.5rem;
		}
		&.approvals{
			padding: .8rem;
			.item{
				margin: 0rem -.8rem;
			}
			ul{
				li{
					padding-left: 3.8rem;
					@media (max-width: 1240px){
						padding-left: 0;
					}
					@include br1{
						padding-left: 4rem;
					}
					&:before{
						color: #fff;
						@extend %center-flex;
						font-size: 1.2rem;
					}
					&.grey{
						&:before{
							background: #6d768c;
						}
					}
					&.yellow{
						&:before{
							background: #e6a200;
						}
					}
					&.green{
						&:before{
							background: #00d259;
						}
					}
					&.red{
						&:before{
							background: #eb1313;
						}
					}
					&.blue{
						&:before{
							background: #00b2d2;
						}
					}
					&.white{
						&:before{
							background: #fff;
						}
					}
					&.l-grey{
						&:before{
							background: #898989;
						}
					}
					&.purple{
						&:before{
							background: #9233ce;
						}
					}
					&.turquoise{
						&:before{
							background: #009688;
						}
					}
					&.d-blue{
						&:before{
							background: #16719b;
						}
					}
					
					$menucolor: 'operations' '#6d768c' '', 'sales' '#6d768c' '', 'companies' '#6d768c' '', 'daily' '#00b2d2' '1', 'wekly' '#00b2d2' '7', 'monthly' '#00b2d2' '30', 'annual' '#00b2d2' '365', 'all' '#00b2d2' '';
					@each $name in $menucolor {
						&.#{nth($name, 1)} {
							&:before{
								content: '#{nth($name, 3)}';
								background: url($img_dir + '#{nth($name, 1)}.svg') no-repeat center #{nth($name, 2)};
								background-size: auto;
							}
						}
					}
				}
			}
		}
		@include br1{
			&.main{
				padding-bottom: 0;
			}
		}
		ul{
			@include br1{
				@include flex;
				@include justify-content(flex-start);
				flex-wrap: wrap;
				@include align-items(center);
			}
			li{
				display: block;
				margin-bottom: 2rem;
				padding-left: 4rem;
				position: relative;
				&:before{
					content: '';
					position: absolute;
					width: 3rem;
					height: 3rem;
					border-radius: 50%;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}
				$menucolor: 'add-task' '#9233ce', 'my-tasks' '#009688', 'team' '#16719b', 'stop' '#eb1313', 'pending' '#00b2d2', 'road' '#00d259', 'general' '#fff', 'inactive' '#898989', 'employer' '#6d768c';
				@each $name in $menucolor {
					&.#{nth($name, 1)} {
						&:before{
							background: url($img_dir + '#{nth($name, 1)}.svg') no-repeat center #{nth($name, 2)};
							background-size: auto;
						}
					}
				}
				&.add-task{
					&:before{
						background-size: auto 50%;
					}
				}
				&.employer{
					&:before{
						background-size: auto 100%;
					}
				}
				a{
					color: #ffffff;
					font-size: 1.4rem;
				}
				&:hover{
					a{
						text-decoration: underline;
					}
				}
				@media (max-width: 1240px){
					margin-bottom: 2rem;
					padding-left: 0;
					padding-top: 4rem;
					text-align: center;
					&:before{
						left: 50%;
						top: 0;
						transform: translateY(0) translateX(-50%);
					}
				}
				@include br1{
					margin-bottom: 2rem;
					padding-left: 4rem;
					padding-top: 0;
					text-align: left;
					width: 50%;
					padding-right: .3rem;
					&:before{
						left: 0;
						top: 50%;
						transform: translateY(-50%) translateX(0);
					}
				}

			}
		}
		.main{
			width: 100%;
			padding: 0;
		}
		.status{
			background-color: rgba(25,23,43,.2);
			height: 6rem;
			color: #ffffff;
			font-size: 1.5rem;
			text-transform: uppercase;
			margin: 1.5rem -.8rem 0;
			position: relative;
			@include flex;
			@include align-items(center);
			padding: 1rem 2rem;
			&:before{
				content: '\e313';
				font-family: 'icomoon';
				position: absolute;
				z-index: 0;
				right: 1rem;
				cursor: pointer;	
				top: 50%;
				transform: translateY(-50%);
				color: #00b2d2;
				font-size: 3rem;
			}		
			&-show{
				display: none;
				background-color: rgba(25,23,43,.1);
				margin: 0 -.8rem;
				padding: 1rem 0;
				transition: .5s ease;
			}
		}
		.emp{
			position: relative;
			@include flex;
			@include align-items(center);
			padding: 1rem 2rem;
			margin: -2rem 0 2.5rem;
			color: #ffffff;
			font-size: 1.5rem;
			&:before{
				content: '\e313';
				font-family: 'icomoon';
				position: absolute;
				z-index: 0;
				right: 1rem;
				cursor: pointer;	
				top: 50%;
				transform: translateY(-50%);
				color: #00b2d2;
				font-size: 3rem;
			}	
			&-show{
				display: none;
				background-color: rgba(25,23,43,.1);
				margin: -2rem -.8rem 2.3rem;
				padding: 1rem 0;
				transition: .5s ease;
			}

		}
		.cl{
			cursor: pointer;
			margin-bottom: 5px !important;
		}
		.show{
			display: none;
			margin-top: 15px;
		}
	}
}
form{
	.min-max{
		justify-content: space-between;
		input{
			width: calc(50% - .65rem);

		}
	}
	input{
		border: 1px solid #fff;
		background: transparent;
		color: #fff;
		padding: .5rem 1rem;			
		font-size: 1.4rem;
		border-radius: 5px;
		-moz-appearance: textfield;
		&::-webkit-inner-spin-button { 
			display: none;
		}
		&[type="submit"]{
			width: 100%;
			&:hover{
				background: #00b2d2;
				border-color: #00b2d2;
			}
		}
	}
	.ui-widget-header{
		background: #00d259;
		border-color: #00d259;
	}
	.ui-state-active, .ui-widget-content .ui-state-active{
		background: #00b2d2;
		border-color: #00b2d2;
	}
}