/***********************************************
 * general tags                                *
 ***********************************************/

html, body {
	margin: 0;
	padding: 0;
	border: 0;
}

body {
	font-family: 'Helvetica Neue', Helvetica, sans-serif;
	padding: 0;
	margin: 0.5em;
	color: #000000;
	text-align: center;
	font-size: 13px;
}

input[type=text]:focus, input[type=password]:focus, textarea:focus, input.ui-combobox-input:focus, input.ui-corner-all:focus {
	border: 1px solid #51C9EE;
	box-shadow: 0 0 5px rgba(81, 203, 238, 1);
	outline: none;
}

select:focus {
	border: 1px solid #51C9EE;
	outline: thin solid #51C9EE;
}

pre,code,kbd,samp,tt{
	font-family:monospace;
	font-size:108%;
	line-height:100%;
} /* yui css from fonts-min.css */

/***********************************************
 * Jquery Buttons / Jquery Override            *
 ***********************************************/

.ui-state-default,
.ui-widget-content
.ui-state-default,
.ui-widget-header
.ui-state-default{
	background: #e6e6e6 !important;
	border: 1px solid #d3d3d3;
	color:#444;
}
th.ui-state-default:hover {
	background: #dadada !important;
}
.ui-widget-header {
	background: #cccccc !important;
	border: 1px solid #aaaaaa;
}
th.ui-state-default {
	padding: 4px;
	border: 1px solid #c2c2c2;
	font-size: 13px;
}

button,
.jqButton {
	border: 1px solid #aaaaaa;
	background: #e6e6e6;
	font-weight: normal;
	color: #555555;
	border-radius: 4px;
}

button,
.jqButton {
	border: 1px solid #aaaaaa !important;
}

button:hover, .jqButton:hover {
	background: #dadada !important;
	border: 1px solid #999999 !important;
	color: #212121;
}

/*Fix layout of "Pay with CC" buttons on payment screens*/
#ccButtonset > .ui-controlgroup > .ui-controlgroup-item {
	float: none;
}

/* No Text Button */
button.noText {
	padding: 6px;
	height: 17px;
	width: 22px;
}

button.noText span.ui-button-text {
	padding: 2px 8px 1px 0;
}

input.ui-button {
	padding: 5px 7px;
	margin: 3px;
}

button.ui-button {
	margin: 4px;
}

.ui-button-text-only .ui-button-text {
	padding: 4px 8px 4px 8px;
}

.ui-button-text-icon-primary .ui-button-text,
.ui-button-text-icons .ui-button-text {
	padding: 4px 8px 4px 20px;
}

.ui-button-text-icon-primary .ui-button-icon-primary,
.ui-button-text-icons .ui-button-icon-primary,
.ui-button-icons-only .ui-button-icon-primary {
	left: 2px;
}

button.noText {
	margin: 0;
}

.ui-widget {
	font-size: 9pt;
}

/* No Text Button margin override */
.ui-accordion-icons .ui-accordion-header a {
	padding-left: 1.3em;
}

.ui-accordion-icons .ui-accordion-header a:hover {
	text-decoration: none;
	color: #000;
}

.ui-accordion .ui-accordion-header .ui-icon {
	position: absolute;
	left: .5em;
}

/* Select Multiple resize */
.ui-resizable-se {
	right: 3px;
	bottom: 20px;
}

a.ui-tabs-anchor {
	outline:none;
}

.ui-dialog {z-index: 9999;}


/***********************************************
 * shopping cart - item(s) in cart counter     *
 ***********************************************/

#cartContainer {
	z-index: 3;
	width: 100%;
}

#cartContainer.floatClass {
	position: absolute;
	top: -40px;
}

#cartContainer.loginClass {
	position: relative;
	top: 0;
}

#cartCount {
	border: 1px solid #aaa;
	background: #e6e6e6  50% 50% repeat-x;
	font-weight: normal;
	color: #555555;
	float: right;
	line-height: 25px;
	-webkit-border-radius: 100px 100px 100px 100px;
	border-radius: 100px 100px 100px 100px;
}

#cartIcon {
	color: #1D5EA2; /* default acme color */
	position: relative;
	top: 2px;
	padding: 0 0 0 6px;
	font-size: 14pt;
}

#cartDesc {
	margin: 0 0 0 2px;
}

#cartCountBadge {
	background: #1D5EA2; /* default acme color */
	color: #FFF;
	margin: 0 6px 0 2px;
	-webkit-border-radius: 20px 20px 20px 20px;
	border-radius: 20px 20px 20px 20px;
	padding: 2px;
}

/***********************************************
 * checkout pages                              *
 ***********************************************/

/* Checkout Progress */
.checkoutProgress {
	position: relative;
	display: inline-block;
	background: transparent;
	width: 100%;
	margin: 0;
	padding: 10px 0;
	text-align: center;
	border-bottom: 1px solid #D5D5D5;
	z-index: 10;
}

.checkoutProgress .circle,
.checkoutProgress .bar {
	display: inline-block;
	background: #fff;
	width: 40px; height: 40px;
	border-radius: 40px;
	border: 1px solid #d5d5da;
}

.checkoutProgress .bar {
	position: relative;
	width: 80px;
	height: 6px;
	margin: 0 -5px 31px -5px;
	border-left: none;
	border-right: none;
	border-radius: 0;
}

.checkoutProgress .circle .label {
	display: inline-block;
	width: 34px;
	height: 34px;
	line-height: 34px;
	border-radius: 34px;
	margin-top: 3px;
	color: #b5b5ba;
	font-size: 17px;
}

.checkoutProgress .circle .title {
	color: #b5b5ba;
	font-size: 13px;
	line-height: 30px;
	margin-left: -5px;
}

/* Done / Active */
.checkoutProgress .bar.done,
.checkoutProgress .circle.done {
	background: #eee;
}

