/* Minification failed. Returning unminified contents.
(2,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(24,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(147,40): run-time error CSS1030: Expected identifier, found '*'
(147,42): run-time error CSS1031: Expected selector, found ')'
(147,42): run-time error CSS1025: Expected comma or open brace, found ')'
(1288,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3242,17): run-time error CSS1039: Token not allowed after unary operator: '-bs-link-color'
(3246,21): run-time error CSS1039: Token not allowed after unary operator: '-bs-link-hover-color'
(3314,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3315,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3316,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3317,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3318,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3319,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3320,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3321,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3322,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3323,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3324,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3325,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3326,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3610,17): run-time error CSS1039: Token not allowed after unary operator: '-premium-gray'
(3619,17): run-time error CSS1039: Token not allowed after unary operator: '-premium-gray'
(4425,1): run-time error CSS1019: Unexpected token, found '}'
 */
:root {
    --premium-green: #889e8b;
    --premium-link: #517957;
    --premium-gray: #706d69;
    /* Bootstrap :root defaults #0d6efd / #0a58ca */
    --bs-link-color: #3F4935;
    --bs-link-hover-color: #293126;
}

/* Same selector list as responsive-default.css (shared/base), which sets
   #303030 on each element directly, so body alone wouldn't reach divs/p */
body, p, div, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Inter', sans-serif;
    color: #252824;
}


body {
    background-color: #FAF9F4;
}

/* Bootstrap paints .offcanvas (mobile menu, cart) from this variable, default white */
.offcanvas {
    --bs-offcanvas-bg: #FAF9F4;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5 {
    color: #252824;
}

/* #product wraps the whole PDP; its old rule fills it gray and gives every
   .row inside it (title row, image/price row, etc.) an explicit white
   background — remove both so Warm White shows through everywhere */
#product {
    background-color: #FAF9F4;
}

#product .row {
    background-color: transparent;
}



.product-grid .product-block-container:nth-child(2n+1) {
    padding-right: 4px !important;
}

.product-grid .product-block-container:nth-child(2n) {
    padding-left: 4px !important;
}

/* Rebrand: card has no background/border/shadow, blends into the page surface */
.product-block {
    background-color: transparent;
}

/* Hide absolute price on the image — it was overlapping "Perushinta" / store-price */
.product-block .image > .price-tag {
    display: none;
}

/* Rebrand badge SVGs (content/images/24) read too small at the default 60px */
.badges img,
.product-block .promotion-badge {
    width: 78px;
}

/* Discount label sits on its own row, above the price row. width:fit-content
   shrink-wraps to the text (unlike a plain block, which would stretch full
   width) while keeping normal block sizing — unlike display:table, which
   ignores explicit height in favor of content-based sizing. */
.product-block .discount-label {
    display: block;
    width: fit-content;
    box-sizing: border-box;
    height: 20px;
    line-height: 20px;
    margin: 4px auto 0;
    background-color: #C95745;
    color: #FAF9F4;
    font-size: 12px;
    font-weight: 700;
    padding: 0 6px;
    border-radius: 2px;
}

/* Reserve the label's row on non-discounted cards too, so buy buttons stay
   aligned across a grid row regardless of which cards have a discount */
.product-block .discount-label.is-empty {
    visibility: hidden;
}

/* Sale price + ordinary price share one .price-row (ArticleBlock.BS5.vbhtml,
   Apomera only): centered under the name, side by side with a gap when both
   are shown, top-aligned (line-height 1 on both so the text tops, not
   just the line boxes, line up). The shared base positions these absolutely in some views, so
   reset that on both. */
.product-block .price-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
    margin-top: 4px;
    /* restores the spacing line-height 1.25 used to give the 16px price */
    padding: 2px 0;
}

.product-block .price-tag-flat.price-tag {
    display: block;
    position: static;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    height: auto;
    width: auto;
    line-height: 1;
    margin: 0;
    padding: 0;
    color: #252824;
    font-size: 16px;
    font-weight: 700;
}

.product-block .price-tag-flat.price-tag a {
    color: #252824;
}

.product-block .price-tag-flat.price-tag.campaign a,
.product-block div.price-tag.campaign a {
    color: #C95745;
}

.product-block .price-box {
    display: block;
    height: auto;
    margin: 0;
}

    /* price-box is always rendered but often holds only whitespace; drop it so
       the gap doesn't push a lone price off center */
    .product-block .price-box:not(:has(*)) {
        display: none;
    }

.product-block .price-box .store-price {
    display: block;
    position: static;
    font-size: 12px;
    font-weight: 500;
    color: #706d69;
    line-height: 1;
}

.product-block .price-box .price-description {
    display: none;
}

/* List view: left-align the row next to the text instead of centering */
.single-compact .product-block .price-row {
    justify-content: flex-start;
}

.checkout-charity-item .title {
    font-family: 'Inter', sans-serif;
}

#checkout-offers .offer-item {
    /*margin-right: 2px;*/
    font-family: 'Inter', sans-serif;
}

#search-facets .search-facet-panel .facet-main-btn-sel {
    font-family: 'Inter', sans-serif;
}


.products5 li div.name a, .products2 li div.name a {
    font-family: 'Inter', sans-serif;
}

div.price-tag {
    font-family: 'Inter', sans-serif;
}

div.price-tag-small {
    font-family: 'Inter', sans-serif;
}


.promotion-element-heading {
    font-family: 'Inter', sans-serif;
}

#product-accessory .promotion-element-heading {
    text-align: left;
    color: #252824;
}


.product-block .is-med-div, .products5 .is-med-div {
    font-family: 'Inter', sans-serif;
}

.checkout-charity-item {
    font-family: 'Inter', sans-serif;
}
/* Copied from DESKTOP */

#toplinks {
    background-color: #3B697D;
    color: #ffffff;
    height: 55px;
}


    #toplinks a {
        color: #ffffff;
        margin-right: 20px;
    }

#cart-quantity-full {
    color: #ffffff !important;
}

/* Quantity badge overlaid on the bag icon. The icon is 18px at every
   breakpoint now (part of the header rebuild), but this sizing/positioning
   used to only apply <1199.98px — at desktop width it fell back to the old
   pre-rebrand sizing (padding:2px 8px, top:0, right:0, meant for a ~35px
   icon), which is large enough to fully cover the new 18px icon. Made
   unconditional so it matches the icon's actual size everywhere. Flex
   centering instead of line-height/padding math: at this size the border
   (with box-sizing:border-box, per Bootstrap's global reset) eats into the
   14px height enough that a 14px line-height overflows the actual content
   box and throws off vertical centering — flex isn't sensitive to that
   discrepancy. !important on display: the markup (ShowHeader.Responsive.BS5)
   carries Bootstrap's .d-xl-none (display:none !important), which hid the
   badge on desktop; Apomera has no #cart-quantity-full text fallback, so the
   badge must show at every breakpoint. */
#cart-quantity {
    background-color: #C95745;
    border: 1px solid #FAF9F4;
    color: #FAF9F4;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border-width: 1px;
    font-size: 9px;
    min-width: 14px;
    height: 15px;
    top: -4px;
    right: -6px;
}

/* responsive-default.css (shared/base) sets #3db75f; same selector, this bundle loads after */
#cart-quantity.empty {
    background-color: #3F4935;
}

/* responsive-default.css (shared/base) sets #009900 */
#cart-adding, #cart-added {
    background-color: #3F4935;
}

#toggle-cart-details-container {
    background-color: transparent;
}

#search-bar {
    background-color: #f00000;
    position: relative;
    z-index: 5;
    height: 44px;
    width: 100%;
}

#popular-links-container, #brands-left {
    font-weight: 700;
}

/* Left-hand category nav (#main-left, desktop-only via d-none d-xl-inline-block) */
#main-left {
    background-color: #FAF9F4;
    color: #252824;
}

#main-left a {
    color: #252824;
}

/* responsive-menu.css (shared/base) sets #main-menu to #f3f3f3 unconditionally
   and #f7f7f7 at >=1200px — same selector/specificity at each, this bundle
   loads after, so both win. */
#main-menu {
    background-color: #FAF9F4;
}

@media (min-width: 1200px) {
    #main-menu {
        background-color: #FAF9F4;
    }
}

/* responsive-menu.css (shared/base) paints #sidebar-categories white (#f3f3f3
   below 1200px). Same specificity, this bundle loads after, so this wins. */
#sidebar-categories {
    background-color: #FAF9F4;
}

#sidebar-categories .category-container {
    background-color: #FAF9F4;
}

/* responsive-default.css (shared/base) does the same to #brands-left, but
   only >=1200px (below that it's not opaque, so no override needed there). */
@media (min-width: 1200px) {
    #brands-left {
        background-color: transparent;
    }
}

#AgreedToNewsletter, #acceptTerms {
    margin-right: 5px;
}
/* END Copied from DESKTOP */
.btn-info,
.btn-info:active,
.btn-info:hover,
.btn-info:active:hover {
    background-color: transparent;
    color: #323232;
    border-color: #00993c;
    box-shadow: none;
}

.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
    color: #FAF9F4;
    background-color: #293126;
    border-color: #293126;
}


.price-tag {
    background-image: none;
    height: 27px;
    font-size: 17px;
    line-height: 27px;
    margin-left: 10px;
    color: #858997;
}

    .price-tag a {
        color: #858997;
    }

    .price-tag span {
        margin-right: 3px;
    }

div.price-tag a, div.price-tag a div {
    color: #858997;
}

.price-tag-small {
    background-image: none;
    height: 20px;
    width: 40px;
    font-size: 14px;
    line-height: 20px;
}

    .price-tag-small span {
        margin-right: 3px;
    }


#left-bottom-panel .left-label {
    color: #009900;
}

#left-bottom-panel li {
    color: #000000;
}

    #left-bottom-panel li::before {
        color: #009900;
    }

/* responsive-default.css (shared/base) colors this #ff0000; #price-info .price
   covers regular product pages, this covers bundle pages (no #price-info) */
#stock-price-box .price {
    font-family: 'Inter', sans-serif;
    color: #252824;
}

#stock-price-box .price.campaign {
    color: #C95745;
}

/* Selected variant: responsive-default.css (shared/base) sets #00993c */
#product-skus .sku-item.sku-selected {
    background-color: #3F4935;
    color: #FAF9F4;
}

/* Form validation: responsive-default.css (shared/base) uses #f00000/#f00 */
.field-validation-error, #childPersNrError, #persNrError,
.required {
    color: #C95745;
}

.input-validation-error {
    border: 1px solid #C95745;
}

.validation-summary-errors {
    background-color: #F5E3DD;
    color: #252824;
    border: 2px solid #C95745;
}

    /* responsive-default.css sets white text for these, unreadable on the light pink background */
    .validation-summary-errors li,
    .validation-summary-errors a,
    .validation-summary-errors span {
        color: #000;
    }

/* Search suggestions: responsive-default.css (shared/base) uses light blues */
#suggest-container div.hit:hover {
    background-color: #E5E1D6;
    border-top: 1px solid #B2B7A6;
    border-bottom: 1px solid #B2B7A6;
}

