@charset "UTF-8";

:root {
	/* colors */
	--gray-medium: #888;
	--gray-medium-light: #ccc;
	--gray-medium-light2: #ddd;
	--gray-light: #eee;
	--gray-light2: #f3f3f3;
	--gray-dark: #454545;
	--gray-transparent: rgba(238, 238, 238, .5);
	--gray-transparent2: rgba(97, 117, 121, .68);
	--gray-transparent3: rgba(41, 58, 61, .8);
	--black: black;
	--black-transparent: rgba(0, 0, 0, .5);
	--black-transparent2: rgba(0, 0, 0, .7);
	--white: white;
	--white-transparent: rgba(255, 255, 255, .5);
	--white-semi-transparent: rgba(255, 255, 255, .8);
	--blue-light1: #d4d4fc;
	--blue-base: #2a2aff;
	--blue-dark3: #010045;
	--blue-dark2: #00007f;
	--blue-dark1: #010093;
	--blue-dark-transparent: rgba(1, 0, 147, .3);
	--blue-medium: #0201ab;
	--blue-washed: #8584a8;
	--blue-washed-light: #ababbf;
	--blue-washed-light2: #dadae4;
	--blue-gray-base: #309fbf;
	--blue-gray-medium: #5f7177;
	--background-blue-gray: #344d54;
	--background-blue-gray-darker: #1d2b2f;
	--blue-gray-light: #8fa1a6;
	--blue-gray-light2: #dfe9ec;
	--orange-base: #f28e17;
	--orange-light: #ff9c00;
	--orange-dark: #996931;
	--orange-washed: #e6c192;
	--green-text: #109310;
	--green-base: #17a717;
	--green-dark: #178517;
	--green-dark2: #0f530f;
	--green-light2: #d9f2d9;
	--red-base: #ca2020;
	--red-dark: #a91717;
	--red: #ff0000;
	--red-little-bit-washed: #f94848;
	--red-light-bg: #fff3f3;
	--transparent: rgba(255, 255, 255, 0);
	
	/* prices */
	--price-public-color: var(--green-text);
	--price-buy-color: var(--blue-medium);
	--price-sell-color: var(--orange-base);
	--price-nodef-color: var(--red-dark);
	
	/* highlights */
	--highlight-1-color: var(--orange-base);
	--highlight-2-color: var(--blue-dark1); 
	
	/* html */
	--html-background: var(--gray-medium);
	
	/* body */
	--body-background: var(--gray-light);
	--body-text-color: var(--black);
	
	/* header */
	--header-background: var(--gray-light);
	--header-text-color: var(--blue-dark3);
	--cart-box-text-color: var(--blue-dark1);
	--cart-box-border-color: var(--orange-light);
	--cart-box-item-count-text: var(--orange-base);
	--main-menu-text-color: var(--blue-dark1);
	--main-menu-selected-border: var(--orange-base);
	--main-menu-preselected-border: var(--orange-light);
	--contact-box-text-color: var(--blue-dark1);
	--contact-box-border-color: var(--orange-light);
	--contact-box-selected-border: var(--orange-base);
	--main-menu-button-background: var(--blue-dark2);
	--main-menu-button-highlight-shadow: var(--orange-base);
	--deploy-menu-title-color: var(--gray-light);
	--deploy-menu-background: var(--blue-washed);
	--deploy-menu-text-color: var(--white);
	--deploy-menu-selected-text: var(--orange-base);
	--deploy-menu-preselected-border: var(--orange-light);
	--deploy-menu-button-background: var(--orange-washed);
	--deploy-menu-button-color: var(--blue-dark1);
	--deploy-menu-separator: var(--white-transparent);
	
	/* fixed-header */
	--fixed-header-background: var(--header-background);
	--fixed-header-text-color: var(--header-text-color);
	--fixed-header-box-shadow-color: var(--background-blue-gray);
	--fixed-header-border-color-hover: var(--orange-base);

	/* main */
	--dialog-overlay-color: var(--gray-transparent2);
	--content-topper-background-color: var(--background-blue-gray);
	--content-topper-overlay-color: var(--gray-transparent);
	--content-topper-full-overlay-color: var(--gray-transparent2);
	--content-topper-text-color: var(--white);
	--content-topper-text-shadow: var(--blue-washed);
	--content-topper-box-contrast-shadow: var(--white-transparent);
	--content-topper-text-shadow: var(--black-transparent2);
	--form-messages-error-background: var(--red-dark);
	--form-messages-error-color: var(--white);
	--form-messages-warning-background: var(--orange-dark);
	--form-messages-warning-color: var(--white);
	--form-messages-info-background: var(--gray-dark);
	--form-messages-info-color: var(--white);
	--form-messages-success-background: var(--green-dark);
	--form-messages-success-color: var(--white);
	--no-results-background: var(--blue-washed);
	--no-results-text-color: var(--gray-light);
	--no-results-highlight-text-color: var(--orange-light);
	--no-results-title-color: var(--blue-dark1);
	--no-results-link-color: var(--white);
	--no-results-link-hover-color: var(--white);
	--no-results-link-hover-shadow: var(--white-transparent);
	--image-zoom-overlay: var(--gray-transparent3);
	
	/* footer */
	--footer-background: none;
	--footer-text-color: var(--gray-dark);
	--search-top-title-border-color: var(--orange-base);
	
	
	/* images url */
	--user-box-icon-url: url('../img/icon-user.svg');
	--cart-box-icon-url: url('../img/icon-cart.svg');
	--main-menu-button-url: url('../img/icon-menu.svg');
	--cookie-icon-url: url('../img/cookie-icon.svg');
	--i-info-logo-faq: url('../img/i-blue-information.svg');
	

	/* buttons */

	--button-background-color: var(--orange-washed);
	--button-standout-background-color : var(--orange-light);
	--button-standout-forpro-background-color : var(--blue-dark1);
	--button-low-key-background-color : var(--gray-medium);

	--button-text-color: var(--blue-dark2);
	--button-standout-text-color: var(--blue-dark2);
	--button-standout-forpro-text-color: var(--blue-light1);
	--button-low-key-text-color: var(--white);

	/* buttons hover */
	--button-hover-shadow-color: var(--white-transparent);

	/* buttons active */
	--button-active-shadow-color: var(--black-transparent);


	/* element disabled */
	--disabled-background-color: var(--gray-medium-light);
	--disabled-text-color: var(--gray-light);
	
	/* forms */
	--invalid-input-bg: var(--red-light-bg);
	
	/* password field icons */
	--input-eye-icon: url('data:image/svg+xml;utf8,<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="%237B7B7B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4.375C3.75 4.375 1.25 10 1.25 10C1.25 10 3.75 15.625 10 15.625C16.25 15.625 18.75 10 18.75 10C18.75 10 16.25 4.375 10 4.375Z" /><path d="M10 13.125C11.7259 13.125 13.125 11.7259 13.125 10C13.125 8.27411 11.7259 6.875 10 6.875C8.27411 6.875 6.875 8.27411 6.875 10C6.875 11.7259 8.27411 13.125 10 13.125Z" /></svg>');
    --input-eye-icon-hover: url('data:image/svg+xml;utf8,<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="%23121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4.375C3.75 4.375 1.25 10 1.25 10C1.25 10 3.75 15.625 10 15.625C16.25 15.625 18.75 10 18.75 10C18.75 10 16.25 4.375 10 4.375Z" /><path d="M10 13.125C11.7259 13.125 13.125 11.7259 13.125 10C13.125 8.27411 11.7259 6.875 10 6.875C8.27411 6.875 6.875 8.27411 6.875 10C6.875 11.7259 8.27411 13.125 10 13.125Z" /></svg>');
    --input-eye-slash-icon: url('data:image/svg+xml;utf8,<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="%237B7B7B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 8.125C3.81328 9.75078 6.22109 11.875 10 11.875C13.7789 11.875 16.1867 9.75078 17.5 8.125" /><path d="M17.4999 13.1248L15.6733 9.92871" /><path d="M12.5 15L11.946 11.6758" /><path d="M7.5 15L8.05391 11.6758" /><path d="M2.5 13.1248L4.32656 9.92871" /></svg>');
    --input-eye-slash-icon-hover: url('data:image/svg+xml;utf8,<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="%23121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 8.125C3.81328 9.75078 6.22109 11.875 10 11.875C13.7789 11.875 16.1867 9.75078 17.5 8.125" /><path d="M17.4999 13.1248L15.6733 9.92871" /><path d="M12.5 15L11.946 11.6758" /><path d="M7.5 15L8.05391 11.6758" /><path d="M2.5 13.1248L4.32656 9.92871" /></svg>');
	
}

