/*
    # Text Defaults
    
    Definition of default font family, size, weight and line-height
    should be responsive for all elements within the page.
*/
html {
    font-size: 16px;
    }
body,
input,
textarea {
    color: var(--text);
    font-family: var(--text-typeface);
    font-size: var(--text-size);
    font-style: var(--text-style);
    font-weight: var(--text-weight);
    line-height: var(--text-lineheight);
    }

/* Inputs have their own font-size */
input,
textarea {
    font-size: var(--input-text-size);
    }
button {
    color: inherit;
    }

/*
    # Paragraphs & other text
    I am using `rem` instead of `em` units for bottom margin because it gives a more consistent result
    when editing content and applying text size variants to paragraphs.
*/
p {
    margin: 0 0 1.5rem;
    }
b,
strong {
    font-weight: var(--text-weight-bold);
    }

/*
    # Headings (<h1> to <h6>)
    
	1. By default we'll add a bottom margin...
    2. Unless they have adjacent elements.
   
    Note: we should be using 'rem' units because they give a more consistent look versus 'em'
*/
h1,
.heading-1,
h2,
.heading-2,
h3,
.heading-3,
h4,
.heading-4,
h5,
.heading-5,
h6,
.heading-6 {
    color: var(--heading);
    font-family: var(--heading-typeface);
    font-weight: var(--heading-weight);
    font-style: var(--heading-style);
    line-height: var(--heading-lineheight);
    text-transform: var(--heading-transform);
    margin: 0 0 .25em;
    }
h1 b,
h1 strong,
.heading-1 b,
.heading-1 strong,
h2 b,
h2 strong,
.heading-2 b,
.heading-2 strong,
h3 b,
h3 strong,
.heading-3 b,
.heading-3 strong,
h4 b,
h4 strong,
.heading-4 b,
.heading-4 strong,
h5 b,
h5 strong,
.heading-5 b,
.heading-5 strong,
h6 b,
h6 strong,
.heading-6 b,
.heading-6 strong {
    font-weight: var(--heading-weight-bold);
    }
h1,
.heading-1 {
    font-size: var(--heading-1-size);
    }
h2,
.heading-2 {
    font-size: var(--heading-2-size);
    }
h3,
.heading-3 {
    font-size: var(--heading-3-size);
    }
h4,
.heading-4 {
    font-size: var(--heading-4-size);
    }
h5,
.heading-5 {
    font-size: var(--heading-5-size);
    }
h6,
.heading-6 {
    font-size: var(--heading-6-size);
    }

/**
    # Eyebrows
    
    An eyebrow is usually a short title which prefixes a longer heading.
    This is a common design pattern on websites and is included by default.
*/
.text-eyebrow {
    color: var(--text-eyebrow);
    font-family: var(--text-eyebrow-typeface);
    font-size: var(--text-eyebrow-size);
    font-style: var(--text-eyebrow-style);
    font-weight: var(--text-eyebrow-weight);
    text-transform: var(--text-eyebrow-transform);
    margin-bottom: .5em;
    }

/**
    # Text sizes
    
    Additional text sizes available by default should include:
    - subtitle
    - large
    - small
*/
.text-subtitle {
    font-size: var(--text-subtitle-size);
    }
.text-large {
    font-size: var(--text-large-size);
    }
.text-small {
    font-size: var(--text-small-size);
    }

/*
    # Links
    1. Defaults
*/
/* 1 */
a {
    color: var(--link);
    text-decoration: var(--link-decoration);
    }
a:focus,
a:hover {
    color: var(--link-hovered);
    text-decoration: var(--link-decoration-hover);
    }

/* @todo */
a.action-link:after {
    content: url(/portal/web/78/theme/spark-v3/common/images/link-arrow.svg?v=1709800924);
    margin-left: 10px;
    }

/*
    # Lists
    ---
    Global list styling - inside & outside of editable regions.
    List margins and padding should be relative to font-size.
*/
ul,
ol {
    margin: 1.5em 0 1.5em 0;
    padding: 0 0 0 1.5em;
    }
ul li,
ol li {
    margin: 0;
    padding: 0;
    }

/*
    # List ticks
*/
ul.list-ticks li {
    list-style: none;
    position: relative;
    }
ul.list-ticks li:before {
    content: "\e0ef";
    font-family: "ev2";
    background: none;
    color: /*style.primary(*/#3e653e/*)*/;
    display: inline-block;
    position: absolute;
    left: -1.5em;
    top: .25em;
    line-height: 1;
    }

/*
    # Horizontal Rule <hr>
*/
hr {
    margin: 2.5rem 0;
    border: 1px solid var(--border-color);
    }

