/**
 *
 * Mail - Mobile
 *
 * Please do NOT change app.css directly, instead change app.less and compile it!
 * Pixleegg Template app.css
 * @link http://www.egroupware.org
 * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
 * @author Hadi Nategh <hn@egroupware.org>
 * @package Mail
 * @version $Id: app.less 55033 2016-02-16 18:49:17Z hnategh $
 */



@import "../default/app.css";
/* import */
/* tablets and smartphones  */
@media all {
  div.mailDisplayContainer{
	margin-top: 30px;
	margin-left:0;
	height: auto;
  }

  #mail-display.et2_container {
	min-height: initial;
	padding: 0;
  }

  .mailDisplayAttachments > * {
	font-size: large !important;
  }
  /*compose dialog*/
  body {
	#mail-index_popupMainDiv, #mail-compose_popupMainDiv {
	  /* Hide entry number from display, doesn't make sense in mail */
	  & > .entry_id { display: none;}
	  .mail-d-h1{
		position: relative;
		padding-bottom: 15px;
		border-bottom: 1px solid silver;
		span {
		  //.mob-fontsize-l;
		}
		//.mob-fontsize-l;
		padding-top: 10px;
		font-weight: bold;
	  }
	  .mail-d-h2{
		padding-top: 5px;
		//.mob-fontsize-n;
		color: var(--sl-color-neutral-500, grey);
		a,span,.et2_label {
		  color: var(--sl-color-neutral-500, grey);
		  //.mob-fontsize-n;
		}
		a#mail-display_FROM>* {
		  color: var(--sl-color-neutral-950, black);
		  padding-top: 15px;
		  //.mob-fontsize-l;
		}

	  }
	  span.et2_details_title {
		color: var(--sl-color-primary-700, #26537c);
		//.mob-fontsize-n;
	  }
	  div#mail-display_mailDisplayHeadersFrom>* {
		color: var(--sl-color-neutral-950, black);
		padding-top: 15px;
	  }
	  .mailDisplayAttachments {
		position: initial;
		padding: 0;
		margin-top: 10px;
	  }
	  button[id="displayToolbar-delete"] {
		margin-left: 0;
	  }

	  .mailDisplay {
		position: initial;
		margin-top: 20px;
	  }
	  div#mail-view> div {
		height: 100%;
	  }

	  #view_mail-view {
		height: 100%;
		box-sizing: border-box;

		.mailContent {
		  flex-grow: 1;
		  iframe {
			border-style: none;
		  }
		}
	  }
	  #mail-view_toaddressdetails {
		color: var(--sl-color-primary-700, #26537c);
		float: right;
	  }
	  #tempPrintDiv {
		display:block;
		div:first-child {
		  height:auto !important;
		}
		td, textarea {
		  font-family: Verdana, Arial, Helvetica, sans-serif;

		}
		.td_display {
		  font-family: Verdana, Arial, Helvetica, sans-serif;
		  font-size: 120%;
		  color: var(--sl-color-neutral-950, #26537c);
		  background-color: var(--sl-color-neutral-0, white);
		  overflow-wrap: break-word;
		}
	  }

	}

	#mail-compose {
	  .cke_chrome {
		border:none;
		box-shadow: none;
	  }
	  & > et2-template::part(base) {
		display: flex;
		flex-direction: column;
	  }
	  .mailComposeBodySection, .mailComposeBodySection .mailComposeBody{
		flex-grow: 1;
	  }
	  .mailComposeHeaderSection > table {
		padding: 0;
		tr.mailComposeHeaders.subjectContainer td:first-child::after {
		  content: '';
		}
		tr.mailComposeHeaders {
		  span {
			//.mob-fontsize-n;
		  }
		  .subjectContainer:first-child::after{
			content: ':';
		  }
		  et2-dropdown et2-button:nth-child(n+2){
			padding: .5em 0;

		  }
		}
		div.et2_taglist > *, #mail-compose_subject, #mail-compose_mailaccount {
		  border:none;
		  box-shadow: none;
		  //.mob-fontsize-n;
		}
		#mail-compose_subject:focus {
		  outline-color: transparent;
		}
	  }
	  .tox-tinymce {border:none}
	  .dialogHeadbar{z-index: 2}
	}
  }

  #mail-index {
	margin-right: 0px;
	span.et2_date_ro.et2_label {
	  font-size: 9px;
	}
	td {
	  padding-top: 8px;
	  padding-bottom: 8px;
	  a[id^='mail-index_'][id$='fromaddress]']{
		//color:@gray_80;
		//.mob-fontsize-l;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		width: 95%;
		display: inline-block;
	  }

	  .icons {
		et2-image {
		  padding: initial;

		  img {
			padding: initial;
			height: initial;
		  }
		}
	  }
	  span[id^='mail-index_'][id$='attachments]'] {
		margin-left: auto;
		order: 1;
		text-align: initial;
		img {
		  width: 16px;
		  height: 16px;
		  padding: initial;
		}
	  }
	  et2-description[id^='mail-index_'][id$='subject]'] {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		width: 95%;
		//.mob-fontsize-n;
		font-weight: normal !important;
	  }
	  label[id^='mail-index_'][id$='date]']{
		padding-top: 0;
	  }
	}
	tr{
	  height:55px;
	  div.recent ,
	  span.recent ,
	  time.recent ,
	  a.recent,
	  div.unseen ,
	  span.unseen ,
	  time.unseen ,
	  a.unseen  {
		color: var(--sl-color-neutral-950, #26537c) !important;
		font-weight: bold;
	  }
	}
	.mail-index_quotabox {
	  position: absolute;
	  top: 8px;
	  right: 74px;
	  width: 200px !important;
	  z-index: 99;
	}
	.mail-index_vacation {
	  z-index: 99;
	  div {
		text-align: center;
	  }
	}

	#mail-index_nm div.search{
	  margin-top:3px;
	}

  }
  #mail-index_buttonmailcreate {display:none;}
  div.aclDetails {display:none;}
  #mail-acl_grid {
	.row{border-bottom: 1px solid silver;}
  }

  #view_date {
	margin-left: var(--sl-spacing-2x-large);
	text-align: right;
  }

  .fromBox {
	&::part(base) {
	  align-items: center;
	}

	et2-hbox {
	  padding-top: var(--sl-spacing-x-small);

	  &:first-of-type {
		padding-top: 0
	  }

	  &::part(base) {
		align-items: center;
	  }

	  et2-email::part(base) {
		justify-content: start;
	  }
	}


	et2-details {
	  max-width: 80vw;

	  &::part(summary-icon) {
		padding: var(--sl-spacing-x-small);
	  }

	  et2-email {
		&::part(base) {
		  overflow: clip;
		  padding: 0;
		  max-height: initial;
		  max-width: 70vw;
		}
	  }
	}
  }

  .attachments {
	&::part(summary-icon) {
	  padding: var(--sl-spacing-x-small);
	}

	&::part(summary) {
	  max-width: calc(100% - 3em);
	}

	et2-hbox[slot="summary"] {
	  width: 100%;

	  table.previewAttachmentArea {
		width: 100%;
		table-layout: fixed;

		tbody > tr > td:first-child {
		  box-sizing: border-box;
		  width: 85%;
		  padding-inline-end: 1em;
		}
	  }
	}

	table.previewAttachmentArea {
	  width: 100%;
	  table-layout: fixed;

	  et2-description-expose [part="content"] {
		width: 100%;
	  }
	  .download{
		max-width: fit-content;
	  }
	}
  }
}

.mailPreviewHeaders.smimeIcons {
  justify-content: start;
}
