:root {
    --base-background-color: #eee;
    --base-text-color: #212121;
    --base-grey-text-color: #9E9E9E;
    --base-dark-grey-text-color: #424242;
    --base-dark-icon-color: #424242;
    --base-dark-icon-hover-color: #757575;
    --base-primary-color: #006699;
    --base-accent-color: #e6e600;
    --base-disabled-color: #BDBDBD;
    --base-skeleton-color: #E0E0E0;
    /* header vars */
    /* footer vars */
    --footer-sub-row-color: #424242;
    /* login page vars */
    /* register page vars */
    /* home vars */
    /* products page vars */
    --products-item-title-text-color: #212121;
    --products-item-price-text-color: #039BE5;
    --products-item-description-text-color: #9E9E9E;
    /* product preview vars */
    --product-preview-wishlist-text-color: #039BE5;
    /* contact vars */
    /* cart vars */
    /* order vars */
    /* user profile vars */
    /* z-index variables */
    --header-container-z-index: 9999; /* stack: 1 (4 x 9) */
    --header-mobile-search-z-index: 1; /* stack: 1.1 */
    --header-nav-flyout-container-z-index: 2; /* stack: 1.1 */
    --header-nav-flyout-overlay-z-index: 2; /* stack: 1.1.1 */
    --header-nav-flyout-wrapper-z-index: 3; /* stack: 1.1.2 */
    --header-account-popup-z-index: 2; /* stack: 1.2 */
    --order-modal-z-index: 99999; /* stack: 1 -> same stack as header (needs to be higher than header stack) (5 x 9) */
    --home-category-info-wrapper-z-index: 2; /* stack: 2 */
    --home-category-image-wrapper-z-index: 1; /* stack: 2 */
    --home-favorite-product-image-points-z-index: 1; /* stack: 3 */
    --similar-product-image-points-z-index: 1; /* stack: 1 */
}

html {
    box-sizing: border-box;
    font-size: 16px;
}

*,
*:after,
*:before {
    box-sizing: inherit;
}

/* * {
    border: 1px solid #f00 !important;
  } */

html, body {
    padding: 0;
    margin: 0;
    min-height: 100vh;
    width: 100vw;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-width: 0;
    font-family: "Lato", "Roboto", "Helvetica", "Arial", sans-serif;
}

body {
    background-color: var(--base-background-color);
    color: var(--base-text-color);
    justify-content: stretch;
}

.content-container {
    display: flex;
    flex-direction: row;
    flex: 0 1 auto;
    justify-content: center;
}

.content-container-size-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    background-color: #fff;
}


@media all and (min-width: 1200px) {

    .content-container-size-wrapper {
        width: 1200px;
        padding: 0 12px;
    }
}


.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}