/*
    # Code
*/
code {
    background: var(--background-neutral);
    border-radius: 3px;
    font-size: .875em;
    padding: 2px .25em;
    }

/*
    # Images
*/
img {
    vertical-align: middle;
    max-width: 100%;
    }

/*
    # Colors
*/
.color-inherit {
    color: inherit !important;
    }

/**
    # Custom scrollbars
    ---
    This is for the benefit of webkit browsers because we just don't like
    the standard rendering of scrollbars.
 */
body ::-webkit-scrollbar {
    width: .75rem;
    height: .75rem;
    }
body ::-webkit-scrollbar-corner {
    display: none;
    }
body ::-webkit-scrollbar-thumb {
    min-height: 28px;
    padding-top: 100px;
    border-radius: 8px;
    margin-right: 3px;
    border: 3px solid transparent;
    background-clip: padding-box;
    background-color: var(--text);
    }
body ::-webkit-scrollbar-thumb:hover {
    background-color: var(--text);
    }
body ::-webkit-scrollbar-track {
    border-left: 6px solid transparent;
    border-right: 1px solid transparent;
    background-clip: padding-box;
    }

/*
    # Is Scrollable
    A modifier class enabling auto addition of scrollbars on an element.
*/
.is-scrollable {
    overflow-y: auto;
    width: 100%;
    height: 100%;
    }

/*
    # Spaced Group
    
    Group elements together with spacing between them.
*/
.spaced-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 1rem;
    }

/*
    # Surfaces
    Surfaces are typically opaque layers, 
    which form the container for content or components.
*/
.ev-surface {
    background: var(--surface);
    }
.ev-surface.is-overlay {
    background: var(--surface-overlay);
    box-shadow: var(--shadow-overlay);
    }
.ev-surface.is-sunken {
    background: var(--surface-sunken);
    }

/*
    # Product Card
*/
a.product-card {
    text-decoration: none;
    color: inherit;
    }
a.product-card .reviews {
    white-space: nowrap;
    }

/*
    # Category Card
*/
a.category-card {
    text-decoration: none;
    color: inherit;
    }

/*
 * Sections:
 * 
 * CSS for pages built with content sections
 */
.content-section {
    position: relative;
    z-index: 0;
    padding: 2rem 0;
    }
.content-section .ev-container {
    position: relative;
    z-index: 1;
    }
.content-section .constrained-column {
    margin: 0 auto;
    text-align: center;
    max-width: 50rem;
    }
.content-section .column-wrapper {
    height: 100%;
    }
.content-section .column-wrapper p:last-child {
    margin: 0;
    }
.content-section .five-columns {
    justify-content: center;
    }
.content-section .five-columns .ev-block:not(.section-heading) {
    flex: 1 1 100%;
    }
.content-section .five-columns .ev-block:not(.section-heading) .column-wrapper {
    padding: .5rem;
    }
.content-section .five-columns .ev-block:not(.section-heading) .column-wrapper.extra-padding {
    padding-left: 3rem;
    padding-right: 3rem;
    }
.content-section .four-columns .column-wrapper {
    padding: 1rem;
    }
.content-section .four-columns .column-wrapper.extra-padding {
    padding-left: 3rem;
    padding-right: 3rem;
    }
.content-section .three-columns .column-wrapper {
    padding: 1.5rem;
    }
.content-section .three-columns .column-wrapper.extra-padding {
    padding-left: 3rem;
    padding-right: 3rem;
    }
.content-section .two-columns .column-wrapper,
.content-section .constrained-column .column-wrapper,
.content-section .single-column .column-wrapper {
    padding: 2rem;
    }
.content-section .two-columns .column-wrapper.extra-padding,
.content-section .constrained-column .column-wrapper.extra-padding,
.content-section .single-column .column-wrapper.extra-padding {
    padding-left: 3rem;
    padding-right: 3rem;
    }
.ev-container .content-section .ev-container {
    padding: 0;
    }
@media only screen and (min-width: 600px) {
.content-section .five-columns .ev-block:not(.section-heading) {
    flex: 0 1 50%;
    }
}

@media only screen and (min-width: 960px) {
.content-section .five-columns .ev-block:not(.section-heading) {
    flex: 0 1 33.333333333333%;
    }
}

@media only screen and (min-width: 1200px) {
.content-section .five-columns .ev-block:not(.section-heading) {
    flex: 1 1 20%;
    }
}

/** -------------------------- OLD CODE -------------------------- **/
body {
    background: /*style.footer_background_color(*/#F8FAFB/*)*/;
    }
body.blankLayout {
    background: /*style.body_background_color(*/#fff/*)*/;
    }
body.evDialogOpen {
    overflow: hidden;
    }
