.chart-container {
    display: inline-block;
    padding-bottom: 450px;
    overflow: hidden;
    position: relative;
    width: 100%;
    vertical-align: top;
}

.bar-chart {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}


.bg-gradient-primary2 {
    background: -webkit-gradient(linear, left top, left bottom, from(#30b6c1), to(#153b50)) !important;
    background: linear-gradient(180deg, #a5f5f5 10%, #30b6c1 30%, #153b50 100%) !important;
  }

  
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 70%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.btn-sherpa-gradient {
  background: linear-gradient(45deg, #ffffff,#30b6c1, rgb(52, 148, 174), #30b6c1, #ffffff);
  background-size: 800% 800%;
  animation: gradientShift 18s ease-in-out infinite;
  border: 1px solid rgba(237, 237, 237, 0.5);
  drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
  color: #212529;
  transition: all 0.3s ease;
}

.btn-sherpa-gradient:hover {
  opacity: 80%;
}


.btn-sherpa-gradient img {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.rainbow-gradient-btn {
    background: linear-gradient(-45deg, #eeba52, #e73c7e, #23a6d5, #23d5ab, #eeba52, #e73c7e, #23a6d5);
    background-size: 400% 400%;
    animation: rainbow-gradient 1s ease-out infinite;
    border: none;
    color: white !important;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

@keyframes rainbow-gradient {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 30%; }
}

.rainbow-gradient-btn:disabled {
    opacity: 1 !important;
}