egroupware_official/pixelegg/mobile/fw_mobile.less

/**
 * EGroupware: Stylite Pixelegg template - mobile fw
 *
 * 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
 */
@import "../less/darkmode.less";
@import "../css/mobile.less";
@import (reference) "../less/def_mobile.less";
@import "../less/app_colors.less";
/********************************/
/*								*/
/*		MEDIA DEFINITION		*/
/*								*/
/********************************/
/*Tablets Max-Width*/
@tablet-max: 1024px;
/*Smartphones Max-Width*/
@smartphone-max: 736px;
/*Smartphones Min-Width*/
@smartphone-min: 300px;
@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-landscape: ~"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})";
/*Smartphones portrait*/
@smartphones-portrait: ~"only screen and (max-device-width: @{smartphone-max}) and (min-width: @{smartphone-min}) and (oriantation:portrait)";
/*Smartphones landscape*/
@smartphones-landscape: ~"only screen and (max-device-width: @{smartphone-max}) and (min-width: @{smartphone-min}) and (oriantation:landscape)";
.white-svg {
	-webkit-filter: brightness(0) invert(1) !important;
	filter: brightness(0) invert(1) !important;
	background-color: transparent !important;
	background-size: 24px 24px !important;
	border:none;
}
@media @tablet-portrait, @tablet-landscape {
	body {
		div#loginMainDiv {
			.egw_message_wrapper {
				position: relative;
			}
		}
	}
}
@media @handheld
{
	#egw_fw_print {
		display:none;
	}
	div#loginMainDiv{
			.mob-bg-login;
			overflow:auto;
			#divAppIconBar {
				max-height:35%;
				height:20%;
				#divLogo {
					.login_logo_container {
						width:200px;
						height:100px;
						max-height: 100px;
						max-width:200px;
						margin: 0 auto;
					}
				}
			}
			div#centerBox{
				position: relative;
				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%;
						tr.hiddenCredential {
							display:none;
						}
						input[type="submit"] {
							font-size: large;
							width:100%;
							padding-left: 0px;
							border:none;

						}
						input, select {
							width:~"calc(100% - 14px)";
						}
						select {width:100%;}
						td {
							font-size: large;
							padding:0.8%;
							span.field_icons.remember_me {padding-left: 40px;}
						}
					}
				}
				#loginCdMessage {
					margin: 8px;
					.mob-fontsize-l !important;
					padding:0;
					border:0;
					background: none;
					font-weight: normal !important;
					word-break: break-all;
				}
			}
			div#login_footer {background-color: transparent}
		}
}

@media @handheld-portrait
{
	body{
		div#loginMainDiv{
			div#centerBox{
				position: relative;
				form {
					table.divLoginbox {
						width:100%;
						input[type="submit"] {
							font-size: large;
							width:100%;
						}
						input, select {
							width:~"calc(100% - 27px)";
						}
						select {
							width:100%;
						}
						td {
							font-size: large;
							padding:0.8%;
						}
					}
				}
				#loginCdMessage {
					.mob-fontsize-l !important;
					padding:0;
				}
			}
		}
	}
}

@media @smartphones {
	body{
		#egw_fw_basecontainer.sidebar-toggle
		{
			#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_sidebar {
			top:50px;
		}
		#egw_fw_basecontainer {

			#egw_fw_top_toolbar {
				z-index: 998;
				width: 300px;
				background: white;
				div#egw_fw_topmenu_items{
					height:100%;
					z-index:998;
				}
			}
			#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%);
				}
			}
		}
		.ui-dialog .ui-dialog-buttonpane {
			button[class*="et2_button_cancel"],
			button[class="et2_button_delete"],
			button[class="et2_button_save"] {
				.white-svg;
				padding-left:0px !important;
				width:50px;
				span{display:none;}
			}
		}
	}
}

@media (max-device-width: 400px) {
	.et2_toolbar .et2_toolbar_actionlist > span > * {
		margin-right: 2px;
	}
	
}@media (max-device-width: 310px) {
	.et2_toolbar .et2_toolbar_actionlist > span > * {
		margin-right: 0px;
	}

}