.checkoutProgress .bar.active {
	background: linear-gradient(to right, #EEE 40%, #FFF 60%);
}

.checkoutProgress .circle.done .label {
	color: #FFF;
	background: #8bc435;
	box-shadow: inset 0 0 2px rgba(0,0,0,.2);
}

.checkoutProgress .circle.done .title {
	color: #444;
}

.checkoutProgress .circle.active .label {
	color: #FFF;
	background: #0c95be;
	box-shadow: inset 0 0 2px rgba(0,0,0,.2);
}

.checkoutProgress .circle.active .title {
	color: #0c95be;
}

/***********************************************
 * main navigation menu                        *
 ***********************************************/

#menu {
	width: 100%;
	height: 26px;
	list-style: none;
	padding: 0;
	margin: 0;
	display: table;
}

#menu li {
	float: left;
	margin-top: 3px;
	margin-right: 3px;
	margin-bottom: 3px;
}

#menu li a {
	text-transform: uppercase;
}

.boldbody {
	color: #000000;
	font-weight: bold;
	line-height: 1.2em;
}

.smallbody {
	color: #666666;
	font-size: 11px;
}

.login {
	background-color: #336699;
	color: #ffffff;
	padding: 2px;
}

a.login {
	color: #ffffff;
	text-decoration: none;
}

a.login:hover {
	color: #ffcc00;
	text-decoration: underline;
}

.red, .error-text {
	color: #cc0000;
}

.bold {
	font-weight: bold;
}

/* EMBEDDED CSS PULLED */

.source {
	font-size: 14px;
	font-weight: bold;
	color: #ff6600;
}

.counter {
	font-size: 11px;
	font-weight: bold;
	color: #888888;
}

.style1 {
	color: #cc3333;
	font-weight: bold;
}

.tiny {
	font-size: xx-small;
}

.h1, h1 {
	font-size: 18px;
	font-weight: bold;
	line-height: 1.2em;
}

.h2, h2 {
	font-size: 15px;
	font-weight: bold;
	line-height: 1.2em;
}

.h3, h3 {
	font-size: 13px;
	font-weight: bold;
	line-height: 1.2em;
}

/**********************************
* HELP ICON JQUERY OVERRIDE       *
***********************************/

.help_info {
	z-index: 100;
	vertical-align: middle;
	padding: 0;
}

.ui-state-default.help_on {
	border: 1px solid #095b97;
	background: #2694e8 url('/img/shared/jquery-old/ss_HelpInfo_up.png') 50% 50% repeat-x !important;
	margin-left: 5px;
}

.ui-state-hover.help_on {
	border: 1px solid #03365d;
	background: #266494 url('/img/shared/jquery-old/ss_HelpInfo_down.png') 50% 50% repeat-x;
	font-weight: normal;
	color: #212121;
}

.help_on.ui-corner-all,
.help_on.ui-corner-top,
.help_on.ui-corner-left,
.help_on.ui-corner-tl {
	border-top-left-radius: 20px;
}

.help_on.ui-corner-all,
.help_on.ui-corner-top,
.help_on.ui-corner-right,
.help_on.ui-corner-tr {
	border-top-right-radius: 20px;
}

.help_on.ui-corner-all,
.help_on.ui-corner-bottom,
.help_on.ui-corner-left,
.help_on.ui-corner-bl {
	border-bottom-left-radius: 20px;
}

.help_on.ui-corner-all,
.help_on.ui-corner-bottom,
.help_on.ui-corner-right,
.help_on.ui-corner-br {
	border-bottom-right-radius: 20px;
}

.help_on.ui-button-icon-only,
.help_info.ui-button-icon-only {
	width: 15px;
	height: 15px;
}

/* to make room for the icon, a width needs to be set here */
.help_on button.ui-button-icon-only {
	width: 15px;
	height: 15px;
}

/* button elements seem to need a little more width */

#helpToggle.ui-corner-all,
#helpToggle.ui-corner-top,
#helpToggle.ui-corner-left,
#helpToggle.ui-corner-tl {
	border-top-left-radius: 20px;
}

#helpToggle.ui-corner-all,
#helpToggle.ui-corner-top,
#helpToggle.ui-corner-right,
#helpToggle.ui-corner-tr {
	border-top-right-radius: 20px;
}

#helpToggle.ui-corner-all,
#helpToggle.ui-corner-bottom,
#helpToggle.ui-corner-left,
#helpToggle.ui-corner-bl {
	border-bottom-left-radius: 20px;
}

#helpToggle.ui-corner-all,
#helpToggle.ui-corner-bottom,
#helpToggle.ui-corner-right,
#helpToggle.ui-corner-br {
	border-bottom-right-radius: 20px;
}

label.radioButtonLabel {
	vertical-align: bottom;
}

table.tblImage td {
	background-color: transparent;
	padding: 0;
	margin: 0;
	text-align: center;
	vertical-align: middle;
}

/* buttons */
button {
	white-space: nowrap;
}

.buttonContainer {
	padding: 2px;
}

button.ui-button {
	height: auto;
}

/* shopping cart buttons */
.item_table {
	display: flex;
	gap: 4px;
	justify-content: space-between;
	flex-direction: column;
}

.item_table .jquery-button {
	width: 110px;
	float: right;
}

a.jqButton:hover {
	color: #212121;
}

/* tree control styles */
#TCTable {
	border: 1px solid #cccccc;
}

ul.TreeControl li {
	list-style: none;
}

ul.TreeControl,
ul.TreeControl ul,
ul.TreeControl li {
	margin: 0;
	padding: 0;
	white-space: normal;
}

ul.TreeControl ul {
	padding-left: 15px;
}

ul.TreeControl li a {
	padding-left: 15px;
	padding-right: 5px;
	cursor: pointer;
}