/*-----------------------------------------
|                 VIEWPORT                 |
 -----------------------------------------*/

html, body {
	padding: 0;
	margin: 0;
}

html {
	width: 100%;
	height: 100vh;
	
	background: var(--html-background);
}

body {
	margin: 0 auto;
	max-width: 2400px;
	
	position: relative;
	width: 100%;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	background-color: var(--body-background);
	font-family: 'Open Sans', Sans-Serif, sansserif, sans;
	font-size: 16px;
	color: var(--body-text-color);
}



/*-----------------------------------------
|               COMMON STYLES              |
 -----------------------------------------*/
 
/* alignments */
.right {
	text-align: right;
}

.left {
	text-align: left;
}

.center {
	text-align: center;
}
 
/* links */

.simple-link {
	padding: .2em .5em;
	text-decoration: none;
	color: var(--white);
	transition: all .2s;
}

.simple-link:hover {
	text-decoration: underline;
	filter: brightness(110%) contrast(110%);
	/* box-shadow: 0 0 5px var(--button-hover-shadow-color); */
} 

.disabled-action {
	background: var(--disabled-background-color) !important;
	color: var(--disabled-text-color) !important;
}

.disabled-action:hover {
	background: var(--disabled-background-color) !important;
	color: var(--disabled-text-color) !important;
	filter: none !important;
}

/* Basic inputs */
input:where(
	[type="text"],
	[type="password"],
	[type="number"],
	[type="email"],
	[type="date"],
	[type="datetime"]
	[type="datetime-local"],
	[type="month"],
	[type="search"],
	[type="tel"],
	[type="time"],
	[type="url"],
	[type="week"]
),
textarea {
  border: 1.5px solid #8f8f9d;
  box-sizing: border-box;
  border-radius: 3px;
}

/* Buttons */

a.button {
	display: inline-block;
	color: inherit;
	text-decoration: inherit;
}

button,
.button,
input[type='button'],
input[type='submit'] {
	font-size: inherit;
	font-family: Helvetica, Arial, Sans-Serif, SansSerif, sans;
	font-weight: bold;
	background: var(--button-background-color);
	color: var(--button-text-color);
	border: none;
	padding: .3em 1em;
	text-transform: uppercase;
	transition: all .2s;
	box-shadow: inset 0 0 2px #fff8, inset 0 0 1px #0005;
}

button:hover,
.button:hover,
input[type='button']:hover,
input[type='submit']:hover,
button:focus,
.button:focus,
input[type='button']:focus,
input[type='submit']:focus {
	filter: brightness(110%) contrast(110%);
	box-shadow: 0 0 5px var(--button-hover-shadow-color);
}

button:not(:disabled):active,
.button:not(:disabled):active,
input[type='button']:not(:disabled):active,
input[type='submit']:not(:disabled):active {
	box-shadow: inset -2px 2px 10px 0 var(--button-active-shadow-color);
}

/* standout-button */

button.standout-button,
.button.standout-button,
input[type='button'].standout-button,
input[type='submit'] {
	background: var(--button-standout-background-color);
	color: var(--button-standout-text-color);
}

button.standout-button.for-pro,
.button.standout-button.for-pro,
input[type='button'].standout-button.for-pro,
input[type='submit'].for-pro {
	background: var(--button-standout-forpro-background-color);
	color: var(--button-standout-forpro-text-color);
}

/* low-key-button */

button.low-key-button,
.button.low-key-button,
input[type='button'].low-key-button,
input[type='submit'].low-key-button {
	background: var(--button-low-key-background-color);
	color: var(--button-low-key-text-color);
	font-weight: normal;
}

/* disabled */

button:disabled,
.button:disabled,
input[type='button']:disabled,
input[type='submit']:disabled {
    background-color: var(--gray-medium-light);
    color: var(--gray-light);
}

button:disabled:hover,
.button:disabled:hover,
input[type='button']:disabled:hover,
input[type='submit']:disabled:hover {
    filter: none;
}

/* icons */

main .icon,
.ui-dialog .icon {
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

button .icon,
.button .icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-bottom: -.2em;
	margin-right: .2em;
}

/* details/summmary emulation */

.jsdetails {
	width: 100%;
}

.jsdetails.withjs > .jssummary::before {
	display: inline-block;
	content: "▶";
	width: 1.2em;
}

.jsdetails.withjs.open > .jssummary::before {
	content: "▼";
}

.jsdetails.withjs > .jssummary ~ * {
	display: none;
}

.jsdetails.withjs.open > .jssummary ~ * {
	display: block;
}

/* forms */

.messages > p,
#message-display.messages > p {
	margin: 0 0 .2em 0;
	padding: .2em 1em;
	border-radius: .3em;
	text-align: center;
	font-weight: bold;
	font-size: 13px;
}

.content-topper .messages p {
	box-shadow: 0 0 2px var(--content-topper-box-contrast-shadow);
}

.messages .error {
	background: var(--form-messages-error-background);
	color: var(--form-messages-error-color);
}

.messages .warning {
	background: var(--form-messages-warning-background);
	color: var(--form-messages-warning-color);
}

.messages .info {
	background: var(--form-messages-info-background);
	color: var(--form-messages-info-color);
	font-weight: normal;
	font-style: italic;
}

.messages .success {
	background: var(--form-messages-success-background);
	color: var(--form-messages-success-color);
	font-weight: normal;
}

.messages .success a {
	color: inherit;
	text-decoration: underline;
}

.messages .success a:hover {
	color: var(--blue-washed-light2);
	text-decoration: underline;
}