.is-fixed.fixed-menu body,
.is-fixed.fixed-panel body {
    overflow: hidden;
    }
.tags {
    margin: 0px -2px;
    }
.tags .tag {
    display: inline-block;
    margin: 2px;
    padding: 7px 12px;
    border-radius: /*style.component_border_radius(*/3px/*)*/;
    font-size: 0px;
    }
.error-tag {
    text-transform: uppercase;
    background-color: #e05242;
    color: #fff;
    font-size: .75em;
    display: inline-block;
    line-height: 1;
    padding: 5px 10px;
    border-radius: 3px;
    }

/*
    Table
    -----
*/
table.evCartLines td,
table.evCartLines th,
.evCartLines > table td,
.evCartLines > table th {
    padding: /*style._content_half_gap(*/16px/*)*/;
    }
table.evCartLines td,
table.evCartLines td.first,
table.evCartLines td:first-child,
table.evCartLines th,
table.evCartLines th.first,
table.evCartLines th:first-child,
.evCartLines > table td,
.evCartLines > table td.first,
.evCartLines > table td:first-child,
.evCartLines > table th,
.evCartLines > table th.first,
.evCartLines > table th:first-child {
    width: auto;
    }
table.evCartLines td.first,
table.evCartLines td:first-child,
table.evCartLines th.first,
table.evCartLines th:first-child,
.evCartLines > table td.first,
.evCartLines > table td:first-child,
.evCartLines > table th.first,
.evCartLines > table th:first-child {
    padding-left: 0px;
    }
table.evCartLines td.last,
table.evCartLines td:last-child,
table.evCartLines th.last,
table.evCartLines th:last-child,
.evCartLines > table td.last,
.evCartLines > table td:last-child,
.evCartLines > table th.last,
.evCartLines > table th:last-child {
    padding-right: 0px;
    }
table.evCartLines td.alignCenter,
table.evCartLines td[align="center"],
table.evCartLines th.alignCenter,
table.evCartLines th[align="center"],
.evCartLines > table td.alignCenter,
.evCartLines > table td[align="center"],
.evCartLines > table th.alignCenter,
.evCartLines > table th[align="center"] {
    text-align: center;
    }
table.evCartLines td.alignRight,
table.evCartLines td[align="right"],
table.evCartLines th.alignRight,
table.evCartLines th[align="right"],
.evCartLines > table td.alignRight,
.evCartLines > table td[align="right"],
.evCartLines > table th.alignRight,
.evCartLines > table th[align="right"] {
    text-align: right;
    }
table.evCartLines tr.last td,
table.evCartLines tr:last-child td,
table.evCartLines tr.last th,
table.evCartLines tr:last-child th,
.evCartLines > table tr.last td,
.evCartLines > table tr:last-child td,
.evCartLines > table tr.last th,
.evCartLines > table tr:last-child th {
    padding-bottom: /*style._content_half_gap(*/16px/*)*/;
    }
table.evAccountTable td,
table.evAccountTable th {
    color: var(--color-text);
    }
table.evAccountTable td a:link,
table.evAccountTable td a:visited,
table.evAccountTable th a:link,
table.evAccountTable th a:visited {
    color: inherit;
    }
table.evAccountTable td.status.unread,
table.evAccountTable td.status.read,
table.evAccountTable td.status.packing,
table.evAccountTable th.status.unread,
table.evAccountTable th.status.read,
table.evAccountTable th.status.packing {
    color: /*style._pending_text_color(*/#E68333/*)*/;
    }
table.evAccountTable td.status.packing > span.icon,
table.evAccountTable th.status.packing > span.icon {
    font-size: 20px;
    }
table.evAccountTable td.status.complete,
table.evAccountTable th.status.complete {
    color: /*style._positive_text_color(*/#3ac981/*)*/;
    }
table.evAccountTable td.status.cancelled,
table.evAccountTable th.status.cancelled {
    color: /*style._cancel_text_color(*/#d1d1d1/*)*/;
    }
table.evAccountTable td.status span.icon,
table.evAccountTable th.status span.icon {
    line-height: 1em;
    }

/*
    Content
	-------
*/
.contentSection,
.contentBlock,
.asideSection,
.asideItem {
    position: relative;
    }
.contentSection.first,
.contentSection:first-child,
.contentBlock.first,
.contentBlock:first-child,
.asideSection.first,
.asideSection:first-child,
.asideItem.first,
.asideItem:first-child {
    padding-top: 0px;
    }
.contentSection.last,
.contentSection:last-child,
.contentBlock.last,
.contentBlock:last-child,
.asideSection.last,
.asideSection:last-child,
.asideItem.last,
.asideItem:last-child {
    padding-bottom: 0px;
    }
