.balance-hard-limit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 10px 0 12px;
  padding: 11px 13px;
  border: 1px solid #b9dfd0;
  border-radius: 11px;
  background: #f0faf6;
  color: #245d49;
}
.balance-hard-limit > span {
  display: grid;
  grid-template-columns: 22px auto;
  align-items: center;
  column-gap: 7px;
}
.balance-hard-limit > span i {
  grid-row: 1/3;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #168b65;
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}
.balance-hard-limit > span b {
  font-size: 11px;
}
.balance-hard-limit > span small {
  color: #66847a;
  font-size: 8px;
}
.balance-hard-limit dl {
  display: flex;
  gap: 16px;
  margin: 0;
}
.balance-hard-limit dl p {
  display: grid;
  gap: 2px;
  margin: 0;
}
.balance-hard-limit dt {
  color: #6e847c;
  font-size: 8px;
}
.balance-hard-limit dd {
  margin: 0;
  color: #183f32;
  font-size: 12px;
  font-weight: 850;
}
.balance-hard-limit > em {
  max-width: 260px;
  color: #628078;
  font-size: 8px;
  font-style: normal;
  line-height: 1.45;
}
.balance-hard-limit.blocked {
  border-color: #efb9b9;
  background: #fff3f3;
  color: #a02e2e;
}
.balance-hard-limit.blocked > span i {
  background: #d94040;
}
.balance-hard-limit.blocked dd {
  color: #922828;
}
.balance-hard-limit.compact {
  margin-top: 0;
}
.balance-hard-limit.compact > em {
  display: none;
}
#next.balance-blocked {
  border-color: #d99595;
  background: #fff;
  color: #bd3636;
}
body.theme-dark .balance-hard-limit {
  border-color: #315b4c;
  background: #142820;
  color: #aee0cd;
}
body.theme-dark .balance-hard-limit > span small,
body.theme-dark .balance-hard-limit dt,
body.theme-dark .balance-hard-limit > em {
  color: #8db4a5;
}
body.theme-dark .balance-hard-limit dd {
  color: #d6f3e7;
}
body.theme-dark .balance-hard-limit.blocked {
  border-color: #704044;
  background: #2d191c;
  color: #ffb2b2;
}
body.theme-dark .balance-hard-limit.blocked dd {
  color: #ffd0d0;
}
@media (max-width: 850px) {
  .balance-hard-limit {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .balance-hard-limit dl {
    width: 100%;
    justify-content: space-between;
  }
  .balance-hard-limit > em {
    max-width: none;
  }
}