:root {
	--mobile-max-width:	624px;				/* CSS variable CAN'T be used in media queries because they are getters and not setters */
	--desktop-min-width:625px;

	--vh100:			100dvh;

	--logo-bkg:			#101060;
	--accent-color:		#2194D2;

	--page-bkg:			#f0f6f8;
	--page-text:		#000000;
	--edit-bkg:			#f2f6f8;

	--sel-bkg:			#0077dd;
	--sel-text:			#ffffff;

	--header-h:			110px;
	--header-bkg:		#ffffff;
	--header-text:		#000000;
	--header-tab:		#0077dd;
	--header-opacity:	0.72;

	--footer-bkg:		#222222;
	--footer-text:		#e8e8e8;
	--footer-title:		#fedec8;

	--nav-bar-h:		50px;
	--nav-bar-w:		220px;
	--nav-bar-w-2:		50px;
	--nav-bar-pad:		60px;
	--nav-bar-bkg:		#222222;
	--nav-bar-text:		#cccccc;
	--nav-bar-sel-bkg:	#3a3a3a;
	--nav-bar-sel-text:	#ffffff;
	--nav-bar-top-bkg:	#222222;
	--nav-bar-mob-bkg:	#111111;
	--nav-bar-mob-text:	#c0c0c0;
	--nav-bar-collapse:	#444444;

	--panel-bkg:		#ffffff;
	--panel-color:		#000000;
	--panel-header:		#e8e8e8;
	--panel-title:		#444444;
	--panel-lines:		#dddddd;

	--dropdown-menu-bkg:	#000;
	--dropdown-menu-color:  #fff;
	--dropdown-menu-border: #555;

	--title-zindex:		1000;
	--tabbar-zindex:	1010;
	--menu-zindex:		1020;
	--popup-zindex:		1100;

}


/* ------------------------------------------------------------------------------------ */
	.font-fraunces				{font-family: Fraunces, serif;}


/* ------------------------------------------------------------------------------------ */

@media all and (max-width:600px) {
	:root {
		--header-h:		105px;
	}
}
	
@media all and (max-width:1400px) {
	:root {
		--nav-bar-pad:	40px;
	}
}
	
@media all and (min-width:601px) and (max-height:720px) {
	:root {
		--header-h:		80px;
	}
}
	

/* ----------------------------------- GENERIC --------------------------------------- */
	icon							{display:inline-block;}

	@media all and (min-width:500px) {
		.just-mobile				{display:none !important;}
	}
	@media all and (max-width:500px) {
		.just-desktop				{display:none !important;}
	}


/* -----------------------------------  BODY  ---------------------------------------- */
	*, body							{box-sizing:border-box;}
	body							{position:relative; min-width:100vw; min-height:var(--vh100); padding:0px; margin:0px; overflow-x:hidden; overflow-y:auto; 
									 font-family:Roboto, Arial, Helvetica, sans-serif, Calibry, Arial, sans-serif;}


