.panels,
.panel_helper {
	//font-size: 0;
	height: 100%;
	//white-space: nowrap;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	//overflow: auto;
}

html.non-adjustable .panels {
	height: auto;
	
	.panel {
		flex-grow: 0 !important;
	}
}

// .panels .panel_helper {
	// display: inline-block;
	// vertical-align: top;
	// .box-sizing;
// }

.panel {
	border-radius: 5px;
	box-shadow: -1px 0 2px rgba(0,0,0,0.11);
	font-size: 9pt;
	height: 100%;
	position: relative;
	white-space: normal;
	
	flex-basis: auto;
	flex-grow: 1;
	background: #fff;

	.box-sizing;
	
	.rtl & {
		box-shadow: 1px 0 2px rgba(0,0,0,0.11);
	}
	
	.panel_content {
		height: 100%;
		
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		
		.box-sizing;
		//.resize-compensation-top(@theme-toolbar-height); /* toolbar offset*/
		
		.resizer {
			background: transparent;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
		}
	}
	
	.middle_bar {
		.box-sizing;
		
		height: 100%;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		overflow: hidden;
		
		html.non-adjustable & {
			overflow: visible;
		}
	}
	
	&.center_panel .panel_top {
		background: #f1f1f1;
	}

	.panel_top {
		border-bottom: 1px solid #e2e2e2;
		color: #555566;
		padding: 6px 10px 6px 34px;
		white-space: nowrap;

		html.rtl & {
			padding-left: 10px;
			padding-right: 34px;
		}

		.custom_checkbox {
			margin-top: 6px;
			margin-left: -20px;
			margin-right: 8px;
			vertical-align: top;

			html.rtl & {
				margin-left: 8px;
				margin-right: -20px;
			}
		}
	}
	
	.panel_center {
		height: 100%;
	}
	
	.panel_bottom {
		background-color: #ffffff;
		border-radius: 0 0 4px 4px;
		border-top: 1px solid #E2E2E2;
		//height: 26px;
		line-height: 26px;
		padding: 10px 20px;
	}
	
	&.item_viewer {
		.box-sizing(content-box);
	}
	
	.theme-panel();
}

.panel.item_viewer {
	background: #ffffff;
	border-radius: 5px;
	//margin: 0 0 0 4px;
	overflow: hidden;
    padding: 0px;
	position: relative;
	z-index: 1;
	
	.screens > & {
		width: 100%;
	}
	
	html.rtl & {
		margin-left: 0px;
		margin-right: -1px;
		padding-left: 0;
		padding-right: 2px;
	}
	
	.notification {
		color: #cccccc;
		display: block;
		font-size: 18px;
		padding: 26px 20px;
		text-align: center;
	}
	
	.attachments {
		color: #3d3d3d;
		padding: 20px;

		.download_menu {
			margin-bottom: 10px;
			
			.content {
				margin-left: 24px;
				max-height: 0px;
				overflow: hidden;
				
				.transition(max-height 500ms ease 500ms);
				
				.link {
					margin-top: 10px;
				}
			}
			
			&:hover .content {
				max-height: 200px;
				
				.transition(max-height 500ms ease 0s);
			}
			
			.link {
				display: inline-block;
				
				&.hover {
					color: #333333 !important;
					text-decoration: none !important;
				}
				
				.icon {
					color: @theme-common-link-color;
					display: none;
					
					.init-icon-font();
					
					&:before {
						display: inline-block;
						font-size: 20px;
						height: 100%;
						margin: -6px -3px 0px;
						vertical-align: middle;
						width: 100%;
					}
				}
				
				&.hover .icon {
					display: inline-block;
					float: left;
					height: 16px;
					margin-right: 8px;
					vertical-align: middle;
					width: 16px;
					
					&:before {
						content: "\e642";
					}
				}
				
				.text {
					overflow: hidden;
				}
			}
		}
	}
}

