/************************* TEMA CLARO ***************/
html, body { height: 100%; }
body{ max-width: 500px; margin: 0 auto; }

.logo {
  width: 400px; 
  height: auto;
}

.text-center {
  display: flex;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background: url('../img/background_2.jpg') no-repeat center center fixed;
  background-size: cover;
}

h1{
  color: rgb(46, 46, 46);
  font-size: 40px;
}

h2{
  color: #f6bc35;
  font-weight: 800;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 45px;
  letter-spacing: 5px;
}

p{
  color: #000;
}

.p-header{
  color: #000000;
  font-weight: bold;
}

.form-signin {
  width: 100%;
  max-width: 330px;
  margin: auto;
  font-size: 25px;
}

.custom-button {
  font-family: 'Poppins', sans-serif;
  width: 80%;
  background-color: #ffffff; 
  color:#000; 
  border: none; 
  padding: 7px; 
  font-size: 25px; 
  border-radius: 20px; 
  transition: background-color 0.3s ease; 
}

.custom-button:hover {
  background-color: #e0a800; 
}

.custom-button:active {
  background-color: #d18f00; 
}

.form-signin input[type="text"] {
  margin-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background-color: rgba(161, 161, 161, 0.466);
}

.form-signin input[type="password"] {
  margin-bottom: 15px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background-color: rgba(161, 161, 161, 0.466);
}

.form-control {
  width: 100%; 
}

#floatingInput, #floatingPassword {
  font-family: 'Arial', sans-serif; 
  color:#000; 
}

.form-floating > label {
  padding: 0.75rem 0.75rem;
  pointer-events: none;
  transform-origin: 0 0;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}

.form-floating > input:not(:placeholder-shown) ~ label,
.form-floating > input:focus ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}


/*body */
body {
  background: url('../img/background_2.jpg') no-repeat center center fixed;
  background-size: cover;
  color:#000;
  font-family: 'Poppins', sans-serif;
  font-size: 25px;
}

/************************************************************carregamento dentro das paginas */
#carregando {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(255 174 0); 
  /* backdrop-filter: blur(10px); */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; 
}

.loading-content {
  color: white; /* ícone de carregamento */
  font-size: 40px;
}
/*********************************************************************pagina inicial */
p{
  color:#000000;
  margin: 20px 0; 
  font-size:25px;
  margin-left: 20px;
  font-family: 'Poppins', sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.header {
  background-color: #e21b20;
  padding: 20px;
  text-align: center;
  align-items: center; 
  width: 100%;
  display:inline-flexbox;
}

.user-image {
  width: 130px; 
  height: 130px;
  border: 3px solid #f6bc35; 
  border-radius: 50%; 
  object-fit:cover; 
}

.user-info p {
  margin: 10px 0;
  color: #ffffff;
  font-size: 25px;
}

p#saldo-mes-atual {
  color: rgb(0, 0, 0);
  font-weight: bold;
  border-bottom: 4px solid #e21b20;
  max-width: 86% !important;
  margin-top: 40px;
  font-size: 20px;
}

p#saldo-promo {
  color: rgb(0, 0, 0);
  font-weight: bold;
  border-bottom: 4px solid #0299b1;
  max-width: 86% !important;
  margin-top: 40px;
  font-size: 20px;
}
/*
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #e21b20;
  padding: 20px;
  text-align: center;
  color: #ffffff;
}
*/

.footer {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 500px;
    background-color: #e21b20;
    padding: 20px;
    text-align: center;
    color: #ffffff;
    box-sizing: border-box;
}

.icons-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.icons-container i {
  font-size: 40px;
  color: #fff;
}

hr {
  margin: 20px 0; 
  margin-left: 20px;  
  margin-right: 20px;
  height: 3px; 
  border: 20px; 
  background-image: linear-gradient(to right, rgb(66, 66, 66), rgba(255, 255, 255, 0.144));
}

/************************************************************************extrato*/
.months {
  margin-bottom: 20px;
}

.month {
  padding: 15px; 
  background-color: #ffffffab;
  border: 1px solid #ccc;
  color: #3f3333;
  font-size: 30px;
}

.month.active {
  background-color: #f6bc35;
  color: #fff;
}

.transaction-list {
  list-style-type: none;
  padding: 0;
}

