.subheader-container {
    display: flex;
  margin-top:40px
}
.subheader-item ul {
  padding: 10px 0px; 
  z-index: 2;
}

    .subheader-item ul li {
      list-style-type: none;
      text-align: center;
      margin-bottom: 10px;
    }
    .subheader-item ul li:hover .explanation {
      display: block;
    }
.subheader-item {
  width: calc(33.33% - 20px); /* Each button and explanation take 1/3rd of the screen with some margin */
  margin: 0 10px; /* Add some space between buttons and explanations */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the items horizontally within the subheader-item */
}
.button-container {
  position: relative;
  color: white;
  text-align: center;
  font: bold 55px Arial, sans-serif;
  font-size: 16px;
  background-color: #2c3e50;
  padding: 15px 32px;
  border-radius: 8px;
  border: 2px solid white;
  right:10px;
}
.arrow-button {
  background:none;
  border: none;
  padding: 0;
  cursor: pointer;
  position: absolute;
  right: 10px;
  color:white;
}
.arrow-button:hover{background:none;}

.button-text {
  margin-right: 10px;
  cursor:default;
}

.arrow-button i {
  font-size: 16px;
  color: white; /* Match your button color */
}

.searchboxxx {
  background: linear-gradient(to right, #3498db, #2980b9);
  color: white;
  font-size: 16px;
  transition: background 1s ease;
  text-decoration: none;
  border: 2px solid black;
}
#portSearchBox.searchboxxx, #port2SearchBox.searchboxxx {
  background: linear-gradient(to right, #8A2BE2, #4B0082);
  color:white;
}
#portSearchBox.searchboxxx::placeholder, #port2SearchBox.searchboxxx::placeholder {
  color:white;
}
#cashSearchBox.searchboxxx, #cash2SearchBox.searchboxxx {
    background: linear-gradient(to right, #3498db, #2980b9);
  color:white;
}
#cashSearchBox.searchboxxx::placeholder, #cash2SearchBox.searchboxxx::placeholder {
  color:white;
}
#setlistSearchBox.searchbox, #addstockSearchBox.searchbox, #deletestockSearchBox.searchbox {
  background: linear-gradient(to right, #00FF00, #008000);
}
#portfolioSearchBox.searchbox {
  background: linear-gradient(to right, #FFA500, #FF8C00)}
.searchbox::placeholder {
  color: white;
}
  label[for="earningsDate"] {
    color: white;
  font: bold 55px Arial, sans-serif;
  padding: 15px 32px;
  text-align: center;
  font-size: 16px;
  background: purple;
    border: 2px solid black;
  }

#earningsDate::-webkit-calendar-picker-indicator {
  color: purple;
}

#earningsDate::placeholder {
  color: purple; /* Style the placeholder text */
}
#earningsDate::-webkit-datetime-edit-fields-wrapper,
#earningsDate::-webkit-datetime-edit-text,
#earningsDate::-webkit-datetime-edit-month-field,
#earningsDate::-webkit-datetime-edit-day-field,
#earningsDate::-webkit-datetime-edit-year-field {
  color: purple;
}

#dividendsDate::-webkit-datetime-edit-fields-wrapper,
#dividendsDate::-webkit-datetime-edit-text,
#dividendsDate::-webkit-datetime-edit-month-field,
#dividendsDate::-webkit-datetime-edit-day-field,
#dividendsDate::-webkit-datetime-edit-year-field {
  color: lightblue;
}
.question-icon, .custom-question-icon, .blue-question-icon, .orange-question-icon, .green-question-icon
,.red-question-icon, .grey-question-icon{
  width: 17px; /* Adjust width and height as needed */
  height: 17px;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle; 
  font-weight:bold;
}
.custom-question-icon circle,  .blue-question-icon circle, .orange-question-icon circle, .green-question-icon circle
,.red-question-icon circle, .grey-question-icon circle{
  transition: fill 1s ease; /* Apply transition to fill property */
}
.searchboxx{  background: black;
  color: #FFA500;
  font-size: 16px;
  transition: background 1s ease;
  text-decoration: none;
  border: 2px solid black;
margin-bottom: 10px;
margin-top:10px;}
.searchboxx::placeholder {
  color: #FFA500; /* Change the color to whatever you want */
}

