/* ----------------- GENERAL PURPOSE STYLES ----------------- */
.align-center {
    margin-left: 5%;
    width: 90%;
}

.rounded-corners-left {
    border-radius: 10px 0 0 10px;
}

.rounded-corners-right {
    border-radius: 0 10px 10px 0;
}

.flag {
    width: 16px;
    height: 16px;
}

.flag-en-GB {
    background-image: url('../images/flags/en_GB.png');
}

.flag-fi-FI {
    background-image: url('../images/flags/fi_FI.png');
}


.debug-msg {
    font-size: 10px;
    color: white;
    background-color: black;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1000;
}

/* ----------------- TEMPLATE ELEMENTS -----------------*/
body {
    background-color: #1F282D;
    font: 12.5px Helvetica Neue, Arial, sans-serif;
    margin: 0;
    padding: 0px;
}

#page {
    background-color: white;
    min-height: 100vh;
    padding: 0px 20px;
}

.white-red-background {
    background: url("../images/hb_white_red_bar.png") repeat-x scroll center center rgba(0, 0, 0, 0);
    height: 24px;
}

.white-red-background-center {
    background: url("../images/hb-logo-footer2.png") scroll center center rgba(0, 0, 0, 0);
    width: 64px;
    height: 54px;
}

#page-container {
    background-color: white;
    clear: both;
}

#header-right {
    color: white;
    text-decoration: none;
    font-size: 11px;
    position: relative;
}

#header-right-items span a {
    text-decoration: none;
    color: white;
    border-radius: 5px;
    padding: 5px 5px;
}

#header-right-items span a:HOVER {
    background-color: #E6E6E6;
    color: black;
    text-decoration: none;
}


#white-red-background {
    clear: both;
}

.separator {
    margin: 0 4px;
    font-weight: normal;
}

/* ----------------------- MENU ------------------------------ */
#lang-selectSelectBoxItContainer span {
    height: 20px;
    line-height: 20px;
    font-size: 11px;
}

/* #lang-selectSelectBoxIt - widoczna czesc span [flaga, text , arrow]]*/
#lang-selectSelectBoxIt {
    width: 90px;
    background-image: none;
    background-color: #333333;
    border-color: #333333;
}

#lang-selectSelectBoxIt.selectboxit-btn:hover {
    background-color: #E6E6E6;
    color: black;
}


#lang-selectSelectBoxIt.selectboxit-btn {
    color: white;
}


#lang-selectSelectBoxItArrow {
    border-top: 4px solid #BBBBBB;
    top: 40%;
}

/* Flag Icon Container */
#lang-selectSelectBoxItOptions a {
    height: 20px;
    line-height: 20px;
    font-size: 11px;
    color: black;
    padding: 0px;
}

#lang-selectSelectBoxItOptions a:HOVER {
    color: white;
}


#lang-selectSelectBoxItOptions.selectboxit-list {
    background-color: #E6E6E6;
}

#lang-selectSelectBoxItOptions .selectboxit-option-anchor {
    background-color: #E6E6E6;
    color: black;
}

#lang-selectSelectBoxItOptions .selectboxit-focus > .selectboxit-option-anchor {
    color: #ffffff;
    background-color: #FF0000;
    background-image: -moz-linear-gradient(top, #FF0000, #622223);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FF0000), to(#622223));
    background-image: -webkit-linear-gradient(top, #FF0000, #622223);
    background-image: -o-linear-gradient(top, #FF0000, #622223);
    background-image: linear-gradient(#FF0000 0px, #622223 100%);
    background-repeat: repeat-x;
}


#white-red-bar {
    margin-top: 3px;
}

#header-middle-links {
    margin: 5px 0px;
    color: white;
    font-weight: bold;
}


#header-middle-links a {
    border-radius: 5px;
    text-decoration: none;
    color: white;
    padding: 5px;
}