form h3 {
	font-size: 24px;
	font-weight: bold;
	font-weight: 700;
	margin: 0;
	padding: 0;
	text-align: center;
}

form .messages {
	min-height: 2em;
}

form.simple-layout .row {
	display: flex;
	flex-direction: row;
}

form.simple-layout .row > *:not(:first-child) {
	margin-left: 1em;
}

form.simple-layout .fields {
	display: flex;
	flex-direction: column;
}

form.simple-layout .field {
	display: flex;
	flex-flow: row wrap;
	align-items: baseline;
}

form.simple-layout .field label {
	white-space: nowrap;
	min-width: 8em;
	margin-right: .5em;
}

form.simple-layout .field input,
form.simple-layout .field textarea {
	flex-grow: 1;
	width: 10ch;
	font-weight: inherit;
}

form.simple-layout .submits {
	margin-top: .3em;
	text-align: right;
}

form.simple-layout .submits > * {
	margin-left: .5em;
	margin-top: .2em;
}

form:not([name='login-form']) :is(
	input[type="text"]:invalid,
	input[type="email"]:invalid,
	input[type="number"]:invalid,
	input[type="text"]:invalid,
	input[type="date"]:invalid,
	input[type="datetime-local"]:invalid,
	input[type="month"]:invalid,
	input[type="password"]:invalid,
	input[type="search"]:invalid,
	input[type="tel"]:invalid,
	input[type="time"]:invalid,
	input[type="url"]:invalid,
	input[type="week"]:invalid,
	input[type="datetime"]:invalid,
	textarea:invalid,
	select:invalid
) {
	background-color: var(--invalid-input-bg);
}

/* results */

.no-result {
	margin: 4em 1em;
	padding: 1em;
	background-color: var(--no-results-background);
	color: var(--no-results-text-color);
	font-style: italic;
	text-align: center;
	align-self: stretch;
}

.no-result h3 {
	color: var(--no-results-title-color);
}

.no-result .highlight {
	color: var(--no-results-highlight-text-color);
}

.no-result a {
	color: var(--no-results-link-color);
	text-decoration: none;
}

.no-result a:hover,
.no-result a:focus {
	color: var(--no-results-link-hover-color);
	text-decoration: underline;
	text-shadow: 0 0 2px var(--no-results-link-hover-shadow);
}

/* image zooms */

body #swipebox-overlay {
    background: var(--image-zoom-overlay);
}

/* miscaleneous */

.owner-name {
	white-space: nowrap;
}

/*-----------------------------------------
|             Google reCaptcha             |
 -----------------------------------------*/

.grecaptcha-badge {
	visibility: hidden;
}

.recaptcha-info {
	font-size: 12px;
	color: var(--gray-medium);
}

.recaptcha-info a {
	text-decoration: none;
	color: var(--blue-washed);
}

.recaptcha-info a:focus,
.recaptcha-info a:hover {
	text-decoration: underline;
	color: var(--blue-base);
}


/*-----------------------------------------
|                 DIALOGS                  |
 -----------------------------------------*/

body .ui-widget-overlay {
	background-color: var(--dialog-overlay-color);
	opacity: 1;
}

.ui-dialog.ui-widget {
    font-size: inherit;
}

.ui-dialog.wait .ui-dialog-titlebar-close {
  	display: none;
}

.ui-dialog.wait .ui-dialog-titlebar {
	display: none;
}

.ui-dialog.wait .ui-dialog-content {
	text-align: center;
/* 	min-height: 0 !important; */
	color: gray;
	font-style: italic;
}

/*-----------------------------------------
|                COMPONENTS                |
 -----------------------------------------*/

/* phone links */
.phone-link {
	white-space: nowrap;
}

/* unconnected tag */
.unconnected h4 {
	margin: 1em 0 0 0;
	padding: .5em 2em;
	border-radius: .2em;
	background: var(--orange-washed);
	text-align: center;
	text-transform: uppercase;
}

.unconnected .pro,
.unconnected .public {
	padding-left: 1em;
	text-align: center;
}

.unconnected .pro {
	margin-bottom: 1em;
}

.unconnected h5 {
	margin: .5em 0;
	padding: .2em 1em;
	font-size: 16px;
	background: var(--blue-washed);
	color: var(--white);
	text-align: left;
	text-align: initial;
}

.unconnected .content-with-icon {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.content-with-icon .content-icon {
	margin-right: 1em;
	margin-bottom: .5em;
	min-width: 4em;
	text-align: center;
	flex-grow: 0;
}

.content-with-icon .icon-image {
	max-width: 4em;
	max-height: 4em;
	display: block;
}

.content-with-icon .content {
	flex-grow: 1;
	text-align: left;
	margin-bottom: .5em;
}

.content-with-icon ul.content {
	list-style-type: none;
	margin: 0 0 .5em 0;
	padding: 0;
}

.content-with-icon ul.content li {
	padding: 0;
}

.content-with-icon ul.content li + li {
	margin-top: .5em;
}

.content-with-icon ul.content li.indent {
	padding-left: 1em;
}

.content-with-icon .help {
	font-style: italic;
}

.unconnected p {
	margin: 0;
}

.unconnected .link {
	margin-top: .5em;
	text-align: right;
}

.unconnected .chosen-dist .selected-dist-link {
	white-space: nowrap;
	text-decoration: none;
    color: var(--blue-medium);
    font-weight: bold;
    font-weight: 700;
}

.unconnected .highlight-1 {
	color: var(--highlight-1-color);
}

.unconnected .highlight-2 {
	color: var(--highlight-2-color);
}

/*-----------------------------------------
|                  HEADER                  |
 -----------------------------------------*/

header {
	padding: .5em;
	background-color: var(--header-background);
	color: var(--header-text-color);
}

/* -- HEADER UPPER ROW -- */

header #upper-row {
	display: flex;
	flex-direction: row;
}

/* Banner text */

header #upper-row .banner {
	flex-grow: 1;
	flex-shrink: 0;
	text-transform: uppercase;
	color: var(--body-text-color);
	letter-spacing: .2em;
}

/* User and Cart */

header .session-info {
	display: flex;
	flex-shrink: 1;
	min-width: 0;
}

header .user-box,
header .cart-box {
	margin-left: 1em;
	padding: .2em;
	
	display: flex;
	flex-direction: row;
	align-items: center;
	
	font-weight: bold;
	color: var(--cart-box-text-color);
	text-transform: uppercase;
	
	position: relative;
}

header .user-box {
	flex-shrink: 1;
	min-width: 0;
}