.transaction {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.fa-icon {
  font-size: 1.2em;
  margin-right: 10px;
}

.fa-check {
  color: #00d123;
}

.fa-spinner {
  color: #1a9cff;
}

.fa-clock {
  color: #6e6e6e;
}

.fa-dollar-sign {
  color: #ff0000;
}

/*aba do filtro*/
.filter-sidebar {
  position: fixed;
  top: 0;
  right: -300px; 
  width: 300px;
  height: 100%;
  background-color: #fff;
  box-shadow: -5px 0 5px rgba(0, 0, 0, 0.1);
  transition: right 0.3s ease; 
  z-index: 999; 
  align-items: center;
  font-size: 25px;
  color: #000;
}

.options-filter{
  font-size: 15px;
}

.filter-sidebar.show {
  right: 0; 
}

.filter-container {
  padding: 20px;
}

.apply-button {
  font-family: 'Poppins', sans-serif;
  background-color: #f6bc35;
  color: #000000; 
  width: 50%;
  padding: 10px 20px;
  border: none;
  border-radius: 30px; 
  font-size: 20px;
  width: 100%;
  transition: background-color 0.3s ease; 
  margin-top: 25px;
}

.apply-button:hover {
  background-color: #e0a800;
}

.aba-saldo{
  font-size: 25px;
  width: 100%;
}

/*botao filtro/menu lateral */
.menu-button-container {
  position: relative; 
}

.menu-button {
  border: none;
  padding: 10px 20px;
  background-color: transparent;
  border: none;
  color: #333;
  font-size: 1.5em;
  margin-top: 10px;
  position: relative; 
  z-index: 999; 
}

.menu-container {
  position: fixed;
  top: 30px;
  right: 20px;
  width: 60px;
  height: 60px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999; 
}

/*botao voltar*/
.back-button {
  border: none;
  padding: 10px 20px;
  border: none;
  color: #333;
  font-size: 1.5em;
  /* position: fixed; */
  margin-top: -75px;
  top: 30px;
  left: 20px;
  width: 60px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  border: 1px solid #8f8f8f;
}

.back-button:hover {
  color: #555;
}

/************************************************************************** promo*/
.carousel {
  width: 100%;
  margin: 0 auto; 
}

.carousel img {
  width: 100%;
  height: auto;
}

.discount-box {
  background-color: #f6bc35;
  font-size: 20px;
  color: #fff;
  text-align: center;
  padding: 3px 5px;
  border-radius: 5px;
  margin-top: 10px;
}

.old-price {
  text-decoration: line-through;
  color: #b30000d2;
  font-size: 18px;
  float: left;
  margin-top: 10px;
  font-weight: bold;
}

.new-price {
  color: #1d9300;
  font-weight: bold;
  font-size: 24px;
  float: right;
  margin-top: 5px;
}

.button-container {
  display: flex;
  align-items: center;
}

.share-button {
  background-color: #00a2ff; 
  font-family: 'Poppins', sans-serif;
}

.share-button i {
  margin-left: 5px; 
}

/***************************************************************configuraçoes de user*/
.profile-container {
  margin-top: 50px;
}

.profile-picture {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
}

.profile-picture img {
  width: 100%;
  height: auto;
}

.change-photo-button {
  margin-top: 20px;
}

.info-box {
  width: 90%;
  margin: 10px auto;
  background-color: rgb(255, 255, 255);
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px 20px; 
  position: relative; 
}

.info-box .arrow {
  position: absolute; 
  font-size: 30px;
  z-index: 9999;
  right: 10px; 
  top: 50%;
  transform: translateY(-50%);
  color: #6d6c6c;
}

.info-box-preview {
  font-size: 20px;
  color: #6d6c6c;
}

.info-box p, .info-box span {
  margin: 5px 0; 
}

/**********************************************************alterar senha*/
.content {
  padding: 20px;
}

.form-group {
  margin-bottom: 40px;
}

.form-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.form-group input {
  width: 100%;
  padding: 10px;
  font-size: 30px;
  border-color: #808080;
  border-width: thin;
}

.error-message {
  color: red;
  margin-top: 5px;
}

/*********************************************recuperacao de senha*/
.change-password-content{ 
  width: 100%;
  padding: 10px;
  font-size: 30px;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

/************************************** botao de compartilhar */
.i_button {
  opacity: 0;
  font-size: 28px;
  color: #1F1E1E;
  will-change: transform;
  -webkit-transform: scale(.1);
  transform: scale(.1);
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.btn_wrappp {
  margin-top: 5px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
  width: 100%;
  height: 50px;
  background-color: #EEEEED;
  will-change: transform;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.btn_wrappp:hover {
  /* transition-delay: .4s; */
  -webkit-transform: scale(1.1);
          transform: scale(1.1)
}

.span_button {
  position: absolute;
  z-index: 99;
  width: 100%;
  height: 50px;
  font-size: 22px;
  text-align: center;
  line-height: 50px;
  color: #EEEEED;
  background-color: #1F1E1E;
  padding: 10 20px;
  -webkit-transition: all 1.2s ease;
  transition: all 1.2s ease;
  font-family: 'Poppins', sans-serif;
}

.container_button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 240px;
  height: 64px;
  border-radius: 80px;
}

.container_button i:nth-of-type(1) {
          -webkit-transition-delay: 1.1s;
                  transition-delay: 1.1s;
}

.container_button i:nth-of-type(2) {
          -webkit-transition-delay: .9s;
                  transition-delay: .9s;
}

.container_button i:nth-of-type(3) {
          -webkit-transition-delay: .7s;
                  transition-delay: .7s;
}

.container_button i:nth-of-type(4) {
          -webkit-transition-delay: .4s;
                  transition-delay: .4s;
}

.btn_wrappp:hover span {
  -webkit-transition-delay: .25s;
          transition-delay: .25s;
  -webkit-transform: translateX(-280px);
          transform: translateX(-280px)
}

.btn_wrappp:hover i {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

.dr {
  position: absolute;
  bottom: 16px; 
  right: 16px;
  width:100px;
}

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  display: none;
  z-index: 9999;
}


input{
  background: #ffffff !important;
  border-radius: 25px !important;
  margin-top: 10px;
}


.div-topo{ 
  text-align: center; 
  margin-top: -25px;
  display: grid;
  padding-top: 50px;
  padding-bottom: 20px;
}

table, th, td {
  border-color: #6565657d !important;
  border-collapse: collapse !important;
}

.content-item {
  background: #ffffff;
  margin-bottom: 25px;
}

.p-label{ font-size: 14px; }

.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
      transform: scale(1);
  }

  50% {
      transform: scale(1.1);
  }

  100% {
      transform: scale(1);
  }
}

.txt-carregando{ margin: 0px; font-size: 15px; color: #636363; text-align: center; }