.preview-header {
	border-bottom: 1px solid $grey;

}

.preview-header,
.x-plain {
	.preview-header-title,
	.preview-header-sentinfo,
	.preview-header-recipients,
	.k-preview-header-categories,
	.preview-header-meeting,
	.preview-header-task,
	.preview-header-attachmentbox {
		padding: 0 ($padding-large - 5px) 0 $padding-large;
	}
}

.preview-header .x-panel-body {
	/* we cannot set this padding on the .preview-header because it will fuck up the collapse/expand animation */
	padding-bottom: $padding-medium;
}

/******************************************************************************
 * Message Loading Failure
 ******************************************************************************/
 #zarafa-main-content-mail-preview .x-mask-error {
	border : none;
	background-color : $white;

	div {
		border : none;
		color: $grey6;
		background-color : $white;
		font-size : $font-size-large;
	}
}

/***************************************
 *  scrollbars for Webkit
 ***************************************/
.preview-header ::-webkit-scrollbar {
	width: 15px;
	height: 15px;
}

.preview-header ::-webkit-scrollbar-button:vertical {
	border: 1px solid $white;
	background-color: $white;
	background-repeat: no-repeat;
	height: 15px;
	border-radius: 2px;
}
.preview-header ::-webkit-scrollbar-button:vertical:hover {
	border: 1px solid $grey2;
}
.preview-header ::-webkit-scrollbar-button:vertical:increment {
	/* this is the arrow_down_s.png icon */
	/* putting this webkit rule in app-icons.extensions.json would break the rule on IE11 */
	/* so we're cheating a little and adding this one here */
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAADCAYAAABbNsX4AAAAHElEQVR4AWMKDAz8j46ZGBgYGBlQASMTjIFMAwD7JAnFXwG1BAAAAABJRU5ErkJggg==);
	background-repeat: no-repeat;
	background-position: center center;
}
.preview-header ::-webkit-scrollbar-button:vertical:decrement {
	/* this is the arrow_up_s.png icon */
	/* putting this webkit rule in app-icons.extensions.json would break the rule on IE11 */
	/* so we're cheating a little and adding this one here */
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAADCAYAAABbNsX4AAAAGElEQVR4AWMIDAyE4f8wNkIAgRnAAugYAIFDFzUC5hyIAAAAAElFTkSuQmCC);
	background-repeat: no-repeat;
	background-position: center center;
}
.preview-header ::-webkit-scrollbar-button:vertical:increment:disabled {
	background-color: red;
}
.preview-header ::-webkit-scrollbar-button:vertical:active {
	background-color: $grey3;
}
.preview-header ::-webkit-scrollbar-thumb {
	border: none;
	border-radius: 2px;
}

/***************************************
 *  scrollbars for IE
 ***************************************/
.preview-header {
	scrollbar-base-color: $background-color-main;
	scrollbar-arrow-color: #333;
	scrollbar-shadow-color: $background-color-main;
	scrollbar-darkshadow-color: $background-color-main;
	scrollbar-highlight-color: $background-color-main;
	scrollbar-3dlight-color: $background-color-main;
}


/* the expand/collapse button */
$preview-header-collapse-button-width	: $font-line-height-large;
$preview-header-collapse-button-height	: $preview-header-collapse-button-width;
$preview-header-collapse-icon-width	: 9;
$preview-header-collapse-icon-height	: 5;