#header-middle-links a:HOVER {
    color: black;
    text-decoration: none;
    background-color: #E6E6E6;
}

/* ----------------------- MENU ITEM  ------------------------------ */
.menu-item {
    background-color: #B72025;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 14px;
    padding: 10px 0px;
    text-align: center;
    white-space: nowrap;
    border: #333 solid 1px;
    margin: 0px -2px 0px 0px;

}

.menu-item:hover {
    background-color: black;
    text-decoration: none;
    color: white;
}

.menu-item.highlighted {
    background-color: black;
    text-decoration: none;
    color: white;
}


@media (min-width: 1280px) {

    .footer-section {
        width: calc(100% / 3 - 3px);
        display: inline-block;
    }

}

@media (min-width: 750px) and (max-width: 1280px) {
    .footer-section {
        width: calc(100% / 3 - 3px);
        display: inline-block;
    }
}

@media (min-width: 480px) and (max-width: 750px) {
    .footer-section {
        width: calc(100% / 2 - 2px);
        display: inline-block;
    }
}

@media (max-width: 480px) {
    .footer-section {
        display: block;
        width: 100%;
    }
}

@media (min-width: 950px) {

    #header-coupons {
        display: table;
        height: 82px;
        float: right;
    }

    #header-right .header-coupon {
        display: none;
    }

}

@media (min-width: 550px) and (max-width: 950px) {

    #header-right .header-coupon {
        display: table-cell;
    }

    #header-coupons {
        display: none;
    }

    #right-column {
        display: table-cell;
        text-align: right;
    }
}

@media (max-width: 550px) {

    #header-right .header-coupon {
        display: table-cell;
    }

    #header-coupons {
        display: none;
    }
}


@media (max-width: 950px) {

    #header-coupon {
        display: none;
    }

    #header-middle-links {
        display: block;
    }
}

/* ----------------------- SEARCH ------------------------------ */
#search-input {
    height: 24px;
    border: none;
    display: table-cell;
    width: 100%;
}

#search-button {
    font-size: 11px;
    background: none repeat scroll 0 0 #B72025;
    color: #FFFFFF;
    text-align: center;
    text-transform: uppercase;
    line-height: 24px;
    width: 90px;
    cursor: pointer;
    display: table-cell;
    vertical-align: middle;
}

#search a {
    text-decoration: none;
}

#search a:HOVER {
    background-color: black;
}


#search {
    padding: 5px 0px;
    display: table;
    width: 100%;
    max-width: 500px;
}


/* ----------------------- BASKET ------------------------------ */
.hb-basket-link {
    text-decoration: none !important;
    padding: 8px 5px;
    color: white;
    white-space: nowrap;
}

.hb-basket-link-hover {
    z-index: 10;
    text-decoration: none !important;
    color: black;
    padding: 8px 5px;
    white-space: nowrap;
}

#hb-basket-total {
    font-size: 14px;
    font-weight: bold;
}

#shopping-cart-container {
    position: absolute;
}

.cart-background {
    color: #333333;
    line-height: 15px;
}

.cart-item {
    display: table;
    width: 240px;
}

.cart-item img {
    float: left;
    height: 60px;
    margin: 7px 15px 5px;
    width: 60px;
}

.cart-item-title {
    color: #000000;
    display: inline-block;
    font-weight: bold;
    margin-top: 5px;
    overflow: hidden;
    text-decoration: none;
    width: 150px;
}

.cart-item-title:hover {
    text-decoration: underline;
}

.cart-item-price {
    margin-left: 90px;
    position: relative;
}

.subtotal-label {
    float: left;
    font-weight: bold;
    margin-right: 10px;
    padding-top: 5px;
    text-transform: uppercase;
}

.subtotal-amount {
    float: left;
    padding-top: 5px;
}

.partial-total-label {
    clear: both;
    float: left;
    font-style: italic;
}

#cart-checkout-button {
    clear: both;
    float: right;
    font-weight: normal;
}


