/* ------------------------------------------------------------------------------------
    Legacy Styles
    Pulled from jjk-legacy-styles.css - still need to support the old grid, as it's 
    being used on too many pages. DO NOT USE in future projects. Use Bootstrap's grid.
------------------------------------------------------------------------------------ */

/* Clear-fix - Moved from jjk-legacy-styles.css */
.group:after,
.row:before,
.row:after,
.clearfix:before,
.clear-fix:after,
.main-content:before,
.main-content:after,
.prod-list:before,
.prod-list:after,
.formline:before,
.formline:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } /* Try to eliminate "group", and replace it with "clear-fix". */
.row,
.clear-fix,
.main-content,
.prod-list,
.formline { zoom: 1; }

/* Legacy: Grid -------------------------------------------------- */
/* .row { width: 100%; } */
.content-head.row,
.row .row:last-child { margin-bottom: 0; }

.column { float: left; margin-left: 4.4%; min-height: 1px; position: relative; }
.column:first-child { margin-left: 0; }
[class*="column"] + [class*="column"]:last-child { float: right; }

.main-content .first { margin-left: 0; }
.main-content .last { margin-right: 0; }

/* Legacy: Old grid pulled from cv-ptp-styles.css . Do not use! Use bootstraps grid. */
.column.span1 { width: 4.3%; }
.column.span2 { width: 13%; }
.column.span3 { width: 21.679%; }
.column.span4 { width: 30.37%; }
.column.span5 { width: 39.1%; }
.column.span6 { width: 47.8%; }
.column.span7 { width: 56.5%; }
.column.span8 { width: 65.2%; }
.column.span9 { width: 73.9%; }
.column.span10 { width: 82.6%; }
.column.span11 { width: 91.3%; }
.column.span12 { width: 100%; }
.main-content .row .centered { float: none; margin: 0 auto; }

