@import url('core.css');

nav {
  height: 87px;
  flex-shrink: 0;
  background: lightcoral;
}

nav.navigation-bar {
  display: flex;
  justify-content: space-between;
  padding: 0px 2rem;
  position: fixed;
  margin-bottom: 39px;
  align-items: center;
  border-radius: 0px 0px 50px 50px;
  background: #045464;
  z-index: 100;
}

.navigation-bar .goback img {
  width: 2rem;
  height: 1rem;
  stroke-width: 2.5px;
  stroke: #fff;
}

.navigation-bar .title span {
  color: #fff;
  font-family: 'main_font';
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

section {
  padding: 0 2rem;
}

.container-balance {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
  flex-direction: column;
  align-items: center;
}

.container-balance .card {
  border-radius: 15px;
  border: 1px solid rgba(4, 84, 100, 0);
  background: var(--color-green);
  backdrop-filter: blur(2px);
  width: 350px;
  height: 115px;
  flex-shrink: 0;
}

.container-balance .card .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
}

.container-balance .card span.balance {
  color: #fff;
  font-family: 'main_font';
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.container-balance .card span.text {
  color: #fff;
  font-family: 'main_font';
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.container-balance .card-setor-balance {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 7px;
}

.container-balance .card-setor-balance {
  margin-top: -20px;
  width: 231px;
  height: 50px;
  z-index: 1;
  border-radius: 50px;
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.card-setor-balance {
  position: absolute;
  top: 14rem;
}

.container-balance .card-setor-balance span {
  color: var(--card-poni-color);
  font-family: 'main_font';
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

section.savings {
  margin-top: 8em;
}

section.container-savings {
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
}

section.container-savings .container {
  padding: 0;
}

.container-savings .title p {
  color: #000;
  font-family: 'main_font';
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.container-savings .list-savings {
  margin-top: 1rem;
}

.container-savings .list-savings {
  height: inherit;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.list-savings .item {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  height: 2rem;
}

.list-savings .item .icon {
  display: flex;
  align-items: center;
}

.list-savings .item .icon img {
  width: 32px;
  height: 32px;
}

.list-savings .item .savings-name {
  display: flex;
  flex-direction: column;
  flex: none;
  margin-right: auto;
  gap: 5px;
}

.list-savings .item .savings-name span:nth-child(1) {
  color: #000;
  font-family: 'main_font';
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.list-savings .item .savings-name span:nth-child(2) {
  color: #000;
  font-family: 'main_font';
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.list-savings .item .balance {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.list-savings .item .balance span:nth-child(1) {
  color: var(--color-green);
  text-align: right;
  font-family: 'main_font';
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-left: auto;
}

.list-savings .item .balance span:nth-child(2) {
  color: #000;
  text-align: right;
  font-family: 'main_font';
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-left: auto;
}

.transaction-histories .container {
  padding: 0;
}

.transaction-histories {
  margin-top: 1rem;
  width: 100%;
  height: 100vh;
  height: max-content;
  border-radius: 15px 15px 0px 0px;
  background: #fff;
  /* background: grey; */
  box-shadow: 0px -4px 10px 0px rgba(0, 0, 0, 0.1);
}

.transaction-histories .card {
  width: 100%;
}

.transaction-histories .card .card-header {
  display: flex;
  justify-content: space-between;
  height: 4rem;
  align-items: center;
}

.transaction-histories .card .card-header span:nth-child(1) {
  color: #000;
  font-family: 'main_font';
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.transaction-histories .card .card-header span:nth-child(2) {
  color: #000;
  font-family: 'main_font';
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.transaction-histories .card .card-body {
  height: inherit;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.transaction-histories .card .card-body .list-data {
  display: flex;
  justify-content: space-between;
  column-gap: 9px;
}

.transaction-histories .card .card-body .list-data .icon {
  display: flex;
  align-items: center;
}

.transaction-histories .card .card-body .list-data .icon img {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.transaction-histories .card .card-body .list-data .transaction {
  display: flex;
  flex-direction: column;
  flex: none;
}

.transaction-histories .card .card-body .list-data .transaction span:nth-child(1) {
  color: #000;
  font-family: 'main_font';
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.transaction-histories .card .card-body .list-data .transaction span:nth-child(2) {
  color: #000;
  font-family: 'main_font';
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-top: auto;
}

.transaction-histories .card .card-body .list-data .amount {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.transaction-histories .card .card-body .list-data .amount span:nth-child(1) {
  color: #045464;
  text-align: right;
  font-family: 'main_font';
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.transaction-histories .card .card-body .list-data .amount span:nth-child(2) {
  color: #000;
  text-align: right;
  font-family: 'main_font';
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-top: auto;
}

.popup-setor .content-body p.desc {
  color: #045464;
  font-family: 'main_font';
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding: 0 0 13px;
}

.popup-setor .content-body .payment-methods {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* background: red; */
}

.popup-setor .content-body .payment-methods .btn-group {
  height: 50px;
  border-radius: 10px;
  border: 0.5px solid rgba(4, 84, 100, 0.5);
  background: white;
  padding: 0 15px;
}

.popup-setor .content-body .payment-methods .btn-group .choose-metode {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  gap: 2em;
  align-items: center;
  height: 100%;
}

.popup-setor .payment-methods .btn-group .choose-metode img {
  width: 91px;
  height: 25px;
  flex-shrink: 0;
}

.popup-setor .payment-methods .btn-group .choose-metode .account-number {
  color: #045464;
  font-family: 'main_font';
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.popup-setor .content-body .confirm {
  margin-top: 13px;
}

.popup-setor .content-body .noted {
  color: #045464;
  text-align: center;
  font-family: 'main_font';
  font-size: 10px;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
}

#popup_detail_transaksi .content-body .detail {
  display: flex;
  justify-content: start;
  padding: 5px 0px 10px;
  font-size: 13px;
  gap: 10px;
}

#popup_detail_transaksi .detail span:nth-child(1) {
  /* width: 6rem; */
  width: 100px;
  white-space: nowrap;
}