ul.TreeControl li.TCopen a {
	background: url(/img/tree_minus.gif) center left no-repeat;
	text-decoration: none;
}

ul.TreeControl li.TCclosed a {
	background: url(/img/tree_plus.gif) center left no-repeat;
	text-decoration: none;
}

ul.TreeControl li.TCbullet a {
	background: url(/img/x.gif) center left no-repeat;
}

ul.TreeControl li.TCopen ul {
	display: block;
}

ul.TreeControl li.TCclosed ul {
	display: none;
}

.TCCaption {
	color: #666666;
	font-style: italic;
	white-space: pre-wrap;
}

.myText {
	font-size: 10px;
	color: #000000;
	border-width: 1px;
	border-color: #000000;
	border-style: solid;
	text-align: left;
	background-color: #ffffff;
}

/***********************************************
 * informative boxes * konami                  *
 ***********************************************/

table.tblPage {
	border: 0;
	margin: 0 auto;
}

table.tblPage td {
	color: #666666;
	font-size: 0.8em;
	text-align: center;
	width: 30px;
}

table.tblPage A:link,
table.tblPage A:visited,
table.tblPage A:active,
table.tblPage A:hover {
	color: #666666;
}

table.tblPage strong {
	color: #cc0000;
}

.tblPageEdit {
	position: relative;
	margin-bottom: 0.2em;
	margin-top: 0.2em;
	border: none;
	padding: 0;
}

.tblPageEdit td .number {
	font-size: 1.4em;
}

.tblPageEdit td {
	background-color: #dbe5f1;
	font-size: 0.8em;
	text-align: center;
	width: 32px;
	border: 1px solid #666;
	cursor: pointer;
	height: 32px;
	vertical-align: middle;
}

.tblPageEdit A:link,
.tblPageEdit A:visited,
.tblPageEdit A:active,
.tblPageEdit A:hover {
	color: #666666;
	text-decoration: none;
}

.tblPageEdit .active {
	background-color: #95b3d7;
	border-width: 2px;
	border-color: #000;
}

.nextstep {margin: 0 20px;}

.template-err-container {
	width: 150px;
	height: 150px;
	text-align: left;
	margin: 0 auto;
	padding: 4px;
	background: transparent url("/img/shared/thumb-missingartwork.png") no-repeat center;
	pointer-events: none;
}

.template-err {
	content: '';
	visibility: hidden;
	pointer-events: none;
}

/***********************************************
 * Catalog Table                               *
************************************************/

.catalogTbl {
	background-color: transparent;
	padding: 0;
}

#nextBtnSection,
#backBtnSection {
	width: 75px;
}

#titleSection {
	width: auto;
}

/***********************************************
 * Catalog                                     *
************************************************/

#catalogWrap {
	/*border: 1px solid #d3d3d3;*/
}

#products {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: 1px solid #d3d3d3;
	grid-gap: 1px;
}

#products.list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
	grid-gap: 0;
	align-items: stretch;
}

#products > .prodCell {
	padding: 0;
	text-align: center;
}

#products.list > .prodCell {
	text-align: left;
}

.prodCell {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: transparent;
	border: 1px solid #d3d3d3;
	margin: -1px;
}

.prodCell .warningContainer {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 999;
	left: 0;
	color: orange;
}

.prodCell .warningBox {
	position: relative;
	top: calc(50% - 50px);
	left: calc(50% - 35%);
	background: rgba(255,255,255,0.9);
	width: 70%;
	border-radius: 10px;
	box-shadow: 0 0 6px 0 rgba(0,0,0,0.2);
	padding: 5px 0;
}

.prodCell .warningBox span.pw-img {
	margin: 8px 0 0 0;
	color: #efb239 !important;
}

.prodCell.parentSubcategoryCell {
	padding: 0;
}

.parentSubcategoryCell {
	height: 225px;
	overflow: hidden;
}

.parentSubcategoryCell img {
	width: 100%;
	height: auto;
}

.parentSubcategoryCell i {
	color: #ccc;
	font-size: 100px;
	position: relative;
	top: calc(50% - 55px);
}

.subcategoryName {
	position: absolute;
	bottom: 0;
	left: 0;
	font-size: 18px;
	font-weight: bold;
	color: #333;
	background: rgba(255,255,255,0.65);
	text-align: center;
	height: 35px;
	line-height: 35px;
	width: 100%;
}

.browseBtn {
	display: none;
}

.browseBtn span {
	display: block;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	background: rgba(0, 0, 0, 0.75);
	padding: 15px;
	border-radius: 15px;
	position: absolute;
	left: calc(50% - 60px);
	right: 0;
	width: 86px;
	text-align: center;
	top: calc(50% - 30px);
}

.parentSubcategoryCell:hover .browseBtn {
	display: block;
	position: absolute;
	background: rgba(0,0,0,0.5);
	width: 100%;
	height: 100%;
	top: 0;
}

/* subcategory images list view */
#products.list .parentSubcategoryCell {
	display: inline-block;
	margin: auto;
	height: 100px;
	padding: 0;
}

#products.list .parentSubcategoryCell i,
#products.list .parentSubcategoryCell img {
	margin: 0 !important;
	width: 100px;
}

#products.list .parentSubcategoryCell i {
	font-size: 85px;
	padding: 8px;
	top: 0;
}

#products.list .parentSubcategoryCell .subcategoryName {
	background: transparent;
	font-size: 16px;
	line-height: 0px;
	text-align: left;
	margin-left: 120px;
	position: absolute;
	top: 50%;
}

/* GRID View */
div.grid span.darkview {
	display: none;
}

div.grid h3 {
	line-height: normal;
	margin: 5px 0;
}

div.grid span.meta p {
	margin: 4px 0 6px 0;
}