/* Legacy: select replacement drop-down. Note not mobile-friendly. */
div.select div.selected { background-image: url(/wcsstore/CVB2BDirectStorefrontAssetStore/images/jjkeller/icons/select-icon.gif); background-position: right center; background-repeat: no-repeat; border: 1px solid #acaea6; border-radius: 5px; cursor: pointer; font-weight: bold; padding: 9px 21px 9px 5px; white-space: nowrap; }
div.select div.selected div.clip { overflow:hidden; }
div.select div.options-list { position: relative; width: 300px; left: 0; top: 21px; z-index: 9999; height: 0;}
div.select ul.options { display: none; position: absolute; border: 1px solid #757575; overflow-x: hidden; overflow-y: auto; max-height: 200px; top: -21px; list-style-type: none; margin: 0; padding: 2px 2px 1px; background-color: white;}
div.select ul.options li { padding: 1px 5px; margin: 0 0 1px;}
div.select ul.options li.hover { color: #252525; background-color: #e3e3e3; }
div.select ul.options li.selected { color: white; background-color: #757575; }

/* Legacy: Gradients Light to Dark (l2d) */
.bg-gray-gradient-l2d-1 { background: #FFFFFF; background: linear-gradient(#FFFFFF, #e7e8e6); }
.bg-gray-gradient-l2d-2 { background: #e7e8e6; background: linear-gradient(#e7e8e6, #acaea6); }
.bg-gray-gradient-l2d-3 { background: #acaea6; background: linear-gradient(#acaea6, #898b80); }
.bg-gray-gradient-l2d-4 { background: #898b80; background: linear-gradient(#898b80, #60615a); }
.bg-gray-gradient-l2d-5 { background: #60615a; background: linear-gradient(#60615a, #292a26); }
.bg-gray-gradient-l2d-6 { background: #292a26; background: linear-gradient(#292a26, #000); }

/* Legacy: Gradients Dark to Light (d2l) */
.bg-gray-gradient-d2l-1 { background: #e7e8e6; background: linear-gradient(#e7e8e6, #FFFFFF); }
.bg-gray-gradient-d2l-2 { background: #acaea6; background: linear-gradient(#acaea6, #e7e8e6); }
.bg-gray-gradient-d2l-3 { background: #898b80; background: linear-gradient(#898b80, #acaea6); }
.bg-gray-gradient-d2l-4 { background: #60615a; background: linear-gradient(#60615a, #898b80); }
.bg-gray-gradient-d2l-5 { background: #292a26; background: linear-gradient(#292a26, #60615a); }
.bg-gray-gradient-d2l-6 { background: #000; background: linear-gradient(#000, #292a26); }

/* News LP Specific Styles - select on page uses the legacy select method above */
.switch.news-alert a { /* display: none; */ } /* is this still needed? */
.switch.news-alert .select { width: 300px; }
.switch.news-alert .page-select-label { white-space: pre; } /* needed to respect the whitespace after the word "for" */

/*  Lists -------------------------------------------------- */
ul.mixed { list-style: none; padding-left: 2rem; }
.square li:before,
.checks li:before,
.article:before,
.pdf:before,
.webcast-download:before,
.external:before,
.pdp:before { color: #898b80; display: inline-block; float: left; font-family: FontAwesome; margin: 0 0 0 -1.25em; }
.article:before { content: "\f0f6"; }
.pdf:before { content:"\f1c1"; }
.webcast-download:before { content:"\f019"; }
.square li:before { content:"\f0c8"; font-size: 70%; margin-top: .2rem; }
.checks li:before { content:"\f046"; height: 16px; margin: 0 0 0 -1.25em; }
.external:before { content:"\f08e"; }
.pdp:before { content:"\f00a"; }

ul.square ul li,
ul.checks ul li { padding: 0; }

/* ------------------------------------------------------------------------------------
    Variables
------------------------------------------------------------------------------------ */
:root {
  /* Swatches */
  --clr-headline: #43443f;
  --clr-body: #212526;
  --clr-link: #006fbd;
  --clr-link-hover: #003f56;

  --clr-corp-brand-dk-burgundy: #58132a;
  --clr-corp-brand-lt-burgundy: #8B1E41;
  --clr-corp-brand-md-gray: #7C868D;
  --clr-corp-brand-lt-gray: #BDC5CA;
  --clr-corp-brand-accent-orange: #DC8538;
  --clr-corp-brand-accent-navy: #004677;
  --clr-corp-brand-accent-md-blue: #0081A6;

  --clr-gray-0: #FFFFFF;
  --clr-gray-50: #F2F2F2; /* gray 1 */
  --clr-gray-100: #E6E6E6; /* gray 2 */
  --clr-gray-150: #D9D9D9;
  --clr-gray-200: #CCCCCC; /* gray 3 */
  --clr-gray-250: #BFBFBF;
  --clr-gray-300: #B3B3B3; /* gray 4 */
  --clr-gray-350: #A6A6A6;
  --clr-gray-400: #999999; /* gray 5 */
  --clr-gray-450: #8C8C8C;
  --clr-gray-500: #808080; /* gray 6 */
  --clr-gray-550: #737373;
  --clr-gray-600: #666666; /* gray 7 */
  --clr-gray-650: #595959;
  --clr-gray-700: #4D4D4D; /* gray 8 */
  --clr-gray-750: #404040;
  --clr-gray-800: #333333; /* gray 9 */
  --clr-gray-850: #262626;
  --clr-gray-900: #1A1A1A; /* gray 10 */
  --clr-gray-950: #0D0D0D;
  --clr-gray-1000: #000000;

  --clr-neutral-tan-1: #F8F6ED;
  --clr-neutral-tan-2: #EEEDE1;
  --clr-neutral-tan-3: #FEFBEE;
  --clr-neutral-tan-4: #F8F3E0;

  --clr-promo-red: #E00E00;
  --clr-promo-orange: #FF8400;
  --clr-promo-gold: #FCC700;
  --clr-promo-yellow: #F9DF23;
  --clr-promo-neon-yellow: #F5F922;
  --clr-promo-lime: #ADCA09;
  --clr-promo-green: #0F8A13;
  --clr-promo-turquoise: #1C9CA7;
  --clr-promo-steel-blue: #4682b4;
  --clr-promo-blue: #2196F3;
  --clr-promo-royal-blue: #4169E1;
  --clr-promo-saphire: #0F52BA;
  --clr-promo-steelblue: #4682b4;
  --clr-promo-indigo: #1D2E5C;
  --clr-promo-purple: #5B12A5;

  --clr-advantage-orange: #E77C22;
  --clr-advantage-burgundy: #58132A;
  --clr-advantage-dk-gray: #231F20;

  --clr-encompass-primary: #005480;
  --clr-encompass-secondary: #59A5D8;
  --clr-encompass-cta: #f48024;
  --clr-encompass-gray: #b5bec9;
  --clr-encompass-text: #373E40;

  --clr-training-orange: #e18e28;
  --clr-training-btn-primary: #f5a31f;
  --clr-training-btn-primary-hover: #db8c0c;
  --clr-training-blue: #267E9C;
  --clr-training-dk-gray: #354052;
  --clr-training-lt-gray: #F4F4F4;

  --clr-training-primary: #F5A31F;
  --clr-training-secondary: #000000;
  --clr-training-accent-orange: #DC7626;
  --clr-training-accent-gray: #4A4A4B;
  --clr-training-accent-dk-blue: #354052;
  --clr-training-accent-blue: #277D9B;
  --clr-training-accent-green: #99C34C;
  --clr-training-eyecue: #DFE229;

  --clr-2290online-green: #5FBB46;
  --clr-2290online-red: #A51E1E;
  --clr-2290online-lt-tan: #FAF0DC;
  --clr-2290online-gold: #FBAF42;
  --clr-2290online-dk-gray: #1E1E1E;

  --clr-kellerpermits-blue: #0b479e;
  --clr-kellerpermits-lt-blue: #ecf0f5;
  --clr-kellerpermits-gold: #f5a707;
  --clr-kellerpermits-lt-gray: #e9e7e3;

  --clr-compliance-library-black: #000000;
  --clr-compliance-library-dk-maroon: #58132A;
  --clr-compliance-library-lt-maroon: #8B1E42;
  --clr-compliance-library-orange: #F38F00;
  --clr-compliance-library-dk-gray: #727D84;
  --clr-compliance-library-lt-gray: #E9E9E9;

  /* Safegear */
  --clr-safegear-primary: #D0DF00;
  --clr-safegear-secondary-1: #1E3888;
  --clr-safegear-secondary-2: #F26419;
  --clr-safegear-lt-gray: #E0E0E2;
  --clr-safegear-md-gray: #909AA2;
  --clr-safegear-dk-gray: #303539;

  /* SMS */
  --clr-sms-: #EFEEED;
  --clr-sms-link: #3981c4;
  --clr-sms-lt-blue: #bdc5c9;
  --clr-sms-blue: #30415a;
  --clr-sms-dk-blue: #242832;
  --clr-sms-green: #5fbb46;
  --clr-sms-incident-center-primary: #F19122;
  --clr-sms-chemical-center-primary: #3981C4;

  /* Alerts */
  --clr-warning: #ff9d00;
  --clr-info: #20809D; /* contrast: 4.52:1 */ 
  --clr-success: #4D832F; /* contrast: 4.56:1 */ 
  --clr-danger: #ca251f; /* contrast: 4.53:1 */
  --clr-warning-text: #292a26;

  --font-headline: 'Roboto Condensed';
  --font-body: 'Open Sans', Arial, Helvetica, sans-serif;

  /* spacing */
  --base-unit: 1em; /* 16 */

  --space-xxs: calc(0.25 * var(--base-unit)); /* 4 */
  --space-xs: calc(0.5 * var(--base-unit)); /* 8 */
  --space-sm: calc(0.75 * var(--base-unit)); /* 12 */
  --space-base: var(--base-unit); /* 16 */
  --space-md: calc(1.5 * var(--base-unit)); /* 24 */
  --space-lg: calc(2 * var(--base-unit)); /* 32 */
  --space-xl: calc(2.5 * var(--base-unit)); /* 40 */
  --space-xxl: calc(3 * var(--base-unit)); /* 48 */
  --space-3xl: calc(4 * var(--base-unit)); /* 64 */
  --space-4xl: calc(5 * var(--base-unit)); /* 80 */
  --space-5xl: calc(6 * var(--base-unit)); /* 96 */
  --space-6xl: calc(7 * var(--base-unit)); /* 112 */
  --space-7xl: calc(8 * var(--base-unit)); /* 128 */
  --space-8xl: calc(9 * var(--base-unit)); /* 144 */
  --space-9xl: calc(10 * var(--base-unit)); /* 160 */
  
  /* Focus */
  --focus-state-outline: 2px dotted red !important;
  --focus-state-offset: 3px;
}

/* Overwrites, Tweaks and Updates */
a:hover,
a:focus { color: var(--clr-link-hover); text-decoration: none; }
a.btn.disabled, 
fieldset[disabled] a.btn { cursor: not-allowed; }
sup { top: -.25em; }
img { height: auto; }
mark,
.mark { border-radius: .5rem; padding: .2em .15em; background-color: #FFEB00; }
hr { border-top: 1px solid var(--clr-gray-100); clear: both; margin: 2.5rem auto; }
.row { margin-left: 0; margin-right: 0; } /* bootstrap tweak */
small,
.small { font-size: 80% }
.list-group-item { font-weight: 400; }
blockquote .small:before, 
blockquote footer:before, 
blockquote small:before { content: ""; }
.owl-nav [class*=owl-] { font-size: 6rem !important; height: 40px; width: 40px; }
.owl-carousel .owl-nav .owl-prev span { margin-left: -4px; }
.owl-carousel .owl-nav button span { margin-top: -14px; }

.carousel { overflow: hidden; }
/* widget styles pulled from ibm */
div[data-widget-type="wc.Carousel"] .owl-stage-outer.overflow-visible { overflow: visible; }
.owl-carousel .owl-item .categorySpot img { display: initial !important; margin: auto; width:inherit !important; }
.overflow-visible > .owl-stage { transition: 2000ms ease !important; }
.owl-carousel.has-lazyload .owl-stage-outer { min-height: 200px; } /* temp fix for lazyloading display issue */

/* COC-1840 fix to allow vertical scroll on mobile devices */
.owl-carousel .owl-stage, 
.owl-carousel.owl-drag .owl-item { -ms-touch-action: auto; touch-action: auto; }

.category-navigation-display .row > [class*="col"],
.search-results-display .row > [class*="col"] { float: left; } /* fix for ibm grid */

/* ------------------------------------------------------------------------------------
    Atoms
    Basic HTML elements like form labels, inputs, buttons, and
    others that can't be broken down any further.
------------------------------------------------------------------------------------ */
html { font-size: 62.5%; padding: 0; margin: 0; }
body { color: var(--clr-body); font-size: 1.6rem; font-family: var(--font-body); line-height: 1.52857143; padding: 0; position: relative; }

/* body.push is used for the mobile off-canvas menu */
body.push{ overflow-x: hidden; position: relative; left:0; transition: all 0.3s ease; }
body.push.right { left: 290px; float: none; }

a { color: var(--clr-link); cursor: pointer; font-weight: 600; } /* Contrast Ratio: 5.24:1 - Normal Text, AA: Pass, AAA: Fail – Large Text, AA: Pass, AAA: Pass */
*:focus,
a:focus { outline: 2px dotted red; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }
a.disabled,
button.disabled { color: #898B80 !important; } /* jquery migration */
a[data-filetype="phone"] { color: #292a26; text-decoration: none; white-space: nowrap; }
a p { color: initial; font-weight: normal; } /* Fix for espot ads when click activity is wrapped around an html ad */

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 { color: var(--clr-headline); font-family: 'Roboto Condensed', Calibri, Arial, Helvetica, sans-serif; font-weight: 700; }
h1, .h1 { font-size: 2em; line-height: 1.25; }
h2, .h2 { font-size: 1.625em; line-height: 1.15384615; }
h3, .h3 { font-size: 1.375em; line-height: 1.13636364; }
h4, .h4 { font-size: 1.125em; line-height: 1.11111111; }
h5, .h5 { font-size: 1.278em; line-height: 1.1; }
h6, .h6 { font-size: 1.6rem; line-height: 1.1; }

h1, .h1,
h2, .h2,
h3, .h3 { margin: 2.2rem 0 1.1rem; }
h4, .h4,
h5, .h5,
h6, .h6 { margin: 1.1rem 0; }

.display-1 { font-size: 3.2rem; }
.display-2 { font-size: 3.5rem; }
.display-3 { font-size: 4.5rem; }
.display-4 { font-size: 5.5rem; }
.display-5 { font-size: 6.5rem; }
.display-6 { font-size: 7.5rem; }

h1 small, .h1 small,
h2 small, .h2 small,
h3 small, .h3 small,
h1 .small, .h1 .small,
h2 .small, .h2 .small,
h3 .small, .h3 .small { font-size: 65%; }

h4 small, .h4 small,
h5 small, .h5 small,
h6 small, .h6 small,
h4 .small, .h4 .small,
h5 .small, .h5 .small,
h6 .small, .h6 .small { font-size: 75%; }

.section__lead,
.lead { color: #60615A; font-size: 1.8rem; font-weight: 400; margin-bottom: 20px; }

.text-xs { font-size: 1.2rem; }
.text-sm { font-size: 1.4rem; }
.text-normal { font-size: 1.6rem; }
.text-md { font-size: 1.8rem; }
.text-lg { font-size: 2rem; }
.text-xl { font-size: 2.2rem; }

@media screen and (min-width: 43.75em) {
    h1, .h1 { font-size: 2.5em; line-height: 1.125; }
    h2, .h2 { font-size: 2em; line-height: 1.25; }
    h3, .h3 { font-size: 1.5em; line-height: 1.25; }
    h4, .h4 { line-height: 1.22222222; }

    .display-1 { font-size: 3.75rem; }
    .display-2 { font-size: 4.5rem; }
    .display-3 { font-size: 5.5rem; }
    .display-4 { font-size: 6.5rem; }
    .display-5 { font-size: 7.5rem; }
    .display-6 { font-size: 8.5rem; }

    .section__lead,
    .lead { font-size: 1.9rem; }

    .text-md { font-size: 1.9rem; }
    .text-lg { font-size: 2.2rem; }
    .text-xl { font-size: 2.4rem; }
}

@media screen and (min-width: 56.25em) {
    h1, .h1 { font-size: 3em; line-height: 1.05; }
    h2, .h2 { font-size: 2.25em; line-height: 1.25; }
    h3, .h3 { font-size: 1.75em; line-height: 1.25; }
    h4, .h4 { font-size: 1.47em; line-height: 1.22222222; }

    .display-1 { font-size: 4.75rem; }
    .display-2 { font-size: 5.5rem; }
    .display-3 { font-size: 6.5rem; }
    .display-4 { font-size: 7.5rem; }
    .display-5 { font-size: 8.5rem; }
    .display-6 { font-size: 9.5rem; }

    .section__lead,
    .lead { font-size: 2rem; }

    .text-md { font-size: 2rem; }
    .text-lg { font-size: 2.4rem; }
    .text-xl { font-size: 2.6rem; }
}

/* Shop nav page headers */
h1.title,
h2.title,
h3.title,
h4.title,
h5.title,
h6.title { color: #5e5e5e; font-weight: bold; }
h1.title { font-size: 36px; }
h2.title { font-size: 24px; }
h3.title { font-size: 20px; }

/*
.display-1 { font-size: 3.5rem; }
.display-2 { font-size: 4.5rem; }
.display-3 { font-size: 5.5rem; }
.display-4 { font-size: 6rem; }

.display-3 { font-size: 3rem; }
@media screen and (min-width: 43.75em) {
  .display-3 { font-size: 4.25rem; }
}
@media screen and (min-width: 56.25em) {
  .display-3 { font-size: 5.5rem; }
}
*/

/* Buttons - Includes support for some legacy class names */
button,
button[type='submit'],
.button,
.btn,
.button_primary,
.button_secondary,
.button.primary,
.button.secondary { border-radius: .6rem; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); border: 2px solid transparent; color: #FFFFFF; font-weight: bold; height: auto; position: relative; text-decoration: none; text-transform: uppercase; white-space: normal; display: inline-block; line-height: 1; vertical-align: middle; padding: 1.2rem 1.6rem; font-size: 1em; text-align:center; }

button,
button[type='submit'],
.button,
.btn,
.button_primary,
.button.primary { background: #015EA1; }
.button_secondary,
.button.secondary,
.btn.btn-secondary { background-color: #6e6f65; }
.button_secondary:hover,
.button.secondary:hover,
.btn.btn-secondary:hover { background-color: #878880; }

button:hover,
a.button:hover,
a.button-link:hover,
.btn:hover,
.btn-primary:hover { background-color: #1F78B7; color: #FFFFFF; text-decoration: none; }

button:focus,
button[type='submit']:focus,
.button:focus,
.btn:focus,
.button_primary:focus,
.button.primary:focus,
.btn-primary.focus,
.btn-primary:focus { color: #FFFFFF; box-shadow: 0 0 0 2px rgba(2,117,216,.5); text-decoration: none; }

.button_secondary,
.button.secondary,
.btn-secondary.focus,
.btn-secondary:focus { box-shadow: 0 0 0 2px rgba(204,204,204,.5); text-decoration: none; }

.btn.active, 
.btn:active { box-shadow: inset 0 3px 5px rgb(0 0 0 / 50%); }

.button_primary { position: relative; border: 1px solid #bfbfbf; }

.button_primary > .button_text { border: 0px; color:#fff; min-width:95px; }
.button_primary > .button_text:hover { text-decoration: none; }

.btn + .btn { margin-left: 2rem; }

.btn.bg-success:hover { background-color: #76b553; }
.btn.bg-info:hover { background-color: #50b1d2; }
.btn.bg-warning:hover { background-color: #f5bc21; }
.btn.bg-danger:hover { background-color: #dc5347; }

.withorder button,
.btn.orange { background-color: #FF8738; }
.btn.orange:hover,
.withorder button:hover,
.btn.bg-orange:hover { background: #ff911e; }

.btn.white:hover { background-color: #E8E8E8; border: 1px solid transparent; color: #3f403a; }
.btn.bg-white { color: #60615a; border-color: #FFFFFF; }
.btn.bg-white:hover,
.btn.bg-white:active,
.btn.bg-white:focus { border-color: #FFFFFF; color: #60615a !important; }
button[type='submit'].bg-white { background-color: #FFFFFF; }
.btn.bg-training:hover { background: #F6a828; color: #FFFFFF !important; }
.btn.bg-eyecue:hover { background: #FBFF00 !important; border: 1px solid transparent; color: black !important; }

.btn.bg-gray-1,
.btn.bg-gray-2 { color: #60615a !important; }

.bg-gray-1.btn:hover,
.bg-gray-1.button:hover { background-color: #FFFFFF; }
.bg-gray-2.btn:hover,
.bg-gray-2.button:hover { background-color: #e7e8e1; }
.btn.bg-gray-3:hover { background: var(--clr-gray-150); }
.btn.bg-gray-4:hover { background: #b8b9b2; }
.btn.bg-gray-5:hover { background: #a3a59b; }
.btn.bg-gray-6:hover { background: #878880; }
.btn.bg-gray-7:hover { background: #6e6f6a; }
.btn.bg-gray-8:hover { background: #6e6f69; }
.btn.bg-gray-9:hover { background: #53544f; }
.btn.bg-gray-10:hover { background: #43443f; }
.bg-black.btn:hover,
.bg-black.button:hover { background-color: #353531; }

.btn.bg-brand:hover { background-color: #6a2038 !important; }
.btn.bg-yellow { color: #60615a; }
.btn.bg-yellow:hover { background: #ffe73c; }
.bg-gold.btn:hover,
.bg-gold.button:hover { background-color: #FFD65B; color: #252525; }
.bg-red.btn:hover,
.bg-red.button:hover { background-color: #ff1809; }
.bg-purple.btn:hover,
.bg-purple.button:hover { background-color: #6C27B5; }
.btn.bg-turquoise:hover { background: #25b5c1; }
.btn.bg-blue:hover { background: #3faaff; }
.btn.bg-royal-blue:hover { background: #5d86ff; }
.btn.bg-saphire:hover { background: #2673ea; }
.btn.bg-indigo:hover { background-color: #374f90; }
.bg-green.btn:hover,
.bg-green.button:hover { background-color: #23c52a; }
.bg-lime.btn:hover,
.bg-lime.button:hover { background-color: #B2DB36; }
/*
.bg-info.btn:hover,
.bg-info.button:hover { background-color: #F9E295; color: #60615A; }
*/

.btn-outline,
.btn.btn-outline,
.button-outline,
button.btn-outline,
button.btn.btn-outline,
button.button-outline { background: transparent !important; border: 2px solid; color: #015EA1; }
.btn-outline:hover,
.btn.btn-outline:hover,
a.button-outline:hover,
button.btn-outline:hover,
button.btn.btn-outline:hover,
button.button-outline:hover { background: rgba(255, 255, 255, 0.75) !important; }
.btn-outline:active,
.btn.btn-outline:active,
a.button-outline:active,
button.btn-outline:active,
button.btn.btn-outline:active,
button.button-outline:active,
.btn-outline:focus,
.btn.btn-outline:focus,
a.button-outline:focus,
button.btn-outline:focus,
button.btn.btn-outline:focus,
button.button-outline:focus { background: rgba(255, 255, 255, 1) !important; }
.btn-outline.disabled,
.btn.btn-outline.disabled,
a.button-outline.disabled,
button.btn-outline.disabled,
button.btn.btn-outline.disabled,
button.button-outline.disabled { background-color: transparent !important; }
.btn.bg-white.btn-outline { color: #FFFFFF; }
.btn.bg-white.btn-outline:hover,
.inverse-content .btn.bg-white:hover { color: #60615a; }
.btn.button.bg-red.button-outline,
button.button.bg-red.button-outline,
.btn.bg-red.btn-outline { color: #E00E00; }

.btn-outline { background-color: transparent !important; border-width: 2px !important; }
.bg-red.btn-outline { border-color: #E00E00 !important; color: #E00E00 !important; }
.bg-orange.btn-outline { border-color: #FF8400 !important; color: #FF8400 !important; }
.bg-gold.btn-outline { border-color: #FCC700 !important; color: #FCC700 !important; }
.bg-yellow.btn-outline { border-color: #F9DF23 !important; color: #F9DF23 !important; }
.bg-neon-yellow.btn-outline { border-color: #F5F922 !important; color: #F5F922 !important; }
.bg-lime.btn-outline { border-color: #ADCA09 !important; color: #ADCA09 !important; }
.bg-green.btn-outline { border-color: #12A518 !important; color: #12A518 !important; }
.bg-turquoise.btn-outline { border-color: #1C9CA7 !important; color: #1C9CA7 !important; }
.bg-blue.btn-outline { border-color: #2196F3 !important; color: #2196F3 !important; }
.bg-royal-blue.btn-outline { border-color: #4169E1 !important; color: #4169E1 !important; }
.bg-saphire.btn-outline { border-color: #0F52BA !important; color: #0F52BA !important; }
.bg-indigo.btn-outline { border-color: #1D2E5C !important; color: #1D2E5C !important; }
.bg-purple.btn-outline { border-color: #5B12A5 !important; color: #5B12A5 !important; }

.btn-text,
button.btn-text,
.btn.btn-text { background: transparent; box-shadow: none; color: var(--clr-link); border: 2px solid transparent; }
.btn-text:hover,
button.btn-text:hover,
.btn.btn-text:hover { background: transparent; color: var(--clr-link-hover); }
.btn-text:active { color: var(--clr-link-hover); text-decoration: underline; }
.btn-text.text-left { padding-left: 0 !important; }
.btn-text.text-right { padding-right: 0 !important; }

.disabled #add2CartBtn,
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn { background-color: #AEAFAD !important; }
.btn.btn-text.disabled { background-color: transparent !important; opacity: .5; }

/* Carried over from Bootstrap due to Style sheet order. Slightly tweaked. */
.btn-xs,
.btn-group-xs>.btn { padding: 1px 5px !important; font-size: 12px !important; line-height: 1.4 !important; }
.btn-sm,
.btn-group-sm>.btn { padding: 5px 10px !important; font-size: 14px !important; line-height: 1.5 !important; }
.btn-lg,
.btn-group-lg>.btn { padding: 10px 16px !important; font-size: 20px !important; line-height: 1.3333333 !important; }
.btn-xl,
.btn-group-xl>.btn { padding: 15px 21px !important; font-size: 26px !important; line-height: 1.3333333 !important; }

.btn-collapse-plus-minus-right { padding-right: 5.6rem; }
.btn-collapse-plus-minus-right[aria-expanded=false]:after { content: '\f067'; }
.btn-collapse-plus-minus-right[aria-expanded=true]:after { content: '\f068'; }
.btn-collapse-plus-minus-right:after { font-family: FontAwesome; padding-left: 2px; position: absolute; top: 0; right: 0; color: #FFFFFF; background-color: #015ea1; line-height: 1.4; padding: 7px 12px; margin: 0; font-size: 20px; }

.btn-text,
.btn-outline,
.button-outline,
[class*="btn-group"] .btn,
.btn-outline[type="submit"] { box-shadow: none; }

.has-icon:before,
.has-icon:after { font-family: 'FontAwesome'; -webkit-font-smoothing: antialiased; }
.icon--right:after { margin-left: .5rem; }
.icon--left:before { margin-right: .5rem; }

.btn.btn--cart { background-color: #FF8400; }
.btn.btn--cart:hover { background-color: #FF911E; }
.btn--cart.has-icon:before { content: "\f07a"; }

figcaption { padding: 1rem; }

/* Ribbon Ad Image Overlay */
.RibbonAdDefault { background: #69142e; bottom: auto; top: -6px; left: -6px; width: auto; height: auto; background-color: #69142e; font-size: 14px; line-height: 20px; font-family: inherit; color: #fff; overflow: visible; padding: .1rem .5rem; position: absolute; text-transform: uppercase; white-space: nowrap; zoom: 1; }
.RibbonAdDefault:after { content: ' '; display: block; border-top: 11px solid #69142e; position: absolute; right: -20px; border-bottom: 11px solid #69142e; border-right: 11px solid transparent; border-left: 11px solid #69142e; top: 0px; }
.RibbonAdDefault.Sale { background-color: #FF8400; color: #292a26; }
.RibbonAdDefault.Sale:after { border-top-color: #FF8400; border-bottom-color: #FF8400; border-left-color: #FF8400; }
.RibbonAdDefault.Out_of_Stock { background-color: #5B12A5; }
.RibbonAdDefault.Out_of_Stock:after { border-top-color: #5B12A5; border-bottom-color: #5B12A5; border-left-color: #5B12A5; }
.RibbonAdDefault.Bestseller { background-color: #1D2E5C; }
.RibbonAdDefault.Bestseller:after { border-top-color: #1D2E5C; border-bottom-color: #1D2E5C; border-left-color: #1D2E5C; }
.RibbonAdDefault.Updated,
.RibbonAdDefault.Good { background-color: #12A518; }
.RibbonAdDefault.Updated:after,
.RibbonAdDefault.Good:after { border-top-color: #12A518; border-bottom-color: #12A518; border-left-color: #12A518; }
.RibbonAdDefault.Compliant,
.RibbonAdDefault.Better { background-color: #2196F3; }
.RibbonAdDefault.Compliant:after,
.RibbonAdDefault.Better:after { border-top-color: #2196F3; border-bottom-color: #2196F3; border-left-color: #2196F3; }
.RibbonAdDefault.Free,
.RibbonAdDefault.Best { background-color: #E00E00; }
.RibbonAdDefault.Free:after,
.RibbonAdDefault.Best:after { border-top-color: #E00E00; border-bottom-color: #E00E00; border-left-color: #E00E00; }

/* Labels -------------------------------------------------- */
.label { background-color: #52534D; border: 1px solid transparent; border-radius: .25rem; display: inline-block; color: #FFFFFF; font-size: 80%; font-weight: 700; line-height: 1; padding: .5rem; position: relative; text-align: center; text-transform: uppercase; white-space: nowrap; vertical-align: baseline; }
.label.label--gray { background-color: #52534D; }
.label.label--corp-dk-burgundy { background-color: var(--clr-corp-brand-dk-burgundy); }
.label--red { background-color: #B30C00; }

.label.label--outline { background-color: transparent !important; border: 1px solid #52534D; color: #52534D; }
.label.label--outline.label--gray { border: 1px solid #52534D; color: #52534D; }
.label.label--outline.label--corp-dk-burgundy { border: 1px solid var(--clr-corp-brand-dk-burgundy); color: var(--clr-corp-brand-dk-burgundy); }
.label.label--outline.label--red { border: 1px solid #B30C00; color: #B30C00; }

.label--corp-orange { background-color: #DC8538; }
.label--corp-navy { background-color: #004677; }
.label--corp-md-blue { background-color: #0081A6; }

.label--success { background-color: #4D832F; }
.label--info { background-color: #20809D; }
.label--warning { background-color: #ff9d00; color: #292a26 !important; }
.label--danger { background-color: #ca251f; }

/* ------------------------------------------------------------------------------------
    Molecules
    simple groups of UI elements functioning together as a unit.
    For example, a form label, search input, and button can join
    together to create a search form molecule.
------------------------------------------------------------------------------------ */

/* The style below hides the table markup within the espot code. */
.genericESpot table { display: none; }

#progress_bar #loading_popup { background: rgba(255, 255, 255, 0.9); padding: 10px; border: 2px solid #5e5e5e; border-radius: .5rem; box-shadow: 0 0 12px; text-align: center; display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; }
#progress_bar #loading_popup .fa-spinner { color: #5e5e5e; }

/* Page Hero Styles */
.page__hero.page__hero--sm { height: 200px; }
.page__hero.page__hero--md { height: 400px; }
.page__hero.page__hero--lg { height: 600px; }

.section__overlay { background-color: rgba(0,0,0,.65); padding: 1.5rem; position: absolute; text-shadow: 0 0 12px rgba(0,0,0,.7); width: 100%; }
.section__overlay * { color: #FFFFFF; }
.section__overlay:last-child * { margin-bottom: 0; }
.section__overlay--full { bottom: 0; top: 0; display: flex; align-items: center; justify-content: center; text-align: center; }
.section__overlay.section__overlay--transparent { background-color: transparent; }
.section__overlay--btm { bottom: 0; }

@media screen and (min-width: 767px) {
  .page__hero.page__hero--sm { height: 225px; }
}
@media screen and (min-width: 900px) {
  .page__hero.page__hero--sm { height: 250px; }
}
@media screen and (min-width: 1024px) {
  .page__hero.page__hero--sm { height: 300px; }
}
@media screen and (min-width: 1741px) {
    .section__bg-img.page__hero { height: 600px; } /* Still needed? */
}
@media screen and (min-width: 1920px) {
  .page__hero.page__hero--sm { height: 350px; }
}
@media screen and (max-width: 1280px) {
    .page__hero.page__hero--md { height: 350px; }
    .page__hero.page__hero--lg { height: 400px; }
}
@media screen and (max-width: 1000px) {
    .page__hero.page__hero--md { height: 325px; }
}
@media screen and (max-width: 899px) {
    .page__hero.page__hero--md { height: 300px; }
}
@media screen and (max-width: 767px) {
  .section__overlay { padding: .5rem; }
}
@media screen and (max-width: 699px) {
    .page__hero.page__hero--md { height: 275px; }
    .page__hero.page__hero--lg { height: 300px; }
}
@media screen and (max-width: 600px) {
    .page__hero.page__hero--sm,
    .page__hero.page__hero--lg,
    .page__hero.page__hero--md { height: 250px; }
}
@media screen and (max-width: 450px) {
  .section__overlay { background-color: rgba(0, 0, 0, 0.5); text-shadow: 0 0 12px rgb(0, 0, 0); }
  .page__hero .section__overlay { align-items: center; display: flex; justify-content: center; height: 100%; position: initial; }
}

/* Forms */
label { line-height:1em; margin: 0 0 .35rem; }

input[type="text"],
input[type="tel"],
input[type="password"],
.item-qty input,
textarea { border: 1px solid #acaea6; border-radius: .4rem; background-color: #FFFFFF; box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); color: #292a26; display: block; height: 4rem; line-height: 1.42857143; padding: 6px; transition: all 0.6s ease; width: 100%; }

input:focus,
select:focus,
.form-control:focus,
textarea:focus { box-shadow: 0 0 0 0.2rem rgba(0,123,255,.5); }

textarea { overflow: auto; }
select { background: #FFFFFF; border: 1px solid #ACAEA6; color: #60615A; font-weight: bold; height: 4rem; padding: 6px; width: 100%; box-shadow: none; }
select:focus { background-color: #FFFFFF; }
select.disabled,
select[disabled],
select[disabled="disabled"] { border-color: #ACAEA6; /* color: #828282; color contrast ratio: 3.5 */ color: #545454; /* #545454 color contrast ratio: 6.8 */ cursor: not-allowed; }
.checkbox label { line-height: inherit; }

.formline { margin-bottom: 1rem; }
.required { color: #C23934; font-weight: 700; }

/* pulled from legacy */
select.error-validate-msg,
form input.error-validate-msg { border: 1px solid #d00d00; }

/* Bootstrap form overrides */
.form-group { margin-bottom: .75rem; }
.form-control { color: #292a26; height: 4rem; }
.has-success .form-control { border-color: #5C9E39; }
.has-warning .form-control { border-color: #EAAB39; }
.has-error .form-control { border-color: #D00D00; }
.has-warning .control-label, .has-warning .radio, .has-warning .checkbox, .has-warning .radio-inline, .has-warning .checkbox-inline, .has-warning.radio label, .has-warning.checkbox label, .has-warning.radio-inline label, .has-warning.checkbox-inline label { color: #EAAB39; }
.help-block { color: #595959; } /* Passes all WCAG contrast checkers */
.has-error .control-label, .has-error .radio, .has-error .checkbox, .has-error .radio-inline, .has-error .checkbox-inline, .has-error.radio label, .has-error.checkbox label, .has-error.radio-inline label, .has-error.checkbox-inline label { color: #D00D00; }
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { background-color: #F3F3F2; }
select.form-control { box-shadow: none; }
.has-error .form-control:focus { border-color: #843534; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.5); }

.inverse-content .has-error .text-danger { background: #d00d00; color: #FFFFFF !important; padding: .5rem; width: 99%; margin-left: .5%; }

input.input-lg { height: 5rem; }
input.input-sm { height: 3rem; }
@media screen and (min-width: 768px) {
    .form-inline .form-group { margin-bottom: .75rem; }
}

input[id*="quantity"] { width: 60px !important; }

/* dividers - Horizontal and Vertical; text align - start, center, and end */
.jjk-divider { border-color: var(--clr-gray-100); border-style: solid; border-width: 0; display: flex; }
.jjk-divider span { background-color: white; width: max-content; }
.jjk-divider--horizontal { align-items: center; border-top-width: 1px; width: 100%; height: 1px; }
.jjk-divider--horizontal.jjk-divider--text-start { justify-content: flex-start; }
.jjk-divider--horizontal.jjk-divider--text-start span { padding: 0 0.5rem 0 0; }
.jjk-divider--horizontal.jjk-divider--text-center { justify-content: center; }
.jjk-divider--horizontal.jjk-divider--text-center span { padding: 0 0.5rem; }
.jjk-divider--horizontal.jjk-divider--text-end { justify-content: flex-end; }
.jjk-divider--horizontal.jjk-divider--text-end span { padding: 0 0 0 0.5rem; }
.jjk-divider--vertical { display: grid; align-items: center; justify-content: center; border-left-width: 1px; width: 1px; height: auto; }
.jjk-divider--vertical.jjk-divider--text-start { align-items: flex-start; }
.jjk-divider--vertical.jjk-divider--text-start span { padding: 0 0 0.5rem 0; }
.jjk-divider--vertical.jjk-divider--text-center { align-items: center; }
.jjk-divider--vertical.jjk-divider--text-center span { padding: 0.5rem 0; }
.jjk-divider--vertical.jjk-divider--text-end { align-items: flex-end; }
.jjk-divider--vertical.jjk-divider--text-end span { padding: 0.5rem 0 0 0; }

/* Blockquote */
blockquote { border-left: 8px solid var(--clr-gray-150); color: #60615A; font-style: italic; line-height: 1.6; margin: 2rem; padding: 2rem 4rem; position: relative; }
blockquote { font-size: 1.6rem; }
blockquote footer { font-size: 1.6rem; padding-top: 1.25rem; position: relative; }
blockquote cite { display: block; font-style: normal; }
.blockquote-reverse { border-right: 8px solid var(--clr-gray-150); }

blockquote.with-bubble { border: none; }
blockquote.with-bubble .bubble { background: #FFFFFF; padding: 2rem; border: 6px solid var(--clr-gray-150); border-radius: 6px; margin-bottom: 0; position: relative; }
blockquote.with-bubble .bubble *:first-child { margin-top: 0; }
blockquote.with-bubble .bubble .bubble-title { color: #696a65; text-align: center; }
blockquote.with-bubble .bubble:after { border-top: 15px solid var(--clr-gray-150); border-right: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 15px solid transparent; content: ''; display: block; position: absolute; height: 0; width: 0; bottom: -36px; left: 3rem; }
blockquote.with-bubble footer cite { margin: .5rem 0 0 3rem; }
@media (min-width: 768px) {
  blockquote { font-size: 1.8rem; }
}
@media (min-width: 1920px) {
  blockquote { font-size: 2rem; }
}
@media screen and (max-width: 750px) {
  blockquote { padding: 1.5rem !important; }
}

@media (min-width: 768px) {
    #mobileLeftNav { display: none; }
}

/* Tooltip Styles */
.ui-tooltip { background-color: #FFFFFF; border: 4px solid #B8B9B3; border-radius: .5rem; box-shadow: 0 1px 6px 0 rgba(0,0,0,0.18),0 3px 10px 0 rgba(0,0,0,0.15); max-width: 300px; padding: 1.5rem; position: absolute; z-index: 9999; }
/* COC-2548 - Increased z-index value for jquery tooltip to be displayed on top of model overlay using custom css class name.*/
.ui-tooltip.is-tooltip { z-index: 100000 !important;}
.ui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* hides the accessible version of the tooltip */
/*
.ui-tooltip-content::after, 
.ui-tooltip-content::before { content: ""; position: absolute; border-style: solid; display: block; left: 90px; }
.ui-tooltip-content::before { bottom: -10px; border-color: #D0D1CC transparent; border-width: 10px 10px 0; }  
.ui-tooltip-content::after { bottom: -7px; border-color: white transparent; border-width: 10px 10px 0; }  
*/

/* pseudo tab styles */
.pseudo-tabs-nav,
.pseudo-tabs--nav { width: 100%; border-top: 1px solid var(--clr-gray-150); border-bottom: 1px solid var(--clr-gray-150); display: flex; justify-content: center; align-items: center; background-color: rgba(255, 255, 255, 0.9); flex-wrap: wrap; }
.pseudo-tabs-nav,
.pseudo-tabs--nav a { font-family: 'Roboto Condensed', Calibri, Arial, Helvetica, sans-serif; letter-spacing: .03rem; text-transform: uppercase; margin: 0 2rem; padding: 1rem 0; display: inline-block; }
@media screen and (min-width: 1280px) {
    .pseudo-tabs-nav.pseudo-tabs--nav__full-width,
	.pseudo-tabs--nav.pseudo-tabs--nav__full-width { background-size: cover; width: 100vw !important; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
}

/* General dropdown styles */
.dropdown.dropdown__container .caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 5px dashed; border-right: 5px solid transparent; border-left: 5px solid transparent; }
.dropdown.dropdown__container.open .caret { margin-bottom: 4px; border-bottom: 5px dashed; border-top: 5px solid transparent; }
.dropdown.dropdown__container .dropdown-backdrop { /* background: rgba(0, 0, 0, 0.25); */ background: none; } /* Needs further testing */
/* The dropdowns have a conflict between Bootstrap and the main navigation. Using display none with the dropdown__container is a fix until we can address this in the future. */
.dropdown.dropdown__container ul { display: none; }
.dropdown.dropdown__container.open ul { display: block; z-index: 4000; }
.dropdown.dropdown__container .dropdown-menu > li > a { text-transform: none; }

/* Dropdown styles within the pseudo-tabs */
.pseudo-tabs--nav .dropdown.dropdown__container { color: #006a96; font-family: 'Roboto Condensed', Calibri, Arial, Helvetica, sans-serif; font-size: 1.6rem; letter-spacing: .03rem; padding: 1rem; }
.pseudo-tabs--nav .dropdown.dropdown__container.visible-xs,
.pseudo-tabs--nav .dropdown.dropdown__container.visible-xs.open ul { width: 100%; }
.pseudo-tabs--nav .dropdown.dropdown__container.visible-xs.open ul { border-left: none; border-right: none; border-top: none; border-radius: 0; }
.pseudo-tabs--nav .dropdown__container.visible-xs.open ul li { text-align: center; }

/* Lists */
ul li { margin-bottom: .25rem; }
.list-has-icons { list-style: none; }
.mixed li,
.list-has-icons li { margin-bottom: .35rem; } /* .mixed li is for legacy support. Use .list-has-icons instead. */
.list-has-icons > li:before {color: #898b80;display: inline-block;float: left;font-family: FontAwesome;margin: 0 0 0 -1.7rem;}
.list-has-icons.list-icon-square > li:before { content: "\f0c8"; }
.list-has-icons.list-icon-check > li:before { content: "\f00c"; }
.list-has-icons.list-icon-angle-right > li:before { content: "\f105"; margin-left: -.75rem; }
.list-has-icons.list-icon-caret-right > li:before { content: "\f0da"; margin-left: -.75rem; }
.list-has-icons.list-icon-mix > .is-pdf:before { content: "\f1c1"; }
.list-has-icons.list-icon-mix > .is-doc:before { content: "\f0f6"; }
.list-has-icons.list-icon-mix > .is-article:before { content: "\f0f6"; }
.list-has-icons.list-icon-mix > .is-external-link:before { content: "\f08e"; }
.list-has-icons.list-icon-mix > .is-download:before { content:"\f019"; }
.list-has-icons.text-md>li:before { margin: 0 0 0 -2.5rem; }
.list-has-icons.text-lg>li:before { margin: 0 0 0 -2.9rem; }
.list-has-icons.text-xl>li:before { margin: 0 0 0 -3.2rem; }
.list-has-icons.text-md.list-icon-angle-right>li:before,
.list-has-icons.text-md.list-icon-caret-right>li:before { margin-left: -1.25rem; }
.list-has-icons.text-lg.list-icon-angle-right>li:before,
.list-has-icons.text-lg.list-icon-caret-right>li:before { margin-left: -1.5rem; }
.list-has-icons.text-xl.list-icon-angle-right>li:before,
.list-has-icons.text-xl.list-icon-caret-right>li:before { margin-left: -1.75rem; }
.list-has-icons.list-icon-square-o>li:before { content: "\f096"; }
.list-has-icons.list-icon-square-o.text-md>li:before,
.list-has-icons.list-icon-square-o.text-lg>li:before { margin-left: -2.75rem; }
.list-has-icons.list-icon-square-o.text-xl>li:before { margin: 2px 0 0 -3rem; }
.list-has-icons.list-icon-services>li:before { content: ''; background: url(https://cdn.jjkeller.com/wcsstore/CVCatalogAssetStore/images/promotions/business-services/Services-Chevron-op.svg) no-repeat left top; background-size: cover; margin: 4px 4px 0 -15px; height: 12px; width: 10px; }
.list-has-icons.list-icon-services.text-md>li:before { margin: 6px 4px 0 -19px; height: 17px; width: 14px; }
.list-has-icons.list-icon-services.text-lg>li:before { margin: 8px 4px 0 -20px; height: 19px; width: 16px; }
.list-has-icons.list-icon-services.text-xl>li:before { margin: 9px 4px 0 -22px; height: 21px; width: 18px; }

.list-inline.with-dots li,
.list-inline.with-pipes li { margin: 0; }
.list-inline.with-dots li:after,
.list-inline.with-pipes li:after  { color: #6E6F66; margin: 0 .1rem 0 1.35rem; }
.list-inline.with-dots li:after { color: #969696; content: "\f111"; font-family: 'FontAwesome'; font-size: 10px; }
.list-inline.with-pipes li:after { content: "|"; }
.list-inline.with-dots li:last-child:after,
.list-inline.with-pipes li:last-child:after { content: ""; margin: 0; }
.inverse-content .list-inline.with-pipes li:after { color: inherit; }

.list-has-dividers > li { border-bottom: 1px solid var(--clr-gray-150); margin-bottom: 0; padding-top: .5rem; padding-bottom: .5rem;  }
.list-has-dividers > li:last-child { border-bottom: none; }
.list-has-dividers li ul { margin-bottom: 0; }
.list-has-dividers li ul li:last-child { margin-bottom: 0; }

.list-link-group-long li { margin-bottom: 5px; }
.list-link-group-long li a { font-weight: 400; }

.list-item--spacing-1 li { margin-bottom: 1rem; }
.list-item--spacing-2 li { margin-bottom: 1.5rem; }
.list-item--spacing-3 li { margin-bottom: 2rem; }
.list-item--spacing-4 li { margin-bottom: 2.5rem; }
.list-item--spacing-5 li { margin-bottom: 3rem; }
/* no-bullet pulled from legacy, as we still need to support it. Use list-unstyled instead. */
.no-bullet { list-style: none; padding-left: 0; }
.list-inline>li.active a {
    color: #5e5e5e;
}

/* TOC Styles */
.table-of-contents { margin-top: 2rem; padding-left: 2rem; top: 1rem; }
.table-of-contents nav { display: inline-block; font-size: 1.4rem; }
.table-of-contents nav a { color: #6e6f67; }
.table-of-contents nav > ul { list-style: none; padding-left: 0; }
.table-of-contents nav > ul li ul { list-style: none; margin: 0 0 2rem 1rem; padding: 0; }
.table-of-contents nav > ul li ul a { font-weight: 400; }
@media screen and (max-width: 1279px) {
    .table-of-contents { display: none; }
}

/* Table Styles */
table { background-color: #FFFFFF; border: 1px solid var(--clr-gray-150); margin-bottom: 2.2rem; position: relative; width: 100%; }
.table>thead>tr>th *:first-child { margin-top: 0; }
.table>thead>tr>th *:last-child { margin-bottom: 0; }
table tbody { background: #FFFFFF; }
table th,
table td { border: 1px solid var(--clr-gray-150); padding: 1rem; }
table th,
table tfoot { background: #F5F5F5; }
table.table__borderless { border-top: transparent; }
table.table__borderless,
table.table__borderless th,
table.table__borderless td { border-right: transparent; border-left: transparent; border-bottom: transparent; }

/* Block Wrapper Styles */
div[class*="blocks-"] { display: flex; flex-wrap: wrap; flex-direction: initial; }
div[class*="blocks-"] .block-wrapper { padding: 10px; display: flex; flex-wrap: wrap; flex-direction: row; }
div[class*="blocks-"] .block-wrapper.flex-column { flex-direction: column; }
div[class*="blocks-"] .block-wrapper .card { margin-bottom: 15px; }
.blocks-2up .block-wrapper { width: 50%; }
.blocks-3up .block-wrapper { width: 33.333333%; }
.blocks-4up .block-wrapper { width: 25%; }
.blocks-5up .block-wrapper { width: 20%; }
.blocks-6up .block-wrapper { width: 16.6%; }
.block-wrapper > a { display: block; width: 100%; } /* For when an a tag is wrapping aound the content within a block-wrapper. Mostly for cards. */
@media screen and (max-width: 1300px ) {
    .blocks-6up .block-wrapper { width: 20%; }
}
@media screen and (max-width: 1100px ) {
    .blocks-5up .block-wrapper { width: 25%; }
    .blocks-6up .block-wrapper { width: 25%; }
}
@media screen and (max-width: 1084px ) {
    .blocks-4up .block-wrapper,
    .blocks-6up .block-wrapper { width: 33.333333%; }
}
@media screen and (max-width: 980px) {
    .blocks-3up .block-wrapper,
    .blocks-6up .block-wrapper { width: 50%; }
}
@media screen and (max-width: 820px ) {
    .blocks-4up .block-wrapper,
    .blocks-5up .block-wrapper { width: 33.3333%; }
}
@media screen and (max-width: 660px ) {
    .blocks-2up .block-wrapper,
	  .blocks-3up .block-wrapper,
    .blocks-4up .block-wrapper,
    .blocks-5up .block-wrapper,
    .blocks-6up .block-wrapper { width: 100%; }
}

.fast-signs-pdp-content { position: relative; }
.fast-signs-pdp-content .fast-signs-view-link { font-size: 16px; }
.fast-signs-pdp-content .fast-signs-view-link em { color: #52534d; font-size: 24px; }
.fast-signs-pdp-content .fast-signs-view-link:after {  font-family: FontAwesome; padding-left: 2px; position: absolute; top: 0; right: 6px; }
.fast-signs-pdp-content .fast-signs-view-link[aria-expanded="false"]:after { content: '\f067'; }
.fast-signs-pdp-content .fast-signs-view-link[aria-expanded="true"]:after { content: '\f068'; }
.fast-signs-pdp-content .fa.fa-truck { margin-left: -22px; }

/* Alerts */
.alert *:first-child { margin-top: 0; }
.alert *:last-child { margin-bottom: 0; }
.alert * { color: inherit; }
.alert { /* align-items: center; */ border: 2px solid rgba(255, 255, 255, 0.6); border-radius: .75rem; box-shadow: 0 2px 8px rgba(0,0,0,.2); border-radius: .3rem; display: flex; padding: 10px; margin-bottom: 1rem; position: relative; transition: all 0.3s ease; }
.alert hr { border-color: #FFFFFF; opacity: 0.3; margin: 1rem 0; }
.alert-link { color: inherit; color: rgba(255, 255, 255, 0.8); font-weight: 700; text-decoration: underline; }
.alert.bg-success,
.alert.bg-info,
.alert.bg-warning,
.alert.bg-danger { color: #FFFFFF; }
.alert.bg-danger.alert-text { background-color: transparent !important; border: transparent !important; box-shadow: none; color: #D00D00; }
.alert.bg-danger.alert-text .alert-link,
.bg-warning-light .alert-link,
.alert.bg-danger.alert-text:before { color: inherit; }

/* Alert Styles - newer than above */
.alert.has-icon:before { color: rgba(255,255,255,.75); font-size: x-large; line-height: 1; margin: .2rem 1rem 0 0; }
.alert.bg-danger.has-icon:before { content: '\f071'; }
.alert.bg-success.has-icon:before { content: '\f087'; }
.alert.bg-info.has-icon:before { content: '\f05a'; }
.alert.bg-warning.has-icon:before { content: '\f06a'; }

.bg-warning { background-color: #ff9d00; color: #292a26 !important; }
.bg-info { background-color: #20809D; /* contrast: 4.52:1 */ }
.bg-success { background-color: #4D832F; /* contrast: 4.56:1 */ }
.bg-danger { background-color: #ca251f; /* contrast: 4.53:1 */ }
.alert.bg-warning .alert-link { color: #292a26 !important; }
.alert.text-center,
.alert.text-xs-center { justify-content: center; }

/* Note styles */
.note { /* align-items: center; */ border: 2px solid transparent; border-radius: .75rem; display: flex; font-size: 1.15em; margin-bottom: 1rem; padding: 10px; position: relative; }
.note--general { background-color: #FFF; border-color: #B8B9B3; }
.note--info { background-color: #d9edf7; border-color: #94d1ef; color: #0c5460; }
.note--warning { background-color: #faf3d1; border-color: #eacb70; color: #856404; }
.note--danger { background-color: #faf3d1; border-color: #f9948d; color: #e00e00; }
.note.has-icon:before { align-self: flex-start; font-size: x-large; line-height: 1; margin: .2rem 1rem 0 0; }
.note.has-icon:before,
.note.note--info.has-icon:before { content: '\f05a'; }
.note.note--warning.has-icon:before { content: '\f06a'; }
.note.note--danger.has-icon:before { content: '\f071'; }
.note.text-center,
.note.text-xs-center { justify-content: center; }

/* Here until we can consolidate errors */
.error-validate-msg { color: #D00D00; font-weight: 700; }

/* pulled from legacy with minor tweaks. We still need to support these old styles, as they are mostly used in co-branded LPs. */
.vcard { border: 1px solid var(--clr-gray-150); display: inline-block; list-style-type: none; margin: 0 0 1rem; padding: 1rem; }
.vcard li { margin-bottom: .25rem; }
.vcard li:first-child { margin-top: 0; }
.vcard li:last-child { margin-bottom: 0; }
.vcard .name { font-weight: bold; }
.media .media-body .vcard { border: none; padding: 1rem; }

/* ------------------------------------------------------------------------------------
    Organisms
    complex UI components composed of groups of molecules and/or atoms and/or other organisms. These organisms form distinct sections of an interface.
------------------------------------------------------------------------------------ */

/* Box, Panel, and Cards. Note box is legacy and shouldn't be used moving forward. Panels are old bootstrap styles, and shold be replaced with cards. Pulled some box styles out of the legacy file to reduce duplication. */
/* Shared styles between box, panels, and cards. */
.box,
.panel,
.card { border-radius: .6rem; background: #FFFFFF; border: 1px solid var(--clr-gray-150); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.08); }
.box > *:first-child,
.panel>div>*:first-child,
.card-block *:first-child,
.card-header *:first-child { margin-top: 0; }
.box > *:last-child,
.panel>div>*:last-child,
.card-block *:last-child,
.card-header *:last-child { margin-bottom: 0; }

.box { margin: 0 0 15px; padding: 15px; }

/* Panel Specific Styles */
.panel .panel-heading { border-top-left-radius: .1115rem; border-top-right-radius: .1115rem; }
.panel-heading { position: relative; }
.panel-default,
.panel-gray { border-color: #B8B9B3; }
.panel .panel-footer { border-bottom-left-radius: .1115rem; border-bottom-right-radius: .1115rem; }
.panel-default > .panel-heading { color: #FFFFFF; background-color: #898B80; border-color: #898B80; }

.panel-primary { border-color: #337ab7 !important; }
.panel-primary>.panel-heading { background-color: #015EA1; border-color: #337AB7; }
.panel-info { border-color: #ADD3EE !important; }
.panel-info>.panel-heading { background-color: #CEEAFE !important; }
.panel-danger>.panel-heading { color: #FFFFFF; background-color: #D00D00; }
.panel-gray>.panel-heading { color: #FFFFFF; background-color: #898b80; border-color: #ACAEA6; }
#prod-right .panel-heading .panel-title { font-weight: bold; }
.panel-body { position: relative; }

/* Card Specific Styles */
/* Pulled from Bootstrap v4 alpha. Tweaked as needed. */
.card { overflow: hidden; position: relative; display: flex; flex: 0 1 auto; flex-direction: column; margin-bottom: .75rem; transition: all 0.4s ease; width: 100%; }
.card-block { flex: 1 1 auto; padding: 1.6rem; position: relative; min-height: 1px; } /* min-height IE11 bug fix */
.card-title { font-size: 1.25em; }
@media screen and (min-width: 43.75em) {
    .card-title { font-size: 1.35em; }
}
@media screen and (min-width: 56.25em) {
    .card-title { font-size: 1.45em; }
}
.card-subtitle { margin-top: -.375rem; margin-bottom: 0; }
.card-text:last-child { margin-bottom: 0; }
.card-link:hover { text-decoration: none; }
.card-link + .card-link { margin-left: 1.25rem; }
.card > .list-group:first-child .list-group-item:first-child { border-radius: .1115rem .1115rem 0 0; }
.card > .list-group:last-child .list-group-item:last-child { border-radius: 0 0 .1115rem .1115rem; }
.list-group-flush .list-group-item { border-right: 0; border-left: 0; border-radius: 0; }
.card-header { align-items: center; display: flex; flex-direction: row; flex-wrap: wrap; padding: .75rem 1.25rem; border-bottom: 1px solid #e5e5e5; margin: 0; }
.card-header * { font-size: 1.6em; }
.card-header:first-child { border-radius: .1115rem .1115rem 0 0; }
.card-header[class*="bg-"],
.card-header[class*="bg-"] > * { color: #FFFFFF; } /* This breaks when a lighter background is used. The styles immediatly below should fix the issue. */
.card-header[class*="-lt"],
.card-header[class*="bg-gray-1"],
.card-header[class*="bg-gray-2"],
.card-header[class*="bg-white"],
.card-header[class*="bg-yellow"],
.card-header[class*="bg-gold"],
.card-header[class*="bg-neon-yellow"],
.card-header[class*="bg-tan-1"],
.card-header[class*="bg-tan-2"],
.card-header[class*="bg-tan-3"],
.card-header[class*="bg-tan-4"],
.card-header[class*="bg-eyecue"],
.card-header[class*="-lt"] > *,
.card-header[class*="bg-gray-1"] > *,
.card-header[class*="bg-gray-2"] > *,
.card-header[class*="bg-white"] > *,
.card-header[class*="bg-yellow"] > *,
.card-header[class*="bg-gold"] > *,
.card-header[class*="bg-neon-yellow"] > *,
.card-header[class*="bg-tan-1"] > *,
.card-header[class*="bg-tan-2"] > *,
.card-header[class*="bg-tan-3"] > *,
.card-header[class*="bg-tan-4"] > *,
.card-header[class*="bg-eyecue"] > * { color: #52534D; }
.card-footer { padding: 1.25rem; border-top: 1px solid var(--clr-gray-150); }
.card-footer:last-child { border-radius: 0 0 .1115rem .1115rem; }
.card-primary { background-color: #0275d8; border-color: #0275d8; }
.card-success { background-color: #5cb85c; border-color: #5cb85c; }
.card-info { background-color: #5bc0de; border-color: #5bc0de; }
.card-warning { background-color: #f0ad4e; border-color: #f0ad4e; }
.card-danger { background-color: #d9534f; border-color: #d9534f; }
.card-primary-outline { background-color: transparent; border-color: #0275d8; }
.card-secondary-outline { background-color: transparent; border-color: #ccc; }
.card-info-outline { background-color: transparent; border-color: #5bc0de; }
.card-success-outline { background-color: transparent; border-color: #5cb85c; }
.card-warning-outline { background-color: transparent; border-color: #f0ad4e; }
.card-danger-outline { background-color: transparent; border-color: #d9534f; }
.card-inverse .card-header { border-bottom: 1px solid rgba(255, 255, 255, .2); }
.card-inverse .card-footer { border-top: 1px solid rgba(255, 255, 255, .2); }
.card-inverse .card-header,
.card-inverse .card-footer,
.card-inverse .card-title,
.card-inverse .card-blockquote,
.card-inverse .card-block p { color: #FFFFFF; }
.card-inverse .card-link,
.card-inverse .card-text,
.card-inverse .card-blockquote > footer { color: rgba(255, 255, 255, .65); }
.card-inverse .card-link:focus,
.card-inverse .card-link:hover { color: #FFFFFF; }
.card-blockquote { padding: 0; margin: 0; border: 0; box-shadow: none; }
.card-img { /* border-radius: .1115rem; */ width: 100%; } /* Width was added. Any conflicts? */
.card-img-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 1.25rem; }
.card-img-top { border-radius: .1115rem .1115rem 0 0; flex: 0 1 auto; height: auto; min-height: 1px; width: 100%; } /* min-height and flex added for IE issues */
.card.card__product .card-img-top { display: block; margin: auto; padding: 1.25rem; }
.card.card__product.card__product--size150 .card-img-top { width: 150px; }
.card.card__product.card__product--size225 .card-img-top { width: 225px; }
.card.card__product.card__product--size300 .card-img-top { width: 300px; }
.card-img-bottom { border-radius: 0 0 .1115rem .1115rem; width: 100%; } /* Width was added. Any conflicts? */
.section--bg-icon .card-block,
.section--bg-icon .card-footer { z-index: 1001; position: relative; }
.card.card-w-bg-img,
.card.card-w-bg-img .card-bg-img { height: 200px; } /* Heights are still being worked on for standardizing this pattern. */
.card.card-w-bg-img { border: 8px solid #FFFFFF; }
.card.card-w-bg-img .card-bg-img { background-repeat: no-repeat; background-position: center center; background-size: cover; transition: all 0.4s ease; }
.card.card-w-bg-img .card-img-overlay { background: rgba(0, 0, 0, 0.6); display: flex; /* width: 100%; height: 100%; */ justify-content: center; align-items: center; }
.card.card-w-bg-img .card-img-overlay .card-title { letter-spacing: .03rem; margin: 0; text-shadow: 0 0 5px rgba(0, 0, 0, 0.75); -webkit-font-smoothing: antialiased; }
.card.card-img-animate-hover .card-bg-img:hover { transform: scale(1.1); }
.card.card-shadow-hover:hover { box-shadow: 0 12px 15px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); transform: translateY(-1px); }
.card.card-w-bg-img.card-w-bg-img-w-footer { height: 250px; } /* Not fully tested, just a concept */
div[class*=blocks-] .block-wrapper .card { margin-bottom: 0; } /* Removes bottom margin when cards are in block-wrappers. */
@media screen and (max-width:589px) {
    .card.card-w-bg-img,
    .card.card-w-bg-img .card-bg-img { height: 100px; }
}

@media (min-width: 544px) {
  .card-deck { display: table; table-layout: fixed; border-spacing: 1.25rem 0; }
  .card-deck .card { display: table-cell; width: 1%; vertical-align: top; }
  .card-deck-wrapper { margin-right: -1.25rem; margin-left: -1.25rem; }
}
@media (min-width: 544px) {
  .card-group { display: table; width: 100%; table-layout: fixed; }
  .card-group .card { display: table-cell; vertical-align: top; }
  .card-group .card + .card { margin-left: 0; border-left: 0; }
  .card-group .card:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
  .card-group .card:first-child .card-img-top { border-top-right-radius: 0; }
  .card-group .card:first-child .card-img-bottom { border-bottom-right-radius: 0; }
  .card-group .card:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }
  .card-group .card:last-child .card-img-top { border-top-left-radius: 0; }
  .card-group .card:last-child .card-img-bottom { border-bottom-left-radius: 0; }
  .card-group .card:not(:first-child):not(:last-child) { border-radius: 0; }
  .card-group .card:not(:first-child):not(:last-child) .card-img-top,
  .card-group .card:not(:first-child):not(:last-child) .card-img-bottom { border-radius: 0; }
}
@media (min-width: 544px) {
  .card-columns { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 1.25rem; -moz-column-gap: 1.25rem; column-gap: 1.25rem; }
  .card-columns .card { display: inline-block; width: 100%; }
}

@media screen and (min-width: 768px) {
    .section--bg-icon:after { color: rgba(0,0,0,.05); font-family: FontAwesome; position: absolute; z-index: 1000; }
}

/* FAQ Styles */
.faqs .faqs__section { margin-bottom: 5rem; }
.faqs .faqs__wrapper .faqs__item { margin-bottom: 1.5rem; }
.faqs .faqs__wrapper .faqs__item .faqs__link { align-items: flex-start; display: flex; }
.faqs .faqs__wrapper .faqs__item .faqs__link:before { color: #6E6F66; display: inline-block; float: left; font-family: 'FontAwesome'; font-size: 1.2em; line-height: 1; margin: 0.3rem .75rem 0 0; -webkit-font-smoothing: antialiased; transition: transform .25s linear; -webkit-transition: -webkit-transform .25s linear; }
.faqs .faqs__wrapper .faqs__item .faqs__link[aria-expanded="false"]:before { content: '\f067'; transform: rotate(90deg); }
.faqs .faqs__wrapper .faqs__item .faqs__link[aria-expanded="true"]:before { content: '\f068'; transform: rotate(180deg); }
.faqs .faqs__wrapper .faqs__item .faqs__link h3 { color: #006fbd; font-weight: 400; font-size: 1.4em; margin: 0; }
.faqs .faqs__wrapper .faqs__item .faqs__link h3:hover { color: var(--clr-link-hover); }
.faqs .faqs__wrapper .faqs__item .faqs__content { margin: .5rem 0 0 2.4rem; padding-bottom: .5rem; }

/* Start: Ad stlyes */
.ad { /* max-width: 1600px; */ margin: auto; padding: revert; }
.ad + .ad,
picture + picture { margin-top: var(--space-base); }
.ad__headline { color: var(--clr-headline); font-family: var(--font-headline); font-size: clamp(1.8rem, 4vw, 2rem); font-weight: 700; letter-spacing: .025rem; line-height: 1.22222222; }
.ad__body { margin-bottom: clamp( var(--space-base), 3vw, var(--space-md)); max-width: 60ch; }
.ad__content > * { margin-bottom: 1rem; }
.ad.is-full-width,
.ad__img img { max-width: revert; }
.ad__cta:hover,
.ad__cta.text-gold .fa { color: inherit; }
.ad .btn { width: fit-content; }
.ad select,
.ad option,
.ad input { color: #292a26; }
@media screen and (min-width: 1200px) {
    .ad.is-full-width { margin-left: -50vw; margin-right: -50vw; }
}
.ad-row.carousel img { height: auto; margin: auto; max-width: 375px; }
@media screen and (min-width: 1600px) {
    .ad-row .owl-carousel { margin: auto; max-width: 1600px; }
}
/* .ad__img { padding: clamp(var(--space-base), 2vw, var(--space-md)); } */

/* Ribbon Styles Only */
.ad__ribbon > *:first-child { margin-top: 0; padding-top: 0; }
.ad__ribbon > *:last-child { margin-bottom: 0; padding-bottom: 0; }
.ad__ribbon { background-color: var(--clr-gray-800); padding: var(--space-base); position: relative; text-align: center; }
/* .ad__ribbon .ad__cta { text-decoration: underline; } */
.ad__ribbon .ad__cta--gold { color: var(--clr-promo-gold); }
.ad__ribbon > p:first-child { margin: 0; }
.ad__ribbon > * + * { margin-top: var(--space-xs); }
.ad__ribbon *,
a .ad__ribbon p { color: #FFFFFF; }
.ad__ribbon .bg-white * { color: #292a26; font-weight: initial; }
.ad__ribbon--red { background-color: var(--clr-promo-red); }
.ad__ribbon--blue { background-color: var(--clr-promo-saphire); }
.ad__ribbon--gold { background-color: var(--clr-promo-gold); }
.ad__ribbon.ad__ribbon--gold * { color: var(--clr-headline); }
.ad__ribbon--gold .ad__cta { color: var(--clr-link) !important; }

/* Banner Styles Only */
.ad__banner { background-color: #FFFFFF; display: flex; flex-direction: column; align-items: center; gap: clamp(var(--space-base), 2vw, var(--space-md)); justify-content: center; padding: clamp(var(--space-base), 2vw, var(--space-md)); }
/* .ad__content { padding: clamp(var(--space-base), 2vw, var(--space-md)); } */
.ad__content { text-align: center; }
.ad__img + .ad__content { text-align: left; }
.ad__banner--content-centered .ad__content { margin: auto; }
.ad__banner .ad__headline { font-size: clamp(2.4rem, 4vw, 2.8rem); }
.ad__banner--tan { background-color: var(--clr-neutral-tan-1); }
.ad__banner--lt-gray { background-color: var(--clr-gray-100); }
.ad__banner--dk-gray { background-color: var(--clr-gray-800); }
.ad__banner--dk-blue { background-color: var(--clr-promo-indigo); }
.ad__banner--dk-gray *,
.ad__banner--dk-blue * { color: #FFFFFF; }
/* .ad__banner--dk-gray .ad__cta,
.ad__banner--dk-blue .ad__cta { text-decoration: underline; } */

@media screen and (min-width: 675px) {
    .ad__banner { flex-direction: row; }
    .content-reverse { flex-direction: row-reverse; }
}

/* .ad__es-img,
img[src*="es_"]:not(picture)  { height: auto; width: min(300px, 340px); } */
.img-ad__group > img { margin: 0 2em 2em 0; }

/* homepage hero styles */
picture { display: inline-block; }
picture img { display: block; width: 100%; height: auto; }

/* deal of the week styles */
.ad__dotw { display: flex; flex-direction: column; flex: 1 1 auto; background-color: var(--clr-gray-100); width: 100%; height: 100%; }
.ad__dotw .ad__content { display: flex; align-items: center; flex-direction: column; justify-content: center; padding: 2.4rem; height: auto; flex: 1 1 auto; }
/* .ad__dotw .ad__content > * { margin: 0 auto .8rem; } */
.ad__dotw .ad__content > *:first-child { margin-top: 0; }
.ad__dotw .ad__content > *:last-child { margin-bottom: 0; }
.ad__dotw > div + div { border-top: 1px solid var(--clr-gray-400); }
/* .ad__dotw *:not(img):not(a):not(i) { width: 100%; } */
.ad__dotw img { min-width: 115px; max-width: 150px; height: auto; }
.ad__price { font-weight: 700; margin-bottom: .8rem; }
.ad__content .btn { margin-bottom: 0; }
@media screen and (max-width: 1024px) {
    .ad__dotw--dual { flex-direction: row; }
}
@media screen and (min-width: 1024px) {
    .ad__dotw { max-width: 400px; }
}
@media screen and (min-width: 769px) { 
    
}
@media screen and (max-width: 400px) {
    .ad__dotw--dual { flex-direction: column; }
}

/* Header - Global */
#headerWrapper,
.header--global { background: #F3F3F2; }
.header--global { display: flex; flex-direction: column; }
.header--global > .header__item:first-child { align-items: center; display: flex; justify-content: space-between; padding: .5rem 4rem; }
.header--global .header-l-cs-s-u__logo { margin-right: 2rem; }
.header--global .header-l-cs-s-u__logo, .okta-reg-page { padding-bottom: 1rem; }
.header--global .header-l-cs-s-u__logo .logo { display: block; margin: 0 auto; width: 185px; height: 104px; background-repeat: no-repeat; background-position: bottom center; text-indent: -9999px; background-image: url(https://cdn.jjkeller.com/wcsstore/CVCatalogAssetStore/images/global/logos/svg/JJK-c-horizlogo1953-R-op.svg); }
@media screen and (max-width: 768px) {
  .header--global .header-l-cs-s-u__logo { margin-right: 0; }
  .header--global .header-l-cs-s-u__logo, .okta-reg-page { margin-right: 0; padding-bottom: 0; }
  .header--global .header-l-cs-s-u__logo .logo { width: 170px; height: 70px; background-position: center center; }
}
@media screen and (max-width: 600px) {
    .header--global>.header__item:first-child { flex-direction: column; }
    .header--global>.header__item, #okta-reg-page-header:first-child { align-items: self-start; padding: 0.5rem 1rem; }
    .header--global .header__item .header-l-cs-s-u__customerservice-search-utility { width: 100%; }
}
.header--global .header__item .header-l-cs-s-u__customerservice-search-utility { flex: 1 1 auto; }

.header--global .header__item .layoutMember-header-l-cs-s-u__customerservice-search-utility { flex: 1 1 auto; padding-bottom:50px; }

/* Header: Customer User Name and Customer Service Styles */
.header-cs__container { align-items: center; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; margin: 1rem 0; }
.Header_GlobalLogin_signOutQuickLinkUser { font-size: 1.6rem; }
.header-cs__container > .header-cs__item .Header_GlobalLogin_signOutQuickLinkUser,
.customer-service-nav > .customer-service-nav__item:first-child { border-right: 1px solid #909090; margin-right: 2rem; padding-right: 2rem; }
.customer-service-nav > .customer-service-nav__item .dropdown .btn { padding: .5rem; }

/* Subnav for Content */
.sub-nav > ul { margin: 0; }
.sub-nav.sub-nav--flex ul { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; flex-basis: 100%;  }
.sub-nav.sub-nav--flex ul li { flex: 0 1 auto; }
.sub-nav.sub-nav--flex ul li a { display: flex; }
.sub-nav.sub-nav--border-tb ul { border-top: 1px solid var(--clr-gray-150); border-bottom: 1px solid var(--clr-gray-150); }
.sub-nav.sub-nav--border-all ul { border: 1px solid var(--clr-gray-150); }
.sub-nav ul li .btn.active { background-color: #898B80; border-radius: 0; box-shadow: none; color: #FFFFFF; cursor: not-allowed; pointer-events: none; }
@media screen and (min-width: 1280px) {
    .sub-nav.sub-nav--full-width { background-size: cover; width: 100vw !important; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
}
@media screen and (min-width: 955px) {
    .btn.active.tip-top:before { content: ''; border-top: 10px solid transparent; border-bottom: 10px solid #898B80; border-right: 10px solid transparent; border-left: 10px solid transparent; position: absolute; top: -20px; left: calc(50% - 10px); }
}
@media screen and (min-width: 955px) {
    .btn.active.tip-bottom:after { content: ''; border-top: 10px solid #898B80; border-bottom: 10px solid transparent; border-right: 10px solid transparent; border-left: 10px solid transparent; position: absolute; bottom: -20px; left: calc(50% - 10px); }
}

/* Header Customer Service Sub Nav */
.header .sub-nav { font-size: 16px; margin: 11px 0; padding: 0; }
.header .sub-nav.inline li { float: left; display: inline-block; }
.header .sub-nav li { border-left: 1px solid #909090; margin-right: 10px; padding-left: 10px; }
.header .sub-nav li:first-child { border-left: none; }
.header .sub-nav li:last-child { margin-right: 0px  }
.header .sub-nav li a { color: #5e5e5e; }
.header .sub-nav .customer-service a span,
.header .col-sm-3 .sub-nav li a { font-weight: normal; }

/* Customer Service Header Styles - Desktop and Mobile */
#contentRecommendationWidget_ES_Header_CustomerService div .left_espot { z-index: 4000 !important; }
.customer-service-nav.is-desktop { align-items: center; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; padding: .5rem; }
.customer-service-nav.is-desktop .customer-service-nav__item > div ul li > a { display: block; margin: revert; padding: revert; }
.customer-service-nav.is-desktop .customer-service-nav__item > div ul li { padding: 0 3rem; }
.customer-service-nav.is-mobile { display: none; border-top: 1px solid var(--clr-gray-150); border-bottom: 1px solid var(--clr-gray-150); }
@media screen and (max-width: 767px) {
    .customer-service-nav.is-desktop { display: none; }
    .customer-service-nav.is-mobile { display: block; }
}

/* User Utility Navigation */
/* div[class*="header__"] { float: none; } */ /* fix to resolve conflicts with ibm's div float style */
.header__search-utility { align-items: center; display: flex; justify-content: space-between; }
.header__search { flex: 1; margin: .8rem; }
.header__user-utility { flex: 0 0 auto; }
.header__user-utility > ul > li { margin: 0 0 0 2.4rem; position: relative; }
.header__user-utility > ul li ul li a,
.header__user-utility .mini-cart > a,
.header__search-utility [class^="user-utility"] > a { color: #292a26; }
.header__my-account-text { font-size: 1.4rem; font-weight: 400; line-height: 1.57143; }
.header__my-account-UserSpecificHeaderModule { line-height: 1.5; }
.Header_GlobalLogin_signInQuickLink.panelLinkSelected.selected .header__my-account .caret,
.panelLinkSelected.Header_GlobalLogin_signOutQuickLink_CSR.selected .header__my-account .caret { margin-bottom: 4px; border-bottom: 5px dashed; border-top: 5px solid transparent; }
@media screen and (max-width: 1024px) {
  .header__user-utility { flex: 0 0 30%; }
}

/* Account Flyout */
/* ibm */
.sign_in_registration { margin: 0 auto; max-width: 700px; line-height: 1.4em; }
.sign_in_registration .errorLabel { color: #D00D00; display: none; margin-bottom: 10px; }
.sign_in_registration .errorLabel.active { display: block; font-weight: 700; }
.logonPassword { margin-bottom: .5em; }

.loginMenuDropdown,
.menuDropdown { border: 1px solid #bfbfbf; display: none; position: absolute; }
.loginMenuDropdown.active,
.menuDropdown.active { display:flex; }
.loginMenuDropdown .errorLabel, 
.menuDropdown .errorLabel { color: #D00D00; display: none; margin-bottom: 10px; }
.loginMenuDropdown .errorLabel.active, 
.menuDropdown .errorLabel.active { display: block; font-weight: 700; }
/* jjk */
div[id*="Header_GlobalLogin"] .jjk-services-list { float: left; }
div[id*="Header_GlobalLogin"] .jjk-services-list ul li:last-child { margin: 0; }
div[id*="Header_GlobalLogin"] .jjk-services-list ul li a { color: #292a26; font-weight: 400; }
div[id*="Header_GlobalLogin"] .jjk-services-list ul li a:hover { text-decoration: underline; }

.GlobalLoginWidgetAlt .loginMenuDropdown > .contentRecommendationWidget,
.GlobalLoginWidgetAlt .menuDropdown .contentRecommendationWidget { order: 1; width: 46%; }
.loginMenuDropdown .signInForm > * { padding: 2rem; }
.loginMenuDropdown .signInForm .signInForm__header { background-color: #58132b; flex: 0 0 auto; }
.loginMenuDropdown .signInForm .signInForm__header p { color: #FFFFFF; margin: 0; }
.loginMenuDropdown .signInForm form { flex: 1; }

/** LOGIN ISSUE - BOIA **/
.loginMenuDropdown .signInForm,
.loggedInContractSelectPanel { display: flex; flex-direction: column; float: right; order: 2; width: 54%; }
.loggedInContractSelectPanel { padding: 2rem; }

.GlobalLoginWidgetAlt { display: none; }
.GlobalLoginWidgetAlt.active { display: block; }

.GlobalLoginWidgetAlt .loginMenuDropdown,
.GlobalLoginWidgetAlt .menuDropdown { background: #FFFFFF; box-shadow: 0px 8px 18px rgba(0, 0, 0, 0.3); left: calc(1% - 575px); right: auto; top: 50px; width: 700px; z-index: 9999; }
.contractSelectPanel .button_primary,
.contractSelectPanel .button_secondary,
.loggedInContractSelectPanel .button_primary,
.loggedInContractSelectPanel .button_secondary,
.signOutButton { width: 100%; }
.GlobalLoginWidgetAlt .sign-in { background: #F9F9F9; display: inline-block; float: left;
    letter-spacing: normal;
    padding: 20px;
    width: 50%;
}

.GlobalLoginWidgetAlt .sign-in p:first-child {
  border-bottom: 1px solid #E6E6E6;
  padding-bottom: 10px;
}

.GlobalLoginWidgetAlt #content-area {
    padding-left: 0;
    padding-top: 0;
}

.loginMenuDropdown .checkbox .checkedCheckBox {
    margin-right: 2px;
}

.GlobalLoginWidgetAlt .menuDropdown_csr .label {
    float: none;
    white-space: inherit;
}
.GlobalLoginWidgetAlt .button_primary {
    background-color: #015ea1;
    background-image: none;
    margin-top: 10px;
    padding: 4px;
}
.GlobalLoginWidgetAlt .button_primary:hover {
    background-color: #2385cb;
    background-image: none;
}
.GlobalLoginWidgetAlt .disabled .button_primary {
    cursor: default;
    opacity: 0.6;
}
.GlobalLoginWidgetAlt .disabled .button_primary:hover {
    background-color: #015ea1;
}
.GlobalLoginWidgetAlt .button_text {
    font-size: 13px;
    color: #fff;
    border-style: none;
    font-weight: bold;
}
.GlobalLoginWidgetAlt #content-area a {
    color: #0076a3;
}

/* ValidationTextbox */
input.wcValidationTextbox.error { border: 1px solid red !important; background: #FFCECE !important; } /* jquery migration */
.dijitReset.dijitInputInner {
    box-shadow: none;
    padding-bottom: 0;
    padding-top: 0;
    font-size: 12px;
}
#Header_GlobalLogin_WC_B2B_ShopOnBehalf .dijitReset.dijitInputInner {
    height: 18px;
}
.dijitReset.dijitInputField.dijitButtonText {
    padding-bottom: 6px;
    padding-left: 8px;
    padding-top: 6px;
}
.sign_in_registration .dijitReset.dijitInputField.dijitButtonText {
    width: 375px;
}
#Header_GlobalLogin_WC_B2B_ShopOnBehalf .dijit.dijitReset.dijitInline.dijitLeft.dijitDownArrowButton.selectButton.dijitSelect.dijitValidationTextBox.orderBySelect.dijitSelectReadOnly.dijitValidationTextBoxReadOnly.orderBySelectReadOnly.dijitReadOnly {
    width: 208px;
}

/* Mini-Cart */
.mini-cart,
.mini-cart > a { position: relative; }
.mini-cart > a:before { left: -28px; top: -9px; }
.mini-cart #mini-bag-popUp { position: absolute; top: 23px; border: 1px solid #ACAEA6; background: #FFFFFF;  box-shadow: 0 6px 12px rgba(0, 0, 0, .175); font-size: 13px; right: 0; width: 375px; z-index: 9999; }
.mini-cart #mini-bag-popUp #empty { text-align: center; padding: 10px 0; }
.mini-cart #mini-bag-popUp form { max-height: 275px; overflow-x: hidden; overflow-y: auto; padding: 10px; width: 100%; }
.mini-cart #mini-bag-popUp form table,
.mini-cart #mini-bag-popUp form table td { border: none; }
.mini-cart #mini-bag-popUp img#loading { width: 40px; height: 40px; }
.mini-cart #mini-bag-popUp form #mini-bag-prd-table { margin: 0 0 10px; }
.mini-cart #mini-bag-popUp form #mini-bag-prd-table td { border-bottom: 1px solid #E7E8E6 !important; padding: 5px; }
.mini-cart #mini-bag-popUp form #mini-bag-prd-table td a { font-weight: bold; }
.mini-cart #mini-bag-popUp form #mini-bag-prd-table tbody tr td a img { width: 50px; height: 50px; max-width: 50px; max-height: 50px; }
.mini-cart #mini-bag-popUp form #mini-bag-prd-table tbody tr td a img[src$=".png"] { height: auto; }
.mini-cart #mini-bag-popUp form #mini-bag-ttl-table { text-align: right; }
.mini-cart #mini-bag-popUp form #mini-bag-ttl-table td { padding: 2px; }
.mini-cart #mini-bag-popUp #mini-bag-buttons { border-top: 2px solid var(--clr-gray-150); clear: both; padding: 10px; text-align: right; }

#SimpleSearchForm_SearchTerm::-ms-clear { display: none; }

/* Main Navigation Styles */
/* Main Navigation Styles - main navigation */
.header__main-nav { background: var(--clr-corp-brand-dk-burgundy); width: 100%; }

.header__main-nav ul { list-style: none; padding: 0; }
.header__main-nav ul li a { display: block; }
.header__main-nav .header__main-nav--desktop .navbar-nav > li { margin-bottom: 0; text-align: center; width: calc(100% / 5); }
.header__main-nav .header__main-nav--desktop .navbar-nav > li > a { font-size: 1.4rem; line-height: normal; padding: 1.4rem .8rem; margin: 0 1rem; color: #FFFFFF; text-transform: uppercase; }
.header__main-nav .header__main-nav--desktop .Shop.shop { background: #E98019; }

.header .header__main-nav--desktop li { margin: 0; position: relative; z-index: 3000; }

.header__main-nav .header__main-nav--desktop .navbar-nav .dropdown-menu { visibility: hidden; -webkit-transition-delay: 0s; transition-delay: 0s; }
.header__main-nav .header__main-nav--desktop .navbar-nav .shop a:hover .dropdown-menu { -webkit-transition: all 0.1s 0.5s; transition: all 0.1s 0.5s; visibility: visible; }

.header .main-nav li.shop a:hover:before { background: rgba(255,255,255,0.9); }
.header .main-nav li.shop .top-category a:hover:before { position: absolute; margin: 0; top: 0; right: 0; }

.header .col-sm-3 .sub-nav { display: inline-block; margin-top: 10px; width: 50%; }
.header__main-nav .header__main-nav--desktop #jjk-main-nav > ul > li > a.menu_open,
.header__main-nav .header__main-nav--desktop #jjk-main-nav > ul > li > a.menu_focus  { border-bottom: 6px solid rgba(255,255,255,.8) !important; text-decoration: none; padding-bottom: .8rem !important; } /* BOIA */
.header__main-nav .header__main-nav--desktop .navbar-nav { max-width: 1600px; float: none; margin: 0 auto; padding: 0; width: 100%; }

/* Main Navigation Styles - Dropdown Styles */
.header__main-nav .header__main-nav--desktop .navbar-nav .dropdown-menu { width: 500%; }
.header__main-nav .header__main-nav--desktop .navbar-nav .dropdown-menu .dropdown-menu__item { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto }
.header__main-nav .header__main-nav--desktop .navbar-nav .dropdown-menu .dropdown-menu__item.top-category { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-flex: 0; -ms-flex: 0 0 calc(100% - 300px); flex: 0 0 calc(100% - 300px); }
.header__main-nav .header__main-nav--desktop .dropdown-menu a:hover { text-decoration:underline; }
.header__main-nav .header__main-nav--desktop .dropdown-menu .top-category .top-category__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: auto; flex: auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 0 1rem 1rem 0; }
.header__main-nav .header__main-nav--desktop .dropdown-menu .top-category .top-category__item .top-category__secondLevelCategory-description-name { color: var(--clr-corp-brand-dk-burgundy); margin: 0; }
.header__main-nav .header__main-nav--desktop .dropdown-menu .top-category .top-category__item .child-category a { color: #4D4E47; font-weight: 400; padding: .35rem 0; }
.header__main-nav .header__main-nav--desktop .dropdown-menu .top-category .top-category__item .child-category .child-category__item--view-all a { color: var(--clr-link); font-weight: 700; }
.header__main-nav .header__main-nav--desktop #jjk-main-nav.shop:hover .dropdown-menu,
.header__main-nav .header__main-nav--desktop #jjk-main-nav.shop:focus .dropdown-menu,
.header__main-nav .header__main-nav--desktop #jjk-main-nav .shop .dropdown-menu.menu_open { -webkit-transition: all .1s .5s; transition: all .1s .5s; visibility: visible; display: -webkit-box; display: -ms-flexbox; display: flex; } /* BOIA */
.header__main-nav .short-text { display: block; font-size: 12px; }
/* Main Navigation Styles - Dropdown Style Tweaks */
.header__main-nav .header__main-nav--desktop .navbar-nav .ComplianceTopics.shop .dropdown-menu { left: -100%; }
.header__main-nav .header__main-nav--desktop .navbar-nav .Industries.shop .dropdown-menu { left: -200%; }
.header__main-nav .header__main-nav--desktop .navbar-nav .NewsEvents.shop .dropdown-menu { left: -300%; }
.header__main-nav .header__main-nav--desktop .navbar-nav .CompanyCareers.shop .dropdown-menu { left: -400%; } 
.header__main-nav .header__main-nav--desktop .navbar-nav .CompanyCareers.shop .dropdown-menu .dropdown-menu__item.top-category { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.header__main-nav .header__main-nav--desktop .navbar-nav .ComplianceTopics.shop .dropdown-menu .top-category .top-category__item { -webkit-box-flex: 1; -ms-flex: 1 1 22%; flex: 1 1 22%; }
.header__main-nav .header__main-nav--desktop .navbar-nav .Industries.shop .dropdown-menu .top-category .top-category__item,
.header__main-nav .header__main-nav--desktop .navbar-nav .NewsEvents.shop .dropdown-menu .top-category .top-category__item { -webkit-box-flex: 0; -ms-flex: 0 0 46%; flex: 0 0 46%; }
.header__main-nav .header__main-nav--desktop .CompanyCareers.shop .dropdown-menu .top-category .top-category__item .top-category__secondLevelCategory-description-name { color: #4D4E47; font-weight: 400; }
/* Main Navigation Styles - espot ad styles */
.header__main-nav .header__main-nav--desktop .navbar-nav .dropdown-menu .dropdown-menu__ad { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; max-width: 300px; overflow: hidden; }
.header__main-nav .header__main-nav--desktop .navbar-nav .dropdown-menu .dropdown-menu__item.dropdown-menu__ad a { padding: 0; white-space: normal; text-decoration: none;}
.header__main-nav .header__main-nav--desktop .navbar-nav .dropdown-menu .dropdown-menu__item.dropdown-menu__ad img { width: 100%; }
.header__main-nav .header__main-nav--desktop .shop .dropdown-menu { border: 1px solid #FFFFFF; padding: 2rem; margin: 0; min-height: 250px; z-index: 3000; }
.header__main-nav .header__main-nav--desktop .shop .dropdown-menu .card { -webkit-transition: none; -o-transition: none; transition: none; }
.header #mobileMenu { color: #FFFFFF; font-size: 16px; padding: 10px; display: block; cursor: pointer; }
.header #mobileMenu:hover { text-decoration: none; color: #FFFFFF !important; }
/* Main Navigation Styles - mobile nav */
.header__main-nav--mobile .mobile-mini-cart { float: right; position: relative; font-size: 20px; }
.header__main-nav--mobile .mobile-mini-cart a { color: #FFFFFF; display: block; padding: 6px 15px 0 0; }
.header__main-nav--mobile .mobile-mini-cart a:hover { color: #FFFFFF !important; }
@media screen and (max-width: 1120px) {
  .header__main-nav .header__main-nav--desktop .navbar-nav .ComplianceTopics.shop .dropdown-menu .top-category { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; }
  .header__main-nav .header__main-nav--desktop .navbar-nav .ComplianceTopics.shop .dropdown-menu .dropdown-menu__ad { display: none; }
}
@media only screen and (max-width: 1000px) {
    .header__main-nav .header__main-nav--desktop .navbar-nav > li { width: calc(100% / 5); display: table; height: 4em; }
    .header__main-nav .header__main-nav--desktop .navbar-nav > li a { white-space: normal; display: table-cell; vertical-align: middle; }
}
@media screen and (max-width: 768px) {
    .header__main-nav .header__main-nav--desktop a:hover { border-bottom: none; border-color: none; }
}

/* Mobile Nav Styles */
.mobile__main-nav { background: #F3F3F2; box-shadow: -6px 0 8px rgba(172, 174, 166, 0.43) inset; height: 100%; left: -290px; padding: 2.4rem; position: fixed; width:290px; top:0; z-index:1000; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; }
.mobile__main-nav.open { left: 0; }
.mobile__main-nav ul { margin: 0 0 15px; float:left; width: 100%; }
.mobile__main-nav li { margin: 0; }
.mobile__main-nav li a { display: block; padding: .8rem 0; }
.mobile__main-nav .mobile-info { border-bottom: 2px solid #ACAEA6; border-top: 2px solid #ACAEA6; padding: 15px 0; }
.mobile__main-nav .mobile-info .customer-service a span { display: block; }
.mobile__main-nav .mobile-account > li:first-child { overflow: hidden; text-overflow: ellipsis; }

/* breadcrumb */
div#widget_breadcrumb { margin: 0; padding: 10px 0; }
div#widget_breadcrumb > ul { padding: 0; list-style-type: none; margin: 0; }
div#widget_breadcrumb > ul li { display: inline; font-size: 12px; margin:0; }
div#widget_breadcrumb > ul li.current,
.breadcrumb .current { font-weight: 700; } /* breadcrumb current is used on the add address page */
div#widget_breadcrumb > ul span.divider,
div#widget_breadcrumb > ul li.divider { margin: 0 6px; color: #d8d8d8; font-size: 12px; }
div#widget_breadcrumb > ul li a { font-weight: 400; }

div[id*="_Widget_ContentCarousel_"].page__hero { background-size: cover; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
div[id*="_Widget_ContentCarousel_"].page__hero .owl-carousel { padding: 0; }


/* Select Menus - jquery migration - tweaked */
.ui-selectmenu-button span.ui-icon { /* background: url("../images/responsive/rwdUI.png"); */display: block; position: relative; width: 15px; height: 10px; margin: 8px 4px 0px 4px; float: right; }
.ui-selectmenu-button span.ui-icon:before { display: block; position: relative; width: 15px; height: 15px; font-family: 'FontAwesome'; content: '\f078'; line-height: 1; }
.ui-menu-item { position: relative; cursor: pointer; list-style: none; /* margin-left: -40px; */ margin: 0; }
.ui-menu-item-wrapper { padding: 9px 8px; border-bottom: 1px solid #E0E0E0; background: #FFFFFF; }
.ui-menu { border: 1px solid #E0E0E0; box-shadow: 0 2px 13px -4px #000000; }
li div.ui-state-active { background: #898989; color: #FFFFFF; }
li div.ui-state-select { background: #F3F3F2; }
li div.ui-state-select.ui-state-active { color: initial; }
/*jquery library*/
.disableDropdown { pointer-events: none; }
.selectWrapper.defaultDropdownSelection { background-color: #F3F3F2; }
.ui-selectmenu-menu { padding: 0; margin: 0; position: absolute; top: 0; left: 0; display: none; }
.ui-selectmenu-menu .ui-menu { font-size: 14px !important; overflow: auto;/* Support: IE7 */overflow-x: hidden; margin: 0; padding: 0; }
.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup { font-size: 1em; font-weight: bold; line-height: 1.5; padding: 2px 0.4em; margin: 0.5em 0 0 0; height: auto; border: 0; }
.ui-selectmenu-open { display: block; }
.ui-selectmenu-button { display: inline-block; overflow: hidden; position: relative; text-decoration: none; cursor: pointer; margin-bottom: 10px; vertical-align: top; }
.ui-selectmenu-button span.ui-selectmenu-text { text-align: left; display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px; }
.selectWrapper .wcSelect { padding: 6px; border-radius: 5px; color: #545454; font-size: 14px; cursor: pointer; min-width: 140px; }
.orderBySelect span.ui-selectmenu-text { padding: 4px; }
.orderBySelect span.ui-icon { margin-top: 10px; }
.selectWrapperPageSize .wcSelect { min-width: 0px; }
.selectWrapperPageSize span.ui-icon { margin-top: 10px; }	
.definingAttributes .options_dropdown_column .selectWrapper .wcSelect { padding: 0px 6px; min-width: 156px; }
.definingAttributes .options_dropdown_column 
.ui-selectmenu-button span.ui-selectmenu-text { padding: 7px 2px; }
.definingAttributes .options_dropdown_column 
.ui-selectmenu-button span.ui-icon { margin-top: 10px; }
.definingAttributes .options_dropdown_column .ui-selectmenu-button { margin-bottom: 0px; }
.product_info .selectWrapper .wcSelect { padding-top: 8px; }
#newListPublicPrivateDropdown .wcSelect { font-size: 12px; min-height: 30px; min-width: 208px; padding-bottom: 0; margin-bottom: 0; }
.listTable .toolbar .field .wcSelect { padding-right: 20px; margin-bottom: 10px; }
.listTable .toolbar .field .wcSelect { width: 100%; }
.listTable .toolbar .field .wcSelect { font-size: 12px; padding: 4px 6px; background: #FFFFFF; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border: 1px solid #E0E0E0; border-radius: 5px 5px 5px 5px; width: 80%; }
.ui-selectmenu-menu li.ui-state-disabled{ display:none; }
.UserMemberGroupManagement .memberGroup .wcSelect { border-radius: 5px; border: 1px solid #999999; padding: 8px; font-size: 12px; width: 300px; margin-bottom: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.globalLogin .wcSelect { font-size: 12px; min-height: 25px; min-width: 274px; margin-bottom: 0; }	
.globalLogin .ui-menu-item { margin-left: 0; }
.globalLoginCSR .wcSelect { min-width: 255px; }
.OrganizationListWidget .orgList .wcSelect { color: #4d4d4d !important; background-image: linear-gradient(#f7f9f9, #e5e8e9); border-radius: 5px; border: 1px solid #bfbfbf; padding: 8px 5px; font-size: 12px; min-width: 180px; max-width: 260px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
#Register .inputField.wcSelect,
#QuickCheckout .inputField.wcSelect,
#AddressForm .inputField.wcSelect,
#addressId .inputField.wcSelect { padding: 5px 8px; margin-bottom: 8px; }
#Register input.inputField.wcSelect,
#QuickCheckout input.inputField.wcSelect,
#AddressForm input.inputField.wcSelect,
#addressId input.inputField.wcSelect { padding: 8px; margin-bottom: 8px; }
.findOrderlistTable .toolbar .field .wcSelect { padding: 4px 6px; }
.pageSection .field .wcSelect { border-radius: 5px; border: 1px solid #e0e0e0; padding: 4px; font-size: 12px; width: 80%; max-width: 300px; margin-bottom: 5px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
.pageSection .field input.wcSelect { padding: 8px; }


/* Background Image Styles */
.has-bg-img { background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; }
.has-bg-img--top { background-position: top center; }
.has-bg-img--right { background-position: center right; }
.has-bg-img--bottom { background-position: bottom center; }
.has-bg-img--left { background-position: center left; }
.page__hero.has-bg-img { background-size: cover; }

.column-w-background-image { padding: 0; }
.column-w-background-image .background-image { width: 100%; background-repeat: no-repeat; background-size: cover; padding: 0; }
.column-w-background-image .background-image.background-image-centered { background-position: center center; }
.column-w-background-image .background-image.background-image-lt { background-position: left top; }
.column-w-background-image .background-image.background-image-rt { background-position: right top; }

/* Services Espot Image Ad */
#contentRecommendationWidget_9_-2012_3041 { background: #F3F3F2; margin-bottom: 0; overflow: hidden; padding: 15px 0; }

/* Media Styles */
.media { overflow: visible; }
.media-list .media { margin-bottom: 30px; }
.media-list.columns { display: flex; flex-wrap: wrap; }
.media-list.columns .media { margin: 5px; padding: 1.25rem; width: calc(50% - 10px); }
.media-body { width: 100%; }
.media .media-body *:last-child { margin-bottom: 0; }
img.media-object { width: 115px; max-width: 115px; }
.media-list.columns .media .media-left a img { width: 115px; max-width: inherit; }
.media-list.media-list-compact .media { height: 110px; margin: 0 15px 15px 0; }
.media-list.media-list-compact .media > a { height: 110px; }
.media-list.media-list-no-description .media > a { display: table; }
.media-list-no-description .media > a .media-heading { color: var(--clr-link-hover); }
.media-list-no-description .media > a:hover .media-heading { color: var(--clr-link); }
a .media-body .media-heading,
.media-body .media-heading a { transition: color 0.5s ease; }
.media-list-objects-sm .media-object { width: 85px; max-width: 85px; }
.media-list-objects-lg .media-object { width: 150px; max-width: 150px; }
.media-left img { margin: auto; } /* Test */
@media screen and (max-width: 700px) {
    .media-list.columns .media { text-align: center; }
    .media-list .media-left { display: block; }
    .media-list .media-left img { display: block; margin: 0 auto 10px; }
}
@media (max-width: 500px) {
  .media-left,
  .media-right,
  .media-body { display: block; }
}
@media screen and (max-width: 470px) {
    .media-list.columns .media { width: 100%; }
}

.media-list.media-list-cards .media { border: 1px solid var(--clr-gray-150); box-shadow: 0 2px 2px rgba(0,0,0,.08); background: #FFFFFF; padding: 1.25rem; margin: 5px; height: auto; width: calc(50% - 10px); }
@media screen and (max-width: 700px) {
  .media-list.media-list-cards .media-left { display: block; }
  .media-list.media-list-cards .media-left img { display: block; margin: 0 auto 10px; }
}
@media screen and (max-width: 470px) {
  .media-list.media-list-cards .media { margin: 5px 0; width: 100%; }
}

/* Media Object List Styles - Updated */
.media__list { display: flex; align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
.media__list .media__item { display: flex; margin: 1rem; padding: 1rem; width: calc(50% - 2rem); }
.media__list .media__item .media__figure { margin: 0 1rem 0 0; }
.media__list .media__body { flex: 1 1 0%; }
.media__list .media__body .media__title { font-weight: 700; }
.media__list.media__list--condensed .media__item { margin: .5rem; padding: .5rem; }
.media__list.media__list--center .media__item { align-items: center; }
.media__list.media__list--reverse { flex-direction: row-reverse; }
.media__list.media__item--reverse .media__item { flex-direction: row-reverse; }
.media__list.media__item--reverse .media__figure { margin: 0 0 0 1rem; }

/* Tabs */
.nav-tabs>li { margin-bottom: -2px; }
.nav-tabs>li>a { border-radius: .2rem .2rem 0 0;  transition: all .4s ease; }
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover { border: 1px solid #ACAEA6; border-bottom-color: transparent; border-radius: .2rem; color: #52534d; }
.tab-pane *:first-child { margin-top: 0; }
.tab-pane *:last-child { margin-bottom: 0; }
.tab-content { border: 1px solid #ACAEA6; border-radius: 0 .2rem .2rem; }
.tab-content>.tab-pane { padding: 3rem; }
.brand .nav-tabs>li.active>a,
.brand .nav-tabs>li.active>a:hover,
.brand .nav-tabs>li.active>a:focus { background: #8B2346; border: 1px solid #8B2346; border-bottom-color: transparent; color: #FFFFFF; }
.brand .tab-content>.active { border-top: 2px solid #8B2346; }

/* Accordions */
.panel-title>a:hover,
.panel-title>small:hover,
.panel-title>.small:hover,
.panel-title>small>a:hover,
.panel-title>.small>a:hover { color: #dff0ff; }

#accordion .card .card-header,
#accordion .card .card-header a { display: block; }
#accordion .card .card-header a[aria-expanded=false]:after,
#accordion .card .card-header a[aria-expanded=true]:after { font-family: FontAwesome; float: right; -webkit-font-smoothing: antialiased; transition: transform .25s linear; -webkit-transition: -webkit-transform .25s linear; }
#accordion .card .card-header a[aria-expanded=false]:after { content: "\f067"; }
#accordion .card .card-header a[aria-expanded=true]:after { content: "\f068"; transform: rotate(180deg); }

/* Optimized YouTube Styles */
.youtube-player img { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; border: none; height: auto; cursor: pointer; -webkit-transition: .4s all; -moz-transition: .4s all; transition: .4s all; }
.youtube-player .play { width: 100%; top: calc(50% - 35px); position: absolute; cursor: pointer; text-align: center; }
.youtube-player .play:before { color: #000000; content: '\f16a'; font-family: FontAwesome; font-size: 70px; line-height: 1; opacity: .9; }
.youtube-player .play.play_white:before { color: #FFFFFF; }
.youtube-player .play.play_red:before { color: #cc181e; }
.youtube-player .play.play_eyecue:before { color: #6e6f12; }
.youtube-player:hover .play:before { color: #cc181e; opacity: 1; }

/* General Modal Styles */
/* Modal close button styles - Might need to remove legacy styles */
.modal-backdrop { background-color: rgba(0, 0, 0, 0.65); z-index:3000; } /* Bootstrap override */
 .modal { z-index: 4000; } /* Override to cover the main nav text */
 body.modal-open { padding: 0 !important; } /* Helps with the page shift when Bootstrap modals open and close. */
.modal-header .close { box-shadow: none; margin: -15px -7px 0 0; font-size: 34px; color: #8a8a8a; text-shadow: none; opacity: 1; }
#myModal-ppe .modal-header button,
button.close-logo,
button.close-materials,
button.close-pic,
button.close-sizes { box-shadow: none; }
.modal-header .close:hover { background: none; color: var(--clr-link-hover); }


/* IBM OOB Store Message DIALOG - Moved from ibm styles and tweaked */
.store_message { position: absolute; top: calc(50vh - 100px); left: 0; right: 0; margin-left: auto; margin-right: auto; z-index: 9999; max-width: 600px; width:100%; display: none; }
.store_message > .content { background-color: #FFFFFF; border: 1px solid #D00D00; padding: 30px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); }
.store_message > .content > .close { position: absolute; top: 5px; right: 10px; opacity: 1; }
.store_message > .content > .close > .close_text { text-indent: -9999px; font-size: 11px; color: #777777; height: 13px; float: left; }
.store_message > .content > .close > .close_icon:before { font-family: 'FontAwesome'; content: '\f00d'; display: block; color: #8a8a8a; -webkit-font-smoothing: antialiased; }
.store_message > .content > .close > .close_icon:hover:before { color: var(--clr-link-hover); }
.store_message > .content > .close:hover > .close_text { text-decoration: underline; }
.store_message > .content > .close:hover > .close_icon { background-position: 0 -8px; }
.store_message > .content > .message .message_icon { float: left; margin: -3px 0 0 -15px; position: relative; }
.store_message > .content > .message .message_icon .error_icon:before { content: '\f071'; font-family: 'FontAwesome'; font-size: 35px; color: #D00D00; -webkit-font-smoothing: antialiased; }
.store_message > .content > .message .message_icon > #success_icon.error_icon:before { color: #5C9E39; content: '\f058'; }
.store_message > .content > .message .message_text { margin-left: 25px; }

/* WCDialog */
.ui-dialog.ui-widget { position: absolute; z-index: 1000; } /* jquery migration */

/* Browse Products-Services Widget Styles */
.browse-products-services { padding: 6rem 0; }
div[id*="browseProductsServicesWidget"] { margin: auto; }
.browse-products-services .browse-products-services__header { text-align: center; }
.browse-products-services .browse-products-services__header *:first-child { margin-top: 0; }
.browse-products-services .browse-products-services__body > div > div { display: flex; flex-direction: row; flex-wrap: wrap; }
.browse-products-services .browse-products-services__item { padding: 15px; width: calc(100% / 6 - 1px); text-align: center; } /* minus one pixel is to make IE play well with others */
.browse-products-services .browse-products-services__item > div > a,
.browse-products-services .browse-products-services__item > div > div { display: flex; justify-content: center; }
.browse-products-services .browse-products-services__body .browse-products-services__item .browse-products-services__image > div { margin-bottom: 1rem; width: 150px; height: 150px; }

@media screen and (min-width: 1280px) {
    .browse-products-services.section--bg-full-width { margin-left: -50vw !important; margin-right: -50vw !important; }
}
@media screen and (max-width:1050px) {
    .browse-products-services .browse-products-services__item { width: calc(100% / 5 - 1px); } /* minus one pixel is to make IE play well with others */
}
@media screen and (max-width:850px) {
    .browse-products-services .browse-products-services__item { width: calc(100% / 4 - 1px); } /* minus one pixel is to make IE play well with others */
}
@media screen and (max-width:700px) {
    .browse-products-services .browse-products-services__item { width: calc(100% / 3 - 1px); } /* minus one pixel is to make IE play well with others */
}
@media screen and (max-width:530px) {
  .browse-products-services .browse-products-services__item { width: calc(100% / 2); }
}
@media screen and (max-width:350px) {
  .browse-products-services .browse-products-services__item { width: 100%; }
}

/* Recommendation Engine PDP Tweaks */
.product_image > a { display: block; }
/* .product_image .image, */
.product_image img { display: block; margin: 0 auto 1rem; }
.product_name > div { display: none; font-size: 12px; line-height: 1.6; }
.productListingWidget .product_name > div { display: block; }

.product-buyable div[data-slot-id="8"] .content { padding: 1rem; }
.product-buyable div[data-slot-id="8"] .header { border: none; }
.product-buyable div[data-slot-id="8"] h2 { font-size: 1.5rem; font-weight: 400; text-align: center; }
.product-buyable div[data-slot-id="8"] .product { padding: 0; }
.product-buyable div[data-slot-id="8"] .product_image img { max-width: 100px; width: 100%;}
.product-buyable div[data-slot-id="8"] .product_name { height: auto; max-height: auto; }
.product-buyable div[data-slot-id="8"] .product_name > a { text-align: center; }
.product-buyable div[data-slot-id="8"] .content ul li,
.product-buyable div[data-slot-id="8"] .content ul li .rating { margin-bottom: 2rem; text-align: center; }
.product-buyable div[data-slot-id="8"] ul li .grid { display: flex; flex-direction: row; flex-wrap: wrap; }

.best-sellers.top-browsed .product .rating img { width: 105px !important; height: 19px !important; }
.best-sellers.top-browsed .RibbonAdDefault { left: -10px; top: 0; }
@media screen and (max-width: 991px) {
  .best-sellers.top-browsed .grid { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
  .ui-grid-a>.ui-block-a, 
  .ui-grid-a>.ui-block-b{ width: 33.333333%; }
  .best-sellers.top-browsed .product { padding: 1rem; }
}

@media screen and (min-width: 992px) {
	.product-buyable div[data-slot-id="7"] { border-right: 1px solid var(--clr-gray-150); }
	.product-buyable div[data-slot-id="8"] .content ul li .rating { display: none; }
}
@media screen and (max-width: 991px) {
	.product-buyable div[data-slot-id="8"] { margin-top: 2rem; }
	.product-buyable div[data-slot-id="8"] h2 { font-size: 2rem; font-weight: 700; text-align: left; }
	.product-buyable div[data-slot-id="8"] .content ul li ul li { padding: 1rem; width: 33.333333% !important; }
}
@media screen and (max-width: 600px) {
	.product-buyable div[data-slot-id="8"] .content ul li ul li { float: left; width: 50% !important; }
}
@media screen and (max-width: 390px) {
	.product-buyable div[data-slot-id="8"] .content ul li ul li { width: 100% !important; }
}

/* PDP Horizontal Presentration */
/*
.product-buyable div[data-slot-id="9"] div[id*="catalogEntryRecommendationWidget_9"].carousel:after,
.product-buyable div[data-slot-id="9"]  div[id*="catalogEntryRecommendationWidget_9"].carousel:before { display: none; }
*/
.product-buyable div[data-slot-id="9"]  div[id*="catalogEntryRecommendationWidget_9"] { margin: 4rem 0; }
.product-buyable div[data-slot-id="9"]  div[id*="catalogEntryRecommendationWidget_9"] .content { padding: 1rem; }
.product-buyable div[data-slot-id="9"] div[id*="catalogEntryRecommendationWidget_9"] h2 { font-size: 28px; text-transform: uppercase; }
.product-buyable div[data-slot-id="9"]  div[id*="catalogEntryRecommendationWidget_9"] .product { padding: 0; }
.product-buyable div[data-slot-id="9"]  div[id*="catalogEntryRecommendationWidget_9"] .product_image img { margin: 0 auto 1rem; max-width: 100px; width: 100%;}
.product-buyable div[data-slot-id="9"]  div[id*="catalogEntryRecommendationWidget_9"] .product_name { height: auto; max-height: auto; }
.product_name > * { margin-bottom: 1rem; }
.product-buyable div[data-slot-id="9"]  div[id*="catalogEntryRecommendationWidget_9"] .content ul li,
.product-buyable div[data-slot-id="9"]  div[id*="catalogEntryRecommendationWidget_9"] .content ul li .rating { text-align: center; padding: 1rem;}
.product-buyable div[data-slot-id="9"]  div[id*="catalogEntryRecommendationWidget_9"] ul li .grid { display: flex; flex-direction: row; flex-wrap: wrap; }
@media screen and (min-width: 992px) {
}
@media screen and (max-width: 991px) {
	.product-buyable div[data-slot-id="9"] div[id*="catalogEntryRecommendationWidget_9"] h2 { font-size: 2.8rem; font-weight: 700; text-align: left; }
	.product-buyable div[data-slot-id="9"] div[id*="catalogEntryRecommendationWidget_9"] .content ul li ul li { padding: 1rem; width: 33.333333% !important; }
}
@media screen and (max-width: 600px) {
	.product-buyable div[data-slot-id="9"] div[id*="catalogEntryRecommendationWidget_9"] .content ul li ul li { float: left; width: 50% !important; }
}
@media screen and (max-width: 390px) {
	.product-buyable div[data-slot-id="9"] div[id*="catalogEntryRecommendationWidget_9"] .content ul li ul li { width: 100% !important; }
}

/* Recommendation Engine Cart Tweaks */
.checkout__cart div[data-slot-id="7"] .catalogEntryRecommendationWidget.carousel { margin-bottom: 6rem; }
.checkout__cart div[data-slot-id="7"] .catalogEntryRecommendationWidget.carousel h2 { padding: 0; }
.checkout__cart div[data-slot-id="7"] .titleItems,
.checkout__cart div[data-slot-id="7"] ul li { padding: 1rem; text-align: center; }
.checkout__cart div[data-slot-id="7"] .product { padding: 0; }
.checkout__cart div[data-slot-id="7"] .product_image img { max-width: 100px; width: 100%;}
.checkout__cart div[data-slot-id="7"] .product_name { height: auto; max-height: auto; }

.checkout__order-summary .WCTooltip .container { margin-top: 10px; }

/* ------------------------------------------------------------------------------------
    Templates/Layouts
    Templates or layouts are page-level objects that place components
    into a layout and articulate the design's underlying content structure.
------------------------------------------------------------------------------------ */

/* div#page { background: #FFFFFF; } */
#page { width: 100%; height: 100%; position: relative; }
#container { max-width: 100%; } 

/*,
#content-area,
#orderFormDetails,
#new-customer,
#order-review-panel,
.payment-review form */ .contentWrapper__content { max-width: 1600px; margin: 0 auto; }
#contentWrapper > #content > .rowContainer,
#container_11005 > .row:first-of-type { margin: 0; padding: 0; }
#contentWrapper > #content > .rowContainer > div:first-of-type { padding-top: 0; }

.rowContainer>.row,
#content > .main-column.col-md-12 { padding: 0; } /* Removes extra space from the opencms markup added by the template */

/* Template overrides */
.clear_float { margin: 0 !important; } /* These were removed for Jarvis on the PDPs, but there could be some that are lingering. This should stay a bit longer. */

/* Section Styles */
.section { position: relative; width: 100%; }
.section:before,
.section:after { content: " "; display: table; }
.section:after { clear: both; }
.section__content.is-centered { margin: auto; max-width: 1400px; }
.section__header,
.header-group { margin-bottom: 20px; }
.section__header *:first-child,
.header-group *:first-child,
.header-group > * { margin-top: 0; }
.section__header *:last-child,
.header-group *:last-child { margin-bottom: 0; }
.section__header > * + * { margin-top: 0; padding-top: 0; }
.section--bg-icon { overflow: hidden; }
.section--bg-icon:before { color: rgba(0,0,0,0.05); font-family: FontAwesome; position: absolute; z-index: 1000; }
.section--bg-icon .section__content { position: relative; z-index: 1001; }
@media screen and (min-width: 1280px) {
  #content { overflow: visible; }
  .section__ribbon-ad,
  .section--bg-full-width { background-size: cover; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
  .section__ribbon-ad  .section__content,
  .section--bg-full-width .section__content { margin: auto; max-width: 1600px; }
}

.ribbon-ad { padding: 1rem; position: relative; text-align: center; }
.ribbon-ad > *:first-child { margin-top: 0; padding-top: 0; }
.ribbon-ad > *:last-child { margin-bottom: 0; padding-bottom: 0; }
.ribbon-ad > * + * { margin-top: 0; }

/* ------------------------------------------------------------------------------------
Pages
Pages are specific instances of templates that show what a UI looks
like with real representative content in place.
------------------------------------------------------------------------------------ */

/* Homepage */
.home #container_11010 .slot1 { padding: 0; }
.home .product_page_content.rowContainer { padding-top: 0; }
.home #contentWrapper .product_page_content.rowContainer > .row.margin-true { padding: 0; }
.home .left_espot.centered > a > img { width: 100%; }
.home .content .product { min-height: 260px !important; transition: ease 0.5s all; }
.home .content .product:hover { box-shadow: 0 0 12px rgba(0,0,0,0.2); }
/*
.home .carousel.padding-true { padding: 0; }
*/

/* Homepage News Specific Styles */
#home-news-alerts { padding: 20px; }
#home-news-alerts h2 { font-size:24px; text-transform: uppercase; border-bottom:#69142E 2px solid; display: inline-block; }
#home-news-alerts .news-item { border-bottom: 1px #DDDDDD solid; margin-bottom: 2rem; padding-bottom: 2rem; }
#home-news-alerts > .news-item:last-of-type { border-bottom: none; }
#home-news-alerts .news-item .news-item__title { color:#781B30; }
#home-news-alerts .btn.btn-text { color: #52534D; font-family: 'Roboto Condensed', Calibri, Arial, Helvetica, sans-serif; font-size: 20px; padding-left: 0; text-align: left; }
#home-news-alerts .btn.btn-text:after { font-family: FontAwesome; content: '\f138'; margin-left: 5px; }
#home-news-alerts a:hover .news-item__title,
#home-news-alerts .btn-text:hover { color: var(--clr-link-hover); }


/* Events ************************************** *//* General Event Styles */
.event:not(.event--card) { border-bottom: 1px solid #DCDCDC; padding-bottom: 2rem;}
.event.event--card { border-radius: .6rem; background: #fff; border: 1px solid var(--clr-gray-150); box-shadow: 0 4px 8px rgb(0 0 0 / 15%); display: flex; flex-direction: column; overflow: hidden; position: relative; width: 100%; }
.event.event--card > div { display: flex; padding: 2rem; }
.event.event--card .event__image { height: 170px; padding: 0; background-color: #6e6f66; }
.event.event--card .event__image img { object-fit: cover; width: 100%; }
.event.event--card .event__image img[src$=".svg"] { width: 225px; margin: auto; }
.event.event--card .event__details { background-color: var(--clr-corp-brand-dk-burgundy); border-bottom: 4px solid #DC8538; color: #FFFFFF; }
.event:not(.event--card) .event__details { display: flex; }
.event .event__details--time { font-family: 'Roboto Condensed'; }
.event .event__time { display: flex; }
.event__details > div { align-items: center; display: flex; flex: 0 0 50%; flex-wrap: wrap;}
.event .event__details svg { color: #DC8538; position: absolute; width: 2rem;}
.event .event__date, .event .event__time, .event .event__details--location { padding-left: 3rem; }
.event:not(.event--card) .event__date > * { display: inline-block; }
.event__date--start::after { content: ' - '; }
.event__date--start:empty:after { content: ''; }
.event__date--year { margin-left: -3px; }
.event__date--year::before { content: ' , '; }
.event__date--year:empty:before { content: ''; }
.event__time--start { margin-right: .5rem;}
.event__time--start::after { content: ' - '; position: absolute;}
.event__time--start:empty:after { content: ''; }
.event__type { font-family: 'Roboto Condensed'; margin-bottom: 1rem; }
.event__title { color: #43443F; font-family: 'Roboto Condensed', Calibri, Arial, Helvetica, sans-serif; font-size: 1.125em; line-height: 1.11111111; font-weight: 700; }
.event.event--card .event__body { flex: 1 1 auto; flex-direction: column; }

@media screen and (min-width: 56.25em) {
    .event.event--card .event__date--end, .event.event--card .event__date--start, .event.event--card .event__date--year { font-size: 1.1em; }
    .event__title { font-size: 1.47em; line-height: 1.22222222; }
}
@media screen and (max-width: 56.24em) {
    .event .event__details { flex-direction: column; }
}

@media screen and (min-width: 661px) {
	.event.event--card .event__details { min-height: 116px; }
}
@media only screen and (min-width: 644px) {
    .event .event__time {
        width: 100%;
    }
}
/* NAVIGATION */
.section__events-nav li a { color: white; }
.section__events-nav li a:hover, a.static-link:hover, .section__events-nav li a:focus  { background: #8B1E41; }
.section__events-nav li.active a { background: #f3f3f2; color: var(--clr-corp-brand-dk-burgundy); }
.section__events-nav .navbar .contentRecommendationWidget { position: absolute; right: 15px; top: 0; }
.section__events-nav .static-link { color: white; display: block; height: 50px; padding: 12px; }
.section__events-nav .static-link .svg-inline--fa { color: #DC8538; }
.section__events-nav .navbar-header { height: 50px; }
.section__events-nav .navbar-static-top { border: 0; }
.section__events-nav .navbar-label { display: none; }
.section__events-nav .navbar-toggle-switch:after { content: '\f106'; font-family: FontAwesome; }
.section__events-nav .navbar-toggle-switch.collapsed:after { content: "\f107"; }

@media screen and (min-width: 768px) {
    .section__events-nav .nav.navbar-nav{ padding-right: 80px; }
    .section__events-nav .navbar-toggle-switch { display: none; }
    .section__events-nav .navbar-label { border-right: 1px solid #E7E7E7; color: white; display: inline-block; margin-right: 20px; padding-right: 20px; position: relative; top: 11px;}
}
@media only screen and (max-width: 750px) {
    .section__events-nav .navbar-toggle-switch {
        color: white;
        font-weight: 400;
        text-transform: capitalize;
    }
    .section__events-nav .navbar-toggle-switch:hover {
        color: white;
    }
    .section__events-nav .navbar-toggle-switch:focus {
        color: white;
        text-decoration: none;
    }
}
/* HOME PAGE and SERVICES PAGE EVENTS */
#home-events { padding: 20px; }
#home-events h2 { font-size:24px; text-transform: uppercase; border-bottom:#69142E 2px solid; display: inline-block; }
#home-events > div:nth-child(4), #services-events > div:nth-child(4) { border-bottom: none; }
#home-events .event__details > .event__details--time { flex: 0 0 46%; }
#services-events { padding: 20px 0; }
#services-events .event__details > .event__details--time { flex: 0 0 25%; }

@media screen and (max-width: 600px) {
  #relatedSolutions__display > .content > .relatedSolutions__title { width: 80% !important; }
}
@media screen and (max-width: 950px) {
    .home .row.margin-true div.contentRecommendationWidget { width: 50%; padding: 1rem; }
 }
 @media screen and (max-width: 550px) {
    .home .row.margin-true div.contentRecommendationWidget { width: 100%; padding: 1rem; }
}

/* Shop */
.JJKCategoryNavWidget { margin: 0 !important; }
.category__list > div { display: flex; flex-direction: row; flex-wrap: wrap; padding: 0; }
.category__list .category__item { margin: 1.25rem; text-align: center; transition: initial; width: calc(100% / 4 - 2.5rem); }
.category__list .category__item .category__name h2 { font-size: 18px; }
@media screen and (max-width: 991px) {
    .category__list .category__item { width: calc(100% / 3 - 2.5rem); }
}
@media screen and (max-width: 700px) {
    .category__list .category__item { width: calc(100% / 2 - 2.5rem); }
}
@media screen and (max-width: 500px) {
    .category__list .category__item { margin: .5rem; text-align: left; width: 100%; }
    .category__list .category__item .card-block a { display: flex; align-items: center; padding-right: 2.5rem; }
    .category__list .category__item .card-block a:after { content: "\f054"; display: inline-block; float: right; font-family: FontAwesome; position: absolute; right: 8px; font-size: 2rem; color: #5E5E5E; }
    .category__list .category__item .category__image { display: inline-block !important; }
    .category__list .category__item .category__image img { margin: 0 10px 0 0; max-width: 68px; }
    .category__list .category__item .category__name a { display: block; }
}

table#articles .teaser { font-style: italic; padding: 5px 10px 7px 0; }
.product_option a.button.primary { font-size: 12px; line-height: normal; width:100%; min-width: 100%; margin: 0; }

/* News Articles */
.news-article .teaser { font-size: 20px; margin-bottom: 10px; }

/* Articles */
table#articles thead th { background: #6e6f66; color: #FFF;  }

@media (max-width: 767px){
  #home-events .event-item,
  #event-list  .event-item { padding: 0 0 20px 0; }
}

/* LeadGen Styles */
#leadGenFormDiv { display: flex !important; flex-direction: row; flex-wrap: wrap; }
.leadgen-nonpdp #leadGenFormDiv > * { padding: 2rem; position: relative; width: 50%; } /* nonpdp leadgen style only */
#leadGenForm .form-inline { display: flex; flex-direction: row; flex-wrap: wrap; }
#leadGenForm .form-inline .form-group { flex: 1 1 auto; margin: 0 .5rem .75rem; }
#leadGenForm .form-inline .form-group.mi { flex: 0 0 auto; }
#leadGenForm .form-inline .form-group input { width: 100%; }
#leadGenForm .form-inline .form-group:last-child,
#leadGenForm .form-inline .form-group.fax { margin-right: 0; }
#leadGenForm .form-inline .form-group:first-child { margin-left: 0; }
#leadGenForm .form-inline .help-block { flex: 0 0 100%; margin: -.5rem 0 .75rem; }

#leadGenDiv.submitted { text-align : center; }
#leadGenDiv.submitted #leadGenFormDiv > div,
#leadGenDiv.submitted #leadGenFormDiv > form { float:none; width:100%; padding: 0; }
#leadGenDiv.submitted .leadgen-nonpdp-ni > *:not(h1) { display: none; }
#leadGenDiv.submitted #videoContentDiv { font-size: 2rem; margin: 2rem; }
#leadGenDiv.submitted a[href*=".pdf"] { display : block; margin : auto; width : 400px; }
#leadGenDiv.submitted a[href*=".pdf"]:before { content: '\f1c1'; display: block; font-family: 'FontAwesome'; font-size: 12rem; font-style: normal; font-weight: 400!important; margin: auto; }
.product-buyable #leadGenDiv.submitted { height: auto; } /* For PDP Video Previews */

@media only screen and (max-width : 767px) {
    #leadGenFormDiv { flex-direction: column; }
    .leadgen-nonpdp #leadGenFormDiv > * { width: 100%; }
}

/* Services PDP Styles */
.product-services .leadgen__form .form-inline label { display: block; }
/* Services LeadGen Full Width Styles - TEMP location */
.product-services .leadgen__form { background-color: #F8F6ED; border: 1px solid var(--clr-gray-150); padding: 2rem; }
.product-services .leadgen__form.leadgen__form--short { margin-bottom: 2rem; }
.product-services .leadgen__form.leadgen__form--long { border: none; }
.product-services .leadgen__form.leadgen__form--long .section__content { max-width: 95vw; margin: auto; }
.product-services .leadgen__form.leadgen__form--long .section__content header { text-align: center; }
.product-services .leadgen__form.leadgen__form--long { background-size: cover; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
@media screen and (min-width: 767px) {
    .product-services .leadgen__form.leadgen__form--long .section__content { max-width: 50vw; }
}

/* Services Form Top Page Styles */
/* Slot ID Style Overrides target the for-top layout only, as changing the HomePageContainer will affect the other Services layout */
.product-services.has-form-top .col-sm-8[data-slot-id="4"] { width: 58.33333333%; }
.product-services.has-form-top .col-sm-4[data-slot-id="5"] { width: 41.66666667%; }
.product-services.has-form-top div#widget_breadcrumb { border-bottom: 1px solid var(--clr-gray-150); }
.product-services.has-form-top h1,
.product-services.has-form-top .product_text { text-align: center; }
.product-services .product_text p .product_text-link { display: none; }
.product-services #pr-reviewsnippet { margin: 2rem 0; width: 100%; }
.product-services.has-form-top .p-w-r .pr-snippet-stars-reco-inline .pr-snippet-stars-reco-stars { float: none; text-align: center; }
.product-services.has-form-top .widget_product_image_viewer .image_container > img { max-width: none; }
.product-services.has-form-top .widget_product_image_viewer { padding: 0; }
.product-services.has-form-top .leadgen__form .form-inline.phone-fax .phone { display: block; }
.product-services.has-form-top .leadgen__form .form-inline.phone-fax .phone input { width: 100%; }
@media screen and (max-width: 767px) {
    .product-services.has-form-top .col-sm-8[data-slot-id="4"],
    .product-services.has-form-top .col-sm-4[data-slot-id="5"] { width: 100%; }
}


/* Search Banner Styles */
/*
div[id*="contentRecommendationWidget"].carousel { overflow: hidden; }
#contentRecommendationWidget_5_-2012_3081.carousel #ci_espot_3081_ES_SearchResult_Top1 .product { padding: 0; width: 140px; }
*/

/* Product Page */
/* Image Viewer Widget Styles */
.widget_product_image_viewer { margin: 0 !important; padding: 15px; position: relative; width: 100%; }
.widget_product_image_viewer .image_container { width: 100%; position: relative; text-align: center; }
.widget_product_image_viewer .image_container > img { width: 100%; max-width: 360px; /* Needed for the legacy product images. */ margin: 0 auto 20px; }
.widget_product_image_viewer .other_views { position: relative; }
.widget_product_image_viewer .other_views > ul { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; margin: 0; padding: 0; list-style: none; }
.widget_product_image_viewer .other_views > ul > li { border-radius: 0.5rem; width: 52px; height: 52px; text-align: center; border: 1px solid #ACAEA6; margin: 2px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.widget_product_image_viewer .other_views > ul > li.selected,
.widget_product_image_viewer .other_views > ul > li:hover { border: 1px solid #FCC700; box-shadow: 0 0 8px rgba(255,196,37,.8); }
.widget_product_image_viewer .other_views > ul > li a { font-size: 12px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.widget_product_image_viewer .other_views > ul > li .altgallery-media:before,
.widget_product_image_viewer .other_views > ul > li .altgallery-document:before,
.widget_product_image_viewer .other_views > ul > li .altgallery-pdf:before { font-family: 'FontAwesome'; width: 35px; height: 26px; font-size: 26px; display: block; text-align: center; line-height: 1; }
.widget_product_image_viewer .other_views > ul > li .altgallery-media:before { content: '\f144'; }
.widget_product_image_viewer .other_views > ul > li .altgallery-pdf:before { content: '\f1c1'; font-size: 22px; height: 22px; }
.widget_product_image_viewer .other_views > ul > li .altgallery-document:before { content: '\f016'; font-size: 22px; height: 22px; }
.widget_product_image_viewer .product_attrs,
.product_image .product_attrs { position: absolute; top: 0; z-index: 99; }

.product-previews { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; list-style: none; padding: 0; }
.product-previews li { margin: 5px; }
@media screen and (max-width: 600px) {
	.product-previews li:first-child { display: none; }
}

#product-display-body #leadGenFormDiv > form { width: 100%; }

/* Product page - Pseudo-tab Styles */
#product .tabButtonContainer,
#product [id^="tab"][id$="Widget"] { border: none !important; }
#product .tab_header { border-top: 1px solid var(--clr-gray-150); border-bottom: 1px solid var(--clr-gray-150); display: flex; align-items: center; flex-wrap: wrap; }
#product .tab_header.tab_header_double > a { font-family: 'Roboto Condensed', Calibri, Arial, Helvetica, sans-serif; letter-spacing: .03rem; text-transform: uppercase; margin: 0 2rem; padding: 1rem 0; display: inline-block; }

/* Digital Fullfillment Styles */
#digital-fulfill-content { display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 300px; }

#digital-fulfill-content .alert-box { border: none; border-radius: 0; margin-bottom: 0; padding: 30px; text-align: center; width: 100%; }
#digital-fulfill-content .alert-box h2 { color: #52534D; margin: 0 0 5px; }
#digital-fulfill-content .alert-box.simple { color: #52534D; }

#digital-fulfill-content.tod #main-content { width: 100%; }
#digital-fulfill-content.tod #main-content .title { text-align: center; background: #151b17; color: #FFFFFF; padding: 15px; margin: 0; }
#digital-fulfill-content #assets { margin: 0 auto 30px; width: 68%; }
#digital-fulfill-content #assets .link { margin: 0 0 10px 0; }
#digital-fulfill-content #assets .link a:before { color: #6E6F66; font-family: 'FontAwesome'; margin-right: 5px; }
#digital-fulfill-content #assets .link a[href*=".doc"]:before,
#digital-fulfill-content #assets .link a[href*=".DOC"]:before,
#digital-fulfill-content #assets .link a[href*=".rtf"]:before,
#digital-fulfill-content #assets .link a[href*=".RTF"]:before { content: '\f0f6'; }
#digital-fulfill-content #assets .link a[href*=".ppt"]:before,
#digital-fulfill-content #assets .link a[href*=".PPT"]:before { content: '\f1c4'; }
#digital-fulfill-content #assets .link a[href*=".xls"]:before,
#digital-fulfill-content #assets .link a[href*=".XLS"]:before { content: '\f1c3'; }
#digital-fulfill-content #assets .link a[href*=".pdf"]:before,
#digital-fulfill-content #assets .link a[href*=".PDF"]:before { content: '\f1c1'; }
#digital-fulfill-content #assets .link a[href*=".png"]:before,
#digital-fulfill-content #assets .link a[href*=".PNG"]:before,
#digital-fulfill-content #assets .link a[href*=".jpg"]:before,
#digital-fulfill-content #assets .link a[href*=".JPG"]:before,
#digital-fulfill-content #assets .link a[href*=".jpeg"]:before,
#digital-fulfill-content #assets .link a[href*=".JPEG"]:before { content: '\f1c5'; }
#digital-fulfill-content #assets .link a[data-target*="modal"]:before { content: '\f16a'; }
#digital-fulfill-content #assets .link a[href*=".zip"]:before { content: '\f019'; }
@media screen and (max-width: 650px) {
    #digital-fulfill-content #assets { padding: 0 30px; width: 100%; }
}

/* Digital Fullfillment Styles - Pubs */
#digital-fulfill-content.pubs #main-content { padding: 2% 20%; }
#digital-fulfill-content.pubs #main-content .prod-image { float: left; margin: 15px 20px 20px 0; }
#digital-fulfill-content.pubs #main-content .instructions ul { margin: 0 100px 20px 203px; }
#digital-fulfill-content.pubs #main-content .instructions ul li { margin: 0 0 20px; }
@media screen and (max-width: 1200px) {
   .pubs #main-content { padding: 2% 15%; }
}
@media screen and (max-width: 900px) {
   .pubs #main-content { padding: 2% 10%; }
}
@media screen and (max-width: 750px) {
   .pubs #main-content { padding: 2% 5%; }
}
@media screen and (max-width: 650px) {
   .pubs #main-content { padding: 2%; }
}

/* Custom Signs Product Pages */
/* STYLE FOR PRODUCT SPECIFICTION  */
#specification-area,
#catEntrySignPriceGrid { overflow: auto; margin-top: 15px; }
#catEntrySignPriceGrid table.priceGrid { width: 100%; }
#catEntrySignPriceGrid table thead th { text-align: center; }

/* SIGN BACKGROUND COLOR PICKER */
#custom-bg-color #bg-color,
#custom-bg-color #TOPBGC { width: 100%; }
.pick-a-color-markup .color-menu.dropdown-menu.color-menu--inline { display: none; }
.pick-a-color-markup button.btn.btn-outline.color-dropdown { border-width: 1px; }
.pick-a-color-markup .input-group-btn span.caret { border-top: 10px solid; border-right: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid transparent; width: 0; height: 0; margin: 0 auto; color: #acaea6; }
.pick-a-color-markup .color-menu.dropdown-menu.color-menu--inline.no-hex.small { top: 64px; border-radius: 0 0 .1115rem .1115rem; border-color: #acaea6; }

/* Cart */
/*
@media (-webkit-device-pixel-ratio: 2) {
  .carousel > .prevPageButton:before {
      content: '\f104' !important;
      -webkit-transform: none;
      -webkit-transform-origin: 0 0 0;
  }
  .carousel > .nextPageButton:before {
    content: '\f105' !important;
    -webkit-transform: none;
    -webkit-transform-origin: 0 0 0;
  }
  .contentCarouselWidget > .prevPageButton:before,
  .contentCarouselWidget > .nextPageButton:before {
    -webkit-transform: scale(1);
  }
}
*/

/* Removing extra margins */
#scheduling_options .panel.panel-default { margin-bottom: 0; }
/* Fixing margins */
.row.note.secure-note { margin: 20px 0; }

/* Pulled and tweaked from jjk-legacy-styles.css */
#cart-head h1 { font-size: 26px; margin: 0; text-align: center; text-transform: uppercase; }
.cart-crumb {font-size: 18px;}
.cart-crumb ul { align-items: center; display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; }
.cart-crumb ul:after {/* border: 1px solid var(--clr-gray-150); */content: '';display: block;position: absolute;width: 100%;}
.cart-crumb ul li { background: #FFFFFF; color: #ACAEA6; padding: .5rem 2rem; text-align: center; z-index: 1001; }
.cart-crumb ul li a { color: #898b80; font-weight: normal; }
.cart-crumb ul .active { color: #8b2346; border-bottom: 6px solid #8b2346; font-weight: bold; }
.cart-crumb ul .complete { color: #427029; border-bottom: 6px solid transparent; }
.cart-crumb ul .complete:before {content: '\f00c';font-family: 'FontAwesome';display: inline-block;margin-right: .5rem;}

/* Cart Buttons */
#checkout-btn-container .button,
#checkout-btn-container input[type="button"],
#checkout-btn-container input[type="submit"] { border: 1px solid rgba(255, 255, 255, 0.7); height: auto; padding: 1.5rem; font-size:16px; }
#checkout-btn-container .button.button-cart,
#checkout-btn-container  .button.button-order { background: #E98019; text-transform: uppercase; }
#checkout-btn-container .button.button-cart:hover,
#checkout-btn-container .button.button-order:hover,
#checkout-btn-container input[type="button"]:hover,
#checkout-btn-container input[type="submit"]:hover { background-color: #FF8738; }
#checkout-btn-container .button.button-order:before { content: '\f023'; font-family: FontAwesome; margin-right: 3px; }

/* Cart Espot Ad Styles */
.genericESpot .card-cart-ad_with-image img { margin-bottom: 10px; width: 115px; }

/* Cart Modal */
.checkout .modal-body button { padding: 1.5rem; }

@media screen and (max-width: 800px){
  div.checkout #new-customer #checkout-btn-container .btn { float:left; margin: 10px 0; }
  div.checkout #new-customer .new-account-section h4 { margin: 13px 13px 10px 13px; }
}

/* Contact Us Styles */
.contact-us .main-contact-content .phone input { display: inline-block; width: 45px; }
.contact-us .main-contact-content .phone input:nth-child(n+4) { width: 55px; }
.contact-us .main-contact-content textarea { height: initial; }
.contact-us .main-contact-content .form-group.phone label { display: block; }

/* Catalog Request Styles */
#catalogSelectDiv button {margin: 10px 4px 5px;}
#catalogSelectDivLeft{float:left;font-size:12px;height:170px;padding-top:10px;width:300px;font-weight:bold;}
#displaySelectedCatDiv{font-weight: bold;font-size: 12px;padding: 10px;}
#catalogRequestMsg{padding:0 0 10px 0;}
#catalogRequestMsg h2{margin-top:0; font-size: 14px;}
#thankYouDiv{font-weight: bold; font-size:12px; padding: 10px;}
#catalogSelectDiv dl {margin: 0; }
.catalogField { font-weight: bold; }
#catalog-area #errorDiv { color: red; font-weight: bold; margin: 4px 7px;}
#catalogRequestForm #catalogRequestFormDiv { width: 24%; }
#catalog-area .step-name em { color: red; font-style: normal; }

#catalog-area #steps { font-size: 16px; font-weight: 700; height: 40px; margin: 20px 0; padding: 0; list-style-type: none; width: 100%; }
#catalog-area #steps li { float: left; width: 25%; }
#catalog-area #steps li:first-child { width: 75%; }
#catalog-area #steps li span.step { display: inline-block; float: left; margin: 0 10px 0 0; text-align: center; padding: 2px 10px; color: #FFFFFF; background-color: #8b2436; font-size: 24px; border-radius: .2rem; }

#catalogSelectDiv ul { display: flex; flex-wrap: wrap; }
#catalogSelectDivTop { margin: 0 20px 20px 0; padding: 10px; border: 1px solid #f5e8cd; background-color: #fffde9; }
#catalogSelectDivTop .twisty { position: relative; }
#catalogSelectDivTop .twisty img { position: absolute; z-index: 999; cursor: pointer; width: 18px; }
#catalogSelectDivTop .expanded,
#catalogSelectDivTop .collapsed { font-weight: 700; margin-left: 25px; font-size: 14px; }
#catalogSelectDivTop .instruction-headline { color: #0076a3; cursor: pointer; }
#catalogSelectDivTop .instruction-headline span.black { color: #252525; }
#catalogSelectDivTop .instruction { margin-top: 10px; margin-bottom: 10px; }
#catalogSelectDivTop .email { margin-top: 10px; }
#catalogSelectDivTop .instructions-thankyou { color: #8b2436; font-size: 16px; }

#catalogSelectDiv .catalog { border: 1px solid #e7e8e6; border-radius: .1115rem; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.08); width: calc(25% - 20px); display: flex; flex-wrap: wrap; text-align: center; margin: 10px; padding: 10px; border: 1px solid #eee; }
#catalogSelectDiv .catalog .image img { display: block; margin: 0 auto 10px; }
#catalogSelectDiv .catalog .image,
#catalogSelectDiv .catalog .info { width: 100%; }
#catalogSelectDiv .catalog .info .action-row { color: #0078cd; }
#catalogSelectDiv .catalog .info .action-row .request { padding: 5px; border: 1px solid #f5e8cd; background-color: #fffde9; margin-bottom: 10px; }
#catalogSelectDiv .catalog .info .action-row .view-virtual:before { color: #ACAEA6; content:"\f02d"; font-family: FontAwesome; font-size: 16px; }

#catalogRequestForm #catalogSelectMain { width: 75%; }
#catalog-area dl.form div.formline dd { position: static; padding: 0 0 2px; }
#catalog-area span.error-validate-msg { display: block; padding: 0; }

#catalogRequestFormDiv .note { font-weight: normal; color: initial; margin: 0 0 15px; }

dl.form dd select,
dl.form dd input { width: 100%; }

#catalogRequestForm > div { display: inline-block; float: left; }

@media screen and (max-width: 1000px) {
    #catalogSelectDiv .catalog { width: calc(33.3333333% - 20px); }
}
@media screen and (max-width: 768px) {
    #catalogSelectDiv .catalog { width: calc(50% - 20px); }
}
@media screen and (max-width: 600px){
    #catalogSelectMain,
    #catalogRequestFormDiv #catalogRequestFormDiv { width: 100% !important; }
}
@media screen and (max-width: 480px){
  #catalogSelectDiv .catalog { width: 100%; }
}

/* Withorder Styles */
.withorder div#free_gifts_table div.gifts_wrapper { border: none; }
.withorder #free_gifts_table .gifts_wrapper table tbody tr td img { display: block; margin: 0 auto; }
.withorder #free_gifts_table .gifts_wrapper > table > tbody > tr > td:first-child > img { display: none; }
.withorder .promo-selection { font-size: 18px; }
.withorder .footer h3 { color: #52534D; }

/* Legacy product list styles */
.prod-list li img {
    width: 100px;
    margin: 0 10px 10px;
}
@media screen and (max-width: 862px) {
  .prod-list li {
      width: 100%;
      height: auto;
      margin-bottom: 2rem;
  }
}

/* styling product name */
/* product */

.product_text .recurring .recurring_icon{
    background: none !important;
    display: none;
}

.product_text .recurring a:before{
    font-family: FontAwesome;
    color: #69142E;
    content: '\f05a';
    display: block;
    float: left;
    margin: -3px 3px 0 0;
    font-size: 16px;
}
.product_text .recurring .recurring_text,
.image_container a { color: #0078cd; }

/*tabs*/
div.tab_container, 
div.tab{
   border-left: 1px solid #cfd3c4;
   border-right: 1px solid #cfd3c4;
   margin-bottom: 1rem;
}

div.tab{
   border: 1px solid #cfd3c4;
   width: 100%;
}

div.tab_container{
  border-top: 1px solid #cfd3c4;
}

div.tab div.content{
  padding: 1rem;
}

#Pricing.content, #Specification.content {
  padding-top: 0;
  padding-bottom: 0;

}
/*demo code to be removed*/
/*will remove the border but keep the class - kp*/
div.hardcode{
  border:1px red solid;
  position: relative;
}


/*** Search bar ***/
#searchBar { border-radius: .5rem; }
#searchBar:hover { box-shadow: 0 1px 6px 0 rgba(32, 33, 36, .28); }
#searchButton { display: none; }
#searchBox { align-items: center; display: flex; position: relative; width: 100%; }
#searchTermWrapper { width: 100%; }
#searchTermWrapper > .placeholder { position: absolute; color: #bfbfbf; cursor: text; }
#searchTermWrapper > input { border-radius: 0; border-right: none; box-shadow: none; font-size: 18px; margin: 0; position: relative; }
@media screen and (max-width: 767px) {
    #searchTermWrapper { width: 100%; }
    #searchTermWrapper input { border-radius: .4rem 0 0 .4rem; }
}

#searchBox > .submitButton { display: inline-block; position: relative; vertical-align: middle; overflow: hidden; }

#searchBox .category-select { background: linear-gradient(0deg, rgba(226,226,226,1) 0%, rgba(255,255,255,1) 100%); border-radius: .5rem 0 0 .5rem; border-right: none; flex: 0 0 25%; font-weight: 400; /* width: 135px; */ } /* testing width */
#searchBox .category-select .levelallCategory,
#searchBox .category-select .level1Category { font-weight: 700; }

/* Autocomplete-AutoSuggest menu */
#searchDropdown { box-shadow: 0 1px 6px 0 rgba(32,33,36,.28); position: absolute; left: 2px; right: 2px; top: 39px; z-index: 4000; }
#AutoSuggestDiv { background-color: #FFFFFF; border: 1px solid #c9cece; }
#AutoSuggestDiv > ul,
.autoSuggestDivNestedList { list-style: none; margin: 0; padding: 0; }
#AutoSuggestDiv > ul > li { margin: 0; padding: 0; }
#AutoSuggestDiv #autoSuggestAdvancedSearch > a { padding: 15px; display: block; height: 100%; }
#AutoSuggestDiv .heading { text-transform: uppercase; padding: 5px; list-style: none; background-color: #6E6F66; color: #FFFFFF; font-size: 1.6rem; }
#AutoSuggestDiv #autoSuggestAdvancedSearch { border-bottom: 0 none; background-color: #fff; color: #b54200; padding: 0; }
#AutoSuggestDiv #autoSuggestAdvancedSearch:hover { background-color: #d9e9f7; }
#AutoSuggestDiv #autoSuggestAdvancedSearch > a:hover { text-decoration: underline; }
#autoSuggest_Result_div,
#autoSuggestCachedSuggestions_div { display: none; }

/* Autocomplete jquery migration */
ul.ui-autocomplete { z-index: 1000; width: 170px; font-size: 12px; }

#suggestedProductsResults .as_thumbnail { display: inline-block; margin-right: 10px; padding: 0; float: left; }
#suggestedProductsResults .as_thumbnail img { width: 50px; max-width: 50px; }
#suggestedProductsResults .partNumber { color: #737373; font-size: 12px; line-height: 140%; }

ul div.list_section li:hover { background-color: #F8F3E0; }
#AutoSuggestDiv .list_section li { border-bottom: 1px solid #F3F3F2; transition: all .3s ease; }
#AutoSuggestDiv .list_section li > a { display: flex; font-size: 16px; height: 100%; padding: 1rem; flex-direction: row; align-items: center; }

/*search box submit button*/
#searchBar .submitButton { align-items: center; background: #FFFFFF; border: 1px solid #acaea6; border-left: none; border-radius: 0 .5rem .5rem 0; box-shadow: none; display: flex; height: 4rem; font-size: 23px; justify-content: center; width: 65px; }
#searchBar .submitButton span.fa.fa-search { z-index: 1; }
.autoSuggestSelected { background-color: #FEFBEE; }

/***search box styling***/
.options_dropdown select{ background-color: #f6f5f3; background-position: right center; background-repeat: no-repeat; border-color: #b7b6b2 #e2e3de #e2e3de #b6b6b2; border-style: solid; border-width: 1px; cursor: pointer; font-weight: bold; height: 1.8rem; padding: 5px 21px 0 5px; white-space: nowrap; }

#prod-price>#price-area{
  float: none;
  overflow: auto;
    border: 0;
}

div.email-sign-up-copy,
div.social-container{ margin-top: 2rem; }

/** advance search dropdown hidden***/
ul > li#autoSuggestAdvancedSearch{ display: none; }
#searchBox > .submitButton::before { content: none; }

/* Product Services Page Styles */
.headerImage { margin: 0 0 1.5rem !important; position: relative; text-align: center; }
.headerImage img { width: 100%; }
.headerImageName { margin: 2rem; }
.headerImageName *:first-child { margin-top: 0; }
.headerImageName *:last-child { margin-bottom: 0; }
.headerImageDesc { background: #52534D none repeat scroll 0 0; color: #FFFFFF; font-weight: 900; padding: 1.5rem; text-align: center; font-size: 16px; -webkit-font-smoothing: antialiased; font-family: 'Roboto Condensed', 'Open Sans', Arial, Helvetica, sans-serif; }
.headerImageLinks ul { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; margin: 0;  border-bottom: 1px solid var(--clr-gray-150); padding: 1.5rem; }
.headerImageLinks ul li { display: flex; text-align: left; margin: 0 10px; }
.headerImageLinks ul li:before{ content: '•'; margin: 0 4px 0 0; display: inline-block; }
#product [id^="product_longdescription"] p:first-of-type { color: #52534d; margin-bottom: 22px; line-height: 1.45; }

#product #updateService.tab { border: none; }

@media (min-width: 43.75em) {
    .headerImageDesc { font-size: 18px; }
    #product [id^=product_longdescription] p:first-of-type { font-size: 18px; line-height: 1.5; }
}
@media (min-width: 56.25em) {
    .headerImageDesc { font-size: 22px; }
    #product [id^=product_longdescription] p:first-of-type { font-size: 20px; line-height: 1.6; }
}

/****override legacy for dialog widget****/
.closeText {
    float: right;
    margin-right: 1rem;
}

/** custom header style fix**/
.form-group.column div.input-group{
  width: 100%;
}

div.input-group-btn span.caret{
  display: block;
    height: 16px;
    margin: 5px auto;
    padding-bottom: 10px;
    vertical-align: middle;
    border-top: 0;
    width: 100%;
}

/** login page fixes**/
.login .remember { display: inline-block; }
.remember input[type="checkbox"] { float: left; display: inline-block; margin-right: 3px; }
.formline .forgot { float: right; display: inline-block; }
#logon-feature-payment h3,
#logon-feature-email label { display: block; }
.login .checkbox.remember-me { display: inline-block; margin-bottom: 1em; }

.logonPassword-utilities { display: flex; justify-content: space-between; margin-bottom: 1rem; padding: 1rem 0; }
.logonPassword-utilities > div { margin: 0 0 1rem; }
@media screen and (min-width: 768px) and (max-width: 1150px) {
    .logonPassword-utilities { flex-direction: column; }
}
@media screen and (max-width: 580px) {
    .logonPassword-utilities { flex-direction: column; }
}

.logonPassword-utilities.logonform { display: flex; flex-direction: column; justify-content: space-between; margin-bottom: 1rem; padding: 0 0 1rem; }

.section__body .row .centered { float: none; margin: 0 auto; }

div.col-md-6 > #new-account { padding: 0 40px; }
#logon-feature-email #emailDiv { width: 75%; display: flex; flex-flow: row; align-items: center; }

@media screen and (max-width: 767px){
  div.login #existing-account,
  div.login #new-account,
  div.login #logon-feature-payment,
  div.login #logon-feature-email {
    padding: 0;
    border: none;
    margin-bottom: 2rem;
  }
  #logon-feature-payment,
  div.login #logon-feature-email {
    min-height: 5em;
  }
  div.login .remember,
  div.login #label-rememberMe,
  div.login #rememberMe_In_Logon_1{
    float:left;
    width: auto;
  }
  div.login .remember {
    margin-bottom: 0.8rem;
  }
  div.login #rememberMe_In_Logon_1 {
    margin: 0.2rem 0.5rem;
  }
  div.login .forgot {
    clear: both;
  }

  div.login #new-account {
    min-height: auto;
  }

.checkout.payment-review div.col-xs-12,
.checkout.order-complete div.col-xs-12 {
    width: 100%;
    margin: 0;
    padding-bottom: 15px;
  }

  .checkout.payment-review .order-summary,
  .checkout.payment-review .order-summary #order-review {
    margin:0;
  }

  #shipping-area .address-spot.shipping {
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    padding: 15px 0;
  }
}

@media screen and (max-width: 479px){
 .checkout.payment-review #payment-form-area #credit-card .cc-icons {
   float:none;
   position: static;
 }
 .payment-review #payment-form-area .form div.cc-name,
 .payment-review #payment-form-area .form div.cc-number,
 .payment-review #payment-form-area .form div.cc-gl {
  width: 100%;
  padding-top: 10px;
  padding-right: 19px;
 }
 .payment-review #payment-form-area .form div.cc-name input,
 .payment-review #payment-form-area .form div.cc-number input,
 .payment-review #payment-form-area .form div.cc-gl input,
 .payment-review #payment-form-area .po input {
  width: 100%;
 }
}

/* Should cover cart, order summary and order confirmation */
.is-discounted .item-price--original { text-decoration: line-through; }
.is-discounted .item-price--discount { color: #d00d00; font-weight: 700; margin-left: .75rem; }

/* Not sure if this is being used. Had to include this, because the bullet point from IBM's style was blocking the file from being minified. Changed the bullet to use the dot from FontAwesome. */
.loginPanelStates input[type="radio"]:checked + label:before { content: "\f111"; font-family: 'FontAwesome'; }

/**************** SHOPPING CART CUSTOM STYLES ***********************/

input#recurringOrder {
    display: inline-block;
}

.margin_below {
  margin-bottom: 50px;
}

#container .myaccount_header {
  background-color: transparent;
  border-right:0;
  border-top:0;
  border-bottom:0;
  color: inherit;
  font-size: inherit;
  border-left: 9px solid #898b80;
    margin: 0 0 10px -15px;
    padding: 0 0 0 8px;
}

#container .myaccount_header .main_header_text {
    color: #898b80;
    font-size: 26px;
    font-weight: normal;
    margin: 0 0 15px 0;
}

#container #ScheduleOrderStartDate_inputField .dijitTextBox {
  width:100%;
  display:block;
}

#container .myaccount_subheader,.checkout_subheader {
  background: none repeat scroll 0 0 #FBFBFB;
  border: 1px solid #E5E5E5;
  /* min-height: 33px; */
  margin: 0 auto;
  padding: 5px 8px;
}

#container #ScheduleOrderStartDate_inputField .dijitInputInner {
   margin-left: 5px !important;
}

#container .drop_down_shipping,
#container .drop_down_billing,
#container .drop_down_address_book {
  height:32px;
}

#container #ScheduleOrderStartDate_inputField .dijitInputInner {
box-shadow: 0 0 0;
    margin-left: 4px !important;
}

#container #ScheduleOrderStartDate_inputField .dijitArrowButtonInner {
  border:0;
    box-shadow: 0 0 0;
    margin-top:3px;
}

#container #scheduleOrderInputSection .scheduleOrderAreaNextDelivery {
  width: 100%;
}

#container #scheduleOrderInputSection .scheduleOrderAreaStartDate {
  width: 100%;
  padding: 10px 0 5px 0px;
}

#container #scheduleOrderInputSection .scheduleOrderAreaInterval {
  padding: 10px 0px;
    width: 100%;
    min-width: 100%;
}

div#widget_subscription_item_popup {
    border: 1px grey solid;
    border-radius: 3px;
    background: #fff;
}


#widget_subscription_item_popup .dijitDialogTitleBar {
background-color: #F5F6F7;
    border-bottom: 1px solid #EDEFF0;
    height: 38px;
    line-height: 40px;
    padding-left: 10px;
    padding-right: 12px;
    text-align:left;
    position:relative;
   }

#widget_subscription_item_popup  .closeText {
  margin-right:2px;
}

div#item-totals td {
  /*font-size:1.2em;*/
  padding: 3px 0px;
  text-align: right;
}

#item-totals td:first-child {
  text-align: left;
}

div#item-totals {
    margin: 0;
}

.widget_ScheduleOrderStartDateDisabled {
  opacity:0.5;
  cursor: not-allowed;
}

/* INDUSTRIES WIDGET THUMBNAIL STYLE */

.product_image_box{
  width:100%;
  overflow:hidden;
}

.catPos {
    width: 94%;
    margin: 0 auto;
    /*background: #e9e9e9;*/
    /*border: 1px solid #cccbcb;*/
    background:transparent;
    border:0;
    overflow: hidden;
    position: relative;
    border-radius: 4px;
}

.catPos > .titleContainer {
    width: 100%;
    min-width: 0;
    padding: 0;
    /*background: #f8f8f8;*/
    background:transparent;
    text-align: center;
    line-height: 18px;
    margin-top:12px;
}

.titleContainer .product_group_name {
    font-size: 1em;
}

/* ORDER details TABS */
div#mainTabContainer {
    border: 1px solid #e5e5e5;
    margin: 0px 15px 10px 15px;
    padding: 7px;
    overflow: hidden;
}

#box .tab_container_base {
  height:0;
  clear: both;
}
.tab_container_top .tab_active_middle {
    height: 38px;
    background-image: none;
    line-height: 38px;


    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    border-top: 1px solid #e5e5e5;
    font-weight:normal;

    border-bottom: 1px solid #fff;
    position: relative;
    top: 1px;
}

.tab_container_top .tab_inactive_middle {
    height: 38px;
    background-image: none;
    line-height: 38px;

    background:#ededed;
    border: 1px solid #e5e5e5;
    font-weight:normal;
    position: relative;
    top: 1px;
}

.tab_container_top .tab_inactive_middle a,
.tab_container_top .tab_active_middle a {
   font-weight:normal;
}
#box .tab_container_top .tab_inactive_active,
#box .tab_container_top .tab_active_inactive {
    width: 5px;
    background-image: none;
}

#box .my_account div#mainTabContainer .body {
    border-left: 0px;
    border-right: 0px;
    border-bottom: 0px;
}

#mainTabContainer h2.decoration {
    border-left: 9px solid #898b80;
    margin-left: -15px;
    padding-left: 8px;
}

#mainTabContainer h2 {
    color: #898b80;
    font-size: 26px;
    font-weight: normal;
    margin: 0 0 15px 0;
}

/***********************custom header sign ********************************************/
.pager span { border: 1px solid #CCCCCC; border-radius: 5px; display: inline-block; height: 40px; margin: 0 2px; width: 40px; }
.pager span.page-number.active { background-color: #015EA1; border: 1px solid #015EA1;  color: #FFFFFF; }
.pager span.page-number:focus { outline: 2px dotted red; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }

/* Search highlight */
hightlight {
    font-weight: bolder;
}

/*  Video Preview Modal */
#product-display-body #videoPopup { margin: 0; }
#videoPopup #videoPreview #leadGenDiv { max-width: 100%; margin: 0; min-height: 100%; padding: 0; } /* Overrides the global lead gen styles, as these are not neccessary within the modal. */
#rawVideoLink { padding: 15px; text-align: center; }
#videoPopup #video-modal-footer #rawVideoLink { padding: 0; }

/* Pagination fix */
.view_controls .grid_icon, .view_controls .list_icon {
  width: 38px;
  height: 40px;
}

.view_controls a.grid_icon:before {
  left: -31px;
}
.view_controls div.grid_icon:before, a.grid_icon:hover:before {
  left: -51px;
}
.view_controls a.list_icon:before {
  left: -71px;
}
.view_controls div.list_icon:before, a.list_icon:hover:before {
  left: -92px;
}

.selectWrapper { background-color: #fff; border: 1px solid #acaea6; height: 40px; }
.selectWrapper table tbody { background-color: inherit; }

.sorting_controls .selectWrapper table.dijitInline {
  display: inline-block;
  margin-top: 7px;
    width:24px;
}

.sorting_controls .selectWrapper table.orderBySelect td:first-child {
  width: 11rem;
}

@media screen and (max-width: 1280px) {
   .sorting_controls .selectWrapper {
    width: inherit;
  }
  #orderByDropdown .dijitSelect .dijitButtonText, .orderByDropdown .dijitSelect .dijitButtonText {
    display: inline-block;
  }
  .sorting_controls .selectWrapper table.orderBySelect td:first-child {
    width: 0;
  }
}

@media screen and (max-width: 600px) {
  .sorting_controls > span.page_size_label {
    width: auto;
  }
}
/* End of Pagination fix */

/* Modal fix */
.main-modal { background-color: white; }
.main-modal .modal-header { height: 3rem; background-color: #F6F5F3; }

/* smarty streets */
.smarty-ui { top: 30px; position: absolute; right: 80px; z-index: 999999; }
.invalid-addr-popup { position: absolute; display: none; z-index: 9999; background: #fff; padding: 2rem; }
.invalid-addr-popup .cta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; }
.invalid-addr-popup #typedAddress { display: block; color: #292a26; }
.smarty-tag { display: block; position: absolute; text-decoration: none; -webkit-transition: all .25s; -o-transition: all .25s; transition: all .25s; width: 90px; }
.smarty-tag-green { color: #427029; }

.product_listing_container .product .rating {
  line-height: 16px;
  font-size: 12px;
  clear: both;
}
.compare_target_hidden {
  display: none;
}

/* Home page carousel */
#hero-spot { border-bottom: 6px solid #6E6F66; width: 100%; margin-left: auto; margin-right:auto; }
#switch-it { overflow: hidden; margin: 0; z-index: 1; background-color:#fff; width: 100%; }
#hero-spot #switch-it .slide { background: #787878; }
#hero-spot #switch-it .cycle-slide {width:100%;}
#hero-spot #switch-it .cycle-slide img {width:100%; height: auto;}
#hero-spot #switch-it .slide .span1 { width: 8.33333333%; }
#hero-spot #switch-it .slide .span2 { width: 16.66666667%; }
#hero-spot #switch-it .slide .span3 { width: 25%; }
#hero-spot #switch-it .slide .span4 { width: 33.33333333%; }
#hero-spot #switch-it .slide .span5 { width: 41.66666667%; }
#hero-spot #switch-it .slide .span6 { width: 50%; }
#hero-spot #switch-it .slide .span7 { width: 58.33333333%; }
#hero-spot #switch-it .slide .span8 { width: 66.66666667%; }
#hero-spot #switch-it .slide .span9 { width: 75%; }
#hero-spot #switch-it .slide .span10 { width: 83.33333333%; }
#hero-spot #switch-it .slide .span11 { width: 91.66666667%; }
#hero-spot #switch-it .slide .span12 { width: 100%; }
#hero-spot #switch-it .slide img { position: relative; display: block; }
#hero-spot #switch-it .content { color: #252525; font-size: 15px; padding: 18px; position: absolute; overflow: hidden; }
#hero-spot #switch-it .content.content-tl { top: 4%; left: 0; }
#hero-spot #switch-it .content.content-tr { top: 4%; right: 0; }
#hero-spot #switch-it .content.content-bl { bottom: 4%; left: 0; }
#hero-spot #switch-it .content.content-br { bottom: 4%; right: 0; }
#hero-spot #switch-it .content.content-gray-1 { background: #E4E4E4; background: rgba(228, 228, 228, 0.8); }
#hero-spot #switch-it .content.content-gray-2 { background: #AEAEAE; background: rgba(174, 174, 174, 0.8); color: #FFFFFF; }
#hero-spot #switch-it .content.content-gray-3 { background: #787878; background: rgba(120, 120, 120, 0.8); color: #FFFFFF; }
#hero-spot #switch-it .content.content-gray-4 { background: #545454; background: rgba(84, 84, 84, 0.8); color: #FFFFFF; }
#hero-spot #switch-it .content.content-gray-5 { background: #181818; background: rgba(24, 24, 24, 0.8); color: #FFFFFF; }
#hero-spot #switch-it .content.content-knockout { color: #FFFFFF; text-shadow: 0 0 6px #000000; }
#hero-spot #switch-it .headline { font-size: 22px; line-height: 1.4; margin-bottom: 15px; }
#hero-spot #switch-it .headline.w-subhead { margin-bottom: 0; }
#hero-spot #switch-it .subhead { font-size: 18px; margin-bottom: 15px; }
#hero-spot #switch-it .description { line-height: 1.428; margin-bottom: 15px; }
#hero-spot #switch-it .cta { font-size: 18px; }
#hero-spot #switch-it a:hover { text-decoration: none; }
#hero-spot #switch-it .headline a,
#hero-spot #switch-it .headline.w-subhead a,
#hero-spot #switch-it .subhead a,
#hero-spot #switch-it .description a { color: inherit !important; }
.cycle-pager { position: absolute; bottom: 0; z-index: 2000; text-align: center; margin: 5px auto; width: 100%; }
.cycle-pager span {font-size: 55px;width: 20px;height: 20px;display: inline-block;color: #FFFFFF;cursor: pointer;margin: 0 10px;line-height: .45;opacity: .6;background: #FFFFFF;border: 2px solid #373833;text-indent: -9999px;overflow: hidden;border-radius: 50%;}
.cycle-pager .cycle-pager-active { color: #FFFFFF; opacity: .9; }

#hero-spot #switch-it .genericESpot img { width: 100%; max-width: 1281px; }

/* My Account */
.my-account--hub > * { margin: auto; max-width: 1600px; }
.my-account--hub #espot-area { display: flex; flex-wrap: wrap; justify-content: center; margin: 40px auto; }
.my-account--hub #espot-area .horiz-spot { height: inherit; margin: 1rem !important; }
.my-account--hub #espot-area .horiz-spot .genericESpot { width: 300px; }
.my-account--hub #espot-area .horiz-spot .genericESpot a img { display: block; margin: 0 auto; max-width: 100%; }
.my-account--hub > section .card { max-width: initial; }

/* My Account: My Address Book */
#deleteAddressBackground { display: none; } /* Needed until we can fully move this to Bootstrap's modal */
#deleteAddressOK .close-area { font-size: 3rem; line-height: 1; right: 10px; position: absolute; top: 4px; } /* Needed until we can fully move this to Bootstrap's modal */

/* My Account: My Orders */
.my-orders .dataTables_paginate { text-align: center; margin: 30px auto; /* width: 340px; */ height: 40px; }
.my-orders .orderHead { float: left; width: 65%; }
.my-orders .dataTables_paginate span a,
.my-orders .dataTables_paginate .first,
.my-orders .dataTables_paginate .previous,
.my-orders .dataTables_paginate .next,
.my-orders .dataTables_paginate .last { border-radius: 2px; cursor: pointer; display: inline-block; margin-left: 6px; padding: 9px 15px; font-size: 16px; line-height: 1.42857143; transition: all ease 0.5s; background-color: #fff; }
.my-orders .dataTables_paginate .first,
.my-orders .dataTables_paginate .previous,
.my-orders .dataTables_paginate .next,
.my-orders .dataTables_paginate .last { cursor: pointer; padding: 0 15px; position: relative; top: 5px; }
.my-orders .dataTables_paginate > span { display: inline-block; height: 40px; }
.my-orders .dataTables_paginate span a { border: 1px solid #ddd; }
.my-orders .dataTables_paginate .first:before,
.my-orders .dataTables_paginate .previous:before,
.my-orders .dataTables_paginate .next:before,
.my-orders .dataTables_paginate .last:before { font-family: FontAwesome; font-size: 30px; }
.my-orders .dataTables_paginate .first:before { content:"\f100"; }
.my-orders .dataTables_paginate .previous:before { content:"\f104"; }
.my-orders .dataTables_paginate .next:before { content:"\f105"; }
.my-orders .dataTables_paginate .last:before { content:"\f101"; }
.my-orders .dataTables_paginate span .paginate_button.current { background-color: #0076a3; color: #fff; }
.my-orders .dataTables_paginate span a:hover { background: #0076a3; color: #fff; }
.my-orders .dataTables_paginate span .paginate_active { background: #0076a3; background-clip: padding-box; color: #fff; }

.cart #espot-area .horiz-spot { padding: 5px 0; float: none; margin: 0; }

table.order_status_table td,
table.scheduled_orders td {
border:0px;
padding: 10px;
}

.order-status-display .filter-dropdown {
    max-width: 160px;   
} 

.tableDottedRow {
    border-bottom: 2px dotted #e5e5e5;
    min-height: 30px;
}

.actions_down_arrow {
    background-image: url('../images/arrow-white-corner.png');
}

.cancel_subscription_popup .header {
    background: #ededed;
}

.cancel_subscription_popup div.close {
    padding: 10px 0px;
}

.close a#closeLink_recurring_order {
  font-size:0;

}

.cancel_subscription_popup h2 {
    font-size: 1em;
    font-weight: bold;
    margin: 13px 0 0 0;
}

.cancel_subscription_popup div.bodycontent {
    padding: 0 15px 0px 15px;
}

.cancel_subscription_popup div.footer {
    height: auto;
}

.order_status_table .column_heading th{
  font-size:1em;
}

.order_status_table.scheduled_orders th.order_scheduled_column {
    width: 17%;
}
/* End of My Account fix */

/* Wish List fix */
.shopperActions a.button {
  margin: 0;
}
.shopperActions .dropdown_primary.button > .drop div:before {
    top: 4px;
}

/* begin csr support */
#container_orgUserList_detail .label {
  color: #292a26;
  display: block;
  font-size: 100%;
  padding: 0;
  text-align: left;
}

.form_2column {
    font-size: 16px;
    line-height: 1.4;
}
.form_2column .provideInfo {
    color: #5e5e5e;
    font-size: 20px;
}
.form_2column .column {
    margin-left: 0;
    margin-right: 4.4%;
}
.form_2column .column .column_label {
    font-size: 14px;
    font-weight: bold;
}
.form_2column .column .column_label .required-field {
    float: left;
}

img.hero.err-img {
  max-width: 346px;
  width: 100%;
  margin-top: 2rem;
}

@media screen and (max-width: 767px){
  .row > div.col-sm-12,
  .row > div.col-xs-12 { float: none; }
}

#item-display-container,
#order-items.order-conf-items form { overflow-x: auto; }

div.checkout #new-customer dd,
div.checkout #new-customer dd input,
div.checkout #new-customer dl.form dd.phone input,
div.checkout #new-customer form .form .formline dd select,
div.checkout #new-customer select#billCountry,
div.checkout #new-customer select#shipCountry  {
  width: 100%;
}

/* Search Results Page */
/* Note Search and Category Pages could share styles */
/* Search Filters */
.facetWidget .clearAll .close { margin-top: 0; }
.facetWidget .close { margin: 6px 3px 0 0; width: 17px; height: 20px; font-size: 17px; opacity: .4; }
.facetWidget .close:before { content: '\f057'; font-family: FontAwesome; font-size: 16px; }
#content .collapsible > h3,
.categoryNavWidget.collapsible > h3,
.linkWidget.collapsible > h3 { font-weight: bold; padding: 10px 25px; }
#content .collapsible > h3:before,
.categoryNavWidget.collapsible > h3:before,
.linkWidget.collapsible > h3:before { font-family: FontAwesome; content: '\f146'; position: initial; top: 0; left: 0; margin: 0 5px 0 -22px; }
#content .collapsible[aria-expanded="false"] > h3:before,
.categoryNavWidget.collapsible[aria-expanded="false"] > h3:before,
.linkWidget.collapsible[aria-expanded="false"] > h3:before { content: '\f0fe'; }
.facetSelectContainer { padding: 0; }
.optionContainer > .title { padding: 0; margin: 0;}
.optionContainer .arrow { height: 40px; width: 20px; margin: 0; left: 0; top: 0; }
.optionContainer .arrow::before,
.optionContainer .arrow:before { color: #69142e; font-family: FontAwesome; content: '\f068'; display: inline-block; cursor: pointer; position: initial; line-height: normal; -webkit-font-smoothing: antialiased; transition: transform .25s linear; -webkit-transition: -webkit-transform .25s linear; }
.optionContainer .arrow_collapsed:before { content: '\f067'; transform: rotate(180deg); }
.facetSelect li { padding: 7px 17px; }

.tabButtonContainer,
[class^="tab"][id$="Widget"] {
    background: #fff;
    border-right: 1px solid #ddd !important;
    border-radius: 0 !important;
    border-left: 1px solid #ddd !important;
}

[id^="tab"][id$="Widget"] {
    border-right: 1px solid #ddd !important;
    border-bottom: 1px solid #ddd !important;
    border-left: 1px solid #ddd !important;
}

[id^="tab"][id$="Widget"] {
    border: none;
}

div.tab_container {
    border: none;
    border-right: 1px solid #ddd;
}

div.tab_container.inactive_tab {
    background: #f5f5f5 !important;
    border: none;
    margin: 0;
    border-bottom: 1px solid #ddd;
    top: 0;
    left: 0;
}

.tab_header {
    margin: 0 !important;
    display: table;
    width: 100%;
    border-top: 1px solid #ddd;
    border-spacing: 0 !important;
}

.tab_header .tab_container {
    display: table-cell;
    width: auto !important;
    outline: none !important;
    font-family: 'Roboto Condensed', Calibri, Arial, Helvetica, sans-serif;
    padding: 1rem;
}

.product_listing_container > .grid_mode li {
    width: 25% !important;
    padding: 10px;
    height: auto;
    min-height: auto;
}
.productListingWidget > .header_bar { align-items: center; display: flex; justify-content: space-between; }
/*
.productListingWidget > .header_bar .controls > * {
    float: none !important;
    display: inline-block;
}
*/
.productListingWidget > .header_bar .controls .paging_controls { margin-right: 2rem; }
.productListingWidget > .header_bar .controls .sorting_controls { display: flex; }
.productListingWidget > .header_bar .controls .sorting_controls, 
.productListingWidget > .header_bar .controls .view_controls { align-items: center; }
.productListingWidget > .header_bar .controls .sorting_controls > .page_size_label { margin-right: .5rem; }

.productListingWidget .selectWrapper .ui-selectmenu-button .ui-selectmenu-icon { order: 2; }
.productListingWidget .selectWrapper .ui-selectmenu-button .ui-selectmenu-text { order: 1; }

@media screen and (max-width: 850px) {
  .productListingWidget > .header_bar > .title > .num_products { display: block; }
}
@media screen and (max-width: 750px) {
  .productListingWidget > .header_bar { flex-direction: column; justify-content: center; }
  .productListingWidget > .header_bar > .title > .num_products { display: inline-block; }
}
@media screen and (max-width: 600px) {
  div.widget_title_container h1 { font-size: 18px; margin: 1rem; text-align: center; }
  .productListingWidget>.header_bar { flex-direction: row; }
}
@media screen and (max-width: 520px) {
  div.widget_title_container h1 { font-size: 16px; }
  .productListingWidget > .header_bar { flex-direction: column; }
}
@media screen and (max-width: 375px) {
    .product_listing_container > .grid_mode li { width: 100% !important; }
    .productListingWidget>.header_bar .controls .paging_controls { margin-right: 0; }
}
@media screen and (min-width: 376px) {
    .product_listing_container > .grid_mode li {
        width: 50% !important;
    }
}
@media screen and (min-width: 960px) {
    .product_listing_container > .grid_mode li {
        width: 33.333% !important;
    }
}
@media screen and (min-width: 1281px) {
  .product_listing_container > .grid_mode li {
      width: 25% !important;
  }
}

@media screen and (max-width: 400px) {
  .productListingWidget > .header_bar { flex-direction: column; }
}

.controlBar .pageControl.number > a,
.grid_icon, .list_icon {
    border: 1px solid #ccc;
    font-weight: normal;
}

.controlBar .pageControl.number > a:hover,
.controlBar .pageControl.number > a.selected,
div.grid_icon,
a.grid_icon:hover,
div.list_icon,
a.list_icon:hover {
    background-color: #015EA1 !important;
    border: 1px solid #015EA1;
}
@media (max-width: 1133px) {
.pageControlButton {
  background-color: #015EA1 !important;
  }
}
@media screen and (max-width: 952px) {
.productListingWidget > .header_bar .pagination_present {
    min-height: initial;
    }
}
.productListingWidget .product_name > a { font-size: 14px; line-height: 1.4; }
.catEntryGrid_border {
    display: none !important;
}

.product_listing_container > .grid_mode li {
    padding: 10px;
}
/* Start: COC-359 */
#productsFacets fieldset[id*="News"],
.tabButtonContainer #tab2 {
    display: none;
}
.tabButtonContainer {
    width: 100%;
}
.tabButtonContainer #tab1 {
    border-right: none;
}
/* End: COC-359 */

/* Search Styles */
.productListingWidget { padding-bottom: 0; }
.product { flex: 0 0 auto; width: 100%; } /* IE11 Fix for search results */
#facetFilterListWrapper .facetSelectedCont .filter_option img {
    box-shadow: none;
    border-radius: 0;
}
.product_listing_container .product > .product_image img {
    width: 165px;
}
.product_listing_container .product_image .product_attrs {
    top: -9px;
    left: -10px;
}
.product_listing_container .grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }

.searchSummaryWidget h1 { font-size: 24px; margin: 0; }
.searchSummaryWidget mark { background-color: #fff8a6; }
#catalog_search_result_information { display: none; }

/* Start: COC-331 */
div[id^="searchBasedNavigation"] .view_controls { display: none; /* Hides the Grid and List Controls */ }

.product,
.product_info,
.grid_mode .product_info .product_name { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 0;-ms-flex: 0 1 auto; flex: 0 1 auto; }

/* LIST VIEW */

.product_listing_container > .list_mode > li {
    width: 100% !important;
}

.list_mode li .product {
    min-height: auto !important; /* Might not be needed anymore */
}

.list_mode .product_option {
    max-width: 200px;
}

.product_option a.button.primary {
  font-size: 12px;
  width:100%;
  min-width: 100%;
  margin: 0;
  background: #E98019 !important;
  border: none !important;
  color: #fff !important;
  min-height: 50px !important;
  line-height: 3.5em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}

/*sidebar*/
#content .collapsible:hover,
.categoryNavWidget.collapsible:hover,
.linkWidget.collapsible:hover {
    background-color: none !important;
}

div.widget_left_nav > div.content_left_border > div.content_right_border > div.content div.content_section div.section_list {
    background:none !important;
    min-height: 25px;
}

/*article listing*/
#articleListing li.item {
    float: left;
    width: 100% !important;
}

.quantity_section > .quantity_input { display: inline-block; width: 55px; }
#JJKListPriceDisplayController { margin: 15px 0; }

@media screen and (max-width: 480px), screen and (max-width: 738px) and (min-width: 601px) {
  .productListingWidget > .header_bar .pagination_present {
     margin-top: 0 !important;
  }
}

@media (max-width: 1133px) {
    .pageControlMenu > .pageControl.number > .ellipsis:after {
        content: "\2026";
    }
}

/* CHECKOUT STEP 2 */
dl.form .formline dt,
dl.form .formline dd { width: 100%; margin: 0; }
/* CHECKOUT STEP 3 */

/* overwriting above styles - for flexbox */
.product_listing_container > .grid_mode li { display: -webkit-box; display: -ms-flexbox; display: flex; border-bottom: 1px solid #ddd; flex: 0 0 auto; }

/* jjkmaster.css line 43 */
sm-3 .sub-nav li a {
    font-size: 14px !important;
    letter-spacing: normal;
    font-weight: normal !important;
}

/* SEARCH LIST VIEW */
.product_option.disabled .button.primary {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    text-align: left;
    color: red;
}

.list_mode.grid > li:last-child .catEntryList_border {
    border-bottom: none;
}

/* WISH LIST - LINK */

#addToShoppingListBtn {
    background: none;
    border: none;
    width: 140px;
}

#addToShoppingList {
    background: none;
    background-color: none;
    border: none;
    outline: none;
    border-radius: 0;
    background-image: none;
    color: #039BE5;
    font-weight: normal;
    text-align: left;
    padding-left: 0;
    width: auto !important;
}

.shopperActions .dropdown_primary .shoppping_list_content {
    width: auto !important;
    padding: 0 !important;
}

.shopperActions .dropdown_primary > .drop {
    border-left: none;
}

.shopperActions .dropdown_primary > .drop a {
    color: #039BE5;
}

.selectWrapper .dijitSelect .dijitArrowButtonContainer:before,
.shopperActions .dropdown_primary > .drop div:before { content: "\f0d7"; font-family: 'fontawesome'; font-size: 18px; }
/* END WISH LIST - LNK */

@media screen and (max-width: 600px) { 
#product-display-body .definingAttributes,
.shopperActions { padding-left: 0; } 
}

@media screen and (max-width: 600px) {
	.shopperActions .add2Cart_section { text-align: center; }
}

/*COMPLIANCE TOPICS*/

.main-column.col-md-12 {
    width: 100%;
}

/* SUPPORT LIST */
.support li { float: left; height: auto; padding: 25px 15px; width: 25%; min-height: 230px; }
.support li p { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
@media screen and (max-width: 1200px) {
    .support li { width: 33.333% !important; }
}
@media screen and (max-width: 926px) {
    .support li { width: 50% !important; }
}
@media screen and (max-width: 736px) {
    .support ul { padding-left: 0; }
     .support li { width: 100% !important; }
}

/* ABOUT PAGES */
.iccp-links h4 { margin: 0; }
.iccp-links ul { margin-bottom: 20px; }
.iccp.values .column.span9 ul li { display: inline-block; margin: 20px 0; }
.iccp.values ul li img { float: left; display: inline-block; margin: 0 20px 20px 0; }
.iccp.values .column.span9 ul li h3 { margin-top: 0; }

.home .content .product {
    margin: 0 10px;
}

/*hazcom checklist*/
.billboard .checklist .checkbox {
    padding-bottom: 3px;
    margin-top: 3px;
    margin-right: 4px;
    width:auto;
    height:auto;
    border: none;
    vertical-align: middle;
    line-height: 0px;
}
.billboard {
  float:none;
  margin-top:20px;
}

 /* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
  .billboard {
    float:none;
    margin-top:40px;
  }
}

/* HOME PAGE */
@media screen and (max-width: 768px) {
    .home .row.margin-true div.contentRecommendationWidget {
        width: 100%;
        float: none;
        padding: 1rem;
    }
}

/* DIFFERENCE MAKERS 7/13 */
@media screen and (max-width: 600px){
    .right.lighthouse,
    .left.park { float: none; margin: 0 !important; }
    img { max-width: 100%; }
}

/* FontAwesome Styles: Header and Product Page; */
.product_text .recurring a:before { color: #69142e; }

/* Legacy grid for mobile - Possible conflicts may occur */
@media only screen and (max-width: 650px) {
.column,
.columns {
    width: auto !important;
    float: none !important;
    margin-left: 0;
    margin-right: 0;
    }
}
@media only screen and (max-width: 650px) {
.row .row .column,
.row .row .columns {
    padding: 0;
    }
}

/* Pages: Product Page (PDP) ******************** */
#product-display-body div[data-slot-id="7"] > div { margin: 15px 0; position: relative; }
#product-display-body #price_display_58910 { border-top: 1px solid #e6e6e6; padding-top: 10px; }
#product-display-body [id^="price_display"] { border-top: 1px solid var(--clr-gray-150); border-bottom: 1px solid var(--clr-gray-150); padding: 1rem 0; }
#product-display-body [id^="price_display"] [id^="offerPrice"] { font-size: 20px; font-weight: 700; margin-bottom: .5rem; }
#product-display-body .viewVolumePricingAnchor a:before { font-family: FontAwesome; display: inline-block; color: #A1A299; content: "\f0ce"; font-size: 20px; margin: -3px 5px 0 0; font-weight: 400; float: left; -webkit-font-smoothing: antialiased; }
#product-display-body.product-buyable .namePartPriceContainer { margin-bottom: 0 !important; position: relative; }
#product-display-body.product-buyable .namePartPriceContainer h1 { font-size: 22px; margin: 0 0 5px; }
#product-display-body.product-buyable .namePartPriceContainer h2 { font-size: 16px; font-weight: bold; margin-top: 0; padding: 0; }
.product-buyable .product_text p { margin-bottom: 0; }
.product-buyable .product_text p .product_text-link { display: block; }

#view-larger:before,
#print-text:before,
#mail-text:before,
#video-preview:before { font-family: FontAwesome; font-weight: 400 !important; margin: 0 4px 0 0; }
#view-larger:before { content:"\f00e"; }
#video-preview:before { content:"\f16a"; }
#mail-text:before { content:"\f003"; }

.product_text .recurring .recurring_text,
.image_container a { color: #039BE5; font-weight: 400; font-size: 14px; }

#product-display-body #print-share { float: right; margin: -9px 0 0; }
#product-display-body #print-share a { font-weight: 400; font-size: 14px; display: inline-block; padding: 11px 0; }

#product-display-body .definingAttributes .hidden { display: block !important; }
#product-display-body .definingAttributes .currentUsedFilters { font-size: 14px; margin: 10px 0; display: none; }
#product-display-body .definingAttributes .currentUsedFilters.hidden { display: none !important; }
#product-display-body .definingAttributes .currentUsedFilters:before { content: 'You Selected:'; display: block;  margin: 0 0 10px; color: #52534d; }
#product-display-body .definingAttributes .currentUsedFilters .usedFilter { margin-right: 15px; }
#product-display-body .definingAttributes .currentUsedFilters .usedFilter.visible { display: inline-block; border: 1px solid #e6e6e6; padding: 8px 12px 6px 8px; margin: 0 15px 15px 0; border-radius: 2px; color: #52534d; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
#product-display-body .definingAttributes .currentUsedFilters .usedFilter.visible span { font-weight: bold; }
#product-display-body .definingAttributes .currentUsedFilters .close { margin: 0 2px 0 0; opacity: .6; height: 22px; width: 22px; }
#product-display-body .definingAttributes .currentUsedFilters .close:before { position: absolute; content: '\f057'; top: 0; left: 1px; font-family: FontAwesome; font-size: 20px; color: #57584d !important; }
#product-display-body .definingAttributes .currentUsedFilters .close:hover:before { content: '\f057'; color: #D00D00 !important; top: 0; left: 1px; }
#product-display-body .definingAttributes .dijitSelect span { font-weight: bold; font-size: 14px; }
.product_attrs .newProduct,
.product_attrs .bestSeller { color: #ffffff; padding: 0.2rem 0.6rem; top: initial; left: initial; position: relative; float: left; opacity: .925; text-transform: uppercase; }
.product_attrs .newProduct { background-color: #e98019; }
.product_attrs .bestSeller { background-color: #69142e; }

#product-display-body .shopperActions { margin-bottom: 2rem !important; }
.product-buyable .shopperActions > div { margin-bottom: 1rem; }
#JJKBackorderStatusDisplayWidget .msg-backorder { font-size: 14px; }

div.tab div.content {
    padding: 0;
}

/* pulled from jjk-legacy styles, due to scripts still using these ids - cv-ptp-styles.css */
/* Errors */
#qtyError,
#signError,
.configurable-sign #error { display: none; }
#signError.error.show,
#error.active { display: block; }
.configurable-sign #error { margin: 0 auto 20px; width: 100%; }

/* Compliance Topic Styles */
.content-head.row { background-size: 100% !important; width: 100%; }
.content-head .switch>label { float: left; } /* BOIA */

/* Custom Order Form styles */
.custom-order-form .custom-order-form__product { display: flex; flex-wrap: wrap; }
.custom-order-form .custom-order-form__product > div { flex: 1; padding: 1rem; }
.custom-order-form .custom-order-form__product .custom-order-form__image { flex: 0 1 200px; margin: 0 auto 1rem; text-align: center; }
.custom-order-form .custom-order-form__product .custom-order-form__attributes > div { margin-bottom: 1rem; }
.custom-order-form .custom-order-form__product .custom-order-form__pricing { flex: 0 1 300px; }
.custom-order-form .custom-order-form__product #price-area div[id*="tierPrice"] { display: block !important; }
.custom-order-form .custom-order-form__product .tierPriceID > div { align-items: center; border-bottom: 1px solid #E7E8E6; display: flex; justify-content: space-between; padding: .5rem; }
.custom-order-form .custom-order-form__product .additional-pricing-message { margin: 5px; text-align: center; }
.custom-order-form .custom-order-form__product .offer-price { display: none; }
.custom-order-form__buttons {align-items: center; display: flex; justify-content: center; margin-top: 1rem; }
@media screen and (max-width: 850px){
    .custom-order-form .custom-order-form__product .custom-order-form__pricing { flex: 0 1 250px; }
}
@media screen and (max-width: 699px){
    .custom-order-form .custom-order-form__product .custom-order-form__image { flex: 0 1 150px; }
    .custom-order-form .custom-order-form__product .custom-order-form__pricing { flex: 0 1 225px; }
}
@media screen and (max-width: 560px){ 
    .custom-order-form .custom-order-form__product .custom-order-form__pricing { flex: 0 0 100%; }
}

.jjk-custom-order-form__list .blocks-2up { gap: 4.8rem; }
.jjk-custom-order-form .jjk-custom-order-form__product { display: flex; gap: 2.4rem; }
.jjk-custom-order-form .jjk-custom-order-form__product > div:nth-child(2n) { flex: 1; }
.jjk-custom-order-form .jjk-custom-order-form__product .jjk-custom-order-form__attributes > div { margin-bottom: 1rem; }
.jjk-custom-order-form__buttons {align-items: center; display: flex; justify-content: center; margin-top: 1rem; }

.jjk-custom-order-form__list { gap: 2.4rem; }
.jjk-custom-order-form__list .block-wrapper { flex: 1 1 46%; padding: 0 !important; }
.jjk-custom-order-form__image { width: 150px; }
.jjk-custom-order-form__image > * { display: block; text-align: center; }
.jjk-custom-order-form__attributes { flex: 1 0 auto; }
.jjk-custom-order-form__attributes > * + *,
.jjk-custom-order-form__image > * + * { margin-top: .8rem; }
.jjk-custom-order-form__attributes .product-title { font-weight: 700; }

@media screen and (max-width: 480px) {
	.quantityDivider { display: none !important; }
	.quantityMultiple { display: block !important; }
}

@media screen and (max-width: 768px) {
	.jjk-custom-order-form__buttons { display: block; text-align: center; }
	.jjk-custom-order-form__buttons #a2cButton { display: block; margin: auto; margin-top: 2rem; }
	.jjk-custom-order-form__attributes .product-qty .form-control { display: inline; }	
}

@media screen and (max-width: 900px) {
    .jjk-custom-order-form__image { width: 125px; }
}


/* Cart Styles */
#cart-crumb ul li h1,
.checkout .panel-title { text-transform: uppercase; text-align: center; }
.checkout h2.panel-title { color: #FFF; font-size: 18px; }
.checkout .modal-body .column.span6:first-child {
    padding-left: 0;
}
.checkout .modal-body .column.span6:last-child {
    padding-right: 0;
}
.checkout #item-display th { background: none; font-size: 16px; font-family: 'Roboto Condensed',Calibri,Arial,Helvetica,sans-serif; }
.checkout #item-display td { padding: 16px; }
#item-display .product-image { text-align: center; width: 120px; }
#item-display .product-image img { width: 100%; }
.payment-review #payment-form-area .ponumber-note { /* Additonal tweak to cv-cart-styles - line 507 */
    margin: 0 0 5px 19px;
    float: none;
}

/* With Order Styles */
.column.span6.button-group button:last-child {
    color: #FFFFFF;
}

/* Order Process: Payment - Review Styles */
.address-spot { float: none; width: 100%; height: auto; margin: 0; padding: 0; }
#payment-form-area #credit-card .cc-icons { position: static; float: none; }

/* Order Process: Table Styles */
.table__item-summary * { background-color: #FFFFFF; border: none; }
.table__item-summary th { font-weight: 400; }
.table__item-summary .item-total { text-align: right; }
.table__item-summary #current-order-total th,
.table__item-summary #current-order-total td { font-weight: bold; border-top: 1px solid #e1e1e1; }

#order-review table * { background-color: #FFFFFF; border: none; }
#order-review th { font-weight: 400; }
#order-review td { text-align: right; }
#order-review table #current-order-total th,
#order-review table #current-order-total td { font-weight: bold; border-top: 1px solid #e1e1e1; }
.order-complete #current-order-payment tr td:first-child { text-align: left; }

/* Checkout: Logon Page TEMP Location */
/* Template Styles to deal with */
.contentWidget { position: relative; }
.left_spot { position: relative; z-index: 0; }

.checkout.checkout__sign-in { display: grid; } /* Added temporarily */

@media only screen and (min-width:1200px) {
	.is-full-width { background-size: cover; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
}

/* Breaks long text at any point if there are no otherwise-acceptable break points in the line */
.pers-item > * { overflow-wrap: anywhere; }

/* General Cart, Login and Checkout Styles */
.checkout .checkout__item { padding: 3rem; }
.checkout__item h1 { margin: 0; }
.checkout__item h2 { margin-top: 0; }

/* Cart Styles */
.checkout__cart div[data-slot-id="1"] { grid-area: s-1; padding: 0; }
.checkout__cart div[data-slot-id="2"] { grid-area: s-2; padding: 0 1rem; }
.checkout__cart div[data-slot-id="3"] { grid-area: s-3; justify-self: end; padding: 0 1rem; }
.checkout__cart div[data-slot-id="4"] { display: grid; grid-gap: 1rem; grid-template-columns: 1fr; grid-area: s-4;     padding: 0 1rem; }
.checkout__cart div[data-slot-id="5"] { grid-area: s-5; padding: 0 1rem; }
.checkout__cart div[data-slot-id="6"] { grid-area: s-6; padding: 0 1rem; }
.checkout__cart div[data-slot-id="7"] { grid-area: s-7; }
.checkout__cart div[data-slot-id="4"] .checkout__order-items { grid-area: order-items; }
.checkout__cart div[data-slot-id="4"] .checkout__aside { grid-area: order-aside; }
.checkout__cart div[data-slot-id="4"] .checkout__order-summary { grid-area: order-summary; }
.checkout__cart div[data-slot-id="4"] .checkout__order-ads { grid-area: order-ads; }


.checkout.checkout__cart { display: grid; grid-gap: 2rem; grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"s-1 s-1"
		"s-2 s-3"
		"s-4 s-4"
		"s-5 s-5"
		"s-6 s-6"
		"s-7 s-7";
}

/* #ShopCartForm .card .card-block > div { display: inline-block; } */ /* Test style. not final */
#promo-code-form .css-tooltip-k1,
#shippingTax-calculate-form .css-tooltip-k1 { cursor: help; color: #52534D; display: inline-block; font-size: 20px; }
.checkout .item-totals { font-size: 1.6rem; }
.order-items--eld .card-block .short-description span { display: block; margin-left: 2rem; }
.checkout__order-items .card.order-items--subs { border-top: 1px dashed var(--clr-gray-150); margin-top: -.9rem; /* margin-left: 2%; */ margin-left: 16.8%; /* width: 98%; */ width: 83%; }
.checkout__order-items .card.order-items--subs .card-block { grid-template-columns: 1fr 1fr;
    grid-template-areas: "item-desc item-desc" "item-qty item-controls"; }
.card.is-soft-delete { background: #FEFBEE; }
.checkout__order-items .card.is-soft-delete .short-description { font-weight: 700; grid-area: item-short-desc; }
.checkout__order-items .card.is-soft-delete .card-block { align-items: center; grid-template-columns: 1fr 20%;
    grid-template-areas: "item-short-desc item-controls"; }
.checkout__order-items .card.is-soft-delete .card-block .item__controls { justify-content: flex-end; }

.checkout__order-summary .item-totals .note { font-size: 1.3rem; }

.checkout__cart div[data-slot-id="4"] {
    grid-template-areas:
        "order-items"
        "order-aside";
}

.checkout__cart #numberOfItemsInCart h1 { display: inline-block; }
.checkout__cart #numberOfItemsInCart .numberOfItems { margin-left: 1rem; }

.checkout__cart .card .item__image { display: inline-block; width: 125px; }

@media only screen and (min-width: 767px) {
    .checkout.checkout__cart { grid-template-columns: 1fr 1fr 25%;
	grid-template-areas:
		"s-1 s-1 s-1"
		"s-2 s-2 s-3"
        "s-4 s-4 s-4"
        "s-5 s-5 s-6"
        "s-7 s-7 s-7";
	}
    .checkout__cart div[data-slot-id="4"] { grid-template-columns: 1fr 40%;
    grid-template-areas:
        "order-items order-aside";
    }
}

@media only screen and (min-width: 950px) {
	.checkout__cart div[data-slot-id="4"] { grid-template-columns: 1fr 35%;}
}

@media only screen and (min-width: 1200px) {
	.checkout.checkout__cart { grid-template-columns: 1fr 1fr 1fr 24%; /* -ms-grid-template-columns: 1fr 1fr 1fr; */
	grid-template-areas:
		"s-1 s-1 s-1 s-1"
		"s-2 s-2 s-2 s-3"
        "s-4 s-4 s-4 s-4"
        "s-5 s-5 s-5 s-5"
        "s-6 s-6 s-6 s-6"
        "s-7 s-7 s-7 s-7";
	}
    .checkout.checkout__cart.cart-is-empty {
	grid-template-areas:
		"s-1 s-1 s-1 s-1"
		"s-2 s-2 s-2 s-3"
        "s-4 s-4 s-4 s-4"
        "s-5 s-5 s-5 s-6"
        "s-7 s-7 s-7 s-7";
	}
    .checkout__cart div[data-slot-id="4"] { grid-template-columns: 1fr 24%;
    grid-template-areas:
        "order-items order-aside";
    }
}

@media screen and (max-width: 399px) {
    .checkout__order-items .card.order-items--subs { margin-left: 0; width: 100%; }
}

/* .checkout__order-items .card-block { display: grid; grid-gap: 1rem; } */
.checkout__order-items .card-block { display: flex; flex-direction: column; }
.checkout__order-items .card-block .item__image { grid-area: item-image; width: 85px; }
.checkout__order-items .card-block .item__desc { grid-area: item-desc; }
.checkout__order-items .card-block .item__qty { grid-area: item-qty; }
.checkout__order-items .card-block .item__price { grid-area: item-price; }
.checkout__order-items .card-block .item__total { grid-area: item-total; }
.checkout__order-items .card-block .item__controls { display: flex; justify-content: space-between; grid-area: item-controls; }
.checkout__order-items .card-block .item__removed { align-items: center; display: flex; grid-area: item__removed; justify-content: space-between; }
.checkout__order-items .card-block .item__desc > div { margin-bottom: .5rem; }
.checkout__order-items .card.order-items--subs .card-block .item__controls { justify-content: flex-end; }

/* COC-1189 - style tweaks for ad display issues */
/*
.checkout__order-ads .carousel>.content>ul { display: flex; flex-direction: column; }
.checkout__order-ads .carousel>.content>ul>li { width: 100% !important; }
.checkout__order-ads .carousel>.content>ul>li.hidden { opacity: 1; }
.checkout__order-ads .carousel.padding-true>.content { margin: 0; }
.checkout__order-ads .carousel>.nextPageButton,
.checkout__order-ads .carousel>.prevPageButton,
.checkout__order-ads .carousel:after,
.checkout__order-ads .carousel:before { display: none; }
*/
.checkout__order-ads .card-img { width: 150px; }

@media only screen and (max-width: 399px) {
    .checkout__order-items .card-block .item__total { position: absolute; right: 1.2rem; }
}
@media only screen and (min-width: 400px) {
    .checkout__order-items .card-block { display: grid; grid-gap: 1rem; grid-template-columns: 150px 1fr 15%;
    grid-template-areas:
        "item-image item-desc item-total"
        "item-image item-qty item-qty"
        "item-image item-controls item-controls"
        "item__removed item__removed item__removed";
    }
    .checkout__order-items .card-block .item__image { width: 100px; }
}

@media only screen and (min-width: 700px) {
    .checkout__order-items .card-block { grid-template-columns: 150px 1fr 25%;
    grid-template-areas:
       "item-image item-desc item-total"
        "item-image item-qty item-qty"
        "item-image item-controls item-controls"
        "item__removed item__removed item__removed";
    }
    .checkout__order-items .card-block .item__total { justify-self: end; }
    .checkout__order-items .card-block .item__image { width: 150px; }
}

.checkout__order-items .card.is-removed .card-block { grid-gap: 0; grid-template-columns: 1fr;
    grid-template-areas:
    "item-image"
    "item-desc"
    "item-total"
    "item-qty"
    "item-controls"
    "item__removed";
}

@media screen and (max-width: 767px) {
    .checkout__order-items .card-block .item__qty .form-inline .form-group,
    .checkout__order-items .card-block .item__qty .form-inline .form-group label { display: inline-block; }
    .checkout__order-items .card-block .item__qty .form-inline .form-group input { display: inline-block; width: auto; }
}

/* Temp fix for the ELD Small Fleet item in the order summary */
#order-review-panel .order-items--eld { border: none; box-shadow: none; }
#order-review-panel .order-items--eld .item__image { float: left; margin-right: 1rem; width: 120px; }
#order-review-panel .order-items--eld .item__total { float: right; }
#order-review-panel .order-items--eld .card-block { color: initial; }

/* Login - Sign In Styles */
.checkout__ribbon-top { grid-area: checkout__ribbon-top; }
.checkout__header { grid-area: checkout__header; }
.checkout__login { grid-area: checkout__login; }
.checkout__guest { grid-area: checkout__guest; }
.checkout__register { grid-area: checkout__register; }
.checkout__ribbon-bottom { grid-area: checkout__ribbon-bottom; }

.checkout.checkout__sign-in { grid-column-gap: 6rem; grid-template-columns: 1fr;
	grid-template-areas:
		"checkout__ribbon-top"
		"checkout__header"
		"checkout__login"
		"checkout__guest"
		"checkout__register"
		"checkout__ribbon-bottom";
}
.checkout__login form .checkbox.remember-me,
.checkout__login form .forgot-password { display: inline-block; }
.checkout__login form .forgot-password { float: right; }
.checkout__login form button { display: block; }

@media screen and (max-width: 350px) {
    .checkout__login form .checkbox.remember-me,
    .checkout__login form .forgot-password { display: block; }
    .checkout__login form .forgot-password { float: none; }
    .checkout__login form button { display: block; }
   .my-orders .dataTables_paginate span a, .my-orders .dataTables_paginate .first, .my-orders .dataTables_paginate .previous, .my-orders .dataTables_paginate .next, .my-orders .dataTables_paginate .last {
   margin-left: 2px; }
}

@media only screen and (min-width: 750px) {
	.checkout.checkout__sign-in { grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"checkout__ribbon-top checkout__ribbon-top"
		"checkout__header checkout__header"
		"checkout__login checkout__guest"
		"checkout__login checkout__register"
		"checkout__ribbon-bottom checkout__ribbon-bottom"; margin-bottom: 3rem;
	}
}
@media screen and (max-width: 749px) {
    .checkout.checkout__sign-in .checkout__item { padding: 2rem; }
    .checkout.checkout__sign-in .checkout__item.checkout__guest { border-bottom: 1px solid var(--clr-gray-150); border-top: 1px solid var(--clr-gray-150); }
}

.item-qty-update { margin-left: 3.2rem; }
.item-qty-update .btn.btn-text.text-left { padding-left: 0 !important; }
#promo-code-form { border-bottom: 1px solid var(--clr-gray-150); }
#promo-code-form input { display: inline-block; }
#promo-msg > div { margin-bottom: .5rem; }

/* Show Password Styles */
.form-group { position: relative; }
span[id*="showPassword"] { position: absolute; right: 5px; top: -3px; }
span[id*="showPassword"] input[type=checkbox] { opacity: 0; } /* opacity for accessibility */
span[id*="showPassword"] input[type=checkbox] + label:before { display: inline-block; }
span[id*="showPassword"] input[type=checkbox] + label:before { content: "Show"; } /* unchecked icon */
span[id*="showPassword"] input[type=checkbox]:checked + label:before { content: "Hide"; } /* checked icon */
span[id*="showPassword"] input[type=checkbox]:focus + label:before { outline: 2px dashed red; } /* focus for accessibility */
span[id*="showPassword"] label { font-weight: 400; }

.checkout button[type=submit] { background-color: #FF8400; }
.checkout button[type=submit].disabled { background-color: #AEAFAD; }

/* Checkout Withorder Styles */
/* .checkout__ribbon-top { grid-area: check-ribbon-top; } */
.checkout__withorder .checkout__item { padding: 1rem; }
.checkout__withorder .checkout__header { grid-area: check-header; text-align: center; }
.checkout__withorder .checkout__cta-top { grid-area: check-cta-top; }
.checkout__withorder .checkout__products { display: grid; grid-area: check-products; grid-gap: 1rem; }
.checkout__withorder .checkout__cta-bottom { grid-area: check-cta-btm; }
.checkout__withorder .checkout__ribbon-bottom { grid-area: check-ribbon-bottom; }
.checkout.checkout__withorder { display: grid; grid-gap: 2rem; grid-template-columns: 1fr; grid-template-areas:
		"check-ribbon-top"
		"check-header"
		"check-cta-top"
		"check-products"
		"check-cta-btm"
		"check-ribbon-bottom";
}
.checkout__withorder .checkout__ribbon-top { background: gray; color: #FFF; text-align: center; }
.checkout__withorder div[class*="checkout__ribbon"] *:first-child { margin-top: 0; }
.checkout__withorder div[class*="checkout__ribbon"] *:last-child { margin-bottom: 0; }
.checkout__withorder div[class*="checkout__cta"] { align-self: center; justify-self: center; }
@media screen and (min-width: 970px) {
	.checkout.checkout__withorder { display: grid; grid-gap: 2rem; grid-template-columns: 1fr 1fr 1fr; grid-template-areas:
		"check-ribbon-top check-ribbon-top check-ribbon-top"
		"check-header check-header check-cta-top"
		"check-products check-products check-products"
		"check-cta-btm check-cta-btm check-cta-btm"
		"check-ribbon-bottom check-ribbon-bottom check-ribbon-bottom";
	}
	.checkout__withorder div[class*="checkout__cta"] { justify-self: end; }
}
@media screen and (min-width: 600px) {
	.checkout__withorder .checkout__products { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (min-width: 975px) {
    .checkout__withorder .checkout__header { text-align: left; }
	.checkout__withorder .checkout__products { grid-template-columns: repeat(3, 1fr); }
}
@media screen and (min-width: 1230px) {
	.checkout__withorder .checkout__products { grid-template-columns: repeat(4, 1fr); }
}
@media screen and (min-width: 1640px) {
	.checkout__products { grid-template-columns: repeat(5, 1fr); }
}

.checkout__withorder header *:first-child { margin-top: 0; }
.checkout__withorder header *:last-child { margin-bottom: 0; }

/* Card Styles */
.featured-products h2 { text-align: center; color: #FFFFFF; margin: 0; } /* For styling the web activity title */
.card__featured-product { text-align: center; }
.card__featured-product .card-title { height: 6.75rem; }
@media screen and (min-width: 56.25em) {
  .card__featured-product .card-title { font-size: 2rem; }
}
.card__featured-product img { display: block; height: 150px; margin: 0 auto 1rem; width: 150px !important; }
.card__featured-product .card-text { color: #292a26; font-size: 1.4rem; height: 8rem; }
.card__featured-product .card-link { height: 4.2rem; }
.checkout__withorder .card::after { content: ""; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 5px 15px rgba(0, 0'', 0, 0.3); }
.checkout__withorder .card > * { display: flex; flex-direction: column; }
.checkout__withorder .card > div:last-child { align-items: center; justify-content: flex-end; }
.checkout__withorder .card__product--s150 .card__img { height: 150px; margin: 2rem; width: 150px; }
/* div[class*=blocks-] .block-wrapper .card picture, */
.card picture,
.card > a:first-of-type { flex: 0 1 auto; min-height: 1px; } /* IE11 Tweak */

.flag { background-color: #6E6F66; border: 1px solid #6E6F66; font-weight: 700; left: -1px; padding: .2rem .4rem; position: absolute; top: -1px; }
.flag:after { display: block; content: ''; border-top: 22px solid #6E6F66; border-right: 7px solid transparent; border-bottom: 8px solid transparent; border-left: 3px solid #6E6F66; width: 0; height: 0; position: absolute; right: -11px; top: -1px; }
.flag.flag--free { background-color: #A91B20; border-color: #A91B20; color: #FFFFFF; }
.flag.flag--free:after { border-top-color: #A91B20; border-left-color: #A91B20; }

.checkout__withorder .btn.is-selected:before { content: "\f00d"; font-family: 'FontAwesome'; margin-right: .5rem; }

/* CTP Training */
.training div.panel-default > div.panel-heading {
    background-color: #f5f5f5 !important;
    border-color: #dbdcd4 !important;
}
.training .formats #accordion h4 a {
    display: block !important;
    width: 95%;
}
.training .formats #accordion h5 {
    clear: both;
    margin: 0 !important;
}

/* Aurora-Bootstrap Conflict Styles */
/*
.navbar-default .navbar-toggle.collapsed {
    display: block !important;
}
*/
/* General Espot Ad Styles */
.genericESpot img {
    width: 100%;
}

/* Order Complete Styles */
#order-items #order-conf-item-display td.sku-image { width: 150px; }
#order-items #order-conf-item-display > tbody > tr > td img { display: block; margin: 0 auto; width: 100%; min-width: 100px; max-width: 120px; }
#cutOffTime-espot {
    width: 100%;
}

/* Bootstrap Overrides or fixes */
.row-no-gutters [class*=col-] { padding-right: 0; padding-left: 0; }
caption { color: initial; }
.affix { top: 0; width: 100%; }
.affix-top { width: 100%; }
.affix-bottom { width: 100%; position: absolute; }
.dropup.dropdown__container.open .caret { margin-bottom: 0; }

/* FontAwesome Tweaks */
.fa-twitter { color: #5EA9DD; }
.fa-linkedin { color: #0077B5; }
.fa-google-plus { color: #DB4937; }
.fa-youtube-play,
.fa-youtube { color: #E32C28; }
button .fa, 
.btn .fa { color: inherit; }
.main-nav .fa { color: #FFFFFF; }

/* Aurora - Clean up if possible */
.no_float { float:none; }

div.row.category_eSpot {
  margin-bottom: 0;
}

.catalogEntryRecommendationWidget.carousel .product_image {
  width: auto;
  height: auto;
}

/* JIRA:COC-295 */
@media print {
  a[href]:after {
      content: ""
  }

  abbr[title]:after {
      content: ""
  }
}
/* End of JIRA:COC-295 */

#createShoppingListPopup_title {
  display: none;
}
/*
.contentRecommendationWidget {
  margin-bottom: 11px;
}
*/

#loading_popup .footer {
  border: none;
}

.dijitTooltip .dijitBackgroundIframe {
  display: none;
}

#relatedSolutions__display { width: 100%; }

/* Related Solutions, and Search share certain markup. Keep this in mind when editing styles. */
.product_name { font-size: 12px; position: relative; }
.product_name > a { display: block; /* font-size: 14px; */ font-weight: 400; margin-bottom: 1rem; }
#relatedSolutions__display > .content {
    margin: 20px 0;
    padding: 0;
}
#relatedSolutions__display > .content > .relatedSolutions__title {
  width: 100%;
    background: transparent;
    color: #52534D;
    font-size: 28px;
    font-family: 'Roboto Condensed', Calibri, Arial, Helvetica, sans-serif;
    font-weight: 900;
    text-transform: uppercase;
}
#relatedSolutions__display .list_mode .product > .product_name_merch { font-size: 1.2rem; height: 90px; overflow: hidden; position: relative; text-align: center; max-height: 6.7em; }
#relatedSolutions__display .list_mode .product > .product_name_merch a { font-weight: 400; }

.relatedSolutions__title.container_full_width_bundle { width: 100%; background: none; color: #52534D; font-size: 28px; font-family: 'Roboto Condensed', Calibri, Arial, Helvetica, sans-serif; font-weight: 900; text-transform: uppercase; text-align: center; margin-bottom: 10px; letter-spacing: .05rem; /* BOIA */ }

h2.relatedSolutions__title.container_full_width_bundle { font-size: 28px; margin-top: 0; text-transform: uppercase; text-align: center; letter-spacing: .05rem; }

/* .home .carousel > .content > ul > li { width: 190px !important; } *//* Fixed widths break functionality of the carousel. */
.home .content .product { /* Possibly global */
  background: #FFFFFF;
  min-height: 260px;
  transition: ease 0.5s all;
}

/* Product Page Horizontal Related Solutions Styles */
#product-display-body .relatedSolutions__title { text-align: left; }
#relatedSolutions__display .list_mode .product > .product_image_merch {
  max-height: 150px;
  max-width: 150px;
  margin: 0 auto 15px;
  position: relative;
}

/* Product Page Add to Cart Modal */
#a2cBackground { display: none; position: fixed; height: 100%; width: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); z-index: 3001; }
#a2cOk { background: #FFFFFF; box-shadow: 0 4px 16px rgba(0,0,0,0.6); border-radius: 2px; display: none; margin: 2rem auto; max-width: 800px; position: fixed; z-index: 9999; top: 0; right: 0; left: 0; }
#container #a2cOk { margin-left: -25%; width: 100%; max-width: 50%; }
#a2cOk .close-area { right: 15px; position: absolute; top: 10px; }
#a2cOk h2 { margin-top: 4rem; }
#a2cOk #popupClose { color: #909090; display: block; font-size: 16px; font-weight: normal; height: 25px; width: 62px; }
#a2cOk #popupClose span,
#a2cOk #popupClose .text { display: block; }
#a2cOk #popupClose .icon { float: right; font-size: 18px; width: 22px; visibility: hidden; }
#a2cOk #popupClose .icon:before { content: "\f00d"; width: 25px; height: 25px; display: block; visibility: visible; font-family: fontawesome; font-size: 20px; position: absolute; top: 3px; right: -10px; margin-top: -7px; }
#a2cOk .cta { text-align: center; margin: 30px; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; }

#a2cOk .related-box-popup ul { display: table; }
#a2cOk .related-box-popup ul li { border: none; box-shadow: none; display: table-cell; }
#a2cOk .related-box-popup ul li a { color: inherit; font-weight: 400; font-size: 12px; }
#a2cOk .related-box-popup ul li img { width: 100%; }
#a2cOk .owl-carousel .owl-item .image img { height: auto; width: 150px; }
#a2cOk .owl-carousel .owl-item .product_info .rating img { display: inline-block; width: 105px; }
@media screen and (max-width: 900px) {
    #container #a2cOk { max-width: 75%; margin-left: -40%; }
}
@media screen and (max-width: 700px) {
    #container #a2cOk { max-width: 96%; margin-left: 0; left: 1.6rem; top: 2%; }
}
@media screen and (max-width: 442px){
    #container #a2cOk { left: 1rem; }
    #a2cOk #a2cOkShop,
    #a2cOk #a2cOkCart { margin: 8px; }
}
@media screen and (max-width: 426px){
    #container #a2cOk { margin:0; left: 0; right: 0; }
}

@media print {
    .main-nav,
    .mini-cart,
    #cart-head,
    .order-complete button,
    .order-complete .genericESpot,
    .footer,
    .order-conf-userreg { display: none !important; }
    body { background: none !important;; }
    #container,
    .checkout.order-complete .row > .span8 { width: 100% !important; }
}

/*ELD Small Fleet in checkout**************************************/
.payment-review #eld_payment-form-area .form .cc-expire { margin-bottom: 0; width: 170px; font-weight: bold; }
.payment-review #eld_payment-form-area .form .cc-cvn .cc-cvc { margin: 3px 0 2px; }
.payment-review #eld_payment-form-area .form .cc-cvn .css-tooltip-k1 { top: -3px; }
@media screen and (max-width: 479px) {
	.payment-review #eld_payment-form-area .form .cc-name,
    .payment-review #eld_payment-form-area .form .cc-number,
    .payment-review #eld_payment-form-area .form .cc-name input,
    .payment-review #eld_payment-form-area #label-creditcard,
    .payment-review #eld_payment-form-area .form,
    .payment-review #eld_payment-form-area .form .cc-number input { width: 100%; margin-left: 0; }
    }
.encompass-monthly#eld_credit-card { padding-top: 30px; }
@media only screen and (max-width: 650px) {
	#eld_payment-form-area #eld_credit-card .cc-icons { top: 0; }
    }
#eld-smallfleet-espot { border-radius: 3px; margin: 20px 0; }
#eld-smallfleet-espot .genericESpot { background: #fff; border: 2px solid #69142e; padding: 30px; max-width: 768px; margin: 80px auto; border-radius: 3px; position: relative; z-index: 1; outline: 10px solid #fff; }
#eld-smallfleet-espot:before { content: ""; background: #e6e6e6; width: 100%; height: 1px; position: absolute; top: 50%; z-index: 0; }

/* ------------------------------------------------------------------------------------
    Utility Styles
------------------------------------------------------------------------------------ */

/* Start: Swatch Colors */
/* Colors: Corporate Approved */
.bg-corp-dk-burgundy { background-color: var(--clr-corp-brand-dk-burgundy); }
.bg-corp-burgundy { background-color: var(--clr-corp-brand-lt-burgundy); }
.bg-corp-md-gray { background-color: var(--clr-corp-brand-md-gray); }
.bg-corp-lt-gray { background-color: var(--clr-corp-brand-lt-gray); }
.bg-corp-accent-orange { background-color: var(--clr-corp-brand-accent-orange); }
.bg-corp-accent-navy { background-color: var(--clr-corp-brand-accent-navy); }
.bg-corp-accent-md-blue { background-color: var(--clr-corp-brand-accent-md-blue); }

/* Colors: Gray Tones */
.bg-white { background-color: #FFFFFF !important; }
.bg-gray-1 { background-color: var(--clr-gray-50) !important; }
.bg-gray-2 { background-color: var(--clr-gray-200) !important; }
.bg-gray-3 { background-color: var(--clr-gray-300) !important; }
.bg-gray-4 { background-color: var(--clr-gray-400) !important; }
.bg-gray-5 { background-color: var(--clr-gray-500) !important; }
.bg-gray-6 { background-color: var(--clr-gray-600) !important; }
.bg-gray-7 { background-color: var(--clr-gray-700) !important; }
.bg-gray-8 { background-color: var(--clr-gray-800) !important; }
.bg-gray-9 { background-color: var(--clr-gray-900) !important; }
.bg-gray-10 { background-color: var(--clr-gray-1000) !important; }
.bg-black { background-color: #000000 !important; }

/* Colors: Warm Tones */
.bg-tan-1 { background-color: var(--clr-neutral-tan-1); }
.bg-tan-2 { background-color: var(--clr-neutral-tan-2); }
.bg-tan-3 { background-color: var(--clr-neutral-tan-3); }
.bg-tan-4 { background-color: var(--clr-neutral-tan-4); }

/* Colors: Brands */
.bg-advantage-orange { background-color: var(--clr-advantage-orange); }
.bg-advantage-burgundy { background-color: var(--clr-advantage-burgundy); }
.bg-advantage-dk-gray { background-color: var(--clr-advantage-dk-gray); }

.bg-encompass-primary { background-color: var(--clr-encompass-primary); }
.bg-encompass-secondary { background-color: var(--clr-encompass-secondary); }
.bg-encompass-cta { background-color: var(--clr-encompass-cta); }
.bg-encompass-gray { background-color: var(--clr-encompass-gray); }
.bg-encompass-text { background-color: var(--clr-encompass-text); }

/* old training */
.bg-training-orange:hover { background-color: #DF7600; }
.bg-training-gray-dk { background-color: #354052; } /* Navigation and solid block color */
.bg-training-navigation:hover { background-color: #3A4250; }
.bg-training-gray-lt { background-color:#F4F4F4; }
.btn.bg-training-orange { background-color: var(--clr-training-btn-primary) !important; }
.bg-training-orange.btn-outline { border-color: #F5A31F!important; color: #313131!important; }
/* End old training */
.bg-training-orange,
.bg-training-primary { background-color: var(--clr-training-primary); }
.bg-training-secondary { background-color: var(--clr-training-secondary); }
.bg-training-accent-orange { background-color: var(--clr-training-accent-orange); }
.bg-training-accent-gray { background-color: var(--clr-training-accent-gray); }
.bg-training-accent-dk-blue { background-color: var(--clr-training-accent-dk-blue); }
.bg-training-blue,
.bg-training-accent-blue { background-color: var(--clr-training-accent-blue); }
.bg-training-accent-green { background-color: var(--clr-training-accent-green); }

.bg-eyecue { background-color: var(--clr-training-eyecue); }
.btn-training-primary { background-color: var(--clr-training-btn-primary); color: black; }
.btn-training-primary:hover { background-color: var(--clr-training-btn-primary-hover) !important; color: #FFFFFF; }

.bg-2290online-green { background-color: var(--clr-2290online-green); }
.bg-2290online-red { background-color: var(--clr-2290online-red); }
.bg-2290online-lt-tan { background-color: var(--clr-2290online-lt-tan); }
.bg-2290online-gold { background-color: var(--clr-2290online-gold); }
.bg-2290online-dk-gray { background-color: var(--clr-2290online-dk-gray); }

.bg-kp-blue { background-color: var(--clr-kellerpermits-blue); }
.bg-kp-lt-blue { background-color: var(--clr-kellerpermits-lt-blue); }
.bg-kp-gold { background-color: var(--clr-kellerpermits-gold); }
.bg-kp-lt-gray { background-color: var(--clr-kellerpermits-lt-gray); }

.bg-compliance-library-black { background-color: var(--clr-compliance-library-black); }
.bg-compliance-library-dk-maroon { background-color: var(--clr-compliance-library-dk-maroon); }
.bg-compliance-library-lt-maroon { background-color: var(--clr-compliance-library-lt-maroon); }
.bg-compliance-library-orange { background-color: var(--clr-compliance-library-orange); }
.bg-compliance-library-dk-gray { background-color: var(--clr-compliance-library-dk-gray); }
.bg-compliance-library-lt-gray { background-color: var(--clr-compliance-library-lt-gray); }

/* old safegear */
.bg-safegear-blue { background-color: #1E3888; } /* Secondary 1 */
.bg-safegear-orange { background-color: #F26419; } /* Secondary 2 */
.bg-safegear-gray-lt { background-color: #E0E0E2; } /* Gray light */
.bg-safegear-gray-md { background-color: #909AA2; } /* Gray medium */
.bg-safegear-gray { background-color: #303539; } /* Gray dark - pending */
.text-safegear-lime-green { color: #D0DF00; }
.btn.bg-safegear-lime-green { background-color: #D0DF00; color: #303539; }
.btn.bg-safegear-lime-green:hover { background: #c8d609; }
.btn.btn-outline.bg-safegear-gray.disabled { border-color: initial; }
/* .btn.bg-safegear-gray { background-color: #34383c !important; color: #D0DF00 !important; } */
/* End old safegear */

.bg-safegear-lime-green,
.bg-safegear-primary { background-color: var(--clr-safegear-primary); }
.bg-safegear-secondary-1 { background-color: var(--clr-safegear-secondary-1); }
.bg-safegear-secondary-2 { background-color: var(--clr-safegear-secondary-2); }
.bg-safegear-lt-gray { background-color: var(--clr-safegear-lt-gray); }
.bg-safegear-md-gray { background-color: var(--clr-safegear-md-gray); }
.bg-safegear-dk-gray { background-color: var(--clr-safegear-dk-gray); }

.bg-sms- { background-color: var(--clr-sms-); }
.bg-sms-link { background-color: var(--clr-sms-link); }
.bg-sms-lt-blue { background-color: var(--clr-sms-lt-blue); }
.bg-sms-blue { background-color: var(--clr-sms-blue); }
.bg-sms-dk-blue { background-color: var(--clr-sms-dk-blue); }
.bg-sms-green { background-color: var(--clr-sms-green); }
.bg-sms-incident-center-primary { background-color: var(--clr-sms-incident-center-primary); }
.bg-sms-chemical-center-primary { background-color: var(--clr-sms-chemical-center-primary); }

/* Colors: Alerts */
.bg-success { background-color: var(--clr-success); }
.bg-info { background-color: var(--clr-info); }
.bg-warning { background-color: var(--clr-warning); color: var(--clr-warning-text) !important; }
.bg-danger { background-color: var(--clr-danger); }
.bg-success-lt { background-color: #d3ebc7; }
.bg-success-dk { background-color: #487132; }
.bg-info-lt { background-color: #d9edf7; }
.bg-info-dk { background-color: #2A778E; }
.bg-warning-lt,
.bg-warning-light { background-color: #faecd1; border-color: #FFE7A2; border-color: rgba(255, 220, 147, 0.78); color: #D00D00; }
.bg-warning-dk { background-color: #D2911E; }
.bg-danger-lt { background-color: #f4d8d7; }
.bg-danger-dk { background-color: #9C332F; }

.bg-brand { background-color: var(--clr-corp-brand-dk-burgundy) !important; }

.bg-encompass-orange { background-color: #F58025; }
.bg-encompass-blue { background-color: #005581; }
.bg-encompass-dk-blue { background: #0e2846; }

.bg-eyecue-with-pattern { /* background: #DFE229 !important; */ background: #E6E919 url(../images/EyeCue-Bkgd-Pattern-Green_Tile-1.png) repeat 0 0; box-shadow: 0 0 11px #A8AC47 inset; }

.bg-safegear-blue { background-color: #102C3D; }

.bg-primary { background-color: #015EA1; }
.bg-primary-lt { background-color: #cceaff; }
.bg-primary-dk { background-color: #01477A; }
.bg-default { background-color: #898B80; }
.bg-default-lt { background-color: #F3F3F2; }
.bg-default-dk { background-color: #52534D; }

/* Promotional Colors */
.bg-red { background-color: var(--clr-promo-red); }
.bg-orange { background-color: var(--clr-promo-orange); }
.bg-gold { background-color: var(--clr-promo-gold); color: #60615A;}
.bg-yellow { background-color: var(--clr-promo-yellow); }
.bg-neon-yellow { background-color: var(--clr-promo-neon-yellow); }
.bg-lime { background-color: var(--clr-promo-lime); }
.bg-green { background-color: var(--clr-promo-green); }
.bg-turquoise { background-color: var(--clr-promo-turquoise); }
.bg-blue { background-color: var(--clr-promo-blue); }
.bg-royal-blue { background-color: var(--clr-promo-royal-blue); }
.bg-saphire { background-color: var(--clr-promo-saphire); }
.bg-steelblue { background-color: var(--clr-promo-steel-blue); }
.bg-indigo { background-color: var(--clr-promo-indigo); }
.bg-purple { background-color: var(--clr-promo-purple); }

.bg-transparent { background-color: transparent; }

/* Tweaks */
.button.bg-white,
.button.bg-gray-1 { border: 1px solid var(--clr-gray-150) !important; }
.button.bg-white,
.button.bg-gray-1,
.button.bg-gray-2,
.button.bg-gray-3,
.button.bg-gray-4 { color: #444640 !important; }

/* Utility: Text Colors */
.subhead,
.text-muted { color: #6E6F66; }
.text-primary { color: var(--clr-body) !important; }
.text-success { color: #3B913B !important; }
a.text-success:focus,
a.text-success:hover { color: #449d44 !important; text-decoration: underline; }
.text-info { color: #289EC1 !important; }
a.text-info:focus,
a.text-info:hover { color: #31b0d5 !important; text-decoration: underline; }
.text-warning { color: #EE8C01 !important; }
a.text-warning:focus,
a.text-warning:hover { color: #ec971f !important; text-decoration: underline; }
.text-red { color: var(--clr-promo-red); }
.text-danger { color: #D00D00 !important; font-weight: 700; }
a.text-danger:focus,
a.text-danger:hover { color: #c9302c !important; text-decoration: underline; }
.text-brand { color: var(--clr-corp-brand-dk-burgundy); }
.text-encompass-orange { color: #f38028; }
.text-encompass-blue { color: #005581; }

.text-orange { color: var(--clr-promo-orange); }
.text-gold { color: var(--clr-promo-gold) !important; }
.text-yellow { color: var(--clr-promo-yellow); }
.text-neon-yellow { color: var(--clr-promo-neon-yellow); }
.text-lime { color: var(--clr-promo-lime); }
.text-green { color: var(--clr-promo-green); }
.text-turquoise { color: var(--clr-promo-turquoise); }
.text-steelblue { color: var(--clr-promo-steel-blue); }
.text-blue { color: var(--clr-promo-blue); }
.text-royal-blue { color: var(--clr-promo-royal-blue); }
.text-saphire { color: var(--clr-promo-saphire); }
.text-indigo { color: var(--clr-promo-indigo); }
.text-purple { color: var(--clr-promo-purple); }

.text-link { color: var(--clr-link); cursor: pointer; font-weight: 700; }
.text-link-lt { color: var(--clr-link); cursor: pointer; font-weight: 400; }
.text-base-color { color: var(--clr-body) !important; }
.text-white { color: #FFFFFF !important; }

 /* clear_float pulled from IBM style - Is it needed? */
.clear,
.clear_float { clear: both; }
.clear-right { clear: right; float: right; }
.clear-left  { clear: left; float: left; }
 /* clearFilter pulled from IBM style - Is it needed? */
.clearFilter,
.left { float: left; }
.right { float: right; }

.relative { position: relative; }

/* Bootstrap 4: Responsive Floats */
.pull-xs-left { float: left !important; }
.pull-xs-right { float: right !important; }
.pull-xs-none { float: none !important; }
@media (min-width: 544px) {
  .pull-sm-left { float: left !important; }
  .pull-sm-right { float: right !important; }
  .pull-sm-none { float: none !important; }
}
@media (min-width: 768px) {
  .pull-md-left { float: left !important; }
  .pull-md-right { float: right !important; }
  .pull-md-none { float: none !important; }
}
@media (min-width: 992px) {
  .pull-lg-left { float: left !important; }
  .pull-lg-right { float: right !important; }
  .pull-lg-none { float: none !important; }
}
@media (min-width: 1200px) {
  .pull-xl-left { float: left !important; }
  .pull-xl-right { float: right !important; }
  .pull-xl-none { float: none !important; }
}

.hidden-xs-up { display: none !important; }
@media (max-width: 543px) {
    .hidden-xs-down { display: none !important; }
}
@media (min-width: 544px) {
    .hidden-sm-up { display: none !important; }
}
@media (max-width: 767px) {
    .hidden-sm-down { display: none !important; }
}
@media (min-width: 768px) {
    .hidden-md-up { display: none !important; }
}
@media (max-width: 991px) {
    .hidden-md-down { display: none !important; }
}
@media (min-width: 992px) {
    .hidden-lg-up { display: none !important; }
}
@media (max-width: 1199px) {
    .hidden-lg-down { display: none !important; }
}
@media (min-width: 1200px) {
    .hidden-xl-up { display: none !important; }
}
.hidden-xl-down { display: none !important; }

.rounded { border-radius: .3rem; }
.circle { border-radius: 50%; }
.framed { display: inline-block; height: auto; padding: 1rem; line-height: 1.5; background-color: #FFFFFF; border: 1px solid var(--clr-gray-150); transition: all .2s ease-in-out; box-shadow: 0 2px 2px rgba(0,0,0,.08); }

.invisible { visibility: hidden !important; } /* Bootstrap also has this class name. Is !important still necessary here? Can we just use Bootstraps? */

.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-light { font-weight: 300; }
.text-bold { font-weight: 700; }

.text-width--xs { max-width: 40ch; }
.text-width--sm { max-width: 50ch; }
.text-width--md { max-width: 60ch; }
.text-width--lg { max-width: 70ch; }
.text-width--xl { max-width: 80ch; }

@media (max-width: 544px) {
    .text-center-xs { text-align: center !important; }
}

.text-xs-left { text-align: left !important; }
.text-xs-right { text-align: right !important; }
.text-xs-center { text-align: center !important; }
@media (min-width: 544px) {
    .text-sm-left { text-align: left !important; }
    .text-sm-right { text-align: right !important; }
    .text-sm-center { text-align: center !important; }
}
@media (min-width: 768px) {
    .text-md-left { text-align: left !important; }
    .text-md-right { text-align: right !important; }
    .text-md-center { text-align: center !important; }
}
@media (min-width: 992px) {
    .text-lg-left { text-align: left !important; }
    .text-lg-right { text-align: right !important; }
    .text-lg-center { text-align: center !important; }
}
@media (min-width: 1200px) {
    .text-xl-left { text-align: left !important; }
    .text-xl-right { text-align: right !important; }
    .text-xl-center { text-align: center !important; }
}

.indent-10,
.indent-lv-1 { margin-left: 10px; margin-left: .625rem; }
.indent-20,
.indent-lv-2 { margin-left: 20px; margin-left: 1.250rem; }
.indent-30,
.indent-lv-3 { margin-left: 30px; margin-left: 1.87rem; }
.indent-40,
.indent-lv-4 { margin-left: 40px; margin-left: 2.50rem; }
.indent-50,
.indent-lv-5 { margin-left: 50px; margin-left: 3.12rem; }
.indent-60,
.indent-lv-6 { margin-left: 60px; margin-left: 3.75rem; }
.indent-70,
.indent-lv-7 { margin-left: 70px; margin-left: 4.37rem; }
.indent-80,
.indent-lv-8 { margin-left: 80px; margin-left: 5rem; }
.indent-90,
.indent-lv-9 { margin-left: 90px; margin-left: 5.62rem; }
.indent-100,
.indent-lv-10 { margin-left: 100px; margin-left: 6.250rem; }

/* Test rems */
.p-lv-0 { padding: 0; }
.p-lv-1 { padding: 1rem; }
.p-lv-2 { padding: 1.5rem; }
.p-lv-3 { padding: 2rem; }
.p-lv-4 { padding: 2.5rem; }
.p-lv-5 { padding: 3rem; }
.p-lv-6 { padding: 3.5rem; }
.p-lv-7 { padding: 4rem; }
.p-lv-8 { padding: 5rem; }
.p-lv-9 { padding: 6rem; }
.p-lv-10 { padding: 7rem; }
.p-lv-11 { padding: 8rem; }
.p-lv-12 { padding: 9rem; }
.p-lv-13 { padding: 10rem; }
.p-tb-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.p-rl-0 { padding-left: 0 !important; padding-right: 0 !important; }
.p-t-0 { padding-top: 0 !important; }
.p-r-0 { padding-right: 0 !important; }
.p-b-0 { padding-bottom: 0 !important; }
.p-l-0 { padding-left: 0 !important; }
.p-tb-1 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.p-rl-1 { padding-right: 1rem !important; padding-left: 1rem !important; }
.p-t-1 { padding-top: 1rem !important; }
.p-r-1 { padding-right: 1rem !important; }
.p-b-1 { padding-bottom: 1rem !important; }
.p-l-1 { padding-left: 1rem !important; }
.p-tb-2 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.p-rl-2 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
.p-t-2 { padding-top: 1.5rem !important; }
.p-r-2 { padding-right: 1.5rem !important; }
.p-b-2 { padding-bottom: 1.5rem !important; }
.p-l-2 { padding-left: 1.5rem !important; }
.p-tb-3 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.p-rl-3 { padding-right: 2rem !important; padding-left: 2rem !important; }
.p-t-3 { padding-top: 2rem !important; }
.p-r-3 { padding-right: 2rem !important; }
.p-b-3 { padding-bottom: 2rem !important; }
.p-l-3 { padding-left: 2rem !important; }
.p-tb-4 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
.p-rl-4 { padding-right: 2.5rem !important; padding-left: 2.5rem !important; }
.p-t-4 { padding-top: 2.5rem !important; }
.p-r-4 { padding-right: 2.5rem !important; }
.p-b-4 { padding-bottom: 2.5rem !important; }
.p-l-4 { padding-left: 2.5rem !important; }
.p-tb-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.p-rl-5 { padding-right: 3rem !important; padding-left: 3rem !important; }
.p-t-5 { padding-top: 3rem !important; }
.p-r-5 { padding-right: 3rem !important; }
.p-b-5 { padding-bottom: 3rem !important; }
.p-l-5 { padding-left: 3rem !important; }
.p-tb-6 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
.p-rl-6 { padding-right: 3.5rem !important; padding-left: 3.5rem !important; }
.p-t-6 { padding-top: 3.5rem !important; }
.p-r-6 { padding-right: 3.5rem !important; }
.p-b-6 { padding-bottom: 3.5rem !important; }
.p-l-6 { padding-left: 3.5rem !important; }
.p-tb-7 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.p-rl-7 { padding-right: 4rem !important; padding-left: 4rem !important; }
.p-t-7 { padding-top: 4rem !important; }
.p-r-7 { padding-right: 4rem !important; }
.p-b-7 { padding-bottom: 4rem !important; }
.p-l-7 { padding-left: 4rem !important; }
.p-tb-8 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.p-rl-8 { padding-right: 5rem !important; padding-left: 5rem !important; }
.p-t-8 { padding-top: 5rem !important; }
.p-r-8 { padding-right: 5rem !important; }
.p-b-8 { padding-bottom: 5rem !important; }
.p-l-8 { padding-left: 5rem !important; }
.p-tb-9 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
.p-rl-9 { padding-right: 6rem !important; padding-left: 6rem !important; }
.p-t-9 { padding-top: 6rem !important; }
.p-r-9 { padding-right: 6rem !important; }
.p-b-9 { padding-bottom: 6rem !important; }
.p-l-9 { padding-left: 6rem !important; }
.p-tb-10 { padding-top: 7rem !important; padding-bottom: 7rem !important; }
.p-rl-10 { padding-right: 7rem !important; padding-left: 7rem !important; }
.p-t-10 { padding-top: 7rem !important; }
.p-r-10 { padding-right: 7rem !important; }
.p-b-10 { padding-bottom: 7rem !important; }
.p-l-10 { padding-left: 7rem !important; }
.p-tb-11 { padding-top: 8rem !important; padding-bottom: 8rem !important; }
.p-rl-11 { padding-right: 8rem !important; padding-left: 8rem !important; }
.p-t-11 { padding-top: 8rem !important; }
.p-r-11 { padding-right: 8rem !important; }
.p-b-11 { padding-bottom: 8rem !important; }
.p-l-11 { padding-left: 8rem !important; }
.p-tb-12 { padding-top: 9rem !important; padding-bottom: 9rem !important; }
.p-rl-12 { padding-right: 9rem !important; padding-left: 9rem !important; }
.p-t-12 { padding-top: 9rem !important; }
.p-r-12 { padding-right: 9rem !important; }
.p-b-12 { padding-bottom: 9rem !important; }
.p-l-12 { padding-left: 9rem !important; }
.p-tb-13 { padding-top: 10rem !important; padding-bottom: 10rem !important; }
.p-rl-13 { padding-right: 10rem !important; padding-left: 10rem !important; }
.p-t-13 { padding-top: 10rem !important; }
.p-r-13 { padding-right: 10rem !important; }
.p-b-13 { padding-bottom: 10rem !important; }
.p-l-13 { padding-left: 10rem !important; }

@media (max-width: 700px) {
    .p-lv-4, .p-lv-5, .p-lv-6, .p-lv-7, .p-lv-8, .p-lv-9, .p-lv-10, .p-lv-11, .p-lv-12, .p-lv-13,
    .p-tb-4, .p-rl-4, .p-t-4, .p-r-4, .p-b-4, .p-l-4,
    .p-tb-5, .p-rl-5, .p-t-5, .p-r-5, .p-b-5, .p-l-5,
    .p-tb-6, .p-rl-6, .p-t-6, .p-r-6, .p-b-6, .p-l-6,
    .p-tb-7, .p-rl-7, .p-t-7, .p-r-7, .p-b-7, .p-l-7,
    .p-tb-8, .p-rl-8, .p-t-8, .p-r-8, .p-b-8, .p-l-8,
    .p-tb-9, .p-rl-9, .p-t-9, .p-r-9, .p-b-9, .p-l-9,
    .p-tb-10, .p-rl-10, .p-t-10, .p-r-10, .p-b-10, .p-l-10,
    .p-tb-11, .p-rl-11, .p-t-11, .p-r-11, .p-b-11, .p-l-11,
    .p-tb-12, .p-rl-12, .p-t-12, .p-r-12, .p-b-12, .p-l-12,
    .p-tb-13, .p-rl-13, .p-t-13, .p-r-13, .p-b-13, .p-l-13
    { padding: 2rem !important; }
}

/* Test rems */
.m-lv-0 { margin: 0; }
.m-lv-1 { margin: 1rem; }
.m-lv-2 { margin: 1.5rem; }
.m-lv-3 { margin: 2rem; }
.m-lv-4 { margin: 2.5rem; }
.m-lv-5 { margin: 3rem; }
.m-lv-6 { margin: 3.5rem; }
.m-lv-7 { margin: 4rem; }
.m-lv-8 { margin: 5rem; }
.m-lv-9 { margin: 6rem; }
.m-lv-10 {  margin: 7rem; }
.m-lv-11 {  margin: 8rem; }
.m-lv-12 {  margin: 9rem; }
.m-lv-13 {  margin: 10rem; }
.m-b-0 { margin-bottom: 0 !important; }
.m-l-0 { margin-left: 0 !important; }
.m-r-0 { margin-right: 0 !important; }
.m-rl-0 { margin-right: 0 !important; margin-left: 0 !important; }
.m-t-0 { margin-top: 0 !important; }
.m-tb-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.m-rl-auto { margin-right: auto; margin-left: auto; }
.m-tb-1 { margin-top: .625rem !important; margin-bottom: .625rem !important; }
.m-rl-1 { margin-right: .625rem !important; margin-left: .625rem !important; }
.m-t-1 { margin-top: .625rem !important; }
.m-r-1 { margin-right: .625rem !important; }
.m-b-1 { margin-bottom: .625rem !important; }
.m-l-1 { margin-left: .625rem !important; }
.m-tb-2 { margin-top: 1.25rem !important; margin-bottom: 1.25rem !important; }
.m-rl-2 { margin-right: 1.25rem !important; margin-left: 1.25rem !important; }
.m-t-2 { margin-top: 1.25rem !important; }
.m-r-2 { margin-right: 1.25rem !important; }
.m-b-2 { margin-bottom: 1.25rem !important; }
.m-l-2 { margin-left: 1.25rem !important; }
.m-tb-3 { margin-top: 1.9rem !important; margin-bottom: 1.9rem !important; }
.m-rl-3 { margin-right: 1.9rem !important; margin-left: 1.9rem !important; }
.m-t-3 { margin-top: 1.9rem !important; }
.m-r-3 { margin-right: 1.9rem !important; }
.m-b-3 { margin-bottom: 1.9rem !important; }
.m-l-3 { margin-left: 1.9rem !important; }
.m-tb-4 { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; }
.m-rl-4 { margin-right: 2.5rem !important; margin-left: 2.5rem !important; }
.m-t-4 { margin-top: 2.5rem !important; }
.m-r-4 { margin-right: 2.5rem !important; }
.m-b-4 { margin-bottom: 2.5rem !important; }
.m-l-4 { margin-left: 2.5rem !important; }
.m-tb-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.m-rl-5 { margin-right: 3rem !important; margin-left: 3rem !important; }
.m-t-5 { margin-top: 3rem !important; }
.m-r-5 { margin-right: 3rem !important; }
.m-b-5 { margin-bottom: 3rem !important; }
.m-l-5 { margin-left: 3rem !important; }
.m-tb-6 { margin-top: 3.5rem !important; margin-bottom: 3.5rem !important; }
.m-rl-6 { margin-right: 3.5rem !important; margin-left: 3.5rem !important; }
.m-t-6 { margin-top: 3.5rem !important; }
.m-r-6 { margin-right: 3.5rem !important; }
.m-b-6 { margin-bottom: 3.5rem !important; }
.m-l-6 { margin-left: 3.5rem !important; }
.m-tb-7 { margin-top: 4rem !important; margin-bottom: 4rem !important; }
.m-rl-7 { margin-right: 4rem !important; margin-left: 4rem !important; }
.m-t-7 { margin-top: 4rem !important; }
.m-r-7 { margin-right: 4rem !important; }
.m-b-7 { margin-bottom: 4rem !important; }
.m-l-7 { margin-left: 4rem !important; }
.m-tb-8 { margin-top: 5rem !important; margin-bottom: 5rem !important; }
.m-rl-8 { margin-right: 5rem !important; margin-left: 5rem !important; }
.m-t-8 { margin-top: 5rem !important; }
.m-r-8 { margin-right: 5rem !important; }
.m-b-8 { margin-bottom: 5rem !important; }
.m-l-8 { margin-left: 5rem !important; }
.m-tb-9 { margin-top: 6rem !important; margin-bottom: 6rem !important; }
.m-rl-9 { margin-right: 6rem !important; margin-left: 6rem !important; }
.m-t-9 { margin-top: 6rem !important; }
.m-r-9 { margin-right: 6rem !important; }
.m-b-9 { margin-bottom: 6rem !important; }
.m-l-9 { margin-left: 6rem !important; }
.m-tb-10 { margin-top: 7rem !important; margin-bottom: 7rem !important; }
.m-rl-10 { margin-right: 7rem !important; margin-left: 7rem !important; }
.m-t-10 { margin-top: 7rem !important; }
.m-r-10 { margin-right: 7rem !important; }
.m-b-10 { margin-bottom: 7rem !important; }
.m-l-10 { margin-left: 7rem !important; }
.m-tb-11 { margin-top: 8rem !important; margin-bottom: 8rem !important; }
.m-rl-11 { margin-right: 8rem !important; margin-left: 8rem !important; }
.m-t-11 { margin-top: 8rem !important; }
.m-r-11 { margin-right: 8rem !important; }
.m-b-11 { margin-bottom: 8rem !important; }
.m-l-11 { margin-left: 8rem !important; }
.m-tb-12 { margin-top: 9rem !important; margin-bottom: 9rem !important; }
.m-rl-12 { margin-right: 9rem !important; margin-left: 9rem !important; }
.m-t-12 { margin-top: 9rem !important; }
.m-r-12 { margin-right: 9rem !important; }
.m-b-12 { margin-bottom: 9rem !important; }
.m-l-12 { margin-left: 9rem !important; }
.m-tb-13 { margin-top: 10rem !important; margin-bottom: 10rem !important; }
.m-rl-13 { margin-right: 10rem !important; margin-left: 10rem !important; }
.m-t-13 { margin-top: 10rem !important; }
.m-r-13 { margin-right: 10rem !important; }
.m-b-13 { margin-bottom: 10rem !important; }
.m-l-13 { margin-left: 10rem !important; }

/* Responsive margin utilities in progress */
@media (min-width: 768px) {
    .m-t-md-4 { margin-top: 2.5rem!important; }
    .m-t-sm-5 { margin-top: 3rem !important; }
}

/* Media queries need further testing */
@media (max-width: 700px) {
    .m-lv-4, .m-lv-5, .m-lv-6, .m-lv-7, 
    .m-lv-8, .m-lv-9, .m-lv-10, .m-lv-11, 
    .m-lv-12, .m-lv-13
    { margin: 2rem !important; }

    .m-tb-4, .m-tb-5, .m-tb-6, .m-tb-7,
    .m-tb-8, .m-tb-9, .m-tb-10, .m-tb-11,
    .m-tb-12, .m-tb-13
    { margin-top: 2rem !important; margin-bottom: 2rem !important; }

    .m-rl-4, .m-rl-5, .m-rl-6, .m-rl-7,
    .m-rl-8, .m-rl-9, .m-rl-10, .m-rl-11,
    .m-rl-12, .m-rl-13
    { margin-right: 2rem !important; margin-left: 2rem !important; }

    .m-t-4, .m-t-5, .m-t-6, .m-t-7,
    .m-t-8, .m-t-9, .m-t-10, .m-t-11,
    .m-t-12, .m-t-13
    { margin-top: 2rem !important; }

    .m-r-4, .m-r-5, .m-r-6, .m-r-7,
    .m-r-8, .m-r-9, .m-r-10, .m-r-11,
    .m-r-12, .m-r-13
    { margin-right: 2rem !important; }

    .m-b-4, .m-b-5, .m-b-6, .m-b-7,
    .m-b-8, .m-b-9, .m-b-10, .m-b-11,
    .m-b-12, .m-b-13
    { margin-bottom: 2rem !important; }

    .m-l-4, .m-l-5, .m-l-6, .m-l-7,
    .m-l-8, .m-l-9, .m-l-10, .m-l-11,
    .m-l-12, .m-l-13
    { margin-left: 2rem !important; }
}

/* Utility: Widths */
.w-10 { width: 10%; }
.w-20 { width: 20%; }
.w-30 { width: 30%; }
.w-40 { width: 40%; }
.w-50 { width: 50%; }
.w-60 { width: 60%; }
.w-70 { width: 70%; }
.w-80 { width: 80%; }
.w-90 { width: 90%; }
.w-100 { width: 100%; }
.full-width { display: block; width: 100% !important; max-width: 100% !important; }

/* Utility: position */
.pos-static { position: static!important; }
.pos-relative { position: relative!important; }
.pos-absolute { position: absolute!important; }
.pos-fixed { position: fixed!important; }
.pos-sticky { position: sticky!important; }

.center-block,
.center-block-xs { display: block; margin-right: auto; margin-left: auto; } /* Block element needs a specified width. */
div[class*="col"].center-block { float: none; }
@media (min-width: 544px) {
    .center-block-sm { display: block; margin-right: auto; margin-left: auto; }
}
@media (min-width: 768px) {
    .center-block-md { display: block; margin-right: auto; margin-left: auto; }
    .order-status-display .filter-dropdown { margin-left: auto; }
}
@media (min-width: 992px) {
    .center-block-lg { display: block; margin-right: auto; margin-left: auto; }
}
@media (min-width: 1200px) {
    .center-block-xl { display: block; margin-right: auto; margin-left: auto; }
}

.border-top { border-top: 1px solid var(--clr-gray-150); padding-top: 15px; }
.border-right { border-right: 1px solid var(--clr-gray-150); padding-right: 15px; }
.border-bottom { border-bottom: 1px solid var(--clr-gray-150); padding-bottom: 15px; }
.border-left { border-left: 1px solid var(--clr-gray-150); padding-left: 15px; }
.border-none { border: none !important; }

.z-depth-1-in { box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16) inset,0 2px 10px 0 rgba(0,0,0,0.12) inset; }
.z-depth-2-in { box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2) inset,0 6px 20px 0 rgba(0,0,0,0.19) inset; }
.z-depth-3-in { box-shadow: 0 12px 15px 0 rgba(0,0,0,0.24) inset,0 17px 50px 0 rgba(0,0,0,0.19) inset; }
.z-depth-4-in { box-shadow: 0 16px 28px 0 rgba(0,0,0,0.22) inset,0 25px 55px 0 rgba(0,0,0,0.21) inset; }
.z-depth-5-in { box-shadow: 0 27px 24px 0 rgba(0,0,0,0.2) inset,0 40px 77px 0 rgba(0,0,0,0.22) inset; }
.z-depth-0 { box-shadow: none !important; }
.z-depth-1-out { box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); }
.z-depth-2-out { box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); }
.z-depth-3-out { box-shadow: 0 12px 15px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); }
.z-depth-4-out { box-shadow: 0 16px 28px 0 rgba(0,0,0,0.22),0 25px 55px 0 rgba(0,0,0,0.21); }
.z-depth-5-out { box-shadow: 0 27px 24px 0 rgba(0,0,0,0.2),0 40px 77px 0 rgba(0,0,0,0.22); }

.embed-responsive { position: relative; display: block; height: 0; padding: 0; overflow: hidden; }
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; }
.embed-responsive-21by9 { padding-bottom: 42.857143%; }
.embed-responsive-16by9 { padding-bottom: 56.25%; }
.embed-responsive-4by3 { padding-bottom: 75%; }
.embed-responsive-1by1 { padding-bottom: 100%; }

/* Inverse Content Styles */
.inverse-content * { color: #FFFFFF; -webkit-font-smoothing: antialiased; }
.inverse-content a { color: #FFFFFF; font-weight: 900; text-decoration: underline; }
.inverse-content a:hover { color: #FFFFFF; }
.inverse-content a .fa { color: inherit !important; }
.inverse-content .btn { opacity: 1; text-decoration: none; }
.inverse-content li.article:before,
.inverse-content li.external:before,
.inverse-content li.pdf:before,
.inverse-content li.pdp:before,
.inverse-content li.webcast-download:before,
.inverse-content ul.checks li:before,
.inverse-content ul.square li:before,
.inverse-content .list-has-icons>li:before { color: #FFFFFF; color: rgba(255, 255, 255, 0.85); -webkit-font-smoothing: antialiased; }
.inverse-content a .card-img-top { text-decoration: none; text-indent: -9999px; overflow: hidden; }
.inverse-content a[data-filetype=phone] { text-decoration: none; }
.inverse-content .bg-white * { color: #292a26; font-weight: initial; }

.text-underline { text-decoration: underline !important; }
.font-weight-normal { font-weight: 400; }

.links-gray-lv-1 a { color: #6E6F66; }

.display-inline { display: inline !important; }
.display-inline-block { display: inline-block !important; }
.display-block { display: block !important; }

.flex-container { display: flex; flex-wrap: wrap; }
.flex { display: -ms-flexbox; display: flex; }
.inline-flex { display: -ms-inline-flexbox; display: inline-flex; }
.flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; }
.flex-nowrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
.flex-row { -ms-flex-direction: row; flex-direction: row; }
.flex-row-reverse { -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
.flex-column { -ms-flex-direction: column; flex-direction: column; }
.flex-column-reverse { -ms-flex-direction: column-reverse; flex-direction: column-reverse; }
.flex-auto { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; min-height: 0; }
.align-items-start { -ms-flex-align: start; align-items: flex-start; }
.align-items-end { -ms-flex-align: end; align-items: flex-end; }
.align-items-center { -ms-flex-align: center; align-items: center; }
.align-items-baseline { -ms-flex-align: baseline; align-items: baseline; }
.align-items-stretch { -ms-flex-align: stretch; align-items: stretch; }
.align-self-start { -ms-flex-item-align: start; align-self: flex-start; }
.align-self-end { -ms-flex-item-align: end; align-self: flex-end; }
.align-self-center { -ms-flex-item-align: center; align-self: center; }
.align-self-baseline { -ms-flex-item-align: baseline; align-self: baseline; }
.align-self-stretch { -ms-flex-item-align: stretch; align-self: stretch; }
.justify-content-start { -ms-flex-pack: start; justify-content: flex-start; }
.justify-content-end { -ms-flex-pack: end; justify-content: flex-end; }
.justify-content-center { -ms-flex-pack: center; justify-content: center; }
.justify-content-between { -ms-flex-pack: justify; justify-content: space-between; }
.justify-content-around { -ms-flex-pack: distribute; justify-content: space-around; }
.justify-content-evenly { justify-content: space-evenly; }
.align-content-start { -ms-flex-line-pack: start; align-content: flex-start; }
.align-content-end { -ms-flex-line-pack: end; align-content: flex-end; }
.align-content-between { -ms-flex-line-pack: justify; align-content: space-between; }
.align-content-around { -ms-flex-line-pack: distribute; align-content: space-around; }
.align-content-stretch { -ms-flex-line-pack: stretch; align-content: stretch; }

/* Accessibility */
/* has-focus styles are for dynamic actionable items and not for static purposes */
.has-focus { outline: 3px dotted red; }
.has-focus.has-blue-outline { outline-color: blue; }
.has-focus.has-yellow-outline { outline-color: yellow; }
.has-focus.outline-offset-lv-0 { outline-offset: 0; position: relative; z-index: 1; }
.has-focus.outline-offset-lv-1 { outline-offset: .25rem; }
.has-focus.outline-offset-lv-2 { outline-offset: .5rem; }
.has-focus.outline-offset-lv-3 { outline-offset: .75rem; }
.has-focus.outline-offset-lv-4 { outline-offset: 1rem; }

:focus .inverse-content { outline: 3px dotted red !important; }
.inverse-content a:focus { outline: 3px dotted yellow !important; outline-offset: 2px; }
button:focus,
.btn:focus { outline: 3px dotted red; outline-offset: 2px; }
.btn-text:focus { text-decoration: underline; }
.questionanswer-display h3:focus,
.review-display h3:focus { outline: 3px dotted red; }

/* Defect ID: 002  - visible focus on dark background */
.contentRecommendationWidget a:focus,
.contentRecommendationWidget *:focus { outline: 2px dotted red !important; outline-offset: 3px; }

/* Defect ID: 008  (IE ONLY) */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .collapsible > .content { overflow:visible; }
}

/* Defect ID: 026 (IE ONLY) */
@media all and (-ms-high-contrast: none), 
	(-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    div#relatedSolutions__display { overflow:visible; }
}

/* Test for performance hit */
.lazyload,
.lazyloading { opacity: 0.2; }
.lazyloaded { opacity: 1; transition: opacity 300ms; }

/* Defect ID: 086 */
#content a { word-wrap: break-word; }

/* whatintent styles for accessibility */
html[data-whatintent="mouse"] *:focus,
html[data-whatintent="touch"] *:focus,
html[data-whatintent="mouse"] *:active,
html[data-whatintent="touch"] *:active { outline: 0 !important; }
/* whatintent styles need to be tested. they might not be necessary anymore. */
[data-whatintent=mouse] .btn:focus,
[data-whatintent=mouse] a:active,
[data-whatintent=mouse] a:focus,
[data-whatintent=mouse] button:focus,
[data-whatintent=touch] .btn:focus,
[data-whatintent=touch] a:active,
[data-whatintent=touch] a:focus,
[data-whatintent=touch] button:focus,
[data-whatintent=touch] a:active,
[data-whatintent=touch] a:focus .inverse-content,
[data-whatintent=touch] .inverse-content a:focus,
[data-whatintent=touch] .questionanswer-display h3:focus,
[data-whatintent=touch] .review-display h3:focus,
[data-whatintent=touch] .contentRecommendationWidget a:focus,
[data-whatintent=touch] .contentRecommendationWidget *:focus,
[data-whatintent=mouse] #add2CartBtn:focus,
[data-whatintent=touch] #add2CartBtn:focus { outline: 0!important; }

/* IE Fixes */
.ie11 .header__main-nav .header__main-nav--desktop .navbar-nav .dropdown-menu .top-category.dropdown-menu__item { width: 75%; }
.ie11 .featured-products .owl-item { display: block !important; }
.ie11 .owl-carousel .owl-nav button span { margin-top: -12px; }
.ie11 .checkout__cart div[data-slot-id='2'],
.ie11 .checkout__cart div[data-slot-id='3'],
.ie11 .checkout__item.checkout__login,
.ie11 .checkout__item.checkout__guest,
.ie11 .checkout__item.checkout__register { display: inline-block; margin: 1rem; }
.ie11 .checkout__cart div[data-slot-id='3'] { float: right; }
.ie11 .checkout__cart div[data-slot-id='4'] .checkout__order-items { float: left; margin-right: 1rem; width: calc(75% - 1rem); }
.ie11 .checkout__cart div[data-slot-id='4'] .checkout__aside { float: left; width: 25%; }
.ie11 .checkout__cart div[data-slot-id='7'] { clear: both; display: block; margin: 2rem; }
.ie11 .checkout__cart .checkout__order-items .card .card-block { flex-direction: row; flex-wrap: wrap; }
.ie11 .checkout__cart .checkout__order-items .card .card-block .item__image { display: inline-block; float: left; margin-right: 2rem; }
.ie11 .checkout__cart .checkout__order-items .card .card-block .item__desc { display: inline-block; float: left; width: 60%; }
.ie11 .checkout__cart .checkout__order-items .card .card-block .item__total { position: absolute; right: 11px; top: 11px; }
.ie11 .checkout__cart .checkout__order-items .card .card-block .item__qty { clear: both; margin-left: 19%; width: 100%; }
.ie11 .checkout__cart .checkout__order-items .card.order-items--subs .card-block .item__qty { margin: 1rem 0 0; }
.ie11 .checkout__cart .checkout__order-items .card .card-block .item__controls { margin: 1rem 0 1rem 19%; width: 100%; }
.ie11 .checkout__cart .checkout__order-items .card.is-soft-delete .card-block { display: flex; flex-direction: row; justify-content: space-between; }
.ie11 .checkout__cart .checkout__order-items .card.is-soft-delete .card-block .item__controls { margin: 1rem; width: auto; }
.ie11 .checkout__sign-in > div { float: left; width: calc(50% - 2rem); }
.ie11 .checkout__withorder .checkout__header,
.ie11 .checkout__withorder div[class*=checkout__cta] { margin: 2rem; text-align: center; }
.ie11 .checkout__withorder .checkout__products { clear: both; display: flex; flex-wrap: wrap; }
.ie11 .checkout__withorder .checkout__products .card { margin: .75rem; width: calc(100% - 2rem); }
.ie11 .checkout__cart .checkout__order-items .card.order-items--eld .card-block .item__controls { margin-left: 0; }
@media screen and (min-width: 600px) {
	.ie11 .checkout__withorder .checkout__products .card { width: calc(50% - 2rem); }
}
@media only screen and (max-width: 950px) {
	.ie11 .checkout__cart div[data-slot-id='4'] .checkout__order-items { width: calc(65% - 1rem); }
    .ie11 .checkout__cart div[data-slot-id='4'] .checkout__aside { width: 35%; }
}
@media only screen and (max-width: 767px) {
	.ie11 .checkout__cart div[data-slot-id='4'] .checkout__order-items,
    .ie11 .checkout__cart div[data-slot-id='4'] .checkout__aside { width: 100%; }
}
@media screen and (min-width: 975px) {
	.ie11 .checkout__withorder .checkout__products .card { width: calc(33.333333% - 2rem); }
}
@media screen and (min-width: 1230px) {
    .ie11 .checkout__withorder .checkout__header,
    .ie11 .checkout__withorder div[class*=checkout__cta] {  text-align: left; }
    .ie11 .checkout__withorder .checkout__header { float: left; }
    .ie11 .checkout__withorder div[class*=checkout__cta] { float: right; }
	.ie11 .checkout__withorder .checkout__products .card { width: calc(25% - 2rem); }
}
@media screen and (max-width: 500px) {
    .ie11 .checkout__cart .checkout__order-items .card .card-block .item__desc { width: 50%; }
    .my-orders .dataTables_paginate .first, .my-orders .dataTables_paginate .previous, .my-orders .dataTables_paginate .next, .my-orders .dataTables_paginate .last {
    padding: 0 1px; }
    .my-orders .dataTables_paginate span a { margin-left: 5px; padding: 9px 11px; }
}
@media screen and (max-width: 749px) {
    .ie11 .checkout__sign-in > div { float: left; width: 100%; }
}

/* Advantage2.0 styles */
.form-control-feedback { width: 40px; height: 40px; display: none; }
.has-feedback label~.form-control-feedback { top: 28px; font-size: 2rem; display: grid; place-items: center; }
.has-error .form-control-feedback { color: var(--clr-danger); }
.has-success .form-control-feedback { color: var(--clr-success); }
.success-validate-msg { color: #3c763d; font-weight: 700; }
.bill-shipto.help-block { color: #595959 !important;}
.userregPassword-utilities.userregform { display: flex; flex-direction: row; justify-content: space-between; margin-bottom: 1rem; padding: 1rem 0; }
.userregPassword-utilities.userregform .form-group { width: 47%; }
#register .address-form .address-form-row { display: flex; flex-direction: row; justify-content: space-between; padding: 1rem 0; }
#register .address-form .address-form-row .form-group { width: 47%; }
@media screen and (min-width: 768px) and (max-width: 1150px) {
    .userregPassword-utilities.userregform { flex-direction: column;}
    .userregPassword-utilities.userregform .form-group { width: 100%; }
    #register .address-form .form-group.phone1 { width: 100%; }
    #register .address-form .address-form-row { flex-direction: column;}
    #register .address-form .address-form-row .form-group { width: 100%; }
}
@media screen and (max-width: 580px) {
    .userregPassword-utilities.userregform { flex-direction: column; }
    .userregPassword-utilities.userregform .form-group { width: 100%; }
    #register .address-form .form-group.phone1 { width: 100%; }
    #register .address-form .address-form-row{ flex-direction: column; }
    #register .address-form .address-form-row .form-group { width: 100%; }
}
#registration-area .centered { float: none; margin: 0 auto; }
#registration-area #logonPasswordVerifyJSSuccess{ font-weight: 700; color: var(--clr-success); }
input[type="password"]::-ms-reveal {
    display: none;
}

.alert-dismissible .close { font-size: 1.8em; opacity: .8; background-color: transparent; box-shadow: none; position: absolute; right: 1.2rem; top: 0.8rem; }
.alert-dismissable,
.alert-dismissible { padding-right: 40px; }
.my-account--hub .right-container .alert { margin: 2%; }

.reset-password .section__content { margin: 2em auto; padding: 1.5em; }
.reset-password form .btn { margin: 2em auto; display: block; width: 100%; max-width: 150px; }
@media screen and (min-width: 450px) {
    .reset-password .section__content { max-width: 362px; margin: 6em auto; padding: 0; }
}

/* Advantage2.0 Account page styles */
.card-header.myaccount { border-bottom: none;}
.card.myaccount { border: none; box-shadow: none; padding-left:10%;}
.card.myaccount.billaddress{position: relative;}
.card.myaccount.billaddress:before {content: "";display: block;height: 70%;width: 1px;overflow: hidden;background: var(--clr-gray-150);position: absolute;left: 90%;bottom: 20%;}
#myAccountHub { display:flex;}
#myAccountHub .left-container{width: 25%; margin:0px;margin-right:12px;}
#myAccountHub .left-container .leftmenu { margin-bottom:32px; }
#myAccountHub .right-container{width: 80%;}
#myAccountHub .accountsection{ display: flex; justify-content:space-between;}
#myAccountHub section { margin: 2%;}
.blocks-3up.myaccount { border-radius: .6rem; border:1px solid var(--clr-gray-150); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.08); }
.my-account-display .content-area { padding-top: 3%;}
#myAccountHub section.orderhistory { width: 48%; padding:2%; border-radius: .6rem; border:1px solid var(--clr-gray-150); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.08);}
#myAccountHub section.orderhistory h4{display: inline-block; }
#myAccountHub section.orderhistory > a {margin-left: 47%;}
#myAccountHub .card.myaccount .card-subtext{position: absolute;bottom: 0;left: 0;font-size: 12px;font-weight: 400;}
.table.myaccount{border: none;}
thead.myaccount{ display: none;}
.table.myaccount tbody tr td {border: none;border-top: none;position: relative;}
.table.myaccount tbody tr td:before {  content: "";display: block;height: 1px;overflow: hidden;background: var(--clr-gray-150);position: absolute;left: 9px;right: -10px;bottom: 0;}
.table.myaccount tbody tr td:last-child:before {left: 0;right: 40px;}
@media screen and (max-width: 580px) {
#myAccountHub { flex-direction: column;}
#myAccountHub .accountsection{ flex-direction: column;}
.card.myaccount.billaddress:before {    height: 1px;width: 85%;left: 0%;bottom: 0%;}
#myAccountHub .left-container{width: 100%;margin-right:0px;}
#myAccountHub .right-container{width: 100%;}
#myAccountHub .right-container > section > header > h1 {text-align: center;}
#myAccountHub section.orderhistory { width: 100%; float: none;}
#myAccountHub section.orderhistory > a {margin-left: 47%;}
}
/* ------- Profile Builder Changes START --------- */

.profile-builder.centered { float: none;margin: 0 auto;text-align: center;margin-top: 24px;margin-bottom: 48px;}
.profile-builder .question{margin: 16px 0px 16px 0px;}
.profile-builder .options{margin: 28px 0px 16px 0px;}
.profile-builder .options.states{text-align:initial;}
.profile-builder .options.states .state-3column-list{-webkit-column-count: 3;-moz-column-count: 3;column-count: 3;padding-left: 24px;}
#profileBuilderPage2 .question .question a:first-child{margin-right:16px;}
#profileBuilderPage2 .text-link--collapse.icon--right[data-toggle="collapse"]:after {color: var(--clr-gray-600);font-family: 'FontAwesome';line-height: 1;margin-left: 0;-webkit-font-smoothing: antialiased;transition: transform .25s linear;}
#profileBuilderPage2 .text-link--collapse.icon--right[aria-expanded="true"]:after {content: '\f106';}
#profileBuilderPage2 .text-link--collapse.icon--right[aria-expanded="false"]:after {content: '\f107';}
#profileBuilderPage2 .checkbox label input[type="checkbox"]:checked + span{font-weight:700;}
#profileBuilderPage3 .options.empcount{display: flex;flex-direction: row;-ms-flex-pack: justify; justify-content: space-between;}
.profile-builder .options .checkbox.inline-block + a{display: none;}
@media screen and (max-width: 580px) {
	.profile-builder .options.states .state-3column-list{-webkit-column-count: 1;-moz-column-count: 1;column-count: 1;}
	#profileBuilderPage2 .options.states .collapse__item{ display:unset;}
	.profile-builder .options.states{margin-left: 16px;}
	.profile-builder .options .checkbox.inline-block{display: inline-block;}
	.profile-builder .options .checkbox.inline-block + a{display: inline-block;float: right;margin-right: 28px;transform: scale(1.5);}
	#profileBuilderPage3 .options.empcount{flex-direction: column;text-align: left;margin-left: 16px;}
	#profileBuilderPage3 .options label{margin-bottom: 8px;}
}
@media screen and (min-width: 580px) {
	.profile-builder .options.states .state-3column-list .collapse{display: block;}
}
.profile-builder .box:hover {background-color: #e7f5ff;border: 3px solid var(--clr-link);}
#profileBuilderPage3  label input[type="radio"] + span{font-weight:300;}
#profileBuilderPage3  label input[type="radio"]:checked + span{font-weight:700;}
#profileBuilderPage3,#profileBuilderPage4{max-width: 1300px;}
#profileBuilderPage1 input[type="radio"] , #profileBuilderPage3 input[type="checkbox"] , #profileBuilderPage4 input[type="checkbox"] {
position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);
}
#profileBuilderPage1 input[type="radio"]:focus-visible + .box,#profileBuilderPage3 input[type="checkbox"]:focus-visible + .box,#profileBuilderPage4 input[type="checkbox"]:focus-visible + .box{
outline: var(--focus-state-outline); outline-offset: var(--focus-state-offset);
}
#profileBuilderPage1  input[type="radio"]:checked + .box , #profileBuilderPage3  input[type="checkbox"]:checked + .box , #profileBuilderPage4  input[type="checkbox"]:checked + .box{background-color: #E7F5FF;border: 3px solid var(--clr-link);}
#profileBuilderPage1  input[type="radio"]:checked + .box  span ,  #profileBuilderPage3  input[type=checkbox]:checked + .box  span , #profileBuilderPage4  input[type=checkbox]:checked + .box  span{color: #43443f;}
.profile-builder  .box {width: 138px;height: 116px;background-color: white;display: inline-block;text-align: center;cursor: pointer;position: relative;border: 3px solid #A1A299;border-radius: 8px;margin-left: 24px;}
.profile-builder  .box  span {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);user-select: none;color: #43443f;}
.profile-builder  .box  span:before {display: block;opacity: 0;transition: all 300ms ease-in-out;color: #43443f;}  
.stepper-wrapper-container{display: flex;justify-content: center;}
.stepper-wrapper {max-width:1200px;width: 100%;font-family: Arial;margin-top: 50px;display: flex;justify-content: space-between;margin-bottom: 20px;text-align:center;}
@media screen and (max-width: 580px) {
	.stepper-wrapper {transform: scale(0.9);}
	.step-name{font-size: 14px;}
}
.stepper-item {position: relative;display: flex;flex-direction: column;align-items: center;flex: 1;}
.stepper-item::before {position: absolute;content: "";border-bottom: 5px solid #E0E0E0;width: 100%;top: 20px;left: -50%;z-index: 2;}
.stepper-item::after {position: absolute;content: "";border-bottom: 5px solid #E0E0E0;width: 100%;top: 20px;left: 50%;z-index: 2;}
.stepper-item .step-counter {position: relative;z-index: 5;display: flex;justify-content: center;align-items: center;  margin-bottom: 6px;background:white;}
.stepper-item.active {font-weight: bold;}
.stepper-item.completed::after {position: absolute;content: "";border-bottom: 5px solid #006FBD;width: 100%;top: 20px;left: 50%;z-index: 3;}
.stepper-item:first-child::before {content: none;}
.stepper-item:last-child::after {content: none;}
.step-counter a,.step-name a {text-decoration: none;color: inherit;font-weight: inherit;}

/* ------- Profile Builder Changes END --------- */

/* ------------------- Topic Index CSS Start ----------------- */

/* Topic Index: Navigation */
.breadcrumb,
.regsense_breadcrumb { background-color: none; font-size: 14px; }
.regsense_back { vertical-align: middle; }
.regsense_back:hover { text-decoration: underline; }
.back-nav { margin: 2.4rem 0; padding-left: 0px; }

/* Topic Index */
.container.rs-container-min-height { max-width: 1200px; width: initial; }
.container.rs-container-min-height .container { width: inherit; }
.topics-search { padding-left: 0; margin-top: 10px;}
.topics-search .glyphicon-remove { font-family: 'FontAwesome'; font-style: normal; }
.topics-search .glyphicon-remove:before { color: var(--clr-gray-700); content: "\f00d"; font-size: 2rem; }
.topics-search button { padding: 1rem 1.6rem; }
.main-title {max-width: 1200px; margin: 2.4rem auto 1.6rem;}
.rs-container-min-height {min-height: 50vh;}

#TopicsContainer .pagination { margin: 2.4rem 0; border-radius: 0; }
#TopicsContainer .pagination > .active > a { color: var(--clr-link) !Important; text-decoration: underline; background-color: white; }
#TopicsContainer .pagination>.active>a, 
#TopicsContainer .pagination>.active>a:focus, 
#TopicsContainer .pagination>.active>a:hover, 
#TopicsContainer .pagination>.active>span, 
#TopicsContainer .pagination>.active>span:focus, 
#TopicsContainer .pagination>.active>span:hover { color: #fff; background-color: var(--clr-gray-200); }
#TopicsContainer .pagination>li>a:focus, 
#TopicsContainer .pagination>li>a:hover, 
#TopicsContainer .pagination>li>span:focus, 
#TopicsContainer .pagination>li>span:hover { color: #23527c; background-color: var(--clr-gray-100); }
#TopicsContainer .pagination > li > a, 
#TopicsContainer .pagination > li > span { border: none !important; color: var(--clr-body); font-size: 2.4rem; font-weight: 400; }
#TopicsContainer .pagination>.disabled>a, 
#TopicsContainer .pagination>.disabled>a:focus,
#TopicsContainer .pagination>.disabled>a:hover, 
#TopicsContainer .pagination>.disabled>span, 
#TopicsContainer .pagination>.disabled>span:focus, 
#TopicsContainer .pagination>.disabled>span:hover { color: #777; cursor: not-allowed; background-color: #fff; }

#TopicsContainer .list-group li { display: block; }
#TopicsContainer .list-group li > span:first-child { background-color: revert; color: var(--clr-gray-600); display: block !important; font-size: 2.4rem; padding: revert; }
#TopicsContainer .list-group-flush > .list-group-item { border-width: 0 0 1px; background: none; padding: 1.6rem 0; }
#TopicsContainer .list-group-flush > .list-group-item br { display: none; }
#TopicsContainer .list-group-flush > .list-group-item a { color: var(--clr-body); display: block; font-weight: 400; margin-bottom: .8rem; width: fit-content; }
#TopicsContainer .list-group-flush > .list-group-item a:hover { text-decoration: underline; }
#TopicsContainer .list-group .list-group-item .no-search-result-span {color: var(--clr-gray-800); font-size: var(--font-body); font-weight: 400; }

/* Topic Details */

.container.topicdetails{margin-right: auto;margin-left: inherit;}

.breadcrumb , .regsense_breadcrumb , .regsense_breadcrumb div#widget_breadcrumb>ul li{ background: none; font-size: 14px; }
.rs-details-lpad .regsense-details-summary-title { color: var(--clr-headline); font-family: var(--font-headline); font-size: 1.75em; font-weight: 700; margin-bottom: 3.2rem; }
.rs-details-lpad .topicSubDetail { display: block; color: var(--clr-headline); font-family: var(--font-headline); font-size: 1.47em; font-weight: 700; line-height: 1.25; margin-bottom: .8rem; }
.rs-details-lpad .col-md-12 > .row { margin-bottom: 3.2rem; }
.rs-details-lpad br { display: none; }
.rs-details-lpad a { color: var(--clr-body); display: block; font-weight: 400; margin-bottom: .8rem; width: fit-content; }
.rs-details-lpad a:hover{text-decoration: underline;}
.rs-details-lpad .showmore { color: var(--clr-link); }
.rs-details-lpad .card { border: none; box-shadow: none; margin-bottom: 0; }
.rs-details-lpad .col-md-12{padding-left: unset;}

/* Details Summary */
.regsense-details-summary-title { color: var(--clr-headline); font-family: var(--font-headline); font-size: 1.75em; font-weight: 700; margin-bottom: 3.2rem; max-width: 1200px;letter-spacing: 1.5px;margin-bottom: 1%; }
#topicIndex { max-width: 1200px; margin: auto; }
#topicIndex .main-article h2 { font-size: 2.2rem; margin: 2.4rem 0 .8rem; }
#topicIndex .main-article h3 { font-size: 1.47em; margin: 2.4rem 0 .8rem;}
#topicIndex .main-article a { color: var(--clr-link); display: inline-block; font-weight: 700; margin-bottom: revert; width: revert; }
.main-article .img-fluid { display: block; margin-bottom: .8rem; }
#topicIndex .supp-article { max-width: 300px; }
#topicIndex .supp-article div + div { margin-top: 1.6rem; }
#topicIndex .supp-article div label { margin: 0 0 .4rem;}
.regsense-topics-metada { word-wrap: break-word; }

/* Utilities */
.marginTop8,
.rs-marginTop8 { padding: 0px; margin-top: .5em; }
.rs-marginTop40 { margin-top: 2.5em; }

/* ------------------- Topic Index CSS End ----------------- */

/* Imprint Seals - Logo upload */
#imprintSeals-logo-file {
	visibility: hidden;
}

/* Advantage SDS styles*/
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
height: 2rem;
width: 2rem;
border-radius: 50em;
background: url(https://cdn.jjkeller.com/wcsstore/CVCatalogAssetStore/images/global/icons/svg/fontawesome/v5/regular/times.svg) no-repeat 50% 50%;
background-size: contain;
opacity: .7;
pointer-events: all;
}
/* OKTA Landing Page */
#oktaLandingPageBackground { display: none; position: fixed; height: 100%; width: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); z-index: 3001; }

.my-account-nav .dropdown-menu { margin: 0; padding: 2.4rem 1.8rem; width: 300px; }
.my-account-nav .dropdown.dropdown__container.open ul { display: grid; gap: 2em; }
.my-account-nav .dropdown-menu .dropdown-item { display: grid; gap: 2em; margin: 0; }
.my-account-nav .dropdown-menu button { border: none; text-transform: revert; }
.my-account-nav .dropdown-menu .jjk-properties { gap: 1em; }
.my-account-nav .dropdown-menu .jjk-properties h2 { font-size: 1.8rem; font-weight: var(--fw-semi-bold); }
.my-account-nav .dropdown-menu .jjk-properties .jjk-properties-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5em; row-gap: 1.5em; }
.my-account-nav .dropdown-menu .jjk-properties nav a { place-items: center; width: 100% }
.my-account-nav .dropdown-menu .divider { margin: 0; } /* bootstrap override */


.or-divider {   display: flex;   align-items: center;   margin: 40px 0; } 
.or-line {   flex: 1;   height: 1px;   background-color: #ccc; } 
.or-text {   padding: 0 10px;   color: #323638; }
.checkout-login-box {     border: 1px solid #ccc;     padding: 48px;     width: 768px;     margin: 100px auto;     background-color: white; } 
@media (max-width: 580px) {     .checkout-login-box {         width: 80%;         margin: 20px auto; }}
.login-page-col {margin-top: 30px;}
.txt-margin { margin: 8px 0.5rem 32px; }
.txt-margin-left { margin: 8px 0rem 32px; }
.no-margin {padding-left: 0px; padding-right: 0px;}
.no-gap {gap:0em; padding:0px; padding-bottom: 0px; padding-top: 0px}
.h1-checkout {font-size: 32px;}
.user_logon_form_page-gen { max-width: 1048px; margin: auto; }
.user_logon_form_page-gen > .col-sm-6:nth-child(3n) { display: flex; flex-direction: column; }
.user_logon_form_page-gen { display: flex; justify-content: space-between; }
.user_logon_form_page-gen .dividerGen--vertical { margin: 2em 0; }
.dividerGen--vertical { display: inline-block; border-left: 1px solid var(--clr-gray-100); width: 1px; }
.or--dividerGen { display:none; }
.user_logon_form_page-gen { display: flex; }
 @media screen and (max-width: 768px){       
.user_logon_form_page-gen { flex-direction: column; align-items: center; max-width: 400px; }
.user_logon_form_page-gen .dividerGen--vertical { border-bottom: 1px solid var(--clr-gray-100); border-left: 0; width: 100% !important; display: flex; justify-content: center; align-items: center; height: 1px;}
.or--dividerGen { display:block; padding: 0 10px; font-size: 14px; background-color: white;}
}
.layoutMemberHeading { padding-bottom: 1.5rem; }
.layoutMemberHeadingAlignment { text-align: center; }
.oktaregpage-separator { border-bottom: 1px solid lightgray; }
.oktaregpage-toi-content { padding: 1.5rem 0; }
.okta-registration-area { padding: 4.75rem 0; }
.signIn-checkout-padding { padding: 2.5rem; }
@media (max-width: 700px) { .signIn-checkout-padding { padding: 1.5rem; } }
.pers-info-block { padding-bottom: 1.5rem; }
#email-text, #pwd-summary, #profile-summary { margin-top: 0.5rem; }
#profile-summary > ul > li.userDetails { margin-bottom: 0.5rem; }
.pers-info-block > .card > .card-block > h4.card-title.display-inline { font-family: 'Open Sans'; font-weight: 400; }
#emailSection, #passwordSection, #profileSection { border-radius: 0rem; box-shadow: none; margin-bottom: 1.5rem; }
/* COC-2548 - Imprint Seals Personalization Model Overlay Styles */
input.is-checkbox:checked:after, input.is-checkbox:after {
 visibility: visible; font-family: FontAwesome; height: 15px; width: 15px; position: relative; top: -3px; left: 0px; background-color:#FFF; display: inline-block; color: #6B6B6B !important;}
input.is-checkbox:checked:after { content: '\f14a'; }
input.is-checkbox:after { content: '\f096'; }