/**
 *
 * 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}
	}
  }

	// the nextmatch is in here
  #mail-index {
	  //span.et2_date_ro.et2_label {
	  //  font-size: 9px;
	  //}
	  table {
		  table-layout: fixed;
	  }
	td {
		padding: 0;
		//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;
		//	}
		//  }
		//  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;
		//  }
	}

	  tr.mail {//inside one mail row
			div.innerContainer,et2-description{
				margin:0;
				padding:0;
				width:100%;
			}

	  }

//no longer shown on mobile
	//.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;
}
