body {
	// html.screen-compose & {
	// 	min-height: 400px;
	// }

	// html.screen-compose-cc &,
	// html.screen-compose-bcc & {
	// 	min-height: 450px;
	// }
	
	// html.screen-compose-cc.screen-compose-bcc & {
	// 	min-height: 500px;
	// }
	
	// html.screen-compose-attachments & {
	// 	min-height: 615px;
	// }
	

	// html.screen-compose-cc.screen-compose-attachments &,
	// html.screen-compose-bcc.screen-compose-attachments & {
	// 	min-height: 475px;
	// }
	
	// html.screen-compose-cc.screen-compose-bcc.screen-compose-attachments & {
	// 	min-height: 715px;
	// }

	html.native-android-browser.screen-compose & {
		height: 400px;
	}

	html.native-android-browser.screen-compose-cc &,
	html.native-android-browser.screen-compose-bcc & {
		height: 450px;
	}
	
	html.native-android-browser.screen-compose-cc.screen-compose-bcc & {
		height: 500px;
	}
	
	html.native-android-browser.screen-compose-attachments & {
		height: 615px;
	}

	html.native-android-browser.screen-compose-cc.screen-compose-attachments &,
	html.native-android-browser.screen-compose-bcc.screen-compose-attachments & {
		height: 475px;
	}
	
	html.native-android-browser.screen-compose-cc.screen-compose-bcc.screen-compose-attachments & {
		height: 715px;
	}
}

/*=== Compose screen CSS ===*/
.panel.compose {
	background: #f9f9f9;
	box-shadow: -1px 0 4px rgba(0, 0, 0, 0.23);
	display: inline-block;
	width: 100%;
	
	.panel.left_panel,
	.panel.right_panel {
		
		.panel_content {
			.resize_compensation_top(0px);
		}
	}
	
	.left_panel {
		//width: 80%;
		//float: left;
		border-radius: 0px;
		box-shadow: none;
		border-right: 1px solid #E2E2E2;
		.box-sizing();
		
		.middle_bar {
			//.resize_compensation_top(130px);
			.resize_compensation_top(0px);
			.resize_compensation_bottom(155px);
		}
		
		.panel_top {
			border: 0px;
			background: none;
			padding: 6px;
		}
		
		.panel_center {
			padding-top: 1px;
			background: none;
			min-height: 200px;
		}
		
		.panel_bottom {
			background: none;
			border: 0px;
			border-radius: 0px;
			height: auto;
			//padding: 0px;
			
			//.hint {
			//	color: #929292;
			//	text-shadow: 0 1px 0 #FFFFFF;
			//	display: inline-block;
			//	padding: 7px 15px 0 15px;
			//}
		}
		
	}
	
	.right_panel {
		width: 20%;
		border-radius: 0px;
		box-shadow: none;
		position: relative;
		overflow: hidden;
		
		.middle_bar {
			.resize_compensation_top(47px);
			
			.panel_top {
				padding: 6px 10px;
				text-align: center;
				
				.uploader_button {
					.link();
				}
				
				.text {
					display: block;
				}
			}
		}
	}
	
	.html_editor {
		padding-left: 6px;
		padding-right: 6px;
		margin-top: -6px;
		padding-top: 6px;

		.workarea {
			border: 1px solid #CCCCCC;
			border-radius: 0;

			.crea-content-editable {
				padding: 14px;
				min-height: 100px !important;
			}
		}
	}
	
	.panel_content > .toolbar {
		background: #d7f0c3;
		filter: none;
		border-bottom: 1px solid #cacfd5;

		.text {
			display: inline-block;
		}

		.back .text {
			display: none;
		}

		.icon {
			display: none;
		}

		.back .icon,
		.new_window .icon,
		.confirmation .icon {
			display: inline-block;
		}
		
		.new_window {
			border: 0px;
			background: transparent;
			box-shadow: none;
			float: right;

			html.rtl & {
				float: left;
			}
		}
	}
	
	.notice {
		padding: 8px 11px;
		background: #FFFFC5;
		color: #B5AD94;
		border-bottom: 1px solid #F5EDD4;
	}
	
	table.fields {
		width: 100%;
		margin-top: 10px;
		
		table.fields {
			margin-top: 0px;
		}
		
		td {
			padding: 0px 0px 10px;
			
			td {
				padding: 0px;
			}
		}
		
		.label {
			text-align: right;
			width: 60px;
			padding-right: 6px;

			html.rtl & {
				text-align: left;
			}
		}
		
		.input {
			padding: 8px 10px;
			font-size: 11pt;
			border-radius: 2px;
			
			min-width: 100%;
		    width: 100px !important;
		}
		
		textarea.input {
			width: 100%;
			height: 300px;
		}
		
		.link {
			text-decoration: underline;
			cursor: pointer;
			
			&:hover {
				color: #2B5877;
				text-decoration: none;
			}
		}
		
		.from,
		.to,
		.cc,
		.bcc,
		.subject {
			font-size: 11pt;
		}
		
		.to {
			.link {
				display: inline-block;
				font-size: 11pt;
				color: #4477bb;

				&:hover {
					color: #24579b;
				}
			}
			
		}
		
		.show_bcc,
		.show_cc {
			margin-left: 10px;
		}
		.cc, .bcc, .to {
			.inputosaurus {
				padding: 0px;

				.scroll-inner {
					max-height: 100px;
				}
			}
		}
	}
	
	.buttons {
		
		.button.send {
			background: none repeat scroll 0 0 #88CF50;
			border: 1px solid #7BBE45;
			border-radius: 5px 5px 5px 5px;
			color: #FFFFFF;
			display: inline-block;
			font-size: 13pt;
			font-weight: bold;
			padding: 10px 30px;
			box-shadow: none;
			text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
			margin: 10px 11px;
			cursor: pointer;
			
			&.disabled {
				cursor: default;
				opacity: 0.5;
			}
		}
	}
	
	.attachments {
		z-index: 1;
		//float: right;
		text-align: center;
		
		.uploader_mask {
			.box-sizing;
			.transition(opacity 250ms ease 0s);

			background: #FFFDD6;
			padding: 11px;
			color: #D3B910;
			font-size: 18pt;
			text-align: center;
			opacity: 0;
			position: absolute;
			top: 0px;
			left: 0px;
			height: 100%;
			width: 100%;
			visibility: hidden;

			&.active {
				visibility: visible;
				.opacity(0.5);
			}

			.inner {
				.box-sizing;

				height: 100%;
				border: 3px dashed #E2DA36;
				border-radius: 5px;
			}
		}
		
		.items_list {
			height: 100%;
			text-align: left;
			max-height: 215px;
			
			html.rtl & {
				text-align: right;
			}
			
			.button.download {
				display: none;
			}
		}
		
		//.attachments_container {
		//	padding: 20px;
		//}
	}

	.theme-compose-screen();
}
/*=== END Compose screen CSS ===*/
