.MailLayout .panel_helper {
	width: 85%;
}
/*=== Folders List CSS ===*/
.panel.folders  {
	width: 15%;
	
	.middle_bar {
		.resize_compensation_bottom(30px);
		
		&.quota_visible {
			.resize_compensation_bottom(47px);
		}
	}
	
	.panel_bottom {
		height: 30px;
		border: 0px;
		border-radius: 0px;
		background: none;
		padding: 0px;
	}
	
	.quota_visible .panel_bottom {
		height: 42px;
	}
	
	.manage_folders {
		line-height: 16px;
		text-align: center;
		font-size: 8pt;
	}
}
/*=== END Folders List CSS ===*/

/*=== Message List CSS ===*/
.messages {
	
	.middle_bar {
		.resize_compensation_top(39px);
		.resize_compensation_bottom(41px);
	}
	
	.items_list .item {
		
		.attachments,
		.flag {
			display: inline-block;
			width: 16px;
			height: 16px;
			vertical-align: bottom;
		}
		
		.controls .separator,
		.data .separator {
			display: block;
		}
		
		.size {
			width: 40px;
			text-align: right;
			display: none;
		}
		
		.subject,
		.from {
			display: block;
			overflow: hidden;
			/* height: 1.4em; */
		}
		
		.subject{
			color: #6d6d6d;
			font-size: 10pt;
			line-height: 120%;
		}
		
		&.selected .subject{
			color: #fff;
		}
		
		&.nosubject .subject{
			color: #888888;
			.opacity(0.3);
		}
		
		&.selected.nosubject .subject{
			color: #fff;
		}
		
		.from {
			margin-bottom: 10px;
			font-size: 10.5pt;
		}
		
		.text {
			color: #b6b6b6;
			display: block;
			white-space: normal;
		}
		
		&.selected .text {
			color: #b4d4f0;
		}
		
		& > .separator {
			clear: both;
		}
		
		.marker {
			display: none;
			height: 20px;
			width: 20px;
			position: absolute;
			right: 2px;
			top: 0px;
			background: url('images/sprites.png?%VERSION%') no-repeat 0px -200px;
		}
		
		&.answered .marker{
			display: inline-block;
			background-position: 0px -200px;
		}
		
		&.forwarded .marker {
			display: inline-block;
			background-position: -40px -200px;
		}
		
		&.answered.forwarded .marker {
			display: inline-block;
			background-position: -80px -200px;
		}
		
		.has_attachments {
			background: url("images/sprites.png?%VERSION%") no-repeat -120px -120px;
		}
		&.selected .has_attachments {
			background-position: -140px -120px;
		}
		
		.flag {
			margin-top: 10px;
			cursor: pointer;
			background: url("images/sprites.png?%VERSION%") no-repeat 0px -120px;
		}
		&.selected .flag {
			background-position: -40px -120px;
		}
		
		&.selected .flagged,
		.flagged {
			background-position: -80px -120px;
		}
		
		// Thread Counter
		@tcBackground: #CCC8C1;
		@tcTextColor: #fff;
		@tcBorder: 0px;
		
		@tcSelectedBackground: @tcBackground;
		@tcSelectedTextColor: @tcTextColor;
		@tcSelectedBorder: @tcBorder;
		
		@tcUnreadBackground: @tcBackground;
		@tcUnreadTextColor: @tcTextColor;
		@tcUnreadBorder: @tcBorder;
		
		@tcUnreadSelectedBackground: @tcBackground;
		@tcUnreadSelectedTextColor: @tcTextColor;
		@tcUnreadSelectedBorder: @tcBorder;
		
		.thread {
			background: @tcBackground;
			border: @tcBorder;
			border-radius: 9px;
			color: @tcTextColor;
			float: right;
			line-height: 100%;
			padding: 4px 8px 3px;
			margin: -4px 0px 0px 6px;
			font-weight: bold;
			cursor: pointer;
			
			html.rtl & {
				float: left;
			}
			
			&.loading {
				background-color: #abaaa3;
				cursor: default;
			}
		
			&:hover {
				.transition(background-color 200ms ease);
				background-color: darken(@tcUnreadSelectedBackground, 5%);
			}
			
			&.unreed {
				background-color: @tcUnreadBackground;
				border: @tcUnreadBorder;
				color: @tcUnreadTextColor;

				&:hover {
					background-color: darken(@tcUnreadBackground, 5%);
				}
			}
		}
		
		&.selected .thread {
			background: @tcSelectedBackground;
			border: @tcSelectedBorder;
			color: @tcSelectedTextColor;
			
			&:hover {
				background-color: darken(@tcSelectedBackground, 5%);
			}
			
			&.unreed {
				background-color: @tcUnreadSelectedBackground;
				border: @tcUnreadSelectedBorder;
				color: @tcUnreadSelectedTextColor;

				&:hover {
					background-color: darken(@tcUnreadSelectedBackground, 5%);
				}
			}
		}
		
		.theme-messages-list-item();
	}
}



.messages .items_list .not_use_threads .item .thread_loading,
.messages .items_list .not_use_threads .item .thread {
	display: none;
}
/*=== END Message List CSS ===*/


