/*
This will be parsed only with the `grunt less:develop` command.

Production build will NOT load the extra dev files.

This is good for apps that will ONLY load in developer mode.

NOTE: Important to ALWAYS define app specific styles under a `body.app_specific_class` so that it does not change global
styles and affects other apps!!

@author Alex Ghiban <alex@fortnine.ca>
 */
/**
Global less file for all apps.

This should hold styles that need to affect all apps and overall design of ALL the apps.

The compilation of all the sources here-in should result in the `styles.css` file that will be injected on all pages in
all the sub-apps.

DO NOT add app-specific CSS or JavaScript here. Each app should include the JS libraries and styles it needs.
If any of the libraries need to be rendered on all pages, then they need to provide them to the context so that the
`root.html` template renders them accordingly.

@author Alex Ghiban <alex@fortnine.ca>
 */
/**
Import Storefront Styles and extra
 */
/**
Builder for the storefront less/css code.
Notes:
- This is only responsible from gathering all the LESS styles that matter to system and import them into the build.
- All irrelevant files should be left out (commented)
- Use and extra storefront file to import smirches that we might need.

NOTE: these files are under the root static directory, so though here it
looks like the imports fail, they actually work.
This allows this file to exist in the linus app and not have to be
defined in the project again.

@author Alex Ghiban <alex@fortnine.ca>
 */
/**
Normalize
Note: this version adds a border to fieldsets. Later removed under _forms.less
Best to use new version where this was fixed.
 */
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}
/**
 * Remove default margin.
 */
body {
  margin: 0;
}
/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}
/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}
/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}
/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}
/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0;
}
/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}
/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}
/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}
/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}
/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}
/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}
/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}
/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}
/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}
/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}
/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}
/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}
/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}
/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}
/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}
/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box;
}
/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}
/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}
/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}
/**
 * This is extended normalization that is not covered in our current library.
 */
blockquote,
q {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
}
/**
Important variables from theme.
 */
/**
 * _variables.less
 *
 * Note that it is recommended that changing variables be done in the
 * `_theme.less` file. If this `_variables.less` file is replaced in a child
 * theme and not all variables are initialized, then themes can break, so if
 * this file is replaced wholesale, be sure to name and redefine all of the
 * variables; this will ensure that nothing breaks.
 *
 * @author Dane MacMillan <work@danemacmillan.com>
 */
/*
 * _colors.less
 */
/*
 * _images.less
 * Contains less function to apply different background images to change the default
 * FortNine logo.
 */
/**
Main _common.less variables.
Includes:
  "_colors.less";
  "_typography.less";
  "_symmetrysides.less";
  "_forms.less";
  "_animation.less";
  "_images.less";
 */
html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
blockquote {
  margin-left: 4rem;
  margin-right: 4rem;
  margin-bottom: 1.5rem;
  background-color: #FFFFFF;
  line-height: 3rem;
  font-style: italic;
  border-left: 2px solid #CECECE;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}
/**
 * Media query breakpoint variables.
 */
/**
Contains the FortNine color scheme.
*/
/**Primary Brand Colors*/
/**Secondary secondary colors*/
/** Modified colors for specific functionality*/
/* Feedback UX states. */
/* Colors introduced for ship states. */
/* Colors introduced for RMA states. */
/* Colors introduced for monochromatic design (defaults to F9 colors) */
/* Colors introduced by the new shipping policy */
/** Colors introduced by PDP v2 */
/**
 * typography.less
 *
 * Style all typography-related tags, and tags that vertically flow with
 * other inline elements.
 *
 * @author Dane MacMillan <work@danemacmillan.com>
 */
/* 10/16*100 = 62.5 */
/* 12/16*100 = 75 */
/* 14/16*100 = 87.5 */
html {
  font-size: 62.5%;
}
html.rembase-8 {
  font-size: 50%;
}
html.rembase-10 {
  font-size: 62.5%;
}
html.rembase-12 {
  font-size: 75%;
}
html.rembase-14 {
  font-size: 87.5%;
}
html.rembase-16 {
  font-size: 100%;
}
html.rembase-18 {
  font-size: 112.5%;
}
@media only screen and (min-width: 601px) and (max-width: 959px), only screen and (min-width: 960px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1439px) {
  html {
    font-size: 62.5%;
  }
}
@media only screen and (min-width: 1440px) {
  html {
    font-size: 75%;
  }
}
@media only screen and (min-width: 414px) and (max-width: 736px) and (orientation: landscape) {
  html {
    font-size: 62.5%;
  }
}
@media only screen and (max-width: 359px) {
  html {
    font-size: 50%;
  }
}
/* Set base vertical rhythm */
.vertical-rhythm-base {
  line-height: unset !important;
}
.vertical-rhythm-double {
  line-height: 3 !important;
}
.vertical-rhythm-triple {
  line-height: 4.5rem !important;
}
.margins-none {
  margin: 0 !important;
}
/**
 * Use when an element is flat with the top-most section of viewport or element.
 *
 * A good use case for this is on the brands page that defines an h1 tag, but
 * it is the first element, which means it is flat against the top of the
 * viewport.
 */
.margin-top-vertical-rhythm {
  margin-top: 1.5rem;
}
.margin-bottom-vertical-rhythm,
body.customs .invoice .invoice-title,
body.customs .invoice .invoice-list-names {
  margin-bottom: 1.5rem;
}
.margin-bottom-vertical-rhythm-default {
  margin-bottom: 1.5rem !important;
}
.margin-bottom-vertical-rhythm-half {
  margin-bottom: 0.75rem !important;
}
.margin-bottom-vertical-rhythm-double {
  margin-bottom: 3rem;
}
.margin-bottom-vertical-rhythm-triple {
  margin-bottom: 4.5rem;
}
.margin-bottom-vertical-rhythm-none {
  margin-bottom: 0 !important;
}
.margin-bottom-teeny {
  margin-bottom: 0.1rem !important;
}
.margin-bottom-none {
  margin-bottom: 0 !important;
}
.margin-gutters {
  margin-left: 2rem;
  margin-right: 2rem;
}
.margin-gutters-none {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body {
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.5;
  color: #222222;
  background-color: #FFFFFF;
}
/**
 * Set base margins for context that components appear within.
 */
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
table,
fieldset,
.fieldset,
hr,
dl,
dd,
.swiper,
.symmetry-sides,
.menu-stack,
.return-form,
.product-details,
.feedback,
.splash-header,
.typography-content,
#narrow-by-list dd a,
#product-backorder .limbo,
.wishlist-image,
.order-product,
.shipment-controls,
.product-item-number,
.breadcrumb,
.layered {
  margin: 0 0 1.5rem 0;
}
fieldset,
.fieldset,
.modal-product-help ul,
.modal-footer .btn,
.main-footer p,
.return-form,
.feedback,
.typography-content,
#header-cart-product-list,
.wishlist-item-column {
  margin-left: 2rem;
  margin-right: 2rem;
}
main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
main p,
main ul,
main ol,
main .department-content,
main .order-meta,
main .order-product,
main .carrier-logo,
main .shipment-controls,
main .account-order-listing {
  margin-left: 2rem;
  margin-right: 2rem;
}
/**
 * General typography.
 */
.material-icons {
  position: relative;
  font-size: inherit !important;
  top: 0.2rem;
  user-select: none !important;
}
.html-entity {
  display: inline-block;
  font-style: normal !important;
  user-select: none !important;
  font-size: inherit;
  line-height: inherit !important;
}
h1 {
  font-size: 2rem;
}
h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.8rem;
}
h4 {
  font-size: 1.6rem;
}
h5 {
  font-size: 1.4rem;
}
h6 {
  font-size: 1.2rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
}
h1 .material-icons,
h2 .material-icons {
  font-size: 85% !important;
}
a,
.href {
  display: inline-block;
  color: #4D4D4D;
  text-decoration: none;
  cursor: pointer;
}
a:hover,
.href:hover,
a:focus,
.href:focus {
  color: #3FA9F5;
  text-decoration: underline;
}
main a,
main .href {
  color: #0A72BD;
}
strong {
  font-weight: 700;
}
em {
  font-style: italic;
  font-weight: 400;
}
hr {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, #F2F2F2, #CECECE, #F2F2F2);
}
hr.hr-dark {
  background-image: linear-gradient(to right, #333333, #2D2D2D, #333333);
}
code {
  font-family: "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;
  background-color: rgba(0, 0, 0, 0.05);
  padding: 4px;
  border-radius: 3px;
  font-size: 87.5%;
}
kbd {
  display: inline-block;
  font-family: "Arial", "Helvetica Neue", "Helvetica", sans-serif;
  font-size: 75%;
  padding: 2px 4px;
  color: #242729;
  text-shadow: 0 1px 0 #FFFFFF;
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid #CECECE;
  border-radius: 3px;
  box-shadow: 0 1px 0 #CECECE, 0 0 0 1px #FFFFFF inset;
  white-space: nowrap;
}
.emphasis-fore {
  color: #999999;
}
.emphasis-back {
  color: #CECECE;
}
.separator {
  display: inline-block;
  padding: 0 0.5rem;
  color: #CECECE;
}
.center-content {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
/* Whatever applied to, it will bump itself up by exactly half. */
.elevate-half {
  transform: translateY(-50%);
  margin-bottom: -1.5rem;
}
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FFFFFF;
  text-align: center;
  margin: 0 auto 1.5rem auto;
}
.icon-container.circular {
  color: inherit;
  font-size: 250%;
  line-height: 0;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
}
.icon-container.circular .material-icons {
  line-height: 1.5;
  top: 0 !important;
}
.icon-container.circular-text {
  font-weight: 400;
}
.text-cancel {
  color: #DD312E !important;
}
.loader {
  padding: 0 !important;
}
/**
 * The circular counter used on category listings and footer notifications.
 */
.circular-count {
  font-size: 1.2rem;
  color: #000000;
  background-color: #EBEBEB;
  display: inline-block;
  padding: 2px 5px;
  line-height: 1;
  border-radius: 20px;
}
/**
 * Badge that appears on product listings and product pages.
 */
.badge {
  display: inline-block;
  background-color: #DD312E;
  color: #FFFFFF;
  padding: 0 1rem;
  font-size: 1.4rem;
  font-weight: 300;
}
.badge:hover {
  text-decoration: none;
}
.badge.badge-white-blue {
  background-color: #FFFFFF;
  color: #3FA9F5;
}
.badge.badge-white-darkgray {
  background-color: #FFFFFF;
  color: #222222;
}
.badge.badge-link {
  cursor: pointer;
}
.badge.badge-shadow {
  box-shadow: rgba(0, 0, 0, 0.9) 0 2px 2px -2px;
}
.badge.badge-thick {
  line-height: 2;
}
.badge.badge-tertiary-font-size {
  font-size: 1.2rem;
}
ul.messages {
  list-style-type: none;
  padding: 0;
}
.fieldset-checkbox-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
/**
 * _symmetrysides.less
 *
 * Symmetry sides will automatically style one, or two tags within.
 *
 * It does not matter what tags are used, they will be styled the same. Note
 * that this will work for only a maximum of two child tags.
 *
 * @author Dane MacMillan <work@danemacmillan.com>
 */
.symmetry-sides {
  display: flex;
  flex-direction: row;
  line-height: 4;
  background-color: #FFFFFF;
  position: relative;
  overflow: hidden;
  padding: 0;
  font-weight: 300;
  text-decoration: none !important;
  user-select: none !important;
}
.symmetry-sides > :first-child,
.symmetry-sides > :last-child {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  height: 100%;
  white-space: nowrap;
  text-decoration: inherit !important;
  user-select: inherit !important;
}
.symmetry-sides > :first-child .material-icons,
.symmetry-sides > :last-child .material-icons {
  top: unset;
  font-size: 100% !important;
  margin-right: 1rem;
}
.symmetry-sides > :first-child * .material-icons,
.symmetry-sides > :last-child * .material-icons {
  vertical-align: middle;
}
.symmetry-sides > :first-child * h1,
.symmetry-sides > :last-child * h1,
.symmetry-sides > :first-child h2,
.symmetry-sides > :last-child h2,
.symmetry-sides > :first-child h3,
.symmetry-sides > :last-child h3,
.symmetry-sides > :first-child h4,
.symmetry-sides > :last-child h4,
.symmetry-sides > :first-child h5,
.symmetry-sides > :last-child h5,
.symmetry-sides > :first-child h6,
.symmetry-sides > :last-child h6 {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
}
.symmetry-sides > :first-child .icon-container,
.symmetry-sides > :last-child .icon-container {
  margin: unset;
  background-color: #F2F2F2;
}
.symmetry-sides > :first-child .icon-container.circular,
.symmetry-sides > :last-child .icon-container.circular {
  font-size: 175%;
}
.symmetry-sides > :first-child {
  font-weight: 700;
  white-space: nowrap;
  position: relative;
  padding-left: 2rem;
}
.symmetry-sides > :first-child .icon-container {
  margin-right: 1rem;
}
.symmetry-sides > :first-child .icon-container .material-icons {
  margin-right: 0;
}
.symmetry-sides > :last-child {
  position: absolute;
  right: 0;
  padding-right: 2rem;
  background-color: inherit;
  box-shadow: 0 0 3rem 2rem #FFFFFF, 0 0 3rem 2rem #FFFFFF;
  max-width: 60%;
  overflow: hidden;
}
.symmetry-sides > :last-child .material-icons:not(:first-child):not(:last-child):not(.symmetry-sides-icon-swap),
.symmetry-sides > :last-child .material-icons:last-child {
  margin-right: 0;
  margin-left: 1rem;
}
.symmetry-sides > :last-child .icon-container {
  margin-left: 1rem;
}
.symmetry-sides > :last-child .icon-container .material-icons {
  margin-left: 0;
}
.symmetry-sides > :last-child:empty {
  padding-right: 0;
}
.symmetry-sides .image {
  line-height: inherit;
  margin: 0 1rem 0 0;
}
.symmetry-sides.symmetry-sides-make-widetext-accessible > :first-child:hover,
.symmetry-sides.symmetry-sides-make-widetext-accessible > :first-child:active,
.symmetry-sides.symmetry-sides-make-widetext-accessible > :first-child:focus {
  z-index: 10;
  background-color: inherit;
  width: auto !important;
}
.symmetry-sides.symmetry-sides-has-subtext > :first-child > :not(i):not(.image):not(fieldset),
.symmetry-sides.symmetry-sides-has-subtext > :last-child > :not(i):not(.image):not(fieldset) {
  line-height: 1;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.symmetry-sides.symmetry-sides-has-subtext > :first-child > :not(i):not(.image):not(fieldset) .symmetry-sides-subtext,
.symmetry-sides.symmetry-sides-has-subtext > :last-child > :not(i):not(.image):not(fieldset) .symmetry-sides-subtext {
  font-size: calc(100% - 0.2rem);
  color: #999999;
  font-weight: 300;
  display: block;
  margin-top: 0.5rem;
}
.symmetry-sides.symmetry-sides-has-subtext > :first-child > :not(i):not(.image):not(fieldset) .symmetry-sides-subtext *,
.symmetry-sides.symmetry-sides-has-subtext > :last-child > :not(i):not(.image):not(fieldset) .symmetry-sides-subtext * {
  font-size: inherit;
}
.symmetry-sides.symmetry-sides-has-subtext > :first-child > :not(i):not(.image):not(fieldset) .symmetry-sides-subtext:empty,
.symmetry-sides.symmetry-sides-has-subtext > :last-child > :not(i):not(.image):not(fieldset) .symmetry-sides-subtext:empty {
  display: none;
}
.symmetry-sides.symmetry-sides-no-wrap > :first-child,
.symmetry-sides.symmetry-sides-no-wrap > :last-child {
  white-space: normal;
}
.symmetry-sides.symmetry-sides-no-wrap > :first-child,
.symmetry-sides.symmetry-sides-no-wrap > :last-child {
  padding-right: 2rem;
}
.symmetry-sides.symmetry-sides-no-wrap > :first-child .image,
.symmetry-sides.symmetry-sides-no-wrap > :last-child .image {
  width: 100%;
  max-width: initial;
  margin-right: 2rem;
}
.symmetry-sides.symmetry-sides-no-wrap > :first-child i.image,
.symmetry-sides.symmetry-sides-no-wrap > :last-child i.image {
  max-width: fit-content;
}
.symmetry-sides.symmetry-sides-no-wrap > :last-child {
  opacity: 0;
  transition: opacity 0.2s;
}
.symmetry-sides.symmetry-sides-no-wrap:hover > :last-child {
  opacity: 1;
}
.symmetry-sides.symmetry-sides-no-eclipse > :last-child {
  box-shadow: unset;
}
.symmetry-sides.symmetry-sides-transparent {
  background-color: transparent;
}
.symmetry-sides.symmetry-sides-transparent > :last-child {
  box-shadow: unset;
}
.symmetry-sides.symmetry-sides-grey {
  background-color: #F2F2F2;
}
.symmetry-sides.symmetry-sides-grey > :last-child {
  box-shadow: 0 0 3rem 2rem #F2F2F2, 0 0 3rem 2rem #F2F2F2;
  font-weight: 400;
}
.symmetry-sides.symmetry-sides-lighterish-grey {
  background-color: #EBEBEB;
}
.symmetry-sides.symmetry-sides-lighterish-grey > :last-child {
  box-shadow: 0 0 3rem 2rem #EBEBEB, 0 0 3rem 2rem #EBEBEB;
  font-weight: 400;
}
.symmetry-sides.symmetry-sides-black {
  background-color: #000000;
}
.symmetry-sides.symmetry-sides-black > :last-child {
  box-shadow: 0 0 3rem 2rem #000000, 0 0 3rem 2rem #000000;
}
.symmetry-sides.symmetry-sides-dark-gray {
  background-color: #222222;
}
.symmetry-sides.symmetry-sides-dark-gray > :last-child {
  box-shadow: 0 0 3rem 2rem #222222, 0 0 3rem 2rem #222222;
}
.symmetry-sides.symmetry-sides-dark-gray-slight-light {
  background-color: #2D2D2D;
}
.symmetry-sides.symmetry-sides-dark-gray-slight-light > :last-child {
  box-shadow: 0 0 3rem 2rem #2D2D2D, 0 0 3rem 2rem #2D2D2D;
}
.symmetry-sides.symmetry-sides-dark-gray-overlay-splash {
  background-color: #333333;
}
.symmetry-sides.symmetry-sides-dark-gray-overlay-splash > :last-child {
  box-shadow: 0 0 3rem 2rem #333333, 0 0 3rem 2rem #333333;
}
.symmetry-sides.symmetry-sides-emphasis-none > :first-child {
  font-weight: inherit;
}
.symmetry-sides.symmetry-sides-emphasis-none > :last-child {
  font-weight: inherit;
}
.symmetry-sides.symmetry-sides-emphasis-right > :first-child {
  font-weight: inherit;
}
.symmetry-sides.symmetry-sides-emphasis-right > :last-child {
  font-weight: 700;
}
.symmetry-sides.symmetry-sides-emphasis-right > a:last-child {
  color: #3FA9F5;
  font-weight: 400;
}
.symmetry-sides.symmetry-sides-icon-big .material-icons {
  font-size: 175% !important;
}
.symmetry-sides.symmetry-sides-icon-big-left > :first-child.material-icons,
.symmetry-sides.symmetry-sides-icon-big-left > :first-child .material-icons {
  font-size: 175% !important;
}
.symmetry-sides.symmetry-sides-icon-big-right > :last-child.material-icons,
.symmetry-sides.symmetry-sides-icon-big-right > :last-child .material-icons {
  font-size: 175% !important;
}
.symmetry-sides.symmetry-sides-subdued > :first-child {
  font-weight: inherit;
  color: #000000;
}
.symmetry-sides.symmetry-sides-subdued > :first-child.material-icons,
.symmetry-sides.symmetry-sides-subdued > :first-child .material-icons {
  font-size: 175% !important;
  color: #CECECE;
}
.symmetry-sides.symmetry-sides-subdued > :last-child.material-icons,
.symmetry-sides.symmetry-sides-subdued > :last-child .material-icons {
  font-size: 175% !important;
  color: #000000;
  margin-right: 0;
}
a.symmetry-sides.symmetry-sides-subdued:hover > :first-child,
a.symmetry-sides.symmetry-sides-subdued:hover > :last-child {
  color: #3FA9F5;
}
a.symmetry-sides.symmetry-sides-subdued:hover > :first-child.material-icons,
a.symmetry-sides.symmetry-sides-subdued:hover > :first-child .material-icons {
  color: #CECECE;
}
.symmetry-sides.symmetry-sides-has-icon-swap-right > :last-child {
  cursor: pointer;
}
.symmetry-sides.symmetry-sides-has-icon-swap-right > :last-child .symmetry-sides-icon-swap {
  display: none;
}
.symmetry-sides.symmetry-sides-has-icon-swap-right.symmetry-sides-has-icon-swap-right-swapped > :last-child .material-icons:not(:first-child):not(:last-child):not(.symmetry-sides-icon-swap) {
  display: none;
}
.symmetry-sides.symmetry-sides-has-icon-swap-right.symmetry-sides-has-icon-swap-right-swapped > :last-child .symmetry-sides-icon-swap {
  display: unset;
}
/**
 * Hold multiple symmetry-sides components and have them swap.
 *
 * In order for the swapping effect to work, the height does have to
 * be set on the element, otherwise there is no way to properly hide content.
 *
 * Note that an unlimited number of swaps can be achieved. Some additional CSS
 * would need to reference more children with a corresponding trigger class.
 *
 * When using subtexts, limit to one, as height is constrained.
 */
.symmetry-sides-swap-content {
  position: relative;
  overflow: hidden;
  height: 4.8rem;
  background-color: #FFFFFF;
}
.symmetry-sides-swap-content > :nth-child(1),
.symmetry-sides-swap-content > :nth-child(2) {
  height: inherit;
  will-change: transform;
  transition: transform 0.15s linear;
}
.symmetry-sides-swap-content > :nth-child(1) {
  transform: translateY(0%);
}
.symmetry-sides-swap-content > :nth-child(2) {
  transform: translateY(100%);
}
.symmetry-sides-swap-content.symmetry-sides-swap-content-swapped > :nth-child(1),
.symmetry-sides-swap-content.symmetry-sides-swap-content-swapped > :nth-child(2) {
  transform: translateY(-100%);
}
.symmetry-sides-swap-content .symmetry-sides-has-subtext > :first-child > :not(i):not(.image):not(fieldset),
.symmetry-sides-swap-content .symmetry-sides-has-subtext > :last-child > :not(i):not(.image):not(fieldset) {
  padding-top: unset;
  padding-bottom: unset;
}
/**
 * Menu stack is based on symmetry-sides. It makes some simple modifications.
 *
 * Menu container, to be used when many symmtery-sides need to be stacked
 * together.
 *
 * Note that the menu stack can also include a swiper component, and its styling
 * will be handled appropriately.
 */
.menu-stack .symmetry-sides,
.menu-stack .symmetry-sides + .swiper {
  margin-bottom: 0.1rem;
  cursor: pointer;
}
.menu-stack > :last-child {
  margin-bottom: 0;
}
/**
 * Wrapper for multiple menu stacks that will split them into columns.
 *
 * By default there is no column property value. It is fine to redefine the
 * parent selector or to use the modifiers that will override the number of
 * columns.
 */
.menu-stack-sections.menu-stack-sections-columns1 {
  columns: 1 !important;
}
.menu-stack-sections.menu-stack-sections-columns2 {
  columns: 2 !important;
}
.menu-stack-sections.menu-stack-sections-columns3 {
  columns: 3 !important;
}
.menu-stack-sections.menu-stack-sections-columns4 {
  columns: 4 !important;
}
.menu-stack-sections .menu-stack-section {
  display: table;
  width: 100%;
  -webkit-column-break-inside: avoid;
  column-break-inside: avoid;
}
/**
 * User account is based on symmetry-sides. It makes some simple modifications.
 *
 * Note that the icon dimensions are the same as the image dimensions for
 * image-tall by default.
 *
 * Should there be a desire to display the user account icon and image so that
 * they assume the same dimensions as the "icon big" symmetry-sides modifier
 * classes, pass the `.symmetry-sides-icon-big-left` class as usual. This will
 * essentially undo their extra large dimensions, which is the default for
 * user-account.
 */
.user-account {
  cursor: pointer;
}
.user-account .image {
  background-color: #222222;
}
.user-account.symmetry-sides > :first-child {
  font-weight: 700;
}
.user-account.symmetry-sides > :first-child .material-icons {
  font-size: 250% !important;
  border-radius: 50%;
  box-shadow: inset 0 0 0 5px;
}
.user-account.user-account-signedin > :first-child {
  font-weight: inherit;
}
.user-account.symmetry-sides-icon-big-left > :first-child .image {
  height: 4rem !important;
  width: 4rem !important;
}
.user-account.symmetry-sides-icon-big-left > :first-child .material-icons {
  font-size: 4rem !important;
}
/**
 * Displays a pager with number of pages, next, and previous buttons.
 *
 * Note that this is based on symmetry-sides. The modification with nth-child
 * is to target the middle tag that contains pagination results.
 */
.pager > :nth-child(2):not(:last-child) {
  display: block;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  padding: 0;
  pointer-events: none;
}
.pager > :first-child[href=''],
.pager > :last-child[href=''] {
  visibility: hidden;
  pointer-events: none;
}
/**
 * forms.less
 *
 * Base form styles.
 *
 * @TODO Ensure that will-change property is only active when validators
 * are present on fieldset.
 * https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
 *
 * @TODO Note that Chrome does not support flex on <fieldset>, which explains
 * why using `.fieldset-inline` does not work on Chrome. See:
 * - https://stackoverflow.com/questions/28078681/why-cant-fieldset-be-flex-containers
 * - https://bugzilla.mozilla.org/show_bug.cgi?id=1047590
 * - https://bugs.chromium.org/p/chromium/issues/detail?id=262679
 *
 * @author Dane MacMillan <work@danemacmillan.com>
 */
textarea,
input,
.input,
select,
button {
  outline: none !important;
  box-sizing: border-box !important;
}
select option {
  font-weight: inherit;
}
input[type="text"],
input[type="search"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="submit"],
input[type="checkbox"],
input[type="date"],
.input,
select,
textarea,
button {
  display: inline-block;
  border: 0;
  padding: 0;
  line-height: inherit;
  background-color: transparent;
}
input[type="text"],
input[type="search"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="date"],
.input,
select,
textarea {
  width: 100%;
  -webkit-appearance: none;
}
input[type="submit"],
button {
  pointer-events: inherit;
}
textarea {
  display: block;
  line-height: 1.5;
}
::placeholder,
.input {
  color: #757575;
  opacity: 1;
  text-transform: none;
}
form.form-readonly {
  pointer-events: none;
  opacity: 0.9;
}
/* Basic inputs */
fieldset,
.fieldset {
  border: 0;
  line-height: 4;
  padding: 0;
  color: #000000;
  will-change: transform;
  position: relative;
  z-index: 10;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  /* Actual input styling, not the input itself. */
  /* Help feedback text. */
}
fieldset label,
.fieldset label {
  display: block;
  font-size: 85%;
  padding: 0 2rem;
  line-height: 2;
  font-weight: bold;
  color: #757575;
  cursor: pointer;
  word-break: break-all;
  hyphens: auto;
}
fieldset label:empty,
.fieldset label:empty {
  display: none;
}
fieldset .fieldset-validate,
.fieldset .fieldset-validate {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 6rem;
  z-index: 10;
  text-align: center;
  background-color: #EFEFEF;
  color: #FFFFFF;
  transition: all 0.2s ease;
  pointer-events: none;
  font-size: 150% !important;
}
fieldset .fieldset-validate .material-icons,
.fieldset .fieldset-validate .material-icons {
  will-change: opacity, transform;
  top: unset;
  transition: opacity 0.5s ease, transform 0.5s ease;
  opacity: 1;
  transform: scale(1);
}
fieldset .fieldset-input,
.fieldset .fieldset-input {
  width: 100%;
  padding: 0;
  display: block;
  overflow: hidden;
  transition: border 0.2s ease;
  position: relative;
  z-index: 2;
  background-color: #FFFFFF;
  border: 0;
  box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.3);
}
fieldset .fieldset-input .fieldset-control-wrapper,
.fieldset .fieldset-input .fieldset-control-wrapper {
  width: 100%;
}
fieldset .fieldset-input input,
.fieldset .fieldset-input input,
fieldset .fieldset-input textarea,
.fieldset .fieldset-input textarea,
fieldset .fieldset-input select,
.fieldset .fieldset-input select,
fieldset .fieldset-input .input,
.fieldset .fieldset-input .input,
fieldset .fieldset-input .fieldset-control-wrapper input,
.fieldset .fieldset-input .fieldset-control-wrapper input,
fieldset .fieldset-input .fieldset-control-wrapper textarea,
.fieldset .fieldset-input .fieldset-control-wrapper textarea,
fieldset .fieldset-input .fieldset-control-wrapper select,
.fieldset .fieldset-input .fieldset-control-wrapper select,
fieldset .fieldset-input .fieldset-control-wrapper .input,
.fieldset .fieldset-input .fieldset-control-wrapper .input {
  padding: 0 2rem;
}
fieldset .fieldset-input .fieldset-validate + input,
.fieldset .fieldset-input .fieldset-validate + input,
fieldset .fieldset-input .fieldset-validate + textarea,
.fieldset .fieldset-input .fieldset-validate + textarea,
fieldset .fieldset-input .fieldset-validate + select,
.fieldset .fieldset-input .fieldset-validate + select,
fieldset .fieldset-input .fieldset-validate + .input,
.fieldset .fieldset-input .fieldset-validate + .input,
fieldset .fieldset-input .fieldset-validate + .fieldset-control-wrapper input,
.fieldset .fieldset-input .fieldset-validate + .fieldset-control-wrapper input,
fieldset .fieldset-input .fieldset-validate + .fieldset-control-wrapper textarea,
.fieldset .fieldset-input .fieldset-validate + .fieldset-control-wrapper textarea,
fieldset .fieldset-input .fieldset-validate + .fieldset-control-wrapper select,
.fieldset .fieldset-input .fieldset-validate + .fieldset-control-wrapper select,
fieldset .fieldset-input .fieldset-validate + .fieldset-control-wrapper .input,
.fieldset .fieldset-input .fieldset-validate + .fieldset-control-wrapper .input {
  padding-left: 8rem;
}
fieldset .fieldset-input textarea,
.fieldset .fieldset-input textarea {
  padding: 2rem;
  min-height: 14rem;
  position: relative;
  z-index: 6;
}
fieldset .fieldset-input select,
.fieldset .fieldset-input select {
  cursor: pointer;
  color: #757575;
}
fieldset .fieldset-input select option,
.fieldset .fieldset-input select option {
  color: #000000;
}
fieldset .fieldset-input select:not([data-validators]),
.fieldset .fieldset-input select:not([data-validators]),
fieldset .fieldset-input select:not([data-validators]) option,
.fieldset .fieldset-input select:not([data-validators]) option {
  color: #000000;
}
fieldset .fieldset-input > :last-child:not(:only-child):not(input):not(textarea):not(select):not(.fieldset-control-wrapper):not(.input),
.fieldset .fieldset-input > :last-child:not(:only-child):not(input):not(textarea):not(select):not(.fieldset-control-wrapper):not(.input),
fieldset .fieldset-input:after,
.fieldset .fieldset-input:after {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  height: 100%;
  background-color: inherit;
  pointer-events: none;
  transition: color 0.2s ease;
}
fieldset .fieldset-input > button,
.fieldset .fieldset-input > button,
fieldset .fieldset-input > .button,
.fieldset .fieldset-input > .button {
  pointer-events: auto !important;
}
fieldset .fieldset-input > button .material-icons,
.fieldset .fieldset-input > button .material-icons,
fieldset .fieldset-input > .button .material-icons,
.fieldset .fieldset-input > .button .material-icons {
  top: unset;
}
fieldset .fieldset-input > :last-child:not(:only-child):not(input):not(textarea):not(select):not(.fieldset-control-wrapper):not(.input),
.fieldset .fieldset-input > :last-child:not(:only-child):not(input):not(textarea):not(select):not(.fieldset-control-wrapper):not(.input) {
  z-index: 6;
  color: #CECECE;
  font-size: 150% !important;
  padding-right: 2rem;
}
fieldset .fieldset-input:after,
.fieldset .fieldset-input:after {
  content: ' ';
  box-shadow: -3rem 0 5rem 5rem #FFFFFF, 0 0 3rem 5rem #FFFFFF;
}
fieldset .fieldset-help,
.fieldset .fieldset-help {
  margin: 0.5rem 0 0 0;
  padding: 0 2rem;
  color: #CECECE;
  font-size: 75%;
  list-style: inside square;
  position: absolute;
  z-index: 1;
  transform: translateY(-100%);
  opacity: 0;
  transition: all 0.2s ease;
  will-change: transform, color, opacity;
}
fieldset .fieldset-help:empty,
.fieldset .fieldset-help:empty {
  display: none;
}
fieldset .fieldset-help li,
.fieldset .fieldset-help li {
  line-height: 1.5;
}
fieldset .fieldset-help a,
.fieldset .fieldset-help a {
  color: inherit;
  border: 0;
  text-decoration: underline;
  position: relative;
  top: inherit;
}
fieldset .fieldset-help-basic,
.fieldset .fieldset-help-basic {
  transform: translateY(0);
  position: relative;
  opacity: 1;
}
fieldset .fieldset-help-valid,
.fieldset .fieldset-help-valid {
  color: #07D159;
}
fieldset .fieldset-help-limbo,
.fieldset .fieldset-help-limbo {
  color: #90C8EC;
}
fieldset .fieldset-help-invalid,
.fieldset .fieldset-help-invalid {
  color: #FF6666;
  margin-bottom: -0.5rem;
  word-break: break-all;
}
fieldset.fieldset-bordered .fieldset-input,
.fieldset.fieldset-bordered .fieldset-input {
  border: 1px solid #EFEFEF;
}
fieldset.fieldset-rounded .fieldset-input,
.fieldset.fieldset-rounded .fieldset-input {
  border-radius: 8px;
}
fieldset.fieldset-darkened .fieldset-input,
.fieldset.fieldset-darkened .fieldset-input {
  background-color: #F2F2F2;
}
fieldset.fieldset-darkened .fieldset-input:after,
.fieldset.fieldset-darkened .fieldset-input:after {
  box-shadow: -3rem 0 5rem 5rem #F2F2F2, 0 0 3rem 5rem #F2F2F2;
}
fieldset.fieldset-decorative,
.fieldset.fieldset-decorative,
fieldset.fieldset-decorative *,
.fieldset.fieldset-decorative * {
  pointer-events: none !important;
}
fieldset.fieldset-decorative-with-pointer-events,
.fieldset.fieldset-decorative-with-pointer-events,
fieldset.fieldset-decorative-with-pointer-events *,
.fieldset.fieldset-decorative-with-pointer-events * {
  pointer-events: auto !important;
}
fieldset.fieldset-inline,
.fieldset.fieldset-inline,
fieldset.fieldset-inline-heading,
.fieldset.fieldset-inline-heading,
fieldset.fieldset-checkbox,
.fieldset.fieldset-checkbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
fieldset.fieldset-inline label,
.fieldset.fieldset-inline label,
fieldset.fieldset-inline-heading label,
.fieldset.fieldset-inline-heading label,
fieldset.fieldset-checkbox label,
.fieldset.fieldset-checkbox label {
  display: inherit;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  padding-left: 0;
  min-width: 8rem;
  max-width: 8rem;
  line-height: 1.5;
  flex: 1 0 50%;
}
fieldset.fieldset-inline label:empty,
.fieldset.fieldset-inline label:empty {
  display: none;
}
fieldset.fieldset-inline .fieldset-input,
.fieldset.fieldset-inline .fieldset-input,
fieldset.fieldset-inline-heading .fieldset-input,
.fieldset.fieldset-inline-heading .fieldset-input,
fieldset.fieldset-checkbox .fieldset-input,
.fieldset.fieldset-checkbox .fieldset-input {
  display: inherit;
  align-items: center;
  flex: 1 0 50%;
}
fieldset.fieldset-inline .fieldset-help,
.fieldset.fieldset-inline .fieldset-help,
fieldset.fieldset-inline-heading .fieldset-help,
.fieldset.fieldset-inline-heading .fieldset-help {
  flex: 0 1 100%;
  padding-left: 10rem;
}
fieldset.fieldset-inline-heading label,
.fieldset.fieldset-inline-heading label {
  flex: 0 0 auto;
  max-width: unset;
  font-size: 2rem;
  font-weight: 400;
  color: #222222;
}
fieldset.fieldset-inline-heading label > *,
.fieldset.fieldset-inline-heading label > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}
fieldset.fieldset-checkbox label,
.fieldset.fieldset-checkbox label {
  order: 1;
  min-width: unset;
  max-width: unset;
  display: inline-block;
  text-align: left;
  padding: 0;
}
fieldset.fieldset-checkbox .fieldset-input,
.fieldset.fieldset-checkbox .fieldset-input {
  order: 0;
  flex: 0 0 0;
  padding: 0 2rem 0 0;
  box-shadow: none !important;
  background-color: transparent;
  overflow: unset;
}
fieldset.fieldset-checkbox .fieldset-input input[type="checkbox"],
.fieldset.fieldset-checkbox .fieldset-input input[type="checkbox"] {
  cursor: pointer;
}
fieldset.fieldset-checkbox .fieldset-input:after,
.fieldset.fieldset-checkbox .fieldset-input:after {
  display: none;
}
fieldset.fieldset-checkbox.fieldset-inline .fieldset-input,
.fieldset.fieldset-checkbox.fieldset-inline .fieldset-input {
  flex: 0 0 8rem;
  padding: 0 2rem;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  fieldset.fieldset-checkbox,
  .fieldset.fieldset-checkbox {
    line-height: 1.5;
    display: inline-block;
  }
  fieldset.fieldset-checkbox .fieldset-input,
  .fieldset.fieldset-checkbox .fieldset-input {
    width: auto;
    float: left;
    text-align: right;
  }
}
fieldset.fieldset-no-eclipse .fieldset-input:after,
.fieldset.fieldset-no-eclipse .fieldset-input:after {
  box-shadow: unset;
}
fieldset.fieldset-input-centered .fieldset-input input,
.fieldset.fieldset-input-centered .fieldset-input input,
fieldset.fieldset-input-centered .fieldset-input textarea,
.fieldset.fieldset-input-centered .fieldset-input textarea,
fieldset.fieldset-input-centered .fieldset-input select,
.fieldset.fieldset-input-centered .fieldset-input select,
fieldset.fieldset-input-centered .fieldset-input .input,
.fieldset.fieldset-input-centered .fieldset-input .input,
fieldset.fieldset-input-centered .fieldset-input .fieldset-control-wrapper input,
.fieldset.fieldset-input-centered .fieldset-input .fieldset-control-wrapper input,
fieldset.fieldset-input-centered .fieldset-input .fieldset-control-wrapper textarea,
.fieldset.fieldset-input-centered .fieldset-input .fieldset-control-wrapper textarea,
fieldset.fieldset-input-centered .fieldset-input .fieldset-control-wrapper select,
.fieldset.fieldset-input-centered .fieldset-input .fieldset-control-wrapper select,
fieldset.fieldset-input-centered .fieldset-input .fieldset-control-wrapper .input,
.fieldset.fieldset-input-centered .fieldset-input .fieldset-control-wrapper .input {
  text-align: center;
}
/**
     * Fieldset UX states.
     */
/* State: neutral */
fieldset:not([class*=js-field-is-]) .fieldset-valid-true,
fieldset:not([class*=js-field-is-]) .fieldset-valid-limbo,
fieldset:not([class*=js-field-is-]) .fieldset-valid-invalid {
  font-size: 0 !important;
  opacity: 0;
  transform: scale(2);
}
fieldset:not([class*=js-field-is-]) .fieldset-valid-true.material-icons-svg,
fieldset:not([class*=js-field-is-]) .fieldset-valid-limbo.material-icons-svg,
fieldset:not([class*=js-field-is-]) .fieldset-valid-invalid.material-icons-svg {
  width: 0;
  height: 0;
}
/* State: focus */
.js-field-is-focus label {
  color: #000000;
}
fieldset.js-field-is-focus .fieldset-input,
fieldset:not([class*=js-field-is-]):hover .fieldset-input {
  border-color: #999999;
  box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.5);
}
.js-field-is-focus .fieldset-validate,
fieldset:not([class*=js-field-is-]):hover .fieldset-input .fieldset-validate {
  background-color: #999999;
}
.js-field-is-focus .fieldset-valid-true,
.js-field-is-focus .fieldset-valid-limbo,
.js-field-is-focus .fieldset-valid-invalid {
  font-size: 0 !important;
  opacity: 0;
  transform: scale(2);
}
.js-field-is-focus .fieldset-valid-true.material-icons-svg,
.js-field-is-focus .fieldset-valid-limbo.material-icons-svg,
.js-field-is-focus .fieldset-valid-invalid.material-icons-svg {
  width: 0;
  height: 0;
}
.js-field-is-focus .fieldset-help-basic,
fieldset:not([class*=js-field-is-]):hover .fieldset-help-basic {
  color: #999999;
}
.js-field-is-focus .fieldset-input > :last-child:not(:only-child):not(input):not(textarea):not(select),
fieldset:not([class*=js-field-is-]):hover .fieldset-input > :last-child:not(:only-child):not(input):not(textarea):not(select) {
  color: #999999;
}
.js-field-is-focus .fieldset-data-select-toggle {
  transform: rotate(90deg);
  padding-right: 0 !important;
  padding-top: 4rem !important;
}
.js-field-is-focus .fieldset-data-password-toggle .password-show-countdown,
fieldset:not([class*=js-field-is-]):hover .fieldset-data-password-toggle .password-show-countdown {
  color: #cecece;
}
/* State: valid */
fieldset.js-field-is-valid.fieldset-monochromatic-valid-validation .fieldset-input {
  border-color: #4D4D4D;
  box-shadow: 0 2px 2px -2px #4D4D4D;
}
fieldset.js-field-is-valid.fieldset-monochromatic-valid-validation .fieldset-validate {
  background-color: #4D4D4D;
}
fieldset.js-field-is-valid.fieldset-monochromatic-valid-validation label {
  color: #4D4D4D;
}
.js-field-is-valid label {
  color: #07D159;
}
.js-field-is-valid .fieldset-validate {
  background-color: #07D159;
}
fieldset.js-field-is-valid .fieldset-input {
  border-color: #07D159;
  box-shadow: 0 2px 2px -2px #07D159;
}
fieldset.js-field-is-valid .fieldset-input select {
  text-shadow: 0 0 0 #000000;
}
.js-field-is-valid .fieldset-valid-false,
.js-field-is-valid .fieldset-valid-limbo,
.js-field-is-valid .fieldset-valid-invalid {
  font-size: 0 !important;
  opacity: 0;
  transform: scale(2);
}
.js-field-is-valid .fieldset-valid-false.material-icons-svg,
.js-field-is-valid .fieldset-valid-limbo.material-icons-svg,
.js-field-is-valid .fieldset-valid-invalid.material-icons-svg {
  width: 0;
  height: 0;
}
.js-field-is-valid .fieldset-help {
  transform: translateY(-100%);
  position: absolute;
  opacity: 0;
}
.js-field-is-valid .fieldset-help-valid {
  transform: translateY(0);
  position: relative;
  opacity: 1;
}
/**
     * State: valid-disabled
     *
     * This is for those buttons that, upon success, have no reason to suddenly
     * become active again. This ensures they can no longer be clicked again.
     * The only use for this so far is once an order is successfully submitted;
     * this prevents an additional click during that brief moment between the
     * success response and the browser redirection. While Magento will not
     * allow another order to go through because its nonce token has expired,
     * this is just extra protection against the unknown.
     *
     * Note that this state works identically to just `valid`, as both classes
     * are added when `valid-disabled` is used, with the exception that this
     * state also prevents the button from being clicked again.
     */
