html, body {
	height: 100%;
	-webkit-text-size-adjust: 100%;
}
body {
    margin:0;
    padding:0;   
    background: #f9f9f9;
    font:12px "Verdana", "Lucida Grande", Sans-Serif;
    color: #000;
    -webkit-text-size-adjust: 100%;
}
html>body #minHeight{ /* Opera and IE8 min-height fix */
    float:left;
    width:0;
    height:100%;
    overflow:hidden;
    -webkit-text-size-adjust: 100%;
} 
/*=== Begin Layout Structure ===*/
#wrapper {
    width:100%;
	position:relative;
    margin:0 auto;
    overflow:hidden;/*contain inner floats*/
    /*background-image:url('../images/debut_light.png');*/
}
#wrapper2 {
	min-height:100%; /*height is determined from parent's height (html & body)*/
    width:100%;
    position:relative;
    margin:0 auto;
    overflow:hidden;/*contain inner floats*/
    /*background-image:url('../images/debut_light.png');*/
}
* html #wrapper {height:100%;overflow:visible;}/*IE6 min-height & overflow reset*/
#top_header {
	background: #f34555;
	margin:0 auto;
    width:950px;
	height:50px;
}
#header {
	padding-top:10px;
	padding-bottom:10px;
	margin:0 auto;
    width:950px;
    overflow:hidden;/*contain inner floats*/
}
#biz_name {
	float:left;
	font:normal 20px "Verdana", "Lucida Grande", Sans-Serif;
	padding-left:5px;
	margin-top:12px;
	color:#fff;
	text-shadow:1px 1px #000;
	position:relative;
}
#logo img {
	float:left;
	margin-top: 1px;
	margin-right: -10px;
	margin-left:-10px;
	height: 32px;
}
#login {
	padding-top:18px;
	padding-left:10px;
	float:right;
	text-shadow:1px 1px #000;
	color:#fff;
}
#login a {
	font:bold 10px "Verdana", "Lucida Grande", Sans-Serif;
	color:#fff;
	text-decoration:none;
}
.sign_in {
	font:bold 20px "Verdana", "Lucida Grande", Sans-Serif;
	text-shadow: 0 1px #fff;
}
.title_lock {
	background-image:url("../images/lock.gif");
	background-repeat:no-repeat;
	padding-left:25px;
	font:bold 12px "Verdana", "Lucida Grande", Sans-Serif;
	float:left
}
.title_key {
	background-image:url("../images/key.gif");
	background-repeat:no-repeat;
	padding-left:25px;
	font:bold 12px "Verdana", "Lucida Grande", Sans-Serif;
	float:left
}
.title_info {
	background-image:url("../images/info.gif");
	background-repeat:no-repeat;
	padding-left:25px;
	font:bold 12px "Verdana", "Lucida Grande", Sans-Serif;
	float:left
}
.title {
	color: #fff;
	border-bottom: solid 1px #000;
	background: #0095cd;
	background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
	background: -moz-linear-gradient(top,  #00adee,  #0078a5);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
	font:bold 20px "Verdana", "Lucida Grande", Sans-Serif;
	padding-left:10px;
	padding-top:5px;
	padding-bottom:5px;
}
.page_title {
	margin-top:2px;
	color:#333;
	font:bold 26px "Verdana", "Lucida Grande", Sans-Serif;
	float:left
}
.page_subtitle {
	margin-top:5px;
	color:#333;
	font:bold 18px "Verdana", "Lucida Grande", Sans-Serif;
	float:left
}
#header .search{
	float:right;
}
#body{
	margin:0 auto;
    width:950px;
    overflow-x:hidden; /* lock the page frame to 950px; a wide table
    inside should scroll on its own .table-responsive box, never the
    whole page */
}
#content {
    float:right;
    width:800px;
    padding-top:.5em;
    padding-bottom:50px; /*footer height (plus 10px for text spacing)*/  
}
#content_full {
    float:right;
    width:950px;
    padding-top:.5em;
    padding-bottom:50px; /*footer height (plus 10px for text spacing)*/
    overflow-x:hidden; /* lock everything (page header, filter bar) to
    950px -- only .table-responsive's own scrollbar (nested inside)
    should ever scroll horizontally, never the whole page/frame */
}
#content_450 {
    float:right;
    width:450px;
    padding-top:.5em;
    padding-bottom:50px; /*footer height (plus 10px for text spacing)*/  
}
#content_750 {
    float:right;
    width:750px;
    padding-top:.5em;
    padding-bottom:50px; /*footer height (plus 10px for text spacing)*/  
}
#left {
    float:left;
    width:120px;
    padding-top:.5em;
    padding-bottom:50px; /*footer height (plus 10px for text spacing)*/  
}
#left_180 {
    float:left;
    width:180px;
    white-space: nowrap;
    overflow: hidden;
    padding-top:.5em;
    padding-bottom:50px; /*footer height (plus 10px for text spacing)*/  
}
#left_200 {
    float:left;
    width:200px;
    padding-top:.5em;
    padding-bottom:50px; /*footer height (plus 10px for text spacing)*/  
}
#left_350 {
    float:left;
    width:350px;
    padding-top:.5em;
    padding-bottom:50px; /*footer height (plus 10px for text spacing)*/  
}
#sales_right {
    float:left;
    margin-top:6px;
    margin-left:10px;
}
#sales_left{
    float:left;
    width:450px;
    padding-top:6px;
    padding-bottom:50px; /*footer height (plus 10px for text spacing)*/ 
    margin-right:5px; 
}
#content_wrapper {
	/*padding-bottom:100px;*/
}
#footer {
	position: relative;
	margin-top: -80px; /* negative value of footer height */
	height: 80px;
	clear:both;
	text-align:center;
}
#footer #biz_name {
    font:14px "Verdana", "Lucida Grande", Sans-Serif;
	color:#bbb;
}
#divider {
	height:12px;
}
.dotted_dividers_bottom {
	border-bottom-style:dotted;
	border-bottom-width:1px;
	border-bottom-color:#ccc;
}
.dotted_dividers_top {
	border-top-style:dotted;
	border-top-width:1px;
	border-top-color:#ccc;
}
._active {
	/*background:#00b7e2;
	width:90px;
	height:100%;*/
}
.active2 {
	background:#00b7e2;
	border-left:1px solid #0187a7;
	border-right:1px solid #0187a7;
	height:27px;
	padding-left:10px;
	padding-right:10px;
}
.menu_item_right {
	padding-top:10px;
	padding-left:15px;
	float:right;
	text-shadow:1px 1px #000;
}
#menubar_container {
	margin:0 auto;
	width:950px;
}
#menubar {
	background: #f34555;
	width:100%;
	height:36px;
}
.menu_item {
	float:left;
	color:#fff;
	height:36px;
	padding-left:8px;
	padding-right:8px;
	text-align:center;
	text-shadow:1px 1px #000;
}
.menu_item span {
	display:block;
	padding-top:10px;
}
#menubar a {
	font:bold 12px "Verdana", "Lucida Grande", Sans-Serif;
	color:#fff;
	text-decoration:none;
}
#menubar a:hover,#menubar a:active {
	color:#fff;
	text-decoration:underline;
}
#menubar_company_info {
	position:absolute;
	left:0px;
	top:18px;
	width:250px;
	height:55%;
}
#company_title {
	font-size:14pt;
	font-weight:bold;
}
#menubar_footer {
	position:absolute;
	top:80px;
	left:0px;
	height:17%;
	padding-top:3px;
	font-size:8pt;
	font-weight:bold;
}
#menubar_date {
	position:absolute;
	top:80px;
	right:0px;
	height:17%;
	padding-top:3px;
	font-size:8pt;
	font-weight:bold;
}
#submenubar {
	color: #d9eef7;
	border-top: solid 1px #0187a7;
	border-bottom: solid 1px #0185ac;
	background: #00b7e2;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
	width:100%;
	height:30px;
	text-align:left;
}
#submenubar_container {
	margin:0 auto;
	width:950px;
}
.submenu_item {
	margin-top:8px;
	margin-bottom:5px;
	margin-right:10px;
	margin-left:10px;
	float:left;
	color:#fff;
	text-align:center;
}
.submenu_item a {
	font:bold 10px "Verdana", "Lucida Grande", Sans-Serif;
	color:#dff6fd;
	text-decoration:none;
	text-shadow: 0 1px #666;
}
.submenu_item ._active {
	color:#fff;
	text-shadow: 0 1px #000000;
}
.submenu_item a:hover {
	text-decoration:underline;
}
.submenu_item_right {
	margin-top:8px;
	margin-bottom:5px;
	margin-right:0px;
	margin-left:10px;
	float:right;
	color:#fff;
	text-align:center;
}
.submenu_item_right a {
	font:bold 10px "Verdana", "Lucida Grande", Sans-Serif;
	color:#dff6fd;
	text-decoration:none;
	text-shadow: 0 1px #666;
}
.submenu_item_right ._active {
	color:#fff;
	text-shadow: 0 1px #000000;
}
.submenu_item_right a:hover {
	text-decoration:underline;
}
#trial {
	position: relative;
	width:72%;
	margin: 0px auto;
	padding:10px;
	color: #80761c;
	background: #fdf5b5;
	box-shadow: 0 2px 2px #666;
	text-align:center;
	-webkit-border-radius-bottomleft: .5em; 
	-moz-border-radius-bottomleft: .5em;
	border-bottom-left-radius: .5em;
	-webkit-border-radius-bottomright: .5em; 
	-moz-border-radius-bottomright: .5em;
	border-bottom-right-radius: .5em;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    border-bottom:1px solid #baad3c;
    border-left:1px solid #baad3c;
    border-right:1px solid #baad3c;
    font-family: "Verdana", "Lucida Grande", Sans-Serif;
    font-size:14px;
    z-index:-99;
}
#trial a {
	color: #03a1dc;
	text-decoration: underline;
}
#trial span {
	font-size:16px;
	font-weight:bold;
}
#spinner {
	position:absolute;
	display:none;
	right:15%;
	top:105px;
}
#feedback_bar {
	position:fixed;
	bottom:0;
	left:0;
	width:100%;
	height:55px;	
	position:fixed;
	opacity: 0;
	filter: alpha(opacity=0);
	z-index:1;
	line-height:3.3;
}
#table_holder {
	position:relative;
	margin-left:15px;
}
.options {
	text-align:left;
	height:25px;
	color:#444;
	background:#eee;
	border-bottom:1px solid #ddd;
}
.bill_info_msg {
	text-align:left;
	height:25px;
	color:#666;
	background:#f9f9f9;
	border-bottom:1px solid #ddd;
}
.table_link a {
	font:12px "Verdana", "Lucida Grande", Sans-Serif;
	color:#000000;
	text-decoration:none;
}
table.items > tbody > tr > td {
	vertical-align:middle !important;
	line-height:1.2;
}
table.items > tbody > tr > td input {
	vertical-align:middle;
	margin:0;
}
/* Netsona clean baseline: every listing table is wrapped in
   .table-responsive to match the Products table's behaviour --
   scroll horizontally instead of wrapping cell content, so every
   column stays fully readable on one line. */
