@import url("/WebForm/resources/css/mobile.css");

body {
    font-family: 'Akkurat',sans-serif;
	font-size: 12px;
    color: #525252;
}
table {
    width: 100%;
}
fieldset {
    display: inline-block;
    zoom: 1;
    vertical-align: top;
    width: 49%;
    border: none;
    padding: 0;
}
ul {
    margin: 5px 0;
}
ul, li {
	list-style-type: none;
	padding: 0;
}
legend span {
	padding-left: 18px;
}
input, textarea {
    padding: 5px;
    font-size: 1em;
}
select {
    padding: 5px;
    font-size: 1em;
	height: 28px;
}
input[type="submit"] {
	background-image: url('https://portal.bspg.co.nz/js/highslide/graphics/wait24trans.gif');
	background-repeat: no-repeat;
	background-position: 100px 100px;
	cursor: pointer;
	min-width: 140px
}
input.loading {
	background-position: 52px 2px;
}
input[readonly] {
	background-color: transparent;
	border: none;
}
input.logout-btn {
	margin-top: 25px;
}

.btn, .btn:hover, .ui-button, .ui-button:hover {
    white-space: nowrap;
    text-decoration: none;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 3px;
}
.spinner {
    position: absolute;
    top: 150px;
    left: 50%;
    display: block;
    z-index: 151;
}
.iframe-wrapper.loading .spinner, .iframe-wrapper.loading .iframe-overlay {
   display: block;
}
.spinner .fa-spinner {
   position: relative;
   left: -50%;
   font-size: 150px;
   color: #2f333d;
}
.iframe-wrapper {
	position: relative;
}
.iframe-overlay {
	position: absolute;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(240,241,245,0.6);
	z-index: 150;
	display: none;
}
.main-spinner {
    position: relative;
    top: 150px;
    left: 50%;
}
.main-spinner .fa-spinner {
   font-size: 150px;
   color: #2f333d;
}
.pop-spin-wrapper {
    height: 99%;
    position: absolute;
    width: 100%;
    background: #000000;
    opacity: 0.6;
}
.pop-spin {
    width: 300px;
    margin-left: -150px;
    height: 200px;
    padding: 5px;
    border: 0px solid #d0d0d0;
    position: fixed;
    left: 50%;
    top: 25%;
    opacity: 1;
    background-color: Transparent;
    z-index: 1001;
}
.pop-spin .fa {
    font-size: 150px;
    color: #2f333d;
}
.order-table-body {
    min-width: 95%;
    max-width: 98%;
}
.order-table-banner .order-logout-btn {
    margin-top: 25px;
    padding: 8px 16px;
    height: 100%;
}
.order-logout-btn, .order-logout-btn:hover {
    font-size: 1.25em;
    font-weight: 700;
}
.order-table-wrapper {
    margin: 10px;
}
.order-table-header {
    width: 100%;
    clear: both;
}
.order-table-heading {
    display: inline-block;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}
