@import 'variables.less';

.no_padding
{
	padding: 0;
}
.no_pad_right
{
	padding-right: 0;
}
.mail_holder
{
	.mail_menu_block
	{
		.mail_menu
		{
			background-color: #373943;	
			padding: 20px;
			min-height: 800px;
			max-height: 800px;		
			overflow-y: auto;
			.compose_block	
			{
				text-align: left;
				padding-bottom: 30px;
				.btn
				{
					padding: 0px 40px;
					height: 35px;
					font-family: @main-font;
					font-weight: 300;
					letter-spacing: 0.70px;
					font-size: 13px;
					line-height: 35px;
					border-radius: 2px;
					background-color: @primary-color;
					border-width: 0;
					i 
					{
						padding-right: 10px;
					}
				}
			}
			ul.menu_list
			{
				li 
				{
					a 
					{
						color: #FFFFFF;					
						display: inline-block;
						width: 100%;
						line-height: 45px;
						text-align: left;
						text-decoration: none;
						border-bottom: 1px solid #3b3e46;
						font-weight: 300;
						font-size: 13px;
						padding-left: 15px;
						i 
						{
							color: #FFFFFF;
							font-size: 16px;
							display: inline-block;
							padding-right: 15px;	
							padding-left: 15px;		
							float: right;
							padding-top: 15px;			

						}
						&:hover
						{
							background-color: #3b3e46;
						}		
					}
					&:last-child
					{
						a 
						{
							border-bottom-width: 0;
						}
					}
				}
			}
			ul.recent_activity
			{

				.heading
				{
					font-size: 16px;
					color: @content-color;
					margin-top: 30px;
					margin-bottom: 15px;
					padding-bottom: 5px;
					border-bottom: 1px dotted #3b3e46;
					span 
					{
						a 
						{
							text-decoration: none;
							font-size: 14px;
							padding-right: 15px;
							color: @content-color;
							&:hover
							{
								color: lighten(@content-color,50%);
							}
						}
					}
				}
				li 
				{
					a 
					{
						text-decoration: none;
						.img_holder
						{
							width: 30px;
							img 
							{
								width: 100%;
								border-radius: 50%;
								float: left;
							}
						}
						h2,p
						{
							margin-left: 40px;
							font-size: 12px;
						}
						h2 
						{
							font-size: 14px;
							margin-bottom: 5px;
							color: #FFFFFF;
							margin-top: 0;
						}
						p 
						{
							color: lighten(@content-color,5%);
							white-space: wrap;
							font-weight: 300;							
							overflow: hidden;
							display:block;							
							max-width:190px;	
							height: 50px;						
							text-overflow: ellipsis;
						}

					}
				}				
			}

		}	

	}
	.mail_body
	{
		.mail_list
		{
			border-right: 1px solid @dark-border;		
			position: relative;
			min-height: 800px;
			background: #FFFFFF;
			border-bottom: 1px solid @dark-border;				
			.search_bar_block
			{
				
				display: inline-block;
				height: 100px;						
				background: lighten(@dark-border,25%);
				min-height: 80px;
				border-top:1px solid @dark-border;
				border-bottom:1px solid @dark-border;
				position: absolute;
				top: 0;
				width: 100%;
				z-index: 99;

				.search_icon_block
				{					
					padding:0px 20px;
					position: relative;
					input 
					{
						max-width: 300px;
						margin: 0 auto;
						margin-top: 30px;
						border-radius: 30px;
						border-width: 0;
						position: relative;	
						border:1px solid @dark-border;	
						padding-right: 40px;	
						box-shadow:none;					
					}	
					span
					{
						width: 100%;
						max-width: 300px ;															
						position: relative;					
						text-align: right;
						margin: 0 auto;
						padding-right: 20px;
						color: darken(@dark-border,5%);
						font-size: 18px;
						float: none;
						margin: 0 auto;
						margin-top: -35px;

					}
					.form-control
					{
						&:focus
						{
							-webkit-box-shadow:none;
							-moz-box-shadow:none;
							box-shadow:none;
							border:1px solid darken(@dark-border,10%);
						}
					}
				}
			}
			.mails_holder
			{
				padding: 0px;				
				max-height: 799px;
				overflow: auto;	
				position: relative;
				z-index: 0;
				padding-top: 99px;	
				margin-bottom: 0;			
				li 
				{
					a 
					{

						display: inline-block;
						width: 100%;					
						border-bottom: 1px solid @light-border;						
						text-decoration: none;					
						padding: 0px 0px;
						background: #FFFFFF;
						&:last-child
						{
							border-bottom-width: 0;
						}				
						.message_list_block
						{

							padding: 20px;									
							&.unread
							{
								background: lighten(@light-border,3%);
							}
							&.read
							{
								opacity: 0.5;

							}
							&.active
							{
								background-color: @primary-color;
								.right
								{
									margin-left: 60px;
									.name,.right_details,h4 
									{
										color: #FFFFFF;
									}								
								}

								.message_info
								{
									color: #FFFFFF;																
								}

							}
						}
						.left 
						{
							.avatar_holder
							{
								width: 50px;							
								height: 50px;							
								float: left;							
								img 
								{
									width: 100%;
									height: 100%;
									border-radius: 50%;
									border:2px solid @light-border;
								}
							}
						}
						.right
						{
							margin-left: 60px;
							.name
							{
								font-size: 14px;
								color: @primary-color;
								display: inline-block;
								white-space: nowrap;
								width: 120px;
								overflow: hidden;								
								white-space: nowrap;

							}
							.right_details
							{
								color: darken(@dark-border,10%);
								font-size: 12px;
								i 
								{
									font-size: 14px;
								}
								i.status
								{
									font-size: 10px;
								}
								li 
								{
									padding: 2px;
								}
							}
							h4 
							{
								margin: 0;
								font-size: 13px;															
								color: @heading-color;
								height: 20px;
								overflow: hidden;
								white-space: nowrap;
								font-weight: 300;
								text-overflow: ellipsis;
							}
						}						

					}
				}
			}
		}
		.mail_brief_holder
		{
			background: #FFFFFF;
			border:1px solid @dark-border;
			border-left-width: 0;			
			min-height: 800px;
			max-height: 800px;		
			overflow-y: auto;
			img 
			{
				width: 100%;
				margin-bottom: 15px;
			}
			.heading_block
			{
				min-height: 99px;				
				border-bottom: 1px solid @dark-border;
				padding:10px 20px;
				padding-top: 30px;
				display: table;
				width: 100%;
				h1 
				{
					margin: 0;
					font-size: 20px;
					border-left: 4px solid @primary-color;
					padding-left: 15px;
					float: left;	
					margin-bottom: 10px;
					margin-top: 5px;
					color: #000000;
					span
					{
						font-size: 12px;
						display: block;
						padding-top: 5px;
					}				
				}
				.action_buttons
				{
					.btn:hover
					{
						background-color: @light-border;
					}
					i 
					{
						font-size: 18px;	
						color: darken(@dark-border,35%);
					}
				}				
			}
			.mail_brief_body
			{
				padding: 20px;
				color: @content-color;
				h2,h1,h2,h3,h4,h5,h6
				{
					color: @heading-color;
				}
				.attachment
				{
					
					li 
					{
						border-width: 0;
						padding: 0;
						a 
						{
							display: block;
							text-decoration: none;
							background: #FFFFFF;
							padding:10px 20px;
							border: 1px solid @dark-border;
							color: @heading-color;
							i 
							{
								font-size: 16px;
								padding-right: 5px;
							}
							&:hover
							{
								background-color: lighten(@light-border,4%);
								color: @primary-color;
							}
							span i
							{
								font-size: 16px;
								float: right;
								line-height: 1;								
							}
						}
						
					}
				}
				textarea
				{
					background: lighten(@light-border,5%);
					resize: none;
				}
				.reply
				{
					margin-top: 10px;
					float: right;
					font-size: 14px;
				}
			}

		}
	}

}