html,
body {
    font-size        : 14px;
    font-family      : "Segoe UI", Verdana, Arial, sans-serif;
    margin           : 0;
    background-color : #FCFCFC;
    position         : relative;
    height           : 100%
}
a,
a:link,
a:hover,
a:active,
a:visited {
    text-decoration : none;
    font-weight     : inherit;
    color           : inherit;
}
textarea {
    resize : none;
}
.errorlist {
    background    : #FEFEFE;
    border        : 1px solid #E6E6E6;
    border-radius : 6px 6px 6px 6px;
    color         : #333333;
    /*min-width     : 250px;*/
    padding       : 4px 7px;
    box-shadow    : 0 -1px 0 #F4F4F4 inset, 0 2px 3px rgba(0, 0, 0, 0.5);
}
.errorlist.positioned-error {
    position : absolute;
    z-index  : 1;
}
.errorlist.positioned-right {
    margin-left : 8px;
}
.errorlist.positioned-left {
    margin-right : 8px;
}
.errorlist .message-text:before {
    color          : #000000;
    content        : "* ";
    vertical-align : middle;
}
.errorlist .message-text {
    vertical-align : middle;
}
.errorlist.positioned-right .pointer {
    background : url("/wc/7.0.0/images/common/errorlist/errorlist-left-arrow.png") no-repeat scroll left top transparent;
    position   : absolute;
    left       : -9px;
    top        : 7px;
    width      : 10px;
    height     : 15px;
}
.errorlist.positioned-error .close-btn {
    background : url("/wc/7.0.0/images/common/errorlist/errorlist_close.png") no-repeat scroll left top transparent;
    height     : 12px;
    position   : absolute;
    right      : -6px;
    top        : -6px;
    width      : 12px;
    cursor     : pointer;
}
.errorlist.positioned-left .pointer {
    background : url("/wc/7.0.0/images/common/errorlist/errorlist-right-arrow.png") no-repeat scroll left top transparent;
    position   : absolute;
    right      : -10px;
    top        : 7px;
    width      : 10px;
    height     : 15px;
}
.errorlist.positioned-error.positioned-left .close-btn {
    background : url("/wc/7.0.0/images/common/errorlist/errorlist_close.png") no-repeat scroll left top transparent;
    height     : 12px;
    position   : absolute;
    left       : -6px;
    top        : -6px;
    width      : 12px;
    cursor     : pointer;
}
.error-field-error.inline-error,
.validation-error {
    background-color : #FFEEEE;
    border           : 1px solid #FF0000;
    color            : #FF0000;
}
.radio-checkbox-row.validation-error{
    border: 0;
    background: none;
}
.div-mask {
    background-color: rgba(240, 243, 244, 0.67);
    text-align       : center;
    z-index: 100;
}
.div-mask.bg-white {
    background-color : white;
}

.vertical-aligner {
    display        : inline-block;
    height         : 100%;
    vertical-align : middle;
}
.loader {
    font-size: 31px;
    width             : 1em;
    height            : 1em;
    border-radius     : 50%;
    margin            : -0.5em 0 0 -0.5em;
    -webkit-animation : load6 1.7s infinite ease;
    animation         : load6 1.7s infinite ease;
    position          : absolute;
    left              : 50%;
    top               : 50%;
}
@-webkit-keyframes load6 {
    0% {
        box-shadow : -0.11em -0.83em 0 -0.35em #1199C4, -0.11em -0.83em 0 -0.38em #1199C4, -0.11em -0.83em 0 -0.41em #1199C4, -0.11em -0.83em 0 -0.44em #1199C4, -0.11em -0.83em 0 -0.47em #1199C4;
    }
    5%,
    95% {
        box-shadow : -0.11em -0.83em 0 -0.35em #1199C4, -0.11em -0.83em 0 -0.38em #1199C4, -0.11em -0.83em 0 -0.41em #1199C4, -0.11em -0.83em 0 -0.44em #1199C4, -0.11em -0.83em 0 -0.47em #1199C4;
    }
    30% {
        box-shadow : -0.11em -0.83em 0 -0.35em #1199C4, -0.51em -0.66em 0 -0.38em #1199C4, -0.75em -0.36em 0 -0.41em #1199C4, -0.83em -0.03em 0 -0.44em #1199C4, -0.81em 0.21em 0 -0.47em #1199C4;
    }
    55% {
        box-shadow : -0.11em -0.83em 0 -0.35em #1199C4, -0.29em -0.78em 0 -0.38em #1199C4, -0.43em -0.72em 0 -0.41em #1199C4, -0.52em -0.65em 0 -0.44em #1199C4, -0.57em -0.61em 0 -0.47em #1199C4;
    }
    100% {
        -webkit-transform : rotate(360deg);
        box-shadow        : -0.11em -0.83em 0 -0.35em #1199C4, -0.11em -0.83em 0 -0.38em #1199C4, -0.11em -0.83em 0 -0.41em #1199C4, -0.11em -0.83em 0 -0.44em #1199C4, -0.11em -0.83em 0 -0.47em #1199C4;
    }
}
@keyframes load6 {
    0% {
        box-shadow: -0.11em -0.83em 0 -0.35em #000000, -0.11em -0.83em 0 -0.38em #000000, -0.11em -0.83em 0 -0.41em #000000, -0.11em -0.83em 0 -0.44em #000000, -0.11em -0.83em 0 -0.47em #000000;
    }
    5%,
    95% {
        box-shadow: -0.11em -0.83em 0 -0.35em #000000, -0.11em -0.83em 0 -0.38em #000000, -0.11em -0.83em 0 -0.41em #000000, -0.11em -0.83em 0 -0.44em #000000, -0.11em -0.83em 0 -0.47em #000000;
    }
    30% {
        box-shadow: -0.11em -0.83em 0 -0.35em #000000, -0.51em -0.66em 0 -0.38em #000000, -0.75em -0.36em 0 -0.41em #000000, -0.83em -0.03em 0 -0.44em #000000, -0.81em 0.21em 0 -0.47em #000000;
    }
    55% {
        box-shadow: -0.11em -0.83em 0 -0.35em #000000, -0.29em -0.78em 0 -0.38em #000000, -0.43em -0.72em 0 -0.41em #000000, -0.52em -0.65em 0 -0.44em #000000, -0.57em -0.61em 0 -0.47em #000000;
    }
    100% {
        transform  : rotate(360deg);
        box-shadow: -0.11em -0.83em 0 -0.35em #000000, -0.11em -0.83em 0 -0.38em #000000, -0.11em -0.83em 0 -0.41em #000000, -0.11em -0.83em 0 -0.44em #000000, -0.11em -0.83em 0 -0.47em #000000;
    }
}
/*Loader 2*/
.loader2 {
    width: 40px;
    height: 40px;
    background-color: #333;

    margin: 100px auto;
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
    0% { -webkit-transform: perspective(120px) }
    50% { -webkit-transform: perspective(120px) rotateY(180deg) }
    100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    } 50% {
          transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
          -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
      } 100% {
            transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
            -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        }
}
.view-popup .info-row {
    padding : 5px 0;
}
.view-popup {
    min-width : 450px;
}
.view-popup > div.value {
    display       : block;
    margin        : 10px;
    border-radius : 5px;
    border        : 1px solid #000000;
    padding       : 5px;
}
/*********************** accordion ************************/
.accordion-panel {
    padding : 0 0 15px;
}
.accordion-panel > .label-bar {
    background  : none repeat scroll 0 0 #FAFDFD;
    border      : 1px solid #E1E5E5;
    color       : #777;
    cursor      : pointer;
    font-size   : 15px;
    height      : 42px;
    line-height : 42px;
    margin      : 0 0 7px;
    padding     : 7px 15px 7px 40px;
    position    : relative;
}
.ie9 .accordion-panel > .label-bar {
    background-size : 100% 100%;
    filter          : none;
}
.accordion-panel > .label-bar.expanded {
    background : none repeat scroll 0 0 #FFFFFF;
    color      : #1199C4;
}
.accordion-panel > .label-bar:hover {
    background : none repeat scroll 0 0 #FFFFFF;
}
.accordion-panel > .label-bar .toggle-icon {
    background-image : url("/wc/7.0.0/images/widgets/accordion/accordion-toggle.png");
    display          : inline-block;
    height           : 16px;
    left             : 7px;
    position         : absolute;
    top              : 12px;
    vertical-align   : top;
    width            : 16px;
}
.accordion-item {
    background : none repeat scroll 0 0 #FFFFFF;
    border     : 1px solid #E1E5E5;
    margin     : 0 0 15px;
    padding    : 12px;
    position   : relative;
    top        : -1px;
}
.accordion-item form {
    padding : 0;
}
.accordion-panel > .accordion-item.collapsed {
    display : none;
}
.accordion-panel > .accordion-item table th:first-child,
.accordion-panel > .accordion-item table th:last-child {
    border-radius : 0;
}
.expanded .toggle-icon {
    background-position : -16px 0;
}
.multi-column.two-column .columns {
    width : 50%;
}
.multi-column .columns {
    display        : inline-block;
    vertical-align : top;
    margin         : 0;
    padding        : 0;
    outline        : 0;
}
.two-column .first-column .column-content {
    margin-right : 5px;
}
.two-column .last-column .column-content {
    margin-left : 5px;
}
.multi-column.three-column .columns {
    width : 33.33%;
}

.float-none {
    float: none !important;
}
.ml-0 {
    margin-left: 0 !important;
}
.mt-30 {
    margin-top: 30px !important;
}
.pr-0 {
    padding-right: 0 !important;
}
.pl-12 {
    padding-left: 12px !important;
}


.newsletter .form-row {
    position: relative;
}

.newsletter .form-row .errorlist {
    position: absolute;
    bottom: -26px;
}
 /* ============================================================================
 * wc-loader.css — Canonical global loader system
 * ----------------------------------------------------------------------------
 * ONE loader for the whole platform (site + admin + front-end-editor).
 * Replaces ~60 ad-hoc per-feature spinners / masks / shimmers.
 *
 * Namespaced `.wc-*` on purpose: it is ADDITIVE and coexists with the legacy
 * `.loader` / `.div-mask` while each screen is migrated one-by-one. Nothing
 * changes visually until a screen opts in.
 *
 * ONE size only. Two modes: LIGHT (default) and DARK.
 *   - LIGHT mode  = for light surfaces → brand-coloured spinner, light backdrop.
 *   - DARK  mode  = for dark surfaces  → white spinner, dark backdrop.
 * Add `--dark` to switch. Modes cascade via CSS variables, so a `.wc-loader`
 * placed inside a `.wc-loader-overlay--dark` turns white automatically.
 *
 * Tracking of the rollout: docs/loader-migration-tracker.md
 *
 * PRIMITIVES
 *   .wc-loader            comet ring spinner (single size, theme-coloured)
 *   .wc-loader-overlay    centering mask/backdrop      (+ --fixed)
 *   .wc-loader-dots       three pulsing dots
 *   .wc-skeleton          shimmer placeholder
 *   .wc-progress          progress bar                 (+ --indeterminate)
 *   .wc-is-busy           button busy state
 * MODE MODIFIER (works on every primitive above)
 *   --dark                dark-surface variant
 * ========================================================================== */

:root {
    /* --- one size --- */
    --wc-loader-size      : 36px;
    --wc-loader-thickness : 4px;
    --wc-loader-speed     : .9s;

    /* --- LIGHT mode tokens (default) --- */
    --wc-loader-color     : #008DF2;              /* brand primary spinner */
    --wc-loader-track     : rgba(0, 0, 0, .12);
    --wc-loader-overlay-bg: rgba(240, 243, 244, 0.67);
    --wc-loader-text      : #4a5568;
    --wc-skeleton-base    : #ececec;
    --wc-skeleton-sheen   : #f6f6f6;

    --wc-loader-overlay-z : 100;
}

/* ---------------------------------------------------------------------------
 * DARK MODE — one modifier, reused on any primitive. Because these are custom
 * properties, they inherit: putting `--dark` on a wrapper themes everything
 * inside it (spinner, dots, text, skeleton) with no extra classes.
 * ------------------------------------------------------------------------- */
.wc-loader--dark,
.wc-loader-overlay--dark,
.wc-loader-dots--dark,
.wc-skeleton--dark,
.wc-progress--dark,
.wc-is-busy--dark {
    --wc-loader-color     : #ffffff;
    --wc-loader-track     : rgba(255, 255, 255, .28);
    --wc-loader-overlay-bg: rgba(20, 24, 33, .55);
    --wc-loader-text      : #e6e9ef;
    --wc-skeleton-base    : rgba(255, 255, 255, .10);
    --wc-skeleton-sheen   : rgba(255, 255, 255, .22);
}

/* ---------------------------------------------------------------------------
 * 1. Spinner — .wc-loader  (single size; theme via mode modifier)
 *    Crisp solid arc (hard edges, no blur/fade) masked into a ring. Falls back
 *    to a plain border ring where mask/conic-gradient are unsupported.
 * ------------------------------------------------------------------------- */
.wc-loader {
    display          : inline-block;
    box-sizing       : border-box;
    width            : var(--wc-loader-size);
    height           : var(--wc-loader-size);
    border-radius    : 50%;
    animation        : wc-spin var(--wc-loader-speed) linear infinite;
    flex             : 0 0 auto;

    /* fallback for old browsers: a simple two-tone ring */
    border           : var(--wc-loader-thickness) solid var(--wc-loader-track);
    border-top-color : var(--wc-loader-color);
}

/* Progressive enhancement: browsers that support mask get the trail spinner.
   The `border: 0` here removes the fallback ring so the two don't stack. */
