*, *:before, *:after {
	box-sizing: border-box;
}

html {
	font-family: "Open sans", arial, sans-serif;
	overflow-x: hidden;
}
body {
	margin: 0;
	padding: 0;
	color: #3f3f3f;
	background-color: #fff;
}
div {
	padding: 0;
	margin: 0;
	overflow: hidden;
}

a {
	color: inherit;
}


@media screen and (min-width: 1px) {
	
	body {
		font-size: 18px;
		line-height: 26px;
	}
	
	
	/* container */
	html > body > div#container {
		width: 100%;
		margin-top: 50px;
	}
	
	html > body > div#container:not(.no_search) {
		margin-top: 107px;
	}


	/* header */
	
	html > body > div#container > div#header {
		width: 100%;
		background-color: #fff;
		position: fixed;
		top: 0px;
		box-shadow: 0px 0px 7px #ccc;
		z-index: 500;
	}
	html > body > div#container > div#header > div#menu_button {
		display: inline-block;
		vertical-align: top;
		height: 50px;
		width: 58px;
		cursor: pointer;
		background-image: url('../../imgs/icons/hamburger.png');
		background-repeat: no-repeat;
		background-position: center center;
	}
	html > body > div#container > div#header > a.logo {
		display: inline-block;
		vertical-align: top;
		width: 166px;
		border: 0px;
		outline: none;
		padding: 0px;
		transition: width 300ms ease-in;
	}
	html > body > div#container > div#header > a.logo > img {
		display: block;
		border: 0px;
		outline: none;
	}
	html > body > div#container > div#header > a.logo > img.aquadesq {
		width: 127px;
		height: 50px;
	}
	html > body > div#container > div#header > a.logo > img.vextpro {
		width: 121px;
		height: 50px;
	}
	html > body > div#container > div#header > a.logo > img.leaugistics {
		width: 172px;
		height: 19px;
		margin-top: 15px;
	}
	
	html > body > div#container > div#header > div.center {
		display: inline-block;
		vertical-align: top;
		width: calc(100% - 234px);
		height: 50px;
		margin: 0;
		padding: 0px;
		transition: width 300ms ease-in;
	}
	html > body > div#container > div#header > div.center > div.breadcrumb > a,
	html > body > div#container > div#header > div.center > div.user > a {
		color: inherit;
		text-decoration: none;
	}
	html > body > div#container > div#header > div.center > div.user > a > img.profile_pic {
		vertical-align: top;
		height: 38px;
		width: 38px;
		margin: 6px 0px 12px 10px;
		border-radius: 50%;
	}
	html > body > div#container > div#header > div.center > div.user > a.open_tasks {
		display: inline-block;
		color: #fff;
		font-weight: bold;
		background-color: #f66;
		padding: 0px 14px;
		margin: 6px 0px 6px 6px;
		border-radius: 6px;
		height: 38px;
		line-height: 38px;
	}
	html > body > div#container > div#header > div.center > div.user > a.open_tasks:hover {
		text-decoration: none;
	}
	html > body > div#container > div#header > div.center > div.breadcrumb > a:hover,
	html > body > div#container > div#header > div.center > div.user > a:hover {
		text-decoration: underline;
	}
	html > body > div#container > div#header > div.center > div.breadcrumb {
		display: none;
		vertical-align: top;
		height: 50px;
		line-height: 50px;
		white-space: nowrap;
		overflow: hidden;
		border: 0px;
		outline: none;
	}
	html > body > div#container > div#header > div.center > div.user {
		display: none;
		vertical-align: top;
		line-height: 50px;
		height: 50px;
		float: right;
		white-space: nowrap;
		overflow: hidden;
		border: 0px;
		outline: none;
	}
	html > body > div#container > div#header > div.searchbox {
		display: block;
		overflow: visible;
		height: 57px;
		padding: 0px 10px 9px 10px;
		border: 0px;
		outline: none;
		transition: width 300ms ease-in;
	}
	html > body > div#container > div#header > div.searchbox > input#search_field {
		width: 100%;
		padding: 10px 8px;
		border: 1px solid #ccc;
		font: inherit;
		background-image: url('../../imgs/icons/search.png');
		background-repeat: no-repeat;
		background-position-x: calc(100% - 8px);
		background-position-y: center;
		border-radius: 6px;
		outline: none;
		box-shadow: 0px 0px 7px 0px rgba(170,170,170,0.5);
		transition: width 300ms ease-in, background-position 300ms ease-in;
	}
	html > body > div#container > div#header > div.searchbox > input#search_field:focus,
	html > body > div#container > div#header > div.searchbox > input#search_field.active {
		border: 1px solid #666;
	}
	html > body > div#container > div#header > div.searchbox > input#search_field::-webkit-input-placeholder {
		color: #afafaf;
	}
	html > body > div#container > div#header > div.searchbox > input#search_field::-moz-placeholder {
		color: #afafaf;
	}
	html > body > div#container > div#header > div.searchbox > input#search_field:-ms-input-placeholder {
		color: #afafaf;
	}
	html > body > div#container > div#header > div.searchbox > input#search_field:-moz-placeholder {
		color: #afafaf;
	}
	
	
	
	/* menu */
	
	html > body > div#container > div#menu {
		display: block;
		position: fixed;
		top: 40px;
		left: 0px;
		padding: 10px 10px 10px 10px;
		width: 100%;
		transition: width 400ms cubic-bezier(0.6,0,0.3,1), padding 400ms cubic-bezier(0.6,0,0.3,1);
		z-index: 550;
		overflow-y: auto;
		max-height: calc(100% - 50px);
	}
	html > body > div#container > div#menu::-webkit-scrollbar { /* all new browser */
		width: 0 !important;
	}
	html > body > div#container > div#menu { /* firefox */
		overflow: -moz-scrollbars-none;
	}
	html > body > div#container > div#menu { /* IE 10+ */
		-ms-overflow-style: none;
	}
	
	html > body > div#container > div#menu > div#menu-c {
		background-color: #fff;
		box-shadow: 0px 0px 7px #ccc;
		border-radius: 6px;
		overflow: visible;
	}
	
	html > body > div#container > div#menu > div#menu-c div.menu_item,
	html > body > div#container > div#menu > div#menu-c div.menu_subgroup > a.menu_item,
	html > body > div#container > div#menu > div#menu-c div.menu_subgroup > div.menu_item {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		background-color: #fff;
		line-height: 46px;
		padding: 0px 10px;
		border-bottom: 1px solid #ddd;
		border-radius: 6px;
		outline: none;
		white-space: nowrap;
		transition: background-color 400ms ease-in;
		
		-webkit-touch-callout: none; /* iOS Safari */
		-webkit-user-select: none; /* Safari */
		-khtml-user-select: none; /* Konqueror HTML */
		-moz-user-select: none; /* Firefox */
		-ms-user-select: none; /* Internet Explorer/Edge */
		user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
		
		user-drag: none; 
		user-select: none;
		-moz-user-select: none;
		-webkit-user-drag: none;
		-webkit-user-select: none;
		-ms-user-select: none;
	}
	
	html > body > div#container > div#menu > div#menu-c div.menu_item:not(.selected),
	html > body > div#container > div#menu > div#menu-c div.menu_subgroup > a.menu_item,
	html > body > div#container > div#menu > div#menu-c div.menu_subgroup > div.menu_item:not(.selected) {
		cursor: pointer;
	}
	
	html > body > div#container > div#menu > div#menu-c div.menu_item > img {
		user-drag: none; 
		user-select: none;
		-moz-user-select: none;
		-webkit-user-drag: none;
		-webkit-user-select: none;
		-ms-user-select: none;
	}
	html > body > div#container > div#menu > div#menu-c div.menu_item:not(.selected):hover,
	html > body > div#container > div#menu > div#menu-c div.menu_subgroup > a.menu_item:hover,
	html > body > div#container > div#menu > div#menu-c div.menu_subgroup > div.menu_item:not(.selected):hover {
		border-left: 3px solid #999999;
		border-right: 3px solid #999999;
		padding: 5px 10px 5px 10px;
		margin-top: -5px;
		margin-bottom: -5px;
		z-index: 110;
		box-shadow: 0 0 5px #999;
		position: relative;
		top: 0px;
		left: -3px;
		width: calc(100% + 5px);
	}
	
	
	html > body > div#container > div#menu > div#menu-c > div.menu_item.opened,
	html > body > div#container > div#menu > div#menu-c > div.menu_subgroup > div.menu_item.opened,
	html > body > div#container > div#menu > div#menu-c > div.menu_subgroup > div.menu_subgroup > div.menu_item.opened {
		background-color: #f0f0f0;
	}
	
	html > body > div#container > div#menu > div#menu-c div.menu_subgroup {
		overflow: visible;
	}
	html > body > div#container > div#menu > div#menu-c div.menu_subgroup > a.menu_item {
		text-decoration: none;
		color: inherit;
	}
	html > body > div#container > div#menu > div#menu-c div.menu_subgroup > a.menu_item,
	html > body > div#container > div#menu > div#menu-c div.menu_subgroup > div.menu_item {
		opacity: 1;
		transition: line-height 400ms cubic-bezier(0.6,0,0.3,1), opacity 400ms cubic-bezier(0.6,0,0.3,1);
	}
	html > body > div#container > div#menu > div#menu-c > div.menu_subgroup > a.menu_item,
	html > body > div#container > div#menu > div#menu-c > div.menu_subgroup > a.menu_item:not(.selected):hover,
	html > body > div#container > div#menu > div#menu-c > div.menu_subgroup > div.menu_item,
	html > body > div#container > div#menu > div#menu-c > div.menu_subgroup > div.menu_item:not(.selected):hover {
		padding-left: 60px;
	}
	html > body > div#container > div#menu > div#menu-c > div.menu_subgroup > div.menu_subgroup > a.menu_item,
	html > body > div#container > div#menu > div#menu-c > div.menu_subgroup > div.menu_subgroup > a.menu_item:hover,
	html > body > div#container > div#menu > div#menu-c > div.menu_subgroup > div.menu_subgroup > div.menu_item,
	html > body > div#container > div#menu > div#menu-c > div.menu_subgroup > div.menu_subgroup > div.menu_item:hover {
		padding-left: 80px;
	}
	html > body > div#container > div#menu > div#menu-c > div.menu_subgroup > div.menu_item:not(.selected) {
		background-image: url('../../imgs/icons/flat_arrow_down.png');
		background-repeat: no-repeat;
		background-position: 34px 50%;
		background-size: 15px;
	}
	html > body > div#container > div#menu > div#menu-c > div.menu_subgroup > div.menu_subgroup > div.menu_item:not(.selected) {
		background-image: url('../../imgs/icons/flat_arrow_down.png');
		background-repeat: no-repeat;
		background-position: 52px 50%;
		background-size: 15px;
	}
	
	
	html > body > div#container > div#menu > div#menu-c > div.menu_subgroup > div.menu_item.selected,
	html > body > div#container > div#menu > div#menu-c > div.menu_subgroup > div.menu_subgroup > div.menu_item.selected,
	html > body > div#container > div#menu > div#menu-c > div.menu_subgroup > div.menu_subgroup > div.menu_subgroup > div.menu_item.selected {
		border-left: 3px solid rgb(18, 170, 225);
		border-right: 3px solid rgb(18, 170, 225);
	}
	html > body > div#container > div#menu > div#menu-c > div.menu_subgroup > div.menu_item.selected {
		padding-left: 57px;
	}
	html > body > div#container > div#menu > div#menu-c > div.menu_subgroup > div.menu_subgroup > div.menu_item.selected {
		padding-left: 77px;
	}
	html > body > div#container > div#menu > div#menu-c > div.menu_subgroup > div.menu_subgroup > div.menu_subgroup > div.menu_item.selected {
		padding-left: 97px;
	}
	
	
	/* lvl 4 */
	
	html > body > div#container > div#menu > div#menu-c > div.menu_subgroup > div.menu_subgroup > div.menu_subgroup > a.menu_item,
	html > body > div#container > div#menu > div#menu-c > div.menu_subgroup > div.menu_subgroup > div.menu_subgroup > a.menu_item:hover,
	html > body > div#container > div#menu > div#menu-c > div.menu_subgroup > div.menu_subgroup > div.menu_subgroup > div.menu_item,
	html > body > div#container > div#menu > div#menu-c > div.menu_subgroup > div.menu_subgroup > div.menu_subgroup > div.menu_item:hover {
		padding-left: 80px;
	}
	html > body > div#container > div#menu > div#menu-c > div.menu_subgroup > div.menu_subgroup > div.menu_item.selected,
	html > body > div#container > div#menu > div#menu-c > div.menu_subgroup > div.menu_subgroup > div.menu_subgroup > div.menu_item.selected,
	html > body > div#container > div#menu > div#menu-c > div.menu_subgroup > div.menu_subgroup > div.menu_subgroup > div.menu_subgroup > div.menu_item.selected {
		border-left: 3px solid rgb(18, 170, 225);
		border-right: 3px solid rgb(18, 170, 225);
	}
	html > body > div#container > div#menu > div#menu-c > div.menu_subgroup > div.menu_subgroup > div.menu_item.selected {
		padding-left: 57px;
	}
	html > body > div#container > div#menu > div#menu-c > div.menu_subgroup > div.menu_subgroup > div.menu_subgroup > div.menu_item.selected {
		padding-left: 77px;
	}
	html > body > div#container > div#menu > div#menu-c > div.menu_subgroup > div.menu_subgroup > div.menu_subgroup > div.menu_subgroup > div.menu_item.selected {
		padding-left: 97px;
	}
	
	
	
	html > body > div#container > div#menu > div#menu-c div.menu_subgroup > a.menu_item.hidden,
	html > body > div#container > div#menu > div#menu-c div.menu_subgroup > div.menu_item.hidden {
		overflow: hidden;
		opacity: 0;
		line-height: 0px;
		border-bottom: 0px;
	}
	
	html > body > div#container > div#menu > div#menu-c > div.menu_subgroup > div.menu_item:nth-last-of-type(1) {
