html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  font-size: 10px;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

.shim-host {
  width: 0;
  height: 0;
}

/* Default alignment in case a dir attribute is specified. */
html[dir="ltr"] [dir] { text-align: left; }
html[dir="rtl"] [dir] { text-align: right; }

/*
  Override BB. Some CSS tweaks for having a better confirm readability
*/
form[role="dialog"][data-type="confirm"] p {
  white-space: pre-line;
}

form[role="dialog"].error-dialog-show-recipient ul {
  border: none;
}

form[role="dialog"].error-dialog-show-recipient ul li {
  padding: 0;
}

/* This does not override the building block, that's why we use a shorter
 * selector */
.error-dialog-show-recipient li {
  /* future-proof in case BB moves to "text-align: start" */
  width: -moz-fit-content;

  /* List items are phone numbers */
  direction: ltr;
  unicode-bidi: -moz-isolate;
}

gaia-header {
  position: relative;
  z-index: 10;
}

.subheader {
  position: absolute;
  z-index: 6; /* should be between 4 and 9 (inclusive). 3 is the z-index for
                 the input form, 10 is the z-index for the header */
  left: 0;
  right: 0;
  top: 5rem;
}

/* Container for conversation/new message view  */
#composer-container {
  position: relative;

  background: #e1f0ec;
}

/*
 * Flex layout is wrapped by 'flex-composer'. Our flex layout has
 * 2 well differentiated:
 * - 'messages-container'
 * - 'messages-compose-form'
 */

.flex-composer {
  display: flex;
  flex-direction: column;

  height: 100%;
  top: 0;

  overflow: hidden;
}

/* Override Building Block [Lists] styles */
[data-type="list"] {
  padding: 0;
}

.bottom-tab[role="region"] {
  visibility: hidden;
}

[data-type="list"] header {
  margin: 0 1.5rem;
}

[data-type="list"] li > label {
  display: block;
  overflow: hidden;
  opacity: 0;
}

[data-type="list"] aside.pack-end {
  margin: 0 .5rem;
}

/* Panel handling */
#main-wrapper {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.disabled {
  opacity: 0.3;
  pointer-events: none;
}

/*
  Loading screen while deleting
*/

#loading.show-loading {
  display: block;
}

#loading {
  display: none;
}

.loading-header {
  text-align: start;
}

#loading [role="status"] {
  text-align: center;
  height: 4rem;
}

#loading p {
  border-bottom: none;
}

.article-list[data-type="list"] ul.contact-list {
  overflow-x: hidden;
  overflow-y: auto;

  width: calc(100% - 3.1rem);
  padding: 0 1.5rem;

  background: #fff;
}

/**
 * TODO: It's an adjustment for line-height/padding to prevent bottom of chars
 * been cut. This fix will be moved to shared list.css once Bug 1144588 landed
 */
.contact-list .suggestion > .name {
  line-height: 2.4rem;
  padding-top: 0.8rem;
}

form[role="dialog"][data-type="action"].contact-prompt > header {
  height: auto;
  min-height: 5rem;
  font-weight: 300;
}

.unknown-contact-header {
  line-height: 2.5rem;
  padding: 1.3rem 0;
  margin: 0;
  overflow: hidden;

  text-overflow: ellipsis;
  font-size: 2.3rem;
}

.contact-header {
  /* bottom padding is .9rem because we need .1rem more for the
   * nice shadow line at the header bottom, defined as a :after element */
  padding: 0.8rem 0 0.9rem;
}

.contact-header .name {
  line-height: 3.3rem;
  padding: 0.1rem 0 0.4rem;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;

  font-size: 2.3rem;
}

.contact-header .details {
  line-height: 1.5rem;
  padding: 0 0 0.7rem;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.5rem;
}

.contact-header span[data-type=img] {
  display: block;
  width: 6rem;
  height: 6rem;
  background-size: cover;
  background-position: center;
}

.contact-header aside.pack-end {
  margin-inline-end: -1.5rem; /* compensate the header's 3rem padding */
}
html[dir="ltr"] .contact-header aside.pack-end { float: right; }
html[dir="rtl"] .contact-header aside.pack-end { float: left; }

.suggestion * {
  pointer-events: none;
}

form[role="dialog"][data-type="action"] > header {
 text-align: start;
}

/* Phone details label styles */
.phone-type,
.phone-type-separator,
.phone-carrier,
.phone-carrier-separator {
  display: none;
}

.has-phone-type > .phone-type,
.has-phone-type > .phone-type-separator,
.has-phone-carrier > .phone-carrier,
.has-phone-carrier > .phone-carrier-separator {
  display: unset;
}

/* Text selection control */
html {
  -moz-user-select: none;
}

.editable-select-mode [contenteditable="true"] {
  -moz-user-select: text;
}

/* ellipsis direction hack before bug 883884 fixed */
.ellipsis-dir-fix {
  display: block;
  width: -moz-fit-content;
  max-width: 100%;

  overflow: hidden;
  text-overflow: ellipsis;
}