@supports (mask: radial-gradient(#000 0, #000 0)) or (-webkit-mask: radial-gradient(#000 0, #000 0)) {
    .wc-loader {
        border     : 0;
        /* comet spinner: wc-loader-comet.svg is an arc whose per-segment alpha
           carries the comet fade (transparent tail → full head). It is used as a
           MASK, so the solid `background` supplies the colour — meaning it themes
           blue/white automatically via --wc-loader-color (light/dark), no extra
           rules. The SVG encodes the ring shape + thickness (stroke-width 4 on a
           36 viewBox); `contain` scales it to --wc-loader-size, so thickness
           stays proportional at any size. */
        background : var(--wc-loader-color);
        -webkit-mask: url("/wc/7.0.0/css/common/wc-loader-comet.svg") center / contain no-repeat;
                mask: url("/wc/7.0.0/css/common/wc-loader-comet.svg") center / contain no-repeat;
    }
}

@keyframes wc-spin { to { transform: rotate(360deg); } }

/* Self-centring modifier — drop-in for the legacy `.loader` (which centred
   itself via position:absolute + 50%/50%). Uses a negative-margin offset (NOT
   transform) so it never clashes with the wc-spin rotate. Use where a spinner
   is dropped into a positioned container without a flex wrapper. */
.wc-loader--center {
    position : absolute;
    top      : 50%;
    left     : 50%;
    margin   : calc(var(--wc-loader-size) / -2) 0 0 calc(var(--wc-loader-size) / -2);
}

/* ---------------------------------------------------------------------------
 * 2. Overlay / mask — .wc-loader-overlay
 *    Covers its positioned parent and centres a spinner (+ optional text).
 *    Markup:
 *      <div class="wc-loader-overlay">            (add --dark on dark UI)
 *        <span class="wc-loader"></span>
 *        <span class="wc-loader-overlay__text">Loading…</span>   (optional)
 *      </div>
 *    A .wc-loader inside a --dark overlay inherits white automatically.
 * ------------------------------------------------------------------------- */
.wc-loader-overlay {
    position        : absolute;
    inset           : 0;
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    gap             : 12px;
    background      : var(--wc-loader-overlay-bg);
    z-index         : var(--wc-loader-overlay-z);
    text-align      : center;
}

/* The shared .loader() plugin / bm.mask keeps a legacy `.div-mask` on the wrapper
   as the teardown hook. Some contexts (e.g. editor-v1.css) give `.div-mask` a
   tinted background that would otherwise override the veil — this higher-specificity
   rule keeps the canonical overlay veil (and still respects the --dark var). */
.wc-loader-overlay.div-mask {
    background : var(--wc-loader-overlay-bg);
}
.wc-loader-overlay--fixed { position: fixed; }

.wc-loader-overlay__text {
    font-size   : 13px;
    line-height : 1.4;
    color       : var(--wc-loader-text);
}

/* ---------------------------------------------------------------------------
 * 3. Loading dots — .wc-loader-dots
 *    Markup: <span class="wc-loader-dots"><span></span><span></span><span></span></span>
 * ------------------------------------------------------------------------- */
.wc-loader-dots {
    display     : inline-flex;
    gap         : 6px;
    align-items : center;
}
.wc-loader-dots > span {
    width         : 8px;
    height        : 8px;
    border-radius : 50%;
    background    : var(--wc-loader-color);
    animation     : wc-dot-pulse 1.4s ease-in-out infinite both;
}
.wc-loader-dots > span:nth-child(2) { animation-delay: .2s; }
.wc-loader-dots > span:nth-child(3) { animation-delay: .4s; }

@keyframes wc-dot-pulse {
    0%, 80%, 100% { opacity: .3; transform: scale(.7); }
    40%           { opacity:  1; transform: scale(1);  }
}

/* ---------------------------------------------------------------------------
 * 4. Skeleton / shimmer placeholder — .wc-skeleton
 * ------------------------------------------------------------------------- */
.wc-skeleton {
    background      : linear-gradient(90deg,
                        var(--wc-skeleton-base)  25%,
                        var(--wc-skeleton-sheen) 37%,
                        var(--wc-skeleton-base)  63%);
    background-size : 400% 100%;
    animation       : wc-shimmer 1.4s ease infinite;
    border-radius   : 4px;
}
.wc-skeleton--text  { height: .8em; margin: .25em 0; border-radius: 3px; }
.wc-skeleton--round { border-radius: 50%; }

@keyframes wc-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

/* ---------------------------------------------------------------------------
 * 5. Progress bar — .wc-progress
 *    Markup: <div class="wc-progress"><div class="wc-progress__bar" style="width:40%"></div></div>
 * ------------------------------------------------------------------------- */
.wc-progress {
    height        : 8px;
    background    : var(--wc-loader-track);
    border-radius : 999px;
    overflow      : hidden;
}
.wc-progress__bar {
    height        : 100%;
    width         : 0;
    background    : var(--wc-loader-color);
    border-radius : 999px;
    transition    : width .3s ease;
}
.wc-progress--indeterminate .wc-progress__bar {
    width     : 40%;
    animation : wc-progress-slide 1.2s ease-in-out infinite;
}
@keyframes wc-progress-slide {
    0%   { margin-left: -40%; }
    100% { margin-left: 100%; }
}

/* ---------------------------------------------------------------------------
 * 6. Button busy state — .wc-is-busy
 *    Add to any <button>/<a>: hides the label and centres a spinner.
 *    The busy spinner is sized to the button (uses 1em), independent of the
 *    standalone loader size. Add --dark on a coloured/primary button.
 * ------------------------------------------------------------------------- */
.wc-is-busy {
    position       : relative;
    color          : transparent !important;
    pointer-events : none;
    cursor         : default;
}
.wc-is-busy > * { visibility: hidden; }
.wc-is-busy::after {
    content         : "";
    position        : absolute;
    top             : 50%;
    left            : 50%;
    width           : 1.15em;
    height          : 1.15em;
    margin          : -0.575em 0 0 -0.575em;
    box-sizing      : border-box;
    border-radius   : 50%;
    animation       : wc-spin var(--wc-loader-speed) linear infinite;
    visibility      : visible;
    /* fallback ring */
    border          : 2px solid var(--wc-loader-track);
    border-top-color: var(--wc-loader-color);
}
@supports (mask: radial-gradient(#000 0, #000 0)) or (-webkit-mask: radial-gradient(#000 0, #000 0)) {
    .wc-is-busy::after {
        border     : 0;
        /* same comet SVG mask as .wc-loader (see note there); background supplies
           the colour, `contain` scales the 36-viewBox arc down to the 1.15em size. */
        background : var(--wc-loader-color);
        -webkit-mask: url("/wc/7.0.0/css/common/wc-loader-comet.svg") center / contain no-repeat;
                mask: url("/wc/7.0.0/css/common/wc-loader-comet.svg") center / contain no-repeat;
    }
}

/* ---------------------------------------------------------------------------
 * 7. Reduced-motion: only calm the decorative sweeps. Rotating spinners are
 *    left at their normal speed — a spinner MUST spin to signal "working", and
 *    rotation is not a vestibular trigger (unlike parallax/zoom). Slowing it
 *    reads as "frozen/broken", so we don't touch .wc-loader / dots / busy.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .wc-skeleton,
    .wc-progress--indeterminate .wc-progress__bar {
        animation-duration: 2.4s;
    }
}

 /************************** Common Style ***************************/
:focus-visible {
    outline: none;
}
.link,
.link-btn {
    background: none;
    color: #666666;
    cursor: pointer;
    display: inline-block;
    text-decoration: underline;
    padding: 0;
}

.link + .link,
.link-btn + .link-btn {
    margin-left: 15px;
}

.link:hover,
.link-btn:hover {
    background: none;
    color: #000000;
}
span.product-image-link.image-link.link {
    cursor: pointer;
}
.tool-icon {
    cursor : pointer;
}
.form-row {
    margin : 5px 0;
}
.form-row label {
    color: #555555;
    display: inline-block;
    font-size: 14px;
    margin: 0;
    padding: 0;
    text-align: left;
    vertical-align: middle;
    width: 150px;
}
.form-row .suggestion {
    display: inline-block;
    padding-left: 10px;
    color: #AAAAAA;
    font-style: italic;
}
input[type=submit],
input[type=button],
button,
.button,
a.button {
    background-color : #000;
    border     : none;
    color      : #fff;
    cursor     : pointer;
    display    : inline-block;
}
input[type=submit],
input[type=button],
button,
.button,
a.button {
    padding : 8px 15px;
}
span.button,
a.button {
    height: auto;
}
input[type=submit]:hover,
input[type=button]:hover,
button:hover,
a.button:hover,
.button:hover {
    background-color : #666666;
}
input[type=submit][disabled],
input[type=button][disabled],
button[disabled],
.button.disabled,
a.button.disabled {
    background  : #bfbfbf;
    border      : none;
    color       : #ACACAC;
    text-shadow : 0 0 1px #E6E6E6;
}
.strike-through {
    text-decoration: line-through;
}
.stepper .stepper-input {
    box-sizing: border-box;
    height: 36px;
    padding: 9px 28px 10px 10px;
    width: 100%;
}
.stepper .stepper-arrow {
    z-index: 0;
}
.stepper .stepper-arrow.up {
    border-radius: 0 3px 0 0;
}
.stepper .stepper-arrow.down {
    border-radius: 0 0 3px;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
/* +++++++++++++++++++++++++++++++++ pagination design +++++++++++++++++++++++++++++++++++++ */
.pagination {
    display : inline-block;
    float: right;
}
.pagination span {
    background-color : #FFFFFF;
    border           : 1px solid #CCCCCC;
    color            : #555555;
    cursor           : pointer;
    margin           : 0 2px;
    padding          : 3px 10px;
    box-shadow       : 1px 1px 0 #CCCCCC;
    display : inline-block;
}
.pagination span.first {
    margin-left : 0;
}
.pagination span.last {
    margin-right : 0;
}
.pagination span.disabled {
    color : #BEBEBE;
}
.pagination span.current {
    background : url("/wc/7.0.0/images/site/btn_bg.png") repeat-x left top;
    border     : 1px solid #4D4D4D;
    color      : #FFFFFF;
}
/* +++++++++++++++++++++++++++++++++++++++++ custom select +++++++++++++++++++++++++++++++++++++ */
.chosen-container-single {
    display        : inline-block;
    padding-right  : 24px;
    vertical-align : middle;
    min-width: 178px;
}
.chosen-container-single .chosen-single div b {
    top: 5px;
}
.chosen-container-single .chosen-single span {
    line-height: 26px;
}
.chosen-container-single.per-page-count {
    float: left;
    padding-right : 29px;
}
.chosen-container-single .chosen-drop {
    position      : absolute;
    min-width     : 100%;
    box-sizing    : border-box;
    z-index       : 100;
}
.chosen-container-single .chosen-single {
    color         : #000000;
    text-shadow   : 0 0;
    overflow      : hidden;
    text-overflow : ellipsis;
    white-space   : nowrap;
    line-height   : 19px;
}
.chosen-container-single .active-result {
    box-sizing    : border-box;
    background    : none repeat scroll 0 0 #FFFFFF;
    border-bottom : 1px solid #F1F1F1;
    display       : block;
    font-size     : 13px;
    padding       : 5px 15px;
    text-overflow : ellipsis;
    white-space   : nowrap;
}
.chosen-container .chosen-results li.depth-1 {
    padding-left : 15px;
}
.chosen-container .chosen-results li.depth-2 {
    padding-left : 30px;
}
.chosen-container .chosen-results li.depth-3 {
    padding-left : 45px;
}
.chosen-container .chosen-results li.depth-4 {
    padding-left : 60px;
}
.chosen-container .chosen-results li.depth-5 {
    padding-left : 75px;
}
.chosen-container .chosen-results li.depth-6 {
    padding-left : 90px;
}
.chosen-container .chosen-results li.depth-7 {
    padding-left : 105px;
}
.chosen-container .chosen-results li.depth-8 {
    padding-left : 120px;
}
.chosen-container .chosen-results li.depth-9 {
    padding-left : 135px;
}
.chosen-container .chosen-results li.depth-10 {
    padding-left : 150px;
}
.chosen-container .chosen-results li.depth-11 {
    padding-left : 165px;
}
.chosen-container .chosen-results li.depth-12 {
    padding-left : 180px;
}
.chosen-container .chosen-results li.depth-13 {
    padding-left : 195px;
}
.chosen-container .chosen-results li.depth-14 {
    padding-left : 210px;
}
.chosen-container .chosen-results li.depth-15 {
    padding-left : 225px;
}
.chosen-container .chosen-results li.depth-16 {
    padding-left : 240px;
}
.chosen-container .chosen-results li.depth-17 {
    padding-left : 255px;
}
.chosen-container .chosen-results li.depth-18 {
    padding-left : 270px;
}
.chosen-container .chosen-results li.depth-19 {
    padding-left : 285px;
}
.chosen-container .chosen-results li.depth-20 {
    padding-left : 300px;
}
.chosen-container .chosen-results li.depth-21 {
    padding-left : 315px;
}
.chosen-container .chosen-results li.depth-22 {
    padding-left : 330px;
}
.chosen-container .chosen-results li.depth-23 {
    padding-left : 345px;
}
.chosen-container .chosen-results li.depth-24 {
    padding-left : 360px;
}
.chosen-container .chosen-results li.depth-25 {
    padding-left : 375px;
}
.chosen-container .chosen-results li.depth-26 {
    padding-left : 390px;
}
.chosen-container .chosen-results li.depth-27 {
    padding-left : 405px;
}
.chosen-container .chosen-results li.depth-28 {
    padding-left : 420px;
}
.chosen-container .chosen-results li.depth-29 {
    padding-left : 435px;
}
.chosen-container .chosen-results li.depth-30 {
    padding-left : 450px;
}
.chosen-container.td-full-width {
    width: -moz-calc(100% - 26px);
    /* @alternate */ width: -webkit-calc(100% - 26px);
    /* @alternate */   width: calc(100% - 26px);
}
.chosen-container.validation-error {
    border : 1px solid #FF0000;
}
/* +++++++++++++++++++++++++++++++++++++++++ scroll design ++++++++++++++++++++++++++++++++++++++++ */
.scroll-left,
.scroll-right {
    display        : inline-block;
    height         : 24px;
    width          : 26px;
    vertical-align : bottom;
    border         : 1px solid #E1E1E1;
    cursor         : pointer;
}
.scroll-left {
    background : url("/wc/7.0.0/images/site/left-arrow.png") no-repeat left top;
}
.scroll-right {
    background : url("/wc/7.0.0/images/site/right-arrow.png") no-repeat left top;
}
.scroll-right.disabled,
.scroll-left.disabled {
    /* @alternate */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: alpha(opacity=40);
    /* @alternate */ -moz-opacity: 40;
    /* @alternate */ -khtml-opacity: 40;
    opacity: 0.4;
    cursor: default;
}
.scrollable-view .header {
    background    : none;
    margin        : 0;
    padding       : 0;
    border-bottom : 2px solid #CCCCCC;
    overflow      : hidden;
}
.scrollable-view {
    background    : none;
    border-bottom : 2px solid #CCCCCC;
    margin-bottom : 0;
    padding       : 0;
    overflow      : hidden;
}
.scrollable-view .scroller {
    float : right;
}
.scrollable-view > .content {
    overflow-x  : hidden;
    white-space : nowrap;
    border      : 1px #CCCCCC solid;
    padding     : 31px 42px;
}
.scrollable-view .product-block {
    border         : 1px solid #E6E6E6;
    display        : inline-block;
    margin         : 5px;
    padding        : 10px;
    vertical-align : top;
    white-space    : normal;
}
/* +++++++++++++++++++++++++++++++++++++++++ spinner design +++++++++++++++++++++++++++++++++++++ */
.ui-spinner {
    background-color : #F9F9F9;
    border           : 1px solid #E6E6E6;
    border-radius    : 5px;
    display          : inline-block;
    height           : auto !important;
    padding          : 0 18px 0 0;
    position         : relative;
}
.ui-spinner input {
    background-color : #F9F9F9;
    border-top       : none;
    border-bottom    : none;
    border-left      : none;
    border-right     : 1px #E6E6E6 solid;
    padding          : 5px;
    margin           : 0;
    text-align       : center;
    width            : 20px;
    border-radius    : 3px 0 0 3px;
}
.ui-spinner-button {
    background-image  : url("/wc/7.0.0/images/site/spinner-arrow.png");
    background-repeat : no-repeat;
    color             : #CCCCCC;
    cursor            : pointer;
    font-size         : 10px;
    height            : 13px;
    position          : absolute;
    right             : 0;
    width             : 18px;
}
.ui-spinner-button .ui-icon {
    display : none;
}
.ui-spinner-button.ui-spinner-up {
    background-position : 0 0;
    top                 : 0;
}
.ui-spinner-button.ui-spinner-up:hover {
    background-position : -18px 0;
}
.ui-spinner-button.ui-spinner-down {
    background-position : 0 -14px;
    bottom              : 0;
}
.ui-spinner-button.ui-spinner-down:hover {
    background-position : -18px -14px;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++ rechaptcha +++++++++++++++++++++++++++++++++++++ */
.recaptcha-container {
    display: inline-block;
    margin-left: -2px;
}
#recaptcha_table {
    table-layout : auto;
}
#recaptcha_table .recaptcha_input_area {
    height : auto !important;
}
#recaptcha_table #recaptcha_response_field {
    margin-top : 7px !important;
}
.simple-captcha-reload.icon {
    background: url("/wc/7.0.0/images/site/captcha-changer.png") no-repeat left top;
    display: inline-block;
    height: 16px;
    margin: 0 5px;
    width: 16px;
    cursor: pointer;
}
/* ++++++++++++++++++++++++++++ Password Strength Meter start +++++++++++++++++++++++++++++++++++++ */
.password-meter-wrap {
    display     : inline-block;
    margin-left : 10px;
    width       : 150px;
}
.password-meter-wrap .password-strength-bar {
    height  : 10px;
    display : block;
    float   : left;
}
.password-meter-wrap .very-weak {
    width      : 50px;
    background : #B30004;
}
.password-meter-wrap .weak {
    width      : 60px;
    background : #CF6100;
}
.password-meter-wrap .better {
    width      : 70px;
    background : #FC9B00;
}
.password-meter-wrap .medium {
    width      : 80px;
    background : #FFE364;
}
.password-meter-wrap .strong {
    width      : 90px;
    background : #8DCE00;
}
.password-meter-wrap .strongest {
    width      : 100px;
    background : #2FA300;
}



/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++    page content block design start  ++++++++++++++++++++++++++*/
.widget-container {
    position : relative;
    margin   : auto;
}
.body .page-content .widget-container {
    width : auto;
}
.header .widget,
.footer .widget,
.dockable .widget {
    position : absolute;
}
[section] .widget-group {
    position : absolute;
}
.body .widget,
.body .grid-block,
.body .body-section,
.body .product-widget{
    position : relative;
}
.l-fixed-container,
.r-fixed-container {
    display : flex;
}
.r-fixed-left,
.l-fixed-right {
    flex  : 1 1 0;
    width : auto;
}
.no-fixed-container {
    display : block;
}
.no-fixed-item,
.no-fixed-left,
.no-fixed-middle,
.no-fixed-right {
    display        : inline-block;
    vertical-align : top;
}
.no-fixed-container > .l-fixed-container,
.no-fixed-container > .r-fixed-container {
    display : inline-flex;
}
.double-input-row.mandatory > label:after,
.form-row.mandatory > label:after {
    color   : #FF0000;
    content : " *";
}

/********************* page content block design end ********************/

/*********************************************************************************************** Widget design start ****************************************************************************/
/* +++++++++++++++++  Widget common  design +++++++++++++++++++++++++ */
.header .widget,
.footer .widget,
.dockable .widget {
    /*overflow: hidden;*/
}
.header .widget.widget-languageSelector,
.footer .widget.widget-languageSelector {
    overflow: visible;
}
/* Hide Google Translate Element top banner that pushes layout when active. */
.goog-te-banner-frame.skiptranslate, body > .skiptranslate { display:none !important; }
body { top: 0 !important; }
.goog-tooltip, .goog-tooltip:hover { display:none !important; }
.goog-text-highlight { background:none !important; box-shadow:none !important; }
.widget > .widget-title {
    font-size      : 16px;
    padding-bottom : 10px;
}
.widget-tableOfContents .widget-title-wrapper {
    text-align: center !important;
    margin: 0 0 0.5em;
}
.widget-tableOfContents .widget-title-wrapper .widget-title {
    text-align: center !important;
    font-size: 2em;
    font-weight: 700;
    line-height: 1.2;
    margin: 0.67em 0;
}
.cart-menu-button, .search-menu-button   {
    background: none;
    cursor:pointer;
}
.cart-menu-button:after, .search-menu-button:after  {
    font-family: 'FontAwesome';
    content: "\f079";
    display: inline-block;
    font-size: 20px;
}
.search-menu-button:after {
    display: inline-flex;
    position: absolute;
    top: 0;
    left: 0;
    height: 24px;
    width: 24px;
    cursor: pointer;
    content: "";
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 20L15.8033 15.8033M18 10.5C18 6.35786 14.6421 3 10.5 3C6.35786 3 3 6.35786 3 10.5C3 14.6421 6.35786 18 10.5 18C14.6421 18 18 14.6421 18 10.5Z" stroke="%23000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-position: center;
}
.search-menu-button.close:after {
    content: "";
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --><svg width="24px" height="24px" viewBox="-0.5 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 21.32L21 3.32001" stroke="%23000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M3 3.32001L21 21.32" stroke="%23000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.cart-menu-button:after{
    content: "\f07a";
}
.widget-cart .content.show{
    float: right;
}
.widget-cart .content.show{
    float: right;
    height:100%;
    /* @alternate */ -webkit-transition: all 0.3s ease;
    /* @alternate */ -moz-transition: all 0.3s ease;
    /* @alternate */ -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    /* @alternate */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    /* @alternate */ -moz-opacity: 100;
    /* @alternate */ -khtml-opacity: 100;
    opacity: 1;
}
.header .widget.widget-cart, .header .widget.widget-search {
    overflow: visible;
}

/* +++++++++++++++++  Breadcrumb widget  design +++++++++++++++++++++++++ */

.breadcrumb-item.root .icon {
    background : url("/wc/7.0.0/images/site/breadcrumb-root.png") no-repeat left top;
    display    : inline-block;
    height     : 16px;
    width      : 16px;
}
.breadcrumb-item .separator {
    padding   : 0 5px;
    font-size : 16px;
}
.breadcrumb-item .label {
    color : #555555;
}
.breadcrumb-item .label:hover {
    color : #CCCCCC;
}
/* +++++++++++++++++  Cart widget design +++++++++++++++++++++++++ */
/* HWC-3437 — .cart-widget-img below is only specificity (0,1,0) and is the FALLBACK glyph, not the one
   most storefronts draw. Themes routinely redefine it at (0,3,0) in the active template's style.css
   with their own sprite, and template CSS loads AFTER this file (sitepage.gsp), so the theme wins on
   both counts. Do not assume this rule is what the canvas or the storefront paints — check the active
   template first. Raising the specificity here is not the fix: it would defeat every well-behaved
   theme, including the ones whose glyph is correct. */
.cart-widget-img {
    background     : url("/wc/7.0.0/images/site/cart-icon.png") no-repeat left top;
    display        : inline-block;
    height         : 24px;
    width          : 24px;
    vertical-align : middle;
}
.cart-widget-text {
    font-size      : 13px;
    padding-left   : 3px;
    vertical-align : middle;
}
/* The Cart widget "Alignment" option (config.cartAlign) used to be four `.cart-align-*` classes
   here. It is now PER-VIEWPORT (HWC-3194), which a static class cannot express, so cartWidget.gsp
   emits a uuid-scoped `#wi-<uuid> .cart-wrapper { text-align: var(--cartAlign, <desktop>) }` rule
   instead and these classes were removed rather than left as dead weight — that ID rule outranks
   any class rule, so keeping both would have made the class silently inert. */
.quick-cart {
    cursor : pointer;
}
.quick-cart-content {
    background-color : #FFFFFF;
    border           : 1px solid #DDDDDD;
    padding          : 7px;
    width            : 200px;
}
.quick-cart-content .product-name {
    width : 110px;
}
.quick-cart-content table th {
    background-color : #F1F1F1;
    border           : 1px solid #DDDDDD;
    color            : #555555;
    font-size        : 13px;
    font-weight      : normal;
    padding          : 5px;
}
.quick-cart-content table th.product-name {
    text-align : left;
}
.quick-cart-content table td {
    border     : 1px solid #DDDDDD;
    padding    : 5px;
    word-break : break-all;
}
.quick-cart-content table td.quantity {
    text-align : center;
}
.quick-cart-content table td.price {
    text-align : right;
}
.quick-cart-content table td.total {
    background-color : #F1F1F1;
}
.quick-cart-content table td.total-price {
    background-color : #F1F1F1;
    text-align       : right;
}
.cart-details-link {
    overflow    : hidden;
    padding-top : 6px;
}
.cart-details-link .checkout {
    float : left;
}
.cart-details-link .view-cart {
    float : right;
}
.cart-menu-button {
    display: none;
    width: 26px;
    height: 26px;
    background: green;
}
/* +++++++++++++++++  Image widget design +++++++++++++++++++++++++ */

.widget-image img {
    /* max-height : 100%;
    max-width  : 100%; */
    height: auto;
    max-width: 100%;
    width: auto;
}
/* Default image alignment = center, matching the image widget's server default
   (image-align ?: 'center'). Non-responsive images carry an inline text-align on the
   wrapper; responsive images do NOT (alignment comes from the per-resolution <style>
   block only when set). Without this default, a responsive image with no explicit
   alignment falls back to the browser default (left). This class rule has lower
   specificity than the inline style and the responsive `#wi-<uuid> .image-widget-wrapper`
   rule, so an explicit alignment (either mechanism) still wins. */
.image-widget-wrapper {
    text-align: center;
}

/* +++++++++++++++++  Category Banner widget design +++++++++++++++++++++++++ */

.category-banner-image img {
    height: auto;
    max-width: 100%;
    width: auto;
}

/* +++++++++++++++++  Navigation widget design +++++++++++++++++++++++++ */
.widget-navigation .image-wrapper {
    width: 20px;
    display: inline-block;
    height: 20px;
    vertical-align: middle;
    margin-right: 5px;
}
.widget-navigation .image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.widget-navigation  a span.label {
    vertical-align: middle;
}
.navigation-item a {
    display : inline-block;
    color   : #555555;
}
.navigation-item a:hover {
    color : #999999;
}
/*Menu*/
.widget-navigation .menu-title {
    display: none;
}
.widget-navigation .menu-button {
    -moz-user-select: none;
    border-radius: 5px;
    cursor: pointer;
    height: 28px;
    width: 32px;
    user-select: none;
}
.widget-navigation .menu-button em {
    background-color: #999;
    display: block;
    height: 2px;
    margin: 6px 0 5px 3px;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    width: 26px;
}
.widget-navigation .menu-button em:nth-child(1) {
    /* @alternate */ -moz-transform: rotate(0) translateX(0) translateY(0);
    /* @alternate */ -webkit-transform: rotate(0) translateX(0) translateY(0);
    /* @alternate */ -o-transform: rotate(0) translateX(0) translateY(0);
    /* @alternate */ -ms-transform: rotate(0) translateX(0) translateY(0);
    transform: rotate(0) translateX(0) translateY(0);
}
.widget-navigation .menu-button em:nth-child(2) {
    /* @alternate */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=100);
    /* @alternate */ -moz-opacity: 100;
    /* @alternate */ -khtml-opacity: 100;
    opacity: 100;
}
.widget-navigation .menu-button em:nth-child(3) {
    /* @alternate */ -moz-transform: rotate(0) translateX(0) translateY(0);
    /* @alternate */ -webkit-transform: rotate(0) translateX(0) translateY(0);
    /* @alternate */ -o-transform: rotate(0) translateX(0) translateY(0);
    /* @alternate */ -ms-transform: rotate(0) translateX(0) translateY(0);
    transform: rotate(0) translateX(0) translateY(0);
}
.widget-navigation .menu-button.close em:nth-child(1) {
    /* @alternate */ -moz-transform: rotate(45deg) translateX(6.0px) translateY(6.0px);
    /* @alternate */ -webkit-transform: rotate(45deg) translateX(6.0px) translateY(6.0px);
    /* @alternate */ -o-transform: rotate(45deg) translateX(6.0px) translateY(6.0px);
    /* @alternate */ -ms-transform: rotate(45deg) translateX(6.0px) translateY(6.0px);
    transform: rotate(45deg) translateX(6.0px) translateY(6.0px);
}
.widget-navigation .menu-button.close em:nth-child(2) {
    /* @alternate */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=0);
    /* @alternate */ -moz-opacity: 0;
    /* @alternate */ -khtml-opacity: 0;
    opacity: 0;
}
.widget-navigation .menu-button.close em:nth-child(3) {
    /* @alternate */ -moz-transform: rotate(-45deg) translateX(5px) translateY(-5px);
    /* @alternate */ -webkit-transform: rotate(-45deg) translateX(5px) translateY(-5px);
    /* @alternate */ -o-transform: rotate(-45deg) translateX(5px) translateY(-5px);
    /* @alternate */ -ms-transform: rotate(-45deg) translateX(5px) translateY(-5px);
    transform: rotate(-45deg) translateX(5px) translateY(-5px);
}
/*responsive*/

