.ui-autocomplete {
	max-height: 240px;
	overflow-y: auto; /* prevent horizontal scrollbar */
	overflow-x: hidden;
	padding-right: 20px; /* add padding to account for vertical scrollbar */
}

#ui-datepicker-div { display: none; }

#Feedback {
	width				: 930px;
	margin-bottom		: 10px;
	min-height			: 20px;
}

body {
	margin				: 0px;
	background-color	: #fdfff7;
}

p {
	margin				: 0px 0px 10px 0px;
}

code {
	font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
	color:#4c5c99;
}

#Header {
	background			: -moz-linear-gradient(top, #444444, #222222);
	background			: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444444), color-stop(1, #222222));
	background-color	: #222222;

	border-bottom		: 4px solid #F36A22;
	position			: relative;
	height				: 65px;
	width: 100%;
}

#HeaderLogo {
	float				: left;
	width				: 110px; 
	text-align			: center;
}
#HeaderLogo img {
	margin-top			: 10px;
}
#HeaderLogo span {
	color				: #dee8f1;
	font-size			: 13px;
	letter-spacing		: 2px;
}

#HeaderLoginInfo {
	float				: right;
	text-align			: right;
	color				: #ffffff;
}
#HeaderLoginInfo a {
	color				: #ffffff;
	text-decoration		: none;
	font-weight			: normal;
}
#HeaderLoginInfo a:hover {
	text-decoration		: underline;	
}

.center-area {
	width				: 1200px;
	margin				: 0px auto;
}

#Content {
	background			: url(/images/admin_header_shadow.gif) repeat-x;
}



.layout-header { margin-bottom:40px; }
.layout-header h1 { font-family:tahoma,arial,sans-serif; font-weight:normal; font-size:20px; color:#F36A22; margin-top:0; margin-bottom:4px;}
.layout-header-backlink { display:flex; justify-content:center; align-items:center; width:20px; height:20px; font-family:tahoma,arial,sans-serif; font-weight:normal; font-size:14px; color:#aa9988; text-decoration:none; margin-right:10px; border:1px solid #aa9988; border-radius:50px; }
.layout-header-backlink:hover { color:#000000; border-color:#000000; }

.layout { display:flex; flex-wrap:nowrap; width:100%; }
.layout-sidenav { width:150px; margin-left:20px; margin-right:40px; flex-shrink:0; }
.layout-main { flex-grow:1; }




.page-header {
	margin:0 0 20px 0 !important;
}
.page-title {
	font-family: tahoma, arial, sans-serif; 
	font-size: 15px; 
	color: #334444;
	font-weight: normal;
}
.page-subtitle {
	font-family: tahoma, arial, sans-serif; 
	font-size: 13px; 
	color: #aa9988;
	font-weight: normal;
}




#AccountHeader {
	font-family			: tahoma, arial, sans-serif;
	font-weight			: normal;
	font-size			: 20px;
	color				: #aa9988;
	width				: 1200px;
	padding-bottom		: 4px;
	margin				: 0px;
}
#AccountHeader a {
	font-family			: tahoma, arial, sans-serif;
	font-weight			: normal;
	font-size			: 20px;
	color				: #aa9988;
	text-decoration		: none;
}
#AccountHeader a:hover {
	color				: #000000;
}

.AccountHeaderTitle {
	color				: #F36A22;
}

#AccountNav {
	float				: left;
	width				: 150px; /* 930px - AccountContent (750px + 2x20px padding + 2x1px border) */
	/*border-top			: 1px solid #334444;*/
	padding-top			: 16px;
}

.AccountNavTitle {
	font-family			: tahoma, arial, sans-serif;
	font-weight			: bold;
	font-size			: 15px;
	color				: #F36A22;
	margin-left: 4px;
}

#AccountContent, #AdminAccountsContent {
	float				: left;
	width				: 1050px;
	min-height			: 600px;
	/*border-top			: 1px solid #334444;*/
	padding				: 20px;
	margin-bottom		: 20px;
}

.AccountContentWide {
	width:1200px !important;
	padding: 20px 0 !important;
}

.hr {
	height				: 1px;
	background-color	: #334444;
	margin				: 4px 0px;
}