.order-table-title {
    float: left;
    margin-top: 4px;
    width: 54%;
    font-size: 1.75em;
    font-weight: 700;
}    
.order-table-cart {
    float: right;
    margin: 0px!important;
    text-align: right;
    width: 44%;
}
.order-title {
    float: left;
    margin-top: 4px;
    font-size: 2em;
    font-weight: 700;
}
.order-table-header fieldset.contact_table > * {
	margin-top: 4px;
}
.order-table-header fieldset.contact_table label {
	float: left;
	clear: left;
}
.order-table-header fieldset.contact_table > div {
	margin-left: 140px;
}
.order-table-header fieldset.contact_table input {
	max-width: 225px;
}
.order-table-header fieldset.contact_table .save-details {
    color: red;
    text-decoration: none;
}
.order-table-contact, .order-table-delivery {
	width: 49%;
	clear: both;
}
.order-contact-title, .order-delivery-title {
    display: inline-block;
    float: left;
    margin-bottom: 5px;
    margin-top: 5px;
}
.order-contact-title-div, .order-delivery-title-div {
    min-height: 24px;
    margin-bottom: 10px;
}
.order-contact-comment, .order-delivery-comment {
	font-size: 0.7em;
	font-weight: 300;
}
.order-contact-comment i.fa.fa-warning, .order-delivery-comment i.fa.fa-warning {
    margin-left: 10px;
}
.order-table-catalogue {
	display: table;
    table-layout: fixed;
    width: 100%;
}
.order-catalogue-table {
    width: 260px;
    padding-right: 15px;
}
.order-catalogue-table h2 {
    margin-top: 10px;
}
.order-catalogue-search {
    border: 1px solid #e0e0e0;
    padding: 15px;
    padding-right: 0px;
}
.order-catalogue-browse {
	border: 1px solid #e0e0e0;
    margin-top: 20px;
    padding: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.order-catalogue-browse .jstree {
    overflow: hidden;
}
.order-catalogue-search .catalogue-search {
    height: 100% !important;
}
.order-table-footer {
    margin-top: 70px;
    text-align: center;
}
.pay-by-poli {
    display: inherit;
}
.product-list-options {
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 10px;
}
.product-list-options .ui-button {
    padding: 8px 12px;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    border: 0 !important;
}
.product-show-download {
	display: none;
}
.product-list-options .ui-state-active {
    background: #525252;
}
.product-list-options .ui-button.ui-state-active:hover {
    background: #000000;
    color: #e0e0e0;
}
.product-list-wrapper {
    float: left;
    width: 100%;
}
.product-list-wrapper .row.table_headers {
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}
.product-list-wrapper .kit_details {
    background: #ffffff none repeat scroll 0 0;
    border: 1px solid #e0e0e0;
    border-radius: 2px !important;
    color: #525252;
    margin-left: 125px;
	margin-top: 15px;
	margin-bottom: 15px;
    padding: 15px;
	padding-bottom: 20px;
	padding-top: 5px;
    box-shadow: 2px 2px 10px #e0e0e0;
	width: 80%;
}

.product-list-wrapper .alt_details {
    background: #ffffff none repeat scroll 0 0;
    border: 1px solid #e0e0e0;
    border-radius: 2px !important;
    color: #525252;
    margin-left: 125px;
	margin-top: 15px;
	margin-bottom: 15px;
    padding: 15px;
	padding-bottom: 20px;
	padding-top: 5px;
    box-shadow: 2px 2px 10px #e0e0e0;
	width: 80%;
}

.product-list-wrapper .alt_detailsTL {
    background: #ffffff none repeat scroll 0 0;
    border: 1px solid #e0e0e0;
    border-radius: 2px !important;
    color: #525252;
    margin-left: 125px;
	margin-top: 15px;
	margin-bottom: 15px;
    padding: 15px;
	padding-bottom: 20px;
	padding-top: 5px;
    box-shadow: 2px 2px 10px #e0e0e0;
	width: 80%;
	display: none;
}

.product-list-wrapper .kit_details .kit-icon {
    margin-left: 10px;
    margin-right: 10px;
}
.product-list-footer {
	height: 50px;
}
.product-list-footer .catalogue-load.btn {
    padding: 10px 100px;
    font-size: 17px;
    font-weight: 600;
    margin-top: 5px;
    display: inline-block;
}
.product-tile {
    width: 200px;
    float: left;
    padding: 15px !important;
    height: 300px;
    position: relative;
    margin-top: 10px;
    margin-right: 20px;
    box-sizing: content-box;
    border: 1px solid #e0e0e0;
    border-radius: 0px;
    box-shadow: 2px 2px 4px #e0e0e0;
}
.product-tile .stock-desc {
    height: 50px;
    overflow: hidden;
    white-space: normal;
}
.product-tile .product-image {
    width: 100%;
    text-align: left;
    position: relative;
    height: 110px;
}
.product-tile .product-image img {
    width: inherit;
    max-height: 110px;
    max-width: 110px; 
}

div.mainTable {
	border-spacing: 4px;
	border-collapse: separate;
}

.mainTable p.error {
	text-align: right;
	padding-right: 60px;
}

div.row > div {
	display: inline-block;
	*display: inline;
	zoom: 1;
	vertical-align: middle;
}
div.row {
	width: 100%;
}
.cell1, .cell2, .cell3, .cell4, .cell5, .cell6 {
	width: 10%;
	display: inline-block;
	zoom: 1;
	vertical-align: top;
}
.cell.stock-error {
    margin-bottom: 0px;
    margin-top: -10px;
    margin-left: -100px;
}
.cell1 {
	width: 10%;
}
.cell2 {
	width: 30%;
}
.cell4 {
	display: inline-block;
	zoom: 1;
	white-space: nowrap;
}
.cell4#th_terms {
    margin-top: 10px;
}
.cell5 {
	display: inline-block;
	*display: inline;
	white-space: nowrap;
}
.cell6 {
	display: inline-block;
	*display: inline;
	white-space: nowrap;
}
.cell5.stock-price {
    text-align: right;
    margin-right: 5px;
}
.cell5.download-links {
    display: block;
    margin-top: 10px;
}
.cell5.stock-qty-action {
    margin-right: 5px;
}

div.mainTable, label {
	text-decoration: none;
}

div.productOrderTable {
	text-align: left;
	padding-top: 15px;
}
div.row {
    width: 100%;
    line-height: 150%;
}
div.row.th_show div, .row.th_show div span {
    vertical-align: top;
}
.javelinHeader {
	vertical-align: top;
}
div#th_terms {
	width: 184px;
	border-radius: 10px;
	margin-bottom: 5px;
	padding: 10px;
}
.backBtn {
	background-color: rgb(224, 224, 224) !important;
}

