/*Dropdown menu animation*/
.gridbutton {
	padding: 28px;						/*Padding equals 2x grid height plus padding all*/
}
.grid {
	display: block;
	width: 4px;							/*This value is 1/5 the padding all*/
	height: 4px;						/*This value is 1/5 the padding all*/
	background: #FFF;					/*This is for the center dot color*/
	color: #FFF;						/*This is for all the dots surrounding it colors*/
	-webkit-transition: all .4s ease-in-out;
  	-moz-transition: all .4s ease-in-out;
  	-ms-transition: all .4s ease-in-out;
  	-o-transition: all .4s ease-in-out;
  	transition: all .4s ease-in-out;
}
.gridbutton .grid {
  	box-shadow: -8px -8px, 0 -8px, 8px -8px, -8px 0, 8px 0, -8px 8px, 0 8px, 8px 8px;	/*This value is 2x the grid height*/
	-webkit-box-shadow: -8px -8px, 0 -8px, 8px -8px, -8px 0, 8px 0, -8px 8px, 0 8px, 8px 8px;
	-moz-box-shadow: -8px -8px, 0 -8px, 8px -8px, -8px 0, 8px 0, -8px 8px, 0 8px, 8px 8px;
}
.gridbutton.close .grid {
  	box-shadow: 0 -8px, 0 -16px, 8px 0, -16px 0, 16px 0, -8px 0, 0 16px, 0 8px;
	-webkit-box-shadow: 0 -8px, 0 -16px, 8px 0, -16px 0, 16px 0, -8px 0, 0 16px, 0 8px;
	-moz-box-shadow: 0 -8px, 0 -16px, 8px 0, -16px 0, 16px 0, -8px 0, 0 16px, 0 8px;
	-webkit-transform: rotate3d(0, 0, 1, -45deg);
  	-moz-transform: rotate3d(0, 0, 1, -45deg);
  	-ms-transform: rotate3d(0, 0, 1, -45deg);
  	-o-transform: rotate3d(0, 0, 1, -45deg);
  	transform: rotate3d(0, 0, 1, -45deg);
}


.fullcontainer {
	min-height: 100%;				/*Min height 100 percent*/
	background-color: #D2DCEB;		/*This is the background color*/
	position: relative;				/*Being used for the container*/
}
#tooltip {
	position: absolute;
	padding: 10px;
	color: #FFFFFF;
	margin: 20px;
	background-color: #EBA505;
	background-color: hsla(42, 96%, 47%, 0.9);
	border-radius: 10px;
	visibility: hidden;
	z-index: 100;
	white-space: nowrap;
	white-space: -moz-nowrap;
}
.navigation {
	position: fixed;
	z-index: 1;
	background-color: #194B9B;
	line-height: 0px;
	width: 100%;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
}
.navigation li {
	cursor: pointer;
	display: inline-block;
	vertical-align: top;
}
.navigation li:hover, .scrolltotop:hover {
	background-color: #EBA505;
}
.navigation li.currentpage:hover {
	opacity: .8;
}
.bodypadding {
	padding: 70px 10px 10px 10px;	/*Padding equals navigation height plus padding top half*/
}
.footer {
	background-color: #194B9B;		/*This is the primary color*/
	position: absolute;
	bottom: 0px;					/*Being used to hold footer at bottom of page*/
	width: 100%;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
}
.copyrightpadding {
	padding: 20px;
	width: 70%;								
	opacity: 0;						/*Used for footer padding to hide duplicate div*/
}
.copyright {
	color: #FFF;
	padding: 20px;
	opacity: .5;
	display: inline-block;
	width: 70%;
}
.copyrightlogin {
	text-align: center;
	color: #FFF;
	opacity: .5;
}
.fullcontainerlogin {
	background-color: #194B9B;
	position: relative;
	min-height: 100%;
}
.minhlogin {						/*Necessary for login page*/
	min-height: 850px;		/*Needs to be extra tall because error message makes div bigger*/
}
.minh404 {
	min-height: 510px;
}
.login {
	width: 100%;
	position: absolute;
	max-width: 500px;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
	-ms-transform: translateY(-50%) translateX(-50%);
	padding: 20px;
}
.rememberme {
	padding: 10px;
	display: none;
}
.logincontent, .signupcontent, .forgotpasswordcontent, .resetpasswordcontent {
	background-color: #FFF;
	padding: 40px;
	text-align: center;
}
.logincontent input[type=checkbox] {
	vertical-align: middle;
	margin-right: 10px;
}
.login .a0 img {
	display: block;
	margin: 0px auto 20px auto;
	max-width: 100%;
}
.content404 {
	padding: 10px;
	text-align: center;
	max-width: 700px;
    margin: auto;
}
.content404 .block {
	background-color: #194B9B;
	font-family: RalewayBold;
	color: #FFF;
	padding: 50px 10px 50px 10px;
	border-radius: 10px;
	font-size: 1.5em;
}
.button404 {
	background-color: #EBA505;
	color: #FFF;
	border-radius: 10px;
	padding: 10px;
}

.align404 {
	width: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
	-ms-transform: translateY(-50%) translateX(-50%);
}

.logintab, .signuptab {
	width: 50%;
	display: inline-block;
	border-radius: 10px 10px 0px 0px;
}
.forgotpasswordtab {
    border-radius: 0px 0px 10px 10px;
}
.resetpasswordtab {
    border-radius: 10px 10px 0px 0px ;
}
.tabheader {
    padding: 20px;
    text-align: center;
    background-color: #D2DCEB;
	cursor: pointer;
}
.tabheader.active {
	background-color: #FFF;
}
.signupcontent, .forgotpasswordcontent, .resetpasswordcontent, .resetpasswordtab {
	display: none;
}
.resetpasswordcontent {
	border-radius: 0px 0px 10px 10px;
	margin-bottom: 20px;
}
.loginhero {
    height: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
	background-blend-mode: color-burn, overlay;
}

