h1 {
   text-align: center;
   font-size: 24px;
   font-weight: bold;
 }

 .controls {
   display: flex;
   flex-wrap: wrap;
   gap: 15px;
   margin-bottom: 20px;
   justify-content: center;
 }

 input[type=number] {
   width: 60px;
 }

 select {
   padding: 5px;
 }

 button {
   padding: 5px 10px;
   cursor: pointer;
 }

 .palette {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-bottom: 20px;
   justify-content: center;
   max-height: 300px;
   overflow: auto;
 }

 .palette .gemueseBtn {
   padding: 10px;
   border: 1px solid #999;
   border-radius: 4px;
   cursor: grab;
   text-align: center;
 }

 .grid {
   display: grid;
   gap: 5px;
   justify-content: center;
 }

 #gardenGrid .col {
  min-height:100px;
     background-color: #532a11;
  display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
 }

 .cell {
   border: 1px solid #999;
   width: 60px;
   height: 60px;
position: relative;
   align-items: center;
   justify-content: center;
   font-size: 24px;
   background-color: #532a11;
   transition: background 0.3s;
    -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;

  touch-action: manipulation;
 }

 /* Pflanzenfarben */
 .tomate {
   background-color: #ff9999;
 }

 .kuerbis {
   background-color: #ffd699;
 }

 .salat {
   background-color: #99ff99;
 }

 @media (max-width: 600px) {
   .cell {
     width: 60px;
     height: 60px;
     font-size: 18px;
     -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;

  touch-action: manipulation;
   }

   .palette div {
     padding: 5px;
     font-size: 14px;
   }
 }

.cell:hover:before
 {
    content: attr(name);
    background: var(--color-primary-100);
    color:#fff;
    border: solid 1px #ddd;
    position: absolute;
    transform: translateX(-50%);
    font-size: 16px;
        margin-right: 30px;

  }

  #logFile {
        border: 1px solid lightgrey;
  }

  header {height:auto !important}

  input[type=text]:not(#live-search-input) {
background-color: white;
  }

  .btn {
    background-color: var(--color-primary-100) !important;
  }

  .component {
    margin-top:10px !important
  }

  .btn-xs {
    font-size: 10px !important;
    padding: 5px !important;
    height: 16px !important;
    line-height: 10px !important;
         position: absolute !important;
    top: 2px !important;
    right: 2px !important;
  
  }