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

	.customscroll-scrollbar-vertical {
		margin-right: -2px;

		html.rtl & {
			margin-right: 0;
			margin-left: -2px;
		}
	}
}
/*=== END Folders List CSS ===*/

/*=== Message List CSS ===*/
.messages {
	
	.middle_bar {
		.resize_compensation_top(39px);
		.resize_compensation_bottom(47px);
	}

	.items_list {

		@import "controls/flag.less";
		
	}
	
	.items_list .item {
		
		.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: @theme-list-selected-item-color;
		}

		&.nosubject .subject{
			color: #888888;
			.opacity(0.3);
		}

		&.selected.nosubject .subject{
			color: #fff;
		}

		.from {
			margin-bottom: 10px;
			min-height: 16px;
			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: @pannels-overlap-offset;
			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;
		}

		.importance {
			width: 14px;
			height: 14px;
			display: inline-block;
			vertical-align: middle;
			line-height: 1;
			border-radius: 50%;
			border: 1px solid;
			text-align: center;
			margin-top: -3px;

			.iconFontInit();
			&:before {
				font-size: 13px;
				display: inline-block;
				vertical-align: top;
				width: 7px;
				content: "\e620";
			}
		}
		&.selected .importance {
			color: #fff;
			border-color: #fff;
		}

		.attachments {
			display: inline-block;
			width: 20px;
			height: 20px;
			vertical-align: bottom;

			&.has_attachments {
				.iconFontInit();
				&:before {
					.opacity(0.7);
					font-size: 20px;
					content: "\e622";
				}
			}

			&.has_vcard_attachment {
				&:before {
					content: "\e621";
				}
			}

			&.has_ical_attachment {
				&:before {
					content: "\e623";
				}
			}
		}
		&.selected .attachments.has_attachments {
			&:before {
				color: @theme-list-selected-item-color;
			}
		}

		&.selected {
			.thread {
				background: @theme-list-selected-item-bg;
			}
		}
		&.checked {
			.thread {
				background: @theme-list-checked-item-bg;

				&:hover {
					background-color: darken(@theme-list-checked-item-bg, 5%);
				}
			}
		}

		// 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%);
			}

			&.unread {
				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%);
			}

			&.unread {
				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,
	&.thread_more_messages,
	& .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: 0px !important;
		padding: 0px !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;

		.nosubject .subject{
			color: #888888;
			.opacity(0.3);
		}

		.resizer {
			height: 85px;

			&.large {
				height: 130px;
			}
		}
	
		.header_row {
			clear: both;
		}
		
		.toolbar {
			float: right;
			border: 0px;
			padding: 0px;
			background: 0px;
			position: relative;
			z-index: 1;
			margin-bottom: 0px;
			max-width: 100%;
			width: auto;
			overflow: visible;
			filter: none;
			
			html.rtl & {
				float: left;
			}

			.content {
				padding: 0px;
				
				& > .item {
					border: 0px;
					padding: 0px;
					margin-right: 16px;
					box-shadow: none !important;
					background: none !important;
					
					&:last-child {
						margin-right: 0px;
					}
					
					& > .icon {
						color: #929292 !important;
						
						&:hover {
							color: #727272 !important;
						}
					}
					
					.icon.arrow {
						&:before {
							font-size: 20px;
						}
					}
					
					.dropdown {
						.item {
							.icon {
								margin-right: 5px;
							}
						}
					}
				}
			}
		}
		
		.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 {
				margin: 4px 0 0 4px;
				top: -4px;
				position: relative;
				white-space: nowrap;
				overflow: hidden;
				
				.fadeout_text_init();
				.fadeout_text(#f8f8f8);
			}
			
			&.message_detail_info .message_info_line {
				white-space: normal;
				max-height: 72px;
				overflow-y: auto !important;
			}
		}
		
		.details_show,
		.details_hide {
			display: inline-block;
			vertical-align: bottom;
			//margin: 2px 0px 0px 0px;
			float: left;
			width: 16px;
			height: 16px;
			position: absolute;
			color: #727272;
			overflow: hidden;
			
			html.rtl & {
				margin-right: 0px;
				margin-left: 6px;
			}
			
			.iconFontInit();
			&:before {
				font-size: 18px;
				display: inline-block;
				content: "\e66d";
			}
		}
		
		.details_hide {
			&:before {
				content: "\e66e";
			}
		}
		
		.title {
			color: #777777;
		}
		
		.subject {
			display: inline-block;
			margin: 0px;
			padding: 0px;
			color: #4d4d4d;
			font-size: 14pt;
			font-weight: normal;
		}
		
		.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;
			margin-top: 6px;
			
			html.rtl & {
				float: left;
			}
		}
		
		.from {
			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;
			.break-word();
		}

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

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

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

			.button {
				margin-right: 5px;
			}

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

			&.touched .button {
				opacity: 0.4;

				&:hover,
				&.state {
					opacity: 1;
				}
			}
		}
	}
	
	.panels.has_attachments {
		padding-right: 170px;
		
		.left_panel {
			border-right: 1px solid #E2E2E2;
		}
	}
	
	.left_panel {
		box-shadow: none;
		border-radius: 0px;
		width: 100%;
	}
	
	.right_panel {
		box-shadow: none;
		width: 170px;
		margin-right: -170px;
		float: right;
	}
}

.panel.thread_viewer .panel_top .expand .owner.found,
.message_viewer .message_header .expand .from.found {
	padding: 3px 7px 0px;
	margin: -3px -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;
	display: inline-block;
}
.item_viewer .title,
.item_viewer .message_header {
	
	.add_contact {
		display: inline-block;
		vertical-align: bottom;
		width: auto;
		height: auto;
		margin: 0;
		padding: 0;
		color: @theme-common-link-color;
		cursor: pointer;

		.iconFontInit();
		&:before {
			content: "\e641";
			font-size: 15px;
			display: inline-block;
			vertical-align: bottom;
			width: auto;
			height: auto;
			margin: 0;
		}
	}
}
/*=== END Message viewer CSS ===*/


.messages {
	
	.middle_bar {
		.transition(~"margin-top 500ms ease 0ms, padding-top 500ms ease 0ms");
		
		&.advanced_search {
			.resize_compensation_top(198px);
			
			.panel_top {
				height: 185px;
			}
		}
		
		.panel_top {
			height: 26px;
			.transition(~"height 500ms ease 0ms");
		}
	}
}
