/* ==========================================================================
   SimX EMAIL CLIENT - real platform styles, compiled by hand from LESS
   --------------------------------------------------------------------------
   Sources (nothing here was designed, it was all resolved out of these):
     O8.SOCOM.Server/Content/socom/email-simulation.less   (the module)
     O8.SOCOM.Server/Content/socom/varibles.less           (variable values)
     O8.SOCOM.Server/Content/socom/window.less             (.window-content*)
     O8.SOCOM.Server/Content/socom/z-index.less            (top bar z-index)
     O8.SOCOM.Server/Content/socom/simulation.less         (.html-content-container)
     O8.SOCOM.Server/Content/socom/themeFix.less           (.no-copy)
     O8.SOCOM.Server/Content/theme/less/general.less       (inherited body font)
     O8.SOCOM.Server/Content/Site.less                     (global p rule)
     O8.SOCOM.Server/Content/bootstrap/*                   (.row/.col-xs-12/.btn subset)
     O8.SOCOM.Server/Content/angular-material.layout-attributes.css ([layout]/[flex])
     O8.SOCOM.Server/Content/angular-material.css          (.md-virtual-repeat-*)

   LESS variables substituted with their declared values (varibles.less):
     @emailTopBarHeight      44px
     @window-grey            #a7adba
     @window-grey-gradient2  rgb(198,198,198)
     @window-grey-gradient3  rgb(170,170,170)
     @Color1                 #2EB6D1
     @Color6                 #414FD5
   ========================================================================== */


/* --------------------------------------------------------------------------
   HOST SCAFFOLDING - not platform CSS.
   In the app the module is transcluded into a Kendo window, which supplies a
   positioned box of the size declared on <window height="550" width="1024">
   in email.html. This reproduces that box only.
   -------------------------------------------------------------------------- */
.extracted-host {
  position: relative;
  width: 100%;
  max-width: 1024px;
  height: 550px;
  overflow: hidden;
  background: #fff;
}


/* --------------------------------------------------------------------------
   INHERITED PAGE DEFAULTS - Content/theme/less/general.less `body` and
   Site.less `p`, scoped to the module so the snippet renders with the same
   metrics it has inside the app. ('Open Sans' is loaded app-wide; the
   fallbacks are Bootstrap's @font-family-sans-serif.)
   -------------------------------------------------------------------------- */
.extracted-host,
.email-window {
  font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: #555;
}
.email-window p {
  font-weight: 500;
  font-size: 14px;
  margin: 0 0 10px;              /* bootstrap type.less: 0 0 (@line-height-computed / 2) */
}
.email-window h1 {
  font-family: inherit;
  line-height: 1.1;
}
.email-window ul {
  margin-top: 0;
  margin-bottom: 10px;
}
.email-window button {           /* bootstrap normalize.less */
  color: inherit;
  font: inherit;
  margin: 0;
  text-transform: none;
  -webkit-appearance: button;
  cursor: pointer;
  overflow: visible;
}


/* --------------------------------------------------------------------------
   BOOTSTRAP SUBSET - written out here so the snippet needs no Bootstrap.
   Values from Content/bootstrap/variables.less:
     @grid-gutter-width 30px, @padding-base-vertical 6px,
     @padding-base-horizontal 12px, @font-size-base 14px,
     @line-height-base 1.428571429, @border-radius-base 4px,
     @btn-font-weight normal
   -------------------------------------------------------------------------- */
.email-window .row {
  margin-left: -15px;
  margin-right: -15px;
}
.email-window .row:before,
.email-window .row:after {
  content: " ";
  display: table;
}
.email-window .row:after {
  clear: both;
}
.email-window .col-xs-12 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  float: left;
  width: 100%;
}
.email-window .btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.email-window .pull-right {
  float: right !important;
}


/* --------------------------------------------------------------------------
   ANGULAR MATERIAL LAYOUT ATTRIBUTES - the handful of rules the markup's
   layout="row" / layout="column" / layout-fill / flex attributes depend on,
   copied verbatim from angular-material.layout-attributes.css.
   -------------------------------------------------------------------------- */