/* ----------------------------------------------------------------- */
	header									{position:fixed; top:0px; left:0px; z-index:1; transition:all linear 0.5s; width:100vw; height:80px; display:flex; column-gap:2vw;}
	header.just-desktop						{padding:30px 40px; background-color:rgba(0,0,0,0.4); color:#fff;}
	header.just-mobile						{padding: 0px 20px; background-color:rgba(0,0,0,0.8); color:#fff;}

	header.just-desktop>div					{width:100%;}

	body.header-fixed-white						{background-color:var(--page-bkg); color:#666; border-top:50px solid #fff;}
	body.header-fixed-white header.just-desktop {background-color:var(--page-bkg); color:#666; height: 49px; padding:10px 40px; border-bottom:1px solid #f2f0ec;}
	body.header-fixed-white header.just-desktop .header-logo>img	{width:32px;}
	body.header-fixed-white header.just-desktop .header-logo>span>.header-teaser	{display:none;}

	body.header-fixed-white header.just-mobile  {background-color:#fff; color:#333;}


	header a								{text-decoration:none; font-size:0.9rem; padding:0 10px; display:inline-block;}
	header a:hover,
	header a.signin:hover					{background-color:var(--cor-hover); opacity:1; xtransform:scale(1.2);}
	header a.signin							{background-color:#7755dd; color:white; }

	header .header-logo						{}
	header .header-logo>img					{width:48px;}
	header .header-logo>span				{letter-spacing:2px; color:inherit; line-height:1rem;}
	header .header-logo>span>.header-name	{letter-spacing:5px;}
	header .header-logo>span>.header-teaser	{opacity:0.6;}

@media all and (max-width:599px) {
	header .header-logo						{position:absolute; left:25px; top:25px;}
}

	header.just-desktop>div>.flex			{justify-content:center;}


	body.scrolled header.just-desktop					{height: 50px; padding:10px 40px; background-color:rgba(0,0,0,0.7);}
	body.scrolled header.just-desktop .header-logo>img	{width:32px;}
	body.scrolled header.just-desktop .header-logo>span>.header-teaser	{display:none;}


/* ----------------------------------------------------------------- */
	footer								{display:block; padding:0; background-color:var(--footer-bkg); color:var(--footer-text); line-height:24px;}
	footer>div							{padding:20px 50px;}
	footer a							{color:inherit; text-decoration:none;}
	footer .footer-logo					{height:55px;}
	footer>div:last-child				{background-color:#111; color:#777;}

	footer .color-highlight				{color:var(--footer-title);}

	@media all and (min-width:600px) {
		.footer-links					{min-width:12vw;}
	}

/* ------------------------------- MOBILE MENU ------------------------------- */
	.mobile-menu>div.flex				{height:calc(100% - var(--nav-bar-h) - 15px);}

	.mobile-logo						{}
	.mobile-logo>img					{width:24px;}
	.mobile-logo>span					{letter-spacing:2px; color:inherit; line-height:0.9rem;}
	.mobile-logo>span>.header-name		{letter-spacing:4px; font-size:0.8rem;}
	.mobile-logo>span>.header-teaser	{opacity:0.6;}

	body.header-fixed-white .mobile-logo>img  {width:0px; height:0px; padding:12px; background:url('/Content/images/logo-homefront.png') no-repeat 0 0; background-size:cover; /* It's a hack ! */}

	div.btn-expand-menu					{padding:10px; font-size:1.1rem; z-index:2; background-color:transparent; color:inherit; border:none;}
	div.btn-expand-menu.collapsed>span::before	{content:'X'}

	div.mobile-menu						{position:fixed; top:0px; left:0px; height:var(--vh100); width:100vw; background-color:#fff; color:#444; padding:80px 10vw 0 10vw; 
										 font-size:1rem; line-height:1.3rem; display:flex; flex-direction:column; row-gap:30px;}
	div.mobile-menu.collapsed			{left:100vw;}

	div.mobile-menu .mobile-header-btns	{padding:20px 0; border-bottom:1px solid #444; margin-bottom:40px;}

	div.mobile-menu a					{padding:5px 8px; border-radius:4px;}
	div.mobile-menu a.as-btn			{border:1px solid #444; flex-grow:1; text-align:center; padding:8px 0;}
	div.mobile-menu a:active			{background-color:#fff; color:#000;}

	div.mobile-menu .mobile-header-btns .as-btn:last-child  {border-color:var(--sel-bkg); color:var(--sel-bkg)}
	div.mobile-menu .mobile-header-btns .as-btn:first-child {border-color:var(--sel-bkg); color:var(--sel-text); background-color:var(--sel-bkg);}


	@media all and (max-width:600px) {
		nav.just-desktop				{display:none;}
		nav.just-mobile					{position:fixed; top:calc(var(--vh100) - var(--nav-bar-h)); left:0px; width:100vw; height:var(--nav-bar-h); line-height:var(--nav-bar-h); text-align:center;
										 display:flex; background-color:var(--nav-bar-mob-bkg); color:var(--nav-bar-mob-text); z-index:1000;}
		nav.just-mobile>*				{display:inline-block; position:relative; padding:0px; text-align:center; flex-basis:100%; flex-grow:1; flex-shrink:1;}
		nav.just-mobile>a:active:hover	{transform:scale(0.9);}
		nav.just-mobile icon			{display:inline-block; line-height:var(--nav-bar-h);}
		nav.just-mobile icon+.fa-plus-circle {position:absolute; right:calc(50% - 22px); bottom:12px; font-size:14px;}

		nav.just-mobile.edit-buttons	{top:calc(var(--vh100) - 60px); height:60px; padding:5px 0; justify-content:center; border-top:1px dotted var(--nav-bar-collapse); 
										 background-color:var(--nav-bar-mob-bkg); color:var(--nav-bar-mob-text)}
		nav.just-mobile.edit-buttons>*	{flex-basis:100px;}

		nav.just-mobile a,
		nav.just-mobile a:visited		{color:var(--nav-bar-mob-text);}

	}



/* ------------------------------ PAGE CONTENTS ------------------------------ */
	page										{display:block; width:100%; min-height:var(--vh100); overflow-y:visible; overflow-x:hidden; background-color:var(--page-bkg); color:var(--page-text); }

	@media all and (max-width:600px) {
		xbody									{padding-bottom:var(--nav-bar-h);}
		page:before								{display:block;height:30px; background-color:#fff;content:' ';}
		xpage									{padding-top:80px;}
	}


/* ------------------------------ POPUPS ------------------------------ */
	.loading									{position:fixed; left:0px; top:0px; width:100vw; min-height:var(--vh100); background-color:rgba(0,0,0,0.6); display:none; z-index:var(--loading-zindex);}
	.loading>div.loading-box					{position:absolute; left:50vw; top:50vh; transform:translate(-50%, -50%); overflow:hidden; background-color:var(--page-bkg); border-radius:8px; z-index:3000;
												 padding:30px; }

	@media all and (max-width:600px) {
		.loading>div.loading-box				{position:fixed; left:5vw; top:5vh; width:90vw;  min-width:0px; height:90vh;  transform:translate(0, 0);}
		.loading>div.loading-box.cover-in-mobile	{position:fixed; left:0vw; top:0vh; width:100vw; min-width:0px; height:var(--vh100); transform:translate(0, 0); border-radius:0px;}
	}


/* ------------------------------ POPUPS ------------------------------ */
	.popup										{position:fixed; left:0px; top:0px; width:100vw; height:var(--vh100); background-color:rgba(0,0,0,0.6); display:none; z-index:var(--popup-zindex);}
	.popup.error								{display:block !important;}
	.popup>div.popup-box						{position:absolute; left:50vw; top:50vh; transform:translate(-50%, -50%); overflow:hidden; background-color:var(--page-bkg); border-radius:8px; z-index:3000}

	@media all and (max-width:600px) {
		.popup>div.popup-box					{position:fixed; left:5vw; top:5vh; width:90vw;  min-width:0px; height:90vh;  transform:translate(0, 0);}
		.popup>div.popup-box.cover-in-mobile	{position:fixed; left:0vw; top:0vh; width:100vw; min-width:0px; height:var(--vh100); transform:translate(0, 0); border-radius:0px;}
	}

	.popup>div.popup-box>.popup-title			{width:100%; padding:30px; background-color:var(--batt-bkg); color:var(--sel-text); position:relative;}
	.popup>div.popup-box>.popup-title.danger	{background-color:#b90000; color:#fff;}
	.popup>div.popup-box>.popup-title.warning	{background-color:#f6c800; color:#000;}
	.popup>div.popup-box>.popup-title.draggable	{cursor:move;}
	.popup>div.popup-box>.popup-title>hr		{width:100%; height:17px; background-color:var(--page-bkg); border:0px; border-radius:16px 16px 0 0; 
												 position:absolute; left:0px; bottom:0px; margin:0px 0px -1px 0;}
	.popup>div.popup-box>.popup-title>.btn-close-popup		{position:absolute; right:15px; top:0px; padding:10px; opacity:0.5;}

	.popup>div.popup-box>.popup-body			{width:100%; padding:30px; min-height:150px;}
	.popup>div.popup-box>.popup-buttons			{width:100%; position:absolute; bottom:10px; left:0px; padding:5px 0; text-align:center;}
	.popup>div.popup-box>buttonbar				{width:100%; position:absolute; bottom:0px; left:0px; padding:15px 0 20px 0; justify-content:center; border-top:1px dotted #aaa;}
	.popup>div.popup-box>buttonbar>*			{flex-basis:100px;}


	.popup>div.popup-done						{position:absolute; left:50vw; top:50vh; min-width:20%; transform:translate(-50%, -50%); overflow:hidden; padding:20px;
												 background-color:var(--page-bkg); border:1px solid #888; border-radius:6px; z-index:3000; text-align:left}

	@media all and (max-width:500px) {
		.popup>div.popup-done					{width:80%}
	}


/* --------------------------- NO RIGHT CLICK --------------------------- */
	#no-right-click								{}
	#no-right-click img							{max-height:20px; display:inline-block; margin-bottom:-4px;}

	@media all and (min-width:601px) {
		#no-right-click>div>div					{padding-right:150px; min-height:125px;}
	}


/* ------------------------------ CONFIRM ------------------------------ */
	.confirm-popup								{position:fixed; left:0px; top:0px; width:100vw; height:100vh; background-color:rgba(0,0,0,0.6); display:none; z-index:var(--popup-zindex);}
	.confirm-popup>div							{position:absolute; left:50vw; top:50vh; min-width:20%; transform:translate(-50%, -50%); overflow:hidden; padding:30px 50px;
												 background-color:var(--page-bkg); border:1px solid #888; border-radius:6px; z-index:3000;}
	.confirm-popup .bkg-icon					{display:block; position:absolute; bottom:10px; right:-30px; font-size:140px; opacity:0.05; transform:rotate(10deg);}

	.confirm-popup #confirm-text				{padding:10px 0 25px 0;}
	.confirm-popup .green-bkg:hover				{background-color:#008000; color:#fff;}
	.confirm-popup .discrete-bkg:hover			{background-color:#b90000; color:#fff;}


/* --------------------------- TABS & BUTTONS -------------------------- */
	buttonbar									{display:flex; column-gap:10px;}
	buttonbar.align-right						{justify-content:flex-end;}
	buttonbar>.button							{display:inline-block; line-height:1.4rem; padding:5px 15px; background-color:#000; color:#fff; border:1px solid #333; border-radius:6px; 
												 cursor:pointer; font-size:0.7rem; text-transform:uppercase; text-decoration:none; white-space: nowrap; font-weight:bold;}
	buttonbar>button[type=submit]				{min-width:100px;}
	buttonbar>.button:hover						{background-color:#05a; border-color:#888;}
	buttonbar>.button.hollow					{background-color:transparent; border:1px solid var(--panel-lines); color:var(--panel-color);}
	buttonbar>.button.flat						{background-color:#daf0ff; border:1px solid #cce9fe;}
	buttonbar>.button.flat:hover				{background-color:#9dd8ff; border-color:#66bffa;}
	buttonbar>.button:active:hover				{background-color:var(--sel-bkg) !important; color:var(--sel-text); border-color:var(--sel-bkg) !important; transform:scale(0.9);}

	buttonbar .more								{display:inline-block; line-height:1.4rem; padding:5px 15px; cursor:pointer; font-size:1.5rem; margin-left:20px;}

	buttonbar.stickybar							{position:sticky; top:calc(var(--header-h) + 60px);}


/* ----------------------------- SWITCH ---------------------------- */
	.switch											{display:inline-block; width:34px; height:14px; position:relative;}

	.switch input[type=checkbox]					{position:absolute; top:0px; left:0px; width:100%; min-height:100%; display:block; opacity:0; border:none; background:none; margin:0; padding:0; z-index:10;}
	.switch input[type=checkbox]+span				{position:absolute; display:inline-block; right:0px ; top:calc(50% - 10px); width:34px; height:20px; background-color:#c0c0c0; border-radius:10px; border:1px solid #ddd;}
	.switch input[type=checkbox]+span+span			{position:absolute; display:inline-block; right:16px; top:calc(50% -  7px); width:14px; height:14px; background-color:#ffffff; border-radius:10px;}
	.switch input[type=checkbox]:checked+span		{background-color:var(--sel-bkg); }
	.switch input[type=checkbox]:checked+span+span	{background-color:#fff; border-color:var(--dark-bkg); right:3px;}

	.switch input[type=checkbox]:focus+span			{border-color:#b0b0b0 !important; outline:0;
													-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px var(--focus-shadow);
													 box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px var(--focus-shadow)}

	.switch input[type=checkbox]:focus:checked+span	{border-color:var(--dark-bkg) !important; }



	.switch input[type=radio]						{position:absolute; top:0px; left:0px; width:100%; min-height:100%; display:block; opacity:0; border:none; background:none; margin:0; padding:0;}
	.switch input[type=radio]+span					{position:absolute; display:inline-block; right:4px; top:calc(50% - 12px); width:24px; height:24px; background-color:#fff; border:2px solid #c0c0c0; border-radius:20px;}
	.switch input[type=radio]+span+span				{position:absolute; display:inline-block; right:9px; top:calc(50% -  7px); width:14px; height:14px; background-color:#fff; border-radius:20px; border:none;}

	.switch input[type=radio]:checked+span+span		{background-color:var(--checkbox-color);}
	.switch input[type=radio]:focus+span			{border-color:var(--sel-bkg);}


/* ----------------------------- SLIDER ---------------------------- */
	.slider						{position:relative; padding:20px 0px;}
	.slider .slider-bar			{display:inline-block; height:8px; width:calc(100% - 40px); margin:0 20px; border-radius:6px; background-color:rgba(0,0,0,0.05);}
	.slider .slider-knob		{position:absolute; display:inline-block; left:calc(50% - 10px); top:18px; width:24px; height:24px; background-color:#fff; border:2px solid #c0c0c0; border-radius:20px;}
	.slider .slider-knob:focus	{border-color:var(--sel-bkg);}


/* ------------------------------ LEAFLET ------------------------------ */
	leaflet-buttons								{position:absolute; border:2px solid rgba(0, 0, 0, 0.2); background-clip:padding-box; border-radius:4px; z-index:800;}
	leaflet-buttons.top-right					{right:11px; top:180px;}

	leaflet-buttons>*							{display:block; text-align:center; width:30px; height:30px; line-height:30px; font-size:20px; 
												 background-color:#fff; border-bottom:1px solid #ccc; cursor:pointer;}
	leaflet-buttons>*:first-child				{border-top-left-radius:2px; border-top-right-radius:2px;}
	leaflet-buttons>*:last-child				{border-bottom-left-radius:2px; border-bottom-right-radius:2px; border-bottom:none;}

	leaflet-buttons>*.checked					{background-color:#e0e0e0}


	leaflet-legend								{position:absolute; border:2px solid rgba(0, 0, 0, 0.2); padding:8px 10px 5px 10px; border-radius:4px; z-index:800; 
												 background-color:#fff; line-height:10px;}
	leaflet-legend.bottom-left					{left :20px; bottom:30px;}
	leaflet-legend.bottom-right					{right:20px; bottom:30px;}

	leaflet-legend img							{height:20px; width:auto;}


/* ------------------------------------------------------------------------------------ */
@media printer {
	 header,
	.popup-message,
	.page-footer,
	.page-loading		{display:none !important;}
}