.header .widget.widget-navigation{
    overflow: visible;
    float: none;
}
.left-container .navigation-item, .responsive-navigation .navigation-item {
    display: block;
    padding:10px 20px;
    background: #fff;
}
.widget-navigation .nav-wrapper.hide {
    /* @alternate */ -webkit-transition: all 1s ease;
    /* @alternate */ -moz-transition: all 1s ease;
    /* @alternate */ -ms-transition: all 1s ease;
    /* @alternate */ -o-transition: all 1s ease;
    transition: all 1s ease;
    height:0;
}
.widget-navigation .nav-wrapper.show {
    /* @alternate */ -webkit-transition: all 1s ease;
    /* @alternate */ -moz-transition: all 1s ease;
    /* @alternate */ -ms-transition: all 1s ease;
    /* @alternate */ -o-transition: all 1s ease;
    transition: all 1s ease;
    height:500px;
}
.left-container{
    width:300px;
    float: left;
}
.left-container.open{
    /* @alternate */ -webkit-transform: translate3d(0%, 0, 0);
    /* @alternate */ -moz-transform: translate3d(0%, 0, 0);
    /* @alternate */ -ms-transform: translate3d(0%, 0, 0);
    /* @alternate */ -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
    /* @alternate */ -webkit-transition: all 1s ease;
    /* @alternate */ -moz-transition: all 1s ease;
    /* @alternate */ -ms-transition: all 1s ease;
    /* @alternate */ -o-transition: all 1s ease;
    transition: all 1s ease;
    overflow: hidden;
}
.page-container.open{
    /* @alternate */ -webkit-transform: translate3d(300px, 0, 0);
    /* @alternate */ -moz-transform: translate3d(300px, 0, 0);
    /* @alternate */ -ms-transform: translate3d(300px, 0, 0);
    /* @alternate */ -o-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
    /* @alternate */ -webkit-transition: all 1s ease;
    /* @alternate */ -moz-transition: all 1s ease;
    /* @alternate */ -ms-transition: all 1s ease;
    /* @alternate */ -o-transition: all 1s ease;
    transition: all 1s ease;
}
.page-container{
    /* @alternate */ -webkit-transform: translate3d(0%, 0, 0);
    /* @alternate */ -moz-transform: translate3d(0%, 0, 0);
    /* @alternate */ -ms-transform: translate3d(0%, 0, 0);
    /* @alternate */ -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
    /* @alternate */ -webkit-transition: all 0.4s ease;
    /* @alternate */ -moz-transition: all 0.4s ease;
    /* @alternate */ -ms-transition: all 0.4s ease;
    /* @alternate */ -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.left-container {
    bottom: 0;
    left: 0;
    margin: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 0;
    /* @alternate */ -webkit-transform: translate3d(-100%, 0, 0);
    /* @alternate */ -moz-transform: translate3d(-100%, 0, 0);
    /* @alternate */ -ms-transform: translate3d(-100%, 0, 0);
    /* @alternate */ -o-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    /* @alternate */ -webkit-transition: all 1s ease;
    /* @alternate */ -moz-transition: all 1s ease;
    /* @alternate */ -ms-transition: all 1s ease;
    /* @alternate */ -o-transition: all 1s ease;
    transition: all 1s ease;
}

/*Horizontal*/
.horizontal > .navigation-item {
    display : inline-block;
}
.horizontal .navigation-item a {
    display : inline-block;
    padding : 5px;
}

.horizontal .navigation-item-child-container {
    display : none;
}
.horizontal .navigation-item:hover > .navigation-item-child-container {
    display : inline-block;
}
.horizontal .navigation-item.has-child {
    position : relative;
}
.horizontal .has-child .navigation-item-child-container {
    background: rgba(0, 0, 0, 0) url("/wc/7.0.0/images/site/light-white-colo.png") repeat scroll left top;
    left: 150px;
    position: absolute;
    top: 0;
    width: 150px;
    z-index: 10000;
}
.horizontal > .has-child > .navigation-item-child-container {
    background: rgba(0, 0, 0, 0) url("/wc/7.0.0/images/site/light-white-colo.png") repeat scroll left top;
    left: 0;
    top: 27px;
}
.horizontal .navigation-item .navigation-item-child-container .navigation-item {
    padding : 0 5px;
}
.horizontal .navigation-item .navigation-item-child-container .navigation-item a {
    display       : block;
    position      : relative;
    border-bottom : 1px #E6E6E6 solid;
}
.horizontal .navigation-item .navigation-item-child-container .navigation-item .navigation-item-child-container {
    left     : 150px;
    position : absolute;
    top      : 0;
    width    : 150px;
}
/*Vertical*/
.vertical .navigation-item a {
    border-bottom : 1px dashed #CCCCCC;
    display       : block;
    padding       : 5px 0;
}
.vertical .navigation-item.first {
    padding-top : 0;
}
.vertical .navigation-item.last {
    padding-bottom : 0;
}
.vertical .navigation-item .navigation-item-child-container {
    display : none;
}
.vertical .navigation-item.active > a {
    color : #FF9000;
}
.vertical .navigation-item.active > .navigation-item-child-container {
    display : block;
    padding : 0 0 0 20px;
}
/*responsive menu design*/
.nav-wrapper.responsive-navigation {
    position: absolute;
    width: 100%;
    z-index: 99;
}
@media only screen and (max-width: 991px) {
    .fee-preview-mode.ff .widget-navigation.main_menu .nav-wrapper {
        width: calc(100vw - 17px);
    }
}
.nav-wrapper.responsive-navigation .navigation-item {
    position: relative;
    display: block;
}
.responsive-navigation .navigation-item.has-child .child-opener {
    position: absolute;
    right: 15px;
    top: 16px;
}
.responsive-navigation .navigation-item.has-child .child-opener::before {
    content: "\f067";
    font-family: fontawesome;
}
.responsive-navigation .navigation-item.has-child .child-opener.close::before {
    content: "\f068";
}

.responsive-navigation .navigation-item.has-child .navigation-item .child-opener {
    top: 6px;
}

/*Store Logo*/
/* HWC-3971: natural size capped at the container, same as `.widget-image img` — `width:100%` upscaled a small logo into a blurry full-width banner and made the panel's "Auto" unreachable. */
.widget.widget-storeLogo img {
    width: auto;
    height: auto;
    max-width: 100%;
}
/* Default logo Alignment = center (HWC-2905); an explicit per-breakpoint alignment still wins via `#wi-<uuid> .logo-widget-wrapper`. */
.widget.widget-storeLogo .logo-widget-wrapper {
    text-align: center;
}
/* +++++++++++++++++  Gallery widget design +++++++++++++++++++++++++ */

/* Site Tabify tab */
.bmui-tab-panel[aria-hidden=true] {
    display : none;
}
/* The Nivo Slider styles */
/* If an image is wrapped in a link */
/* The slices and boxes in the Slider */
/* Caption styles */
/* Direction nav styles (e.g. Next & Prev) */
/* Control nav styles (e.g. 1,2,3...) */

.shipping.type-label.hidden,
.delivery.type-label.hidden {
    display: none;
}
input.is-different-shipping-checkbox {
    opacity: 1 !important;
}
span.type-label.delivery {
    padding-left: 30px;
}
.wc-icon{
    height: 20px;
    width: 20px;
}
.hidden-delivery-checkbox{
    display: none;
}
.wc-icon.medium{
    height: 24px;
    width: 24px;
}
.wc-icon.large{
    height: 32px;
    width: 32px;
}
.wc-icon {
    fill: #929291;
}
.wc-icon.brand {
    fill: #1198C5;
}
.wc-icon.white {
    fill: #fff;
}
.checkout-page .section.shipping span.title.hidden {
    display: none;
}
@font-face {
    font-family: "Flaticon";
    src: url("/wc/7.0.0/font/Flaticon.eot");
    src: url("/wc/7.0.0/font/Flaticon.eot?#iefix") format("embedded-opentype"),
    url("/wc/7.0.0/font/Flaticon.woff") format("woff"),
    url("/wc/7.0.0/font/Flaticon.ttf") format("truetype"),
    url("/wc/7.0.0/font/Flaticon.svg#Flaticon") format("svg");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'nxicons';
    src: url('/wc/7.0.0/font/nxicons.woff'),
    url('/wc/7.0.0/font/nxicons.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@media only screen and (max-width: 767px) {
    .fee-preview-mode.ff .widget-search .search-form {
        width: calc(100vw - 17px);
    }
}


@keyframes loading-spinner-animation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ------------------------------------------
 // Multi Language popup design
--------------------------------------------*/
.popup.multi-language {
    padding: 30px 20px 35px;
    border-radius: 10px;
}
.popup.multi-language .title,
.popup.multi-language .label {
    text-align: center;
}
.popup.multi-language .title {
    font-size: 18px;
    max-width: 310px;
    margin: 0 auto;
    font-weight: 600;
    padding-bottom: 15px;
}
.popup.multi-language .label {
    font-size: 16px;
    padding-bottom: 10px;
}
.popup.multi-language .select-wrapper {
    /* @alternate */ display: -webkit-box;
    /* @alternate */ display: -ms-flexbox;
    display: flex;
    /* @alternate */ -webkit-box-align: center;
    /* @alternate */ -ms-flex-align: center;
    align-items: center;
    padding-bottom: 20px;
}
.popup.multi-language .select-wrapper .form-item {
    /* @alternate */ -webkit-box-flex: 1;
    /* @alternate */ -ms-flex-positive: 1;
    flex-grow: 1;
    /* @alternate */ -ms-flex-negative: 1;
    flex-shrink: 1;
    margin-right: 10px;
    padding-right: 0;
}
.popup.multi-language .chosen-container a,
.popup.multi-language .language-select-continue {
    height: 34px;
    border-radius: 3px;
}
.popup.multi-language .language-select-continue {
}
.popup.multi-language .language-popup-close {
    text-align: center;
}
.popup.multi-language .language-select-cancel {
    text-decoration: underline;
    cursor: pointer;
    background: none;
    padding: 0;
    color: #222;
}
.popup.multi-language .language-select-cancel:hover {
    text-decoration: none;
    color: #898888;
}

/* Language-suggestion popup. Shares .popup.multi-language's shell (padding, centred title/label) and
   mirrors the country popup's action pair: a solid primary button plus an understated text link for
   declining, so keeping the current language never reads as the discouraged choice. Its own primary
   button is centred rather than inline, because this popup has no select to sit beside. */
.popup.multi-language.language-suggestion .select-wrapper {
    justify-content: center;
}
.popup.multi-language .language-suggestion-switch {
    height: 34px;
    padding: 0 22px;
    border-radius: 3px;
    cursor: pointer;
}
.popup.multi-language .language-suggestion-keep {
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    color: #222;
}
.popup.multi-language .language-suggestion-keep:hover {
    text-decoration: none;
    color: #898888;
}
div.country-select.inside input {
    border: 1px #ccc solid;
    height: 36px;
    width: 100%;
}
div.country-select .country-list {
    width: 100%;
}
div.country-select.inside .flag-dropdown {
    right: 0;
}
.widget-article .article-item .article-content iframe,
.widget-html .html-widget-element-content iframe {
    max-width: 100%;
}
.fee-widget-content .article-content p {
    overflow-wrap: break-word;
}
@media (max-width: 767px) {
    div.col-0,
    div.col-1,
    div.col-2,
    div.col-3,
    div.col-4,
    div.col-5 {
        display: block;
        width: 100% !important;
    }
}

.fee-fixed-width-content {
    padding-left: calc(50% - 585px) !important;
    padding-right: calc(50% - 585px) !important;
}
.widget-blogPost.fee-hide-read-more-blog-widget-button .blog-read-more {
    display: none;
}


/*section related css*/
.fee-widget-content:not(.fee-empty-content) {
    height: 100%;
    width: 100%;
}
.fee-column-section-added-from-editor.fee-full-width-row:not(.dont-apply-flex){
    /* @alternate */ display: -webkit-box;
    /* @alternate */ display: -ms-flexbox;
    display: flex;
    /* @alternate */ -ms-flex-pack: distribute;
    justify-content: space-around;
    height: auto !important;
}

.fee-column-section-added-from-editor.v-split.grid-block:not(.dont-apply-flex) > .grid-block {
    height: auto !important;
    /* @alternate */ -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* @alternate */ display: -webkit-box;
    /* @alternate */ display: -ms-flexbox;
    display: flex;
    /* @alternate */ -webkit-box-orient: vertical;
    /* @alternate */ -webkit-box-direction: normal;
    /* @alternate */ -ms-flex-direction: column;
    flex-direction: column;
}

.page-content .v-split-container > .fee-column-section-added-from-editor.v-split.grid-block:not(.dont-apply-flex) {
    /* @alternate */ display: -webkit-box;
    /* @alternate */ display: -ms-flexbox;
    display: flex;
}
/* Mirror the editor-only `.fee .no-fixed-container { display: flex }` rule
   for storefront. In the editor body the `.fee`-scoped rule flexes every
   `.no-fixed-container` row, so columns (col-half-50, col-third-33, etc.)
   sit side-by-side. On storefront the base `.no-fixed-container
   { display: block }` won, so any row whose class combination didn't
   trigger one of the legacy flex rules (e.g. the seed product auto-page
   row, or any future layout saved without `.fee-column-section-added-
   from-editor`) ended up with its columns stacked vertically.
   This rule generalises the convergence: any `.no-fixed-container` row
   directly inside `.page-content > .v-split-container` flexes on
   storefront the same way it does in the editor — covering main page
   bodies, auto-pages, mega menu submenus, popup content, and owl
   carousel slides (all of which normalise to the same hierarchy). The
   `:not(.dont-apply-flex)` opt-out is preserved so anything that
   explicitly wants block layout still gets it. Header/footer/dockable
   sections are not affected because their `.widget-container` is not
   wrapped in `.page-content`. */
.page-content .v-split-container > .no-fixed-container.v-split.grid-block:not(.dont-apply-flex) {
    /* @alternate */ display: -webkit-box;
    /* @alternate */ display: -ms-flexbox;
    display: flex;
}
.page-content .v-split-container > .v-split.grid-block.fee-section-act-row {
    display: block;
}
.fee-section-act-row.fee-full-width-row {
    display: block;
}
/* HWC-704 grid header/footer column align: align-items on a column only moves a widget
   that is shrink-to-fit. The editor persists this as a marker class on the column (the
   shared layout.css child-width write is suppressed on header/footer save). */
.fee-col-align-child-fit > .fee-widget-content > .widget {
    width: fit-content;
    max-width: 100%;
}
/* HWC-704 grid header/footer — render unification (Phase 1 spike).
   A gridded layout section is identified by `.page-content` inside `.header`/`.footer`
   (the native grid markup the page-body editor produces). Legacy flat headers/footers have
   NO `.page-content`, so they are untouched by every rule below.

   The legacy canvas pins each header/footer widget absolutely:
     - `.header .widget, .footer .widget { position:absolute }`        (core 2-class rule, this file)
     - `#wi-<uuid> { position:absolute; top; right; width; height }`   (per-widget id rule, compiled
        into the page's pagecss from `widget.css`)
   Class selectors cannot out-specify an id selector, so neutralizing the id-keyed coords needs
   either a data-level strip or `!important`. For the gridded case the coord rule is auto-generated
   (never author `!important`), so `!important` here is safe and lets the widgets flow in the grid. */
.header .page-content .widget,
.footer .page-content .widget,
.header .page-content .widget-group,
.footer .page-content .widget-group {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
}
/* Legacy fixed canvas height (`.header > .widget-container { height: 232px }` from layout.css)
   collapses to natural flow for gridded sections only (scoped via :has to the `.page-content` child). */
.header > .widget-container:has(> .page-content),
.footer > .widget-container:has(> .page-content) {
    height: auto !important;
    width: auto !important;
}
/*section related css*/
.widget-gallery .swiper-horizontal {
    padding-bottom: 15px;
}


/* +++++++++++++++++  Login widget design +++++++++++++++++++++++++ */

.login-form {
    background-color: #F9F9F9;
    padding: 30px;
    width: 100%;
    box-sizing: border-box;
}
.login-form .submit-row {
    float : right;
}
/* The Login WIDGET renders its submit row as the LAST row of the form (loginWidget.gsp), so the
   legacy float above must not apply there: `.login-form` has no clearing, and a floated final row
   is not contained by it — the button would drop out of the grey panel. Matches what
   `.page-login .login-form .submit-row` (user-registration.css) and the product-page copy in
   auto_page/product.css already do; those two are scoped to contexts this widget does not always
   render in, which is why the rule is repeated here rather than reused. */
.widget-login .login-form .submit-row {
    float: none;
}
.login-form .remember {
    margin : 12px 0 22px;
    width  : 230px;
}
.login-form .remember label {
    display : none;
}
.login-form input[type="checkbox"] {
    display : inline-block;
    width   : auto;
}
.login-form input {
    display: block;
    width: 100%;
}
.login-form .form-row.simple-captcha label {
    display : none;
}
.login-form .lost-password a {
    color : #FF0000;
}
.login-form .lost-password a:hover {
    color : #F39292;
}
.login-form .account-register a {
    color : #00CED1;
}
.login-form .account-register a:hover {
    color : #3FEAEC;
}

.registration-verification-message {
    font-size: 14px;
    max-width: 600px;
    text-align: center;
    margin: 0 auto 30px;
}

.registration-verification-message .resend-verification-button {
    padding: 6px 25px 8px 25px;
    display: inline-block;
    background-color: #000;
    border-radius: 3px;
    color: #ffffff;
    font-size: 16px;
    line-height: 26px;
    margin-top: 15px;
    cursor: pointer;
}

.registration-verification-message .resend-verification-button:hover {
    background-color: #2b2b2b;
}

/*login navigation*/

.widget-navigation .nav-profile-logged-in {
    /* @alternate */ display: -webkit-box;
    /* @alternate */ display: -ms-flexbox;
    display: flex;
    /* @alternate */ -webkit-box-pack: justify;
    /* @alternate */ -ms-flex-pack: justify;
    justify-content: space-between;
    /* @alternate */ -webkit-box-align: center;
    /* @alternate */ -ms-flex-align: center;
    align-items: center;
}
.widget-navigation .nav-profile-logged-in .nav-profile-info-wrapper {
    /* @alternate */ display: -webkit-box;
    /* @alternate */ display: -ms-flexbox;
    display: flex;
    /* @alternate */ -webkit-box-align: center;
    /* @alternate */ -ms-flex-align: center;
    align-items: center;
    gap: 10px;
}
.widget-navigation .nav-profile-logged-in .nav-profile-pic {
    height: 32px;
    width: 32px;
    /* @alternate */ -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50%;
}
.widget-navigation .nav-profile-logged-in .nav-customer-name {
    font-size: 15px;
    font-weight: 600;
}
.widget-navigation .nav-profile-logged-in .autoGeneratedPage {
    padding: 0;
    border: none;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    color: #333333;
}
.widget-navigation .nav-profile-not-logged-in {
    text-align: center;
    /* @alternate */ display: -webkit-box;
    /* @alternate */ display: -ms-flexbox;
    display: flex;
    /* @alternate */ -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    /* @alternate */ -webkit-box-pack: center;
    /* @alternate */ -ms-flex-pack: center;
    justify-content: center;
}
.widget-navigation .navigation-item .nav-profile-not-logged-in > .autoGeneratedPage {
    border: none;
    display: inline-block!important;
    width: auto;
    background-color: #000000;
    padding: 8px 42px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}
.widget-navigation .nav-profile-not-logged-in .nav-profile-suggestion-wrapper {
    /* @alternate */ display: -webkit-box;
    /* @alternate */ display: -ms-flexbox;
    display: flex;
    /* @alternate */ -webkit-box-pack: justify;
    /* @alternate */ -ms-flex-pack: justify;
    justify-content: space-between;
    /* @alternate */ -webkit-box-align: center;
    /* @alternate */ -ms-flex-align: center;
    align-items: center;
    width: 100%;
    padding-top: 20px;
}
.widget-navigation .nav-profile-not-logged-in .nav-customer-qa {
    font-size: 15px;
    font-weight: 600;
    color: #000000;
}
.widget-navigation .nav-profile-not-logged-in .customer-register-link a {
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: #333333;
    border: none;
    text-decoration: underline;
}



.profile-responsive-mask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0, .5);
}