/*div.grid div.prodCell:first-child {
	border-left: none;
}
div.grid div.prodCell:last-child {
	border-right: none;
}*/

/* LIST view */
div.list .prodCell {
	display: table;
	width: 100%;
	padding: 5px;
	text-align: left;
	border-left: none;
	border-right: none;
	border-bottom: none;
}

div.list div.prodCell.e {
	background-color: #EEE;
}

div.list div.prodCell:last-child {
	border-bottom: 1px solid #D3D3D3;
}

div.list div.prodCell img.thumb {
	border: 1px solid #D3D3D3;
}

div.list img.thumb {
	width: 75px;
	margin-right: 5px;
}

div.list section h3 {
	line-height: normal;
	display: inline-block;
	margin:7px 0 4px 0;
}

div.list section h3,
div.list section span.meta {
	text-align: left;
}

@media \0screen {div.list section h3 {line-height: 1.2em;}} /* IE8 */

*+html div.list section h3  {
	line-height: 1.2em;
} /* IE7 */

div.list span.meta p {
	margin: 2px 0 6px 0;
}

div.list section.left,
div.list section.right {
	display: table-cell;
}

div.list section.left {
	padding: 5px;
}

div.list section.left img {
	float: left;
}

div.list section.right {
	padding: 5px;
	vertical-align: top;
}

div.list section.right span.darkview {
	float: right;
}

@-moz-document url-prefix() { div.list section.right span.darkview {
	position: relative; top: 5px;
} } /* Firefox */

div.list span.meta {
	text-align: center;
	display: table;
	padding: 2px;
	width: 250px;
}

/* ZOOM */

div.grid a.anchor {
	position: absolute;
	float: right;
	border: 1px solid #d3d3d3;
	border-top: none;
	background: #e6e6e6;
	padding: 5px;
	margin-left: 18px;
	-webkit-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
}

div.list a.anchor {
	position: absolute;
	float: right;
	border: 1px solid #C5C5C5;
	border-top: none;
	background: #e6e6e6;
	padding: 2px;
	-webkit-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
	box-shadow: 0 2px 2px rgba(0,0,0,.20);
}

div.grid a.anchor:hover,
div.list a.anchor:hover {
	background: #dadada;
	border-color: #999;
}

div.list img#newItem {
	position: absolute;
	margin: -10px 0 0 -100px;
	width: 35px;
	height: 35px
}

.spriteNewTag {
	position: absolute;
	left: -5px;
	top: -5px;
	z-index: 102;
	width: 45px;
	height: 45px;
	background-image: url('/catalog/img/newItem.png');
	background-size: 100%;
}

.spriteContainer:hover {
	border-color: #888 #333 #333 #888;
}

div#products.list .template-err-container {
	margin: 0;
	float: left;
	width: 75px;
	height: 75px;
}

div#products.list .spriteContainer {
	margin-right: 10px;
	padding: 0px;
	float: left;
	width: 80px;
	height: 80px;
}

div#products.list .spriteNewTag {
	width: 30px;
	height: 30px;
	left: -15px;
	top: -8px;
}

.spriteLayer:hover {
	z-index: 101!important;
}

div.grid span.zoom {
	float: right;
	position: relative;
	left: -45px;
	*top: -153px; /* IE7 & 8 */
}

div.list span.zoom {
	float: right;
	position: absolute;
	z-index: 999;
	margin-top: -5px;
	margin-left: -30px;
}

div.grid section.left .zoom,
div.list section.left .zoom {
	opacity: 0;
	*display: none; /* IE7 & 8 */
	transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}

div.grid div.prodCell:hover section.left .zoom,
div.list div.prodCell:hover section.left .zoom {
	opacity: 1;
	*display: block; /* IE7 & 8 */
}

div.list span.meta {
	text-align: center;
	display: table;
	padding: 2px;
	width: 250px;
}

/* Download Only */
a.doURL, a.doURL:hover {
	text-decoration: none;
}

.downloadOnly {
	text-align: center;
	padding: 4px;
	margin: 4px;
}

.downloadOnly:hover {
	text-decoration: none;
	border: 1px solid #999999;
	background: #dadada  50% 50% repeat-x;
	font-weight: normal;
}

/**********************************************
* 2-Customize                                 *
***********************************************/

#customizeTbl {
	background-color: #ffffff;
}

#show_userform {
	position: relative;
}

.required_star {
	font-weight: bold;
	color: #F00;
	left: -8px;
}

#designDescription {
	display: inline-block;
}

/**********************************************
* message boxes: warning, error, confirmation *
***********************************************/

.notice {
	background: #fbf9ee 50% 50% repeat-x;
	color: #363636;
	border: 1px solid #fcefa1;
	border-radius: 4px;
	padding: 8px;
	margin: 0 0 10px 0;
	display: block;
	text-align: left;
}
.notice:before {
	content: "\f05a";
	font-family: "Font Awesome 5 Pro";
	font-weight: 900;
	color: #1d78bf;
	font-size: 16px;
	padding: 0 5px 0 0;
	display: block;
	float: left;
}

.warning,
.onhold,
.reprint {
	background: #fef1ec  50% 50% repeat-x;
	color: #cc0000;
	border: 1px solid #cc0000;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

p.warning,
h1.warning,
div.warning {
	text-align: left;
	background-image: url('/img/shared/icon-warning.png');
	background-repeat: no-repeat;
	background-position: 10px 50%;
	margin: 0 0 10px 0;
	padding: 10px 10px 10px 36px;
}

.error {
	background: #fef1ec  50% 50% repeat-x;
	color: #cc0000;
	border: 1px solid #cc0000;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

h1.error,
div.error {
	text-align: left;
	background-image: url('/img/shared/icon-error.png');
	background-repeat: no-repeat;
	background-position: 10px 50%;
	margin: 0 0 10px 0;
	padding: 10px 10px 10px 36px;
}

/**********************************
* Notice and Alert Boxes
***********************************/

.ui-state-error {
	margin-bottom: 5px;
}

.ui-state-error span {
	float: left;
	margin-right: .3em;
}

.ui-required-r {
	color: #cd0a0a;
	font-weight: bold;
}

.ui-required-b {
	color: #000;
	font-weight: bold;
}

#notice.ui-state-highlight {
	padding: 10px 5px;
	font-weight: bold;
	width: 30em;
	position: absolute;
	right: 10px;
}

#notice.ui-state-highlight span {
	float: left;
	margin: 0 5px;
}