.custom-question-icon:hover circle,  .blue-question-icon:hover circle, .orange-question-icon:hover circle,
.green-question-icon:hover circle{
  fill: black; /* Change circle color on hover */
}
.red-question-icon:hover circle, .grey-question-icon:hover circle{
  fill: white; /* Change circle color on hover */
}
.custom-question-icon:hover text {
  fill: yellow; /* Change question mark color on hover */
}
.blue-question-icon:hover text, .green-question-icon:hover text {
  fill: red; /* Change question mark color on hover */
}
.orange-question-icon:hover text {
  fill: #3498db; /* Change question mark color on hover */
}
.red-question-icon:hover text {
  fill: blue; /* Change question mark color on hover */
}
.grey-question-icon:hover text {
  fill: #804080; /* Change question mark color on hover */
}
#limit-prices::placeholder,
#quantities::placeholder, #quantitiess::placeholder, #quantitiesss::placeholder, #stop-prices::placeholder {
    font-size: 9px; /* Adjust the font size as needed */
}
button {
  color: white;
  font: bold 55px Arial, sans-serif;
  padding: 15px 32px;
  text-align: center;
  font-size: 16px;
  background: linear-gradient(to right, #3498db, #2980b9);
  cursor: pointer;
  transition: background 1s ease;
        margin-bottom: 10px;
}
.best-stocks-link {
  margin-bottom: 100px; /* Adjust the margin as needed */
}

button:hover {
  background: black;
  color: red;
}
button.green-button {
  background: linear-gradient(to right, #00FF00, #008000);
}

button.green-button:hover {
  color: crimson;
  background: black;
}
button.red-button {
  background: linear-gradient(to right, #FF0000, #800000);
}

button.red-button:hover {
  color: blue;
  background: white;
}
button.inv-purple-button {
  background: black;
  color:yellow;
}

button.inv-purple-button:hover {
  color: white;
  background: #4B0082;
}

button.orange-button {
background: linear-gradient(to right, #FFA500, #FF8C00);
    padding: 15px 32px;

}
button.orange-button:hover {
  color: #3498db;
    background: black;
}
button.inverse-orange-button {
background: black;
  color: #3498db;
  vertical-align: middle;

}
button.inverse-orange-button:hover {
  color:white;
    background: linear-gradient(to right, #FFA500, #FF8C00);
}
button.purple-button {
background: linear-gradient(to right, #8A2BE2, #4B0082);
}
/* Apply styles for devices in portrait orientation */
@media (orientation: portrait) {
  .video-container {
    display: none;
  }
}
.modal {
  display: none; /* Hide the modal by default */
  position: fixed; /* Position the modal */
  top: 0; /* Position at the top of the page */
  left: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  z-index: 9999; /* Ensure modal is on top of other content */
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* Center modal vertically */
  padding: 20px;
  border: 1px solid #888888;
  width: 80%; /* 80% width */
  max-height: 70vh; /* Maximum height of 70% of the viewport height */
  overflow-y: auto; /* Enable vertical scrolling */
}
  .video-container {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -1; /* Ensure the video stays behind the content */
  }
  #myVideo {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: fill; /* This forces stretching */
}
.close {
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}
.form {
    text-align: left;
      position: relative;
}
#buy-button, #buy-buttonn, #buy-buttonnn {
    position: absolute;
    left: 220px;
    top: 50%;
    transform: translateY(-50%);
}

.close:hover,
.close:focus {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
}

#modalCloseBtn {
  display: block;
  margin-top: 20px;
}
button.purple-button:hover {
  color: yellow;
    background: black;
}
.styled-label {
background: #3498db;
  color: black;
    border-radius: 5px;
    padding: 8px 12px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
box-shadow: 0 2px 4px rgba(255, 255, 255, 1);
    display: inline-block; /* Change display property */
    margin-bottom: 10px; /* Add margin to the bottom */
}
#pur.styled-label {
background: yellow;
}
#bl.styled-label {
background: red;
}

.loading-indicator {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(255, 255, 255, 0.8);
      padding: 20px;
      border-radius: 10px;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      color: #333333;
    z-index: 4;
    }
.loading-indicator2 {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(255, 255, 255, 0.8);
      padding: 20px;
      border-radius: 10px;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      color: #333333;
    z-index: 4;
    }
  #stock-list-container {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #dddddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.stock-item {
    margin-bottom: 15px;
    padding: 15px;
    border: 1px solid #eeeeee;
    border-radius: 5px;
    background-color: #ffffff;
}

.stock-item strong {
    display: block;
    margin-bottom: 5px;
    font-size: 18px;
}

.stock-item span {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
}

.stock-item hr {
    margin-top: 10px;
    border: none;
    border-top: 1px solid #eeeeee;
}
 #info-container, #info-container-orders, #chart-container, #chart-container-orders {
            flex-direction: column;
            align-items: center; /* Centers items horizontally */
            justify-content: center; /* Centers items vertically */
            margin-top: 20px;
            font-family: Arial, sans-serif;
            line-height: 1.5;
            padding: 20px; /* Adds some space inside the container */
            background-color: rgba(255, 255, 255, 0.9); /* White with 50% opacity */
            border-radius: 8px; /* Optional: adds rounded corners */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: adds a subtle shadow for better visibility */
            max-width: 800px; /* Optional: limits the width of the container */
            margin: 20px auto; /* Centers the container horizontally */
        }