.items_list {
	.section_title {
		color: #fff;
		cursor: default;
		display: block;
		font-weight: bold;
		padding: 10px 17px 10px 17px;
		//text-shadow: 0px 1px 0px #fff;
		text-transform: uppercase;
		white-space: nowrap;
		
		html.rtl & {
			padding-left: 0px;
			padding-right: 12px;
		}
		
		.control {
			float: right;
		}
	}
	
	.use_threads .threaded {
		background: #f9f8f6;
		border-left: 5px solid #e3e3e3;
		max-height: 0px;

		html.rtl & {
			border-left: 0px;
			border-right: 5px solid #e3e3e3;
		}

		&.show {
			max-height: 80px;

			.transition(max-height 200ms ease-out);
		}

		.link {
			color: #4477bb;

			&:hover {
				color: #c74747;
			}
		}
	}
	
	.not_use_threads .item .from .other_senders,
	.not_use_threads .item .from .plus_more_senders {
		display: none;
	}
	
	.use_threads .item .from .other_senders {
		margin-left: -5px;
	}

	.use_threads .item .from .plus_more_senders {
		opacity: 0.5;
	}

	.item {
		background: @theme-list-item-bg;
		color: #3d3d3d;
		cursor: default;
		font-weight: normal;
		line-height: 140%;
		max-height: 80px;
		overflow: hidden;
		position: relative;
		white-space: nowrap;
		
		.from, .subject {
			.fadeout();
		}
		
		&.unseen {
			background: @theme-list-unseen-item-bg;
			font-weight: bold;
			
			.from, .subject {
				.fadeout();
			}
		}
		
		&.deleted {
			.transition(max-height 250ms ease);

			max-height: 0px !important;
			overflow: hidden;
		}
		
		&.checked {
			background: @theme-list-checked-item-bg;
			
			.from, .subject {
				.fadeout();
			}
			
			.custom_checkbox .icon {
				border-color: mix(@theme-list-checked-item-bg, #000, 70%);
				box-shadow: 0 1px 0 lighten(@theme-list-checked-item-bg, 15%);
			}
		}
		
		&.selected {
			background-color: @theme-list-selected-item-bg;
			color: @theme-list-selected-item-color;
			
			.from, .subject {
				.fadeout();
			}
			
			.custom_checkbox .icon {
				border-color: mix(@theme-list-selected-item-bg, #000, 70%);
				box-shadow: 0 1px 0 lighten(@theme-list-selected-item-bg, 15%);
			}
		}
		
		.item_content {
			border-bottom: 1px solid #e8e8e8;
			padding: 14px 16px 14px 14px;

			html.rtl & {
				padding-left: 16px;
				padding-right: 14px;
			}
		}
		
		.controls {
			display: inline-block;
			float: left;
			margin: 1px 8px 0px 0px;

			html.rtl & {
				float: right;
				margin-left: 8px;
				margin-right: 0px;
			}
		}
		
		.data {
			display: block;
			overflow: hidden;
			
			&.table {
				display: flex;
				
				& > span {
					flex-grow: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					padding: 0px 10px;
					
					&.fixed {
						flex-grow: 0;
					}
				}
			}
		}
		
		.group,
		.size,
		.date,
		.attachments {
			color: #999999;
			display: inline-block;
			float: right;
			font-size: 8pt;
			margin-left: 4px;

			html.rtl & {
				float: left;
				margin-left: 0px;
				margin-right: 4px;
			}
		}
		
		.size,
		.date {
			margin-top: 1px;
		}
		
		.attachments {
			margin-top: -2px;

			&.has_ical_attachment {
				margin-top: -1px;
			}
		}
		
		&.selected .size,
		&.selected .date {
			color: @theme-list-selected-item-color;
		}
		
		.title {
			display: block;
			margin-bottom: 10px;
		}
		
		.separator {
			clear: both;
		}
	}
	
	.uploader_mask {
		.box-sizing;
		.transition(opacity 250ms ease 0s);

		background: #fffdd6;
		color: #d3b910;
		font-size: 18pt;
		height: 100%;
		left: 0px;
		opacity: 0;
		padding: 11px;
		position: absolute;
		text-align: center;
		top: 0px;
		visibility: hidden;
		width: 100%;
		
		&.active {
			visibility: visible;
			
			.opacity(0.5);
		}
		
		.inner {
			.box-sizing;

			border: 3px dashed #e2da36;
			border-radius: 5px;
			height: 100%;
		}
	}
}

.items_list_group_style() {
	@group-item-font-color: #777777;
	@group-item-font-shadow: 0px 1px 0px #ffffff;
	
	.title_selectable_text() {
		color: @group-item-font-color;
		cursor: pointer;
		text-shadow: @group-item-font-shadow;

		&:hover {
			color: darken(@group-item-font-color, 20%);

			.icon {
				color: inherit;
			}
		}
	}
	
	.items_list {
		.item {
			background: none;
			font-size: 10pt;
			max-height: inherit;
			
			& > .title {
				color: lighten(@group-item-font-color, 20%);
				cursor: default;
				display: block;
				font-size: 11pt;
				font-weight: normal;
				line-height: normal;
				margin-bottom: 0px;
				outline: none;
				padding-top: 5px;
				padding-bottom: 7px;
				padding-left: 16px;
				text-decoration: none;
				white-space: nowrap;

				.name {
					display: block;
					margin-right: 10px;
					overflow: hidden;
					.fadeout();

					html.rtl & {
						margin-left: 10px;
						margin-right: 0px;
					}
				}
				
				&.droppableHover .name {
					.fadeout();
				}

				.text {
					display: inline-block;
					vertical-align: bottom;
				}

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

					.init-icon-font();
					
					&:before {
						display: inline-block;
						height: 100%;
						font-size: 20px;
						width: 100%;
					}
				}
			}
			
			&.canSelect {
				& > .title {
					.title_selectable_text();

					&.virtualEmpty .title,
					&.virtualEmpty .title:hover {
						color: #aaaaaa;
					}
				}
				
				& > .title.ui-state-disabled {
					cursor: pointer !important;
				}
			}

			&.selected {
				& > .title {
					background: @theme-group-style-selected-item-bg; 
					color: #ffffff !important;

					//.name {
					//	.fadeout();
					//}

					//&.droppableHover .name {
					//	.fadeout();
					//}
					
					.theme-group-style-selected-item();
				}
			}
			
			.count {
				display: inline-block;
				float: right;
				margin-right: 0px;
				margin-top: 0px;
				padding: 2px 10px 1px;
				line-height: 1.3;

				html.rtl & {
					float: left;
					margin-left: 10px;
					margin-right: 0px;
				}
			}
			.count.total {
				color: #ececec;
			}
			.count:first-child {
				margin-right: 10px;
			}
			.count.unseen:hover {
				border-radius: ~"11px/10px";

				.theme-clear-panel-list-item-unseen-count-hover();
			}

			&.selected > .title .count.unseen {
				border-radius: ~"11px/10px";

				.theme-clear-panel-list-item-count();
			}

			&.selected > .title .count.unseen:hover {
				.theme-clear-panel-list-item-count-hover();
			}
		}
		
		&.collapsible {
			.item.accordion {
				.collapse_handler {
					display: inline-block;
					margin-left: -4px;
					vertical-align: middle;
					width: 12px;

					.init-icon-font();

					&:before {
						display: inline-block;
						font-size: 16px;
						height: 100%;
						vertical-align: middle;
						width: 100%;
					}

					&.expanded:before {
						content: "\e66d";
					}

					&.collapsed:before {
						content: "\e670";
					}
				}

				&.canNotSelect .collapse_handler {
					.title_selectable_text();
				}

				.children .title {
					max-height: 29px;
					
					.transition(~"max-height 300ms ease 0ms, opacity 200ms ease 0ms, padding 300ms ease 0ms");
				}

				&.collapsed .children .title {
					max-height: 0px;
					opacity: 0;
					overflow: hidden;
					padding-bottom: 0px;
					padding-top: 0px;
				}
			}
		}
	}
	
	.cssanimations & .item .title.recivedAnim {
		.animation(highlight 0.5s linear);
	}
	
	.item .title.droppableHover {
		background: desaturate(darken(@theme-group-style-item-bg, 5%), 10%) !important;
		color: #626262 !important;
		text-shadow: 0px 1px 0px #ffffff !important;
	}
	
	.item.selected > .title.droppableHover {
		background: desaturate(darken(@theme-group-style-selected-item-bg-color, 5%), 10%) !important;
		color: #ffffff !important;
		text-shadow: 0px 1px 0px #678197 !important;
	}
}

/* For draggable items in lists */
.draggable {
	height: 0px; /* don't change */
	width: 0px; /* don't change */
	
	.content {
		cursor: move;
		height: 200px;
		margin: -100px 0px 0px -100px;
		width: 200px;
		
		.count-text {
			.transparent-background-color(#000000, 0.5);
			
			border-radius: 2px;
			color: #ffffff;
			display: inline-block;
			line-height: 100%;
			margin: 100px 0px 0px 100px;
			min-width: 30px;
			padding: 6px 10px;
			white-space: nowrap;
			z-index: 10002;
		}
	}
}