.text-with-bold {
        color: rgb(255, 255, 255); /* White text color */
        font-weight: bold; /* Optional: Makes the text more prominent */
    }
    button {
        border: 2.5px solid rgb(103, 185, 134); /* Solid white border */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), /* Shadow for depth */
                    0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle inner shadow */
        background: linear-gradient(to bottom, #f0f0f0, #d9d9d9); /* Light gradient for 3D effect */
        color: #333; /* Text color */
        font-weight: bold; /* Make text bold */
        transition: all 0.2s ease-in-out; /* Smooth transition for hover effects */
        border-radius: 6px; /* Rounded corners */
    }

    button:hover {
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3), /* Stronger shadow on hover */
                    0 2px 4px rgba(0, 0, 0, 0.2);
        transform: translateY(-2px); /* Slight lift on hover */
        background: linear-gradient(to bottom, #e0e0e0, #c9c9c9); /* Slightly darker gradient */
    }

    button:active {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), /* Reduced shadow on click */
                    0 1px 2px rgba(0, 0, 0, 0.1);
        transform: translateY(2px); /* Button presses down */
        background: linear-gradient(to bottom, #d9d9d9, #bfbfbf); /* Darker gradient */
    }
    .grid-note {
      transition: all 0.3s ease-in-out;
      cursor: pointer;
      overflow: hidden;
      position: relative;
    }
    .grid-note.expanded {
      position: fixed;
      transform: scale(2.25);
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1);
      border: 2px solid #4B5563;
      z-index: 1050;
      background-color: #ffffff; /* Light background for better readability */
      color: #000000; /* Dark text for better contrast */
      max-width: 90vw;
      max-height: 90vh;
      overflow-y: auto;
      opacity: 1 !important;
      display: flex;
      flex-direction: column;
      padding: 20px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      border-radius: 10px;
    }
    .grid-note.expanded.closing {
      opacity: 0;
      transform: scale(1);
    }
    .modal-active .grid-note:not(.expanded) {
      opacity: 0.5;
    }
    .modal-active {
      pointer-events: none;
    }
    .modal-active .fixed.inset-0 {
      pointer-events: auto;
    }
    .modal-active .grid-note {
      pointer-events: auto; /* Allow interaction with the expanded note */
    }
    #strainSuggestions {
      max-height: 200px;
      overflow-y: auto;
    }
    button, input {
      min-height: 44px;
    }
    .grid-note {
      min-width: 0;
    }
    /* Custom color overrides for better contrast */
    .text-gray-900 .dark\:text-gray-50 {
      color: #eeffb1; /* Darker gray for light mode */
    }
    .dark .text-gray-900.dark\:text-gray-50 {
      color: #F5F5F5; /* Light gray for dark mode */
    }
    .dark .dark\:text-stats {
      color: #1beb4f; /* Light green for stats in dark mode */
    }
    .dark .dark\:text-strain {
      color: #51a64b; /* Cyan for strain in dark mode */
    }
    .text-gray-600.dark\:text-gray-200 {
      color: #374151; /* Darker gray for light mode */
    }
    .dark .text-gray-600.dark\:text-gray-200 {
      color: #D1D5DB; /* Light gray for dark mode */
    }
    .bg-blue-500.dark\:bg-blue-500 {
      background-color: #3B82F6;
    }
    .dark .bg-blue-500.dark\:bg-blue-500 {
      background-color: #3B82F6;
    }
    .hover\:bg-blue-600.dark\:hover\:bg-blue-400:hover {
      background-color: #2563EB;
    }
    .dark .hover\:bg-blue-600.dark\:hover\:bg-blue-400:hover {
      background-color: #60A5FA;
    }
    .bg-red-500.dark\:bg-red-600 {
      background-color: #d94026;
    }
    .dark .bg-red-500.dark\:bg-red-600 {
      background-color: #d94026;
    }
    .hover\:bg-red-600.dark\:hover\:bg-red-400:hover {
      background-color: #db4126;
    }
    .dark .hover\:bg-red-600.dark\:hover\:bg-red-400:hover {
      background-color: rgb(177, 49, 26);
    }
    .hover\:bg-red-600.dark\:hover\:bg-red-400:hover {
      background-color: #059669;
    }
    .dark .hover\:bg-red-600.dark\:hover\:bg-red-400:hover {
      background-color: #34D399;
    }
    .bg-green-500.dark\:bg-green-600 {
      background-color: #51a64b;
    }
    .dark .bg-green-500.dark\:bg-green-600 {
      background-color: #51a64b;
    }
    .hover\:bg-green-600.dark\:hover\:bg-green-400:hover {
      background-color: #059669;
    }
    .dark .hover\:bg-green-600.dark\:hover\:bg-green-400:hover {
      background-color: #34D399;
    }
    .hover\:bg-red-600.dark\:hover\:bg-red-400:hover {
      background-color: #DC2626;
    }
    .dark .hover\:bg-red-600.dark\:hover\:bg-red-400:hover {
      background-color: #EF4444;
    }
    .bg-gray-500.dark\:bg-gray-600 {
      background-color: #6B7280;
    }
    .dark .bg-gray-500.dark\:bg-gray-600 {
      background-color: #4B5563;
    }
    .hover\:bg-gray-600.dark\:hover\:bg-gray-500:hover {
      background-color: #4B5563;
    }
    .dark .hover\:bg-gray-600.dark\:hover\:bg-gray-500:hover {
      background-color: #6B7280;
    }
    .bg-amber-600.dark\:bg-amber-600 {
      background-color: #D97706;
    }
    .dark .bg-amber-600.dark\:bg-amber-600 {
      background-color: #D97706;
    }
    .hover\:bg-amber-700.dark\:hover\:bg-amber-500:hover {
      background-color: #B45309;
    }
    .dark .hover\:bg-amber-700.dark\:hover\:bg-amber-500:hover {
      background-color: #F59E0B;
    }
    /* Custom background for light mode */
    body {
      background-color: #afeeaf; /* Pastel white for light mode */
    }
    .dark body {
      background-color: #111827; /* Dark background for dark mode */
    }
    /* Soft mustard yellow for note cards in light mode */
    .bg-yellow-200 {
      background-color: #F4D03F !important; /* Mustard yellow for light mode */
    }
    .dark .bg-yellow-200 {
      background-color: #374151 !important; /* Steel gray for dark mode */
    }
    /* Style for daily note on note cards */
    .daily-note {
      display: -webkit-box;
      -webkit-line-clamp: 5;
      -webkit-box-orient: ho;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .grid-note.expanded .daily-note {
      display: block;
      -webkit-line-clamp: unset;
      overflow-y: auto;
      text-overflow: unset;
      font-size: 0.75rem; /* 14px - 3 points smaller */
      max-height: calc(100% - 80px); /* Reduced space for header and buttons */
      padding-right: 8px; /* Reduced padding for scrollbar */
      margin: 0.25rem 0; /* Reduced margin */
    }
    .grid-note.expanded h3 {
      font-size: 1.25rem; /* 20px - 3 points smaller */
      margin: 0.25rem 0; /* Reduced margin */
    }
    .grid-note.expanded p {
      font-size: 0.875rem; /* 14px - 3 points smaller */
      margin: 0.25rem 0; /* Reduced margin */
    }
    .day-note-container p{
      font-size: .875rem; /* Smaller font size (14px) */
      line-height: 1.02rem; /* Adjust line height for readability */
    }
    @media (max-width: 640px) {
      .grid-note.expanded {
        transform: scale(1.5);
        max-width: 95vw;
      }
    }
    @media (max-width: 480px) {
      .grid-note.expanded {
        transform: scale(1.25);
        max-width: 98vw;
      }
    }
    @media (max-width: 640px) {
        .red-box p,
        .green-box p {
            font-size: 0.875rem; /* Reduce font size to 14px for smaller screens */
        }   
    }

    @media (max-width: 640px) {
        .aboutModal p
        {
            font-size: 0.4rem; /* Reduce font size to 12px for smaller screens */
        }   
    }

    .scrollable {
      max-height: 150px; /* Set a maximum height for the input */
      overflow-y: auto; /* Add a vertical scroll bar */
    }
    .day-note-container {
      max-height: 150px; /* Set a maximum height for the note section */
      overflow-y: auto; /* Add a vertical scroll bar */
    }
    .flex-grow-0 {
      flex-grow: 0; /* Prevents growing */
      flex-shrink: 0; /* Prevents shrinking */
      flex-basis: auto; /* Takes only the space it needs */
    }
    #editMenu {
      display: flex;
      flex-direction: column; /* Stack child elements vertically */
      align-items: stretch; /* Ensure children take full width */
      justify-content: flex-start; /* Align items at the top */
      width: auto; /* Allow the width to adjust dynamically */
      height: auto; /* Allow the height to adjust dynamically */
      max-width: 90%; /* Optional: Limit the maximum width */
      max-height: 90%; /* Optional: Limit the maximum height */
      overflow: visible; /* Ensure content is not clipped */
    }

    textarea#editNoteInput {
      min-height: 100px; /* Set a minimum height for the text box */
      max-height: 300px; /* Optional: Limit the maximum height */
      resize: both; /* Allow vertical resizing only */
    }

    #appTop {
      position: sticky; /* Makes the element stick to the top of the viewport */
      top: 0; /* Sticks to the top of the viewport */
      z-index: 100; /* Ensures it stays above other elements */
      background-color: #afeeaf; /* Light mode background color */
      transition: top 0.4s ease-in-out; /* Smooth transition when scrolling */
      /* border: 6px solid white;  Adds a solid white border */
      /*border-left: 2px solid white; /* Adds a solid white border on the left */
      /*border-bottom: 6px solid white; /* Adds a solid white border on the bottom */
      border-bottom-right-radius : 25px; /* Optional: Adds rounded corners */
      border-bottom-left-radius : 25px; /* Optional: Adds rounded corners */
    }


    .dark #appTop {
    background-color: #111827; /* Dark mode background color */
    }
      #appTop.sticky {
      top: 0; /* Sticks to the top of the viewport */
      background-color: #ffffff; /* Background color when sticky */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 10.1); /* Shadow effect when sticky */
    }

    #aboutModal .w-full.sm\:w-11\/12.md\:max-w-lg {
      /* Increase width by 15%    width: 28%;*/
        height: auto; /* Allow height to adjust dynamically */        
        transition: transform 0.3s ease-in-out; /* Smooth transition for scaling */
    }

    #dateTimeModalTitle {
      color: #eeffb1; /* Darker gray for light mode */
    }