.js-field-is-valid-disabled > * {
  cursor: not-allowed !important;
}
.js-field-is-valid-disabled button,
.js-field-is-valid-disabled .button {
  opacity: 0.2 !important;
  pointer-events: none !important;
}
/* State: invalid */
.js-field-is-invalid label {
  color: #FF6666;
}
.js-field-is-invalid .fieldset-validate {
  background-color: #FF6666;
}
fieldset.js-field-is-invalid .fieldset-input {
  border-color: #FF6666;
  box-shadow: 0 2px 2px -2px #FF6666;
}
fieldset.js-field-is-invalid .fieldset-input select {
  text-shadow: 0 0 0 #000000;
}
.js-field-is-invalid .fieldset-valid-true,
.js-field-is-invalid .fieldset-valid-false,
.js-field-is-invalid .fieldset-valid-limbo {
  font-size: 0 !important;
  opacity: 0;
  transform: scale(2);
}
.js-field-is-invalid .fieldset-valid-true.material-icons-svg,
.js-field-is-invalid .fieldset-valid-false.material-icons-svg,
.js-field-is-invalid .fieldset-valid-limbo.material-icons-svg {
  width: 0;
  height: 0;
}
.js-field-is-invalid .fieldset-help {
  transform: translateY(-100%);
  position: absolute;
  opacity: 0;
}
.js-field-is-invalid .fieldset-help-invalid,
.js-field-is-invalid .fieldset-help-basic {
  transform: translateY(0);
  position: relative;
  opacity: 1;
}
.js-field-is-invalid .fieldset-data-password-toggle {
  color: #FF6666;
}
.js-field-is-invalid .fieldset-data-password-toggle .password-show-countdown {
  color: #cecece;
}
/* State: limbo */
.js-field-is-limbo,
.js-field-is-limbo * {
  cursor: progress !important;
}
.js-field-is-limbo > * {
  pointer-events: none;
}
fieldset.js-field-is-limbo.fieldset-monochromatic-valid-validation .fieldset-input {
  border-color: #B5B5B5;
  box-shadow: 0 2px 2px -2px #B5B5B5;
}
fieldset.js-field-is-limbo.fieldset-monochromatic-valid-validation .fieldset-validate {
  background-color: #B5B5B5;
}
fieldset.js-field-is-limbo.fieldset-monochromatic-valid-validation label {
  color: #B5B5B5;
}
.js-field-is-limbo label {
  color: #90C8EC;
}
.js-field-is-limbo .fieldset-validate {
  background-color: #90C8EC;
}
fieldset.js-field-is-limbo .fieldset-input {
  border-color: #90C8EC;
  box-shadow: 0 2px 2px -2px #90C8EC;
}
fieldset.js-field-is-limbo .fieldset-input select {
  text-shadow: 0 0 0 #000000;
}
.js-field-is-limbo .fieldset-valid-true,
.js-field-is-limbo .fieldset-valid-false,
.js-field-is-limbo .fieldset-valid-invalid {
  font-size: 0 !important;
  opacity: 0;
  transform: scale(2);
}
.js-field-is-limbo .fieldset-valid-true.material-icons-svg,
.js-field-is-limbo .fieldset-valid-false.material-icons-svg,
.js-field-is-limbo .fieldset-valid-invalid.material-icons-svg {
  width: 0;
  height: 0;
}
.js-field-is-limbo .fieldset-help {
  transform: translateY(-100%);
  position: absolute;
  opacity: 0;
}
.js-field-is-limbo .fieldset-help-limbo {
  transform: translateY(0);
  position: relative;
  opacity: 1;
}
.js-field-is-limbo button,
.js-field-is-limbo .button {
  opacity: 0.65 !important;
  pointer-events: none !important;
}
/**
 * TODO: Redo styling and integrate with fieldset.
 *
 * Rename actions to primary and secondary. For example, cancel should be a
 * "secondary" action.
 */
.btn,
.button {
  transition: color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
  display: inline-block;
  border-radius: 2px;
  background-color: #3FA9F5;
  color: #222222 !important;
  padding: 0 2rem;
  text-align: center;
  line-height: 4;
  text-decoration: none !important;
  cursor: pointer;
  font-weight: 400;
  transform: scale(1);
  transform-origin: center;
}
.btn:active,
.button:active {
  transform: scale(0.98);
}
.btn .material-icons:first-child,
.button .material-icons:first-child {
  margin-right: 1rem;
}
.btn.cancel,
.button.cancel,
.btn.button-secondary,
.button.button-secondary {
  border: 0.1rem solid #3FA9F5;
  background-color: transparent;
  color: #3FA9F5 !important;
}
.btn.disabled,
.button.disabled,
.btn.button-disabled,
.button.button-disabled {
  pointer-events: none;
  background-color: #EBEBEB;
  color: #999999 !important;
}
.btn.button-disabled-subtle,
.button.button-disabled-subtle {
  pointer-events: none;
  opacity: 0.5;
}
.btn.neutral,
.button.neutral,
.btn.button-neutral,
.button.button-neutral {
  background-color: #4D4D4D;
  color: #FFFFFF !important;
}
.btn.button-dark-gray,
.button.button-dark-gray {
  background-color: #222222;
}
.btn.button-dark-gray-secondary,
.button.button-dark-gray-secondary {
  background-color: #2D2D2D;
  color: #3FA9F5 !important;
}
.btn.button-lighter-gray,
.button.button-lighter-gray {
  background-color: #F2F2F2;
  color: #222222 !important;
}
.btn.button-white,
.button.button-white {
  background-color: #FFFFFF;
  color: #3FA9F5 !important;
}
.btn.button-black-on-white,
.button.button-black-on-white {
  background-color: #FFFFFF;
  color: #000000 !important;
}
.btn.button-black-outline-on-transparent,
.button.button-black-outline-on-transparent {
  border: 0.1rem solid #000000;
  background-color: transparent;
  color: #000000 !important;
}
.btn.button-white-outline-on-transparent,
.button.button-white-outline-on-transparent {
  border: 0.1rem solid #FFFFFF;
  background-color: transparent;
  color: #FFFFFF !important;
}
.btn.button-faded-dark,
.button.button-faded-dark {
  background-color: rgba(0, 0, 0, 0.1);
  color: #3FA9F5 !important;
}
.btn.button-faded-light,
.button.button-faded-light {
  background-color: rgba(255, 255, 255, 0.1);
  color: #3FA9F5 !important;
}
fieldset .btn,
fieldset .button {
  width: 100%;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
.spin-normal {
  display: inline-block;
  animation: spin 700ms infinite linear;
}
.spin-fast {
  display: inline-block;
  animation: spin 500ms infinite linear;
}
.spin-fastest {
  display: inline-block;
  animation: spin 300ms infinite linear;
}
@keyframes bounce-left {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-1rem);
  }
  100% {
    transform: translateX(0);
  }
}
.bounce-left {
  animation: bounce-left 1000ms infinite;
}
/**
 * images.css
 *
 * This supports the ImageComponent, which provides the legacy/decorative
 * renderer, which means an image URL is loaded on the `i` tag as a CSS
 * background image, while the modern/default renderer uses the `img` tag, which
 * leverages some other modern functionality.
 *
 * Contains reusable background images that just need to be defined as class
 * attributes. Note that the inner text content of tags that assume these
 * attributes should contain the equivalent alternative text within. It will
 * not be displayed, but will appear if CSS is disabled.
 *
 * @author Dane MacMillan <work@danemacmillan.com>
 */
.image {
  display: inline-block;
  position: relative;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  margin: auto;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  line-height: 0;
  vertical-align: middle;
  /* Base values and should be overridden. */
  /* Use background-size should padding imitation be required. */
  background-size: contain;
  width: 4rem;
  height: 4rem;
  object-fit: contain;
  aspect-ratio: 1;
}
.image img {
  display: block;
  width: inherit;
  height: 100%;
  min-height: inherit;
  min-width: inherit;
  object-fit: inherit;
  max-inline-size: 100%;
  aspect-ratio: inherit;
}
.image.image-fallback {
  background-image: url("../images/image-not-available-v2-en-550px.jpg");
  opacity: 0.75;
}
.image.image-fallback img {
  visibility: hidden !important;
}
.image.image-cover {
  background-size: cover !important;
  object-fit: cover !important;
}
.image.image-cover img {
  object-fit: cover !important;
}
.image.image-tall {
  width: 4rem;
  height: 100%;
}
.image.image-wide {
  width: 8rem;
  height: 100%;
}
.image.image-circled {
  border-radius: 100%;
}
.image.image-rounded {
  border-radius: 0.1rem;
}
.image.image-padded {
  background-size: auto 75%;
}
.image.image-padded img {
  transform: scale(75%);
}
.image.image-background-white {
  background-color: #FFFFFF;
}
.image.image-background-black {
  background-color: #000000;
}
.image.image-background-dark-gray {
  background-color: #222222;
}
.image.image-background-dark-gray-slight-light {
  background-color: #2D2D2D;
}
.splash-header {
  display: block;
  height: 20rem;
  width: 100%;
  background-size: cover;
  background-position: center;
  margin: 0 0 1.5rem 0 !important;
}
.splash-header-customer-service {
  background-image: url("../images/customerservice.jpg");
}
/**
 * Image placeholder examples.
 */
