/*Fonts*/
@font-face {
  font-family: 'Montserrat';
  src: url('Montserrat-Regular.eot'); /* IE9 Compat Modes */
  src: url('Montserrat-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('Montserrat-Regular.woff') format('woff'), /* Modern Browsers */
       url('Montserrat-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('Montserrat-Regular.svg#95d90f2cd2aa64bdfee0e9f34c516e71') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  400;
}
@font-face {
  font-family: 'Montserrat Bold';
  src: url('Montserrat-Bold.eot'); /* IE9 Compat Modes */
  src: url('Montserrat-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('Montserrat-Bold.woff') format('woff'), /* Modern Browsers */
       url('Montserrat-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('Montserrat-Bold.svg#2eb9a020d90588d099da01ff1a93c338') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  700;
}
/*Variables
---Fonts*/
@montserrat:'Montserrat';
@montserratBold:'Montserrat Bold';
/*---Colors*/
@purple: #8a91ff;
@purpleOverlay: #858cf7;
@darkPurple: #525692;

@mediumPurpleGray: #a6a8c5;
@lightPurpleGray: #d4d5e4;

@green: #52d2b5;
@greenHover:  darken(@green, 10%);

@red: #fe4153;

@pink: #f564a9;

@lightGray: #fafafa;
@lightGrayHover: darken(@lightGray, 5%);

@white: #ffffff;
/*Mixins*/
.border-radius{
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
}
.border-radius-small{
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
}
.border-radius-circle{
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}
.dropShadow{
	-webkit-box-shadow: 3px 3px 57px -12px rgba(0,0,0,0.65);
	-moz-box-shadow: 3px 3px 57px -12px rgba(0,0,0,0.65);
	box-shadow: 3px 3px 57px -12px rgba(0,0,0,0.65);
}
/*Global*/
*{
	margin: 0px;
	padding: 0px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body,
html{
	width: 100%;
	height: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-y: auto;
	overflow-x: hidden;
}
body > div{
	overflow-x: hidden;
	position: relative;
}
/*--Headings*/
h1,
h2{
	font-family: @montserratBold;
	font-size: 40px;
	color: @darkPurple;
	font-weight: 700;
}
h2{
	font-size: 20px;
}
h3{
	font-family: @montserrat;
	font-size: 13px;
	color: @darkPurple;
	font-weight: 400;
	text-transform: uppercase;
}
h4{
	font-family: @montserratBold;
	font-size: 12px;
	color: @lightPurpleGray;
	text-transform: uppercase;
}
h5{
	font-family: @montserrat;
	font-size: 13px;
	color: @mediumPurpleGray;
	font-weight: 400;
}
a{
	text-decoration: none;
}
select{
	width: 100%;
	height: 43px;
	display: block;
	padding: 10px 35px 10px 10px;
	border: 2px solid @lightPurpleGray;
	font-family: @montserrat;
	font-size: 16px;
	color: @mediumPurpleGray;
	background: @white url('../imgs/selectArrow.png') center right 15px no-repeat;
	background-size: 15px;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	appearance: none;
}
/*--States*/
.active{
	color: @green;
}
.inactive{
	color: @red;
}
/*--Offset*/
.offset-bottom-right{
	@media (min-width: 640px) {
		-webkit-align-self: flex-end;
		align-self: flex-end;
	    position: absolute;
		bottom: -23px;
	}
}
.offset-top-left{
	-webkit-align-self: flex-start;
	align-self: flex-start;
    position: absolute;
	left: -20px;
}
/*Enlarge*/
.enlarge-mobile{
	@media (max-width: 959px){
		background: @lightGray;
		padding: 10px;
		h4{
			font-size: 18px;
		}
		h2{
			font-size: 21px;
		}
	}
}
/*--Borders*/
.lightPurpleBorder{
	border: 1px solid @lightPurpleGray;
}
/*--Overflow*/
.overflow{
	overflow: auto;
}
/*--Smooth Transition*/
.smoothTransition{
	-webkit-transition: all 0.8s ease;
	-moz-transition: all 0.8s ease;
	transition: all 0.8s ease;	
}
/*--Height*/
.height-1{
	height: 100%;
}
/*Backgrounds*/
.purple-back{
	background: @purple;
}
/*Padding*/
.uk-padding{
	padding: 0px 0px 15px 0px;
	@media (min-width: 640px){
		padding: 0px 15px;
	}
}
.uk-remove-padding-right{
	@media (min-width: 640px){
		padding-right: 0px;
	}
}
.uk-remove-padding-left{
	@media (min-width: 640px){
		padding-left: 0px;
	}
}
/*Upload*/
.upload{
	-webkit-flex: 0 0 auto;
	-moz-flex: 0 0 auto;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	.button{
		&.small{
			width: auto;
			margin-left: 10px;
			color: @lightPurpleGray;
			border-color: @lightPurpleGray;
			&:hover{
				background-color: @lightGray;
				color: @lightPurpleGray;
			}
		}
	}
}
/*---Button*/
.button{
	width: 100%;
	height: auto;
	padding:15px;
	font-family: @montserrat;
	font-size: 13px;
	text-align: center;
	color: @white;
	text-decoration: none;
	background: @green;
	border: 2px solid @green;
	cursor: pointer;
	.border-radius;
	&.ghost{
		color: @darkPurple;
		background: @white;
		border: 2px solid @lightPurpleGray;
		&:hover{
			background: @lightPurpleGray;
			border-color: @lightPurpleGray;
		}
	}
	&:hover{
		background-color: @greenHover;
		border-color: @greenHover;
	}
	&.small{
		color: @green;
		background: @white;
		border: 1px solid @green;
		padding: 5px 10px;
		&:hover{
			color: @white;
			background: @green;
		}
	}
	&.big{
		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
		border-radius: 0px;
		padding: 30px;
	}
}
/*---Icon*/
.icon{
	width: 25px;
	height: 25px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	&.dashboard{
		background-image: url('../imgs/dashboard.png');
	}
	&.person{
		background-image: url('../imgs/employees.png');
	}
	&.shifts{
		background-image: url('../imgs/shifts.png');
	}
	&.formulaicon{
		background-image: url('../imgs/formula.png');
	}
	&.close{
		background-image: url('../imgs/close.png');
	}
	&.closeFilled{
		background-image: url('../imgs/closeFilled.png');
	}
	&.closePink{
		background-image: url('../imgs/closePink.png');
	}
	&.lifesaver{
		background-image: url('../imgs/needHelp.png');
	}
	&.arrowLeft{
		background-image: url('../imgs/leftArrow.png');
	}
	&.arrowRight{
		background-image: url('../imgs/rightArrow.png');
	}
	&.arrowRightWhite{
		background-image: url('../imgs/buttonArrow.png');
	}
	&.remove{
		background-image: url('../imgs/closeCircle.png');
	}
	&.downArrow{
		background-image: url('../imgs/selectArrow.png');
	}
	&.move{
		background-image: url('../imgs/moveable.png');
	}
	&.photoUpload{
		background-image: url('../imgs/uploadPhoto.png');
	}
}
/*Cards*/
.paymentCard{
	width: 45px;
	height: 30px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	&.visa{
		background-image: url('../imgs/visa.png');
	}
	&.discover{
		background-image: url('../imgs/discover.png');
	}
	&.amex{
		background-image: url('../imgs/amex.png');
	}
	&.master{
		background-image: url('../imgs/mastercard.png');
	}
	&.other{
		background-image: url('../imgs/otherCard.png');
	}
}
/*Tabs*/
#tabs{
	list-style: none;
	width: 100%;
	@media (min-width: 640px){
		width: auto;
	}
	li{
		@media (min-width: 640px){
			margin-left: 25px;
		}
		&:first-of-type{
			margin-left: 0px;
		}
	}
}
/*Modals*/
.modal{
	opacity: 0.5;
	position: absolute;
	background: @white;
	margin: 50px auto;
	width: 90%;
	left: 0px;
	right: 0px;
	top:-500px;
	max-height: 350px;
	.smoothTransition;
	@media (min-width: 640px){
		width: 40%;
	}
	.icon{
		&.close{
		    position: absolute;
			right: 20px;
			top: 20px;
			cursor: pointer;
		}
	}
	.inner{
		max-height: 250px;
	}
	p{
		@media (min-width: 960px){
			font-size: 18px !important;
		}
	}
}
.modal-back{
	opacity: 0;
	visibility: hidden;
	position: absolute;
	background: rgba(138, 145, 255, 0.5);
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	z-index: 1;
	pointer-events: none;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.show{
	opacity: 1;
	top:0px;
	.smoothTransition;
}
.fade-in{
	visibility: visible;
	opacity: 1;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
/*Badges*/
.badgeWrap{
	input{
		width: calc(100% - 10px);
		margin-bottom: 30px;
		padding: 25px 25px 25px 15px;
		border: 2px solid #e5e9f2;
		font-family: @montserrat;
		font-size: 16px;
		color: @darkPurple;
		background: url('../imgs/leftSelectArrow.png') right 10px center no-repeat;
		background-size: 20px;
		.border-radius-small;
		&::-webkit-input-placeholder {
		  color: #e5e9f2;
		}
		&::-moz-placeholder {
		  color: #e5e9f2;
		}
		&:-ms-input-placeholder {
		  color: #e5e9f2;
		}
		&:-moz-placeholder {
		  color: #e5e9f2;
		}
		@media (min-width: 640px){
			padding: 25px 50px 25px 25px;
			background: url('../imgs/leftSelectArrow.png') right 25px center no-repeat;
			background-size: 20px;
		}
	}
	.badge{
		padding: 0px 5px 15px 5px;
		font-family: @montserratBold;
		font-size: 11px;
		text-transform: uppercase;
		color: @lightPurpleGray;
		cursor: pointer;
		.role{
			padding: 8px 10px;
			border: 2px solid @lightPurpleGray;
			text-align: center;
			cursor: pointer;
			.border-radius;
			&:hover,
			&.active{
				background: @darkPurple;
				border-color: @darkPurple;
				color: @white;
				cursor: pointer;
			}
		}
		&.custom{
			position: relative;
			.role{
				padding: 8px 27px 8px 10px;
			}
			.icon{
				&.closeFilled{
					position: absolute;
					right: 10px;
					top:50%;
					margin-top: -21px;
				}
			}
		}
	}
}
/*Inputs*/
input[type="text"],
input[type="password"]{
	padding: 10px 5px;
	border: 2px solid @lightPurpleGray;
	font-family: @montserrat;
	font-size: 15px;
	color: @mediumPurpleGray;
	font-weight: 400;
	width: 100%;
	height: 45px;
	display: block;
	.border-radius-small;
}
input[type="checkbox"],
input[type="radio"]{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 25px;
	height: 25px;
	border: 2px solid @lightPurpleGray;
	.border-radius-small;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked{
	background: @darkPurple;
	outline: none;
}
/*Nav*/
.nav{
	font-family: @montserrat;
	font-size: 11px;
	color: @white;
	background: @purple;
	>div{
		padding: 20px;
		@media (min-width: 640px) {
			padding: 25px;
		}
		&:first-of-type{
			background: @purpleOverlay;
			a{
				margin-top: 10px;
				display: block;
				color: @darkPurple;
				&:hover{
					color: @lightPurpleGray;
				}
			}
		}
	}
	.button{
		padding:10px 15px;
		text-align: left;
		color: @white;
		background: @purple;
		border: 2px solid @purple;
		@media (min-width: 960px) {
			margin-bottom: 15px;
		}
		@media (max-width: 960px) {
			margin-left: 5px;
			margin-right: 5px;
		}
		&.active,
		&:hover{
			background: @purpleOverlay;
			border: 2px solid @purpleOverlay;
			.icon{
				opacity: 1;
			}
		}
		.icon{
			opacity: 0.5;
			@media (min-width: 1200px) {
				margin-right: 15px;
			}
		}
	}
	.avatar{
		width: 40px;
		height: 40px;
		//background: @green;
		background: url('../imgs/girlHeadshot.jpg') 0px 0px no-repeat;
		background-size: cover;
		overflow: hidden;
		position: relative;
		@media (min-width: 960px) {
			width: 60px;
			height: 60px;
		}
		@media (min-width: 1200px) {
			width: 75px;
			height: 75px;
			margin-bottom: 10px;
		}
		.border-radius-circle;
		.dropShadow;
		.edit{
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.5) url('../imgs/editIcon.png') center center no-repeat;
			background-size: 30%;
			position: absolute;
			bottom:0px;
			left: 0px;
			display: none;
			@media (min-width: 960px) {
				height: 50%;
			}
		}
		&:hover{
			cursor: pointer;
			.edit{
				display: block;
			}
		}
	}
	.sub{
		color: @lightPurpleGray;
	}
}
/*Dashbaord
--Dashboard Calendar Styles*/
.calendar{
	.day{
		padding: 15px;
		border: 1px solid @lightGray;
		cursor: pointer;
		h2{
			span{
				color: @lightPurpleGray;
			}
		}
		h4{
			font-size: 16px;
		}
		h5{
			font-family: @montserratBold;
			font-size: 11px;
		}
		.group{
			margin-top: 5px;
		}
		&:hover{
			background-color: @lightGray;
		}
	}
}
/*Dashboard Header*/
.dashboardHeader{
	padding: 25px;
	@media (min-width: 960px){
		padding: 50px;
	}
	background-color: @lightGray;
	>div{
		margin: 7px 0px;
		&:first-of-type,
		&:last-of-type{
			margin:0px;
		}
	}
	h1{
		margin-right: 15px;
	}
	h4{
		font-size: 13px;
		margin-right: 7px;
		@media (min-width: 640px){
			margin-left: 0px;
			margin-right: 7px;
		}
	}
	.view{
		h4{
			font-size: 11px;
			cursor: pointer;
			&.active{
				color: @darkPurple;
				font-size: 14px;
			}
			&:hover{
				color: @darkPurple;
			}
		}
	}
	.icon{
		width: 15px;
		height: 15px;
		margin: 0px 7px;
		cursor: pointer;
	}
}
/*--Dashbaord Month View*/
.dashboardMonth{
	.header{
		background: @lightGray;
		>div{
			padding: 15px;
		}
		h4{
			font-size: 10px;
			color: darken(@lightGrayHover, 10%);
		}
	}
	.day{
		min-width: 150px;
		@media (min-width: 640px){
			min-height: 150px;	
			min-width: calc(100% * 1/7);
		}
		h4{
			@media (max-width: 640px){
				color: @darkPurple;
			}
			span{
				color: @lightPurpleGray;
			}
		}
	}
}
/*Dashboard Week View*/
.dashboardWeek{
	padding: 50px;
	@media (min-width: 960px){
    	position: relative;
    }
	.week{
		@media (max-width: 960px){
	    	.height-1;
	    }
		.day{
			margin:0px 2px;
			border-width: 2px;
			min-height: 150px;
			.border-radius-small;
			@media (max-width: 960px){
		    	margin:5px 0px;
		    	position: relative;
		    }
			&:last-of-type{
				@media (max-width: 960px){
			    	margin-bottom: 50px;
			    }
			}
			&.active{
				&:before{
					content: attr(data-time);
					font-size: 12px;
					font-family: @montserratBold;
					color: @lightPurpleGray;
					line-height: 3px;
					text-indent: 10px;
					display: block;
					position: absolute;
				    bottom: 0px;
				    margin-left: 7%; /*Percentage based off of time of day*/
				    width: 1px;
				    height: 75%;
				    background: @green;
				    @media (min-width: 1200px){
				    	line-height: 0px;
				    }
				    @media (max-width: 960px){
				    	line-height: 0px;
				    }
				}
				&:after{
					content: '.';
					font-size: 70px;
					text-indent: -10.3px;
					line-height: 0px;
					display: block;
					position: absolute;
					top:22%;
				    margin-left: 7%; /*Percentage based off of time of day*/
				    background: @green;
				    @media (min-width: 1200px){
				    	text-indent: -11px;
				    }
				}
				@media (max-width: 960px){
			    	&:before{
					    font-size: 10px;
					    line-height: 23px;
					    text-indent: -10px;
					    bottom: auto;
					    right: 0px;
					    top: 65%;
					    margin-left: 0px;
					    width: 105%;
					    height: 1px;
					}
					&:after{
					    font-size: 70px;
					    text-indent: -10.3px;
					    line-height: 0px;
					    top: 52%;  /*Percentage based off of time of day*/
					    left: -5%;
					    margin-left: 0px;
					}
			    }
			    @media (max-width: 640px){
			    	&:before{
					    text-indent: -30px;
					    bottom: auto;
					    right: 0px;
					    top: 65%;  /*Percentage based off of time of day*/
					    margin-left: 0px;
					    width: 105%;
					    height: 1px;
					}
					&:after{
					    font-size: 70px;
					    text-indent: -10.3px;
					    line-height: 0px;
					    top: 52%;
					    left: -5%;
					    margin-left: 0px;
					}
			    }
			}
		}
	}
}
/*SideBar*/
.dashboardSidebar{
	background-color: @white;
	position: absolute;
	right: -350px;
	top: 0px;
	bottom: 0px;
	.smoothTransition;
	@media (min-width: 640px){
		right: -500px;	
	}
	&.open{
		right: 0px;
		.smoothTransition;
	}
	.dropShadow;
	.details{
		padding: 25px;
		@media (min-width: 640px){
			padding: 50px 100px;
		}
	}
	h2{
		margin-bottom: 25px;
	}
	h3{
		font-family: 'Montserrat Bold';
		margin: 20px 0px 5px 0px;
	}
	h4{
		color: @darkPurple;
		font-size: 11px;
		margin-bottom: 25px;
	}
	h5{
		color: @lightPurpleGray;
		margin-bottom: 20px;
		font-size: 15px;
		&.active{
			color: @green;
		}
	}
	.total{
		font-size: 20px;
		font-family: @montserrat;
		color: @darkPurple;
		&.active{
			color: @green;
		}
	}
	.icon{
		&.arrowRightWhite{
			width: 13px;
			height: 15px;
			margin-left: 25px;
		}
		&.closePink{
			height: 40px;
			width: 40px;
			cursor: pointer;
		}
		&.photoUpload{
			width: 90px;
			height: 90px;
		}
	}
	.avatar{
		width: 75px;
		height: 75px;
		background: url('../imgs/girlHeadshot.jpg') 0px 0px no-repeat;
		background-size: cover;
		.border-radius-circle;
	}
	.button{
		&.small{
			margin: 10px 0px 25px
		}
	}
	.upload{
		.button{
			&.small{
				margin: 0px 0px 0px 10px;
			}
		}
	}
}
/*Formulas
--Current List of Formulas*/
.formulas{
	padding: 25px;
	@media (min-width: 960px) {
		padding: 100px;
	}
	h4{
		padding-bottom: 25px;
	}
}
.formula{
	margin: 5px 0px;
	cursor: pointer;
	.lightPurpleBorder;
	.border-radius-small;
	h4{
		padding-bottom: 0px;
		margin-bottom: 0px;
	}
	>div{
		padding: 10px 15px;
		@media (min-width: 960px) {
			padding: 20px 25px;
		}
	}
	>div:first-of-type{
		background: @darkPurple;
		-webkit-border-top-left-radius: 7px;
		-moz-border-top-left-radius: 7px;
		border-top-left-radius: 7px;
		-webkit-border-top-right-radius: 7px;
		-moz-border-top-right-radius: 7px;
		border-top-right-radius: 7px;
		position: relative;
		@media (min-width: 960px) {
			width: 75px;
			-webkit-border-top-left-radius: 7px;
			-moz-border-top-left-radius: 7px;
			border-top-left-radius: 7px;
			-webkit-border-bottom-left-radius: 7px;
			-moz-border-bottom-left-radius: 7px;
			border-bottom-left-radius: 7px;
			-webkit-border-top-right-radius:0px;
			-moz-border-top-right-radius:0px;
			border-top-right-radius: 0px;
		}
		h2{
			color: @white;
		}
		.paymentCard{
			position: absolute;
			top: auto;
			right: auto;
			left: auto;
			bottom: auto;
		}
	}	
	h2{
		font-size: 18px;
	}
	&:hover{
		background-color: @lightGray;
	}
}
/*--New Formula*/
.newFormula,
.editFormula{
	padding: 25px;
	background-color: @lightGray;
	position: relative;
	@media (min-width: 960px) {
		padding: 100px;
	}
	.boxes{
		margin-top: 50px;
		>div{
			padding: 25px;
			margin:0px 15px 15px 0px;
			cursor: pointer;
			.lightPurpleBorder;
			.border-radius-small;
			&.active{
				background-color: @darkPurple;
				h1,
				h5{
					color: @white;
				}
				&:hover{
					background-color: @darkPurple;
					h5{
						color: @white;
					}
					input[type="text"]{
						background-color: @darkPurple;
						-webkit-appearance: none;
						color: @white;
					}
				}
			}
			@media (min-width: 959px) {
				&:hover{
					background-color: @mediumPurpleGray;
					h5{
						color: @white;
					}
					input[type="text"]{
						background-color: @mediumPurpleGray;
						-webkit-appearance: none;
					}
				}
			}
		}
		input[type="text"]{
			padding: 0px;
			width: 52px;
			font-family: @montserratBold;
			font-size: 40px;
			color: @darkPurple;
			font-weight: 700;
			text-align: center;
			border: none;
			background-color: @lightGray;
			position: relative;
			-webkit-appearance: none;
			-moz-appearance: none;
			-ms-appearance: none;
			appearance: none;
			.border-radius-small;
			&::-webkit-input-placeholder {
			  color: @darkPurple;
			}
			&::-moz-placeholder {
			  color: @darkPurple;
			}
			&:-ms-input-placeholder {
			  color: @darkPurple;
			}
			&:-moz-placeholder {
			  color: @darkPurple;
			}
		}
	}
	.icon{
		width: 20px;
		height: 20px;
		&.close{
			position: absolute;
			top:30px;
			right: 30px;
			margin: 0px;
			cursor: pointer;
			@media (min-width: 960px) {
				top:80px;
				right: 80px
			}
			&:hover{
				opacity: 0.75;
			}
		}
		&.lifesaver{
			margin-right: 5px;
		}
	}
	h4{
		margin-right: 15px;
	}
	h3{
		text-transform:initial;
		font-size: 16px
	}
	>div{
		margin: 5px 0px;
	}
}
/*--Edit Formula*/
.editFormula{
	.boxes{
		margin: 10px 0px 50px;
		input[type="text"]{
			margin: 0px;
		}
	}
	input[type="text"]{
		margin:10px 0px 50px
	}
}
/*Shifts
--Shift Header*/
.shiftHeader,
.approvedHeader{
	padding: 25px;
	background-color: @lightGray;
	@media (min-width: 960px){
		padding: 25px 50px;
	}
	.button{
		display: block;
		@media (max-width: 640px){
			margin-top: 15px;
		}
	}
	h1{
		text-align: center;
		@media (min-width: 640px){
			font-size: 20px;
		}
		@media (min-width: 750px){
			font-size: 32px;
		}
		@media (min-width: 960px){
			font-size: 40px;
		}
	}
	.icon{
		&.arrowRight{
			cursor: pointer;
			margin-left:5px;
		}
		&.arrowLeft{
			cursor: pointer;
			margin-right:5px;
		}
	}
}
.approvedHeader{
	h1{
		margin-bottom: 75px;
		@media (max-width: 640px){
			margin-bottom: 25px;
		}
	}
}
/*--Shift Search Bar*/
.shiftSeachWrap{
	position: relative;
	.shiftSearch{
		width: 100%;
		height: 75px;
		padding: 25px 25px 25px 55px;
		border-top: none;
		border-left: none;
		border-right: none;
		border-bottom: 2px solid #e5e9f2;
		font-family: @montserratBold;
		font-size: 20px;
		color: @darkPurple;
		background: url('../imgs/search.png') 25px center no-repeat;
		background-size: 20px;
		&::-webkit-input-placeholder {
		  color: #e5e9f2;
		}
		&::-moz-placeholder {
		  color: #e5e9f2;
		}
		&:-ms-input-placeholder {
		  color: #e5e9f2;
		}
		&:-moz-placeholder {
		  color: #e5e9f2;
		}
		@media (min-width: 960px){
			padding: 25px 50px 25px 80px;
			background: url('../imgs/search.png') 50px center no-repeat;
			background-size: 20px;
		}
	}
	.searchResults{
		display: none;
		top:70px;
		left: 0px;
		-webkit-box-shadow: 35px 35px 127px 3px rgba(0,0,0,0.20);
		-moz-box-shadow: 35px 35px 127px 3px rgba(0,0,0,0.20);
		box-shadow: 35px 35px 127px 3px rgba(0,0,0,0.20);
		@media (min-width: 640px){
			top:90px;
			left: 50px;
		}
	}
}
.searchResults,
.modal{
	height: auto;
	position: absolute;
	z-index: 1;
	padding: 50px;
	border: 1px solid @lightPurpleGray;
	background: @white;
	.border-radius-small;
	.icon{
		&.remove{
			height: 30px;
			width: 30px;
			position: absolute;
			right: 15px;
			top:15px;
			&:hover{
				opacity: 0.5;
				cursor: pointer;
			}
		}
	}
	h4{
		margin:15px 0px 8px;
		&:first-of-type{
			margin-top: 0px;
		}
	}
	.avatar{
		width:25px;
		height: 25px;
		background-color: #cccccc;
		background-image: url('../imgs/avatarIcon.png');
		background-position: center bottom;
		background-size: 80%;
		background-repeat: no-repeat;
		margin-right: 10px;
		.border-radius-circle;
	}
	p{
		font-family: 'Montserrat Bold';
	    font-size: 12px;
	    color: @darkPurple;
	    font-weight: 700;
	}
	.results{
		padding: 5px;
		&:hover{
			background: @lightGray;
			cursor: pointer;
		}
	}
}
/*--Shift list*/
.shiftList{
	padding: 25px 20px 20px 20px;
	-webkit-flex: 0 0 auto;
	-moz-flex: 0 0 auto;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	@media (min-width: 1200px){
		padding: 25px 50px 50px 50px;
	}
	h4{
		margin:0px 0px 5px 0px;
		@media (min-width: 960px){
			margin:0px 0px 5px 45px;
		}
		&.uk-hidden\@m{
			font-family: 'Montserrat';
			font-weight: 400;
			@media (max-width: 960px){
				-webkit-align-self:flex-start;
				-moz-align-self:flex-start;
				-ms-align-self:flex-start;
				align-self:flex-start;
			}
		}
	}
	.spacer{
		@media (min-width: 960px){
			-webkit-flex-basis: 315px;
			-moz-flex-basis: 315px;
			-ms-flex-basis: 315px;
			flex-basis: 315px;
			max-width: 315px;
			min-width: 315px;
		}
	}
	.shift-options{
		margin: 0px 0px 20px;
		@media (min-width: 960px){
			margin: 0px 0px 20px 45px;
		}
		.spacer{
			margin-bottom: 20px;
			@media (min-width: 640px){
				-webkit-flex-basis: 270px;
				-moz-flex-basis: 270px;
				-ms-flex-basis: 270px;
				flex-basis: 270px;
				max-width: 270px;
				min-width: 270px;
				margin: 0px;
			}
		}
		select{
			padding: 3px 10px;
		    height: 28px;
		    font-size: 13px;
		    line-height: normal;
		    width: 100%;
		    @media (min-width: 640px){
				width: 50%;
			}
		}
		h5{
			margin-bottom: 10px;
		}
	}
	.header{
		max-width: 755px;
		&:last-of-type{
			max-width: 330px;
			.uk-flex{
				@media (max-width: 1200px){
					-webkit-flex: 1 1 90px;
					-moz-flex: 1 1 90px;
					-ms-flex: 1 1 90px;
					flex: 1 1 90px;
					max-width: 90px;
				}
			}
		}
		h4{
			margin: 0px;
			font-family: @montserrat;
			font-weight: 400;
		}
		.uk-flex{
			-webkit-flex: 1 1 110px;
			-moz-flex: 1 1 110px;
			-ms-flex: 1 1 110px;
			flex: 1 1 110px;
			max-width: 110px;
		}
		h4{
			margin-top: 6px;
		}
	}
	.icon{
		&.remove{
			margin: 0px 15px 0px 0px;
			opacity: 0.75;
			width: 30px;
			height: 30px;
			&:hover{
				opacity: 1;
				cursor: pointer;
			}
		}
		&.downArrow{
			margin: 0px 5px;
			width: 12px;
			height: auto;
			background-size: contain;
		}
	}
	.card{
		padding: 10px;
		min-width: 250px;
		border: 1px solid @lightPurpleGray;
		margin:0px 0px 15px 0px;
		white-space: nowrap;
		overflow: hidden;
		.border-radius-small;
		@media (min-width: 960px){
			margin:0px 20px 5px 0px;
		}
		h2{
			font-size: 16px;
		}
		h3{
			font-size: 12px;
			text-transform: capitalize;
		}
	}
	.avatar{
		width:50px;
		height: 50px;
		background-color: #cccccc;
		background-image: url('../imgs/avatarIcon.png');
		background-position: center bottom;
		background-size: 80%;
		background-repeat: no-repeat;
		margin-right: 10px;
		.border-radius-circle;
	}
	input[type="text"]{
		padding: 10px 5px;
		border: 1px solid @lightPurpleGray;
		color: @darkPurple;
		font-family: @montserratBold;
		font-size: 14px;
		width: 95%;
		height: 45px;
		margin-right: 5%;
		.border-radius-small;
		@media (min-width: 960px){
			width: 100%;
			max-width: 100px;
			margin-right: 10px;
		}
		@media (max-width: 960px){
			&.last{
				margin-right: 0px;
				width: 100%;
			}
		}
	}
	.totals{
		@media (max-width: 960px){
			width: 100%;
			margin-top: 15px;
			margin-bottom: 30px;
			> div{
				div{
					-webkit-flex:0 1 25%;
					-moz-flex:0 1 25%;
					-ms-flex:0 1 25%;
					flex:0 1 25%;
				}
			}
		}
		h2{
			width: 110px;
			@media (max-width: 1200px){
				font-size: 16px;
				width: 90px;
			}
		}
	}
	.button{
		width: 100%;
		margin: 0px 0px 30px;
		@media (min-width: 640px){
			width: 50%;
			margin: 0px auto 30px;
		}
		@media (min-width: 960px){
			margin: 10px 0px 30px 45px;
			width: auto;
		}
		&#set-formula{
			margin:0px;
			width: 100%;
			@media (min-width: 640px){
				width: 50%;
			}
		}
	}
}
/*--Shift Summary*/
.shiftSummary,
.shiftSummaryTotals{
	padding: 50px;
	border-bottom: 3px solid @lightPurpleGray;
	-webkit-flex:0 0 auto;
	-moz-flex:0 0 auto;
	-ms-flex:0 0 auto;
	flex:0 0 auto;
	@media (min-width: 1200px){
		padding: 50px 100px;
	}
	.avatar{
		width:25px;
		height: 25px;
		background-color: #cccccc;
		background-image: url('../imgs/avatarIcon.png');
		background-position: center bottom;
		background-size: 80%;
		background-repeat: no-repeat;
		margin-right: 10px;
		.border-radius-circle;
	}
	.header,
	.table{
		margin-bottom: 10px;
		-webkit-flex-wrap:wrap;
		-moz-flex-wrap:wrap;
		-ms-flex-wrap:wrap;
		flex-wrap:wrap;
		@media (min-width: 960px){
			-webkit-flex-wrap:nowrap;
			-moz-flex-wrap:nowrap;
			-ms-flex-wrap:nowrap;
			flex-wrap:nowrap;
		}
		> div{
			-webkit-flex:1 1 50%;
			-moz-flex:1 1 50%;
			-ms-flex:1 1 50%;
			flex:1 1 50%;
			@media (min-width: 640px){
				-webkit-flex:1 1 25%;
				-moz-flex:1 1 25%;
				-ms-flex:1 1 25%;
				flex:1 1 25%;
			}
			@media (min-width: 960px){
				-webkit-flex:1 1 0;
				-moz-flex:1 1 0;
				-ms-flex:1 1 0;
				flex:1 1 0;
			}
			@media (max-width: 960px){
				margin-bottom: 10px;
			}
			&:first-of-type{
				-webkit-flex-wrap:nowrap;
				-moz-flex-wrap:nowrap;
				-ms-flex-wrap:nowrap;
				flex-wrap:nowrap;
				-webkit-flex:1 1 100%;
				-moz-flex:1 1 100%;
				-ms-flex:1 1 100%;
				flex:1 1 100%;
				@media (min-width: 960px){
					-webkit-flex:2 1 0;
					-moz-flex:2 1 0;
					-ms-flex:2 1 0;
					flex:2 1 0;
				}
				@media (max-width: 960px){
					-webkit-justify-content: center;
					-moz-justify-content: center;
					-ms-justify-content: center;
				    justify-content: center;
				}
			}
		}
	}
	h2{
		font-size: 14px;
	}
	&.review{
		.table{
			padding:5px 3px;
			margin-bottom: 0px;
			input{
				&.cash,
				&.cred{
					height: 25px;
					padding: 3px;
					width: 90%;
				}
			}
			&:hover,
			&.active{
				background-color: @lightGrayHover;
				cursor: pointer;
				.avatar{
					position: relative;
					&:before{
						content: '';
						display: block;
						position: absolute;
						width: 20px;
						height: 20px;
						background: url('../imgs/editSummary.png') 0px 0px no-repeat;
						background-size:20px;
						top:3px;
						left: -30px;
						padding-right: 10px;
					}
				}
			}
		}
		&.editMode{
			.table{
				&:hover{
					background-color: white;
					cursor: default;
					.avatar{
						&:before{
							display: none;
						}
					}
				}
				&.active{
					&:hover{
						background-color: @lightGrayHover;
						.avatar{
							&:before{
								display: block;
							}
						}
					}
				}
			}
		}
	}
}
.shiftSummaryTotals{
	border-bottom: none;
	padding: 25px;
	@media (min-width: 1200px){
		padding: 50px 100px;
	}
}
/*Shift Approve*/
.shiftApprove{
	@media (max-width: 960px){
		padding-bottom: 150px;
	}
	.button{
		display: block;
		margin-bottom:50px;
		@media (max-width: 960px){
			position: fixed;
			bottom:0px;
		}
		@media (max-width: 640px){
			width: 90%;
		}
	}
}

/*Employees
--Add New Employee Header*/
.employeeHeader{
	padding: 25px;
	background-color: @lightGray;
	@media (min-width: 960px){
		padding: 100px;
	}
	@media (max-width: 640px){
		.button{
			margin-top: 15px;
		}
	}
}
/*--Employee List*/
.employees{
	padding: 25px;
	-webkit-flex: 0 0 auto;
	-moz-flex: 0 0 auto;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	@media (min-width: 960px) {
		padding: 100px;
	}
	h4{
		margin-bottom: 20px;
		margin-top: 25px;
	}
	.employee{
		padding: 10px;
		border: 1px solid @lightPurpleGray;
		margin:0px 0px 15px 0px;
		white-space: nowrap;
		overflow: hidden;
		.border-radius-small;
		@media (min-width: 960px){
			margin:0px 20px 5px 0px;
		}
		&:hover{
			cursor: pointer;
			background-color: @lightGray;
		}
		.avatar{
			width:50px;
			height: 50px;
			background-color: #cccccc;
			background-image: url('../imgs/avatarIcon.png');
			background-position: center bottom;
			background-size: 80%;
			background-repeat: no-repeat;
			margin-right: 10px;
			.border-radius-circle;
		}
		h2{
			font-size: 16px;
		}
		.icon{
			&.move{
				width: 15px;
				height: 15px;
			}
		}
	}
}

/*Setup*/
.setup{
	background: @purple;
	padding: 25px;
	@media (min-width: 960px){
		padding: 0px;
	}
	@media (min-width: 850px){
		-webkit-justify-content: center;
		-moz-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
	}
	@media (max-height: 850px)and(min-width:1024px){
		height: auto !important;
	}
	.card{
		background: @white;
		-webkit-flex:0 0 auto;
		-moz-flex:0 0 auto;
		-ms-flex:0 0 auto;
		flex:0 0 auto;
		.border-radius-small;
		@media (max-height: 850px)and(min-width:1024px){
			margin: 100px 0px;
		}
		a{
			font-family: 'Montserrat';
			font-size: 13px;
			color: @mediumPurpleGray;
			&:hover{
				color: @darkPurple;
			}
			&.button{
				color: @white;
				display: block;
			}
		}
		.upload{
			margin-bottom: 25px;
			-webkit-align-items:center;
			-moz-align-items:center;
			-ms-align-items:center;
			align-items:center;
			@media (min-width: 640px){
				padding-right: 50px;
				margin-bottom: 0px;
			}
			.icon{
				&.photoUpload{
					width: 115px;
					height: 115px;
				}
			}
			.button{
				margin: 15px 0px;
			}
		}
		.header{
			padding: 40px 25px;
			background: @lightGray;
			position: relative;
			-webkit-border-top-left-radius: 7px;
		    -moz-border-top-left-radius: 7px;
		    border-top-left-radius: 7px;
		    -webkit-border-top-right-radius: 7px;
		    -moz-border-top-right-radius: 7px;
		    border-top-right-radius: 7px;
			h1{
				font-size: 21px;
				position: relative;
				z-index: 1;
			}
			h2{
				position: absolute;
			    top: 50%;
			    margin-top: -45px;
			    z-index: 0;
				color: #f0f2f7;
				font-size: 72px;
				opacity: 0.8;
			}
		}
		.body{
			padding:40px 25px 0px;
			@media (min-width: 640px){
				padding:40px 75px 0px;
			}
			h3{
				font-family: 'Montserrat Bold';
				font-size: 11px;
				margin-bottom: 10px;
			}
			h5{
				font-size: 16px;
				margin-bottom: 30px;
			}
			h6{
				font-family: @montserrat;
				color: @mediumPurpleGray;
				font-weight: 300;
				margin-bottom: 15px;
				margin-left: 10px;
			}
		}
		.introCopy{
			h4{
				color: @darkPurple;
				font-size: 14px;
				padding: 0px 25px 25px;
				text-align: center;
				text-transform: capitalize;
			}
		}
		input[type="text"],
		input[type="password"]{
			padding: 10px 5px;
			border: 2px solid @lightPurpleGray;
			font-family: @montserrat;
			font-size: 15px;
			color: @mediumPurpleGray;
			font-weight: 400;
			width: 100%;
			height: 45px;
			margin-bottom: 15px;
			.border-radius-small;
		}
		select{
			margin-bottom: 15px;
			padding: 11px 35px 11px 10px;
		}
		input[type="checkbox"]{
			margin-bottom: 15px;
		}
		.badgeWrap{
			input{
				width: 100%;
				width: calc(100% - 10px);
				margin-bottom: 30px;
				padding: 25px 25px 25px 15px;
				border: 2px solid #e5e9f2;
				font-family: @montserrat;
				font-size: 16px;
				color: @darkPurple;
				background: url('../imgs/leftSelectArrow.png') right 10px center no-repeat;
				background-size: 20px;
				.border-radius-small;
				&::-webkit-input-placeholder {
				  color: #e5e9f2;
				}
				&::-moz-placeholder {
				  color: #e5e9f2;
				}
				&:-ms-input-placeholder {
				  color: #e5e9f2;
				}
				&:-moz-placeholder {
				  color: #e5e9f2;
				}
				@media (min-width: 640px){
					padding: 25px 50px 25px 25px;
					background: url('../imgs/leftSelectArrow.png') right 25px center no-repeat;
					background-size: 20px;
				}
			}
		}
		.footer{
			padding:50px 25px;
			@media (min-width: 640px){
				padding:50px 75px;
			}
			a{
				@media (max-width: 640px){
					margin-top: 25px;
				}
			}
		}
	}
}
/*Edit*/
.newEdit{
	padding: 50px 25px;
	background-color: @lightGray;
	position: relative;
	@media (min-width: 960px) {
		padding: 100px;
	}
	.button{
		@media (max-width: 640px) {
			margin-top: 15px;
			&.dropShadow{
				-webkit-box-shadow:none;
				box-shadow: none;
			}
		}
	}
}
.editableContent{
	padding: 50px 25px;
	@media (min-width: 640px){
		padding: 100px 25px;
	}
	@media (min-width: 960px) {
		padding: 100px;
	}
	h4{
		margin-bottom: 25px;
	}
	.formula{
		h4{
			margin-bottom: 0px;
		}
	}
	h3{
		margin-bottom: 5px;
	}
	.button{
		&.small{
		    width: 130px;
		    margin: 0 0 20px;
		}
	}
	.icon.photoUpload{
	    width: 75px;
		height: 75px;
		margin: 0 auto 10px;
	}
	input,
	select{
		margin-bottom: 15px;
	}
	.button{
		margin-top: 25px;
		margin-bottom: 15px;
		@media (max-width: 640px) {
			margin-top: 15px;
			margin-bottom: 25px;
		}
	}
	.avatar{
		width: 75px;
		height: 75px;
		background: url('../imgs/girlHeadshot.jpg') 0px 0px no-repeat;
		background-size: cover;
		margin:0 26px 10px;
		.border-radius-circle;
	}
}

/*Flex*/
.uk-flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.uk-flex-inline {
  display: -webkit-inline-flex;
  display: inline-flex;
}
.uk-flex::before,
.uk-flex::after,
.uk-flex-inline::before,
.uk-flex-inline::after {
  display: none;
}
/*--Alignment*/
.uk-flex-left {
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
.uk-flex-center {
  -webkit-justify-content: center;
justify-content: center;
}
.uk-flex-right {
  -webkit-justify-content: flex-end;
justify-content: flex-end;
}
.uk-flex-between {
  -webkit-justify-content: space-between;
justify-content: space-between;
}
.uk-flex-around {
  -webkit-justify-content: space-around;
justify-content: space-around;
}
/*----Phone landscape and bigger */
@media (min-width: 640px) {
  .uk-flex-left\@s {
    -webkit-justify-content: flex-start;
justify-content: flex-start;
  }
  .uk-flex-center\@s {
    -webkit-justify-content: center;
justify-content: center;
  }
  .uk-flex-right\@s {
    -webkit-justify-content: flex-end;
justify-content: flex-end;
  }
  .uk-flex-between\@s {
    -webkit-justify-content: space-between;
justify-content: space-between;
  }
  .uk-flex-around\@s {
    -webkit-justify-content: space-around;
justify-content: space-around;
  }
}
/*----Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-flex-left\@m {
    -webkit-justify-content: flex-start;
justify-content: flex-start;
  }
  .uk-flex-center\@m {
    -webkit-justify-content: center;
justify-content: center;
  }
  .uk-flex-right\@m {
    -webkit-justify-content: flex-end;
justify-content: flex-end;
  }
  .uk-flex-between\@m {
    -webkit-justify-content: space-between;
justify-content: space-between;
  }
  .uk-flex-around\@m {
    -webkit-justify-content: space-around;
justify-content: space-around;
  }
}
/*----Desktop and bigger */
@media (min-width: 1200px) {
  .uk-flex-left\@l {
    -webkit-justify-content: flex-start;
justify-content: flex-start;
  }
  .uk-flex-center\@l {
    -webkit-justify-content: center;
justify-content: center;
  }
  .uk-flex-right\@l {
    -webkit-justify-content: flex-end;
justify-content: flex-end;
  }
  .uk-flex-between\@l {
    -webkit-justify-content: space-between;
justify-content: space-between;
  }
  .uk-flex-around\@l {
    -webkit-justify-content: space-around;
justify-content: space-around;
  }
}
/*----Large screen and bigger */
@media (min-width: 1600px) {
  .uk-flex-left\@xl {
    -webkit-justify-content: flex-start;
justify-content: flex-start;
  }
  .uk-flex-center\@xl {
    -webkit-justify-content: center;
justify-content: center;
  }
  .uk-flex-right\@xl {
    -webkit-justify-content: flex-end;
justify-content: flex-end;
  }
  .uk-flex-between\@xl {
    -webkit-justify-content: space-between;
justify-content: space-between;
  }
  .uk-flex-around\@xl {
    -webkit-justify-content: space-around;
justify-content: space-around;
  }
}
.uk-flex-stretch {
-webkit-align-items: stretch;
align-items: stretch;
}
.uk-flex-top {
  -webkit-align-items: flex-start;
align-items: flex-start;
}
.uk-flex-middle {
  -webkit-align-items: center;
align-items: center;
}
.uk-flex-bottom {
  -webkit-align-items: flex-end;
align-items: flex-end;
}
/*--Direction*/
.uk-flex-row {
  -webkit-flex-direction: row;
  flex-direction: row;
}
.uk-flex-row-reverse {
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.uk-flex-column {
  -webkit-flex-direction: column;
  flex-direction: column;
}
.uk-flex-column-reverse {
  -webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
}
/*----Phone landscape and bigger */
@media (min-width: 640px) {
  .uk-flex-row\@s {
    -webkit-flex-direction: row;
    flex-direction: row;
  }
  .uk-flex-column\@s {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}
/*----Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-flex-row\@m {
    -webkit-flex-direction: row;
    flex-direction: row;
  }
  .uk-flex-column\@m {
    -webkit-flex-direction: column;
	flex-direction: column;
  }
}
/*----Desktop and bigger */
@media (min-width: 1200px) {
  .uk-flex-row\@l {
    -webkit-flex-direction: row;
    flex-direction: row;
  }
  .uk-flex-column\@l {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}
/*----Large screen and bigger */
@media (min-width: 1600px) {
  .uk-flex-row\@xl {
    -webkit-flex-direction: row;
    flex-direction: row;
  }
  .uk-flex-column\@xl {
	-webkit-flex-direction: column;
    flex-direction: column;
  }
}
/*--Wrap*/
.uk-flex-nowrap {
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.uk-flex-wrap {
  -webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.uk-flex-wrap-reverse {
  -webkit-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.uk-flex-wrap-stretch {
-webkit-align-content: stretch;
align-content: stretch;
}
.uk-flex-wrap-top {
  -webkit-align-content: flex-start;
align-content: flex-start;
}
.uk-flex-wrap-middle {
  -webkit-align-content: center;
align-content: center;
}
.uk-flex-wrap-bottom {
  -webkit-align-content: flex-end;
align-content: flex-end;
}
.uk-flex-wrap-between {
  -webkit-align-content: space-between;
align-content: space-between;
}
.uk-flex-wrap-around {
  -webkit-align-content: space-around;
align-content: space-around;
}
/*--Item ordering*/
.uk-flex-first {
-webkit-order: -1;
order: -1;
}
.uk-flex-last {
  -webkit-order: 99;
order: 99;
}
/*----Phone landscape and bigger */
@media (min-width: 640px) {
  .uk-flex-first\@s {
    -webkit-order: -1;
order: -1;
  }
  .uk-flex-last\@s {
    -webkit-order: 99;
order: 99;
  }
}
/*----Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-flex-first\@m {
    -webkit-order: -1;
order: -1;
  }
  .uk-flex-last\@m {
    -webkit-order: 99;
order: 99;
  }
}
/*----Desktop and bigger */
@media (min-width: 1200px) {
  .uk-flex-first\@l {
    -webkit-order: -1;
order: -1;
  }
  .uk-flex-last\@l {
    -webkit-order: 99;
order: 99;
  }
}
/*----Large screen and bigger */
@media (min-width: 1600px) {
  .uk-flex-first\@xl {
    -webkit-order: -1;
order: -1;
  }
  .uk-flex-last\@xl {
    -webkit-order: 99;
order: 99;
  }
}
/*--Item dimensions*/
.uk-flex-none {
-webkit--webkit-flex: none;
flex: none;
-webkit-flex: none;
flex: none;
}
.uk-flex-auto {
  -webkit-flex: auto;
flex: auto;
}
.uk-flex-1 {
  -webkit-flex: 1;
flex: 1;
}
@media (max-width: 640px) {
  .uk-flex-1\@s {
	  -webkit-flex: 1;
flex: 1;
	}
}
@media (max-width: 960px) {
  .uk-flex-1\@m {
	  -webkit-flex: 1;
flex: 1;
	}
}
@media (max-width: 1200px) {
  .uk-flex-1\@l {
	  -webkit-flex: 1;
flex: 1;
	}
}
@media (max-width: 1600px) {
  .uk-flex-1\@xl {
	  -webkit-flex: 1;
flex: 1;
	}
}
@media (max-width: 640px) {
  .uk-flex-auto\@s {
	  -webkit-flex: auto;
flex: auto;
	}
}
@media (max-width: 960px) {
  .uk-flex-auto\@m {
	  -webkit-flex: auto;
flex: auto;
	}
}
@media (max-width: 1200px) {
  .uk-flex-auto\@l {
	  -webkit-flex: auto;
flex: auto;
	}
}
@media (max-width: 1600px) {
  .uk-flex-auto\@xl {
	  -webkit-flex: auto;
flex: auto;
	}
}
@media (max-width: 640px) {
  .uk-flex-none\@s {
	  -webkit-flex: none;
flex: none;
	}
}
@media (max-width: 960px) {
  .uk-flex-none\@m {
	  -webkit-flex: none;
flex: none;
	}
}
@media (max-width: 1200px) {
  .uk-flex-none\@l {
	  -webkit-flex: none;
flex: none;
	}
}
@media (max-width: 1600px) {
  .uk-flex-none\@xl {
	  -webkit-flex: none;
flex: none;
	}
}
/*Width*/
[class*='uk-child-width'] > * {
  box-sizing: border-box;
  width: 100%;
}
.uk-child-width-1-2 > * {
  width: 50%;
}
.uk-child-width-1-3 > * {
  width: calc(100% * 1 / 3.001);
}
.uk-child-width-1-4 > * {
  width: 25%;
}
.uk-child-width-1-5 > * {
  width: 20%;
}
.uk-child-width-1-6 > * {
  width: calc(100% * 1 / 6.001);
}
.uk-child-width-auto > * {
  width: auto;
}

.uk-child-width-expand > * {
  width: 1px;
}

.uk-child-width-expand > :not([class*='uk-width']) {
  -webkit-flex: 1;
flex: 1;
  min-width: 0;
  flex-basis: 1px;
}
/*--Phone landscape and bigger */
@media (min-width: 640px) {
  .uk-child-width-1-1\@s > * {
    width: 100%;
  }
  .uk-child-width-1-2\@s > * {
    width: 50%;
  }
  .uk-child-width-1-3\@s > * {
    width: calc(100% * 1 / 3.001);
  }
  .uk-child-width-1-4\@s > * {
    width: 25%;
  }
  .uk-child-width-1-5\@s > * {
    width: 20%;
  }
  .uk-child-width-1-6\@s > * {
    width: calc(100% * 1 / 6.001);
  }
  .uk-child-width-auto\@s > * {
    width: auto;
  }
  .uk-child-width-expand\@s > * {
    width: 1px;
  }
  .uk-child-width-expand\@s > :not([class*='uk-width']) {
    -webkit-flex: 1;
flex: 1;
    min-width: 0;
    flex-basis: 1px;
  }
}
/*--Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-child-width-1-1\@m > * {
    width: 100%;
  }
  .uk-child-width-1-2\@m > * {
    width: 50%;
  }
  .uk-child-width-1-3\@m > * {
    width: calc(100% * 1 / 3.001);
  }
  .uk-child-width-1-4\@m > * {
    width: 25%;
  }
  .uk-child-width-1-5\@m > * {
    width: 20%;
  }
  .uk-child-width-1-6\@m > * {
    width: calc(100% * 1 / 6.001);
  }
  .uk-child-width-auto\@m > * {
    width: auto;
  }
  .uk-child-width-expand\@m > * {
    width: 1px;
  }
  .uk-child-width-expand\@m > :not([class*='uk-width']) {
    -webkit-flex: 1;
flex: 1;
    min-width: 0;
    flex-basis: 1px;
  }
}
/*--Desktop and bigger */
@media (min-width: 1200px) {
  .uk-child-width-1-1\@l > * {
    width: 100%;
  }
  .uk-child-width-1-2\@l > * {
    width: 50%;
  }
  .uk-child-width-1-3\@l > * {
    width: calc(100% * 1 / 3.001);
  }
  .uk-child-width-1-4\@l > * {
    width: 25%;
  }
  .uk-child-width-1-5\@l > * {
    width: 20%;
  }
  .uk-child-width-1-6\@l > * {
    width: calc(100% * 1 / 6.001);
  }
  .uk-child-width-auto\@l > * {
    width: auto;
  }
  .uk-child-width-expand\@l > * {
    width: 1px;
  }
  .uk-child-width-expand\@l > :not([class*='uk-width']) {
    -webkit-flex: 1;
flex: 1;
    min-width: 0;
    flex-basis: 1px;
  }
}
/*--Large screen and bigger */
@media (min-width: 1600px) {
  .uk-child-width-1-1\@xl > * {
    width: 100%;
  }
  .uk-child-width-1-2\@xl > * {
    width: 50%;
  }
  .uk-child-width-1-3\@xl > * {
    width: calc(100% * 1 / 3.001);
  }
  .uk-child-width-1-4\@xl > * {
    width: 25%;
  }
  .uk-child-width-1-5\@xl > * {
    width: 20%;
  }
  .uk-child-width-1-6\@xl > * {
    width: calc(100% * 1 / 6.001);
  }
  .uk-child-width-auto\@xl > * {
    width: auto;
  }
  .uk-child-width-expand\@xl > * {
    width: 1px;
  }
  .uk-child-width-expand\@xl > :not([class*='uk-width']) {
    -webkit-flex: 1;
flex: 1;
    min-width: 0;
    flex-basis: 1px;
  }
}
/*--Single Widths*/
[class*='uk-width'] {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}
.uk-width-1-2 {
  width: 50%;
}
.uk-width-1-3 {
  width: calc(100% * 1 / 3.001);
}
.uk-width-2-3 {
  width: calc(100% * 2 / 3.001);
}
.uk-width-1-4 {
  width: 25%;
}
.uk-width-3-4 {
  width: 75%;
}
.uk-width-1-5 {
  width: 20%;
}
.uk-width-2-5 {
  width: 40%;
}
.uk-width-3-5 {
  width: 60%;
}
.uk-width-4-5 {
  width: 80%;
}
.uk-width-1-6 {
  width: calc(100% * 1 / 6.001);
}
.uk-width-5-6 {
  width: calc(100% * 5 / 6.001);
}
.uk-width-small {
  width: 150px;
}
.uk-width-medium {
  width: 300px;
}
.uk-width-large {
  width: 450px;
}
.uk-width-xlarge {
  width: 600px;
}
.uk-width-xxlarge {
  width: 750px;
}
.uk-width-auto {
  width: auto;
}
.uk-width-expand {
  width: 1px;
  -webkit-flex: 1;
flex: 1;
  min-width: 0;
  flex-basis: 1px;
}
/*---Phone landscape and bigger */
@media (min-width: 640px) {
  .uk-width-1-1\@s {
    width: 100%;
  }
  .uk-width-1-2\@s {
    width: 50%;
  }
  .uk-width-1-3\@s {
    width: calc(100% * 1 / 3.001);
  }
  .uk-width-2-3\@s {
    width: calc(100% * 2 / 3.001);
  }
  .uk-width-1-4\@s {
    width: 25%;
  }
  .uk-width-3-4\@s {
    width: 75%;
  }
  .uk-width-1-5\@s {
    width: 20%;
  }
  .uk-width-2-5\@s {
    width: 40%;
  }
  .uk-width-3-5\@s {
    width: 60%;
  }
  .uk-width-4-5\@s {
    width: 80%;
  }
  .uk-width-1-6\@s {
    width: calc(100% * 1 / 6.001);
  }
  .uk-width-5-6\@s {
    width: calc(100% * 5 / 6.001);
  }
  .uk-width-small\@s {
    width: 150px;
  }
  .uk-width-medium\@s {
    width: 300px;
  }
  .uk-width-large\@s {
    width: 450px;
  }
  .uk-width-xlarge\@s {
    width: 600px;
  }
  .uk-width-xxlarge\@s {
    width: 750px;
  }
  .uk-width-auto\@s {
    width: auto;
  }
  .uk-width-expand\@s {
    width: 1px;
    -webkit-flex: 1;
flex: 1;
    min-width: 0;
    flex-basis: 1px;
  }
}
/*---Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-width-1-1\@m {
    width: 100%;
  }
  .uk-width-1-2\@m {
    width: 50%;
  }
  .uk-width-1-3\@m {
    width: calc(100% * 1 / 3.001);
  }
  .uk-width-2-3\@m {
    width: calc(100% * 2 / 3.001);
  }
  .uk-width-1-4\@m {
    width: 25%;
  }
  .uk-width-3-4\@m {
    width: 75%;
  }
  .uk-width-1-5\@m {
    width: 20%;
  }
  .uk-width-2-5\@m {
    width: 40%;
  }
  .uk-width-3-5\@m {
    width: 60%;
  }
  .uk-width-4-5\@m {
    width: 80%;
  }
  .uk-width-1-6\@m {
    width: calc(100% * 1 / 6.001);
  }
  .uk-width-5-6\@m {
    width: calc(100% * 5 / 6.001);
  }
  /* Pixel */
  .uk-width-small\@m {
    width: 150px;
  }
  .uk-width-medium\@m {
    width: 300px;
  }
  .uk-width-large\@m {
    width: 450px;
  }
  .uk-width-xlarge\@m {
    width: 600px;
  }
  .uk-width-xxlarge\@m {
    width: 750px;
  }
  .uk-width-auto\@m {
    width: auto;
  }
  .uk-width-expand\@m {
    width: 1px;
    -webkit-flex: 1;
flex: 1;
    min-width: 0;
    flex-basis: 1px;
  }
}
/*---Desktop and bigger */
@media (min-width: 1200px) {
  .uk-width-1-1\@l {
    width: 100%;
  }
  .uk-width-1-2\@l {
    width: 50%;
  }
  .uk-width-1-3\@l {
    width: calc(100% * 1 / 3.001);
  }
  .uk-width-2-3\@l {
    width: calc(100% * 2 / 3.001);
  }
  .uk-width-1-4\@l {
    width: 25%;
  }
  .uk-width-3-4\@l {
    width: 75%;
  }
  .uk-width-1-5\@l {
    width: 20%;
  }
  .uk-width-2-5\@l {
    width: 40%;
  }
  .uk-width-3-5\@l {
    width: 60%;
  }
  .uk-width-4-5\@l {
    width: 80%;
  }
  .uk-width-1-6\@l {
    width: calc(100% * 1 / 6.001);
  }
  .uk-width-5-6\@l {
    width: calc(100% * 5 / 6.001);
  }
  .uk-width-small\@l {
    width: 150px;
  }
  .uk-width-medium\@l {
    width: 300px;
  }
  .uk-width-large\@l {
    width: 450px;
  }
  .uk-width-xlarge\@l {
    width: 600px;
  }
  .uk-width-xxlarge\@l {
    width: 750px;
  }
  .uk-width-auto\@l {
    width: auto;
  }
  .uk-width-expand\@l {
    width: 1px;
    -webkit-flex: 1;
flex: 1;
    min-width: 0;
    flex-basis: 1px;
  }
}
/*----Large screen and bigger */
@media (min-width: 1600px) {
  .uk-width-1-1\@xl {
    width: 100%;
  }
  .uk-width-1-2\@xl {
    width: 50%;
  }
  .uk-width-1-3\@xl {
    width: calc(100% * 1 / 3.001);
  }
  .uk-width-2-3\@xl {
    width: calc(100% * 2 / 3.001);
  }
  .uk-width-1-4\@xl {
    width: 25%;
  }
  .uk-width-3-4\@xl {
    width: 75%;
  }
  .uk-width-1-5\@xl {
    width: 20%;
  }
  .uk-width-2-5\@xl {
    width: 40%;
  }
  .uk-width-3-5\@xl {
    width: 60%;
  }
  .uk-width-4-5\@xl {
    width: 80%;
  }
  .uk-width-1-6\@xl {
    width: calc(100% * 1 / 6.001);
  }
  .uk-width-5-6\@xl {
    width: calc(100% * 5 / 6.001);
  }
  .uk-width-small\@xl {
    width: 150px;
  }
  .uk-width-medium\@xl {
    width: 300px;
  }
  .uk-width-large\@xl {
    width: 450px;
  }
  .uk-width-xlarge\@xl {
    width: 600px;
  }
  .uk-width-xxlarge\@xl {
    width: 750px;
  }
  .uk-width-auto\@xl {
    width: auto;
  }
  .uk-width-expand\@xl {
    width: 1px;
    -webkit-flex: 1;
flex: 1;
    min-width: 0;
    flex-basis: 1px;
  }
}
/*Visibility*/
/*--Hidden*/
[hidden],
.uk-hidden {
  display: none !important;
}
/*----Phone landscape and bigger */
@media (min-width: 640px) {
  .uk-hidden\@s {
    display: none !important;
  }
}
/*----Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-hidden\@m {
    display: none !important;
  }
}
/*----Desktop and bigger */
@media (min-width: 1200px) {
  .uk-hidden\@l {
    display: none !important;
  }
}
/*----Large screen and bigger */
@media (min-width: 1600px) {
  .uk-hidden\@xl {
    display: none !important;
  }
}
/*--Visiable*/
/*----Phone portrait and smaller */
@media (max-width: 639px) {
  .uk-visible\@s {
    display: none !important;
  }
}
/*----Phone landscape and smaller */
@media (max-width: 959px) {
  .uk-visible\@m {
    display: none !important;
  }
}
/*----Tablet landscape and smaller */
@media (max-width: 1199px) {
  .uk-visible\@l {
    display: none !important;
  }
}
/*----Desktop and smaller */
@media (max-width: 1599px) {
  .uk-visible\@xl {
    display: none !important;
  }
}