/* ====================
Auto Pay Classes
==================== */

.cp__autopay-full-width-container {
  display: flex;
  flex-direction: column;
  padding: 32px;
  background: #f5f5f5;
  align-items: center;
}

@media screen and (min-width: 1026px) {
  .cp__autopay-full-width-container {
    flex-direction: row;
    align-items: flex-start;
  }

  .ap__two-cards.cp__autopay-full-width-container {
    display: none;
  }
}

.cp__autopay-header {
  font-size: 14px;
}

.cp__autopay-icon {
  margin-bottom: 32px;
}

@media screen and (min-width: 1026px) {
  .cp__autopay-icon {
    margin-bottom: 0;
  }
}

.cp__autopay-icon svg {
  width: 50px;
  height: 50px;
}

@media screen and (min-width: 1026px) {
  .cp__autopay-icon svg {
    width: 32px;
    height: 32px;
  }
}

.cp__autopay-link-mobile {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.cp__autopay-link {
  display: block;
}

@media screen and (min-width: 1026px) {
  .cp__autopay-link-mobile {
    display: none;
  }

  .cp__autopay-link {
    display: inline-block;
  }
}

/* ====================
Account Payment Classes
==================== */

/* progress loader classes */
.ap__progress-loader {
  height: 120px;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  background-color: white;

  padding: 32px;
  margin-bottom: 32px;

  overflow-y: hidden;
  border: 1px solid #ccc;
}

.ap__progress-loader__animation svg {
  width: 60px;
  height: 60px;
  display: inline-block;
}

.ap__progress-loader__animation svg path {
  fill: #0392cf;
}

.ap__progress-loader__text {
  font-weight: bold;
}

.ap__card-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 16px;
}

@media screen and (min-width: 1026px) {
  .ap__card-wrapper {
    flex-direction: row;
    margin-top: 32px;
  }
}

.ap__two-cards.ap__card-wrapper {
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
  width: calc(100% + 16px);
}

@media screen and (min-width: 1026px) {
  .ap__two-cards.ap__card-wrapper {
    flex-wrap: nowrap;
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
  }
}

.ap__three-cards.ap__card-wrapper,
.ap__multiple-cards.ap__card-wrapper {
  width: calc(100% + 16px);
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
}

@media screen and (min-width: 1026px) {
  .ap__three-cards.ap__card-wrapper,
  .ap__multiple-cards.ap__card-wrapper {
    width: calc(100% + 32px);
    margin-left: -16px;
    margin-right: -16px;
  }
}

.ap__card {
  display: flex;
  width: 100%;
  border: 1px solid #ccc;
  font-size: 14px;
  color: #404040;
}

.ap__card.cp__hide {
  display: none;
  pointer-events: none;
}

.ap__two-cards.ap__card {
  flex-direction: column;
  width: calc(50% - 16px);
  margin-left: 8px;
  margin-right: 8px;
  border-bottom: 1px solid #ccc;
}

.ap__three-cards.ap__card {
  display: none;
}

@media screen and (min-width: 1026px) {
  .ap__two-cards.ap__card,
  .ap__three-cards.ap__card {
    width: calc(33.3% - 32px);
    margin-left: 16px;
    margin-right: 16px;
  }

  .ap__three-cards.ap__card {
    display: flex;
    flex-direction: column;
  }
}

.ap__card-inner-wrapper {
  width: 100%;
}

/*inner-card-wrapper within carousel-slide */
.ap__carousel .ap__card-inner-wrapper {
  height: auto;
  min-height: 18rem;
  border: 1px solid #ccc;
}

.js__ap__card-inner-wrapper__promise .ap__carousel .ap__card-inner-wrapper {
  height: auto;
  min-height: 28rem;
  border: 1px solid #ccc;
}

.ap__content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
  width: 100%;
}

@media screen and (min-width: 1026px) {
  .ap__content-wrapper {
    flex-direction: row;
    align-items: start;
    padding: 32px;
  }
}

@media screen and (min-width: 1026px) {
  .ap__two-cards .ap__content-wrapper,
  .ap__three-cards .ap__content-wrapper,
  .ap__multiple-cards .ap__content-wrapper {
    flex-direction: column;
  }
}

.ap__account-information {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-bottom: 16px;
}

@media screen and (min-width: 1026px) {
  .ap__account-information {
    flex-direction: column;
    width: calc(100% - 200px);
    padding-bottom: 0;
  }
}