.image-placeholder-wide {
  background-image: url(https://m.canadasmotorcycle.ca/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/0064/0414/thor_youth_enemy_goggles_flo_green_rollover.jpg);
}
.image-placeholder-tall {
  background-image: url(https://m.canadasmotorcycle.ca/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/catalogimages/michelin/COMMANDER-2-Rear-tire.jpg);
}
/**
 * The FortNine F9 emblem.
 */
.f9-emblem {
  background-size: 36.8rem 51.2rem;
  width: 36.8rem;
  height: 51.2rem;
}
.f9-emblem-red {
  background-image: url("../images/f9-emblem-red-2.0-368w512h.png");
}
.f9-emblem-white {
  background-image: url("../images/f9-emblem-white-2.0-368w512h.png");
}
.f9-emblem-gray {
  background-image: url(https://fortnine.ca/assets/common-assets/f9-emblem-dgray.svg);
  background-repeat: no-repeat;
}
.f9-emblem-128h {
  background-size: auto 12.8rem;
  width: 9.2rem;
  height: 12.8rem;
}
.f9-emblem-64h {
  background-size: auto 6.4rem;
  width: 4.6rem;
  height: 6.4rem;
}
.f9-emblem-48h {
  background-size: auto 4.8rem;
  width: 3.5rem;
  height: 4.8rem;
}
.f9-emblem-32h {
  background-size: auto 3.2rem;
  width: 2.3rem;
  height: 3.2rem;
}
.f9-emblem-24h {
  background-size: auto 2.4rem;
  width: 1.7rem;
  height: 2.4rem;
}
.f9-emblem-16h {
  background-size: auto 1.6rem;
  width: 1.2rem;
  height: 1.6rem;
}
.f9-emblem-14h {
  background-size: auto 1.4rem;
  width: 1.00625rem;
  height: 1.4rem;
}
.f9-emblem-12h {
  background-size: auto 1.2rem;
  width: 0.8625rem;
  height: 1.2rem;
}
/**
 * The FortNine full logo.
 *
 * Scale: 0.125
 */
.fortnine-logo {
  background-size: 229.9rem 51.2rem;
  width: 229.9rem;
  height: 51.2rem;
}
.fortnine-logo-red {
  background-image: url("../images/fortnine-logo-red-2299w512h.png");
}
.fortnine-logo-gray {
  background-image: url("../images/f9-logo-dgray.svg");
  background-repeat: no-repeat;
}
.fortnine-logo-64h {
  background-size: auto 6.4rem;
  width: 28.7rem;
  height: 6.4rem;
}
.fortnine-logo-48h {
  background-size: auto 4.8rem;
  width: 21.6rem;
  height: 4.8rem;
}
.fortnine-logo-32h {
  background-size: auto 3.2rem;
  width: 14.4rem;
  height: 3.2rem;
}
.fortnine-logo-28h {
  background-size: auto 2.8rem;
  width: 12.6rem;
  height: 2.8rem;
}
.fortnine-logo-20h {
  background-size: auto 2rem;
  width: 9rem;
  height: 2rem;
}
.img-full {
  width: 100%;
  height: auto;
}
.canada-mapleleaf {
  background-size: 60rem 60rem;
  width: 60rem;
  height: 60rem;
  background-image: url("../images/mapleleaf.png");
}
.canada-mapleleaf-64h {
  background-size: 6.4rem 6.4rem;
  width: 6.4rem;
  height: 6.4rem;
}
.canada-mapleleaf-32h {
  background-size: 3.2rem 3.2rem;
  width: 3.2rem;
  height: 3.2rem;
}
.canada-mapleleaf-24h {
  background-size: 2.4rem 2.4rem;
  width: 2.4rem;
  height: 2.4rem;
}
.canada-mapleleaf-14h {
  background-size: 1.4rem 1.4rem;
  width: 1.4rem;
  height: 1.4rem;
}
.canada-mapleleaf-12h {
  background-size: 1.2rem 1.2rem;
  width: 1.2rem;
  height: 1.2rem;
}
/**
 * Standard box shadow values. Use this in combination with the box-shadow
 * color variables defined in _colors.less.
 */
.iframe-wrapper {
  -webkit-overflow-scrolling: touch;
  overflow: scroll;
}
.js-high-zindex {
  z-index: 90;
}
/**
 * Values introduced for PDP v2
 */
/**
Message component styles
 */
.msg,
.message {
  display: flex;
  flex-wrap: nowrap;
  padding: 0.8rem 1.2rem;
  gap: 1.2rem;
  border-radius: 4px;
  border: solid 1px #D4D4D4;
  align-items: center;
  position: relative;
  font-size: 1.4rem;
  cursor: default;
  height: fit-content;
}
.msg .msg-icon,
.message .msg-icon {
  display: none;
  visibility: hidden;
  flex: 0 0 auto;
  margin-bottom: 0.2em;
}
.msg .msg-icon.msg-icon-custom,
.message .msg-icon.msg-icon-custom {
  display: block;
  visibility: visible;
}
.msg .msg-icon.msg-icon-discard,
.message .msg-icon.msg-icon-discard {
  visibility: visible;
  position: absolute;
  right: 2rem;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.msg .msg-content,
.message .msg-content {
  flex: 0 1 auto;
}
.msg.msg-discardable:hover .msg-icon-discard,
.message.msg-discardable:hover .msg-icon-discard {
  display: flex;
}
.msg.msg-discardable:hover .msg-icon-discard:hover,
.message.msg-discardable:hover .msg-icon-discard:hover {
  cursor: pointer;
}
.msg.msg-success,
.message.msg-success,
.msg.message-success,
.message.message-success {
  background-color: #F0FDF4;
  color: #15803D;
  border-color: #15803D;
}
.msg.msg-success .msg-icon-success,
.message.msg-success .msg-icon-success,
.msg.message-success .msg-icon-success,
.message.message-success .msg-icon-success {
  display: block;
  visibility: visible;
}
.msg.msg-error,
.message.msg-error,
.msg.message-error,
.message.message-error {
  background-color: #FDF0F2;
  color: #DD312E;
  border-color: #DD312E;
}
.msg.msg-error .msg-icon-error,
.message.msg-error .msg-icon-error,
.msg.message-error .msg-icon-error,
.message.message-error .msg-icon-error {
  display: block;
  visibility: visible;
}
.msg.msg-warning,
.message.msg-warning,
.msg.message-warning,
.message.message-warning {
  background-color: #FFFBEB;
  color: #805215;
  border-color: #806215;
}
.msg.msg-warning .msg-icon-warning,
.message.msg-warning .msg-icon-warning,
.msg.message-warning .msg-icon-warning,
.message.message-warning .msg-icon-warning {
  display: block;
  visibility: visible;
}
.msg.msg-info,
.message.msg-info,
.msg.message-info,
.message.message-info {
  background-color: #F0F9FF;
  color: #115C93;
  border-color: #0277BD;
}
.msg.msg-info .msg-icon-info,
.message.msg-info .msg-icon-info,
.msg.message-info .msg-icon-info,
.message.message-info .msg-icon-info {
  display: block;
  visibility: visible;
}
.msg.msg-centered,
.message.msg-centered {
  justify-content: center;
}
.msg.msg-content-centered .msg-content,
.message.msg-content-centered .msg-content {
  text-align: center;
  flex: 1 1 auto;
}
.msg.msg-icon-bigger .msg-icon,
.message.msg-icon-bigger .msg-icon {
  font-size: 150% !important;
}
.msg.msg-more-visible,
.message.msg-more-visible {
  font-size: 1.6rem;
  font-weight: 500;
}
.msg.msg-borderless,
.message.msg-borderless {
  border: none;
}
.msg.msg-inline,
.message.msg-inline {
  display: inline-flex;
  width: fit-content;
}
.msg.msg-small,
.message.msg-small {
  padding: 0.4rem 0.6rem;
  gap: 0.6rem;
  line-height: 1;
  font-size: 1.2rem;
}
a.msg:hover,
a.message:hover {
  cursor: pointer;
}
/**
 * _contour.less
 *
 * Contour is a set of styling that provides a more stylized, contoured header
 * and body. The header part is optional, but should it be used, it will always
 * appear overlapped by the body, no matter how much content is in the body.
 * The predominant characteristic is that the body has a background
 * color and visible contour that visually distinguishes it from the general
 * body behind, which is typically a contrasting color.
 *
 * This is actively used in order portal.
 *
 * @author Dane MacMillan <work@danemacmillan.com>
 *
 * @TODO:
 * - Replace customer section and various login/signup forms with these classes.
 */
.contour-header {
  position: relative;
  z-index: 2;
  width: 100%;
  background-color: transparent;
}
.contour-header::before {
  content: '';
  display: block;
  width: 100%;
  height: calc(100% + 3rem + 3rem + 3rem);
  position: absolute;
  background-color: #CECECE;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.contour-body {
  position: relative;
  z-index: 3;
  background-color: #FFFFFF;
  box-shadow: 0 -2px 5px -1px rgba(0, 0, 0, 0.15);
  margin-bottom: 1.5rem;
  padding-top: 1.5rem;
  margin-left: 2rem;
  margin-right: 2rem;
}
.contour-body::after {
  content: '';
  display: table;
  clear: both;
}
.contour-body .contour-body-shape {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}
.contour-body .contour-body-shape .field-recaptcha .g-recaptcha {
  margin-bottom: 1.5rem;
}
.contour-body .contour-body-shape .field-recaptcha .g-recaptcha > div:first-child {
  margin-left: auto;
  margin-right: auto;
}
/**
 * _flex.less - Flex helpers.
 *
 * @author Dane MacMillan <work@danemacmillan.com>
 */
/**
 * The default is always a row-direction container, with column-direction items.
 */
.flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.flex-row.flex-row-nowrap {
  flex-wrap: nowrap;
}
.flex-row .flex-item {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
  justify-content: center;
  align-items: stretch;
}
.flex-row .flex-item-static {
  flex-grow: 0;
}
.flex-row .flex-item-dynamic {
  flex-shrink: 1;
}
.flex-row .flex-item-fitted {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}
.flex-row .flex-item-5 {
  flex-basis: 5%;
}
.flex-row .flex-item-10 {
  flex-basis: 10%;
}
.flex-row .flex-item-15 {
  flex-basis: 15%;
}
.flex-row .flex-item-20 {
  flex-basis: 20%;
}
.flex-row .flex-item-25 {
  flex-basis: 25%;
}
.flex-row .flex-item-30 {
  flex-basis: 30%;
}
.flex-row .flex-item-40 {
  flex-basis: 40%;
}
.flex-row .flex-item-45 {
  flex-basis: 45%;
}
.flex-row .flex-item-50 {
  flex-basis: 50%;
}
.flex-row .flex-item-55 {
  flex-basis: 55%;
}
.flex-row .flex-item-60 {
  flex-basis: 60%;
}
.flex-row .flex-item-70 {
  flex-basis: 70%;
}
.flex-row .flex-item-75 {
  flex-basis: 75%;
}
.flex-row .flex-item-100 {
  flex-basis: 100%;
}
/**
 * _footer.less
 *
 * Footer within main content. This is distinct from the sticky footer.
 *
 * @author Dane MacMillan <work@danemacmillan.com>
 */
/**
 * The footer within the main content node.
 */
.main-footer {
  background-color: #222222;
  overflow: hidden;
  padding-top: 3rem;
}
.main-footer .fortnine-logo-link {
  text-align: center;
}
.main-footer .fortnine-logo-link .fortnine-logo {
  vertical-align: middle;
}
.main-footer p,
.main-footer h3 {
  color: #CECECE;
}
.main-footer .proudly-canadian {
  font-size: 1.4rem;
  text-align: center;
}
.main-footer .theme-switch {
  display: block;
  text-align: center;
  background-color: #F8AA27;
  color: #000000;
  font-weight: 700;
  text-decoration: none !important;
  line-height: 4;
  margin-bottom: 1.5rem;
}
.main-footer .symmetry-sides {
  background-color: transparent;
}
.main-footer .symmetry-sides > :last-child {
  box-shadow: 0 0 3rem 2rem #222222, 0 0 3rem 2rem #222222;
}
.main-footer .menu-stack .symmetry-sides {
  background-color: #2D2D2D;
  color: #999999;
}
.main-footer .menu-stack .symmetry-sides > :last-child {
  box-shadow: 0 0 3rem 2rem #2D2D2D, 0 0 3rem 2rem #2D2D2D !important;
}
.main-footer .main-footer-newsletter {
  padding-top: 1.5rem;
  background-color: #2D2D2D;
  overflow: hidden;
}
.main-footer .main-footer-newsletter fieldset {
  -webkit-transform: unset;
  transform: unset;
  will-change: unset;
  backface-visibility: unset;
}
.main-footer .main-footer-newsletter fieldset .material-icons {
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
@media (max-width: 655px) {
  body:not(.mobile-theme) .main-footer .theme-switch {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20000;
    margin-bottom: 0;
    font-size: 150%;
    line-height: 1.5;
    padding: 2vh 2rem;
    box-shadow: 0 -2px 5px -1px rgba(0, 0, 0, 0.15);
  }
}
/**
 * The copyright footer directly beneath the main footer.
 *
 * This is a sibling of `.main-footer`.
 */
.footer-copyright {
  font-size: 1rem;
  color: #EBEBEB;
  text-shadow: 0 1px 0 #222222;
  text-align: center;
  text-transform: uppercase;
  background-color: #2D2D2D;
  box-shadow: inset 0 2px 2px -2px #000000;
}
.footer-copyright > * {
  color: inherit;
  display: inline-block;
  margin-left: 1rem;
  margin-right: 1rem;
}
/*
 * TODO: eventually figure out elegant way of making footer stick to bottom
 * on pages that have short content, like a 404 page. None of the sticky
 * methods online work.
 * I guess we did figure it out at some point, cause this is no longer relevant.
 * It actually breaks the page and adds an overlay gray box over the footer on
 * mobile and a space on desktop.
 */
/**
 * Page messages provided by M2 using RequireJS and Knockout.
 *
 * This will be used until Linus Shops takes control over its own messaging.
 * They can still be used as standalone (.page+ are M2), so that the messaging
 * UI is the same, but leveraged by different code.
 *
 * Note that the .message rules are used in the cart under `.cart-feedback`.
 *
 * @author Dane MacMillan <work@danemacmillan.com>
 */
.page.messages {
  margin-left: 2rem;
  margin-right: 2rem;
}
.page.messages::after {
  content: '';
  display: table;
  clear: both;
}
.message {
  padding: 1.5rem 2rem;
  background-color: #FCCC80;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  margin-bottom: 1.5rem;
}
.message::after {
  content: '';
  display: table;
  clear: both;
}
.message a {
  font-weight: 700;
  color: #000000;
  text-decoration: underline;
}
.message:empty {
  display: none;
}
.message + .message {
  margin-top: -1.4rem;
}
.message-success {
  background-color: #07D159;
}
.message-warning {
  background-color: #FFD740;
}
.message-error {
  background-color: #FF6666;
}
.message-notice {
  background-color: #f2fafe;
}
body.catalog-product-view .page.messages {
  margin-left: 0;
  margin-right: 0;
}
body.checkout-cart-index .page.messages {
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}
.lac-notification-sticky {
  position: relative;
  z-index: 100;
}
.lac-notification-sticky .lac-notification.clearfix .top-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: #DD312E;
  color: #FFFFFF;
  padding: 1.5rem 2rem;
}
.lac-notification-sticky .lac-notification.clearfix .top-container .lac-notification-close-link {
  line-height: 2;
}
body.mobile-theme .lac-notification-sticky {
  z-index: 89;
}
body.mobile-theme .lac-notification-sticky .lac-notification.clearfix .top-container .lac-notification-close-link {
  line-height: 1;
  padding: 1rem;
}
body.mobile-theme .lac-notification-sticky .lac-notification.clearfix .top-container .lac-notification-close-link i.material-icons {
  margin-right: 0;
}
body.mobile-theme .lac-notification-sticky .lac-notification.clearfix .top-container .lac-notification-close-link span {
  display: none;
}
/**
 * swiper.less
 *
 * Swipe component for horizontal swiping.
 *
 * @author Dane MacMillan <work@danemacmillan.com>
 */
.swiper {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  height: auto;
  /**
     * Allow scroll behaviour to appear to scroll off to the outset of a space.
     */
  /**
     * Content is constrained within a fluid range and content dictates.
     *
     * This is ideal for content that is allowed to occupy slightly less or
     * slightly more space, but should never fully occupy a space or become so
     * small as to become unintelligible. The best case for this are existing
     * components that get nested within, like the Product Card.
     *
     * This also ensures that the content dictates the height automatically,
     * and ensures there is no additional padding by the swiper-item itself.
     */
  /**
     * This only works with components that are developed properly.
     *
     * For example, the Product Card component will respect these values and
     * scale accordingly.
     */
  /**
    Swiper navigation style
     */
}
.swiper > .swiper-container {
  display: flex;
  flex-direction: row;
  overflow-y: hidden !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.swiper > .swiper-container::-webkit-scrollbar {
  display: none;
}
.swiper > .swiper-container > .swiper-item {
  display: flex;
  flex-shrink: 0;
  flex-grow: 1;
  flex-direction: column;
  width: 24rem;
  height: 24rem;
  font-size: 1.4rem;
  overflow: hidden;
  position: relative;
  background-color: #FFFFFF;
  margin-right: 2rem;
  border-radius: 2px;
  color: #000000;
  padding: 2rem;
  text-decoration: none !important;
  scroll-snap-align: start;
  /* Only add margin first text element if there is a text element,
        otherwise the image should continue to occupy all available space. */
}
.swiper > .swiper-container > .swiper-item:first-of-type {
  margin-left: 0 !important;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.swiper > .swiper-container > .swiper-item:last-of-type {
  margin-right: 0 !important;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.swiper > .swiper-container > .swiper-item .image {
  display: block;
  width: 100%;
  height: 100%;
  float: left;
}
.swiper > .swiper-container > .swiper-item .swiper-text {
  text-align: center;
  position: relative;
  font-weight: 300;
}
.swiper > .swiper-container > .swiper-item .swiper-text:after {
  content: '';
  display: block;
  position: absolute;
  background-color: #FFFFFF;
  width: 1px;
  right: -2rem;
  top: 0;
  height: 100%;
  box-shadow: 1px 0 2rem 2rem #FFFFFF;
}
.swiper > .swiper-container > .swiper-item .image + .swiper-text {
  margin-top: 1rem;
}
.swiper > .swiper-container > .swiper-item.swiper-item-more {
  text-align: center;
  font-size: 12rem;
  color: #CECECE;
}
.swiper.swiper-small {
  height: 10rem;
}
.swiper.swiper-small > .swiper-container > .swiper-item {
  width: 10rem;
  height: 10rem;
  font-size: 1.4rem;
  margin-right: 1rem;
  padding: 1rem;
}
.swiper.swiper-small > .swiper-container > .swiper-item .swiper-text:after {
  right: -1rem;
  box-shadow: 1px 0 1rem 1rem #FFFFFF;
}
.swiper.swiper-small > .swiper-container > .swiper-item .image + .swiper-text {
  margin-top: 0.5rem;
}
.swiper.swiper-small > .swiper-container > .swiper-item.swiper-item-more {
  font-size: 5rem;
}
.swiper.swiper-tiny {
  height: 6rem;
}
.swiper.swiper-tiny > .swiper-container > .swiper-item {
  width: 6rem;
  height: 6rem;
  font-size: 1rem;
  margin-right: 1rem;
  padding: 0.75rem;
}
.swiper.swiper-tiny > .swiper-container > .swiper-item .swiper-text:after {
  right: -0.75rem;
  box-shadow: 1px 0 0.75rem 0.75rem #FFFFFF;
}
.swiper.swiper-tiny > .swiper-container > .swiper-item .image + .swiper-text {
  margin-top: 1rem;
}
.swiper.swiper-tiny > .swiper-container > .swiper-item.swiper-item-more {
  font-size: 3rem;
}
.swiper.swiper-teeny {
  height: 4rem;
}
.swiper.swiper-teeny > .swiper-container > .swiper-item {
  width: 4rem;
  height: 4rem;
  font-size: 1rem;
  margin-right: 0.1rem;
  padding: 0.75rem;
  min-width: 28%;
}
.swiper.swiper-teeny > .swiper-container > .swiper-item .swiper-text:after {
  right: -0.75rem;
  box-shadow: 1px 0 0.75rem 0.75rem #FFFFFF;
}
.swiper.swiper-teeny > .swiper-container > .swiper-item .image + .swiper-text {
  margin-top: 0.1rem;
}
.swiper.swiper-teeny > .swiper-container > .swiper-item.swiper-item-more {
  font-size: 2rem;
}
.swiper.swiper-contiguous > .swiper-container > .swiper-item {
  margin-right: 0;
}
.swiper.swiper-tight > .swiper-container > .swiper-item {
  margin-right: 0.125rem;
}
.swiper.swiper-transparent > .swiper-container > .swiper-item {
  background-color: unset;
}
.swiper.swiper-transparent > .swiper-container > .swiper-item .swiper-text::after {
  box-shadow: none;
  background-color: unset;
}
.swiper.swiper-outset > .swiper-container {
  padding-left: 2rem;
  padding-right: 2rem;
}
.swiper.swiper-adaptable > .swiper-container > .swiper-item {
  width: 15%;
  height: auto;
  padding: 0;
  min-width: 18rem;
  max-width: 20rem;
}
.swiper.swiper-scale-reduced-once > .swiper-container > .swiper-item {
  font-size: 1.2rem;
  min-width: 15rem;
}
.swiper.swiper-wrap {
  height: auto;
  width: auto;
}
.swiper.swiper-wrap > .swiper-container {
  flex-wrap: wrap;
  justify-content: left;
}
.swiper.swiper-wrap > .swiper-container > .swiper-item {
  min-width: initial;
  flex-grow: 0;
}
.swiper.swiper-navigation {
  position: relative;
}
.swiper.swiper-navigation > .swiper-container {
  transition: margin-right 0.2s, margin-left 0.2s;
}
.swiper.swiper-navigation > .swiper-navigation-control {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  height: 100%;
  cursor: pointer;
  background-color: rgba(51, 51, 51, 0.025);
  color: #222222;
  font-size: 4rem;
  overflow: hidden;
  width: 0;
  transition: width 0.2s;
}
.swiper.swiper-navigation > .swiper-navigation-control.swiper-navigation-control-left {
  left: 0;
}
.swiper.swiper-navigation > .swiper-navigation-control.swiper-navigation-control-right {
  right: 0;
}
.swiper.swiper-navigation > .swiper-navigation-control:hover {
  color: #3FA9F5 !important;
}
.swiper.swiper-navigation.swiper-navigation-visible > .swiper-container {
  margin-right: 4rem;
  margin-left: 4rem;
  scroll-snap-type: unset;
}
.swiper.swiper-navigation.swiper-navigation-visible > .swiper-navigation-control {
  width: 4rem;
}
.swiper.swiper-navigation.swiper-navigation-subtle > .swiper-navigation-control {
  background-color: transparent;
  color: #CECECE;
  font-size: 4rem;
}
.swiper.swiper-vertical {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: 100%;
}
.swiper.swiper-vertical > .swiper-container {
  flex-direction: column;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  gap: 1.5rem;
  max-height: 48.5rem;
}
.swiper.swiper-vertical > .swiper-container > .swiper-item {
  border-radius: 4px;
  width: 7rem;
  height: 5.5rem;
}
.swiper.swiper-vertical > .swiper-container > .swiper-item:hover {
  cursor: pointer;
}
.swiper.swiper-vertical .swiper-navigation-control {
  display: none;
}
.swiper.swiper-badges .swiper-container {
  gap: 0.8rem;
}
.swiper.swiper-badges .swiper-container .swiper-item {
  background-color: #FFFFFF;
  border-radius: 8px;
  border: solid 1px #D4D4D4;
  padding: 5px;
}
.swiper.swiper-badges .swiper-container .swiper-item:hover {
  cursor: pointer;
  border-color: #1D9AF5;
}
.swiper.swiper-badges .swiper-container .swiper-item.swiper-item-active {
  border: solid 3px #1D9AF5;
  padding: 3px;
}
/**
 * breadcrumb.less
 *
 * This is a breadcrumb component that integrates with a heading title as the
 * the optional final crumb in the list.
 *
 * Note that breadcrumb line-height is slightly different than the standard, in
 * that it is setting a unit, as the before/after arrows are very finicky, and
 * they do inherit any kind of height or allow percentages.
 *
 * @author Dane MacMillan <work@danemacmillan.com>
 */
.breadcrumb {
  width: 100%;
  display: block;
  overflow-y: hidden;
  overflow-x: auto;
  line-height: 4.8rem;
}
.breadcrumb ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
  font-size: 1.2rem;
}
.breadcrumb ul li {
  flex-grow: 0;
  flex-shrink: 0;
  margin-bottom: 0.2rem;
}
.breadcrumb ul li a {
  position: relative;
  color: #4E4E4E;
  display: block;
  background-color: #E5E5E5;
  text-decoration: none;
  line-height: inherit;
  padding: 0 0.5rem;
  text-align: center;
  margin-right: 2.2rem;
}
.breadcrumb ul li a:before,
.breadcrumb ul li a:after {
  content: '';
  position: absolute;
  top: 0;
  color: #E5E5E5;
  border: 0 solid currentColor;
  border-width: 2.4rem 1rem;
}
.breadcrumb ul li a:before {
  left: -2rem;
  border-left-color: transparent;
}
.breadcrumb ul li a:after {
  left: 100%;
  border-color: transparent;
  border-left-color: currentColor;
}
.breadcrumb ul li a .material-icons {
  color: #999999;
}
.breadcrumb ul li a:hover {
  background-color: #3FA9F5;
  color: #FFFFFF;
}
.breadcrumb ul li a:hover .material-icons {
  color: #FFFFFF;
}
.breadcrumb ul li a:hover:before,
.breadcrumb ul li a:hover:after {
  color: #3FA9F5;
}
.breadcrumb ul li:first-child a {
  padding-left: 2rem;
}
.breadcrumb ul li:last-child a {
  margin-left: 2rem;
  border: 0;
}
.breadcrumb ul li:last-child a:after {
  background-color: #E5E5E5;
  padding-right: 0.2rem;
}
.breadcrumb ul li:last-child a:hover:after {
  background-color: #3FA9F5;
}
.breadcrumb ul li:nth-last-child(2) a {
  margin-right: 0.2rem;
}
.breadcrumb ul li:last-child :not(a) {
  border: none;
  margin: 0 0 0 2rem;
  background-color: transparent;
  color: #000000;
  font-weight: 400;
}
.breadcrumb.breadcrumb-full-width ul {
  flex-wrap: nowrap;
}
.breadcrumb.breadcrumb-full-width ul li {
  flex-grow: 1;
  margin-bottom: 0;
}
.breadcrumb.breadcrumb-no-crumb-margin ul li {
  margin-bottom: 0;
}
.breadcrumb.breadcrumb-bright-version {
  background-color: #E5E5E5;
}
.breadcrumb.breadcrumb-bright-version li a {
  background-color: #F2F2F2;
}
.breadcrumb.breadcrumb-bright-version li a:before,
.breadcrumb.breadcrumb-bright-version li a:after {
  color: #F2F2F2;
}
.breadcrumb.breadcrumb-bright-version li:last-child a:after {
  background-color: #F2F2F2;
}
.breadcrumb.breadcrumb-minimal {
  line-height: 1;
  background-color: unset;
  color: #000000;
}
.breadcrumb.breadcrumb-minimal ul {
  margin-left: 2rem;
  margin-right: 2rem;
}
.breadcrumb.breadcrumb-minimal ul li {
  margin-bottom: 0 !important;
}
.breadcrumb.breadcrumb-minimal ul li a {
  background-color: inherit;
  text-decoration: unset;
  color: inherit;
  margin: 0 !important;
  padding: 0 !important;
}
.breadcrumb.breadcrumb-minimal ul li a .material-icons {
  display: none;
}
.breadcrumb.breadcrumb-minimal ul li a:before,
.breadcrumb.breadcrumb-minimal ul li a:after {
  content: unset;
  position: unset;
  border: 0;
}
.breadcrumb.breadcrumb-minimal ul li a:after {
  content: '/';
  padding: 0 0.2rem;
  margin-right: 0.2rem;
  color: inherit;
}
.breadcrumb.breadcrumb-minimal ul li a:hover {
  background-color: inherit;
  color: #3FA9F5;
}
.breadcrumb.breadcrumb-minimal ul li a:hover:after {
  color: #000000;
}
.breadcrumb.breadcrumb-minimal ul li:last-child {
  font-weight: 700;
}
.breadcrumb.breadcrumb-minimal ul li:last-child a:after {
  content: unset;
}
/**
 * Button Component Styles
 *
 * @author Alex Ghiban <drew7721@gmail.com>
 */
.button.button-ask .button-text-ask,
.btn.button-ask .button-text-ask,
.button.button-ask .button-text-confirmed,
.btn.button-ask .button-text-confirmed {
  display: none;
}
.button.button-ask.button-definitely-cancel,
.btn.button-ask.button-definitely-cancel {
  background-color: #DD312E !important;
  color: #FFFFFF !important;
}
.button.button-ask.button-definitely-cancel .button-text-initial,
.btn.button-ask.button-definitely-cancel .button-text-initial {
  display: none;
}
.button.button-ask.button-definitely-cancel .button-text-ask,
.btn.button-ask.button-definitely-cancel .button-text-ask {
  display: inline-block;
}
.button.button-ask.button-definitely-cancel-spin,
.btn.button-ask.button-definitely-cancel-spin {
  background-color: #DD312E !important;
  color: #FFFFFF !important;
  pointer-events: none !important;
}
.button.button-ask.button-definitely-cancel-spin .button-text-initial,
.btn.button-ask.button-definitely-cancel-spin .button-text-initial,
.button.button-ask.button-definitely-cancel-spin .button-text-ask,
.btn.button-ask.button-definitely-cancel-spin .button-text-ask {
  display: none;
}
.button.button-ask.button-definitely-cancel-spin .button-text-confirmed,
.btn.button-ask.button-definitely-cancel-spin .button-text-confirmed {
  display: inline-block;
}
/**
 * _productcard.less
 *
 * Product Card component for category listings.
 *
 * Individual product card summaries that appear within category listing.
 *
 * @author Dane MacMillan <work@danemacmillan.com>
 */
.product-card {
  display: block;
  height: 100%;
  cursor: pointer;
  color: #222222 !important;
  text-decoration: none !important;
  overflow: hidden;
  white-space: normal;
}
.product-card .product-card-image {
  position: relative;
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.product-card .product-card-image > .image {
  display: block;
  width: 100%;
  height: auto;
  border: 2rem solid #FFFFFF;
  background-color: #FFFFFF;
  color: #FFFFFF;
  min-width: 100%;
  min-height: 104px;
  aspect-ratio: auto;
}
.product-card .product-card-image .product-card-image-discount {
  position: absolute;
  top: 0;
}
.product-card .product-card-image .product-card-image-discount .discount-badge-msrp-tooltip {
  margin-left: 4px;
}
.product-card .product-card-image .product-card-image-discount .discount-badge-msrp-tooltip svg {
  width: 15px;
  height: 15px;
}
.product-card .product-card-image .product-card-image-colors {
  font-size: 1.2rem;
  color: #3FA9F5;
  text-shadow: 0 0 10px #FFFFFF, 0 0 10px #FFFFFF, 0 0 10px #FFFFFF, 0 0 10px #FFFFFF, 0 0 10px #FFFFFF;
  padding: 0 0.5rem;
  position: absolute;
  bottom: 0;
  right: 0;
}
.product-card .product-card-name {
  font-size: inherit;
  margin: 0 0 0.375rem 0;
  font-weight: 300;
}
.product-card .product-card-name em,
.product-card .product-card-name mark {
  font-style: inherit;
  font-weight: inherit;
  background-color: #FCCC80;
  border-radius: 2px;
  padding: 0.1rem 0;
}
.product-card:hover .product-card-name,
.product-card:active .product-card-name,
.product-card:focus .product-card-name {
  color: #3FA9F5;
}
.product-card .product-card-details .product-view-image-discount {
  display: none;
}
.product-card .product-card-details .savings {
  display: none;
}
.product-card .product-card-details .msrp-range,
.product-card .product-card-details .msrp-range-was,
.product-card .product-card-details .old-price {
  font-size: calc(100% - 0.2rem);
  font-weight: 300;
  color: #4D4D4D;
  margin: 0 0 0.375rem 0;
}
.product-card .product-card-details .msrp-range:empty,
.product-card .product-card-details .msrp-range-was:empty,
.product-card .product-card-details .old-price:empty {
  display: none;
}
.product-card .product-card-details .msrp-range .old-price-value,
.product-card .product-card-details .msrp-range-was .old-price-value,
.product-card .product-card-details .old-price .old-price-value {
  text-decoration: line-through;
}
.product-card .product-card-details .price-range,
.product-card .product-card-details .special-price,
.product-card .product-card-details .regular-price,
.product-card .product-card-details .current-price {
  display: inline;
  font-weight: 700;
  margin: 0 0 0.75rem 0;
}
.product-card .product-card-details .current-price.see-price-in-cart {
  background-color: #3FA9F5;
  color: #FFFFFF;
  display: inline-block;
  font-weight: 400;
  padding: 0.375rem 1rem;
}
.product-card .product-card-details .product-view-rating {
  font-size: calc(100% + 0.2rem);
}
.product-card .badge {
  font-size: 1.2rem;
}
.product-card.product-card-white {
  background-color: #FFFFFF;
}
.product-card.product-card-white .product-card-name,
.product-card.product-card-white .product-card-details {
  margin-left: 2rem;
  margin-right: 2rem;
}
.product-card.product-card-white .product-card-details {
  margin-bottom: 1.5rem;
}
.product-card.product-card-light-outline {
  border: 0.1rem solid #F2F2F2;
  border-radius: 2px;
}
.product-card.product-card-darkmode {
  background-color: #222222;
  color: #F2F2F2 !important;
  padding: 1rem 1rem 1.5rem 1rem;
  border-radius: 2px;
}
.product-card.product-card-darkmode .product-card-image > .image {
  border-radius: 2px;
  border-width: 1rem;
}
.product-card.product-card-on-dark {
  color: #F2F2F2 !important;
}
.product-card.product-card-on-dark .product-card-image > .image {
  border-radius: 2px;
  border-width: 1rem;
}
.product-card.product-card-with-button {
  display: grid;
  flex-direction: column;
  gap: 0.4rem;
}
.product-card.product-card-with-button .product-card-image {
  align-self: flex-start;
}
.product-card.product-card-with-button .product-card-image .image {
  border-width: 1rem;
}
.product-card.product-card-with-button .product-card-rating {
  margin-left: 2rem;
  margin-right: 2rem;
  margin-bottom: 0;
  font-weight: 400;
}
.product-card.product-card-with-button .product-card-rating .material-icons {
  color: #FBBF24;
}
.product-card.product-card-with-button .product-card-name {
  font-weight: 400;
  margin-bottom: 0;
}
.product-card.product-card-with-button .product-card-details {
  margin-bottom: 0;
}
.product-card.product-card-with-button .product-card-details .old-price {
  color: #737373;
  margin-bottom: 0;
}
.product-card.product-card-with-button .product-card-button {
  margin-left: 2rem;
  margin-right: 2rem;
  align-self: flex-end;
  margin-bottom: 1.5rem;
}
.product-card.product-card-with-button .product-card-button .btn {
  line-height: 1;
  padding: 0.8rem 1.2rem;
  border-radius: 8px;
  color: #FFFFFF !important;
  width: 100%;
}
.product-card.product-card-with-button .image-badges {
  position: static;
}
.product-card.product-card-with-button .badge {
  border-radius: 2px;
  font-weight: 500;
}
.product-card.product-card-with-button .badge .discount-badge-msrp-tooltip {
  margin-left: 4px;
}
.product-card.product-card-with-button .badge .discount-badge-msrp-tooltip svg {
  width: 15px;
  height: 15px;
}
/**
 * _feedback.less
 *
 * Style for the feedback component.
 *
 * @see _colors.less file for the colors used here.
 * @author Alex Ghiban <drew7721@gmail.com>
 */
.feedback {
  font-size: 1.4rem;
  padding: 1.5rem 2rem;
  transition: background-color 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.feedback strong {
  display: block;
  font-size: 1.6rem;
}
.feedback .feedback-title {
  font-weight: 700;
  margin-right: 2rem;
}
.feedback .feedback-title:empty {
  display: none;
}
.feedback .feedback-loader {
  display: none;
  margin-right: 1rem;
}
.feedback .orb-of-color {
  display: none;
  color: #999999;
  transition: color 0.2s ease;
  margin-right: 1rem;
}
.feedback:empty {
  display: none;
}
.feedback.feedback-full-divider {
  margin-left: 2rem;
  margin-right: 2rem;
  text-align: center;
}
.feedback.feedback-force-neutral {
  background-color: #F2F2F2 !important;
}
.feedback.feedback-force-neutral .feedback-body {
  margin: 0 auto;
}
.feedback.feedback-success {
  background-color: #07D159;
}
.feedback.feedback-warn,
.feedback.feedback-warning {
  background-color: #FFD740;
}
.feedback.feedback-failure {
  background-color: #FF6666;
}
.feedback.feedback-neutral {
  background-color: #F2F2F2;
}
.feedback.feedback-orb {
  background-color: #F2F2F2;
}
.feedback.feedback-orb .orb-of-color {
  display: inline-block;
}
.feedback.feedback-orb.feedback-success .orb-of-color {
  color: #07D159;
}
.feedback.feedback-orb.feedback-warn .orb-of-color,
.feedback.feedback-orb.feedback-warning .orb-of-color {
  color: #FFD740;
}
.feedback.feedback-orb.feedback-failure .orb-of-color {
  color: #FF6666;
}
.feedback.feedback-orb.feedback-neutral .orb-of-color {
  color: #3FA9F5;
}
.feedback.feedback-limbo {
  background-color: #F2F2F2;
}
.feedback.feedback-limbo .feedback-loader {
  display: inline-block;
  align-self: baseline;
}
.feedback.feedback-limbo.feedback-orb .orb-of-color {
  display: none;
}
/**
 * Backorder request on product pages.
 *
 * @author Sam Schmidt <samuel@dersam.net>
 */
#product-backorder {
  display: block;
  overflow: hidden;
}
#product-backorder .limbo {
  text-align: center;
}
#product-backorder .limbo,
#product-backorder .feedback-success {
  display: none;
}
#product-backorder.loading .limbo,
#product-backorder.success .feedback-success {
  display: block;
}
#product-backorder.loading .backorder-form,
#product-backorder.success .backorder-form {
  display: none;
}
#product-backorder fieldset label[for=optin] {
  font-weight: 300;
}
.failure.oos {
  text-align: center;
}
/**
 * rating.less
 *
 * @author Dane MacMillan <work@danemacmillan.com>
 */
/**
 * Five star rating with optional review count.
 */
.rating-five-star {
  color: inherit;
  font-size: 125%;
  overflow: hidden;
}
.rating-five-star > * {
  display: block;
  float: left;
  margin-right: 0.2rem;
}
.rating-five-star .material-icons {
  top: 0.1rem;
}
.rating-five-star .rating-five-star-review-count {
  color: inherit;
  font-size: 75%;
  margin-left: 0.5rem;
  display: none;
}
.rating-five-star .rating-five-star-value {
  color: inherit;
  font-size: 75%;
  margin-left: 0.5rem;
  display: none;
}
.rating-five-star .rating-five-star-value + .rating-five-star-review-count {
  margin-left: 1rem;
}
.rating-five-star .rating-star-states + .rating-five-star-review-count::before {
  content: "(";
}
.rating-five-star .rating-star-states + .rating-five-star-review-count::after {
  content: ")";
}
.rating-five-star .rating-star-states i {
  display: none;
}
.rating-five-star.rating-five-star-state- .rating-star-states i {
  display: none;
}
.rating-five-star.rating-five-star-state- .rating-five-star-review-count,
.rating-five-star.rating-five-star-state- .rating-five-star-value {
  display: none;
}
.rating-five-star.rating-five-star-state-05 .rating-star-states:nth-child(1) i:nth-child(2) {
  display: block;
}
.rating-five-star.rating-five-star-state-05 .rating-star-states:nth-child(2) i:nth-child(1) {
  display: block;
}
.rating-five-star.rating-five-star-state-05 .rating-star-states:nth-child(3) i:nth-child(1) {
  display: block;
}
.rating-five-star.rating-five-star-state-05 .rating-star-states:nth-child(4) i:nth-child(1) {
  display: block;
}
.rating-five-star.rating-five-star-state-05 .rating-star-states:nth-child(5) i:nth-child(1) {
  display: block;
}
.rating-five-star.rating-five-star-state-05 .rating-five-star-review-count,
.rating-five-star.rating-five-star-state-05 .rating-five-star-value {
  display: block;
}
.rating-five-star.rating-five-star-state-1 .rating-star-states:nth-child(1) i:nth-child(3) {
  display: block;
}
.rating-five-star.rating-five-star-state-1 .rating-star-states:nth-child(2) i:nth-child(1) {
  display: block;
}
.rating-five-star.rating-five-star-state-1 .rating-star-states:nth-child(3) i:nth-child(1) {
  display: block;
}
.rating-five-star.rating-five-star-state-1 .rating-star-states:nth-child(4) i:nth-child(1) {
  display: block;
}
.rating-five-star.rating-five-star-state-1 .rating-star-states:nth-child(5) i:nth-child(1) {
  display: block;
}
.rating-five-star.rating-five-star-state-1 .rating-five-star-review-count,
.rating-five-star.rating-five-star-state-1 .rating-five-star-value {
  display: block;
}
.rating-five-star.rating-five-star-state-15 .rating-star-states:nth-child(1) i:nth-child(3) {
  display: block;
}
.rating-five-star.rating-five-star-state-15 .rating-star-states:nth-child(2) i:nth-child(2) {
  display: block;
}
.rating-five-star.rating-five-star-state-15 .rating-star-states:nth-child(3) i:nth-child(1) {
  display: block;
}
.rating-five-star.rating-five-star-state-15 .rating-star-states:nth-child(4) i:nth-child(1) {
  display: block;
}
.rating-five-star.rating-five-star-state-15 .rating-star-states:nth-child(5) i:nth-child(1) {
  display: block;
}
.rating-five-star.rating-five-star-state-15 .rating-five-star-review-count,
.rating-five-star.rating-five-star-state-15 .rating-five-star-value {
  display: block;
}
.rating-five-star.rating-five-star-state-2 .rating-star-states:nth-child(1) i:nth-child(3) {
  display: block;
}
.rating-five-star.rating-five-star-state-2 .rating-star-states:nth-child(2) i:nth-child(3) {
  display: block;
}
.rating-five-star.rating-five-star-state-2 .rating-star-states:nth-child(3) i:nth-child(1) {
  display: block;
}
.rating-five-star.rating-five-star-state-2 .rating-star-states:nth-child(4) i:nth-child(1) {
  display: block;
}
.rating-five-star.rating-five-star-state-2 .rating-star-states:nth-child(5) i:nth-child(1) {
  display: block;
}
.rating-five-star.rating-five-star-state-2 .rating-five-star-review-count,
.rating-five-star.rating-five-star-state-2 .rating-five-star-value {
  display: block;
}
.rating-five-star.rating-five-star-state-25 .rating-star-states:nth-child(1) i:nth-child(3) {
  display: block;
}
.rating-five-star.rating-five-star-state-25 .rating-star-states:nth-child(2) i:nth-child(3) {
  display: block;
}
.rating-five-star.rating-five-star-state-25 .rating-star-states:nth-child(3) i:nth-child(2) {
  display: block;
}
.rating-five-star.rating-five-star-state-25 .rating-star-states:nth-child(4) i:nth-child(1) {
  display: block;
}
.rating-five-star.rating-five-star-state-25 .rating-star-states:nth-child(5) i:nth-child(1) {
  display: block;
}
.rating-five-star.rating-five-star-state-25 .rating-five-star-review-count,
.rating-five-star.rating-five-star-state-25 .rating-five-star-value {
  display: block;
}
.rating-five-star.rating-five-star-state-3 .rating-star-states:nth-child(1) i:nth-child(3) {
  display: block;
}
.rating-five-star.rating-five-star-state-3 .rating-star-states:nth-child(2) i:nth-child(3) {
  display: block;
}
.rating-five-star.rating-five-star-state-3 .rating-star-states:nth-child(3) i:nth-child(3) {
  display: block;
}
.rating-five-star.rating-five-star-state-3 .rating-star-states:nth-child(4) i:nth-child(1) {
  display: block;
}
.rating-five-star.rating-five-star-state-3 .rating-star-states:nth-child(5) i:nth-child(1) {
  display: block;
}
.rating-five-star.rating-five-star-state-3 .rating-five-star-review-count,
.rating-five-star.rating-five-star-state-3 .rating-five-star-value {
  display: block;
}
.rating-five-star.rating-five-star-state-35 .rating-star-states:nth-child(1) i:nth-child(3) {
  display: block;
}
.rating-five-star.rating-five-star-state-35 .rating-star-states:nth-child(2) i:nth-child(3) {
  display: block;
}
.rating-five-star.rating-five-star-state-35 .rating-star-states:nth-child(3) i:nth-child(3) {
  display: block;
}
.rating-five-star.rating-five-star-state-35 .rating-star-states:nth-child(4) i:nth-child(2) {
  display: block;
}
.rating-five-star.rating-five-star-state-35 .rating-star-states:nth-child(5) i:nth-child(1) {
  display: block;
}
.rating-five-star.rating-five-star-state-35 .rating-five-star-review-count,
.rating-five-star.rating-five-star-state-35 .rating-five-star-value {
  display: block;
}
.rating-five-star.rating-five-star-state-4 .rating-star-states:nth-child(1) i:nth-child(3) {
  display: block;
}
.rating-five-star.rating-five-star-state-4 .rating-star-states:nth-child(2) i:nth-child(3) {
  display: block;
}
.rating-five-star.rating-five-star-state-4 .rating-star-states:nth-child(3) i:nth-child(3) {
  display: block;
}
.rating-five-star.rating-five-star-state-4 .rating-star-states:nth-child(4) i:nth-child(3) {
  display: block;
}
.rating-five-star.rating-five-star-state-4 .rating-star-states:nth-child(5) i:nth-child(1) {
  display: block;
}
.rating-five-star.rating-five-star-state-4 .rating-five-star-review-count,
.rating-five-star.rating-five-star-state-4 .rating-five-star-value {
  display: block;
}
.rating-five-star.rating-five-star-state-45 .rating-star-states:nth-child(1) i:nth-child(3) {
  display: block;
}
.rating-five-star.rating-five-star-state-45 .rating-star-states:nth-child(2) i:nth-child(3) {
  display: block;
}
.rating-five-star.rating-five-star-state-45 .rating-star-states:nth-child(3) i:nth-child(3) {
  display: block;
}
.rating-five-star.rating-five-star-state-45 .rating-star-states:nth-child(4) i:nth-child(3) {
  display: block;
}
.rating-five-star.rating-five-star-state-45 .rating-star-states:nth-child(5) i:nth-child(2) {
  display: block;
}
.rating-five-star.rating-five-star-state-45 .rating-five-star-review-count,
.rating-five-star.rating-five-star-state-45 .rating-five-star-value {
  display: block;
}
.rating-five-star.rating-five-star-state-5 .rating-star-states:nth-child(1) i:nth-child(3) {
  display: block;
}
.rating-five-star.rating-five-star-state-5 .rating-star-states:nth-child(2) i:nth-child(3) {
  display: block;
}
.rating-five-star.rating-five-star-state-5 .rating-star-states:nth-child(3) i:nth-child(3) {
  display: block;
}
.rating-five-star.rating-five-star-state-5 .rating-star-states:nth-child(4) i:nth-child(3) {
  display: block;
}
.rating-five-star.rating-five-star-state-5 .rating-star-states:nth-child(5) i:nth-child(3) {
  display: block;
}
.rating-five-star.rating-five-star-state-5 .rating-five-star-review-count,
.rating-five-star.rating-five-star-state-5 .rating-five-star-value {
  display: block;
}
/**
* _accordion.less
*
* Style for the accordion component.
*
* @author Alex Ghiban <drew7721@gmail.com>
*/
.acc-key .acc-key-header {
  cursor: pointer;
  border-bottom: #EBEBEB 0.1rem solid;
}
.acc-key .acc-key-header .acc-key-header-open,
.acc-key .acc-key-header .acc-key-header-close {
  background-color: #F5F5F5;
  border-radius: 5px;
  border: 1px solid #E5E5E5;
  color: #525252;
}
.acc-key .acc-key-header-close {
  display: none;
}
.acc-key .acc-key-content {
  display: none;
  padding-top: 1.5rem;
}
.acc-key.opened .acc-key-header-close {
  display: block;
}
.acc-key.opened .acc-key-header-open {
  display: none;
}
.acc-key.opened .acc-key-content {
  display: block;
}
/** Styles for the generic modal container*/
#modal-overlay {
  background-color: rgba(34, 34, 34, 0.6);
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.05s linear, z-index 0.05s linear;
  text-align: center;
  cursor: pointer;
}
#modal-overlay::before {
  display: none;
  content: "\00D7";
  position: fixed;
  width: 4rem;
  height: 4rem;
  line-height: 4rem;
  border-radius: 100%;
  left: 50%;
  top: 1.2rem;
  margin-left: -2rem;
  background-color: rgba(51, 51, 51, 0.985);
  box-shadow: 0 1px 20px 1px #fff;
  color: #fff;
  font-weight: 400;
  cursor: pointer;
}
#modal {
  display: flex;
  flex-direction: column;
  position: fixed;
  background-color: #333333;
  color: #FFFFFF;
  overflow: hidden;
  user-select: none;
  z-index: -1;
  visibility: hidden;
}
#modal .limbo-spinner {
  display: inline-block;
  margin: auto;
}
#modal .symmetry-sides {
  color: #000000;
}
#modal::after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: no-repeat url("../images/f9-emblem-white-2.0-368w512h.png") center center;
  background-size: 75%;
  pointer-events: none;
  z-index: -2;
  opacity: 0.015;
}
#modal.modal-size-full {
  top: 4rem;
  right: 0;
  bottom: 7.2rem;
  left: 0;
  visibility: visible;
  transform: translateY(100vh);
  transition: transform 0.05s ease, z-index 0s linear 0.05s, visibility 0s linear 0.05s;
}
#modal.modal-size-full .modal-content {
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-radius: 3.2rem 3.2rem 0 0;
}
#modal.modal-size-full .modal-content::-webkit-scrollbar {
  display: none;
}
#modal.modal-size-adaptive {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.9);
  max-width: calc(100% - 2rem - 2rem);
  max-height: calc(100% - 4.800000000000001rem - 7.199999999999999rem - 3rem - 1.5rem);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transform-origin: top left;
  transform: scale(0.95) translateX(-50%) translateY(-40%);
  transition: opacity 0.05s ease, transform 0.05s ease, z-index 0s linear 0.05s, visibility 0s linear 0.05s;
}
@media only screen and (min-width: 360px) and (max-width: 600px) and (orientation: portrait) {
  #modal.modal-size-adaptive {
    width: 100vw;
  }
}
#modal.modal-size-drawer-right {
  background-color: #FFFFFF;
  color: #222222;
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  bottom: auto;
  box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.9);
  height: 100vh;
  width: 33vw;
  min-width: 585px;
  min-width: 600px;
  max-height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transform-origin: top left;
  transform: unset;
  transition: opacity 0.05s ease, transform 0.05s ease, z-index 0s linear 0.05s, visibility 0s linear 0.05s;
}
@media only screen and (min-width: 360px) and (max-width: 600px) and (orientation: portrait) {
  #modal.modal-size-drawer-right {
    width: 100vw;
  }
}
#modal.modal-size-drawer-right:after {
  background: unset;
}
#modal.modal-disable-transition-delays {
  transition: none !important;
  will-change: unset !important;
}
.limbo-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  color: #FFFFFF;
  transition: opacity 0.2s ease;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 101;
  text-align: center;
  font-size: 9.6rem;
  transform: translateX(-100vw);
}
.limbo-overlay i {
  display: block;
}
.overlay-active #modal-overlay {
  opacity: 1;
  z-index: 80;
  transition: opacity 0.15s linear;
}
.overlay-active header,
.overlay-active main {
  filter: none;
}
.modal-active-size-full.modal-active,
.modal-active-size-full.modal-active body {
  overflow: hidden;
  position: fixed;
  width: 100%;
}
.modal-active-size-full.modal-active body {
  position: absolute;
}
.modal-active-size-full #modal.modal-size-full {
  visibility: visible;
  z-index: 90;
  transform: translateY(0);
  transition-delay: 0s;
}
.modal-active-size-full footer {
  box-shadow: 0 -2px 5px -1px rgba(0, 0, 0, 0.9);
}
.modal-active-size-adaptive #modal.modal-size-adaptive,
.modal-active-size-drawer-right #modal.modal-size-adaptive,
.modal-active-size-adaptive #modal.modal-size-drawer-right,
.modal-active-size-drawer-right #modal.modal-size-drawer-right {
  visibility: visible;
  z-index: 90;
  opacity: 1;
  transition-delay: 0s;
}
.overlay-limbo-active #modal-overlay .limbo-overlay {
  opacity: 1;
  transform: translateX(0);
}
.modal-limbo-active #modal .limbo-overlay {
  opacity: 1;
  background-color: rgba(51, 51, 51, 0.5);
  transform: translateX(0);
}
.overlay-limbo-active.modal-active:not(.modal-active-filter) #modal-overlay .limbo-overlay {
  opacity: 0;
}
.modal-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.modal-title {
  line-height: 4;
  margin-bottom: 1.5rem;
  flex: 0 0 auto;
}
.modal-title ol {
  display: flex;
  padding: 0;
  margin: 0;
}
.modal-title li {
  display: block;
  flex-basis: 100%;
  text-align: center;
  cursor: pointer;
  background-color: #4E4E4E;
  color: #FFFFFF;
}
.modal-title li.active {
  color: #FFFFFF;
  background-color: #333333;
  font-weight: 400;
}
.modal-title:empty {
  display: none;
}
.modal-content {
  overflow: auto;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
}
.modal-content .hr-dark {
  margin-left: 2rem;
  margin-right: 2rem;
}
.modal-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  padding: 0.5rem;
  background-color: #FFFFFF;
  box-shadow: unset;
  border-top: 1px solid #D4D4D4;
  position: relative;
  z-index: 100;
}
.modal-footer:empty {
  display: none;
}
.modal-footer .btn {
  width: 30%;
  margin: 0.5rem;
  line-height: 3;
}
.modal-footer .btn:only-child,
.modal-footer .btn:nth-child(2) {
  width: 100%;
}
body.mobile-theme .modal-footer {
  font-size: 1.2rem;
}
.modal-pane {
  height: 100%;
}
.modal-pane.pane-inactive {
  display: none;
}
.modal-size-adaptive .modal-container {
  min-width: 335px;
  min-height: 300px;
}
.modal-size-adaptive .modal-footer {
  position: sticky;
  bottom: 0;
}
/**
 * notices.less
 *
 * Site-wide notices that appear at the top of the page. There is a limit of
 * five notices that can be defined. Anything more than that means the notices
 * feature is probably not the best place to be communicating information. Five
 * is already pushing it. Most people will not hang around long enough to read
 * them all, so be sure important notices are defined first.
 *
 * Note that in order for the swapping feature to work, an overflow needs to be
 * defined with a strict height.
 *
 * @author Dane MacMillan <work@danemacmillan.com>
 */