header .user-box .cover-link,
header .cart-box .cover-link {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

header .user-box .icon,
header .cart-box .icon {
	width: 1.5em;
	height: 1.5em;
	display: block;
	margin-right: .5em;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	flex-shrink: 0;
}

header .user-box .text,
header .cart-box .contents {
	white-space: nowrap;
	border-bottom: 3px solid transparent;
	transition: all .3s ease-in;
}

header .user-box .text {
	flex-shrink: 1;
	overflow: hidden;
	width: auto;
	text-overflow: ellipsis;
}

header .user-box:hover .text,
header .cart-box:hover .contents,
header .user-box:focus .text,
header .cart-box:focus .contents {
	border-bottom-color: var(--cart-box-border-color);
}

header .user-box .icon {
	background-image: var(--user-box-icon-url);
}

header .user-box.connected {
	font-weight: normal;	
}

header .cart-box .icon {
	width: 2em;
	background-image: var(--cart-box-icon-url);
}

header .cart-box .contents {
	text-align: center;
}

header .cart-box .count {
	color: var(--cart-box-item-count-text);
}

header .cart-box .amount {
	display: none;
}

/* user-box menus */

header .user-box .user-menu {
	position: absolute;
	top: 100%;
	right: 0;
	padding: 1em;
	z-index: 1;
	display: none;
	flex-flow: column nowrap;
	font-size: 13px;
	background: var(--deploy-menu-background);
	border-radius: 5px;
	box-shadow: -3px 3px 5px rgba(0, 0, 0, .3);
}

header .user-box.open .user-menu {
 	display: flex;
}

header .user-box.disconnected .user-menu {
	width: 25em;
}

header .user-box input[type="submit"] {
	background: var(--deploy-menu-button-background);
	color: var(--deploy-menu-button-color);
}

header .user-box input[type="submit"]:focus,
header .user-box input[type="submit"]:hover {
	background: var(--button-background-color);
}

header .user-box form h3 {
	font-size: 16px;
	color: var(--deploy-menu-title-color);
	margin-bottom: .5em;
}

header .user-box form .fields {
	background: var(--body-background);
	padding: .5em;
	border-radius: 2px;
}

header .user-box form .messages {
	min-height: 0;
}

header .user-box form .field {
	margin-top: .2em;
}

header .user-box nav a {
	text-decoration: none;
	color: inherit;
}

header .user-box nav a {
	display: block;
	text-align: center;
	white-space: nowrap;
	text-transform: uppercase;
	font-weight: bold;
	padding: .3em 0;
	background: none;
	color: var(--deploy-menu-text-color);
	border-bottom: 3px solid transparent;
}

header .user-box nav a:hover,
header .user-box nav a:focus {
	border-bottom-color: var(--deploy-menu-preselected-border);
}

header .user-box nav .separator {
	border: none;
	border-bottom: 3px dotted var(--deploy-menu-separator);
	margin: .5em 0;
}

/* -- admin link -- */

header .administration {
	margin-left: 1em;
	display: flex;
	align-items: center;
}

header .admin-link {
	display: block;
	width: 1.2em;
	height: 1.2em;
	background: url('../img/icon-gear-small.svg') no-repeat center;
	background-size: contain;
	filter: brightness(600%);
	transition: all .2s;
}

header .admin-link:hover,
header .admin-link:focus {
	filter: none;
	box-shadow: inset 0 0 10px white, 0 0 15px white;
}

/* -- login-form links -- */

form[name="login-form"] .forgot-password {
	text-transform: none;
	font-size: 13px;
	text-align: right;
}

form[name="login-form"] #forgot-pw {
	padding: 0;
	color: var(--blue-washed);
	font-weight: normal;
}

form[name="login-form"] .submits {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap-reverse;
	align-items: flex-start; /* beacause of wrap-reverse */
	justify-content: space-between;
	text-transform: uppercase;
}

form[name="login-form"] .submits a.simple-link {
	margin: .2em 0 0 0;
	padding: 0;
	font-weight: bold;
	white-space: nowrap;
}

/* -- HEADER MAIN ROW -- */

header #main-row {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
}

header #main-row .spacer {
	flex-grow: .1;
}

/* Logo */

header #logo img {
	display: block;
	width: 150px;
}

/* Main menu */

header .main-menu-wrapper {
	flex-grow: 1;
	flex-basis: 1024px;
	margin: 0 1em;
	overflow: hidden;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-bottom: .2em;
}

header #slk {
	flex-grow: 1;
}

.s-lks .lks-head {
	font-weight: normal;
	color: var(--gray-medium);
	margin: 0;
}

.s-lks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2em;
}

.s-lks a {
	color: var(--main-menu-text-color);
	text-decoration: none;
	display: inline-flex;
	flex-direction: row;
	gap: .3em;
	align-items: center;
	margin-bottom: .15em;
}

.s-lks a .text {
	/*display: none;*/
	font-size: .8em;
	margin-bottom: -.25em;
	opacity: .5;
}

header #main-menu {
	margin-left: -1px;
	margin-right: -1px;
	display: flex;
	flex-flow: row wrap;
	align-items: flex-end;
}

header #main-menu .menu-separator {
	border-right: 1px solid var(--main-menu-text-color);
	width: 1px;
	height: 1.5em;
	flex-grow: 0;
}

header #main-menu a {
	color: var(--main-menu-text-color);
	text-transform: uppercase;
	font-weight: bold;
	text-decoration: none;
	display: flex;
	flex-grow: 1;
	border: 1px solid;
	border-image: linear-gradient(to bottom, transparent 20%, var(--main-menu-text-color) 20%, var(--main-menu-text-color) 80%, transparent 80%);
	border-image-slice: 1;
	margin-right: -1px;
	justify-content: center;
	padding: .3em 0;
}

header #main-menu a .text {
	flex-shrink: 1;
	text-align: center;
	padding: 0 .5em;
	white-space: nowrap;
	text-overflow: ellipsis;
	position: relative;
}

header #main-menu a .text::after {
	position: absolute;
	content: "";
	bottom: -.3em;
	left: .5em;
	right: .5em;
	border-bottom: 3px solid transparent;
	transition: all .3s ease-in;
}

header #main-menu a:hover .text::after,
header #main-menu a:focus .text::after {
	border-bottom-color: var(--main-menu-preselected-border);
}

header #main-menu a.selected .text::after,
header #main-menu a.selected:hover .text::after,
header #main-menu a.selected:focus .text::after {
	border-bottom-color: var(--main-menu-selected-border);
}

/* Main menu button */

.invisible-target {
	display: block;
	position: fixed;
	top: -20px;
	left: -20px;
	background: none;
	border: none;
	opacity: 0;
	visibility: hidden;
}

.main-menu-button {
	display: block;
	position: relative;
	overflow: visible;
	width: 3em;
	height: 3em;
	flex-grow: 0;
	flex-shrink: 0;
	border-radius: 5px;
	background: var(--main-menu-button-url) no-repeat center;
	background-size: 60%;
	background-color: var(--main-menu-button-background);
}

.main-menu-button .cover-link,
.main-menu-button .close-cover-link {
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border-radius: 5px;
}

.main-menu-button .close-cover-link {
	display: none;
}

.main-menu-button .cover-link:hover,
.main-menu-button .cover-link:focus {
	box-shadow: 0px 0px 5px var(--main-menu-button-highlight-shadow);
}

.invisible-target:target + .main-menu-button,
.main-menu-button.open {
	filter: brightness(130%);
	z-index: 1; /* Firefox (at least) layering bug fix */
}

.invisible-target:target + .main-menu-button .cover-link,
.main-menu-button.open .cover-link {
	display: none;
}

.invisible-target:target + .main-menu-button .close-cover-link,
.main-menu-button.open .close-cover-link {
	display: block;
}

