/*--------------------------------------------
 * Default layout
 * 
 * Copyright (c) 2015 Jan Van Liedekerke
--------------------------------------------*/

@font-face {
	font-family: 'Open Sans';
	src: local('Open Sans'), local('OpenSans'),
		url('/scripts/font/Open Sans.woff2') format('woff2'),
		url('/scripts/font/Open Sans.woff') format('woff');
	font-display: swap;
}

body {
	font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 1em; color: #000; background: #fefefe;
	margin: 0; padding: 0;
}

header {
	display: flex; position: fixed; top: 0; width: 100%; height: 90px; z-index: 3; margin: 0; padding: 0;
	background: #fff;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}


#logo	{ width: 200px; position: absolute; margin: 0; outline: none; }
main	{ display: flex; margin: 90px auto 0 auto; min-height: calc(100vh - 200px); padding-right: 30px; }

/* Left panel (navigation panel) */
#lpanel {
	position: fixed; top: 100px; width: 280px; padding-right: 20px; max-height: calc(100% - 100px); z-index: 2;
	white-space: nowrap; overflow-x: hidden; overflow-y: auto;
	opacity: 1; transition: max-width 0.6s ease-out, max-height 1s, opacity 0.5s;
}

/* Right panel (content panel) */
#rpanel {
	width: 100%; margin: 0; padding: 0 0 0 30px;
}

/*--------------------------------
 	Fancy
-------------------------------*/

