/* !!!!!!!!!! DO NOT CUSTOMIZE THIS FILE FOR CUSTOMERS !!!!!!!!!! */
/* Custom changes must be done in custom.css */

@font-face {
	font-family: 'Material-Design-Iconic-Font';
	src: url(../media/Material-Design-Iconic-Font.ttf?v=2.2.0) format('truetype');
}
/* This option makes div widths and padding calculations in Firefox work the same as IE */
DIV {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	margin:0;
	padding:0;
}
 
#user-bar {
	display: flex;
	flex-flow: row wrap;
	margin: 15px 0;
}

#session_timeout_div {
	display: inline-block;
	white-space: nowrap;
	margin: 0 10px 0 auto;
}

#session_timeout_div:after {
	content: "\00A0\00A0";
}
 
#userinfo {
	display: inline-block;
	z-index: 1;
	margin: 0 auto 0 10px;
}

/* customer name/code/session timeout */
#userinfo span,
.customerInfo span {
	margin-left: 1ch;
}
#userinfo span:empty,
.customerInfo span:empty,
#userinfo span:first-of-type,
.customerInfo span:first-of-type {
	margin: 0;
}
#userinfo span:first-of-type:empty + span,
.customerInfo span:first-of-type:empty + span {
	margin-left: 0;
}

#srvletarea {
	min-height: 450px;
    height:auto; 
    padding-bottom: 20px;
}

#srvletarea #minamounts, #srvletarea #maxamounts {
	border: 1px solid black;
	padding: 5px;
	width: 230px;
	margin-bottom: 12px;
    margin-right: 10px;
}
#srvletarea #minamounts h3, #srvletarea #maxamounts h3 {
	font-family: Arial,Helvetica,sans-serif;
	font-size:9pt;
	font-weight: bold;
}
#srvletarea #minamounts .minnotmet, #srvletarea #maxamounts .maxnotmet  {
	color: red;
}

/* Use this to undo styles that don't make sense for popup windows */
#srvletarea.srvletpopup {
	min-height: 0px;
	height: auto;
	width: auto;
}

#BGDT, #ENDT {
	width: 132px;
}
 		 
div.ui-dialog {
 font-size: 12px;
}

img.ui-datepicker-trigger:hover {
	cursor:pointer;
}

img.ui-datepicker-trigger {
	margin-left: 5px;
}
 
#ui-datepicker-div, #ui-datepicker-header {
	font-size: 11pt;
} 	 

#ui-datepicker-div {
    z-index: 999 !important;
}
		 
#ui-datepicker-div.ui-datepicker table.ui-datepicker-calendar thead tr th {
	background-color: transparent;
	color: black;
} 		

/* For image hover tooltip window */
.ui-tooltip.ui-widget.ui-corner-all.ui-widget-content { 
    -moz-box-sizing:content-box;
    box-sizing:content-box;
    -webkit-box-sizing:content-box;
}
 		
/****************************************************************
 * 	End jQuery related styles                                   		
 ****************************************************************/		

body.bprint{
	font-size: 9pt;
	background-color: #FFFFFF;
	background-image: none;
	padding-left: 10px;
}

h3.reminderItem, p.reminderItem {
	color: red;
}

table {
	border-collapse: separate;
}

body.MinimumOrderWarning {
	background-color: #FFFFCC;
}

a.nav {
	font-size: 11px; 
	font-weight: bold; 
	text-decoration: none;
	color: White;
}
a.nav:hover {
	text-decoration: underline;
}

a {
	color: #000099;
}

.superscript {
	font-size: smaller; 
	vertical-align:super;
}

p.small {
	font-size: 8pt;
}

.notebox {
	border: 1px solid #CD0A0A;
	/* -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; */ 
	color: #CD0A0A;
	padding: 5px;
	margin: 10px;
	width: 80%;
}

input.submit, input.submit_short, input.submit_long, input.submit_verylong, input.submit_medium, input.submitCancel, input.submitUpdate, input.submitReturn, input.submitCheckout, input.profMaintSubmit, input.printPreview, input.downloadOrder, input.submitOrder  {
	cursor: pointer;
}
input.submit:hover, input.submit_short:hover, input.submit_long:hover, input.submit_verylong:hover, input.submit_medium:hover, input.submitCancel:hover, input.submitUpdate:hover, input.submitReturn:hover, input.submitCheckout:hover, input.profMaintSubmit:hover {
	cursor: pointer;
}

/***********************************************************************
* Use orderFlow to apply a style to all buttons that lead through
* a completed order: View Shopping Cart, Checkout, etc.
************************************************************************/
input.orderFlow,
button.orderFlow {
	border: 1px solid #00cf00;
}
input.orderCancel,
button.orderCancel {
	border: 1px solid #e74c3c;
}

/*
* close is used on the close link of popup windows.  These are usually the same
* but can be different...if you want to give a special color to the "add to profile
* button.
*/
a.close {
	background-color: #525152;
	border: 1px solid #000000;
	color: #FFFFFF;
	text-decoration: none;
	padding: 2px;
	FONT-FAMILY: verdana, helvetica, tahoma, arial, sans-serif;
	font-size: 8pt;
	width: 140px;
 	text-align: center;
}

a.submit, a.submitRemove {
	color: black;
	text-decoration: underline;
	padding: 1px;
	font-size: 8pt;
	width: 122px;
 	text-align: center;
	padding-left: 4px;
	padding-right: 4px;
	margin-right: 2px;
}

a.submit:hover {
	color: #009900;
}

a.submitRemove:hover {
	color: #990000;
}

li.double {
	padding-bottom : 15px;
}

table.dataTable tbody tr.shaded, .shaded, .profileshaded {
	background: #EEE;
}

.pproholiday{
	font-size: 9px;
	margin: 4px;
}

.pproholiday img {
	padding-right: 3px;
}

#csh_message {
	width: 348px;
	margin: 2px;
}

.aditem,.ppro_ad_item {
	background: #ffffe5;
}

.noprint {
}

@media only screen and (max-width: 989px) {
	p, td, th {
		font-size: 10pt;
	}
}

@media only screen and (max-width: 768px) {
	p, td, th {
		font-size: 9pt;
	}
}

th {
	text-align: left;
}

th.right {
	text-align: right;
}

#srvletarea table.week td.today, #srvletarea table.week td.firstday, #srvletarea table.week td.lastday, #srvletarea table.week td.day, #srvletarea table.week td.weeklinks {
	padding: 0px;
}

input.highlight, .highlight {
	background: #FFFF00;
}

/* Calendar */

#calendarDiv td.day {
	padding: 0px;
}	 

#calendarDiv table.ui-widget tbody tr td.day {
	height: 100px;
	width: 80px;
	vertical-align: top;
}
#calendarDiv table.ui-widget tbody tr td.weeklinks {
	padding: 0px;
	width: 10%;
}
#calendarDiv a {
	text-decoration: underline;
}
#calendarDiv span.weekly {
	font-size: 10px;
	font-weight: bold;
	margin: 0 0 2px 0;
	display: block;
	padding: 3px;
}
#calendarDiv span.daynumber {
	font-size: 12px;
	font-weight: bold;
	text-align: right;
	margin: 0 0 2px 0;
	display: block;
	padding: 2px;
}
.calendarside {
	FONT-WEIGHT: bold; FONT-SIZE: 10px; 
	padding-left: 3px;
	padding-bottom: 2px;
}
.pproholiday {
	FONT-SIZE: 10px;
}
.calendarnav {
}
.calendar-buttons {
	display: flex;
	flex-flow: row nowrap;
}
input.calendar-placeorderbutton {
	margin-left: auto;
	margin-right: auto;
}

