.index-container {
  width: 100%;
  min-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

#showcase #showcase-image {
  width: 200px;
  max-width: 100%;
  filter: brightness(0) invert(1);
  margin-left: auto;
  margin-right: auto;
  display: block;
}

#showcase #search-input-wrapper {
  position: relative;
  width: 100%;
  max-width: 870px;
  margin: 30px auto 50px auto;
  box-sizing: border-box;
  padding: 10px 20px;
}

#showcase #search-input-wrapper #search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 10px;
  border: none;
  outline: none;
}

#showcase #search-input-wrapper #search-input:focus {
  border-radius: 10px 10px 0px 0px;
}

/* Showcase Charts */

#showcase-charts {
  display: grid;
  /* grid-template-columns: 30% 30% 40%; */
  grid-template-columns: 33.33% 33.33% 33.33%;
}

#showcase-charts #macroeconomics-indices,
#showcase-charts #top-buy,
#showcase-charts #top-gainer-loser,
#showcase-charts #top-sell {
  padding: 0px 10px;
  box-sizing: border-box;
  width: 100%;
}



/* .apexcharts-gridline:nth-child(2) {
  stroke-dasharray: 0 !important;
} */

/* Portfolio */
.features-container {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
  row-gap: 10px;
  position: relative;
  margin-top: 10px;
  padding: 0px 10px;
  box-sizing: border-box;
}

.features-container a .feature {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 400px;
  padding: 10px;
  box-sizing: border-box;
  /* background-color: #ffffff; */
  /* background-color: #000000; */
  border: 1px solid var(--border-color) !important; 
  z-index: -1;
  border-radius: 5px;
}

.features-container a {
  text-decoration: none;
}

.features-container a .feature .feature-image {
  position: absolute;
  top: 20px;
  /* top: 0; */
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  /* width: 100%; */
  height: 85%;
  /* height: 90%; */
  object-fit: cover;
  z-index: -1;
  
}

/* .features-container a .feature:hover > .feature-image {
  filter: brightness(60%);
} */

.features-container a .feature .feature-title {
  position: absolute;
  bottom: 5px;
}

.dotted {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

p.feature-title {
  margin: 0px;
  padding-left: 8px !important;
  padding-right: 8px !important;
  width: 100%;
  text-align: center;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 20px;
  font-weight: bold;
  box-sizing: border-box;
}

#treemap-wrapper {
  /* grid-column: 1 / -1; */
  margin-top: 20px;
  height: 500px;
}

/* @media screen and (max-width: 1368px) {
  #showcase-charts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  #macroeconomics-indices {
    grid-column: 1 / -1;
  }
} */

@media screen and (max-width: 1220px) {
  #showcase-charts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  #macroeconomics-indices {
    grid-column: 1 / -1;
  }
}

@media screen and (max-width: 750px) {
  #showcase-charts {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }

  .features-container {
    grid-template-columns: repeat(1, 1fr);
  }

  #showcase-charts #top-buy,
  #showcase-charts #top-gainer-loser,
  #showcase-charts #top-sell {
    padding: 0px 0px;
  }
}

@media screen and (max-width: 550px) {

}

treemap{
  width: 100%;
}
  
    
.feature {
  background: #292F38;
}

.features-container a:hover .feature {
  background: #22262F;
}

.pagination{
  text-align: center;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;

}
.pagination .btn{
  margin: 15px;
}

.pagination-head{
  padding: 0px 10px;
  color: var(--primary);
}

.pagination a{
  background: var(--hightlight-color);
  color: #ffffff;
  border-radius: 50%;
  cursor: pointer;
  padding: 3px 9px;
  margin: 3px;
  opacity: .9;
}

.left-sidebar{
  background-color: rgb(41, 47, 56);
  margin: 150px 20px 20px;
  position: initial;
  border-radius: 5px;
  top: 211px;
  left: 0;
  padding-top: 20px;
  color: #ffffff;
}

#side-search-results a{
  font-size: 0.8rem;
  color: #A6AEAB;
  text-decoration: none;
}
.left-sidebar li{
  padding-top: 15px;
  padding-bottom: 2px;
  color: var(--primary);
  cursor: pointer;
  border-bottom: 1px solid rgba(149, 146, 146, 0.47);
}
.left-sidebar ul{
  list-style: none;
  padding: 0;
}
.left-sidebar .content{
  padding: 20px;
}

.left-sidebar .content .title{
  margin: 0;
  padding-top: 5px;
  padding-bottom: 5px;
}

#content{
  margin-left: none;
  margin-top: 50px;
  color: #ffffff;
}

.left-sidebar input{
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  outline: none;
  background-color: #313840;
  color: #ffffff;
  border: 1px solid #26303a;
}

.side-search-results{
  padding: 3px 0 0;
  background: #22262f !important;
}

.result{
  background: rgb(49, 56, 64);
  padding: 5px;
  border-radius: 2px;
  margin: 1px 0px;
  border: 1px solid #26303a;
}

@media screen and (min-width: 720px) {
  .left-sidebar{
    width: 250px;
    background-color: rgb(41, 47, 56);
    position: fixed;
    top: 70px;
    left: 0;
    padding-top: 20px;
    color: #ffffff;
  }
  #content{
    margin-left: 250px;
    margin-top: 150px;
    padding: 20px;
    color: #ffffff;
  }

}