.ap__two-cards .ap__account-information,
.ap__three-cards .ap__account-information,
.ap__multiple-cards .ap__account-information {
  flex-direction: column;
  padding-bottom: 24px;
  border-bottom: 1px solid #ccc;
}

@media screen and (min-width: 1026px) {
  .ap__two-cards .ap__account-information,
  .ap__three-cards .ap__account-information,
  .ap__multiple-cards .ap__account-information {
    width: 100%;
  }
}

.ap__account-information .ap__address {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ap__card:nth-child(1):last-child .ap__account-information .ap__address {
  white-space: normal;
}

@media screen and (min-width: 1026px) {
  .ap__number {
    padding-bottom: 8px;
  }
}

.ap__two-cards .ap__number,
.ap__three-cards .ap__number,
.ap__multiple-cards .ap__number {
  padding-bottom: 8px;
}

.ap__bill-information {
  width: 100%;
  padding-bottom: 16px;
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 1026px) {
  .ap__bill-information {
    padding-bottom: 0;
  }
}

.ap__two-cards .ap__bill-information,
.ap__three-cards .ap__bill-information {
  padding-top: 24px;
  padding-bottom: 0;
}

.ap__multiple-cards .ap__bill-information {
  padding-top: 16px;
  padding-bottom: 0;
}

.ap__status-container {
  padding-bottom: 8px;
}

.ap__status-label {
  padding-right: 16px;
}

.ap__status-autopay {
  color: #7ac043;
}

.ap__status-levelized {
  color: #7ac043;
}
.ap__status-autopay-separator {
  padding-left: 4px;
  border-left: 1px solid #ccc;
}

.ap__amount {
  padding-right: 20px;
}

.ap__debt {
  color: red;
}

.ap__account-button-wrapper {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.ap__account-header {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 8px 16px;
  background-color: #f9f9f9;
  height: 50px;
}

@media screen and (min-width: 1026px) {
  .ap__account-header {
    padding: 16px;
    height: 64px;
  }
}

.ap__account-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 8px;
}

.ap__account-icon.cp__hide {
  display: none;
}

.ap__account-icon svg path {
  fill: #0392cf;
}

@media screen and (min-width: 1026px) {
  .ap__account-icon {
    padding-right: 16px;
  }
}

.ap__energy {
  border-bottom: 4px solid #7ac043;
}

.ap__fiber {
  border-bottom: 4px solid #0392cf;
}

.ap__amount-container {
  display: flex;
  flex-direction: row;
}

@media screen and (min-width: 1026px) {
  .ap__amount-container {
    flex-direction: row;
  }
}

.ap__two-cards .ap__amount-container,
.ap__three-cards .ap__amount-container,
.ap__multiple-cards .ap__amount-container {
  display: flex;
  flex-direction: row;
}

.ap__date-container {
  display: flex;
  flex-direction: column;
}

/* Promise to Pay Section */
.ap__promise__title {
  display: flex;
  position: relative;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 12px;
  margin-bottom: 20px;
}

.ap__promise__title::after {
  content: "";
  display: block;
  height: 4px;
  width: 20px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #8ad74a;
}

.ap__promise__icon-info {
  margin-left: 8px;
}

.ap__promise__status {
  display: flex;
  position: relative;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 4px;
}

.ap__promise__status-icon {
  margin-right: 8px;
}

.ap__pay-now-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 8px;
  margin-top: 32px;
}

.ap__pay-now-card.cp__hide {
  display: none;
}

@media screen and (min-width: 1026px) {
  .ap__two-cards .ap__pay-now-card,
  .ap__three-cards .ap__pay-now-card,
  .ap__multiple-cards .ap__pay-now-card {
    justify-content: space-between;
    margin-left: 16px;
    margin-right: 16px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    width: calc(33.3% - 32px);
    border: 1px solid #ccc;
  }

  .ap__three-cards .ap__pay-now-card,
  .ap__multiple-cards .ap__pay-now-card {
    width: 100%;
    border: none;
  }
}

.ap__pay-now-button-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.ap__pay-now-button-wrapper.ap__autopay {
  justify-content: center;
}

@media screen and (min-width: 1026px) {
  .ap__pay-now-button-wrapper {
    padding: 32px;
  }
}

@media screen and (min-width: 1026px) {
  .ap__three-cards .ap__pay-now-button-wrapper,
  .ap__multiple-cards .ap__pay-now-button-wrapper {
    flex-direction: row;
    align-items: center;
    border-top: none;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
  }
}

.ap__pay-now-button-wrapper h4 {
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 32px;
  font-size: 12px;
  font-family: "FuturaNext-Book", sans-serif;
  letter-spacing: 2px;
}