.asideItem {
    padding-top: /*style._content_half_gap(*/16px/*)*/;
    padding-bottom: /*style._content_half_gap(*/16px/*)*/;
    }
.contentBlock {
    padding-left: 0px;
    padding-right: 0px;
    }
.contentSection {
    border: 0px solid /*style.border_color(*/#bcbfc4/*).colorAdjust(0,0,-10%,0)*/;
    }
.contentSection.toolbarSection {
    padding-bottom: 0px;
    }
.contentSection.paginationSection {
    padding-top: 0px;
    }

/*
    Alerts and Notices
    ------------------
*/
.evAlert:not(#evShippingAlert):not(.noAvailableShipping) {
    background-image: none;
    background-color: /*style._alert_color(*/#fe553e/*)*/;
    padding: /*style._content_two_third_gap(*/20px/*)*/ /*style._content_gap(*/32px/*)*/;
    border-radius: 4px;
    color: #fff;
    }
.evAlert:not(#evShippingAlert):not(.noAvailableShipping) h1,
.evAlert:not(#evShippingAlert):not(.noAvailableShipping) h2,
.evAlert:not(#evShippingAlert):not(.noAvailableShipping) h3,
.evAlert:not(#evShippingAlert):not(.noAvailableShipping) h4,
.evAlert:not(#evShippingAlert):not(.noAvailableShipping) h5,
.evAlert:not(#evShippingAlert):not(.noAvailableShipping) h6,
.evAlert:not(#evShippingAlert):not(.noAvailableShipping) .title {
    color: inherit;
    }
.evAlert:not(#evShippingAlert):not(.noAvailableShipping) + div {
    margin-top: /*style._content_gap(*/32px/*)*/;
    }
.evNotices .error-summary {
    background-color: /*style._alert_color(*/rgba(254,85,62,.1)/*).colorAdjust(0,0,0,-90%)*/;
    margin: /*style._content_third_gap(*/10px/*)*/ 0 /*style._content_two_third_gap(*/20px/*)*/;
    padding: /*style._content_two_third_gap(*/20px/*)*/;
    border: 1px solid /*style._alert_color(*/#fe553e/*)*/;
    border-radius: 4px;
    color: /*style._alert_color(*/#fe553e/*)*/;
    }
.evNotices .success-summary,
.evNotices .flash.info,
.evFormComplete {
    margin: /*style._content_third_gap(*/10px/*)*/ 0 /*style._content_two_third_gap(*/20px/*)*/;
    padding: /*style._content_two_third_gap(*/20px/*)*/;
    border: 1px solid /*style._positive_text_color(*/#3ac981/*)*/;
    border-radius: 4px;
    background-color: /*style._positive_text_color(*/rgba(58,201,129,.1)/*).colorAdjust(0,0,0,-90%)*/;
    color: /*style._positive_text_color(*/#3ac981/*)*/;
    }
.evNotices h1,
.evNotices h2,
.evNotices h3,
.evNotices h4,
.evNotices h5,
.evNotices h6,
.evNotices .title {
    color: inherit;
    }
.evFormComplete {
    padding: /*style._content_two_third_gap(*/20px/*)*/ !important;
    }
#evAuthLoginArea {
    padding: 1.5rem;
    }
#evAuthLoginArea {
    margin: 1.5rem 0 0;
    }

/*
    Author
    ------
*/
.author {
    display: table;
    position: relative;
    font-size: 0px;
    }
.author .author-thumbnail,
.author .author-details {
    display: table-cell;
    vertical-align: middle;
    }
.author .author-thumbnail {
    display: table-cell;
    }
.author .author-thumbnail .evAvatar {
    width: 50px;
    height: 50px;
    font-size: 20px;
    line-height: 40px;
    }
.author .author-thumbnail .evAvatar span {
    display: inline-block;
    vertical-align: middle;
    }
.author .author-details {
    padding-left: 10px;
    }
.author .author-details .author-name,
.author .author-details .posted-on {
    display: block;
    }
.author .author-details .posted-on {
    font-size: 0px;
    }
.text-readable {
    max-width: 30rem;
    margin: 0 auto;
    }
.evPerPage {
    display: block;
    }
.evPerPage .evSelectButton {
    margin: 0;
    }
.evRating {
    margin: -2px;
    }
.evRating.x32 {
    margin: -5px;
    }
.color-subtle {
    color: var(--text-subtle);
    }
.evTabs.is-wrap {
    white-space: wrap;
    }
.product-codes {
    font-family: var(--typeface-monospace);
    margin-bottom: .875em;
    }
.product-codes-label {
    font-size: .875em;
    }