.post-login-overview .nav-card-list {
  width: 100%;
}
.post-login-tab {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px;
}
.post-login-tab::-webkit-scrollbar {
  display: none;
}

.warning {
  background: #FFF1D5;
  padding: 16px 16px 16px 24px;
  margin-bottom: 24px;
}
.warning img{
  max-width: none !important;
  width: 70px !important;
  height: 70px !important;
}

.overview-list {
  background: radial-gradient(
    138.31% 76.86% at 0% 0%,
    rgba(199, 255, 152, 0.2) 0%,
    rgba(236, 250, 226, 0.41) 60.75%,
    #f8f8f8 100%
  );
}
.overview-item:hover {
  border-color: #9fe870 !important;
  box-shadow: 0px 2px 16px 0px rgba(159, 232, 112, 0.4);
  backdrop-filter: blur(4.5px);
}
.overview-item .item-value {
  text-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
}
.overview-item .item-value svg {
  width: 20px !important;
  height: 20px !important;
}
.overview-item .repayment-link {
  margin-left: auto;
}
.overview-item .repayment-link:hover {
  border-color: #015c2e !important ;
}
.overview-item .credit-image {
  width: 20%;
  /*padding: 27px 38px 27px 38px;*/
  height: 142px;
}
.overview-item .credit-image.vertical {
  padding: 10px 30px 10px 30px;
  height: 220px;
}
.overview-item > .item-wrapper:has(.credit-image.vertical) {
  align-items: center !important;
}
.overview-item .credit-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.tab-pane {
  scroll-margin-top: 180px;
}
/* Detail */
.tab-pane:has(.pl-detail) {
  background: linear-gradient(180deg, #daf6c6 0%, #f8f8f8 23.57%);
}
.pl-detail-wrapper {
  max-width: 960px;
  margin-right: auto;
  margin-left: auto;
}
.pl-detail .product-name.collapsed {
  background: transparent;
}
.pl-detail .product-name:not(.collapsed) {
  background: white !important;
  border-radius: 16px 16px 0 0;
}
.pl-detail .product-name:not(.collapsed) > .arrow-icon,
.overview-list .product-name:not(.collapsed) > .arrow-icon {
  transform: rotate(180deg);
}
.pl-detail .payment-collapse.show {
  border-radius: 0 0 16px 16px;
  overflow: hidden;
}
/* Table */
.history-table {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overflow-x: auto;
}
.history-table:-webkit-scrollbar {
  display: none;
}
.header-col,
.body-col {
  display: flex;
  background: #ecfae2;
  white-space: nowrap;
  padding: 8px 12px;
  line-height: 140%;
  height: 44px;
  color: #4d4d4d;
  font-size: 15px;
  align-items: center;
  flex-shrink: 0;
}
.body-col {
  border-top: 1px solid #ececec;
  background: white;
  color: #747474;
}
.col-number {
  width: 53px;
}
.header-col:not(:first-child),
.body-col:not(:first-child) {
  width: 165px;
}
.header-col:not(:last-child),
.body-col:not(:last-child) {
  border-right: 1px solid #ececec;
}
.body-col.col-status .payment-status {
  padding: 4px 12px;
  font-size: 12px;
  text-transform: uppercase;
  line-height: 150%;
  font-family: "Averta-bold";
  border-radius: 16px;
}
.pl-detail-pagination {
  height: 31px;
}
.pl-detail-pagination .nav-tabs {
  margin: 0;
}
.pl-detail-pagination .nav-tabs .nav-item {
  width: 20px;
  height: 20px;
}
.pl-detail-pagination .nav-pro-link {
  border: none;
  background: none;
  color: #bbb;
}
.pl-detail-pagination .nav-pro-link.active {
  color: #00994f;
}
.pl-detail .pl-tab-item {
  cursor: pointer;
  color: #000;
  width: 223px;
  height: 56px;
  font-family: "Averta-semibold";
}
.pl-detail .pl-tab-item:has(.nav-item.active) {
  background: #ecfae2;
  color: #00994f;
}
.pl-detail .repeatable.tabbed .tab {
  margin: 0;
}
.pl-detail .pl-tab-list .pl-tab-item > .nav-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
/* detail-CRC */
.pl-detail-crc .crc-image {
  padding: 30px 54px;
}
.pl-detail-crc .lock-card-btn {
  min-width: 148px;
  padding: 8px 24px;
}
.pl-detail-crc .lock-card-btn:hover {
  border-color: #015c2e !important;
}
.input-number-card,
.input-otp {
  max-width: 86px;
  height: 101px;
  padding: 12px 0;
  background-color: #ffffff;
  border: 1px solid #bbbbbb;
  outline: none;
  text-align: center;
  width: 100%;
}
.input-number-card.filled,
.input-otp.filled {
  border-color: #d7d7d7;
  background-color: #f8f8f8;
  transition: background-color 0.3s;
}
#send-otp {
  width: 161px;
  min-width: 148px;
  padding: 8px 24px;
  background: #d7d7d7;
  border-color: #d7d7d7;
  color: #747474;
  pointer-events: none;
}
#send-otp.active {
  background: #9fe870;
  border-color: #9fe870;
  color: #015c2e;
  pointer-events: visible;
}
#send-otp.active:hover,
.crc-information .btn-payment:hover {
  border-color: #015c2e !important;
}
/* fast cash */
.fc-loan-item:last-child .divider {
  display: none;
}
.crc-information-detail {
  flex-basis: 50%;
}
.crc-information-image .information-image {
  width: 128px;
  height: 80px;
}
.error-msg {
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 12px;
}
.error-message {
  font-size: 15px;
  color: var(--gray-6);
  line-height: 140%;
  font-family: "Averta-regular" !important;
}
.post-login-modal {
  position: relative;
  display: flex !important;
  z-index: 1;
}
.post-login-modal .modal-content {
  top: unset;
  width: 672px;
  min-height: 447px;
}
.post-login-modal .modal-content#convert-ipp {
  min-height: 324px;
}
.post-login-modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 2026;
  display: none;
  transition: all ease-in-out 0.3s;
}