/*mobile etemplate2*/
@mobile-elem-height: 50px;
@mobile-button-width: 50px;
@mobile-nm-search-bg: #0c5da5;
@media all {
	html *{touch-action:auto;-webkit-overflow-scrolling: touch;}
	body
	{
		.egw_fw_mobile_popup_container{
			background: transparent;
			.egw_fw_mobile_popupFrame {
				width: 100%;
				height: 100%;
				margin: 0;
				border: none;
			}

		}
		/* Stop pull-to-refresh on chrome*/
		overflow-y: hidden;

		button[id*="save"]:hover,
		button[id*="apply"]:hover,
		button[id*="copy"]:hover,
		button[id*="edit_button[edit]"]:hover,
		button.et2_button:hover {-webkit-box-shadow: none !important; box-shadow:none !important;}

		/*Notification popup*/
		#egwpopup {
			width: 100% !important;
			height: 100% !important;
			top: 0 !important;
			bottom: 0 !important;
			left: 0 !important;
			right: 0 !important;
			border: none;
			box-shadow: none;
			padding: 0;
			border-radius: 0;
			position:fixed;
			z-index: 10 !important;
			#egwpopup_list {
				.egwpopup_message.egwpopup_expanded {
					position: fixed;
					top: 0;
					height: 100%;
					left: 0;
					width: ~"calc(100% - 20px)";
					overflow: auto;
					margin: 0;
				}
			}
			#egwpopup_header {
				text-align: center;
				height: 50px;
				z-index: 1;
				background-color: #5180AC;
				line-height: 50px;
				width:100%;
				.mob-fontsize-n;
				color:white;
				padding: 0px;
				span {
					.white-svg;
				}
				.button_right_toggle {
					background-image: url(../../node_modules/bootstrap-icons/icons/x-lg.svg);
					background-repeat: no-repeat;
					background-position: center;
					height: 50px;
					width: 50px;
					cursor: pointer;
					position: relative;
					float: left;
					margin: 0;
					&:before {display: none;}
					&:after {display: none;}
				}
				.egwpopup_deleteall {
					width: 30px;
					height: 30px;
					background-position: center;
					position: relative;
					margin-top: 10px;
					margin-right: 30px;
					opacity: 1;
				}
				.egwpopup_seenall {
					width: 20px;
					height: 20px;
					padding: 0px;
					margin-right: 20px;
					margin-top: 15px;
					opacity: 1;
				}
			}
			#egwpopup_footer {
				input {
					float:right;
					margin-right: 10px;
					margin-top:10px;
				}
				position: absolute;
				top: 0px;
				right: 10px;
				height: 50px;
			}
		}
		div.egw_fw_mobile_popup_appHeader {
			display: none !important;
		}
		span.egw_fw_mobile_popup_close {
			top:0;
			background-color: white;
			width:100%;
			background-position: center;
			left:0;
		}
		span.egw_fw_mobile_popup_close.loaded {
			background-image: url(../../node_modules/bootstrap-icons/icons/arrow-left.svg);
			.white-svg;
			top: 0;
			background-position: center;
			padding: 0;
			width:50px;
			left:10px;
			float:none;
		}
		#egw_fw_basecontainer.sidebar-toggle {
			#egw_fw_top_toolbar {
				#egwpopup_fw_notifications, #egw_fw_topmenu_info_items {display: none !important;}
				div#egw_fw_menu {
					background-image: url(../../node_modules/bootstrap-icons/icons/list.svg);
					width: 50px;
					height: 50px;
					background-color: transparent;
					background-position: 15px center;
					margin-left:8px;
				}
			}
		}
		#egw_fw_basecontainer {
			#egw_fw_main {
				margin-top:0px;
				.egw_fw_ui_tab_content {margin-top: 0px;}
			}

			.egw_fw_ui_tabs_header .egw_fw_ui_tab_header img.egw_fw_ui_tab_icon {
				width:18px;
				height:18px;
			}
			#egw_fw_top_toolbar {
				position:absolute;
				width:300px;
				.egw_fw_logout {
					margin-left: 30px;
				}
				#egw_fw_userinfo {
					float: right;
				}
				#egw_fw_appsToggle {
					height: 50px;
					z-index: 1000;
					display: inline-block;
					width: 50px;
					float: left;
					margin-left: 60px;
					background-image:url(../../node_modules/bootstrap-icons/icons/grid-3x3-gap.svg);
					background-size: 24px;
					background-repeat: no-repeat;
					background-position: center;
				}
				#egw_fw_appsToggle.toggled {
					background-image:none; // never existed: url(../../api/templates/default/images/sidebar.svg);
				}
				#egwpopup_fw_notifications {
					height: 25px;
					width: 25px;
					z-index: 1000;
					right: 0px;
					display: inline-block;
					float: left;
					position: relative;
					top: 12px;
					line-height: 27px;
					margin: 0;
					margin-left: 15px;
					.popup_note {display: none;}
				}
				#egw_fw_topmenu_info_items {
					height: 50px;
					.topmenu_info_item {
						border: 0;
						height: 50px;
					}
					#topmenu_info_print_title {
						span {
							height: 50px;
						}
					}
					#topmenu_info_user_avatar {
						span {
							margin-top: 4px;
							margin-left: 0px;
						}
					}
				}
				div#egw_fw_topmenu_items {
					/*in mobile.less*/
				}
				div#egw_fw_menu {
					background-image: url(../../node_modules/bootstrap-icons/icons/arrow-left.svg);
				}
			}
			/* active app header*/
			#egw_fw_sidebar {
				#egw_fw_sidemenu {
					bottom: 4px;
					left: 0;
					right: 0;
					overflow-y: auto;
					-webkit-overflow-scrolling:touch;
					z-index: 0;
					font-size: 0.9em;
					background-color:white;
					.egw_fw_ui_sidemenu_entry_header {
						h1 {
							padding-left:63px;
						}
						img {
							padding-left: 6px;
						}
					}
					.egw_fw_ui_sidemenu_entry_header_active {
						margin-left:2px;
						img {
							height: 32px;
							padding: 0;
							padding-left: 14px;
						}
						h1 {
							font-size: 14px;
							padding-left:57px;
						}
					}
				}
			}

			#egw_fw_sidemenu img[src$=".svg"] {
				background: none;
				box-shadow: none;
				border:none;
				filter:none;
				-webkit-filter:none;
			}
			#egw_fw_main img[src$="svg"], #egw_fw_footer img[src$="svg"] {
				background:none;
				border:none;
				filter:none;
				-webkit-filter:none;
				box-shadow: none;
			}
			.egw_fw_ui_sidemenu_entry_apps> div{
				margin-bottom: 5px;
			}
			#egw_fw_toggler {
				z-index: 999;
				height: 50px;
				span {
					top: 15px;
				}
			}
		}
		#egw_fw_basecontainer.egw_fw_sidebar_toggleOn {
			#egw_fw_toggler {
				z-index: 999;
				height: 50px;
				background-color: transparent;
				span {
					top: 15px;
				}
			}

		}
		#egw_fw_basecontainer.egw_fw_sidebar_toggleOn #egw_fw_toggler span,
		#egw_fw_basecontainer.egw_fw_sidebar_toggleOn #egw_fw_toggler:hover span{
			background-color: white;
			&:before, &:after {background-color: white !important}
		}


		//###################
		//#					#
		//#	 CONTEXT MENU   #
		//#					#
		//###################
		div.dhtmlxMenu_egw_SubLevelArea_Polygon
		{
			font-size:medium;
			top:50px !important;
			right:0px;
			left:auto !important;
			background-color: white;
			width: 100%;
			table.dhtmlxMebu_SubLevelArea_Tbl{
				width:100%;
				tr.sub_item_selected {height:46px;}
				tr.sub_item {
					width:100%;
					height:46px !important;
					td.sub_item_icon {filter:none;-webkit-filter:none;}
				}
				td.sub_item_hk {width:100%;}
			}
		}

	  div.egw_message_wrapper {
		bottom: 0px;
		top: auto;
		left: 0px;
		right: 0px !important;
		max-width: 100%;
		border-radius: 0;
		position: fixed;
	  }

	  et2-dialog {
		--width: 100%;
	  }

	  et2-dialog::part(panel) {
	  /* make dialog full screen */
		max-width: 100%;
		max-height: 100%;
		height: 100%;
	  }

	  et2-dialog::part(header) {
		/* Set header size, color & background */
		color: white;
		background: #0c5da5;
		height: 7ex;
		padding: 0;
		padding-left: 5px;
		border-radius: 0;
	  }
	  et2-dialog::part(title) {
		line-height: 5ex;
	  }
	  et2-dialog::part(close-button) {
		/* Move dialog close button up, change color */
		position: absolute;
		top: 0px;
		right: 0px;
		.white-svg
	  }

	  et2-dialog::part(footer) {
		order: 0;
		box-shadow: 0px 4px 5px 2px silver;
		width: 100%;
		margin-top: 0px;

		background: #0c5da5;

		/* Allow buttons to wrap */
		flex-wrap: wrap;
	  }

	  et2-dialog et2-button[slot="footer"]:has(et2-image) {
		/* Fixed size on footer buttons */
		width: 50px;
		height: 50px;
	  }

	  et2-dialog et2-button[slot="footer"] {
		et2-image {
		  /* Make icons white, set size */
		  height: 24px;
		  width: 24px;
		  max-width: initial;
		  left: 0;
		  .white-svg;

		  span {
			padding-left: 20px;
		  }
		}
	  }

	  et2-dialog et2-button[slot="footer"][id*="cancel"] {
		/* Hide cancel button, it will look like a duplicated bug so close to dialog close button */
		display: none;
	  }

	  et2-dialog et2-button[slot="footer"]:has(et2-image)::part(base), et2-button[slot="footer"]:has(et2-image)::part(base):not(:hover), et2-dialog et2-button[variant=default][slot="footer"]:has(et2-image)::part(base):not(:hover) {
		/* Have an icon - Hide button style, just show image */
		border: none;
		background: transparent;
		justify-content: center;
	  }

	  et2-dialog et2-button[slot="footer"]:has(et2-image)::part(label) {
		  /* Visually hide labels but leave them there for accessibility */
		  position: absolute;
		  width: 1px;
		  height: 1px;
		  overflow: hidden;
		  clip: rect(0 0 0 0);
		  flex: 0 1 auto;
	  }
      et2-dialog#delete_popup {
		  position: absolute;
		  z-index: 1000000;
		  display: block;
	  }
	  et2-button.plus_button {
		.bootstrap-icons;
		position: fixed !important;
		right: 15px;
		bottom: 15px;
		border-radius: 50%;
		width: 60px;
		height: 60px;
		background-position: center;
		z-index: 100;
		background-color: #0c5da5;
		border: none;
		background-repeat: no-repeat;
		margin: 0;
		padding: 0;

		&:hover, &:active {
		  background-color: #0c5da5;
		}
		&::before {
			color: white;
			content: "\f64d";	// plus-lg
			font-size: 32px;
			line-height: 60px;
			color: #fff;
			text-align: center;
			width: 60px;
			font-weight: bolder;
			display: inline-block		}
	  }

	  et2-button.plus_button::part(base) {
		display: none;
	  }

	  et2-dialog#timer_dialog::part(header), et2-dialog#timer_dialog::part(footer) {
		background: @timesheet-color;
	  }

	  .et2_nextmatch {
		.nextmatch_sortheader {
		  padding-right: 0px;
		  margin-right: 0px;
		}

		.nextmatch_header_row, .nextmatch_header {
		  flex-direction: column;

		  div.header_row_right {
			position: absolute;
			display: block;
			top: 0;
			flex-direction: column;
		  }

		  .filtersContainer {
			width: 100%;
			margin-top: 50px;
			flex-direction: column;

			et2-select, et2-select-cat {
			  max-width: 100%
			}
		  }

		  background-color: background-color-egw-dark;

		  et2-select, et2-select-cat {
			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;
			background-color: transparent;
		  }

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

				et2-select-cat {
					height: 50px !important;
					width: 100%  !important;
					margin: 0;
					padding-left: 0px;
					background: white;
				}

				et2-select-cat {
					a.chzn-single {
						height: 100%;
						border-right: none;
						box-shadow: none;
						background: white;
						border-top: none;
						border-bottom: none;
						border-left-width: 10px;
						border-radius: 0;
						span {
							height: 100%;
							line-height: 46px;
							color: #26537C;
							.mob-fontsize-l;
						}
						div {
							width: 40px;
							b {
								background: white url(../../node_modules/bootstrap-icons/icons/caret-down-fill.svg) no-repeat center  !important;
								background-size: 16px !important;
							}
						}
					}
				}
			}
			.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;
					}
				}
			}
			.nm-mob-header {
				background: @mobile-nm-search-bg;
				margin-top: 0;
				padding-left: 60px;
				position: relative;
				height: 50px;
				z-index: 1;
				display: flex;
				border-bottom: 1px solid transparent;
				et2-button-icon {
					font-size: 2.3em;
					.white-svg;
				}
				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;
				}
				div.et2_searchbox {
					display: inline-block;
					width:50px;
				}
				button.nm_toggle_header {
					background-image: url(../../node_modules/bootstrap-icons/icons/list-task.svg);
					background-position: center;
					background-repeat: no-repeat;
					width:50px;
					height:50px;
					display:block;
					.white-svg;
					&:focus{
						outline:none;
					}
					order: 9;
					padding: 0 1em 0 1em;
				}
				button.nm_action_header {
					background-image: url(../../node_modules/bootstrap-icons/icons/three-dots-vertical.svg);
					background-position: center;
					background-repeat: no-repeat;
					border-left:1px solid silver;
					border:0;
					color: white;
					width:50px;
					height:50px;
					display:block;
					.white-svg;
					&:focus{
						outline:none;
					}
					order: 10;
					padding: 0 1em 0 1em;
				}
				button.nm_action_header.back {
					background-image: url(../../node_modules/bootstrap-icons/icons/x-lg.svg);
					-webkit-filter: none!important;
					background-color: white !important;
				}
				div.nm_delete_action {
					background-image: url(../../node_modules/bootstrap-icons/icons/trash3.svg);
					.white-svg;
					background-position: center;
					background-repeat: no-repeat;
					border-left: 1px solid silver;
					border: 0;
					color: black;
					width: 50px;
					height: 50px;
					display: inline-block;
					text-align: center;
					display:none;
					order:7;
					padding: 0 1em 0 1em;
				}
				div.nm_favorites_div {
					order:8;
					background-position: center;
					background-repeat: no-repeat;
					border-left:1px solid silver;
					border:0;
					color: white;
					height:50px;
					display:none;
					float:right;

					&:focus{
						outline:none;
					}
					et2-favorites {

					}
					div[name="favorite"] {

						top:0 !important;
						outline:none;
						.et2_dropdown {
							button:first-child {
								display: none;
							}
							button:nth-child(2) {
								background-position: center;
								background-image: url(../../node_modules/bootstrap-icons/icons/star.svg) !important;
								background-size: 24px 24px;
								div:first-child {
									display: none;
								}
							}
						}
						ul.favorites {
							height: 250px;
							width:100%;
							left:0px !important;
							box-shadow: 0px 4px 5px 2px silver;
							border: 1px solid silver;
							overflow-y:auto !important;
							li.ui-menu-item[data-id="blank"]
							{
								&:before{
									content: '';
									background-image: url(../../node_modules/bootstrap-icons/icons/trash3.svg);
									background-size: 12px;
									background-repeat: no-repeat;
									width: 12px;
									height: 12px;
									display: inline-block;
									margin-left: 4px;
								}
							}
							li.ui-menu-item:not([data-id="add"]):not([data-id="blank"]) {
								&:before{
									content: '';
									background-image: url(../../node_modules/bootstrap-icons/icons/star.svg);
									background-size: 12px;
									background-repeat: no-repeat;
									width: 12px;
									height: 12px;
									display: inline-block;
									margin-left: 4px;
								}
							}
							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;
										padding-right:8px;
									}
								}
							}
						}
					}
				}
				button.nm_toggle_header_on {
					background-image: url(../../node_modules/bootstrap-icons/icons/x-lg.svg);
					-webkit-filter: none!important;
					background-color: white !important;
				}
				et2-searchbox {
					order: -1;
					width: -webkit-fill-available;
				}
				div.nm_appname_header {
					width: 100%;
					display: none;
					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;
					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;
				* {
					float:left;
					max-width: 100% !important;
				}
				.et2_dropdown {
					button {
						height:@mobile-elem-height;
						width: @mobile-button-width;
					}
				}
			}
			.header_count{
				margin:0;
				height:@mobile-elem-height;
				.mob-fontsize-l;
				margin-top: -3px;
				margin-right: 0px;
				float:right;
				border: none;
				border-radius:0;
				span {
					.mob-fontsize-l;
				}
			}
			table.egwGridView_grid {
				tr {
					div.h2_hbox {
						padding-bottom: 4px;
					}
					img {
						height: 12px;
					}
					et2-image {
					  font-size: 12px;
						width: 12px;
					}
				}
				tbody {
					tr.focused{background-image: none;}
					tr.selected:not([class*="tile"]) {
						background: #b0bfd8 !important;
						* {color:white !important;}
						td:last-child:before {
							content: " ";
							position: absolute;
							background: #b0bfd8;
							right: 0px;
							bottom: 0px;
							left: -8px;
							top:0px;
							color: white;
							background-image: url(../../node_modules/bootstrap-icons/icons/check-lg.svg);
							background-repeat: no-repeat;
							background-position: center;
							height: auto;
							background-size: 20px;
							background-position: center;
							height: 99%;
							width: 99%;
						}
					}
					tr {
						&:hover {
							background: transparent;
						}
						td {
							padding: 10px 0px 10px 0px;
							.et2_label, .et2_button, .et2_link, .et2_textbox, .et2_textbox_ro,
							.et2_email, img {
								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;
					}
				}
			}
		}

		.et2_details {
			.et2_details_toggle {
				&:after{
					width:30px;
					height: 30px;
					font-size:	18pt;
					text-align: center;
					padding:9px;
				}
			}
		}
		input {
			border:none;
			border-bottom: 1px solid #e6e6e6;
		}
		.et2_taglist_category span[class*="cat_"] {height: 42px;}
		.et2_button_icon {height:32px;}
		.popupMainDiv {
			padding-top: 60px !important;
			padding-left:8px !important;
			padding-right:8px !important;
			overflow-x:auto;
			* {
				.mob-fontsize-n;
				font-family: Verdana, "Lucida Grande", Helvetica, Sans-Serif;
			}
			.et2_textbox, .et2_date, .et2_dropdown, .et2_link, .et2_label, input, select, .et2_selectbox{
				height:46px;
				padding-left: 8px;
				outline: none;
			}
			input, select, .et2_selectbox {
				padding:0;
				padding-left:0;
				border-left:0;
				border-top:0;
				border-right:0;
				border-radius: 0;
			}
			.et2_label .et2_selectbox {padding-left: 8px;}
			ul.et2_selectbox {
				li{padding-top: 13px;}
			}
			.et2_taglist input[type="text"] {height:36px;}
			.et2_taglist .ms-sel-item {
				margin-left: 3px;
				line-height: 36px;
				margin-top: 0;
				margin-bottom: 0;
			}
			/* Exceptional cases to not get the general left padding*/
			.et2_label .et2_date_ro.et2_label {padding-left: 0;}

			.et2_button_with_image {
				background-color: transparent;
				border:none;
				box-shadow: none;
				color: #1e1e1e;
			}
			.et2_date {min-width:100px;padding-left:0;}
			.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;
				height:100%;
				.et2_details_title {
					display: inline-block;
					background-color: #F0F0F0;
					width:100%;
					padding-top: 6px;
					height: 32px;
				}
				.et2_details_toggle {

				}
			}
			.et2_details {
				position: relative;
				background-color: #F0F0F0;
				height:32px;
				.et2_details_toggle {
					position: absolute;
					right: 2px;
					top:0px;
					margin: 0px;
				}
				.et2_details_title {
					padding-top: 6px;
					margin-top:0;
				}
			}

			.et2_taglist>div{min-height: auto;}

			form.et2_container div table.et2_grid tbody tr .row td .et2_box_widget input {margin:0 5px 0 0;}

			table.et2_grid>tbody>tr>td:last-child {padding-top: 0;}
		}
		div#popupMainDiv {padding:0;}

		.dialogHeadbar {
		  et2-button-icon, et2-button {
			font-size: 2.3em;
			flex: 0 0 50px;

			et2-image {
			  height: 24px;
			  width: 24px;
			  max-width: initial;
			  .white-svg;
			}
		  }
		  et2-button-icon::part(base) {
			.white-svg;
		  }
		  et2-button[disabled], et2-button-icon[disabled] {
			display: none;
		  }
		  et2-button::part(base) {
			background: transparent;
			border: transparent;
		  }

		  et2-button-toggle {
			--indicator-color: var(--sl-color-neutral-0);
			font-size: 2.3em;

			&::part(form-control-label) {
			  position: absolute;
			  top: -100%;
			}

			&::part(control) {
			  border: none;
			  background: none;
			}
		  }

		  button[class*="et2_button_with_image"]:not([class*="et2_toolbar_hasCaption"]) {
			.white-svg;
			padding-right: 15px;
		  }
		}
		.rowHeader {
			.mob-fontsize-l;
		}
		.et2_fullWidth {
			input[type="radio"] {
				width: auto;
			}
		}
		td.et2_fullWidth{width:auto;}
		//###########################################
		//#											#
		//#	 et2_toolbar styles used in headbar		#
		//#											#
		//###########################################

		.et2_toolbar {
				background-color: transparent;
				padding: 1px 5px 5px 10px !important;
				button {
					width:46px;
					height:46px;
					background-size: 18px 18px;
					touch-action: auto;
				}
				.ui-toolbar-menulist
				{
					width: 100%;
					max-height: 90vh;
					left:0px;
					overflow-y: auto !important;
					box-shadow: 2px 3px 13px #666666;
					-moz-box-shadow: 2px 3px 13px #666666;
					-webkit-box-shadow: 2px 3px 13px #666666;
					-khtml-box-shadow: 2px 3px 13px #666666;
					filter: progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3);
					-moz-user-select: none;
					et2-button::part(label) {
						padding: 1em;
						overflow: hidden;
					}
					et2-dropdown-button {height: 46px;}
					et2-image {filter: none!important;}
				}

				button.et2_toolbar_hasCaption {
					width:auto;
				}
				.et2_toolbar_actionlist {
					margin-left: 50px;
					button.et2_button.ui-draggable {
						border: none !important;
						box-shadow: none !important;
						background-position: center !important;
						.white-svg;
						width: 40px;
					}
				}
				.et2_toolbar_more {
					position:inherit;
					.ui-state-hover {
						background:none;
					}
					.ui-toolbar-menulistHeader {
						color:transparent;
						border: none;
						height: 46px;
						width: 50px;
						padding: 0 !important;
						background-image: url(../../node_modules/bootstrap-icons/icons/three-dots-vertical.svg);
						background-repeat: no-repeat;
						background-position: center;
						outline: none;
						.white-svg;
						span {
							display: none;
						}
					}
				}
			}
		//###########################################
		//#											#
		//#		et2_tabbox styles					#
		//#											#
		//###########################################
		.et2_tabbox.vertical {
			.et2_tabflag {
				border:none;
				div.et2_tabtitle {
					background-color: #f0f0f0;
					padding-left: 6px;
					&:before {
						padding: 0;
						width:30px;
						height:30px;
						text-align: center;
						font-size: 18pt;
					}
				}
			}
		}
		.et2_link_to {
			div {
				padding-bottom: 3px;
			}
			.et2_file {
				margin: 0;
				padding:0;

				.et2_file_span, .et2_file_spanHover, .et2_file_upload {
					height:46px;
					width:46px;
				}
			}
			button.link { float:right; height: 46px;width:46px;}
		}
		.et2_link_to.et2_toolbar {
			div.et2_file {
				width:46px;
			}
			button.et2_vfs_btn {
				width:46px;
				height: 46px !important;
			}
		}
		span.et2_file_span:hover {
			background: transparent !important;
			box-shadow: none !important;
			border: none;
			color: transparent;
		}
		/*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;
			}
		}
		.et2_taglist.et2_taglist_category {min-height: 50px !important;}
		.et2_taglist.et2_taglist_toggle.et2_taglist_single {
			.ms-sel-item {
				span:first-child {float:left;}
				span[class*="cat_"] {height: 3em;}
			}
		}
		.et2_taglist.ui-state-active.expanded {
			.ms-res-ctn.dropdown-menu {
				min-height: 100px;
				.ms-res-item {line-height: 25px;}
			}
		}
		/* 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;
					}
				}
			}
			div.et2_hbox.avatar {
				width: 100px;
				display: block;
				height: 100px;
				margin: auto;
				img {
					width: 100px;
					height: auto;
				}
			}
			.et2_tabbox {padding-left:8px;}
		}
		.mobile-view-editBtn {
			position: fixed;
			top:2px;
			left: 70px;
			width: 50px;
			height: 50px;
			float:left;
			z-index:104;
			font-size:18pt !important;
			color: white;
			background-image: url(../../node_modules/bootstrap-icons/icons/pencil-square.svg);
			background-repeat: no-repeat;
			.white-svg;
			background-position: center;
			&:before {
				content: "";
				font-size: 24pt;
				color: white;
				padding-left: 5px;
				font-weight: bold;
			}
			display: block;
		}

		.et2_searchbox {
			button.et2_button.searched {
				background-image: url(../../node_modules/bootstrap-icons/icons/search.svg);
			}
			button.et2_button {
				background-image: url(../../node_modules/bootstrap-icons/icons/search.svg) !important;
				.white-svg;
			}
			input{
				.mob-fontsize-n;
			}
		}
		.et2_searchbox.expanded {
			position: absolute;
			width:auto !important;
			height:50px;
			left:65px;
			right:70px;
			margin-left:0;
			margin-right:50px;
			button.et2_button{
				background: none;
			}
			input {
				width:100%;
				height:42px;
				margin:0;
				top:0;
				outline: none;
				z-index: 100;
				border-radius: 0;
			}
			span.ui-icon.clear{
				top: 0px;
				left: -50px;
				background-color: white;
				height: 50px;
				width: 50px;
				background-image: url("../../node_modules/bootstrap-icons/icons/x-lg.svg");
				background-position: center;
				background-repeat: no-repeat;
				background-size: 24px 24px;
				display: inline-block !important;
			}
			.flex{
				width:100%;
				position: absolute;
				border: 0;
				input {border:0}
			}
		}

		img.et2_button_icon[src*="svg"] {
			background: none;
			box-shadow: none;
			border:none;
		}
		img[src*="svg"] {
			background:none !important;
			border:none;
			box-shado:none;
		}

		/***************CHECKBOX *************/
		/**************************************/
		input[type="checkbox"] {
			width: 32px !important;
			height: 32px !important;
		}

		.et2_label.et2_checkbox_label {
			line-height: 32px;
			vertical-align: middle;
			position: relative;
			padding-left: 40px !important;
			input[type="checkbox"] {
				position: absolute;
				left:0
			}
		}
		.dialogHeadbar .et2_label.et2_checkbox_label  {
			vertical-align: top;
			margin-top:10px;
			color:white;
		}
		/*************** SLIDESWITCH **********/
		/***************************************/
		span.et2_checkbox_slideSwitch {
			height: 50px;
			border: none;
			padding-right:10px;
			&:hover{border:none;box-shadow: none;}
			vertical-align: bottom;
			input {
				height: 100% !important;
			}
			span.et2_label {
				margin-left: 40px;
				display: inline-block;
				height: 50px;
				margin-top: 15px;
			}
			span.slideSwitch_container {
				width:50px !important;
				border-radius: 15px;
				margin-top: 15px;
				box-shadow: inset 0 2px 2px rgb(71, 71, 71), 0 0px 0 rgba(255, 255, 255, 0.2);

				span {
					color:#696969 !important;
				}
				a {
					background-color: #E0E0E0;
					border-radius: 50%;
					box-shadow: 0 2px 2px rgb(71, 71, 71), 0 0px 0 rgba(255, 255, 255, 0.2);
					z-index: 2;
				}
			}
		}
		.et2_toolbar_more span.et2_checkbox_slideSwitch > span.slideSwitch_container {float:right}

		.et2_checkbox_slideSwitch.notification_check {
			.on {
				background-image: url(../../node_modules/bootstrap-icons/icons/bell-slash.svg);
				height: 16px;
				background-size: 16px;
				background-repeat: no-repeat;
				background-position: center;
				&:before {
					content: " ";
					width: 1px;
					transform: rotateZ(45deg);
					background: #bcbcbc;
					height: 20px;
					display: inline-block;
					margin-top: -2px;
				}
			}
			.off {
				background-image: url(../../node_modules/bootstrap-icons/icons/bell.svg);
				height: 16px;
				background-size: 16px;
				background-repeat: no-repeat;
				background-position: center;
			}
			input {width: 100% !important;height:100% !important;}
		}
		.entry_id {
			position: absolute;
			right: 10px;
			top: 6px;
			color: white;
			.mob-fontsize-l;
			font-weight: bold;
			&::before {
				content: "#";
				color: white;
				.mob-fontsize-l;
				font-weight: bold;
			}
		}
		select#rc_status_select {
			width: 100%;
			height: 40px;
			box-shadow: none;
			padding-right: 0;
			padding-left: 28px;
			background-size: auto;
			border-left: 0;
			border-right: 0;
			border-radius: 0;
		}
	}
}