/************profile maintenance *************************/
span.maintButtonPosition {
    margin-left: 150px;
}
#profile_lst.connectedSortable, #catalog_lst.connectedSortable {
    width: 370px;
    height: 400px;
    overflow: hidden;
    overflow-y: scroll;
    padding: 0px;
    border: 2px solid #333;
    background-color: white;
}

#profile_lst ul, #catalog_lst ul {
	padding: 0px;
}

#profile_lst li, #catalog_lst li {
	padding: 2px;
	border: 1px solid #ccc;
	list-style-type: none;
}

#catalog_lst .pm-trash-btn {
	display: none;
}

#profile_lst li:hover, #catalog_lst li:hover {
    cursor: pointer;
}

#profile_lst li.ui-sortable-helper, #catalog_lst li.ui-sortable-helper {
    cursor: move;
}

.pm-trash {
    width: 340px;
    border: 1px solid black;
    padding: 5px;
    margin-bottom: 28px;
}

.pm-trash img {
	vertical-align: middle;
}

/***********core item price increase/decrease***************/
span.priceIncrease {
	font-size: 13pt;
 	text-align: center;
	background: none;
	font-weight: bold;
	color: #0066FF;
	vertical-align: middle;
}
span.priceDecrease {
	font-size: 13pt;
 	text-align: center;
	background: none;
	font-weight: bold;
	color: #8C007B;
	vertical-align: middle;
}

/***********Tooltip Window***************/
.iTt {
	FONT-SIZE:8px;
	FONT-STYLE:normal;
	FONT-WEIGHT:normal;
	COLOR: #006400;
	BORDER-RIGHT:black 1px solid;
	BORDER-TOP:black 1px solid;
	BORDER-LEFT:black 1px solid;
	BORDER-BOTTOM:black 1px solid;
	PADDING:2px;
	BACKGROUND-COLOR: #FFFFE0;
}
.iTt.A:link {
	text-decoration: none; 
	color: #00008b;
}

/********** Order Add Ons / Warning *******************/
.addonmsg, .alert { 
	color: red;
	font-size: 12px;
	font-weight: bold 
}
/********* Expired Pricing Message / No Sales Order No ******/

.noprices, .nosono {
	background-color: #FFE8E8;
	border: 2px solid Red;
	margin: 10px 20px 10px 20px;
	padding: 5px 5px 5px 5px;
}

/********* Coupon Codes ******/
.coupon_message {
    background-color: #ffe;
    border: 1px solid black;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 5px 5px 5px 5px;
}

/*********Ad and Push List Indicators********************/
.adsuper, .pushsuper, .unitsuper, .subsuper, .brokensuper, .secondarypricelistsuper, .remindersuper {
	padding-left: 2px; 
	padding-right: 2px; 
	font-size: 9px; 
	color: #ff0000;  
	vertical-align:super; 
	font-weight:bold;
}
.pushsuper {
	color: #00ff00;
}
.adprice {
	color: #ff0000;  
}
.subssuper {
	color: orange;
}
.remindersuper {
	color: teal;
}
.aditemcomt {
	display: inline-block;
	max-width: 100px;
	text-overflow: ellipsis;
	white-space: normal;
	line-height: 1em;
	vertical-align: top;
}

/******* Use generalTable class instead of login as needed****/
.recapFooter{border:none;width:100%;}

.cartTable, .generalTable, .login, .pricelistrequest, .catalogTable, .orderDetailTable, .recapTable, .creditDetailTable, .reportsTable, .checkoutTable {
	border: 1px solid #000000;
	width: 100%;
}
#catsearchTable, .recvTable {
	width: 100%;
}
.orderDetailTable {
}
.orderDetailTable th {
}
.orderDetailTable tbody tr.shaded {
}
.generalTable{
	width:50%;
}
.catalogTable {
	border-bottom: 0px;
}

.catalogTableMiddle {
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	border-bottom: 0px;
	width: 100%;
}

.catalogTableMiddle:last-child {
	border-bottom: 1px solid #000000;
}

.catalogTableTop {
	border-top: 1px solid #000000;
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	border-bottom: 0px;
	width: 100%;
}

.footer-buttons-table {
	position: sticky;
	bottom: 0;
	background-color: white;
}

@media only screen and (max-width: 768px) {
	/* Hide dynamic columns on small screen devices */
	#srvletarea table.catalogTable td.dyncolumn, #srvletarea table.catalogTable th.dyncolumn {
		display: none;
	}
	
}

/* min width for browse catalog page number links (doesn't work in IE) */
th.pagesection div input.pagelink {
	min-width: 20px;
}

.reportsTable th {
	width: 150px;
}
.itemnocol {
	width: 60px;
}

#srvletarea th.desccol {
	padding-left: 42px;
	/* width: 350px; */ /* fixed size */
}

.descvalwidth {
	/* width: 350px; */ /* fixed size */
}

.upccol {
	width: 125px;
	min-width: 125px;
}

.plucol {
	width: 50px;
	min-width: 50px;
}

.checkoutTable, .cartTable {
	border: none;
}
td.buttonCell{
	text-align: center;
}

table.checkoutTable td, table.checkoutTable th {
	text-align: left;
} 

table.recapTable td, table.recapTable th {
}

td.label{
	width: 30%;
}

#srvletarea table.orderDetailTable {
	width:100%;
}

.hidden {
	display: none!important;
	visibility: hidden;
}

.catalogProdImage { 
	display: block;
	flex-grow: 1;
	margin-right: 5px;
	width: 56px;
	background: #FFF;
	position: relative;
	border: 1px solid #ccc;
	float: left;
}

.catalogProdImageInner {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
	height: 50px;
	width: 54px;
}

.catalogProdImageOuter {
	width: 57px;
	height: 52px;
	padding: 0px;
	margin: 0px;
	vertical-align: middle;
	display: inline-table;	
}

.catalogProdNotes {
	margin-left: 40px;	
}
.catalogProdNotes i {
	vertical-align: -10%;
    white-space: break-spaces;
}

.noProfileMsg {
	color: white;
}

/***************************************
* Inner table is used within cartTable
*****************************************/
#srvletarea table.innerTable tbody tr th {
	border: 0px;
	padding-left: 0px;
	width:100%;
}

/******* Product units link style ****/
a.submitUnits {
	color: black; 
	cursor: pointer; 
	font-size: 7pt; 
	font-weight: bold; 
	text-align: center;
	width: 70px;
}

a.submitUnits {
	color: black; 
	cursor: pointer; 
	font-weight: bold; 
}

/******************************************
* Handheld
*******************************************/
/*** Uncomment next line ***/
/* .screen_only{display:block;} */
/*** Comment next line ***/
.handheld_only{display:none;}

