main,nav li{padding:1rem}main,nav{background-color:#fff}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Arial,sans-serif;background-color:#fafafa;color:#333}a{text-decoration:none;color:inherit}.container{display:flex;flex-direction:column;min-height:100vh}nav{border-bottom:1px solid #ccc;overflow-x:auto;white-space:nowrap}nav ul{list-style:none;display:flex;flex-direction:row}nav li{cursor:pointer;flex:0 0 auto;transition:background-color .2s}nav li.active,nav li:hover{background-color:#e0f2e9}main{flex:1;position:relative}.veg-detail{display:none;animation:.3s ease-in-out fadeIn}.veg-detail.active{display:block}.veg-header{display:flex;align-items:center;margin-bottom:1em}.veg-header img{width:100px;height:100px;object-fit:cover;margin-right:1em;border-radius:8px;border:1px solid #ccc}.veg-header h2{font-size:1.5em}.calendar-table{width:100%;border-collapse:collapse;}.calendar-table td,.calendar-table th{border:1px solid #ddd;text-align:center;padding:.5em;font-size:.5em}.calendar-table th{background-color:#f0f0f0}.seedling{background-color:#ffd59e}.direct{background-color:#c6eecb}.harvest{background-color:#f8c1c1}


  .seedling_text, .direct_text, .harvest_text {
    margin: 8px 6px 25px; display: inline-block;
  }
  .seedling_text { color: #ffd59e;    
  }
  .direct_text {
    color: #c6eecb; 
	  }
  .harvest_text {
    color: #f8c1c1; 
  }
    .seedling_text::before,
  .direct_text::before,
  .harvest_text::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;       /* avstånd mellan fyrkant och text */
    vertical-align: middle;   } /* justerar fyrkanten i höjd med texten */
	
	  /* Sätt rätt bakgrundsfärg för varje fyrkant */
  .seedling_text::before {
    background-color: #ffd59e; /* orange */
  }
  .direct_text::before {
    background-color: #c6eecb; /* ljusgrön */
  }
  .harvest_text::before {
    background-color: #f8c1c1; /* ljusröd */
  }

.icon-row{display:flex;align-items:flex-start;margin-bottom:10px}.icon-row img{width:50px;height:50px;margin-right:10px;margin-top:-15px}.more-info{display:inline-block;margin-top:1em;color:#060;font-weight:700}.more-info:hover{text-decoration:underline}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@media (min-width:768px){main,nav{overflow-y:auto}.container{flex-direction:row}nav{flex:0 0 200px;border-right:1px solid #ccc;border-bottom:none;max-height:100vh}nav ul{flex-direction:column}nav li{border-bottom:1px solid #eee}main{flex:1}.calendar-table td{font-size:1em}.calendar-table th{font-size:.8em}