.logotipo								{max-height:30px;}


/* --------------------------------------------------------------------------------- */
	.app-bar-top							{position:fixed; left:0px; top:0px; height:60px; width:100%; padding:20px 4vw 0 20px; z-index:1111;
											 color:var(--header-color); background-color:var(--header-bkg); border-bottom:1px solid #888;}
	.app-bar-top>*							{float:left;}
	.app-bar-top a							{display:inline-block; text-decoration:none; color:var(--header-color); padding:0 20px; border-bottom:5px solid transparent; line-height:37px;}
	.app-bar-top a.sel						{border-color:var(--base-bkg);}
	.app-bar-top a:hover					{background-color:var(--base-bkg); color:var(--base-color); border-radius:4px;}
	.app-bar-top .logotipo					{margin-right:50px;}


/* --------------------------------------------------------------------------------- */
	.app-icon-menu							{position:fixed; left:5px; top:5px; height:40px; line-height:40px; width:40px; text-align:center;z-index:1111;}

	.app-bar-menu							{position:fixed; left:-100vw; top:0px; height:100vh; width:100vw; z-index:1112;}
											 
	.app-bar-menu>div.menu					{height:100vh; width:60%; padding:0 0 20px 0; z-index:1112; overflow:hidden; 
											  color:var(--header-color); background-color:var(--header-bkg); border-right:1px solid #ccc;}
	.app-bar-menu>div.shadow				{position:absolute; left:0px; top:0px; height:100vh; width:40%; background-color:rgba(0,0,0,0.2);}

	.app-bar-menu.open						{left:0px;}
	.app-bar-menu.open>div.shadow			{left:60%;}

	.app-bar-menu a							{display:block; text-decoration:none; padding:5px 10px 5px 20px; opacity:0.5; color:var(--header-color); font-size:0.9rem;}
	.app-bar-menu a.sel						{opacity:1; font-weight:bold;}
	.app-bar-menu a:hover					{background-color:var(--base-bkg); color:var(--base-color); border-radius:4px;}

	.app-bar-menu .logotipo					{margin:20px 0 10px 20px;}


/* --------------------------------------------------------------------------------- */
	.app-bar-user							{position:fixed; top:10px; right:15px; z-index:1113; color:var(--header-color);}
	.app-bar-user>*							{display:inline-block; line-height:40px; }
	.app-bar-user>span.fa					{width:40px; height:40px; font-size:2rem;}



/* --------------------------------------------------------------------------------- */
	.page									{color:var(--page-color); background-color:var(--page-bkg); min-height:100vh;}
	.page-title								{position:fixed; left:0px; top:80px; height:70px; width:100%; padding:0px 4vw; z-index:1110;}


/* --------------------------------------------------------------------------------- */
@media all and (min-width:501px) {
	.app-icon-menu,
	.app-bar-menu							{display:none;}

	.page-title								{font-size:1.7rem; line-height:70px;}
	.page-subtitle							{display:none}
}
@media all and (max-width:500px) {
	.app-bar-top							{display:none;}
	.app-bar-user							{position:fixed; top:7px; right:0px;}
	.app-bar-user>span.fa					{ width:40px; height:40px; font-size:1.25rem;}
	.app-bar-user>span.user-name			{display:none;}

	.page-title								{top:0px; background-color:var(--page-bkg); padding-left:50px; height:50px; line-height:50px; }
	.page-subtitle							{position:fixed; left:0px; top:50px; height:18px; line-height:18px; width:100%; padding-left:18px; z-index:1110; 
											 background-color:var(--page-bkg); }
}


/* --------------------------------------------------------------------------------- */
	.dropdown										{position:relative; margin-right:18px; }
	.dropdown .dropdown-menu						{position:absolute; left:0; right:0; top:100%; min-width:190px; display:none; background:#fff; color:#000;
														border:1px solid #bbb; border-bottom-width:3px; z-index:2000; max-height:calc(100vh - 220px); overflow-x:auto;}
	.dropdown .dropdown-toggle						{min-width:48px; padding-right:50px;}

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

	.dropdown .dropdown-menu>li						{padding:8px 15px; border-bottom:1px solid #ddd;}
	.dropdown .dropdown-menu>li:last-child			{border-bottom:none;}

	.dropdown .dropdown-menu>li.sel					{background-color:var(--base-bkg); color:var(--base-color) !important; font-weight:bold;}
	.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;}

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

	.dropdown-item>a								{width:100%; display:block; text-decoration:none;}
	.dropdown .fa-chevron-down						{display:inline-block; margin-left:30px;}
	.dropdown .dropdown-toggle .fa-chevron-down		{position:absolute; top:30px; right:32px;}

	.dropdown-group									{}

	.dropdown-has-groups							{}
	.dropdown-has-groups .dropdown-item				{padding-left:30px !important;}


	.dropdown.float-right							{position:relative; margin-right:0; margin-left:18px; }
	.dropdown.float-right .dropdown-menu			{position:absolute; left:auto; right:0;}


/* ------------------------------------------------------------------------------------ */
	.popup-message									{position:fixed; top:0px; left:0px; width:100vw; height:100vh; background-color:rgba(0,0,0,0.4); z-index:1130;}
	.message-box									{position:fixed; top:50%; left:50%; width:30vw; min-height:20vh; transform:translate(-40%, -60%);}
	.message-title									{padding:1vh 1vw; background-color:rgba(0,0,0,0.1)}
	.message-body									{padding:2vh 1vw;}
	.message-btns									{position:absolute; left:0px; bottom:0px; width:100%;}
	.message-btn									{width:50%; padding:1.6vh; text-align:center; float:left; border:none; text-decoration:none;}

	.popup											{position:absolute; left:0; top:0; width:100vw; height:100vh; background-color:rgba(0,0,0,0.3); z-index:2000;}
	.popup>div,
	.popup>iframe									{position:absolute; left:50vw; top:50vh; transform: translate(-50%, -50%);}
	.popup-close									{position:absolute;}

/* ------------------------------------------------------------------------------------ */
	.warning-box									{position:relative; padding:10px 20px; margin-top:5px;}
	.warning-box>span								{display:block;}
	.warning-box>span.fa							{position:absolute; right:20px; top:15px; display:inline-block; opacity:0.5;}


/* ------------------------------------------------------------------------------------ */
	#loading										{display:none; text-align:center; background-color:#f4f2ee; color:#aaa; border:1px solid #DFDDD9; border-radius:2px; border-top-width:35px;}
	#loading>div									{width:60px; height:60px; margin:auto; position:relative; top:50%; transform:translateY(-50%);}
	#loading>p										{margin:0; padding:80px 0 0 0;text-align:center; line-height:1.2em;}
	#loading>div>span								{display:block; width:100%; height:100%; position:absolute; left:0px; top:0px; border-radius:50%;
													  -webkit-animation: loading-anim 2.0s infinite ease-in-out; animation: loading-anim 3.0s infinite ease-in-out; }
	#loading>div>span.loading1						{background-color:rgba(0,0,0,0.5);}
	#loading>div>span.loading2						{background-color:rgba(200,200,200,0.6); -webkit-animation-delay: -1.2s; animation-delay: -1.2s;}

	@-webkit-keyframes loading-anim {
	  0%, 100% { -webkit-transform: scale(0.0) }
	  50% { -webkit-transform: scale(1.0); }
	}

	@keyframes loading-anim {
	  0%, 100% {
		transform: scale(0.0);
		-webkit-transform: scale(0.0);
	  } 50% {
		transform: scale(1.0);
		-webkit-transform: scale(1.0);
	  }
	}



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