.maintenance-message-block {
    background-color: #f9f9f9;
    max-width: 600px;
    margin: 50px auto;
    padding: 30px 20px;
}

.maintenance-message-block h1 {
    margin: 0;
    font-family: "Segoe UI", Verdana, Arial, sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: normal;
    color: #222;
}
/*variation  css*/
/*Bulk variation design*/
/*admin panel*/
/* ========================== New Variation =========================== */
/* Layout only — no background/border/border-radius/color here. Both buttons already carry the
   site-wide .button class (see incompleteDataCartPopup.gsp), so they should pick up whatever the
   store's own theme defines for .button (colour, pill shape, hover state) instead of this popup
   forcing its own hardcoded black/square look on top of it. */
/* Cancel: spacing only — no colour/border override, so it renders exactly like the theme's own
   plain .button (whatever solid colour/shape that store uses), same as Continue/Add-to-cart. */
/* Custom checkout fields (product-custom-fields customFieldBlock.gsp) inside the add-to-cart
   popup — bring the radio/checkbox groups and file input up to the same card-row look already
   established above by .variation-radio-group/.variation-radio-option.
   Scoped to .add-cart-information-popup (the class actually present at runtime — the popup
   framework replaces incompleteDataCartPopup.gsp's own .incomplete-info-for-variation-ui wrapper
   class with its own, so that selector never matched). */