#suggest-container div.hit.selected, #suggest-container div.hit.selected:hover {
    background-color: #E5E1D6;
    border-top: 1px solid #3F4935;
    border-bottom: 1px solid #3F4935;
}


#toplist .symbol {
    background: url(/content/images/6/toplist-symbol.svg) no-repeat;
    background-image: url(/content/images/6/toplist-symbol.svg);
    background-repeat: no-repeat;
}

.hkdb-body-hidden {
    height: 0px;
}

#hkdb-marker {
    background-image: url('/content/images/hkdb-marker.png');
    float: left;
    width: 190px;
    height: 55px;
}

    #hkdb-marker p {
        margin: 14px 0 0 7px;
        color: #fff;
        line-height: 16px;
    }

/* RX */

#rx-green-button {
    background-color: #00993c;
    color: #fff;
    text-align: center;
    font-weight: 600;
}

    #rx-green-button a {
        color: #fff;
    }

#rx-prescriptions .prescription .prescription-dosage {
    color: #fff;
    overflow-wrap: break-word;
}

#rx-prescriptions .prescription h4 {
    font-size: 17px;
}

#rx-prescriptions .prescription .prescription-toggle-info {
    margin-top: 5px;
    cursor: pointer;
}

#rx-prescriptions .prescription .panel-heading {
    background-color: #2e6b74;
    color: white;
    border-radius: 0;
    padding: 10px 7px;
}

    #rx-prescriptions .prescription .panel-heading .icon-round-lg {
        background-color: white;
    }

        #rx-prescriptions .prescription .panel-heading .icon-round-lg i {
            color: #2e6b74;
        }

#rx-prescriptions.animal .prescription .panel-heading {
    background-color: #654b1e;
    color: white;
}

#rx-prescriptions .panel-primary {
    border-color: #2e6b74;
}

#rx-prescriptions.animal .panel-primary {
    border-color: #654b1e;
}

#rx-prescriptions .panel-body {
    padding: 5px;
}

#rx-prescriptions .panel {
    border-radius: 0;
    background-color: #eee;
}

#rx-prescriptions .presription-substitution-info {
    font-size: 12px;
    margin-bottom: 10px;
    margin-top: 6px;
    padding-top: 4px;
    border-top: 1px solid #ccc;
}

.prescription-item {
    margin: 0 0 0 0;
    cursor: pointer;
}

    .prescription-item .icon-round-lg {
        background: #3d8cc1;
    }

        .prescription-item .icon-round-lg i {
            color: white;
        }

.prescription-item-disabled,
.prescription-item-incomplete {
    cursor: default;
}

.prescription-item-optional {
    display: none;
}

.prescription-info {
    font-size: 12px;
    border-top: 1px solid #ccc;
    margin-top: 8px;
    padding-top: 5px;
}





/**/
/* collapse */
.collapse-link:after {
    font-family: 'GLYPHICONS Halflings';
    color: inherit;
    content: "\e260";
    margin-left: 2px;
    text-decoration: none;
    vertical-align: text-top;
}

.collapse-link.collapsed:after {
    content: "\e259";
    vertical-align: text-bottom;
}

.collapse-link:hover,
.collapse-link.collapsed:hover,
.collapse-link:focus,
.collapse-link.collapsed:focus {
    text-decoration: none;
    color: black;
}

.collapse-link {
    cursor: pointer;
}

.collapse-body {
    margin-bottom: 10px;
    font-size: 12px;
    color: white;
}

/**/

#samtycke-ok {
    margin-right: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

.ordinationlist-expand {
    margin-top: 10px;
}

.ordinationlist-expandlink {
    cursor: pointer;
}

.djur-recept .utgangna-recept .rx-user-container {
    border: unset;
}

.djur-recept .utgangna-recept.show .toggle-element {
    background-color: #ffffff;
}

.toggle-element {
    background-color: #3B697D;

}


.rx-document-link {
    padding-top: 15px;
    padding-left: 10px;
    padding-bottom: 10px;
}




.rx-document-pdf-button {
    padding-top: 15px;
    padding-left: 6px;
    padding-bottom: 10px;
}


.prescription-item .prescription-radio {
    width: 20px;
}

.prescription-item input[type="radio"] {
    margin: 0;
}

.prescription-item .prescription-details {
}

.prescription-item table {
    width: 100%
}

.prescription-item .label {
    vertical-align: baseline;
}

.prescription-details h5 {
    margin-top: 0;
    margin-bottom: 1px;
    font-weight: 600;
}

.prescription-details.not-found {
    color: #bbb;
}

.prescription-price {
    padding-top: 10px;
    font-size: 12px;
}

#rx-prescriptions .product-store-price {
    color: #f00000;
    font-size: 20px;
    margin-right: 5px;
}

.rx-sku-price {
    color: #f00000;
    font-size: 19px;
    font-weight: bolder;
    font-family: 'Inter', sans-serif;
}

.rx-list-add {
    margin-bottom: 2px;
    width: 80px;
}

.prescription-item {
    margin-top: 13px;
}


.prescription-item-disabled .price-container img,
.prescription-item-incomplete .price-container img {
    margin-top: 5px;
    margin-left: 8px;
}

.prescription-toggle-optional-visibility {
    cursor: pointer;
    padding: 7px 0 7px 0;
    color: #00993c;
}

    .prescription-toggle-optional-visibility span {
        color: #00993c;
    }

    .prescription-toggle-optional-visibility svg {
        stroke: #00993c;
    }

    .prescription-toggle-optional-visibility:not(.collapsed) svg {
        transform: rotate(180deg);
        transition: 0.25s;
    }

.prescription-overlay {
    display: none;
    text-align: center;
    vertical-align: middle;
    background-color: #ffffff;
    opacity: 0.7;
}

.prescription-overlay-text {
    display: none;
    font-size: 13px;
    color: #000;
    text-align: center;
    vertical-align: middle;
}

#hkdbMessageContainer {
    color: #ff0000;
    background-color: #fcfcfc;
    padding: 10px;
    margin-left: 2px;
}

.prescription-overlay-text span {
    color: #fff;
    background-color: #3d8cc1;
    opacity: 1.0;
    padding: 5px 5px;
    height: 100%;
    vertical-align: middle;
}

#rx-overview .hkdb-value {
    font-weight: 600;
}

#rx-overview .btn {
    color: #fff;
}

#rx-overview .actions .btn {
    width: 100%;
    margin-top: 10px;
}

#rx-overview li {
    overflow-wrap: break-word;
}

#rx-overview h3, #rx-warrants h4 {
    border-bottom: 1px solid #009410;
    padding-bottom: 5px;
}

#rx-warrants .warrants h5 {
    margin-top: 20px;
    font-weight: 600;
    margin-bottom: 5px
}

    #rx-warrants .warrants h5 i {
        font-weight: normal;
    }

#rx-warrants .warrants .btn {
    margin-top: 5px;
}

#rx-hkdb select {
    font-size: 16px;
}

#rx-hkdb .trans-date,
#rx-hkdb th,
#rx-hkdb .hkdb-value,
#rx-prescriptions .name {
    font-weight: 600;
}

#rx-prescriptions .name {
    margin-top: 20px;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
}

#ordinationPanel {
    margin-top: 10px;
}

#rx-prescriptions .alert {
    margin: 10px 0;
    padding: 10px;
}

#rx-prescriptions .product-action-box {
    border: 1px solid #d7d7d7;
    margin: 10px 0 20px 0;
    padding: 5px 5px 5px 5px;
    margin: 15px 0 0 0;
    background-color: #fff;
    font-size: 16px;
    width: 100%;
}


.slide-wrapper .article-carousel-item:nth-last-child(n):before {
    position: absolute;
    top: 0;
    bottom: 0;
    content: " ";
    display: none;
    padding: 0px 0px;
    border-right: none;
    margin-left: 0px;
}

#rx-prescriptions.animal .product-action-box {
    margin-top: 0;
}

#last-sold-heading {
    color: #4e4e4e;
}

#cart-content {
    background-color: #FAF9F4;
}

/* responsive-default.css (shared/base) sets #f00000; same selector, this bundle loads after */
#cart-header svg {
    stroke: #C95745;
}

#cart-content .campaign-price {
    color: #C95745;
}



    #cart-content .name .paw {
        margin-left: 6px;
        margin-right: 4px;
    }


    #cart-content .sum h4 #cart-header-sum {
        color: #000000;
        font-weight: 600;
    }

    #cart-content .row-sum {
        font-weight: bold;
        display: inline-block;
        /*height: 35px;*/
    }


        #cart-content .row-sum > span.ord-price-large {
            margin-right: 0px;
            bottom: 25px;
        }

    #cart-content .a-price {
        display: none;
    }

    /* #cart-content .product-container {
        display: flex;
        flex-direction: row;
        margin-bottom: 20px;
        align-items: center;
    }*/

    #cart-content .purchase-container {
        display: inline-block;
    }

    #cart-content .overflow-ellipses {
        width: 45%;
        display: inline-block;
        margin-left: 20px;
        height: 35px;
    }

        #cart-content .overflow-ellipses .glyphicon {
            top: 0px;
            line-height: 1.42857143;
        }

        #cart-content .overflow-ellipses .glyphicon-ok {
            top: 4px;
        }

    #cart-content .stock-not-ok {
        line-height: 10px;
        color: #C95745;
    }

    /* responsive-default.css (shared/base) sets #009410 / #00993c */
    #cart-content .stock-ok,
    #cart-content .rx-in-cart-indicator {
        color: #3F4935;
    }

/* responsive-default.css (shared/base) sets #ff0000 */
.sku_stock_not_ok {
    color: #C95745;
}

    #cart-content .overflow-ellipses .stock-text {
        width: 88%;
        margin-left: 5px;
        line-height: 10px;
    }

.usp-dot {
    height: 7px;
    width: 7px;
    background-color: #ffffff;
    border-radius: 50%;
    align-self: center;
}



#cart-content.in-header .actions {
    justify-content: center;
}


#checkout-top .checkout-top-info {
    background-color: #FAF9F4;
    margin-bottom: 10px;
}

#checkout .checkout-form-title {
    background-color: #FAF9F4;
    margin-bottom: -1px;
}

#header.sticky + .container #cart-content.in-header .footer {
    align-items: center;
    display: flex;
    flex-direction: column;
}




#cart-content .buy-button {
    background-color: #3F4935;
}

#cart-content .buy-number-display {
    background-color: #3F4935;
}




#cart-content .bundle-items .toggle-tooltip {
    display: inline-block;
    height: initial;
    height: 10px;
}

.coupon-container .btn-success {
    background-color: #3F4935;
}

.coupon-container .toggle-element {
    color: #00993c;
    font-weight: bold;
}

.coupon-container .glyphicon {
    color: #00993c;
}

.coupon-container .pull-right {
    float: none !important;
}

.checkout-message-container .toggle-element {
    color: #00993c;
    font-weight: bold;
}