/** Ad Items on Calendar Page **/
table.specials td {
	font-size: 11px;
}
table.specials {
	width: 100%;
}

.tableconcls {
	height: 300px; 
	overflow: scroll; 
}

.orderDivider {
	height: 6px; 
	background: #CCCCCC;
}

.dyncolumn {
	padding-right: 6px;
	word-break: break-word;
}

/*****************************************************************
* Print Preview page
*****************************************************************/
body.bprint {
	font-size: 7pt;
} 

body.bprint p, body.bprint th, body.bprint td{
	font-size: 7pt;
}

/*****************************************************************
* Login page / Forgotten password
*****************************************************************/
a.forgotpasslink {
	font-size: 8pt;
}

/************************************
* Contact Us
**************************************/

#FormArea table {
	margin-bottom:10px;
}
#ContactUsAlert, .alertMessage {
	padding:10px;
}
#ContactUsAlert {
	margin-left: 25px;
	width:425px;
}
#ContactUsAlert .alertMessage {
	color: blue;
	background-color: #ffffce;
	border: 1px solid black;
	font-size: 15px;
}
/******************************************
* Order Item Exceptions
*******************************************/
#itemExceptions, #cutoffException {
	margin-left: 5px;	
	margin-right: 5px;	
	margin-bottom: 5px;	
	width:auto;
}	
#itemExceptions h3, #cutoffException h3 {
   margin-top:3px;
}	 
#itemExceptions .itemExceptionMessage, #cutoffException, .cutoffExceptionMessage {	 
	padding:5px;
	color: #a51818;
	background-color: #ffffce;
	border: 1px solid black;
}
/******************************************
* Credits
*******************************************/
.credit {
	color: red;
	font-weight: bold;
}
.creditDetailTable th { }

/**********************************************
* Order Summary/Recap
***********************************************/
.review{
	color: navy;
	background-color:#FFFFCC;
	font: 12px verdana, helvetica, tahoma, arial, sans-serif; 
	font-weight: normal;
	padding: 10px;
	border: 2px solid red;
}

/**************************************************
* Calendar page related
***************************************************/

.hotitem {
    float: left;
    width: 180px;
    height: 200px;
    margin-right: 15px;
}

.calhot {
	display: block;
	flex-grow: 1;
	margin-right: 3px;
	width: 173px;
	background: #FFF;
	margin-bottom: 5px;
	position: relative;
	vertical-align: top;	
}

.hotimg {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
	height: 128px;
}

.ui-dialog #btnreturn {
	display: none;
	visibility: hidden;
}
.ui-dialog #btnprint {
	display: initial!important;
	visibility: visible!important;
}

/**************************************************
* Calendar / Policy Page Announcements
***************************************************/
#calendar_announcement{
	margin: 20px 0px;
}
#calendar_announcement table{
	width:100%;
}
#calendar_announcement th{
}
#calendar_announcement td{

}
#calendar_announcement table{
}
.announcements{
	border: 1px solid #ddd; 
	padding: 10px 5px 10px 5px;
}

/*******************************************************************
* Edit Order
**********************************************************************/
#addon_page_note{ display:block; margin-top: 5px; margin-bottom: 5px; width:60%; margin-left: 0px; }
input.editOrderButton{}
input.editOrderButtonDisabled{background-color:#eaeaea; color:#b5b5b5;}
input.addToOrderButton{}

#simplemodal-container.simplemodal-container[style]{ background-color:#ffffd2 !important; color:#000000 !important; height: 200px !important; width: 500px !important; }
#simplemodal-container h3{ color:#4a5910;}
#simplemodal-container input.submit{background-color:#2159a5; color:white; font-size: larger;}
#simplemodal-container input.simplemodal-close{}

/**********************************************
 * Login page
 **********************************************/
.logincustmess {
	font-size: 16px;
	font-weight: bold;
}

.insttext { 
	font-size: 7pt; 
	color: black;
}

table.ptagmaintable {
	width: 200px;
	border: 1px solid black;
}

table.ptagbuttontable input {
	width: 75px;
}

/*************************************************
 * SRP UPDATE
 ************************************************/
.srp_upcclass{
	padding-top:5px;
	width: 400px;
}
.srp_email{
	width:30em;
}
table.srp_recaptable{
	border-collapse:collapse;
	border-style:solid;
	border-width:1px;
}

table.srp_recaptable th, table.srp_recaptable td{
	border-style:solid;
	border-width:1px;
}

table.srp_recaptable td{
	vertical-align:top;
}
table.srp_recaptable th{
	width:3em;
}
table.srp_recaptable th.desc{
	width:20em;
}
table.srp_recaptable th.srp{
	width:10em;
}

.noProfileMsg {
	color: white;
}

#changeSRPfilterTable {
	border: solid 1px;
}

#changeSRPfilterTable th {
	text-align: center;
}

.categoryFilters {
    width: 275px;
}

.categoryFilters table {
    margin: auto;
}

.filterSection {
	margin: auto 10px;
}

.filterOptions {
	border-left: solid 1px;
}

.filterOptions input[type="checkbox"] {
    margin: 3px;
}

.filterOptions div {
	margin: 10px auto;
}

.srpTable .priceIncrease, .srpTable .priceDecrease {
    margin-left: 5px;
}

.SRPmodified {
	background-color: palegreen !important;
}

/*************************************************
 * Price Range Text
 ************************************************/

table#pricerangekey {
	width: 50%;
	border: 1px solid black;
}

table#pricerangekey td, table#pricerangekey th {
	font-size: 8pt;
}

table#pricerangekey .firstcol {
	background-color: #ddd;
}

.cartupdate, .cartloading {
    float: left;
    position: relative;
    left: -60px;
    height: 0px;
}

.cartupdate {
	color: red;
}

.recvdtclass {
	font-weight: bold;
	white-space: nowrap;
}

.cartTable input[name^=COMMENT][readonly] {
	background-color: #F2F2F2 !important;
	border-color: #ddd;
}

div.submitCrossSell {
	border: 2px solid #777779;
	padding: 15px;
	display: inline;
	float: left;
	margin-right: 30px;
	margin-bottom: 20px;
	height: 65px;
	width: 300px;
	background-position: center center;
	background-size: cover;
}

div.submitCrossSell > a {
	display: block;
	width: 100%;
	height: 100%;
	font-size: 22px;
	color: white;
}
div.submitCrossSell > a > span {
	background-color: black;
	opacity: 0.75;
	padding: 6px;
}

.mobileHidden {
	display: none;
}

.arrow-right:after {
    content: "";
    position: absolute;
    right: -15px;
    top: 0;
    width: 0; 
    height: 0; 
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid white;
}

.loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 10000;
	background-color: rgba(0, 0, 0, 0.301);
	cursor: progress;
}

.spinner {
    color: rgba(0,0,0,0) !important;
    background-color: white;
    background-image: url(../media/spinner.gif) !important;
    background-repeat: no-repeat !important;
	background-size: 16px 16px !important;
    background-position: center;
}
.catalog_profmaint_button {
	min-width: 20px;
}
.catalog_profmaint_button.spinner {
	background-color: transparent;
	background-position: left center;
}

