section[role="region"].skin-organic {
  background: #f4f4f4;
}

.sup-form {
  margin: 1rem 2rem;
}

.sup-manual-prompt {
  font-size: 1.1rem;
}

.sup-form-item {
  font-size: 1.4rem;
  line-height: 3.8rem;
  vertical-align: middle;
}

.sup-form-btn {
  width: calc(100% - 3rem);
}

.sup-form-link {
  color: black;
  font-size: 1.4rem;
  line-height: 3.8rem;
  margin: 1.5rem 3rem;
}

.sup-error-region {
  background-color: black;
  color: #fff;
  padding: 0.8rem;
}
.sup-error-message {
  font-size: 120%;
  text-align: center;
}

.sup-progress-region {
  width: calc(100% - 3rem);
  margin: 16rem auto 0;
  padding-top: 1.2rem;
  vertical-align: middle;
  border-top: 0.1rem solid #bdbdbb;
}

.sup-progress-label {
  display: inline-block;
  width: calc(100% - 7rem);
  vertical-align: middle;
  font-weight: 300;
  font-size: 2.4rem;
  line-height: 3rem;
  letter-spacing: 0.024rem;
  word-spacing: 0.1rem;
}
.sup-progress-spinner {
  margin-inline-end: 1.2rem;
}

cards-setup-done .sup-progress-label {
  padding: 0 1.5rem;
}

cards-setup-done .sup-form-btn {
  position: absolute;
  bottom: 6.3rem;
  left: 1.5rem;
  right: 1.5rem;
  margin: 0;
}

cards-setup-done .sup-form-btn.recommend {
  bottom: 1.5rem;
}

.sup-oauth-description {
  font-size: 1.8rem;
}

.sup-oauth2-name {
  font-size: 1.6rem;
  color: #585858;
  word-wrap: break-word;
}

.sup-email-display {
  direction: ltr; /* contains email addresses */
}

/* get some margin around the form elements; I'm not sure how BB wants it */
.tng-form {
  margin: 0 3rem;
}

.tng-header-item {
  font-weight: bold;
  background-color: #eee;
}
.tng-header-item, .tng-item {
  display: block;
  width: 100%;
  border-bottom: 0.1rem solid gray;
  padding: 0.6rem;
  margin: 0;
  font-size: 1.6rem;
}
.tng-inert-item {
  color: gray;
}

.tng-account-header-label {
  direction: ltr; /* contains email addresses */
}

.tng-account-item-label {
  white-space: nowrap;
  margin: 0;
  direction: ltr; /* contains an email address */
}

.tng-account-add, .tng-account-delete {
  display: block;
  width: calc(100% - 3rem);
  margin: 1.5rem auto;
  text-align: center;
}

.tng-signature-text {
  margin: 0;
  min-height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  max-height: none;
  display: block;
  font-family: inherit;
  font-weight: normal;
  color: #333;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  background: white;
  outline: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  padding: 1rem 1.5rem 0;
  font-size: 1.6rem;
}

/* Copy/paste select all could reach across the whole DOM so only scope the
  selection to the center "active" card. Bug 1152172. */
.center .tng-signature-text {
  -moz-user-select: text;
}
/* This style allows newlines to be copied. This catches br tags and is
extensible to the future where other tags could be in the contenteditable
field. Bug 1127160. */
.center .tng-signature-text * {
  -moz-user-select: text;
}


.tng-list {
  margin: 0;
  padding: 0;
}

li button.signature-button.icon:before {
  top: calc(50% - 1.3rem);
  width: 2.6rem;
  height: 2.6rem;
  margin-top: 0;
  background: no-repeat center / 2.6rem;
  opacity: 0.7;
}
html[dir="ltr"] li button.signature-button.icon:before {
  background-image: url('../shared/style/buttons/images/right-light.svg');
  right: 0;
}
html[dir="rtl"] li button.signature-button.icon:before {
  background-image: url('../shared/style/buttons/images/left-light.svg');
  left: 0;
}

