/**
	!!! ATTENTION - This file will not be loaded if there is a file with the same name in the OVERRIDED THEME
		- if we want to load _theme_variables for new theme and NOT OVERRIDE the current file, 
		- we should name the theme variables file like this ex: _theme_variables_designplus
	If we add a variable into a theme, we should add the variable here and explain what is used for.
*/
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* Define theme color as variable */
:root {
	--header-override-color: #eee;
	--header-icons-text-override-color: #000;
	--header-icons-background-override-hover-color: #000;
	--header-topbar-background-color: #333;
	/* The background color of the page, defaults to transparent */
	--main-body-background-color: var(--main-override-body-background-color, #eee);
	--main-body-text-color: var(--main-override-body-text-color, #333333);
	
	/* The background color of the different elements/boxes defaults to #fff */
	--main-elements-background-color: var(--main-override-elements-background-color, #fff);
	
	/* Main color theme */
	--main-color: var(--main-override-color, #383b42);
	
	/* Text in main pane of pages. This will be on white background */
	--main-text-color: var(--main-text-override-color, var(--main-color));
	
	--main-card-color: var(--main-override-card-color, var(--main-color));
	--main-card-text-color: var(--main-override-card-text-color, var(--header-text-color));
	
	/* Background colors of the page. complete page and/or just the central content */
	--main-background-color: var(--main-override-background-color, #fff);
	
	/* List separator color. Used in between elements in lists dropdowns etc */
	--main-list-separator-color: var(--main-override-list-separator-color, var(--main-color, #eee));
	
	/* Secondary text. Default for menus, header and footer */
	--secondary-text-color: var(--secondary-text-override-color, #fff);
	--secondary-button-background-color: var(--main-card-color, #6c757d);
	--secondary-button-background-color-hover: var(--main-card-color, #7e878f);
	
	/* Header text. Default for page headers H1, H2, H3*/
	--main-header-text-color: var(--main-color, var(--main-color));
	--main-inverted-header-text-color: var(--secondary-text-color, #fff);
	
	/* Hover color for buttons and stuff. Not used alot, but possible to override where it looks weird. */
	--main-hover-color: var(--main-hover-override-color, #5bf);
	
	/* Possible override for header */
	--header-color: var(--header-override-color, var(--main-color));
	--header-text-color: var(--header-text-override-color, var(--secondary-text-color));
	
	/* Possible override for menu */
	--menu-override-hover-color: #999;
	--menu-color: var(--menu-override-color, var(--main-color));
	--menu-hover-color: var(--menu-override-hover-color, var(--menu-color));
	--menu-text-color: var(--menu-text-override-color, var(--secondary-text-color));
	--menu-hover-text-color: var(--menu-override-hover-text-color, var(--menu-text-color));
	--menu-dropdown-color: var(--menu-override-dropdown-color, var(--menu-color));
	--menu-seperator-color: var(--menu-override-seperator-color, var(--menu-color));
	--menu-article-text-color: var(--menu-article-text-override-color, var(--main-body-text-color));
	/*--menu-dropdown-text-color: var(--menu-override-dropdown-text-color, var(--menu-text-color));*/
	
	--main-button-primary-color: rgb(187, 190, 196);
	
	/* Override icons in the header */
	--header-icons-text-color: var(--header-icons-text-override-color, var(--header-text-color));
	--header-icons-background-color: var(--header-icons-background-override-color, var(--header-color));
	--header-icons-text-hover-color: var(--header-icons-text-override-hover-color, var(--header-color));
	--header-icons-background-hover-color: var(--header-icons-background-override-hover-color, var(--header-text-color));
	
	
	/* Prev selection in small screen menu. Should be faded menucolor */
	--menu-entered-color: var(--menu-entered-override-color, #555);
	--menu-entered-text-color: var(--menu-entered-text-override-color, #eef6ff59);
	
	/* Possible override for footer */
	--footer-color: var(--footer-override-color, var(--main-color));
	--footer-text-color: var(--footer-text-override-color, var(--secondary-text-color));
	
	
	/* Variables for details lists, e.g spesifications in product item */
	--detaillist-header-background-color: var(--detaillist-override-header-background-color, var(--main-color));
	--detaillist-header-text-color: var(--detaillist-override-header-text-color, var(--header-text-color));
	--detaillist-list-border-color: var(--detaillist-override-list-border-color, var(--main-list-separator-color));
	
	
	--table-header-background-color: #eee;
	--table-header-text-color: #000;
	
	
	/* Inverted headers */
	--main-inverted-header-backgroundcolor: var(--main-override-inverted-header-backgroundcolor, var(--main-elements-background-color));
	--main-inverted-header-color: var(--main-override-inverted-header-color, var(--main-body-text-colorcolor));
	
	
	--main-link-color: var(--main-override-link-color, var(--main-color));
	--main-link-hover-color: var(--main-override-link-hover-color, var(--main-color));
	--main-fulltile-text-color: var(--main-override-fulltile-text-color, var(--main-card-text-color));
	--main-fulltile-text-hover-color: var(--main-override-fulltile-text-hover-color, var(--main-card-text-color));
	--main-fulltile-color: var(--main-override-fulltile-color, var(--main-card-color));
	
	
	/* Wishlist overrides */
	--main-wishlist-color: var(--main-override-wishlist-color, rgba(0, 0, 0, 0));
	--main-wishlist-text-color: var(--main-override-wishlist-text-color, var(--main-card-text-color));
	--main-wishlist-text-color: var(--header-icons-background-hover-color, var(--main-card-text-color));
	--main-wishlist-underlayer-color: 52, 52, 52;
	--main-wishlist-underlayer-opacity: 0.06;
	
	--qtab-mobile-primary-font-size: 80%;
	--qtab-mobile-primary-padding: 0.5em 1em;
	--qtab-mobile-primary-margin: 0;
	
	--form-element-background-color: white;
	--form-element-text-color: black;
	
	--main-font-family: var(--main-override-font-family, 'PT Sans', Arial, Helvetica, sans-serif);
	--main-font-size: 14px;
	--icon-font-family: "Font Awesome";
	--box-shadow: 0px 0px 7px -3px rgba(0, 0, 0, 0.18);
	--box-shadow-hover: 0px 0px 15px -3px rgba(0, 0, 0, 0.27);
	
	/** top search bar **/
	--top-search-bar-background-color: #fafafa;
	--top-search-bar-text-color: #333;
	--diabled-element-background-color: #ffffffab;
	
	/** Stock status */
	--main-stock-status-underlayer-color: 128, 128, 128;
	--main-stock-status-underlayer-opacity: 0.06;
	
	/* Stock colors for pickuppoints */
	--notinstock-color: #b22222;
	--instock-color: #47b821;
	--fewinstock-color: #ff8c00;
	--pickuppointsinfo-icon-color: #1b74c9;
	
	/* Cards */
	--tiles-default-background: #ccc;
	--tiles-default-color: #000023;
	--tiles-default-background-hover: #ddd;
	--tiles-default-color-hover: #ccc;
	--tiles-default-border-color: #c9c9c9;
	
	/* Footer */
	--main-footer-font-link-hover: #777;
	
	/* Cookie consent */
	--cookie-icon-bg: var(--main-link-color);
	--cc-bg: #ffffff;
	--cc-text: var(--main-text-color);
	
	--cc-btn-primary-bg: var(--main-link-hover-color);
	--cc-btn-primary-text: var(--menu-text-color);
	--cc-btn-primary-hover-bg: var(--main-link-color);
	
	--cc-btn-secondary-bg: var(--main-color);
	--cc-btn-secondary-text: var(--header-text-color);
	--cc-btn-secondary-hover-bg: var(--main-color);
	
	--cc-toggle-bg-off: #667481;
	--cc-toggle-bg-on: var(--cc-btn-primary-bg);
	--cc-toggle-bg-readonly: #343e45;
	--cc-toggle-knob-bg: var(--cc-cookie-category-block-bg);
	--cc-toggle-knob-icon-color: var(--cc-bg);
	
	--cc-cookie-category-block-bg: #eee;
	--cc-cookie-category-block-bg-hover: #eee;
	
	--cc-section-border: #eee;
	--cc-block-text: var(--main-text-color);
	--cc-cookie-table-border: #eee;
	--cc-overlay-bg: #fff;
	
	--cc-webkit-scrollbar-bg: #eee;
	--cc-webkit-scrollbar-bg-hover: var(--main-button-primary-color);
	
	--cc-font-family: var(--main-font-family);
	--cc-font-size: var(--main-font-size);
	--cc-z-index: 2147483647;
	--cc-border-radius: .45rem;
	--cc-btn-primary-hover-text: var(--cc-btn-primary-text);
	--cc-btn-secondary-hover-text: var(--cc-btn-secondary-text);
	--cc-btn-border-radius: 0.375rem;
	--cc-overlay-opacity: .85;
	--cc-consent-modal-box-shadow: 0 0.625rem 1.875rem rgba(2, 2, 3, 0.28);
	--cc-bar-max-width: 32rem;
	
	--checkout-progress-line: var(--main-link-color);
	--checkout-progress-line-alt: #ddd;
	
	--country-selector-bg-color: #fff;
	--country-selector-label-color: #333;
}