: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:			#101060;
	--accent-color:		#2194D2;

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

	--header-h:			110px;
	--header-bkg:		#ffffff;
	--header-text:		#000000;
	--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;

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

	--batt-bkg:			#2194d2;
	--batt-text:		#ffffff;

	--title-zindex:		1000;
	--menu-zindex:		1001;
	--popup-zindex:		1010;

	--font-menu:		10.5pt;

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


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

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

@media all and (max-width:500px) {
	: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:500px) {
		.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:url('/Content/images/header-bkg.png'); background-repeat:repeat-x;}

	@media all and (max-width:500px) {
		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:#fff;
									 padding:50px 40px 40px calc(var(--nav-bar-w) + var(--nav-bar-pad, 60px)); background-image:url('/Content/images/header-bkg.png'); background-repeat:repeat-x;}
	header a,
	header a:visited				{color:inherit;}

	@media all and (max-width:500px) {
		header						{padding:45px 20px 0px 20px; align-items:start; column-gap:15px;}
		header	a					{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 .batt-logo-mobile		{position:absolute; display:flex; column-gap:6px; align-items:center; left:20px; top:22px; opacity:0.5; width:40px;}



	header breadcrumbs				{display:flex; column-gap:10px; align-items:center; color:#fff;}
	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:var(--header-opacity);}

	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 a>icon					{opacity:var(--header-opacity);}
	header a:hover>icon				{opacity:1.0; transform:scale(1.6);}

	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))}
	}


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

	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:-4px; 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:rgba(255,255,255,0.3); 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 .batt-logo-desktop				{opacity:0.8; text-align:center; padding:3px 10px 0 0;}
	nav .batt-logo-desktop>img			{height:30px; display:inline-block;}

	nav .batt-logo-desktop				{opacity:0.8; text-align:center; padding:3px 10px 0 0;}

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



	@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:500px) {
		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:500px) {
		page						{padding:0 10px 75px 10px;}
	}


/* ---------------------------- PANELS & TABLES ----------------------------- */
	panel											{position:relative; display:block; background-color:#fff; color:#000; 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:20px 30px;}
	}

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


	@media all and (max-width:501px) {
		.panel-header								{padding:20px;}
	}

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

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

	panel.full-table								{padding:20px 2px; 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 span.panel-title					{display:inline-block; color:#444; font-size:1.3rem; font-weight:bold; letter-spacing:-1px; padding:10px 0 30px 30px;}
	.full-table div.panel-title						{display:flex; color:#444; font-size:1.3rem; font-weight:bold; letter-spacing:-1px; padding:5px 30px 20px 30px;}
	@media all and (max-width:500px) {
		.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 !important;}

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

	.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 #eee; background-color:transparent; font-size:0.7rem; text-transform: uppercase; color:#888;}
	.full-table table tr.table-header,
	.full-table table tr.table-header th		{padding:15px 5px 5px 5px; border-bottom:1px solid #eee; background-color:#e8e8e8; font-size:0.7rem; text-transform: uppercase; color:#666;}
	.full-table table tbody td					{padding:10px 5px; border-bottom:1px solid #eee;}
	.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,
	.full-table table tr>td:last-child			{padding-right:30px;}


	.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.cells-center-vertical td		{vertical-align:middle;}

	.no-data,
	.editable							{padding:50px 40px; height:100%; background-color:var(--page-bkg) !important; margin:0 20px; border-radius:16px;}


/* ----------------------------- FILTER TABLE -------------------------- */	
	panel .table-filter					{display:flex; width:calc(100% + 2px); column-gap:15px; align-items:center;
										 margin:15px -1px -20px -1px; padding:10px 20px; background-color:#e8e8e8; 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;}
	}


/* ----------------------------- 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:#fff; opacity:1;}
	viewtypebar>*:hover				{background-color:var(--sel-bkg); color:var(--sel-text); opacity:1;}


/* ---------------------------- INFOSNACKS ---------------------------- */	
	.infosnack-wrapper				{padding-bottom:30px; dislplay: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:#e8e8e8; 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:500px) {
		.infosnack-wrapper			{row-gap:15px !important; padding-bottom:0px;}
	}
	@media all and (min-width:501px) and (max-height:780px) {
		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:40px;}
	iconlist>a						{display:inline-block; text-decoration:none; color:inherit; text-align:center; width:120px; height:120px; padding:20px 10px; 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 .check-active		{position:absolute; top:17px; right:30px; font-size:1.1rem;}

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

		iconlist					{flex-wrap:wrap; column-gap:0px;}
		iconlist>a					{width:110px; flex-grow:1;}
	}



/* --------------------------- TABS & BUTTONS -------------------------- */
	buttonbar						{display:flex; column-gap:10px;}
	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 #444; color:#000;}
	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:#fff; color:#000; padding:5px; border-radius:16px;position:relative; z-index:2;
									 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:#666; 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:#000 }
	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; position:absolute; left:-5px; width:100%; padding:10px 15px 15px 15px; margin-top:5px;}
	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:500px) {
		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);}


	.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.black-bkg				{background-color:#000; color:#fff; border-color:#333;}
	.flat-btn.batt-bkg				{background-color:var(--batt-bkg); color:var(--batt-text); border-color:var(--batt-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(--batt-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							{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:500px) {
		.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(--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>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:500px) {
		.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:rgba(0,0,0,0.4); 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(--page-bkg); 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(--batt-bkg); animation:rotate 1s linear infinite; font-size:28pt;}

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

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

	@media all and (max-width:500px) {
		.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.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;}


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