.notices {
  display: none;
  margin-bottom: 0;
  position: relative;
  z-index: 20;
  overflow: hidden;
  height: 2.8rem;
  background-color: #4E4E4E;
  color: #FFFFFF;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2;
  list-style: none;
  padding: 0;
  text-align: center;
}
.notices.show-on-desktop {
  display: block;
}
.notices li {
  margin-left: 2rem;
  margin-right: 2rem;
}
.notices a {
  color: inherit;
  text-decoration: underline;
}
.notices .notices-banner {
  margin-left: -1rem;
  margin-right: -1rem;
  line-height: 0;
}
.notices .notices-banner a {
  line-height: 2.8rem;
  height: 2.8rem;
}
.notices .notices-banner img {
  height: 2.8rem;
  width: 100%;
  object-fit: fill;
}
.notices .material-icons {
  margin-right: 0.5rem;
  color: #999999;
}
.notices > * {
  will-change: transform;
  transition: transform 0.15s linear;
}
.notices > :nth-child(1) {
  transform: translateY(0%);
}
.notices > :nth-child(2) {
  transform: translateY(100%);
}
.notices > :nth-child(3) {
  transform: translateY(100%);
}
.notices > :nth-child(4) {
  transform: translateY(100%);
}
.notices > :nth-child(5) {
  transform: translateY(100%);
}
.notices.notices-display-1 > :nth-child(1),
.notices.notices-display-1 > :nth-child(2),
.notices.notices-display-1 > :nth-child(3),
.notices.notices-display-1 > :nth-child(4),
.notices.notices-display-1 > :nth-child(5) {
  transform: translateY(-100%);
}
.notices.notices-display-2 > :nth-child(1),
.notices.notices-display-2 > :nth-child(2),
.notices.notices-display-2 > :nth-child(3),
.notices.notices-display-2 > :nth-child(4),
.notices.notices-display-2 > :nth-child(5) {
  transform: translateY(-200%);
}
.notices.notices-display-3 > :nth-child(1),
.notices.notices-display-3 > :nth-child(2),
.notices.notices-display-3 > :nth-child(3),
.notices.notices-display-3 > :nth-child(4),
.notices.notices-display-3 > :nth-child(5) {
  transform: translateY(-300%);
}
.notices.notices-display-4 > :nth-child(1),
.notices.notices-display-4 > :nth-child(2),
.notices.notices-display-4 > :nth-child(3),
.notices.notices-display-4 > :nth-child(4),
.notices.notices-display-4 > :nth-child(5) {
  transform: translateY(-400%);
}
.mobile-theme .notices {
  display: block;
  margin-bottom: 1.5rem;
  text-wrap: nowrap;
}
/**
 * Styles specific to Material Icons loaded via SVG.
 */
.material-icons-svg {
  line-height: 0;
}
.icon-container.circular .material-icons-svg {
  line-height: 0;
}
.material-icons-svg svg,
.material-icons-svg .material-icons-svg-inline {
  width: 1em;
  height: 1em;
  fill: currentColor;
  transform: inherit;
}
/**
 * Custom linus theme for the Tippy tooltip box.
 *
 * TODO: merge these CSS rules with the ones in the _module.less file.
 */
.tippy-popper .tippy-tooltip.linus-tippy-theme {
  background-color: #222222;
  color: #FFFFFF;
}
.tippy-popper .tippy-tooltip.linus-tippy-theme .tippy-content {
  padding-top: 1.5rem;
  margin-left: 2rem;
  margin-right: 2rem;
}
.tippy-action {
  cursor: pointer;
}
/**
STOREFRONT EXTRA
 */
/*
Use this file to:
- Import alterations to styles imported from storefront that don't match system preferences.
- Import other files that were copied from storefront so we don't import a whole package.

@author Alex Ghiban <alex@fortnine.ca>
 */
/**
 * common.css - Linus Common
 *
 * Provide useful rulesets for styling general features. Note that there
 * should be as little styling as possible. None is preferable, unless it is
 * to provide js-* selectors for JavaScript interactions.
 *
 * @author Dane MacMillan <work@danemacmillan.com>
 */

.ltr {
    direction: ltr;
}

.rtl {
    direction: rtl;
}

/*
For use with the common show/hide
Hides and removes the element from the flow.
*/
.js-hidden {
    display: none !important;
}

/*
For use with the common show/hide.
*/
.js-invisible {
    position: absolute;
    visibility: hidden;
    left: -10000em;
}

/* Make elements disabled. */
.js-disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.65;
}

.shipping-carriers {
  margin: 0 -5px;
}
.shipping-carriers,
.shipping-carriers li {
  display: inline-block;
}
.shipping-carriers li {
  margin: 0px !important;
  padding: 5px;
}
.shipping-carriers input {
  opacity: 0;
  position: absolute;
}
.shipping-carriers label {
  position: relative;
  padding: 10px;
  cursor: pointer;
  border-radius: 2px;
  box-shadow: inset 0 0 6px 1px #666666;
  border: 1px solid transparent;
  font-weight: normal;
  font-size: 16px;
  line-height: 1.75;
  transform: scale(0.96);
  transition: all 0.1s ease;
}
.shipping-carriers label .cart-shipping-price-actual {
  font-weight: bold;
  background-color: #fff;
  color: #000;
  padding: 4px;
  margin-right: 4px;
  border-radius: 2px;
}
.shipping-carriers input:checked + label,
.shipping-carriers .shipping-carrier-checked {
  border: 1px solid #fff;
  transform: scale(1);
  pointer-events: none;
}
.shipping-carriers label {
  background-position: -18px center;
  background-repeat: no-repeat;
  background-size: auto 140px;
  display: flex;
  align-items: center;
}
.shipping-carrier-logo-container,
.shipping-carrier-info {
  display: inline-block;
}
.shipping-carrier-logo-container.shipping-carrier-info-chips,
.shipping-carrier-info.shipping-carrier-info-chips {
  flex: 1 1 auto;
  text-align: right;
}
.shipping-carrier-logo {
  max-height: 6rem;
  padding: 3px;
  margin-right: 1rem;
  aspect-ratio: 1;
}
.shipping-carrier-logo.image {
  margin: 0 1rem 0 0;
}
body.checkout-index-index .shipping-carrier-logo {
  max-height: 4rem;
}
.cart-shipping-spinner {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  text-align: center;
  padding: 25px;
  font-size: 0;
  opacity: 0;
  transition: all 0.2s ease;
}
.cart-shipping-spinner.cart-shipping-spinner-reveal {
  opacity: 1;
  font-size: 20px;
}
.cart-shipping-form-carrier {
  overflow: hidden;
  transform: scale(0.6) translateY(-160px);
  opacity: 0.2;
  transition: all 0.1s ease;
  pointer-events: none;
  margin: 0 20px;
}
.cart-shipping-form-carrier.pop-doze-carriers {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.cart-shipping-form-carrier dl,
.cart-shipping-form-carrier dd {
  margin: 0;
}
.js .cart-shipping-form-carrier .button {
  display: none;
}
.shipping-carriers {
  margin: 0 -5px;
  padding: 0;
}
.shipping-carriers,
.shipping-carriers li {
  display: block;
}
.shipping-carriers li {
  margin: 0px !important;
  padding: 5px;
}
.shipping-carriers input {
  opacity: 0;
  position: absolute;
}
.shipping-carriers label {
  display: flex;
  align-items: center;
  position: relative;
  background-position: -18px center;
  background-repeat: no-repeat;
  background-size: auto 140px;
  width: 100%;
  box-shadow: inset 0 0 6px 1px #666666;
  cursor: pointer;
  padding: 10px;
  border-radius: 2px;
  border: 1px solid transparent;
  font-weight: normal;
  line-height: 1.75;
  transform: scale(0.96);
  transition: all 0.1s ease;
}
.shipping-carriers input:checked + label,
.shipping-carriers .shipping-carrier-checked {
  border: 1px solid #fff;
  transform: scale(1);
  pointer-events: none;
}
.cart-shipping-spinner {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.75);
  text-align: center;
  padding: 25px;
  font-size: 0;
  opacity: 0;
  transition: all 0.2s ease;
}
.cart-shipping-spinner.cart-shipping-spinner-reveal {
  opacity: 1;
  font-size: 20px;
}
/**
Core System Variables
This is included BEFORE apps so that apps can modify styles with a more specific rule.
 */
/**
 Use this file to set our custom colors and color names.

 Using the following colors will allow us to have different "theme-colors"
 for each app.

This was put together with https://coolors.co
 @see https://coolors.co/222222-802a28-dd312e-8e6d92-678bc4-3fa9f5-9bcff0-f7f4ea-d5c54d-3ddc7f

 @author Alex Ghiban <alex@fortnine.ca>
 */
/**
  Different variables used through the system apps.
 */
.defender-emblem-blue {
  background-image: url('/npm/staticatic/storefront/theme-linus/images/defender/defender-icon-blue.svg');
}
.sixroutes-emblem-color {
  background-image: url('/npm/staticatic/linus/images/icons/websites/6.svg');
}
.defender-canada-emblem-blue {
  background-image: url('/npm/staticatic/linus/images/icons/websites/5.svg');
}
/**
Helix specific colors.

Most of these are already defined in storefront, so we can remove them...
 */
/**
 * Drop down implementation for System
 */
/**
 * DD behaviour.
 */
.dd-menu {
  position: relative;
  display: inline-block;
}
.dd-content {
  font-size: 1.6rem;
  font-weight: 400;
  min-width: 25rem;
  display: flex;
  flex-direction: column;
  position: absolute;
  left: -10000px;
  opacity: 0;
  transform: translateY(-5%);
  transform-origin: center center;
  pointer-events: none;
  z-index: -2;
  background-color: #FFFFFF;
  padding: 0;
  box-shadow: 2px 2px 5px -2px;
}
.dd-content.dd-top {
  bottom: 100%;
}
.dd-triggered .dd-content {
  transition: opacity 0.1s ease, transform 0.1s ease;
  left: auto;
  min-width: 100%;
  right: 0;
  opacity: 1;
  transform: translateY(0);
  z-index: 90;
  pointer-events: auto;
}
.dd-group {
  margin-bottom: 1.5rem;
  background-color: #EBEBEB;
}
.dd-group .dd-group-header {
  padding: 0.375rem 0.5rem;
  font-weight: 500;
}
.dd-group:last-child {
  margin-bottom: 0;
}
.dd-item {
  padding: 0.5rem 2rem;
  background-color: #FFFFFF;
  line-height: 1.5;
  color: #888888;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.dd-item > button,
.dd-item > a {
  flex-grow: 1;
  text-align: left;
}
.dd-item > a {
  color: #888888;
}
.dd-item.dd-always-enabled:hover,
.dd-item:hover {
  cursor: pointer;
  color: #222222;
  background-color: #e6e6e6;
}
.dd-item.dd-always-enabled:hover > a,
.dd-item:hover > a {
  color: #222222;
  text-decoration: none;
}
.dd-item i.material-icons {
  margin-left: 0 !important;
  margin-right: 1rem !important;
}
.dd-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}
.dd-always-enabled {
  opacity: 1.5;
  pointer-events: initial;
  cursor: default;
}
.linus-django-toasts-container {
  position: absolute;
  bottom: 0;
  right: 0;
  text-align: right;
  z-index: 103;
}
.linus-django-toasts-container.linus-django-toasts-upper {
  bottom: unset;
  top: 1.5rem;
}
.linus-django-toasts-container .toast {
  background-color: #FFFFFF;
  margin: 0 2rem 1.5rem 2rem;
  color: #222222;
  display: grid;
  width: 20rem;
  text-align: left;
  border-radius: 5px;
  box-shadow: 2px 2px 5px -2px;
}
.linus-django-toasts-container .toast .material-icons {
  display: none;
}
.linus-django-toasts-container .toast .material-icons.icon-close {
  display: inline-block;
}
.linus-django-toasts-container .toast .toast-header {
  padding-left: 2rem;
  line-height: 2;
  color: #FFFFFF;
  background-color: #4D4D4D;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.75rem;
  display: flex;
  justify-content: space-between;
  border-radius: 5px 5px 0 0;
}
.linus-django-toasts-container .toast .toast-close {
  color: #FFFFFF;
  padding: 0 1rem;
  border-radius: 0 5px 0 0;
}
.linus-django-toasts-container .toast .toast-close:hover {
  cursor: pointer;
  color: #DD312E;
  background-color: #404040;
}
.linus-django-toasts-container .toast .toast-body {
  margin-left: 2rem;
  margin-right: 2rem;
  padding-bottom: 1.5rem;
}
.linus-django-toasts-container .toast.toast-success .toast-header {
  color: #07D159;
}
.linus-django-toasts-container .toast.toast-success .material-icons.icon-success {
  display: inline-block;
}
.linus-django-toasts-container .toast.toast-warning .toast-header {
  color: #FFD740;
}
.linus-django-toasts-container .toast.toast-warning .material-icons.icon-warning {
  display: inline-block;
}
.linus-django-toasts-container .toast.toast-error .toast-header {
  color: #FF6666;
}
.linus-django-toasts-container .toast.toast-error .material-icons.icon-error {
  display: inline-block;
}
/**
This is rounded button and button group.

We can enhance this further as a "non form submitting" button. This was done
based on the mocks for Helix but we might want to reuse the same UI look an feel
in all our apps.

This can be made into a component later down the path and moved into system so
all apps can use it.
 */
.rounded-button {
  display: inline-block;
  padding: 0.375rem 1rem;
  border: #e6e6e6 1px solid;
  border-radius: 5px;
  color: #666666;
  user-select: none;
}
.rounded-button:hover {
  background-color: #e6e6e6;
  color: #222222;
}
.rounded-button.rounded-button-white {
  background-color: #FFFFFF;
  border: solid 1px #EBEBEB;
  color: #222222;
}
.rounded-button.rounded-button-white:hover {
  background-color: #e6e6e6;
}
.rounded-button.rounded-button-darker {
  background-color: #2D2D2D;
  color: #e6e6e6;
}
.rounded-button.rounded-button-darker:hover {
  color: #FFFFFF;
  background-color: #222222;
}
.rounded-button.rounded-button-wider {
  padding-left: 2rem;
  padding-right: 2rem;
}
.rounded-buttons-group {
  display: inline-flex;
  border: #e6e6e6 1px solid;
  border-radius: 5px;
  color: #666666;
}
.rounded-buttons-group .rounded-button {
  border: none;
  margin: 0;
  border-radius: 0;
}
a.rounded-button:hover {
  text-decoration: none;
}
/**
These styles relate to the status chips.

We might want to use this in other apps and create a single version of this
at the root level so all apps can benefit from them.
 */
.status-chip {
  padding: 0.375rem 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
  background-color: #e6e6e6;
  color: #222222;
  font-weight: 400;
  user-select: none;
  border-radius: 2px;
  display: inline-flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  align-items: center;
  line-height: normal;
}
.status-chip.status-chip-with-margins {
  margin: 1rem;
}
.status-chip.chip-valid,
.status-chip.chip-approved {
  background-color: #3ddc7f;
}
.status-chip.chip-invalid,
.status-chip.chip-hard {
  background-color: #DD312E;
  color: #e6e6e6;
}
.status-chip.chip-warning,
.status-chip.chip-soft {
  background-color: #ffe34a;
}
.status-chip.chip-dark,
.status-chip.chip-cancelled {
  background-color: #222222;
  color: #e6e6e6;
}
.status-chip.chip-white,
.status-chip.chip-pending {
  background-color: #FFFFFF;
}
.status-chip.chip-rounded {
  border-radius: 50%;
  aspect-ratio: 1;
}
.status-chip.chip-shadow {
  box-shadow: 2px 2px 3px -2px #4E4E4E;
}
.status-chip.chip-no-background {
  background-color: transparent;
}
.chip-pending {
  background-color: #ffbcaf;
}
.symmetry-sides .status-chip {
  display: inline-block;
}
/**
This is the pop-up window that shows for order holds.

This should be tied to a JS file that handles this logic.

Once the JS is also in it's own file, we can move this out
so we can use it in other apps.
 */
.draggable-top-drag-border {
  text-align: right;
  cursor: move;
  margin-bottom: 0.75rem;
  background-color: #EBEBEB;
}
.draggable-top-drag-border:hover {
  color: #000000;
}
.draggable-bottom-right-resize-corner {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 1rem;
  min-height: 1rem;
  cursor: nwse-resize;
}
.draggable-window {
  border: 1px solid #CECECE;
}
.tippy-content {
  margin-bottom: 1.5rem;
}
.tippy-tooltip.linus-tippy-theme {
  background-color: #333333;
}
.linus-tippy-content {
  display: none !important;
}
/**
 Components
 */
/**
 * Colors for all purposes.
 *
 * These colors don't seem to be related to the global root UI, rather to specific apps.
 * Also see where they get used.
 * We should move these to the specific app as well as the custom styles that are in `system_common.less` into the
 * scope of the app that uses the style.
 * This should be reserved for root and global UI styles. Nothing that is app-specific should reside in the root
 * `/static/less` folder.
 *
 * See helix as an example...
 */
/**
Spinning indicator that is displayed when the container has `.loading`
 */
.spinner {
  display: none;
  height: 3.2rem;
  width: 3.2rem;
}
.spinner i svg {
  display: none;
}
.loading {
  position: relative;
}
.loading > :not(.spinner) {
  opacity: 0.2;
}
.loading .spinner {
  display: block;
  position: absolute;
  margin-top: 3rem;
  margin-left: 2rem;
}
.loading .spinner i svg {
  display: block;
  height: 3.2rem;
  width: 3.2rem;
}
.btn-group {
  display: flex;
}
.btn-group input[type=checkbox] {
  display: none;
}
.btn-group > * {
  border-radius: 0;
  margin: 0;
  background-color: #ffffff;
  color: #3fa9f5 !important;
  padding: 0 2rem;
  text-align: center;
  line-height: 2;
  cursor: pointer;
  border: 0.2rem solid #3fa9f5;
}
.btn-group > .active {
  background-color: #3fa9f5;
  color: #ffffff !important;
}
.btn-group > *:not(.active):hover {
  background-color: #d5f1ff;
}
.btn-group input[type="radio"] {
  position: fixed;
  opacity: 0;
  pointer-events: none;
}
.btn-group label:not(.active) {
  background-color: #ffffff;
  color: #3fa9f5;
}
.btn-group > :first-child {
  border-radius: 5px 0 0 5px;
}
.btn-group > :last-child {
  border-radius: 0 5px 5px 0;
}
/**
 * Experiment taken from a fragment of moneymaker.
 *
 * It needs the position of the parent to be relative.
 */
.progress-container {
  position: relative;
}
.progress-container.progress-bordered {
  border: 0.2rem solid #000000;
  border-radius: 0.5rem;
}
.progress-container.progress-red > .progress {
  background-color: #ff6666;
}
.progress-container > .progress-text {
  margin-left: 2rem;
  margin-right: 2rem;
}
.progress-container > .progress {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  background-color: #90c8ec;
  width: 0;
  z-index: -1;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  will-change: width;
}
/**
 Global system styles
 */
/**
 * root.less
 *
 * Styles for the root.html template, which also dictates the core
 * structure of all apps made within the codebase.
 *
 * @author Alex Ghiban <drew7721@gmail.com>
 * @author Dane MacMillan <work@danemacmillan.com>
 */
