* {
  margin: 0%;
  padding: 0%;
}
.open-account-title {
  align-self: stretch;
  font-family: Roboto;
  font-size: 22px;
  font-style: normal;
  font-weight: 800;
  line-height: 32px;
  color: #000;
}
.open-account-description {
  font-family: Roboto;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.2px;
  color: #000;
}
.open-account-container {
  display: flex;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  border-radius: 16px;
}
.open-account-desc-container {
  display: flex;
  align-items: center;
  gap: 8px;
}
.open-account-upcoming-payments {
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  color: #000;
}
.account-info {
  font-family: Roboto;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.2px;
  color: #434343;
}
.account-info-value {
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  color: #000;
}
.dtc-banner-amount {
  color: var(--tints-shades-white-black-white, #fff);
  text-align: center;
  font-variant-numeric: lining-nums proportional-nums;
  text-shadow: 0px 30px 16px rgba(0, 0, 0, 0), 0px 30px 24px rgba(0, 0, 0, 0.01),
    0px 8px 15px rgba(0, 0, 0, 0.04), 0px 2px 40px rgba(0, 0, 0, 0.05);
  font-family: Roboto;
  font-size: 32px;
  font-style: normal;
  font-weight: 800;
  line-height: 40px;
  letter-spacing: -0.5px;
}
.dtc-banner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
  position: relative;
  overflow: hidden;
}
.dtc-banner-alignemt {
  text-align: center;
  color: white;
  z-index: 1;
  position: absolute;
}
.gradient-card {
  background: linear-gradient(147deg, #a230c1 8.54%, #e51866 118.61%);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.gradient-card::before {
  content: "";
  position: absolute;
  top: -25%;
  left: -13%;
  width: 23%;
  height: 80%;
  background: linear-gradient(
    77deg,
    #ffb900 -65.77%,
    #fd452a 41.54%,
    #f91d71 140.59%
  );
  transform: rotate(200.236deg);
  z-index: 1;
  border-radius: 50px 0 0 0;
}

.gradient-card::after {
  content: "";
  position: absolute;
  bottom: -40px;
  right: -40px;
  width: 95%;
  height: 45%;
  background: linear-gradient(
    88deg,
    #ffb900 -20.39%,
    #fd452a 25.27%,
    #f91d71 70.93%,
    #a230c1 126.9%
  );
  border-radius: 300px 0 0 0;
  z-index: 0;
}

.overlay-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
}
.account-divider {
  height: 1.5px;
  background: linear-gradient(
    to right,
    #ffb900,
    #ff8400,
    #ff5000,
    #e51866,
    #a230c1
  );
  border: none;
}
.past-due-divider {
  height: 1.5px;
  background: #e22721;
  border: none;
}
.past-due-accounts {
  background: #ffeae9 !important;
  padding-bottom: 16px;
  border-radius: var(--Radius-16, 16px) var(--Radius-16, 16px) 0px 0px;
}
.open-accounts-Header {
  padding: 16px 16px 0px 16px;
  width: 100%;
  padding-bottom: 16px;
}
.accounts-info-container {
  border-radius: 8px;
  border: 0.5px solid #d4d4d5;
  background-color: #f7f7f7;
  padding: 8px 0px 8px 12px;
}
.account-info-value-yellow {
  border-radius: var(--Radius-8, 8px);
  border: 0.5px solid var(--System-Warning-Yellow, #ffb900);
  background: var(--System-Warning---Background, #fff4d7);
}
.accounts-info-past-due {
  border: 0.5px solid #e22721 !important;
  background-color: #ffeae9 !important;
  border-radius: 8px;
  padding: 8px 0px 8px 12px;
}
.info-icon {
  color: #a230c1;
}
.past-due-info-icon {
  color: #000000;
}
.past-due-account-label {
  color: var(--Type-Colors-Dark-Type---Primary, #000);
  /* Mobile/Label - Bold */
  font-family: Roboto;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px; /* 150% */
  letter-spacing: 0.2px;
}
.viewmoreBtn {
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.2px;
  padding: 15px;
  background-color: #434343;
  color: #fff;
  width: 100%;
  text-transform: none;
}
@media (max-width: 680px) {
  .ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    flex: 1;
  }
}
@media (max-width: 680px) {
  .responsive-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 30%;
  }
}
.payment-plans-container {
  margin: 0px 16px 16px 16px;
  display: flex;
  align-items: flex-start;
  align-self: stretch;
  border-radius: var(--Radius-8, 8px);
  border: 1px solid var(--System-Error---Red, #e22721);
  background: var(--System-Error---Background, #ffeae9);
  box-shadow: none;
}
.payment-plans-desc-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex: 1 0 0;
  gap: 8px;
  align-self: stretch;
  padding: 0%;
}
.start-payment-plan {
  color: var(--Type-Colors-Dark-Type---Primary, #000);
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 150% */
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  cursor: pointer;
}
.custom-heading {
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 800;
  font-size: 22px;
  line-height: 32px;
  letter-spacing: 0px;
  padding: 0px;
  font-variant-numeric: lining-nums proportional-nums;
}
.border-box {
  border: 1px solid #d4d4d5;
  border-radius: 8px;
  padding: 12px;
  margin-top: 0px;
}
.amount-text {
  color: var(--Type-Colors-Dark-Type---Primary, #000);
  /* Mobile/Label - Bold */
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px; /* 150% */
  letter-spacing: 0.2px;
  font-family: rob;
}
.custom-tabs {
  display: flex;
  width: 100%;
  position: relative;
  /* border-bottom: 1px solid #e0e0e0; */
  background-color: #fff;
}
.custom-no-border-scroll {
  overflow-y: auto;
}
.custom-stack-container {
  display: flex;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  border-radius: var(--Radius-16, 16px);
  background: var(--tints-shades-white-black-white, #fff);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.03);
}
.custom-transaction-item {
  display: flex;
  padding: 12px 0px 12px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  border-radius: var(--Radius-16, 16px);
  background: var(--tints-shades-white-black-white, #fff);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.03);
}
.flex-column-start {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.flex-center-gap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.info-icon-style {
  font-size: 24px;
  color: black;
  margin-top: 2px;
}
.info-purple-icon-style {
  font-size: 16px;
  color: #a230c1;
  margin-top: 2px;
}
.custom-box {
  padding: 8px;
  border-radius: 8px;
  border-width: 0.5px;
  background-color: #f7f7f7;
  border-color: #d4d4d5;
}
.custom-link {
  font-family: Roboto;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.2px;
  color: #000;
  text-decoration: underline;
}
.appstore-card-container {
  display: flex;
  flex-direction: row;
  margin-top: 31px;
  border-radius: var(--Radius-16, 16px);
  background: var(--Background-Palette-White, #fff);
  box-shadow: 0px 30px 16px 0px rgba(0, 0, 0, 0),
    0px 30px 24px 0px rgba(0, 0, 0, 0.01), 0px 8px 15px 0px rgba(0, 0, 0, 0.04),
    0px 2px 40px 0px rgba(0, 0, 0, 0.05);
  position: relative;
}
.appstore-text-section {
  padding: 16px 0 24px 16px;
  flex: 1 1 0;
}
@media (min-width: 403px) {
  .appstore-text-section {
    padding: 38px 24px 38px 16px;
    flex: 1 1 0;
  }
}
.appstore-label {
  font-variant-numeric: lining-nums proportional-nums;
  font-family: Roboto;
  font-size: 24px;
  font-style: normal;
  font-weight: 800;
  line-height: 32px;
  background: var(
    --Gradients-Pink-to-Purple,
    linear-gradient(156deg, #e51866 12.81%, #a230c1 166.57%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 16px;
}
.phone-section-container {
  position: relative;
  flex: 1 1 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding-right: 0;
  z-index: 1;
  overflow: visible;
  max-width: 50%; /* Prevent overflow */
}
@media (min-width: 403px) {
  .phone-section-container {
    max-width: 50%;
  }
}
.phone-section-img {
  height: 220px;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  transform: translateY(20px); /* Only vertical overflow */
}
.open-account-epd-container {
  display: flex;
  padding: 16px;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  border-radius: var(--Radius-8, 8px);
  border: 1px solid var(--tints-shades-white-black-grey-20, #d4d4d5);
  background: #fff;
  margin: 0px 16px 16px 16px;
}
.open-account-epd-close-icon {
  border-radius: 100px;
  display: flex;
  width: 32px;
  height: 32px;
  padding: 0px 16px;
  justify-content: center;
  align-items: center;
  background: var(--Type-Colors-Light-Type---Secondary, #f7f7f7);
}