.email-window [layout],
.email-window [layout="column"],
.email-window [layout="row"] {
  box-sizing: border-box;
  display: flex;
}
.email-window [layout="column"] {
  flex-direction: column;
}
.email-window [layout="row"] {
  flex-direction: row;
}
.email-window [flex] {
  flex: 1;
  box-sizing: border-box;
}
.email-window [layout-fill] {
  margin: 0;
  width: 100%;
  min-height: 100%;
  height: 100%;
}

/* angular-material.css - md-virtual-repeat scroll container used by #mail-list */
.md-virtual-repeat-container {
  box-sizing: border-box;
  display: block;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}
.md-virtual-repeat-container .md-virtual-repeat-scroller {
  bottom: 0;
  box-sizing: border-box;
  left: 0;
  margin: 0;
  overflow-x: hidden;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-overflow-scrolling: touch;
}
.md-virtual-repeat-container .md-virtual-repeat-sizer {
  box-sizing: border-box;
  height: 1px;
  display: block;
  margin: 0;
  padding: 0;
  width: 1px;
}
.md-virtual-repeat-container .md-virtual-repeat-offsetter {
  box-sizing: border-box;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
}


/* --------------------------------------------------------------------------
   window.less
   -------------------------------------------------------------------------- */
.window-content-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.window-content-container .window-content-inner-container {
  overflow: auto;
  height: 100%;
}
.window-content {
  padding: 10px;                 /* overridden below by the email module */
}

/* themeFix.less */
.no-copy *,
.no-copy {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* simulation.less */
.html-content-container img {
  max-width: 100%;
  max-height: 100%;
}


/* ==========================================================================
   email-simulation.less - flattened
   ========================================================================== */

.email-window {
  height: 100%;
}
.email-window .container {
  width: 100%;
}
.email-window .window-content {
  padding: 44px 0 0 0;           /* @emailTopBarHeight */
  height: 100%;
  box-sizing: border-box;
}

/* ---- top bar ------------------------------------------------------------ */
.email-window .email-top-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 44px;                  /* @emailTopBarHeight */
  margin: 0;
  border-bottom: solid 1px rgb(170,170,170);          /* @window-grey-gradient3 */
  background: rgb(198,198,198);                       /* @window-grey-gradient2 */
  background: linear-gradient(rgb(198,198,198), rgb(170,170,170));
  z-index: 5;                    /* z-index.less */
}

.email-window .top-bar-btn {
  display: inline-block;
  color: black;
  width: 60px;
  height: 30px;
  font-size: 20px;
  border-radius: 5px;
  box-shadow: #B3B3B3 1px 1px 1px;
  margin: 5px;
  border-style: solid;
  border: solid 1px rgb(120,120,120);
  background-color: rgb(222,222,222);
}
.email-window .top-bar-btn.btn {
  padding: 0;
}
.email-window .top-bar-btn.btn i {
  font-size: inherit;
}
.email-window .top-bar-btn.disabled {
  cursor: default;
  opacity: 0.4;
  filter: alpha(opacity=40);
}
.email-window .top-bar-btn:active {
  box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.8);
  outline: none;
}
.email-window .top-bar-btn:hover {
  outline: none;
  border: 1px solid #2EB6D1;     /* @Color1 */
}

/* ---- mailbox rail ------------------------------------------------------- */
.email-window #mailbox-bar {
  height: 100%;
  width: 100px;
  padding: 0;
  background: rgb(225,228,235);
  background: linear-gradient(rgb(225,228,235), rgb(213,220,228));
}
.email-window #mailbox-bar h1 {
  color: rgb(115,124,140);
  font-size: 14px;
  font-weight: bold;
  margin: 10px 0;
  margin-left: 10px;
}
.email-window #mailbox-bar ul {
  padding: 0;
}
.email-window #mailbox-bar li {
  color: black;
  font-size: 14px;
  display: block;
  padding-left: 15px;
  line-height: 20px;
}
.email-window #mailbox-bar li:before {
  margin-right: 10px;
}
.email-window #mailbox-bar li:hover {
  cursor: pointer;
  background-color: rgb(187,196,219);
  /* the LESS also sets `background-color: -webkit-linear-gradient(...)` here,
     which is not a valid background-color value and is dropped by the
     browser. Left out rather than reproduced as dead CSS. */
}
.email-window #mailbox-bar li.mailbox-active {
  background-color: #a7adba;     /* @window-grey */
}
.email-window #mailbox-bar .email-count {
  display: inline-block;
  border-radius: 50%;
  background: black;
  color: white;
  width: 13px;
  height: 13px;
  line-height: 12px;
  text-align: center;
  font-size: 10px;
}