.checkout-message-container .glyphicon {
    color: #00993c;
}

.checkout-message-container .pull-right {
    float: none !important;
}


#top-links li a {
    color: #009310;
}

.hkdb-info-container {
    position: absolute;
    top: 52px;
    background-color: #000;
    color: #fff;
    font-size: 11px;
    width: 110px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    padding: 3px 3px 3px 4px;
    left: -35px;
}

.hkdb-marker {
    position: absolute;
    top: 40px;
    left: -7px;
    color: #000;
}

.hkdb-info-container.last {
    left: -80px;
}

.hkdb-bar {
    height: 28px;
    margin-top: 6px;
    margin-bottom: 6px;
}

.hkdb-bar-inactive {
    background-color: #808080;
    height: 2px;
    margin-top: 19px;
}

.hkdb-bar-active {
    /*background-color: #81c887;*/
    overflow: hidden;
}

.hkdb-bar-active-container {
    float: left;
}

.hkdb-bar-inactive-container {
    float: right;
    position: relative;
}

.hkdb-bullet {
    height: 70px;
    width: 70px;
    border-radius: 35px;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    line-height: 14px;
}

.hkdb-bullet-active {
    background-color: #009900;
}

.hkdb-bullet-inactive {
    background-color: #ccc;
}

.hkdb-bullet-discount {
    color: #fff;
    font-size: 11px;
    margin-top: 4px
}

.hkdb-bullet-percentage {
    font-size: 18px;
    font-weight: 600;
}

    .hkdb-bullet-percentage.last {
        line-height: 31px;
    }

.hkdb-bullet-pay {
    color: #000;
    top: -25px;
    position: relative;
    font-weight: 600;
}

.hkdb-bullet-cost {
    font-style: italic;
    top: 35px;
    position: relative;
    color: #777;
}

.hkdb-container {
    display: table-row;
}

.hkdb-container-table {
    width: 100%;
    display: table;
    /*margin-top: 30px;*/
    margin-bottom: 55px;
    margin: auto;
}

.hkdb-header {
    margin-top: 20px;
    font-weight: 600;
}

.hkdb-cost-header {
    font-style: italic;
    color: #777;
    margin-top: 35px;
}

.hkdb-cell {
    display: table-cell;
}

.bslabel {
    padding: 1px 0 !important;
    font-size: 11px;
    height: 18px;
    color: #ffffff;
    vertical-align: baseline;
    background-color: #999999;
    font-weight: 600;
}

.bslabel {
    width: 100%;
}

.bslabel-success-light {
    background-color: #bac6b9;
    font-weight: bold;
}

.bslabel-success {
    background-color: #4f7c55;
    font-weight: bold;
    color: #ffffff !important;
}

.bslabel-info {
    color: white !important;
    background-color: #1d557d;
    font-weight: bold;
}

.bslabel-frame-info {
    border-left: 2px solid #1d557d;
}

.bslabel-frame-success-light {
    border-left: 2px solid #bac6b9;
}

.bslabel-frame-success {
    border-left: 2px solid #4f7c55;
}

.card-padding {
    padding-top: 4px;
    padding-left: 15px;
}


/*.search-facets-title {
    background-color: #ffffff;
    margin-bottom: 5px;
}

.search-facets-collapse-all {
    transform: initial !important;
    top: unset !important;
}

#search-facets .facet-sort {
    background-color: #FAF9F4;
    border-top: unset;
    border-bottom: unset;
    padding-bottom: 0px;
}

    #search-facets .facet-sort h5 {
        display: inline-block;
    }

#search-facets .col-xs-60 {
    background-color: #FAF9F4;
    margin-bottom: 7px;
    padding-left: 5px;
    padding-right: 5px;
}*/

/*#search-facets .row {
    background-color: #00993c;
}*/


/*#search-facets #facet-sort-table {
    width: unset;
    float: right;
}

#search-facets #facet-sort-paging {
    text-align: unset;
}*/

.facet-sort-pages {
    display: inline-block;
    float: right;
    margin-top: 10px;
}

.view-type-container .view-type-select-wrapper {
    justify-content: space-between;
    padding-left: 5px;
    background-color: #FAF9F4;
    border-bottom: unset;
}

/* responsive-default.css (shared/base) strokes the active icon #00993c; same
   selectors/specificity, this bundle loads after, so these win */
.view-type svg {
    stroke: #3F4935;
}

.view-type.view-type-active svg {
    stroke: #293126;
}

/* responsive-default.css (shared/base) borders this with var(--color-2) (#00993c);
   same selector, this bundle loads after, so this wins */
#search-sort-dropdown {
    border-color: #3F4935;
}

/* Bootstrap defaults the divider to #6c757d and links to its own link color */
.breadcrumb {
    --bs-breadcrumb-divider-color: #293126;
}

.breadcrumb a {
    color: #3F4935;
}

/* All text inside the facets is Moss. The catch-all beats generic/Bootstrap
   rules; the rest match responsive-default.css (shared/base) selectors that
   set grey/red/white text, same specificity, this bundle loads after */
#search-facets,
#search-facets *,
#search-facets .facet-sort.selected a,
#search-facets .facet-ppp.selected,
#search-facets .search-facets-title.search-facets-selected > .search-facets-collapse-all,
#search-facets .search-facets-collapse-all,
#search-facets .search-facet-panel .facet-main-btn-sel,
#search-facets .search-facet-link,
#search-facets .facet-btn.active div,
#search-facets .search-facets-selected {
    color: #3F4935;
}


#search-facets .facets {
    border-top: unset;
}

.search-top {
    margin-top: 7px;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #FAF9F4;
    color: #252824;
}
/*    .search-top .description {
        height: 75px;
    }
*/
#choose-auth-main {
    background-color: #FAF9F4;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px;
    padding-left: 15px;
    padding-right: 5px;
    padding-bottom: 15px;
}

    #choose-auth-main .flex-container {
        justify-content: start;
        gap: 10px;
    }

#mobile-bankid-other .panel-body {
    border: 1px solid #e3e1e1;
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 10px;
}


#mobile-bankid-other .form-group {
    margin-bottom: 10px;
}



.rx-login-options-buttons .auth-green-button img {
    height: 21px;
    padding-left: 10px;
}

.rx-login-options-buttons form {
    display: inline-block;
    margin-right: 10px;
}

.rx-login-options-buttons .auth-green-button span {
    color: #ffffff;
}


#search-facets {
    background-color: #FAF9F4;
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 14px;
}

.pagination {
    margin-top: 10px;
}

    .pagination > li.active {
        background-color: #3F4935;
        color: #FAF9F4;
    }

    .pagination > .active > a, .pagination > .active > a:hover {
        background-color: unset;
        border: 1px solid #FAF9F4 !important;
        font-weight: 700;
    }

    .pagination > li {
        color: #3F4935;
    }

    .pagination > li > a, .pagination > li > a:hover, .pagination > li > a:focus {
        border: 1px solid #3F4935 !important;
        font-weight: 700;
        background-color: unset;
    }


    .pagination > li:nth-child(2) a, .pagination > li:last-child > a, .pagination > li:last-child > a:hover, .pagination > li:first-child > a, .pagination > li:first-child > a:hover {
        border: none;
    }

        .pagination > li:first-child > a, .pagination > li:first-child > a:hover, .pagination > li:last-child > a, .pagination > li:last-child > a:hover {
            background-color: unset;
        }

.description {
    background-color: #FAF9F4;
}

/*.view-type-container {
    background-color: #ffffff;
}
*/
.coupon-container {
    background-color: #FAF9F4 !important;
}


.checkout-message-container {
    background-color: #FAF9F4;
}

#checkout-message-container {
    background-color: #FAF9F4;
    display: none !important;
}


#chooseAuthenticationPanel .panel {
    border: 1px solid #999;
    margin-bottom: 10px;
}

.stoptime-expand {
    display: none;
}

#chooseAuthenticationPanel .panel > .panel-heading {
    color: #313131;
    background-color: #FAF9F4;
    min-height: 60px;
    padding: 14px 0 0 12px;
    border-radius: 3px;
}

#chooseAuthenticationPanel .panel-title a.title-toggle {
    display: block;
    text-decoration: none;
    outline: none;
    color: #313131;
}

#chooseAuthenticationPanel .panel-title .btn-link {
    display: block;
    width: 100%;
    text-align: left;
}

    #chooseAuthenticationPanel .panel-title .btn-link:hover {
        text-decoration: none;
    }

#chooseAuthenticationPanel .btn:nth-child(1) {
    color: #313131;
    font-size: 16px;
    padding: 0;
    font-weight: inherit;
}

/* temporär css för sos-räknaren på Samhällsengagemangssidan (tblPage page_id=82) */
#sos-donations-desktop {
    background-image: url('/media/assets/banner/sos_small.png') !important;
    width: 100% !important;
    background-size: 100% 100%;
}

#rx-home-container {
    background-color: white;
    min-height: 228px;
    padding-top: 6px;
}

    #rx-home-container .lmv-disc {
        padding: 14px 0 14px 4px;
    }

        #rx-home-container .lmv-disc img {
            width: 100%;
        }

#rx-login-container {
    padding: 10px 4px 14px 3px;
    border-top: 3px solid #090;
    border-bottom: 3px solid #090;
}

    #rx-login-container a {
        text-decoration: none;
        color: #090;
    }

#rx-login-header1 {
    font-size: 20px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: -0.02em;
    color: #090;
    line-height: 25px;
}

#rx-login-header2 {
    font-size: 24px;
    font-weight: normal;
    padding-top: 3px;
    color: #090;
}

#rx-login-buttons {
    display: flex;
    align-items: center;
    padding: 10px 0 0 0;
}

    #rx-login-buttons .btn {
        flex: 1;
        font-size: 12.5px;
        font-weight: 600;
        padding: 4px 0;
        color: #fff;
    }

        #rx-login-buttons .btn:hover {
            color: #fff;
            background-color: #0a0;
            border-color: #0a0;
        }

        #rx-login-buttons .btn:nth-child(odd) {
            margin-right: 4px;
        }

#rx-login-menu {
    margin-top: 10px;
}

    #rx-login-menu a {
        color: #090;
        font-weight: 600;
        display: block;
        padding: 2px 0px 7px 4px;
    }

        #rx-login-menu a:hover {
            text-decoration: underline;
        }

        #rx-login-menu a:after {
            font-family: 'Glyphicons Halflings';
            content: "\e258";
            float: right;
            font-size: 11px;
        }

#rx-logout {
    font-weight: 600;
    padding-top: 10px;
    text-align: right;
    margin-bottom: -8px;
}

    #rx-logout a {
        color: white;
        width: 100%;
    }

#rx-pill {
    width: 32px;
}

#rx-puff {
    background-color: #090;
    color: #fff;
    text-align: center;
    padding: 10px 10px;
    margin: 4px 0 0 0;
    font-weight: 600;
}

    #rx-puff a {
        color: #fff;
    }



.rx-cart-placeholder .ships {
    display: inline-block;
    margin-left: 10px;
    vertical-align: bottom;
    margin-top: 8px;
}