@media screen and (min-width: 1026px) {
  .ap__three-cards .ap__pay-now-button-wrapper h4,
  .ap__multiple-cards .ap__pay-now-button-wrapper h4 {
    margin-bottom: 0;
  }
}

.ap__pay-now-button {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  width: 100%;
  position: relative;
}

@media screen and (min-width: 1026px) {
  .ap__pay-now-button {
    text-align: left;
    max-width: 180px;
  }
}

@media screen and (min-width: 1026px) {
  .ap__pay-now-button.btn-cta:not(.alternate)::after {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    transition: right 0.3s ease;
  }
}

@media screen and (min-width: 1026px) {
  .ap__pay-now-button.btn-cta:hover:not(.alternate)::after {
    margin-left: 0;
    right: 1rem;
  }
}

.ap__pay-now-card-autopay {
  background-color: #f5f5f5;
  padding: 16px;
  margin-top: 0;
  display: none;
}

@media screen and (min-width: 1026px) {
  .ap__two-cards .ap__pay-now-card-autopay {
    display: block;
  }

  .ap__two-cards .ap__pay-now-card-autopay.cp__hide {
    display: none;
  }
}

/* ====================
                Carousel Classes
                ==================== */

.ap__carousel-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.ap__carousel-wrapper.cp__hide {
  display: none;
}

.cp__carousel,
.ap__carousel {
  width: 100%;
  position: relative;
}

@media screen and (min-width: 1026px) {
  .cp__carousel,
  .ap__carousel {
    width: 100%;
    position: relative;
  }
}

.ap__carousel::before,
.ap__carousel::after {
  content: "";
  display: block;
  width: 8px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgb(255, 255, 255);
  /* background: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%); */
  z-index: 10;
}

.cp__carousel::after,
.ap__carousel::after {
  background: rgb(255, 255, 255);
  /* background: linear-gradient(270deg, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%); */
  left: auto;
  right: 0;
}

@media screen and (min-width: 1026px) {
  .cp__carousel::before,
  .cp__carousel::after,
  .ap__carousel::before,
  .ap__carousel::after {
    width: 16px;
  }
}

@media screen and (min-width: 1026px) {
  .cp__mobile-carousel,
  .ap__mobile-carousel {
    display: none;
  }
}

.ap__carousel-header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}

@media screen and (min-width: 1026px) {
  .ap__carousel-header-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.cp__carousel-button-container,
.ap__carousel-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cp__carousel-back,
.cp__carousel-next,
.ap__carousel-back,
.ap__carousel-next {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
}

.ap__carousel-slide,
.cp__carousel-slide {
  width: 100%;
  padding: 4px;
}

@media screen and (min-width: 425px) {
  .ap__carousel-slide,
  .cp__carousel-slide {
    padding: 8px;
  }
}

@media screen and (min-width: 1026px) {
  .ap__carousel-slide,
  .cp__carousel-slide {
    padding: 16px;
  }
}

/* ====================
  Customer Portal - Modal
==================== */

/* Modal - Main Overlay and wrapper */
.cp__modal_overlay {
  display: flex;
  align-items: flex-start;
  padding-top: 90px;
  pointer-events: auto;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  justify-content: center;
  align-items: center;

  background-color: rgba(0, 0, 0, 0.3);

  z-index: 10;
}

@media screen and (min-width: 1026px) {
  .cp__modal_overlay {
    align-items: center;
    padding-top: 0;
  }
}

.cp__modal__bill-estimate,
.cp__modal {
  display: flex;
}

/* Customer Portal - Modal - Wrapper */
.cp__modal {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 106px);

  justify-content: flex-start;
  align-items: center;
  flex-direction: column;

  background-color: white;

  padding: 32px;
  margin-right: 16px;
  margin-left: 16px;

  overflow-y: auto;
}

@media screen and (min-width: 1026px) {
  .cp__modal {
    justify-content: center;
    padding: 64px;
  }
}

/* Customer Portal - Modal - Close Button */

.cp__modal__close-button {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 24px;
  right: 24px;
  cursor: pointer;
}

/* Customer Portal - Modal - Content */

.cp__modal__content {
  width: 100%;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
}

.ap__links_promise_pay {
  display: flex;
  flex-direction: column;
  padding-bottom: 1.5em;
}

.ap__links_promise_pay {
  width: 70%;
}

.ap__two-cards .ap__links_promise_pay, .ap__three-cards .ap__links_promise_pay {
  width: 100%;
}