li button.signature-button.button.icon {
  width: 100%;
  margin: 0 auto 2rem;
  padding-inline-start: 0;
  padding-inline-end: 3rem;
}

.signature-button-content {
  /* Padding added to assist ar language when italicized, bug 1229315. */
  padding: 0 0.3rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
}
html[dir="ltr"] .signature-button-content {
  text-align: left;
  margin-left: 1rem;
}
html:-moz-dir(rtl) .signature-button-content {
  text-align: right;
  margin-right: 1rem;
}

.signature-button-content.empty-placeholder {
  color: #858585;
}

li {
  position: relative;
  border-bottom: solid 0.1rem #dbd9d9;
  list-style-type: none;
}

.tng-list li:last-child {
  border-bottom: 0;
}

.tng-account-type {
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #52B6CC;
  font-size: 1.8rem;
}
html[dir="ltr"] .tng-account-type { padding-right: 1.2rem; }
html[dir="rtl"] .tng-account-type { padding-left: 1.2rem; }

/* Special override because delete button follows the
   tng-acccount-server-container, and cannot place the button inside that ul
   since items are dynamically appended to it. So just explicitly state the
   desire for a bottom border in that case. */
.tng-list.tng-account-server-container li:last-child {
  border-bottom: solid 0.1rem #dbd9d9;
}

li a:active {
  color: #FFFFFF;
  background-color: #008AAA;
}

/* A style for a list item where there is a text label and text value that is
  not editable by the user. The text value is underneath (sub) the label part.
  The label should be a span with class "list-text" and the value should be a
  span with "list-sub-text". */
.list-text-with-sub {
  padding: 1.5rem 0;
}

/* A style for a list item where there is a label and a value pair, and the
   name value pair is laid out via flexbox so that the label can be as long
   as it wants, possibly multiple lines, and the value stays vertically centered
   in relation to the label. */
.list-text-pair {
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
}

.list-text-pair .aside.start {
  flex-grow: 2;
  margin-inline-end: 1.5rem;
  line-height: inherit;
}

.list-text-with-sub .list-text {
  line-height: 2.2rem;
}

label.list-pack-switch, label.list-pack-checkbox {
  padding: 1.5rem 0;
  width: 100%;
  display: flex;
  align-items: center;
  height: auto;
}

label.list-pack-checkbox, .settings-input-list .list-pack-switch {
  height: 3rem;
}

.list-pack-switch .list-pack-switch-text,
.list-pack-checkbox .list-pack-checkbox-text {
  flex-grow: 2;
  margin-inline-end: 7.5rem;
  line-height: inherit;
}

.list-pack-checkbox .list-pack-checkbox-text:after {
  offset-inline-start: auto;
  offset-inline-end: 1.5rem;
}

li.select-item {
  padding: 1rem 0 1rem;
}

.list-text {
  display: block;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #000;
  line-height: 5.5rem;
  font-size: 1.8rem;
  outline: 0 none;
}
/**
* Explicit -left/-right used since .list-text has a dir="auto": we want padding
* and text-align not to depend on direction of user input string.
*/
html[dir="ltr"] .list-text {
  padding-left: 1.5rem;
  padding-right: 2.2rem;
}
html[dir="rtl"] .list-text {
  padding-left: 2.2rem;
  padding-right: 1.5rem;
}

/* Select items with list text do not need the after spacing for the submenu
   chevrons, as the select that is on a line below the text will have the
   chevron if it is needed, so give more space for the text. */
li.select-item .list-text {
  padding: 0 1.5rem;
}

.list-sub-text {
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  color: #5b5b5b;
  font-size: 1.6rem;
}
/* .list-sub-text has a dir="auto": we cannot use start/end properties. */
html[dir="ltr"] .list-sub-text { padding-left: 1.5rem; }
html[dir="rtl"] .list-sub-text { padding-right: 1.5rem; }

li.align-center {
  text-align: center;
}

.item-with-children .list-text {
  padding-top: 2rem;
  padding-bottom: 2rem;
  line-height: inherit;
}