/* MAINNAV */

#admin_mainnav {
	position			: absolute;
	bottom				: 0px;
	margin				: 0px 0px 0px 0px;
	padding				: 0px;
	list-style-type		: none;
}

#admin_mainnav li {
	float				: left;
	margin				: 0px 2px 0px 0px;
}

#admin_mainnav li a {
	display					: block;
	padding					: 3px 6px 3px 6px;
	text-decoration			: none;
	color					: #dddddd;
	font-size				: 12px;
	font-weight				: normal;
	background-color		: #444444;
	-webkit-font-smoothing	: antialiased;
	text-rendering			: optimizelegibility;

	-moz-border-radius-topleft		: 2px; 
	-webkit-border-top-left-radius	: 2px; 
	border-top-left-radius			: 2px;
	
	-moz-border-radius-topright		: 2px; 
	-webkit-border-top-right-radius	: 2px; 
	border-top-right-radius			: 2px;
}

#admin_mainnav li a:hover {
	color				: #ffffff;
	background-color	: #555555;
}

#admin_mainnav li .admin_mainnav_active,
#admin_mainnav li .admin_mainnav_active:hover {
	color				: #ffffff;
	background-color	: #F36A22;
}

/* SUBNAV */

.admin_subnav {
	margin				: 0px 0px 10px 0px;
	padding				: 0px;
	list-style-type		: none;
}

.admin_subnav li {
	margin 				: 0px;
}

.admin_subnav li a {
	text-decoration		: none;
	display				: block;
	padding				: 2px 10px;
	font-weight			: bold;
	border-radius: 4px;
}

.admin_subnav li a:hover {
	background-color	: #ffffcc;
}

.admin_subnav .selected a,
.admin_subnav .selected a:hover {
	color				: #f36a22;
	background-color	: #eff2e6;
}

/* NEW Subnav */
#subnav { display:flex; margin:20px 0 0 0; padding:0; list-style-type:none; }
#subnav li { margin:0; width:100px;  }
#subnav a { display:block; padding:2px 6px; font-weight:normal; font-size:11px; text-decoration:none; text-align:center; }
#subnav a:hover { background-color:#ffffcc; }
#subnav i { font-size:18px; color:#776655; }
#subnav .selected a { color:#f36a22; background-color:#eff2e6; }
#subnav .selected i { color:#f36a22; }


input[type=text]:disabled, 
input[type=number]:disabled, 
input[type=password]:disabled, 
textarea:disabled, 
select:disabled {
	background-color	: #eff2e6;
	color				: #888888;
}


.field-info {
	font-family			: tahoma, arial, sans-serif;
	font-size			: 10px;
	color				: #888888;
	margin-top			: 4px;
	white-space 		: normal;
}