html {
  font-size: 62.5%;
}
html body {
  font-size: 1.2rem;
}
html,
body,
.root {
  overflow: hidden;
}
.root .root-main-content,
.root .root-content-before,
.root .root-content-after {
  height: 100vh;
  overflow: auto;
}
body.linus-django {
  background-color: #F2F2F2;
  /**
     * Wraps `.root-navigation` and `.root` app sections in grid.
     */
  /**
     * Sidebar navigation.
     */
  /**
     * Main content roots.
     *
     * All content should go into one of three child `.root-*` selectors
     * defined here, and nowhere else. Similarly, do not mess with these
     * values in inherited apps.
     */
}
body.linus-django .app {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0 0;
  grid-template-areas: "root-nav root-content";
}
body.linus-django nav.root-navigation {
  grid-area: root-nav;
  background-color: #222222;
  box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.9);
  position: relative;
  z-index: 150;
  height: 100vh;
  overflow-x: hidden;
  width: 26rem;
  transition: width 0.1s ease;
  will-change: width;
}
body.linus-django nav.root-navigation .root-navigation-shape {
  width: 26rem;
  display: flex;
  height: 100%;
  flex-direction: column;
}
body.linus-django nav.root-navigation .root-navigation-header {
  font-size: 1.4rem;
  background-color: #111111;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 0.1rem solid #363636;
  box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.15);
}
body.linus-django nav.root-navigation .root-navigation-header .symmetry-sides {
  flex-shrink: 0;
  margin-bottom: 0 !important;
}
body.linus-django nav.root-navigation .root-navigation-header .symmetry-sides a {
  color: #999999;
}
body.linus-django nav.root-navigation .root-navigation-header .symmetry-sides > :first-child .image {
  margin-right: 2rem;
  width: 3.6rem;
}
body.linus-django nav.root-navigation .root-navigation-header .symmetry-sides > :first-child .symmetry-sides-subtext {
  color: #FFFFFF;
}
body.linus-django nav.root-navigation .root-navigation-header .symmetry-sides > :first-child:hover .symmetry-sides-subtext {
  color: #3FA9F5;
}
body.linus-django nav.root-navigation .root-navigation-header .symmetry-sides > :last-child {
  background-color: #111111;
  box-shadow: 0 0 3rem 2rem #111111, 0 0 3rem 2rem #111111;
}
body.linus-django nav.root-navigation .root-navigation-header .symmetry-sides > :last-child:hover {
  color: #3FA9F5;
}
body.linus-django nav.root-navigation .root-navigation-scrollable .symmetry-sides,
body.linus-django nav.root-navigation .root-navigation-footer .symmetry-sides {
  line-height: 3.5;
  margin-bottom: 0 !important;
  color: #CECECE;
}
body.linus-django nav.root-navigation .root-navigation-scrollable .symmetry-sides > :first-child,
body.linus-django nav.root-navigation .root-navigation-footer .symmetry-sides > :first-child {
  padding-left: 3rem;
  padding-right: 3rem;
}
body.linus-django nav.root-navigation .root-navigation-scrollable .symmetry-sides > :first-child .material-icons,
body.linus-django nav.root-navigation .root-navigation-footer .symmetry-sides > :first-child .material-icons,
body.linus-django nav.root-navigation .root-navigation-scrollable .symmetry-sides > :first-child .image,
body.linus-django nav.root-navigation .root-navigation-footer .symmetry-sides > :first-child .image {
  font-size: 1.6rem !important;
  margin-right: 3rem;
}
body.linus-django nav.root-navigation .root-navigation-scrollable {
  padding-top: 1.5rem;
  overflow-x: hidden;
  height: 100%;
  scrollbar-gutter: auto;
}
body.linus-django nav.root-navigation .root-navigation-scrollable .symmetry-sides:hover {
  color: #3FA9F5;
  background-color: #2D2D2D;
}
body.linus-django nav.root-navigation .root-navigation-scrollable .symmetry-sides > :last-child {
  background-color: #222222;
  box-shadow: 0 0 3rem 2rem #222222, 0 0 3rem 2rem #222222;
}
body.linus-django nav.root-navigation .root-navigation-scrollable .symmetry-sides:hover > :last-child {
  background-color: #2D2D2D;
  box-shadow: 0 0 3rem 2rem #2D2D2D, 0 0 3rem 2rem #2D2D2D;
}
body.linus-django nav.root-navigation .root-navigation-scrollable .symmetry-sides.current-app {
  color: #3FA9F5;
  font-weight: 700;
  background-color: #000000;
}
body.linus-django nav.root-navigation .root-navigation-scrollable .symmetry-sides.current-app > :first-child {
  padding-left: 2.5rem;
  border-left: 0.5rem solid #3FA9F5;
}
body.linus-django nav.root-navigation .root-navigation-scrollable .symmetry-sides.current-app > :last-child {
  background-color: #000000;
  box-shadow: 0 0 3rem 2rem #000000, 0 0 3rem 2rem #000000;
}
body.linus-django nav.root-navigation .hr-dark {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  background-image: linear-gradient(to left, #2D2D2D, transparent);
}
body.linus-django nav.root-navigation .root-navigation-footer .hr-dark {
  margin-top: 0;
  margin-bottom: 0.75rem;
}
body.linus-django nav.root-navigation .root-navigation-footer .symmetry-sides {
  margin-bottom: 0.75rem !important;
}
body.linus-django nav.root-navigation .root-navigation-footer .symmetry-sides > :first-child .material-icons {
  padding: 0.5rem;
  margin-left: -0.5rem;
  margin-right: 2.5rem;
  border-radius: 50%;
  background-color: #2D2D2D;
  transform: scale(1.25) rotate(0deg);
  cursor: pointer;
  transition: transform 0.2s ease;
}
body.linus-django nav.root-navigation .root-navigation-footer .symmetry-sides > :first-child .material-icons:hover {
  color: #3FA9F5;
  background-color: #111111;
}
body.linus-django nav.root-navigation .root-navigation-hover-area {
  display: none;
}
body.linus-django.root-navigation-collapsed nav.root-navigation {
  width: 7.6rem;
  overflow: hidden;
}
body.linus-django.root-navigation-collapsed nav.root-navigation .hr-dark {
  background-image: linear-gradient(to left, #2D2D2D, #2D2D2D);
}
body.linus-django.root-navigation-collapsed nav.root-navigation .root-navigation-footer .symmetry-sides > :first-child .material-icons {
  transform: rotate(90deg);
}
body.linus-django.root-navigation-collapsed nav.root-navigation .root-navigation-hover-area {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 2rem;
  background-color: transparent;
}
body.linus-django nav.root-navigation .root-menu-switch,
body.linus-django nav.root-navigation .secondary-navigation {
  display: none;
}
body.linus-django .root {
  grid-area: root-content;
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  grid-gap: 0 0;
  grid-template-areas: "content-before content-main content-after";
}
body.linus-django .root .root-content-before {
  grid-area: content-before;
}
body.linus-django .root .root-main-content {
  grid-area: content-main;
}
body.linus-django .root .root-content-after {
  grid-area: content-after;
}
body.linus-django .root .root-content-before,
body.linus-django .root .root-main-content,
body.linus-django .root .root-content-after {
  padding-top: 1.5rem;
  margin: 0;
}
.has-layout-containers .container {
  width: 100%;
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
}
.has-layout-containers .container-small {
  width: 100%;
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
}
/**
 * Copy to clipboard
 */
.copy-to-clipboard {
  cursor: copy;
}
.hover-darken:hover {
  background-color: #00000040;
  cursor: pointer;
}
.nowrap-whitespace {
  white-space: nowrap;
  display: flex;
}
.fallback-image {
  background-image: url("/npm/staticinus/images/image-not-available-v2-en-550px.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.sort-inplace:hover {
  background-color: #1b8dbb;
}
.sort-inplace.sorted[data-reverse]::after {
  content: " ^";
  font-weight: 900;
}
.sort-inplace.sorted:not([data-reverse])::after {
  content: " v";
  font-weight: 900;
}
.sortable-header.sorted:not(.reverse)::after {
  content: " \f0de";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}
.sortable-header.sorted.reverse::after {
  content: " \f0dd";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}
/**
Used for html replacements
 */
.fade-out {
  display: none;
}
.fade-in {
  opacity: 1;
  animation-name: fade-in-opacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 0.05s;
}
@keyframes fade-in-opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.scrolling-container {
  height: 100%;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: auto;
  background-color: #FFFFFF;
  overscroll-behavior-y: none;
}
.option-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
.option-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.option-column .options-start,
.option-row .options-start {
  align-self: flex-start;
}
.option-column .options-center,
.option-row .options-center {
  align-self: center;
}
.selectable-child .selected-child {
  background-color: #d5f1ff;
}
.selectable-child .selected-child:hover {
  background-color: #00abff;
}
.hand-hover {
  cursor: pointer;
  color: #007bff;
}
.hand-hover-pointer {
  cursor: pointer;
}
.hand-hover-pointer:link {
  color: #000000;
}
.hand-hover-pointer:visited {
  color: #000000;
}
.hand-hover-pointer:hover {
  color: #000000;
}
.hand-hover-pointer:active {
  color: #000000;
}
button.plain {
  border: none;
  background-color: inherit;
  padding: inherit;
  font-size: inherit;
  display: inherit;
}
.w-2 {
  width: 2%;
}
.w-3 {
  width: 3%;
}
.w-4 {
  width: 4%;
}
.w-5 {
  width: 5%;
}
.w-6 {
  width: 6%;
}
.w-7 {
  width: 7%;
}
.w-8 {
  width: 8%;
}
.w-9 {
  width: 9%;
}
.w-10 {
  width: 10%;
}
.w-15 {
  width: 15%;
}
.w-20 {
  width: 20%;
}
.w-25 {
  width: 25%;
}
.w-40 {
  width: 40%;
}
.w-50 {
  width: 50%;
}
.w-60 {
  width: 60%;
}
.w-100 {
  width: 100%;
}
.table-not-striped tbody tr:nth-of-type(odd) {
  background-color: transparent !important;
}
.bg-dark div,
.bg-dark span {
  color: #f2f2f2 !important;
}
.overflow-y-auto {
  overflow-y: auto;
}
.padding-gutters {
  padding-left: 2rem;
  padding-right: 2rem;
}
.padding-cell {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.flex-row.hover-grey:hover {
  background-color: #aaaaaa;
}
.flex-table-head {
  background-color: #dee7ec;
  font-weight: bold;
  min-height: 2rem;
  position: sticky;
  top: 0;
  z-index: 10;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.flex-table-head::-webkit-scrollbar {
  display: none;
  /* Safari and Chrome */
}
.flex-row.flex-table-body {
  z-index: 10;
  flex-wrap: nowrap;
  border-right: 0.1rem solid #F2F2F2;
}
.flex-row.flex-table-body .flex-table-filter {
  background-color: #F2F2F2;
}
.flex-row.flex-table-body .flex-table-filter fieldset {
  margin: 0.5rem 0;
  width: 100%;
}
.flex-row.flex-table-body .flex-table-filter fieldset .fieldset-input select {
  padding: 0;
}
.flex-row.flex-table-body .flex-table-cell {
  padding: 0 1rem;
}
.flex-row.flex-table-body .flex-table-cell.clip {
  white-space: nowrap;
  overflow-x: hidden;
}
.flex-row.flex-table-body > * > .flex-item {
  box-shadow: inset -0.2rem 0 #F2F2F2;
}
.flex-row.flex-table-body.flex-expand-cell-hover [data-flex-table=column]:not(.flex-expand-cell-always):not(.flex-expand-cell-never),
.flex-row.flex-table-body [data-flex-table=column].flex-expand-cell-hover {
  overflow: hidden;
  white-space: nowrap;
}
.flex-row.flex-table-body.flex-expand-cell-always [data-flex-table=column]:not(.flex-expand-cell-hover):not(.flex-expand-cell-never),
.flex-row.flex-table-body [data-flex-table=column].flex-expand-cell-always {
  overflow: visible;
  overflow-wrap: anywhere;
  white-space: break-spaces;
}
.flex-row.flex-table-body.flex-expand-cell-hover [data-flex-table=column]:not(.flex-expand-cell-always):not(.flex-expand-cell-never):hover,
.flex-row.flex-table-body [data-flex-table=column].flex-expand-cell-hover {
  overflow: visible;
  overflow-wrap: anywhere;
  white-space: break-spaces;
  cursor: text;
}
.hidden {
  display: none;
}
.status-pending {
  background-color: #fafbfc;
  color: #000000;
}
.status-filled {
  box-shadow: 0 0 0 0.2rem #059669 inset;
  background-color: #FFFFFF;
  color: #000000;
}
.status-approved {
  background-color: #6ee7B7;
  color: #000000;
}
.status-shipped {
  background-color: #d1d5db;
  color: #000000;
}
.status-cancelled {
  background-color: #000000;
  color: #FFFFFF;
}
@media only screen and (max-width: 639px) {
  .small-app-width {
    width: calc(100vw - 50px);
  }
}
.line-break-anywhere {
  line-break: anywhere;
}
.break {
  word-break: break-all;
}
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.5rem 0;
  margin-left: 2rem;
  margin-right: 2rem;
}
.table-wrapper table {
  border-collapse: collapse;
  width: 100%;
  min-width: 400px;
}
.table-wrapper table th {
  background: #f5f5f5;
  text-align: left;
  font-weight: bold;
  position: sticky;
  top: -1.5rem;
  z-index: 1;
}
.table-wrapper table th,
.table-wrapper table td {
  padding: 0.75rem;
  white-space: nowrap;
}
.table-wrapper table th.cell-right,
.table-wrapper table td.cell-right {
  text-align: right;
}
.table-wrapper table.table-bordered {
  border: 1px solid #ddd;
}
.table-wrapper table.table-striped tr:nth-child(even) td {
  background: #fafafa;
}
.table-wrapper table.table-dark th {
  background: #dddddd33;
}
.table-wrapper table.table-dark.table-striped tr:nth-child(even) td {
  background: #dddddd11;
}
.hover-zoom:hover {
  transform-origin: left center;
  transform: scale(3);
  z-index: 200;
  border: 0.1rem solid #dee2e6;
  border-radius: 0.25rem;
}
/**
 * flex_extra
 *
 * Extra customization of flex rows for system side.
 *
 * @author Edoardo Facchinelli
 */
.flex-row .flex-no-wrap {
  flex-wrap: nowrap;
}
.flex-row .flex-grow {
  flex-grow: 1;
}
.flex-row .flex-shrink {
  flex-shrink: 1;
}
.flex-row .flex-item-space-between {
  justify-content: space-between;
}
.flex-row .flex-item-space-evenly {
  justify-content: space-evenly;
}
.flex-row .flex-item-center {
  justify-content: center;
}
.flex-row .flex-align-start {
  align-items: flex-start;
}
.flex-row .flex-align-center {
  align-items: center;
}
.flex-row .flex-align-end {
  align-items: flex-end;
}
.flex-row .flex-align-unset {
  align-items: unset;
}
.flex-row .flex-start {
  justify-content: flex-start;
}
.flex-row .flex-end {
  justify-content: flex-end;
}
.flex-row .flex-item-1 {
  flex-basis: 1%;
}
.flex-row .flex-item-2 {
  flex-basis: 2%;
}
.flex-row .flex-item-3 {
  flex-basis: 3%;
}
.flex-row .flex-item-4 {
  flex-basis: 4%;
}
.flex-row .flex-item-5 {
  flex-basis: 5%;
}
.flex-row .flex-item-6 {
  flex-basis: 6%;
}
.flex-row .flex-item-7 {
  flex-basis: 7%;
}
.flex-row .flex-item-8 {
  flex-basis: 8%;
}
.flex-row .flex-item-9 {
  flex-basis: 9%;
}
.flex-row .flex-item-10 {
  flex-basis: 10%;
}
.flex-row .flex-item-11 {
  flex-basis: 11%;
}
.flex-row .flex-item-12 {
  flex-basis: 12%;
}
.flex-row .flex-item-13 {
  flex-basis: 13%;
}
.flex-row .flex-item-14 {
  flex-basis: 14%;
}
.flex-row .flex-item-15 {
  flex-basis: 15%;
}
.flex-row .flex-item-16 {
  flex-basis: 16%;
}
.flex-row .flex-item-17 {
  flex-basis: 17%;
}
.flex-row .flex-item-18 {
  flex-basis: 18%;
}
.flex-row .flex-item-19 {
  flex-basis: 19%;
}
.flex-row .flex-item-20 {
  flex-basis: 20%;
}
.flex-row .flex-item-21 {
  flex-basis: 21%;
}
.flex-row .flex-item-22 {
  flex-basis: 22%;
}
.flex-row .flex-item-23 {
  flex-basis: 23%;
}
.flex-row .flex-item-24 {
  flex-basis: 24%;
}
.flex-row .flex-item-25 {
  flex-basis: 25%;
}
.flex-row .flex-item-26 {
  flex-basis: 26%;
}
.flex-row .flex-item-27 {
  flex-basis: 27%;
}
.flex-row .flex-item-28 {
  flex-basis: 28%;
}
.flex-row .flex-item-29 {
  flex-basis: 29%;
}
.flex-row .flex-item-30 {
  flex-basis: 30%;
}
.flex-row .flex-item-31 {
  flex-basis: 31%;
}
.flex-row .flex-item-32 {
  flex-basis: 32%;
}
.flex-row .flex-item-33 {
  flex-basis: 33%;
}
.flex-row .flex-item-34 {
  flex-basis: 34%;
}
.flex-row .flex-item-35 {
  flex-basis: 35%;
}
.flex-row .flex-item-36 {
  flex-basis: 36%;
}
.flex-row .flex-item-37 {
  flex-basis: 37%;
}
.flex-row .flex-item-38 {
  flex-basis: 38%;
}
.flex-row .flex-item-39 {
  flex-basis: 39%;
}
.flex-row .flex-item-40 {
  flex-basis: 40%;
}
.flex-row .flex-item-41 {
  flex-basis: 41%;
}
.flex-row .flex-item-42 {
  flex-basis: 42%;
}
.flex-row .flex-item-43 {
  flex-basis: 43%;
}
.flex-row .flex-item-44 {
  flex-basis: 44%;
}
.flex-row .flex-item-45 {
  flex-basis: 45%;
}
.flex-row .flex-item-46 {
  flex-basis: 46%;
}
.flex-row .flex-item-47 {
  flex-basis: 47%;
}
.flex-row .flex-item-48 {
  flex-basis: 48%;
}
.flex-row .flex-item-49 {
  flex-basis: 49%;
}
.flex-row .flex-item-50 {
  flex-basis: 50%;
}
.flex-row .flex-item-51 {
  flex-basis: 51%;
}
.flex-row .flex-item-52 {
  flex-basis: 52%;
}
.flex-row .flex-item-53 {
  flex-basis: 53%;
}
.flex-row .flex-item-54 {
  flex-basis: 54%;
}
.flex-row .flex-item-55 {
  flex-basis: 55%;
}
.flex-row .flex-item-56 {
  flex-basis: 56%;
}
.flex-row .flex-item-57 {
  flex-basis: 57%;
}
.flex-row .flex-item-58 {
  flex-basis: 58%;
}
.flex-row .flex-item-59 {
  flex-basis: 59%;
}
.flex-row .flex-item-60 {
  flex-basis: 60%;
}
.flex-row .flex-item-61 {
  flex-basis: 61%;
}
.flex-row .flex-item-62 {
  flex-basis: 62%;
}
.flex-row .flex-item-63 {
  flex-basis: 63%;
}
.flex-row .flex-item-64 {
  flex-basis: 64%;
}
.flex-row .flex-item-65 {
  flex-basis: 65%;
}
.flex-row .flex-item-66 {
  flex-basis: 66%;
}
.flex-row .flex-item-67 {
  flex-basis: 67%;
}
.flex-row .flex-item-68 {
  flex-basis: 68%;
}
.flex-row .flex-item-69 {
  flex-basis: 69%;
}
.flex-row .flex-item-70 {
  flex-basis: 70%;
}
.flex-row .flex-item-71 {
  flex-basis: 71%;
}
.flex-row .flex-item-72 {
  flex-basis: 72%;
}
.flex-row .flex-item-73 {
  flex-basis: 73%;
}
.flex-row .flex-item-74 {
  flex-basis: 74%;
}
.flex-row .flex-item-75 {
  flex-basis: 75%;
}
.flex-row .flex-item-76 {
  flex-basis: 76%;
}
.flex-row .flex-item-77 {
  flex-basis: 77%;
}
.flex-row .flex-item-78 {
  flex-basis: 78%;
}
.flex-row .flex-item-79 {
  flex-basis: 79%;
}
.flex-row .flex-item-80 {
  flex-basis: 80%;
}
.flex-row .flex-item-81 {
  flex-basis: 81%;
}
.flex-row .flex-item-82 {
  flex-basis: 82%;
}
.flex-row .flex-item-83 {
  flex-basis: 83%;
}
.flex-row .flex-item-84 {
  flex-basis: 84%;
}
.flex-row .flex-item-85 {
  flex-basis: 85%;
}
.flex-row .flex-item-86 {
  flex-basis: 86%;
}
.flex-row .flex-item-87 {
  flex-basis: 87%;
}
.flex-row .flex-item-88 {
  flex-basis: 88%;
}
.flex-row .flex-item-89 {
  flex-basis: 89%;
}
.flex-row .flex-item-90 {
  flex-basis: 90%;
}
.flex-row .flex-item-91 {
  flex-basis: 91%;
}
.flex-row .flex-item-92 {
  flex-basis: 92%;
}
.flex-row .flex-item-93 {
  flex-basis: 93%;
}
.flex-row .flex-item-94 {
  flex-basis: 94%;
}
.flex-row .flex-item-95 {
  flex-basis: 95%;
}
.flex-row .flex-item-96 {
  flex-basis: 96%;
}
.flex-row .flex-item-97 {
  flex-basis: 97%;
}
.flex-row .flex-item-98 {
  flex-basis: 98%;
}
.flex-row .flex-item-99 {
  flex-basis: 99%;
}
.flex-row .flex-item-100 {
  flex-basis: 100%;
}
.flex-row .flex-item-1-2 {
  flex-basis: 50%;
}
.flex-row .flex-item-2-2 {
  flex-basis: 100%;
}
.flex-row .flex-item-1-3 {
  flex-basis: 33.33333333%;
}
.flex-row .flex-item-2-3 {
  flex-basis: 66.66666667%;
}
.flex-row .flex-item-3-3 {
  flex-basis: 100%;
}
.flex-row .flex-item-1-4 {
  flex-basis: 25%;
}
.flex-row .flex-item-2-4 {
  flex-basis: 50%;
}
.flex-row .flex-item-3-4 {
  flex-basis: 75%;
}
.flex-row .flex-item-4-4 {
  flex-basis: 100%;
}
.flex-row .flex-item-1-5 {
  flex-basis: 20%;
}
.flex-row .flex-item-2-5 {
  flex-basis: 40%;
}
.flex-row .flex-item-3-5 {
  flex-basis: 60%;
}
.flex-row .flex-item-4-5 {
  flex-basis: 80%;
}
.flex-row .flex-item-5-5 {
  flex-basis: 100%;
}
.flex-row .flex-item-1-6 {
  flex-basis: 16.66666667%;
}
.flex-row .flex-item-2-6 {
  flex-basis: 33.33333333%;
}
.flex-row .flex-item-3-6 {
  flex-basis: 50%;
}
.flex-row .flex-item-4-6 {
  flex-basis: 66.66666667%;
}
.flex-row .flex-item-5-6 {
  flex-basis: 83.33333333%;
}
.flex-row .flex-item-6-6 {
  flex-basis: 100%;
}
.flex-row .flex-item-1-7 {
  flex-basis: 14.28571429%;
}
.flex-row .flex-item-2-7 {
  flex-basis: 28.57142857%;
}
.flex-row .flex-item-3-7 {
  flex-basis: 42.85714286%;
}
.flex-row .flex-item-4-7 {
  flex-basis: 57.14285714%;
}
.flex-row .flex-item-5-7 {
  flex-basis: 71.42857143%;
}
.flex-row .flex-item-6-7 {
  flex-basis: 85.71428571%;
}
.flex-row .flex-item-7-7 {
  flex-basis: 100%;
}
.flex-row .flex-item-1-8 {
  flex-basis: 12.5%;
}
.flex-row .flex-item-2-8 {
  flex-basis: 25%;
}
.flex-row .flex-item-3-8 {
  flex-basis: 37.5%;
}
.flex-row .flex-item-4-8 {
  flex-basis: 50%;
}
.flex-row .flex-item-5-8 {
  flex-basis: 62.5%;
}
.flex-row .flex-item-6-8 {
  flex-basis: 75%;
}
.flex-row .flex-item-7-8 {
  flex-basis: 87.5%;
}
.flex-row .flex-item-8-8 {
  flex-basis: 100%;
}
.flex-row .flex-item-1-9 {
  flex-basis: 11.11111111%;
}
.flex-row .flex-item-2-9 {
  flex-basis: 22.22222222%;
}
.flex-row .flex-item-3-9 {
  flex-basis: 33.33333333%;
}
.flex-row .flex-item-4-9 {
  flex-basis: 44.44444444%;
}
.flex-row .flex-item-5-9 {
  flex-basis: 55.55555556%;
}
.flex-row .flex-item-6-9 {
  flex-basis: 66.66666667%;
}
.flex-row .flex-item-7-9 {
  flex-basis: 77.77777778%;
}
.flex-row .flex-item-8-9 {
  flex-basis: 88.88888889%;
}
.flex-row .flex-item-9-9 {
  flex-basis: 100%;
}
.flex-row .flex-item-1-10 {
  flex-basis: 10%;
}
.flex-row .flex-item-2-10 {
  flex-basis: 20%;
}
.flex-row .flex-item-3-10 {
  flex-basis: 30%;
}
.flex-row .flex-item-4-10 {
  flex-basis: 40%;
}
.flex-row .flex-item-5-10 {
  flex-basis: 50%;
}
.flex-row .flex-item-6-10 {
  flex-basis: 60%;
}
.flex-row .flex-item-7-10 {
  flex-basis: 70%;
}
.flex-row .flex-item-8-10 {
  flex-basis: 80%;
}
.flex-row .flex-item-9-10 {
  flex-basis: 90%;
}
.flex-row .flex-item-10-10 {
  flex-basis: 100%;
}
.flex-row .flex-item-1-11 {
  flex-basis: 9.09090909%;
}
.flex-row .flex-item-2-11 {
  flex-basis: 18.18181818%;
}
.flex-row .flex-item-3-11 {
  flex-basis: 27.27272727%;
}
.flex-row .flex-item-4-11 {
  flex-basis: 36.36363636%;
}
.flex-row .flex-item-5-11 {
  flex-basis: 45.45454545%;
}
.flex-row .flex-item-6-11 {
  flex-basis: 54.54545455%;
}
.flex-row .flex-item-7-11 {
  flex-basis: 63.63636364%;
}
.flex-row .flex-item-8-11 {
  flex-basis: 72.72727273%;
}
.flex-row .flex-item-9-11 {
  flex-basis: 81.81818182%;
}
.flex-row .flex-item-10-11 {
  flex-basis: 90.90909091%;
}
.flex-row .flex-item-11-11 {
  flex-basis: 100%;
}
.flex-row .flex-item-1-12 {
  flex-basis: 8.33333333%;
}
.flex-row .flex-item-2-12 {
  flex-basis: 16.66666667%;
}
.flex-row .flex-item-3-12 {
  flex-basis: 25%;
}
.flex-row .flex-item-4-12 {
  flex-basis: 33.33333333%;
}
.flex-row .flex-item-5-12 {
  flex-basis: 41.66666667%;
}
.flex-row .flex-item-6-12 {
  flex-basis: 50%;
}
.flex-row .flex-item-7-12 {
  flex-basis: 58.33333333%;
}
.flex-row .flex-item-8-12 {
  flex-basis: 66.66666667%;
}
.flex-row .flex-item-9-12 {
  flex-basis: 75%;
}
.flex-row .flex-item-10-12 {
  flex-basis: 83.33333333%;
}
.flex-row .flex-item-11-12 {
  flex-basis: 91.66666667%;
}
.flex-row .flex-item-12-12 {
  flex-basis: 100%;
}
.flex-row .flex-item-push-down {
  margin-bottom: auto;
}
.flex-row .flex-item-push-right {
  margin-left: auto;
}
.flex-row .flex-item {
  min-height: 0;
}
.flex-row .flex-align-baseline {
  align-items: baseline;
}
.flex-row .flex-row.flex-horizontal-padding > * {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}
.flex-row .flex-row.flex-vertical-padding > * {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.flex-debug .flex-row,
.flex-row.flex-debug {
  box-shadow: inset 0 0.3rem #00ff00, inset 0 -0.3rem #ff00ff;
}
.flex-debug .flex-row:last-of-type,
.flex-row.flex-debug:last-of-type {
  box-shadow: inset 0 -0.3rem #ffff00;
}
.flex-debug .flex-row.flex-item,
.flex-row.flex-debug.flex-item {
  box-shadow: inset 0.3rem 0 #ff0000, inset -0.3rem 0 #00ffff;
}
.flex-debug .flex-row.flex-item:last-of-type,
.flex-row.flex-debug.flex-item:last-of-type {
  box-shadow: inset -0.3rem 0 #0000ff;
}
#alert-container {
  position: fixed;
  top: 2rem;
  right: 5rem;
  z-index: 2000;
  max-width: 45rem;
}
.alert {
  position: relative;
  padding: 1rem 8rem 1rem 1rem;
  margin: 1rem;
  border: 0.1rem solid transparent;
  border-radius: 0.5rem;
  z-index: 200;
}
.alert.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}
.alert.alert-danger svg {
  fill: #721c24;
}
.alert.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}
.alert.alert-success svg {
  fill: #155724;
}
.alert.alert-dismissible {
  padding-right: 8rem;
}
.alert .close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 0.75rem 1.25rem;
  color: inherit;
}
.alert .copy {
  position: absolute;
  top: 0;
  right: 3.5rem;
  z-index: 2;
  padding: 0.75rem 1.25rem;
  color: inherit;
}
html.modal-active-modal-confirmation #modal {
  overflow: hidden;
}
.modal-active-size-full.modal-active-linus-django-form.modal-active,
.modal-active-size-full.modal-active-linus-django-form.modal-active body {
  position: unset;
}
#modal-container-linus-django-confirmation {
  min-height: 15rem !important;
}
#modal-container-linus-django-confirmation .modal-content {
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-confirm-question {
  font-size: 1.6rem;
  text-align: center;
}
#modal-container-linus-django-form {
  min-width: 50vw;
}
#modal-container-linus-django-form .modal-form h2 {
  margin-left: 2rem;
  margin-right: 2rem;
}
#modal.modal-size-adaptive {
  scroll-behavior: smooth;
  scroll-snap-stop: always;
  scroll-snap-type: x mandatory;
  scroll-snap-align: center;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
#modal.modal-size-adaptive::-webkit-scrollbar {
  display: none;
}
#modal.modal-size-adaptive .modal-container {
  min-height: auto;
}
#modal.modal-size-adaptive .modal-content {
  scroll-behavior: smooth;
  scroll-snap-stop: always;
  scroll-snap-type: x mandatory;
  scroll-snap-align: center;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
#modal.modal-size-adaptive .modal-content::-webkit-scrollbar {
  display: none;
}
#modal.modal-size-full {
  bottom: 0;
  left: 7.6rem;
  right: 28rem;
}
#modal.modal-size-full .modal-pane {
  height: unset;
}
.close-full-size-modal {
  position: absolute;
  top: 0.75rem;
  right: 2rem;
  line-height: 1.5;
}
.modal-form-row {
  display: flex;
  flex-flow: row wrap;
}
.modal-form-row > .modal-form-column,
.modal-form-row > fieldset {
  flex: 1 1 auto;
}
.modal-form-row.equally-split > .modal-form-column,
.modal-form-row.equally-split > fieldset {
  flex-basis: 0;
}
.modal-form-row.align-center {
  align-items: center;
}
.modal-form-row .button.modal-row-button {
  align-self: center;
  margin-bottom: 1.5rem;
}
.modal-form-row .button.modal-row-button.modal-inline-button {
  margin-top: 1rem;
}
.modal-form-column {
  display: flex;
  flex-flow: column wrap;
}
.modal-form-column > fieldset {
  flex: 0 0 auto;
}
.modal-form-element {
  margin-left: 2rem;
  margin-right: 2rem;
  margin-bottom: 1.5rem;
}
.modal-form {
  position: relative;
  margin-top: 6rem;
}
.modal-form .modal-form-header {
  position: fixed;
  top: 0;
  background-color: #363636;
  width: 100%;
  z-index: 15;
  padding: 0 2rem;
  line-height: 3;
  font-size: 1.6rem;
  font-weight: 700;
}
.button.button-ask.button-definitely-cancel,
.btn.button-ask.button-definitely-cancel {
  background-color: #FF6666 !important;
}
.button.button-ask.button-definitely-cancel-spin,
.btn.button-ask.button-definitely-cancel-spin {
  background-color: #FF6666 !important;
}
fieldset.js-field-is-valid.fieldset-help-warning label,
fieldset.js-field-is-valid.fieldset-help-warning .fieldset-help-valid {
  color: #FFD740;
}
fieldset.js-field-is-valid.fieldset-help-warning .fieldset-validate {
  background-color: #FFD740;
}
/**
Preparation
1. add .edit-mode to a general, relevant area
2. add .edit-item to all items to be affected by edit mode.
3. add .edit-start-hidden to elements that will be visible only when editing
4. add .edit-start-visible to elements that will be visible only when NOT editing
5. add .edit-section to an area that will be edited as a group, while other
    areas are not.

Operation (all done in local js)
1. to enable edit mode, add .edit-on to the form. If sections are used, also
    add it there.
2. to disable edit mode, remove .edit-on from form and any sections
3. sections are supposed to be edited one at a time. use the .edit-on class.
4. add .flash-box-shadow to flash an element e.g. when risking loss of edits.
 */
.edit-mode .edit-section:not(.edit-on) .edit-start-hidden {
  display: none;
}
.edit-mode .edit-section.edit-on .edit-start-visible {
  display: none;
}
.edit-mode.edit-on .edit-section:not(.edit-on) .edit-item {
  display: none;
}
.edit-mode:not(.edit-on) .edit-start-hidden {
  display: none;
}
.edit-mode.edit-on .edit-start-visible {
  display: none;
}
.flash-box-shadow {
  animation: flash-box-shadow-animation 0.25s linear infinite;
  box-shadow: 0 0 0.5rem 0.5rem transparent inset;
}
@keyframes flash-box-shadow-animation {
  50% {
    box-shadow: 0 0 0.5rem 0.5rem #ff4950 inset;
  }
}
/**
 These files in
 */