#note.ui-state-highlight {
	padding: 2px 5px;
}

/* Reprint */
.delete-confirm-header {
	text-align: center;
	background-color: #cd0a0a;
	color: #fff;
	text-shadow: 2px 2px 5px #555;
}

/**********************************
* INFO CONTAINERS
***********************************/

.infoBox {
	border: none;
	color: #222222;
	background: #c2c2c2 none;
	border-radius: 4px;
	margin-bottom: 10px;
}

.infoBox th.ui-state-default,
.infoBox th.ui-state-default table {
	border: none;
	color: #444;
	font-weight: bold;
	padding: 5px;
	text-align: center;
	font-size: 12px;
}

.infoBox th.ui-state-default th {
	color: #444;
}

.infoBox a {
	color: #1d78bf;
}

.infoBoxData td {
	background-color: #fff;
	padding: 2px;
}

/***********************************************
 *               UPLOADIFIVE                   *
 ***********************************************/

.uploadifive-button {
	border: 1px solid #d3d3d3;
	background: #e6e6e6;
	text-align: center;
	font-weight: normal;
	font-size: 8pt;
	color: #555555;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	padding: 2px 8px 2px 8px;
}

.uploadifive-button:hover {
	border: 1px solid #999999;
	background: #dadada;
	font-weight: normal;
	color: #212121;
	cursor:pointer;
}

.uploadifive-button input:hover {
	cursor:pointer;
}

div.upload-progress.ui-widget-content {
	margin-bottom:0;
}

.upload-container div {
	margin: 0;
}

/***********************************************
 *               TABLE SORTER                  *
 ***********************************************/

table.tablesorter thead tr:hover,
.header:hover,
table.tablesorter thead tr .headerSortDown,
table.tablesorter thead tr .headerSortUp {
	background: #dadada  50% 50% repeat-x;
}

/**********************************
* SEARCH                          *
***********************************/

#searchbar {
	position: relative;
	text-align: right;
	width: auto;
	display: inline-block;
}

#searchbar .search-main {
	position: absolute;
	top: 5px;
	left: 6px;
	color: #999;
}

@media \0screen {#searchbar {height: 35px;}} /* IE8 */
*+html #searchbar {height: 35px;} /* IE7 */

#searchbar input[type="text"] {
	background: #444;
	font: bold 12px Arial,Helvetica,Sans-serif;
	color: transparent;
	width: 15px;
	padding: 6px;
	border-radius: 20px;
	text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
	transition: all 0.5s ease 0s;
	border: 1px solid #444;
}
#searchbar input[type="text"]::placeholder {
	color: transparent;
}
#searchbar input[type="text"]:focus {
	background: #fcfcfc;
	color: #6a6f75;
	width: 125px;
	padding: 6px 6px 6px 25px;
	outline: none;
	border: 1px solid #51c9ee !important;
	box-shadow: 0 0 5px rgb(81 203 238) !important;
	text-shadow: none;
}
#searchbar input[type="text"]:focus::placeholder {
	color: #909090;
}

/* Catalog Search */
#catalogSearch {
	text-align: right;
	display: block;
	padding: 0;
	border: none;
	margin-bottom: 10px;
}

/* Catalog Grid/List Toggle */
.list-style-buttons {
	float: right;
	margin: 0 0 0 10px;
	line-height: 26px;
}
.list-style-buttons a {
	text-decoration: none;
	background: #e6e6e6;
	padding: 4px 6px;
}
.list-style-buttons a:hover {
	background: #dadada;
}
#listview,
#gridview {
	border: 1px solid #aaa;
}
#listview:hover,
#gridview:hover {
	border: 1px solid #999999;
}
#listview {
	border-radius: 4px 0 0 4px;
	margin: 0 -5px 0 0;
}
#gridview {
	border-radius: 0 4px 4px 0;
}
#listview span,
#gridview span {
	color: #555;
}
#listview span:hover,
#gridview span:hover {
	color: #212121;
}

/* Finishing Task Editor */
.finishing_task_editor {
	background-color: #fff;
}

.finishing_task_edit_input {
	background-color: #fff;
	color: #333333;
	font-size: 13px;
	line-height: 1.2em;
}

.finishing_task_editor_header {
	font-size: 12px;
	font-weight: bold;
	background-color: #ddd;
}

.finishing_task_editor_dialog_cost {
	font-size: 12px;
}

#flyoutMenuButton {
	max-width: 105px;
	height: 26px;
	margin: 0;
}

.ui-menu {
	white-space: nowrap;
	display: block;
	z-index: 1000;
}

.ui-menu a {
	color: #666;
}

.ui-menu a:hover {
	color: #000;
	text-decoration: none;
}

li.ui-menu-item a, li.ui-menu-item a:hover {
	width: 99%;
	margin-right: 10px;
}

.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active {
	margin-right: 9px;
}

ul.flyoutMenu.ui-menu.ui-widget.ui-widget-content {
	font-size: 9pt;
	font-weight: normal;
	color: #212121;
	background: #e6e6e6  50% 50% repeat-x;
	margin: 3px 0 0 2px;
	border-radius: 4px 4px 4px 4px;
}