.preview-header-collapse {
	float: right;
	width: $preview-header-collapse-button-width;
	height: $preview-header-collapse-button-height;
	padding: $padding-small;
	margin-top: (-$padding-small);
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.preview-header-titlebox,
.preview-header-title .preview-title {
	font-size: $font-size-large !important;
	line-height: $font-line-height-large;
	min-height: $font-line-height-large; /* set a min-height, so mails without a subject will not look strange) */
	margin-right: 5px;
}

/* Subject field */
.preview-header-title .preview-title {
	font-weight: bold;
}

.preview-header-titlebox {
	padding: ($header-height - $font-line-height-large )/2 0;
}
.preview-header-senderbox .preview-from {
	display: block;
	padding-bottom: $padding-medium;
}
.preview-header-recipients, .preview-header-meeting, .preview-header-attachments {
	display: block;
	margin-top: $padding-medium;
}

.preview-header-recipients .preview-recipient-title,
.preview-header-attachments .preview-attachment-title {
	float: left;
}

.preview-attachment-title.icon_paperclip {
	width: 15px;
	height: 17px;
}

.preview-header-recipients .preview-recipient-title,
.preview-header-attachments .preview-attachment-title,
.preview-header-meeting .preview-when .preview-when-title,
.preview-header-meeting .preview-proposed .preview-proposed-title,
.preview-header-meeting .preview-location .preview-location-title {
	display: inline-block;
	font-weight: bold;
	padding-right: $padding-medium;
}

.preview-header-sentinfo .preview-from {
	font-size: 16px;
}

.preview-from .zarafa-emailaddress-link {
	display: inline-block;
	margin-top: 1px;
}

.preview-header-sentinfo .preview-timestamp {
	font-size: $font-default-size;
	color: $preview-panel-timestamp;
}

/* Todo sassify me */
.preview-header-sender-initial {
	border: 1px solid;
	color: $kopano-blue;
	border-radius: 50%;
	-moz-border-radius: 50%;
	display: inline-block;
	line-height: 40px;
	margin-right: 7px;
	text-align: center;
	width: 40px;
	height: 40px;
	@include basefont($font-size-extra-large);
	float: left;
	user-select: none;
}

.preview-header-sender-image {
	background-size: cover;
    background-position: center;
	background-repeat: no-repeat;
	border-radius: 50%;
	-moz-border-radius: 50%;
	display: inline-block;
	min-height: 40px;
	margin-right: 7px;
	text-align: center;
	width: 40px;
	float: left;
}

.preview-body {
	padding: 0;
}

/* Overflow for recipients / attachments */
.preview-header-recipients .preview-recipient-data,
.preview-header-attachments .preview-attachment-data {
	overflow-y: auto;
}

/* Attachments: */
.preview-header-attachmentbox {
	line-height:18px;
	padding-top:2px;
}

/* Force width/height of iframe to be 100% so the content fits the iframe */
.preview-iframe {
	height: 100%;
	width: 100%;
}

/* Top header infobox  */
.preview-header-extrainfobox {
	background-color: $light-blue;
	margin-bottom: $padding-medium;
	padding: $padding-medium $padding-large $padding-medium $padding-large;
	margin-top: $padding-small;
}

/* Corrupt message case */
.preview-header-extrainfobox-item-over {
	cursor: pointer;
}

/* Preview header email address */
span.zarafa-emailaddress-link {
	cursor: pointer;
}

span.zarafa-emailaddress-link:hover {
	// FIXME: SASS Color
	color: #0000FF;
	text-decoration: underline;
}

.preview-title-hr {
	margin: 2px 0;
}

.preview-recipient-data {
	word-wrap: break-word;
}

.preview-header-attachments .zarafa-attachment-link {
	// FIXME: sassify
	background-color: #ebeaeb;
	padding: 2px 5px;
	margin: 1px;
	cursor: pointer;
	border-radius: 1px;
}

.preview-header-attachments .zarafa-attachment-link-over {
	// FIXME: sassify
	background-color: #ddd;
}

.preview-header-task .preview-from {
	.task-info-container {
		span {
			min-width: 80px;
			padding-top: 5px;
			display: inline-block;
			&.minwidth120{
				min-width: 120px;
			}
			&.label{
				color: #7F7F7F;
			}
		}
	}

	input {
		&.zarafa-task-date-completed {
			border: 1px solid #dadada;
			width: 150px;
			padding: 3px;
		}
	}
}

.task-attachment-info-panel {
	.preview-attachment-title {
		color: #7F7F7F;
	}
	.preview-header-attachments {
		margin-top: 0px;
	}
}

/* x-plain preview used for e.g. displaying appointments in search preview */

.x-plain {

	.zarafa-search-previewpanel-toolbar {
		border-bottom: none;
	}

	.preview-body .x-plain {

		.x-plain-body {

			.x-fieldset {
				padding: 10px;
				border: none;
			}

			.x-form-item-label {
				text-align: left;
				font-weight: bold;
			}
		}
	}
}

/********************
 * Conversation view
 *******************/
.zarafa-mailconversationpanel {
	.x-panel-header{
		background: $white;
		font-size: $font-size-large;
		font-weight: bold;
	}

	> .x-panel-bwrap > .x-panel-body {
		/* background: $grey !important; */
		padding: $padding-medium;


		.k-conversation-item {
			margin-bottom: $padding-large;
			margin-right: 3*$padding-extra-extra-large;

			.x-panel-tbar {
				border-left: 1px solid $grey;
				border-right: 1px solid $grey;
				width: auto !important;

				.x-toolbar {
					width: auto !important;
				}
			}

			.x-panel-tbar .x-toolbar,
			.x-panel-header,
			.x-panel-body {
					background: #fcfcfc !important;
			}
			.x-panel-header{
				border-top-left-radius: $padding-large;
				border-top-right-radius: $padding-large;
				border-bottom: none;
			}
			&.x-panel-collapsed {
				border-bottom: 1px solid $grey;
			}
			.x-panel-body{
				border-bottom-left-radius: $padding-large;
				border-bottom-right-radius: $padding-large;
			}
			.x-panel-header-text {
				display: flex;

				.k-avatar {
					background: red;
					color: $white;
					font-size: $font-size-large + 1;
					font-weight: bold;
					border-radius: $font-line-height-extra-large / 2;
					width: $font-line-height-extra-large;
					height: $font-line-height-extra-large;
					text-align: center;
					line-height: $font-line-height-extra-large;
					margin-right: $padding-large;
				}
				.k-sender {
					flex: 1;
					line-height: $font-line-height-extra-large;
					font-size: $font-size-large - 1;
					font-weight: bold;
				}
				.k-date {
					color: $grey;
					line-height: $font-line-height-extra-large;
				}
			}
		}

		.k-conversation-item.k-own-message {
			margin-right: 0;
			margin-left: 3*$padding-extra-extra-large;

			.x-panel-tbar .x-toolbar,
			.x-panel-header,
			.x-panel-body {
				background: #fafffa !important;
			}
		}
	}
}