.hw100p {
	height: 100%;
	width: 100%;
}
.w100p {
	width: 100%;
}
.fl {
	float: left;
}
.mb {
	margin-bottom: 20px;
}
.submitsecondary {
	width: 100%;
	background-color: #EBA505;
	color: #FFF;
}
.submitsecondary img {
	vertical-align: bottom;
	padding-right: 10px;
}
.submitsecondary:hover {
	background-color: #194B9B;
}
.supporting {
	vertical-align: bottom;
	padding-right: 8px;
	height: 20px;
}
.closenotification {		/*Float right*/
	vertical-align: bottom;
	margin-left: 10px;
	float: right;
	cursor: pointer;
}

/*GET RID OF THIS LATER*/
.pah {
	padding: 10px;
}
.pa {
	padding: 20px;
}
.dib {
	display: inline-block;
}
.span2 {
	width: 50%;
}
.span3 {
	width: 33%;
}

/*BILL OF LADING*/
.BOLfontstyle {
	font-family: "CalibriRegular";
	color: #000000;
	font-size: 10pt;	
}
.pagecontainer {
	width: 7.5in;
	margin: auto;
}
.BOLheader {
	font-family: "CalibriBold";
	text-transform: uppercase;
	font-size: 9pt;	
}
.BOLbold {
	font-family: "CalibriBold";
}
.BOLpa td {
	padding: 3px;
	vertical-align: top;
}
.BOLdescriptor {
	text-transform: uppercase;
	text-align: right;
	font-family: "CalibriBold";
	width: 1.25in;
	vertical-align: top;
	font-size: 9pt;	
	padding: 5px 3px 3px 3px !important;
}
.BOLsignature {
	min-height: 55px;
	width: 100%;
	position: relative;
}
.BOLsignatures {
	position: relative;
}
.BOLtinytext {
	font-size: 10px;
}
.BOLsignature img {
	position: absolute;
	max-width: 200px;
	min-width: 200px;
	top: 89%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
}
.BOLsignatures img{
    max-height: 40px;
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
}

.bb {
	border: 2px solid #000000;
}
.bbt td {
	border-top: 2px solid #000000;
}
.bbb td {
	border-bottom: 2px solid #000000;
}
.gbb td {
	border-bottom: 1px solid #828C96;
}
.gbb {
	border-bottom: 1px solid #828C96;
}
.gbt {
	border-top: 1px solid #828C96;
}
.gbr {
	border-right: 1px solid #828C96;
}
.gbl {
	border-left: 1px solid #828C96;
}

.BOLp {
	padding: 3px;
}
.bd {
	border-style: dashed;
    border-color: #000000;
}

.wh1 {		/*width half of width 1*/
	width: .625in;	
}
.w1 {
	width: 1.25in; /*120px;*/
}
.w2 {
	width: 2.5in;
}
.w3 {
	width: 3.75in;
}
.w4 {
	width: 5in;
}
.w5 {
	width: 6.25in;
}
.w6 {
	width: 7.5in;
}
.w100 {
	width: 1.00in;
}
.w150 {
    width: 1.50in;
}
.w275 {
    width: 2.75in;
}

table.cm08 {
	border-collapse: collapse;
}
.cellsuperheader th.border {
 	font-family: "CalibriBold";
	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
	border-right: solid 1px #000000;
}
.cellheader th {
 	background-color: #000000;
	text-transform: uppercase;
 	color: #FFFFFF;
	font-family: "CalibriBold";
	border: 1px solid #FFFFFF;
}
.cellsubheader th {
	font-family: "CalibriBold";
	border-bottom: solid 1px #000000;
	border-left: solid 1px #000000;
	border-right: solid 1px #000000;
}
.cm08 td, .cm08 th {
	padding-top: .08in;
	padding-bottom: .08in;
	padding-left: .04in;
	padding-right: .04in;
	vertical-align: middle;
}

/*Text align*/
.tac {
	text-align: center;
}
.tar {
	text-align: right;
}
.tal {
	text-align: left;
}


.featureimage {
	overflow: hidden;
	position: relative;
	height: 350px;
	border-radius: 10px;
}
.featureimage img {
	position: absolute;
	min-height: 100%;
	min-width: 100%;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
}
.containeroutside {
	padding: 10px;
    width: 100%;
}
.containerinside, .containerinsidecenter {
	background-color: #FFF;
	border-radius: 10px;
	padding: 40px;
}
.containerinsidecenter {
	text-align: center;
}
.containerheader {
	color: #194B9B;
	font-size: 1.5em;
	padding-bottom: 20px;
}
.containerstripprimary {
	background-color: #194B9B;
	border-radius: 10px;
	text-align: center;
	padding: 20px;
	color: #FFF;
	font-size: 1.5em;
}
.containersubstripsecondary {
	background-color: #EBA505;
	border-radius: 10px;
	text-align: center;
	padding: 20px;
	color: #FFF;
}
.cartcount {
	position: absolute;
	top: 0;
	right: 0;
	background-color: #EBA505;
	color: #FFF;
	border-radius: 10px;
	padding: 5px;
	line-height: normal;
	font-family: RalewayBold;
}
.currentpage {
	background-color: #EBA505;
}