.table-responsive > table > thead > tr > th,
.table-responsive > table > thead > tr > td,
.table-responsive > table > tbody > tr > th,
.table-responsive > table > tbody > tr > td,
.table-responsive > div > table > thead > tr > th,
.table-responsive > div > table > thead > tr > td,
.table-responsive > div > table > tbody > tr > th,
.table-responsive > div > table > tbody > tr > td {
	white-space:nowrap;
}
.table_link a:hover,.table_link a:active {
	text-decoration:underline;
}
.table_link_small a {
	font:10px "Verdana", "Lucida Grande", Sans-Serif;
	color:#0095cd;
	text-decoration:none;
}
.table_link_small a:hover,.table_link_small a:active {
	text-decoration:underline;
}
.link_text {
	font:12px "Verdana", "Lucida Grande", Sans-Serif;
	color:#0095cd;
	text-decoration:underline;
}
a.bold {
	font-weight: bold;
}
a.bold:hover,a.anchor:active {
	font-weight: bold;
	text-decoration:underline;
}
table.sortable tbody tr:hover {
    background-color:#e8f2fb;
    cursor:pointer;
}
table.sortable {
	border-collapse: seperate;
}
table.sortable thead {
	cursor: default;
    font:bold 11px "Verdana", "Lucida Grande", Sans-Serif;
    color: #666;
	border: solid 1px #d3d3d3;
	background: #e6e6e6;
	/*background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#333));
	background: -moz-linear-gradient(top,  #666,  #333);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#333333');
	text-shadow:1px 1px #333;*/
	padding:8px;
}
table.sortable thead td:first-child {
	-moz-border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    border-radius: 5px 0 0 0;
    border-left:1px solid #d3d3d3;
    padding-left: 5px;
	padding-right: 5px;
}
table.sortable thead td:last-child {
	-moz-border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    border-radius: 0 5px 0 0;
    border:1px solid #d3d3d3;
    padding-left: 5px;
	padding-right: 5px;
}
table.sortable thead td:only-child {
	-moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    border:1px solid #d3d3d3;
    padding-left: 5px;
	padding-right: 5px;
}
table.sortable thead td {
	border-top:1px solid #d3d3d3;
	border-bottom:1px solid #d3d3d3;
	border-left:1px solid #d3d3d3;
	padding-left: 5px;
	padding-right: 5px;
}
table.sortable tbody td {
	border-bottom:1px solid #ddd;
	border-left:1px solid #ddd;
	padding-left: 5px;
	padding-right: 5px;
}
table.sortable tbody td:last-child {
	border-right:1px solid #ddd;
}
table.sortable tfoot {
	font:bold 11px "Verdana", "Lucida Grande", Sans-Serif;
    color: #666;
	background: #e6e6e6;
	padding:8px;
}
table.sortable tfoot td:first-child {
	-moz-border-radius: 0 0 0 5px;
    -webkit-border-radius: 0 0 0 5px;
    border-radius: 0 0 0 5px;
    border-left:1px solid #d3d3d3;
    padding-left: 10px;
	padding-right: 5px;
}
table.sortable tfoot td {
	border-top:0px solid #d3d3d3;
	border-bottom:1px solid #d3d3d3;
	border-left:1px solid #d3d3d3;
	padding-left: 5px;
	padding-right: 5px;
}
table.sortable tfoot td:last-child {
	border-right:1px solid #d3d3d3;
	-moz-border-radius: 0 0 5px 0;
    -webkit-border-radius: 0 0 5px 0;
    border-radius: 0 0 5px 0;
}
table.report {
	border-collapse: seperate;
	border:1px solid #000;
}
table.report thead {
	padding:5px;
	border:1px solid #000;
}
table.report thead td:first-child {
	border:1px solid #000;
    padding-left: 5px;
	padding-right: 5px;
}
table.report thead td:last-child {
	border:1px solid #000;
    padding-left: 5px;
	padding-right: 5px;
}
table.report thead td:only-child {
	border:1px solid #000;
    padding-left: 5px;
	padding-right: 5px;
}
table.report thead td {
	border:1px solid #000;
	padding-left: 5px;
	padding-right: 5px;
}
table.report tbody td {
	border:1px solid #000;
	padding-left: 5px;
	padding-right: 5px;
}
table.report tbody td:last-child {
	border:1px solid #000;
}
table.report tfoot {
	padding:5px;
	font-weight:bold;
	border:1px solid #000;
}
table.report tfoot td {
	border:1px solid #000;
	padding-left: 5px;
	padding-right: 5px;
}
table.report tfoot td:last-child {
	border:1px solid #000;
}
table.tablesorter {
	position:relative;
	width:100%;
}
table.tablesorter tfoot tr td {
	background:#e8edff;
	font-size:12px;
	padding:8px;
	color:#999;
}
.search_box {
	background-image:url(../images/search.png);
	background-repeat:no-repeat; /*important*/
	border:1px solid #ccc;
	width:200px;
	height:25px;
	padding-left:35px;
	font:bold 16px "Verdana", "Lucida Grande", Sans-Serif;
	color:#666;
	-moz-border-radius:15px;
	border-radius:15px;
	-moz-box-shadow:inset 2px 2px 5px #ccc;
    box-shadow:inset 2px 2px 5px #ccc;
}
input.search_box:focus, input.item_search_box:focus, input.customer_search:focus {
    outline-width: 0;
}
.field_row {
	margin: 0 0 10px 0;
}
.field_row label {
	float:left;
	width:100px;
	text-align:left;
	line-height:2.3;
}
.field_row label.wide {
	width:150px;
}
label.required {
	color:red;
}
.form_field {
 	float:left;
 	padding: 3px;
 	background-color: #f2f2f2;
}
.form_field input, .form_field textarea {
 	border: 1px solid #ccc;
 	padding: 4px;
}
.submit_button {
	padding: 5px;
	color: #fff;
	background-color: #0a6184;
	border: 2px solid #ddd;
}
.delete_button {
	padding: 5px;
	color: #fff;
	background-color: #ea4729;
	border: 2px solid #ddd;
}
.float_left {
	float:left;
}
.float_right {
	float:right;
}
.button {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	width: 80px;
	margin-bottom: 5px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 12px "Verdana", "Lucida Grande", Sans-Serif;
	padding: .5em 2em .55em;
	text-shadow: 1px 1px #000;
	-webkit-border-radius: 10px; 
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.normal_button {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	width: 80px;
	margin-bottom: 5px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 12px "Verdana", "Lucida Grande", Sans-Serif;
	padding: .5em 2em .55em;
	text-shadow: 1px 1px #000;
}
.left_round_button {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	width: 80px;
	margin-bottom: 5px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 12px "Verdana", "Lucida Grande", Sans-Serif;
	padding: .5em 2em .55em;
	text-shadow: 1px 1px #000;
	border-radius: 10px 0px 0px 10px;
	-moz-border-radius: 10px 0px 0px 10px;
	-webkit-border-radius: 10px 0px 0px 10px;
}
.right_round_button {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	width: 80px;
	margin-bottom: 5px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 12px "Verdana", "Lucida Grande", Sans-Serif;
	padding: .5em 2em .55em;
	text-shadow: 1px 1px #000;
	border-radius: 0px 10px 10px 0px;
	-moz-border-radius: 0px 10px 10px 0px;
	-webkit-border-radius: 0px 10px 10px 0px;
}
.round_button {
	border-radius: 1em;
}
.button:hover {
	text-decoration: none;
}
.button:active {
	position: relative;
	top: 1px;
}
.button_60 {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	width: 60px;
	margin-bottom: 5px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 12px "Verdana", "Lucida Grande", Sans-Serif;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button_100:hover {
	text-decoration: none;
}
.button_100:active {
	position: relative;
	top: 1px;
}
/* color styles 
---------------------------------------------- */
.button_white {
	color: #606060;
	border: solid 1px #999;
	background-color: #fff;
}
.button_red {
	color: #000;
	border: solid 1px #999;
	background-color: #f2c4c4;
}
.button_orange {
	color: #000;
	border: solid 1px #999;
	background-color: #ffd394;
}
.button_yellow {
	color: #000;
	border: solid 1px #999;
	background-color: #faf8c8;
}
.button_green {
	color: #000;
	border: solid 1px #999;
	background-color: #bcdfb8;
}
.button_blue {
	color: #000;
	border: solid 1px #999;
	background-color: #c2d9fb;
}
.button_violet {
	color: #000;
	border: solid 1px #999;
	background-color: #cec3fb;
}
.color_ffe3ff {
	color: #000;
	border: solid 1px #999;
	background-color: #ffe3ff;
}
.color_ff6961 {
	color: #fff;
	border: solid 1px #999;
	background-color: #ff6961;
}
.color_7bcdc8 {
	color: #000;
	border: solid 1px #999;
	background-color: #7bcdc8;
}
.color_cfcfc4 {
	color: #000;
	border: solid 1px #999;
	background-color: #cfcfc4;
}
.black {
	color: #d7d7d7;
	border: solid 1px #333;
	background: #333;
	background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
	background: -moz-linear-gradient(top,  #666,  #000);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
}
.black:hover {
	background: #000;
	background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
	background: -moz-linear-gradient(top,  #444,  #000);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
}
.black:active {
	color: #666;
	background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
	background: -moz-linear-gradient(top,  #000,  #444);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
}
.gray {
	color: #fff;
	border: solid 1px #555;
	background: #666;
	background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#666));
	background: -moz-linear-gradient(top,  #999,  #666);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#666666');
}
.gray:hover {
	background: #616161;
	background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
	background: -moz-linear-gradient(top,  #757575,  #4b4b4b);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');
}
.gray:active {
	color: #afafaf;
	background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
	background: -moz-linear-gradient(top,  #575757,  #888);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');
}
.silver {
	color: #666;
	border: solid 1px #aaa;
	background: #ccc;
	background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
	background: -moz-linear-gradient(top,  #eee,  #ccc);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ccc');
	text-shadow: 1px 1px #fff;
}
.silver:hover {
	color: #333;
	border: solid 1px #999;
	background: #bbb;
	background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#bbb));
	background: -moz-linear-gradient(top,  #eee,  #bbb);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#bbb');
}
.white {
	color: #606060;
	border: solid 1px #b7b7b7;
	background: #fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
	background: -moz-linear-gradient(top,  #fff,  #ededed);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
.white:hover {
	background: #ededed;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
	background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}
.white:active {
	color: #999;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
	background: -moz-linear-gradient(top,  #ededed,  #fff);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
}
.orange {
	color: #fef4e9;
	border: solid 1px #da7c0c;
	background: #f78d1d;
	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
	background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
	background: #f47c20;
	background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
	background: -moz-linear-gradient(top,  #f88e11,  #f06015);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
	color: #fcd3a5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
	background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}
.red {
	color: #faddde;
	border: solid 1px #980c10;
	background: #d81b21;
	background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
	background: -moz-linear-gradient(top,  #ed1c24,  #aa1317);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red:hover {
	background: #b61318;
	background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
	background: -moz-linear-gradient(top,  #c9151b,  #a11115);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
}
.red:active {
	color: #de898c;
	background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
	background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
}
.blue {
	color: #d9eef7;
	border: solid 1px #0076a3;
	background: #0095cd;
	background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
	background: -moz-linear-gradient(top,  #00adee,  #0078a5);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
	background: #007ead;
	background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
	background: -moz-linear-gradient(top,  #0095cc,  #00678e);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.blue:active {
	color: #80bed6;
	background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
	background: -moz-linear-gradient(top,  #0078a5,  #00adee);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}
.rosy {
	color: #fae7e9;
	border: solid 1px #b73948;
	background: #da5867;
	background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f));
	background: -moz-linear-gradient(top,  #f16c7c,  #bf404f);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f');
}
.rosy:hover {
	background: #ba4b58;
	background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845));
	background: -moz-linear-gradient(top,  #cf5d6a,  #a53845);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a', endColorstr='#a53845');
}
.rosy:active {
	color: #dca4ab;
	background: -webkit-gradient(linear, left top, left bottom, from(#bf404f), to(#f16c7c));
	background: -moz-linear-gradient(top,  #bf404f,  #f16c7c);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f', endColorstr='#f16c7c');
}
.green {
	color: #e8f0de;
	border: solid 1px #538312;
	background: #64991e;
	background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
	background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.green:hover {
	background: #538018;
	background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
	background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
.green:active {
	color: #a9c08c;
	background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
	background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}
.pink {
	color: #feeef5;
	border: solid 1px #d2729e;
	background: #f895c2;
	background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab));
	background: -moz-linear-gradient(top,  #feb1d3,  #f171ab);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab');
}
.pink:hover {
	background: #d57ea5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4));
	background: -moz-linear-gradient(top,  #f4aacb,  #e86ca4);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb', endColorstr='#e86ca4');
}
.pink:active {
	color: #f3c3d9;
	background: -webkit-gradient(linear, left top, left bottom, from(#f171ab), to(#feb1d3));
	background: -moz-linear-gradient(top,  #f171ab,  #feb1d3);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab', endColorstr='#feb1d3');
}
.warning_message {
	text-align:center;
	background-color:#fffcdd;
	border:1px solid #fff4aa;
	font-weight:bold;
}
.error_message {
	text-align:center;
	background-color:#f68383;
	border:1px solid #da3232;
	font-weight:bold;
}
.warning_mesage {
	text-align:center;
	background-color:#FBEC5D;
	border:1px solid #da3232;
	font-weight:bold;
}
.success_message {
	text-align:center;
	background-color:#e1ffdd;
	border:1px solid #2ca71c;
	font-weight:bold;
}
input {
	font-family: "Verdana", "Lucida Grande", Sans-Serif;
	padding: 3px;
}
ul.pagination {
	margin-left:-10px;
}
ul.pagination li.details{
	color:#999;
} 
ul.pagination li a
{
    color:#333333;
    text-shadow:0px 1px #F6F6F6;
    padding:6px 9px 6px 9px;
    border:solid 1px #B6B6B6;
    box-shadow:0px 1px #EFEFEF;
    -moz-box-shadow:0px 1px #EFEFEF;
    -webkit-box-shadow:0px 1px #EFEFEF;
    background:#E6E6E6;
    background:-moz-linear-gradient(top,#FFFFFF 1px,#F3F3F3 1px,#E6E6E6);
    background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#F3F3F3),color-stop(1,#E6E6E6));
}
ul.pagination li
{
    padding-bottom:1px;
}
ul.pagination li a:hover,
ul.pagination li a.current
{   
	color:#e9e9e9;
    box-shadow:0px 1px #e7e7e7;
    -moz-box-shadow:0px 1px #e7e7e7;
    -webkit-box-shadow:0px 1px #e7e7e7;
    text-shadow:0px 1px #666;
    border: solid 1px #666;
    background: #d81b21;
	background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
	background: -moz-linear-gradient(top,  #888,  #575757);      
}
ul.pagination{
    margin-top:10px;
    padding:0px;
    height:100%;
    overflow:hidden;
    font:10px "Verdana", "Lucida Grande", Sans-Serif;
    list-style-type:none;
    float:left
}
ul.pagination li.details{
    padding:7px 10px 7px 10px;
    font:12px "Verdana", "Lucida Grande", Sans-Serif;
}
ul.pagination li.dot{padding: 3px 0;}
ul.pagination li{
    float:left;
    margin:0px;
    padding:0px;
    margin-left:5px;
}
ul.pagination li:first-child{
    margin-left:0px;
}
ul.pagination li a{
    color:black;
    display:block;
    text-decoration:none;
    padding:7px 10px 7px 10px;
}
ul.pagination li a img{
    border:none;
}
.highlight {
	background-color: #ebf7ce;
}
.tbl_highlight {
	outline:none;
    border-color:#34b4f0;
    box-shadow:0 0 7px #34b4f0;
}
.title {
	font:bold 20px "Verdana", "Lucida Grande", Sans-Serif;
	float:left;
	margin-bottom:10px;
	text-shadow:#000 1px 1px 2px;
}
.label {
	font:bold 12px "Verdana", "Lucida Grande", Sans-Serif;
	text-align:left;
	padding-right:10px;
	vertical-align:middle;
	height:30px;
}
.label_width_200 {
	width:200px;
}
.label_width_150 {
	width:150px;
}
.label_width_120 {
	width:120px;
}
.label_width_100 {
	width:100px;
}
.textbox_30 {
	font:12px "Verdana", "Lucida Grande", Sans-Serif;
	padding:3px;
	width:30px;
	border:1px solid #eee;
}
.textbox_40 {
	font:12px "Verdana", "Lucida Grande", Sans-Serif;
	padding:3px;
	width:40px;
	border:1px solid #eee;
}
.textbox_50 {
	font:12px "Verdana", "Lucida Grande", Sans-Serif;
	padding:3px;
	width:50px;
	border:1px solid #eee;
}
.textbox_60 {
	font:12px "Verdana", "Lucida Grande", Sans-Serif;
	padding:3px;
	width:60px;
	border:1px solid #eee;
}
.textbox_100 {
	font:12px "Verdana", "Lucida Grande", Sans-Serif;
	padding:3px;
	width:100px;
	border:1px solid #eee;
}
.textbox_115 {
	font:12px "Verdana", "Lucida Grande", Sans-Serif;
	padding:3px;
	width:115px;
	border:1px solid #eee;
}
.textbox_120 {
	font:12px "Verdana", "Lucida Grande", Sans-Serif;
	padding:3px;
	width:120px;
	border:1px solid #eee;
}
.textbox_180 {
	font:12px "Verdana", "Lucida Grande", Sans-Serif;
	padding:3px;
	width:180px;
	border:1px solid #eee;
}
.textbox_400 {
	font:12px "Verdana", "Lucida Grande", Sans-Serif;
	padding:3px;
	width:400px;
	border:1px solid #eee;
}
.textbox {
	font:12px "Verdana", "Lucida Grande", Sans-Serif;
	padding:3px;
	width:250px;
	border:1px solid #eee;
}
.sign_in_textbox {
	font:bold 12px "Verdana", "Lucida Grande", Sans-Serif;
	padding:3px;
	padding-left:5px;
	width:300px;
	height:25px;
	border:1px solid #eee;
}
.textarea {
	font:12px "Verdana", "Lucida Grande", Sans-Serif;
	padding:3px;
}
#error_msg {
	font:12px "Verdana", "Lucida Grande", Sans-Serif;
	color:red;
	margin-top:0px;
	margin-bottom:10px;
}
table {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;
    width:100%
}
.bordered {
    border: solid #ccc 1px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background: #fff;
}
.bordered tr.sales_item_row:hover {
    background: #fbf8e9;
    -o-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;     
}   
.bordered td, .bordered th {
    padding: 3px;
    border-bottom: solid #ccc 1px;
}
.bordered th {
	background-color: #ddd;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));
    background-image: -webkit-linear-gradient(top, #eee, #ddd);
    background-image:    -moz-linear-gradient(top, #eee, #ddd);
    background-image:     -ms-linear-gradient(top, #eee, #ddd);
    background-image:      -o-linear-gradient(top, #eee, #ddd);
    background-image:         linear-gradient(top, #eee, #ddd);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;  
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;        
    border-top: none;
    text-shadow: 0 1px 0 rgba(255,255,255,.5); 
}
.bordered td:first-child, .bordered th:first-child {
    border-left: none;
}
.bordered th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}
.bordered th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}
.bordered th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}
.bordered tfoot tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 6px;
    -webkit-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
}
.bordered tfoot td {
	background-color: #eee;
	border-top: 1px solid #ccc;
}
.bordered .header {
	text-align:left;
	font-size:18px;
	padding:10px;
	color:#444;
	border-bottom:1px solid #ccc;
}
.bordered .po_header {
	text-align:left;
	font-size:12px;
	padding:3px;
	color:#444;
	border-bottom:1px solid #ccc;
}
.bordered .body {
	font-size:13px;
	padding:10px;
	color:#666;
	background:#f9f9f9;
	-moz-border-radius: 0 0 6px 6px;
    -webkit-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
}
.item_search_box {
	background-image:url(../images/search.png);
	background-repeat:no-repeat;
	border:1px solid #ccc;
	width:188px;
	height:25px;
	padding-left:35px;
	padding-right:220px;
	font:bold 16px "Verdana", "Lucida Grande", Sans-Serif;
	color:#666;
	-moz-border-radius:15px;
	border-radius:15px;
}
.customer_search {
	background-repeat:no-repeat;
	border:1px solid #ccc;
	width:150px;
	height:20px;
	padding-left:12px;
	font:bold 12px "Verdana", "Lucida Grande", Sans-Serif;
	color:#666;
	-moz-border-radius:15px;
	border-radius:15px;
}
.rtextbox {
	background-repeat:no-repeat;
	border:1px solid #ccc;
	padding-left:12px;
	font:bold 12px "Verdana", "Lucida Grande", Sans-Serif;
	color:#666;
	-moz-border-radius:15px;
	border-radius:15px;
    outline-width:0;
}
.defaultTextActive { color: #a1a1a1; font-style: italic; }
.small {
	font:10px "Verdana", "Lucida Grande", Sans-Serif;
}
.standard {
	font:12px "Verdana", "Lucida Grande", Sans-Serif;
}
.bold {
	font-weight:bold;
}
.borderless {
	border: 0px; 
}
.hidden {
	visibility:hidden; 
}
.button_add {
	background-image:url("../images/add.png");
	background-repeat:no-repeat;
	display:block;
	height: 24px;
	width: 24px;
	margin-left:170px;
	margin-top:-25px;
	border:0;
}
.button_delete {
	background-image:url("../images/delete.png");
	background-repeat:no-repeat;
	display:block;
	height: 24px;
	width: 24px;
	margin-left:196px;
	margin-top:-24px;
	border:0;
}
.shipping_clear {
	background-image:url("../images/shipping.png");
	background-repeat:no-repeat;
	display:block;
	height: 24px;
	width: 24px;
	margin-left:222px;
	margin-top:-24px;
	border:0;
}
.shipping_ok {
	background-image:url("../images/shipping_ok.png");
	background-repeat:no-repeat;
	display:block;
	height: 24px;
	width: 24px;
	margin-left:222px;
	margin-top:-24px;
	border:0;
}
.delete_item {
 	width: 25px;
	height:25px;
 	display:block;
 	background-image:url("../images/delete.png");
 	background-repeat:no-repeat;
}
.button_payment_mode {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: middle;
	width: 90px;
	height: 28px;
	margin-bottom: 5px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 12px/100% "Verdana", "Lucida Grande", Sans-Serif;
	padding: .7em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	overflow: hidden;
}
.button_payment_mode:hover {
	text-decoration: none;
}
.button_payment_mode:active {
	position: relative;
	top: 1px;
}
.accordion span.header {
	color: #666;
	border: solid 1px #d3d3d3;
	background: #eee;
	background-repeat:no-repeat;
	background-image: url('../images/expand.png'), -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#eee));
	background-image: url('../images/expand.png'),  -moz-linear-gradient(top,  #f9f9f9,  #eee);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#eeeeee');
    padding: 8px;
    font:bold 14px "Verdana", "Lucida Grande", Sans-Serif;
    text-shadow:0px 1px 0px #fff;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width:932px;
    display:block;
}
.accordion span.header:hover {
	color: #666;
	border: solid 1px #d3d3d3;
	background: #eee;
	background-repeat:no-repeat;
	background-image: url('../images/expand.png'), -webkit-gradient(linear, left top, left bottom, from(#e9e9e9), to(#eee));
	background-image: url('../images/expand.png'), -moz-linear-gradient(top,  #e9e9e9,  #eee);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#eeeeee');
    padding: 8px;
    font:bold 14px "Verdana", "Lucida Grande", Sans-Serif;
    text-shadow:0px 1px 0px #fff;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.accordion span.header._active {
	color: #666;
	border: solid 1px #d3d3d3;
	background: #eee;
	background-repeat:no-repeat;
	background-image: url('../images/collapse.png'), -webkit-gradient(linear, left top, left bottom, from(#e9e9e9), to(#eee));
	background-image: url('../images/collapse.png'), -moz-linear-gradient(top,  #e9e9e9,  #eee);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#eeeeee');
    padding: 8px;
    font:bold 14px "Verdana", "Lucida Grande", Sans-Serif;
    text-shadow:0px 1px 0px #fff;
    -moz-border-radius-bottomleft: 0px;
    border-bottom-left-radius: 0px;
    -moz-border-radius-bottomright: 0px;
    border-bottom-right-radius: 0px;
}
.accordion_content {
	border: solid 1px #d3d3d3;
	border-top:0px;
	-moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    border-bottom-right-radius: 10px;
    background:#fff;
}
#grid {
	width:481px;
    height:481px;
    overflow:hidden;
    border:0px solid #ccc;
}
#grid_body {
	vertical-align:top;
	width:451px;
    height:481px;
    padding-left:1px;
    padding-top:1px;
}
#grid_header {
	text-align:center;
    height:25px; 
    border:1px solid #000;
    -moz-border-radius-topleft: 10px;
    border-top-left-radius: 10px;
    -moz-border-radius-topright: 10px;
    border-top-right-radius: 10px;
    color: #fff;
	background: #000;
	background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#333));
	background: -moz-linear-gradient(top,  #666,  #333);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#333333');
	text-shadow:1px 1px #000;
}
#grid_footer {
	text-align:center;
    height:25px; 
    border:1px solid #000;
    border-top:0px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    border-bottom-right-radius: 10px;
    color: #fff;
	background: #000;
	background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#333));
	background: -moz-linear-gradient(top,  #666,  #333);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#333333');
	text-shadow:1px 1px #000;
}
.grid_buttons {
	margin:0px;
	padding:0px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	display: table;
}
.grid_buttons li {
	list-style: none;
	border: 1px solid #666;
	float: left;
	width: 89px;
	height: 47px;
	text-align: center;
	margin-left:-1px;
	margin-top:-1px;
	cursor: pointer;
	overflow:hidden;
	word-wrap: break-word;
}
.grid_buttons li.new {
	list-style: none;
	border: 1px solid #bbb;
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	float: left;
	width: 108px;
	height: 84px;
	padding: 3px;
	margin-right:5px;
	margin-bottom:5px;
	text-align: center;
	margin-left:-1px;
	margin-top:-1px;
	cursor: pointer;
	overflow:hidden;
	word-wrap: break-word;
	position: relative;
}
.grid_buttons li.new:active {
	transform: translate(0px,1px);
  	-webkit-transform: translate(0px,1px);
	border-bottom: 1px solid #bbb;
}
.grid_buttons li span {
	height: 47px;
    width: 89px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    word-wrap: break-word;
}
.grid_buttons li.new span {
	width: 115px;
	height: 90px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    word-wrap: break-word;
    overflow: hidden;
}
.grid_buttons li:hover {
	cursor: pointer;
}
li.sortable-placeholder {
	background: #fff;
}
.item_name {
	width:202px
}
.subtotal {
	width:75px;
	text-align:right;
}
#close_register {
	float: center;
	padding:10px;
	width:80%;
	border:1px solid #ccc;
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-moz-box-shadow:2px 2px 2px #999;
	-webkit-box-shadow:2px 2px 2px #999;
	box-shadow:2px 2px 2px #999;
	background:#fff;
}
div.message{
    background: transparent url('../images/cross.png') no-repeat scroll left center;
    margin-left: 10px;
    margin-top: 5px;
}
div.error{
	padding:5px;
    padding-left: 22px;
    font:bold 10px "Verdana", "Lucida Grande", Sans-Serif;
    color:#d10202;
}
div.dropdown {
	position: relative;
	text-align:right;
	width: 300px;
}
div.submenu_outlet {
	/* 
background: #111;
	position: absolute;
	top: 20px;
	right: -20px;
	width: 200px;
	display: none;
	margin-left:10px;
	padding:5px;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
 */
 	z-index:1;
	position: absolute;
	top: 25px;
	right: -15px;
	display: none;
	margin-left:10px;
	padding:5px;
	display: none;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 5px;
	margin-left: -20px;
	color: #d9eef7;
	border-bottom: solid 1px #0185ac;
	background: #f34555;
	-moz-box-shadow: 0 2px 2px #666;
	-webkit-box-shadow: 0 2px 2px #666;
	box-shadow: 0 2px 2px #666;
	text-align:right;
	-webkit-border-radius-bottomleft: .5em; 
	-moz-border-radius-bottomleft: .5em;
	border-bottom-left-radius: .5em;
	-webkit-border-radius-bottomright: .5em; 
	-moz-border-radius-bottomright: .5em;
	border-bottom-right-radius: .5em;
}
.dropdown li a {
    color: #555555;
    display: block;
    font-family: "Verdana", "Lucida Grande", Sans-Serif;
    font-weight: bold;
    padding:5px;
  	cursor: pointer;
	text-decoration:none;
}
.dropdown li a:hover {
    color: #fff;
    text-decoration: underline;   
}
.root {
	list-style:none;
	margin:0px;
	padding:0px;
	font-size:10px;
}
.sales_history_detail {
	width:100%;
	background: #fff;
	float:left;
}
.expanded {
    background:#e8f2fb;
}
.arrow_collapsed, .arrow_expanded {
    width:16px;
    height:16px;
    position:relative;
    top:3px;
    cursor:pointer;
    background:url('../images/arrow_collapsed.png') no-repeat;
    border:0px;
    display:inline-block;
    overflow:hidden;
}
.arrow_expanded {
    background:url('../images/arrow_expanded.png') no-repeat;
}
.loading_small {
	width:16px;
    height:16px;
    position:relative;
    top:3px;
    cursor:pointer;
    border:0px;
    display:inline-block;
    overflow:hidden;
    background:url('../images/loading_small.gif') no-repeat;
}
.sales_item_row {
	height:37px;
	background:#fff;
}
.voided_entry {
    color:#bbb;
    font-style:italic;
}
::-webkit-input-placeholder  { font-style:italic; }
input:-moz-placeholder { font-style:italic; }
#filter_content label {
    display:inline;
    float:left;
    margin-right:4px;
    vertical-align:top;
    line-height:20px;
}
.filter_button {
	border-top:1px solid #ccc;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
	border-bottom:0px;
    -moz-border-radius-topleft: 10px;
    border-top-left-radius: 10px;
    -moz-border-radius-topright: 10px;
    border-top-right-radius: 10px;
    text-decoration: none;
    font: 10px "Verdana", "Lucida Grande", Sans-Serif;
}
.light_text_shadow {
	text-shadow: 1px 1px #fff;
}
/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   speak for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('../images/loading.gif') 
                50% 50% 
                no-repeat;
}
/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}
/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}
.sub-menu {
	z-index:1;
	position: absolute;
	top: 54px;
	display: none;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 5px;
	margin-left: -20px;
	color: #d9eef7;
	border-bottom: solid 1px #0185ac;
	background: #00b7e2;
	-moz-box-shadow: 0 2px 2px #666;
	-webkit-box-shadow: 0 2px 2px #666;
	box-shadow: 0 2px 2px #666;
	text-align:left;
	-webkit-border-radius-bottomleft: .5em; 
	-moz-border-radius-bottomleft: .5em;
	border-bottom-left-radius: .5em;
	-webkit-border-radius-bottomright: .5em; 
	-moz-border-radius-bottomright: .5em;
	border-bottom-right-radius: .5em;
}
.sub-menu li {
	list-style-type: none;
	display: block;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 5px;
}
.smalltd9 tbody td {
	font-size:9px;
}
.smalltd10 tbody td {
	font-size:10px;
}
.smalltd11 tbody td {
	font-size:11px;
}
div.tag { border: 1px solid #ccc; -moz-border-radius:2px; -webkit-border-radius:2px; display: block; float: left; padding: 5px; text-decoration:none; background: #eee; color: #999; margin-right: 5px; margin-bottom:5px;font-family: helvetica;  font-size:13px;}
.image_wrap { 
	overflow:hidden;
	height:200px;
	width:200px;
	border:0;
	text-align:center;
	display:table-cell; vertical-align:middle;
	padding:5px;
	background: #fff;
}
.image_wrap img {
	max-width:100%; max-height:100%;
}
.marked {
	background: #fbf8e9;
}
button.thoughtbot {
	background-color: #38a314;
	border: 1px solid #38a314;
	color: #fff;
	font: bold 12px "Verdana", "Lucida Grande", Sans-Serif;
	padding: 10px;
	text-align: center;
	text-shadow: none;
}
button.thoughtbot:hover {
	background-color: #2e8a0c;
	cursor: pointer; 
}
button.thoughtbot2 {
	background-color: #00b7e2;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00b7e2), color-stop(50%, #00a8cf), color-stop(50%, #0197ba), color-stop(100%, #028eaf));
	background-image: -webkit-linear-gradient(top, #00b7e2 0%, #00a8cf 50%, #0197ba 50%, #028eaf 100%);
	background-image: -moz-linear-gradient(top, #00b7e2 0%, #00a8cf 50%, #0197ba 50%, #028eaf 100%);
	background-image: -ms-linear-gradient(top, #00b7e2 0%, #00a8cf 50%, #0197ba 50%, #028eaf 100%);
	background-image: -o-linear-gradient(top, #00b7e2 0%, #00a8cf 50%, #0197ba 50%, #028eaf 100%);
	background-image: linear-gradient(top, #00b7e2 0%, #00a8cf 50%, #0197ba 50%, #028eaf 100%);
	border: 1px solid #017f9e;
	border-radius: 0px;
	color: #fff;
	font: bold 14px/1 "Verdana", "Lucida Grande", Sans-Serif;
	padding: 10px;
	text-align: center;
	text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);
}
button.thoughtbot2:hover {
	background-color: #01c6f4;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #02cfff), color-stop(50%, #01c6f4), color-stop(50%, #01b4de), color-stop(100%, #00a8cf));
	background-image: -webkit-linear-gradient(top, #02cfff 0%, #01c6f4 50%, #01b4de 50%, #00a8cf 100%);
	background-image: -moz-linear-gradient(top, #02cfff 0%, #01c6f4 50%, #01b4de 50%, #00a8cf 100%);
	background-image: -ms-linear-gradient(top, #02cfff 0%, #01c6f4 50%, #01b4de 50%, #00a8cf 100%);
	background-image: -o-linear-gradient(top, #02cfff 0%, #01c6f4 50%, #01b4de 50%, #00a8cf 100%);
	background-image: linear-gradient(top, #02cfff 0%, #01c6f4 50%, #01b4de 50%, #00a8cf 100%);
	cursor: pointer; 
}
.plans_container {
	padding:10px;
}
#bill_total {
	font-size:14px;
	font-family: "Verdana", "Lucida Grande", Sans-Serif;
}
.bill_info_container {
	padding:15px;
	font-size:14px;
	font-family: "Verdana", "Lucida Grande", Sans-Serif;
}
#terms_container .header {
	font-size: 16px;
	font-weight: bold;
	font-family: 'oxygen';
	margin-bottom: 10px;
}
#terms_container .content {
	font-size: 14px;
	font-family: 'oxygen';
	margin-bottom: 10px;
}
#terms_container .list {
	font-size: 14px;
	font-family: 'oxygen';
	margin-left: 5px;
}
#terms_container .list.last {
	margin-bottom: 10px;
}
/* AVAILABLE */
.plan_tbl.available {
    border: solid #ccc 1px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background: #fff;
} 
.plan_tbl.available td, .plan_tbl.available th {
    padding: 3px; 
}
.plan_tbl.available th {
	background-color: #ddd;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));
    background-image: -webkit-linear-gradient(top, #eee, #ddd);
    background-image:    -moz-linear-gradient(top, #eee, #ddd);
    background-image:     -ms-linear-gradient(top, #eee, #ddd);
    background-image:      -o-linear-gradient(top, #eee, #ddd);
    background-image:         linear-gradient(top, #eee, #ddd);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;  
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;        
    border-top: none;
    text-shadow: 0 1px 0 rgba(255,255,255,.5); 
}
.plan_tbl.available td:first-child, .plan_tbl.available th:first-child {
    border-left: none;
}
.plan_tbl.available th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}
.plan_tbl.available th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}
.plan_tbl.available th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}
.plan_tbl.available .header {
	text-align:left;
	font-size:18px;
	padding:10px;
	color:#444;
	border-bottom:1px solid #ccc;
}
.plan_tbl.available .body {
	font-size:13px;
	padding:10px;
	color:#666;
	background:#f9f9f9;
	-moz-border-radius: 0 0 6px 6px;
    -webkit-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
}
.plan_tbl.available .body div.included {
	font-size:10px;
	padding-top:3px;
	color:#999;
}
/* DISABLED */
.plan_tbl.disabled {
    border: solid #eee 1px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background: #fff;
} 
.plan_tbl.disabled td, .plan_tbl.disabled th {
    padding: 3px; 
}
.plan_tbl.disabled th {
	background-color: #ddd;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#e9e9e9));
    background-image: -webkit-linear-gradient(top, #f9f9f9, #e9e9e9);
    background-image:    -moz-linear-gradient(top, #f9f9f9, #e9e9e9);
    background-image:     -ms-linear-gradient(top, #f9f9f9, #e9e9e9);
    background-image:      -o-linear-gradient(top, #f9f9f9, #e9e9e9);
    background-image:         linear-gradient(top, #f9f9f9, #e9e9e9);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;  
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;        
    border-top: none;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.plan_tbl.disabled td:first-child, .plan_tbl.disabled th:first-child {
    border-left: none;
}
.plan_tbl.disabled th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}
.plan_tbl.disabled th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}
.plan_tbl.disabled th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}
.plan_tbl.disabled .header {
	text-align:left;
	font-size:18px;
	padding:10px;
	color:#999;
	border-bottom:1px solid #e1e1e1;
}
.plan_tbl.disabled .body {
	font-size:13px;
	padding:10px;
	color:#bbb;
	background:#f9f9f9;
	-moz-border-radius: 0 0 6px 6px;
    -webkit-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
}
.plan_tbl.disabled .body div.included {
	font-size:10px;
	padding-top:3px;
	color:#bbb;
}
/* RECOMMENDED */
.plan_tbl.recommended {
    border: solid #6dda88 1px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background: #fff;
} 
.plan_tbl.recommended td, .plan_tbl.recommended th {
    padding: 3px; 
}
.plan_tbl.recommended th {
	background: #e5f5e9;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#e5f5e9), to(#cff5d8));
    background-image: -webkit-linear-gradient(top, #e5f5e9, #cff5d8);
    background-image:    -moz-linear-gradient(top, #e5f5e9, #cff5d8);
    background-image:     -ms-linear-gradient(top, #e5f5e9, #cff5d8);
    background-image:      -o-linear-gradient(top, #e5f5e9, #cff5d8);
    background-image:         linear-gradient(top, #e5f5e9, #cff5d8);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;  
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;        
    border-top: none;
    text-shadow: 0 1px 0 rgba(255,255,255,.5); 
}
.plan_tbl.recommended td:first-child, .plan_tbl.recommended th:first-child {
    border-left: none;
}
.plan_tbl.recommended th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}
.plan_tbl.recommended th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}
.plan_tbl.recommended th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}
.plan_tbl.recommended .header {
	text-align:left;
	font-size:18px;
	padding:10px;
	color:#06661e;
	border-bottom:1px solid #6dda88;
}
.plan_tbl.recommended .body {
	font-size:13px;
	padding:10px;
	color:#666;
	background:#f9f9f9;
	-moz-border-radius: 0 0 6px 6px;
    -webkit-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
}
.plan_tbl.recommended .body div.included {
	font-size:10px;
	padding-top:3px;
	color:#999;
}
.billing_terms {
	margin-top:15px;
	text-align:right;
	font-size:12px;
	font-family: "Verdana", "Lucida Grande", Sans-Serif;
}
.billing_terms a {
	color: #03a1dc;
	text-decoration: underline;
}
.billing_terms a:visited {
	color: #03a1dc;
	text-decoration: underline;
}
.billing_terms a.delete_account {
	color: #cc0433;
	text-decoration: underline;
}
.message-box, .validation-message-box { 
	padding: 5px;
	color:#000;
	margin:5px auto;
	text-shadow: 0px 1px 2px #fff;
	padding-left: 10px;
	word-wrap: break-word;
}
.validation-message-box li { 
	list-style-type: none;
}
.message-box a {
	font:12px "Verdana", "Lucida Grande", Sans-Serif;
	color:#0095cd;
	text-decoration:none;
}
.message-box a:hover,.message-box a:active {
	text-decoration:underline;
}
.getting_started { 
	text-align: center;
	padding: 5px;
	color:#000;
	margin:5px auto;
	text-shadow: 0px 1px 2px #fff;
}
.clean { background-color: #efefef; border: 1px solid #dedede; padding:10px; }
.info  { background-color: #f7fafd; border: 1px solid #b5d3ff; padding:10px; }
.ok    { background-color: #d7f7c4; border: 1px solid #82cb2f; padding:10px; }
.alert { background-color: #fef5be; border: 1px solid #fdd425; padding:10px; }
.err   { background-color: #fde6e8; border: 1px solid #ffcccc; padding:10px; }
.hide  { display:none; }
.boxed_content {
	border: solid 1px #d3d3d3;
	padding: 15px;
    background:#fff;
}
#profile_pic {
	width: 150px;
  	height: 150px;
  	border-radius: 25px;
  	overflow: hidden;
  	border: solid 1px #d3d3d3;
}
#profile_pic img {
	height: auto;
	width: 100%;
}
.purchase_order, .transfer_note, .price_book {
	background:#fff;
	padding:20px;
	/*
    -moz-box-shadow: 0 0 5px #888;
	-webkit-box-shadow: 0 0 5px #888;
	box-shadow: 0 0 5px #888; */
}
.textbox_underline {
	outline-width:0;
	width:425px;
	background:#fff;
	border:0px;
	border-bottom: 1px solid #ddd;
	font:12px "Verdana", "Lucida Grande", Sans-Serif;
}
#ship_to {
	outline-width:0;
	width:425px;
	background:#fff;
	border:0px;
}
select {
   border: 1px solid #ccc;
   height: 20px;
}

.styled-select select {
	font:bold 12px "Verdana", "Lucida Grande", Sans-Serif;
   	background: transparent;
   	width: 308px;
   	padding: 3px;
   	padding-left: 5px;
   	border: 0;
   	border-radius: 0;
   	height: 32px;
   	-webkit-appearance: none;
}
.styled-select {
    width: 308px;
   	height: 32px;
   	overflow: hidden;
   	background: url('../images/select_arrow.png') no-repeat right #fff;
   	border: 1px solid #ccc;
}
.styled-select-round select {
	background: transparent;
   	-webkit-border-radius:5px;
   	-moz-border-radius:5px;
   	border-radius:5px;
   	padding:3px;
   	padding-left: 5px;
   	border: 0;
   	border-radius: 0;
   	height:32px;
   	-webkit-appearance: none;
}
.styled-select-round {
   	height: 32px;
   	overflow: hidden;
   	background: url('../images/select_arrow.png') no-repeat right;
   	border: 1px solid #ccc;
   	-webkit-border-radius:5px;
   	-moz-border-radius:5px;
   	border-radius:5px;
}
hr.style-one {
    border: 0;
    height: 1px;
    background: #333;
    background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); 
    background-image:    -moz-linear-gradient(left, #ccc, #333, #ccc); 
    background-image:     -ms-linear-gradient(left, #ccc, #333, #ccc); 
    background-image:      -o-linear-gradient(left, #ccc, #333, #ccc); 
}
hr.style-two {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
}
hr.style-three {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.negative_variance {
    color: red;
    font-weight: bold;
}
.positive_variance {
    color: #529f1f;
    font-weight: bold;
}
.notepad, .notepad:before, .notepad:after {
  background-color: white;
  background-image: -webkit-linear-gradient(#f6abca 1px, transparent 1px), -webkit-linear-gradient(#f6abca 1px, transparent 1px), -webkit-linear-gradient(#e8e8e8 1px, transparent 1px);
  background-image: -moz-linear-gradient(#f6abca 1px, transparent 1px), -moz-linear-gradient(#f6abca 1px, transparent 1px), -moz-linear-gradient(#e8e8e8 1px, transparent 1px);
  background-image: -o-linear-gradient(#f6abca 1px, transparent 1px), -o-linear-gradient(#f6abca 1px, transparent 1px), -o-linear-gradient(#e8e8e8 1px, transparent 1px);
  background-image: linear-gradient(#f6abca 1px, transparent 1px), linear-gradient(#f6abca 1px, transparent 1px), linear-gradient(#e8e8e8 1px, transparent 1px);
  background-size: 1px 1px, 1px 1px, 23px 23px;
  background-repeat: repeat-y, repeat-y, repeat;
  background-position: 22px 0, 24px 0, 0 50px;
  border-radius: 2px;
  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 4px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 4px rgba(0, 0, 0, 0.5);
}
 
.notepad {
  position: relative;
  margin: 0;
  padding: 0 23px 14px 15px;
  line-height: 23px;
  font-size: 11px;
  color: #666;
}
.notepad p, .notepad blockquote {
  margin-bottom: 23px;
}
.notepad :last-child {
  margin-bottom: 0;
}
.notepad:before, .notepad:after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 100%;
  left: 3px;
  right: 3px;
  margin-top: -2px;
  height: 4px;
  background-size: 1px 1px, 1px 1px, 0 0;
}
.notepad:before {
  z-index: -2;
  left: 6px;
  right: 6px;
  height: 6px;
  background-color: #eee;
}
 
.notepad-heading {
  position: relative;
  margin: 0 -23px 14px -15px;
  height: 38px;
  background: #14466a;
  border-radius: 2px 2px 0 0;
  background-image: -webkit-linear-gradient(top, #226797, #0c3452);
  background-image: -moz-linear-gradient(top, #226797, #0c3452);
  background-image: -o-linear-gradient(top, #226797, #0c3452);
  background-image: linear-gradient(to bottom, #226797, #0c3452);
  -webkit-box-shadow: inset 0 1px #2f81ad, 0 2px 1px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px black;
  box-shadow: inset 0 1px #2f81ad, 0 2px 1px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px black;
}
.notepad-heading > h1 {
  line-height: 36px;
  font-size: 14px;
  color: white;
  text-align: center;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
}
.notepad-heading:before, .notepad-heading:after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 1px;
  right: 1px;
  height: 0;
  border-top: 1px dashed #617c90;
  border-color: rgba(255, 255, 255, 0.35);
}
.notepad-heading:after {
  bottom: 3px;
  border-color: #071c2c;
  border-color: rgba(0, 0, 0, 0.5);
}
.legend { list-style: none; margin: 0; padding: 0;}
.legend li { float: left; margin-right: 10px; font-size: 10px; padding-top: 5px; }
.legend .box { border: 1px solid #ccc; float: left; width: 12px; height: 12px; margin: 2px; }
.legend .available { background-color: #ffffff; }
.legend .unavailable { background-color: #fbe2e2; }
.legend .today { background-color: beige; }

/* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 40%; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 45% 10px 10px; }

.more_functions ul { display: none; } /* Hide before plugin loads */
.more_functions ul.dropit-submenu {
    background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
	background: -moz-linear-gradient(top,  #000,  #444);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
    padding: 6px 0;
    margin: 3px 0 5px 1px;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
       -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
            box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
    text-align: center;
}
.more_functions ul.dropit-submenu:after {
    content: "";
    width:0px;
    height:0px;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:5px solid #444;
    position:absolute;
    bottom:-5px; 
    left: 50%;
    margin-left: -5px;
}  
.more_functions ul.dropit-submenu a {
    display: block;
    font: 12px "Verdana", "Lucida Grande", Sans-Serif;
	text-shadow: 1px 1px #000;
    line-height: 25px;
    color: #d7d7d7;
    padding: 0 18px;
    text-decoration: none;
}
.more_functions ul.dropit-submenu a:hover {
    background: #f34555;
    color: #fff;
    text-decoration: none;
}

.select_sales_person_list ul { display: none; } /* Hide before plugin loads */
.select_sales_person_list ul.dropit-submenu {
    background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
	background: -moz-linear-gradient(top,  #000,  #444);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
    padding: 6px 0;
    margin: 3px 0 5px 1px;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
       -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
            box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
    text-align: left;
    min-width: 150px;
}
.select_sales_person_list ul.dropit-submenu:after {
    content: "";
    width:0px;
    height:0px;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:5px solid #444;
    position:absolute;
    bottom:-5px; 
    left: 15%;
    margin-left: -5px;
}  
.select_sales_person_list ul.dropit-submenu a {
    display: block;
    font: 12px "Verdana", "Lucida Grande", Sans-Serif;
	text-shadow: 1px 1px #000;
    line-height: 25px;
    color: #d7d7d7;
    padding: 0 18px;
    text-decoration: none;
}
.select_sales_person_list ul.dropit-submenu a:hover {
    background: #f34555;
    color: #fff;
    text-decoration: none;
}

.onoffswitch {
    position: relative; width: 70px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 1px solid #999999; border-radius: 5px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 20px; padding: 0; line-height: 20px;
    font-size: 12px; color: white; font-family: "Verdana", "Lucida Grande", Sans-Serif; font-weight: bold;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "ON";
    padding-left: 8px;
    background-color: #67CC2D; color: #FFFFFF;
}
.onoffswitch-inner:after {
    content: "OFF";
    padding-right: 8px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}
.onoffswitch-switch {
    display: block; width: 12px; margin: 4px;
    background: #FFFFFF;
    border: 1px solid #999999; border-radius: 5px;
    position: absolute; top: 0; bottom: 0; right: 46px;
    -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px;
}


/* =========================================================
   STANDARD FILTER / SEARCH UI
   Shared across Sales History, Customers, Products,
   Suppliers, and Reports filter/search panels.
   Visual reference: Sales History filter panel.
   Extracted 2026-09-18 from history.php so every page using
   these classes stays visually identical without duplicating
   this CSS per page. Each page still supplies its own
   grid-template-columns (field count/roles differ per page).
   ========================================================= */

.history-filter {
	margin-top: 20px;
	width: 100%;
}

.history-filter-grid {
	display: grid;
	gap: 14px;
	width: 100%;
}

.history-filter-field {
	min-width: 0;
	position: relative;
}

.history-filter-field label {
	display: block;
	margin: 0 0 6px 1px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	color: #495057;
}

.history-filter-field input,
.history-filter-field select {
	display: block;
	width: 100%;
	min-width: 0;
	height: 40px;
	padding: 6px 10px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	background-color: #ffffff;
	border: 1px solid #ced4da;
	border-radius: 4px;
	box-sizing: border-box;
}

.history-filter-field input:focus,
.history-filter-field select:focus {
	border-color: #86b7fe;
	outline: 0;
	box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.12);
}

.history-filter-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	flex-wrap: wrap;
}

.history-filter-actions .btn {
	min-width: 78px;
}

/* Type-ahead suggestion list for a .history-filter-field that
   wraps a text input + hidden id field (Customer search etc.). */
.history-filter-ac-wrap {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 1000;
}

.history-filter-ac-wrap ul.ac_list {
	display: block;
	list-style: none;
	margin: 4px 0 0 0;
	padding: 0;
	background-color: #ffffff;
	border: 1px solid #ced4da;
	border-radius: 4px;
	max-height: 240px;
	overflow-y: auto;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.history-filter-ac-wrap ul.ac_list > li {
	padding: 8px 10px;
	font-size: 14px;
	cursor: pointer;
}

.history-filter-ac-wrap ul.ac_list > li:hover,
.history-filter-ac-wrap ul.ac_list > li:focus {
	background-color: #f2f2f2;
	outline: 0;
}


/* ---- TABLET ---- */

@media (max-width: 991px) {

	.history-filter-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px 12px;
	}

	.history-filter-fullwidth {
		grid-column: 1 / -1;
	}
}


/* ---- MOBILE ---- */

@media (max-width: 767px) {

	.history-filter {
		margin-top: 18px;
	}

	.history-filter-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 13px 10px;
	}

	.history-filter-fullwidth {
		grid-column: 1 / -1;
	}

	.history-filter-field label {
		margin-bottom: 5px;
		font-size: 12px;
	}

	.history-filter-field input,
	.history-filter-field select {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		height: 44px;
		min-height: 44px;
		padding: 6px 10px;
		font-size: 16px;
		box-sizing: border-box;
	}

	/*
	 * iPhone / Safari date inputs
	 * Keep same height and alignment as other controls.
	 */
	.history-filter-field input[type="date"] {
		display: block;
		width: 100%;
		height: 44px !important;
		min-height: 44px !important;
		max-height: 44px !important;

		padding: 6px 10px !important;

		line-height: 30px;
		font-size: 16px;

		text-align: left;

		background-color: #fff;
		border: 1px solid #ced4da;
		border-radius: 4px;

		-webkit-appearance: none;
		appearance: none;
		box-sizing: border-box;
	}

	.history-filter-field input[type="date"]::-webkit-date-and-time-value {
		text-align: left;
		margin: 0;
	}

	.history-filter-field input[type="date"]::-webkit-datetime-edit {
		padding: 0;
	}

	.history-filter-field input[type="date"]::-webkit-calendar-picker-indicator {
		margin: 0;
		padding: 0;
	}

	.history-filter-actions {
		margin-top: 16px;
		gap: 8px;
	}

	.history-filter-actions .btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 82px;
		min-height: 42px;
	}
}


/* ---- VERY SMALL MOBILE ---- */

@media (max-width: 360px) {

	.history-filter-grid {
		grid-template-columns: 1fr;
	}

	.history-filter-fullwidth {
		grid-column: auto;
	}
}

/* =========================================================
   STANDARD DOCUMENT FORM UI  (.erp-doc*)
   Shared by document entry screens (Purchase Order, ...).
   Visual reference: the Invoice screen (invoice_new.php) --
   every value below is taken from that page's own rules so a
   document screen using these classes looks like Invoice.
   invoice_new.php itself still carries its original inline
   rules and does not use these classes (yet).

   Markup:
   .container-fluid > .row > .col-sm-2 + .col-sm-8 + .col-sm-2
     .erp-doc                          card
       .erp-doc-head                   (optional wrapper, see below)
         h1.erp-doc-title              top-right document title
         h3.erp-doc-brand              company name / logo slot
       .erp-doc-address > div*         address lines
       .erp-doc-body
         table.erp-doc-fields          label | value rows
         h4.erp-doc-section            "Supplier", "Products"...
         .erp-doc-party                name/address inputs
         .table_link                   "Add Product" links
         .erp-doc-items-scroll > table.erp-doc-items
         table.erp-doc-totals          spacer | label | value
         .erp-doc-remarks > textarea
   ========================================================= */

.erp-doc {
	position: relative;
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.125);
	border-radius: 0.25rem;
}

.erp-doc .form-control {
	font-size: 16px;
}

.erp-doc-title {
	position: absolute;
	top: 20px;
	right: 30px;
	z-index: 2;
	margin: 0;
	padding: 0;
	font-size: 40px;
	line-height: 1.1;
	font-weight: 600;
	text-align: right;
}

.erp-doc-brand {
	max-width: 55%;
	margin: 20px 0 0 25px;
}

/* Title + company name as one header row: same top-right title as
   Invoice, but the company name (text, any length) can never run
   under a long title -- it wraps below it when space runs out. */
.erp-doc-head {
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 8px 16px;
	padding: 20px 30px 0 25px;
}

.erp-doc-head .erp-doc-title {
	position: static;
	flex: 0 0 auto;
}

.erp-doc-head .erp-doc-brand {
	flex: 1 1 160px;
	max-width: none;
	min-width: 0;
	margin: 0;
	overflow-wrap: anywhere;
}

.erp-doc-address {
	padding-left: 25px;
}

.erp-doc-address > div {
	padding-top: 0.5rem;
	font-size: 16px;
}

.erp-doc-address > div:first-child {
	padding-top: 1.5rem;
}

.erp-doc-body {
	padding: 4rem 1.25rem 1rem;
}

/* Label | value rows (Status, Number, Date, ...) */
.erp-doc-fields {
	width: 100%;
}

.erp-doc-fields > tbody > tr > td {
	padding: 5px;
	font-size: 16px;
	vertical-align: top;
}

.erp-doc-fields > tbody > tr > td:first-child {
	width: 35%;
	padding-top: 8px;
}

.erp-doc-section {
	margin-top: 1.5rem;
}

/* Party (customer / supplier) name + address inputs */
.erp-doc-party {
	padding: 8px 5px 5px;
}

.erp-doc-party .form-control + .form-control,
.erp-doc-party .form-control + div + .form-control {
	margin-top: 0.5rem;
}

.erp-doc .table_link a {
	font-size: 16px;
}

/* Line items */
.erp-doc-items-scroll {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

.erp-doc-items {
	width: 100%;
	min-width: 760px;
	margin-bottom: 0;
	table-layout: fixed;
}

.erp-doc-items > thead > tr > th {
	font-size: 18px;
	white-space: nowrap;
}

.erp-doc-items > tbody > tr > td {
	vertical-align: middle;
	line-height: 1.2;
}

.erp-doc-items input.form-control {
	width: 100%;
	min-width: 0;
	margin: 0;
	box-sizing: border-box;
}

.erp-doc-items .erp-col-item   { width: 380px; }
.erp-doc-items .erp-col-code   { width: 130px; }
.erp-doc-items .erp-col-desc   { width: 250px; }
.erp-doc-items .erp-col-price  { width: 120px; }
.erp-doc-items .erp-col-qty    { width: 100px; }
.erp-doc-items .erp-col-total  { width: 120px; }
.erp-doc-items .erp-col-action { width: 40px; }

/* Totals: spacer | label | value */
.erp-doc-totals {
	width: 100%;
	margin-top: 20px;
	table-layout: auto;
}

.erp-doc-totals td {
	white-space: nowrap;
}

.erp-doc-totals .totals-spacer {
	width: 100%;
}

.erp-doc-totals .totals-label {
	width: 1%;
	padding: 5px 8px 5px 5px;
	text-align: right;
	font-weight: bold;
	font-size: 18px;
}

.erp-doc-totals .totals-value {
	width: 1%;
	padding: 5px 10px 5px 8px;
	text-align: right;
	font-size: 18px;
}

.erp-doc-remarks {
	padding: 5px;
}

/* ---- MOBILE ---- */

@media (max-width: 767px) {

	.erp-doc-title {
		right: 18px;
		font-size: 28px;
	}

	.erp-doc-brand {
		max-width: 55%;
		margin: 20px 0 0 18px;
	}

	.erp-doc-head {
		padding: 20px 18px 0;
	}

	.erp-doc-address {
		padding: 12px 18px 0;
	}

	.erp-doc-address > div,
	.erp-doc-address > div:first-child {
		padding-top: 2px;
		font-size: 12px;
		line-height: 1.35;
	}

	.erp-doc-body {
		padding: 38px 18px 18px;
	}

	.erp-doc-fields > tbody > tr > td:first-child {
		width: 38%;
		padding: 6px 10px 6px 0;
		font-size: 14px;
		vertical-align: middle;
	}

	.erp-doc-fields > tbody > tr > td:nth-child(2) {
		width: 62%;
		padding: 6px 0;
		font-size: 14px;
		vertical-align: middle;
	}

	.erp-doc .form-control {
		font-size: 16px;
		min-height: 42px;
	}

	.erp-doc-section {
		margin-top: 24px;
		margin-bottom: 10px;
	}

	.erp-doc-party,
	.erp-doc-remarks {
		padding: 6px 10px 6px 0;
	}

	.erp-doc .table_link {
		line-height: 1.8;
	}

	.erp-doc-items {
		width: 760px;
	}
}


/* =========================================================
   STANDARD HISTORY TABLE  (.erp-history*)
   Expandable history listing: a clickable summary row, then a
   hidden detail row. Visual reference: Sales History
   (history.php keeps its own original rules).
   ========================================================= */

.erp-history > tbody > tr.erp-history-row {
	cursor: pointer;
	font-size: 14px;
}

.erp-history > tbody > tr.erp-history-row:nth-of-type(4n+1),
.erp-history > tbody > tr.erp-history-row:nth-of-type(4n+1) > td {
	background-color: #ffffff !important;
	--bs-table-accent-bg: #ffffff !important;
}

.erp-history > tbody > tr.erp-history-row:nth-of-type(4n+3),
.erp-history > tbody > tr.erp-history-row:nth-of-type(4n+3) > td {
	background-color: #f2f2f2 !important;
	--bs-table-accent-bg: #f2f2f2 !important;
}

.erp-history > tbody > tr.erp-history-detail {
	cursor: default;
}

.erp-history > tbody > tr.erp-history-detail > td {
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	background: #eee;
	--bs-table-accent-bg: #eee;
}

.erp-history-detail-body {
	padding: 1rem;
	font-size: 14px;
}

.erp-history-actions {
	margin-top: 3rem;
}

.erp-history-actions .btn {
	margin: 0 4px 4px 0;
}


/* =========================================================
   STANDARD SETTINGS UI  (.settings-*)
   Settings page and its sub-pages (Settings -> Outlets).
   Moved unchanged from setup.php's inline <style> so every
   settings screen shares one definition.
   ========================================================= */

.settings-page {
	max-width: 980px;
	margin: 0 auto;
	padding: 28px 24px 60px;
}

.settings-page-header {
	margin-bottom: 28px;
}

.settings-page-header h2 {
	margin: 0 0 6px;
	font-size: 24px;
	font-weight: 600;
	color: #212529;
}

.settings-page-header p {
	margin: 0;
	font-size: 14px;
	color: #6c757d;
}

.settings-card {
	margin-bottom: 20px;
	overflow: hidden;
	background: #fff;
	border: 1px solid #dee2e6;
	border-radius: 8px;
}

.settings-card-header {
	padding: 18px 22px;
	background: #fafafa;
	border-bottom: 1px solid #e9ecef;
}

.settings-card-header h5 {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 600;
	color: #212529;
}

.settings-card-header p {
	margin: 0;
	font-size: 13px;
	color: #6c757d;
}

.settings-card-body {
	padding: 22px;
}

.settings-row {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	padding: 14px 0;
	border-bottom: 1px solid #f0f0f0;
}

.settings-row:first-child {
	padding-top: 0;
}

.settings-row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.settings-label {
	padding-top: 7px;
	font-size: 14px;
	font-weight: 500;
	color: #343a40;
}

.settings-help {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: normal;
	line-height: 1.4;
	color: #868e96;
}

.settings-field {
	width: 100%;
	max-width: 520px;
}

.settings-field .form-control {
	width: 100%;
	max-width: 100%;
}

.settings-field-short {
	max-width: 180px;
}

.settings-message {
	display: none;
	margin-bottom: 16px;
	padding: 10px 12px;
	border-radius: 6px;
	font-size: 13px;
}

.settings-message.err {
	display: block;
	color: #842029;
	background: #f8d7da;
	border: 1px solid #f5c2c7;
}

.settings-actions {
	display: flex;
	justify-content: flex-end;
	padding-top: 8px;
}

.settings-actions .save {
	min-width: 110px;
}

@media (max-width: 767px) {

	.settings-page {
		padding: 20px 14px 40px;
	}

	.settings-row {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.settings-label {
		padding-top: 0;
	}

	.settings-field,
	.settings-field-short {
		max-width: none;
	}

	.settings-actions {
		justify-content: stretch;
	}

	.settings-actions .save {
		width: 100% !important;
	}
}


/* =========================================================
   STANDARD AUTOCOMPLETE LISTS
   Same light theme as the main navigation dropdowns
   (index.php: white menu, #212529 text, #f2f2f2 highlight) and
   the history filter type-ahead above. Covers both widgets used
   on the document forms (Invoice, Purchase Order):
     .ac_results  jQuery autocomplete plugin (products, suppliers)
     .ac_list     Invoice customer search list (#userList)
   Selectors are one level more specific than css/autocomplete.css
   (loaded after this file) so they win over its dark defaults.
   Widths stay with each page / plugin call.
   ========================================================= */

div.ac_results {
	padding: 0;
	margin-top: 4px;
	background-color: #ffffff;
	border: 1px solid #ced4da;
	border-radius: 4px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

div.ac_results > ul {
	background-color: #ffffff;
	color: #212529;
}

div.ac_results > ul > li,
ul.ac_list > li {
	padding: 10px;
	font-family: inherit;
	font-size: 18px;
	line-height: 24px;
	color: #212529;
	background-color: #ffffff;
	cursor: pointer;
}

div.ac_results > ul > li.ac_odd {
	background-color: #ffffff;
	color: #212529;
}

div.ac_results > ul > li.ac_over,
ul.ac_list > li:hover,
ul.ac_list > li:focus {
	background-color: #f2f2f2;
	color: #212529;
	outline: 0;
}

ul.ac_list {
	margin: 4px 0 0 0;
	background-color: #ffffff;
	border: 1px solid #ced4da;
	border-radius: 4px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

/* .ac_results_fit: a list opened with the plugin option width: 0 gets
   the input's CONTENT width (jQuery .width()), i.e. 2 x (0.75rem padding
   + 1px border) narrower than a .form-control input. Add that back so
   the list's edges line up exactly with the input (Invoice Item field).
   Tablet/desktop only -- phones use the full-width rule below. */
@media (min-width: 768px) {

	div.ac_results.ac_results_fit {
		box-sizing: content-box;
		padding: 0 0.75rem;
	}

	div.ac_results.ac_results_fit > ul {
		width: auto;
		margin: 0 -0.75rem;
	}
}

/* Phones: the plugin places the list at the input's left (inline style)
   with a fixed pixel width, which could run off the screen and make the
   whole page scroll sideways. Keep the plugin's left edge (the input is
   the anchor) and only let the right edge stop 8px short of the screen. */
@media (max-width: 767px) {

	div.ac_results {
		right: 8px;
		width: auto !important;
	}

	div.ac_results > ul {
		width: 100% !important;
	}
}

/* =========================================================
   STANDARD PAGING ROW  (tr.pagination_row)
   The Prev / Page x of y / Next row at the foot of a list table
   (Products, Customers, Suppliers, Categories, UOM, Outlets).
   Inside .table-striped it otherwise picked up the grey or white
   stripe depending on how many rows were above it; always white,
   no stripe or hover tint, like the pagers outside a table.
   ========================================================= */

.table > tbody > tr.pagination_row,
.table > tbody > tr.pagination_row > td,
.table > tbody > tr.pagination_row:hover > td {
	background-color: #ffffff !important;
	--bs-table-accent-bg: transparent !important;
	box-shadow: none !important;
}