* {
  padding: 0;
  margin: 0;
}

body {
  background: #F1F3F4;
}

.header__container {
  max-width: 1400px;
  width: 95%;
}

.menu__perfil {
  margin: 0;
}

.menu__aside,
.avatar {
  margin: 0 0 0 2rem;
}

.main__container {
  width: 95%;
  max-width: 1400px;
  margin: 2.5rem 0;
}

/* card__aboutPayments */

.card__aboutPayments {
  background: #fff;
  padding: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  height: 250px;
  width: 450px;
}

.card__aboutPayments:first-child {
  margin: 0 1rem 0 0;
}

.card__aboutPayments:last-child {
  margin: 0 0 0 1rem;
}

.title__namePayments img {
  margin: 0 0 0 0.5rem;
  cursor: pointer;
}

.title__namePayments {
  font-weight: 600;
}

.title__descriptionPayments {
  font-weight: 500;
  color: #808385;
  line-height: 1.5rem;
}

.title__valueDescription {
  font-size: 25px;
  font-weight: 600;
  color: #3C3D3F;
}

/* button__makePayment */

.button__makePayment {
  text-align: start;
  border: none;
  outline: none;
  cursor: pointer;
  background: transparent;
  font-weight: 600;
  color: #5C60E6;
  font-size: 15px;
  transition: 0.3s;
}

.button__makePayment:hover {
  color: #2a2d9e;
}

.title__valueDescription--size {
  font-weight: 500;
}

.title__descriptionPayments--margin {
  margin: 1rem 0 0 0;
}

.learn__morePayments {
  max-width: 300px;
  font-weight: 500;
  color: #697AEB;
}

/* section__liquidMoney */

.section__liquidMoney {
  background: #fff;
}

.section__liquidMoney {
  margin: 1.5rem 0;
  border-radius: 0.5rem;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

/* liquidMoney__title */

.title__dateMoney,
.title__previvousActivity {
  font-weight: 500;
  font-size: 18px;
}

.time__realDate {
  max-width: 250px;
  margin: 0.5rem 0 0 0;
  color: #697AEB;
}

.balance__date {
  transition: 0.3s;
  padding: 0.5rem;
  cursor: pointer;
  border-radius: 0.2rem;
}

.title__balanceDate {
  color: #8C97AC;
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 0.5rem 0;
}

.title__balance {
  font-weight: 600;
  font-size: 18px;
}

.div__sizeWeight {
  font-weight: 400;
}

.div__sizeWeight {
  color: #5A5E64;
  font-size: 35px;
}

.balance__date:hover {
  background: #F1F3F4;
  padding: 0.5rem;
}

/* div__previousActivity */

.div__previousActivity {
  margin: 5rem 0 0 0;
}

.title__previvousActivity {
  font-size: 20px;
  color: #2E2F30;
}

.select__options {
  border: 2px solid #979CA0;
  background: transparent;
  border-radius: 0.5rem;
  height: 50px;
}

.select__options select {
  cursor: pointer;
  appearance: none;
  font-weight: 500;
  font-size: 15px;
  color: #3F464A;
  background: transparent;
  border: none;
  height: 100%;
  padding: 0 0.5rem;
  outline: none;
}

.triangleSelect {
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #565A5F;
  margin: 0 0.5rem;
}

/* ul__listPreviousActivity */

.ul__listPreviousActivity {
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  margin: 1.5rem 0 0 0;
  list-style: none;
}

.ul__listPreviousActivity li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2.5rem;
  border-bottom: 1px solid #F2F2F2;
}

.title__nameMonth {
  font-weight: 600;
  color: #223C49;
  font-size: 19px;
}

.card__informationMoney,
.redirect__download {
  margin: 0 2rem;
}

.redirect__download {
  color: #1073E9;
}

.div__mainInformationLiquidMoney {
  padding: 1.5rem 2rem;
  display: none;
}

.div__informationLiquid {
  width: 100%;
  padding: 0 1.5rem 0 0;
}

.div__mainLiquidMoney {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #DADCE0;
}

.div__arrows img:last-child {
  transform: rotate(180deg);
}

.title__recallSections {
  margin: 0 0 0 1rem;
  font-weight: 500;
  color: #1A73E8;
}

.title__balanceMonth {
  margin: 1rem 0 0 0;
  padding: 1rem 0;
  border-bottom: 1px solid #DADCE0;
}