.invisible-target:target + .main-menu-button .main-menu,
.main-menu-button.open .main-menu {
	display: flex;
	filter: brightness(77%);
}

.main-menu-button a {
	text-decoration: none;
	color: inherit;
}

.main-menu-button .main-menu {
	position: absolute;
	top: 90%;
	right: 0;
	padding: 0 1em .5em 1em;
	z-index: 1;
	display: none;
	flex-direction: column;
	background: var(--deploy-menu-background);
	border-radius: 5px;
	box-shadow: -3px 3px 5px rgba(0, 0, 0, .3);
}

.main-menu-button .main-menu a {
	display: block;
	text-align: center;
	white-space: nowrap;
	text-transform: uppercase;
	font-weight: bold;
	padding: .3em 0;
	background: none;
	color: var(--deploy-menu-text-color);
	border-bottom: 3px solid transparent;
}

.main-menu-button .main-menu a:hover,
.main-menu-button .main-menu a:focus {
	border-bottom-color: var(--deploy-menu-preselected-border);
}

.main-menu-button .main-menu a.selected {
	color: var(--deploy-menu-selected-text);
}

.main-menu-button .main-menu .separator {
	border: none;
	border-bottom: 3px dotted var(--deploy-menu-separator);
	margin: .5em 0;
}

.main-menu-button .main-menu .separator.vertical {
	border-bottom: none;
	border-right: 3px dotted var(--deploy-menu-separator);
	margin: .5em 0;
}

header #header-menu-button {
	display: none;
}

/* Phone and contact */

header .contact-info {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-end;
	justify-content: flex-end;
	flex-shrink: 1;
}

header .phone-box,
header .contact-box {
	margin-left: 1em;
	padding: .5em .2em;
	
	display: flex;
	flex-direction: row;
	align-items: center;
	
	font-weight: bold;
	color: var(--contact-box-text-color);
	text-decoration: none;
	text-transform: uppercase;
}

header .phone-box .text,
header .contact-box .text {
	white-space: nowrap;
	border-bottom: 3px solid transparent;
	transition: all .3s ease-in;
}

header .phone-box:hover .text,
header .contact-box:hover .text,
header .phone-box:focus .text,
header .contact-box:focus .text {
	border-bottom-color: var(--contact-box-border-color);
}

header .phone-box .icon,
header .contact-box .icon {
	width: 1.5em;
	height: 1.5em;
	display: block;
	margin-right: .5em;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

header .phone-box .icon {
	background-image: url('../img/icon-phone.svg');
}

header #contact .icon {
	background-image: url('../img/icon-mail.svg');
}


/* -- HEADER MOBILE ROW -- */

header #mobile-row {
	/* display: flex; --> media query */
	display: none;
	flex-direction: row;
	justify-content: space-between;
}

header #mobile-row *:first-child {
	margin-left: 0;
}

/*-----------------------------------------
|               FIXED-HEADER               |
 -----------------------------------------*/

.fixed {
	position: fixed;
}

#fixed-header {
	width: 100%;
	flex-shrink: 1;
	min-width: 0;
	
	padding: .5em;
	background-color: var(--fixed-header-background);
	color: var(--fixed-header-text-color);
	font-size: 15px;
	box-shadow: 0 2px 16px var(--fixed-header-box-shadow-color);

	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	z-index: 2;
	box-sizing: border-box;
}

/* LOGO */
#fixed-header #logo img {
	display: block;
	width: 100px;
	margin: .2em .5em;
}

/* ICONS */

#fixed-header .user-box .icon,
#fixed-header .cart-box .icon,
#fixed-header .phone-box .icon,
#fixed-header .contact-box .icon {
	width: 1.5em;
	height: 1.5em;
	position: relative;
}

#fixed-header .user-box .icon::after,
#fixed-header .cart-box .icon::after,
#fixed-header .phone-box .icon::after,
#fixed-header .contact-box .icon::after {
		display: block;
    position: absolute;
    bottom: -0.5em;
    left: 0;
    right: 0;
    border-bottom: 3px solid var(--transparent);
    content: "";
}

#fixed-header .cart-box .icon {
	width: 2em;
}

/* ROWS */

#fixed-header .row {
	flex-grow: 1;
	flex-shrink: 1;
	min-width: 0;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
}

/* User and Cart */

#fixed-header .user-box,
#fixed-header .cart-box {
	margin-left: 1em;
	padding: .2em;
	
	display: flex;
	flex-direction: row;
	align-items: center;
	
	font-weight: bold;
	color: var(--cart-box-text-color);
	text-transform: uppercase;
	
	position: relative;
}

#fixed-header .user-box {
	flex-shrink: 1;
	min-width: 0;
}

#fixed-header .user-box .cover-link,
#fixed-header .cart-box .cover-link {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

#fixed-header .user-box .icon,
#fixed-header .cart-box .icon {
	display: block;
	margin-right: .5em;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

#fixed-header .user-box .text,
#fixed-header .cart-box .contents {
	white-space: nowrap;
	border-bottom: 3px solid transparent;
	transition: all .3s ease-in;
}

#fixed-header .user-box .text {
	flex-shrink: 1;
	overflow: hidden;
	width: auto;
	text-overflow: ellipsis;
}

#fixed-header .user-box:hover .text,
#fixed-header .cart-box:hover .contents,
#fixed-header .user-box:focus .text,
#fixed-header .cart-box:focus .contents {
	border-bottom-color: var(--cart-box-border-color);
}

#fixed-header .user-box .icon {
	background-image: var(--user-box-icon-url);
}

#fixed-header .user-box.connected {
	font-weight: normal;	
}

#fixed-header .cart-box .icon {
	width: 2em;
	background-image: var(--cart-box-icon-url);
}

#fixed-header .cart-box .contents {
	text-align: center;
}

#fixed-header .cart-box .count {
	color: var(--cart-box-item-count-text);
}

#fixed-header .cart-box .amount {
	display: none;
}

/* USER-BOX MENUS */

#fixed-header .user-box .user-menu {
	position: absolute;
	top: 100%;
	right: 0;
	padding: 1em;
	z-index: 1;
	display: none;
	flex-flow: column nowrap;
	font-size: 13px;
	background: var(--deploy-menu-background);
	border-radius: 5px;
	box-shadow: -3px 3px 5px rgba(0, 0, 0, .3);
}

#fixed-header .user-box.open .user-menu {
 	display: flex;
}

#fixed-header .user-box.disconnected .user-menu {
	width: 25em;
}

#fixed-header .user-box input[type="submit"] {
	background: var(--deploy-menu-button-background);
	color: var(--deploy-menu-button-color);
}

#fixed-header .user-box input[type="submit"]:focus,
#fixed-header .user-box input[type="submit"]:hover {
	background: var(--button-background-color);
}

#fixed-header .user-box form h3 {
	font-size: 16px;
	color: var(--deploy-menu-title-color);
	margin-bottom: .5em;
}

#fixed-header .user-box form .fields {
	background: var(--body-background);
	padding: .5em;
	border-radius: 2px;
}

#fixed-header .user-box form .messages {
	min-height: 0;
}