/* product-custom-fields' own base.css gives this input a custom appearance (appearance:none,
   20x20, a hand-built checked-state via outline:6px/offset:-10px). That's a DIFFERENT rendering
   system from the variation selector's plain native radio, so the two pill types could never be
   truly identical in size while each kept its own input style. Reset fully back to native
   rendering here so both look and measure exactly the same. */
/* product-custom-fields' own base.css (.custom-field-container-for-widget ...) still carries the
   old vertical-stack rules — a bigger font-size on the option label and a margin-top on every
   sibling wrapper after the first. Both have higher/equal specificity than the rules above and
   were winning, making "htrh" look bigger/uneven vs the variation pills. Out-specify them here
   instead of touching that shared file. */

/*Data Type VIdeo*/
[data-style-type="video"] {
    position: relative;
}
.video-element-container video[data-style-type="video"],
.fee-widget-editable .video-element-container video[data-style-type="video"] {
    pointer-events: auto;
}
.video-element-container {
    position: relative;
    width: 100%;
}
.snippet-video-thumbnail {
    position: relative;
    z-index: 10501;
    cursor: pointer;
    display: block;
    line-height: 0;
    overflow: hidden;
}
.snippet-video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.snippet-video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    pointer-events: none;
    z-index: 1;
    line-height: 0;
    width: 44px;
    height: 44px;
    border-radius: 100%;
    overflow: hidden;
}
.snippet-video-play-icon img {
    display: block;
    width: 44px;
    height: 44px;
}
.wc-video-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.wc-video-lightbox-overlay.wc-video-lightbox-active {
    opacity: 1;
}
.wc-video-lightbox-overlay-content {
    position: relative;
    width: 90%;
    max-width: 960px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wc-video-lightbox-video {
    width: 100%;
    max-height: calc(100vh - 100px);
    display: block;
}
.wc-video-lightbox-content {
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
}
.wc-video-lightbox-close {
    position: absolute;
    top: 0;
    right: -50px;
    background: rgba(0, 0, 0, 0.4);
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s, transform 0.15s;
    line-height: 1;
    z-index: 3;
    margin: 0;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.wc-video-lightbox-close:hover {
    background: rgb(255 255 255);
    color: #000;
}
@media only screen and (max-width: 1366px) {
    .wc-video-lightbox-close {
        top: -36px;
        right: 10px;
    }
}
.vs-player-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.45) 100%);
    transition: background 0.2s;
}
/* In editor mode the thumbnail must not intercept widget-level clicks until the widget is in edit mode */
body.fee-editor-active .snippet-video-thumbnail {
    pointer-events: none;
}
.video-element-container .video-item{
    display: inline-block;
    width: 100%;
    height: 100%;
}
.video-element-container .video-item .snippet-video-thumbnail,
.video-element-container .video-item video,
.video-element-container .video-item iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body.fee-editor-active .fee-widget-editable .snippet-video-thumbnail,
body.fee-editor-active .fee-widget-selected .snippet-video-thumbnail {
    pointer-events: auto;
    cursor: pointer;
}
.snippet-video-thumbnail img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
}

/* Newsletter*/

.newsletter .message-block.info-message {
    position: absolute;
    top: -47px;
}


.widget-newsletter .newsletter.custom-newsletter .fee-nl-row {
    display: flex;
    gap: 8px;
    align-items: end;
}
.widget-newsletter .newsletter.custom-newsletter .fee-nl-row .form-row {
    margin-bottom: 0;
    flex: 1 1 auto;
    min-width: 0;
}
.widget-newsletter .newsletter.custom-newsletter .fee-nl-row label {
    margin-bottom: 4px;
}
.widget-newsletter .newsletter.custom-newsletter .fee-nl-row .form-row.button-container {
    flex: 0 0 auto;
    margin: 0;
}
.widget-newsletter .newsletter.custom-newsletter button.newsletter-subscription.submit-button {
    height: 40px;
    padding: 6px 26px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
}
/* Layout modes are placeholder-only — hide the field labels (keep the conditions checkbox label). */

/* Button on its own row, centered, beneath the fields. */
.widget-newsletter .newsletter.custom-newsletter .fee-nl-btn-below {
    margin-top: 40px;
    margin-bottom: 0;
    text-align: center;
}
.widget-newsletter .newsletter.custom-newsletter .fee-nl-btn-below .form-row {
    margin-bottom: 0;
}

/* conditions checkbox — its own line below the fields. Scoped to .newsletter so it also
   styles the floating-subscription popup (which is .newsletter but not .inplace, and renders
   outside .widget-newsletter). */
.widget-newsletter .newsletter.custom-newsletter  .newsletter-conditions-row {
    margin-top: 15px;
    margin-bottom: 0;
}
.widget-newsletter .newsletter.custom-newsletter  .newsletter-conditions-label {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: default;
    font-weight: normal;
    width: 100%;
    pointer-events: none;
}
.widget-newsletter .newsletter.custom-newsletter  .newsletter-conditions-text a {
    pointer-events: auto;
}
.widget-newsletter .newsletter.custom-newsletter  .newsletter-conditions-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin: 0;
    border: 2px solid #c9d0d8;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    vertical-align: middle;
}
.widget-newsletter .newsletter.custom-newsletter  .newsletter-conditions-checkbox:checked {
    background-color: #444;
    border-color: #444;
}
.widget-newsletter .newsletter.custom-newsletter  .newsletter-conditions-checkbox::after {
    content: '';
    position: absolute;
    display: none;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 10px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}