.button, .button-small, .button-medium {
    background: none repeat scroll 0 0 #B72025;
    color: #FFFFFF;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

.back-button-icon {
    color: #B72025;
    background: white;
}

.button-disabled {
    background: none repeat scroll 0 0 #444444;
    color: #888888;
    font-size: 10.5px;
    padding: 5px 15px;
    text-decoration: none;
    text-transform: uppercase;
}

.button-disabled:hover {
    color: #888888;
    cursor: pointer;
}

.button {
    font-size: 10.5px;
    padding: 5px 15px;
}

.button-small {
    font-size: 9px;
    padding: 2px 5px;
}


.button-medium {
    font-size: 9px;
    padding: 3px 7px;
}

a.button {
    text-decoration: none;
}

a.button:HOVER {
    background-color: black;
    text-decoration: none;
}


.small-rounded-corners {
    behavior: url('script/pie/PIE.htc');
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -khtml-border-radius: 7px;
    border-radius: 7px;
}


.shopping-cart-item {
    display: table;
}

.shopping-cart-item-title {
    color: #000;
    font-weight: bold;
    text-decoration: none;
}

.shopping-cart-item-title:hover {
    text-decoration: underline;
}

.shopping-cart-item-price {
}

.basket-summary {
    width: 100%;
    table-layout: fixed;
    border-top: 1px solid #e5e5e5;
}

.basket-items {
    width: 100%;
    color: black;
    text-decoration: none;
}

.basket-item {
    width: 100%;
    table-layout: fixed;
}

.basket-item-img {
    width: 60px;
}

.basket-item-name {
    font-weight: bold;
    text-align: left;
    vertical-align: top;
}

.basket-item-price {
    font-weight: bold;
}

.basket-item-coupon-price {
    margin-right: 10px;
    color: #666;
    text-decoration: line-through;
}

.basket-item-qty {
    margin-right: 10px;
}

.basket-summary-left {
    text-align: right;
}

.basket-summary-subtotal-label {
    font-weight: bold;
    text-align: right;
    text-transform: uppercase;
}

.basket-summary-subtotal-value {
    font-weight: bold;
    text-align: right;
}

.basket-summary-total-label {
    font-weight: bold;
    text-align: right;
    text-transform: uppercase;
}

.basket-summary-total-value {
    font-weight: bold;
    text-align: right;
}


.basket-summary-coupon-label {
    font-weight: bold;
    text-align: right;
    text-transform: uppercase;
}

.basket-summary-coupon-value {
    font-weight: bold;
    text-align: right;
    color: red;
}

.basket-summary-partial {
    font-style: italic;
    text-align: right;
}


.subtotal {
    color: #333;
    font-size: 12px;
    padding: 10px 0 5px 0;
}

.subtotal-label {
    font-weight: bold;
    float: left;
    padding-top: 5px;
    text-transform: uppercase;
    margin-right: 10px;
}

.subtotal-amount {
    float: left;
    padding-top: 5px;
}

.partial-total-label {
    font-style: italic;
    clear: both;
    float: left;
}

.shopping-cart-item img {
    margin: 7px 7px 0px 7px;
}

#hb-basket-checkout-button {
    float: right;
    font-weight: normal;
    clear: both;
}


#hb-basket-qty {
    font-size: 13px;
    left: -21px;
    position: relative;
    top: -10px;
}

.shopping-cart-left-col {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.shopping-cart-right-col {
    display: table-cell;
    text-align: right;
    vertical-align: bottom;
}

#variant-products {
    width: 100%;
}


#forced-products-second-step {
    width: 100%;
}

#forced-products-first-step {
    width: 100%;
}


#shopping-cart-empty-msg {
    display: table-cell;
    text-align: center;
    height: 25px;
    vertical-align: middle;
    font-size: 14px;
}

