/* styles.css */
.normal-color-1 {
  color: #333333; /* Dark gray as an example */
}

.cursor-pointer {
  cursor: pointer;
}

/* Set a base font size for the entire website */
body {
  font-family: 'Noto Sans SC', sans-serif;
  font-size: 21px; /* or whatever base size you prefer */
  line-height: 1.6; /* A good default line-height for readability */
  font-weight: 400;
}

/* This will apply the semi-bold weight (600) to headings */
h1, h2, h3 {
  font-weight: 600;
}

/* Override the font size for headings to create a visual hierarchy */
h1 {
  font-size: 2rem; /* Larger size for primary headings */
}

h2 {
  font-size: 1.5rem; /* Slightly smaller size for secondary headings */
}

h3 {
  font-size: 1.2rem; /* And so on for other heading levels */
}

.notification {
  margin-top: 20px; /* Add some spacing at the top */
  border: 1px solid #ffd966; /* Custom border color */
  background-color: #fff3cd; /* Light yellow background */
  color: #856404; /* Text color */
  text-align: left; /* Center align text */
  padding: 10px; /* Padding inside the alert box */
  border-radius: 5px; /* Rounded corners */
}

/* Other styles */
.my-custom-size {
  font-size: 18px; /* Example of a custom class for specific font size */
  font-weight: 400;
}

.navbar {
  padding-top: 0;
  padding-bottom: 0;
}
.navbar .container {
  padding-left: 0 !important;
}
.header-image-container img {
  width: 80px;  /* This is the size on larger screens */
}

/* Custom styles for medium screens (md) */
@media (max-width: 991px) {
  /* Your custom styles for medium screens */
  .custom-container {
    max-width: 100%; /* set the maximum width to 100% for screens smaller than 768px */
    padding-left: 15px; /* add left and right padding for better mobile viewing */
    padding-right: 15px;
  }

  .chart-container {
    width: 100%;
    /*height: 600px;*/
  }

  .navbar-collapse {
    background-color: white; /* Set the background color to match your header image background */
    padding-top: 10px; /* Add space between header image and menu items */
    position: absolute;
    top: 100%;
    left: 10px; /* Adjust the position as needed */
    width: 100%;
    z-index: 99;
  }

  .navbar-header {
    display: flex;
    justify-content: space-between; /* This will push the nav to the right */
    align-items: center;
    /* other styling */
  }
  .navbar-nav {
    flex-direction: column; /* Display menu items vertically */
  }

  #menu-search-container #suggestion-list {
    top: 10%; /* Position right below the input box */
    display: none;
    z-index: 99;
  }
}

/* Custom styles for large screens (lg) */
@media (min-width: 992px) and (max-width: 1199px) {
    /* Your custom styles for extra large screens */
    .chart-container {
      width: 100%;
      height: 1024px;
    }

    #menu-search-container #suggestion-list {
      top: 60%; /* Position right below the input box */
      display: none;
      z-index: 99;
    }
}

/* Custom styles for extra large screens (xl) */
@media (min-width: 1200px) {
  /* Your custom styles for extra large screens */
  .chart-container {
    width: 100%;
    height: 1024px;
  }
  #menu-search-container #suggestion-list {
    top: 60%; /* Position right below the input box */
    display: none;
    z-index: 99;
  }
}

/* Style specific to the home page */
#home-search-container #suggestion-list {
  position: absolute;
  display: none;
  z-index: 99;
}


.post-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}


  #suggestion-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    border: 1px solid #ccc;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: absolute;
    display: inline-block;
    /*z-index: 1;*/
    background-color: #fff;
  }
  #suggestion-list li {
    padding: 5px;
    cursor: pointer;
  }
  #suggestion-list li:hover {
    background-color: #f0f0f0;
  }


  ul.errors {
      color: #dc3545; /* Bootstrap's default color for validation errors */
      list-style-type: none; /* Removes bullets */
      padding: 0; /* Removes padding */
      margin: 0; /* Removes margin */
  }

  ul.errors li {
      font-size: 0.875em; /* Smaller font size for error messages */
  }

  .flash-message-red {
      color: red;
  }
  .flash-message-green {
      color: green;
  }
  .form-label {
    display: inline-block;
    width: 150px;
  }

  .invalid-feedback {
    color: red;
  }
  
  .form-input {
    display: inline-block;
    width: calc(100% - 150px);
  }

  .input-field {
    width: 100%;
    border: none;
    border-bottom: 2px solid #ddd;
    outline: none;
    transition: border-color 0.3s ease;
  }
  
  .input-field:focus {
    border-color: #4a56e2;
  }

  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }


  .btn-custom-comments {
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .2rem;
  }

  .comment-card {
    border-bottom: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 10px;
  }

  .custom-list-group-item {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important; /* Adjust the color as needed */
  }

  .dataframe {
    border-collapse: collapse;
  }
  .dataframe tr:nth-child(even) {
      background-color: #f9f9f9;
  }
  .dataframe th, .dataframe td {
    /* Reduce font size for smaller table */
    font-size: 8px;
    padding: 1px;
    border: 1px solid #ddd;
    width: 36px; /* or width: 20%; */
  }
  .dataframe {
    overflow-x: scroll;
  }
  .dataframe thead, .dataframe tbody {
    display: block; /* Treat table body and header as separate blocks for styling */
  }
  
  /* Target the first table header and data cells */
  .dataframe thead th:nth-child(1),
  .dataframe tbody td:nth-child(1) {
    position: sticky;
    left: 0px; /* Pin the first column (index) to the left */
    background-color: #EEE; /* Add optional background color for visual distinction */
    padding: 5px;
    border-right: 1px solid #DDD; /* Optional border for visual separation */
  }

  .narrow-date-field .form-control {
    max-width: 160px;  /* Adjust this value as needed */
  }

  .narrow-100-field .form-control {
    max-width: 100px;  /* Adjust this value as needed */
  }