/**
 * Application Permissions
 */
#appPermissions ul li img,
.my-home-screens li img {
  position: absolute;
  width: 3rem;
  height: 3rem;
  offset-inline-start: 1.6rem;
  top: 1.5rem;
}

#addon-detail-toggle,
#appPermissions ul li > a {
  padding-inline-start: 7.4rem;
}

#addons ul li img {
  position: absolute;
  width: 5rem;
  height: 5rem;
  offset-inline-start: 0.6rem;
  top: 0.5rem;
}

#addons ul li > a {
  padding-inline-start: 8.4rem;
}

#addons .get-more-addons {
  padding-inline-start: 3rem;
}

.uninstall-app {
  margin: 1rem 1.5rem 0;
  padding: 1.5rem 0 0.5rem;
  border-top: 0.1rem solid #E6E6E3;
}

#appPermissions .cb-alert {
  position: fixed;
}

/**
 * App permissions details panel
 */
.developer-infos > a > small {
  color: #00e;
}

/*
 * styles for the addons and addon-details panels
 */
.addon-paragraph {
  font-size: 1.7rem;
  line-height: 2.3rem;
  font-weight: 400;
  padding: 0.5rem 1rem 1.5rem;
  padding-inline-start: 1.5rem;
  white-space: unset;
}

.addon-targets {
  padding-bottom: 0.5rem;
}

/* For overriding the style from building block */
ul li > label:not([for]).addon-details-info {
  padding-inline-start: 8.1rem;
  padding-inline-end: 5.9rem;
  padding-top: 1rem;
  width: calc(100% - 12.5rem);
  display: block;
}

.addon-details-icon {
  position: absolute;
  width: 5rem;
  height: 5rem;
  offset-inline-start: 1.4rem;
}

.addon-details-version {
  font-weight: bold;
  padding-bottom: 0;
  color: #858585;
}

.addon-details-name {
  white-space: normal;
  padding-top: 0.4rem;
}

.addon-obsolete {
  background-color: #F0AD4E;
  color: #FFF;
  flex-flow: row nowrap;
  align-items: center;
  margin: 0;
}

.addon-obsolete-icon {
  padding-inline-start: 1.5rem;
}

.addon-obsolete-info {
  font-size: 1.6rem;
  white-space: normal;
  padding: 1.5rem;
}

/******************************************************************************
 * Wi-Fi settings
 */

/* three-state items: on|off|ready */

ul[data-state="off"] ~ *,
ul[data-state] li[data-state] {
  display: none;
}

ul[data-state="on"]    li[data-state="on"],
ul[data-state="off"]   li[data-state="off"],
ul[data-state="ready"] li[data-state="ready"] {
  display: block;
}

ul[data-state="ready"] li > a {
  padding-inline-end: 6.2rem; /* 3rem (initial padding) + 3.2rem (wifi icon width) */
}

/******************************************************************************
 * Wi-Fi authentication fields:
 *   - hide password field on open networks
 *   - hide identifier field on non-EAP networks
 */

section li.password,
section li.password[hidden],
section li.eap,
section li.auth-phase2,
section li.server-certificate,
section li.server-certificate-description,
section li.identity {
  display: none;
}

section[data-security*="WEP"] li.password,
section[data-security*="WPA"] li.password,
section[data-security*="EAP"] li.eap,
section[data-security*="EAP"] li.auth-phase2,
section[data-security*="EAP"] li.server-certificate,
section[data-security*="EAP"] li.server-certificate-description,
section[data-security*="EAP"] li.identity {
  display: inherit;
}

section li.password {
  display: inherit; /*asf*/
  height: 12rem;
  padding-inline-end: 0;
}

section li.password > label {
  height: 3rem;
  min-height: 0;
  margin-top: 0.5rem;
  margin-inline-start: 0;
}

section li.password > label > span:after {
  offset-inline-start: 0;
  offset-inline-end: auto;
  margin-inline-start: 0;
}

section li.password > label > span {
  padding-inline-start: 3rem;
  height: 3rem;
  color: #848484;
  font-size: 1.7rem;
  line-height: 3rem;
  margin-inline-end: 1.5rem;
}

section li.password > label:active {
  background-color: transparent;
  color: #848484;
}

section li.password > p {
  padding: 0.5rem 1.5rem 0;
  line-height: 3.3rem;
}