.header-coupon {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.header-coupon-image {
    width: 100%;
    max-width: 241px;
    height: auto;
}

#add-to-basket-error-container {
    clear: both;
    height: 120px;
}

#coupon-error-popup-reject-button {
    color: white;
    display: inline-block;
    float: left;
    font-weight: bold;
    text-align: center;
    width: 100px;
    font-size: 12px;
}

#coupon-error-popup-accept-button {
    color: white;
    display: inline-block;
    float: right;
    font-weight: bold;
    text-align: center;
    width: 100px;
    font-size: 12px;

}

.debug-item-key {
    color: black;
    background: gray;
    font-weight: bold;
    text-align: left;
}

.debug-item-value {
    color: black;
    background: white;
    font-weight: normal;
    text-align: right;
}

.debug-translations {
    cursor: pointer;
}

.debug-translations:HOVER {
    font-weight: bold;
    font-size: large;
}

#footer-copyright {
    clear: both;
    text-align: center;
    font-size: 11px;
    padding: 25px 0 0 10px;
    color: #999;
}

#copyright a:VISITED {
    color: #999;
    text-decoration: none;
}

#copyright a {
    color: #999;
    text-decoration: none;
}

#add-to-basket-video-confirmation-popup {
    position: relative;
}


#video-confirmation-popup-body {
    padding: 20px;
    height: calc(80% - 41px);
}

#add-to-basket-video-confirmation-popup {

}

#video-confirmation-popup-footer {
    padding: 10px;
    border-top: 1px solid #dddddd;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: calc(20% - 20px);
}

.video-confirmation-button {
    width: 150px;
    text-decoration: none;
    text-align: center;
    vertical-align: center;
    color: white !important;
    display: block;
    padding: 5px 0px;
    cursor: pointer;
    border: 1px solid #9A9A9A;
    background-image: -moz-linear-gradient(center top, #989898 0px, #595959 100%);
    background-image: -webkit-linear-gradient(#989898 0px, #595959 100%);
    background-image: linear-gradient(#989898 0px, #595959 100%);
}

.video-confirmation-button.enabled {
    border: 1px solid #b98b8d;
    background-image: -moz-linear-gradient(center top, #FF0000 0px, #622223 100%);
    background-image: -webkit-linear-gradient(#FF0000 0px, #622223 100%);
    background-image: linear-gradient(#FF0000 0px, #622223 100%);
}

#video-confirmation-popup-footer-left {
    flex: 4 1 auto;
}

#video-confirmation-popup-footer-right {
    flex: 1 1 auto;
}

#facets-panel {
    line-height: 20px;
}

#facets-panel .side-menu-section {
    border: 1px solid #B72025;
    margin: 5px 5px 10px;
    padding-bottom: 5px;
}

#facets-panel .side-menu-section h3 {
    text-align: center;
}

#filters-element a {
    text-decoration: none;
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 800px) {
    .portal-menu-item {
        display: none;
    }

    #headers {
        flex-direction: column;
    }

    #header-right {
        align-items: stretch;
    }

    .menu-item {
        flex: 0 0 100%;
    }

    .product-catalog-container {
        text-align: center;
    }

    .item-with-review {
        display: inline-block;
        float: none;
    }

    #search {
        max-width: none;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 800px) {
    #headers {
        flex-direction: row;
        align-items: stretch;
    }

    #header-middle {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #header-right {
        align-items: flex-end;
    }

    .menu-item {
        flex: 0 0 50%;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .menu-item {
        flex: 0 0 33%;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .menu-item {
        flex: 0 0 20%;
    }
}

#webshop-logo {
    max-width: 100%;
    width: 600px;
    height: auto;
}

#headers {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

#header-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#header-right-items {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: right;
    align-items: center;
}

#header-coupon-section {
    float: left;
    white-space: nowrap;
}

#header-commands-basket {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#hb-basket-icon {
    font-size: 30px;
}

#menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}