/*		border-color: #a0a0a0; */
	}
	
	
	/* search box */
	
	html > body > div#container > div#search_results {
		display: block;
		width: calc(100% - 20px);
		overflow: visible;
		position: fixed;
		top: 100px;
		right: 0px;
		border: 1px solid #ccc;
		padding: 0px;
		margin: 0px 10px 0px 10px;
		background-color: #fff;
		box-shadow: 0px 0px 7px #ccc;
		white-space: nowrap;
		transition: min-width 300ms ease-in;
		z-index: 520;
	}
	
	html > body > div#container > div#search_results > div.result {
		padding: 10px;
		background-color: #fff;
		border-bottom: 1px solid #ddd;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		cursor: pointer;
	}
	html > body > div#container > div#search_results > div.result:nth-last-child(1) {
		border-bottom: 0px;
	}
	html > body > div#container > div#search_results > div.result.active,
	html > body > div#container > div#search_results > div.result:hover {
		border-left: 3px solid #999999;
		padding: 15px 12px 15px 10px;
		margin-top: -5px;
		margin-bottom: -5px;
		z-index: 210;
		box-shadow: 0 0 5px #999;
		position: relative;
		top: 0px;
		left: -3px;
		width: calc(100% + 5px);
	}
	
	
	html > body > div#container > div#content div.data_list > div.data_row > div.value > div#account_search_results {
		display: block;
		min-width: 300px;
		overflow: visible;
		position: absolute;
		border: 1px solid #ccc;
		padding: 0px;
		margin: 0px;
		background-color: #fff;
		box-shadow: 0px 0px 7px #ccc;
		white-space: nowrap;
		transition: min-width 300ms ease-in;
		z-index: 520;
	}
	
	html > body > div#container > div#content div.data_list > div.data_row > div.value > div#account_search_results > div.result {
		padding: 10px;
		background-color: #fff;
		border-bottom: 1px solid #ddd;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		cursor: pointer;
	}
	html > body > div#container > div#content div.data_list > div.data_row > div.value > div#account_search_results > div.result:nth-last-child(1) {
		border-bottom: 0px;
	}
	html > body > div#container > div#content div.data_list > div.data_row > div.value > div#account_search_results > div.result.active,
	html > body > div#container > div#content div.data_list > div.data_row > div.value > div#account_search_results > div.result:hover {
		border-left: 3px solid #999999;
		padding: 15px 7px 15px 10px;
		margin-top: -5px;
		margin-bottom: -5px;
		z-index: 210;
		box-shadow: 0 0 5px #999;
		position: relative;
		top: 0px;
		left: -3px;
		width: calc(100% + 5px);
	}
	
	
	