/* ---- message list ------------------------------------------------------- */
.email-window #mail-list {
  border-right: 1px solid grey;
  border-left: 1px solid grey;
  height: 100%;
  width: 350px;
}
.email-window #mail-list .email-preview {
  cursor: pointer;
  border-bottom: solid 1px grey;
  max-height: 120px;
  overflow: hidden;
  position: relative;
  padding: 5px 10px;
}
.email-window #mail-list .email-preview.unread {
  border-left: 5px solid #414FD5;    /* @Color6 */
}
.email-window #mail-list .email-preview .email-preview-inner-container {
  overflow: hidden;
  min-height: 80px;
}
.email-window #mail-list .email-preview .email-preview-inner-container .email-preview-header {
  max-height: 40px;
}
.email-window #mail-list .email-preview .email-preview-inner-container .email-preview-sender {
  font-size: 12pt;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.email-window #mail-list .email-preview .email-preview-inner-container .email-preview-sender.read {
  font-weight: 600;
}
.email-window #mail-list .email-preview .email-preview-inner-container .email-preview-sender.unread {
  font-weight: 800;
}
.email-window #mail-list .email-preview .email-preview-inner-container .email-preview-subject,
.email-window #mail-list .email-preview .email-preview-inner-container .email-preview-time {
  font-weight: bold;
  color: #414FD5;                    /* @Color6 */
  font-size: 10pt;
}
.email-window #mail-list .email-preview .email-preview-inner-container .email-preview-body {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: grey;
  padding-left: 15px;
  font-size: 10pt;
}
.email-window #mail-list .email-preview .email-preview-inner-container .email-preview-time {
  display: inline-block;
  float: right;
  margin-left: 5px;
}
.email-window #mail-list .email-preview .email-preview-inner-container .email-preview-time.unread {
  font-weight: bold;
}
.email-window #mail-list .email-preview:hover {
  background: rgba(55,116,221,0.6);
}
.email-window #mail-list .email-preview.active {
  background-color: rgb(55,116,221);
}
.email-window #mail-list .email-preview.active .email-preview-time,
.email-window #mail-list .email-preview.active .email-preview-sender,
.email-window #mail-list .email-preview.active .email-preview-subject,
.email-window #mail-list .email-preview.active .email-preview-body {
  color: #fff;
}

/* ---- reading pane ------------------------------------------------------- */
.email-window .email-reader {
  height: 100%;
  overflow-x: none;              /* verbatim from the LESS; not a valid value */
  overflow-y: auto;
  padding: 10px;
  background-color: rgb(198,198,198);   /* @window-grey-gradient2 */
}
.email-window .email-reader .email-from {
  font-size: 11pt;
  font-weight: 800;
}
.email-window .email-reader .email-subject {
  font-size: 10pt;
  font-weight: 700;
}
.email-window .email-reader .email-date {
  color: #414FD5;                /* @Color6 */
}

.email-window .email-container {
  box-shadow: 10px 10px 9px 0px rgba(0,0,0,0.5);
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  background: white;
}
.email-window .email-container .email-attachments-label {
  font-size: 13px;
}
.email-window .email-container img {
  max-width: 100%;
}

.email-window .current-email-header {
  position: relative;
  margin-top: 10px;
}
.email-window .current-email-header b.sender-email {
  font-weight: 800;
}
.email-window .current-email-header .email-header-label {
  display: inline-block;
  margin-right: 10px;
  width: 50px;
  text-align: right;
  color: gray;
  font-weight: bold;
}
.email-window .current-email-header:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  height: 1px;
  width: 90%;
  margin-left: 5%;
  border-bottom: 1px solid grey;
}