.item-with-children::after  {
  content: "";
  width: 2.6rem;
  height: 2.6rem;
  position: absolute;
  top: calc(50% - 1.3rem);
  background: no-repeat center / 2.6rem;
  opacity: 0.7;
}
html[dir="ltr"] .item-with-children::after {
  background-image: url('../shared/style/buttons/images/right-light.svg');
  right: -0.5rem;
}
html[dir="rtl"] .item-with-children::after {
  background-image: url('../shared/style/buttons/images/left-light.svg');
  left: -0.5rem;
}

.mail-select {
  vertical-align: middle;
  height: 3.8rem;
  background: rgb(231, 231, 231);
  border: 0.1rem solid rgb(182, 182, 182);
  border-radius: 0.3rem;
  font-size: 1.4rem;
  font-weight: 600;
  padding: 0.9rem 1rem;
  color: rgb(51, 51, 51);
  text-shadow: 0.1rem 0.1rem 0 rgba(255, 255, 255, 0.3);
  text-decoration: none;
  outline: medium none;
}

.settings-input-title {
  display: block;
  font-size: 1.8rem;
  padding: 1rem 1rem 0;
  padding-inline-start: 3rem;
}

li.settings-input-list {
  height: auto;
}

.tng-accounts-container {
  margin: 0;
  padding: 0;
}

.tng-accounts-container li {
  margin: 0 1.5rem;
}

.settings-button {
  margin: 1.5rem 3rem;
  width: calc(100% - 6rem);
}

.tng-email-lib-version {
  opacity: 0;
}

section.settings-account-common li {
  margin: 0 1.5rem;
  overflow: hidden;
}

.settings-account-common li.syncinterval-setting label,
.settings-account-common li.synchronize-setting label {
  height: 3.5rem;
  line-height: 3.5rem;
  width: auto;
}

.settings-account-common li span.button {
  display: block;
  margin: 0 auto 1rem;
}

.tng-account-check-interval,
.tng-account-synchronize {
  background: none;
  border: transparent;
  font-size: 1.7rem;
  font-weight: bold;
}

.sup-manual-account-type,
.sup-socket-select {
  font-size: 1.7rem;
  font-weight: bold;
  background: none;
  border: transparent;
  margin-inline-start: -1.5rem;
  padding: 0.7rem 0;
  padding-inline-start: 1.5rem;
}

li.sup-manual-account-type-container,
li.sup-socket-select-container {
  overflow: hidden;
  min-height: 100%;
  border-bottom: none;
}

li.sup-socket-select-container {
  margin-top: 1rem;
}

li.sup-manual-account-type-container .button {
  margin: 0;
}

.sup-progress-container {
  text-align: center;
}

/* When card is not the center, but has a progress spinner, hide it, to avoid
   the animation taking cycles away from activities like typing. Bug 1083288 */
.before .sup-progress-container progress,
.after .sup-progress-container progress {
  display: none;
}

cards-setup-oauth2 .scrollregion-below-header {
  overflow: hidden;
  will-change: auto;
}

.sup-oauth2-browser {
  border: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: white;
}

cards-settings-debug button {
  display: block;
  margin: 1.5rem auto;
  width: calc(100% - 3rem);
}

/* Shared style overrides for the "are you sure" unencrypted connection
   confirmation. Since the button text is longer than the typical yes/no, give
   each button full width, with them stacked on top of each other. Also remove
   extraneous p border. */
form.tng-plain-socket-confirm[role="dialog"][data-type="confirm"] {
   padding-bottom: 13rem;
}

form.tng-plain-socket-confirm[role="dialog"][data-type="confirm"] menu {
  display: block;
  white-space: unset;
}

form.tng-plain-socket-confirm[role="dialog"][data-type="confirm"] menu button {
  margin: 0.5rem 0;
}

form.tng-plain-socket-confirm[role="dialog"][data-type="confirm"] p {
  border-top: 0;
}

form.tng-plain-socket-confirm[role="dialog"][data-type="confirm"] p:first-of-type {
  border-top: 0.1rem solid #686868;
}