/*--------------------------------------------
 * 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');
}

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	{ position: absolute; margin: 12px; 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;
}

footer {
	position: relative; width: 100%; height: 100px; margin-bottom: -100px; clear: both; margin: 0; padding: 0;
	text-align: center;
}

/*--------------------------------
 	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: 24px; height: 24px; }
div.info span		{ width: 100%; vertical-align: middle; }
div.help		{ background: #f8f8f8; color: #000; margin-bottom: 30px; padding: 10px; border-radius: 3px; }
div.help img.help	{ float: left; }
div.helpmsg		{ margin-left: 80px; }
div.helpmsg p		{ font-size: 1.2em; }
div.warning		{ color: #333; background: #fc3; padding: 10px; border-radius: 3px; }
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			{ color: #555; font-weight: normal; font-size: 1.5em; margin: 0 0 30px 0; clear: both; }
h2			{ color: #555; font-weight: normal; font-size: 1.3em; margin: 25px 0 10px 0; }
h3			{ color: #555; font-weight: normal; font-size: 1.2em; margin: 25px 0 10px 0; }
.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; }

.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
-------------------------------*/

nav				{ display: flex; width: 100%; flex-wrap: wrap-reverse; justify-content: space-between; margin-left: 220px; font-weight: bold; white-space: nowrap; }
nav div				{ display: inline-block; }
/* Navigation icons top right */
nav div:first-child		{ flex-grow: 2; }
nav a				{ display: inline-block; padding: 0 12px; line-height: 45px; color: #888; text-decoration: none; outline: none; }
nav svg, #mobnav svg,
nav svg path, #movnav svg path	{ fill: #999; width: 28px; height: 28px; vertical-align: middle; }
svg.caret,
svg.caret path			{ vertical-align: middle; width: 16px; height: 16px; margin-left: 2px;  } /* Caret */
nav a:hover,
nav a.active,
nav a.active svg,
nav a.active svg path		{ color: #f80; fill: #f80; text-decoration: none; }

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

/*--------------------------------
 	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; }

/*--------------------------------
 	Footer
-------------------------------*/
#footernav a			{ margin: 0 15px 1px 15px; display: inline-block; line-height: 34px; color: #333; outline: none; }
#footertext, #footertext a	{ margin: 0 20px 0 0; text-align: right; color: #666; outline: none; }
#footernav a:hover		{ text-decoration: none; border-width: 0 0 1px 0; border-style: solid; border-color: #F60; margin-bottom: 0px; }
#footertext a:hover		{ text-decoration: none; }


/*--------------------------------
 	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: -webkit-flex; display: -ms-flexbox; display: flex; }
.pagecolumns > div:first-child	{ flex-grow: 1; margin-right: 20px; }
.pagecolumns > div:last-child	{ width: 200px; min-width: 200px; }

/*--------------------------------
 	SPRITES - Generated by http://css.spritegen.com CSS Sprite Generator
-------------------------------*/
.btn-up, .btn-ok, .pay-bancontact, .pay-bank, .pay-bitcoin, 
.pay-giropay, .pay-ideal, .pay-invoice, .pay-maestro, .pay-mastercard, 
.pay-partialpayments, .pay-paymentoncollect, .pay-paymentondelivery, .pay-paypal, .pay-sofortbanking, 
.pay-visa, .btn-window, .btn-print, .soc-facebook, .soc-googleplus, 
.soc-instagram, .soc-linkedin, .soc-pinterest, .soc-twitter, .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; }
.pay-bancontact { background-position: -0px -264px; width: 60px; height: 30px; }
.pay-bank { background-position: -0px -294px; width: 60px; height: 30px; }
.pay-bitcoin { background-position: -0px -324px; width: 60px; height: 30px; }
.pay-giropay { background-position: -0px -354px; width: 60px; height: 30px; }
.pay-ideal { background-position: -0px -384px; width: 60px; height: 30px; }
.pay-invoice { background-position: -0px -414px; width: 60px; height: 30px; }
.pay-maestro { background-position: -0px -444px; width: 60px; height: 30px; }
.pay-mastercard { background-position: -0px -474px; width: 60px; height: 30px; }
.pay-partialpayments { background-position: -0px -504px; width: 60px; height: 30px; }
.pay-paymentoncollect { background-position: -0px -534px; width: 60px; height: 30px; }
.pay-paymentondelivery { background-position: -0px -564px; width: 60px; height: 30px; }
.pay-paypal { background-position: -0px -594px; width: 60px; height: 30px; }
.pay-sofortbanking { background-position: -0px -624px; width: 60px; height: 30px; }
.pay-visa { background-position: -0px -654px; width: 60px; height: 30px; }
.btn-window { background-position: -0px -684px; width: 56px; height: 28px; }
.btn-print { background-position: -0px -712px; width: 48px; height: 48px; }
.soc-facebook { background-position: -48px -712px; width: 48px; height: 48px; }
.soc-googleplus { background-position: -0px -760px; width: 48px; height: 48px; }
.soc-instagram { background-position: -48px -760px; width: 48px; height: 48px; }
.soc-linkedin { background-position: -0px -808px; width: 48px; height: 48px; }
.soc-pinterest { background-position: -48px -808px; width: 48px; height: 48px; }
.soc-twitter { background-position: -0px -856px; width: 48px; height: 48px; }
.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; vertical-align: middle; }
.btn-x { background-position: -60px -676px; width: 24px; height: 24px; vertical-align: middle }
.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: 24px; height: 24px; vertical-align: middle }