#fixed-header .user-box form .field {
	margin-top: .2em;
}

#fixed-header .user-box nav a {
	text-decoration: none;
	color: inherit;
}

#fixed-header .user-box nav a {
	display: block;
	text-align: center;
	white-space: nowrap;
	text-transform: uppercase;
	font-weight: bold;
	padding: .3em 0;
	background: none;
	color: var(--deploy-menu-text-color);
	border-bottom: 3px solid transparent;
}

#fixed-header .user-box nav a:hover,
#fixed-header .user-box nav a:focus {
	border-bottom-color: var(--deploy-menu-preselected-border);
}

#fixed-header .user-box nav .separator {
	border: none;
	border-bottom: 3px dotted var(--deploy-menu-separator);
	margin: .5em 0;
}

/* PHONE AND CONTACT */

#fixed-header .phone-box,
#fixed-header .contact-box {
	margin-left: 1em;
	padding: .5em .2em;
	
	display: flex;
	flex-direction: row;
	align-items: center;
	
	font-weight: bold;
	color: var(--contact-box-text-color);
	text-decoration: none;
	text-transform: uppercase;
}

#fixed-header .phone-box .text,
#fixed-header .contact-box .text {
	white-space: nowrap;
	border-bottom: 3px solid transparent;
	transition: all .3s ease-in;
}

#fixed-header .phone-box:hover .text,
#fixed-header .contact-box:hover .text,
#fixed-header .phone-box:focus .text,
#fixed-header .contact-box:focus .text {
	border-bottom-color: var(--contact-box-border-color);
}

#fixed-header .phone-box .icon,
#fixed-header .contact-box .icon {
	display: block;
	margin-right: .5em;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

#fixed-header .phone-box .icon {
	background-image: url('../img/icon-phone.svg');
}

#fixed-header #contact .icon {
	background-image: url('../img/icon-mail.svg');
}


/* ORDER IN ROW */
#fixed-header .user-box {
	order: 3;
}
#fixed-header .cart-box {
	order: 4;
}
#fixed-header .phone {
	order: 1;
}
#fixed-header .contact {
	order: 2;
}
#fixed-header #header-menu-button {
	margin: 0 .5em;
	order: 5;
}

/*-----------------------------------------
|           NOT-CONNECTED POPUP            |
 -----------------------------------------*/

.not-connected-popup {
	position: fixed;
	top: 100px;
	left: 1em;
	right: 1em;
	bottom: 1em;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-content: center;
	gap: 2em;
	padding: 1em;
	background: var(--blue-washed);
	border-radius: 5px;
	box-shadow: -5px 5px 10px var(--black-transparent);
	background: url('../img/content-topper-bg.jpg') no-repeat center left;
 	background-color: var(--content-topper-background-color);
 	background-size: auto 100%;
}


.not-connected-popup::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: var(--content-topper-full-overlay-color);	
}

.not-connected-popup > * {
	position: relative;
	z-index: 1;
	background: var(--gray-transparent3);
	padding: 1em;
	color: var(--content-topper-text-color);
}

.not-connected-popup h2 {
	text-align: center;
	color: var(--orange-base);
}

.not-connected-popup h2 .fa {
	font-size: .7em;
	margin: 0 .5em;
	transform: translateY(-.1em);
}

.not-connected-popup .public-part h2 {
	color: var(--blue-washed-light);
}

.not-connected-popup .public-part h3 {
	display: block;
	text-align: center;
	color: var(--blue-washed-light);
	font-size: 4em;
	margin: .5em 0;
}

.not-connected-popup .explain {
	text-align: center;
	font-style: italic;
	margin: 2em 0;
}

.not-connected-popup .public-part form {
	text-align: right;
}



/*-----------------------------------------
|                  MAIN                    |
 -----------------------------------------*/

main {
	flex-grow: 1;
}

/*-----------------------------------------
|              CONTENT TOPPER              |
 -----------------------------------------*/

main > .content-topper {
 	margin: 0;
 	padding: 0;
 	position: relative;
 	box-sizing: border-box;
 	min-height: 25rem;
 	color: var(--content-topper-text-color);
 	text-shadow: 0 0 2px var(--content-topper-text-shadow);
 	background: url('../img/content-topper-bg.jpg') no-repeat center left;
 	background-color: var(--content-topper-background-color);
 	background-size: auto 100%;
}

main > .content-topper.small {
 	min-height: 10rem;
 	background-size: auto 200%;
}

main .content-topper {
	position: relative;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
}

main .content-topper .cover {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

main .content-topper .overlay {
	background-color: var(--content-topper-full-overlay-color);
}

main .content-topper #cover-topper-overlay {
	position: relative;
	flex-grow: 1;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	padding: 0 .5em;
}

main .content-topper #centered-content-topper {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
}

main .content-topper #topper-icon {
	width: 100px;
	height: 100px;
	align-self: center;
	margin: 1em 2em 2px 2px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}

main .content-topper #topper-icon.empty-icon {
	width: 0;
	height: 0;
	display: none;
}

main .content-topper .titles-container {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

main .content-topper h1,
main .content-topper h2  {
	text-align: center;
	text-transform: uppercase;
	font-weight: blod;
	font-weight: 700;
	text-shadow: 0px 0px 13px var(--content-topper-text-shadow);
	margin: 0;
	padding: .5em;
}

main .content-topper h1 {
	position: relative;
	font-size: 52px;
	letter-spacing: .25em;
}

main .content-topper.small h1 {
	position: relative;
	font-size: 36px;
	letter-spacing: .25em;
}

main .content-topper h2 {
	/* margin-top: 10px; */
	letter-spacing: .04em;
	font-size: 32px;
}

main .content-topper #topper-align {
	position: absolute;
	top: 0;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	visibility: hidden;
}

/*-----------------------------------------
|            BRANDS-DISCLAIMER             |
 -----------------------------------------*/

main #brands-disclaimer {
	width: 100%;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	
	background-color: var(--gray-light2);
	padding: .5em;
	margin: 1em 0 .5em 0;
	box-sizing: border-box;
	
	
	font-size: 14px;
	font-style: italic;
}

#brands-disclaimer #registered-trademark,
#brands-disclaimer #adaptive-interchangeable {
	max-width: 100%;
	text-align: center;
	margin: .3em 0;
	color: var(--gray-dark);
}

#brands-disclaimer .uppercase {
	text-transform: uppercase;
}

/*-----------------------------------------
|               QUESTION-CARD              |
 -----------------------------------------*/

.question-card {
	margin: 1em .5em;
	padding: .5em 1em;
	display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
	max-width: 80%;
    width: 1024px;
	background-color: var(--white);
	border-radius: 1px;
    box-shadow: 2px 2px 3px var(--blue-gray-light);
}

.question-card .question-answer {
	display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
}

.question-card .question-answer .logo-question {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	margin: .25em 0;
}

.question-card .question-answer .logo {
    width: 5.5em;
	background-color: var(--transparent);
    background-position: left 0 top 50%;
    background-repeat: no-repeat;
    background-size: auto 65%;
    background-image: var(--i-info-logo-faq);
}