a img			{ border: none; }
label			{ display: inline-block; max-width: 90%; padding: 0 0 0 10px; cursor: pointer; }
div.error		{ background: #f8f8f8; border-width: 0 0 2px 0; border-style: solid; border-color: #ff6347; padding: 10px; font-size: 1.1em; margin: 16px 0; }
div.info		{ width: 100%; font-size: 1.2em; margin-bottom: 12px; color: #5fc331; font-weight: bold; }
div.info svg		{ vertical-align: middle; margin-right: 8px; width: 20px; height: 20px; }
div.info span		{ width: 100%; vertical-align: middle; }
div.help,
div.warn		{ display: flex; margin: 20px 0; padding: 10px; border-radius: 8px; background: #99c1f133; max-width: 1000px; min-height: 76px; }
div.help svg,
div.warn svg		{ margin: 6px 6px 6px 0; min-width:64px; width: 64px; height: 64px; fill: #06c; }
div.help > span,
div.warn > span		{ align-self: center; }
span.helpmsg h2,
span.warnmsg h2,
span.helpmsg p,
span.warnmsg p	{ margin-top: 0; }
span.helpmsg p:last-child,
span.warnmsg p:last-child { margin-bottom: 0; }
div.warn		{ background: #fff; border-width: 3px 0 3px 0; border-style: dashed; border-color: #f90; border-radius: 0; }
div.warn svg		{ fill: #f90; }
span.errorfield		{ font-size: 0.8em; color: #c00; font-weight: bold; position: relative; }
span.errorfield img	{ animation: fadein .3s ease-in forwards; }
h2.line			{ font-size: 1.4em; color: #555; font-weight: bold; border-style: solid; border-color: #eee; border-width: 0 0 1px 0; }
main ul			{ list-style-image: url(/img/template/bullet-grey.png); }
hr			{ border-style: solid; border-width: 1px 0 0 0; border-color: #eee; clear: both; }
body a			{ color: #06c; text-decoration: none; }
body a:hover		{ text-decoration: underline; }
h1			{ margin: 0 0 30px 0; clear: both;font-size: 1.8em; font-weight: normal; color: #555; }
h2			{ margin: 25px 0 10px 0; font-size: 1.6em; font-weight: normal; color: #555; }
h3			{ margin: 25px 0 10px 0; font-size: 1.4em; font-weight: normal; color: #555; }
.tr_submit td		{ padding-top: 20px; text-align: right; }
span.ewloader		{ height: 43px; display: none; animation: fadein 0.4s ease-in; } /* Form loader */
div.ewloader		{ margin: 0; padding: 0; text-align: center; animation: fadein 0.4s ease-in; }  /* AJAX loader */
.ewloader svg,
.ewloader svg path	{ fill: #f90; width: 80px; height: 30px; }

.ewtxt span		{ color: #f60 }		/* text: easy */
.ewtxt			{ color: #444; }	/* text: webshop */
body.dark .ewtxt	{ color: #ddd; }

.fadein			{ animation: fadein 0.4s ease-in; }
.fadeout		{ animation: fadeout 0.4s ease-out; }
@keyframes fadein	{ from { opacity: 0; } to { opacity: 1; }}
@keyframes fadeout	{ from { opacity: 1; } to { opacity: 0; }}

/*--------------------------------
 	Top navigation
-------------------------------*/

header nav			{ display: flex; justify-content: space-between; width: 100%; margin-left: 200px; font-weight: bold; white-space: nowrap; }
header nav div			{ display: inline-block; }
/* Navigation icons top right */
header nav div:first-child	{ flex-grow: 2; white-space: normal; } /* wrap this navigation if screen is too narrow */
header nav a			{ display: inline-block; margin: 0 12px 1px 12px; padding: 16px 0 4px 0; color: #888; text-decoration: none; outline: none; }
header nav svg,
#mobnav svg			{ fill: #999; width: 24px; height: 24px; vertical-align: middle; }
svg.caret			{ vertical-align: middle; width: 16px; height: 16px; margin-left: 2px;  } /* Caret */
header nav a:hover		{ color: #f80; text-decoration: none; }
nav a:hover svg			{ fill: #f80; }
header nav a.active		{ border-width: 0 0 1px 0; border-style: solid; border-color: #f80; margin-bottom: 0px; }

/* Navigation buttons when not logged in */
header a.glowbutton			{ margin: 10px 12px 0 0; min-width: 90px; border-radius: 3px; }
header a.glowbutton:hover		{ color: #fff; }
header a.glowbutton:first-child		{ background: #fff; color: #333; border: 1px solid #f80; }
header a.glowbutton:first-child:hover	{ background: rgba(255, 102, 0, 0.1) }

/* Navigation icons top right */
header nav div:last-child a		{ padding: 0 10px; margin: 12px 0 0 0; }
header nav div:last-child a:nth-child(4){ margin-right: 6px; } /* Dark mode icon */
header nav div:last-child a:last-child	{ display: none; margin-right: 6px; } /* Hamburger menu icon */

/* Topnav Sub navigation */
header nav div span > span {
	display: block;  position: absolute; margin-left: -4px; min-width: 150px; z-index: 100; max-height: 0; opacity: 0;
	border: 1px solid #eee; border-radius: 10px; background: #fff;
	transition: max-height 0.3s linear 0s, opacity 0.2s linear 0s; overflow: hidden;
}
header nav div span > span a		{ display: block; line-height: 40px; padding: 0 12px; }
header nav div span > span a:hover	{  }
header nav div span:hover > span	{ opacity: 1; max-height: 210px; }

/*--------------------------------
 	Left panel - Sub navigation
-------------------------------*/

#subnav_controls		{ margin: 0 0 16px 10px; }
#subnav_controls input		{ width: 200px;	padding-left: 24px; border-radius: 0; border-width: 0 0 1px 0; font-size: 1em;
	background: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='far' data-icon='search' class='svg-inline--fa fa-search fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ccc' d='M508.5 468.9L387.1 347.5c-2.3-2.3-5.3-3.5-8.5-3.5h-13.2c31.5-36.5 50.6-84 50.6-136C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c52 0 99.5-19.1 136-50.6v13.2c0 3.2 1.3 6.2 3.5 8.5l121.4 121.4c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17zM208 368c-88.4 0-160-71.6-160-160S119.6 48 208 48s160 71.6 160 160-71.6 160-160 160z'%3E%3C/path%3E%3C/svg%3E") no-repeat scroll 0 5px;
	background-size: 16px 16px;
}
#subnav_controls svg,
#subnav_controls svg path	{ fill: #bbb; width: 36px; height: 36px; margin-left: 16px; cursor: pointer; vertical-align: middle; }
#subnav_controls svg:hover,
#subnav_controls svg:hover path	{ fill: #ccc; color: #ccc; }

.subnav	{
	margin: 0; text-align: left; font-weight: normal;
	transition: max-height 1s; overflow: hidden;
}
.subnav a {
	display: block; margin: 0 0 0 6px; padding: 10px 6px;
	color: #333; text-decoration: none; outline: none;
	transition: background 0.3s;
}
.subnav a:hover,
.subnav a.active		{ background: #f6f6f6; }
.subnav a > img			{ margin-right: 10px; vertical-align: middle; }
.subnav a > span		{ display: inline-block; width: 220px; vertical-align: middle; white-space: normal; }

/* Navigation on mobile also uses the left panel */
#mobnav				{ text-align: center; font-weight: bold; white-space: normal; }
#mobnav a			{ display: inline-block; line-height: 60px; padding: 0 20px; color: #888; text-decoration: none; outline: none; }
#mobnav a:hover,
#mobnav a.active		{ background: #f6f6f6; }

/*--------------------------------
 	Page navigation
-------------------------------*/
.pagenav			{ margin: 0; padding: 0; list-style: none; }
.pagenav li			{ display: inline-block; white-space: nowrap; }
.pagenav a			{ display: inline-block; width: 290px; height: 60px; padding: 8px; border-radius: 3px; color: #333; }
.pagenav a:hover		{ background: #f6f6f6; text-decoration: none; }
.pagenav a > img		{ margin-right: 10px; vertical-align: middle; }
.pagenav a > span		{ display: inline-block; vertical-align: middle; width: 230px; white-space: normal; }

/*--------------------------------
 	SVG icon navigation
-------------------------------*/
.svgicons 			{ margin: 30px 0 20px 0; padding: 0; }
.svgicons li			{
	display: inline-block; min-width: 130px; width: 130px; height: auto; padding: 8px 4px;
	border-radius: 3px; vertical-align: top; cursor: pointer; color: #999; text-align: center;
	transition: background-color ease-out 0.3s;
}
.svgicons a			{ color: #999; outline: none; }
.svgicons li:hover		{ background-color: #f5f5f5; }
.svgicons svg			{ width: 64px; height: 64px; margin-bottom: 4px; }

.svgicons svg,
.svgicons svg path		{ fill: #999; }
.svgicons li span 		{ display: block; }

.svgicons li:hover a		{ text-decoration: none; }
.svgicons li:hover svg,
.svgicons li:hover svg path	{ fill: #f90; }
.svgicons li:hover span		{ color: #f90; }

.inlineicons			{ margin: 0; }
.inlineicons > a		{ margin-right: 16px; color: #999; outline: none; font-weight: bold; transition: color ease-out 0.3s; }
.inlineicons > a > svg,
.inlineicons > a > svg path	{ width: 32px; height: 32px; margin-right: 6px; fill: #999; vertical-align: middle; transition: fill ease-out 0.3s; }
.inlineicons > a:hover		{ text-decoration: none; color: #f90; }
.inlineicons > a:hover > svg,
.inlineicons > a:hover > svg path{ fill: #f90; }

.actionicons 				{ white-space: nowrap; }
.actionicons a				{ outline: none; }
.actionicons svg			{ width: 32px; height: 32px; margin: 0; padding: 0 5px 0 0; cursor: pointer; }
.actionicons a:last-of-type svg		{ padding: 0; }
.actionicons > svg		 	{ fill: #3498db; } /* up, down */
.actionicons a:nth-of-type(1) svg	{ fill: #f5b041; } /* edit */
.actionicons a:nth-of-type(2) svg	{ fill: #ec7063; } /* delete */
.actionicons svg:hover			{ fill: #21618c; }
.actionicons a:nth-of-type(1):hover svg	{ fill: #d68910; }
.actionicons a:nth-of-type(2):hover svg	{ fill: #c0392b; }

/*--------------------------------
 	Footer
-------------------------------*/
footer				{
	display: flex; justify-content: space-between;
	margin: 40px auto 0 auto; padding: 40px 0 60px 0;
	border-width: 1px 0 1px 0; border-style: solid; border-color: #f80;
	text-align: center;
}
footer > div			{ flex-grow: 1; }
footer nav			{ display: flex; margin-top: 10px; text-align: left; }
footer nav span			{ flex-grow: 1; }
footer nav a			{ display: inline-block; margin-bottom: 1px; line-height: 34px; color: #333; outline: none; }
footer nav a:hover		{ text-decoration: none; border-width: 0 0 1px 0; border-style: solid; border-color: #f60; margin-bottom: 0px; }
footer > div:last-child		{ padding-top: 80px; } /* social icons */

#footertext			{ margin: 12px auto; padding: 0 30px 0 10px; display: flex; justify-content: space-between; color: #666; }
#footertext span		{ flex-grow: 2; }
#footertext a			{ margin: 0 20px 0 0; color: #666; outline: none; }

/*--------------------------------
 	Social
-------------------------------*/
a.social svg			{ vertical-align: bottom; width: 32px; height: 32px; margin: 8px; }
a.social use[href$="facebook"] 	{ fill: #1977f3; }
a.social use[href$="mastodon"] 	{ fill: #3088d4; }
a.social use[href$="nostr"] 	{ fill: #8d45dd; }
a.social use[href$="twitter"] 	{ fill: #333; }
a.social:hover 			{ filter: brightness(150%); }

/*--------------------------------
 	Page objects
-------------------------------*/
.suggestbox {
	display: none; position: absolute; width: 189px; margin: -5px 0 0 0; padding:0; z-index: 10;
	background: #eee; border-color: #ccc; border-style: solid; border-width: 0 1px 1px;
}
.suggestbox a {
	display:block; color: #333; line-height: 16px; margin: 0; padding: 5px;
	border-color: #ccc; border-style: solid; border-width:0 0 1px;
}
.suggestbox a:hover		{ text-decoration: none; background: #eee; }

.numnav				{ text-align: center; }
.numnav a, .numnav span		{ display: inline-block; margin: 6px; padding: 6px 12px; border-radius: 3px; }
.numnav a			{ border: 1px solid #eee; }
.numnav a:hover			{ text-decoration: none; background: #f6f6f6; }

#showprint			{ display: none; }

.pagecolumns			{ display: flex; }
.pagecolumns > div:first-child	{ flex-grow: 1; margin-right: 20px; }
.pagecolumns > div:last-child	{ width: 200px; min-width: 200px; }

/*--------------------------------
 	Buttons
-------------------------------*/
a.glowbutton, input[type="submit"], input[type="button"], button, label.glowbutton {
	white-space: nowrap; display: inline-block; min-width: 186px; margin: 0 0 10px 0; padding: 0 12px;
	text-decoration: none; text-align: center;
	color: #fff; background: #f80; border: 0; border-radius: 3px;
	line-height: 33px; height: 33px; font-weight: bold; font-size: 0.9em;
	transition: 0.3s background; cursor: pointer;
	font-family: Open Sans, Helvetica, Arial, sans-serif; /* -webkit-appearance: none; */
}

a.glowbutton:hover, input[type="submit"]:hover, input[type="button"]:hover, button:hover, label.glowbutton:hover {
	background: #f90; text-decoration: none;
}

input[type="submit"]:disabled, input[type="button"]:disabled {
	background: #ccc; cursor: default;
}

a.glowbutton.red		{ background: #ed333b !important; }
a.glowbutton.red:hover		{ background: #e54249 !important; }

.leftbuttons a			{ margin-right: 10px !important; }
.rightbuttons			{ text-align: right; }
.rightbuttons a			{ margin-left: 10px !important; }

/*--------------------------------
 	Forms
-------------------------------*/

input, select, textarea		{ border: 1px solid #ccc; border-radius: 3px; margin: 3px 0; padding: 5px; background: #fff; color: #000; }
select				{ padding: 4px; }
input:focus, textarea:focus	{ background: #eee; }
input[type="checkbox"],
input[type="radio"]		{ border: 0; outline: none; cursor: pointer; vertical-align: top; }
.formtable td:first-of-type	{ width: 30%; }
input[type="submit"]		{ float: right; margin: 10px 0 0 0; min-width: 224px; }
input + span, select + span	{ position: absolute; margin: 4px 0 0 4px; }
input[type="number"]		{ padding-right: 0; width: 80px; }
td.double input:first-child	{ margin-right: 8px; }
td.double input[size="10"]	{ width: 100px }

.cp	{ display: inline; padding: 6px 0 0 4px; vertical-align: middle; }
.cp svg	{ width: 16px; height: 16px; margin: 0 0 3px 0; animation: fadein .2s ease-in forwards; }
.cpwarn { display: inline; vertical-align: top; font-size: 0.8em; color: #f60; font-weight: bold; }
svg.ic	{ width: 24px; height: 24px; margin: 0 6px 0 0; vertical-align: middle; }
.pw-eye	{ position: absolute; cursor: pointer; fill: #666; transform: translateX(-33px) translateY(5px); }
svg.tr	{ width: 32px; height: 32px; margin: 0 0px 0 6px; vertical-align: middle; cursor: pointer; fill: #999; }

/* Progress bar */
#progressbar		{ margin: 0; padding: 0; }
#progressbar > div	{
	display: inline-block; width: 0; height: 28px; margin: 20px 0;
	text-align: right; font-weight: bold; line-height: 26px; white-space: nowrap;
	color: #333; background: #f90;
	background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
	background-size: 100px 100px;
	animation: move 2s linear infinite;
	transition: width 0.2s;
	border-radius: 10px;
}

@keyframes move { 0% { background-position: 0 0; } 100% { background-position: 100px 100px; }}

/*--------------------------------
 	Tables
-------------------------------*/

table			{ border: 0; margin: 0 auto; width: 100%; border-spacing: 0; }
th,td			{ padding: 5px; }
th			{ background: #e8e8e8; text-align: left; }
tr.alternate_on td	{ background: #f0f0f0; }
tr.alternate_off td	{ background: #f8f8f8; }
tr.hover:hover		{ background: #f6f6f6; cursor: pointer; }

.listtable		{ border-collapse: collapse; margin: 40px 0; }
.listtable tr		{ border-width: 0 0 1px 0; border-style: solid; border-color: #eee; }
.listtable tr:last-child{ border: none; }
.listtable th 		{ padding: .625em .4em; color: #444; background: #fff; border-width: 0 0 1px 0; border-style: solid; border-color: #ddd; }
.listtable td		{ vertical-align: top; padding: .625em .4em; }
.listtable.alt > tbody > tr:nth-child(odd)	{ background: #f0f0f0; }
.listtable.alt > tbody > tr:nth-child(even)	{ background: #f8f8f8; }
.listtable.hover > tbody > tr:hover { background: #f6f6f6; cursor: pointer; }

/*--------------------------------
 	Tab navigation
-------------------------------*/

ul.tn		{
	padding: -1px; margin-bottom: 20px; padding-left: 6px;
	border-width: 0 0 1px 0; border-style: solid; border-color: #ccc;
	color: #06c; font-weight: bold; font-size: 0.9em;
}

ul.tn li	{
	display: inline-block; list-style: none; margin: 10px 3px -1px 3px; padding: 0 3px; min-width: 114px; line-height: 30px; max-height: 29px;
	border-width: 1px; border-style: solid; border-color: #ccc; border-radius: 4px 4px 0 0;
	text-align: center;
	background: #f0f0f0; background: linear-gradient(#fff, #f0f0f0);
}


ul.tn li:hover	{ background: #f9f9f9; background: linear-gradient(#fff, #f9f9f9); }

ul.tn li.ta	{
	max-height: 30px;
	border-width: 1px 1px 0 1px; border-style: solid; border-color: #ccc;
	background: #fff;
}

main > div ul.tn li a	{ display: block; text-decoration: none; padding: 0 8px; color: #aaa; outline: none; }
main > div ul.tn li.ta a{ cursor: default; color: #06c; }
ul.tn li img		{ border: 1px solid #CCC; float: left; margin: 7px 3px 0 5px; }

ul.tn.multiline 	{ padding: 0 0 10px 0; }
ul.tn.multiline li	{ border-width: 1px; border-radius: 4px; margin-top: 10px; }

/*--------------------------------
 	Slideout div from top
-------------------------------*/
#slidedivcont		{ position: fixed; width: 100%; left: 0; top: 0; margin: 0; padding: 0; text-align: center; z-index: 5; }
#slidedivcont > div	{
	display: inline-block; width: 1130px; max-width: 90vw; vertical-align: top; text-align: left;
	background: #fff; box-shadow: 0px 0px 25px 0px rgba(165, 165, 165, 0.7);
	max-height: 0; transition: max-height 1s; overflow-y: hidden;
}
#slideup		{ position: absolute; width: 32px; height: 32px; margin: 0 0 0 20px; cursor: pointer; opacity: 0; transition: opacity .5s; }
#slideup,
#slideup path		{ fill: #999; color: #999; }
#slideup:hover,
#slideup:hover path	{ fill: #ccc; color: #ccc; }

#slidediv		{
	height: calc(100% - 70px);
	padding: 10px 30px;
	opacity: 0; transition: opacity 0.5s;
	margin-bottom: 40px;
}

#slidediv .ewloader	{ margin-top: 40px; }
.slidelang a		{ display: inline-block; width: 190px; color: #333; text-decoration: none; padding: 10px; border-radius: 4px; }
.slidelang a:hover	{ background: #eee; text-decoration: none; }


/*--------------------------------
 	Virtual assistant
		- Search box / suggest box
-------------------------------*/

#vassist		{ min-height: 200px; display: flex; }
#vassist > img		{ position: absolute; bottom: 0; margin: 0 140px 0 40px; }
#vassist > div		{ display: block; width: 100%; margin: 80px 0 0 160px; }
#vassist span		{ display: block; font-size: 1.4em; margin-bottom: 12px; }

#ewsearch { display: inline-block; width: 100%; max-width: 600px; margin: 0 0 40px 160px; padding: 0; z-index: 4; }
#ewsearch input[type="text"] {
	width: 100%; margin: 0; padding: 4px;
	font-size: 1.4em; background: #eee; color: #333;
	border-color: #efefef; border-radius: 3px;
	text-indent: 2px;
}
#supportscript1 {
	position: fixed; display: none; width: 610px; margin-top: -8px; margin-right: 3px; padding: 0; min-width: 300px; z-index: 4;
	border-width: 0px; border-style:solid; border-color:#CCC; border-radius: 0 0 3px 3px;
	background: #eee;
	max-height: 60vh; overflow-y: auto;
}
#ewsearch a.liveresult		{ line-height: 36px; display: block; color:#333; text-decoration: none; text-align: left; margin:0; padding: 0; font-size: 0.9em; overflow: hidden; }
#ewsearch a.liveresult strong	{ color: #f80; }
#ewsearch a.liveresult:hover	{ background: #ddd; border-radius: 3px; }
#ewsearch svg			{ float:left; margin: 8px 8px 0 5px; padding:0; vertical-align: middle; } /* width:16px; height:16px; */
#ewsearch svg, #ewsearch svg path { fill: #F80; }

/*--------------------------------
 	Live chat
-------------------------------*/
#chat			{
	position: fixed; bottom: 0; right: 10px; z-index: 10; max-width: 460px;
	border-radius: 10px 10px 0 0; color: #333; background: #eee;
	box-shadow: 0px 1px 2px 1px #666;
}

#chat_titlebar		{
	display: flex; justify-content: space-between;
	vertical-align: middle; text-align: center; font-weight: bold; white-space: nowrap;
	color: #ccc; background: #222; border-radius: inherit;

}

#chat_titlebar > div		{ margin: 5px 10px; }
#chat_titlebar > div:first-child{ cursor: pointer; }
#chat_titlebar span.online	{ color: #0F0; }
#chat_titlebar span.offline	{ color: #F00; }

#chat_buttons > div, .chat_contactclose		{ display: inline-block; width: 14px; height: 14px; margin: 2px 8px 0 0; background-image: url(/img/icons/window.png); cursor: pointer; }
#chat_buttons > div:last-child	{ margin-right: 0; }
#chat_min			{ background-position: 0 0; }
#chat_max			{ background-position: -14px 0; }
#chat_close, .chat_contactclose	{ background-position: -28px 0; }
#chat_minify			{ background-position: -42px 0; }
#chat_min:hover			{ background-position: 0 -14px; }
#chat_max:hover			{ background-position: -14px -14px; }
#chat_close:hover, .chat_contactclose:hover { background-position: -28px -14px; }
#chat_minify:hover		{ background-position: -42px -14px; }

#chat_inner		{
	display: flex; width: 100%; height: 100%;
	max-height: 0; transition: max-height 1.5s linear;
	 
}
#chat_contacts		{ color: #ccc; background: #333; overflow-y: auto; min-width: 120px; }
#chat_contacts > div	{ display: flex; border-width: 0 0 1px 0; border-style: solid; border-color: #666; line-height: 30px; }
#chat_contacts > div:hover { background: rgba(255,255,255, 0.1); }
#chat_contacts > div.contact_active { background: rgba(255,255,255, 0.1); }


.chat_contactname	{ flex-grow: 2; cursor: pointer; padding-left: 5px; color: #eee; }
.chat_contactunread	{ display: inline-block; margin-left: 3px; font-weight: bold; color: #0F0; }
.chat_contactclose	{ margin-top: 8px; }

#chat_window		{ min-height: 265px; display: flex; flex-direction: column; width: 100%; height: 100%; }

#chat_dialogs		{
	height: 100%; min-height: 160px; max-height: 160px; overflow-y: auto; min-width: 287px;
	text-align: left; background: #fff;
}
#chat_dialogs > div	{ margin: 3px; }
#chat_window textarea	{ display: block; width: 100%; min-height: 40px; box-sizing: border-box; max-width: 100%; }
#chat_window input[type="submit"] { min-width: initial; padding: 0 7px; margin: 0 5px 8px 0; }
#chatbuttons		{ padding: 5px; text-align: right; }

#videodiv		{ position: absolute; top: 60px; left: 20px; border: 1px solid #F60; }
#videodiv video {
  height: 225px;
  margin: 0 0 20px 0;
  vertical-align: top;
  width: calc(50% - 12px);
}

/*--------------------------------
 	Wiki page
-------------------------------*/
#wiki				{ display: flex; }
#wiki > div:first-child		{ max-width: calc(75vw - 170px); padding-right: 40px; flex-grow: 2; }
.imgborder			{ border: 1px solid #ccc; }
#wiki p svg,
#wiki li svg,
#wiki dl svg,
#wiki .pm svg, /* payment logos on payment wiki page */
#slidediv .pm svg		{ width: 32px; height: 32px; margin-right: 6px; fill: #999; vertical-align: middle; }
#wiki > div:last-child		{ min-width: 25vw; box-shadow: -20px 0 20px -20px #ccc; padding-left: 50px; }
#wiki > div:last-child > ul ul	{ list-style: none; }
ul.faq 				{ list-style: none; padding: 0; }
ul.faq > div > div		{ margin: 20px 0 20px 0; } /* answer div */
#wiki > div:last-child li	{ padding: 2px 0; }
#wiki > div:last-child > ul 	{ padding: 0; list-style-image: url(/img/template/bullet-grey.png); color: #999; }
#wiki > div:last-child > ul > li > ul 	{ padding: 4px 0 16px 20px; list-style: none; }
#wiki > div:last-child a.glowbutton { min-width: 0; }
main ul.vlist			{ list-style: none; padding: 20px 0 10px 20px; }
main ul.vlist > li		{ padding: 0 0 8px 30px; background-image: url(/img/button_ok.png); background-repeat: no-repeat; font-weight: bold; color: #444; }
.dashed				{ border: 2px dashed #ccc; }
#wiki > div:first-child svg.small,
#slidediv svg.small		{ width: 20px; height: 20px; } /* pm table */

#qform			{ display: inline-block; width: 100%; width: 540px; max-width: 80vw; }
#supportarea form p	{ text-align: right; margin-top: 4px; }
#supportarea form p a	{ margin: 0 0 0 15px; }
#pagesearch p a		{ margin: 0 15px 0 0; }

/* Searchpage */
#pagesearch		{ display: inline-block; width: 100%; max-width: 600px; }
#pagesearch #qfield	{
	width: 80%; height: 25px; margin: 0; padding: 8px;
	background: #fff; color: #666; font-size: 1.4em; text-indent: 3px;
	border-width: 1px 0 1px 1px; border-radius: 3px 0 0 3px; outline: none;
}

#pagesearch_submit	{
	float: right; margin: 0; height: 31px; position: absolute; background: #fff;
	border-width: 1px 1px 1px 0; border-style: solid; border-color: #ccc; border-radius: 0 3px 3px 0;
}


/* Doc page */
.tip			{ display: block; clear: both; margin: 12px 0 8px 0; padding: 12px 14px; color: #333; background: #f8f8f8; border: 1px solid #ccc; }
dt			{ font-weight: bold; }
dd			{ padding-bottom: 16px; }
textarea.code		{ width: 100%; height: 250px; background: #eee; }
.docindexform		{ display: none; } /* only visible on mobile */

/* News page */
img.news		{ float: left; max-width: 200px; margin: 0 12px 5px 0; border-style: solid; border-color: #CCC; border-width: 0 1px 0 0; padding: 0 12px 0 0; }
p.news_date		{ font-size: 0.9em; margin-top: 0; padding-top: 0; }

/* In page manual icon */
main a.ewpagedoc	{ display: inline-block; margin-left: 10px; text-decoration: none !important; font-size: 0.6em; outline: none; opacity: 0.5; transition: opacity 0.5s; }
.ewpagedoc span		{ margin-left: 5px; visibility: hidden; vertical-align: bottom; }
main a.ewpagedoc:hover	{ opacity: 1;  }
.ewpagedoc:hover span	{ visibility: visible; }
.ewpagedoc svg,
.ewpagedoc svg path	{ fill: #999; }
main a.ewpagedoc:hover.ewpagedoc svg,
main a.ewpagedoc:hover.ewpagedoc svg path { fill: #06c; }

/* EW Reseller */
p.ewr				{ display: flex; justify-content: center; padding: 10px; border: 1px solid #ddd; }
p.ewr > img			{ min-width: 200px; margin-right: 16px; }

/* SPRITES - Generated by http://css.spritegen.com CSS Sprite Generator */
.btn-up, .btn-ok, 
.btn-bag-dark, .btn-bag, .btn-basket-dark, .btn-basket, .btn-cart-dark, .btn-cart, 
.btn-contact-dark, .btn-contact, .btn-lang-dark, .btn-lang, .btn-menu-dark, 
.btn-menu, .btn-search-dark, .btn-search, .btn-close, .btn-edit, 
.btn-v, .btn-x, .btn-delete, .btn-refresh, .btn-search-small, 
.btn-white
{ display: inline-block; background: url('/img/sprite.png') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; }

.btn-up { background-position: -0px -0px; width: 96px; height: 192px; }
.btn-ok { background-position: -0px -192px; width: 72px; height: 72px; }
.btn-bag-dark { background-position: -60px -264px; width: 32px; height: 32px; }
.btn-bag { background-position: -60px -296px; width: 32px; height: 32px; }
.btn-basket-dark { background-position: -60px -328px; width: 32px; height: 32px; }
.btn-basket { background-position: -60px -360px; width: 32px; height: 32px; }
.btn-cart-dark { background-position: -60px -392px; width: 26px; height: 26px; }
.btn-cart { background-position: -60px -418px; width: 26px; height: 26px; }
.btn-contact-dark { background-position: -60px -444px; width: 26px; height: 26px; }
.btn-contact { background-position: -60px -470px; width: 26px; height: 26px; }
.btn-lang-dark { background-position: -60px -496px; width: 26px; height: 26px; }
.btn-lang { background-position: -60px -522px; width: 26px; height: 26px; }
.btn-menu-dark { background-position: -60px -548px; width: 26px; height: 26px; }
.btn-menu { background-position: -60px -574px; width: 26px; height: 26px; }
.btn-search-dark { background-position: -60px -600px; width: 26px; height: 26px; }
.btn-search { background-position: -60px -626px; width: 26px; height: 26px; }
.btn-close { background-position: -72px -192px; width: 24px; height: 24px; }
.btn-edit { background-position: -72px -216px; width: 24px; height: 24px; }
.btn-v { background-position: -60px -652px; width: 24px; height: 24px; }
.btn-x { background-position: -60px -676px; width: 24px; height: 24px; }
.btn-delete { background-position: -72px -240px; width: 20px; height: 20px; }
.btn-refresh { background-position: -48px -856px; width: 20px; height: 20px; }
.btn-search-small { background-position: -68px -856px; width: 20px; height: 20px; }
.btn-white { background-position: -48px -876px; width: 18px; height: 18px; }

/*--------------------------------
 	Dark mode
-------------------------------*/

body.dark			{ color: #fefefe; background: #222; }
body.dark header		{ background: #222; background: linear-gradient(to bottom, rgba(34, 34, 34, 1), rgba(34, 34, 34, 1), rgba(0, 0, 0, 0)) !important; }
body.dark header nav div span > span { background: #222; border-color: #444; }
body.dark nav a:not(.active):not(:hover) { color: #ccc; }
body.dark .subnav a,
body.dark #mobnav a,
body.dark .pagenav a		{ color: #eee; }
body.dark .subnav a:hover,
body.dark .subnav a.active,
body.dark #mobnav a:hover,
body.dark #mobnav a.active,
body.dark .pagenav a:hover,
body.dark .numnav a:hover	{ background: #333; }
body.dark footer nav a:hover	{ color: #ccc; }

/* Page objects */
body.dark a			{ color: #f60; }
body.dark h1,
body.dark h2,
body.dark h3			{ color: #eee; } /* body.dark div.info span */
body.dark div.help,
body.dark div.error,
body.dark div.warn,
body.dark .suggestbox		{ color: #eee; background: #333; }
body.dark hr,
body.dark .suggestbox a,
body.dark .numnav a		{ border-color: #444; }
body.dark .suggestbox		{ border-color: #888; }
body.dark .suggestbox a:hover	{ background: #444; }

/* Buttons */
body.dark a.glowbutton:hover,
body.dark input[type="submit"]:hover { background: #f90; }
body.dark input[type="submit"]:disabled { background: #444; }

/* Forms */
body.dark input,
body.dark select,
body.dark textarea		{ color: #ccc; background: #333; border: 1px solid #888; }
body.dark a.glowbutton,
body.dark input[type="button"],
body.dark input[type="submit"]	{ color: #fff !important; background: #f80; border: 0; }
body.dark .pw-eye svg		{ fill: #fff; }

/* Tables */
body.dark th			{ background: #404040; text-align: left; }
body.dark tr.alternate_on td	{ background: #282828; }
body.dark tr.alternate_off td	{ background: #323232; }
body.dark .listtable tr		{ border-color: #444; }
body.dark .listtable th 	{ color: #eee; background: #222; border-color: #999; }
body.dark .listtable.alt > tbody > tr:nth-child(odd)	{ background: #282828; }
body.dark .listtable.alt > tbody > tr:nth-child(even)	{ background: #323232; }
body.dark tr.hover:hover,
body.dark .listtable.hover > tbody > tr:hover { background: #444; }

/* Tab navigation */
body.dark ul.tn			{ color: #f60; border-color: #444; }
body.dark ul.tn li		{ background: #333; background: linear-gradient(#444, #222); border-color: #444; }
body.dark main > div ul.tn li.ta a { color: #f60; }
body.dark ul.tn li:hover	{ background: #444; background: linear-gradient(#555, #333); }

/* SVG Icons */
body.dark .svgicons		{ background: #222; }
body.dark .svgicons a,
body.dark .inlineicons > a	{ color: #999; }
body.dark .svgicons li:hover	{ background-color: #333; }
body.dark .inlineicons > a:hover	{ color: #f60; }
body.dark .inlineicons > a:hover > svg	{ fill: #f60; }

/* Slideout */
body.dark #slidedivcont > div	{ background: #222; box-shadow: 0px 0px 25px 0px rgba(255, 255, 255, 0.1); }
body.dark .slidelang a		{ color: #eee; }
body.dark .slidelang a:hover	{ background: #333; text-decoration: none; }

/* Documentation */
body.dark #wiki > div:last-child { box-shadow: -20px 0 20px -20px #111; }
body.dark .tip			{ color: #fefefe; background: #333; border: 1px solid #444; }
body.dark textarea.code		{ background: #444; }
body.dark main a.ewpagedoc:hover.ewpagedoc svg,
body.dark main a.ewpagedoc:hover.ewpagedoc svg path { fill: #f60; }
body.dark ul.vlist > li		{ color: #ccc; }
body.dark #pagesearch #qfield	{ background: #333; color: #eee; }
body.dark #pagesearch_submit	{ background: #333; border-color: #888; }

/* Footer */
body.dark #footernav a		{ color: #ccc; }
body.dark #footertext,
body.dark #footertext a		{ color: #999; }

/*--------------------------------
 	Responsive
-------------------------------*/

@media all and (max-width: 1400px) {
	header nav a		{ margin: 0 8px 1px 8px; }
}

@media all and (max-width: 1300px) {
	header nav a		{ margin: 0 4px 1px 4px; }
}

/* Put logo and navigation on separate lines */
@media all and (max-width: 1200px) {
	header			{ height: 120px;
					background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); }
	#logo			{ margin-bottom: 0; }
	header nav a		{ margin: 0 8px 1px 8px; } /* header nav links are on 2 lines here */

	main			{ margin: 100px 0 0 0; }
	#slidedivcont > div	{ width: 100%; max-width: none; }
	.slidelang a		{ width: 130px; }
	#footertext		{ flex-wrap: wrap; justify-content: flex-end; margin: 12px; }
	#footertext span	{ margin-bottom: 12px; }
	#footertext a:last-of-type { margin: 0; }
}


@media all and (max-width: 980px) {

	header						{ height: 76px !important;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) !important; }
	header nav div:first-child			{ display: none; } /* Left part of topnav */
	header nav div:last-child a:last-child 		{ display: inline-block; border: none; } /* Hamburger menu icon */
	header nav div:last-child a:nth-last-child(2)	{ display: none; } /* Hide dark mode icon on top */
	header nav svg					{ width: 32px; height: 32px; } /* Make icons bigger, easier to click */
	main						{ flex-direction: column; margin: 70px 0 0 0; padding: 8px; }
	#lpanel						{ margin: 0; padding: 0; width: 100%; top: auto; position: static; max-height: 0; }
	#rpanel						{ padding: 16px; width: auto; }
	.subnav						{ max-height: 0; }
	.formtable td, .formtable th			{ display: block; width: calc(100% - 5px) !important; }
	.formtable input, .formtable textarea		{ max-width: 80vw; }
	img, video, iframe				{ max-width: calc(100% - 12px); height: auto; margin: 0; padding: 0; }
	.pagecolumns					{ flex-direction: column; }
	.pagecolumns > div:last-child			{ width: auto; }
	footer						{ flex-direction: column; margin: 20px 0 0 0; padding: 16px 0; }
	footer nav					{ padding: 20px 12px; }
	footer > div:last-child				{ padding-top: 0; } /* social icons */
	#vassist > div					{ margin: 30px 0 0 0; }
	#wiki						{ flex-direction: column; }
	#wiki > div:first-child,
	#wiki > div:last-child				{ min-width: 0; max-width: none; box-shadow: none; padding: 0; }
	.docindexform					{ display: block; margin-bottom: 20px; }
}



@media all and (max-width: 640px) {

	main				{ padding: 2px; }
	header nav			{ justify-content: flex-end; } /* Align menu right */
	header nav div:nth-last-child(2){ display: none; } /* Hide Start and Login buttons on top */
	#rpanel				{ padding: 6px; }
	#vassist > img			{ display: none; }
	#ewsearch 			{ margin: 0 !important; max-width: 90vw; }
	#supportscript1			{ max-width: 93vw; }
	#supportanswer_inner		{ max-width: 80vw; }
	div.helpmsg			{ clear: left; margin-left: 0; }
	p.ewr				{ flex-wrap: wrap; }
	p.ewr a				{ display: block; margin-left: auto; margin-right: auto; max-width: fit-content; } /* Center button */
}

@media all and (max-width: 480px) {
	#logo				{ width: 170px; margin: 4px; }
	nav				{ margin: 0 !important; }
	nav div:last-child a		{ padding: 0 6px; }
	nav div:last-child a:last-child	{ padding: 0 8px 0 6px; }
	#mobnav a			{ display: block; }
	a.glowbutton, input[type="submit"], input[type="button"], button, label.glowbutton { min-width: auto; } /* smaller buttons on mobile */
	.slidelang a		{ width: calc(50vw - 50px); }
	img, video, iframe		{ max-width: 100vw; margin: 0 -8px; }
}

@media all and (max-width: 400px) {
	#chat_inner			{ flex-direction: column; }
}

/* Don't color SVG hover on small screens, .active is used */
@media all and (min-width: 980px) {
	nav a:hover svg,
	nav a:hover svg path		{ color: #f80; fill: #f80; text-decoration: none; }
}
/*--------------------------------
 	Print
-------------------------------*/
@media print {
	.hideprint, nav,
	#lpanel, footer,
	#wiki > div:last-child	{ display: none !important; }
	header			{ position: relative; }
	#logo			{ display: block; margin: 0; }
	#logo img		{ width: 200px; content:url(/img/easywebshop.svg); margin-left: -8px; } /* 200x71px */
	main			{ display: block;  min-height: 0; margin: 0; padding: 0; }
	#rpanel			{ margin: 0 !important; padding: 0 !important; }
	#wiki			{ display: block; }
	#showprint 		{ display: block; }
	img			{ max-width: 100%; }
}