/**
 * EGroupware: Stylite Pixelegg template - mobile theme
 *
 * Please do NOT change css-files directly, instead change less-files and compile them!
 *
 * @link http://www.egroupware.org
 * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
 * @author Hadi Nategh <hn@stylite.de>
 * @package pixelegg
 * @version $Id$
 */

@import "pixelegg.less";
@import (reference) "../less/def_mobile.less";
/********************************/
/*								*/
/*		MEDIA DEFINITION		*/
/*								*/
/********************************/
/*Tablets Max-Width*/
@tablet-max: 1024px;
/*Smartphones Max-Width*/
@smartphone-max: 700px;
/*Smartphones Min-Width*/
@smartphone-min: 321px;
@handheld: ~"only screen and (max-device-width : @{tablet-max})";
/*All devices portrait mode*/
@handheld-portrait: ~"only screen and (max-device-width : @{tablet-max}) and (orientation : portrait)";
/*All devices landscape mode*/
@handheld-landscape: ~"only screen and (max-device-width : @{tablet-max}) and (orientation : landscape)";
/*Tablets landscape mode*/
@tablet-portrait: ~"only screen and (max-device-width : @{tablet-max}) and (min-width: @{smartphone-max}) and (orientation : landscape)";
/*Tablets Portrait*/
@tablet-portrait: ~"only screen and (max-device-width : @{tablet-max}) and (min-width: @{smartphone-max}) and (orientation : portrait)";
/*Smartphones*/
@smartphones: ~"only screen and (max-device-width: @{smartphone-max}) and (min-width: @{smartphone-min})";


@keyframes fw-firstload {
	0%, 20%, 50%, 80%, 100% {
		transform:translateY(0);
		-webkit-transform: translateY(0);
		-moz-transform:translateY(0);
	}
	40% {
		transform: translateY(-30px);
		-webkit-transform: translateY(-30px);
		-moz-transform: translateY(-30px);
	}
	60% {
		transform: translateY(-15px);
		-webkit-transform: translateY(-15px);
		-moz-transform: translateY(-15px);
	}
}

