.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 */
}
#performanceChart2, #performanceChart3, #performanceChart4 {
    margin-top: 40px;
    display: block;
}
.chart-wrapper {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  margin-top: 20px;
}
.chart-wrapper:first-child {
  margin-top: 0;
}
.searchboxx{  background: black;
  color: #FFA500;
  font-size: 16px;
  transition: background 1s ease;
  text-decoration: none;
margin-bottom: 10px;
margin-top:10px;}
.searchboxx::placeholder {
  color: #FFA500; /* Change the color to whatever you want */
}
a {
  text-decoration: none;
}
.form {
    text-align: left;
      position: relative;
}
#buy-button, #buy-buttonn, #buy-buttonnn {
    position: absolute;
    left: 220px;
    top: 50%;
    transform: translateY(-50%);
}
.authentication-buttons {
  display: flex;
  justify-content: flex-end; /* Align buttons to the right */
  margin: 10px;
}
.autocomplete {
      position: relative;
      display: inline-block;
    }

.autocomplete-items {
  position: absolute;
background-color: rgba(255, 255, 255, 0.8);
  z-index: 99;
  color: #000000; /* Set text color to black */
  max-height: 300px; /* Set maximum height for the autocomplete list */
  overflow-y: auto; /* Enable vertical scrolling */
  width: 100%;
}


    .autocomplete-item {
      padding: 10px;
      cursor: pointer;
    }

.autocomplete-item:hover {
  background-color: #e0e0e0; /* Slightly darker light gray background color on hover */
}


#signIn,#logoutButton,
#register,button[type="submit"] {
    height: 40px;
  background-color: #3498db;
  color: white;
  padding: 8px 16px; /* Adjust the padding as needed */
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 10px; /* Add some spacing between buttons */
}

#signIn:hover,#logoutButton:hover, #register:hover, button[type="submit"]:hover {
  background: black;
  color: red;
}
  #toggleChartButtonContainer {
    display: flex;
    justify-content: center;
    margin-top: 20px; 
    margin-bottom: 20px;/* Adjust the margin-top as needed for spacing */
  }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: linear-gradient(to right, #2c3e50, #bdc3c7);
}



h1 {
  color: white;
  text-align: center;
  font-size: 48px;
  letter-spacing: 3px;
  background-color: #2c3e50;
  padding: 20px;
  border-radius: 8px;
  border: 2px solid white;
}


.subheader-container {
    display: flex;
  margin-top:40px
}
  .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;
    }


.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 */
}
.modal-ticker-link {
  color: #f39c12;  /* Orange color that stands out */
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1px dotted #f39c12;
  transition: all 0.2s ease;
  padding: 0 2px;
}

.modal-ticker-link:hover {
  color: #e67e22;
  border-bottom: 1px solid #e67e22;
  background: rgba(243, 156, 18, 0.05);
}

.modal-ticker-link:active {
  color: #d35400;
}

.close {
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

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

#modalCloseBtn {
  display: block;
  margin-top: 20px;
}


.subheader-item2 {
  width: calc(33.33% - 20px);
  margin: 10px 10px;
  text-align: center; /* Center the text (buttons) */
  align-items: center;
}


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.grey-button {
  background: linear-gradient(to right, #DCDCDC, #A9A9A9);
  color:black;
}

button.grey-button:hover {
  color: #804080;
  background: white;
}

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

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

}
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;
  }
}

  .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 */
}

button.purple-button:hover {
  color: yellow;
    background: black;
}

.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;
}
.arrow-button:hover{background:none;}

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

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

.subheader-item ul {
  padding: 10px 0px; 
  z-index: 2;
}


    .subheader-item ul li {
      list-style-type: none;
      text-align: center;
      margin-bottom: 10px;
    }

    .explanation {
      position: absolute;
      top: 0;
      right: 100%; /* Position to the right of the option */
      margin-right: 10px; /* Space between option and explanation */
      background: white;
      padding: 10px;
      border: 1px solid #cccccc;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      display: none;
      z-index: 3;
    }
    .subheader-item ul li:hover .explanation {
      display: block;
    }
.near-bottom{margin-top:80px;
}

#portfolioResults {
  color: white;
  text-align: center;
  margin-top: 20px;
}
footer {
  background-color: #34495e;
  padding: 20px;
  color: white;
  margin-top: auto; /* Push the footer to the bottom of the content */
}



.footer-links {
  display: flex;
  justify-content: space-between;
  background-color: #34495e;
  padding: 20px;
  color: white;
    margin-top: auto;
}

.footer-links nav ul {
  list-style: lower-roman inside;
  padding: 0;
  margin: 0;
}

.footer-links a {
  color: #ecf0f1;
  text-decoration: none;
}

.footer-links h3 {
  color: #ecf0f1;
}
.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 */
}

.searchbox {
  background: linear-gradient(to right, #3498db, #2980b9);
  color: white;
  font-size: 16px;
    display: none;
  transition: background 1s ease;
  text-decoration: none;
  border: 2px solid black;
}
#portSearchBox.searchboxxx, #cashSearchBox.searchboxxx, #port2SearchBox.searchboxxx, #cash2SearchBox.searchboxxx{
background: black;
  color: #FFA500;
  font-size: 16px;
    display: none;
  transition: background 1s ease;
  text-decoration: none;
  border: 2px solid black;
}
#dateSearchBox.searchbox {
  background: linear-gradient(to right, #8A2BE2, #4B0082);
}
#set_API_keySearchBox.searchbox, #set_API_secretSearchBox.searchbox {
  background: linear-gradient(to right, #DCDCDC, #A9A9A9);
  color: black;
}
#setlistSearchBox.searchbox, #addstockSearchBox.searchbox, #deletestockSearchBox.searchbox {
  background: linear-gradient(to right, #00FF00, #008000);
}
#portfolioSearchBox.searchbox, #stockSearchBox.searchbox {
  background: linear-gradient(to right, #FFA500, #FF8C00)}
.searchbox::placeholder, #portSearchBox.searchboxxx::placeholder, #cashSearchBox.searchboxxx::placeholder, #port2SearchBox.searchboxxx::placeholder, #cash2SearchBox.searchboxxx::placeholder {
  color: white;
}
#portSearchBox.searchboxxx::placeholder, #cashSearchBox.searchboxxx::placeholder, #port2SearchBox.searchboxxx::placeholder, #cash2SearchBox.searchboxxx::placeholder {
   color: #FFA500;
}
#set_API_keySearchBox.searchbox::placeholder, #set_API_secretSearchBox.searchbox::placeholder {
  color: black;
}
  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;
  }

  input[type="date"] {
    padding: 8px; /* Adjust padding for a cleaner look */
    border: 1px solid purple;  /* Add a border with a shade of blue */
    border-radius: 5px;
  }
input[type="date"].blue {
  padding: 8px;
  border: 1px solid lightblue;
  border-radius: 5px;
}
#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 */
}


.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 */
}
        .highlighted-span {
            margin-right: 10px;
            cursor: default;
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            font-size: 18px; /* Increase font size */
            font-weight: bold; /* Add bold font weight */
            color: white; /* Set text color to white */
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add text shadow for visibility */
        }
        .highlighted-span i {
            margin-left: 5px; /* Adjust margin between text and icon */
            color: #FFD700; /* Set icon color */
        }