.statoutside, .donutouside {
	padding: 10px;
	display: inline-block;
	width: 100%;
	vertical-align: top;
}
.statinside {
	border-radius: 10px;
	background-color: #FFF;
	line-height: 0px;
}
.statimage {
	width: 100%;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	border-radius: 10px 10px 0px 0px;			/*Border radius top*/
	overflow: hidden;
}
.statimage:before {
    content: "";
    display: block;
    padding-top: 50%; 							/*Ratio of 2 long 1 high*/
}

.spriteservices {
	background: url('../images/services.jpg') no-repeat;
	background-size: 300%;
}
.wine { background-position: 0% 50%;}
.spirits { background-position: 50% 50%;}
.foodstuffs { background-position: 100% 50%;}

.spriteabout {
	background: url('../images/about.jpg') no-repeat;
	background-size: 300%;
}
.lou { background-position: 0% 0%;}
.matt { background-position: 50% 0%;}
.barry { background-position: 100% 0%;}
.dave { background-position: 0% 100%;}
.joe { background-position: 50% 100%;}

.spritecontact {
	background: url('../images/contact.jpg') no-repeat;
	background-size: 600%;
}
.sname { background-position: 0% 50%;}
.saddress { background-position: 20% 50%;}
.sphone { background-position: 40% 50%;}
.shours { background-position: 60% 50%;}
.semail { background-position: 80% 50%;}
.sfax { background-position: 100% 50%;}

.spritegeography {
	background: url('../images/geography.jpg') no-repeat;
	background-size: 300%;
}
.midatlantic { background-position: 0% 50%;}
.northamerica { background-position: 50% 50%;}
.global { background-position: 100% 50%;}

#clock {
	height: 100%;
}
.spinning {
	width: 100%;
}
#clockface, #analogclockcontainer {
	height: 70%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
	-ms-transform: translateY(-50%) translateX(-50%);
	left: 50%;
}
.spinning {
	height: 70%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
	-ms-transform: translateY(-50%) translateX(-50%);
	left: 50%;
}
.spinning img {
	height: 100%;
	width: 100%;
/*
    -webkit-animation: spinner 10s infinite linear;
    -moz-animation: spinner 10s infinite linear;
	-ms-animation: spinner 10s infinite linear;
    -o-animation: spinner 10s infinite linear;
    animation: spinner 10s infinite linear;
    transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
*/
}
@-ms-keyframes spinner {
/*     100% { -ms-transform: rotate3d(0, 1, 0, 360deg); } */
}
@-moz-keyframes spinner {
/* 	100% { -moz-transform: rotate(360deg); } */
}
@-webkit-keyframes spinner {
/*    	100% { -webkit-transform: rotate(360deg); } */
}
@-o-keyframes spinner {
/*    	100% { -o-transform: rotate(360deg); } */
}
@keyframes spinner {
/*     100% { transform: rotateY(360deg);} */
}



.stattext {
	display: inline-block;
	line-height: normal;
	padding: 20px;
	vertical-align: middle;
	width: 100%;
}
.stattextheader {								/*Font size large 32px*/
	font-size: 1.5em; 
}

.heroimage {
	position: relative;
	width: 100%;
	border-radius: 10px 10px 0px 0px;
	vertical-align: middle;
	display: inline-block;
	overflow: hidden;
}
.heroimage:before {
	content: "";
    display: block;
    padding-top: 100%; 							/*Ratio of 1:1*/
}
.heroheader {
	line-height: normal;
	display: inline-block;
	vertical-align: middle;
	width: 100%;
	padding: 20px;
}
.generalheader {
	padding-bottom: 20px;
}
.herobody {
	color: #828C96;
	line-height: normal;
	padding: 0px 20px 20px 20px;
}
.middle {	
	background-color: #FFF;
	overflow: auto;
}

.floatingdescriptor {					/*Font size large 32px*/
	font-size: 1.5em;
	padding: 10px;
	color: #000;
	opacity: .5;
}
.floatingdescriptorclipboard {					/*Font size large 32px*/
	font-size: 1.5em;
	padding: 20px;
	color: #000;
	opacity: .5;
}
.clipboardbody {
	padding: 0px 20px 20px 20px;
}
.dt-button-info {
	cursor: pointer;
}

.pricingtable {
	width: 100%;
}
.pricingtable tr:hover > td {
	padding: 10px;
}
.pricingtable tr {
	vertical-align: top;
}
.pricingtable tr:hover {
	background-color: #828C96;
	color: #FFF;
}
.pricingtable tr.blank:hover > td {
	padding: 0px;
	background-color: #FFF !important;
}
.pricingtable tr.subheader td {
	padding: 0px 0px 10px 0px;
}
.pricingtable tr.subheader:hover {
	background-color: #FFF;
	color: #EBA505;
}
.pricingtable td:nth-child(1) {
	width: 50%;
	padding-left: 20px;
}
.pricingtable td:nth-child(2) {
	text-align: right;
	width: 25%;
}
.pricingtable td:nth-child(3) {
	padding-left: 20px;
	width: 25%;
}



.fadedown:hover, a .statinside:hover {
	opacity: .5;
}
td form {
	display: inline-block;
}
.editinline:hover {
	background-color: #EBA505;
}
.quickinsert:hover {
	background-color: #194B9B !important;
}
.scrolltotop {
	line-height: 0px;
	display: inline-block;
	float: right;
	padding: 20px;
	cursor: pointer;
}
.scrolltotop img {
	border-radius: 10px;
	opacity: .5;
	cursor: pointer;							/*Being used for scroll to top footer*/
}
.scrolltotop:hover > img {
	opacity: 1;
}
.mobilemenu {
	-webkit-justify-content: space-between;
	justify-content: space-between;
    display: -webkit-flex;
    display: flex;
}
.desktopmenu {
	display: none;
}
.desktopmenu li {
	padding: 20px;
}
.dashboardlogo {
	display: none !important;
}
.dashboardlogo:hover > img, .menuitem:hover > p, .menuitem:hover > img, .scrolltotop:hover > img {
	transform: scale(1.5) rotate(360deg);
	-webkit-transform: scale(1.5) rotate(360deg);
	-ms-transform: scale(1.5) rotate(360deg);
}
a .statinside:hover {
	transform: scale(.8);
	-webkit-transform: scale(.8);
	-ms-transform: scale(.8);
}