.post-login-modal-wrapper.show {
  display: flex;
}
.post-login-modal-wrapper .modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100% !important;
  height: 100% !important;
  background-color: #292929;
  opacity: 0.75;
}

.post-login-modal-wrapper .modal-icon {
  width: 76px;
  height: 76px;
}

.post-login-modal-wrapper .btn-crc-close:hover,
.pl-default-btn:hover {
  background-color: #ecfae2 !important;
}

.pl-primary-btn:hover {
  border-color: #015c2e !important;
}
.pl-primary-btn.disabled {
  border-color: #d7d7d7 !important;
  background-color: #d7d7d7 !important;
  color: #747474 !important;
  cursor: none;
  pointer-events: none;
}
.post-login .accordion-body {
  padding: 16px;
}
@media (max-width: 767px) {
  /* CRC information */
  .crc-information-detail {
    max-width: 100%;
  }
  .pl-detail .repeatable-mobile .pl-tab-item {
    width: 100%;
    height: 34px;
  }
  .pl-detail .repeatable-mobile .pl-tab-item:has(.nav-item.active) {
    background: white;
  }
  .pl-detail .repeatable-mobile .pl-tab-list .pl-tab-item > .nav-item {
    justify-content: flex-start;
  }
  .post-login-modal {
    max-width: 90%;
  }
  .post-login-modal-wrapper .modal-dialog-centered {
    padding: 0;
  }
  .post-login-modal-wrapper .modal-icon {
    width: 60px;
    height: 60px;
  }
  .post-login-modal-wrapper .popup-container {
    padding-bottom: 0;
  }

  .post-login-modal .modal-content {
    width: 100%;
    height: fit-content;
  }
  .post-login .accordion-body {
    padding: 10px;
  }
  .post-login .img-bg-customer {
    min-height: 121px;
    object-position: left;
    width: 80%;
    transform: translateY(10px);
  }
}
@media (min-width: 768px) {
  /* CRC information */
  .crc-information-detail {
    width: calc(50% - 8px);
    max-width: calc(50% - 8px);
  }
  .crc-information-image {
    flex-grow: 1;
  }
  .crc-information-image .information-image {
    width: 180px;
    height: 105px;
  }
  .post-login .information-item {
    flex-grow: 1;
    flex-basis: 50%;
    max-width: calc(50% - 8px);
    width: calc(50% - 8px);
  }
  .post-login .img-bg-customer {
    height: 178px;
    max-width: 480px;
    transform: translateY(28px);
  }
}
/* Responsive */
.detail-transaction-table .header-col,
.detail-transaction-table .body-col {
  height: 31px;
  font-size: 11px;
}