.question-card .question-answer .question {
	flex-grow: 1;
	text-align: center;
	font-size: 24px;
    color: var(--blue-dark1);
}

.question-card .question-answer .answer {
	margin: 0 0 .5em 0;
}

.question-card .question-answer .answer.cut {
    overflow: hidden;
    line-height: 1.2em;
    max-height: 3.6em;
    text-align: justify;
}

.question-card .question-answer .answer > p {
	margin: 0;
	margin-bottom: 1.2em;
}

.question-card .question-answer .more-info {
	color: var(--blue-medium);
	text-align: right;
}

/*-----------------------------------------
|                  FOOTER                  |
 -----------------------------------------*/

footer {
	padding: .5em;
	background: var(--footer-background);
	color: var(--footer-text-color);
	text-align: center;
}

/* -- Search tops -- */

footer #search-tops {
	padding: 2em 0;
}

footer #search-tops h1,
footer #search-tops h2 {
	text-align: center;
	margin: 0;
	padding: 0;
	font-size: 36px;
}

footer #search-tops h1 {
	font-weight: normal;
}

footer #search-tops h2 {
	font-weight: bold;
	font-weight: 800;
}

footer #search-tops .lists {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	justify-content: center;
}

footer #search-tops .search-top {
	flex-grow: 1;
	box-sizing: border-box;
	padding: 1em;
	min-width: 320px;
	max-width: 480px;
}

footer #search-tops h3 {
	font-size: 30px;
	font-weight: bold;
	font-weight: 800;
	text-align: center;
	margin: 0;
	padding: .5em;
	border-bottom: 4px solid var(--search-top-title-border-color);
}

footer #search-tops ul {
	margin: 0;
	padding: 0;
}

footer #search-tops li {
	margin: 0;
	padding: .2em 0;
	list-style-image: url('../img/list-arrow-orange-base.svg');
	list-style-position: inside;
}

footer #search-tops a {
	color: inherit;
	text-decoration: none;
}

footer #search-tops a:hover,
footer #search-tops a:focus {
	text-decoration: underline;
}

/* -- Footer links -- */

footer #f-slk {
	justify-content: center;
	margin-bottom: .5em;
}

footer #f-slk a {
	color: var(--gray-dark);
}

footer #f-slk .lks-head {
	display: none;
}

footer #footer-links {
	display: inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
}

footer #footer-links a {
	flex-grow: 1;
	border-left: 2px solid var(--footer-text-color);
	margin-left: -2px;
	color: inherit;
	text-decoration: none;
	padding: 0 1em;
}

footer #footer-links a:first-child {
	border-left: none;
}

footer #footer-links a:hover,
footer #footer-links a:focus {
	text-decoration: underline;
}

/* -- Author info -- */

footer #author-info {
	margin: 1em 0;
	font-size: 14px;
	font-weight: normal;
	text-align: center;
}

footer #author-info a,
footer #author-info .copyright {
	color: inherit;
	text-decoration: none;
	padding: 0 1em;
}

footer #author-info a:first-child {
	border-left: none;
}

footer #author-info a:hover,
footer #author-info a:focus {
	text-decoration: underline;
}
 
/*-----------------------------------------
|              COOKIES BANNER              |
 -----------------------------------------*/

.cookies-banner {
	/* positioning */
	position: fixed;
	z-index: 3;
	width: 100%;
	max-height: 90%;
	margin: 0 auto;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: auto;
	flex-flow: column nowrap;
	justify-content: flex-start;
	/* visual style */
	background: var(--gray-light);
	padding: .7em;
	box-shadow: 0 -2px 12px var(--fixed-header-box-shadow-color);
	font-size: 13px;
	box-sizing: border-box;
}

.cookie-banner-topper {
	width: 100%;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	box-sizing: border-box;
	padding: .5em 3em 0 3em;
}
.cookies-banner .sides {
	width: 4em;
	margin: 0 .5em;
}

.cookies-banner .center-bloc {
	text-align: center;
}

.cookies-banner .cookie-icon {
	background-image: var(--cookie-icon-url);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.cookies-banner p {
	margin: 0;
	font-weight: bold;
	text-align: center;
}

.cookies-banner p+* {
	margin-top: .3em;
}

.cookies-banner .cookie-banner-topper p {
	font-size: 15px;
}

.cookies-banner .infos {
	width: 80%;
	align-self: center;
	margin-top: 1em;
	display: none;
}

.cookies-banner .infos table {
	width: 90%;
	border-collapse: collapse;
	border: 1px solid var(--background-blue-gray);
	margin: 1em auto .3em auto;
}

.cookies-banner .infos tbody td {
	border-left: 1px solid #ccc;
	padding: .5em .3em;
}

.cookies-banner .infos thead tr th:last-child,
.cookies-banner .infos tbody tr td:last-child {
	border-right: 1px solid var(--background-blue-gray);
}

.cookies-banner .infos thead {
	white-space: nowrap;
	background: var(--blue-washed);
	color: var(--white);
}

.cookies-banner .infos thead th {
	padding: .5em .3em;
}

.cookies-banner .infos tbody tr {
	background: var(--gray-light2);
}

.cookies-banner .infos tbody tr:nth-child(even) {
	background:var(--blue-washed-light);
}

.cookies-banner .infos tfoot {
	background: var(--gray-light);
	text-align: center;
	font-style: italic;
	color: var(--gray-dark);
}

.cookies-banner .infos tfoot tr:first-child td {
	padding-top: 1em;
}

.cookies-banner .infos tfoot td {
	padding-top: .2em;
}

.cookies-banner .infos + p {
	margin-top: 1em;
	font-style: italic;
}

#cookie-action {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	margin-top: 1em;
	margin-bottom: .5em;
}

#cookie-action .button {
	padding: .5em .75em;
	margin-left: .3em;
}
#cookie-action .button:first-child {
	margin-left: 0;
}

#cookie-action .button:hover {
	cursor: pointer;
}

#cookie-action #reject-all {
	color: var(--white);
	background-color: var(--red-little-bit-washed);
}

#cookie-action #more-info, 
#cookie-action #less-info {
	background: var(--blue-washed);
	color: white;
}

#cookie-action #cookie-choice-confirm {
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	color: #363;
}


/*-----------------------------------------
|                 DIALOGS                  |
 -----------------------------------------*/
 
.no-title .ui-dialog-titlebar {
  display: none;
}

.no-title .ui-dialog-content {
  padding-top: 1em;
  padding-bottom: 1em;
}

.cart-confirm .ui-dialog-content {
	max-height: 100%;
}

/*-----------------------------------------
|             DIST-FORM-IFRAME             |
 -----------------------------------------*/

.ui-dialog.form-iframe .ui-dialog-titlebar {
	font-size: 22px;
}
.ui-dialog.form-iframe .ui-dialog-content#diag-container {
	border: none;
}

.ui-dialog.form-iframe .ui-dialog-content {
    padding: 0;
    overflow: hidden;
}

#dist-form-iframe {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	border: 0;
}



/*-----------------------------------------
|             PASSWORD REVEAL              |
 -----------------------------------------*/