/**
* _accordion.less
*
* Style for the accordion component.
*
* @author Alex Ghiban <drew7721@gmail.com>
*/
.acc-key {
  /* for legacy, to be removed once old components are deleted */
  /* up to here */
}
.acc-key > .acc-key-header {
  cursor: pointer;
  border-bottom: #EBEBEB 0.1rem solid;
}
.acc-key:not(.opened) > .acc-key-header > .acc-key-header-close,
.acc-key:not(.opened) > .acc-key-header > .symmetry-sides > div > .acc-key-header-close,
.acc-key:not(.opened) > .acc-key-header > .symmetry-sides > div > span > .acc-key-header-close {
  display: none;
}
.acc-key > .acc-key-content {
  display: none;
  padding-top: 1.5rem;
}
.acc-key.opened > .acc-key-header,
.acc-key.opened > .acc-key-header > .symmetry-sides > div,
.acc-key.opened > .acc-key-header > .symmetry-sides > div > span {
  /* for legacy, to be removed once old components are deleted */
  /* up to here */
}
.acc-key.opened > .acc-key-header .accordion-state-flip,
.acc-key.opened > .acc-key-header > .symmetry-sides > div .accordion-state-flip,
.acc-key.opened > .acc-key-header > .symmetry-sides > div > span .accordion-state-flip {
  transform: rotate(180deg);
}
.acc-key.opened > .acc-key-header > .acc-key-header-close,
.acc-key.opened > .acc-key-header > .symmetry-sides > div > .acc-key-header-close,
.acc-key.opened > .acc-key-header > .symmetry-sides > div > span > .acc-key-header-close {
  display: block;
}
.acc-key.opened > .acc-key-header > .acc-key-header-open,
.acc-key.opened > .acc-key-header > .symmetry-sides > div > .acc-key-header-open,
.acc-key.opened > .acc-key-header > .symmetry-sides > div > span > .acc-key-header-open {
  display: none;
}
.acc-key.opened > .acc-key-content {
  display: block;
}
/**
System extension for Button component.

! Important - drop support of the `btn` class.

These are button optimizations for Django.
 */
.button .button-spinner {
  display: none;
}
.button.button-loading .button-spinner {
  display: inline-block;
}
/**
This builds on top of storefront styles for the fieldset component.

These are Django-specific changes that are not yet ported to storefront.
 */
body.linus-django fieldset.fieldset-disabled {
  opacity: 0.8;
  pointer-events: none;
  color: #AEAEAE;
}
body.linus-django fieldset.fieldset-hidden {
  display: none;
}
body.linus-django fieldset input:disabled {
  color: #999999;
  background-color: #F2F2F2;
}
body.linus-django fieldset input:disabled.error {
  color: #000000;
  background-color: #FF6666;
}
body.linus-django fieldset.no-eclipse .fieldset-input::after,
body.linus-django .fieldset.no-eclipse .fieldset-input::after {
  box-shadow: none;
}
body.linus-django fieldset.fieldset-multiple .fieldset-input::after,
body.linus-django .fieldset.fieldset-multiple .fieldset-input::after {
  box-shadow: none;
}
body.linus-django fieldset.fieldset-multiple .fieldset-control-wrapper,
body.linus-django .fieldset.fieldset-multiple .fieldset-control-wrapper {
  line-height: 0;
}
body.linus-django fieldset input[type="date"],
body.linus-django .fieldset input[type="date"],
body.linus-django fieldset input[type="datetime-local"],
body.linus-django .fieldset input[type="datetime-local"] {
  display: inline-block;
  border: 0;
  line-height: inherit;
  background-color: transparent;
}
body.linus-django #modal .js-field-is-focus label {
  color: #FFFFFF;
}
/**
    System Extensions for Symmetry Sides component.
 */
.symmetry-sides.symmetry-sides-allow-select {
  user-select: text !important;
}
.symmetry-sides.symmetry-sides-black,
.symmetry-sides.symmetry-sides-dark-gray,
.symmetry-sides.symmetry-sides-dark-gray-slight-light,
.symmetry-sides.symmetry-sides-dark-gray-overlay-splash {
  color: #FFFFFF;
}
.symmetry-sides.symmetry-sides-remove-shadow {
  box-shadow: none;
}
.symmetry-sides.symmetry-sides-remove-shadow > :last-child {
  box-shadow: none;
}
/**
Styles for components documentation.
 */
body.components-documentation .root {
  font-size: calc(100% + 0.2rem);
}
body.components-documentation .root .component-demo {
  margin-left: 2rem;
  margin-right: 2rem;
  margin-bottom: 1.5rem;
}
body.components-documentation .root .component-demo pre {
  margin: 0.75rem 0;
}
body.components-documentation .root .component-demo.component-demo-image .image {
  min-height: 10rem;
  min-width: 10rem;
}
body.components-documentation .root .component-demo .title {
  font-style: italic;
}
body.components-documentation .root .root-content-after {
  flex: 0 1 20% !important;
}
body.components-documentation .root .root-content-after ul {
  margin-left: 2rem;
  margin-right: 2rem;
  padding: 0;
}
body.components-documentation .root .root-content-after ul li {
  list-style: inside;
}
body.components-documentation .root .root-content-after ul a {
  margin-bottom: 0.75rem;
}
body.components-documentation .root pre,
body.components-documentation .root .legend {
  margin-bottom: 1.5rem;
}
body.components-documentation .root pre.has-legend,
body.components-documentation .root .legend.has-legend {
  margin-bottom: 0.1rem;
}
body.components-documentation .root blockquote cite {
  display: block;
  margin-left: 2rem;
  margin-right: 2rem;
}
body.components-documentation .root blockquote cite::before {
  content: "Source: ";
}
body.components-documentation .root a.section-anchor-title {
  color: #222222;
}
body.components-documentation .root a.section-anchor-title:hover {
  color: #222222;
  text-decoration: none;
}
body.components-documentation .root a.section-anchor-title:hover::after {
  margin-left: 2rem;
  content: '¶';
}
body.components-documentation .root .guide-image-side-by-side {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 1.5rem;
}
body.components-documentation .root .guide-image-side-by-side .image {
  margin: 1.5rem 2rem;
  min-height: 10rem;
  height: auto;
  width: auto;
}
body.components-documentation .root section {
  margin-bottom: 3rem;
}
body.components-documentation .root .legend span {
  margin-left: 2rem;
}
body.components-documentation .root pre,
body.components-documentation .root .legend {
  cursor: default;
  background-color: #333333;
  color: #FFFFFF;
  padding: 1.5rem 2rem;
  margin-left: 2rem;
  margin-right: 2rem;
}
body.components-documentation .root pre span[title],
body.components-documentation .root .legend span[title] {
  cursor: help;
}
body.components-documentation .root pre .mandatory,
body.components-documentation .root .legend .mandatory {
  color: #DD312E;
}
body.components-documentation .root pre .optional,
body.components-documentation .root .legend .optional {
  color: #d5c54d;
}
body.components-documentation .root pre .namespace,
body.components-documentation .root .legend .namespace {
  color: #9bcff0;
}
body.components-documentation .root pre .info,
body.components-documentation .root .legend .info {
  color: #999999;
}
body.components-documentation .root pre .global,
body.components-documentation .root .legend .global {
  color: #3ddc7f;
}
body.components-documentation .root pre .python-class-name,
body.components-documentation .root .legend .python-class-name {
  color: #678bc4;
}
body.components-documentation .root .django-param-type {
  font-weight: bold;
}
body.components-documentation .root .jinja-param-name {
  font-weight: bold;
}
body.components-documentation .root .jinja-param-type {
  color: #555555;
}
body.components-documentation.nav-component-about nav.root-navigation .menu-stack.secondary-navigation .nav-component-about {
  background-color: #f7f4ea;
  color: #222222;
}
body.components-documentation.app-development-guide nav.root-navigation .menu-stack.secondary-navigation .app-development-guide {
  background-color: #f7f4ea;
  color: #222222;
}
body.components-documentation.new-application-guide nav.root-navigation .menu-stack.secondary-navigation .new-application-guide {
  background-color: #f7f4ea;
  color: #222222;
}
body.components-documentation.app-style-guide nav.root-navigation .menu-stack.secondary-navigation .app-style-guide {
  background-color: #f7f4ea;
  color: #222222;
}
body.components-documentation.development-guide nav.root-navigation .menu-stack.secondary-navigation .development-guide {
  background-color: #f7f4ea;
  color: #222222;
}
body.components-documentation.showcase nav.root-navigation .menu-stack.secondary-navigation .showcase {
  background-color: #f7f4ea;
  color: #222222;
}
body.components-documentation.test-page nav.root-navigation .menu-stack.secondary-navigation .test-page {
  background-color: #f7f4ea;
  color: #222222;
}
/**
App Specific styles
 */
/**
Custom styles for the homepage - Settings and user info.
 */
