.dashboard-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: #c6c6c6;
  padding: 20px;
}

.grid-container-dashboard {
  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 50px;
  padding: 50px;
}

.dashboard-box-data {
  font-size: 35px;
  font-weight: 700;
}

.item-actions {
  grid-column: span 2;
  grid-row: span 2;
  box-shadow: 3px 3px 10px 3px rgba(51, 51, 51, 0.3);
  padding: 20px;
  background-color: #f4f4f4;
  border-radius: 8px;
  height: 100%;
  width: 100%;
}

.filter-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 14px;
}

.filter-container label,
.filter-container input,
.filter-container button {
  margin: 0 5px;
  border-radius: 5px;
  padding: 2px;
}

.item-total-clients {
  grid-column: 3;
  grid-row: 1;
  box-shadow: 3px 3px 10px 3px rgba(51, 51, 51, 0.3);
  background: linear-gradient(to bottom, #0d427a9d, #0d427a);
  color: rgb(255, 255, 255); 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 260px;
  height: 180px;
  border-radius: 8px;
}

.item-total-debt {
  grid-column: 4;
  grid-row: 1;
  box-shadow: 3px 3px 10px 3px rgba(51, 51, 51, 0.3);
  background: linear-gradient(to bottom, #19a64aae, #19a64a);
  color: white; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 260px;
  height: 180px;
  border-radius: 8px;
}

.item-average-debt {
  grid-column: 3;
  grid-row: 2;
  box-shadow: 3px 3px 10px 3px rgba(51, 51, 51, 0.3);
  background: linear-gradient(to bottom, #e6a327ae, #e6a327);
  color: white; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 260px;
  height: 180px;
  border-radius: 8px;
}

.item-contact-rate {
  grid-column: 4;
  grid-row: 2;
  box-shadow: 3px 3px 10px 3px rgba(51, 51, 51, 0.3);
  background: linear-gradient(to bottom, #e67727ae, #e67727);
  color: white; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 260px;
  height: 180px;
  border-radius: 8px;
}

.q-img {
  width: 70px;
  height: 70px;
  padding : 10px;
  border-radius: 50%;
}

/* .grid-dashboard {
  padding: 20px;
  text-align: center;
  background-color: #f9f9f9;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  width: 600px;
  height: 400px;  border-radius: 8px;
} */