@media all {
	body{
		
		background-color: transparent;
		// iOS appHeader class
		div.egw_fw_mobile_iOS_popup_appHeader{
			padding-top:15px;
		}
		div.egw_fw_mobile_popup_appHeader {
			display: none !important;
			height: 32px !important;
			background-size	: 2px;
			font-size: 150% !important;
			border-bottom: 3px solid #679fd2 !important;
			border-top: none !important;
			width: 100%;
			line-height: 32px !important;

		}
		
		#egw_fw_firstload {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			.background_color_egw_dark;
			height: 100%;
			width: 100%;
			&:before{
				content:"";
				display: inline-block;
				position: absolute;
				width: 100%;
				height: 100%;
				background-image: url(/egroupware/phpgwapi/templates/default/images/logo64x64.png);
				background-position: center;
				background-repeat: no-repeat;
				background-size: 64px;
				-webkit-animation: fw-firstload 1s infinite;
				animation: fw-firstload 1s infinite;
				-moz-animation: fw-firstload 1s infinite;
			
			}
			
		}
		
		//###################
		//#					#
		//#	 Grid & NM		#
		//#					#
		//###################
		table.egwGridView_outer{
			thead{
				tr{
					th{
						font-size: small !important;
					}
				}
			}
			tbody{
				tr{
					touch-action:initial;
					td time, td.et2_date , td.et2_date_ro{
						float: right;
						.mob-fontsize-s;
					}
					td {
						position: relative;
						.mobile_cat_col {
							position: absolute;
							min-height: 100%;
							bottom:0;
							top:0;
							width:10px;
							display: block;
							
						}
						span.cat_.mobile_cat_col {
							background: #F5F5F5;
						}
					}
				}
			}
		}
		/*BOF close/back button styling*/
		span.egw_fw_mobile_popup_close {
			width: 50px;
			height: 50px;
			float:left;
			background-image: url('../images/cancelled.png');/*url(../images/topmenu_items/mobile/menu_active.png);*/
			-webkit-filter: contrast(2);
			background-repeat: no-repeat;
			z-index: 1000;
			padding-right: 5px;
			top:2px;
			left: 10px;
			background-position: 3px 7px;
			position: fixed;
		}
		span.egw_fw_mobile_popup_close.loaded {
			&:after {
				content: "\2190";
				font-size: 24pt;
				color: white;
				padding-left: 5px;
				font-weight: bold;
			}
			background-image: none;
		}
		/*EOF close/back button styling*/

		#egw_fw_basecontainer{
			background:white;

			#egw_fw_main {
				#egw_fw_tabs {
					margin-top:-3px;
				}
			}
			//###################
			//#					#
			//#		TOOLBAR		#
			//#					#
			//###################
			#egw_fw_top_toolbar{

				div.egw_fw_ui_tabs_header{
					max-height: 60px;
					width: 60%;
					margin-left: 0;
					overflow-x: scroll;
					position: initial;
					white-space: nowrap;
					position: fixed;
					left: 83%;
					top: 15px;
					height: 50px;
					span{
						margin:0;
						overflow: visible;
						height:38px;
						width:50px;
						border-width: 1px 1px 1px 1px;
						border:none;
						border-radius: 10px;

						img{
							height:32px !important;
							width:32px !important;
						}
						h1{
							display:none;
						}
					}
				}
			}

			.egw_fw_top_toolbar>div:hover{
				-webkit-box-shadow: none;
				-moz-box-shadow: none;
				box-shadow: none;
			}


			//FW Menu
			div#egw_fw_menu{
				background-image: url(../images/topmenu_items/mobile/menu_active.png);
				cursor: pointer;
				position: fixed;
				width: 50px;
				height: 50px;
				background-size: 24px 24px;
				background-repeat: no-repeat;
				z-index: 999;
				background-position:center;
				&:hover {
					-webkit-box-shadow: none;
					-moz-box-shadow: none;
					box-shadow: none;
				}
				&:focus {
					outline: none;
				}
			}
			div#egw_fw_menu:active {
				-webkit-box-shadow: none;
				-moz-box-shadow: none;
				box-shadow: none;
			}
			div#egw_fw_topmenu_items{
				width: 280px;
				display: inline;
				float: left;
				position: fixed;
				padding:8px 5px 0 50px;
				ul{
					display:inline;
					padding:0;
					margin:0;
					list-style-type: none;
					li{
						display: -webkit-inline-box;
						display: -moz-inline-box;
						display: inline-block;
						padding:2px;
						&:hover {
							-webkit-box-shadow: none;
							-moz-box-shadow: none;
							box-shadow: none;
						}
					}
					a#topmenu_logout{
						&:before {
							content: "";
							background-image: url(../images/logout.png);
							background-repeat: no-repeat;
							width: 32px;
							height: 32px;
							background-size: 24px 24px;
							display: inline-block;
							background-position: center;
						}
					}
					a#topmenu_home:before {
						content: " ";
						background-image: url(../images/topmenu_items/mobile/home.png);
						background-repeat: no-repeat;
						width: 32px;
						height: 32px;
						background-size: 24px 24px;
						/*display:inline-block;*/
						display:none;
					}
					a#topmenu_prefs {
						&:before {
							content: "";
							background-image: url(../images/topmenu_items/mobile/setup.png);
							background-repeat: no-repeat;
							width: 32px;
							height: 32px;
							background-size: 24px 24px;
							display: inline-block;
							background-position: center;
						}
					}

					a#topmenu_acl:before {
						content: "";
						background-repeat: no-repeat;
						width: 32px;
						height: 32px;
						background-size: 24px 24px;
						background-image: url(../images/topmenu_items/mobile/access.png);
						display: inline-block;
						background-position: center;
					}

					a#topmenu_cats:before {
						background-image: url(../images/topmenu_items/mobile/category.png);
						content: "";
						background-repeat: no-repeat;
						width: 32px;
						height: 32px;
						background-size: 24px 24px;
						display: inline-block;
						background-position: center;
					}
					a#topmenu_password:before {
						background-image: url(../images/topmenu_items/mobile/password.png);
						content: "";
						background-repeat: no-repeat;
						width: 32px;
						height: 32px;
						background-size: 24px 24px;
						display: inline-block;
						background-position: center;
					}

					a#topmenu_manual:before {
						background-image: url(../images/topmenu_items/mobile/help.png);
						content: "";
						background-repeat: no-repeat;
						width: 32px;
						height: 32px;
						background-size: 24px 24px;
						display: inline-block;
					}

					a#topmenu_search{
						&:before {
							background-image: url(../images/topmenu_items/mobile/search.png);
							content: "";
							background-repeat: no-repeat;
							width: 32px;
							height: 32px;
							background-size: 24px 24px;
							display: inline-block;
							background-position: center;
						}
					}
				}
			}
			#egw_fw_userinfo {
				position: fixed;
				top:50px;
				margin-left:8px;
				width:300px;
				height:50px;
				z-index:1000;
				text-align : left;
				span.avatar {
					display: inline-block;
					float:left;
				}
				span.user {
					display: inline-block;
					height: 50px;
					margin-left: 8px;
					font-size: 12pt;
					overflow: hidden;
					max-width: 225px;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-top:17px;
				}
			}
			
		}//End of toolbar

		// ######################tabs header ##########################
		// #      #      #     #     #     #     #     #     #     ####
		// #      #      #     #     #     #     #     #     #     ####
		// #  tab header #     #     #     #     #     #     #     ####
		// #      #      #     #     #     #     #     #     #     ####
		// ############################################################
		// Div Tabs

		.egw_fw_ui_tabs_header {
			margin: 0px 0 0 0;
			padding: 1px 1px 0px 0px;
			background-position: bottom;
			background-repeat: repeat-x;
			background-color: transparent;
			height: 34px;

				h1 {
					display: inline;
					width: 100%;
					text-align: center;
					-webkit-margin-before: 0;
					-webkit-margin-after: 0;
				}

				img{
					text-align:center;
					float: none;
					margin: 0 auto;
					.dimension_width_height_l;
				}

			// Tab
			// ##########
			// #        #
			// #        #
			// ##########
			// Inactive



			.egw_fw_ui_tab_header {
				padding-left: 0;
				position: relative;
				background: transparent;
				display: inline-block;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				margin: 0px 5px 0px 0px;
				padding: 2px 5px 7px 2px;
				cursor: pointer;
				background-repeat:repeat-x;
				height: 38px;
				width: 97%;
				&:hover {
					background-color: none !important;
				 }
				 &:active {
					-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
					-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
					box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
				 }
				// APP Name
				h1 {
					.fontsize_xl;
					line-height: 1em;
					margin:0 15px 2px 2px;
					vertical-align: super;
					padding-left: 25px;
				}

				// Images
				img.egw_fw_ui_tab_icon {
					display: inline-block;
					.dimension_width_height_l;
					margin: 5px 1px 0 1em;

					.img_filter_gray;
				}

				// FOR SVG IMG
				object {
				.dimension_width_height_l;
				margin: 8px 1px 0 5px;
				.border_radius(5px,0, 0, 5px);


				}


			}

			// ##########
			// #        #
			// #        #
			// ##########
			/*Active Tabs*/
			.egw_fw_ui_tab_header_active {
				border-width: 1px 1px 0px 1px !important;
				.background_color_egw_light;
				&:hover {.background_color_egw_light ;}


				// Active image
				img.egw_fw_ui_tab_icon {
					display: inline-block;
					.dimension_width_height_l;
					-webkit-filter: contrast(2);
					-ms-filter:contrast(2);
					-moz-filter:contrast(2);
					-o-filter:contrast(2);
				}
				 /*Active object*/
				 object {
				.dimension_width_height_l;
				margin: 0px 1px 0 5px;
				.border_radius(2px,0, 0, 2px);

				background-color: @gray_30;
				}
			}
		}
		//###################
		//#					#
		//#		SIDEBAR		#
		//#					#
		//###################
		#egw_fw_sidebar{
			top: 110px;
			bottom: 5px;
			//SIDE AREA
			#egw_fw_sidemenu {
				position: absolute;
				top: 0px;
				bottom: 4px;
				left: 0;
				right: 0;
				overflow-y: auto;
				-webkit-overflow-scrolling:touch;
				z-index: 0;
				padding-top: 0.6em;
				font-size: 0.9em;
				.egw_fw_ui_sidemenu_entry_apps {
					.egw_fw_ui_sidemenu_entry_header
					{
						margin:0px 5px 0px 2px;
						padding: 4px 10px 0 16px;
						overflow: visible;
						height:38px;
						border:none;
						img{
							height:32px !important;
							width:32px !important;
						}
						display: block;

						&:hover {
							.background_color_15_gray;
							.rounded(0px);
						}

						&:active {.box_shadow_standard_light_inset;}

						h1 {
							margin: 0 0 10px 0;
							padding-top: 0.31em;
							padding-left: 3em;
							.color_40_gray;
							.fontsize_xl;
							line-height: 17px;
						}

						object {background-color: @gray_0; .dimension_width_height_m;}
					}
				}

				.egw_fw_ui_sidemenu_entry_header_active {
					//
					cursor: pointer;
					background-image: url("../images/clear.png");
					background-position: 95% -3000px;
					background-repeat: no-repeat;

					.background_color_10_gray;
					.bordered (@gray_30, @gray_30, @gray_30, @gray_30);

					margin: 0 0 0 0;
					border-bottom: none;
					height: 33px;


					img {padding-left: 9px; padding-top: 6px; height: 18px;}

					h1 {text-transform: uppercase; font-size: 12px; .color_100_gray; padding-top: 4px;padding-left:32px;}

					&:hover {.box_shadow_standard_light_hover; .border_radius ( 5px, 0px, 0px, 27px );}
					&:active {.box_shadow_standard_light_active; .border_radius ( 5px, 0px, 0px, 27px );}

					&:focus {
						background-image: url("../images/ajax-loader.gif");
						background-repeat: no-repeat;
						background-position: 90% 50%;
						.Complete_Button_active;

						.background_color_25_gray;
					}

					object {
						margin-left: 14px;
						margin-top: 8px;
						.rounded (3px);
						.dimension_width_height_s;
					}

					.egw_fw_ui_ajaxloader {margin-top: -26px;}

				}

				.egw_fw_ui_sidemenu_entry_content {
					display: block;
					background-image: none;
					.border_radius (0, 0, 0px, 0);
					border-color: @gray_30;
					border-style: solid;
					border-width: 0px;
					margin: 0 0 2em 0;


					// rounded Corner on bottom
					&:nth-last-of-type(-n+3)   {
						border-bottom: 1px solid @gray_30;
					}

				   & > div {background: none !important;}

					//###################################################
					// has round corners
					div.egw_fw_ui_category:nth-last-of-type(-n+3) {
						border-bottom: 1px solid @gray_30;
					}

					//###################################################
					// Normal
					.egw_fw_ui_category {
						margin: 4px 5px 5px 5px;
						padding: 0.5em 1em 0.5em 0;
						cursor: pointer;
						//																												border-top: 7px solid;
						border-color: @gray_30;
						background-color: @gray_10;

						.border_radius(3px,3px,3px,3px);

						h1 {
							margin: 5px 0px 3px 5px;
							padding: 0px 0px 0px 15px;
							line-height: 1em;
							.fontsize_l;
							background-image:url(../images/arrow_left.png);
							background-repeat:no-repeat;
							background-position:left center;
						}

						div.egw_fw_ui_category:nth-last-of-type(-n+3) {
							img.egw_fw_ui_sidemenu_listitem_icon {
							 display: block;
							 }
						}
					}

					div.egw_fw_ui_category_content {
						border-radius: 0;
						font-size: 12px;
						.sidebox-favorites {
							ul.favorites {
								li.ui-menu-item {
									min-height: 18px;
									padding-top:9px;
									text-overflow: ellipsis;
									white-space: nowrap;
									max-width: 100%;
									overflow-x: hidden;
									a{
										div.sideboxstar{padding-right: 13px;}
										div.ui-icon-heart{padding-right:10px;}
										img{padding-right:5px;}
									}
								}
							}
						} 
					}
					//#################################
					// Hover
					// on Mouse over change color
					.egw_fw_ui_category:hover {
						.background_color_40_gray;
						padding: 0.5em 1em 0.5em 0;
					}



					/*######################*/
					// Active State
					// change Background color in Blue
					// See all Elements
					.egw_fw_ui_category_active {
						border-bottom-width: 0px;
						margin-top: 4px;

						background-color: @egw_color_2_a;

						.color_5_gray;
						.border_radius(3px,3px,3px,3px) !important;

						h1 {
							background-image:url(../images/arrow_down.png);
							line-height: 1em;
							font-size: 12px;

								a {
								color: #FFF;


								img {.dimension_width_height_s;}

								&:hover {
										padding: 5px 30px 5px 0px;
										width: 200px;
										.background_color_10_gray;
										.color_50_gray;
										.Complete_Button_hover;
									}
								}

							 }

						&:hover {background-color: @egw_color_2_d; .transition (0.2s, ease-out);}
					}
				}

				.egw_fw_ui_sidemenu_entry_content_bottom {
					border-width: 0px 1px 1px 1px;
				}
				.egw_fw_ui_sidemenu_entry_header_bottom {
					border-width: 0px;
					border-color: @gray_0;
				}

				.egw_fw_ui_sidemenu_entry_icon {
					display: inline-block;
					.dimension_height_m;

					padding-left: 0;
					padding-right: 0px;
					float: left;

					/*filter grey*/
					.img_filter_gray;
				}
			} // SIDEMENU End
		}//End of Sidebar
		//ToggleClass

		.sidebar-toggle{
			#egw_fw_top_toolbar div#egw_fw_menu{
				background-image:  url(../images/topmenu_items/mobile/menu.png);
			}
			#egw_fw_top_toolbar #egw_fw_userinfo{
				display: none;
			}
			#egw_fw_sidebar{
				top: 70px;
				#egw_fw_sidemenu{
					width:82px !important;
					.egw_fw_ui_sidemenu_entry_content{
						display:none !important;
					}
					.egw_fw_ui_sidemenu_entry_header_active {
						&:hover {
							border-radius:0;
							background-image: url("../images/ajax-loader.gif");
						}
						img{
							padding:0;
						}
					}
					.egw_fw_ui_sidemenu_entry_header{
						margin:0px 5px 0px 2px;
						padding: 4px 10px 0 16px;
						overflow: visible;
						height:38px;
						width:50px;
						border:none;
						img{
							height:32px !important;
							width:32px !important;
						}
						h1{
							display:none;
						}
					}
				}
			}
			#egw_fw_topmenu_items {
				display:none !important;
			}
		}

		//###################################
		//#									#
		//#			FOOTER					#
		//#									#
		//###################################
		#egw_fw_footer {
			display:none;
		}

		//###################################
		//#									#
		//#			APP HEADER NAVIGATOR	#
		//#									#
		//###################################
		.egw_fw_ui_app_header_container {
			display:none;
		}

		.egw_fw_content_browser_div {
			padding: 0;
			background-color: white;
		}

		//###################################
		//#									#
		//#			POPUP FRAME				#
		//#									#
		//###################################
		.egw_fw_mobile_popup_container{
			width:100%;
			height:100%;
			position:fixed;
			display: none;
			z-index: 999;
			-webkit-overflow-scrolling: touch;
			overflow-y:scroll;
			.egw_fw_mobile_popupFrame {
				width: 100%;
				height: 100%;
				visibility: hidden;
				display: block;
				background: white;
			}

		}
		//###################################
		//#									#
		//#		popup dialog headbar		#
		//#									#
		//###################################
		.dialogHeadbar {
			height: 50px;
			box-shadow: 0px 4px 5px 2px silver;
			position: fixed;
			width: 100%;
			background: #0c5da5;
			top:0;
			right:0;
			z-index:1;
			.et2_button_with_image, .et2_button_text {
				height: 46px;
				margin: 1px;
				margin-left: 3px;
			}
			td {
				margin-left:70px;
				display: block;
			}
		}

		//###################################
		//#									#
		//#		Mail App specific style		#
		//#									#
		//###################################
		#mail-display {
			min-height: initial !important;
			.mailDisplayContainer {
				top:140px;
			}
		}
	}
}
@media @handheld
{
	#egw_fw_print {
		display:none;
	}
	div#loginMainDiv{
			.mob-bg-login;
			width:101%;
			#divAppIconBar {
				background:white;
				#divLogo img[src$="svg"] {
					width:40%;
					margin-top: 5px;
					background:white;
				}
			}
			div#centerBox{
				position:absolute;
				margin: 0;
				bottom:0;
				width: 100%;
				padding: 0;
				-webkit-border-top-right-radius: 0;
				-webkit-border-bottom-right-radius:0;
				-webkit-border-bottom-left-radius: 0;
				-webkit-border-top-left-radius: 0;
				-moz-border-radius-topright: 0;
				-moz-border-radius-bottomright: 0;
				-moz-border-radius-bottomleft: 0;
				-moz-border-radius-topleft: 0;
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
				border-bottom-left-radius: 0;
				border-top-left-radius: 0;
				background-color: transparent;
				background-image: none;
				background-repeat: no-repeat;
				border:none;
				border-radius: 0;
				form {
					margin-top: 3em;
					
					table.divLoginbox {
						width:100%;
						float:left;
						tr.hiddenCredential {
							display:none;
						}
						input[type="submit"] {
							font-size: large;

						}
						input, select {
							width:100%;
							height:50px;
						}
						td {
							font-size: large;
							padding:0.8%;
							&.registration{
								font-size: 180%;
							}
							select {
								background-size: 48px auto;
							}
						}
					}
				}
				#loginCdMessage {
					.mob-fontsize-n !important;
					.mob-color-login-message;
					padding:0;
					border:0;
					background: none;
				}
			}
		}
}
@media @handheld-portrait
{
	body{
		div#loginMainDiv{
			#divAppIconBar {
				#divLogo img[src$="svg"] {
					width:70%;
				}
			}
			div#centerBox{
				form {
					table.divLoginbox {
						width:100%;
						float:left;
						input[type="submit"] {
							font-size: large;

						}
						input, select {
							width:100%;
							height:50px;
						}
						td {
							font-size: large;
							padding:0.8%;
							&.registration {
								font-size: 250%;
							}
						}
					}
				}
				#loginCdMessage {
					font-size:large;
					padding:0;
				}
			}
		}
	}
}