.menuitemword {
	width: 100%;
	line-height: 20px;
	color: #FFF;
	text-align: center;
}
.vat, .menuitemword img {
	vertical-align: top;
}
.menuitemword img {
	padding-right: 10px;
}

.menuitem {
	width: 50%;								/*Square boxes are 2 across*/
	text-align: center;
	position: relative;
}
.menuitem img {
	width: 40%;
}
.navigation li, .dashboardlogo img, .scrolltotop, .scrolltotop img, .menuitem img, .menuitem p, .fadedown, a .statinside, .submitsecondary, .editinline, .quickinsert, .dropdown, .inputboxbutton, .inputboxbuttonleft, .inputboxbuttonmiddle, .inputboxbuttonright {
	cursor: pointer;
	-webkit-transition: all .4s ease-in-out;
  	-moz-transition: all .4s ease-in-out;
  	-ms-transition: all .4s ease-in-out;
  	-o-transition: all .4s ease-in-out;
  	transition: all .4s ease-in-out;
}
.dropdown.active {
	background-color: #EBA505;
	
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
}
.dropdown.active:hover {
	background-color: #194B9B;
}

/* SIGNATURE PAD*/
.signonthisline {
	position: absolute;
	width: 90%;
	left: 50%;
	top: 65%;
	max-width: 500px;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
	-ms-transform: translateY(-50%) translateX(-50%);
	border-bottom: 3px dotted #828C96;
}
.signaturepadcanvascontainer {
	background-color: #D2DCEB;
    border-radius: 10px;
	max-height: 150px;
	overflow: hidden;
}
.signaturepadcanvascontainer:before {
	content: "";
	display: block;
	padding-top: 30%;
}
.thex {
	position: absolute;
	font-size: 1.5em;
	left: 0;
	bottom: 0;
}
.signaturepadcanvas {
	width: 100%;
	height: 100%;
    max-width: 500px;
    cursor: crosshair;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
}
.sigimg {
	width: 200px;
}

/* STICKER CSS*/
.fullcontainersticker {
	position: relative;
	min-width: 4in;
	height: 100%;
	min-height: 3in;
}
.sticker4l3h {
	color: #000;
	font-family: ConsolasRegular;
	width: 4in;
    height: 3in;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    padding: .25in;
    background-color: #FFF;
}
.lmcustomername {
	font-size: 12px;
    float: right;
    text-align: right;
    width: 100%;
    max-width: 2.75in;
    display: inline-block;
}
.toh {	/*test overflow hidden*/
	white-space: nowrap;
	white-space: -moz-nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.productpanopticbarcode {
	width: 3.5in;
	margin-top: .25in;
	margin-left: auto;
	margin-right: auto;
}
.binlocationbarcode {
	width: 3.5in;
	margin-left: auto;
	margin-right: auto;
}
.lmitemnumber {
	text-align: center;
	font-size: 48px;	/*optical text increase*/
	line-height: .25in;
	margin-top: 0.27in;		/*optical offset .25in plus .02in*/
	margin-bottom: .23in;	/*optical offset .25in minus .02in*/
}
.lmitemdescriptor {
	font-size: 12px;
	height: .5in;
	line-height: 16px;
	overflow: hidden;
}
.lmbinlocationname {
	text-align: center;
	line-height: .75in;
	font-size: 90px;
	margin-bottom: .25in;
}

/*COLOR SCHEME*/
.csp {									/*Color scheme primary*/
	width: 66.66%;
	height: 66.66%;
	position: absolute;
	top: 0px;
}
.csbp {							/*Color scheme background padding*/
    width: 33.33%;
    height: 33.33%;
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 6.66%;
}
.csrp {							/*Color scheme radio button padding*/
    width: 33.33%;
    height: 33.33%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: 6.66%;
}
.csb, .csr {								/*Color scheme background & color scheme radio button*/
	width: 100%;
    height: 100%;
}
.css {								/*Color scheme secondary*/
    width: 66.66%;
    height: 66.66%;
    position: absolute;
    bottom: 0px;
    right: 0px;
}


/*SESSION EXPIRE*/
.sessionexpirecontainer {
	width: 100%;
	position: absolute;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.7);
}
.sessionexpireinside {
	background-color: #FFF;
    padding: 40px;
    text-align: center;
    width: 100%;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
}

.sessionbutton {
    color: #FFF;
    border-radius: 10px;
    padding: 10px;
    display: inline-block;
    width: 100px;
}
.sessionbuttonleft {
	margin-right: 5px;
}
.sessionbuttonright {
	margin-left: 5px;
}

/*Transactions */
.timeinline {
	margin: 0px 0px 0px 5px !important; /*Overrides the monthinline CSS; ex. decemberbcinline etc*/
}

/*Orders/review page*/
.br {
	border-radius: 10px;
}

/*Pick  sheet page*/
.cp {
	cursor: pointer;
}
.dn {
	display: none;
}

.checkmark {
  stroke: #FFF;
  stroke-dashoffset: -70.31575012207031;
  stroke-dasharray: 70.31575012207031;
  animation: dash .5s ease-out forwards normal;
}