body.homepage h3 {
  color: #f7f4ea;
}
body.homepage .user-account-info {
  margin-left: 2rem;
  margin-right: 2rem;
}
body.homepage .security-warning {
  background-color: #aa0000;
  color: #ffffff;
}
body.homepage .security-warning.symmetry-sides.symmetry-sides-has-subtext > :first-child > :not(i):not(.image):not(fieldset) .symmetry-sides-subtext {
  color: #ffffff;
}
body.linus-django.swagger-body .root-main-content,
body.linus-django.swagger-body .root-content-before,
body.linus-django.swagger-body .root-content-after {
  padding-top: 0;
}
body.linus-django.swagger-body .btn {
  color: #3b4151 !important;
}
body.linus-django.swagger-body .btn.authorize {
  color: #49cc90 !important;
}
body.linus-django.swagger-body .btn.execute {
  color: #ffffff !important;
}
body.linus-django.swagger-body .btn.cancel {
  color: #ff6060 !important;
}
body.detail-view-page {
  /*
 Order View Variables
 */
  /*
RMAs
 */
  /**
Styles for right hand order notes.
 */
}
body.detail-view-page .detail-item {
  display: grid;
  grid-template-columns: 4fr 2fr max-content min-content;
  gap: 1.5rem 2rem;
  margin: 0 2rem 1rem 2rem;
  align-items: center;
  min-width: 900px;
}
body.detail-view-page .detail-item:first-of-type {
  color: #666666;
  background-color: #EBEBEB;
  font-weight: 700;
}
body.detail-view-page .detail-item .dd-menu {
  margin-right: 2rem;
}
body.detail-view-page .detail-item-cancelled .detail-item-data,
body.detail-view-page .detail-item-cancelled .detail-item-price,
body.detail-view-page .detail-item-cancelled .detail-item-quantities {
  opacity: 0.5;
}
body.detail-view-page .detail-item-data {
  display: grid;
  grid-template-columns: repeat(2, minmax(8rem, auto)) 3fr 4fr 2fr 1fr;
  gap: inherit;
  align-items: inherit;
}
body.detail-view-page .fitment-icon {
  font-size: 3rem;
}
body.detail-view-page .fitment-icon.positive {
  color: #149702;
}
body.detail-view-page .fitment-icon.negative {
  color: #e30007;
}
body.detail-view-page .fitment-icon.disabled {
  color: #CECECE;
}
body.detail-view-page .detail-item-price {
  display: grid;
  grid-template-columns: repeat(4, 2fr);
  gap: inherit;
  align-items: inherit;
  text-align: right;
}
body.detail-view-page .detail-item-quantities > span {
  margin: 0 1rem;
}
body.detail-view-page .detail-order-items-v3 {
  display: grid;
  grid-template-columns: [item-data] 0fr 0fr auto 0fr [item-price] repeat(4, auto) [item-qty] repeat(4, min-content) [item-actions] min-content;
  gap: 0.75rem 2rem;
  margin: 0 2rem 1.5rem 2rem;
  align-items: center;
  justify-items: center;
}
body.detail-view-page .detail-order-items-v3 .justify-self-start {
  justify-self: start;
}
body.detail-view-page .detail-order-items-v3 .item-price {
  grid-column: item-price;
}
body.detail-view-page .detail-order-items-v3 .item-header-title {
  grid-row: items-header;
}
body.detail-view-page .item-images-container {
  position: relative;
}
body.detail-view-page .item-images-container .item-image {
  height: 7rem;
  width: 7rem;
}
body.detail-view-page .item-images-container .item-image-zoomed {
  height: 21rem;
  width: 21rem;
  display: none;
  position: absolute;
  top: -7rem;
  left: 7rem;
  z-index: 30;
  box-shadow: 2px 2px 5px -2px #222222;
}
body.detail-view-page .item-images-container .item-image:hover + .item-image-zoomed {
  display: block;
}
body.detail-view-page .item-policies-container {
  white-space: nowrap;
}
body.detail-view-page .order-item-packing-icons i.image {
  width: 3rem;
  height: 3rem;
}
body.detail-view-page .tippy-content .spaced-data-row .price-detail {
  margin-left: 2rem;
}
@media (max-width: 800px) {
  body.detail-view-page .root {
    flex-direction: column;
  }
  body.detail-view-page .root .root-content-before,
  body.detail-view-page .root .root-content-after {
    flex: 0 0 20rem;
  }
  body.detail-view-page .root .root-main-content {
    overflow-x: scroll;
  }
  body.detail-view-page.search-view-page .root-content-before {
    flex: 0 0 30rem;
  }
  body.detail-view-page.search-view-page .advanced-search-form-buttons {
    position: static;
  }
  body.detail-view-page .detail-view-notes {
    flex-direction: row;
    gap: 1.5rem 2rem;
  }
  body.detail-view-page .detail-view-notes #detail-view-add-new-note-form {
    border-bottom: none;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
  }
}
body.detail-view-page .root-content-before {
  background-color: #222222;
  color: #FFFFFF;
  width: 28rem;
}
body.detail-view-page .root-content-before fieldset,
body.detail-view-page .root-content-after fieldset {
  line-height: 2.5;
  color: #e6e6e6;
}
body.detail-view-page .root-content-before fieldset.js-field-is-focus label,
body.detail-view-page .root-content-after fieldset.js-field-is-focus label {
  color: #FFFFFF;
}
body.detail-view-page .root-content-before fieldset .fieldset-input,
body.detail-view-page .root-content-after fieldset .fieldset-input {
  background-color: transparent;
}
body.detail-view-page .root-content-before fieldset .fieldset-input::after,
body.detail-view-page .root-content-after fieldset .fieldset-input::after {
  box-shadow: none;
}
body.detail-view-page .root-content-before fieldset .fieldset-input select,
body.detail-view-page .root-content-after fieldset .fieldset-input select {
  color: #e6e6e6;
}
body.detail-view-page .root-content-before fieldset .fieldset-input input,
body.detail-view-page .root-content-after fieldset .fieldset-input input,
body.detail-view-page .root-content-before fieldset .fieldset-input select,
body.detail-view-page .root-content-after fieldset .fieldset-input select {
  border-radius: 4px;
  border: 1px solid #666666;
}
body.detail-view-page .root-content-before,
body.detail-view-page .root-content-after {
  width: 28rem;
}
body.detail-view-page .root-content-before {
  box-shadow: 0 0 5px -1px;
  z-index: 2;
}
body.detail-view-page .root-content-after {
  background-color: #CECECE;
  box-shadow: 0 0 5px -1px;
  z-index: 2;
}
body.detail-view-page .symmetry-sides.order-header {
  overflow: visible;
  font-size: 120%;
}
body.detail-view-page .symmetry-sides.order-header > :last-child {
  overflow: visible;
}
body.detail-view-page .symmetry-sides.order-header > :last-child .rounded-button {
  padding: 0.375rem 1rem;
  margin-left: 1.5rem;
}
body.detail-view-page .customer-name {
  align-items: center;
}
body.detail-view-page .fraud-icons {
  cursor: pointer;
}
body.detail-view-page .order-details-header {
  font-size: calc(100% + 0.2rem);
  text-transform: uppercase;
  line-height: 4;
  display: flex;
  margin-left: 2rem;
  margin-right: 2rem;
  align-items: center;
  justify-content: flex-end;
}
body.detail-view-page .order-details-header.space-between {
  justify-content: space-between;
}
body.detail-view-page .sub-orders {
  margin-bottom: 1.5rem;
}
body.detail-view-page .sub-orders .previous-customer-orders {
  max-height: 50rem;
  overflow-y: scroll;
  scroll-behavior: smooth;
  scroll-snap-stop: always;
  scroll-snap-type: x mandatory;
  scroll-snap-align: center;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
body.detail-view-page .sub-orders .previous-customer-orders::-webkit-scrollbar {
  display: none;
}
body.detail-view-page .sub-orders .sub-order {
  display: flex;
  align-items: center;
  background-color: #393939;
  line-height: 3;
  color: #FFFFFF;
  margin-bottom: 0.375rem;
}
body.detail-view-page .sub-orders .sub-order.sub-order-current {
  background-color: #6b6b6b;
  cursor: default;
}
body.detail-view-page .sub-orders .sub-order span {
  margin-right: 0.5rem;
  vertical-align: center;
  white-space: nowrap;
}
body.detail-view-page .sub-orders .sub-order span:first-of-type {
  margin-left: 2rem;
}
body.detail-view-page .sub-orders .sub-order span:last-of-type {
  margin-right: 2rem;
}
body.detail-view-page .sub-orders .sub-order:hover {
  color: white;
  text-decoration: none;
}
body.detail-view-page .sub-orders .sub-order .linus-warehouse {
  text-transform: uppercase;
}
body.detail-view-page .sub-orders .sub-order .linus-warehouse.linus-warehouse-state-mtl {
  color: #AEAEAE;
}
body.detail-view-page .sub-orders .sub-order .linus-warehouse.linus-warehouse-state-ds {
  color: #8e6d92;
}
body.detail-view-page .sub-orders .sub-order .linus-warehouse.linus-warehouse-state-ct {
  color: #678bc4;
}
body.detail-view-page .sub-orders .sub-order .linus-warehouse.linus-warehouse-state-cgy {
  color: #9bcff0;
}
body.detail-view-page .customer-other-orders {
  margin-bottom: 1.5rem;
}
body.detail-view-page .customer-other-orders .btn-group {
  margin-left: 2rem;
  margin-right: 2rem;
  margin-bottom: 1.5rem;
}
body.detail-view-page .customer-other-orders .btn-group label {
  color: #dbdbdb !important;
  border-color: #393939;
}
body.detail-view-page .customer-other-orders .btn-group label.active {
  background-color: #393939;
  color: #dbdbdb;
}
body.detail-view-page .customer-other-orders .btn-group label:not(.active) {
  background-color: #222222;
}
body.detail-view-page .customer-other-orders .orders > div {
  display: flex;
  align-items: center;
  line-height: 3;
  color: #FFFFFF;
  margin-bottom: 0.375rem;
}
body.detail-view-page .customer-other-orders .orders > div > span {
  flex: 0 0 25%;
  margin-right: 0.5rem;
  vertical-align: center;
  white-space: nowrap;
}
body.detail-view-page .customer-other-orders .orders > div > span:first-of-type {
  margin-left: 2rem;
  flex: 0 0 10%;
}
body.detail-view-page .customer-other-orders .orders > div > span:last-of-type {
  margin-right: 2rem;
  flex: 0 0 20%;
}
body.detail-view-page .customer-other-orders .orders > div > span .hold-details {
  margin-bottom: 0.75rem;
}
body.detail-view-page .customer-other-orders .orders > div > span .hold-details .status-chip {
  float: left;
  margin-top: 0.5rem;
}
body.detail-view-page .customer-other-orders .orders > div.with-issues span:nth-of-type(n+3) {
  flex-basis: 50%;
  line-height: 1.5;
}
body.detail-view-page .customer-other-orders .orders > div.pending-order {
  display: none;
}
body.detail-view-page .customer-other-orders .orders > div:hover {
  color: white;
  text-decoration: none;
  background-color: #393939;
}
body.detail-view-page .customer-icons {
  margin-left: 2rem;
  margin-right: 2rem;
  margin-bottom: 1.5rem;
}
body.detail-view-page .customer-icons i.image {
  margin-right: 1rem;
  width: 2rem;
  height: 2rem;
}
body.detail-view-page #search-result-navigation {
  display: none;
  justify-content: center;
  align-items: baseline;
  color: #666666;
  margin-bottom: 1.5rem;
}
body.detail-view-page #search-result-navigation input {
  padding: 0.375rem 1rem;
  border: 1px solid #666666;
  border-radius: 5px;
}
body.detail-view-page #search-result-navigation .rounded-button {
  border-color: #666666;
}
body.detail-view-page #search-result-navigation > * {
  flex: 0 0;
}
body.detail-view-page #search-result-navigation > *:nth-child(n+2):nth-child(-n+3) {
  flex-basis: 15%;
}
body.detail-view-page #search-result-navigation > *:not(:last-child) {
  margin-right: 1rem;
}
body.detail-view-page .customer-data-group {
  margin-bottom: 1.5rem;
  color: #f7f4ea;
}
body.detail-view-page .customer-data-group .copy-to-clipboard {
  margin-left: 2rem;
}
body.detail-view-page .customer-data-group.customer-history div {
  margin-left: 2rem;
  margin-right: 2rem;
  display: flex;
}
body.detail-view-page .customer-data-group.customer-history div > span {
  flex: 0 1 50%;
}
body.detail-view-page .customer-data-group.customer-addresses {
  position: relative;
  display: flex;
  margin-left: 2rem;
  margin-right: 2rem;
  justify-content: space-between;
  line-height: 2;
}
body.detail-view-page .customer-data-group.customer-addresses #order-billing-address,
body.detail-view-page .customer-data-group.customer-addresses #order-shipping-address {
  flex: 0 0 50%;
}
body.detail-view-page .order-address-edit-icon {
  position: absolute;
  top: 0;
  right: 0;
}
body.detail-view-page .helix-data-cards {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-left: 1rem;
  margin-right: 1rem;
  margin-bottom: 1.5rem;
}
body.detail-view-page .helix-data-cards h3 {
  color: #6b6b6b;
  margin: 0 1rem 0.75rem 1rem;
}
body.detail-view-page .helix-data-cards h2 {
  margin: 0 1rem 0.75rem 1rem;
}
body.detail-view-page .helix-data-cards .helix-data-card {
  margin-bottom: 1.5rem;
  flex: 1 1;
}
body.detail-view-page .helix-data-cards .helix-data-card:last-of-type {
  margin-bottom: unset;
}
body.detail-view-page .helix-data-cards .helix-data-card .customer-icons {
  margin-left: 0;
  margin-right: 0;
}
body.detail-view-page .helix-data-cards .helix-data-card .customer-icons .fraud-icons span:last-of-type i.image {
  margin-right: 0;
}
body.detail-view-page .helix-data-cards .helix-data-card div {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  color: #dbdbdb;
  line-height: 2;
  padding: 0 1rem;
  transition: color ease-out 200ms;
}
body.detail-view-page .helix-data-cards .helix-data-card div:nth-child(even) {
  background-color: #222222;
}
body.detail-view-page .helix-data-cards .helix-data-card div:last-of-type {
  border-radius: 0 0 5px 5px;
}
body.detail-view-page .helix-data-cards .helix-data-card div:hover {
  color: #f7f7f7;
  transition: color ease-in 200ms;
}
body.detail-view-page .helix-data-cards .helix-data-card div b {
  flex: 0 0 auto;
}
body.detail-view-page .helix-data-cards.horizontal {
  flex-direction: row;
  gap: 1.5rem 2rem;
}
body.detail-view-page .rma {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;
  margin-left: 2rem;
  margin-right: 2rem;
}
body.detail-view-page .rma.show-rma-details .rma-header {
  background-color: #FFFFFF;
}
body.detail-view-page .rma.show-rma-details .order-rma-details {
  display: block;
}
body.detail-view-page .rma .rma-header {
  display: flex;
  flex-direction: row;
  background-color: #EBEBEB;
  align-items: center;
}
body.detail-view-page .rma .rma-header span.dd-menu {
  margin-left: 2rem;
  margin-right: 2rem;
}
body.detail-view-page .rma .rma-header .symmetry-sides {
  background-color: transparent;
  width: 100%;
  font-size: 120%;
}
body.detail-view-page .rma .material-icons {
  margin-left: 0 !important;
}
body.detail-view-page .rma .order-rma-details {
  display: none;
  border: 1px solid #FFFFFF;
  padding-top: 1.5rem;
}
body.detail-view-page .rma .rma-item {
  margin-bottom: 1.5rem;
  padding: 0.75rem 0;
  justify-content: space-between;
}
body.detail-view-page .rma .rma-item:nth-child(even) {
  background-color: #EBEBEB;
}
body.detail-view-page .text-emphasize {
  color: #000000;
  font-weight: 500;
}
body.detail-view-page .order-view-items {
  display: flex;
  flex-direction: column;
}
body.detail-view-page .order-view-items .order-view-item {
  display: flex;
  flex-direction: row;
  column-gap: 2rem;
  row-gap: 1.5rem;
  align-items: center;
}
body.detail-view-page .order-view-items .order-view-item .item-image {
  flex: 0 0 6.25rem;
  height: 6.25rem;
  width: 6.25rem;
  margin-left: 2rem;
}
body.detail-view-page .order-view-items .order-view-item .item-data-column {
  display: flex;
  flex-direction: column;
}
body.detail-view-page .surcharge-delete-button {
  color: #ff0000;
}
body.detail-view-page .rmas-container {
  margin-bottom: calc(4.5rem * 2);
}
body.detail-view-page .po-details-modal {
  user-select: text;
}
body.detail-view-page .detail-view-notes {
  height: 100%;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  padding-top: 1.5rem;
}
body.detail-view-page .detail-view-notes #detail-view-add-new-note-form {
  border-bottom: #e6e6e6 1px solid;
  margin-bottom: 1.5rem;
}
body.detail-view-page .detail-view-notes #detail-view-add-new-note-form textarea {
  color: #222222;
}
body.detail-view-page .detail-view-notes #detail-view-add-new-note-form .fieldset-help-valid {
  color: #222222 !important;
}
body.detail-view-page .detail-view-notes #detail-view-add-new-note-form .fieldset-help-valid kbd {
  font-size: 100%;
}
body.detail-view-page .detail-view-notes .new-note-textarea .fieldset-input {
  background-color: #EBEBEB;
  border-radius: 5px;
}
body.detail-view-page .detail-view-notes .new-note-textarea .fieldset-input textarea {
  min-height: unset;
  background-color: transparent;
  padding: 1rem;
}
body.detail-view-page .detail-view-notes .new-note-textarea .fieldset-help li {
  list-style: none;
}
body.detail-view-page .detail-view-notes .notes-filters .note-buttons-first-row {
  margin-left: 2rem;
  margin-right: 2rem;
  margin-bottom: 1.5rem;
}
body.detail-view-page .detail-view-notes .notes-filters .note-buttons-first-row fieldset {
  margin: 0;
}
body.detail-view-page .detail-view-notes .notes-filters .note-buttons-first-row button {
  float: right;
}
body.detail-view-page .detail-view-notes .notes-filters .note-buttons-second-row {
  display: flex;
  width: 100%;
  padding: 0 0.5rem 2rem 0.5rem;
  gap: 0.5rem;
  /* first item takes up 90% */
  /* everything else takes up remaining space */
}
body.detail-view-page .detail-view-notes .notes-filters .note-buttons-second-row > :first-child {
  flex: 0 1 75%;
  min-width: 0;
  /* allows shrinking to fit */
}
body.detail-view-page .detail-view-notes .notes-filters .note-buttons-second-row > :not(:first-child) {
  flex: 1 1 0;
  min-width: 0;
}
body.detail-view-page .detail-view-notes .notes-filters .note-buttons-second-row .btn-group {
  justify-content: space-evenly;
}
body.detail-view-page .detail-view-notes .notes-filters .note-buttons-second-row .btn-group > * {
  background-color: #CECECE;
  color: #666666 !important;
  border-color: #e6e6e6;
  padding: 0;
  flex-grow: 1;
}
body.detail-view-page .detail-view-notes .notes-filters .note-buttons-second-row .btn-group > :not(.active) {
  background-color: #CECECE;
}
body.detail-view-page .detail-view-notes .notes-filters .note-buttons-second-row .btn-group > .active {
  background-color: #e6e6e6;
  color: #666666 !important;
}
body.detail-view-page .detail-view-notes .notes-filters .note-buttons-second-row .btn-group > *:not(.active):hover {
  background-color: #e6e6e6;
}
body.detail-view-page .detail-view-notes .order-notes {
  overflow-y: auto;
}
body.detail-view-page .detail-view-notes .order-notes .order-note {
  display: flex;
  margin-bottom: 0.5rem;
  border-bottom: #e6e6e6 1px solid;
  background-color: #e2e2e2;
  border-radius: 5px;
  padding: 0.25rem 0;
}
body.detail-view-page .detail-view-notes .order-notes .order-note.collapsed {
  cursor: pointer;
}
body.detail-view-page .detail-view-notes .order-notes .order-note.collapsed .note-content {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
body.detail-view-page .detail-view-notes .order-notes .order-note.expanded .note-content {
  -webkit-line-clamp: initial;
  line-clamp: unset;
  display: unset;
  cursor: unset;
}
body.detail-view-page .detail-view-notes .order-notes .order-note .order-note-icon {
  color: #666666;
  margin-left: 1rem;
  margin-right: 1rem;
  flex-grow: 0;
  font-size: 150%;
}
body.detail-view-page .detail-view-notes .order-notes .order-note .order-note-icon .order-note-email-preview {
  display: none;
  position: absolute;
  right: 10vw;
  width: 90rem;
  bottom: 2vh;
  top: 2vh;
  background-color: #e6e6e6;
  box-shadow: 0 0 5px 0 #222222;
  font-size: 80%;
  z-index: 50;
  overflow: scroll;
}
body.detail-view-page .detail-view-notes .order-notes .order-note .order-note-icon .order-note-email-preview pre {
  margin: 1.5rem 2rem;
  white-space: break-spaces;
}
body.detail-view-page .detail-view-notes .order-notes .order-note .order-note-icon:hover .order-note-email-preview {
  display: block;
  animation: FadeIn 1.5s;
}
@keyframes FadeIn {
  0% {
    opacity: 0;
    width: 0;
  }
  74% {
    opacity: 0;
    width: 0;
  }
  75% {
    opacity: 0;
    width: 90rem;
  }
  100% {
    opacity: 1;
    width: 90rem;
  }
}
body.detail-view-page .detail-view-notes .order-notes .order-note.user-note {
  font-weight: 700;
  border-radius: 5px;
  padding: 1rem 0;
}
body.detail-view-page .detail-view-notes .order-notes .order-note.highlight-note {
  background-color: #ffffcc;
}
body.detail-view-page .detail-view-notes .order-notes .order-note.different-order {
  background-color: #393939;
  color: #f7f7f7;
}
body.detail-view-page .detail-view-notes .order-notes .order-note .note-details {
  display: block;
  color: #666666;
  margin-bottom: 0.75rem;
}
body.detail-view-page .detail-view-notes .order-notes .order-note .note-content {
  margin-bottom: 0;
  white-space-collapse: preserve;
  word-break: break-word;
}
body.detail-view-page .detail-view-notes .order-notes .order-note .note-content.note-important {
  border-top: solid 1px #e7001a;
}
body.detail-view-page .detail-view-notes .order-notes .order-note .note-content.note-todo {
  border-top: solid 1px #3ddc7f;
}
body.detail-view-page .detail-view-notes .order-notes .order-note .note-content.note-important.note-todo {
  border-top-style: dashed;
  border-top-width: 1px;
  border-image: linear-gradient(to right, #e7001a, #3ddc7f) 1;
}
body.detail-view-page .detail-view-notes .order-notes .order-note > span:last-of-type {
  width: 100%;
}
body.detail-view-page .detail-view-notes .order-notes.email-note .order-note {
  display: none;
}
body.detail-view-page .detail-view-notes .order-notes.email-note .order-note.email-note {
  display: flex;
}
body.detail-view-page .detail-view-notes .order-notes.user-note .order-note {
  display: none;
}
body.detail-view-page .detail-view-notes .order-notes.user-note .order-note.user-note {
  display: flex;
}
body.detail-view-page .detail-view-notes .order-notes.system-note .order-note {
  display: none;
}
body.detail-view-page .detail-view-notes .order-notes.system-note .order-note.system-note {
  display: flex;
}
body.detail-view-page .detail-view-notes .order-notes.other-note .order-note {
  display: none;
}
body.detail-view-page .detail-view-notes .order-notes.other-note .order-note.other-note {
  display: flex;
}
body.detail-view-page .order-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  color: #666666;
}
body.detail-view-page .order-details > section {
  margin-bottom: 1.5rem;
  flex: 1 1 auto;
  min-width: 10rem;
}
body.detail-view-page .order-details .increased-visibility {
  color: #666666;
}
body.detail-view-page .order-details .important-text {
  color: #222222;
}
body.detail-view-page .order-details section.order-section-payment .fully-paid,
body.detail-view-page .order-details section.order-section-payment .has-balance,
body.detail-view-page .order-details section.order-section-payment .has-negative-balance {
  padding: 0 0.5rem;
}
body.detail-view-page .order-details section.order-section-payment .has-balance,
body.detail-view-page .order-details section.order-section-payment .has-negative-balance {
  font-weight: 700;
  border-radius: 5px;
  margin: 0 0.5rem;
  display: inline-flex;
  line-height: 1;
}
body.detail-view-page .order-details section.order-section-payment .has-balance {
  background-color: #DD312E;
  color: #FFFFFF;
}
body.detail-view-page .order-details section.order-section-payment .has-negative-balance {
  color: #3ddc7f;
}
body.detail-view-page .order-details section.order-section-payment .transaction {
  display: flex;
  align-items: center;
  background-color: #f9f9f9;
  text-align: center;
  margin-left: 2rem;
  margin-right: 2rem;
}
body.detail-view-page .order-details section.order-section-payment .transaction:nth-child(even) {
  background-color: #f2fafe;
}
body.detail-view-page .order-details section.order-section-payment .transaction span {
  flex: 1 1 20%;
  margin-left: 1rem;
  margin-right: 1rem;
}
body.detail-view-page .order-details section.order-section-payment .transaction span.transaction-small {
  max-width: 5rem;
}
body.detail-view-page .order-details section.order-section-payment .transaction .image {
  height: 2rem;
  width: 2rem;
}
body.detail-view-page .order-details section.order-section-payment .transaction .modal-form-link.rounded-button {
  margin-right: 2rem;
}
body.detail-view-page .order-details .order-section-totals p.spaced-data-row {
  margin-bottom: 0.375rem;
}
body.detail-view-page section.order-section-shipping {
  color: #666666;
}
body.detail-view-page section.order-section-shipping .tracking-details {
  display: none;
}
body.detail-view-page section.order-section-shipping .spaced-data-row {
  margin-left: 2rem;
  margin-right: 2rem;
  margin-bottom: 0.75rem;
}
body.detail-view-page section.order-section-shipping .spaced-data-row .increased-visibility {
  margin-left: 2rem;
}
body.detail-view-page .root-content-before section.shipping .symmetry-sides {
  background-color: transparent;
}
body.detail-view-page .order-holds {
  display: flex;
  flex-flow: row;
  position: relative;
}
body.detail-view-page .order-holds .add-order-hold-form {
  flex: 1 1 40rem;
}
body.detail-view-page .order-holds .current-holds {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow: visible;
}
body.detail-view-page .order-holds .current-holds .order-hold-container {
  position: relative;
  overflow: visible;
}
body.detail-view-page .order-holds .order-hold-information {
  margin-left: 2rem;
  margin-right: 2rem;
}
body.detail-view-page .order-holds .trigger-send-email-modal {
  margin-left: 2rem;
  margin-right: 2rem;
}
body.detail-view-page .order-holds .add-order-hold-form,
body.detail-view-page .order-holds .edit-order-hold-form {
  position: absolute;
  left: 0;
  min-width: 50rem;
  height: auto;
  z-index: 10;
  background-color: #FFFFFF;
  box-shadow: 0 2px 21px -2px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  margin-left: 2rem;
  top: calc(100% - 1.5rem);
  overflow-y: scroll;
  scroll-behavior: smooth;
  scroll-snap-stop: always;
  scroll-snap-type: x mandatory;
  scroll-snap-align: center;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
body.detail-view-page .order-holds .add-order-hold-form::-webkit-scrollbar,
body.detail-view-page .order-holds .edit-order-hold-form::-webkit-scrollbar {
  display: none;
}
body.detail-view-page .order-holds .add-order-hold-form pre,
body.detail-view-page .order-holds .edit-order-hold-form pre {
  overflow: visible;
  word-break: break-word;
  white-space: break-spaces;
}
body.detail-view-page .order-holds .add-order-hold-form {
  background-color: #e6e6e6;
  width: 60rem;
  top: 1.5rem;
}
body.detail-view-page .order-holds .order-hold {
  display: inline-flex;
  align-items: center;
  background-color: #FFFFFF;
  line-height: 2;
  margin-left: 2rem;
  margin-bottom: 1.5rem;
}
body.detail-view-page .order-holds .order-hold span {
  line-height: 1.5;
}
body.detail-view-page .order-holds .order-hold span.order-hold-description {
  margin-bottom: 0.375rem;
  padding-top: 0.75rem;
  margin-right: 2rem;
}
body.detail-view-page .order-holds .order-hold span.order-hold-description div {
  text-transform: capitalize;
  font-weight: 400;
}
body.detail-view-page .order-holds .order-hold span.order-hold-description div,
body.detail-view-page .order-holds .order-hold span.order-hold-description small {
  line-height: 1;
}
body.search-view-page .root-content-before {
  background-color: #222222;
  color: #FFFFFF;
  width: 28rem;
}
body.search-view-page .root .root-content-before,
body.search-view-page .root .root-content-after {
  padding-top: 0;
}
body.search-view-page .root-content-before fieldset,
body.search-view-page .root-content-after fieldset {
  line-height: 2.5;
  color: #e6e6e6;
}
body.search-view-page .root-content-before fieldset.js-field-is-focus label,
body.search-view-page .root-content-after fieldset.js-field-is-focus label {
  color: #FFFFFF;
}
body.search-view-page .root-content-before fieldset .fieldset-input,
body.search-view-page .root-content-after fieldset .fieldset-input {
  background-color: transparent;
}
body.search-view-page .root-content-before fieldset .fieldset-input::after,
body.search-view-page .root-content-after fieldset .fieldset-input::after {
  box-shadow: none;
}
body.search-view-page .root-content-before fieldset .fieldset-input select,
body.search-view-page .root-content-after fieldset .fieldset-input select {
  color: #e6e6e6;
}
body.search-view-page .root-content-before fieldset .fieldset-input select[multiple] option,
body.search-view-page .root-content-after fieldset .fieldset-input select[multiple] option {
  color: #e6e6e6;
}
body.search-view-page .root-content-before fieldset .fieldset-input input,
body.search-view-page .root-content-after fieldset .fieldset-input input,
body.search-view-page .root-content-before fieldset .fieldset-input select,
body.search-view-page .root-content-after fieldset .fieldset-input select {
  border-radius: 4px;
  border: 1px solid #666666;
}
body.search-view-page #advanced-search-form {
  padding-top: 1.5rem;
  background-color: #111111;
}
body.search-view-page .advanced-order-search-filters {
  display: flex;
  flex-wrap: wrap;
  margin-left: 2rem;
  margin-right: 2rem;
  justify-content: space-between;
  gap: 1.5rem 2rem;
}
body.search-view-page .helix-order-filter {
  display: flex;
  flex-direction: column;
  color: #222222;
  background-color: #f9f9f9;
  border-radius: 2px;
  padding: 0.5rem 2rem 0.5rem 0.5rem;
  position: relative;
}
body.search-view-page .helix-order-filter:hover {
  opacity: 0.9;
  text-decoration: none;
}
body.search-view-page .helix-order-filter:hover .filter-remove-icon {
  transition: font-size 100ms ease-in;
  font-size: 2rem !important;
}
body.search-view-page .helix-order-filter .filter-remove-icon {
  transition: font-size 100ms ease-in;
  color: #DD312E;
  position: absolute;
  right: 0;
  top: 0;
}
body.search-view-page .search-results {
  display: grid;
  row-gap: 0.375rem;
  margin-bottom: 1.5rem;
}
body.search-view-page .search-results .search-results-header {
  font-weight: 700;
}
body.search-view-page .search-results .search-results-header .order-by-icon {
  color: #222222;
}
body.search-view-page .search-results .search-results-header .order-by-icon i {
  display: inline-block;
  border-radius: 50%;
  background-color: #CECECE;
  padding: 1px;
}
body.search-view-page .search-results .search-results-header .trigger-search-results-order:hover {
  position: relative;
  overflow: visible;
}
body.search-view-page .search-results .search-results-header .trigger-search-results-order:hover .order-by-icon.js-hidden:first-of-type {
  display: inline-block !important;
  position: absolute;
}
body.search-view-page .search-results .search-results-header .trigger-search-results-order:hover .order-by-icon:not(.js-hidden) svg {
  transform: rotate(180deg);
}
body.search-view-page .search-results .search-results-header > a {
  color: #4E4E4E;
}
body.search-view-page .search-results .search-results-header > a:hover {
  color: #222222;
  text-decoration: none;
}
body.search-view-page .search-results .search-results-header,
body.search-view-page .search-results .search-results-body {
  display: grid;
  column-gap: 2rem;
  background-color: #e6e6e6;
  color: #222222;
  line-height: 3;
}
body.search-view-page .search-results .search-results-header.orders,
body.search-view-page .search-results .search-results-body.orders {
  grid-template-columns: 12rem 10rem 15rem 7rem 7rem 7rem 20rem 15rem minmax(20rem, auto);
}
body.search-view-page .search-results .search-results-header.fitments,
body.search-view-page .search-results .search-results-body.fitments {
  grid-template-columns: 15rem 15rem 10rem 10rem 10rem;
}
body.search-view-page .search-results .search-results-header:hover,
body.search-view-page .search-results .search-results-body:hover {
  background-color: #CECECE;
  text-decoration: none;
}
body.search-view-page .search-results .search-results-header:hover .order-by-icon i,
body.search-view-page .search-results .search-results-body:hover .order-by-icon i {
  background-color: #f9f9f9;
}
body.search-view-page .search-results .search-results-header:focus,
body.search-view-page .search-results .search-results-body:focus {
  text-decoration: none;
}
body.search-view-page .search-results .search-results-header > span,
body.search-view-page .search-results .search-results-body > span,
body.search-view-page .search-results .search-results-header > a,
body.search-view-page .search-results .search-results-body > a {
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
}
body.search-view-page .paginator {
  margin-bottom: 1.5rem;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  line-height: 2;
  align-items: center;
}
body.search-view-page .paginator > span {
  margin-left: 2rem;
  margin-right: 2rem;
  flex: 1 1 auto;
}
body.search-view-page .paginator > span:first-of-type,
body.search-view-page .paginator > span:last-of-type {
  flex-grow: 0;
}
body.search-view-page .search-stats {
  text-align: right;
}
body.search-view-page .root .root-main-content {
  background-color: #FFFFFF;
  padding-top: 0;
}
body.search-view-page #search-link-container {
  display: flex;
}
body.search-view-page #search-link-container #search-predefined-filters {
  margin-left: 2rem;
  margin-right: 2rem;
  flex: 0 0 25%;
}
body.search-view-page #search-link-container #search-predefined-filters form button {
  cursor: pointer;
}
body.search-view-page #search-link-container #search-predefined-filters .symmetry-sides {
  line-height: 3;
}
body.search-view-page #search-link-container #recent-searches {
  position: relative;
  flex-grow: 1;
}
body.search-view-page #search-link-container #recent-searches .clear-recent-searches {
  position: absolute;
  right: 2rem;
  top: 0;
  cursor: pointer;
}
body.search-view-page #search-link-container #recent-searches .recent-searches {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  margin-left: 2rem;
  margin-right: 2rem;
  gap: 1.5rem 2rem;
}
body.search-view-page #search-link-container #recent-searches a.recent-search {
  flex: 1 1 auto;
  flex-wrap: wrap;
  display: flex;
  flex-direction: column;
  background-color: #f7f7f7;
  border-radius: 5px;
  box-shadow: 2px 2px 3px -3px #222;
  transition: all ease-in 100ms;
}
body.search-view-page #search-link-container #recent-searches a.recent-search:hover {
  text-decoration: none;
  box-shadow: 2px 2px 3px -2px #222;
}
body.search-view-page #search-link-container #recent-searches a.recent-search:focus {
  box-shadow: 2px 2px 3px -4px #222;
}
body.search-view-page #search-link-container #recent-searches a.recent-search:active {
  box-shadow: 2px 2px 3px -4px #222;
}
body.search-view-page #search-link-container #recent-searches a.recent-search div.recent-search-header {
  display: flex;
  flex-wrap: nowrap;
  font-weight: 400;
  background-color: #e6e6e6;
  padding: 1rem;
  border-radius: 5px 5px 0 0;
  color: #222222;
  justify-content: space-between;
  align-items: center;
  border-bottom: solid #dbdbdb 1px;
}
body.search-view-page #search-link-container #recent-searches a.recent-search div.recent-search-header span {
  cursor: help;
}
body.search-view-page #search-link-container #recent-searches a.recent-search div.recent-search-header span.status-chip {
  border-radius: 2px;
  margin: 0 0 0 0.5rem;
}
body.search-view-page #search-link-container #recent-searches a.recent-search .recent-search-label {
  padding: 1rem;
}
body.search-view-page .fieldset-range-slider-values {
  display: flex;
  align-items: center;
  margin-left: 2rem;
  margin-right: 2rem;
  margin-bottom: 1.5rem;
  line-height: 3;
  font-size: 80%;
}
body.search-view-page .fieldset-range-slider-values label {
  flex-shrink: 0;
  padding: 0 1rem;
}
body.search-view-page .fieldset-range-slider-values input {
  border: 1px solid #666666;
  border-radius: 4px;
  padding: 0 2rem;
}
body.search-view-page .fieldset-range-slider-values input::-webkit-outer-spin-button,
body.search-view-page .fieldset-range-slider-values input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
body.search-view-page .fieldset-range-slider-values input[type=number] {
  -moz-appearance: textfield;
}
body.search-view-page .fieldset-range-slider {
  margin-bottom: 0.375rem;
}
body.search-view-page .fieldset-range-slider .fieldset-input {
  overflow: visible;
  padding: 1rem;
}
body.search-view-page .fieldset-range-slider .filter-range-slider {
  height: 10px;
}
body.search-view-page .fieldset-range-slider .filter-range-slider.noUi-target {
  border: none;
}
body.search-view-page .fieldset-range-slider .filter-range-slider .noUi-connects {
  background-color: #2D2D2D;
}
body.search-view-page .fieldset-range-slider .filter-range-slider .noUi-connect {
  background-color: #737373;
}
body.search-view-page .fieldset-range-slider .filter-range-slider .noUi-handle {
  height: 18px;
  width: 18px;
  top: -5px;
  right: -9px;
  /* half the width */
  border-radius: 9px;
}
body.search-view-page .fieldset-range-slider .filter-range-slider .noUi-handle::before {
  content: none;
}
body.search-view-page .fieldset-range-slider .filter-range-slider .noUi-handle::after {
  content: none;
}
body.search-view-page .fieldset-range-slider .filter-range-slider .noUi-tooltip {
  display: none;
  font-size: 90%;
  padding: 0 2px;
  border: none;
}
body.search-view-page .fieldset-range-slider .filter-range-slider .noUi-active .noUi-tooltip {
  display: block;
}
body.search-view-page aside.root-content-before .acc-key .acc-key-header {
  padding: 2rem 1.5rem;
  background-color: #2D2D2D;
  font-size: 125%;
  margin-bottom: 2rem;
  border-bottom: none;
}
body.search-view-page aside.root-content-before .acc-key button.acc-key-header {
  width: 100%;
  text-align: left;
  font-weight: 400;
}
body.search-view-page aside.root-content-before .acc-key button.acc-key-header:focus {
  background-color: #404040;
}
body.search-view-page aside.root-content-before .acc-key.opened .acc-key-header {
  margin-bottom: 0;
}
body.search-view-page header {
  position: sticky;
  top: 0;
  margin-bottom: 1.5rem;
  background-color: #222222;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
}
body.search-view-page .current-filters-actions {
  flex: 0 0 auto;
}
body.search-view-page .current-filters-actions > * {
  margin-left: 1.5rem;
}
body.search-view-page .current-filters-actions > *:last-child {
  margin-right: 1.5rem;
}
body.search-view-page .current-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  padding: 1.5rem 2rem;
  align-items: center;
  flex-grow: 1;
}
body.search-view-page .current-filters .search-filter {
  display: flex;
  color: #222222;
  background-color: #f9f9f9;
  border-radius: 2px;
  padding: 0.5rem;
  transition: opacity 100ms ease-in;
}
body.search-view-page .current-filters .search-filter:hover {
  transition: opacity 100ms ease-in;
  opacity: 0.9;
  text-decoration: line-through;
}
body.search-view-page .current-filters .search-filter .filter-remove-icon {
  color: #DD312E;
  font-size: 2rem !important;
  margin-left: 1rem;
  top: 0;
}
body.search-view-page .root-content-after {
  max-width: 28rem;
  background-color: #CECECE;
  box-shadow: 0 0 5px -1px;
  z-index: 2;
  display: none;
}
body.search-view-page .symmetry-sides {
  background-color: transparent;
}
body.search-view-page .symmetry-sides .rounded-button {
  line-height: 1.5;
}
body.search-view-page .spacing-row {
  gap: 1.5rem 2rem;
  display: flex;
}
body.search-view-page .invoice-dev-helper .invoice-order-dev-details {
  display: none;
  position: absolute;
  background-color: #FFFFFF;
  color: #222222;
  top: 25%;
  right: 25%;
  left: 25%;
  padding: 2rem;
  bottom: 25%;
  overflow: scroll;
}
body.search-view-page .invoice-dev-helper:hover .invoice-order-dev-details {
  display: block;
}
body.search-view-page fieldset.filter-filter {
  position: sticky;
  top: 0;
  background-color: #222222;
  margin: 0 0 1rem 0;
  padding: 0 2rem 1.5rem 2rem;
  z-index: 100;
  box-shadow: 0 0 3px 0 #FFFFFF;
}
body.search-view-page .advanced-search-form-buttons {
  position: sticky;
  bottom: 0;
  background-color: #222222;
  z-index: 100;
  display: flex;
  flex-direction: column;
  padding-top: 1.5rem;
  box-shadow: 0 0 3px 0 #FFFFFF;
}
body.search-view-page .order-view-history {
  margin-top: 2rem;
}
body.search-view-page .order-view-history .btn-group > * {
  background-color: #CECECE;
  color: #666666 !important;
  border-color: #e6e6e6;
}
body.search-view-page .order-view-history .btn-group > :not(.active) {
  background-color: #CECECE;
}
body.search-view-page .order-view-history .btn-group > .active {
  background-color: #e6e6e6;
  color: #666666 !important;
}
body.search-view-page .order-view-history .btn-group > *:not(.active):hover {
  background-color: #e6e6e6;
}
#bulkops {
  /* order id list */
  /* email preview */
  /* log area */
}
#bulkops #operation-feedback {
  min-height: 0.4rem;
}
#bulkops textarea {
  resize: none;
  width: 100%;
}
#bulkops #email-sample-body {
  height: 20rem;
  display: block;
  overflow-y: auto;
  margin: 2rem;
  width: 100%;
}
#bulkops .acc-key-header .symmetry-sides {
  margin-bottom: 0;
}
#bulkops .acc-key-content {
  padding-top: 0;
}
#bulkops .bulk-log:empty::before {
  content: 'The log is empty';
}
#bulkops .bulk-log {
  padding: 2rem;
  background-color: #FFFFFF;
  max-height: 20rem;
  overflow-y: auto;
}
#bulkops fieldset .error,
#bulkops .fieldset .error {
  color: #000000;
  background-color: #ff6666;
}
body.customs .root-content-before {
  width: 28rem;
}
body.customs .hover-row {
  background-color: #ffffff;
}
body.customs .hover-row:hover {
  background-color: #cccccc;
}
body.customs .hover-row:nth-child(odd) {
  background-color: #dddddd;
}
body.customs .hover-row:nth-child(odd):hover {
  background-color: #bbbbbb;
}
body.customs .invoice-list {
  margin-left: 2rem;
  margin-right: 2rem;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
body.customs .invoice-list .button {
  line-height: 1;
  margin: 1rem 0;
  padding: 1rem;
}
body.customs .invoice-list td {
  padding: 0.5rem;
}
body.customs .invoice-list td:nth-child(2):nth-child(3) {
  text-align: right;
}
body.customs .invoice-list .invoice-list-element {
  display: flex;
  color: #000000;
}
body.customs .invoice-list .invoice-list-element > div {
  flex-basis: 15%;
  align-items: center;
}
body.customs .invoice-list .invoice-list-element > div.medium {
  flex-basis: 40%;
}
body.customs .invoice {
  max-width: 200rem;
  min-width: 165rem;
  overflow-x: auto;
}
body.customs .invoice .invoice-title {
  margin-left: 2rem;
  margin-right: 2rem;
  display: flex;
  align-items: baseline;
}
body.customs .invoice .invoice-title .identifier {
  width: 10rem;
  font-size: 2rem;
  font-weight: 800;
}
body.customs .invoice .invoice-title #reference {
  width: 40rem;
}
body.customs .invoice .invoice-title .followup-commands {
  display: flex;
  flex-direction: row;
}
body.customs .invoice .invoice-title .followup-commands * {
  margin-right: 2rem;
}
body.customs .invoice .invoice-title .followup-commands:empty + #add-to-invoice {
  display: block;
}
body.customs .invoice .invoice-title #add-to-invoice {
  display: none;
}
body.customs .invoice .invoice-title .print {
  margin-left: auto;
}
body.customs .invoice .invoice-list-names > * {
  border: 1px solid #aaaaaa;
}
body.customs .invoice .section {
  margin-bottom: 1rem;
}
body.customs .invoice .section .section-header {
  background-color: #cccccc7f;
  color: #000000;
  box-shadow: none;
  font-weight: 800;
  align-items: baseline;
}
body.customs .invoice .section .section-header > * {
  min-height: initial;
}
body.customs .invoice .section .section-header > *:not(:first-child) {
  box-shadow: 0 0;
}
body.customs .invoice .section .section-header > *:last-child {
  box-shadow: 1px 0 #aaaaaa;
}
body.customs .invoice .section > :not(:first-child) {
  clip-path: inset(0 -1px -1px -1px);
}
body.customs .invoice .section > :first-child {
  box-shadow: 0 -1px #aaaaaa;
}
body.customs .invoice .section > :last-child {
  box-shadow: 0 1px #aaaaaa;
}
body.customs .invoice .invoice-row {
  margin-left: 2rem;
  margin-right: 2rem;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  font-weight: 400;
}
body.customs .invoice .invoice-row > * {
  flex-basis: 10%;
  flex-grow: 1;
  padding: 0.5rem 2rem;
  box-shadow: -1px 0 #aaaaaa;
  min-height: 4rem;
}
body.customs .invoice .invoice-row > *:last-child {
  box-shadow: -1px 0 #aaaaaa, 1px 0 #aaaaaa;
}
body.customs .invoice .invoice-row > :first-child(1) {
  max-width: 5rem;
  padding-left: 1rem;
}
body.customs .invoice .invoice-row > :nth-child(5) {
  flex-basis: 40%;
}
body.customs .invoice .invoice-row > :nth-child(2):nth-child(4),
body.customs .invoice .invoice-row > :nth-child(6):nth-child(8) {
  max-width: 16rem;
}
body.customs .invoice .invoice-row > :nth-child(4),
body.customs .invoice .invoice-row > :nth-child(7) {
  text-align: center;
}
body.customs .invoice .invoice-row > :last-child {
  text-align: right;
}
body.customs .invoice .invoice-row fieldset,
body.customs .invoice .invoice-row .fieldset {
  margin: 0 auto;
  line-height: 2;
}
body.customs .invoice .invoice-row fieldset input,
body.customs .invoice .invoice-row .fieldset input {
  text-align: center;
}
body.customs .invoice .invoice-row fieldset input.input-changed,
body.customs .invoice .invoice-row .fieldset input.input-changed {
  background-color: #3FA9F5;
}
body.customs .invoice .invoice-row input.comment {
  text-align: left;
}
body.customs .invoice .invoice-row .invoice-button {
  padding: 0 1rem;
  margin: 0 auto;
  line-height: 2;
  width: 3rem;
  height: 3rem;
}
body.customs .invoice .invoice-row .missing-price {
  background-color: #ff0000;
}
body.customs .invoice .error-required-is-blank {
  background: red;
}
body.customs .invoice .hide {
  display: none;
}
body.customs .invoice .items-value-table {
  border-radius: 0.5rem;
  border-collapse: collapse;
  margin-left: 2rem;
  margin-right: 2rem;
}
body.customs .invoice .items-value-table th {
  background-color: #cccccc7f;
  color: #000000;
  font-weight: 800;
}
body.customs .invoice .items-value-table * {
  border: 1px solid #aaaaaa;
  text-align: center;
}
body.customs .invoice .invoice-form-data > * {
  flex-basis: 50%;
  margin: 0;
  padding: 0 2rem;
}
body.customs .invoice textarea {
  resize: none;
}
body.customs .delete-from-invoice {
  background-color: #ff0000;
  color: #ffffff;
}
body.customs .add-item-notes,
body.customs .add-all-item-notes {
  background-color: #3FA9F5;
  color: #ffffff;
  float: right;
}
body.customs .printable-version {
  display: none;
}
@media print {
  body.customs {
    background-color: #FFFFFF;
  }
  body.customs .root-content-before,
  body.customs .root-navigation,
  body.customs div.invoice,
  body.customs header {
    display: none;
  }
  body.customs .root {
    margin-left: 0;
    position: initial;
  }
  body.customs .root .root-main-content {
    height: unset;
  }
  body.customs .printable-version {
    display: initial;
  }
  body.customs div.page {
    height: 101vh;
    margin: 1px;
  }
  body.customs .page-body {
    width: 100%;
    position: absolute;
  }
  body.customs html {
    font-size: 75%;
  }
  @page {
    margin: 10mm;
    width: 8.5in;
    height: 11in;
  }
  body.customs body {
    margin: 0;
  }
  body.customs .title {
    font-size: 32px;
  }
  body.customs table {
    border-collapse: collapse;
    margin-bottom: 1rem;
    width: 100%;
  }
  body.customs table.content tr {
    break-inside: avoid;
  }
  body.customs td {
    padding: 0 1mm;
  }
  body.customs th {
    background-color: #dddddd;
  }
  body.customs tr.align-top,
  body.customs td.align-top {
    vertical-align: top;
  }
  body.customs .bordered td,
  body.customs .bordered th {
    border: 0.5mm solid #000000;
  }
  body.customs .bordered td.no-border,
  body.customs .bordered th.no-border {
    border: none;
  }
  body.customs .break {
    line-break: anywhere;
  }
  body.customs .header-top > *:nth-child(2) {
    text-align: center;
  }
  body.customs .header-top > :last-child {
    text-align: right;
  }
  body.customs tr.header-row-thirds > * {
    width: 35%;
  }
  body.customs tr.header-row-thirds > :last-child {
    width: 30%;
  }
  body.customs tr.header-row-quarters > * {
    width: 25%;
  }
  body.customs tr.header-row-quarters-center > * {
    width: 25%;
    text-align: center;
  }
  body.customs .tracking {
    text-align: center;
  }
  body.customs .sku-area td {
    width: 15%;
  }
  body.customs .sku-area td:nth-child(2) {
    width: 30%;
  }
  body.customs .sku-area td:nth-child(5) {
    width: 5%;
  }
  body.customs .sku-area td:nth-child(3):nth-child(5) {
    text-align: center;
  }
  body.customs .sku-area td:nth-child(n+6) {
    width: 10%;
    text-align: right;
  }
  body.customs .cusma-sku-area td {
    width: 15%;
  }
  body.customs .cusma-sku-area td:nth-child(2) {
    width: 30%;
  }
  body.customs .cusma-sku-area td:nth-child(3) {
    width: 20%;
  }
  body.customs .cusma-sku-area td:nth-child(4),
  body.customs .cusma-sku-area td:nth-child(5) {
    width: 10%;
    text-align: center;
  }
  body.customs .footer-area .split > :first-child {
    float: left;
    width: 20%;
  }
  body.customs .footer-area .split > :last-child {
    float: right;
    width: 75%;
  }
  body.customs .footer-area th {
    background-color: #dddddd;
  }
  body.customs .footer-area td {
    height: 1cm;
  }
}
body.deposco .root-content-before {
  width: 28rem;
}
body.deposco .workaround-fieldset {
  height: 1px;
  width: 1px;
  visibility: hidden;
}
body.deposco .workaround-fieldset input {
  height: 1px;
  width: 1px;
}
body.deposco .workaround-fieldset.float-left {
  float: left;
}
body.deposco .highlight {
  font-weight: 600;
  margin: 0 2rem;
}
body.deposco .actions {
  margin-left: auto;
  float: right;
}
body.deposco .actions form {
  float: right;
}
body.deposco .product-image {
  width: 4.8rem;
  height: 4.8rem;
}
body.deposco .product-image:hover {
  transform-origin: left center;
  transform: scale(5);
  z-index: 200;
  border: 0.1rem solid #dee2e6;
  border-radius: 0.25rem;
}
body.deposco .order-container.expanded .container-header {
  background-color: #cbf7ff;
}
body.deposco .order-container.compact .order-header {
  background-color: #cbf7ff;
}
body.deposco .container-header {
  display: flex;
  align-items: center;
}
body.deposco .container-items {
  background-color: #ffffff;
}
body.deposco .container-items td:first-of-type {
  width: 8rem;
}
body.deposco .container-items td:nth-of-type(2) {
  width: 10rem;
}
body.deposco .order-header {
  padding: 2rem 1rem;
}
body.deposco .order-container {
  width: 130rem;
}
body.deposco .container-items {
  width: 100%;
}
body.deposco .order-header,
body.deposco .container-header,
body.deposco .container-info,
body.deposco .container-items tr {
  box-shadow: 1px 1px #cccccc inset, -1px 0 #cccccc inset;
}
body.deposco .order-container > :last-child {
  box-shadow: 1px 1px #cccccc inset, -1px -1px #cccccc inset;
}
body.deposco .container-header,
body.deposco .container-info,
body.deposco .container-items td {
  padding: 1rem;
}
body.deposco .container-not-found {
  background-color: #fec1b4;
  border: 1px solid #cccccc;
  padding: 1rem;
  width: 100rem;
}
body.deposco .spacer {
  height: 10rem;
}
.dropshipper .page-title {
  width: 100%;
  text-align: center;
  font-size: 4rem;
  font-weight: 400;
}
.dropshipper .timestamp {
  font-weight: bold;
}
.dropshipper .quick-filter {
  border: 0.1rem solid #000000;
  border-radius: 0.5rem;
}
.dropshipper .quick-filter.active-filter {
  color: #ffffff;
  background-color: #333333;
}
.dropshipper .quick-filter.active-filter:hover {
  background-color: #222222;
}
.dropshipper .quick-filter:not(.active-filter) {
  background-color: #ffffff;
  color: #000000 !important;
}
.dropshipper .quick-filter:not(.active-filter):hover {
  background-color: #666666;
}
.dropshipper .highlight-quantity {
  background-color: #ffeeba;
}
.dropshipper .btn-sm {
  line-height: 2;
}
.dropshipper .shipment-header {
  background-color: #0000000d;
  box-shadow: inset 0 1px #ccc;
  padding-top: 2rem;
}
.dropshipper .opened .shipment-header {
  background-color: #f2f2f2;
}
.dropshipper .shipment-action-cancel {
  background-color: #ff0000;
  color: #000000;
}
.dropshipper .shipment-action {
  white-space: nowrap;
}
.dropshipper .ship-created,
.dropshipper .ship-updated {
  cursor: help;
}
.dropshipper .address-card {
  border: 0.1rem solid #cccccc;
  border-radius: 0.5rem;
}
.dropshipper .fieldset-checkbox {
  margin-right: 0;
  display: flex;
  margin-top: 0.2rem;
}
.dropshipper .inline-text-badge {
  background-color: #ff0000;
  color: #ffffff;
  display: inline;
  padding: 0.7rem 1rem;
  margin-left: 1rem;
  border-radius: 1rem;
}
.dropshipper .padding-left {
  padding-left: 2rem;
}
.dropshipper .padding-right {
  padding-right: 2rem;
}
.hold-chip {
  padding: 0.375rem 1rem;
  font-weight: 400;
  user-select: none;
  border-radius: 2px;
}
.hold-chip.chip-hard {
  background-color: #DD312E;
  color: #e6e6e6;
}
.hold-chip.chip-soft {
  background-color: #ffe34a;
}
/**
  * Helix App - Less main _source file.
  *
  * Main less file for helix app.
  *
  * This is namespaced, so it will only affect what's under the `helix` body class.
  */
