#system-overlay.battery {
  visibility: visible;
}

#system-overlay.battery #battery {
  display: block;
}

#battery {
  display: none;
  background-image: url('images/header_bg.png');
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4rem;
  font-size: 1.4rem;
  font-weight: 500;
  padding: 1rem 0;
  pointer-events: auto;
}

.icon-battery {
  display: block;
  width: 4.2rem;
  height: 1.8rem;
  margin: 0 1.3rem;
  background-image: url('images/battery_empty_small.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 4.2rem;
}
html[dir="ltr"] .icon-battery { float: left; }
html[dir="rtl"] .icon-battery { float: right; }

#battery span.icon-battery {
  height: 4rem;
}

#battery span {
  vertical-align: middle;
  line-height: 2rem;
}

.battery-notification {
  display: inline-block;
  width: calc(100% - 6.8rem);
}

.battery-notification span {
  display: block;
}

html[dir="ltr"] #battery.disappearing {
  animation: notification-disappear-ltr 1.5s;
}
html[dir="rtl"] #battery.disappearing {
  animation: notification-disappear-rtl 1.5s;
}

@keyframes notification-disappear-ltr {
  to {
    transform: translateX(100%);
  }
  from {
    transform: translateX(0);
  }
}

@keyframes notification-disappear-rtl {
  to {
    transform: translateX(-100%);
  }
  from {
    transform: translateX(0);
  }
}