/* ------------------------------ CSS VARIABLES -------------------------------------- */
:root {
	--page-bkg:			#eef2f4;
	--page-text:		#000000;
	--edit-bkg:			#f2f6f8;

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

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

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

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

	--font-menu:		11pt;

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

	--accent: 		#fff;
	--active-event: #1a73e8;
}

@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:100dvh; 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('/static/images/header-bkg.png'); background-repeat:repeat-x;overflow-y: hidden;}
	body.collapsed					{padding-left:calc(var(--nav-bar-w-2, 50px) + 40px);}

	@media all and (max-width:500px) {
		body,
		body.collapsed				{padding-left:0px; padding-right:0px;}
	}
	@media all and (min-width:501px) {
		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 30px 40px calc(var(--nav-bar-w) + var(--nav-bar-pad, 60px)); background-image:url('/static/images/header-bkg.png'); background-repeat:repeat-x;}

	@media all and (max-width:500px) {
		header						{padding:45px 30px 0px 30px; align-items:start;}
		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:0.5;}
	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 .lori-logo-mobile		{position:absolute; display:flex; column-gap:6px; align-items:center; left:30px; top:22px; opacity:0.5; width:40px;}
	#mobile-page-title				{position:absolute; display:flex; column-gap:6px; align-items:center; right:15px; top:15px; opacity:0.5; font-size: 0.9rem !important;}


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

	header pagetitle				{display:inline-block; padding:10px 0 0 0; font-size:1rem !important;}
	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:0.8;}
	header a:hover>icon				{opacity:1.0; transform:scale(1.6);}

	/* body.collapsed header			{padding-left:calc(var(--nav-bar-w-2) + var(--nav-bar-pad, 60px))} */

	header .header-btn-expand					{opacity:0.7; 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:200px;}
		header .header-btn-expand	{display:none;}
	}