.cust-stock-code {
	display: none;
}
.our-stock-code {
	display: inline-block;
}

fieldset {
	border-radius: 5px;
}

div.selected_row {
	border: 1px solid #BBBBBB;
	border-radius: 10px;
}

.extra-elements {
	width: 90%;
	margin: 0 auto;
	margin-bottom: 5px;
	padding: 5px 20px;
}

.save-details {
	text-decoration: underline;
}

/* Customer Select */
.customer-table-body {
    min-width: 95%;
    max-width: 98%;
}
.customer-table-banner {
    margin-top: 25px;
    padding: 8px 16px;
    height: 100%;
}
.customer-table-wrapper {
    margin: 10px;
}
.customer-table-header {
    width: 100%;
    clear: both;
}
.customer-table-heading {
    display: inline-block;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}
.customer-title {
    float: left;
    margin-top: 4px;
    font-size: 2em;
    font-weight: 700;
}
.customer-table-title {
    float: left;
    margin-top: 4px;
    width: 54%;
    font-size: 1.75em;
    font-weight: 700;
}    
.customer-table-title.customer-select::before, .javelinSubheader2.customer-select::before, .span.customer-select::before {
    content: "Customer";
}
.customer-headers {
    border-bottom: 1px solid #e0e0e0;
    padding-top: 5px;
    padding-bottom: 10px;
}

/* Price Div */
.price-div {
	text-align: right;
	position: relative;
	margin-bottom: 40px;
	margin-right: 30px;
	display: table;
	float: right;
}
.price-div > div {
	display: table-row;
}
.price-div label {
	display: table-cell;
	text-align: left;
	min-width: 100px;
	line-height: 24px;
	white-space: nowrap;
	padding-right: 26px;
	font-weight: 300;
    line-height: 200%;
}
.price-div span {
	display: table-cell;
}
.price-div .subtotal-div span {
}
.price-div .total-div {
	margin-top: 4px;
}
.price-div .total-div label {
	font-weight: 600;
	font-size: 17px;
	line-height: 150%;
}

.price-div .total-div span {
	font-weight: 600;
	font-size: 17px;
}

/* Credit Card  */
.creditcard {
	border: 1px solid ;
	border-radius: 5px;
	padding: 10px 10px 15px;
	background-color: #F7F7F7;
	float: left;
	margin-bottom: 20px;
	z-index: 1;
}
.creditcard label {
	display: inline-block;
	width: 100px;
}
.creditcard input {
    line-height: 20px;
    font-size: 14px;
    font-weight: 400;
	margin: 4px 0px;
}
.creditcard-type {
	vertical-align: top;
}

.creditcard-type + label {
	width: 64px;
}

.error {
	white-space: nowrap;
}

.error-div {
	border-color: red;
}

.payment-express-pane {
	background: #FFFFFF;
	padding: 10px 26px;
	border-radius: 8px;
	border: 1px solid #CCC;
	font-size: 10px;
	display: inline-block;
	float: right;
}

.table-layout {
	display: table;
	table-layout: fixed;
	width: 100%;
}
.search-div, .mainTable-wrapper {
	display: table-cell;
}
.search-div {
	width: 260px;
	padding-right: 20px;
}
/* attributes */
.attributes {
    position: relative;
    display: inline;
}

.attributes .attributes_details {
    width: 300px;
    position: absolute;
    right: 0;
    top: -100px;
    display: none;
    box-shadow: 1px 1px 4px #e0e0e0;
    border: 1px solid #e0e0e0;
    padding: 4px 4px;
    z-index: 20;
    background: khaki;
}

.attributes .attributes_show {
    width: 600px;
    position: absolute;
	overflow: auto;
	height: 400px;
    box-shadow: 1px 1px 4px #e0e0e0;
    border: 1px solid #e0e0e0;
    padding: 4px 4px;
    background: khaki;
}

.attributes .attributes_hide {
    width: 200px;
    position: absolute;
	overflow: hidden;
	height: 100px;
}

.attributes-btn {
    font-size: 12px;
    font-weight: 800;
    margin-left: 2px;
    margin-right: 6px;
}

.attributes-key {
	font-weight: bold;
	font-size: 12px !important;
}

.attributes-value {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  font-size: 12px !important;
}