/*#rx .btn-expand {
    margin-right: 10px;
    margin-top: -4px
}*/


.icon-round-lg {
    float: left;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 20px;
    background: #f00000;
}

    .icon-round-lg i {
        padding: 7px 8px;
        font-size: 20px;
        color: white;
    }

#footer {
    padding: 10px;
    border: 1px solid #3F4935;
    justify-content: center;
}

#footer > div {
    text-align: center;
}

#footer .pricerunner-score {
    margin-top: 8px;
    color: #252824;
}

    #footer .pricerunner-score > * {
        color: #252824;
    }

    #footer .pricerunner-score img {
        width: 100px;
        height: 100%;
        margin-right: 6px;
    }




.counceling-question {
    padding: 8px;
    border: 1px solid #ccc;
    background-color: #f3f9f4;
    margin-bottom: 10px;
}

    .counceling-question label {
        font-weight: initial;
    }

    .counceling-question h4 {
        margin: 0 0 5px 0 !important;
    }

    .counceling-question a {
        color: #08c !important;
    }

    .counceling-question input[type="radio"] {
        margin-right: 5px;
        display: inline;
    }

#cart-parent {
    border: none;
}

    #cart-parent .name a {
        color: #000000;
    }

/*#stock-price-box .price {
    font-family: 'Helvetica Rounded Bold';
    font-size: 26px;
}*/

.promotion-banner {
    border-top: none;
    margin-top: 14px !important;
    margin-bottom: 14px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.promotion-element-heading {
    color: #252824;
}

@media screen and (max-width: 767px) {
    .promotion-banner {
        border-top: none !important;
        margin-right: 0px !important;
        margin-left: 0px !important;
    }

        .promotion-banner .right-container .text-content {
            margin-bottom: 15px;
        }
}


@media(max-width:380px) {
    .prescription-wrapper.snapshot .snapshot-date {
        display: block;
        margin-left: 24px;
    }
}

.prescription-wrapper.snapshot {
    padding: 5px;
    background: #CCE9CF;
    margin-bottom: 5px;
}

    .prescription-wrapper.snapshot .panel {
        margin-bottom: 0px;
    }

li.active {
    font-weight: bold;
    background: #3F4935;
    color: #FAF9F4;
}

.rx-navbar-mobile {
    list-style-type: none !important;
    padding-top: 5px;
    padding-left: 0;
    display: flex;
    height: auto;
    min-height: 40px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    margin-bottom: 10px;
}

    .rx-navbar-mobile > li {
        padding-right: 3px;
        padding-left: 3px;
        flex-grow: 1;
        text-align: center;
        display: flex;
        border-width: 1px;
        border-color: #00993c;
        border-style: solid;
        margin-right: 5px;
        flex-grow: 1;
        align-items: center;
        justify-content: center;
    }

        .rx-navbar-mobile > li:last-of-type {
            margin-right: 0px;
        }

        .rx-navbar-mobile > li > a {
            color: #00993c;
            vertical-align: middle;
            font-weight: bold;
        }

.rx-navbar-new {
    padding-top: 5px;
    padding-left: 0;
    height: auto;
    min-height: 40px;
    margin-bottom: 20px;
}

    .rx-navbar-new div {
        min-height: 35px;
    }

    .rx-navbar-new a {
        display: flex;
        border: 1px solid #00993c;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        height: 100%;
        color: #00993c;
        background-color: #ffffff;
    }

    .rx-navbar-new .active a {
        background-color: #00993c;
        color: #ffffff;
    }






.rx-navbar {
    list-style-type: none !important;
    padding-top: 5px;
    padding-left: 0;
    display: flex;
    padding-bottom: 15px;
}

    .rx-navbar > li {
        border-right: 1px solid black;
        flex-grow: 1;
        text-align: center;
    }

        .rx-navbar > li:last-of-type {
            border-right: unset;
        }

        .rx-navbar > li > a {
            color: black;
        }

li.active a {
    font-weight: bold;
    color: #fff;
}

.prescriptionItems > .collapse-link {
    color: white;
}

.pRow > .prescriptionInfo {
    display: inline-block;
    padding-bottom: 2px;
}

.pRow > .prescriptionItems {
    display: inline-block;
    float: right;
    margin-top: -17px;
    width: 90px;
    height: 32px;
}

.receptInformationRow > span {
    display: block;
}

.rx-list-purchase {
    width: 140px;
    min-height: 38px;
}

.bslabel {
    width: 35%;
    text-align: center;
    margin-left: 14px;
    border-radius: 10px;
}

.prescriptionItems.btn > a.collapsed {
    color: white;
}

.rowRecepiesDivider {
    border: 1px solid grey;
    border-right: none;
    border-left: none;
    width: 80%;
    margin-left: 10%;
}

.prescriptionRow {
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    flex-wrap: wrap;
    padding-top: 15px;
    font-size: 12px;
}

    .prescriptionRow div,
    .prescriptionRow h5 {
        color: black;
    }


.prescription {
    position: relative;
}

.chevrons.collapse-link:after,
.chevrons.collapse-link.collapsed:after {
    display: none;
}



.white-color {
    color: white !important;
}

.utgangnaReceptLabel {
    padding-top: 5px !important;
    font-size: 15px;
    padding-bottom: 5px !important;
    font-weight: bolder;
    padding-left: 10px !important;
    color: #00993c;
    border-bottom: 2px solid #E3E1E1;
}

    .utgangnaReceptLabel > span {
        font-size: 12.5px;
    }

    .utgangnaReceptLabel.toggle-element:not(.collapsed) {
        color: #ffffff;
    }

.rx-document-link a,
.prescriptionRow a {
    /*    color: #08c;
*/
}

.prescriptionItems.btn.btn-info {
    background-color: white;
    border: unset;
    text-align: right;
}

    .prescriptionItems.btn.btn-info > span > span {
        color: black;
    }

.animal-image {
    content: url("/content/images/6/Ikon_tass_green.png");
    width: 15px;
    margin-left: 10px;
    margin-top: -2px;
}

.defaultUser {
    display: flex;
    padding-top: 8px !important;
    padding-bottom: 10px !important;
}



    .defaultUser.open .rx-user-title .animal-image {
        content: url("/content/images/6/Ikon_tass_white.png");
    }


    .defaultUser .rx-user-show-hide .glyphicon {
        color: #00993c;
    }


.rx-user-title {
    font-weight: 600;
    font-size: 14px;
    padding-left: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.rx-user-show-hide {
    margin-left: auto;
    display: flex;
    font-weight: 600;
    padding-right: 8px;
    align-items: center;
}

    .rx-user-show-hide div {
        color: #090;
    }

#aktuelRecept {
    font-size: 15px;
}

.ordinationlist .collapse-body {
    margin-bottom: unset;
}

.chevrons.toggle-element {
    border: unset;
}

.receptLaggTillBarn {
    padding-right: 5px;
    padding-left: 5px;
    padding-bottom: 33px;
}

    .receptLaggTillBarn a {
        color: #33d7ff !important;
    }

.topBorder {
    width: 100%;
    border-top: 3px solid #E3E1E1;
    margin-bottom: unset;
}

.fullmakterHeaderLabel {
    display: flex;
    margin-top: 2px;
}

    .fullmakterHeaderLabel span:first-of-type {
        min-width: 70%;
    }

.fullmaktUserDiv {
    display: flex;
    padding: 2px 0;
}

    .fullmaktUserDiv div:first-of-type {
        min-width: 70%;
    }

    .fullmaktUserDiv div:last-of-type {
        display: flex;
        width: 100%;
    }

        .fullmaktUserDiv div:last-of-type a {
            margin-left: auto;
            padding-right: 1px;
            color: red;
        }

.fullmaktFor {
    padding-top: 6px;
}


.fullmaktTill {
    padding-top: 10px;
    border-top: 1px solid #E3E1E1;
    margin-top: 15px;
}

.hkdb-flex,
.fullmakt-flex {
    display: flex;
    padding-left: 3px;
    padding-right: 10px;
    font-weight: bolder;
    padding-top: 8px;
    padding-bottom: 8px;
    margin: unset;
}

    .hkdb-flex div:last-of-type,
    .fullmakt-flex div:last-of-type {
        margin-left: auto;
        padding-left: 3px;
    }

.fullmakt-barn {
    border-bottom: 3px solid #e3e1e1;
    background-color: #ffffff;
    border-left: 1px solid #00993c;
    border-right: 1px solid #00993c;
    border-bottom: 1px solid #00993c;
    padding: 10px;
}

.hkdb-body,
.fullmakt-barn {
    color: black;
    padding: 10px;
}

    .hkdb-body h4,
    .hkdb-body p {
        padding: 0 3px;
    }

    .fullmakt-barn .collapse-body {
        margin-bottom: unset;
    }


    .hkdb-body .collapse-body {
        margin-bottom: unset;
    }

.samtyckeCheckbox {
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    font-weight: normal;
    padding-top: 10px;
    padding-bottom: 10px;
}

    .samtyckeCheckbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

.samtyckeCheckmark {
    position: absolute;
    top: 15px;
    left: 0;
    height: 20px;
    width: 20px;
    border-style: solid;
    border-width: 2px;
}

    .samtyckeCheckmark:after {
        content: "";
        position: absolute;
        display: none;
    }

.samtyckeCheckbox input:checked ~ .samtyckeCheckmark:after {
    display: block;
}

.samtyckeCheckbox .samtyckeCheckmark:after {
    left: 5px;
    top: 1px;
    width: 7px;
    height: 12px;
    border: solid black;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.ge-fullmakt-btn,
.lagg-till-barn-btn {
    width: 35%;
    float: right;
}

@media (max-width: 350px) {
    .ge-fullmakt-btn, .lagg-till-barn-btn {
        width: 50%;
    }
}


.fullmakt-datum {
    display: flex;
    padding-top: 15px;
    padding-bottom: 15px;
}

    .fullmakt-datum label {
        flex-grow: 1;
    }

.fullmakt-datum-option img {
    margin-right: 10px;
}

#spanDatepicker {
    display: inline-block;
    margin-left: 10px;
}

    #spanDatepicker input {
        text-align: center;
    }

.from-snapshot-message {
    padding-left: 4px;
    font-size: 15px;
    color: green;
    border-bottom: 1px solid #E3E1E1;
    padding-bottom: 10px;
}

.prescription-title {
    font-size: 18px;
    font-weight: 600;
    color: black !important;
}

.rx-attention {
    color: red;
    font-weight: 600;
}

.rx-osaker-tillgang {
    color: #FF9700 !important;
}

    .rx-osaker-tillgang img,
    .rx-attention img {
        width: 12px;
    }

.rx-finns-i-lager {
    /*    color: #090 !important;
*/ font-weight: bold;
}


    .rx-finns-i-lager img {
        width: 15px;
        margin-right: 5px;
    }

.rx-price-multi-icon-purchase,
.rx-price-icon-purchase {
    margin-left: auto;
    display: flex;
    flex-flow: column;
}

