: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;

	--logo-bkg:			#13689F;
	--accent-color:		#2194D2;

	--page-bkg:			#e9ecee;
	--page-text:		#000000;
	--page-img:			url('/Content/images/header-bkg.png');
	--edit-bkg:			#f2f6f8;
	--edit-element:		#ffffff;
	--edit-color:		#000000;

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

	--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:	#d0d0d0;
	--nav-bar-mob-text:	#444444;
	--nav-bar-collapse:	#444444;

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

	--tabs-bkg:			#ffffff;
	--tabs-text:		#000000;

	--view-sel-bkg:		rgba(255,255,255,0.45);
	--view-sel-text:	#000000;
	--view-sel-sel:		#ffffff;

	--sel-bkg:			#13689F;
	--sel-text:			#ffffff;

	--alt-bkg:			#0099ff;
	--alt-text:			#ffffff;

	--app-bkg:			#13689F;
	--app-text:			#ffffff;

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

	--font-menu:		10.5pt;

	--table-head-bkg:	#e8e8e8;
	--table-head-text:	#666666;

	--row-border:		#e0e0e0;
	--row-odd-bkg:		#f2f6fa;
	--row-odd-text:		inherit;

	--row-gray-bkg:		#f0f0f0;
	--row-gray-text:	inherit;
	--row-gray-odd-bkg:	#eef2f6;
	--row-gray-odd-text:inherit;

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

	--tooltip-bkg:	  #000;
	--tooltip-text:   #fff;

	--loading-cover:  rgba(0,0,0,0.4);
	--loading-bkg:	  #e9ecee;
	--loading-text:   #000000;

	--font-awesome:	  'Font Awesome 7 Pro';
}


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

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

@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:501px) 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:600px) {
		.just-desktop				{display:none !important;}
	}


/* -----------------------------------  BODY  ---------------------------------------- */
	body							{position:relative; min-width:100vw; min-height:100vh; padding:var(--header-h, 110px) 0 0 calc(var(--nav-bar-w ,200px) + var(--nav-bar-pad, 60px));
									 background-color:var(--page-bkg); background-image:var(--page-img); background-repeat:repeat-x;}

	@media all and (max-width:600px) {
		body,
		body.collapsed				{padding-left:0px; padding-right:0px;}
	}
	@media all and (min-width:501px) {
		body.collapsed				{padding-left:calc(var(--nav-bar-w-2, 50px) + 40px);}
		body.large-fonts			{-moz-transform: scale(0.8); -webkit-transform: scale(0.8); transform:scale(0.8);}
	}


