body {
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
}

.search {
  margin: auto;
}

.title {
  font-size: 5rem;
  font-weight: 700;
}

.input-group .form-control:first-child {
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group-btn:last-child>.btn {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}

/* #page-numbers {
  cursor: default;
}


button.btn, a.btn{
  border-radius: 25px;
}
*/
.page-buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 0;
  border-radius: 0 !important;
}

#prev-button {
  border-radius: 4px 0 0 4px;
}

#next-button {
  border-radius: 0 4px 4px 0;
}

#page-numbers {
  background: transparent;
}

#mobile-tabs {
  display: none;
}


@media screen and (max-width: 992px) {
  #desktop-tabs {
    display: none;
  }

  #mobile-tabs {
    display: block;
  }

  #payment {
    /* margin-top: 20px; */
  }
}

/* button that links to the payments */
#payment {
  margin-top: 15px;
}


/* Width and height for scrollbars */
::-webkit-scrollbar {
  width: 8px;
  /* for vertical scrollbars */
  height: 6px;
  /* for horizontal scrollbars */
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(168, 168, 168, 0.85);
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgba(134, 134, 134, 0.85);
}

.mt-15px {
  margin-top: 15px;
}

.big-button-group {
  display: flex;
  flex-direction: row;
  gap: 10px;
}



#delinquent_true_link>a {
  background-color: #f2dede;
  border-radius: 4px 4px 0 0;
  color: #a94442;
  font-weight: 500;
  animation: colorChange 2s infinite;
}

@keyframes colorChange {
  0% {
    color: #EC6C6A;
  }

  100% {
    color: #a94442;
  }
}

#small-panel {
  height: 285px;
}




@media only screen and (max-width: 600px) {
  #card-prop-values {
    width: 92vw;
    height: auto;
  }

  #card-prop-charges {
    width: 92vw;
    height: auto;
  }

  #small-chart-container {
    position: relative;
    margin: auto;
    width: 90vw;
    height: 200vh;
  }
}

#small-chart-container {
  position: relative;
  margin: auto;
  width: auto;
  height: 250px;
}



@media (max-width: 600px) {
  .big-button-group {
    flex-direction: column;
    /* Stack buttons vertically */
    /* gap: 5px; */
    /* Increase the gap between buttons for better spacing on small screens */
    width: 100%;
    /* Ensure the container takes the full width */
  }


  .mt-15px {
    margin-top: 5px;
  }
}