@font-face {
  font-family: 'ABCMonumentGrotesk-Bold';
  src: url("assets/converted-fonts/ABCMonumentGrotesk-Bold.eot");
  src: url("assets/converted-fonts/ABCMonumentGrotesk-Bold.eot?#iefix") format('embedded-opentype'),
       url("assets/converted-fonts/ABCMonumentGrotesk-Bold.otf") format('otf'),
       url("assets/converted-fonts/ABCMonumentGrotesk-Bold.svg#ABCMonumentGrotesk-Bold") format('svg'),
       url("assets/converted-fonts/ABCMonumentGrotesk-Bold.ttf") format('truetype'),
       url("assets/converted-fonts/ABCMonumentGrotesk-Bold.woff") format('woff'),
       url("assets/converted-fonts/ABCMonumentGrotesk-Bold.woff2") format('woff2');
      font-style: normal;
}
@font-face {
  font-family: 'ABCMonumentGrotesk-Heavy';
  src: url("assets/converted-fonts/ABCMonumentGrotesk-Heavy.eot");
  src: url("assets/converted-fonts/ABCMonumentGrotesk-Heavy.eot?#iefix") format('embedded-opentype'),
       url("assets/converted-fonts/ABCMonumentGrotesk-Heavy.otf") format('otf'),
       url("assets/converted-fonts/ABCMonumentGrotesk-Heavy.svg#ABCMonumentGrotesk-Heavy") format('svg'),
       url("assets/converted-fonts/ABCMonumentGrotesk-Heavy.woff2") format('woff2'),
       url("assets/converted-fonts/ABCMonumentGrotesk-Heavy.woff") format('woff'),
       url("assets/converted-fonts/ABCMonumentGrotesk-Heavy.ttf") format('truetype');  
       font-style: normal;
}
body {
  margin: 0;
  padding: 0px 0px;
  font-family: ABCMonumentGrotesk-Bold, sans-serif;
  color: white;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#chart-container::-webkit-scrollbar {
  width: 1em;
  border-radius: 25px;
}

#chart-container::-webkit-scrollbar-track {
  /* -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); */
}

#chart-container::-webkit-scrollbar-thumb {
  /* outline: 3rem solid #19083a; */
  background-color: #503391;
  border-radius: 25px;
}

html {
  height: 100%;
}
#chart-container {
  width: 100%;
  height: 100%;
  max-width: 1600px;
  position: relative;
  /* overflow-x: scroll; */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width:thin;
  scrollbar-color: #503391 transparent;
}

#chart-wrapper {
  padding-bottom: 25px;
  position: relative;
  background-color: #19083a;
  padding-left: 100px;
  padding-right: 20px;
  height: 100%;
  margin-top:-1px;
}

#details-panel {
  background-color: #19083a;
  padding: 20px 5%;
  padding-bottom: 40px;
}
#details-panel h3 {
  margin: 0;
  color: white;
  font-size: 4rem;
  font-family: "ABCMonumentGrotesk-Bold", sans-serif;
}

@media screen and (max-width: 768px) {
  #details-panel h3 {
    width: 100%;
    font-size: 2rem;
  }

  #details-panel > div {
    flex-direction: column;
    align-items: start!important;
  }

  #details-panel > div > div {
    margin:10px 0;

  }
#relative-growth{
  margin: 0!important;
}
  #details{
    margin-left: 0px!important;
  }
}

#details-panel p {
  color: white;
  font-size: 1.2rem;
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
}
#details-panel p#year {
  margin-top: 0;
}

#details-panel #hashtag {
  text-transform: none;
  margin: 0;
  color: #c5bbff;
  font-size: 1.6rem;
  font-weight: 400;
  font-family: "ABCMonumentGrotesk-Bold", sans-serif;
}

.bar {
  width: 20px; /* Or a percentage of the container width */
  background-color: #503391;
  position: absolute;
  bottom: 50px;
  transition: height 1.5s ease-in-out; /* Animation effect */
  border-radius: 250px;
  z-index: 99;
  transition: background-color 0.1s ease;
  cursor: pointer;
  /* transition: background 2s ease; */
}

@media screen and (min-width: 500px) {
  .bar {
    width: 25px;
  }
}
@media screen and (min-width: 768px) {
  .bar {
    width: 30px;
  }
}

.bar:hover {
  /* background-color: rgb(49, 1, 49); */
  cursor: pointer;

  background: linear-gradient(
    66deg,
    #e9c930,
    #7cc56c,
    #448ac1,
    #c85fa3,
    #e9c930,
    #7cc56c,
    #448ac1,
    #c85fa3
  );
  background-size: 400% 400%;

  -webkit-animation: Gradient 7s ease infinite;
  -moz-animation: Gradient 7s ease infinite;
  animation: Gradient 7s ease infinite;
}