.catalog_profmaint_button.disabled {
  pointer-events: none;
}
.catalog_profmaint_button.disabled img {
	visibility: hidden;
}

/** Mobile apps links on login page */
.mobile-apps {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
}
.mobile-apps a,
.mobile-apps img {
	display: block;
	height: 100%;
	width: auto;
}

.mobile-apple,
.mobile-android {
    display: inline-block;
	height: 50px;
	width: auto;
	padding: 5px;
}
/**/

/********************************************
 * Contact Maintenance Page
 * *******************************************/
#customer_contact_edit {
	float: left;
	padding: 20px;
}

p.form-section-detail.phone {
	white-space: nowrap;
}

.customertab {
	background-color: white;
	border-radius: 3px;
	display: flex;
	flex-flow: wrap;
	width: 90%;
	padding-left: 10px;
	border: 13px solid #aabcd4;
}

#customertab_new {
	border: none;
}

.customer_tab_content {
	float: left;
	padding: 10px;
	min-width: 375px;
}

.customer_tab_content p {
	margin: 0 0 0.25em;
}

.customer_tab_content p.form-section-header {
	margin: 0.75em 0 0.75em 0;
	font-weight: bold;
}
.cont-type-info:not([aria-label=""])::before {
	content: " ";
	cursor: help;
	position: absolute;
	width: 12px;
	height: 16px;
	margin-left: 3px;
	background-image: url(../media/question-circle-solid.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center bottom;
	filter: opacity(50%);
}

.form-section p.form-section-header {
    text-transform: uppercase;
    font-size: 13px;
    color: #A2A8AD;
    letter-spacing: 1px;
}

p.form-section-detail.phone {
    white-space: nowrap;
}

.password-message {
	padding: 5px 10px;
	max-width: 300px;
}

/**/

/* Shopping cart indicator */
.cart-wrapper {
	color: #666;
}
.cart-wrapper .item-num {
	background-color: #d4656b;
}
.cart-wrapper:hover {
	color: #000;
}
.cart-wrapper:hover .item-num {
	background-color: #CE1F28;
}
.cart-wrapper {
	display: inline-flex;
	flex-flow: row nowrap;
	margin: 0 1.5em;
	font-size: 11pt; /* Change this property ONLY to scale up/down */
	cursor: pointer;
}
.cart-wrapper > .cart-text {
	font-size: 1em;
}
.cart-wrapper > .cart-icon {
	font-size: 0.8em;
}
.cart-wrapper > .cart-text *,
.cart-wrapper > .cart-icon * {
	font-size: inherit;
}
.cart-wrapper > .cart-text {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	margin-left: 0.5em;
}
.cart-wrapper > .cart-icon {
	margin: auto;
	padding-right: 0.5em;
	position: relative;
	vertical-align: middle;
	text-align: center;
}
.cart-wrapper > .cart-icon > svg > path {
	fill: currentColor;
}
.cart-wrapper .item-num {
	width: 1.5em;
	height: 1.5em;
	position: absolute;
	top: -0.5em;
	right: 0;
	border-radius: 50%;
	color: #ffffff;
	background-color: #d4656b;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
}
.cart-wrapper .item-num > span {
	line-height: 1.5em;
	height: 1.5em;
}
.cart-wrapper > .cart-text p {
	padding: 0 .2em;
	margin: auto 0 auto auto;
}
/**/

/* New login page styles */
.login-wrapper {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
}
.login-wrapper label {
	margin-top: 5px;
	display: block;
	font-size: 11pt;
}
.login-inputs,
.login-links {
	display: flex;
	flex-flow: column nowrap;
}
.login-inputs {
	margin-right: 5em;
	margin-left: 5em;
}
.forgotpasslink {
	margin-top: 1em;
	margin-bottom: 1em;
}
.login-flavor {
	width: 50%;
}

.cartitemcount, #cartitemcount, #cartitemcount_mobile {
    display: inline-block;
}

/**/

/* Public vendor about section */
.extracted-about-text .text{
	width: -moz-fit-content;
	width: fit-content;
	margin: auto;
}
/* see media query at end of file */

/* New profile class search */
.hidden.profile-class-filter {
	display: initial;
	visibility: visible;
}
/**/

/* Ad based order (support for CTABCO "Ad based order checkout method") */
.submitCheckout.method-O {
	display: none;
}
.submitReview.method-C {
	display: none;
}

/* password promt styles */
input[id="promptPassword"] {
	margin-left: 10px;
}
/**/

/***********************
 * MEDIA QUERIES
 ***********************/

/* Public vendor about section */
@media (max-width: 520px) {
  .extracted-about-text br{
    display: none;
    content: ' ';
  }
}
/**/

/**
 * Print from a jQuery dialog.
 * assumes popup is direct child of <body>.
 */
@media print {
	/* Remove buttons from the printout */
	.ui-dialog input[type="button"] {
		display: none!important;
	}
	/* default print removes background colors, so remove borders and colored text too */
	.ui-dialog *,
	.orderDetailTable,
	.orderDetailTable * {
		border: none!important;
		color: black!important;
	}
	/* make dialog fill whole screen and not cutoff content */
	.ui-dialog, .ui-dialog-content {
		top: 0px!important;
		left: 0px!important;
		height: auto!important;
		width: auto!important;
		overflow: visible!important;
	}
}

/** CONTACT MAINETNANCE BALLOONS 
https://github.com/kazzkiq/balloon.css/tree/1027b4f518c616a1ec96b608ee913e8c6d9fd0e4

Edited from original.

The MIT License (MIT)

Copyright (c) 2016 Claudio Holanda

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/

:root {
  --balloon-color: rgba(16, 16, 16, 0.95);
  --balloon-font-size: 12px;
  --balloon-move: 12px; }

button[aria-label][data-balloon-pos] {
  overflow: visible; }

[aria-label][data-balloon-pos] {
  position: relative;
  cursor: pointer; }
  [aria-label][data-balloon-pos]:after {
    opacity: 0;
    pointer-events: none;
    transition: all .18s ease-out .18s;
    text-indent: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: normal;
    font-style: normal;
    text-shadow: none;
    font-size: var(--balloon-font-size);
    background: var(--balloon-color);
    border-radius: 2px;
    color: #fff;
    content: attr(aria-label);
    padding: .5em 1em;
    position: absolute;
    white-space: nowrap;
    z-index: 10; }
  [aria-label][data-balloon-pos]:hover:before, [aria-label][data-balloon-pos]:hover:after, [aria-label][data-balloon-pos][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-visible]:after, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:before, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:after {
    opacity: 1;}
  [aria-label][data-balloon-pos].font-awesome:after {
    font-family: FontAwesome, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }
  [aria-label][data-balloon-pos][data-balloon-break]:after {
    white-space: pre; }
  [aria-label][data-balloon-pos][data-balloon-break][data-balloon-length]:after {
    white-space: pre-line;
    word-break: break-word; }
  [aria-label][data-balloon-pos][data-balloon-pos="up"]:after {
    bottom: 100%;
    left: 50%;
    margin-bottom: 10px;
    transform: translate(-50%, var(--balloon-move));
    transform-origin: top; }
  [aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:after {
    transform: translate(-50%, 0); }
  [aria-label][data-balloon-pos][data-balloon-pos="down"]:after {
    left: 50%;
    margin-top: 10px;
    top: 100%;
    transform: translate(-50%, calc(var(--balloon-move) * -1)); }
  [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:after {
    transform: translate(-50%, 0); }
  [aria-label][data-balloon-pos][data-balloon-pos="left"]:after {
    margin-right: 10px;
    right: 100%;
    top: 50%;
    transform: translate(0, -50%); }
  [aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:after {
    transform: translate(calc(var(--balloon-move) * -1), -50%); }
  [aria-label][data-balloon-pos][data-balloon-pos="right"]:after {
    left: 100%;
    margin-left: 10px;
    top: 50%;
    transform: translate(0, -50%); }
  [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:after {
    transform: translate(var(--balloon-move), -50%); }
  [aria-label][data-balloon-pos][data-balloon-length="small"]:after {
    white-space: normal;
    width: 80px; }
  [aria-label][data-balloon-pos][data-balloon-length="medium"]:after {
    white-space: normal;
    width: 150px; }
  [aria-label][data-balloon-pos][data-balloon-length="large"]:after {
    white-space: normal;
    width: 260px; }
  [aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after {
    white-space: normal;
    width: 380px; }
    @media screen and (max-width: 768px) {
      [aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after {
        white-space: normal;
        width: 90vw; } }
  [aria-label][data-balloon-pos][data-balloon-length="fit"]:after {
    white-space: normal;
    width: 100%; }

/*  END CONTACT MAINTENANCE BALLOONS */