#pie-container, #pie-container-orders {
            flex-direction: column;
            align-items: center; /* Centers items horizontally */
            justify-content: center; /* Centers items vertically */
            margin-top: 20px;
            font-family: Arial, sans-serif;
            line-height: 1.5;
            padding: 20px; /* Adds some space inside the container */
            background-color: rgba(255, 255, 255, 0.7); /* White with 50% opacity */
            border-radius: 8px; /* Optional: adds rounded corners */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: adds a subtle shadow for better visibility */
            max-width: 8000px; /* Optional: limits the width of the container */
            margin: 20px auto; /* Centers the container horizontally */
        }
.hidden {
        display: none;
    }
.info-line {
            margin-bottom: 10px;
        }

        .info-line span {
            display: inline-block;
            margin-right: 20px; /* Space between items */
        }

#semi-donut-container, #semi-donut-container-orders, #semi-donut-container-sells {
            flex-direction: column;
            text-align: center; /* Centers items horizontally */
            justify-content: center; /* Centers items vertically */
            margin-top: 20px;
            font-family: Arial, sans-serif;
            line-height: 1.5;
            padding: 20px; /* Adds some space inside the container */
            background-color: rgba(255, 255, 255, 0.7); /* White with 50% opacity */
            border-radius: 8px; /* Optional: adds rounded corners */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: adds a subtle shadow for better visibility */
            max-width: 473px; /* Optional: limits the width of the container */
            margin: 20px auto; /* Centers the container horizontally */
        }

#portfolioChart, #portfolioChart-orders {
    margin: 0;
    padding: 0;
    display: block; /* Ensure the chart uses block layout */
    max-width: 100%; /* Adjust to fit container */
    height: auto; /* Adjust height to maintain aspect ratio */
}

canvas {
    max-width: 100%; /* Ensure the canvas fits within its container */
    height: auto; /* Maintain aspect ratio */
}

#legend-container, #legend-container-orders, #legend-container-sells {
    display: none; /* Use flexbox for layout */
    overflow-x: auto; /* Enable horizontal scrolling if needed */
    white-space: nowrap; /* Prevent line breaks */
    max-height: 60px; /* Set a maximum height for the legend container */
    max-width: 1000px; /* Set a maximum width for the container */
    overflow-y: hidden; /* Hide vertical overflow */
    padding: 10px; /* Optional: Add padding */
    background: white; /* Optional: Add background for better visibility */
    border: 1px solid #dddddd; /* Optional: Add border */
    border-radius: 8px; /* Rounded corners for the legend */
    width: 100%; /* Ensure the legend container takes full width */
    box-sizing: border-box; /* Include padding and border in the width calculation */
    justify-content: flex-start; /* Default alignment */
}

.chart-legend-item {
    display: flex;
    margin-right: 20px; /* Space between legend items */
    font-size: 14px; /* Adjust font size as needed */
}

.chart-legend-item span {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
}

#info-containerr, #info-containerr-orders {
  width: 100%; /* Make sure it takes the full width of the container */
}

.info-row {
  display: flex;
  justify-content: space-between;
  width: 100%; /* Makes the row span the full width */
  max-width: 600px; /* Optionally limit the width */
}

.info-row .label {
  text-align: left;
}

.info-row .value {
  text-align: right;
}

.button-containerrr {
    display: flex; /* Ensures buttons are on the same line */
    gap: 10px; /* Space between buttons */
    justify-content: flex-start; /* Align buttons to the left */
    /* Optional: Add padding if needed */
    padding: 10px;
}

.button-containerrr button {
    padding: 0px 0px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background-color: #007bff; /* Blue background color */
    color: white;
    transition: background-color 0.3s ease;
}

.button-containerrr button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}
.button-containerrr button i {
    margin: 10px; /* Space between icon and text */
}

/* Sub Buttons Container */
#sub-buttons {
    gap: 6px;
    margin-top: 5px;
    justify-content: center; /* Center aligns the buttons */
    align-items: center; /* Ensures vertical alignment */
    width: 100%; /* Takes full width to center properly */
}


/* Sub Buttons */
#sub-buttons button {
    padding: 6px 12px; /* Smaller than main buttons */
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: 2px solid #007bff;
    border-radius: 6px;
    background: linear-gradient(135deg, #1e1e2e, #2a2a3c);
    color: #ffffff;
    transition: all 0.3s ease;
}

/* Sub Buttons Hover Effect (Different from Main Buttons) */
#sub-buttons button:hover {
    background: #ff9800; /* Orange hover effect to stand out */
    color: #ffffff;
    border-color: #ff9800;
    transform: scale(1.05);
}

/* Sub Buttons Active Effect */
#sub-buttons button:active {
    background: #e68900; /* Slightly darker orange for pressed effect */
    transform: scale(0.98);
}

        .stock-image {
            pointer-events: none;
        }
      .tooltip {
            position: absolute;
            background: white;
            border: 1px solid black;
            border-radius: 5px;
            padding: 5px;
            display: none;
            font-size: 12px;
            pointer-events: none;
            box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
        }