ul.flyoutMenu, ul.ui-menu,
ul#cssFlyoutMainUl, li.ui-menu-item {
	border-radius: 4px 4px 4px 4px;
}

.ui-menu-item.disabled{
	color: grey;
	cursor: not-allowed;
}

#ui-id-1.ui-state-active {
	border-radius: 4px;
}

/**********************************
* Table Padding
***********************************/

.tableMain {
	padding: 10px 0;
}

#sideBarNav {
	padding-right: 10px;
}

/**********************************
* 3-Edit page
***********************************/

.btn-disabled {
	background-color: silver;
	color: gray;
}

/***********************************************
 * Data Table / Jquery Override                *
 ***********************************************/

.dataTable {
	background-color: #eee;
	-webkit-border-radius: 3px 3px 0 0;
	border-radius: 3px 3px 0 0;
}

.dataTable tr {
	border-left: 1px solid #D3D3D3;
	border-right: 1px solid #D3D3D3;
}

.dataTableContent, .dtContent {
	border: 1px solid #AAA;
}

.dataTable tr.o,
.dtContent tr.o {
	background-color:#fff;
}

.dataTable tr.e,
.dtContent tr.e {
	background-color:#eee;
}

.dataTable a:hover,
.dtContent a:hover {
	color: #222222;
}

.ui-widget-content th.ui-state-default {
	color: #222;
	font-weight: bold;
	padding: 5px;
	text-align: left;
}

th.ui-widget-header {
	text-align: left;
}

th.ui-widget-header button {
	margin: 3px;
}

.estSectHeader {
	font-weight: bold;
	line-height: 32px;
	padding-left: 5px;
}

/*****************************************
* Shopping Cart                          *
******************************************/

.cartTotal {
	padding: 6px;
}

.cartPrice {
	color: #444;
	font-weight: bold;
	font-size: 1.4em;
}

#shoppingCartTbl .dtContent {
	border-top: none;
	border-color: #c2c2c2;
}

/*****************************************
* Update Image                           *
******************************************/

#updateImgOverlay {
	background: rgba(0,0,0,0.5);
	height: 100%;
	position: absolute;
	z-index: 99999;
	width: 100%;
	left: 0;
	cursor: pointer;
}

#updateImgOverlay:hover {
	box-shadow:         inset 0 0 10px #000000;
}

#updateImgOverlayContent{
	position: relative;
	top: calc(50% - 38px);
}

#updateImgOverlayText {
	color: #fff;
	font-weight: bold;
}

#updateImgOverlay .refresh {
	width: 100%;
	margin: 0 0 15px 0;
	-webkit-transform: scale(1);
	transform: scale(1);
	color: #fff;
}

#updateImgOverlay .refresh:hover {
	color: #fff;
}

/*****************************************
* Checkout
******************************************/

#checkoutProceedButton {
	width: 100%;
}

#checkoutProceedButtonContainer {
	width: 95%;
	margin: 0 auto;
	padding: 5px 0 10px 0;
}

#checkoutProceedButton button,
.proceedButton
{
	width: 100%;
	height: 30px;
	color: #fff;
	font-size: 16px !important;
	background: #0c95be !important;
	box-shadow: inset 0 0 2px rgba(0, 0, 0, .2);
	border: none !important;
}

#checkoutProceedButton button:hover,
#checkoutProceedButton button#updateImg,
#checkoutProceedButton button.btnUpdate,
.proceedButton:hover {
	background: #8bc435 !important;
	box-shadow: inset 0 0 2px rgba(0, 0, 0, .2);
	color: #fff;
}

#checkoutProceedButtonContainer button:before,
#checkoutProceedButtonContainer button:hover:before,
.proceedButton:before,
.proceedButton:hover:before {
	color: #fff;
	font-size: 16px;
}

/* 4-CHECKOUT - login/create new customer/user */
#custCreateRadio.ui-controlgroup {
	width: auto;
	display: flex;
	justify-content: center;
	margin: 1em;
}
#custCreateRadio.ui-controlgroup .ui-button {
	margin-left: -1px;
	padding: 1em;
	background: #e6e6e6;
}
#custCreateRadio.ui-controlgroup .ui-button:hover {
	background: #dadada;
}
#custCreateRadio label{
	font-size: 14px !important;
}
#custCreateRadio label.ui-checkboxradio-checked
{
	color: #fff;
	background: #0c95be !important;
	border: none !important;
}
#custCreateRadio label.ui-checkboxradio-checked > i {
	color: #fff;
}

/* new (2024) Login CSS boxes with label animation */
#login-container {
	width: 100%;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	flex-direction: column;

}
.input-field{
	position: relative;
}
.input-field input{
	width: calc(100% - 35px);
	height: 54px;
	border-radius: 6px;
	font-size: 16px;
	padding: 0 15px;
	border: 1px solid #aaa;
	background: transparent;
	color: #222;
	outline: none;
	font-weight: normal;
}
.input-field label {
	position: absolute;
	top: 50%;
	left: 15px;
	transform: translateY(-50%);
	color: #454647;
	font-size: 19px;
	pointer-events: none;
	transition: 0.3s;
	font-weight: normal !important;
}
input:focus {
	border: 2px solid #18ffff;
}
input:focus ~ label,
input:valid ~ label {
	top: 0;
	left: 15px;
	font-size: 16px;
	padding: 0 2px;
	background: #fff;
	color: #000;
}
 #login-container button,
 #login-container input {
	 height: 54px !important;
	 font-size: 18px !important;
	 margin: 0;
 }

/* proceed to order */
#tableMainHeader {
	height: 30px;
	margin: 0 0 10px 0;
}

#tableMainHeader button {
	margin: 0;
}

#proceedToOrder {
	margin: 0;
}