@keyframes dash {
  0% {
    stroke-dashoffset: -70.31575012207031;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.xmark {
  stroke: #FFF;
  stroke-dashoffset: 28.284271240234375;
  stroke-dasharray: 28.284271240234375;
  animation: xdash .25s ease-out forwards normal;
}
.xdelay {	/*diagonal top right to downleft*/
	-webkit-animation-delay: .25s !important;
	-moz-animation-delay: .25s !important;
	-ms-animation-delay: .25s !important;
	animation-delay: .25s !important;
}
@keyframes xdash {
  0% {
    stroke-dashoffset: 28.284271240234375;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.rect1, .rect2, .rect3, .rect4, .rect5 {
	background-color: #FFF;
	height: 20px;
	margin-left: 1px;
	margin-right: 1px;
	width: 2px;
	display: inline-block;
}

.yellowbc .rect1, .yellowbc .rect2, .yellowbc .rect3, .yellowbc .rect4, .yellowbc .rect5 {
	-webkit-animation: stretchdelay 2s infinite ease-in-out;
	animation: stretchdelay 2s infinite ease-in-out;
}

.rect1 {
	-webkit-animation-delay: .0s !important;
	-moz-animation-delay: .0s !important;
	-ms-animation-delay: .0s !important;
	animation-delay: .0s !important;
}
.rect2 {
	-webkit-animation-delay: .4s !important;
	-moz-animation-delay: .4s !important;
	-ms-animation-delay: .4s !important;
	animation-delay: .4s !important;
}
.rect3 {
	-webkit-animation-delay: .8s !important;
	-moz-animation-delay: .8s !important;
	-ms-animation-delay: .8s !important;
	animation-delay: .8s !important;
}
.rect4 {
	-webkit-animation-delay: 1.2s !important;
	-moz-animation-delay: 1.2s !important;
	-ms-animation-delay: 1.2s !important;
	animation-delay: 1.2s !important;
}
.rect5 {
	-webkit-animation-delay: 1.4s !important;
	-moz-animation-delay: 1.4s !important;
	-ms-animation-delay: 1.4s !important;
	animation-delay: 1.4s !important;
}

@-webkit-keyframes stretchdelay {
  0% { -webkit-transform: scaleY(1.0) }
  50% { -webkit-transform: scaleY(0) }
  100% { -webkit-transform: scaleY(1.0) }  
}

@keyframes stretchdelay {
  0% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
  50% { 
    transform: scaleY(0);
    -webkit-transform: scaleY(0);
  }
  100% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  } 
}

/*For inline counters plus and minus*/
.quantitycontainer {
    min-width: 200px;
}
.qcl {
    padding-right: 10px;
}
.qcr {
    padding-left: 10px;
}
.qcl, .qcr { 		/*quantitycounterleft and quantitycounterright*/
	display: inline-block;
	width: 50%;
}
.plus {
	border-radius: 10px 0px 0px 0px;
}
.minus {
	border-radius: 0px 10px 0px 0px;
}
.plus, .minus {
	background-color: #EBA505 !important;
    cursor: pointer;
    width: 20%;
    height: 40px;
    display: inline-block;
	
	-webkit-transition: all .4s ease-in-out;
  	-moz-transition: all .4s ease-in-out;
  	-ms-transition: all .4s ease-in-out;
  	-o-transition: all .4s ease-in-out;
  	transition: all .4s ease-in-out;
}
.plus:hover, .minus:hover {
	background-color: #194B9B !important;
}
.plus:active, .minus:active {
	background-color: #EBA505 !important;
	
	-webkit-transition: none;
  	-moz-transition: none;
  	-ms-transition: none;
  	-o-transition: none;
  	transition: none;
}
.quantitycontainer div::selection {
    color: inherit;
    background: transparent;
    text-shadow: none;
}
.wholeqty {
	border-radius: 0px;
	vertical-align: top;
	height: 40px !important;
	width: 60%;
	padding: 10px;
	text-align: center;
	display: inline-block;
	
	font-size: 1.5em;
}
.wholeqtydis {
	border-radius: 10px 10px 0px 0px;
	vertical-align: top;
	height: 40px !important;
	width: 100%;
	padding: 10px;
	text-align: center;
	display: inline-block;
	
	font-size: 1.5em;
	line-height: 40px;
}
.qd {		/*quantitydescriptor*/
	padding: 5px;
	background-color: #194B9B;
	color: #FFF;
	border-radius: 0px 0px 10px 10px;
	text-align: center;
	
	height: 20px;
    line-height: 10px;
}
.qcl > :first-child, .qcr > :first-child {
    line-height: 0px;
}

/*CHOOSE CUSTOMER*/
.customer.active {
	background-color: #EBA505;
}
.customer.active:hover {
	opacity: .8;
}
.choosecustomer {
	display: none;
    float: right;
    line-height: 0px;
}
.choosecustomer.active {
	display: inline-block;
}
.choosecustomer span {
	display: inline-block;
    margin: 5px;
    border-radius: 10px;
    cursor: pointer;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    padding: 10px;
    line-height: normal;
    color: #FFF;
    height: 40px;
}
.choosecustomer span:hover {
	background-color: #EBA505;
}

/*INVENTORY PAGE*/
.instockcontainer {
	min-width: 150px;
}
.inventorydescriptorcontainer {
	text-align: center;
	display: inline-block;
	width: 50%;
}
.inventorydescriptor {		/*Font size small*/
	font-size: .7em;
	border-radius: 10px;
	padding: 5px;
	background-color: #194B9B;
	color: #FFF;
	margin-left: 5px;
	margin-top: 5px;
	margin-right: 5px;
}
.perpackagecontainer {
	min-width: 150px;
	text-align: center;
}
.boxheader {
	padding: 15px;
	display: inline-block;
	color: #FFF;
    opacity: .5;
    font-style: italic;
	
	-webkit-transition: all .4s ease-in-out;
  	-moz-transition: all .4s ease-in-out;
  	-ms-transition: all .4s ease-in-out;
  	-o-transition: all .4s ease-in-out;
  	transition: all .4s ease-in-out;
}
.boxheader:hover {
    opacity: 1;
}


/* For quickinsert*/
.quickinsert {
	display: inline-block;
	padding: 10px;
	float: left;
	background-color: #EBA505;
	border-radius: 10px;
	color: white;
	min-width: 80px;
	margin: 0px 10px 10px 0px;
	text-align: center;
}
.quickinsertdescriptor {
	padding: 10px 0px 10px 0px;
	display: inline-block;
	float: left;
	margin: 0px 10px 10px 0px;
}


/*For when pressing print*/
.dataTable.no-footer {
	margin: auto;
}
.w100 {
	width: 1.00in;
}
.printview table.dataTable tbody tr:hover {
    color: #828C96;
}
.printview table.dataTable tbody tr:hover {
    background-color: #FFFFFF;
}

/*NECESSARY*/
.inputcontainer {
	padding: 40px 40px 0px 40px;
}
.inputdescriptor {
	display: block;
	width: 100%;
	text-align: left;
	vertical-align: middle;
	padding-bottom: 10px;
}
.inputbox {
	display: inline-block;
	width: 100%;
	vertical-align: middle;
	margin-bottom: 40px;
	position: relative;
}
.iconbox {
	display: inline-block;
	width: 100%;
	vertical-align: middle;
	margin-bottom: 20px;
	position: relative;
}
.inputboxbutton {
	border-radius: 10px;
    padding: 20px;
    float: right;
    text-align: center;
    color: #FFF;
	background-color: #EBA505;
}
.inputboxbutton:hover, .inputboxbuttonleft:hover, .inputboxbuttonmiddle:hover, .inputboxbuttonright:hover {
	background-color: #194B9B;
}
.inputboxbuttonleft, .inputboxbuttonright {
	border-radius: 10px;
    padding: 20px;
    text-align: center;
    color: #FFF;
    background-color: #EBA505;
    width: 20%;
    display: inline-block;
}
.ibmc {	/*Input box button middle container*/
	display: inline-block;
    width: 60%;
    padding: 0px 20px 0px 20px;
}
.inputboxbuttonmiddle {
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    color: #FFF;
    background-color: #EBA505;
}
.mbquickinsert {
	margin-bottom: 30px;
	display: none;
}

.tdi {	/*Table Data Image*/
	vertical-align: bottom;
    padding-right: 10px;
}

/*BACKGROUND IMAGES ALL BELOW*/
.cloud {
	background: url(../images/inventory/cloud.svg) 10px no-repeat;
}
.customer {
	background: url(../images/inventory/customer.svg) 10px no-repeat;
}
.print {
	background: url(../images/inventory/print.svg) center no-repeat;
}
.print span{
	background: url(../images/inventory/print.svg) 10px no-repeat;
}
.copy span{
	background: url(../images/inventory/copy.svg) 10px no-repeat;
}
.excel span{
	background: url(../images/inventory/excel.svg) 10px no-repeat;
}
.pdf span{
	background: url(../images/inventory/pdf.svg) 10px no-repeat;
}
.csv span{
	background: url(../images/inventory/csv.svg) 10px no-repeat;
}
.lock {
	background: url(../images/inventory/lock.svg) 10px no-repeat;
}
.billoflading {
	background: url(../images/inventory/billoflading.svg) 10px no-repeat;
}
.weight {
	background: url(../images/inventory/weight.svg) 10px no-repeat;
}
.add {
	background: url(../images/inventory/add.svg) center no-repeat;
}
.cart {
	background: url(../images/inventory/cart.svg) 10px no-repeat;
}
.back {
	background: url(../images/inventory/back.svg) 10px no-repeat;
}
.edit {
	background: url(../images/inventory/edit.svg) 10px no-repeat;
}
.duplicate {
	background: url(../images/inventory/duplicate.svg) 10px no-repeat;
}
.receive {
	background: url(../images/inventory/receive.svg) 10px no-repeat;
}
.editd {	/*edit dimensions*/
	width: 40px;
    height: 40px;
}
.bins {
	background: url(../images/inventory/bins.svg) 10px no-repeat;
}
.clear {
	background: url(../images/inventory/clear.svg) 10px no-repeat;
}
.cancel {
	background: url(../images/inventory/cancel.svg) 10px no-repeat;
}
.save {
	background: url(../images/inventory/save.svg) 10px no-repeat;
}
.first {
	background: url(../images/inventory/first.svg) 10px no-repeat;
}
.last {
	background: url(../images/inventory/last.svg) 10px no-repeat;
}
.previous {
	background: url(../images/inventory/previous.svg) 10px no-repeat;
}
.next {
	background: url(../images/inventory/next.svg) 10px no-repeat;
}
.search {
	background: url(../images/inventory/search.svg) 10px no-repeat;
}
.commandkey {
	background: url(../images/inventory/commandkey.svg) 10px no-repeat;
}
.refresh {
	background: url(../images/inventory/refresh.svg) 10px no-repeat;
}
.open {
	background: url(../images/inventory/open.svg) 10px no-repeat;
}

.required:after {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-bottom: 10px;
	background: url(../images/inventory/required.svg) no-repeat;
}
.search.active {
	background-color: #EBA505;
}
.search.active:hover {
	opacity: .8;
}
.visibility {
	background: url(../images/inventory/view.svg) 10px no-repeat;
}
.visibility.active {
	background-color: #EBA505;
}
.visibility.active:hover {
	opacity: .8;
}
.generalbutton:hover {							/*Black color for multiply opacity*/
	background-color: #EBA505;
}


.plus {
	background: url(../images/inventory/plus.svg) center no-repeat;
}
.minus {
	background: url(../images/inventory/minus.svg) center no-repeat;
}


.calendar {
	background: url(../images/inventory/calendar.svg) 20px no-repeat;
}
.remove {
	background: url(../images/inventory/delete.svg) 20px no-repeat;
}
.dropdown {
	background: url(../images/inventory/dropdown.svg) 20px no-repeat;
}

.Psvg {
	background: url(../images/inventory/P.svg) 20px no-repeat;
}
.Xsvg {
	background: url(../images/inventory/X.svg) 20px no-repeat;
}
.Wsvg {
	background: url(../images/inventory/W.svg) 20px no-repeat;
}
.Jsvg {
	background: url(../images/inventory/J.svg) 20px no-repeat;
}
.paperclip {
	background: url(../images/inventory/paperclip.svg) 20px no-repeat;
}
.view {
	background: url(../images/inventory/view.svg) 20px no-repeat;
}
.delete {
	background: url(../images/inventory/delete.svg) 20px no-repeat;
}

.buttonfr1 {
	border-radius: 0px 10px 10px 0px;
    right: 0px;
    top: 0px;
}
.buttonfr2 {
    right: 60px;
    top: 0px;
}
.buttonfr3 {
    right: 120px;
    top: 0px;
}
.inputbutton {
	height: 60px;
    width: 60px;
	background-color: #194B9B;
    position: absolute;
	cursor: pointer;
	
	-webkit-transition: all .4s ease-in-out;
  	-moz-transition: all .4s ease-in-out;
  	-ms-transition: all .4s ease-in-out;
  	-o-transition: all .4s ease-in-out;
  	transition: all .4s ease-in-out;
}
.iconbutton {
	height: 60px;
    width: 60px;
    position: absolute;
	border-radius: 10px 0px 0px 10px;
    left: 0px;
    top: 0px;
}
.input1buttonl {
	padding: 20px 20px 20px 80px;
	background-color: #F0F0F0;
	min-height: 60px;
	display: inline-block;
	border-radius: 10px;
	min-width: 180px;
    text-align: center;
	font-family: "RalewayBold";
}
.attachbutton {
	padding: 20px 140px 20px 80px;
	background-color: #D2DCEB;
	min-height: 60px;
	display: inline-block;
	border-radius: 10px;
	font-family: "RalewayBold";
	width: 100%;
}
.nodelete {
	padding: 20px 80px 20px 80px !important;
}
.iconcontain {
	margin: 0px 20px 20px 0px;
    display: inline-block;
	position: relative;
}
.attachcontain {
	margin-bottom: 20px;
	position: relative;
}
.inputbuttonstatic {
	height: 60px;
    width: 60px;
	padding: 20px;
    position: absolute;
	
	-webkit-transition: all .4s ease-in-out;
  	-moz-transition: all .4s ease-in-out;
  	-ms-transition: all .4s ease-in-out;
  	-o-transition: all .4s ease-in-out;
  	transition: all .4s ease-in-out;
}
.inputbutton:hover {
	background-color: #EBA505;
}
.input1button {
	padding: 20px  80px 20px 20px;
}
.input2buttons {
	padding: 20px 140px 20px 20px;
}
.input3buttons {
	padding: 20px 200px 20px 20px;
}
.todaybutton {
	padding: 10px;
	color: #FFF;
	text-align: center;
}
.todaysmall {
	font-size: .7em;
    line-height: 10px;
}
.todaymiddle {
	line-height: 20px;
}


.onoffswitch {
	display: block;
	width: 100%;
	vertical-align: middle;
	margin-bottom: 40px;
}
.onoffswitchswitch {					/*This is the background color*/
	background-color: #D2DCEB;	
}
.fr {
	float: right;
}

@media screen and (min-width:200px) {
.menuitem {									/*Square boxes are 3 across*/
	width: 33.33%;
}
}
@media screen and (min-width:400px) {
.menuitem {									/*Square boxes are 4 across*/
	width: 25%;
}
.menuitemword {
	width: 50%;
}
.statimage {
	width: 33.33%;							/*Width is 1/3*/
	border-radius: 10px 0px 0px 10px;		/*Border radius left*/
}
.statimage:before {
    padding-top: 100%; 						/*Ratio of 1:1*/
}
.stattext {
	width: 66.66%;
}
.heroimage {
	width: 35%;
	border-radius: 10px 0px 10px 0px;
}
.heroheader {
	width: 65%;
}
.herobody {
	padding: 20px;
}
.content404 .block {
	font-size: 5em;
}
}
@media screen and (min-width:600px) {
.menuitem {									/*Square boxes are 5 across*/
	width: 20%;
}
.menuitemword {
	width: 33.33%;
}
.statoutside {								/*Boxes are 2 across*/
	width: 50%;
}
.statimage {
	width: 100%;
	border-radius: 10px 10px 0px 0px;
}
.statimage:before {
    padding-top: 50%; 						/*Ratio of 2:1*/
}
.stattext {
	width: 100%;
}
.heroimage {
	width: 100%;
	border-radius: 10px 10px 0px 0px;
}
.heroheader {
	width: 100%;
}
.herobody {
	padding: 0px 20px 20px 20px;
}
.content404 .block {
	font-size: 10em;
}
}
@media screen and (min-width:880px) {
.mobilemenu {
	display: none !important;
}
.desktopmenu {
    display: -webkit-flex;
    display: flex !important;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.dashboardlogo {
	display: block !important;
}
.menuitem, .menuitemword {					/*Square boxes have width auto*/
	width: auto;
}
.menuitem img {
	width: 20px;
	height: 20px;
}
.statimage {
	width: 33.33%;
	border-radius: 10px 0px 0px 10px;
}
.statimage:before {
    padding-top: 100%; 						/*Ratio of 1:1*/
}
.stattext {
	width: 66.66%;
}
.heroimage {
	width: 35%;
	border-radius: 10px 0px 10px 0px;
}
.heroheader {
	width: 65%;
}
.herobody {
	padding: 20px;
}
.inputcontainer {
	padding: 40px 40px 20px 40px;
}
.inputdescriptor {
	display: inline-block;
	width: 20%;
	text-align: right;
	padding: 11px 20px 20px 20px;
	margin-bottom: 20px;
}
.inputbox {
	width: 80%;
	margin-bottom: 20px;
}
.iconbox {
	width: 80%;
	margin-bottom: 0px;
}
.mbquickinsert {
	margin-bottom: 10px;
}
.onoffswitch {
	display: inline-block;
	width: 80%;
	margin-bottom: 20px;
}
}
@media screen and (min-width:1000px) {
.statoutside {								/*Boxes are 3 across*/
	width: 33.33%;
}
.donutoutside {
	width: 50%;
}
.statimage {
	width: 100%;
	border-radius: 10px 10px 0px 0px;
}
.statimage:before {
    padding-top: 50%; 						/*Ratio of 2:1*/
}
.stattext {
	width: 100%;
}
.heroimage {
	width: 100%;
	border-radius: 10px 10px 0px 0px;
}
.heroheader {
	width: 100%;
}
.herobody {
	padding: 0px 20px 20px 20px;
}
}
@media screen and (min-width:1200px) {
.statimage {
	width: 33.33%;
	border-radius: 10px 0px 0px 10px;
}
.statimage:before {
    padding-top: 100%; 						/*Ratio of 1:1*/
}
.stattext {
	width: 66.66%;
}
.heroimage {
	width: 35%;
	border-radius: 10px 0px 10px 0px;
}
.heroheader {
	width: 65%;
}
.herobody {
	padding: 20px;
}
}
@media screen and (min-width:1400px) {
.statoutside {								/*Boxes are 4 across*/
	width: 25%;
}
.donutoutside {
	width: 33.33%;
}
.statimage {
	width: 100%;
	border-radius: 10px 10px 0px 0px;
}
.statimage:before {
    padding-top: 50%; 						/*Ratio of 2:1*/
}
.stattext {
	width: 100%;
}
.heroimage {
	width: 100%;
	border-radius: 10px 10px 0px 0px;
}
.heroheader {
	width: 100%;
}
.herobody {
	padding: 0px 20px 20px 20px;
}
}
@media screen and (min-width:1600px) {
.statimage {
	width: 33.33%;
	border-radius: 10px 0px 0px 10px;
}
.statimage:before {
    padding-top: 100%; 						/*Ratio of 1:1*/
}
.stattext {
	width: 66.66%;
}
.heroimage {
	width: 35%;
	border-radius: 10px 0px 10px 0px;
}
.heroheader {
	width: 65%;
}
.herobody {
	padding: 20px;
}
}
@media screen and (min-width:1800px) {
.statoutside {									/*Boxes are 5 across*/
	width: 20%;
}
.donutoutside {
	width: 25%;
}
.statimage {
	width: 100%;
	border-radius: 10px 10px 0px 0px;
}
.statimage:before {
    padding-top: 50%; 						/*Ratio of 2:1*/
}
.stattext {
	width: 100%;
}
.heroimage {
	width: 100%;
	border-radius: 10px 10px 0px 0px;
}
.heroheader {
	width: 100%;
}
.herobody {
	padding: 0px 20px 20px 20px;
}
}
@media screen and (min-width:2000px) {
.statimage {
	width: 33.33%;
	border-radius: 10px 0px 0px 10px;
}
.statimage:before {
    padding-top: 100%; 						/*Ratio of 1:1*/
}
.stattext {
	width: 66.66%;
}
.heroimage {
	width: 35%;
	border-radius: 10px 0px 10px 0px;
}
.heroheader {
	width: 65%;
}
.herobody {
	padding: 20px;
}
}
@media screen and (min-width:2200px) {
.statoutside {									/*Boxes are 6 across*/
	width: 16.66%;
}
.donutoutside {
	width: 20%;
}
.statimage {
	width: 100%;
	border-radius: 10px 10px 0px 0px;
}
.statimage:before {
    padding-top: 50%; 						/*Ratio of 2:1*/
}
.stattext {
	width: 100%;
}
.heroimage {
	width: 100%;
	border-radius: 10px 10px 0px 0px;
}
.heroheader {
	width: 100%;
}
.herobody {
	padding: 0px 20px 20px 20px;
}
}
@media screen and (min-width:2400px) {
.statimage {
	width: 33.33%;
	border-radius: 10px 0px 0px 10px;
}
.statimage:before {
    padding-top: 100%; 						/*Ratio of 1:1*/
}
.stattext {
	width: 66.66%;
}
.heroimage {
	width: 35%;
	border-radius: 10px 0px 10px 0px;
}
.heroheader {
	width: 65%;
}
.herobody {
	padding: 20px;
}
}