/* Carousel styles */
#specials-ui .specials-carousel, #suggestedItems-ui .suggestedItems-carousel {
	display: flex;
    padding: 10px 20px 50px 20px;
    margin-bottom: 30px;
}

.suggestedItems-title h4 {
    margin-bottom: 0px;
    margin-top: 50px;
}

.carouselItem-img, .suggestedItem-img {
    width: -moz-fit-content;
	width: fit-content;
    margin: auto;
	display: flex;
}

.special-box a:focus {
	outline: none;
}

.special-img img {
    width: 200px;
    object-fit: cover;
}

.suggestedItem-img img {
    height: 185px;
    width: 185px;
    object-fit: cover;
}

.special-info, .suggestedItem-info {
    padding: 10px 0;
}

.special-add, .suggestedItem-add {
	width: -moz-fit-content;
    width: fit-content;
    margin: auto;
}

.slick-list {
  overflow: hidden;
}

.slick-slide {
    padding: 15px;
    margin: 5px;
    display: block;
    height: 320px;
    border: 1px solid lightgrey;
    transition: all 0.3s ease-in-out;
}

.suggestedItems-carousel .slick-slide {
	height: 350px;
}

.slick-slide:hover {
	box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.5);
}

.slick-slide .row {
  margin: unset;
}

.slick-slide .col-lg-3, .slick-slide .col-md-4, .slick-slide .col-sm-6{
  flex: unset;
  max-width: unset;
  width: 100%;
  padding: 0px;
}

.slick-slide .special-info *, .slick-slide .suggestedItem-info * {
	width: -moz-fit-content;
	width: fit-content;
	margin: auto;
	font-size: 10pt;
	text-align: center;
	color: #333;
}

.suggestedItem-info .suggestedItem-title {
    height: 30px;
}

.suggestedItem-info .suggestedItem-num {
    margin: 5px auto;
}

.slick-slide .special-box .add-to-cart a, .slick-slide .suggestedItem-box .add-to-cart a {
  width: 100%;
}

.slick-slide .special-box .add-to-cart a::after, .slick-slide .suggestedItem-box .add-to-cart a::after {
  position: relative;
  left: 19px;
  top: 2px;
}

.slick-track {
  display: flex;
}

.slick-dots {
  display: none !important;
}

.slick-prev, .slick-next {
    /*color: #999;*/
    color: transparent;
    width: 17px;
    height: 20px;
    background-color: transparent;
    border: none;
    position: relative;
    top: 160px;
    font-size: 25pt;
}

.slick-prev:before:hover, .slick-next:before:hover {
	font-weight: bold;
	transition: 0.1s;
}

.slick-prev {
    right: 20px;
}

.slick-next {
    left: 20px;
}

.slick-prev:before {
  content: "\27E8";
  color: grey;
}

.slick-next:before {
  content: "\27E9";
  color: grey;
}

.slick-prev:focus, .slick-next:focus {
  outline: none;
}

@media (max-width: 991px){
  .slick-slide .special-box .special-info .special-title, .slick-slide .suggestedItem-box .suggestedItem-info .suggestedItem-title {
    font-size: 10pt;
  }
  .slick-slide .special-info *, .slick-slide .suggestedItem-info * {
	width: -moz-fit-content;
	width: fit-content;
    margin: auto;
    font-size: 8pt;
    text-align: center;
  }
}

@media (max-width: 810px){
  .slick-slide .special-box .add-to-cart a::after, .slick-slide .suggestedItem-box .add-to-cart a::after {
    font-size: 20px;
    left: 10px;
  }
}
/* End carousel styles */

/* Standing orders: Subcustomer selection */
.subcustomer-selection {
	margin-bottom: 2em;
}
/* Standing orders: grid layout */
.standing-row-item.line, .standing-header-item.line {
  grid-area: line;
}
.standing-row-item.pdno, .standing-header-item.pdno {
  grid-area: pdno;
}
.standing-row-item.desc, .standing-header-item.desc {
  grid-area: desc;
}
.standing-header, .standing-row {
  display: grid;
  grid-template-columns: 30px 75px 300px repeat(7, 1fr);
  grid-template-rows: auto;
  grid-template-areas: "line pdno desc quan_1 quan_2 quan_3 quan_4 quan_5 quan_6 quan_7"
}
.standing-row:nth-child(2n) {
  background-color: #eee;
}
.standing-header-item {
  font-weight: bold;
}
.standing-row-item {
	font-weight: normal;
}
.standing-header-item,.standing-row-item {
  margin: auto;
  width: 100%;
  height: 100%;
  text-align: center;
}
.standing-row-item.desc {
  word-break: break-word;
}

/* Standing orders: borders and colors and fonts */
.standing {
  box-sizing: border-box;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  margin-bottom: 2em;
}
.standing-header-item,.standing-row-item {
  box-sizing: content-box;
  border-top: 1px solid black;
  border-left: 1px solid black;
}
.standing-instructions {
  margin: 0 0 2em 0;
  font-weight: normal;
  background-color: #ffffa5;
  padding: 1em;
  border-radius: 10px;
  border: 1px solid black;
}
.standing-info {
	font-weight: normal;
}