.rx-price-multi-icon-purchase {
    margin-top: auto;
}


.chevrons.btn.visaRecept.collapse-link.btn-info {
    background-color: unset;
    border: unset;
    padding: unset;
}

.rx-show-hide {
    color: #090;
    font-weight: 600;
    font-size: 12.5px;
    margin-right: -3px;
}

.chevrons.toggle-element {
    padding: unset;
    margin: unset;
}

.rx-prescription-row {
    width: 100%;
}

.rx-prescription-row-flex-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.chevrons.btn.visaRecept.collapse-link.btn-success.collapsed {
    color: #FAF9F4;
    width: 90px;
}

.card-padding.rx-prescription-flex-row h5 {
    margin-top: unset;
    margin-bottom: 3px;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    padding: 2px 0 1px 0;
    color: black;
}

.card-padding.rx-prescription-flex-row div {
    padding: 1px 0 1px 0;
}

.rx-flex-row-100 {
    width: 100%;
}

.rx-flex-row {
    display: flex;
    flex-flow: column;
}

.rx-green-btn {
    color: white;
    background-color: #090;
    border: 1px solid #090 !important;
    padding: 5px 0 !important;
}

    .rx-green-btn.toggle-element.glyphicon {
        color: white;
    }

.toggle-element.rx-green-btn > .glyphicon {
    color: white;
}

.toggle-element .glyphicon {
    color: #00993c;
}

.padding-5 {
    padding: 5px;
}

.padding-8 {
    padding: 8px;
}

.rx-fullmakt-flex {
    display: flex;
    padding-top: 10px;
    padding-bottom: 5px;
    flex-flow: column;
}

.fullmakt-lagg-till {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

    .fullmakt-lagg-till > * {
        margin-left: 10px;
        margin-right: 10px;
    }

.fullmakt-barn.show {
    border-left: 1px solid #00993c;
    border-right: 1px solid #00993c;
    border-bottom: 1px solid #00993c;
    padding: 10px;
    background-color: #ffffff;
}

.rx-user-container {
    border: 1px solid #00993c;
    border-bottom: 1px solid #00993c;
    background: #ffffff;
}

#rx-user-container .toggle-element.collapsed {
    background-color: #ffffff;
}

.rx-user-container .toggle-element:not(.collapsed) div {
    color: #ffffff;
}

.rx-user-container .toggle-element:not(.collapsed) svg {
    stroke: #ffffff;
}

.rx-user-container .toggle-element.collapsed svg, .rx-user-container .toggle-element:not(.collapsed) svg {
    stroke: #00993c;
}

.rx-user-container .toggle-element:not(.collapsed) .rx-user-show-hide svg {
    stroke: #ffffff;
}

.lagg-till-barn-container {
    border: 2px solid #E3E1E1;
    background: #FCFCFC;
    border-top: 4px solid #E3E1E1;
}

.rx-lagg-till-barn-title {
    font-weight: bold;
    font-size: 14px;
    padding-top: 10px;
    padding-left: 3px;
    padding-bottom: 10px;
}

.rx-lagg-till-barn-btn {
    float: right;
    width: 100px;
    margin-right: 3px;
}

.padding-3 {
    padding-left: 4px;
    padding-right: 4px;
}

.rx-btn-show-hide {
    font-size: 14px;
}

.rx-hogkostnadsskydd {
    font-style: italic;
    padding-top: 15px !important;
}

.font-weight-600 {
    font-weight: 600;
}

.tooltip-inner {
    color: #fff !important;
}

.prescription-row-intial {
    flex: 0 0 80%;
    box-sizing: border-box;
    padding: 1px 0 1px 0;
}

.prescription-row-img {
    margin-left: auto;
    box-sizing: border-box;
    padding-top: 5px;
    padding-right: 2px;
}

    .prescription-row-img img {
        width: 45px;
    }

.prescription-row-more-info {
    flex: 0 0 100%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}

.prescription-row-more-info-show-more {
    flex: 0 0 80%;
    box-sizing: border-box;
}

.prescription-row-more-info .toggle-element {
    background-color: #ffffff;
}


    .prescription-row-more-info .toggle-element:not(.collapsed) svg {
        stroke: #00993c;
    }

.prescription-row-more-info-show-hide-btn {
    margin-left: auto;
    box-sizing: border-box;
}

.prescription-row-more-info-details {
    flex: 0 0 100%;
    box-sizing: border-box;
}

.prescription-row-shipping-info {
    flex: 0 0 65%;
    box-sizing: border-box;
    padding-top: 5px;
}

    .prescription-row-shipping-info div {
        padding: 1px 0 1px 0;
    }

.prescription-row-purchase {
    margin-left: auto;
    box-sizing: border-box;
    margin-top: auto;
    text-align: right;
}

.prescriptionItemBorders {
}

#rx-fullmakt-textarea {
    border: 1px solid lightgrey;
    padding: 3px;
    background: white;
}

    #rx-fullmakt-textarea ul {
        margin-left: -15px;
    }

#new-messages-notification {
    display: none;
    text-align: center;
    margin: 10px 0 10px 0;
    color: #000;
    padding: 5px;
}

.thinBorder {
    width: 98%;
    border-bottom: 2px solid #E3E1E1;
    /*margin-left: 2%;*/
    margin: 0 auto;
    margin-top: 15px;
}

.info-btn {
    padding-left: 8px;
    padding-top: 1px;
}

    .info-btn img {
        width: 12px;
    }

.disabledbutton {
    pointer-events: none;
    opacity: 0.5;
}

.rx-contact-us {
    padding: 20px 0;
}

    .rx-contact-us h3 {
        font-size: 18px;
        font-weight: 600;
    }

    .rx-contact-us .contactUsContainer {
        display: flex;
        padding: 5px 0;
        align-items: center;
    }

        .rx-contact-us .contactUsContainer img {
            width: 25px;
        }

        .rx-contact-us .contactUsContainer p {
            margin: unset;
            display: inline-block;
        }

    .rx-contact-us div > p > a {
        color: #00993c;
    }



.rx-user-title img {
    width: 15px;
    margin-left: 5px;
    margin-top: -2px;
}

.recept-more-info {
    padding: 10px 0 !important;
}

    .recept-more-info div,
    .recept-more-info span {
        padding: 1px 0;
    }

#rx-prescriptions .collapse-body {
    margin-bottom: unset;
    /*border-bottom: 1px solid #e3e1e1;*/
}

.rowDivider {
    border-bottom: 2px solid #00993c;
    width: 98%;
    margin-top: 25px;
    margin-left: 1%;
    margin-right: 1%;
}

.padding-left {
    padding-left: 8px;
}

.rx-message-container .removeMessage {
    position: absolute;
    right: 10px;
    color: red;
    stroke: red;
    cursor: pointer;
}

.rx-fullmakt-box {
    border: 1px solid #e3e1e1;
    background: #ffffff;
    padding: 8px;
    padding-top: 0px;
    /*border-top: 4px solid #E3E1E1;*/
}

    .rx-fullmakt-box .rx-user-title {
        padding: 0 4px;
        margin: 0 -8px;
        color: white;
    }

.rx-more-info-container {
    border: 1px solid #E3E1E1;
    background: #ffffff;
    padding: 10px;
    /*border-top: 4px solid #E3E1E1;*/
}

.rx-message-user-info {
    font-weight: 600;
    font-size: 14px;
}

.rx-message-container {
    border: 1px solid #E3E1E1;
    background: #ffffff;
    padding: 10px;
    margin-bottom: 10px;
}

.rx-menu-top-container {
    padding-left: 10px;
    padding-right: 10px;
}

.rx-more-info-container > div > .table {
    margin-bottom: 6px;
}

.hkdb-inkop-period {
    color: black !important;
    padding: 10px 5px !important;
    margin-left: -5px !important;
    margin-right: -6px !important;
    border-top: 1px solid #e3e1e1 !important;
}

    .hkdb-inkop-period .rx-user-title {
        font-size: 13px;
    }

.hkdb-body.collapse-body {
    margin-bottom: unset !important;
}

.recept-barn-container {
    padding-top: 15px;
}

.djurrecept-container:last-of-type label.rowDivider {
    border: unset;
    margin-top: 15px;
}

.HKDB-levels {
    margin: 15px auto 0 auto;
    display: flex;
    width: 96%;
    height: 40px;
}

    .HKDB-levels > div {
        display: flex;
        flex-direction: column;
        text-align: end;
    }

    .HKDB-levels > div {
        width: 20%;
        text-align: start;
    }

        .HKDB-levels > div:nth-child(1) {
            width: 10%;
            text-align: start;
        }

        .HKDB-levels > div:nth-child(2) {
            width: 30%;
            text-align: center;
        }

        .HKDB-levels > div:nth-child(3) {
            width: 20%;
            text-align: center;
        }

        .HKDB-levels > div:nth-child(4) {
            width: 30%;
            text-align: center;
        }

        .HKDB-levels > div:nth-child(5) {
            width: 11%;
            text-align: end;
        }

        .HKDB-levels > div > div > h3 {
            line-height: 0;
        }

        .HKDB-levels > div > div:last-child > h3 {
            /*padding-right: 6px;*/
            font-size: 13px !important;
            font-weight: 600;
        }

        .HKDB-levels > div > div:first-child > h3 {
            font-size: 10px !important;
            font-weight: 600;
        }

        .HKDB-levels > div:nth-child(5) > div:last-child > h3 {
            padding-right: 0;
        }

        .HKDB-levels > div > div > h3 {
            margin: 0;
            line-height: 16px;
        }

.hkdb-bar-tick {
    height: 32px;
    width: 2px;
    background-color: #81c887;
    display: inline-block;
}

    .hkdb-bar-tick:nth-of-type(odd) {
        height: 3px;
        margin-bottom: 17px;
    }

.hkdb-body p {
    padding-left: 5px;
    padding-top: 5px;
}

.hkdb-bar-tick {
    height: 28px;
    width: 2px;
    background-color: #81c887;
    display: inline-block;
}

    .hkdb-bar-tick:nth-of-type(odd) {
        height: 2px;
        margin-bottom: 13px;
    }


.rx-recept-error {
    background-color: unset;
    color: red;
    margin: 6px !important;
    padding: 6px !important;
    font-size: 13px;
}


.rx-inquiry-radio label {
    padding-left: 20px;
    margin: 0;
}

    .rx-inquiry-radio label:first-of-type {
        margin-top: 10px;
        margin-bottom: 5px;
        padding-left: 0px;
    }

.rx-contact-forfragan {
    vertical-align: middle;
    margin: unset !important;
}

#rx-fullmakt-contact-dropdown {
    width: 100%;
    padding: 6px 8px;
    margin-top: 10px;
}


.skota_hem_banner {
    background-color: #8fd04e;
}




/* FOOTER */



/*Tillbaka till toppen*/
#backToTop > .row {
    background: #3b3b3b;
    display: flex;
    justify-content: center;
}

    #backToTop > .row > h5 {
        color: #ffffff;
        text-decoration: underline;
        font-size: 15px;
    }