/* ------------------------------   PAGE HEADER  ------------------------------------- */
	header							{position: fixed; display:flex; column-gap:20px; align-items:center; position:fixed; top:0px; left:0px; width:100vw; height:var(--header-h); color:var(--header-text);
									 padding:50px 40px 40px calc(var(--nav-bar-w) + var(--nav-bar-pad, 60px)); background-image:var(--page-img); background-repeat:repeat-x; z-index:var(--tabbar-zindex);}
	header a,
	header a:visited				{color:inherit;}

	@media all and (max-width:600px) {
		header						{padding:45px 20px 0px 20px; align-items:start; column-gap:15px; z-index:1050;}
		header	a					{padding-top:4px;}
		header	.dropdown			{padding-top:4px;}
	}
	@media all and (min-width:501px) and (max-height:720px) {
		header						{padding:10px 50px 10px calc(var(--nav-bar-w) + var(--nav-bar-pad, 60px));}
	}

	header home-button				{display:inline-block; color:#fff; cursor:pointer; padding-bottom:2px;}
	header home-button:active:hover	{opacity:1; transform:scale(0.9);}

	header back-button				{display:inline-block; position:absolute; left:0px; top:48px; width:30px; height:30px; color:#fff; cursor:pointer; text-align:center; opacity:var(--header-opacity);}
	header back-button:active:hover	{opacity:1; transform:scale(0.9);}
	@media all and (min-width: 500px) {
		header home-button,
		header back-button			{display:none;}
	}

	header .app-logo-mobile			{position:absolute; display:flex; column-gap:6px; align-items:center; left:20px; top:22px; opacity:0.5;}
	header .app-logo-mobile>img		{height:20px;}



	header breadcrumbs				{display:flex; column-gap:10px; align-items:center; color:var(--header-text);}
	header breadcrumbs *			{opacity:var(--header-opacity);}
	header breadcrumbs a			{text-decoration:none; color:inherit;}
	header breadcrumbs a:hover		{opacity:1.0;}

	header pagetitle				{display:inline-block; padding:0; opacity:0.9;}

	header #txt-search				{width:280px; border:1px solid #fff; border-radius:6px; background-color:#fff; color:#000; padding:7px 10px 7px 30px; opacity:0.5;}
	header #txt-search+icon			{position:absolute; left:10px; top:8px; color:#000; opacity:0.5;}
	header #txt-search:focus,
	header #txt-search:focus+icon	{opacity:1}

	header *>icon					{opacity:var(--header-opacity);}
	header *:hover>icon				{opacity:1.0; transform:scale(1.6); font-weight:bold;}

	header .header-btn-expand					{opacity:var(--header-opacity); margin-left:20px;}
	header .header-btn-expand>span				{width:24px; height:24px; line-height:26px; text-align:center; border-radius:20px; }
	header .header-btn-expand:hover				{opacity:1;}
	header .header-btn-expand:hover>span		{transform:scale(1.6);}

	body.maximized header .header-btn-expand		{opacity:1;}
	body.maximized header .header-btn-expand>span	{background-color:#406099; color:#fff; line-height:24px; }

	@media all and (max-width: 800px) {
		header #txt-search			{width:160px;}
		header .header-btn-expand	{display:none;}
	}

	@media all and (min-width: 801px) {
		body.collapsed header		{padding-left:calc(var(--nav-bar-w-2) + var(--nav-bar-pad, 60px))}
	}


/* -------------------------------- COUNTRIES   -------------------------------- */
	.nav-countries						{padding:0px 20px; margin-top:16px; border-radius:6px; margin-bottom:20px;}
	.nav-countries .fa-chevron-down		{line-height:24px;}
	.nav-countries .dropdown-menu		{background-color:#444 !important; margin-top:10px !important; padding:10px !important; border-radius:12px; border-color:#555 !important;}
	.nav-countries .dropdown-menu>*		{display:flex; column-gap:10px; width:100%; text-decoration:none; color:#fff; padding:8px 20px; border-radius:4px;}
	.nav-countries .dropdown-menu img				{display:inline-block; width:18px; height:18px; border-radius:20px; }
	.nav-countries .dropdown-menu .country-group	{border-bottom:1px solid #555;}
	.nav-countries .dropdown-menu>*:hover			{background-color:var(--sel-bkg); color:var(--sel-text);}

	@media all and (max-width:600px) {
		.nav-countries								{position:absolute !important; top:26px; left:80px; margin:0px; border-radius:0; padding:0; color:#fff;}
		.nav-countries .fa-chevron-down				{line-height:18px;}
		.nav-countries>.font-smaller				{opacity:0.7;}
	}

	.nav-country-name-short							{display:none;}
	body.collapsed .nav-countries					{padding:0px; margin-left:-10px;}
	body.collapsed .nav-country-name-long			{display:none;}
	body.collapsed .nav-country-name-short			{display:inline-block; text-align:center;}
	body.collapsed .nav-countries .flex-gap-10		{column-gap:0px !important;}
	body.collapsed .nav-countries .fa-chevron-down	{line-height:18px; font-size:0.8rem; flex-grow:1;}


/* ------------------------------ NAVIGATION BAR ------------------------------------- */
	nav									{display:block; position:fixed;}
	nav.just-desktop					{left:0px; top:calc(var(--header-h) - 70px); width:var(--nav-bar-w ,200px); height:calc(100vh - var(--header-h) + 40px); background-color:var(--nav-bar-bkg); 
										 color:var(--nav-bar-text); border-radius:0 15px 15px 0; padding:10px 10px 20px 10px;}
	nav.just-mobile						{display:none;}
	nav .nav-btn-collapse				{position:absolute; bottom:45px; right:-13px; width:28px; height:28px; line-height:28px; padding:0 6px; background-color:var(--nav-bar-collapse); border-radius:20px;}

	nav a,
	nav a:visited						{color:var(--nav-bar-text);}

	nav .font-menu						{font-size:var(--font-menu);}
	nav .font-menu+.font-tiny			{opacity:0.4;}

	nav  hr								{margin:6px 0 14px 0; outline:none; color:transparent; height:0px; border-color:#666; border-size:1px 0 0 0;}

	nav .nav-menu-items					{overflow-y:auto; overflow-x:hidden; padding-top:4px;}

	nav .nav-group						{padding:8px 20px 8px 15px; margin-top:16px; border-radius:6px;}
	nav .nav-group>span					{opacity:0.7;}
	nav .nav-item						{display:flex; column-gap:5px; align-items:center; padding:9px 15px; border-radius:6px; line-height:1px; margin-top:-2px; position:relative;}
	nav .nav-item>icon					{width:24px; text-align:center;}
	nav .nav-item>icon+.fa-plus-circle  {position:absolute; left:30px; bottom:8px; font-size:12px;}
	nav .nav-item.sel					{background-color:rgba(255,255,255,0.2); color:#fff;}
	nav .nav-group.fdbk:hover,
	nav .nav-item:hover					{background-color:var(--sel-bkg) !important; color:var(--sel-text); opacity:1;}
	nav .nav-item:hover	.font-tiny		{opacity:1;}
	nav .nav-group.fdbk:active:hover,
	nav .nav-item:active:hover			{transform:scale(0.95);}

	nav .just-collapsed					{display:none !important;}

	nav .nav-new-btn					{margin:-5px -17px -7px 0; font-size:16px;}
	nav .nav-new-btn:hover				{color:#fff;}
	nav .nav-new-btn:active:hover		{transform:scale(0.95);}
	nav .nav-new-btn>.fa				{display:inline-block; width:28px; height:28px; line-height:28px; text-align:center; font-size:14px; 
										 background-color:#777; color:#fff; border-radius:20px;}
	nav .nav-new-btn>.fa:hover			{background-color:var(--sel-bkg); color:var(--sel-text);}

	nav .app-logo-desktop				{opacity:0.8; text-align:center; padding:3px 10px 40px 0; display:flex; column-gap:6px; align-items:center; justify-content:center;}
	nav .app-logo-desktop>img			{height:18px; display:inline-block;}

	nav .app-version					{position:absolute; left:0px; width:100%; bottom:-22px; color:#aaa; text-align:center; padding-right:20px;}


	.nav-countries+.app-logo-desktop	{position:absolute; bottom:-25px; left:0px; width:100%;}


	@media all and (min-width: 801px) {
		body.collapsed nav.just-desktop		 {width:var(--nav-bar-w-2 ,50px);}
		body.collapsed nav .nav-btn-collapse {transform: rotate(180deg);}

		body.collapsed nav .nav-group		 {padding:0; opacity:0;}
		body.collapsed nav .nav-item		 {padding:12px 0px 12px 1px;}
		body.collapsed nav .nav-item>icon	 {width:100%; text-align:center; padding-right:4px;}
		body.collapsed nav .nav-item>span	 {display:none}
		body.collapsed nav .nav-item.just-collapsed	 {display:flex;}

		body.collapsed .just-collapsed		 {display:initial !important;}
		body.collapsed .just-expanded		 {display:none !important;}
	}


	@media all and (max-width:600px) {
		nav.just-desktop				{display:none;}
		nav.just-mobile					{position:fixed; top:calc(100vh - 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(100vh - 60px); height:60px; padding:5px 0; justify-content:center; border-top:1px dotted #aaa; background-color:var(--page-bkg);}
		nav.just-mobile.edit-buttons>*	{flex-basis:100px;}

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

	}
	@media all and (max-height:780px) {
		nav .nav-group					{padding:5px 20px 5px 15px; margin-top:10px;}
		nav .nav-item					{padding:6px 15px; margin-top:0px;}
	}


/* ------------------------------ PAGE CONTENTS ------------------------------ */
	page							{display:block; width:100%; height:calc(100vh - var(--header-h)); min-height:calc(100vh - var(--header-h)); overflow-y:visible; overflow-x:hidden; padding-right:30px;}

	@media all and (max-width:600px) {
		page						{padding:0 10px 75px 10px;}
	}


/* ---------------------------- PANELS & TABLES ----------------------------- */
	panel											{position:relative; display:block; background-color:var(--panel-bkg); color:var(--panel-color); padding:30px; border-radius:16px; }
	panel.full-table:has(.table-wrapper)			{display:flex; flex-direction:column;}

	@media all and (min-width:601px) and (max-height:720px) {
		panel,
		panel>form									{padding:15px;}
	}

	@media all and (max-width:600px) {
		panel,
		panel>form									{padding:22px;}
	}


	panel.panel-header								{background-color:var(--panel-header); margin-bottom:0px; border-radius:16px 16px 0px 0px;}

	@media all and (max-width:601px) {
		.panel-header								{padding:20px;}
		.panel-header.flex-vertical-center			{align-items:flex-start;}
	}


	@media all and (min-width:601px) {		
		tabbar+panel.panel-header					{padding-bottom:10px;}
		panel.panel-header+tabbar					{margin-top:-40px;}
		panel.panel-header+panel.full-table,
		panel.panel-header+panel.panel-table		{padding-top:0px; border-radius:0px 0px 16px 16px;}
		panel+tabbar+.full-table,
		panel+tabbar+.panel-table					{padding-top:0px !important; border-radius:0px 0px 16px 16px; margin-top:-20px;}
	}

	panel .panel-title								{display:inline-block; color:var(--panel-title); font-size:1.3rem; font-weight:bold; letter-spacing:-1px;}
	panel .sub-panel-title							{display:inline-block; color:var(--panel-title); font-size:1.15rem; letter-spacing:-0.5px}


	@media all and (min-width:600px) and (max-height:840px) {
		 panel										{padding:20px;}
	}

	@media all and (min-width:600px) and (max-width:1400px) {
		 .panel-empty								{display:none;}
	}



	panel .font-high.font-compact1+.font-smaller,
	panel .font-high.font-compact1+*+.font-smaller	{display:block; margin-top:-3px;}

	panel.full-table								{padding:0px 0px 20px 0px; overflow:hidden; position:relative;}
	@media all and (min-width:600px) {
		panel.full-table.only-table:has(table)::after			{content:' '; position:absolute; left:0px; top:0px; width:100%; height:20px; background-color:#f2f2f2; }
	}
	@media all and (max-width:600px) {
		panel.full-table.only-table					{padding:0px 2px 20px 2px;}
	}

	.full-table *:has(.panel-title)					{background-color:var(--panel-header);}
	.full-table span.panel-title					{display:inline-block; color:#444; font-size:1.3rem; font-weight:bold; letter-spacing:-1px; padding:20px 0 10px 20px;;}
	.full-table span.panel-title+a.color-gray		{display:inline-block; padding:11px 0 29px 0;}
	.full-table div.panel-title						{display:flex; color:#444; font-size:1.3rem; font-weight:bold; letter-spacing:-1px; padding:20px 30px 20px 30px;}
	@media all and (max-width:600px) {
		.full-table div.panel-title					{padding:5px 15px 20px 15px;}
	}

	.full-table .table-wrapper 						{width:100%; overflow-x:hidden; overflow-y:auto;}
	.full-table .table-wrapper thead 				{position:sticky; top:0px; z-index:10;}
	.full-table .table-wrapper thead th				{background-color:#F2F2F2}
	tabbar+.full-table .table-wrapper thead tr:first-child th	{padding-top:30px; background-color:var(--panel-header) !important;}

	.full-table table								{width:100%; min-width:100%; max-width:100%;}
	.full-table table thead tr						{background-color:#f4f4f4; padding-top:15px;}

	.full-table table tbody tr.fdbk					{cursor:pointer;}
	.full-table table tbody tr.fdbk:hover			{background-color:var(--sel-bkg); color:var(--sel-text);}
	.full-table table tbody tr.fdbk:active:hover					{background-color:var(--sel-bkg); color:var(--sel-text); transform:scale(0.97);}
	.full-table table tbody tr.fdbk:hover>td:first-child,
	.full-table table tbody tr.fdbk:active:hover>td:first-child	{border-radius:8px 0 0 8px;}
	.full-table table tbody tr.fdbk:hover>td:last-child,
	.full-table table tbody tr.fdbk:active:hover>td:last-child	{border-radius:0 8px 8px 0;}

	.full-table table tbody tr.fdbk:hover .color-blue		{color:inherit;}

	.full-table table thead,
	.full-table table thead th								{padding:5px; border-bottom:1px solid var(--row-border); background-color:transparent; font-size:0.7rem; text-transform: uppercase; color:var(--table-head-text);}
	.full-table table tr.table-header,
	.full-table table tr.table-header th					{padding:15px 5px 5px 5px; border-bottom:1px solid var(--row-border); background-color:var(--table-head-bkg); font-size:0.7rem; text-transform: uppercase; color:var(--table-head-text);}
	.full-table table tbody td								{padding:10px 5px; border-bottom:1px solid var(--row-border);}
	.full-table table tbody tr:last-child>td				{border-bottom:none;}

	.full-table table tr>th:first-child,
	.full-table table tr>td:first-child						{padding-left:20px;}
	.full-table table tr>th:last-child:not(.col-w-icon),
	.full-table table tr>td:last-child:not(.col-w-icon)		{padding-right:30px;}
	.full-table table tr>th:last-child.col-w-icon,
	.full-table table tr>td:last-child.col-w-icon			{padding-right:10px;}


	.full-table table tbody tr.table-group,
	.full-table table tbody tr.table-group>td				{background-color:#f8f8f8;}

	.full-table table tbody tr:nth-child(even)				{background-color:var(--row-odd-bkg);}
	.full-table table tbody tr.row-gray						{background-color:var(--row-gray-bkg); color:var(--row-gray-text);}
	.full-table table tbody tr.row-gray:nth-child(even)		{background-color:var(--row-gray-odd-bkg); color:var(--row-gray-odd-text);}

	.full-table table tbody tr.row-red						{background-color:#fff0f0;}
	.full-table table tbody tr.row-red:nth-child(even)		{background-color:#f8e8e8;}
	.full-table table tbody tr.row-red:hover				{background-color:#b90000; color:#fff;}

	.full-table table tbody tr.row-yellow					{background-color:#fffff0;}
	.full-table table tbody tr.row-yellow:nth-child(even)	{background-color:#f8f8e8;}
	.full-table table tbody tr.row-yellow:hover				{background-color:#fede00; color:#000;}

	.full-table table tbody tr.row-green					{background-color:#f0fff0;}
	.full-table table tbody tr.row-green:nth-child(even)	{background-color:#e8f8e8;}
	.full-table table tbody tr.row-green:hover				{background-color:#00b900; color:#fff;}

	.full-table table tbody tr>th.col-w-icon,
	.full-table table tbody tr>td.col-w-icon				{width:32px;}

	.full-table table tbody tr>td:first-child.col-w-icon:has(.icon-flag){width:44px;}

	.full-table table tbody.cells-center-vertical td		{vertical-align:middle;}

	.full-table table tbody td .icon-flag					{display:inline-block; width:18px; height:18px; border-radius:20px; }

	.no-data,
	.editable												{padding:50px 40px; height:100%; margin:0 20px;}

	.full-table .pnl-table-no-data							{position:relative; padding:40px 0 20px 0; overflow:hidden;}
	.full-table .pnl-table-no-data .watermark				{position:absolute; display:block; right:20px; bottom:20px; font-size:12vh; opacity:0.1;}
	.full-table .pnl-table-no-data .watermark>*				{display:inline-block;}

	@media all and (max-width:600px) {
		.full-table .pnl-table-no-data						{min-height:400px;}
		.full-table .pnl-table-no-data .no-data				{margin:0px; padding:30px;}
		.full-table .pnl-table-no-data .watermark			{font-size:12vw;}
	}

	table.row-counter										{counter-reset: rowNumber;}
	table.row-counter tbody tr>td:first-child				{counter-increment: rowNumber; position: relative; padding-left:30px !important;}
	table.row-counter tbody tr>td:first-child::before		{content: counter(rowNumber); opacity: 0.7; font-size: 0.85em; position:absolute; left:10px; top:12px;}

	table tbody tr.action-arrow>td:last-child				{position:relative;}
	table tbody tr.action-arrow>td:last-child::after		{position:absolute; right:15px; top:18px; content:'\f054'; opacity: 0.4; font-size:1rem; font-family:var(--font-awesome);}


/* ----------------------------- FILTER TABLE -------------------------- */	
	panel .table-filter					{display:flex; width:calc(100% + 2px); column-gap:15px; align-items:center; border-top:1px solid var(--row-border);
										 margin:0px -1px -20px -1px; padding:10px 20px; background-color:var(--panel-header); line-height:24px;}
	panel .table-filter span.fa			{color:#a0a0a0;}
	panel .table-filter input			{border:none; background-color:transparent; width:100%; min-width:30vh; padding:5px 0;}

	@media all and (min-width:600px) {
		panel .table-filter				{order:3;}
	}
	@media all and (max-width:600px) {
		panel .table-filter				{margin:0 -1px; border-top:none; border-bottom:1px solid var(--row-border);}
	}


/* ----------------------------- VIEW TYPE ---------------------------- */	
	viewtypebar						{background-color:var(--page-bkg); color:var(--page-color); padding:5px; border-radius:16px; display:inline-block;}
	viewtypebar>*					{padding:5px 15px; border-radius:12px; max-width:fit-content; opacity:0.7; cursor:pointer; display:inline-block;}
	viewtypebar>*.sel				{background-color:var(--view-sel-sel); opacity:1;}
	viewtypebar>*:hover				{background-color:var(--sel-bkg); color:var(--sel-text); opacity:1;}

	.panel-header viewtypebar		{background-color:var(--view-sel-bkg);}


/* ---------------------------- INFOSNACKS ---------------------------- */	
	.infosnack-wrapper				{padding-bottom:30px; display:flex;}
	.infosnack-wrapper>*			{width:100%;}

	infosnack						{position:relative; display:inline-block; background-color:#fff; color:#000; padding:20px; border-radius:16px; }
	infosnack.fdbk:active:hover		{background-color:var(--panel-header); transform:scale(0.98);}
	infosnack .infosnack-title		{color:#999; font-weight:bold;}
	infosnack .infosnack-data 		{display:inline-block; margin-bottom:10px;}
	infosnack .infosnack-icon		{position:absolute; display:inline-block; top:20px; right:20px; width:45px; height:45px; line-height:45px !important; text-align:center; 
									 border-radius:40px; background-color:#f00; color:#fff;}

	@media all and (max-width:600px) {
		.infosnack-wrapper			{flex-direction:row;}
		.infosnack-wrapper			{row-gap:15px !important; padding-bottom:0px;}
	}
	@media all and (min-width:501px) and (max-height:780px) {
		.infosnack-wrapper			{flex-direction:column;}
		infosnack					{padding:15px 20px; line-height:18px;}
		infosnack .infosnack-data 	{margin-bottom:3px;}
		infosnack .infosnack-icon	{top:3px; right:3px; transform:scale(0.7);}
	}


/* ----------------------------- ICON LIST ---------------------------- */
	iconlist						{display:flex; column-gap:20px;}
	iconlist>a						{display:inline-block; text-decoration:none; color:inherit; text-align:center; width:120px; height:120px; padding:20px 5px; border-radius:6px; position:relative;}
	iconlist>a:hover				{background-color:var(--sel-bkg); color:var(--sel-text);}
	iconlist>a:active:hover			{transform:scale(0.9);}
	iconlist>a>icon					{display:block; font-size:2.50rem; margin-bottom:5px;}
	iconlist>a>img					{display:inline-block; height:40px;}
	iconlist>a>span					{display:block; font-size:0.85rem;}
	iconlist>a>span.fa-check-circle	{position:absolute; top:10px; left:calc(50% + 20px);}

	iconlist>a:hover>img			{filter:brightness(0) invert(1);}

	iconlist>a .check-active		{position:absolute; top:17px; right:30px; font-size:1.1rem;}

	@media all and (max-width:600px) {
		panel:has(iconlist)			{padding:20px;}

		iconlist					{flex-wrap:wrap; column-gap:0px;}
		iconlist>a					{width:110px; flex-grow:1;}
		iconlist>a>icon				{font-size:2rem;}
	}



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


/* -------------------------------- TABS ------------------------------ */
	tabbar							{display:block; background-color:var(--tabs-bkg); color:var(--tabs-color); padding:5px; border-radius:16px;position:relative; z-index:11;
									 margin-bottom:-15px; margin-left:auto; margin-right:auto;  max-width:fit-content;}
	tabbar>tabs						{display:flex; column-gap:10px;}
	tabbar>tabs>*					{display:inline-block; padding:8px 15px; color:var(--tabs-text); cursor:pointer; border-radius:14px; text-decoration:none;}
	tabbar>tabs>*.sel				{background-color:var(--sel-bkg); color:var(--sel-text);}
	tabbar>tabs>*.btn-filter		{margin-left:40px;}

	tabbar>tabs>*:hover				{background-color:var(--page-bkg); color:var(--page-text); }
	tabbar>tabs>*:active:hover		{background-color:var(--sel-bkg) ; color:var(--sel-text);}

	tabbar>filters					{display:none; background-color:var(--page-bkg); color:#000; min-width:calc(100% - 10px); padding:5px; margin:0 5px; border-radius:0 0 16px 16px;}
	tabbar>tabs>separator			{width:1px; padding:0px; border-right:1px dotted #ccc; margin-right:-5px;}

	tabbar.expand					{border-radius:16px 16px 0 0; z-index:100;}
	tabbar.expand>filters			{display:flex; column-gap:20px; width:100%; padding:10px 15px 15px 15px; margin-top:5px;}
	tabbar.expand>filters			{display:flex; column-gap:20px; position:absolute; left:-5px; width:100%; padding:10px 15px 15px 15px; margin-top:5px; flex-shrink:0;}
	tabbar.expand>filters select	{min-width:min-content;}
	tabbar.expand>filters input		{min-width:80px;}

	tabbar.expand .btn-filter		{border-radius:16px 16px 0 0; background-color:var(--page-bkg); margin-bottom:-5px;}
	tabbar.expand .btn-filter+separator	{opacity:0;}
	tabbar.expand .fa-chevron-down	{transform:rotate(180deg);}

	tabbar.expand>filters 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;}

	@media all and (max-width:600px) {
		tabbar						{width:100%; margin-bottom:10px; max-width:100%;}
		tabbar>tabs					{width:100%; column-gap:0px; margin:0px;}
		tabbar>tabs>*				{padding:8px; flex-grow:1; text-align:center;}
		tabbar>tabs>*.btn-filter	{margin-left:0px;}
		tabbar.expand>filters		{column-gap:5px;}
	}


/* ---------------------------- COMPLEX INPUT -------------------------- */
	colorpicker						{display:flex; column-gap:8px; row-gap:8px; flex-wrap:wrap; width:310px; padding-top:5px;}
	colorpicker>*					{display:inline-block; width:27px; height:27px; border:4px solid transparent;}
	colorpicker>*.sel				{border:4px solid var(--sel-bkg); border-radius:15px; transform:scale(1.4);}


/* ------------------------------ GENERIC ------------------------------ */
	.avatar							{display:inline-block; width:32px; height:32px; line-height:32px; text-align:center; border-radius:6px; 
									 background-color:#f0f0f0; color:#fff; flex-shrink:0; border:1px solid rgba(255,255,255,0.5);}

	.avatar-small					{display:inline-block; width:26px; height:26px; line-height:26px; text-align:center; border-radius:6px; 
									 background-color:#f0f0f0; color:#fff; flex-shrink:0; border:1px solid rgba(255,255,255,0.5);}

	.panel-header .avatar			{background-color:var(--app-bkg);}

	.flat-btn						{display:inline-block; line-height:35px; padding:0 20px; border:1px solid #888; border-radius:10px; text-wrap:avoid; white-space:nowrap;}
	.flat-btn.compact-btn			{line-height:24px; padding:0 15px; border-radius:6px;}

	.flat-btn.black-bkg				{background-color:#000; color:#fff; border-color:#333;}
	.flat-btn.app-bkg				{background-color:var(--app-bkg); color:var(--app-text); border-color:var(--app-bkg);}
	.flat-btn.green-bkg				{background-color:#0a0; color:#fff; border-color:#0a0;}
	.flat-btn.red-bkg				{background-color:#a00; color:#fff; border-color:#a00;}
	.flat-btn.gray-bkg				{background-color:#444; color:#fff; border-color:#444;}
	.flat-btn.white-bkg				{background-color:#fff; color:var(--app-bkg); border-color:#ddd;}
	.flat-btn.discrete-bkg			{background-color:rgba(0,0,0,0.05); color:#666; border-color:#888;}

	.flat-btn:active:hover			{opacity:0.6;}

	 pill,
	.pill							{display:inline-block; font-size:0.7em; font-size:0.7rem; padding:4px 12px; border-radius:12px;}

	.as-readonly					{line-height:32px;}
	.btn-edit-this					{opacity:0.5; padding:3px 5px;}


/* ------------------------------ POPUPS ------------------------------ */
	.popup							{position:fixed; left:0px; top:0px; width:100vw; height:100vh; background-color:rgba(0,0,0,0.2); 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:16px; 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:100vh; transform:translate(0, 0); border-radius:0px;}
	}

	.popup>div.popup-box>.popup-title			{width:100%; padding:30px; background-color:var(--app-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>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-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;}


	@media all and (min-width:501px) {
		.popup>div.popup-box>buttonbar.relative-in-desktop		{position:relative;}
	}

	.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:600px) {
		.popup>div.popup-done					{width:80%}
	}


/* ------------------------------ OVERLAYS ------------------------------ */
	.overlay									{position:absolute; left:30%; top:50vh; width:65%; min-width:600px; height:85%; transform:translate(0%, -50%); overflow:hidden; 
												 z-index:var(--popup-zindex); display:none;}
	.overlay>div								{border:1px solid #888; border-radius:6px; overflow:hidden; height:100%;}

	.loading									{position:fixed; left:0px; top:0px; width:100vw; height:100vh; background-color:var(--loading-cover); display:none; z-index:var(--popup-zindex);}
	.loading>div								{position:absolute; left:50vw; top:50vh; min-width:20%; transform:translate(-50%, -50%); overflow:hidden; padding:30px 40px 30px 80px;
												 background-color:var(--loading-bkg); color:var(--loading-text); border:1px solid #888; border-radius:6px; z-index:3000; text-align:left}

	.loading .spinner							{position:absolute; left:30px; top:20px;}
	.loading .spinning							{color:var(--app-bkg); animation:rotate 1s linear infinite; font-size:28pt;}

	.spinner									{position:absolute; left:30px; top:20px;}
	.spinning									{color:var(--app-bkg); animation:rotate 1s linear infinite; font-size:28pt;}

	@keyframes rotate{
	  to{ transform: rotate(360deg); }
	}

	@media all and (max-width:600px) {
		.loading>div,
		.message>div							{width:90%;}
	}


	.message									{position:fixed; left:0px; top:0px; width:100vw; height:100vh; background-color:rgba(0,0,0,0.4); z-index:var(--popup-zindex);}
	.message>div								{position:absolute; left:50vw; top:50vh; min-width:20%; transform:translate(-50%, -50%); overflow:hidden; padding:30px 40px 30px 80px;
												 background-color:var(--page-bkg); border:1px solid #888; border-radius:6px; z-index:3000; text-align:left}



/* --------------------------------------------------------------------------------- */
	.dropdown									{position:relative; }
	.dropdown .dropdown-menu					{position:absolute; left:0; right:0; top:110%; min-width:190px; max-height:calc(100vh - 220px); overflow-x:auto;
												 display:none; background:var(--dropdown-menu-bkg); color:var(--dropdown-menu-color); list-style:none; margin:0; 
												 padding:0; z-index:2000; border:1px solid var(--dropdown-menu-bkg); border-radius:8px; font-size:0.8rem; margin-top:7px;}
	.dropdown .dropdown-menu.white-bkg			{background:#fff; color:#fff; border-color:#aaa;}
	.dropdown .dropdown-toggle					{min-width:48px;}

	.dropdown-toggle.open+.dropdown-menu		{display:block;}

	.dropdown .dropdown-menu>li					{padding:8px 15px; margin:0; border-bottom:1px solid var(--dropdown-menu-border); font-size:inherit;}
	.dropdown .dropdown-menu>li>a				{padding:8px 15px; margin:-8px -15px; display:block;}
	.dropdown .dropdown-menu>li:last-child		{border-bottom:none;}

	.dropdown .dropdown-menu>li.fdbk:hover,
	.dropdown .dropdown-menu>li.fdbk:active,
	.dropdown .dropdown-menu>li.sel				{background-color:var(--sel-bkg); color:var(--sel-text) !important;}
	.dropdown .dropdown-menu>li.danger.fdbk:hover,
	.dropdown .dropdown-menu>li.danger.fdbk:active,
	.dropdown .dropdown-menu>li.danger.sel		{background-color:#c90000; color:#fff !important;}
	.dropdown .dropdown-menu>li.alt-color.fdbk:hover,
	.dropdown .dropdown-menu>li.alt-color.fdbk:active,
	.dropdown .dropdown-menu>li.alt-color.sel	{background-color:#444; color:#fff !important;}
	.dropdown .dropdown-menu>li.sel>a			{color:inherit !important;}

	.dropdown .dropdown-menu>li.link			{padding:0;}
	.dropdown .dropdown-menu>li.link>a			{text-decoration:none; color:#000;padding:8px 15px; display:block;}
	.dropdown .dropdown-menu>li.link>a:hover	{background:#2896dd; color:#fff;}

	.dropdown.menu-right .dropdown-menu			{position:absolute; left:auto; right:0;}


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




/* ---------------------------- HIGHCHARTS ----------------------------- */
	table.highcharts_tooltip					{border-collapse:collapse;}
	table.highcharts_tooltip tr td				{border-top:1px solid #ccc; padding:3px 8px;}
	table.highcharts_tooltip tr td:last-child	{text-align:right; padding-left:10px;}
	table.highcharts_tooltip tr td[colspan="2"]	{height:2px;}

	div.highcharts-tooltip span.below			{display:inline-block; padding:3px 8px; background-color:#b90000; color:#fff; font-size:0.7rem; border-radius:4px; margin-top:3px;}
	div.highcharts-tooltip span.above			{display:inline-block; padding:3px 8px; background-color:#00b900; color:#fff; font-size:0.7rem; border-radius:4px; margin-top:3px;}


/* --------------------------------------------------------------------------------- */
	.warning						{border:1px solid var(--panel-lines); border-radius:6px; background-color:var(--panel-bkg);color:var(--panel-text); padding:20px; margin-bottom:20px; 
									 overflow:hidden; position:relative;}

	.warning.full-width				{padding-right:20px !important;}

	.panel.warning>.font-hdr		{margin-bottom:3px;}
	.panel.warning>.note.font-tiny	{display:inline-block; line-height:13px;}
	.warning .flat-btn				{background-color:var(--sel-bkg); color:var(--sel-color); padding:4px 15px;}
	.warning .flat-btn.alt			{background-color:var(--alt-bkg); color:var(--alt-color); padding:4px 15px;}
	.warning .amount				{display:inline-block; position:absolute; right:30px; bottom:30px;}
	.warning .amount>.font-big		{line-height:2.8rem;font-size: 3rem; letter-spacing:-3px;}
	.warning .amount>.font-tiny		{line-height:10px;}
	.warning .amount>.amount-pending{margin-top:5px; padding:1px 10px 1px 6px; border-radius:10px; margin-right:-15px; background-color:rgba(255,255,255,0.3);}


/* --------------------------------------------------------------------------------- */
	ul.checklist													{padding: 12px; background-color: #fff; border-radius: 4px; border: 1px solid #bbb;}}
	ul.checklist>li													{margin: 0; padding: 5px;}

	ul.checklist>li input[type=checkbox].form-control.custom		{position:relative; width:20px; height:20px; opacity:0.7; flex-shrink:0; border:1px solid #888; border-radius:4px;}

	ul.checklist>li input[type=checkbox].form-control.custom:checked{opacity: 1; border:1px solid #aaa;}
	ul.checklist>li input[type=checkbox].form-control.custom:checked::after{content:'X'; display:block; position:absolute; left:0px; top:0px; height:20px; line-height:20px; width:18px; 
																			text-align:center; font-size:0.75rem; font-weight:bold; font-family:var(--font-awesome)}
	ul.checklist li img												{display: inline-block; height: 20px; border-radius: 20px;}


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


/* --------------------------------------------------------------------------------- */
	.togglelist.form-control										{list-style:none;}
	.togglelist .form-group.relative								{padding-right:60px;}

	.togglelist .form-group>input[type=text].number					{position:absolute; top:20px; right:0px; width:80px;}

	.togglelist .form-group>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;}
	.togglelist .form-group>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; cursor:pointer;}
	.togglelist .form-group>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; cursor:pointer; transition:all 200ms ease;}
	.togglelist .form-group>input[type=checkbox]:checked+span		{background-color:var(--sel-bkg  ); }
	.togglelist .form-group>input[type=checkbox]:checked+span+span	{background-color:#fff; border-color:var(--dark-bkg); right:3px;}

	.togglelist .form-group>input[type=checkbox]:focus+span			{border-color:#389FED !important; outline:0;
																		-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6) !important;
																		 box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6) !important}
	.togglelist .form-group>input[type=checkbox]:focus:checked+span	{border-color:var(--dark-bkg) !important; }


	.togglelist .form-group>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;}
	.togglelist .form-group>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;}
	.togglelist .form-group>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;}

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


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


/* -------------------------------------------------------------------------------- */
	.rich-text								{position:relative;}
	.rich-text textarea						{padding-top:20px !important;}
	.rich-text icon							{position:absolute; top:10px; right:10px; padding:3px; cursor:pointer; color:#666;}


/* -------------------------------------------------------------------------------- */
	.leaflet-tooltip						{background-color:var(--tooltip-bkg) !important; color:var(--tooltip-text) !important; padding:3px 6px !important; border:none !important;
											 margin-top:-20px; margin-left:-20px !important;}
	.leaflet-tooltip-left:before			{border-left-color:var(--tooltip-bkg) !important}

	.map-buttons							{position:absolute; width:34px; height:auto; background-color:#fff; color:#000; z-index:1001; border:2px solid rgba(0,0,0,0.25); border-radius:4px;}
	.map-buttons.top-left					{right:10px; top:90px;}

	.map-buttons>div						{display:block; width:100%; height:32px; line-height:34px; text-align:center; border-bottom:1px solid #ccc; position:relative;}
	.map-buttons>div:last-child				{border-bottom:none;}

	.map-buttons>div:hover					{background-color:#F4F4F4;}

	.map-buttons>div>ul						{position:absolute; right:20px; width:180px; line-height:26px; background-color:#fff; display:none;
											 border:2px solid rgba(0,0,0,0.2); border-radius:4px; text-align:left;}
	.map-buttons>div:hover>ul				{display:block;}

	.map-buttons>div>ul>li					{padding:0px 10px; border-bottom:1px solid #ccc;}
	.map-buttons>div>ul>li.title			{background-color:#f4f4f4;}
	.map-buttons>div>ul>li.option			{}
	.map-buttons>div>ul>li.option:hover		{background-color:#f4f4f4; cursor:pointer;}


/* ------------------------------------------------------------------------------------ */
@media printer {
	.nav-bar-top,
	.nav-bar-left,
	.nav-bar-logo,
	.action-btn,
	.nav-bar-sub,
	.page-header,
	.page-filter,
	.popup-message,
	.page-footer,
	.page-loading		{display:none !important;}
}