.index-container {
  width: 100%;
  min-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.scrollable-container {
  /* max-height: 444px; */
  overflow-y: auto;
  text-align: right;
}

.scrollable-container table {
  width: 100%;
}

.scrollable-container thead {
  position: sticky;
  top: 0;
  background: #22262f;
  z-index: 1;
}

/* Create a pseudo-element to style the scrollbar track */
.scrollable-container::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 12px; /* Adjust the width as needed */
  background: #22262f !important; /* Background color for scrollbar track */
  z-index: -1; /* Place it behind the content */
}

/* Style the scrollbar thumb (the draggable part) */
.scrollable-container::-webkit-scrollbar-thumb {
  background: #888; /* Color of the thumb */
}

/* Style the scrollbar track (the non-draggable part) */
.scrollable-container::-webkit-scrollbar-track {
  background: #f2f2f2; /* Background color of the track */
}

/* Hide the scrollbar until user starts scrolling */
.scrollable-container::-webkit-scrollbar {
  width: 0;
  height: 0;
}


.scrollable-container-technical {
  max-height: 200px;
  overflow-y: auto;
  text-align: right;
}

.scrollable-container-technical table {
  width: 96%;
}

.scrollable-container-technical thead {
  position: sticky;
  top: 0;
  background: #22262f;
  z-index: 1;
}

/* Create a pseudo-element to style the scrollbar track */
.scrollable-container-technical::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 12px; /* Adjust the width as needed */
  background: #22262f !important; /* Background color for scrollbar track */
  z-index: -1; /* Place it behind the content */
}

/* Style the scrollbar thumb (the draggable part) */
.scrollable-container-technical::-webkit-scrollbar-thumb {
  background: #888; /* Color of the thumb */
}

/* Style the scrollbar track (the non-draggable part) */
.scrollable-container-technical::-webkit-scrollbar-track {
  background: #f2f2f2; /* Background color of the track */
}

/* Hide the scrollbar until user starts scrolling */
.scrollable-container-technical::-webkit-scrollbar {
  width: 0;
  height: 0;
}


/* LOGO  START */
/* Style the container div with padding on both sides */
.logo-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 15vw /* Add padding as needed */
}

/* Style each logo div */
.logo {
  text-align: center;
  margin: 10px;
  cursor: pointer;
}

/* Style the company names */
.company-name {
  margin-top: 5px;
  font-size: 10px; /* Adjust the font size as needed */
}

/* Style the logo images */
.logo img {
  max-width: 30px; /* Adjust the maximum width as needed */
  border-radius: 20%;
}

/* LOGO  END */

/* Showcase */

#showcase {

}
.flex-container {
  display: flex;
  flex-wrap: wrap;
}
#showcase #showcase-image {
  width: 180px;
  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 1px 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%;
}

/* Search */
#search-results {
  z-index: 1;
  position: absolute;
  top: 48px;
  left: 10px;
  left: 0px;
  max-width: 870px;
  padding: 0px 20px;
  width: 100%;
  box-sizing: border-box;
  max-height: 200px;
  overflow-y: auto;
  overflow-x: visible;
  border-radius: 0px 0px 10px 10px;
}

#search-results {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#search-results::-webkit-scrollbar {
  display: none;
}

#search-results .result {
  text-decoration: none;
  color: #000000;
  background-color: #ffffff;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

#search-results .result .search-result-ticker {
  margin-right: 20px;
  font-weight: 600;
}

#search-results .result .search-result-time-period {
  background-color: #bab9b9;
  border: 1px solid rgb(0, 0, 0);
  padding: 3px 10px;
  font-family: monospace;
  margin-left: 20px;
  font-size: 14px;
  border-radius: 20px;
}

#search-results .result:hover {
  background-color: #f5f5f5;
}

.floating-div {
  padding: 10px 10px 0px 5px;
}

#news-main{
  display: block;
  overflow: hidden;
}

.white-label {
  color: #ffffff !important;
}

.floating-div {
  -ms-overflow-style: none;
  scrollbar-width: none;
  color: #ffffff;
  border: 1px solid var(--border-color) !important;
  z-index: 1 !important;
}

.floating-div::-webkit-scrollbar {
  display: none;
}

.section-title {
  text-align: center;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: bold;
  color: white !important;
}

/* Indexes */
#indexes {
  max-width: 100%;
  margin-top:40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

#news-indicators {
  width: 100%;
  margin-top:40px;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

#indexes .candle-sticks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  max-width: 100%;
}



