/* Body styling */
body {
  background-color: #010129; /* Dark blue background for entire page */
}

/* Container for the stock list on the right side */
#list {
  width: 20rem;
  height: 40rem;
  display: inline-block;
  position: absolute;
  left: 70rem; /* Position from left */
  top: 1rem;   /* Position from top */
}

/* Stock data list inside the container */
#stockDataList {
  width: 100%;
  height: 100%;
}

/* Individual list items styling */
.list-group-item {
  width: 100%;
  height: 8%;
  background-color: #010129; /* Matches body background */
  border: none; /* Remove default border */
}

/* Stock symbol span inside list item */
.stockSpan {
  display: inline-block;
  width: 4rem;
  /* height: 1.2rem; */
  text-align: center;
  box-shadow: -2px -2px 2px #545454; /* Slight shadow effect */
  background-color: #010166; /* Slightly different dark blue */
  border-top-left-radius: 0.2rem;
  color: white; /* White text for symbol */
  padding: 0.2rem, auto;
  margin: 0.5rem;
}

/* Book value span inside list item */
.bookValueSpan {
  display: inline-block;
  width: 4rem;
  height: 1rem;
  text-align: center;
  color: white; /* White text for book value */
  padding: 0.2rem, auto;
  margin: 0.5rem;
  font-weight: bold; /* Bold text for emphasis */
}

/* Profit span inside list item */
.profitSpan {
  display: inline-block;
  width: 4rem;
  height: 1.5rem;
  text-align: center;
  color: green; /* Green text for profit */
  padding: 0.2rem, auto;
  margin: 0.5rem;
}

/* Chart container styling */
#chart {
  width: 80vw;   /* 80% of viewport width */
  height: 50vh;  /* 50% of viewport height */
  display: inline-block;
  position: relative;
}

/* Chart canvas styling */
#stockChart {
  background-color: #010145; /* Darker background for the chart area */
}

/* Optional details section styling (commented out) */
/* #details{
  display: inline-block;
  color: white;
  width: 80vw;
} */