@media @smartphones {
	body{
		#egw_fw_basecontainer.sidebar-toggle 
		{
			div#egw_fw_top_toolbar {
				z-index: 0;
			}
			#egw_fw_main {
				margin-left:0 !important ;
				#egw_fw_tabs {
					-webkit-filter: none;
					-moz-filter: none;
					-ms-filter: none;
					-o-filter: none;
					filter: none;
				}
			}
			
		}
		#egw_fw_basecontainer {
			
			#egw_fw_top_toolbar {
				z-index: 998;
				width: 300px;
				background: white;
				div#egw_fw_topmenu_items{
					width: 245px;
					display: inline;
					float: left;
					position: fixed;
					padding-left: 50px;
					padding-right:5px;
					background:white;
					height:100%;
					z-index:998;
					border-right:2px solid silver;
				}
			}
			#egw_fw_sidebar {
				z-index: 999;
				background:white;
			}
			#egw_fw_main {
				#egw_fw_tabs {
					-webkit-filter: brightness(20%);
					-moz-filter: brightness(20%);
					-ms-filter: brightness(20%);
					-o-filter: brightness(20%);
					filter: brightness(20%);
				}
			}
		}
	}
}

/*mobile etemplate2*/

/*mobile etemplate2*/
@mobile-elem-height: 50px;
@mobile-button-width: 50px;
@mobile-nm-search-bg: #0c5da5;
@media only screen and (min-width: 320px)  and (max-width: 1290px) {
	html *{touch-action:auto;}
	body
	{
		#egw_fw_basecontainer.sidebar-toggle {
			#egw_fw_top_toolbar {
				div#egw_fw_menu {
					background-image: url(../images/topmenu_items/mobile/menu_white.png);
					width: 50px;
					height: 50px;
					background-color: transparent;
					background-position: 15px center;
					margin-left:8px;
				}
			}
		}
		#egw_fw_basecontainer {
			.egw_fw_ui_tabs_header .egw_fw_ui_tab_header img.egw_fw_ui_tab_icon {
				width:18px;
				height:18px;
			}
			#egw_fw_top_toolbar {
				div#egw_fw_topmenu_items {
					padding-top: 8px;
				}
			}
		}
		
		//###################
		//#					#
		//#	 CONTEXT MENU   #
		//#					#
		//###################
		div.dhtmlxMenu_egw_SubLevelArea_Polygon
		{
			font-size:medium;
			top:0px !important;
			right:0px;
			left:auto !important;
			background-color: white;
			width: 100%;
			table.dhtmlxMebu_SubLevelArea_Tbl::before{
				content: "\2190";
				height: 46px;
				padding-left: 8px;
				font-size: 24pt;
			}
			table.dhtmlxMebu_SubLevelArea_Tbl{
				width:100%;
				tr.sub_item_selected {height:46px;}
				tr.sub_item {width:100%;height:46px !important;}
				td.sub_item_hk {width:100%;}
			} 
		}
		div#egw_message {
			bottom: 0px;
			top: auto;
			left: 0px;
			right: 0px !important;
			max-width: 100%;
			border-radius: 0;
		}
		div.ui-dialog {
			width:100% !important;
			height:100% !important;
			left:0 !important;
			top:0 !important;
		}
		div.ui-dialog-content {
			height:87% !important;
			margin-top: 60px !important;
			padding:0 !important;
		}
		.ui-dialog .ui-dialog-buttonpane {
			position: fixed !important;
			top:0 !important;
			left:0 !important;
			display:block !important;
			padding:0 !important;
			margin: 0 !important;
			height: 50px;
			box-shadow: 0px 4px 5px 2px silver;
			width: 100%;
			z-index:1;
			.ui-dialog-buttonset {float:right;}
		}
		.ui-dialog-titlebar {
			display: none;
		}
		button.plus_button {
			position: absolute !important;
			right: 15px;
			bottom: 15px;
			border-radius: 50%;
			width: 60px;
			height: 60px;
			background-position: center;
			z-index: 100;
			background-color: #0c5da5;
			border: none;
			box-shadow: 0px 1px 5px 3px silver;
			background-image: none !important;
			margin: 0;
			padding: 0;
			&:after {
				content: '+';
				font-weight: bold;
				font-size: 34pt;
				color: #fafafa;
			}
			&:hover, &:active {
				background-color: #0c5da5;
			}
		}
		.et2_nextmatch {
			.nextmatch_header_row, .nextmatch_header 
			{
				background-color: background-color-egw-dark;

				select {
					display: block;
					width: 100%;
					height: @mobile-elem-height;
					.mob-fontsize-l;
					background-size: 32px;
					border-left: none;
					border-right: none;
					border-radius: 0;
					border-bottom: none;
					padding-left:10px;
					max-width:none;
				}
				label {
					display:block;
					width: 100%;
					float: left;
					.mob-fontsize-l;
					select {
						display: inline-block;
						float: right;
						margin: 0;
						height: @mobile-elem-height;
						.mob-fontsize-l;
					}
				}
			}
			.nextmatch_header.nm_header_hide {
				display:none !important;
			}
			.nextmatch_header {
				background-color: white;
				padding:0;
				display:inline-block;
				width:100%;
				border-bottom: 1px solid silver;
				border-top: none;
				box-shadow: 0px 1px 1px 1px silver;
				z-index: 1;
				position: relative;
				div.et2_box_widget {
					display:block;
					height:@mobile-elem-height;
				}
				.et2_button {
					width:@mobile-button-width;
					height: @mobile-elem-height;
				}

			}
			.egwGridView_outer {
				thead {
					tr {
						visibility:hidden;
						th{

						}
					}
				}
			}
			.search.searchOn {
				input {
					border:none;
					background: white;
					outline: none;
					position: absolute;
					left: 110px;
					width:80%;
					height:@mobile-elem-height;
				}
				button[id$="search_button"] {
					background-image: none !important;
					&:after{
						content:"\2613";
						font-weight: bold;
						font-size:18pt;
					}
				}
			}
			.search {
				background: @mobile-nm-search-bg;
				margin-top: 0;
				padding-left: 60px;
				box-shadow: 0px 4px 5px 2px silver;
				position: relative;
				z-index: 1;
				button {
					height: @mobile-elem-height;
					width: @mobile-button-width;
					background-repeat: no-repeat;
					font-size:large;
					background-color: @mobile-nm-search-bg;
					border: none;
					margin:0;
					color: white;
					background-size: 18px 18px;
					box-shadow: none;
					outline: none;
				}
				
				button.nm_toggle_header {
					background-position: center;
					background-repeat: no-repeat;
					margin-right:5px;
					border-left:1px solid silver;
					border:0;
					color: white;
					width:50px;
					height:50px;
					display:block;
					float:right;
					&:focus{
						outline:none;
					}
					&:after{
						font-size: 18pt;
						content:"\2261";
						
					}

				}
				button.nm_action_header {
					background-position: center;
					background-repeat: no-repeat;
					margin-right:5px;
					border-left:1px solid silver;
					border:0;
					color: white;
					width:50px;
					height:50px;
					display:block;
					float:right;
					&:focus{
						outline:none;
					}
					&:after{
						font-size:18pt;
						content:"\205D";
						font-weight: bold;
					}
				}
				div.nm_favorites_div {
					background-position: center;
					background-repeat: no-repeat;
					margin-right:5px;
					border-left:1px solid silver;
					border:0;
					color: white;
					width:50px;
					height:50px;
					display:block;
					float:right;
					&:focus{
						outline:none;
					}
					div[name="favorite"] {
						position:relative !important;
						top:0 !important;
						outline:none;
						.et2_dropdown {
							button:first-child {
								display: none;
							}
							button:nth-child(2) {
								div:first-child {
									display: none;
								}
								&:after{
									font-size: 17pt;
									content: "\2606";
									font-weight: bold;
									vertical-align: super;
								}
							}
						}
						ul.favorites {
							width:160px;
							box-shadow: 0px 4px 5px 2px silver;
							border: 1px solid silver;
							li.ui-menu-item {
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
								border-bottom: 1px solid silver;
								
								a {
									width: 100%;
									line-height: 30px;
									input{
										display: none;
									}
									div.ui-icon-trash {
										display: block;
									}
								}	
							}
						}
					}
				}
				button.nm_toggle_header_on {
					&:after {
						content:"\2613";
					}
				}
				input[type="search"] {
					width: 50px;
					height: @mobile-elem-height;
					font-size: large;
					margin:0;
					border:0;
					opacity: 0;
					background-color:@mobile-nm-search-bg;
					color: black;
					position: absolute;
					&:active{
						border:none;
						background: @mobile-nm-search-bg;
					}
					&:focus {
						border:none;
						background:white;
						outline: none;
						opacity: 1;
						left:110px;
						position: absolute;
						width:100%;
						height:@mobile-elem-height;
						z-index: 2;
					}
				}
				div.nm_appname_header {
					width: 100%;
					position: absolute;
					top: 0;
					height: 50px;
					left:0;
					right:0;
					bottom:0;
					color: white;
					font-size: 14pt;
					font-weight: bold;
					opacity:0.2;
					text-align: center;
					display: inline;
					padding-top: 13px;
					z-index:-1;
				}
			}
			.header_row_right {
				div[id$=favorite_wrapper] {
					margin:0;
					top:0 !important;
					height:@mobile-elem-height;
				}
				height: @mobile-elem-height;
				width: 100%;
				padding:0;
				* {
					display:inline-block;
					float:left;
				}
				.et2_dropdown {
					button {
						height:@mobile-elem-height;
						width: @mobile-button-width;
					}
				}
			}
			.header_count {
				margin:0;
				height:@mobile-elem-height;
				font-size: large;
				margin-top: -3px;
				margin-right: 0px;
				float:right;
				border: none;
				border-radius:0;
				border-left:1px solid rgba(0, 0, 0, 0.15);
			}
			table.egwGridView_grid {
				tr {
					div.h2_hbox {
						padding-bottom: 4px;
					}
					img {
						height: 12px;
					}
				}
				tbody {
					tr.focused{background-image: none;}
					tr.selected {
						background: #696969 !important;
						* {color:white !important;}
						td:last-child:before {
							content: " ";
							position: absolute;
							background: rgb(255, 255, 255);
							top: 0px;
							left: 0px;
							bottom: 0px;
							right: 0;
							color: white;
							background-image: url(../images/agt_action_success.png);
							background-repeat: no-repeat;
							background-position: center;
							height: auto;
						}
					}
					tr {
						&:hover {
							background: transparent;
						}
						td {
							padding: 10px 0px 10px 0px;
							.et2_label, .et2_button, .et2_link, .et2_textbox, .et2_textbox_ro,
							.et2_email, img, span{
								padding: 8px 0px 0px 0px;
							}
							time.et2_label, span.mobile_cat_col {
								padding: 0;
							}
							div.et2_progress {
								margin:0;
							}
						}
					}
					tr.swipe{
						background-color:rgba(255, 194, 0, 1);
						border:none;

					}
				}
			}
			.egwGridView_outer {
				width: 100%;
				thead{
					max-height: 1px;
					display: none;
				}
				thead tr th {
					font-size: large;
				}
				td {
					img{
						border:none;
					}
				}
			}
		}

		.dtree {
			img {
				width:24px !important;
				height:24px !important;
			}
			table , tr, td
			{
				padding: 2px;
				padding-left: 0;
				padding-right: 0px;
			}
			.containerTableStyle {
				overflow: auto;			
			}
		}
		.et2_details {
			.et2_details_toggle {
				&:after{
					width:25px;
					height: 25px;
					font-size:	18pt;
					text-align: center;
				}
			}
		}
		input {
			border:none;
			border-bottom: 1px solid #e6e6e6;
		}
		#popupMainDiv {
			* {
				.mob-fontsize-n;
				font-family: Verdana, "Lucida Grande", Helvetica, Sans-Serif;
			}
			.et2_textbox, .et2_date, .et2_dropdown, .et2_link, .et2_label, input{
				height:25px;
			}
			.et2_button_with_image, .et2_button_text {
				height: 46px;
				margin: 1px;
				margin-left: 3px;
			}
			form {
				margin-top: 50px;
			}
			.et2_details.et2_details_expanded {
				background-color: transparent;
				.et2_details_title {
					display: inline-block;
					background-color: #F0F0F0;
					width:100%;
					padding-top: 6px;
				}
				.et2_details_toggle {
					
				}
			}
			.et2_details {
				position: relative;
				background-color: #F0F0F0;
				.et2_details_toggle {
					position: absolute;
					right: 2px;
					top:0px;
					margin: 0px;
				}
				.et2_details_title {
					padding-top: 6px;
					margin-top:0;
				}
			}
		}
		.rowHeader {
			.mob-fontsize-l;
		}
		.et2_fullWidth {
			input[type="radio"] {
				width: auto;
			}
		}
		
		//###########################################
		//#											#
		//#	 et2_toolbar styles used in headbar		#
		//#											#
		//###########################################
		
		div.et2_toolbar.et2_head_toolbar {
				background-color: transparent;
				padding: 1px 5px 5px 10px !important;
				button {
					width:46px;
					height:46px;
					background-size: 18px 18px;
					touch-action: auto;
				}
				div.ui-toolbar-menulist
				{
					min-width: 200px;
					height: 322px !important;
					overflow-y: auto !important;
				}
				button.et2_toolbar_hasCaption {
					width:auto;
				}
				div.et2_toolbar_actionlist {
					margin-left: 50px;
				}
				div.et2_toolbar_more {

					h.ui-state-hover {
						background:none;
					}
					h.ui-toolbar-menulistHeader {
						color:transparent;
						border: none;
						height: 46px;
						width: 35px;
						padding: 0 !important;
						margin-right: 15px;
						margin-top: -7px;
						&:hover {

						}
						&:after {
							font-size:18pt;
							content:"\205D";
							font-weight: bold;
							color:white;
						}
					}
					span {
						display: none;
					}
				}
			}
			//###########################################
			//#											#
			//#		et2_tabbox styles					#
			//#											#
			//###########################################
			.et2_tabbox.vertical {
				.et2_tabflag {
					border:none;
					div.et2_tabtitle {
						background-color: #f0f0f0;
						&:before {
							padding: 0;
							width:30px;
							height:30px;
							text-align: center;
							font-size: 18pt;
						}
					}
				}
			}
			.et2_link_to {
				div {
					height:40px;
					padding-bottom: 3px;
					width: 99% !important;
				}
				.et2_file {
					margin: 0;
					padding:0;
					.et2_file_span, .et2_file_spanHover, .et2_file_upload {
						height:25px !important;
					}
				}
			}
			/*Chosen*/
			.chzn-container {
				ul.chzn-choices {
					background: none;
					border: none;
					border-bottom: 1px solid @gray_10;
					
				}

			}
			.chzn-container-multi {
				.chzn-choices {
					li.search-field {
						.default {
							color:#666;
						}
					}
				}
			}
			.et2_taglist {
				.ms-ctn {
					border: none;
					border-bottom: 1px solid @gray_10;
					border-radius: 0;
					margin-right:5px;
				}
				.ms-sel-ctn	{
					background: white;
				}
			}
			
			/* View mode styles*/
			.et2_mobile_view {
				display:block;
				
				.et2_mobile-view-container {
					padding:0 14px 0 7px;
					/*Disable et2_link_to as it does not make sense in view mode*/
					div.et2_link_to {display: none;}
				}
				table.et2_grid{
					tr {
						td {
							padding: 10px 5px 10px 0;
						}
					}
				}
			}
			.mobile-view-editBtn {
				position: fixed;
				top:2px;
				left: 70px;
				width: 50px;
				height: 50px;
				float:left;
				z-index:104;
				font-size:18pt !important;
				color: white;
				&:before {
					content: "";
					font-size: 24pt;
					color: white;
					padding-left: 5px;
					font-weight: bold;
				}
				display: block;
			}
	}
}