#shoppingCartTbl #proceedToOrder {
	margin: 0;
}

#proceedToOrder #checkoutProceedButtonContainer {
	width: auto;
	margin: 0;
	padding: 5px;
}

#proceedToOrder #checkoutProceedButtonContainer button {
	display: block;
}

/* order summary */
#grandTotal, #loadShippingTxt {
	font-size: 1.5em;
}

.priceLoader {
	position: relative;
	background-image: url('/img/shared/ajax-squares-loader.gif');
	top: 5px;
	height: 11px;
	width: 43px;
	display: inline-block;
	color: transparent;
	margin-left: 4px;
}

.hideOrderCost {
	text-decoration: none;
	line-height: 1.4;
	background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.63em, transparent), color-stop(0.63em, #000), color-stop(0.7em, #000), color-stop(0.7em, transparent), to(transparent));
	background-image: -webkit-linear-gradient(top, transparent 0em, transparent 0.63em, #000 0.63em, #000 0.7em, transparent 0.7em, transparent 1.4em);
	background-image: -o-linear-gradient(top, transparent 0em, transparent 0.63em, #000 0.63em, #000 0.7em, transparent 0.7em, transparent 1.4em);
	background-image: linear-gradient(to bottom, transparent 0em, transparent 0.63em, #000 0.63em, #000 0.7em, transparent 0.7em, transparent 1.4em);
	-webkit-background-size: 1.4em 1.4em;
	background-size: 1.4em 1.4em;
	background-repeat: repeat;
	color: transparent;
}

#checkoutH {
	font-size: 12pt;
	padding: 0 0 10px 0;
}

.checkoutLabel {
	font-weight: bold;
	text-align: right;
}

.checkoutBody {
	text-align: left;
}

.checkoutCell {
	background: #ffffff;
	width: calc(50% - 5px);
	display: block;
}

.checkoutCell:nth-child(odd) {
	margin-right: 5px;
	float: left;
}

.checkoutCell:nth-child(even) {
	margin-left: 5px;
	float: right;
}

.forgotPW {
	font-size: 10pt;
}

/******************************************
* END Checkout
*******************************************/

/******************************************
* Public Estimator / Jquery Override
*******************************************/

.finishing_task_editor_select {
	font-style: normal;
	font-variant: normal;
	line-height: normal;
	text-decoration: none;
	border: 1px solid #aaa;
	border-radius: 4px;
}

.finishing_task_editor_title {
	font-size: 12px;
	background-color: #ffffff;
}

.finishing_task_editor_option_label {
	color: #282828;
	font-size: 13px;
}

.finishing_task_editor_row_a {
	background-color: #ffffff;
}

.finishing_task_editor_row_b {
	background-color: #eeeeee;
}

.finishing_task_editor_dialog_cost {
	font-size: 12px;
}

.hidden {
	display: none;
}

/******************************************
* DTSS SEND FILES
*******************************************/

#DTSSForm {
	padding: 0 10px 10px 0;
}

#DTSSForm .DTSSForm_label {
	text-align: right;
	padding: 4px;
	font-size: 12px;
}

#DTSSForm .required {
	font-weight: bold;
}

#DTSSForm .required_star {
	font-weight: bold;
	color: #f00;
}

#DTSSForm .not-required {
	font-weight: normal;
}

.sendFiles_Desc {
	width: 75%;
	margin: 0 auto;
}

/******************************************
* END DTSS SEND FILES
*******************************************/

/******************************************
* Quick Links
*******************************************/

#listbigger {
	display: grid;
	column-gap: 4px;
	grid-auto-flow: column;
	padding: 0;
}

#listbigger li {
	position: relative;
	font-size: 120%;
	background: transparent;
	border: none;
	border-radius: 4px;
	box-shadow: 0 0 0 1px #d9d9d9 inset;
	margin: 0 0 4px 0;
	min-width: 300px;
}

#listbigger li:hover {
	background: #ededed;
	box-shadow: 0 0 0 1px #999999 inset;
	border-radius: 4px;
}

#listbigger li:hover > a div.QLicon {
	border-right: 1px solid #999;
}

#listbigger li a img {
	vertical-align: middle;
	padding: 2px;
	border-right: 1px solid #d9d9d9;
}

.no-bullet-list {
	list-style: none;
	padding-left: 4px;
	padding-right: 4px;
}

ul#listbigger li a, ul#listbigger li a span {
	float: none;
	font-size: 18px;
	color: #817f7f;
	text-decoration: none;
	white-space: nowrap;
}

ul#listbigger li a:hover, ul#listbigger li a span:hover,
#listbigger li:hover > a div.QLicon span {
	color: #555;
}

/* order quick inks */
#QLorders,
#QLreports,
#QLcatalog,
#QLestimator,
#QLupload,
#QLaddressBook,
#QL2faSettings {
	grid-column: 1;
}

#QLsettings,
#QLloginID,
#QLpassword,
#QLusers,
#QLprofile,
#QLmyLists {
	grid-column: 2;
}


.QLicon {
	position: relative;
	display: block;
	background-repeat: no-repeat;
	max-width: 70px;
	min-width: 45px;
	width: 30%;
	height: 50px;
	border-right: 1px solid #d7d7d7;
}

.QLicon span {
	display: block;
	position: relative;
	line-height: 50px;
	height: 50px;
	right: -70px;
	padding: 0 0 0 20px;
}

#listbigger li .QLicon:before {
	font-family: "Font Awesome 5 Pro";
	position: absolute;
	font-size: 22px;
	font-weight: 900;
	text-align: center;
	width: 100%;
	line-height: 50px;
}
#listbigger li:hover .QLicon:before{
	transform: scale(1.1);
}