#pwd-auth {
  -moz-user-focus: ignore;
}

section ul.operate-certificate {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: url(images/document_bg.png);
}

/******************************************************************************
 * Call settings
 */

 #call .cw-alert .cw-alert-sub-p {
   border-top: none;
 }

 #call .cw-alert .cw-alert-checkbox {
   offset-inline-end: 0;
   height: 2.7rem;
   width: 100%;
 }

 #call li[aria-disabled="true"] .icon-dialog,
 #call li[aria-disabled="true"] label {
   opacity: 0.6;
   pointer-events: none;
 }

 #call li[aria-disabled="true"] label > span {
   color: #797e80;
 }

 /** Call Barring Settings *****************************************************/
 #call-cbSettings span {
   /* two lines instead of wrapped text */
   white-space: normal;
 }

 /** Call barring password **/
 #cb-passcode section {
   padding: 0;
 }
 #cb-passcode-title {
   border-top: 0;
   border-bottom: 0.1rem solid #686868;
   padding: 1.5rem 3.5rem;
   margin-bottom: 2rem;
   font-size: 1.7rem;
 }
 #cb-passcode-pseudo-input {
   width: 80%;
 }
 #cb-passcode-def {
   display: block;
   border: 0;
   padding-inline-start: 3.5rem;
   line-height: 2rem;
   font-size: 1.4rem;
   font-weight: lighter;
   color: #CBCBCB;
 }

 /** Call Barring Password Change
   * copied from panels/screen_lock_passcode
   * this should dissapear if we unify both screens
   */
 #call-barring-passcode-change .passcode-error {
   clear: both;
   display: none;
   height: 4.2rem;
   padding-inline-start: 3rem;
   color: red;
   font-size: 1.5rem;
   line-height: 4.2rem;
 }

 #call-barring-passcode-change[data-passcode-status="error"] .passcode-error {
   display: block;
 }

 .passcode-change div.passcode-overlay {
   position: relative;
 }

 #call-barring-passcode-change label {
   box-sizing: border-box;
   display: block;
   width: auto;
   height: auto;
   margin: 1.6rem 0 0.4rem;
   padding: 0 2rem;
   color: #000;
   font-size: 1.8rem;
 }

 /**
  * 1. Important required to override styles
  *    inside <gaia-header> <style scoped>
  *    Once we have ::content selector we
  *    can drop the <style scoped> and this
  *    !important won't be needed anymore.
  */
 #call-barring-passcode-change [data-mode] {
   display: none !important; /* 1 */
 }

 #call-barring-passcode-change[data-mode="edit"] [data-mode*="edit"],
 #call-barring-passcode-change[data-mode="new"]  [data-mode*="new"] {
   display: block !important; /* 1 */
 }

 #call-barring-passcode-change #passcode-confirm {
   opacity: 0.3;
   pointer-events: none;
 }

 #call-barring-passcode-change[data-passcode-status="success"] #passcode-confirm {
   opacity: 1;
   pointer-events: auto;
 }

 .passcode-input {
   z-index: -1;
   position: absolute;
   top: -5rem;
   offset-inline-start: 0;
 }

 .passcode-container {
   position: absolute;
   z-index: 1;
   width: 100%;
   top: 0;
   left: 0;
   background: url(images/document-bg.png);
 }

 .passcode {
   width: calc(100% - 2rem);
   margin: 0 auto;
   overflow: hidden;
 }

 .passcode-digit {
   box-sizing: border-box;
   position: relative;
   float: left; /* BiDi-proof: passcodes are not mirrored */
   width: calc(25% - 1rem);
   height: 4rem;
   margin: 0 0.5rem;
   border: 0.1rem solid #c2c2c2;
   text-align: center;
   background-color: #fff;
   border-radius: 0.3rem;
 }

 span.passcode-digit[data-dot]::before {
   content: '';
   display: block;
   position: absolute;
   width: 1.5rem;
   height: 1.5rem;
   background-color: #3e3b39;
   border-radius: 0.75rem;
   top: 50%;
   left: 50%;             /* BiDi-proof: passcodes are not mirrored in RTL */
   margin-left: -0.75rem; /* BiDi-proof: passcodes are not mirrored in RTL */
   margin-top: -0.75rem;
 }

 /******************************************************************************
  * APN settings
  */

 .apnSettings-custom {
   font-style: italic;
 }

 .apnSettings-advanced {
   padding-bottom: 1em;
 }

 .apn-item .name {
  unicode-bidi: -moz-plaintext;
}

 /******************************************************************************
  * Internet sharing (Wi-Fi HotSpot)
  */

 #hotspot ul #hotspot-settings-section > a span {
   max-width: 100%;
 }

 /******************************************************************************
  * Display settings
  */


  #screen-timeout {
    height: auto !important;
  }

  #display li {
    height: 6.2rem;
  }
  #display li:last-child {
    border-bottom: none;
  }

  /******************************************************************************
   * Sound settings
   */

  .manage-tones-button {
    padding-inline-start: 3rem;
  }

  /******************************************************************************
   * Volume & Brightness: min/max icons
   */

  ul li > label.range-icons:before {
    content: '';
    position: absolute;
    top: calc(50% - 1.5rem);
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    width: calc(100% - 2.3rem);
    height: 3rem;
    pointer-events: none;
  }

  ul li > label.range-icons span {
    position: absolute;
    top: 0;
    offset-inline-start: 0;
    height: 100%;
    padding: 0;
    margin: 0 1.5rem;
    pointer-events: none;
    color: #657073;
    line-height: 6rem;
  }

  ul li > label.range-icons span:last-child {
    offset-inline-start: auto;
    offset-inline-end: 0;
  }

  ul li > label.range-icons.volume span {
    line-height: 12rem;
    margin: 0 1.6rem;
  }

  ul li.brightness-manual > label input[type="range"] {
    width: calc(100% - 10.8rem);
  }

  li.brightness-manual div {
    position: relative;
    top: calc(50% - 1.5rem);
    offset-inline-start: 5rem;
    height: 3rem;
    width: calc(100% - 10.7rem);
  }

  ul li > label.range-icons.volume input {
    position: inherit;
    margin-inline-start: 5.8rem;
    width: calc(100% - 7.5rem);
    opacity: 0;
    transition: opacity .6s ease 0s;
  }

  /******************************************************************************
   * Accessibility
   */

  #accessibility ul li > a.menu-item {
    padding: 0 3rem;
  }

  /******************************************************************************
   * SIM Toolkit
   */

  #icc .hiddenheader {
    height: 0;
    padding: 0;
    background: none;
  }

  /**
   * 1. !important required to override scoped
   *    styles in <gaia-header>. When we have
   *    ::content selector in the platform, this
   *    shouldn't be requireed anymore.
   */
  #icc .hidden {
    display: none !important; /* 1 */
  }

  /******************************************************************************
   * Messaging
   */
  #messaging .simcards-container[hidden] {
    display: none;
  }

  /******************************************************************************
   * Date & Time
   */

  #dateTime ul.disabled p,
  #dateTime ul.disabled a,
  #dateTime .time-manual.disabled span {
    color: #797e80;
  }

  #dateTime .time-manual span {
    pointer-events: none;
  }

  #dateTime .time-manual input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    offset-inline-start: 0;
    opacity: 0;
  }

  #dateTime .time-manual label {
    min-height: 0;
    height: 0;
    display: block;
  }

  #dateTime .timeformat.disabled span {
    pointer-events: none;
  }

  /******************************************************************************
   * Improve Browser OS
   */
  #improveBrowserOS-chooseFeedback li,
  #improveBrowserOS-sendFeedback li {
    border: none;
  }

  #improveBrowserOS-sendFeedback li:first-child {
    min-height: 3rem;
  }

  #improveBrowserOS .link-text {
    white-space: nowrap;
  }

  ul li p.metrics-explain {
    font-size: 1.35rem;
    line-height: 1.8rem;
    color: #949494;
    margin: 0;
    padding: 0;
  }

  #feedback-description {
    display: block;
    height: 10rem;
    padding: 1rem 1rem 1.2rem;
    resize: none;
    white-space: normal;
  }

  #sendFeedback gaia-checkbox label {
    offset-inline-start: 3rem;
    offset-inline-end: auto;
    top: 2rem;
  }

  .feedback-choose-face {
    display: block;
    background: url(images/feedback_faces.png);
    width: 10rem;
    min-height: 10rem;
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: 20rem;
  }

  #feedback-mood {
    text-align: center;
  }

  #feedback-mood li {
    display: inline-block;
    max-width: 11rem;
  }

  .feedback-face-caption {
    overflow: visible;
    white-space: normal;
    line-height: 2.6rem;
    padding-top: 1rem;
    min-height: 6rem;
    height: auto;
  }

  /* can be replaced by `float: inline-start` when bug 1122918 lands */
  html[dir="ltr"] #feedback-happy { float: left; }
  html[dir="rtl"] #feedback-happy { float: right; }

  /* can be replaced by `float: inline-end` when bug 1122918 lands */
  html[dir="ltr"] #feedback-sad { float: right; }
  html[dir="rtl"] #feedback-sad { float: left; }

  #feedback-happy .feedback-choose-face {
    display: inline-block;
    background-position: 0;
  }

  #feedback-sad .feedback-choose-face {
    display: inline-block;
    background-position: 100%;
  }

  .feedback-feel {
    text-align: center;
  }

  #feedback-email.hidden {
    display: none;
  }

  #feedback-send-btn {
    text-align: center;
  }

  /******************************************************************************
   * OS License
   */

  #obtain-sc,
  #os-license {
    width: 100%;
    height: calc(100% - 5rem);
    border: 0;
  }

  /******************************************************************************
   * Help
   */

  #call-support-link, #online-support-link {
    height: auto;
  }

  #help-call-support-numbers, #help-online-support-text {
    display: block;
    line-height: 3rem;
    margin-bottom: 2rem;
  }

  #help-call-support-numbers a, #help-online-support-text a {
    display: block;
  }

  #help[data-has-support-info] .no-support-info,
  #help:not([data-has-support-info]) .support-info {
    display: none;
  }

  /******************************************************************************
   * Firefox Accounts
   */

  .fxa-logo {
    background-image: url('images/fxa_logo.png');
    background-repeat: no-repeat;
    background-size: 16.4rem;
    margin: 3rem auto 0;
    width: 17rem;
    height: 19.5rem;
  }

  #fxa-unverified .description {
    padding-top: 1.5rem;
  }

  #fxa-unverified .description:before {
    position: absolute;
    content: "";
    width: 7rem;
    height: 7rem;
    background-image: url('images/fxa_envelope.png');
    background-repeat: no-repeat;
    background-size: 7rem;
  }

  #fxa-unverified .disabled {
    color: #ccc;
  }

  #fxa-unverified-text {
    padding-top: 0.8rem;
    margin-inline-start: 6rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /******************************************************************************
   * Firefox Sync
   */

  .fxsync-intro {
    background-image: url('images/fxsync_intro.png');
    background-repeat: no-repeat;
    background-size: 16.4rem;
    margin: 3rem auto 0;
    width: 17rem;
    height: 21.5rem;
  }

  p.fxsync-warning {
    background-image: url('images/fxsync_error.png');
    background-repeat: no-repeat;
    background-size: 2rem;
    background-position: left center;
    padding-inline-start: 3rem;
    padding-top: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /******************************************************************************
   * Developer and Developer HUD
   *
   * Override default behavior to let checkbox text wrap on multiple lines
   */

  #developer ul li > label > span,
  #developer-hud ul li > label > span {
    overflow: visible;
    white-space: normal;
    min-height: 6rem;
    height: auto;
    line-height: 2.3rem;
    padding: 1.9rem 4rem 1.5rem;
    padding-inline-start: 3rem;
  }

  /* Style components in developer panel to match existing styles. */
  #developer ul li > gaia-checkbox,
  #developer-hud ul li > gaia-checkbox {
    padding: 1.5rem 0;
  }

  #developer-hud ul li > label > span.color-preview {
    padding-inline-start: 5rem;
  }

  #developer-hud ul li.hud-separator {
    border-top: 0.1rem solid #e6e6e3;
  }

  /******************************************************************************
  * App Permissions
  *
  * Note: The reason why we need this style is because element.hidden will make
  * the CSS specificity 0,0,1,0 (Yes, it is a pseudo class). And because our BB
  * 's CSS specificity is much higher than this, we have to override it again
  * to make sure it will display as hidden.
  */
  .clear-bookmarks-app[hidden] {
    display: none;
  }