.widget-newsletter .newsletter.custom-newsletter .newsletter-conditions-checkbox:checked::after {
    display: block;
}
.widget-newsletter .newsletter.custom-newsletter  .newsletter-conditions-checkbox:focus-visible {
    outline: 2px solid #6b7280;
    outline-offset: 2px;
}
.widget-newsletter .newsletter.custom-newsletter  .newsletter-conditions-text {
    font-size: 16px;
    line-height: 1.4;
    color: #000;
}
.widget-newsletter .newsletter.custom-newsletter  .newsletter-conditions-text a {
    text-decoration: underline;
}
/* split layouts: widget title moves to the left, the form sits to its right */
.widget-newsletter:has(.newsletter.custom-newsletter.fee-nl-split) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    justify-content: center;
}
.widget-newsletter:has(.newsletter.custom-newsletter.fee-nl-split) > .widget-title-wrapper {
    flex: 1 1 200px;
    text-align: left !important;
    margin: 0;
}
.widget-newsletter:has(.newsletter.custom-newsletter.fee-nl-split) > .newsletter.custom-newsletter.fee-nl-split {
    flex: 1.2 1 280px;

}
/* layout2 + layout3: centered title above a centered form block */
.widget-newsletter:has(.newsletter.custom-newsletter.fee-nl-layout2) > .widget-title-wrapper,
.widget-newsletter:has(.newsletter.custom-newsletter.fee-nl-layout3) > .widget-title-wrapper {
    text-align: center !important;
}
.widget-newsletter .newsletter.custom-newsletter.fee-nl-layout2,
.widget-newsletter .newsletter.custom-newsletter.fee-nl-layout3 {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
.widget-newsletter .newsletter.custom-newsletter.fee-nl-layout2 .fee-nl-row {
    justify-content: center;
}

/*Newsletter layout desing*/
.widget-newsletter .newsletter.custom-newsletter  input:is([type="text"], [type="email"]) {
    border: 1px solid #000000;
    width: 100%;
    max-width: 100%;
    border-radius: 4px;
    padding: 10px 12px;
    font-weight: 400;
    font-size: 14px;
    height: 40px;
    line-height: 1;
    display: block;
    box-sizing: border-box;
}
.widget-newsletter .newsletter.custom-newsletter  .form-row .errorlist {
    bottom: -22px;
}
.form-row.newsletter-conditions-row label.newsletter-conditions-label {
    width: auto;
}

/* ── Floating subscription popup redesign ────────────────────────────────── */

/* Strip popup-framework padding so our inner div controls all spacing */
.newsletter-floating-subscription-popup {
    padding: 0 !important;
    overflow: hidden;
    border-radius: 12px !important;
}
.newsletter-floating-subscription-popup .floating-subscription-popup {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    min-width: 400px;
    max-width: 500px;
    width: 100%;
}

/* ── Dark teal header ── */
.newsletter-floating-subscription-popup .floating-subscription-popup > .header {
    background: #1d5068;
    padding: 24px 24px 28px;
    position: relative;
}

/* Envelope icon box */
.newsletter-popup-header-icon {
    width: 46px;
    height: 46px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: #fff;
}
.floating-subscription-popup  .header {
    background: #004156;
    border-color: #004156;
}
.floating-subscription-popup button.newsletter-subscription.submit-button {
    width: 100%;
    height: 46px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 18px;
    line-height: 100%;
    text-align: center;
    vertical-align: middle;
}
.floating-subscription-popup button.newsletter-subscription.submit-button:hover {
    background: #343434;
}
/* X close button */
.newsletter-floating-subscription-popup .floating-subscription-popup > .header .close-popup {
    position: absolute;
    top: 14px;
    right: 16px;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0;
    transition: background 0.12s;
}
.newsletter-floating-subscription-popup .floating-subscription-popup > .header .close-popup::after {
    content: '\00D7';
    font-size: 22px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.85);
}
.newsletter-floating-subscription-popup .floating-subscription-popup > .header .close-popup:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Title and subtitle */
.newsletter-floating-subscription-popup .newsletter-subscription-popup-title-wrapper {
    margin-top: 0;
}
.newsletter-floating-subscription-popup .newsletter-subscription-popup-title-wrapper .title {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px;
    line-height: 1.3;
}
.newsletter-floating-subscription-popup .newsletter-subscription-popup-title-wrapper .sub-title {
    color: rgba(255, 255, 255, 0.72);
    font-size: 15px;
    margin: 0;
    line-height: 1.55;
    font-weight: normal;
}
.newsletter-floating-subscription-popup span.close-popup.close-icon {
    filter: brightness(0) invert(1);
}
.newsletter-floating-subscription-popup .form-row label {
    display: block;
    width: 100%;
    margin-bottom: 6px;
}
.newsletter-floating-subscription-popup .form-row {
    position: relative;
    margin-bottom: 16px;
    margin-top: 0;
}
.newsletter-floating-subscription-popup .body {
    background-color: #FFFFFF;
    padding: 25px 25px;
}
.newsletter-floating-subscription-popup .form-row input:is([type="text"], [type="email"]) {
    width: 100%;
    display: block;
    border: 1px solid #DDDDDD;
    height: 44px;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 5px;
}
.form-row.newsletter-conditions-row label.newsletter-conditions-label {
    width: auto;
    display: flex;
    align-items: center;
    margin: 0;
}
.newsletter-floating-subscription-popup .form-row .errorlist {
    position: relative;
    bottom: inherit;
}
/* ── White form body ── */
.newsletter-floating-subscription-popup .floating-subscription-popup > .body {
    padding: 24px 24px 8px;
    background: #fff;
}
.newsletter-floating-subscription-popup .floating-subscription-popup > .body .form-row {
    margin-bottom: 16px;
}

/* Labels */
.newsletter-floating-subscription-popup .floating-subscription-popup .body .form-row label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}
.newsletter-floating-subscription-popup .floating-subscription-popup .body .form-row.mandatory label::after {
    content: ' *';
    color: #ef4444;
}

/* Inputs — !important overrides global WC input defaults */
.newsletter-floating-subscription-popup .floating-subscription-popup .body input:is([type="text"], [type="email"]) {
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    color: #374151 !important;
    background: #fff !important;
    outline: none !important;
    height: 46px !important;
    line-height: 1.4 !important;
    transition: border-color 0.15s !important;
    display: block !important;
    box-shadow: none !important;
}
.newsletter-floating-subscription-popup .floating-subscription-popup .body input:is([type="text"], [type="email"]):focus {
    border-color: #6b7280 !important;
    box-shadow: none !important;
}

/* ── Footer: full-width Subscribe button ── */
.newsletter-floating-subscription-popup .floating-subscription-popup > .popup-bottom.footer {
    padding: 8px 24px 24px;
    background: #fff;
}
.newsletter-floating-subscription-popup .floating-subscription-popup > .popup-bottom.footer .button-item {
    display: block;
}
.newsletter-floating-subscription-popup .floating-subscription-popup .newsletter-subscription.submit-button {
    width: 100%;
    background: #111827;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 14px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    display: block;
    text-align: center;
    line-height: 1;
}
.newsletter-floating-subscription-popup .floating-subscription-popup .newsletter-subscription.submit-button:hover {
    background: #374151;
}
.floating-subscription-popup {
    max-width: 580px;
}
.floating-subscription-popup .popup-bottom.footer {
    border: 0;
    background: #fff;
    padding: 0 25px 25px 25px;
}
.newsletter-floating-subscription-popup .newsletter-conditions-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
}
.newsletter-floating-subscription-popup .newsletter-conditions-row > .errorlist {
    flex-basis: 100%;
    order: 1;
    margin-top: 4px;
}
.newsletter-floating-subscription-popup .newsletter-conditions-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: default;
    font-weight: normal;
    pointer-events: none;
}
.newsletter-floating-subscription-popup .newsletter-conditions-label p {
    margin: 0;
}
.newsletter-floating-subscription-popup .newsletter-conditions-text a {
    pointer-events: auto;
}
.newsletter-floating-subscription-popup .newsletter-conditions-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    flex-shrink: 0;
    margin: 0;
    border: 2px solid #c9d0d8;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    transition: border-color 0.15s, background-color 0.15s;
}
.newsletter-floating-subscription-popup .newsletter-conditions-checkbox:checked {
    background-color: #6b7280;
    border-color: #6b7280;
}
.newsletter-floating-subscription-popup .newsletter-conditions-checkbox::after {
    content: '';
    position: absolute;
    display: none;
    left: 4px;
    top: 0px;
    width: 4px;
    height: 10px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}
.newsletter-floating-subscription-popup .newsletter-conditions-checkbox:checked::after {
    display: block;
}

body.wc-ai-agent-generated-page button.Zebra_DatePicker_Icon.fee-identical-sewc-elm.Zebra_DatePicker_Icon_Inside {
    opacity: 0;
}

.widget-newsletter .message-block.error-message,
.widget-newsletter .message-block.success-message {
    position: absolute;
    top: -48px;
    width: auto;
}
/* HWC-2954: a spacer authored in the carousel ITEM editor saves its editor-only
   "<span>Spacer</span>" label INSIDE the item's raw HTML (page spacers re-render via
   spacerWidget.gsp, which emits the span only in edit mode — carousel items are stored
   markup, so the label leaks to every render). Hide it wherever the carousel renders
   (live site + editor canvas); the item sub-editor canvas has no .widget-owlCarousel
   wrapper, so its editing label keeps showing. */

/* Element device visibility (widgets, sections, columns) — HWC-2958: moved here from
   site-responsive-base.css, which only loads on RESPONSIVE sites; wc-hide-* was dead on
   non-responsive sites. site-base.css loads in both modes (ResourceList.fixedSiteCss).
   :not(.fee-editor-active) keeps hidden elements visible while EDITING (watermark chrome
   shows instead) WITHOUT the editor forcing a display value back on — the old
   `display:flex !important` editor override broke v-split (block) section layouts. */
@media (max-width: 767px) {
    body:not(.fee-editor-active) .wc-hide-mobile {
        display: none !important;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    body:not(.fee-editor-active) .wc-hide-tablet {
        display: none !important;
    }
}
@media (min-width: 992px) {
    body:not(.fee-editor-active) .wc-hide-desktop {
        display: none !important;
    }
}

/* Visually hidden but read by assistive tech and search engines. Gives generic action links
   ("Read more") a descriptive accessible/crawlable name without changing the visible design
   (Lighthouse SEO link-text audit). Used by GSP templates and js/site/a11y-enhancements.js. */
.wc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

 /*product page previous page button design*/
.widget-productName .previous-page {
    font-size: 16px;
    font-weight: 500;
    padding: 10px 15px;
    border: 2px #000 solid;
    display: inline-block;
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 300ms ease-out 0s;
}
.widget-productName .previous-page:hover {
    border: 2px #000 solid;
    background-color: #000000;
    color: #ffffff;
}

.widget-productName .previous-page i {
    font-size: 14px;
    margin-right: 5px;

}
 .form-row .pass-input-wrapper {
    display: block;
    position: relative;
}
.form-row .pass-input-wrapper input {
    padding: 10px 35px 10px 15px;
}

.form-row .pass-input-wrapper .toggle-password {
    font-size: 0;
    width: 32px;
    height: 40px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 21;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: 26px;
    background-position: center;
}

.form-row .pass-input-wrapper .toggle-password.hide {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cpath%20d%3D%22M17.703%205L15.1935%207.35275C14.241%207.03175%2013.179%206.8285%2012.0113%206.8285C6.3345%206.8285%203%2011.7417%203%2011.7417C3%2011.7417%204.446%2013.955%206.8595%2015.5952L4.67625%2017.777L5.73675%2018.8375L18.7642%206.06125L17.703%205ZM13.191%209.33425C10.725%208.2445%208.18025%2010.7652%209.24225%2013.2387L7.94775%2014.519C6.58725%2013.649%205.529%2012.5315%204.90275%2011.774C6.0225%2010.538%208.5155%208.3285%2012.0113%208.3285C12.7065%208.3285%2013.3582%208.41775%2013.9688%208.56475L13.191%209.33425ZM11.0287%2014.9075L14.8463%2011.1628C15.609%2013.496%2013.344%2015.713%2011.0287%2014.9075ZM21%2011.7417C21%2011.7417%2017.811%2017.3285%2012.0113%2017.3285C10.977%2017.3285%2010.0147%2017.1103%209.123%2016.7758L10.3335%2015.5885C10.8697%2015.7333%2011.427%2015.8285%2012.0113%2015.8285C15.6045%2015.8285%2018.0892%2013.1832%2019.1392%2011.8055C18.5925%2011.189%2017.6722%2010.313%2016.449%209.5915L17.5657%208.4965C19.8022%209.9215%2021%2011.7417%2021%2011.7417Z%22%20fill%3D%22%23696969%22%2F%3E %3C%2Fsvg%3E");
}
.form-row .pass-input-wrapper .toggle-password.show {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cpath%20d%3D%22M12.0113%208.5C15.5745%208.5%2018.0585%2010.759%2019.1392%2011.977C18.0885%2013.3547%2015.6045%2016%2012.0113%2016C8.69625%2016%206.06375%2013.348%204.90275%2011.9448C6.0225%2010.7095%208.5155%208.5%2012.0113%208.5ZM12.0113%207C6.3345%207%203%2011.9132%203%2011.9132C3%2011.9132%206.62625%2017.5%2012.0113%2017.5C17.811%2017.5%2021%2011.9132%2021%2011.9132C21%2011.9132%2017.7818%207%2012.0113%207ZM12%2012.25L9.48%2010.6218C9.17625%2011.0905%209%2011.65%209%2012.25C9%2013.9068%2010.3432%2015.25%2012%2015.25C13.6568%2015.25%2015%2013.9068%2015%2012.25C15%2010.5932%2013.6568%209.25%2012%209.25C11.4435%209.25%2010.9215%209.4015%2010.4753%209.6655L12%2012.25Z%22%20fill%3D%22%23696969%22%2F%3E %3C%2Fsvg%3E");
}

 /*
 * editor-common-site.css - the SITE-SHARED subset of editor-common.css (HWC audit row #11,
 * "Reduce unused CSS"). The full editor-common.css had grown into ~150KB of editor/admin
 * plugin-management UI (.common-plugin-*, .mc-*, .klv-*, .wc-tp-*, field-mapping screens)
 * that every PUBLIC page shipped inside the critical site-fixed bundle. The public site now
 * loads only this subset (rules whose selector roots are referenced by site views/layouts/
 * site JS, plus element-rooted and @font-face/@keyframes rules, partitioned mechanically and
 * kept over-inclusive). Editor and admin surfaces still load the FULL editor-common.css via
 * fixedFrontEndEditorCss / fixedAdminCss / an explicit link in subEditorPage.gsp.
 *
 * Maintenance: a rule needed by the PUBLIC storefront goes HERE (or in a site/ stylesheet);
 * editor-only styling stays in editor-common.css. Do not re-add editor-common.css to
 * ResourceList.fixedSiteCss.
 */
body > .header,
body > .footer {
    position: relative;
}


.v-split.grid-block > .grid-block {
    height: auto !important;
}

.se-product-create-edit-form .file-selection-queue .file-remove {
    background-position: center !important;
    top: 50%;
    transform: translateY(-50%);
}


.se-product-create-edit-form .multiple-video-queue {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 10px;
    gap: 5px;
}

.se-product-create-edit-form .spec-file-block {
    position: relative;
    border: 1px #ddd solid;
    padding: 10px 24px 10px 10px;
    border-radius: 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.se-product-create-edit-form .spec-file-block .tool-icon.remove {
    margin-left: auto;
}

#bmui-tab-manage-blog-post .toolbar.toolbar-left .search-text,
#bmui-tab-manage-blog-category .toolbar.toolbar-left .search-text,
#bmui-tab-manage-blog-comment .toolbar.toolbar-left .search-text,
#bmui-tab-manage-product .toolbar.toolbar-left .search-text,
#bmui-tab-manage-category .toolbar.toolbar-left .search-text {
    width: 250px !important;
}

.fee-create-edit-form .form-section-info h3 {
    color: #008DF2;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    margin: 0 0 15px;
}

.chosen-container .chosen-single div b {
    display: none;
}

.form-row .Zebra_DatePicker_Icon_Wrapper {
    width: 100%;
}

.form-row .Zebra_DatePicker_Icon_Wrapper input {
    width: 100%;
}


@keyframes fee-draft-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(234, 67, 53, 0.5); }
    50%  { box-shadow: 0 0 0 4px rgba(234, 67, 53, 0.3); }
    100% { box-shadow: 0 0 0 0 rgba(234, 67, 53, 0); }
}