.title__balance,
.title__atributes {
  font-weight: 500;
  font-size: 16px;
}

.title__valueBalanceMoney {
  font-weight: 600;
  font-size: 18px;
}

.title__descriptionSpentRates img {
  margin: 0 0.5rem 0 0;
}

.div__spentRates {
  padding: 1rem 0;
  border-bottom: 1px solid #DADCE0;
}

.ul__listRates,
.div__payments {
  margin: 1rem 0 0 0;
}

.ul__listRates li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.5rem 0 0 0;
  padding: 0.7rem 0.5rem;
}

.title__atributes {
  color: #3C4043;
}

.title__moneyAtributes {
  color: black;
  font-weight: 600;
}

.ul__listRates li:last-child {
  background: #F1F3F4;
}

.ul__listPayments {
  margin: 0.5rem 0 0 2.7rem;
  list-style: none;
}

.ul__listPayments li {
  display: flex;
  justify-content: space-between;
  padding: 0.8rem 0;
  border-bottom: 1px solid #DADCE0;
}

.ul__listPayments li:first-child {
  border-top: 1px solid #DADCE0;
}

.ul__listPayments li:last-child {
  border-bottom: 1px solid transparent;
}

.date__payments,
.description__cardPayments,
.title__moneyPayments {
  font-size: 16px;
  font-weight: 500;
}

.description__cardPayments {
  color: #1A73E8;
  margin: 0 0 0 2rem;
}

.current__balance {
  border-top: 1px solid #DADCE0;
}

.current__balanceContent {
  background: #F1F3F4;
  padding: 0.7rem;
  width: 100%;
  margin: 1rem 0 0 0;
}

.title__currentBalance {
  color: #3C4049;
  font-weight: 500;
}

.title__DescriptionInformation {
  max-width: 250px;
  margin: 0.5rem 0;
  font-weight: 500;
}

.show__downloadActivity {
  color: #1A73E8;
}

.aside__informationMoney {
  border-left: 1px solid #DADCE0;
  padding: 0 0 0 1.5rem;
}

.show__invoicing {
  transition: 0.3s;
  cursor: pointer;
}

.active__image {
  transform: rotate(180deg);
}

.active__content {
  display: flex;
}

.ul__listPage {
  list-style: none;
  width: 100%;
  margin: 2rem 0 0 0;
}

.ul__listPage li {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 1px solid #7348E5;
  margin: 0 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

}

.value__page {
  text-decoration: none !important;
  color: #7246E5;
  font-size: 16px;
}

.li__backgroundBlue {
  background: #4D2D9F;
}

.li__backgroundBlue a {
  color: #fff;
}

.li__blueBaby {
  border: 1px solid #E1D6FF !important;
}

.li__blueBaby a {
  color: #DFD3FF;
}

@media (max-width: 990px) {


  .section__listCard {
    flex-direction: column;
  }

  .card__aboutPayments {
    margin: 0 0 1.5rem 0 !important;
    width: 100%;
  }

  .div__mainLiquidMoney,
  .div__mainInformationLiquidMoney,
  .ul__listPreviousActivity li {
    flex-direction: column;
    align-items: start;
  }

  .section__moneyBalances {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin: 1rem 0 0 0;
  }

  .time__realDate {
    max-width: 100%;
  }

  .div__informationLiquid {
    padding: 0;
  }

  .aside__informationMoney {
    width: 100%;
    margin: 1rem 0 0 0;
  }

  .aside__informationMoney {
    padding: 0.5rem;
  }

  .div__informationMoney {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .div__informationMoney .card__informationMoney {
    margin: 0 0.5rem;
  }

  .card__informationMoney:first-child {
    margin: 0;
  }
}

@media (max-width: 725px) {

  .ul__listPayments,
  .description__cardPayments {
    margin: 0.5rem 0;
  }

  .ul__listPayments li {
    flex-direction: column;
  }

  .div__paymentsInformation {
    flex-direction: column;
    align-items: start;
  }

  .title__moneyPayments {
    text-align: end;
    margin: 0.5rem 0;
  }
}

@media (max-width: 625px) {
  .div__previousActivity {
    flex-direction: column;
    align-items: start;
  }

  .select__options {
    margin: 1rem 0 0 0;
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }

  .select__previousActivity {
    width: 100%;
  }

  .card__informationMoney {
    margin: 0.5rem 0 !important;
  }

  .redirect__download {
    margin: 0.5rem 0;
  }
}