.email-window .current-email-content {
  margin-top: 20px;
  padding: 10px 20px;
}

.email-window .email-header-attachments {
  padding: 10px 20px;
}
.email-window .email-header-attachments .current-email-attachments button {
  padding: 10px;
  background: white;
  border-radius: 5px;
  border: 1px solid grey;
}
.email-window .email-header-attachments .current-email-attachments button:hover {
  border: 1px solid black;
}


/* ==========================================================================
   ICON SHIM - SUBSTITUTION, read this before judging it.
   The platform serves Font Awesome 4 locally (Content/fonts/font-awesome-4)
   and paints glyphs as `.fa-envelope:before { content: "\f0e0" }`. A
   self-contained snippet cannot load that font file, so the real .fa / .fa-lg
   metrics are kept and each glyph is drawn by an inline-SVG background of the
   same shape and colour. The HTML is untouched: still <i class="fa fa-envelope
   fa-lg"></i>, exactly as the platform emits it. Swap this block for the real
   font-face if the landing page ever ships FA.
   Original codepoints, for the record: envelope f0e0, reply/mail-reply f112,
   mail-reply-all f122, mail-forward f064, paperclip f0c6, pencil f040,
   trash f1f8, book f02d, inbox f01c, paper-plane f1d8.
   ========================================================================== */
.email-window .fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* shim geometry */
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
.email-window .fa-lg {
  font-size: 1.33333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}
.email-window .fa-2x { font-size: 2em; }

/* toolbar + mailbox rail icons inherit `color: black` */
.email-window .fa-pencil {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' d='m4 20 1-4L16.4 4.6a2.1 2.1 0 0 1 3 3L8 19l-4 1Z'/%3E%3C/svg%3E");
}
.email-window .fa-mail-reply {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M9 4 3 9l6 5M6 9h8a6 6 0 0 1 6 6v2'/%3E%3C/svg%3E");
}
.email-window .fa-mail-reply-all {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M7 4 2 9l5 5M12 4 7 9l5 5M9 9h6a6 6 0 0 1 6 6v2'/%3E%3C/svg%3E");
}
.email-window .fa-mail-forward {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M15 4l6 5-6 5M18 9h-8a6 6 0 0 0-6 6v2'/%3E%3C/svg%3E");
}
.email-window .fa-trash {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6h16M9 6V3.5h6V6M6 6l1 14.5h10L18 6M10 10v7M14 10v7'/%3E%3C/svg%3E");
}
.email-window .fa-book {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' d='M5 3.5h11a2 2 0 0 1 2 2v15H7a2 2 0 0 1-2-2v-15ZM5 17.5h13'/%3E%3C/svg%3E");
}
.email-window .fa-inbox {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 13h5l1.5 3h5L16 13h5M3 13l3-8h12l3 8v6H3v-6Z'/%3E%3C/svg%3E");
}
.email-window .fa-paper-plane {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M22 2 1.5 10.5l6.8 2.7L11 21l3.2-6.6L22 2Z'/%3E%3C/svg%3E");
}

/* list + reader indicators inherit the body colour #555 (note: the platform
   does not recolour .email-not-read on the blue active row either) */
.email-window .fa-envelope {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath fill='%23555' d='M0 3.2 12 11 24 3.2V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v1.2Z'/%3E%3Cpath fill='%23555' d='M24 5.6 12 13.3 0 5.6V16a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V5.6Z'/%3E%3C/svg%3E");
}
.email-window .fa-reply {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M9 4 3 9l6 5M6 9h8a6 6 0 0 1 6 6v2'/%3E%3C/svg%3E");
}
.email-window .fa-paperclip {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M20 11.5 11.9 19.6a4.5 4.5 0 0 1-6.4-6.4l8.5-8.5a3 3 0 0 1 4.3 4.3l-8.5 8.5a1.5 1.5 0 0 1-2.2-2.2l7.6-7.6'/%3E%3C/svg%3E");
}