@media screen and (max-width: 1050px) {
  .standing {
    max-width: 1050px;
    width: 95vw;
    margin-left: 1vw;
  }
  .standing-header, .standing-row {
    grid-template-columns: 30px 75px 3fr 1fr;
    grid-template-areas:
      "line pdno desc quan_1"
      "line pdno desc quan_2"
      "line pdno desc quan_3"
      "line pdno desc quan_4"
      "line pdno desc quan_5"
      "line pdno desc quan_6"
      "line pdno desc quan_7";
  }
}
@media screen and (max-width: 450px) {
  .standing-header, .standing-row {
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
      "line quan_1"
      "line quan_2"
      "pdno quan_3"
      "pdno quan_4"
      "desc quan_5"
      "desc quan_6"
      "desc quan_7";
  }
}

/* ACCOUNT MAINT CODE */
.billing-section label {
  font-weight: bold;
  display: block;
}
.billing-section > p {
  margin: 0;
}
.billing-wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}
.billing-wrapper > .billing-section:first-child {
  margin-left: 0;
}
.billing-section {
  margin: auto 3em;
  height: 250px;
}
.billing-section > label {
  margin-bottom: 0.5em;
}
.billing-section > hr {
  margin: 1.5em 0;
}

/* search-loading-elem, for a "skeleton loader" layout for search options at top of page */
.search-loading {
  font-size: 0;
  width: 320px;
  height: 40px;
  cursor: wait;
  background-image:
    linear-gradient(
      90deg,
      rgba(255,255,255,0) 0px,
      rgba(255,255,255,0.8) 30px,
      rgba(255,255,255,0) 60px
    ),                                              /* animation */
    linear-gradient(lightgrey 24px, transparent 0), /* search bar */
    linear-gradient(lightgrey 32px, transparent 0), /* submit */
    linear-gradient(lightgrey 32px, transparent 0), /* list profile */
    linear-gradient(white 100%, transparent 0);     /* background */
  background-size:
    20px 40px,  /* animation */
    140px 24px, /* search bar */
    72px 32px,  /* submit */
    72px 32px,  /* list profile */
    320px 40px; /* background */
  background-position:
    -320px 0,  /* animation */
    10px 50%,  /* search bar */
    160px 50%, /* submit */
    240px 50%, /* list profile */
    0 0; /* background */
  background-repeat: no-repeat;
  animation: search-loading-shine 2.6s infinite linear;
}
.search-loading > * {
  display: none!important;
}

@keyframes search-loading-shine {
  to {
    background-position: 
      640px 0,   /* animation */
      10px 50%,  /* search bar */
      160px 50%, /* submit */
      240px 50%, /* list profile */
      0 0;       /* background */
  }
}

/* quantity increment buttons */
.quantity-input {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
}

.quantity-input input:focus {
	outline: none;
}

.quantity-input input[type="button"]:active {
	background-color: #ccc;
}

.quantity-input input[type="button"] {
  width: 33px;
  height: 32px;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 0;
  margin: 0;
  font-size: 20px;
  background-color: #ddd;
  color: black;
  transition: unset;
}

.quantity-input input[type="button"].quantity-increment {
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

.quantity-input input[type="button"].quantity-decrement {
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

.quantity-input input[type="text"] {
  width: 60px;
  margin: unset;
  border: 1px solid #ccc;
  border-radius: 0px !important;
  text-align: center;
}
/**/

#DLDTrequired {
	color: gray;
	margin-left: 5px;
}

/******************** Self Serve Menu Styles ***************/

/* consistent font sizing */
.selfServeMenu {
	height: 1.5em;
	width: 460px;
	margin: 10px 0px;
	z-index: 2;
	border: 0;
	outline: none;
	font-size: 16px;
	background: transparent;
	box-shadow: none;
}
.selfServeMenu-right {
	margin-left: auto;
}
.selfServeMenu * {
	font-size: 1em;
}
.selfServeMenu small {
	font-size: 0.8em;
}
/* button/header styling */
.selfServeMenu-button {
	display: flex;
	text-align: right;
	font-weight: bold;
}
.selfServeMenu-button::after {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 0.3em;
	margin-top: 10px;
	vertical-align: 0.3em;
	content: "";
	border-top: 0.3em solid;
	border-right: 0.3em solid transparent;
	border-bottom: 0;
	border-left: 0.3em solid transparent;
	color: #676767;
}
.selfServeMenu-button.light::after{
	color: white;
}
/* customer info in button and dropdown */
.selfServeMenu .customerInfo {
	display: flex;
	flex-flow: column nowrap;
	max-width: 100%; /* 442px */
	margin-left: auto;
}
.selfServeMenu .customerExtraInfo {
	text-overflow: ellipsis;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
}
.selfServeMenu .customerExtraInDropdown {
	text-align: center;
	font-weight: bold;
	padding: 0 5px;
	margin: 0;
	color: black;
}
.selfServeMenu .customerExtraInDropdown span {
	display: block;
}
.selfServeMenu .customerExtraInDropdown span:not(:empty) {
	margin-top: 10px;
	margin-bottom: 10px;
}
/* hover logic */
a.selfServeMenu-dropdown-item:hover {
	color: #474747;
}
.selfServeMenu-dropdown-item:hover .label {
	color: #474747;
	text-decoration: underline;
}
.selfServeMenu-dropdown-item.contains-dropacross > a:hover {
	color: #474747;
	text-decoration: underline;
}
.selfServeMenu-hover > .selfServeMenu-hover-activate {
	top: -9999px;
	z-index: 1;
}
.selfServeMenu-hover:hover > .selfServeMenu-hover-activate {
	top: 0;
	transition: none;
}
.selfServeMenu-hover-activate.hover-short {
	transition: top 0.25s step-end;
}
.selfServeMenu-hover-activate.hover-long {
	transition: top .75s step-end;
}
/* profile image */
.selfServeMenu-image {
	width: 1em;
	height: 1em;
	background-size: 1em;
	display: inline-block;
}
.selfServeMenu-image.dark,
.customerInfo.dark .selfServeMenu-image {
	background-image: url(../media/user-solid-dark.png);
}
.selfServeMenu-image.light,
.customerInfo.light .selfServeMenu-image {
	background-image: url(../media/user-solid-light.png);
}
.customerInfo.light span {
	color: white;
}

/* dropdown menu styling */
.selfServeMenu-dropdown {
	position: relative;
	color: #676767;
	display: flex;
	flex-direction: column;
	border: 1px solid darkgray;
	border-top: none;
	background-color: white;
	width: 50%;
	margin-left: auto;
}
.selfServeMenu-dropdown > a:first-child {
	margin-top: 10px;
}
.selfServeMenu-dropdown > hr {
	margin: 5px;
}
.selfServeMenu-dropdown > hr:last-of-type {
	margin-bottom: 0;
	border: none;
}
.selfServeMenu-dropdown > a:last-child {
	margin-bottom: 10px;
}
/* shared dropdown menu item styling */
.selfServeMenu-dropdown-item {
	width: 100%;
	height: 2em;
	line-height: 2em;
	margin: auto;
	padding: 0 5px;
	text-align: center;
	font-weight: bold;
	text-decoration: none;
	color: #676767;
}
.selfServeMenu-dropdown-item .label {
	margin: auto;
	font-weight: bold;
	color: #676767;
}
.selfServeMenu-dropdown-item a {
	padding: 3px;
	color: #676767;
	text-decoration: none;
}
/* dropacross */
.selfServeMenu-dropdown-item.contains-dropacross,
.selfServeMenu-dropdown-item > .dropacross li {
	list-style: none;
	/* IE HACK: Hide bullets on IE as they cannot be styled properly. This is a 1x1 transparent image. 'unset' not supported in IE */
	list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
	list-style-image: unset;
}
.selfServeMenu-dropdown-item.contains-dropacross {
	position: relative;
	display: flex;
}
.selfServeMenu-dropdown-item > .dropacross {
	position: absolute;
	left: -100%;
	width: 100%;
	padding: 0;
	margin: 0;
	background: white;
	border: 1px solid darkgray;
}
.selfServeMenu-dropdown-item > .dropacross li {
	margin: 0;
	padding: 0;
}
.selfServeMenu-dropdown-item > .dropacross li:not(:empty) {
	height: 2em;
	line-height: 2em;
	margin-bottom: 5px;
	border-top: 1px solid #eee;
}
.selfServeMenu-dropdown-item > .dropacross li:first-child:not(:empty) {
	border-top: none;
	margin-top: 5px;
}
/* end self serve menu styles */

/******** OPEN INVOICES AND CREDIT CARD **********/

/* Open Invoice Payment Styles */
.paymentmsg { color: red;}

.openinvoices button.entryon-partial.ui-state-disabled {
    font-size: 11px !important;
    opacity: unset !important;
    pointer-events: unset !important;
}
.openinvoices td.negative {
	color: green;
}
.openinvoices td.positive {
	color: red;
}
.openinvoices button.entryon-partial {
	min-width: 120px;
}
#srvletarea .openinvoices input:disabled {
    background-color: #cfcfcf;
}
.achinfo tr {
    display: flex;
    flex-direction: column;
}
#ACHSUBMIT:disabled {
  background: #dddddd;
  cursor: not-allowed;
}
#AccountNumMatch {
	color: red;
	padding-left: 10px
}
#paymentPolicies summary {
    font-size: 20px;
    margin-bottom: 15px;
}
#paymentPolicies h4 {
  margin-bottom: 0;
}
#paymentPolicies p, .paymentDisclaimers {
  margin-top: 0;
  margin-bottom: 15px;
}
.openinv-header {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	margin-top: 15px;
}
.openinv-instructions {
	margin-top: 15px;
	width: 100%;
}
.openinv-payment-options {
	display: flex;
	flex-flow: column nowrap;
}
.no-detail-link {
	color: black;
	pointer-events: none;
}
.openinv-payment-options {
	display: grid;
	grid-template-rows: 1fr 1fr 1fr;
	justify-items: start;
	align-items: center;
}
.openinv-payment-options > span {
	margin: auto 0;
	line-height: 100%;
	height: 100%;
	vertical-align: middle;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
}
.openinv-header #spantotalamt {
	padding-left: 1ch;
}
.openinv-header #fixedamt {
	margin: auto 0;
}