#QLorders .QLicon:before {
	content: "\f46d";
}
#QLreports .QLicon:before {
	content: "\f200";
}
#QLcatalog .QLicon:before {
	content: "\f00a";
}
#QLestimator .QLicon:before {
	content: "\f1ec";
}
#QLupload .QLicon:before {
	content: "\f346";
}
#QLaddressBook .QLicon:before {
	content: "\f2b9";
}
#QL2faSettings .QLicon:before {
	content: "\f132";
}
#QLsettings .QLicon:before {
	content: "\f013";
}
#QLloginID .QLicon:before {
	content: "\f023";
}
#QLpassword .QLicon:before {
	content: "\f084";
}
#QLusers .QLicon:before {
	content: "\f0c0";
}
#QLprofile .QLicon:before {
	content: "\f2bb";
}
#QLmyLists .QLicon:before {
	content: "\f03a";
}
#QLinvoiceSummary .QLicon:before {
	content: "\f571";
}
#QLinvoiceDetail .QLicon:before {
	content: "\f570";
}

/* QUICK LINK QLicon POSITION

li#QLorders a div.QLicon {
	background-position: 0 0;
}
li#QLorders a div.QLicon:hover, #listbigger li#QLorders:hover > a div.QLicon {
	background-position: 0 -50px;
}

li#QLreports a div.QLicon {
	background-position: -70px 0;
}
li#QLreports a div.QLicon:hover, #listbigger li#QLreports:hover > a div.QLicon {
	background-position: -70px -50px;
}

li#QLcatalog a div.QLicon {
	background-position: -140px 0;
}
li#QLcatalog a div.QLicon:hover, #listbigger li#QLcatalog:hover > a div.QLicon {
	background-position: -140px -50px;
}

li#QLestimator a div.QLicon {
	background-position: -210px 0;
}
li#QLestimator a div.QLicon:hover, #listbigger li#QLestimator:hover > a div.QLicon {
	background-position: -210px -50px;
}

li#QLupload a div.QLicon {
	background-position: -280px 0;
}
li#QLupload a div.QLicon:hover, #listbigger li#QLupload:hover > a div.QLicon {
	background-position: -280px -50px;
}

li#QLmyLists a div.QLicon {
	background-position: -350px 0;
}
li#QLmyLists a div.QLicon:hover, #listbigger li#QLmyLists:hover > a div.QLicon {
	background-position: -350px -50px;
}

li#QLaddressBook a div.QLicon {
	background-position: -420px 0;
}
li#QLaddressBook a div.QLicon:hover, #listbigger li#QLaddressBook:hover > a div.QLicon {
	background-position: -420px -50px;
}

li#QLprofile a div.QLicon {
	background-position: -490px 0;
}
li#QLprofile a div.QLicon:hover, #listbigger li#QLprofile:hover > a div.QLicon {
	background-position: -490px -50px;
}

li#QLusers a div.QLicon {
	background-position: -560px 0;
}
li#QLusers a div.QLicon:hover, #listbigger li#QLusers:hover > a div.QLicon {
	background-position: -560px -50px;
}

li#QLloginID a div.QLicon {
	background-position: -630px 0
}
li#QLloginID a div.QLicon:hover, #listbigger li#QLloginID:hover > a div.QLicon {
	background-position: -630px -50px;
}

li#QLpassword a div.QLicon {
	background-position: -700px 0;
}
li#QLpassword a div.QLicon:hover, #listbigger li#QLpassword:hover > a div.QLicon {
	background-position: -700px -50px;
}

li#QLsettings a div.QLicon {
	background-position: -770px 0;
}
li#QLsettings a div.QLicon:hover, #listbigger li#QLsettings:hover > a div.QLicon {
	background-position: -770px -50px;
} /*

/******************************************************************************************
* My Account Contact Information *
*******************************************************************************************/

#printRepInfo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 4px;
}

#contactCSRInfo,
#contactSalesInfo {
	/*background: transparent;
	border: 1px solid #d9d9d9;
	margin-bottom: 5px;
	border-radius: 4px;*/

}
#printRepInfo .photo {
	display: contents;
}
#printRepInfo .photo img {
	max-height: 75px;
	max-width: 75px;
	height: 75px;
}
#printRepInfo section {
	display: grid;
	grid-template-columns: 75px auto;
	grid-gap: 10px;
}

/*********************************************************************************************
* Address Book
**********************************************************************************************/

.importExportButtons {
	display: flex;
	float: right;
}

/*********************************************************************************************
* Image Picker
**********************************************************************************************/

#image_list {
	background-color: #fff;
	color: #000000;
	font-size: 9px;
	font-weight: bold;
	margin: 0;
	padding: 0;
	text-decoration: none;
	list-style: none outside none;
}

#image_list li {
	background-color: #ededed;
	float: left;
	margin: 5px 5px;
	padding: 0 5px;
	box-shadow: inset 0 0 2px black;
}

#image_list li div, #image_list li p {
	text-align: center;
}

#image_list li div {
	padding-top: 3px;
	min-width: 115px;
	min-height: 120px;
}

#image_list li:hover {
	cursor: pointer;
	background-color: #ddd;
	box-shadow: inset 0 0 2px green;
}

/**********************************
* Font Awesome
***********************************/

i.fa { font-size: 16pt; color: #313131; text-rendering: optimizeLegibility; }
/* defaults */

i.fa:hover {
	color: #1d78bf;
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

/* folder icon */
.fa-folder-open {
	color: #f9ecab !important;
	font-size: 20pt !important;
	text-shadow: 0 0 1px #4a4429;
}

/**********************************
* Captcha
***********************************/

.captcha-input {
	background: #FFF url(../etc/shared/php-captcha/captchaImageSource.php) repeat-y left center;
	padding-left: 80px;
	width: 58px;
	font-size: 14px;
}

.captcha-error {
	color:#FF0000;
	font-style: italic;
	font-weight: bold;
}