/*=== Message viewer CSS ===*/
.message_viewer {
	
	.panel_center {
		.box-sizing;
		.resize_compensation_top(165px);/* header + quick reply */

		background: none;
		width: 100%;

	}
	
	.single_mode & {
		height: 100%;
		width: 100%;
	}
	
	.panel_content {
		margin: 0 !important;
		padding: 2px 4px 0 2px !important;
	}
	
	.message_body {
		padding: 20px;
		font-size: 11pt;
		
		li {
			margin-bottom: 0.6em;
		}
	}
	
	.message_body_info {
		font: normal 18px Tahoma;
		color: #ccc;
		text-align: center;
		margin: 30px;
		
		.message_body_secondary_info {
			font-size: 14px;
			margin-top: 10px;
		}
	}
	
	.message_header {
		background: #f8f8f8;
		border-bottom: 1px solid #e2e2e2;
		color: #4D4D4D;
	
		.header_row {
			clear: both;
		}
		
		.toolbar {
			float: right;
			border: 0px;
			padding: 0px;
			background: 0px;
			position: relative;
			z-index: 1;
			margin-bottom: 10px;
			max-width: 100%;
			width: auto;
			overflow: hidden;
			filter: none;
			
			html.rtl & {
				float: left;
			}
			
			.content {
				padding: 0px;
				
				.item {
					border: 0px;
					padding: 0px;
					box-shadow: none;
					background: none;
					
					&.control .arrow {
						background-position: -160px -85px;
					}
					
					.icon {
						width: 20px;
						height: 16px;
						overflow: hidden;
						background-image: url("images/sprites.png?%VERSION%");
						background-repeat: no-repeat;
						display: inline-block;
						text-indent: -1000px;
					}
				}
			}
		}
		
		.header_content {
			padding: 14px 18px;
		}
		
		.message_info {
			position: relative;
			margin-left: 14px;
			font-size: 10pt;
			padding-top: 1px; /* fix nested element negative margin */
			
			html.rtl & {
				margin-right: 14px;
			}
			
			.message_info_line {
				padding: 4px 4px 0px;
				top: -4px;
				position: relative;
				white-space: nowrap;
				overflow: hidden;
			}
			
			&.message_detail_info .message_info_line {
				white-space: normal;
			/*	overflow: visible;  ??? */
			}
		}
		
		.details_show,
		.details_hide {
			display: inline-block;
			vertical-align: bottom;
			margin-right: 6px;
			float: left;
			width: 14px;
			height: 16px;
			position: absolute;
			background: url("images/sprites.png?%VERSION%") no-repeat -240px -80px;
		}
		
		html.rtl & {
			margin-right: 0px;
			margin-left: 6px;
		}
		
		.details_hide {
			background-position: -260px -80px;
		}
		
		.title {
			/* font-size: 10.5pt; */
			color: #777777;
		}
		
		.subject {
			margin: 0px;
			padding: 0px;
			font-size: 10.5pt;
			color: #4d4d4d;
		}
		
		.icon {
			padding: 0px;
			margin: 0px;
			
			.attachments {
				display: inline-block;
				width: 16px;
				height: 16px;
				margin-right: 8px;
				float: left;
				cursor: pointer;
				background: url("images/sprites.png") no-repeat -120px -120px;
				
				html.rtl & {
					margin-right: 0px;
					margin-left: 8px;
					float: right;
				}
			}
		}
		
		.date {
			float: right;
			font-size: 8.5pt;
			
			html.rtl & {
				float: left;
			}
		}
		
		.from {
			//color: saturate(lighten(@theme-common-link-color, 10%), 10%);
			color:@theme-common-link-color;
			font-weight: bold;
			padding-left: 7px;
			
			html.rtl & {
				padding-right: 7px;
			}
		}
	}
	
	.notice {
		background: #ffffc5;
		padding: 4px 6px;
		border-bottom: 1px solid #EAE7CA;
		color: #B5AD94;
		font-size: 8pt;

		.item {
			display: block;
		}

		.link {
			color: #7E9BAF;
		}
	}
	
	.message {
		height: 100%;

		.message_content {
			height: 100%;
			overflow: auto;
			white-space: normal;

			.bodyparts_separator {
				height: 1px;
				background-color: #e2e2e2;
				display: none;
				margin: 0px 20px;
			}
		}

		&.has_bodytext.has_attachments .bodyparts_separator {
			display: block;
		}
	}
	
	.appointment {
		padding: 15px;
		background: #eeffe0;
		border-bottom: 1px solid #cee2c0;

		.row.fluid {
			padding-left: 100px;
		}

		.label {
			width: 100px;
			color: #57793E;
			vertical-align: top;
		}

		.row.fluid .label {
			margin-left: -100px;
		}

		.value {
			display: inline-block;
		}

		.row.fluid .value {
			width: 100%;
		}

		.event_state {
			color: #929292;
			padding-left: 5px;
		}

		.buttons {
			display: inline-block;
			margin-top: 7px;

			.button {
				margin-right: 5px;

				&.state {
					padding: 4px 8px;
				}
			}

			&.animation .button {
				.transition(~"opacity 200ms ease, background 200ms ease, color 200ms ease");
			}

			&.touched .button {
				opacity: 0.4;

				&:hover,
				&.state {
					opacity: 1;
				}
			}
		}
	}
}

.panel.thread_viewer .panel_top .expand .owner.founded,
.message_viewer .message_header .expand .from.founded {
	padding: 4px 7px 0px;
	margin: -4px -7px 0px 0px;
	background: #fff;
	border-radius: 4px 4px 0px 0px;
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
	position: relative;
	z-index: 1001;
}
.thread_viewer .panel_top .title .add_contact,
.message_viewer .message_header .add_contact {
	display: inline-block;
	vertical-align: middle;
	width: 11px;
	height: 11px;
	background: url("images/sprites.png?%VERSION%") no-repeat -280px -80px;
}
/*=== END Message viewer CSS ===*/