input.revealable {
  --right-icon-pos: .5em;
  --right-icon-size: 1em;
  padding-right: calc(var(--right-icon-size) + 2 * var(--right-icon-pos));
}

input.revealable:where(:focus-visible, :hover) {
  --input-eye-icon: var(--input-eye-icon-hover);
  --input-eye-slash-icon: var(--input-eye-slash-icon-hover);
}

input.revealable {
  background-repeat: no-repeat;
  background-position: right var(--right-icon-pos) center;
  background-size: var(--right-icon-size);
  background-image: var(--input-eye-icon);
}

input.revealed {
  background-image: var(--input-eye-slash-icon);
}


/*-----------------------------------------
|              MEDIA QUERIES               |
 -----------------------------------------*/

@media only screen and (max-device-width: 1150px), screen and (max-width: 1150px) {

	/* main .content-topper #cover-topper-overlay {
		flex-flow: column;
		justify-content: flex-start;
		align-items: center;
		padding-top: 2em;
		padding-bottom: 1em;
	} */

	main .content-topper #topper-icon {
		width: 84px;
		height: 84px;
	}
}

@media only screen and (max-device-width: 1024px), screen and (max-width: 1024px) {
	.cookie-banner-topper {
		padding-left: 1em;
		padding-right: 1em;
	}
}

@media only screen and (max-device-width: 980px), screen and (max-width: 980px) {
	
	header #upper-row .banner {
		letter-spacing: normal;
	}
	
	header .s-lks .lks-head {
		display: none;
	}
	
	footer #search-tops .search-top:nth-child(3) {
		display: none;
	}
	
	#fixed-header {
		font-size: 14px;
	}

	#fixed-header .phone-box,
	#fixed-header .contact-box,
	#fixed-header .user-box,
	#fixed-header .cart-box {
		margin-left: .5em;
	}
	
	.not-connected-popup {
		display: flex;
		flex-direction: column;
		overflow: auto;
	}
}

@media only screen and (max-device-width: 860px), screen and (max-width: 860px) {
	main .content-topper #centered-content-topper {
		flex-flow: column nowrap;
		margin-bottom: 1em;
	}
	main .content-topper #topper-icon {
    	width: 76px;
		height: 76px;
		margin: 1em 2px .5em 2px;
    	margin-bottom: .5em;
	}
	main .content-topper h1,
	main .content-topper h2 {
		padding: .25em;
	}
}

@media only screen and (max-device-width: 800px), screen and (max-width: 800px) {
	
	header #upper-row .banner {
		text-align: center;
		letter-spacing: .2em;
		flex-shrink: 1;
	}
	
	header .session-info {
		display: none;
	}
	
	header .s-lks {
		justify-content: center;
	}
	
	header .s-lks a {
		font-size: 1.5em;
		padding: .2em;
		border: 1px solid var(--main-menu-text-color);
		border-radius: .2em;
		min-width: 1em;
		display: inline-flex;
		justify-content: center;
	}
	
	header .s-lks a .text {
		display: none;
	}
	
	header #main-menu,
	header #main-row .spacer {
		display: none;
	}
	
	header #header-menu-button {
		display: block;
	}
	
	header #main-row {
		justify-content: space-between;
	}
	
	header #phone {
		display: none;
	}
	
	header #mobile-row {
		display: flex;
	}
	
	header .user-box .user-menu {
		margin-right: -50%;
	}

	#fixed-header #phone {
		display: none;
	}

	.cookie-banner-topper .sides {
		display: none;
	}
}

@media only screen and (max-device-width: 768px), screen and (max-width: 768px) {
	
	main .content-topper h1 {
		letter-spacing: 0.1em;
		font-size: 40px;
	}


	.question-card .question-answer .logo {
	    background-size: auto 50%;
	}

	.question-card .question-answer .question {
		max-width: 70%;
	}
}

@media only screen and (max-device-width: 660px), screen and (max-width: 660px) {

	header .s-lks a {
		padding: 0;
		border: none;
	}
	
	#fixed-header #logo img {
		width: 75px;
	}

	#fixed-header .cart-box,
	#fixed-header .user-box {
		font-size: 13px;
		margin: 0;
	}

	#fixed-header .user-box .text,
	#fixed-header .contact-box .text {
		display: none;
	}

	#fixed-header .user-box:hover .icon::after,
	#fixed-header .contact-box:hover .icon::after {
		border-bottom-color: var(--fixed-header-border-color-hover);
	}

	#fixed-header .user-box .user-menu {
		right: auto;
		left: -150px;
	}
	
	footer #search-tops ul {
		margin: .5em 0 0 0;
		text-align: center;
	}
	
	footer #search-tops .search-top:nth-child(2) {
		display: none;
	}

	.cookies-banner .infos {
		width: 100%;
	}
}

@media only screen and (max-device-width: 620px), screen and (max-width: 620px) {
	header #upper-row .banner {
		letter-spacing: normal;
	}

	.question-card .question-answer .logo {
	    background-size: auto 46%;
	}
	
	.not-connected-popup {
		top: 80px; 
		font-size: .8em;
	}
}

@media only screen and (max-device-width: 520px), screen and (max-width: 520px) {
	
	main > .content-topper {
		min-height: unset;
	}
	
	.no-result {
		padding: .3em;
		margin: 1em 0;
	}
	
	header #phone-mobile,
	header .contact-info {
		display: none;
	}
	
	header #mobile-row {
		padding-top: .5em;
	}
	
	header .user-box,
	header .cart-box {
		font-size: 12px;
	}
	
	header .user-box .user-menu {
		margin-right: 0;
		right: auto;
		left: 0;
	}

	#fixed-header .main-menu-button {
   		width: 2.5em;
		height: 2.5em;
	}

	.question-card .question-answer .logo {
	    background-size: auto 42%;
	}

	.question-card .question-answer .question {
	    font-size: 18px
	}
}

@media only screen and (max-device-width: 420px), screen and (max-width: 420px) {
	
	header .user-box .user-menu {
		max-width: 250px;
	}
	#fixed-header .user-box .user-menu {
		left: -80px;
		top: 32px;
		max-width: 250px;
	}

	.unconnected .pro,
	.unconnected .public {
		padding-left: 0;
	}

	main .content-topper #topper-icon {
		width: 68px;
		height: 68px;
	}

	main .content-topper h1 {
		font-size: 34px;
		letter-spacing: .05em;
	}
	
	main .content-topper h2 {
		font-size: 22px;
	}

	#fixed-header #logo img {
		width: 60px;
	}

	#fixed-header .contact-box {
		display: none;
	}

	#cookie-action {
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-items: stretch;
	}
	
	#cookie-action button {
		padding: .7em;
		margin: .2em 0;
	}

	.question-card .question-answer .logo {
	    background-size: 55% 35%;
	}
}

@media only screen and (max-device-width: 320px), screen and (max-width: 320px) {

	footer #search-tops .search-top {
		min-width: 0;
	}

	.question-card .question-answer .logo {
	    background-size: 60% 30%;
	}

	.question-card .question-answer .question {
	    font-size: 16px
	}
	
	.question-card .question-answer .answer {
	    font-size: 14px
	}
}