/* Convenience Fee Calculation Box Styles */
.showLegalVerbiage{
	display: none;
}
.paymentInfoBox {
	border: 2px solid black; 
	width: -moz-fit-content;
	width: fit-content; 
	padding: 4px;
	margin: 15px 0px;
	font-weight: normal;
}
.paymentInfoBoxRow {
	display: flex;
}
.paymentInfoBoxDesc {
	width: 190px;
	text-align: right;
}
.paymentInfoBoxAmount {
	width: -moz-fit-content;
	width: fit-content;
	display: flex;
	margin-left: auto;
}
.hidden.paymentInfoBoxRow {
	display: none;
}
img.ach-help {
	object-fit: contain;
	margin-left: 0px;
	width: 380px;
}
.updatedFee {
	color: red;
	padding-right: 6px;
}
input[type="submit"]:disabled, input[type="button"]:disabled {
	background: #dddddd;
	cursor: not-allowed;
	border: 1px solid grey;
}

/* PPRO_PAYMENT Form */
th.credit {
	background-color: #CCCCCC;
	color: #000000;
}
.payment-wrapper {
	display: flex;
	flex-wrap: wrap;
	margin: 10px 0;
	max-width: 1000px;
}
.payment-wrapper input#EMAL {
	max-width: 400px;
}
.payment-fields-title,
.payment-address-title {
	font-size: 1.3em;
	font-weight: bold;
}
.payment-fields,
.payment-address {
	display: grid;
	grid-gap: 5px;
	margin-bottom: auto;
}
.payment-form-line.flex.field-wrap > :not(label) {
    width: 100%;
}
.payment-form-line.grid {
	display: grid;
	justify-items: start;
	grid-template-columns: max-content;
	grid-gap: inherit;
}
.payment-form-line.grid.single-label,
.payment-form-line.grid.single-field {
	grid-template-areas:
		"label"
		"field";
}
.payment-form-line.grid.double-field,
.payment-form-line.double-label {
	grid-template-areas:
		"label label"
		"field field";
}
.payment-form-line.grid.triple-label,
.payment-form-line.grid.triple-field {
	grid-template-areas:
		"label label label"
		"field field field";
}
.payment-form-line.grid.single-label.double-field > label {
	grid-column-end: span 2;
}
.payment-form-line.grid.single-label.triple-field > label {
	grid-column-end: span 3;
}

.payment-form-line.flex {
	display: flex;
	flex-flow: row wrap;
}
.payment-form-line.flex.single-label > label {
	width: 100%;
}
.payment-form-line.flex.double-label > label {
	width: 50%;
}
.payment-form-line.flex.triple-label > label {
	width: 33.33%;
}

#card_cvv,
#exp_month,
#exp_year {
	width: 6ch;
}
#card_number {
	width: 25ch;
}
.pmtIco {
	margin-right: 3px;
	margin-bottom: 8px;
	background: url('../media/cccards.png') no-repeat;
	float: left;
	width: 48px;
	height: 30px;
}
.pIco-vs {
	background-position: 0 0;
}
.pIco-mc {
	background-position: -50px 0;
}
.pIco-am {
	background-position: -100px 0;
}
.pIco-ds {
	background-position: -150px 0;
}
.pIco-dc {
	background-position: -200px 0;
}
/***********************************/

/* Vendor Quick View Styles */
.descriptionText {
    margin: auto 0;
	cursor: pointer;
}

@media (min-width: 535px) {
  div.ui-dialog-centered {
    right: calc((100vw - 535px) / 2) !important;
    left: calc((100vw - 535px) / 2) !important;
  }
}
@media (min-width: 780px) {
  div.ui-dialog-centered {
    right: calc((100vw - 780px) / 2) !important;
    left: calc((100vw - 780px) / 2) !important;
  }
}
@media (min-width: 1000px) {
  div.ui-dialog-centered {
    right: calc((100vw - 1000px) / 2) !important;
    left: calc((100vw - 1000px) / 2) !important;
  }
}
@media (min-width: 1200px) {
  div.ui-dialog-centered {
    right: calc((100vw - 1200px) / 2) !important;
    left: calc((100vw - 1200px) / 2) !important;
  }
}
@media (min-width: 1300px) {
  div.ui-dialog-centered {
    right: calc((100vw - 1300px) / 2) !important;
    left: calc((100vw - 1300px) / 2) !important;
  }
}