/*	html > body > div#container > div#search_results {
		display: block;
		position: fixed;
		top: 97px;
		right: 0px;
		padding: 0px;
		margin: 0px 10px 0px 10px;
		background-color: #fff;
		min-width: 380px;
		max-width: calc(100% - 20px);
		transition: width 100ms ease-in;
		z-index: 999;
		border: 1px solid #666;
		white-space: nowrap;
	}
*/
	
	/* content */
	
	html > body > div#container > div#content {
		display: block;
		overflow: visible;
		background-color: #fff;
		transition: width 400ms cubic-bezier(0.6,0,0.3,1), padding 400ms cubic-bezier(0.6,0,0.3,1), left 400ms cubic-bezier(0.6,0,0.3,1);
		padding: 10px 10px 10px 10px;
	}
	
	
	
	/* the full screen div that listens for clicks to close the menu */
	body > div#menu_bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 99;
	}
}


@media screen and (min-width: 500px) {
	
	html > body > div#container > div#menu {
		width: 400px;
		max-width: 100%;
	}
}


@media screen and (min-width: 800px) {
	
	/* change font size */
	
	body {
		font-size: 13px;
		line-height: 22px;
	}
	
	html > body > div#container:not(.no_search) {
		margin-top: 50px;
	}
	html > body > div#container > div#search_results {
		top: 44px;
		right: 0px;
		padding: 0px;
		margin: 0px 10px 0px 10px;
		background-color: #fff;
		width: auto;
		min-width: 180px;
		max-width: calc(100% - 20px);
	}
	
	
	html > body > div#container > div#header > div.center {
		display: inline-block;
		vertical-align: top;
		width: calc(100% - 424px);
		height: 50px;
		margin: 0;
		padding: 0px;
		transition: width 300ms ease-in;
	}
	html > body > div#container > div#header > div.center > div.user {
		display: inline-block;
	}
	
	
	/* change menu width */
	
	html > body > div#container > div#menu {
		display: inline-block;
		position: fixed;
		top: 50px;
		vertical-align: top;
		width: 225px;
		max-width: none;