/* ── Common radio-group cards (setup wizard) ──────────────────────────────────
   One bordered radio-row design used by BOTH:
   - JS-toggled cards (no native input) → active via .is-active
   - native radio rows (<label><input type=radio>…) → active via :has(input:checked)
   Markup: .cpsp-radio-cards > .cpsp-radio-card [> .cpsp-radio-card__dot | <input radio>]
           > .cpsp-radio-card__text > .cpsp-radio-card__title + .cpsp-radio-card__desc */
.common-plugin-setup-page .cpsp-radio-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

/* MailChimp Tracked Events block — shared by the setup wizard and the Settings
   section, so it is intentionally NOT scoped to .common-plugin-setup-page. */
.mc-te-block .mc-te-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 8px;
}

/* Klaviyo settings standalone toggle (32x16, is-on driven) */
.klv-set-toggle {
    width: 32px;
    height: 16px;
    border-radius: 999px;
    flex-shrink: 0;
    background: #bdbdbd;
    position: relative;
    cursor: pointer;
    transition: background .15s;
}

/* List selection — Default List + Map Customer Groups via, side by side */
.common-plugin-setup-page .klv-list-config-row {
    display: flex;
    gap: 16px;
}

/* ─── Initial-sync options (Global sync step) ───────────────────────────────
   Always-visible (decoupled from the sync toggles). Centered intro
   (title + subtitle) + Export/Import direction segment, above the full-width
   common .cpsp-radio-cards scope selector. */
.common-plugin-setup-page .mc-init-opts {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 4px 0 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eaeaea;
}

/* Joined segmented toggle (Import/Export direction) — one bordered pill with a
   filled active half, no gap. Matches the common Exsited .cpsp-segment design. */
.common-plugin-setup-page .mc-init-seg {
    display: inline-flex;
    align-self: center;
    padding: 3px;
    background: #fff;
    border: 1px solid #d5dbe0;
    border-radius: 8px;
}

/* ─── Common plugin settings section (dashboard → Settings) ─────────────────
   Shared layout for a plugin's Settings page: a stack of white cards, each with
   an icon + title/desc header, setting rows, and the account/disconnect row.
   Reusable across plugins; JS toggle hooks (.mc-set-toggle / .mc-toggle-knob)
   are kept on the markup. */
.common-plugin-settings {
    padding: 10px;
    max-width: 680px;
    margin: 0 auto;
}

/* Setting row — toggle (left) + text, matching the Tracked Events row style */
.common-plugin-settings .cps-setting-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Toggle (32×16) — matches the Tracked Events switch. JS (.mc-set-toggle) sets
   background/knob inline on click; .is-on drives the initial render. */
.common-plugin-settings .cps-toggle,
.common-plugin-list .cps-toggle {
    width: 32px;
    height: 16px;
    border-radius: 999px;
    flex-shrink: 0;
    background: #bdbdbd;
    position: relative;
    cursor: pointer;
    transition: background .15s;
}


/* ── Setting rows with a right-aligned control (select / input / button) — extends the cps toggle-row
   layout so plugins (e.g. Xero) can mix toggles, dropdowns, inputs and buttons in one card. Split rows
   put the text on the left and the control on the right, with a divider between consecutive rows. ── */
.common-plugin-settings .cps-setting-row--split {
    align-items: flex-start;
}

/* Sync Permissions — per-entity toggle rows (reuse .cps-setting-row--split) with a revealed
   Export/Import direction block. Each entity is wrapped in .cps-perm-item so its row + options
   move together; the wrapper carries the row divider (the --split sibling rule can't, since the
   options block sits between two rows). */
.common-plugin-settings .cps-perm-item + .cps-perm-item {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, .08);
}

/* Child Export/Import options — common .radio-checkbox-group.fee-child-checkbox-group look (a light
   box of stacked, blue checkboxes). The box background is otherwise scoped to
   .fee-configuration-panel-layout-v2, so re-declare it here; the item/label layout is global. */
.common-plugin-settings .fee-child-checkbox-group {
    width: 100%;
    background: #F9FAFB;
    border-radius: 8px;
    padding: 12px 16px;
}

/* Opt-in: force black text on a specific select even in the unset/placeholder state
   (same specificity as .cps-unset, declared after so it wins the tie). */
.common-plugin-settings .cps-select-wrap select.cps-select--dark {
    color: #000;
}

/* Card footer (e.g. Refresh from Xero) */
.common-plugin-settings .cps-card-foot {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, .08);
    display: flex;
    align-items: center;
    gap: 12px;
}


/* ==========================================================================
   Common plugin LIST page (cpl-*) — title+count, toolbar (search/filter/
   actions), bordered rounded table, pagination. Shared across all plugin data
   pages (Customers, Groups, Products, Orders, Sync history, …). The mc-* hooks
   on the markup are kept for JS; cpl-* classes only drive the visuals.
   ========================================================================== */
.common-plugin-list {
    padding: 10px;
}

/* Title + counter (matches core Orders .entity-count.title) */
.common-plugin-list .cpl-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

/* Icon is a submit <button class="icon-search"> (WC search-form structure):
   strip the admin button chrome + sprite, keep the inline SVG. Higher specificity
   than the global .search-form .icon-search admin rule so it always wins. */
.common-plugin-list .cpl-search .icon-search {
    border: 0;
    background: none;
    padding: 0;
    margin: 0;
    height: auto;
    float: none;
    line-height: 0;
    cursor: pointer;
    color: #828282;
}

/* chosen.js fallback: the host editor may enhance the filter <select> into a
   .chosen-container. Style it to match the native .cpl-select pill so the
   dropdown looks identical either way. The .cpl-select-chev SVG still supplies
   the arrow; chosen's own arrow (.chosen-single div) is hidden. */
.common-plugin-list .cpl-select .chosen-container {
    width: 100% !important;
    font-size: 14px;
}

/* Bordered, rounded table container (header + rows + pagination live inside) */
.common-plugin-list .cpl-table {
    /* AJAX container only — the bordered card is .cpl-table-card so the
       pagination footer can sit outside the border. */
}

/* Inside the integration dashboard, keep the card filling the viewport so short lists
   don't leave the panel looking empty. */
.mc-dash-content .cpl-table-card {
    min-height: calc(100vh - 358px);
}

/* Audience field shown inline in the card header (compact, not full-width) */
.common-plugin-dashboard .cpd-aud-actions .cpd-aud-field {
    flex: none;
    width: 280px;
}

/* chosen.js audience dropdown — render as a clean pill that matches the Sync Now
   button height (the .cpd-select-chev SVG supplies the arrow; chosen's is hidden). */
.common-plugin-dashboard .cpd-aud-field .chosen-container {
    width: 100% !important;
}


/* ── MailChimp field mapping accordion ─────────────────────────── */
/* ============================================================================
   Common Field Mapping component (cpsp / shared across plugins).
   Structure + classes are reused by any plugin's mapping table; the CSS lives
   here (editor-common.css) so the design is identical everywhere.
   Grid: WebCommander select | arrow | target select | Auto-sync | delete.
   ========================================================================== */
.exsited-field-mapping {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* The "Update it" / "Create it" controls are selects, but they rendered with no caret at all: the native
   arrow is suppressed upstream, and unlike .exsited-field-mapping__select this rule never drew a replacement
   (its `background` shorthand also cleared any inherited image). They read as plain text, so nobody could
   tell they were changeable. Same chevron, position and right-padding as the mapping selects above. */
.exsited-field-mapping .exsited-field-mapping__conflict-select {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 5px 24px 5px 8px;
    font-size: 13px;
    background-color: #fff;
    /* No !important: this selector already carries two classes and nothing else in the stylesheets sets
       `appearance` on these selects, so specificity alone wins — the last-resort escape isn't needed. */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMTAuMjQ5OUw0IDYuMjQ5ODdMNC43MTY2NyA1LjUzMzJMOCA4LjgzMzJMMTEuMjgzMyA1LjU0OTg3TDEyIDYuMjY2NTRMOCAxMC4yNDk5WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+");
    background-repeat: no-repeat;
    background-position: right 8px center;
    cursor: pointer;
}

/* Field mapping with a dedicated gear column (no mc-cell wrapper): the target select
   and the gear are separate grid cells, so the header + rows get a 6th column. Scoped
   to this partial's --gear modifier so 5-column consumers (MailChimp/Klaviyo) are unaffected. */
/* The gear column is a FIXED 40px (the gear's own width), not `auto`. Every row is its own grid container,
   so `auto` was resolved per row: a row showing a gear reserved ~40px while a row without one collapsed to
   0, and because the neighbouring columns are 1fr the target select shifted left. Sections that mix the two
   — Address rows carry no gear, the rows above and below them do — came out visibly out of line. */
.exsited-field-mapping--gear .exsited-field-mapping__col-headers,
.exsited-field-mapping--gear .exsited-field-mapping__row {
    grid-template-columns: 1fr 24px 1fr 40px 90px 40px;
}

/* ===== Admin 404 page (frontEndEditor/notFound) — moved out of an inline <style> in notFound.gsp
   per GSP Critical rule. Body rule is scoped to body.fee-404-page so it never affects editor pages
   that also load this common stylesheet. ===== */
body.fee-404-page {
    min-height: 100vh; margin: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    background:
        radial-gradient(560px circle at 50% 0%, rgba(0, 141, 242, 0.07), transparent 60%),
        #F9FAFB;
    color: #4F4F4F;
}

.popup-mask.fee-popup-mask.frontend-editor-create-popup-mask.mc-sync-popup-mask {
    z-index: 10000019 !important;
}

@keyframes wcSyncIndet {
    0%   { margin-left: 0%; }
    50%  { margin-left: 60%; }
    100% { margin-left: 0%; }
}

@keyframes mc-sync-spin { to { transform:rotate(360deg); } }


/* Tab-switch loader veil must COVER the whole panel. The legacy tempEditor
   `.div-mask` (position:relative; height:100%; padding:10px) left white gaps on
   padded / auto-height tab panels — so the veil looked inset. Anchor the loader
   absolutely to the panel so it fills the box edge-to-edge. `:has()` positions the
   panel only while a loader is present, so loaded-content layout is unaffected. */
.bmui-tab-panel:has(> .loader-mask) { position: relative; }

.bmui-tab-panel > .loader-mask {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
}


/* ── Setting rows with a right-aligned control (select / input / button) — extends the cps toggle-row
   layout so plugins (e.g. Xero) can mix toggles, dropdowns, inputs and buttons in one card. Split rows
   put the text on the left and the control on the right, with a divider between consecutive rows. ── */
.common-plugin-settings .cps-setting-row--split {
    align-items: flex-start;
}

/* Card footer (e.g. Refresh from Xero) */
.common-plugin-settings .cps-card-foot {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, .08);
    display: flex;
    align-items: center;
    gap: 12px;
}


/* ==========================================================================
   Common plugin LIST page (cpl-*) — title+count, toolbar (search/filter/
   actions), bordered rounded table, pagination. Shared across all plugin data
   pages (Customers, Groups, Products, Orders, Sync history, …). The mc-* hooks
   on the markup are kept for JS; cpl-* classes only drive the visuals.
   ========================================================================== */
.common-plugin-list {
    padding: 10px;
}

/* Title + counter (matches core Orders .entity-count.title) */
.common-plugin-list .cpl-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

/* Icon is a submit <button class="icon-search"> (WC search-form structure):
   strip the admin button chrome + sprite, keep the inline SVG. Higher specificity
   than the global .search-form .icon-search admin rule so it always wins. */
