/* OVERVIEW */
#balance-tab-update-button {
  width: 13.5rem;
}

#balance-tab .overview {
  font-size: 1.6rem;
  line-height: 1.6rem;
  border-bottom: solid 0.1rem #b7b7b7;
  box-shadow: 0 0.1rem 0 0 rgba(255, 255, 255, 0.8);
  margin-bottom: 1rem;
  padding: 0 0 0.8rem;
  overflow: hidden;
  display: flex;
  align-items: center;
}

html[dir="ltr"] #balance-tab .overview .info {
  transform: translateX(4.0rem);
}
html[dir="rtl"] #balance-tab .overview .info {
  transform: translateX(-4.0rem);
}
#balance-tab .overview .info {
  transition: transform var(--transition-duration);
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  margin-bottom: 1rem;
  padding-inline-start: 1rem;
}

#balance-tab .overview .end {
  flex: 1;
}

#balance-tab-credit {
  font-weight: bold;
}

/* COUNTDOWN */
.countdown {
  font-size: 1.6rem;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #BBB;
}

#top-up-countdown {
  color: #c7c9c6;
}

/* ERROR MESSAGES */
section.content .error-messages[hidden] {
  transform: translateY(-10rem);
  display: block !important;
  height: 0;
  padding: 0;
}

section.content .error-messages {
  transform: translate(0,0);
  color: #b20000;
  font-size: 1.4rem;
  line-height: 1.4em;
  padding: 0 0.8rem 0.5rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
  border-bottom: solid 1px #b20000;
  transition: all 0.2s ease;
}

/* ICONS CONTAINER */
#balance-tab .overview .icons {
  width: 2.2rem;
  height: 2.2rem;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0 0.4rem;
  padding-inline-end: 0;
  margin: 0.5rem 1rem 1rem;
  flex: 0 0 2.2rem;
}

/* ICONS*/
#balance-tab .overview .icons progress,
#balance-tab .overview .icons .warning {
  display: none;
}

/* SPINNER */
#balance-tab .overview .icons progress {
  margin: -0.5rem 0 0 -0.5rem;
}

/* WARNING*/
#balance-tab .overview .icons .warning {
  background: url('./../images/app/icons/warning.png') no-repeat center / 2.2rem;
  width: 100%;
  height: 100%;
}

/* ALL STATES */
html[dir="ltr"] #balance-tab.updating .overview > .info,
html[dir="rtl"] #balance-tab.updating .overview > .info,
html[dir="ltr"] #balance-tab.warning .overview > .info,
html[dir="rtl"] #balance-tab.warning .overview > .info {
  transform: none;
}

/* UPDATING STATE */
#balance-tab.updating .overview .icons progress {
  display: block;
}

#balance-tab.updating .overview .icons .warning {
  display: none !important;
}

/* WARNING STATE */
#balance-tab.warning .overview .icons .warning{
  display: block;
}

#balance-tab.warning #balance-tab-credit,
#balance-tab.warning #balance-tab-currency {
  color: #777775;
}

/* LOW CREDIT STATE */
#balance-tab.low-credit #balance-tab-credit,
#balance-tab.low-credit #balance-tab-currency {
  color: #e7a239;
}

/* ZERO CREDIT STATE */
#balance-tab.no-credit #balance-tab-credit,
#balance-tab.no-credit #balance-tab-currency {
  color: #a50606;
}