/*--------------------------------
 	Buttons
-------------------------------*/
a.glowbutton, input[type="submit"], input[type="button"]	{
	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;
}

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

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

.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; }
select						{ padding: 4px; }
input:focus, textarea:focus			{ background: #eee; }
input[type="checkbox"], input[type="radio"]	{ border: 0; outline: none; cursor: pointer; }
.formtable td:first-of-type			{ width: 30%; }
input[type="submit"], input[type="button"]	{ cursor: pointer; float: right; margin: 10px 0 0 0; -webkit-appearance: none; min-width: 224px; }
input + span, select + span			{ position: absolute; margin: 4px 0 0 4px; }
input[type="number"]				{ padding-right: 0; width: 80px; }

.cp	{ display: inline-block; margin: 0 0 0 4px; vertical-align: middle; }
.cp svg	{ width: 20px; height: 20px; 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; }

/*--------------------------------
 	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		{ 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(#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; }

/*--------------------------------
 	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 h2		{ color: #f80; }

#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: #eee; 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;
	-webkit-box-shadow: 0 -1px 1px 1px #666; -moz-box-shadow: 0 -1px 1px 1px #666; box-shadow: 0px 1px 2px 1px #666;
}

#chat_titlebar		{
	display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; 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: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; height: 100%;
	max-height: 0; -webkit-transition: max-height 1.5s linear; transition: max-height 1.5s linear;
	 
}
#chat_contacts		{ color: #cc; background: #333; overflow-y: auto; min-width: 120px; }
#chat_contacts > div	{ display: -webkit-flex; display: -ms-flexbox; 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	{ -webkit-flex-grow: 2; flex-grow: 2; cursor: pointer; padding-left: 5px; }
.chat_contactunread	{ display: inline-block; margin-left: 3px; font-weight: bold; color: #0F0; }
.chat_contactclose	{ margin-top: 8px; }

#chat_window		{ min-height: 265px; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: column; -webkit-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; -webkit-box-sizing: border-box; moz-box-sizing: border-box; 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);
}


/*--------------------------------
 	Documentation
-------------------------------*/

.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: 10px; }
textarea.code		{ width: 100%; height: 250px; background: #eee; }

/* 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; }


/*--------------------------------
 	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 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; }

/* Page objects */
body.dark a			{ color: #f60; }
body.dark h1,
body.dark h2,
body.dark h3,
body.dark div.info span		{ color: #eee; }
body.dark div.help,
body.dark div.error,
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; }

/* 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; background: #f80; border: 0; }

/* 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); }

/* 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 .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; }

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

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

/* 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; }
	nav			{ margin-left: 80px; flex-direction: column-reverse; -webkit-flex-direction: column-reverse;}
	nav div			{ z-index: 1; }
	nav div:last-child	{ align-self: flex-start;  }
	main			{ margin: 100px 0 0 0; }
	#slidedivcont > div	{ width: 100%; max-width: none; }
	.slidelang a				{ width: 133px; }
}


@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; }
	nav					{ flex-direction: column; }
	nav div:first-child			{ display: none; } /* Left part of topnav */
	nav div:last-child a:last-child 	{ display: inline-block; } /* Hamburger menu icon */
	nav svg					{ width: 32px; height: 32px; } /* Make icons bigger, easier to click */
	nav div:last-child a:nth-child(3)	{ display: none; } /* Hide dark mode icon on top */
	main					{ flex-direction: column; -webkit-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: 100% !important; }
	.formtable input, .formtable textarea	{ max-width: 80vw; }
	img, video, iframe			{ max-width: 90vw; height: auto; }
	.pagecolumns				{ flex-direction: column; -webkit-flex-direction: column; }
	footer					{ height: auto; padding-bottom: 5px; }
	#vassist > div				{ margin: 30px 0 0 0; }
}



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

	main				{ padding: 0; }
	#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; }
}

@media all and (max-width: 480px) {
	#logo				{ margin: 4px; }
	#logo img			{ width: 140px; } /* 200x71px */
	nav				{ margin: 0 !important; }
	#mobnav a			{ display: block; }
}

@media all and (max-width: 400px) {
	#chat_inner			{ flex-direction: column; -webkit-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		{ display: none !important; }
	header			{ position: relative; }
	#logo			{ display: block; margin: 0; }
	#logo img		{ width: 140px; content:url(/img/easywebshop.png); } /* 200x71px */
	main			{ display: block; min-height: 0; margin: 0; padding: 0; }
	#rpanel			{ margin: 0 !important; padding: 0 !important; }
	#showprint 		{ display: block; }
	img			{ max-width: 100%; }
}