.common-plugin-list .cpl-search .icon-search {
    border: 0;
    background: none;
    padding: 0;
    margin: 0;
    height: auto;
    float: none;
    line-height: 0;
    cursor: pointer;
    color: #828282;
}

/* chosen.js fallback: the host editor may enhance the filter <select> into a
   .chosen-container. Style it to match the native .cpl-select pill so the
   dropdown looks identical either way. The .cpl-select-chev SVG still supplies
   the arrow; chosen's own arrow (.chosen-single div) is hidden. */
.common-plugin-list .cpl-select .chosen-container {
    width: 100% !important;
    font-size: 14px;
}

/* Bordered, rounded table container (header + rows + pagination live inside) */
.common-plugin-list .cpl-table {
    /* AJAX container only — the bordered card is .cpl-table-card so the
       pagination footer can sit outside the border. */
}

/* Inside the integration dashboard, keep the card filling the viewport so short lists
   don't leave the panel looking empty. */
.mc-dash-content .cpl-table-card {
    min-height: calc(100vh - 358px);
}


/* ==========================================================================
   Transform pipeline popup — transform step rows (integration field mapping)
   The popup shell + form fields use the system fee-popup component/classes;
   only the repeating transform step-rows are styled here.
   ========================================================================== */
/* This popup opens over the plugin settings-wizard popup. A FEE handler reacting to that context sets an
   inline `display:none` on the popup shell right after it opens (mask shows, dialog doesn't). The dialog is
   only ever torn down via POPUP.close() (which removes it), so it has no legitimate hidden state — force it
   visible; `!important` beats jQuery's inline `display:none`. z-index keeps it above its own mask. */
.fee-popup.wc-tp-popup {
    display: block !important;
    z-index: 10000001 !important;
}

/* Rules (criteria) builder popup — opens OVER the transform pipeline popup (z 10000001), so the popup
   sits higher and its mask sits between the two (dimming the transform popup). Same display:block guard.
   The 4-class mask selector beats `.frontend-editor-create-popup-mask` (z 999999). Shell only — the
   builder internals are styled by ca-builder.css. */
.fee-popup.wc-cb-popup {
    display: block !important;
    z-index: 10000011 !important;
}

/* The POPUP inline width is overridden by a shared !important rule, so force 700px at high specificity. */
.fee-popup.frontend-editor-create-popup.wc-cb-popup {
    width: 715px !important;
}

.popup-mask.fee-popup-mask.frontend-editor-create-popup-mask.wc-cb-popup-mask {
    z-index: 10000009 !important;
}

/* ── Confirm dialog (POPUP-based) — reusable across integration confirm prompts ───────────
   Common shell: the title bar + close X come from the POPUP template; we only supply the
   body text + right-aligned footer buttons. z + mask overrides mirror .wc-cb-popup. */
.fee-popup.mc-confirm-popup {
    display: block !important;
    z-index: 10000021 !important;
}

.popup-mask.fee-popup-mask.frontend-editor-create-popup-mask.mc-confirm-popup-mask {
    z-index: 10000019 !important;
}

.popup-mask.fee-popup-mask.frontend-editor-create-popup-mask.mc-sync-popup-mask {
    z-index: 10000019 !important;
}

@keyframes wcSyncIndet {
    0%   { margin-left: 0%; }
    50%  { margin-left: 60%; }
    100% { margin-left: 0%; }
}

/* provider-default (locked, read-only) transform rows */
.wc-tp-popup .wc-tp-locked {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #E2E8F0;
}

/* ── Natural-language transform pipeline (v2) — WebCommander system theme.
   Scoped under .wc-tp-popup .wc-tp2 so it overrides the older compact .wc-tp-* rules
   above without altering them. Presentation only — control classes/behaviour unchanged. */
.wc-tp-popup .wc-tp2 { color: #000; }

/* Fixed guards (the empty-value rule + the length policy) read as conditions, not operations:
   a muted card with a slate left-accent — they bracket the pipeline and can't be moved/removed. */
.wc-tp-popup .wc-tp2 .wc-tp-step.wc-tp-fixed { background: #F9FAFB; border-color: #E0E0E0; border-left: 3px solid #94A3B8; }

/* Transform steps read as active, ordered operations: a white card with a blue left-accent. */
.wc-tp-popup .wc-tp2 .wc-tp-step:not(.wc-tp-fixed):not(.wc-tp-locked-card) { border-color: #BDD9F2; border-left: 3px solid #008DF2; }

/* Guards aren't numbered — show an "IF" chip (both guard sentences begin with "If …") and skip
   the step counter, so the editable transform steps below number cleanly from 1. */
.wc-tp-popup .wc-tp2 .wc-tp-step.wc-tp-fixed .wc-tp-num::before { counter-increment: none; content: "IF"; font-size: 11px; font-weight: 700; letter-spacing: .5px; }

/* Active transform node: a solid blue circle so the ordered operations stand out from the guards. */
.wc-tp-popup .wc-tp2 .wc-tp-step:not(.wc-tp-fixed):not(.wc-tp-locked-card) .wc-tp-num { background: #008DF2; color: #fff; box-shadow: 0 1px 3px rgba(0, 141, 242, .35); }

/* Dropdowns use the system select theme (matches the Create Page popup) instead of the wc-tp2 blue pill:
   bordered box + standard chevron. The wc-tp2 `background` shorthand wiped the base <select> chevron, so
   re-declare it here. */
.wc-tp-popup .wc-tp2 select.wc-tp-field {
    font-size: 13.5px;
    font-weight: 500;
    color: #000;
    height: 36px;
    padding: 5px 30px 5px 12px;
    border: 1px solid #BDBDBD;
    border-radius: 6px;
    cursor: pointer;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cpath%20d%3D%22M12%2015.375L6%209.37505L7.075%208.30005L12%2013.25L16.925%208.32505L18%209.40005L12%2015.375Z%22%20fill%3D%22black%22%2F%3E %3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 18px;
}

/* "only when" condition pill — reset the old .wc-tp-when-config icon-button width/height (34×30) so the
   text ("always applies") isn't clipped, and recolour to the system palette. */
.wc-tp-popup .wc-tp2 .wc-tp-when-config { width: auto; height: auto; border: 1px dashed #BDBDBD; background: #F9FAFB; color: #828282; border-radius: 20px; padding: 4px 12px; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; transition: border-color .15s ease, color .15s ease, background .15s ease; }


/* ============================================================================
   License-locked empty state (.wc-lic-panel) — a centered card: circular icon
   badge, title, muted hint, full-width pill CTA. Emitted by ui-widgets/tab.js
   (_bmLicenseBlockPanelHtml) and admin/assetLibrary/imageLibraryLocked.gsp, shown
   for every gated tab/editor. Lives here (editor-common.css) because that file is
   loaded in BOTH the FEE and admin bundles — the panel appears in both, whereas
   admin.css is admin-only so FEE tabs rendered it unstyled.
   ============================================================================ */
.wc-lic-panel {
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 100%;
    min-height      : max(100%, 780px);   /* fill the host popup; never shorter than 780px on small screens */
    box-sizing      : border-box;
    padding         : 40px 24px;
}
 /* BASICS */

.CodeMirror {
  /* Set height, width, borders, and global font properties here */
  font-family: monospace;
  height: 300px;
}
.CodeMirror-scroll {
  /* Set scrolling behaviour here */
  overflow: auto;
}

/* PADDING */

.CodeMirror-lines {
  padding: 4px 0; /* Vertical padding around content */
}
.CodeMirror pre {
  padding: 0 4px; /* Horizontal padding of content */
}

.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  background-color: white; /* The little square between H and V scrollbars */
}

/* GUTTER */

.CodeMirror-gutters {
  border-right: 1px solid #ddd;
  background-color: #f7f7f7;
  white-space: nowrap;
}
.CodeMirror-linenumbers {}
.CodeMirror-linenumber {
  padding: 0 3px 0 5px;
  min-width: 20px;
  text-align: right;
  color: #999;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.CodeMirror-guttermarker { color: black; }
.CodeMirror-guttermarker-subtle { color: #999; }

/* CURSOR */

.CodeMirror div.CodeMirror-cursor {
  border-left: 1px solid black;
}
/* Shown when moving in bi-directional text */
.CodeMirror div.CodeMirror-secondarycursor {
  border-left: 1px solid silver;
}
.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor {
  width: auto;
  border: 0;
  background: #7e7;
}
.cm-animate-fat-cursor {
  width: auto;
  border: 0;
  -webkit-animation: blink 1.06s steps(1) infinite;
  -moz-animation: blink 1.06s steps(1) infinite;
  animation: blink 1.06s steps(1) infinite;
}
@-moz-keyframes blink {
  0% { background: #7e7; }
  50% { background: none; }
  100% { background: #7e7; }
}
@-webkit-keyframes blink {
  0% { background: #7e7; }
  50% { background: none; }
  100% { background: #7e7; }
}
@keyframes blink {
  0% { background: #7e7; }
  50% { background: none; }
  100% { background: #7e7; }
}

/* Can style cursor different in overwrite (non-insert) mode */
div.CodeMirror-overwrite div.CodeMirror-cursor {}

.cm-tab { display: inline-block; }

.CodeMirror-ruler {
  border-left: 1px solid #ccc;
  position: absolute;
}

/* DEFAULT THEME */

.cm-s-default .cm-keyword {color: #708;}
.cm-s-default .cm-atom {color: #219;}
.cm-s-default .cm-number {color: #164;}
.cm-s-default .cm-def {color: #00f;}
.cm-s-default .cm-variable,
.cm-s-default .cm-punctuation,
.cm-s-default .cm-property,
.cm-s-default .cm-operator {}
.cm-s-default .cm-variable-2 {color: #05a;}
.cm-s-default .cm-variable-3 {color: #085;}
.cm-s-default .cm-comment {color: #a50;}
.cm-s-default .cm-string {color: #a11;}
.cm-s-default .cm-string-2 {color: #f50;}
.cm-s-default .cm-meta {color: #555;}
.cm-s-default .cm-qualifier {color: #555;}
.cm-s-default .cm-builtin {color: #30a;}
.cm-s-default .cm-bracket {color: #997;}
.cm-s-default .cm-tag {color: #170;}
.cm-s-default .cm-attribute {color: #00c;}
.cm-s-default .cm-header {color: blue;}
.cm-s-default .cm-quote {color: #090;}
.cm-s-default .cm-hr {color: #999;}
.cm-s-default .cm-link {color: #00c;}

.cm-negative {color: #d44;}
.cm-positive {color: #292;}
.cm-header, .cm-strong {font-weight: bold;}
.cm-em {font-style: italic;}
.cm-link {text-decoration: underline;}

.cm-s-default .cm-error {color: #f00;}
.cm-invalidchar {color: #f00;}

/* Default styles for common addons */

div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
.CodeMirror-activeline-background {background: #e8f2ff;}

/* STOP */

/* The rest of this file contains styles related to the mechanics of
   the editor. You probably shouldn't touch them. */

.CodeMirror {
  line-height: 1;
  position: relative;
  overflow: hidden;
  background: white;
  color: black;
}

.CodeMirror-scroll {
  /* 30px is the magic margin used to hide the element's real scrollbars */
  /* See overflow: hidden in .CodeMirror */
  margin-bottom: -30px; margin-right: -30px;
  padding-bottom: 30px;
  height: 100%;
  outline: none; /* Prevent dragging from highlighting the element */
  position: relative;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
.CodeMirror-sizer {
  position: relative;
  border-right: 30px solid transparent;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

/* The fake, visible scrollbars. Used to force redraw during scrolling
   before actuall scrolling happens, thus preventing shaking and
   flickering artifacts. */
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  position: absolute;
  z-index: 6;
  display: none;
}
.CodeMirror-vscrollbar {
  right: 0; top: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}
.CodeMirror-hscrollbar {
  bottom: 0; left: 0;
  overflow-y: hidden;
  overflow-x: scroll;
}
.CodeMirror-scrollbar-filler {
  right: 0; bottom: 0;
}
.CodeMirror-gutter-filler {
  left: 0; bottom: 0;
}

.CodeMirror-gutters {
  position: absolute; left: 0; top: 0;
  padding-bottom: 30px;
  z-index: 3;
}
.CodeMirror-gutter {
  white-space: normal;
  height: 100%;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  padding-bottom: 30px;
  margin-bottom: -32px;
  display: inline-block;
  /* Hack to make IE7 behave */
  *zoom:1;
  *display:inline;
}
.CodeMirror-gutter-elt {
  position: absolute;
  cursor: default;
  z-index: 4;
}

.CodeMirror-lines {
  cursor: text;
}
.CodeMirror pre {
  /* Reset some styles that the rest of the page might have set */
  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
  border-width: 0;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  white-space: pre;
  word-wrap: normal;
  line-height: inherit;
  color: inherit;
  z-index: 2;
  position: relative;
  overflow: visible;
}
.CodeMirror-wrap pre {
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: normal;
}

.CodeMirror-linebackground {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 0;
}

.CodeMirror-linewidget {
  position: relative;
  z-index: 2;
  overflow: auto;
}

.CodeMirror-widget {}

.CodeMirror-wrap .CodeMirror-scroll {
  overflow-x: hidden;
}

.CodeMirror-measure {
  position: absolute;
  width: 100%;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
.CodeMirror-measure pre { position: static; }

.CodeMirror div.CodeMirror-cursor {
  position: absolute;
  border-right: none;
  width: 0;
}

div.CodeMirror-cursors {
  visibility: hidden;
  position: relative;
  z-index: 1;
}
.CodeMirror-focused div.CodeMirror-cursors {
  visibility: visible;
}

.CodeMirror-selected { background: #d9d9d9; }
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
.CodeMirror-crosshair { cursor: crosshair; }

.cm-searching {
  background: #ffa;
  /* @alternate */ background: rgba(255, 255, 0, .4);
}

/* IE7 hack to prevent it from returning funny offsetTops on the spans */
.CodeMirror span { *vertical-align: text-bottom; }

/* Used to force a border model for a node */
.cm-force-border { padding-right: .1px; }

@media print {
  /* Hide the cursor when printing */
  .CodeMirror div.CodeMirror-cursors {
    visibility: hidden;
  }
}