body.helix {
  /**
Main helix less file!
This SHOULD contain only global helix UI stuff.. Custom views should be in sub-files.

todo: dispatch contents to relevant files. this makes finding styles easier and keeps stuff well name-spaced
 */
  /**
Payment manager v2 styles
 */
  /**
Old styles
 */
}
body.helix .root .root-content-before,
body.helix .root .root-content-after {
  padding-top: 0;
}
body.helix #order-search-form {
  position: sticky;
  top: 0;
  background-color: #111111;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding-top: 1.5rem;
  margin-bottom: 1.5rem;
}
body.helix #order-search-form fieldset {
  flex: 1 1 auto;
}
body.helix textarea {
  resize: block;
}
body.helix *[class*="toggle-"],
body.helix *[class*="trigger-"] {
  cursor: pointer;
}
body.helix .spaced-data-row {
  display: flex;
  justify-content: space-between;
}
body.helix .icon-container {
  background-color: #e6e6e6;
}
body.helix .icon-container:hover {
  background-color: #FFFFFF;
}
body.helix .icon-container.circular {
  font-size: 1.6rem;
}
body.helix .nyi-faded {
  opacity: 0.5;
  cursor: not-allowed;
}
body.helix .nyi-faded button {
  cursor: not-allowed !important;
}
body.helix .helix-help-section {
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  color: #222222;
  margin-left: 2rem;
  margin-right: 2rem;
  margin-bottom: 1.5rem;
}
body.helix .helix-help-section .helix-help-page {
  margin-left: 2rem;
  margin-right: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem 2rem;
  margin-bottom: 1.5rem;
}
body.helix .helix-help-section .helix-help-page .helix-help-shortcut {
  flex: 1 1 45%;
  display: flex;
  justify-content: space-between;
}
body.helix .helix-help-section .helix-help-page .helix-help-shortcut:hover {
  background-color: #f9f9f9;
}
body.helix.order-create .new-order-product-image {
  height: 15rem;
  margin-left: 2rem;
  margin-right: 2rem;
  width: auto;
  aspect-ratio: 1;
  max-width: 25vw;
}
body.helix.order-create .helix-new-order-item {
  background-color: #FFFFFF;
  margin: 0 2rem 1.5rem 2rem;
  border-radius: 3px;
  justify-content: space-evenly;
}
body.helix.order-create #new-order-add-sku-form-container .product-data-box {
  max-width: 40rem;
}
body.helix.order-create .product-data-box {
  padding: 1.5rem 0;
}
body.helix.order-create .helix-new-order-website-logo {
  margin: 0 0 1.5rem 2rem;
  align-self: center;
}
body.helix.order-create .old-price {
  color: #2D2D2D;
  text-decoration: line-through;
  font-size: 90%;
}
body.helix.order-create .special-price {
  color: #DD312E;
  font-size: 120%;
  font-weight: 700;
}
body.helix.order-create .price-box {
  display: flex;
  flex-direction: column;
}
body.helix.order-create #helix-new-order-items-list .item-static-column {
  align-items: center;
  justify-content: center;
  max-width: 15rem;
  aspect-ratio: 1;
}
body.helix.order-create #helix-new-order-items-list .trigger-new-order-delete-item {
  color: #802a28;
}
body.helix.order-create form#helix-create-new-order-form {
  margin-bottom: 4.5rem;
}
body.helix.order-create .post-office-id.fieldset-disabled {
  display: none;
}
body.helix.order-create .new-order-shipping-methods-header {
  display: flex;
  justify-content: center;
}
body.helix.order-create .new-order-shipping-methods-header a.button {
  width: 100%;
}
body.helix.order-create #new-order-shipping {
  margin-bottom: 1.5rem;
}
body.helix i.image.item-policy-icon {
  width: 3rem;
  height: 3rem;
}
body.helix i.image.item-fitment-icon {
  width: 3rem;
  height: 3rem;
}
body.helix i.image.item-fitment-icon.positive {
  color: #149702;
}
body.helix i.image.item-fitment-icon.negative {
  color: #e30007;
}
body.helix hr.spacer-big {
  height: 0;
  margin-bottom: 4.5rem;
}
body.helix hr.spacer {
  height: 0;
  margin-bottom: 3rem;
}
body.helix .help-icon {
  cursor: help;
  color: #3FA9F5;
}
body.helix .helix-version {
  font-size: 1rem;
  text-align: right;
  margin-left: 2rem;
  margin-right: 2rem;
}
body.helix .linus-django-toasts-container {
  font-size: 120%;
}
body.helix .linus-django-toasts-container .toast {
  width: 25rem;
}
body.helix .payment-manager-transactions .transaction-data {
  display: grid;
  column-gap: 2rem;
  row-gap: 2rem;
  grid-template-columns: repeat(3, 2fr) 3fr repeat(4, 1fr) 2fr 2fr 1fr;
  align-items: center;
  padding: 0 2rem;
}
body.helix .payment-manager-transactions .transaction-data i.image {
  height: 2rem;
  width: 2rem;
}
body.helix .payment-manager-transactions div.transaction-data {
  background-color: #222222;
  font-weight: 700;
  line-height: 3;
}
body.helix .payment-manager-transactions ul {
  margin-bottom: 1.5rem;
  padding: 0;
}
body.helix .payment-manager-transactions ul li {
  list-style: none;
  position: relative;
  background-color: #222222;
}
body.helix .payment-manager-transactions ul li:nth-of-type(odd) {
  background-color: #363636;
}
body.helix .payment-manager-transactions ul li input[type="checkbox"],
body.helix .payment-manager-transactions ul li input[type="radio"] {
  visibility: hidden;
  width: 0;
  height: 0;
  position: absolute;
}
body.helix .payment-manager-transactions ul li input[type="checkbox"]:checked + label,
body.helix .payment-manager-transactions ul li input[type="radio"]:checked + label {
  background-color: #f9f9f9;
  color: #222222;
  font-weight: 400;
  transition: all ease-in 200ms;
}
body.helix .payment-manager-transactions ul li label.transaction-data {
  cursor: pointer;
  transition: all ease-in 200ms;
  background-color: transparent;
}
body.helix .payment-manager-transactions ul li label.transaction-data:hover {
  background-color: #2D2D2D;
}
body.helix .transaction-actions {
  display: flex;
  min-width: 80rem;
  max-width: 150rem;
  padding-top: 1.5rem;
  min-height: 40rem;
  margin: 0 auto 1.5rem auto;
}
body.helix .transaction-actions aside#payment-actions-list {
  flex: 0 0 20rem;
  display: flex;
  flex-direction: column;
  margin-left: 1rem;
  padding-top: 1.5rem;
}
body.helix .transaction-actions aside#payment-actions-list form {
  display: flex;
}
body.helix .transaction-actions aside#payment-actions-list button {
  width: 100%;
  margin-left: 1rem;
  border-radius: 0;
  margin-bottom: -1px;
}
body.helix .transaction-actions aside#payment-actions-list button:first-child {
  border-radius: 2px 0 0 0;
}
body.helix .transaction-actions aside#payment-actions-list button:last-child {
  border-radius: 0 0 0 2px;
}
body.helix .transaction-actions aside#payment-actions-list button.current-action {
  background-color: rgba(255, 255, 255, 0.1);
  color: #3FA9F5 !important;
}
body.helix .transaction-actions .helix-payment-manager-action-content #payment-manager-form-container {
  height: 100%;
  background-color: #484848;
  padding-top: 1.5rem;
  border-radius: 5px;
  margin-right: 2rem;
}
body.helix .transaction-actions .helix-payment-manager-action-content #payment-manager-form-container form {
  height: 100%;
}
body.helix .transaction-actions .helix-payment-manager-action-content #payment-manager-form-container h4 {
  margin-left: 2rem;
  margin-right: 2rem;
}
body.helix .helix-payment-manager-action-content fieldset.fieldset-inline label {
  max-width: 14rem;
}
body.helix .helix-payment-manager-action-content fieldset.fieldset-inline .fieldset-help {
  padding-left: 14rem;
}
body.helix .helix-payment-manager-action-content .set-transaction-action-amount-value {
  color: #e6e6e6;
}
body.helix .helix-payment-manager-action-content #payment-manager-transaction-verification-container {
  justify-content: flex-start;
  align-items: center;
}
body.helix .helix-payment-manager-action-content #payment-manager-transaction-verification-container span.status-chip {
  margin-bottom: 1.5rem;
}
body.helix .helix-payment-manager .helix-payment-manager-action-content {
  flex: 1 1 0;
}
body.helix .helix-payment-manager #new-transaction-actions-list {
  margin-bottom: 1.5rem;
}
body.helix .helix-payment-manager #new-transaction-actions-list button {
  margin-left: 2rem;
}
body.helix .helix-payment-manager .fieldset-fixed-value {
  color: #FFFFFF;
}
body.helix .helix-payment-manager .payment-manager-transactions-list {
  width: 100%;
  margin-left: 2rem;
  margin-right: 2rem;
  text-align: center;
}
body.helix .helix-payment-manager .payment-manager-transactions-list thead,
body.helix .helix-payment-manager .payment-manager-transactions-list .helix-form-column-header {
  line-height: 2;
  font-weight: 700;
  background-color: #F2F2F2;
  color: #AEAEAE;
  border-bottom: #333333 2px solid;
}
body.helix .helix-payment-manager .payment-manager-transactions-list tbody tr,
body.helix .helix-payment-manager .payment-manager-transactions-list .helix-form-column-data-row {
  flex: 1 1 auto;
  line-height: 3;
  color: #666666;
  background-color: #FFFFFF;
  margin-bottom: 0.375rem;
}
body.helix .helix-payment-manager .payment-manager-transactions-list tbody tr:nth-child(odd),
body.helix .helix-payment-manager .payment-manager-transactions-list .helix-form-column-data-row:nth-child(odd) {
  background-color: #e6e6e6;
}
body.helix .hidden-radio-submit-button {
  opacity: 0;
  position: absolute;
}
body.helix .helix-cc-number-with-icon {
  position: relative;
}
body.helix .helix-cc-number-with-icon .helix-cc-icon {
  display: none;
  position: absolute;
  right: 2rem;
  margin: 0 2rem 1.5rem 0;
  z-index: 20;
  align-self: center;
}
body.helix .helix-cc-number-with-icon.mastercard .helix-cc-icon-mc,
body.helix .helix-cc-number-with-icon.visa .helix-cc-icon-visa,
body.helix .helix-cc-number-with-icon.amex .helix-cc-icon-amex {
  display: block;
}
body.helix form#helix-order-edit-addresses-form .helix-order-edit-addresses-form-billing,
body.helix form#helix-order-edit-addresses-form .helix-order-edit-addresses-form-shipping {
  min-width: 35rem;
}
body.helix form#helix-order-edit-addresses-form .copy-shipping-to-billing-address,
body.helix form#helix-order-edit-addresses-form .copy-billing-to-shipping-address {
  font-size: calc(100% + 0.2rem + 0.2rem) !important;
  cursor: pointer;
}
body.helix form#helix-order-email-manager-form {
  flex: 1 1 70%;
}
body.helix .helix-email-manager #email-templates-list {
  flex: 0 0 25%;
}
body.helix .helix-email-manager .acc {
  background-color: #FFFFFF;
}
body.helix .helix-email-manager .acc p.modal-form-element.current-selection {
  -webkit-box-shadow: inset -15px 0px 5px -10px #363636;
  box-shadow: inset -15px 0px 5px -10px #363636;
}
body.helix .helix-email-manager .acc i.material-icons {
  color: #222222;
}
body.helix .helix-email-manager .acc .acc-key-content {
  background-color: #F2F2F2;
}
body.helix form#helix-rma-create-form .rma-create-label-cost-estimation-container {
  max-width: 32rem;
}
body.helix form#helix-rma-create-form .rma-items-list-container {
  margin-bottom: 1.5rem;
}
body.helix form#helix-rma-create-form .detail-item {
  background-color: #CECECE;
  margin-bottom: 0;
}
body.helix form#helix-rma-create-form .detail-item:nth-child(odd) {
  background-color: #F2F2F2;
}
body.helix form#helix-rma-create-form .detail-item .item-images-container {
  margin-left: 2rem;
}
body.helix .protection-logo-image {
  height: 1rem;
}
body.helix .protection-shield-icon {
  height: 4rem;
  font-size: 3rem;
}
body.helix .protection-shield-icon-small {
  height: 2rem;
}
body.helix .item-product-protection-line {
  display: flex;
}
body.helix .item-product-protection-line.align-right {
  float: right;
}
body.fitment #recent-fitment-decisions .symmetry-sides:first-of-type {
  background-color: #FFFFFF;
  color: #000000;
}
body.fitment .detail-item-verification {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  align-items: inherit;
}
body.fitment .detail-item {
  grid-template-columns: 4fr 2fr;
}
body.fitment .item-highlight {
  background-color: #FFFFFF;
}
body.fitment .positive-action {
  background-color: #1d921c;
  color: #FFFFFF;
  border-color: #1d921c;
}
body.fitment .negative-action {
  background-color: #cd000d;
  color: #FFFFFF;
  border-color: #cd000d;
}
body.fitment .undecided {
  color: #cd000d;
}
body.fitment .undecided-pending {
  color: #999999;
}
body.fitment .search-manufacturer-totals {
  float: left;
  min-width: 20rem;
  display: flex;
  flex-direction: column;
}
body.fitment .search-manufacturer-totals div,
body.fitment .search-manufacturer-totals a {
  display: flex;
  flex-direction: row;
}
body.fitment .search-manufacturer-totals div span:nth-child(1),
body.fitment .search-manufacturer-totals a span:nth-child(1) {
  flex-basis: 60%;
}
body.fitment .search-manufacturer-totals div span:nth-child(2),
body.fitment .search-manufacturer-totals a span:nth-child(2) {
  flex-basis: 10%;
  text-align: right;
}
body.fitment .search-manufacturer-totals div span:nth-child(3),
body.fitment .search-manufacturer-totals a span:nth-child(3) {
  flex-basis: 30%;
  text-align: right;
}
body.fitment #remove-fitment-holds-button {
  background-color: #222222;
  color: #FFFFFF;
}
.pomanager.padding-left {
  padding-left: 2rem;
}
.pomanager.padding-right {
  padding-right: 2rem;
}
.pomanager .fully-received {
  background-color: #c6ffce;
}
body.returnsmanager .rma-detail {
  display: flex;
}
body.returnsmanager .rma-detail > div {
  flex-basis: 25%;
}
body.returnsmanager fieldset.fieldset-inline label,
body.returnsmanager .fieldset.fieldset-inline label {
  word-break: break-word;
}
body.returnsmanager fieldset.fieldset-inline {
  margin: 0;
}
body.returnsmanager fieldset.fieldset-inline .fieldset-input {
  padding-right: 0;
}
body.returnsmanager .root-content-before,
body.returnsmanager .root-content-after {
  width: 28rem;
}
body.skucreator textarea {
  resize: none;
}
body.sku-info-app {
  /**
Styles specific to the SkuInfo app.
 */
  /**
Height of the image + selected details + print area
 */
  /**
 * Styles used to display the SkuInfo search results table.
 *
 * @author Edoardo Facchinelli <silpheel@gmail.com>
 */
  /**
Hover-zoom-able image thumbnail, with state swatch on the left.
 */
  /* refactor */
}
body.sku-info-app #search-options .expanded {
  display: none;
  margin-bottom: 2rem;
}
body.sku-info-app #search-options .expanded .flex-item {
  flex-basis: 25%;
}
body.sku-info-app #search-options.show-options .expanded {
  display: block;
}
body.sku-info-app #selected-details {
  height: 31rem;
}
body.sku-info-app #selected-details .details-left {
  width: 25rem;
}
body.sku-info-app #selected-details .details-left > :first-child {
  border: 0.1rem solid #dee2e6;
}
body.sku-info-app #selected-details .details-left .status-row .flex-item {
  margin-left: 0;
}
body.sku-info-app #selected-details .details-left .status-row .flex-item fieldset {
  margin-left: 1rem;
  margin-right: 1rem;
}
body.sku-info-app #selected-details .details-left .status-row .flex-item input {
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
}
body.sku-info-app #selected-details .details-right {
  width: 29rem;
  margin-left: 2rem;
}
body.sku-info-app #selected-details .details-right > div > * {
  display: inline-block;
}
body.sku-info-app #selected-details .details-right > div > :first-child {
  width: 10rem;
  margin-right: 1rem;
  text-align: right;
}
body.sku-info-app #selected-details .details-right > div > :last-child {
  width: 18rem;
  white-space: nowrap;
}
body.sku-info-app #selected-details .details-right > div > :last-child > .float-right {
  float: right;
}
body.sku-info-app #selected-details i.quick-search {
  display: inline-block;
  background-color: #999999;
  color: #ffffff;
  border-radius: 0.9rem;
  height: 1.8rem;
  width: 1.8rem;
  padding-left: 0.2rem;
  padding-top: 0.2rem;
  margin-top: -0.2rem;
}
body.sku-info-app #selected-details i.quick-search:hover {
  cursor: pointer;
}
body.sku-info-app #selected-details .selected-product-image {
  width: 25rem;
  height: 25rem;
}
body.sku-info-app #selected-details .selected-product-image img {
  width: 25rem;
  height: 25rem;
  text-align: center;
  margin: 0.5rem;
  padding: 0.5rem;
}
body.sku-info-app #selected-details .selected-product-text {
  width: 95%;
  margin: 0.5rem 0.5rem 0.5rem 1.5rem;
}
body.sku-info-app #selected-details .selected-product-description {
  font-weight: 600;
  font-size: large;
  min-height: 5rem;
}
body.sku-info-app #selected-details .selected-product-details .flex-row .flex-item:nth-child(1) {
  color: #999999;
}
body.sku-info-app #search-results {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  position: relative;
}
body.sku-info-app #search-results .flex-table-body {
  height: 100%;
}
body.sku-info-app div.thumbnail-state-container {
  display: flex;
  align-items: center;
}
body.sku-info-app div.thumbnail-state-container div.thumbnail-state {
  width: 0.5rem;
  height: 4.8rem;
  margin-right: 0.5rem;
}
body.sku-info-app div.thumbnail-state-container div img.thumbnail:hover {
  transform-origin: left center;
  transform: scale(3);
  z-index: 200;
  border: 0.1rem solid #dee2e6;
  border-radius: 0.25rem;
}
body.sku-info-app div.thumbnail-state-container .thumbnail {
  width: 4.8rem;
  height: 4.8rem;
}
body.sku-info-app .result-count-panel {
  align-items: baseline;
}
body.sku-info-app .result-count-panel .btn {
  margin: 0.5rem;
}
body.sku-info-app [data-tab='summary'] .dc-selector-per-tab {
  display: none;
}
body.sku-info-app .summary-vendor-container {
  box-shadow: inset 0 0 1px 0 #000000;
  border-radius: 0.5rem;
  display: block;
}
body.sku-info-app .summary-vendor-container .btn-sm {
  padding-left: 1rem;
  padding-right: 1rem;
  white-space: nowrap;
}
body.sku-info-app .summary-vendor-container:hover {
  box-shadow: inset 0 0 0.5rem 0 #000000;
}
body.sku-info-app .summary-vendor-container .supplier-row {
  padding: 1rem 2rem;
}
body.sku-info-app .summary-vendor-container .supplier-settings,
body.sku-info-app .summary-vendor-container .dc-row {
  padding-bottom: 1.5rem;
  padding-top: 1.5rem;
}
body.sku-info-app .summary-vendor-container .supplier-settings .supplier,
body.sku-info-app .summary-vendor-container .dc-row .supplier {
  padding-left: 3rem;
}
body.sku-info-app .summary-vendor-container .internal-supplier .led {
  display: none;
}
body.sku-info-app .summary-vendor-container [data-flex-table='column'] {
  overflow: visible;
  overflow-wrap: anywhere;
}
body.sku-info-app .summary-vendor-container .commands > * {
  height: 4rem;
  margin-top: auto;
}
body.sku-info-app .summary-vendor-container .commands > :not(:last-child) {
  margin-right: 1rem;
}
body.sku-info-app .summary-vendor-container .reason {
  margin-right: 0;
}
body.sku-info-app .inactive-dc-text {
  color: #aaaaaa;
}
body.sku-info-app .summary-dc-edit {
  border-top: 0 !important;
  text-align: center;
  align-content: center;
}
body.sku-info-app .summary-dc-edit.selection {
  height: 3rem;
  margin: auto;
  padding-top: 2rem;
}
body.sku-info-app .number-spinner {
  width: 25rem;
}
body.sku-info-app .dc-edit-block {
  width: 22.5rem;
  margin: auto;
  justify-content: center;
  align-items: center;
}
body.sku-info-app .dc-edit-block-input {
  width: 22.5rem;
}
body.sku-info-app .dc-edit-block-input-small {
  width: 11.5rem;
}
body.sku-info-app .dc-edit-block-label {
  margin-right: 1rem;
}
body.sku-info-app .summary-cutoff-column {
  min-width: 8rem;
}
body.sku-info-app .flex-pad-cells > * {
  padding: 0 0.5rem;
}
body.sku-info-app .sales-history-chart-area {
  width: 50rem;
}
body.sku-info-app .sales-returns-chart-area {
  height: 15rem;
  width: 46rem;
}
body.sku-info-app .sales-subs-area {
  width: 25rem;
  line-height: 0.8;
}
body.sku-info-app #sales-subs-return-data {
  justify-content: flex-start;
}
body.sku-info-app .sales-order-left {
  justify-content: flex-start;
}
body.sku-info-app .sales-order-right {
  height: 15rem;
}
body.sku-info-app .sales-order-middle {
  width: 5rem;
}
body.sku-info-app .sales-order-customer {
  width: 25rem;
}
body.sku-info-app .sales-order-shipping {
  width: 25rem;
}
body.sku-info-app .section-header,
body.sku-info-app .section-header th:not(.spacer-cell) {
  background-color: #dee7ec !important;
  font-weight: bold;
  height: 2.4rem;
  padding: 0 0.5rem;
}
body.sku-info-app .spacer-cell {
  background-color: #ffffff !important;
  width: 2rem;
}
body.sku-info-app .pad-all-cells td div,
body.sku-info-app .pad-all-cells th div {
  margin-left: 0.5rem;
}
body.sku-info-app .align-center {
  text-align: center;
}
body.sku-info-app .warehouse-table-locs {
  height: 40rem;
  width: 20rem;
  overflow-y: auto;
}
body.sku-info-app .warehouse-table-moves {
  height: 40rem;
  width: 60rem;
  overflow-y: auto;
}
body.sku-info-app .warehouse-table-bottom {
  height: 40rem;
  overflow-y: auto;
}
body.sku-info-app .loc-disabled {
  background-color: #ffbfc0;
}
body.sku-info-app [data-tab='fitments'] .dc-selector-per-tab {
  display: none;
}
body.sku-info-app .fitment-table {
  height: 40rem;
  overflow-y: auto;
}
body.sku-info-app [data-tab='history'] .dc-selector-per-tab {
  display: none;
}
body.sku-info-app .history-links {
  width: 15rem;
}
body.sku-info-app .history-table {
  height: 80rem;
  margin-right: 2rem;
}
body.sku-info-app .history-price {
  max-width: 30rem;
}
body.sku-info-app .history-cost {
  max-width: 30rem;
}
body.sku-info-app .history-inventory {
  max-width: 30rem;
}
body.sku-info-app .history-dc-name {
  padding-left: 2rem;
}
body.sku-info-app [data-tab='barcodes'] .dc-selector-per-tab {
  display: none;
}
body.sku-info-app .barcode-table {
  max-width: 40rem;
}
body.sku-info-app [data-tab='properties'] .dc-selector-per-tab {
  display: none;
}
body.sku-info-app .update-properties {
  width: 50%;
}
body.sku-info-app .root .root-main-content {
  padding-top: 0;
}
body.sku-info-app #skuinfo-root {
  height: 100vh;
  min-height: 80rem;
  min-width: 130rem;
}
body.sku-info-app .skuinfo-title-row {
  line-height: 2;
  margin-top: 1.5rem;
  flex-shrink: 0;
}
body.sku-info-app #skuinfo-title {
  font-size: 2rem;
  font-weight: 800;
}
body.sku-info-app #left-side {
  background-color: #f2f2f2;
  width: 60rem;
}
body.sku-info-app #right-side {
  background-color: #ffffff;
  padding-top: 1.5rem;
}
body.sku-info-app .state-flex {
  display: flex;
  flex-direction: row;
  width: 25rem;
  align-items: center;
  margin-top: 0.5rem;
}
body.sku-info-app .led {
  width: 2rem;
  height: 2rem;
  display: inline-block;
  margin-right: 0.5rem;
  border-radius: 1.5rem;
}
body.sku-info-app .led-thin {
  width: 0.5rem;
}
body.sku-info-app .led-active,
body.sku-info-app .led-enabled {
  background-color: #00c345;
}
body.sku-info-app .led-hibernated,
body.sku-info-app .led-disabled,
body.sku-info-app .led-hibernating {
  background-color: #f5bd4f;
}
body.sku-info-app .led-booked,
body.sku-info-app .led-special,
body.sku-info-app .led-discontinued,
body.sku-info-app .led-deleted,
body.sku-info-app .led-archived {
  background-color: #ff4950;
}
body.sku-info-app .push {
  margin-left: auto;
}
body.sku-info-app .tab-content {
  overflow-y: auto;
  overflow-x: hidden;
}
body.sku-info-app .search-term-nan .search-term-not-nan.custom-control-input:checked ~ .custom-control-label::before {
  border-color: #f5bd4f !important;
  background-color: #f5bd4f !important;
}
body.sku-info-app .emphasize {
  font-weight: bold;
}
body.sku-info-app .btn-light {
  color: #212529;
  border-color: #adb5bd;
  text-transform: uppercase;
}
body.sku-info-app .btn-group-sm > .btn,
body.sku-info-app .btn-sm {
  font-size: 1rem;
}
body.sku-info-app .btn-group {
  border: none;
}
body.sku-info-app .btn-group > * {
  font-size: 1rem;
  text-transform: uppercase;
  line-height: 4;
  font-weight: 400;
  border: 0.2rem solid #3fa9f5;
}
body.sku-info-app .btn-group label:not(.active) {
  font-weight: bold;
}
body.sku-info-app .btn-group > :first-child {
  border-radius: 0.2rem 0 0 0.2rem;
}
body.sku-info-app .btn-group > :last-child {
  border-radius: 0 0.2rem 0.2rem 0;
}
body.sku-info-app .btn-group > :not(:last-child) {
  border-right: 0;
}
body.sku-info-app .collapse:not(.show) {
  display: none;
}
body.sku-info-app .fieldset-div-line-height-3 .fieldset-input {
  line-height: 3;
}
body.sku-info-app #website-selection fieldset {
  flex-basis: 25%;
  margin: 0;
}
body.sku-info-app #website-selection fieldset:last-of-type {
  flex-basis: 50%;
}
body.sku-info-app #website-selection fieldset label {
  font-size: 1.4rem;
  color: #222222;
  font-weight: 300;
}
body.sku-info-app #website-selection fieldset .fieldset-input {
  text-align: start;
  padding: 0;
  width: 2rem;
}
body.sku-info-app .website-color-1 {
  accent-color: #000000;
  background-color: #000000;
}
body.sku-info-app .website-color-4 {
  accent-color: #2f00ef;
  background-color: #2f00ef;
}
body.sku-info-app .website-color-5 {
  accent-color: #139bff;
  background-color: #139bff;
}
body.sku-info-app .edit-mode .edit-section.edit-on {
  background-color: #def4fe;
}
body.sku-info-app form.supplier-form .supplier-settings-update {
  display: flex;
  align-items: flex-end;
  flex-wrap: nowrap;
}
body.sku-info-app form.supplier-form .supplier-settings-update fieldset {
  display: inline-block;
  flex: 1 1 10rem;
  line-height: 3;
  max-width: fit-content;
}
body.sku-info-app form.supplier-form .supplier-settings-update fieldset.edit-comment {
  flex: 1 1 20rem;
  max-width: unset;
}
body.sku-info-app form.supplier-form .supplier-settings-update fieldset.fieldset-checkbox {
  flex: 0 1 auto;
  max-width: fit-content;
  white-space: nowrap;
}
.not-implemented {
  background-color: #ffaaaa;
}
.styleguide {
  width: 1000px;
  margin: auto;
  box-shadow: 0 0 20px 0 #000000;
}
.styleguide .storefront-logo {
  height: 1rem;
  width: 1rem;
}
.styleguide .python-render:not(.acc-key),
.styleguide .template-render:not(.acc-key) {
  margin: 1rem;
  box-shadow: 0 0 4px #000000, inset 0 0 0.1rem #000000;
}
/**
Used to demonstrate effects
 */
.bg-gray {
  background-color: #cccccc;
}
.border-red {
  border: 2px solid #ff0000;
}
.inset-black {
  box-shadow: inset 2px 2px #000000;
}
.area {
  width: 50rem;
  height: 10rem;
  background-color: #6fafaf;
  display: block;
}
.form-area {
  padding: 2rem;
  margin: 2rem;
  border: 0.1rem solid #000000;
  border-radius: 10px;
  background-color: #ddffff;
}
.form-area .feedback {
  padding: 2rem;
  background-color: #ffffff;
}
.show-code {
  text-decoration: underline;
  margin-left: 2rem;
  font-style: italic;
}
.styleguide h1 {
  text-align: center;
  font-weight: bold;
  font-size: 4rem;
}
.styleguide h2 {
  text-align: center;
  font-weight: bold;
  font-size: 3rem;
}
.styleguide h3 {
  text-align: center;
  font-weight: bold;
  font-size: 2rem;
}
.styleguide .wide-image {
  width: 10rem;
  height: 5rem;
}
.styleguide .large-image {
  width: 20rem;
  height: 20rem;
}
.styleguide .blue-text-faded {
  color: #0000ff7f;
}
.styleguide .red-text {
  color: #ff0000;
}
body.devtools.email-log .root-content-before {
  width: 28rem;
}
body.devtools.email-log iframe.email-viewer {
  height: 200rem;
  display: block;
  overflow-y: auto;
  width: 100rem;
}
body.devtools.email-log td {
  padding: 0 1rem;
}
body.devtools.email-log tr:hover {
  background-color: #dddddd;
}
body.devtools.email-log .address {
  background-color: #cccccc;
  border-radius: 0.5rem;
  margin-right: 1rem;
  padding: 0 1rem;
  font-weight: 400;
}
body.devtools.email-log.link-list {
  padding: 1.5rem;
}
body.devtools.sqllog #timestamp-list {
  width: 35rem;
  flex-shrink: 0;
}
body.devtools.sqllog .get-params {
  color: #aaaaaa;
}
body.devtools.sqllog .post-params {
  color: #66aaff;
}
body.devtools.sqllog .url {
  font-weight: bold;
}
body.devtools.sqllog .replace {
  background-color: #ffa500;
}
body.devtools.sqllog .insert {
  background-color: #008000;
}
body.devtools.sqllog .delete {
  background-color: #ff0000;
}
body.devtools.sqllog .schema-name {
  background-color: #000000;
  color: #ffffff;
}
body.devtools.sqllog .GET {
  background-color: #61affe;
}
body.devtools.sqllog .POST {
  background-color: #49cc90;
}
body.devtools.sqllog .DELETE {
  background-color: #f93e3e;
}
body.devtools.sqllog .PATCH {
  background-color: #50e3c2;
}
body.devtools.sqllog .PUT {
  background-color: #fca130;
}
body.devtools.sqllog .time-warning {
  background-color: #ff0000;
}
body.devtools.mom .row {
  display: flex;
  padding-left: 2rem;
  padding-right: 2rem;
}
body.devtools.mom .row button {
  font-size: 2rem;
}
body.devtools.mom .full {
  display: flex;
}
body.devtools.mom .left {
  width: 75%;
}
body.devtools.mom .left fieldset,
body.devtools.mom .left .value-container {
  flex-grow: 1;
}
body.devtools.mom .right {
  width: 25%;
}
body.devtools.mom .right fieldset {
  flex-grow: 1;
}
body.devtools.mom .table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.5rem 0;
  margin-left: 2rem;
  margin-right: 2rem;
}
body.devtools.mom .table-wrapper table {
  border-collapse: collapse;
  width: 100%;
  min-width: 400px;
}
body.devtools.mom .table-wrapper table th {
  background: #f5f5f5;
  text-align: left;
  font-weight: bold;
  position: sticky;
  top: -1.5rem;
  z-index: 1;
}
body.devtools.mom .table-wrapper table th,
body.devtools.mom .table-wrapper table td {
  padding: 0.75rem;
  white-space: nowrap;
}
body.devtools.mom .table-wrapper table.bordered {
  border: 1px solid #ddd;
}
body.devtools.mom .table-wrapper table tr:nth-child(even) td {
  background: #fafafa;
}
/*# sourceMappingURL=/static/css/styles.css.map */