/* shopping cart  */
.shopping-cart {
    position: relative;
    display: inline;
}
.shopping-cart .shopping-cart-btn {
    cursor: pointer;
    padding: 8px 11px;
    font-size: 14px !important;
    font-weight: 700 !important;
    min-width: 150px;
}
.shopping-cart i.fa.fa-shopping-cart {
    padding: 5px;
}
.shopping-cart-btn .num-cart-items, .shopping-cart-btn .total {
    font-size: 14px;
    font-weight: 800;
    margin-left: 4px;
    margin-right: 8px;
}
.shopping-cart .cart-details {
    width: 500px;
    position: absolute;
    right: 0;
    display: none;
    box-shadow: 1px 1px 4px #e0e0e0;
    border: 1px solid #e0e0e0;
    padding: 6px 18px;
    z-index: 20;
    background: white;
}
.shopping-cart a {
	margin: 6px 2px 4px;
	display: inline-block;
}
.shopping-cart ul {
	border: 1px solid #C3C3C3;
	background: white;
	text-align: left;
	width: 100%;
	display: table;
	margin-top: 0;
}
.shopping-cart ul > li {
	display: table-row;
	margin: 0;
}
.shopping-cart ul > li > * {
	vertical-align: middle;
	border-bottom: 1px solid #C3C3C3;
	display: table-cell;
	font-size: 12px;
	padding: 10px;
}
.shopping-cart img.cart-thumbnails {
	max-width: 50px;
	max-height: 50px;
	margin-top: 5px;
	box-shadow: 0 2px 5px #a0a0a0;
}
.shopping-cart .cart-code {
	width: 25%;	
}
.shopping-cart .cart-desc {
	width: 50%;
}
.shopping-cart .cart-qty {
	font-weight: bold;
	padding-right: 20px;
	text-align: right;
	width: 20%;
}
.shopping-cart-order.btn {
    cursor: pointer;
    padding: 8px 12px;
    font-size: 14px !important;
    font-weight: 700 !important;
    float: right;
    min-width: 150px;
    margin-left: 5px;
}
.shopping-cart-order i.fa.fa-lg.fa-caret-right, .shopping-cart-order i.fa.fa-lg.fa-caret-left {
    font-size: 21px;
    padding: 5px;
}
.stock-onhand {
	text-align: center;
}
.warning {
	color: red;
	font-size: 11px;
}
.fa-warning {
    margin: 10px;
}
.jstree-default .jstree-anchor {
    line-height: 24px;
    height: 24px;
    font-size: 13px;
    padding: 3px 12px;
    border-bottom: 1px solid #e0e0e0;
    width: 100%;
}
.jstree-default .jstree-node, .jstree-default .jstree-icon {
    background-image: url();
}
.jstree-default .jstree-node {
    min-height: 30px;
    line-height: 30px;
    margin-left: 15px;
    min-width: 0px;
}
.jstree-anchor {
    display: inline-block;
    color: #666666 !important;
    white-space: nowrap;
    padding: 0 0px 0 0px;
    margin: 0;
    vertical-align: top;
}
.jstree-default > .jstree-striped {
    background: url() left top repeat;
}
.jstree-icon.jstree-themeicon {
    display: none;
}
.jstree-default .jstree-closed > .jstree-ocl {
    position:relative;
}    
.jstree-default .jstree-closed > .jstree-ocl:before {
    content: "\f105";  /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    left:0;
    color:#525252;
    position:absolute;
    top:0;
    font-size: 24px;
    font-weight: 900;
    font-style: normal;
    width: 24px;
    height: 24px;
    background-color: #ffffff;
 }
.jstree-default .jstree-open > .jstree-ocl {
    position:relative;
}    
.jstree-default .jstree-open > .jstree-ocl:before {
    content: "\f107";  /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    left:0;
    color:#525252;
    position:absolute;
    top:0;
    font-size: 24px;
    font-weight: 900;
    font-style: normal;
    width: 24px;
    height: 24px;
    background-color: #ffffff;
}
.jstree-default .jstree-hovered {
    background-color: #666666;
    color: #ffffff !important;
    padding: 3px 12px;
}
.jstree-default .jstree-clicked {
    background: #525252;
    color: #ffffff !important;
    padding: 3px 12px;
}
.jstree-container-ul.jstree-children.jstree-striped {
    background: url();
}
.jstree-icon.jstree-themeicon {
    background-image: url();
    display: none;
}

/* labels */
.order-table-title.catalogue-name:after {
	content: "Catalogue"; 
}
.order-catalogue-search h2:after, .order-catalogue-browse h2:after {
	content: "Catalogue";
}
label.customerName:before { 
     content: "Contact Name"; 
}
label.email:before { 
     content: "Email"; 
}
label.phone:before { 
     content: "Telephone"; 
}
label.mobile:before { 
     content: "Mobile"; 
}
label.sh_cust_ref:before { 
     content: "Order Reference"; 
}
label.costCentre:before { 
    content: "Cost Centre"; 
}
label.comment:before { 
    content: "Comments"; 
}
label.requiredDate:before { 
    content: "Required Date"; 
}
label.campaignQuantity:before { 
    content: "LSM Quantity"; 
}
label.userComment:before { 
    content: "User Comment"; 
}
label.approvalComment:before { 
    content: "Approval Comment"; 
}