.quickview-content-wrap {
	display: flex;
}

.quickview-content-wrap .partner-img {
	margin-left: auto;
	margin-right: 50px;
	min-width: 300px;
    padding-top: 74px;
}

.quickview-content-wrap .partner-info {
	margin-left: 0;
	margin-right: auto;
	width: 50%;
}

.quickview-shop-vendor {
	width: -moz-fit-content;
	width: fit-content;
	margin: 10px auto;
}

.extracted-about-text .inner .text {
    width: 100%;
}

#centered_dialog.spinner {
  width: -moz-fit-content !important;
  width: fit-content !important;
  margin: 50px auto;
  height: 20px !important;
}
/* End Vendor Quick View styles */

/* Product Pills styles */
.productPills {
    display: flex;
	flex-wrap: wrap;
    margin: auto;
	list-style: none;
}

.productAttributePill, .productOptionalColumPill {
    text-transform: uppercase;
    margin: 2px 8px 2px 0;
    padding: 2px 12px;
    font-size: 13px;
    min-width: 150px;
    height: 22px;
    white-space: nowrap;
    font-weight: 700;
    background-color: dimgrey;
    color: white;
    border-radius: 10px;
    text-align: center;
}

.productAttributePill.color1 {
	background-color: red;
}
.productAttributePill.color2 {
	background-color: blue;
}
.productAttributePill.color3 {
	background-color: green;
}
.productAttributePill.color4 {
	background-color: orange;
}
.productAttributePill.color5 {
	background-color: slateblue;
}
.productAttributePill.color6 {
	background-color: lightseagreen;
}
.productAttributePill.color7 {
	background-color: darkslategray;
}
.productAttributePill.color8 {
	background-color: purple;
}
.productAttributePill.color9 {
	background-color: cyan;
}
/* End Product Pills styles */

/* Optional Column as Pills styles */
.label.product-tag.tag {
    display: none;
}

.notesDynamic .label.product-tag.tag, .label.product-tag.tag-type9 {
    display: unset;
    text-transform: uppercase;
    margin: 2px 8px 2px 0;
    padding: 2px 12px;
    min-width: 150px;
    height: 22px;
    white-space: nowrap;
    font-size: 11pt;
    font-weight: 700;
    font-style: normal;
    color: white;
    border-radius: 10px;
    text-align: center;
    background-color: green;
}

.catalogProdNotes {
    margin: 5px 40px;
}
/* End Optional Column as Pills styles */

span.dupnote:before {    
	font-family: 'Material-Design-Iconic-Font';
	content: '\f108';
	margin: 0 5px 0 0px;
	color: red;
	font-style: normal;
}
span.dupnote {
	color: red;
}

/* attribute filter */
#srvletarea {
	margin: 0 2vw;
}
.profile {
	grid-area: filter;
	position: relative;
}
.profile>.profile-header {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: flex-start;
}
.filters-position-L .profile-header,
.filters-position-L .profile-items {
	margin: 0;
}
.filters-position-L .profile-header {
	flex: 2;
}
.filters-position-L .profile-items {
	flex: 10;
}

.header-flavor {
	margin:auto;
}

.header-toolbar {
	display: grid;
	grid-template-columns: 200px 1fr;
	grid-template-rows: 50px 1fr;
	grid-template-areas:
		"header header"
		"filter items";
	justify-content: space-between;
	padding: 10px 0;
	margin-bottom: 25px;
	border-bottom: 5px solid black;
	gap: 10px;
}

.info,
.remove-light {
	width: 16px;
	height: 16px;
	filter: opacity(0.5);
}

#tablecon {
	min-width: 800px;
}

@media (max-width: 960px) {
	.profile.filters-position-L {
		flex-wrap: wrap;
	}
}

.filter-title,
.header-end-item {
	font-size: 16px;
	font-weight: bold;
}

.header-search,
.header-buttons {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-end;
	align-items: center;
}

.header-crosssell {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: flex-start;
}

.header-search-title {
	width: 100%;
	font-weight: bold;
}

.header-search input[name="TEXT"] {
	flex: 1;
}

.header-search {
	position: relative;
	grid-area: header;
}
.header-search-advanced {
	position: absolute;
	top: 105%;
	right: 0px;
	width: 100%;
	padding: 5px;
	box-sizing: border-box;
	display: flex;
	flex-flow: row nowrap;
	background: white;
	border: 2px solid black;
	z-index: 1;
}
.header-search-advanced > * {
	margin: 0 15px;
	max-height: 50px;
	height: 50px;
	line-height: 50px;
}
.header-search-advanced > .search-dropdowns {
	display: flex;
	flex-flow: row nowrap;
}
.dual-input .hide-in-search {
	display: none;
}

.search-advanced-group-title {
	font-weight: bold;
}
.search-advanced-close {
	position: absolute;
	top: 0;
	right: 0;
	margin: 5px;
	border: 2px solid #666;
	padding: 5px;
	height: 34px!important;
	max-height: 34px!important;
	cursor: pointer;
	line-height: 20px;
}

.filter-disable {
	/* This trick keeps the width intact when filtering */
	visibility: hidden;
	height: 0;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
.profile-items {
	grid-area: items;
}

.filters .search-filter {
	display: flex;
	flex-flow: column;
}
.filters .search-filter.hidden {
	display: none;
	visibility: hidden;
}
.filters .filter-header {
	height: 50px;
	min-width: 175px;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
}
.filter .filter-header>img {
	height: 1.6em;
	transform: rotate(0deg);
	transition: transform .25s ease;
	margin-right: 10px;
}
.filter.collapsed .filter-header>img {
	transform: rotate(180deg);
	margin-right: 10px;
}
.filter.collapsed .search-filter-option,
.filter.collapsed .swc-group {
	height: 0;
	overflow: hidden;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}
.search-filter-option-value {
	margin: 0 5px;
	padding: 0;
}
.search-filter-option-text {
	margin: 0;
	padding: 0;
}

/** LIVE SEARCH popup */
.live-search-field.live-enabled {
	position: fixed!important;
	top: 200px;
	left: 50%;
	z-index: 13;
	transform: translateX(-50%);
}

#live-results-wrapper {
	width: 680px;
	margin-left: auto;
	margin-bottom: -500px;
	outline: 15px solid white;
	background-color: #fff;
	position: fixed;
	z-index: 12;
	margin: auto;
	top: 200px;
	left: 50%;
	transform: translateX(-50%);
	padding: 10px;
	padding-top: 48px;
}
#live-results-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 11;
	background-color: rgba(0,0,0,0.5);
}
body.live-results-scroll-stop {
	overflow-y: hidden;
}

.live-results .catalogProdImageInner {
  height: 100px;
  width: 100px;
}

.live-results .catalogProdImage {
  width: 100px;
  margin-right: 10px;
}

.live-results .description-title {
  line-height: 5px;
  font-size: 16px !important;
}

.live-results table {
  width: 650px;
}

.live-results td.productPrice {
  width: 100px;
}

.live-results .view-all-btn a {
  color: #3FA56D;
  font-size: 16px !important;
}
/** /LIVE SEARCH */