/*		transition: width 400ms cubic-bezier(0.22, 0.61, 0.36, 1), padding 400ms cubic-bezier(0.22, 0.61, 0.36, 1); */
		z-index: auto;
	}
	html > body > div#container > div#content {
		display: inline-block;
		position: relative;
		left: 225px;
		width: calc(100% - 225px);
		vertical-align: top;
		overflow: visible;
		background-color: #fff;
		padding: 10px 10px 10px 0px;
	}
	
	
	html > body > div#container > div#header > div.searchbox {
		display: inline-block;
		vertical-align: top;
		width: 200px;
		height: 50px;
		padding: 8px 10px 8px 10px;
	}
	html > body > div#container > div#header > div.searchbox > input#search_field {
		padding: 5px 8px;
	}
	
	
}

@media screen and (min-width: 1050px) {
	
	/* change font size */
	
	body {
		font-size: 14px;
		line-height: 24px;
	}
	html > body > div#container > div#header > div.searchbox {
		padding: 7px 10px 7px 10px;
	}
	
	html > body > div#container > div#search_results {
		top: 45px;
	}
	
	
	html > body > div#container > div#header > div.center > div.breadcrumb {
		display: inline-block;
	}
	
	
	/* change menu width */
	
	html > body > div#container > div#menu {
		width: 240px;
	}
	html > body > div#container > div#content {
		left: 240px;
		width: calc(100% - 240px);
	}
	html > body > div#container > div#header > a.logo {
		width: 181px;
	}
	html > body > div#container > div#header > div.center {
		width: calc(100% - 539px);
	}
	
	
	/* change searchbox width */
	
	html > body > div#container > div#header > div.center {
		width: calc(100% - 439px);
	}
	html > body > div#container > div#header > div.searchbox {
		width: 200px;
	}
}

