/**
 * BiDi note: because this stylesheet is 'scoped', instead of:
 *     html[dir="rtl"] #volume { ... }
 * we must use:
 *     #volume:-moz-dir(rtl) { ... }
 */

#lockscreen .fake-notification {
  height: 6rem;
  padding: 0 1.5rem;
  font: 1.8rem/1.8rem auto;
  color: #e7e7e7;
  overflow: hidden;

  border-bottom: .1rem solid rgba(255, 255, 255, .05);
}

#lockscreen .fake-notification [data-icon] {
  width: 3rem;
  height: 3rem;
  margin: 1.5rem 0;
}
#lockscreen:-moz-dir(ltr) .fake-notification [data-icon] { float: left; }
#lockscreen:-moz-dir(rtl) .fake-notification [data-icon] { float: right; }

/* alert icon: white on red background */
#lockscreen [data-icon].alert {
  color: #fff;
  background-color: #b90000;
  border-radius: 50%;
  width: 2.4rem;
  height: 2.4rem;
  margin: 1.8rem 0;
}

#lockscreen [data-icon].alert:before {
  overflow: hidden;
  display: block;
  border-radius: 50%;
  font-size: 2rem; /* Slightly decreasing font-size to get the icon to fit in the circle */
  margin-top: -0.2rem;
  text-align: center;
}

#lockscreen .fake-notification .title-container {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#lockscreen .fake-notification .detail {
  color: #858585;
  font-size: 1.4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}