/*Apotea Responsive new footer*/
.apotea-responsive-footer {
    background-color: #FAF9F4;
}

#footer-logos-new {
    background-color: #FAF9F4;
}

.footer-logo-container {
    background-color: #FAF9F4;
}

.apotea-responsive-footer > div {
    background: #FAF9F4 !important;
    box-shadow: none !important;
}

.apotea-responsive-footer h4, apotea-responsive-footer li {
    color: #252824 !important;
}

.apotea-responsive-footer a {
    color: #252824 !important;
    font-size: 14px !important;
    line-height: 1.7;
}

.apotea-responsive-sub-social > div {
    display: flex;
}

.apotea-responsive-sub-social > h4 {
    font-size: 16px;
}

.apotea-responsive-sub-social {
    padding: 20px 10px;
}

    .apotea-responsive-sub-social > p {
        font-size: 14px;
    }


#apotea-social {
    display: flex;
    justify-content: center;
}

@media (max-width: 1200px) {
    #apotea-social {
        justify-content: start;
    }
}

#apotea-social img {
    width: 38px;
    margin-right: 10px;
}

.apotea-responsive-footer h4 {
    margin-bottom: 5px !important;
    font-size: 16px;
}


.apotea-responsive-footer #footer .pricerunner-score > * {
    color: #252824;
    padding-top: 5px;
}



#responsove-footer-prisjakt {
    display: flex;
}

.prisjakts-row {
    display: flex;
    flex-direction: row !important;
    justify-content: space-around;
    margin: 15px 0;
}

    .prisjakts-row:last-child {
        margin-bottom: 50px;
    }

    .prisjakts-row:first-child {
        margin-top: 50px;
    }

    .prisjakts-row > div {
        max-height: 100px;
        max-width: 110px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

        .prisjakts-row > div > img, .prisjakts-row > div > a > img {
            max-height: 75px;
        }

#prisjakt-rating > div, .pricerunner-score > div {
    font-size: 14px;
    color: #222222;
}

#apotea-new-responsive-changeresponsive-p {
    background-color: #ffffff !important;
}

#rx-fullmakter-info-popup,
#rx-kylvara-info-popup,
#rx-osaker-tillgong-popup {
    z-index: 9999;
}

.auth-green-button {
    background: #00993c;
    text-align: center;
    padding: 8px 8px;
    margin-bottom: 10px;
    border: 1px solid #00993c;
    cursor: pointer;
    width: 150px;
}

.auth-green-border-button {
    border: 1px solid #00993c;
    text-align: center;
    padding: 8px 8px;
    margin-bottom: 10px;
}

    .auth-green-border-button span {
        color: #00993c;
    }

.no-hover:hover,
.no-hover:focus {
    text-decoration: none;
}

.rx-login-info-container {
    margin-bottom: 20px;
    margin-top: 15px;
}

    .rx-login-info-container > div {
        margin-top: 10px;
        display: flex;
    }

    .rx-login-info-container img {
        height: 25px;
        margin-right: 8px;
    }



.rx-login-need-help {
    font-size: 16px;
    padding-left: 2px;
    margin-bottom: 5px;
    margin-top: 20px;
}

.rx-login-apotea-statements {
    padding-left: 3px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.rx-log-in-container {
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: 110px;
}


@media (min-width: 1200px) {
    .rx-bottom-logo-container {
        text-align: center;
    }
}

.rx-log-in-button-container {
    width: 100%;
}

.rx-button-container {
    color: white;
    background-color: #00993c;
    text-align: center;
    padding: 9px 0;
    margin-top: 5px;
}


/*.rx-in-cart-indicator {
    background: #559ac8;
    width: 90px;
    height: 34px;
    text-align: center;
    color: #fff;
    display: inline-block;
    line-height: 2.5;
}*/

.rx-login-options-buttons {
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-direction: column;
}

.rx-purchase-btn-container {
    margin-top: 0;
    text-align: right;
    position: relative;
    min-height: 38px;
}

    .rx-purchase-btn-container .loader {
        width: 20px;
        height: 20px;
        margin-left: 10px;
        display: inline-block;
        position: absolute;
        right: 10px;
        top: 8px;
    }

.fullmakt-error {
    color: red;
}

.prescription-status .loader .glyphicon-refresh.glyphicon-refresh-animate {
    font-size: 25px;
    margin-left: 3px;
}

.no-prescriptions {
    margin: unset !important;
    padding-top: 10px !important;
    padding-left: 10px !important;
}

.contact-us-formular {
    padding-left: 6px;
}

    .contact-us-formular > a {
        color: #00993c;
    }

.hourglass {
    display: flex;
    align-items: center;
    padding: 10px;
}

    .hourglass > div {
        margin-left: 10px;
    }

.visaMerInfo {
    /*padding-top: 60px !important;*/
    padding-right: 100px !important;
}

    .visaMerInfo span {
        color: #00993c;
    }

.fullmakt-lagg-till.open {
    padding: 5px;
}

.show-datepicker-middle {
    left: 50% !important;
    margin-left: -115px;
}

.dissmiss-info-fullmakt-button {
    padding: 4px 25px;
    margin-top: 5px;
    margin-bottom: -5px;
}

.rx-fullmakt-info-container > p,
.rx-fullmakt-info-container {
    padding: unset !important;
}

.center-modal {
    position: absolute;
    left: 50%;
    top: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.rx-fullmakt-response-image {
    padding-bottom: 10px;
    width: 60px;
}

.btn-disabled {
    background-color: #D0D0D0;
    pointer-events: none;
}

.rx-fullmakt-needs-consent {
    border: 1px solid #8fbbce;
    border-radius: 1px;
    background-color: #D2F2FF;
    padding: 10px;
    margin-bottom: 10px;
}

.fullmaktSamtyckeDivName {
    display: inline-block;
    width: 55%;
}

.btn-rx {
    display: inline-block;
}

.concentCheckBoxDiv {
    display: inline-flex;
}

    .concentCheckBoxDiv .imgContainer {
        width: 50%;
    }

.fullmakSamtyckeDiv {
    padding: 4px 0;
}

    .fullmakSamtyckeDiv .rx-green-btn {
        padding: 5px 10px !important;
    }

.fullmaktSamtycke-btn-container {
    display: flex;
    justify-content: space-around;
    padding-top: 15px;
}

    .fullmaktSamtycke-btn-container .btn {
        width: 30%;
    }

#samtycke-kravs-fullmakt-error {
    padding-top: 10px;
}

.fullmaktSamtycke-info-container {
    width: 100%;
}

    .fullmaktSamtycke-info-container.collapse.in {
        border-bottom: 1px solid #E3E1E1;
        padding-bottom: 10px;
    }

/* Charity round-up*/


.round-up-left {
    height: 53px;
}

    .round-up-left img {
        height: 53px;
    }

.round-up-middle {
    flex-grow: 3;
    color: white;
    padding: 0 11px;
    line-height: 15px;
}

.round-up-right {
    text-align: right;
    width: 70px;
    padding-right: 3px;
}

.round-up-price-tag {
    color: white;
    font-size: 16px;
    line-height: 16px;
    margin-bottom: 3px;
    margin-right: 3px;
}


#stock-info img {
    vertical-align: middle;
    margin-top: -5px;
}

#stock-info {
    margin-top: 5px;
}

a {
    color: var(--bs-link-color);
}

    a:active, a:hover, a:active:hover {
        color: var(--bs-link-hover-color);
    }

.btn-info, .btn-info:active, .btn-info:hover, .btn-info:active:hover {
    font-weight: 700;
}

#product-description {
    margin-top: 10px;
    padding-bottom: 10px;
}

#product-facts-grid .value li {
    color: #00993c;
}

    #product-facts-grid .value li:hover {
        color: #00b547;
    }




#product-facts-header.toggle-element.open {
    background-color: #00993c;
}

    #product-facts-header.toggle-element.open h5 {
        color: white;
    }

    #product-facts-header.toggle-element.open .glyphicon {
        color: white;
    }

#price-history-header.toggle-element.open {
    background-color: #00993c;
}

    #price-history-header.toggle-element.open h5 {
        color: white;
    }

    #price-history-header.toggle-element.open .glyphicon {
        color: white;
    }




#shipping-error-message-div {
    display: flex;
    flex-direction: row;
}

    #shipping-error-message-div > img {
        width: 16px;
        margin-right: 10px;
    }

    #shipping-error-message-div .checkbox-inline {
        padding-left: 0px;
    }

/* Rebrand: Moss button, Warm White text in every state. Bootstrap 5 paints
   .btn from these --bs-btn-* variables (its own :active rules outrank ours),
   so set them as well as the legacy direct properties from responsive-default.css */
.btn-success {
    --bs-btn-color: #FAF9F4;
    --bs-btn-bg: #3F4935;
    --bs-btn-border-color: #3F4935;
    --bs-btn-hover-color: #FAF9F4;
    --bs-btn-hover-bg: #3F4935;
    --bs-btn-hover-border-color: #3F4935;
    --bs-btn-active-color: #FAF9F4;
    --bs-btn-active-bg: #3F4935;
    --bs-btn-active-border-color: #3F4935;
    --bs-btn-disabled-color: #FAF9F4;
    --bs-btn-disabled-bg: #3F4935;
    --bs-btn-disabled-border-color: #3F4935;
    --bs-btn-disabled-opacity: 0.5;
    color: #FAF9F4;
    background-color: #3F4935;
    border-color: #3F4935;
}

    .btn-success:hover,
    .btn-success:focus,
    .btn-success.focus,
    .btn-success:active,
    .btn-success.active,
    .open > .dropdown-toggle.btn-success {
        color: #FAF9F4;
        background-color: #3F4935;
        border-color: #3F4935;
    }

.btn-success.disabled,
.btn-success:disabled,
.btn-success.disabled:hover {
    color: #FAF9F4;
    background-color: #3F4935;
    border-color: #3F4935;
    opacity: 0.5;
}

#product .buy-number-display {
    background-color: #3F4935;
}

#product .buy-button {
    background-color: #3F4935;
}

#product-facts-grid .value a {
    color: #00CD98;
}

#product-subscription-details a {
    color: #00CD98;
}

#product-subscription-details input[name="product-subscribtion-interval"] {
    accent-color: green;
}


.PDFWarningBox {
    color: #00993c !important;
}

.expand-pre-text,
.collapse-pre-text {
    float: initial;
    margin-right: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #00993c;
}

.description-expand .glyphicon {
    color: #00993c;
}

description-collapse .glyphicon {
    color: #00993c;
}

.product-block-container:nth-child(2n+1):before {
    content: none;
    display: none !important;
}






#product-actions .row {
    margin-left: -3px;
    margin-right: -3px;
}

#product-image-container .badges {
    right: 10px;
}

.checkout-shipping-method .price-tag-small {
    color: #858997;
    font-weight: normal;
}

.checkout-charity-item, .offer-item, .checkout-shipping-method {
    background-color: #FAF9F4;
}