.candle-stick {
  /* border: 1px solid #;
   */
  padding: 3px;
  border: 1px solid var(--border-color);
  border-radius: 10px 10px 10px 10px;
  /* min-height: 245px !important; */
}

.candle-stick img {
  max-width: 100%;
  max-height: 100%;
}

.chart-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  border: 1px solid var(--border-color);
  border-bottom: none;
  border-radius: 10px 10px 0px 0px;
  padding: 0px 15px;
  box-sizing: border-box;
}

.chart-heading-title {}

.chart-heading-date {}

.chart-heading-points {
  display: flex;
  align-items: center;
}

.chart-heading-value {}

.chart-heading-change {}



.index-chart {
  /* width: 100%; */
  padding: 3px;
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0px 0px 10px 10px;
  min-height: 245px !important;
}

.index-chart-hidden{
  display:none;
}


/* Portfolio */
.features-container {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
  row-gap: 10px;
  position: relative;
  margin-top: 30px;
  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;
  
}

/* hover over weekly outlook text */
/* Add this CSS to your stylesheet */
.hover-td {
  position: relative;
  cursor: pointer;
}

.hover-td::after {
  content: attr(data-hover-text); /* Display the value of the "data-hover-text" attribute */
  position: absolute;
  top: 100%;
  left: 0%;
  background-color: black;
  color: #fff;
  padding: 5px;
  opacity: 0;
  transition: opacity 0.3s ease;
  white-space: pre-line;
  z-index: 2;
  max-width: 250px;
  max-height: 150px;;
  overflow-y: auto;

}

.hover-td:hover::after {
  opacity: 1;
}


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

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


/* for treemap */
.treemap_ {
  /* display: grid; */
  width: 100%;
  grid-template-rows: 80% 30%; /* 80% for the first div, 20% for the second div */

  column-gap: 20px;
  /* row-gap: 10px; */
  position: relative;
  /* padding: 0px 10px; */
  box-sizing: border-box;
}


.treemap_ .treemap-image img {
  max-width: 100%;
}
.treemap_ .treemap-image-0 img {
  max-width: 100%;
}
.treemap_ a .feature {
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* height: 100%; */
  z-index: -1;
  box-sizing: border-box;
  border: 1px solid var(--border-color) !important; 
  border-radius: 5px;
  padding: 2px 2px 5px 2px;
}

.treemap_ a {
  text-decoration: none;
}

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

.treemap_ 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: 19px;
  font-weight: bold;
  box-sizing: border-box;
}

/* .feature-canvas{
  position: relative;
  height: 85% !important;
  width: 100% !important;
} */

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

/* @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;
    margin-bottom: 15px;
  }

  #showcase-charts #top-gainer-loser,
  #showcase-charts #top-buy{
    margin-bottom: 40px;
  }

    
  #news-indicators #top-sell{
    margin-bottom: 15px;
  }
}


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

@media screen and (max-width: 750px) {
  #top-image {
    margin-top: 500px;
  }
}

@media screen and (max-width: 376px) {
  #news-indicators {
    margin-top:0px;
    width: 100%;
  }

  #news-indicators #news-main{
    width: 100%;
  }
  .section-title {
    margin-top: 0px;
}
}
@media screen and (max-width: 750px) {  
  #indexes{
    grid-template-columns: repeat(1, 1fr);
    /* grid-template-rows: repeat(2, 1fr); */
    grid-template-rows: 45% 55%;
    grid-row-gap: 0px;

  }

  #indexes .candle-sticks{
    height: 10%;
  }

  #indexes .treemap_{
    /* display: grid; */
    width:100%;
    grid-template-rows: 80% 40%;


    /* height:70%;

    justify-self: center;
    align-self: center; */
  }
  #indexes .treemap_ .treemap-image{
    max-height: 40%;
  }
  #indexes .treemap_ .treemap-image-0{
    /* max-height: 60%; */
    margin-top: 35px;
  }



  #news-indicators{
    margin-top: 50px;
  }
}

treemap{
  width: 100%;
}
  


/* candle stick chart - Mayank */
.candleStickCompanyName{
  margin-top : 5px;
  font-weight:500;
  color:#929cb3;
  margin-bottom:1px;

}
/* 
.custom-table.weekly {
  width: 100% !important; 

}

.custom-table.weekly thead tr td:first-child,
.custom-table.weekly tbody tr td:first-child {
  width: 40% !important; 
}

.custom-table.weekly thead tr td:not(:first-child),
.custom-table.weekly tbody tr td:not(:first-child) {
  width: 20% !important; 
} */