.infor-loan-table .header-col,
.infor-loan-table .body-col {
  font-size: 11px;
  height: auto;
  flex-wrap: wrap;
  white-space: initial;
}

/* Mobile-first responsive design */
.statement-card {
  overflow-x: hidden;
}

.credict-table {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px;
}

/* Mobile grid items */
.credit-info-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px;
}

.credit-divider {
  width: 100% !important;
}

/* Mobile table improvements */
@media (max-width: 767px) {
  .statement-card {
    padding: 16px !important;
    gap: 16px !important;
  }

  .credict-table {
    padding: 16px !important;
    font-size: 14px !important;
  }

  .credict-table .fs-15 {
    font-size: 14px !important;
  }

  .credict-table .fs-13 {
    font-size: 12px !important;
  }

  /* Make transaction tables more mobile friendly */
  .detail-transaction-table,
  .infor-loan-table {
    font-size: 11px !important;
  }

  .detail-transaction-table .header-col,
  .detail-transaction-table .body-col,
  .infor-loan-table .header-col,
  .infor-loan-table .body-col {
    padding: 6px 8px !important;
    font-size: 11px !important;
    min-height: 28px !important;
    height: auto !important;
  }

  /* Adjust table column widths for mobile */
  .detail-transaction-table .header-col:nth-child(1),
  .detail-transaction-table .body-col:nth-child(1) {
    width: 80px !important;
  }

  .detail-transaction-table .header-col:nth-child(2),
  .detail-transaction-table .body-col:nth-child(2) {
    width: 80px !important;
  }

  .detail-transaction-table .header-col:nth-child(4),
  .detail-transaction-table .body-col:nth-child(4) {
    width: 120px !important;
  }
}

/* Tablet and desktop */
@media (min-width: 768px) {
  .credict-table {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    flex-direction: initial !important;
  }

  .credit-info-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 16px;
  }

  .credit-divider {
    grid-column: span 2;
  }
}

@media (min-width: 992px) {
  .credict-table {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 991px) {
  .overview-item .item-detail {
    align-items: flex-start !important;
  }
  .overview-item .credit-image {
    width: 80%;
    height: 142px;
    /*padding: 20px 35px 20px 35px;*/
  }
  .overview-item .credit-image.vertical {
    width: 70%;
    height: 200px;
  }
  .overview-item .item-crc-wrapper {
    align-self: stretch;
  }
  .pl-detail-wrapper {
    padding: 16px;
  }
  .bill-link {
    padding: 4px 0;
  }
  .pl-detail > .repeatable {
    border-bottom: 1px solid;
  }
  .pl-detail .pl-tab-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .pl-detail .pl-tab-list > .nav {
    flex-wrap: nowrap;
  }
  .pl-detail .pl-tab-list::-webkit-scrollbar {
    display: none;
  }
  .pl-detail .pl-tab-item {
    width: fit-content;
    min-width: 153px;
    height: 48px;
  }
  .pl-detail .pl-tab-list .pl-tab-item > .nav-item {
    justify-content: center;
  }
  .pl-detail-crc .info-item {
    flex: 0;
  }
  .overview-item .repayment-link-wrapper {
    width: 100%;
  }
}
@media (min-width: 992px) {
  .overview-item .item-value {
    padding: 7px 0;
    align-self: stretch;
  }
  .pl-detail-crc .crc-image {
    max-width: calc(50% - 8px);
  }
  .overview-item .item-wrapper .item-detail > .flex-1 {
    max-width: calc(20% - 9.6px);
  }
  .overview-item .item-crc-wrapper .item-detail > .flex-1 {
    max-width: calc(33% - 9px);
  }
  .pl-detail-crc > .repeatable {
    border-right: 1px solid;
  }
  .crc-information-image .information-image {
    width: 200px;
    height: 125px;
  }
}
@media (min-width: 1280px) {
  .pl-detail-crc .crc-image {
    max-width: calc(50% - 12px);
  }
  .overview-item .item-wrapper .item-detail > .flex-1 {
    max-width: calc(20% - 12.8px);
  }
  .overview-item .item-crc-wrapper .item-detail > .flex-1 {
    max-width: calc(33% - 12px);
  }
  .crc-information-detail {
    width: calc(50% - 12px);
    max-width: calc(50% - 12px);
  }
  .post-login .information-item {
    width: calc(50% - 12px);
    max-width: calc(50% - 12px);
  }
  .overview-item .item-value svg {
    width: 24px !important;
    height: 24px !important;
  }
}