.onway {
    width: 25px;
    max-width: 25px !important;
    max-height: 25px !important;
    vertical-align: middle !important;
}


.product-grid {
    background-color: #FAF9F4;
    padding-top: 0px;
    margin-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
}



#product-related .product-block {
    margin: 0px !important;
}

.product-block .action .buy-button-container {
    min-width: 108px;
    max-width: unset;
    padding-left: 10px;
    padding-right: 10px;
}

.header-container {
    background-color: #3B697D;
}

    .header-container.header-second-row {
        background-color: #3B697D;
    }

    .header-container .header-second-row-content {
        background-color: #3B697D;
    }

.header-new-toplist-responsive {
    color: #3F4935;
}

    .header-new-toplist-responsive:hover {
        color: #293126;
    }

/* responsive-default.css (shared/base) sets #fff here; same selector/specificity,
   this bundle loads after it, so this wins */
#toplist {
    background-color: #FAF9F4;
}

#toplist-header a {
    color: #252824;
}

    #toplist.new-toplist-responsive > .content > .toplist-item-row {
        background-color: #FAF9F4;
        margin-top: 5px;
    }

.apomera-benefits {
    background-color: #E5E1D6;
    padding: 14px 10px 4px 10px;
    color: #252824;
    font-family: 'Inter', sans-serif;
}

.apomera-benefits-list {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

    .apomera-benefits-list li {
        font-size: 12px;
        line-height: 16px;
        margin-bottom: 10px;
    }

@media (max-width: 1199.98px) {
    .apomera-benefits-list {
        text-align: center;
    }
}


#sidebar-categories .lvl-1.collapsed {
    /* responsive-menu.css (shared/base) sets #f3f3f3 bg + black text here;
       same specificity but this bundle loads after it, so this wins */
    background-color: transparent;
    color: #252824;
    font-weight: 700;
    font-size: 14px;
}
/*#first-page-info {
    background-color: #ffffff;
    padding: 10px;
}*/
.responsive-footer-right-banners {
    background-color: #FAF9F4;
}

.nicotine-warning {
    font-size: 11px;
    line-height: 15px;
    display: inline-block;
    margin-top: 5px;
    width: 100%
}

#page {
    background-color: #FAF9F4;
    margin: 7px;
}


.all-articles-text {
    color: #252824;
}

.all-articles-button {
    display: block;
    margin: auto;
    background-color: #3F4935;
    width: 140px;
    height: 40px;
    font-size: 1.2em !important;
    cursor: pointer;
    color: #FAF9F4;
    border: none;
}

#brands {
    background-color: #FAF9F4;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
}

    #brands .row.rowy {
        justify-content: space-evenly;
    }

#product-sku-select {
    background-color: transparent;
    color: #323232;
    border-color: #00993c;
}


#product-nostock-details {
    margin-top: 0px;
    margin-bottom: 10px;
}

.premium .buy-button-container .purchase-button, .premium .buy-button-container .product-link-button {
    background-color: #3F4935;
    border-color: #3F4935;
    color: #FAF9F4;
}

.premium .buy-button-container .product-link-button:hover {
    color: #FAF9F4;
}

.premium .price-tag {
    top: 203px;
    left: 0px;
    width: 100%;
    background-image: none;
    margin-left: 0px;
    padding-left: 0px;
}

.premium div.price-tag.campaign {
    top: 225px;
}

.premium div.price-tag {
    top: 225px;
}

.premium .price-tag a {
    color: var(--premium-gray);
    font-weight: 700;
    width: 100%;
    display: inline-block;
    text-align: center;
    background-color: #ffffff;
}

#search-products.single-compact .premium .price-tag-flat.price-tag a {
    color: var(--premium-gray);
}

.single-compact .rx-image-text {
    display: none;
}

.single .price-tag:not(.price-tag-flat) {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 96px;
    background-size: contain;
    font-size: 25px;
    font-weight: 700;
}

#search-products.single .premium .price-tag {
    position: absolute;
    width: 100%;
    text-align: center;
    margin-left: 0px;
    left: 0px;
    font-size: 20px;
    top: 335px;
}

.premium div.price-tag .xp {
    font-size: 17px;
}

.premium .buy-button {
    background-color: #3F4935;
    border-color: #3F4935;
    color: #FAF9F4;
}

.premium .buy-number-display {
    background-color: #3F4935;
    border-color: #3F4935;
    color: #FAF9F4;
}

.premium-promotion.first-row {
    margin-bottom: 14px;
}

    .premium-promotion.first-row img {
        width: 100%;
    }

.premium-promotion.second-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

    .premium-promotion.second-row a {
        display: inline-block;
        width: 50%;
        margin-bottom: 14px;
    }

    .premium-promotion.second-row img {
        display: inline-block;
    }

    .premium-promotion.second-row a:nth-child(2n+1) {
        padding-right: 7px;
    }

    .premium-promotion.second-row a:nth-child(2n+0) {
        padding-left: 7px;
    }


.premium-promotion.third-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

    .premium-promotion.third-row a {
        display: inline-block;
        width: 100%;
        margin-bottom: 14px;
    }



#premium-home-main .read-more a {
    margin-top: 24px;
    display: inline-block;
}



@media (min-width: 1200px) {

    #logo {
        bottom: 10px;
        left: -9px;
    }

        #logo img {
            width: 300px;
        }

    #search-container {
        top: -10px;
    }

    #header {
        background-color: #3B697D;
    }


    #footer-logos-new img {
        max-width: unset;
        max-height: 60px
    }
}

/* ===== Rebrand: single-row header, Warm White bg + Moss text/icons =====
   #apomera-header-row is a purpose-built replacement for the old two-row
   header (Views/Shared/_Layout.Responsive.BS5.vbhtml renders this instead
   of the old markup entirely, for ShopID.Apomera only). It reuses the real
   mobile menu toggle, search form, and cart trigger by ID so all existing
   JS (offcanvas, live-search, cart quantity badge) keeps working — nothing
   here is a copy/duplicate of the old markup, since the old rows simply
   don't render for this brand at all.

   Two-child flex-between layout: logo on the left, everything else grouped
   together on the right (#apomera-header-right). */
#header {
    /* base rule (responsive-default.css) also sets display:flex;
       flex-direction:column here — neutralize it, #apomera-header-row
       handles all the layout itself */
    display: block !important;
    background-color: #3F4935;
    /* Safety net: stickyHeader is neutered in JS (see _Layout), but even if
       .sticky/.half/.sticky-hidden (sticky-header.css) ever get toggled some
       other way, this keeps the header visible and in flow regardless */
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
}

#apomera-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    row-gap: 8px;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 14px 20px;
    box-sizing: border-box;
}

@media (min-width: 1200px) {
    /* #content is width:1240px with no padding at this breakpoint, so its
       left/right edges land exactly at the centered 1240px column's edges —
       drop the header's own horizontal padding so it lines up with it
       instead of sitting inset by an extra 20px on top of the centering */
    #apomera-header-row {
        padding-left: 0;
        padding-right: 0;
    }
}

#apomera-logo-text {
    padding-right: 24px;
    font-family: 'Newsreader', 'Inter', serif;
    font-size: 44px;
    line-height: 1;
    white-space: nowrap;
}

    #apomera-logo-text a {
        color: #FAF9F4;
        text-decoration: none;
    }

#apomera-header-right {
    display: flex;
    align-items: center;
    column-gap: 24px;
    row-gap: 8px;
    flex-wrap: wrap;
}

/* Desktop: full search bar. Mobile: icon only (links to the search page) */
#search-container {
    position: relative;
    width: 320px;
    max-width: 45vw;
}

#search-form-input {
    width: 100%;
    background-color: #FAF9F4;
    border: 1px solid #E5E1D6;
    color: #252824;
    padding: 8px 40px 8px 16px;
    /* bootstrap.css zeroes the right corners on any non-last .input-group
       child (#search-form-input isn't last — the button span follows it);
       explicit longhands + !important so there's no ambiguity about it */
    border-top-left-radius: 3px !important;
    border-bottom-left-radius: 3px !important;
    border-top-right-radius: 3px !important;
    border-bottom-right-radius: 3px !important;
}

#search-form-button {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
}

    #search-form-button input {
        background-color: transparent !important;
        border: none;
        box-shadow: none;
        width: 20px;
        height: 20px;
        padding: 0;
    }

#apomera-mobile-search-icon {
    display: none;
    /* now a <button>, not an <a> — strip default button chrome */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

    #apomera-mobile-search-icon img {
        width: 22px;
        height: 22px;
    }

#apomera-account-link {
    display: none;
    align-items: center;
    gap: 6px;
    color: #FAF9F4;
    text-decoration: none;
    white-space: nowrap;
    font-size: 14px;
}

    #apomera-account-link img {
        width: 20px;
        height: 20px;
    }

    #apomera-account-link:hover {
        color: #FAF9F4;
        text-decoration: underline;
    }

/* Cart trigger already exists and works (offcanvas + live quantity badge) —
   only its text/button children are hidden and the icon swapped */
#cart-quantity-full,
#cart-header-to-checkout,
#toggle-cart-details-arrow {
    display: none !important;
}

/* Force-collapse the whole clickable chain down to the icon's own size.
   #toggle-cart-details-container inherits Bootstrap's .btn/.btn-sm padding
   (via --bs-btn-padding-y/x custom properties) plus its own padding rule in
   responsive-default.css — couldn't fully account for where 47x52 came from
   by reading the CSS alone, so this resets every ancestor in the chain
   directly rather than chasing the exact source further. */
#cart,
#cart-header-container,
#toggle-cart-details,
#toggle-cart-details-container {
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

#toggle-cart-details-container {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 18px !important;
    height: 18px !important;
}

#toggle-cart-details-icon {
    background-image: url('/content/images/24/icon-shopping_bag.svg') !important;
    /* This file already has TWO older rules for this same selector (an
       unconditional one and one inside @media(min-width:1200px)) left over
       from before this rebrand, setting min-width/min-height to 34-35px on
       the old cart.svg icon. min-width/min-height always win over width in
       CSS's sizing algorithm, so those were silently forcing this box back
       up to ~35px no matter what width/height said here. !important on all
       four so this is the one that actually wins. */
    width: 18px !important;
    height: 18px !important;
    max-height: 18px !important;
    max-width: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
}

.navbar-toggle .icon-bar {
    background-color: #FAF9F4;
}