.horizontal-label {
  position: absolute;
  left: 5px;
  /* width: 100%; */
  text-align: left;
  color: #c5bbff;
  font-size: 1.2rem;
  padding-right: 10px;
  padding-left: 5%;
  transform: translateY(50%);
}

.highlight::after {
  font-family: ABCMonumentGrotesk-Bold, sans-serif;
  font-size: 1.4rem;
  /* the content is the attr data-year */
  content: attr(data-year);
  position: absolute;
  bottom: -20px;
  transform: translateY(100%);
}

.horizontal-bar {
  font-family: ABCMonumentGrotesk-Bold, sans-serif;
  /* remove mouse interactions */
  pointer-events: none;
  left: 0;
  overflow-x: hidden;
  position: absolute;
  height: 35px;
  /* background-color: red; */
  width: calc(100% - 15px); /* Or a percentage of the container width */
  transform: translateY(50%);
  /* background-image: linear-gradient(
    to right,
    black 33%,
    rgba(255, 255, 255, 0) 0%
  );
  background-position: center;
  background-size: 3px 1px;
  background-repeat: repeat-x; */
}

.horizontal-label {
  font-family: ABCMonumentGrotesk-Bold, sans-serif;
}

.horizontal-bar:after {
  position: absolute;
  top: 50%;
  left: calc(5% + 60px);
  /* padding-left: calc(5% + 30px); */
  transform: translateY(-50%);
  content: "......................................................................................................................................................................";
  letter-spacing: 4px; /* Use letter-spacing to increase space between dots*/
  width: 100%;
  height: 100%;
  color: #503391;
  font-size: 14pt;
  overflow-x: hidden;
  word-wrap: nowrap;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  body {
    font-size: 16px;
  }
  #hashtag {
    font-size: 2rem !important;
  }
  #year {
    font-size: 1.6rem !important;
  }
  #relative-growth {
    font-size: 1.6rem !important;
    margin-left: 50px;
  }

  #growth-disclaimer{
    /*margin-left: 50px;*/
  }
}

#details {
  font-family: ABCMonumentGrotesk-Bold, "sans-serif";
  color: #fff!important;
  font-weight: 400;
  font-size: 1.05rem!important;
  text-transform: none!important;
  min-width: min-content!important;
  max-width: 100%;
  margin-left: 0;
  width: 100%;
  max-width: 700px;
  display: block;
}
@media screen and (max-width: 768px) {
  #details {
    width: 100%;
    font-family: ABCMonumentGrotesk-Bold, "sans-serif";

  }

}


#relative-growth {
  font-family: ABCMonumentGrotesk-Bold, "sans-serif";
  background-color: #7448ff;
  color: #fff;
  border-radius: 50px;
  padding: 10px 15px;
  font-weight: 400;
  vertical-align: middle;
  font-size: 1.2rem;
  width: max-content;
  margin: 0;
  transform: translateY(18px);

}
#relative-growth.d-none{
  background-color: transparent;
}



@media screen and (min-width: 768px) {
  
  #growth-br{
    /*display: none;*/
  }
}

#growth-disclaimer{
  color: #c5bbff!important;
  font-size: .9rem!important;
  text-transform: none!important;
  transform: translateY(18px);
}

#relative-growth span {
  font-size: 1.2rem;
  vertical-align: middle;
  margin-bottom: 0.5rem;
  display: inline-block;
}

.gradient {
  background: linear-gradient(
    66deg,
    #e9c930,
    #7cc56c,
    #448ac1,
    #c85fa3,
    #e9c930,
    #7cc56c,
    #448ac1,
    #c85fa3
  );
  background-size: 400% 400%;

  -webkit-animation: Gradient 7s ease infinite;
  -moz-animation: Gradient 7s ease infinite;
  animation: Gradient 7s ease infinite;
}

@-webkit-keyframes Gradient {
  0% {
    background-position: 83% 0%;
  }
  50% {
    background-position: 18% 100%;
  }
  100% {
    background-position: 83% 0%;
  }
}
@-moz-keyframes Gradient {
  0% {
    background-position: 83% 0%;
  }
  50% {
    background-position: 18% 100%;
  }
  100% {
    background-position: 83% 0%;
  }
}
@keyframes Gradient {
  0% {
    background-position: 83% 0%;
  }
  50% {
    background-position: 18% 100%;
  }
  100% {
    background-position: 83% 0%;
  }
}