/**
 * EGroupware: Stylite Pixelegg template
 *
 * Definitions for layout and raster
 *
 * 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 Stefan Reinhardt <stefan.reinhardt@pixelegg.de>
 * @package pixelegg
 * @version $Id: layout_raster.less 3170 2014-07-16 11:24:38Z pixelegg $
 */
/*
    Created on : 23.07.2014, 13:25:11
    Author     : stefanreinhardt
*/

@import (reference) "definitions.less";


// Header
#egw_fw_header {

	width: 100%;
	float: left;
	position: absolute;
    border-bottom: 1px solid silver;
	/* Logo EGW or Company - left top*/
	#egw_divLogo {
		float: left;
		max-width: 220px;
		display: block;
		margin-left: 63px;
		text-align: center;
		height: 45px;
		img {
			max-width: 210px;
			border: none;
			height: 45px;
		}

	}


/*  ###########################################################################################################################################
    Topmenu / Home / Einstellungen / Zugriff / Kategorien usw..
    ###########################################################################################################################################
*/

	#egw_fw_topmenu ul,
	#egw_fw_topmenu > * > ul > li,
	.topmenu_info_item,
	#egw_fw_topmenu_items,
	#egw_fw_topmenu_info_items {
		display: inline;
	}

	#egw_fw_topmenu{
		position: absolute;
		display: none;
		right: 5px;
		width: 241px;
		z-index: 1001;
		top: 46px;
	    background: white;
		box-shadow: @sl-box-shadow-menu;
		border: @sl-border-menu;
		a.powered_by {
			width: ~"calc(100% - 20px)";
			display: inline-block;
			padding: 10px;
			font-size: 7pt;
			background-color: #fbfbfb;
		}
		#egw_fw_topmenu_info_items {
			display: inline-block;
			background: white;
			float: right;
			height: auto;
			padding-left: 10px;
			border-top: 1px solid silver;
			.topmenu_info_item {
				overflow: visible;
				display: inline-block;
				&:nth-child(2) {
					margin-top: 0;
					font-size: 1em;
				}
				&:nth-child(3) {
					position: relative;
					top: 0px;
					padding-left: 3px;
					display: inline-block;
				}
			}
		}
		#egw_fw_topmenu_items {
			padding-top: 14px;
			width: 100%;
			display: block;
			float: right;
			background: white;
			height: auto;
			z-index: 1000;
			top: 45px;
			et2-image {
				font-size: 120%;
			}
			#rc_status_select {
				width: 50% !important;
				margin-left: 10px;
				sl-menu-item::part(checked-icon) {
					border-radius: 50%;
					width: 12px;
					height: 12px;
					margin-top: 5px;
					margin-right: 5px;
					visibility: visible;
				}

				sl-menu-item[value="online"]::part(checked-icon) {background: #2de0a5;}
				sl-menu-item[value="away"]::part(checked-icon) {background: #ffd21f;}
				sl-menu-item[value="busy"]::part(checked-icon) {background: #f5455c;}
				sl-menu-item[value="offline"]::part(checked-icon) {background: #cbced1;}
			}
			#rc_status_select_chzn {
				a.chzn-single span {padding-top: 0px;}
				li.active-result {
					color:#000000;
					&:hover { color: #000000}
					span {
						&:before {
							content: ' ';
							width: 12px;
							height: 12px;
							display: inline-block;
							border-radius: 50%;
							margin-right: 4px;
							vertical-align: text-bottom;
						}
					}
				}
				[data-option-array-index="0"] {
					span {
						&:before {
							background: #2de0a5;
						}
					}
				}
				[data-option-array-index="1"] {
					span {
						&:before {
							background: #ffd21f;
						}
					}
				}
				[data-option-array-index="2"] {
					span {
						&:before {
							background: #f5455c;
						}
					}
				}
				[data-option-array-index="3"] {
					span {
						&:before {
							background: #cbced1;
						}
					}
				}
			}
			ul {
				width: 100%;
				padding: 0px;
				display: inline-grid;

				li{
					color: @gray_0;
					padding: 8px 10px;
					border-top: @gray_10;
					&:hover{
						background: @sl-bg-color-menu;
						color: @sl-color-menu;
						a {filter:@sl-filter-menu}
					}
					a {
						color: @gray_100;
						text-decoration: none;
						line-height: 1.9em;
						display:inline-block;
						&:hover {
							text-decoration: none !important;
						}
						width:100%;
					}
				}

				/*Home*/
				li:first-child{

					:before{border: none;}
				}
				a {background-size: 20px;}
			} // Ende ul
			.timezone {
				span {
					width: 100%;
					text-align: center;
					display: inline-block;
					background-color: #fafafa;
					padding: 5px 0px 5px 0px;
				}
				select {
					width: ~"calc(100% - 20px)";
					margin-left: 10px;
				}
			}
		}	// Ende Items
	} // Ende Topmenu
} // Ende Header

/* ###################################################
   Slide Effekt
   ###################################################*/


#egw_fw_topmenu_slide{
	width: auto;
	text-align: center;
	height: 15px;
	float: left;
	position: fixed;
	left: 194px;
}

 /*ICON List*/
#egw_fw_topmenu_slide.slidedown{
	background-image: url("../../node_modules/bootstrap-icons/icons/list.svg");
	background-position: center center;
	height: 15px;
	width: 15px;
	display: block;
	margin-left: 5px;
	margin-top: 10px;
	background-size: 15px 15px;
	float: left;
	position: relative;
	left: -5px;
	cursor: pointer;
}

/*Icon ARROW UP*/
#egw_fw_topmenu_slide.slideup{
	background-image: url("../../api/templates/default/images/slideup.png");
	background-position: center center;
	height: 15px;
	width: 15px;
	display: block;
	margin-top: -36px;
	margin-left: 40px;
	cursor: pointer;
}

#slidetoggle{
	width: 20px;
	height: 20px;
	display: block;
}