@media (min-width: 1200px) {
    #apomera-account-link {
        display: flex;
    }

    #apomera-mobile-search-icon {
        display: none;
    }

    /* responsive-default.css sets #search-container to position:absolute,
       width:600px, left:320px at this same breakpoint — leftover from the
       old fixed-width desktop layout, and incompatible with the new flex
       row (it was overflowing the viewport). Cancel it back to flow. */
    #search-container {
        position: relative !important;
        width: 560px !important;
        /* base rule has max-width:45vw, which is only 540px right at this
           breakpoint (1200px * .45) — would clip the 560px above */
        max-width: none !important;
        left: auto !important;
        top: auto !important;
        margin: 0 !important;
    }

    /* Thinner + longer bar, bigger magnifying glass — desktop only, mobile
       (icon-only, no input shown) is untouched */
    #search-form-input {
        width: 100% !important;
        padding-top: 3px !important;
        padding-bottom: 3px !important;
        padding-right: 46px !important;
        font-size: 13px !important;
    }

    #search-form-button input {
        width: 24px !important;
        height: 24px !important;
    }

    /* Same file/breakpoint also absolute-positions #cart, #toggle-cart-details,
       #toggle-cart-details-container (old fixed 1240px layout), and offsets
       #suggest-container to align under the old search box position. Cancel
       all of it so these sit in normal flow inside the new flex row. */
    #cart {
        position: static !important;
        top: auto !important;
        right: auto !important;
    }

    #toggle-cart-details {
        position: static !important;
        right: auto !important;
        top: auto !important;
        width: auto !important;
    }

    /* relative, not static: still in normal flow (top/right are auto), but it
       stays the containing block for the absolutely positioned #cart-quantity
       badge, same as below 1200px. */
    #toggle-cart-details-container {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        background-color: transparent !important;
    }

    #suggest-container {
        left: 0 !important;
        top: 100% !important;
        width: 100% !important;
    }
}

@media (max-width: 1199.98px) {
    #search-container {
        display: none;
    }

    #apomera-mobile-search-icon {
        display: block;
    }

    /* Shrink logo + icons so "Apomera" + all three icons comfortably fit
       one row even on the narrowest phones (~320px wide) */
    #apomera-logo-text {
        padding-right: 12px;
        font-size: 28px;
    }

    #apomera-header-right {
        column-gap: 14px;
    }

    #apomera-mobile-search-icon img {
        width: 18px;
        height: 18px;
    }

    /* Clicking the search icon (see _Layout script) toggles this class instead
       of navigating to /sok/ with no query. Reuses the real #search-container
       (live-suggest form) rather than a separate field — hide everything else
       in the row so it has room; the icon swaps to an X and stays visible as
       the close toggle. */
    #apomera-header-row.mobile-search-active #apomera-logo-text,
    #apomera-header-row.mobile-search-active #cart,
    #apomera-header-row.mobile-search-active #navbar-container {
        display: none;
    }

    /* justify-content:center (not the base space-between) so the now-lone
       #apomera-header-right — sized to its own content, not stretched —
       centers as a group instead of sitting at the row's start */
    #apomera-header-row.mobile-search-active {
        justify-content: center;
    }

    #apomera-header-row.mobile-search-active #search-container {
        display: block;
        width: 70vw;
        max-width: 260px;
    }

    /* Thinner than the default mobile/tablet height */
    #apomera-header-row.mobile-search-active #search-form-input {
        padding-top: 4px;
        padding-bottom: 4px;
        font-size: 13px;
    }

    .navbar-toggle {
        padding: 0;
        margin: 0;
    }

    .navbar-toggle .icon-bar {
        width: 18px;
        height: 2px;
        margin-bottom: 3px;
    }
}

/* ===== Rebrand: product detail page (Views/Article/Details.Responsive.BS5.vbhtml) =====
   Scope note: only the image/price/buy/accordion block is touched here (the
   title + back-arrow row above it is a separate, not-yet-scoped pass). */

/* Clean product image, no badge clutter — same language as the product card */
#product-image-container .badges {
    display: none;
}

/* Mobile: price row before the image, buy button + accordion after it.
   #toggle-items (col-lg-8) is flattened via display:contents so its former
   children (#stock-price-box, #product-buy-row, #product-nostock-details,
   #product-info-row) become siblings of #product-image-col and can be
   freely reordered — same technique used for the header rebuild, avoids
   moving markup in the view. Desktop (>=992px) keeps the normal
   image-left/details-right layout, so this is scoped below the lg
   breakpoint only. */
@media (max-width: 991.98px) {
    #toggle-items {
        display: contents;
    }

    #stock-price-box {
        order: 1;
        width: 100%;
        /* #toggle-items (col-lg-8) used to supply Bootstrap's 12px column
           gutter here — display:contents removes that box (padding
           included), so #stock-price-box was landing flush against the row
           edge while #product-name's column (unaffected, separate row)
           still had its 12px. Replace the lost padding directly. */
        padding-left: 12px;
        padding-right: 12px;
        box-sizing: border-box;
    }

    #product-image-col {
        order: 2;
    }

    #product-buy-row {
        order: 3;
        width: 100%;
        /* #product-buy-row is itself a Bootstrap .row (own -12px negative
           margin), meant to be cancelled out by the +12px padding
           #toggle-items used to provide as its parent. That padding is gone
           (see #stock-price-box above) but this row's own negative margin
           isn't — cancel it directly so its column children's padding lands
           it in the same place #stock-price-box now does. */
        margin-left: 0;
        margin-right: 0;
    }

    #product-nostock-details {
        order: 4;
        width: 100%;
    }

    #product-info-row {
        order: 5;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

/* Stock/shipping status not shown on the rebranded PDP — price takes the
   full row instead of sharing it with #stock-info */
#stock-price-box #stock-info {
    display: none;
}

#stock-price-box {
    border-top: none;
    border-bottom: none;
}

#stock-price-box > .col-5 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

#price-info {
    text-align: left !important;
}

#price-info .price {
    color: #252824;
    font-size: 22px;
    font-weight: 700;
}

#price-info .price.campaign {
    color: #C95745;
}

#price-info .before-price {
    display: inline-block;
    color: #706d69;
    font-size: 14px;
    font-weight: 500;
    text-decoration: line-through;
    margin-left: 6px;
}

#price-info .discount-label {
    display: table;
    box-sizing: border-box;
    height: 20px;
    line-height: 20px;
    margin: 0 0 4px;
    background-color: #C95745;
    color: #FAF9F4;
    font-size: 12px;
    font-weight: 700;
    padding: 0 6px;
    border-radius: 2px;
}

/* Buy button: full width, matching the outlined card treatment already
   applied to .buy-button-container/.purchase-button in BuyButton-apomera.css */
#product-add-to-cart-container,
#product-add-to-cart-container .buy-button-container {
    width: 100%;
}

/* Accordion (Kuvaus / Annostelu & käyttö / Tuotetiedot / Hintahistoria):
   plain text + thin divider instead of the green expanded-state block, and
   a CSS-drawn "+" (rotating to "x" when open) instead of the feather
   chevron-down icon used elsewhere on the site */
#product-info .toggle-element {
    background-color: transparent !important;
    border-bottom: 1px solid #E5E1D6;
    padding: 16px 0;
}

#product-info .toggle-element h5 {
    color: #252824 !important;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 !important;
}

#product-info .toogle-header svg {
    display: none !important;
}

#product-info .toogle-header::after {
    content: "+";
    font-size: 20px;
    line-height: 1;
    color: #252824;
    transition: transform 0.2s ease;
}

#product-info .toggle-element:not(.collapsed) .toogle-header::after {
    transform: rotate(45deg);
}

.buy-button-container {
    display: inline-flex;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    max-height: 35px;
}

.buy-button-container div, .buy-button-container a  {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.7em;
    color: #FAF9F4;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .buy-button-container .purchase-button, .buy-button-container .purchase-button div, .buy-button-container .product-link-button {
        background-color: transparent;
        border: 1px solid #3F4935;
        color: #252824;
        width: 100%;
        height: 35px;
        font-size: 1.2em !important;
        cursor: pointer;
        line-height: normal;
    }

.buy-button-container .product-link-button:hover {
    text-decoration: none;
    color: #252824;
}

.buy-button {
    background-color: #3F4935;
    width: 24%;
    cursor: pointer;
}

.buy-button-unclickable {
    cursor: default;
    background-color: #a6a6a6 !important;
}

.buy-button-add-rx,
.buy-button-add {
    /*background-color: #006200;*/
    margin-left: 1.5%
}

.buy-button-container .product-link-button svg {
    height: 20px;
    width: 20px;
    margin-left: 5px;
}

.buy-button-reduce {
    /*background-color: #02bc02;*/
}
.purchase-button-unclickable {
    background-color: #a6a6a6 !important;
}

.buy-number-display {
    background-color: #3F4935;
    opacity: 0.8;
    width: 49%;
    margin-left: 1.5%;
    font-size: 1.3em !important;
}
.buy-number-display input {
    height: 100%;
    width: 100%;
    background-color:transparent;
    color:inherit;
    text-align:center;
    border: none;
}
.rx-login-button, .rx-login-button:hover, .rx-login-button:active, .rx-login-button:active:hover {
    background-color: #00993c !important;
    color: #ffffff;
}



/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 101; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 40%;
    text-align: center;
}

@media only screen and (max-width: 750px) {
    .modal-content {
        width: 90% !important;
    }
}

    .modal-content p {
        padding-left: 6%;
        padding-right: 6%;
    }

    /* The Close Button */
    .close {
        color: #040404;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }


.modal-close {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 8040;
    background-image: url(/content/images/fancybox/fancybox_sprite.png);
}


/* Sajtfärger på menyn */
#main-menu .menu-top,
#main-menu .menu-end {
    background-color: #3F4935;
}


#main-menu a {
    color: #252824;
}

#sidebar-categories .no-children a, #sidebar-categories .no-children a:hover, #sidebar-categories .no-children a:active {
    color: #252824;
}

#sidebar-categories .lvl-1 {
    background-color: transparent;
    color: #252824;
}

    #sidebar-categories .lvl-1:not(.collapsed) a {
        color: #252824;
    }

    #sidebar-categories .lvl-1.sidebar-categories-go {
        background-color: transparent !important;
        padding-left: 10px !important;
        border-left: 1px solid #E5E1D6;
        font-weight: 600;
        font-size: 14px;
    }
        #sidebar-categories .lvl-1.sidebar-categories-go a {
            color: #252824;
        }

}

#sidebar-categories .lvl-1.sidebar-categories-go a {
    color: #252824;
}

#main-menu .menu-content > div > h4 {
    /*color: #00993c;*/
    padding-left: 5px;
}



#sidebar-categories .lvl-1 {
    background-color: transparent;
    color: #252824;
}

.sidebar-category-header.lvl-2 {
    color: #252824;
    font-weight: 500;
    border-left: 1px solid #E5E1D6;
}

#sidebar-categories .lvl-2:not(.sidebar-categories-go) {
    border-left: 1px solid #E5E1D6;
}

.lvl-2.sidebar-categories-go {
    font-weight: 500;
}

.sidebar-category-header.lvl-2.collapsed {
    font-weight: 500;
}

    #sidebar-categories .lvl-2:first-child:not(.sidebar-category-header) {
        border-left: 1px solid #E5E1D6;
    }

.sidebar-category-header.lvl-2:not(.collapsed):after {
    color: #252824;
}

#sidebar-categories .lvl-3 {
    border-left: 1px solid #E5E1D6;
}
/**/

@media (min-width: 1200px) {
    #main-menu .menu-top,
    #main-menu .menu-end {
        background-color: unset;
    }

}