.feld-pre { padding:10px; font-family:monospace; text-overflow:ellipsis; overflow:auto; white-space:nowrap; background-color:#ffffff; border:1px solid #d6d9ce; }

/* TEXT */

h2 {
	font-size: 18px;
	font-weight:normal;
	font-family:tahoma, arial, sans-serif;
	margin-bottom:4px;
}

.grey { 
	color				: #888888 !important;
}

.inactive { color:#888888; font-style:italic; }

.note {
	color				: #F36A22;
	font-weight			: bold;
}

.group-title {
	color				: #776655;
	font-weight:normal;
	font-size:13px;
	margin				: 0px;
	/*border-bottom		: 1px solid #776655;*/
	/*font-weight			: bold;*/
	/*padding				: 2px 4px;*/
}


.no-records {
	padding				: 2px 4px;
	color				: #888888;
	font-style			: italic;
}


/* BREADCRUMBS */

.breadcrumbs {
	margin				: 0px 0px 20px 0px;
	padding				: 0px;
	list-style-type		: none;
	height				: 15px;
}
.breadcrumbs li {
	float				: left;
	list-style-type		: none;
	margin				: 0px 5px 0px 0px;
	padding				: 0px;
}
.breadcrumbs li:before {
    content				: '\0020 \0020 \0020 \00BB \0020';
}
.breadcrumbs li:first-child:before {
	content				: '';
}
.breadcrumbs li span {
	color				: #776655;
}
.breadcrumbs li a {
	color				: #776655;
	font-weight			: normal;
	text-decoration		: none;
}
.breadcrumbs a:hover {
	color				: #F36A22;
}

/* COMMISSION */

.commission {
	color				: #F36A22;
	font-size			: 14px;
	font-weight			: bold;
}


/* FEATURE LIST */

.feature-list {
	margin				: 0px 20px 20px 0px;
}
.feature-list ul {
	margin				: 0px;
	padding				: 0px;
	list-style-type		: none;
}
.feature-list li {
	margin				: 0px 0px 2px 0px;
}
.feature-list p {
	margin				: 0px 0px 0px 24px;
	color				: #888888;
	font-size			: 10px;
}
.feature-list-column {
	width				: 370px;
}

/* CHECK ICONS */

.check-ok {
	font-size				: 9px; 
	font-weight				: bold; 
	color					: #ffffff; 
	padding					: 1px 4px 2px 4px;
	margin-right			: 3px;

	-moz-border-radius		: 4px; 
	-webkit-border-radius	: 4px; 
	border-radius			: 4px;

	background-color		: #006600;
	background				: -moz-linear-gradient(top, #006600, #007700);
	background				: -webkit-gradient(linear, left top, left bottom, color-stop(0, #006600), color-stop(1, #007700));
}
.check-err {
	font-size				: 9px; 
	font-weight				: bold; 
	color					: #ffffff; 
	padding					: 1px 4px 2px 4px;
	margin-right			: 3px;

	-moz-border-radius		: 4px; 
	-webkit-border-radius	: 4px; 
	border-radius			: 4px;

	background-color		: #660000;
	background				: -moz-linear-gradient(top, #660000, #770000);
	background				: -webkit-gradient(linear, left top, left bottom, color-stop(0, #660000), color-stop(1, #770000));
}

.settings-list {
	border-spacing:0px;
}
.settings-list * td {
	padding: 0px;
	border-bottom: 0px;
}


/* --- experimental ------------------------------------ */

.box {
	-moz-box-shadow		: 0px 0px 10px #d6d9ce;
	-webkit-box-shadow	: 0px 0px 10px #d6d9ce;
	box-shadow			: 0px 0px 10px #d6d9ce;

	-moz-border-radius		: 4px; 
	-webkit-border-radius	: 4px; 
	border-radius			: 4px;

	background-color		: #fdfff7;
}

.box-header {
	padding				: 4px 10px;
	font-size			: 13px;
	background-color	: #d6d9ce;
	color				: #334444;
	


	-moz-border-radius-topleft		: 4px; 
	-webkit-border-top-left-radius	: 4px; 
	border-top-left-radius			: 4px;
	
	-moz-border-radius-topright		: 4px; 
	-webkit-border-top-right-radius	: 4px; 
	border-top-right-radius			: 4px;

}


.label { font-size:9px; color:#744210; text-align:center; background-color:#faf089; padding:1px 5px 1px 5px; border-radius:4px; }
.label-yellow { color:#744210; background-color:#faf089; }
.label-red { color:#742a2a; background-color:#fed7d7; }
.label-grey { color:#718096; background-color:#edf2f7; }
.label-green { color:#5ca630; background-color:#edf6e3; }
.label-blue { color:#1e90ff; background-color:#e5f2ff; }
.label-big { font-size:11px; }

/*.listbox { display:table; table-layout:fixed; border:1px solid #d6d9ce; border-radius:2px; margin-bottom:4px; width:100%; }*/
.listbox { display:flex; border:1px solid #d6d9ce; border-radius:2px; margin-bottom:4px; width:100%; align-items:center; }
.listbox * { box-sizing:border-box; }
.listbox:hover { background-color:#ffffcc; }
.listbox > div { /*display:table-cell;*/ padding:4px; /*vertical-align:middle;*/ }
.listbox-inactive { color:#888888; border:1px solid #dddddd; }
.listbox-icon { width:39px; height:48px; display:flex; align-items:center; justify-content:center; color:#776655; font-size:14px; }


.listbox-group { box-sizing:border-box; }
.listbox-group .listbox { margin-top:-1px; margin-bottom:0; border-radius:0; position:relative; }
.listbox-group .listbox:first-child { margin-top:0; border-top-left-radius:2px; border-top-right-radius:2px; }
.listbox-group .listbox:last-child { border-bottom-left-radius:2px; border-bottom-right-radius:2px; }
.listbox-group .listbox:nth-child(even) { background-color:#eff2e6; }
.listbox-group .listbox:nth-child(even):hover { background-color:#ffffcc; }
.listbox-group .listbox-active { border:1px solid #f36a22; z-index:1;}

.listbox-header { display:table; box-sizing:border-box; width:100%; color:#888888; font-size:10px; }
.listbox-header > div { display:table-cell; box-sizing:border-box; padding:4px; vertical-align:bottom; }

.radio-button label { display:block; padding:4px; border:1px solid transparent; border-radius:2px; opacity:0.5; }
.radio-button label:hover { border:1px solid #f36a22; opacity:1; cursor:pointer; }
.radio-button input { visibility:hidden; position:absolute; display:none; width:0; margin:0; height:0; padding:0; }
.radio-button input:checked + label { opacity:1; border:1px solid #776655; }
.radio-button input:checked + label:hover { border:1px solid #f36a22; }
.radio-button input:disabled + label,
.radio-button input:disabled + label:hover { border:1px solid transparent; opacity:0.5; cursor:normal; }


table.product-purchase-settings { border-collapse:collapse; }
table.product-purchase-settings th { font-size:10px; font-weight:normal; text-align:left; color:#888888; padding:1px 4px 1px 0; }
table.product-purchase-settings td { padding:1px 4px 1px 0;}

/* LAYOUT */
.row { display:flex; width:100%; margin:0 -5px; box-sizing:border-box; }
.row-label { font-weight:bold; }
.row-border { border-bottom:1px solid #eff2e6; padding:10px 0; }
.row-spacing { margin-bottom:15px; }
.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { padding:0 5px; box-sizing:border-box; }
.col { width:100%; }
.col-1 { width:8.333333%; }
.col-2 { width:16.66667%; }
.col-3 { width:25%; }
.col-4 { width:33.33333%; }
.col-5 { width:41.66667%; }
.col-6 { width:50%; }
.col-7 { width:58.33333%; }
.col-8 { width:66.66667%; }
.col-9 { width:75%; }
.col-10 { width:83.33333%; }
.col-11 { width:91.66667%; }
.col-12 { width:100%; }

.columns { display:flex; width:100%; }
.columns > div { border-right:1px solid #d6d9ce; padding:0 20px; }
.columns > div:first-child { padding-left:0; }
.columns > div:last-child { border-right:0; padding-right:0; }

.formitem {}
.formitem label { display:block; margin-bottom:4px; }

.tabnav { margin-bottom:20px; }
.tabnav > a { display:inline-block; border-bottom:2px solid transparent; margin-right:10px; padding-bottom:5px; text-decoration:none; text-transform:uppercase; color:#334444; letter-spacing:1px; font-size:11px; }
.tabnav > a:hover { border-bottom:2px solid #d6d9ce; }
.tabnav > a.active, .tabs > a.active:hover { border-bottom:2px solid #f36a22; }


.errors-table { border-spacing:0px; }
.errors-table td { color:#aa0000; padding:1px 10px 1px 0; border-bottom:1px solid #aa0000; }
.errors-table th { color:#aa0000; text-align:left; padding:1px 10px 1px 0; border-bottom:1px solid #aa0000; }

.table-bordered { border-top:1px solid #d6d9ce; }
.table-bordered th, .table-bordered td { border-left:1px solid #d6d9ce; }
.table-bordered th:last-child, .table-bordered td:last-child { border-right:1px solid #d6d9ce; }


.cards { display:flex; margin-left:-5px; margin-right:-5px; margin-bottom:15px; }
.cards a { text-decoration:none; }
.cards a:hover i { color:#F36A22; }
.cards i { color:rgba(0,0,0,0.2); }
.card { background-color:#eff2e6; padding:5px 15px; margin:5px; width:100%; border-radius:4px; }
.card-primary-value { font-size:30px; color:#776655; line-height:30px; }
.card-primary-label { font-size:12px; color:#334444; font-weight:bold; }
.card-primary { font-size:16px; color:#334444;  }
.card-secondary { font-size:11px; color:#888888; }

.grid-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 2fr)); margin:5px; }
.grid-cards a { text-decoration:none; }
.grid-card { background-color:#eff2e6; padding:5px 15px; margin:5px; border-radius:4px; }

.field-autocomplete {  }
.field-autocomplete .display { display:flex; justify-content:space-between; }
.field-autocomplete .display > a.change { display:block; width:100%; padding:2px 5px; vertical-align:middle; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.field-autocomplete .display > a.change:hover { text-decoration:underline; }
.field-autocomplete .display > a.empty { color:#888888; font-style:italic; }
.field-autocomplete .actions { margin-left:5px; white-space:nowrap;}
.field-autocomplete .actions a { display:inline-block; padding:2px 5px; vertical-align:middle; }
.field-autocomplete .select { display:none; }
.field-autocomplete .select input { padding:2px 5px; border:0; width:100%; }


.table-grid { min-width:100%; width:auto; display:grid; border-collapse:collapse; }
.table-grid thead,
.table-grid tbody,
.table-grid tr { display: contents; }
.table-grid > thead > tr > th { position:relative; padding:2px 6px; font-family:tahoma,arial,sans-serif; font-size:10px; font-weight:normal; text-align:left; vertical-align:bottom; color:#888888; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.table-grid > tbody > tr > td { position:relative; padding:6px; font-family:tahoma,arial,sans-serif; font-size:11px; color:#334444; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-bottom:1px solid #d6d9ce; }
.table-grid > tbody > tr > td:first-child { border-left:1px solid #d6d9ce; }
.table-grid > tbody > tr > td:last-child { border-right:1px solid #d6d9ce; }
.table-grid > tbody > tr:first-child > td { border-top:1px solid #d6d9ce; }
.table-grid > tbody > tr:first-child > td:first-child { border-top-left-radius:4px; }
.table-grid > tbody > tr:first-child > td:last-child { border-top-right-radius:4px; }
.table-grid > tbody > tr:last-child > td:first-child { border-bottom-left-radius:4px; }
.table-grid > tbody > tr:last-child > td:last-child { border-bottom-right-radius:4px; }
/*.table-grid > tbody > tr:nth-child(even) td { background-color:#eff2e6; }*/
.table-grid > tbody > tr:hover > td { background-color:#ffffcc; }
.table-grid > tbody > tr > td a { font-weight:normal; color:#334444; text-decoration:none; }
.table-grid > tbody > tr > td a:hover { text-decoration:underline; }

.resize-handle { position:absolute; top:0; right:0; bottom:0; background:black; opacity:0; width:3px; cursor:col-resize; }
.resize-handle:hover,
.header--being-resized .resize-handle { opacity:0.5; }
.table-grid th:hover .resize-handle { opacity: 0.3; }


.invoice-nav-container {}
.invoice-nav { display:flex; align-items:center; border-left:1px solid #d6d9ce; border-right:1px solid #d6d9ce; border-bottom:1px solid #eff2e6; }
.invoice-nav:first-child {  border-top:1px solid #d6d9ce; border-top-left-radius:2px; border-top-right-radius:2px; }
.invoice-nav:last-child {  border-bottom:1px solid #d6d9ce; border-bottom-left-radius:2px; border-bottom-right-radius:2px; }
.invoice-nav div:first-child { padding:5px; }
.invoice-nav a { display:block; flex-grow:1; padding:5px; text-decoration:none; }
.invoice-nav:hover { background-color:#ffffcc; }
.invoice-nav.active { background-color:#eff2e6; border-right:2px solid #f36a22; }
.invoice-nav.active a { /*color:#f36a22;*/ }
.invoice { width:100%; padding:20px; background-color:#ffffff; border:1px solid #d6d9ce; border-radius:2px; margin-bottom:10px; box-sizing:border-box; box-shadow:1px 2px 6px rgba(0,0,0,0.1); }
.invoice .not-billable { background-color:#fafafa; }
.invoice .not-billable td { font-style:italic; opacity:0.5; }