@media screen and (min-width: 1200px) {
	
	/* change menu width */
	
	html > body > div#container > div#menu {
		width: 274px;
	}
	html > body > div#container > div#content {
		left: 274px;
		width: calc(100% - 274px);
	}
	html > body > div#container > div#header > a.logo {
		width: 215px;
	}
	html > body > div#container > div#header > div.center {
		width: calc(100% - 573px);
	}
	html > body > div#container > div#header > div.searchbox {
		width: 300px;
	}
	html > body > div#container > div#search_results {
		min-width: 280px;
	}
	
	html > body > div#container > div#header > a.logo > img.leaugistics {
		width: 198px;
		height: 22px;
		margin-top: 13px;
	}
}

@media screen and (min-width: 1450px) {
	
	/* change searchbox width */
	
	html > body > div#container > div#header > div.center {
		width: calc(100% - 673px);
	}
	html > body > div#container > div#header > div.searchbox {
		width: 400px;
	}
	html > body > div#container > div#search_results {
		min-width: 380px;
	}
}

@media screen and (min-width: 1600px) {
	
	/* change font size */
	body {
		font-size: 15px;
		line-height: 26px;
	}
	html > body > div#container > div#header > div.searchbox {
		padding: 6px 10px 6px 10px;
	}
	html > body > div#container > div#search_results {
		top: 46px;
	}
	
	
	/* change menu width */
	
	html > body > div#container > div#menu {
		width: 289px;
	}
	html > body > div#container > div#content {
		left: 289px;
		width: calc(100% - 289px);
	}
	html > body > div#container > div#header > a.logo {
		width: 230px;
	}
	html > body > div#container > div#header > div.center {
		width: calc(100% - 688px);
	}
	
	
}