/* ------------------------------ 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(100dvh - 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 .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-width: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:12px 15px; border-radius:6px; line-height:1px; margin-top:-4px; position:relative; cursor: pointer;}
	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 .nav-item.just-collapsed		{display:none;}

	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 .lori-logo-desktop				{position:absolute; left:0px; width:100%; bottom:20px; opacity:0.5; }
	nav .lori-logo-desktop>span>img		{width:30px; display:inline-block; margin-right:10px;}

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

	body.collapsed nav.just-desktop		 {width:var(--nav-bar-w-2 ,50px); padding:50px 2px 45px 2px;}
	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-expanded		 {display:none;}



	@media all and (max-width:500px) {
		nav.just-desktop				{display:none;}
		nav.just-mobile					{position:fixed; top:calc(100dvh - 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:10;}
		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(100dvh - 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;}
	}
	@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;}
	}


/* -------------------------------- 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 .country-choose	{border-top:1px solid #555; margin-top:15px;}
	.nav-countries .dropdown-menu>*:hover			{background-color:var(--sel-bkg); color:var(--sel-text);}

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


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

	@media all and (max-width:500px) {
		page						{padding:0 15px 55px 15px;}
	}


/* ---------------------------- 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:501px) and (max-height:720px) {
		panel,
		panel>form									{padding:20px 30px;}
	}


	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 .sub-title-small							{display:inline-block; color:#444; font-size:.85rem; letter-spacing:-0.5px}
	panel.full-table								{padding:30px 0 0; overflow:hidden; position:relative; height: 100%;}

	#pnl-my-location, #pnl-leads					{min-height: 101px;max-height: 101px;}
	/* #pnl-info-snack panel							{max-height: 101px; min-height: 101px; width: 210px; cursor: pointer;} */
	#info-snack-title								{font-size: 1.1rem; font-weight: bold; justify-content: center;}
	#pnl-info-snack panel div.panel-header			{padding: 5px 20px 10px 20px; flex-direction: column; justify-content: center;}
	#delayed-moves-container						{background-color: #fff;overflow: hidden; height: 100%; box-shadow: rgba(20, 20, 20, 0.12) 0rem 0.25rem 0.375rem -0.0625rem, rgba(20, 20, 20, 0.07) 0rem 0.125rem 0.25rem -0.0625rem; border-radius: 16px;}

	/* @media all and (min-width: 700px) {
		panel.full-table							{padding:15px 0 0; position:relative; max-height:94%; min-height:94%;}
	} */

	/* @media all and (max-width: 700px) {
		panel.full-table							{padding:15px 0 10px 0; position:relative; max-height:94%; min-height:94%;}
	} */
	@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;}
	}

	panel.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;}
	panel.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) {
		panel.full-table							{padding:15px 0 10px 0; position:relative; max-height:94%; min-height:94%;}
		panel.full-table div.panel-title			{padding:5px 15px 20px 15px;}
	}

	panel.full-table div.panel-header				{display:flex; color:#444; padding:5px 30px 10px 30px;}
	panel.full-table div.panel-header .panel-header-title	{font-size:1.3rem; font-weight:bold; letter-spacing:-1px; padding:0px;}
	@media all and (max-width:500px) {
		panel.full-table div.panel-header			{padding:5px 15px 10px 15px;}
	}

	panel.full-table .table-wrapper 				{width:100%; overflow-x:hidden; overflow-y:auto;}
	panel.full-table .table-wrapper thead 			{position:sticky; top:0px; z-index:10;}
	panel.full-table .table-wrapper thead th		{background-color:#F2F2F2 !important;}

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

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

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

	panel.full-table table thead,
	panel.full-table table thead th					{padding:5px; border-bottom:1px solid #eee; background-color:transparent; font-size:0.7rem; text-transform: uppercase; color:#888;}
	panel.full-table table tr.table-header,
	panel.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; text-align:start;}
	panel.full-table table tbody td					{padding:10px 5px; border-bottom:1px solid #eee;}
	panel.full-table .rec-pnl .rec-pnl-body .rec-pnl-row		{border-top:1px solid #eee;}
	panel.full-table .rec-pnl .rec-pnl-body .rec-pnl-row		{padding:10px 0;}
	panel.full-table table tbody tr:last-child>td	{border-bottom:none;}

	panel.full-table table tr>th:first-child,
	panel.full-table table tr>td:first-child		{padding-left:20px;}
	panel.full-table table tr>th:last-child,
	panel.full-table table tr>td:last-child			{padding-right:30px;}


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

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

	panel.full-table table tbody span.stage-status				{border-radius: 5px; padding: 5px; display:flex; min-width:50px; max-width:max-content;}
	panel.full-table table tbody tr.row-red						{background-color:#fff0f0;}
	panel.full-table table tbody tr.row-red:nth-child(even)		{background-color:#f8e8e8;}
	panel.full-table table tbody tr.row-red:hover				{background-color:#b90000; color:#fff;}

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

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

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


	panel .title-icon					{display:inline-block; width:45px; height:45px; line-height:45px !important; text-align:center; border-radius:40px; 
										 background-color:#f00; color:#fff;}
	@media all and (min-width:501px) and (max-height:780px) {
		panel .title-icon				{transform:scale(0.7);}
	}


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

/* ----------------------------- MOVE PANEL ---------------------------- */
	panel.full-table .rec-pnl 						{margin:0 5px 20px 5px; border:1px solid #cdcaca; overflow:hidden; box-shadow:0 2px 4px rgba(0,0,0,.08);}
	panel.full-table .rec-pnl .rec-pnl-title 		{padding:5px 10px 3px 10px; display:flex; cursor:pointer; user-select:none; font-size: 0.8rem;
														 text-transform: uppercase; color: #444; font-weight: bold;background:var(--nav-bar-mob-bkg);}
	panel.full-table .rec-pnl .rec-pnl-title .icon 					{width:8px; height:8px; position:relative;}
	panel.full-table .rec-pnl .rec-pnl-title .icon::before,
	panel.full-table .rec-pnl .rec-pnl-title .icon::after			{content:''; position:absolute; transition:.2s; background:var(--accent);}
	panel.full-table .rec-pnl .rec-pnl-title .icon::before			{top:2px; left:50%; width:2px; height:8px; margin-left:-1px;}
	panel.full-table .rec-pnl .rec-pnl-title .icon::after			{top:50%; left:0; width:8px; height:2px; margin-top:1px;}
	panel.full-table .rec-pnl .rec-pnl-body		{max-height:fit-content; overflow:hidden; transition:max-height .25s ease;display:flex; flex-direction:column;}
	panel.full-table .rec-pnl .rec-pnl-row		{display:flex; justify-content:space-between;}
	panel.full-table .rec-pnl .rec-pnl-row div	{display:flex; align-items:center; margin:0 2px;}
	panel.full-table .rec-pnl .rec-pnl-title .title-row				{display:flex; justify-content:space-between; width:100%; min-height:26px;}
	panel.full-table .rec-pnl .rec-pnl-title .title-row	div button	{background: transparent; border:none; color:transparent;}
	panel.full-table .rec-pnl .rec-pnl-row span.stage-status		{border-radius:3px; padding:1px 3px; display:flex; min-width:max-content; max-width:max-content; font-weight:bold;}
	panel.full-table div input[type=checkbox] 												{display:none;}
	panel.full-table div input[type=checkbox]:not(:checked) + .rec-pnl .rec-pnl-body{max-height:0;padding:0 1rem;}
	panel.full-table div input[type=checkbox]:not(:checked) + .rec-pnl .fa-chevron-up,
	panel.full-table div input[type=checkbox]:checked +      .rec-pnl .fa-chevron-down	{display:none;}
	panel.full-table div input[type=checkbox]:checked +        .rec-pnl .fa-chevron-up	{display:inline-block;}
	panel.full-table .rec-pnl .mobile-truck-reg-col										{max-width:60px; min-width:60px; overflow:clip; font-weight:bold; font-size:10px;}
	panel.full-table .rec-pnl .mobile-stage-col											{max-width:60px; min-width:60px; font-size:10px;}
	panel.full-table .rec-pnl .mobile-client-col										{max-width:135px; min-width:135px; font-size:10px;}
	panel.full-table .rec-pnl .mobile-interval-col										{max-width:53px; min-width:53px; overflow:clip; font-size:10px;}
	panel.full-table .rec-pnl .view-details-icon										{fill:var(--page-bkg); stroke:var(--page-bkg); stroke-width:"2";}
	panel.full-table .rec-pnl .fuel-request-amount-col									{width:50px; overflow:clip; font-weight:bold; font-size:10px; margin-left: 5px !important;}
	panel.full-table .rec-pnl .fuel-price-col											{width:100px; font-size:10px;}
	panel.full-table .rec-pnl .fuel-station-col											{width: -webkit-fill-available;font-size:10px; overflow: hidden; text-align: start;}
	.chk-moves-miss-docs	{display: flex !important; transform: scale(0.75); bottom: -5px;}

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

	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>span					{display:block; font-size:0.85rem;}

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


/* --------------------------- TABS & BUTTONS -------------------------- */
	buttonbar						{display:flex; column-gap:10px;}
	buttonbar>span>.button,
	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>span>.button:hover,
	buttonbar>.button:hover			{background-color:#05a; border-color:#0584d9;}
	buttonbar>span>.button.hollow,
	buttonbar>.button.hollow		{background-color:transparent; border:1px solid #444; color:#000;}
	buttonbar>span>.button.flat,
	buttonbar>.button.flat			{background-color:#daf0ff; border:1px solid #cce9fe;}
	buttonbar>span>.button.flat:hover,
	buttonbar>.button.flat:hover	{background-color:#9dd8ff; border-color:#66bffa;}
	buttonbar>span>.button:active:hover,
	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>.button.btn-upload	{background-color:#0584d9; border-color:#66bffa;}
	buttonbar>.button.btn-upload:hover {background-color:#05a; border-color:#0584d9;}

	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; min-height: 40px;}
	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);}


/* ------------------------------ CHECKBOX ------------------------------ */
	checkbox								{position:relative; display:inline-block; width:34px; min-width:36px; height:22px; border:2px solid #ccc; border-radius:30px; 
											 background-color:#fff}
	checkbox>input[type=checkbox]			{opacity:0; position:absolute; top:1px; left:1px; width:100%; min-height:100%; z-index:1;}
	checkbox>input[type=checkbox]+span		{content:" "; position:absolute; top:1px; left:2px; width:16px; height:16px; border-radius:30px;
											 background-color:#fff; transition:all 200ms ease;}
	checkbox>input[type=checkbox]:checked+span		{top:1px; left:14px;}

	checkbox:has(input[type=checkbox]:checked)			{background-color:var(--sel-bkg);border-color:var(--sel-bkg);}
	checkbox:not(:has(input[type=checkbox]:checked))	{background-color:#ccc;}

	checkbox:has(input[type=checkbox]:focus)>span		{height:16px;}
	checkbox:has(input[type=checkbox]:focus)	{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}


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


	.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.lori-bkg				{background-color:var(--lori-bkg); color:var(--lori-text); border-color:var(--lori-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(--lori-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:100dvh; 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:50dvh; transform:translate(-50%, -50%); overflow:hidden; 
									 background-color:var(--page-bkg); border-radius:16px; z-index:3000; display:flex; flex-direction:column;}

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

	.popup>div.popup-box>.popup-title			{width:100%; padding:30px; background-color:var(--lori-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; overflow-y: auto;}
	.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%; 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:50dvh; 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:50dvh; 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:100dvh; background-color:rgba(0,0,0,0.4); display:none; z-index:var(--loader-zindex);}
	.loading>div					{position:absolute; left:50vw; top:50dvh; 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(--lori-bkg); animation:rotate 1s linear infinite; font-size:28pt;}

	.spinner-loading				{position:fixed; left:0px; top:0px; width:100vw; height:100dvh; background-color:rgba(0,0,0,0.4); display:none; z-index:var(--loader-zindex);}
	.spinner						{position:absolute; left:30px; top:20px;}
	.spinning						{color:var(--lori-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:100dvh; background-color:rgba(0,0,0,0.4); z-index:var(--popup-zindex);}
	.message>div					{position:absolute; left:50vw; top:50dvh; 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(100dvh - 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:100dvh; background-color:rgba(0,0,0,0.6); display:none; z-index:var(--popup-zindex);}
	.confirm-popup>div								{position:absolute; left:50vw; top:50dvh; 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;}


/* ------------------------------ SEARCH INPUT ------------------------- */
	.search-input-wrapper 	{position: relative; display: inline-block; width: 240px;}
	#txt-search 			{width: 100%; padding-right: 32px; padding-left: 32px; box-sizing: border-box;}
	#search-cancel-icon		{position: absolute; right: 8px; top: 50%; transform: translateY(-50%); cursor: pointer; font-size: 1.2em; color: #317698; display: none; z-index: 2;}
	.search-input-wrapper icon.fa-search {position: absolute; left: 8px; top: 50%; font-size: 1.1em; z-index: 2;}


/* ----------------------MOBILE SEARCH INPUT --------------------------- */
	@media (max-width: 500px) {
		/* #mobile-txt-search  		{width: 100%;box-sizing: border-box;position: absolute;bottom: 50px; right: 10px;padding: 7px 10px 7px 30px;border-radius: 6px;border: 1px solid #bbbbbb;background: #f2f3f3;} */
		/* #mobile-search-icon 		{cursor: pointer;} */
		/* #mobile-search-cancel-icon 	{position: absolute; right: 15px; bottom: 15px; transform: translateY(-50%); cursor: pointer; font-size: 0.9em; color: #317698; z-index: 2;display: none;} */
		/* #mobile-global-search		{display: none;position: absolute;bottom: 5px;right: 10px;width: 240px;margin-top: 10px;} */
		/* #mobile-global-search icon.fa-search {position: absolute; right: 225px; bottom: 40px; font-size: 0.9em; z-index: 2;} */
		#global-search				{margin-top: 10px;}
		#mobile-home-icon			{position:fixed;right: 105px;margin-top: 10px;}
		#mobile-fueling-list-icon	{position:fixed;right: 75px;margin-top: 10px;}
		#mobile-allocate-truck-icon	{position:fixed;right: 45px;margin-top: 10px;}
		#notification-bell-icon		{position:fixed;right: 45px;margin-top: 10px;}
		#user-profile				{position:fixed;right: 15px;margin-top: 10px;}
		#mobile-nav-countries		{display: flex;flex-direction: row;}
	}


/* -------------------------------------------------- NOTIFICATIONS -----*/
	#app-notification-popup		{display:none; position:fixed; top:32px; right:32px; min-width:220px; max-width:420px; z-index:15000;}
	#app-notification-content	{padding:14px 24px; border-radius:8px; box-shadow:0 2px 12px rgba(0,0,0,0.10); text-align:left;}
	.app-notification-success 	{background: #e6f4ea; color: #2e7d32; border: 1.5px solid #43a047;}
	.app-notification-error 	{background: #fdecea; color: #c62828; border: 1.5px solid #e53935;}
	.app-notification-warning 	{background: #fff8e1; color: #f9a825; border: 1.5px solid #fbc02d;}
	.app-notification-info 		{background: #e3f2fd; color: #1565c0; border: 1.5px solid #1976d2;}


/* --------------------- ELEMENT ACCESSIBILITY ------------------------- */
	.disabled  	{opacity: 0.5; pointer-events: none; cursor: not-allowed;}
	.visible 	{display: flex !important;}
	.invisible 	{display: none !important;}


/* -------------------- TOOLTIP ---------------------------------------- */
	.tooltip 		{visibility: hidden; opacity: 0; background-color: #333; color: #fff; text-align: center; border-radius: 5px; padding: 5px 10px; position: absolute; z-index: 1; transition: opacity 0.3s;}
	.tooltip.show 	{visibility: visible; opacity: 1;}

	.pnl-confirm--visible { display: block !important; }

/* -------------------- BADGES ----------------------------------------- */
	.nav-badge {display: inline-block;min-width: 20px;padding: 2px 8px;margin-left: 8px;font-size: 12px;line-height: 18px;text-align: center;background: #e53935;color: #fff;border-radius: 999px;vertical-align: middle;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);}

	/* smaller spacing when inside nav-item */
	.nav-item .nav-badge {margin-left: 12px;}

/* ------------------- DROP DOWN WITH SEARCH --------------------------- */
	.ajax-select 				{position: relative;}
	.html-select-input,
	.ajax-select-input 			{width: 100%;padding: 8px 12px;border:1px solid #ccc;border-radius:6px;height: 34px;box-sizing: border-box;}
	.ajax-select-input 			{background: white;}
	.html-select-input			{background-color: white;font-family: inherit;font-size: inherit;}
	.ajax-select-list 			{position: absolute;left: 0;right: 0;top: calc(100% + 6px);background: #fff;border: 1px solid #e6e6e6;border-radius: 8px;max-height: 240px;overflow: auto;z-index: 2200;box-shadow: 0 6px 18px rgba(15,23,42,0.08);display: none;}
	.ajax-select-item 			{padding: 8px 12px;cursor: pointer;font-size: 0.95rem;color: #223344;}
	.ajax-select-item:hover,
	.ajax-select-item.active 	{background: #f5f8ff;}
	.ajax-select-empty 			{padding: 8px 12px;color: #888;font-size: 0.9rem;}

/* ------------------ DIV BUTTONBAR ------------------------------------- */
	.buttonbar						{display:flex; column-gap:10px;}
	.buttonbar span>.button,
	.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 span>.button:hover,
	.buttonbar .button:hover			{background-color:#05a; border-color:#0584d9;}
	.buttonbar span>.button.hollow,
	.buttonbar .button.hollow		{background-color:transparent; border:1px solid #444; color:#000;}
	.buttonbar span>.button.flat,
	.buttonbar .button.flat			{background-color:#daf0ff; border:1px solid #cce9fe;}
	.buttonbar span>.button.flat:hover,
	.buttonbar .button.flat:hover	{background-color:#9dd8ff; border-color:#66bffa;}
	.buttonbar span>.button:active:hover,
	.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 .button.btn-upload	{background-color:#0584d9; border-color:#66bffa;}
	.buttonbar .button.btn-upload:hover {background-color:#05a; border-color:#0584d9;}

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