/* Color scheme and basic styling */
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f8ff;
            color: #333;
        }
        .container {
            max-width: 600px;
            margin: 30px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            overflow-y: scroll;  /* Vertical scroll only */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .header {
            max-width: 600px;
            margin: 30px auto;
            padding: 20px;
            background-color: blue;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        h2 {
            color: #006699;
            text-align: center;
        }
        label {
           
            font-weight: bold;
            margin-top: 10px;
        }
        input, select, textarea,tel {
            position: relative;
            width: 95%;
            max-width: 500px;
            padding: 10px;
            font-size: 16px;
            border: 2px solid #ccc;
            border-radius: 5px;
            box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
            transition: border 0.2s ease-in-out;
        }
        
        .divx{
            background-color: #006699;
            color: #fff;
            padding: 10px;
            width: 300px !important;
            border: none;
            border-radius: 5px;
            cursor: pointer;
             flex: none;
        }
          
        
        input:focus {
            border-color: #007BFF;
            outline: none;
            box-shadow: 0 0 8px rgba(0, 123, 255, 0.5);
        }
        tel:focus {
            border-color: #007BFF;
            outline: none;
            box-shadow: 0 0 8px rgba(0, 123, 255, 0.5);
        }
      
        
          select:focus {
            border-color: #007BFF;
            outline: none;
            box-shadow: 0 0 8px rgba(0, 123, 255, 0.5);
        }
        
          textarea:focus {
            border-color: #007BFF;
            outline: none;
            box-shadow: 0 0 8px rgba(0, 123, 255, 0.5);
        }
        .checkbox-group {
              display: flex;
              align-items: center;
              gap: 5px; /* Adds space between checkbox and label */
            }
        .form-group {
            
        display: flex;
        flex-direction: column;
        gap: 10px; /* Adds space between elements */
        
        }
        .btn {
            background-color: #006699;
            color: #fff;
            padding: 10px;
            width: 300px !important;
            border: none;
            border-radius: 5px;
            cursor: pointer;
             flex: none;
        }
        .btn:hover {
            background-color: #004d66;
        }
        
        
        .btn50 {
            background-color: #006699;
            color: #fff;
            padding: 10px;
            width: 50% !important;
            min-width: 200px;
            max-width: 300px;
            border: none;
             flex: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .btn50:hover {
            background-color: #004d66;
        }
        
        
        .btn20 {
            background-color: #006699;
            color: #fff;
            padding: 10px;
            width: 20% !important;
            min-width: 15%;
            max-width: 20%;
            border: none;
             flex: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .btn20:hover {
            background-color: #004d66;
        }
        
        #photoPreview {
            display: block;
            width: 100px;
            height: 130px;
            margin-top: 10px;
            object-fit: fill;
            border: 1px solid #ccc;
        }
        
         .autocomplete-container {
            position: relative;
            width: 100%;
            max-width: 400px;
            margin: 0 auto;
        }
        
        /*input[type="text"] {*/
        /*    width: 100%;*/
        /*    padding: 10px;*/
        /*    border: 1px solid #ccc;*/
        /*    font-size: 16px;*/
        /*    box-sizing: border-box;*/
        /*}*/

        .autocomplete-popup {
            position: absolute;
            top: 40px;
            width: 100%;
            border: 1px solid #ccc;
            background-color: white;
            z-index: 1000;
            max-height: 300px;
            overflow-y: auto;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        }

        .autocomplete-table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
        }

        .autocomplete-table th, .autocomplete-table td {
            padding: 10px;
            border-bottom: 1px solid #ddd;
        }

        .autocomplete-item {
            cursor: pointer;
        }

        .autocomplete-item:hover {
            background-color: #f0f0f0;
        }
        
        
          /* Input field styling */
        #item-search {
            width: 100%;
            max-width: 500px;
            padding: 10px;
            font-size: 16px;
            border: 2px solid #ccc;
            border-radius: 5px;
            box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
            transition: border 0.2s ease-in-out;
        }

        #item-search:focus {
            border-color: #007BFF;
            outline: none;
            box-shadow: 0 0 8px rgba(0, 123, 255, 0.5);
        }
        
        
          /* Input field styling */
        .ibox {
            width: 100%;
            max-width: 500px;
            padding: 10px;
            font-size: 16px;
            border: 2px solid #ccc;
            border-radius: 5px;
            box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
            transition: border 0.2s ease-in-out;
        }
        
        .ibox:focus {
            border-color: #007BFF;
            outline: none;
            box-shadow: 0 0 8px rgba(0, 123, 255, 0.5);
        }

        /* Mobile Responsive Styling */
        @media (max-width: 600px) {
            input[type="text"] {
                font-size: 14px;
                padding: 8px;
            }

            .autocomplete-table th, .autocomplete-table td {
                padding: 8px;
            }
        }
        
        
        
        /* Autocomplete container styling */

            .autocomplete-suggestions {
            position: absolute;
            border: 1px solid #ddd;
            max-height: 250px;
            overflow-y: auto;
            background-color: white;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 500px;
            margin-top: 5px;
            border-radius: 5px;
            transition: opacity 0.2s ease;
        }


        

  /* Grid layout */
        .autocomplete-grid {
            display: grid;
            grid-template-columns: 1fr 3fr 3fr 2fr;
            padding: 10px;
            border-bottom: 1px solid #eee;
            grid-column-gap: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
            justify-content: left;
            align-items: left;
            border-top: 1px solid black;
            border-left: 1px solid black;
            border-right: 1px solid black;
            
        }

     

        /* Header row styling */
        .autocomplete-header {
            font-weight: bold;
            background-color: #f0f0f0;
            padding: 10px;
        }

        /* Hover effects */
        .autocomplete-grid:hover {
            background-color: #f8f9fa;
        }

        /* Highlight for keyboard navigation */
        .highlighted {
            background-color: #007BFF;
            color: white;
        }

        /* Styling for the selected item */
        .selected-item {
            margin-top: 20px;
            font-weight: bold;
            color: #007BFF;
            padding: 10px;
            background-color: #e9f7ff;
            border: 1px solid #007BFF;
            border-radius: 5px;
            max-width: 500px;
        }
        
        
       

        /* Header row styling */
        .autocomplete-header {
            font-weight: bold;
            background-color: #f0f0f0;
            padding: 10px;
        }

        /* Hover effects */
        .autocomplete-grid:hover {
            background-color: #f8f9fa;
        }

        /* Highlight for keyboard navigation */
        .highlighted {
            background-color: #007BFF;
            color: white;
        }

        /* Styling for the selected item */
        .selected-item {
            margin-top: 20px;
            font-weight: bold;
            color: #007BFF;
            padding: 10px;
            background-color: #e9f7ff;
            border: 1px solid #007BFF;
            border-radius: 5px;
            max-width: 500px;
        }


        .checkbox-label {
            display: flex;
            align-items: center;
        }

        .checkbox-label input {
            margin-left: 8px; /* Adjust space between checkbox and label */
        }
        
    .td-center {
      text-align: center;      /* Horizontal centering */
      vertical-align: middle;  /* Vertical centering */
               /* Set height to visualize vertical alignment */
    }
  
 table {
      width: 100%;            /* Set table width to 100% of the parent container */
      border-collapse: collapse;  /* Merge borders between table cells */
    }
    
    th, td {
      border: 1px solid #ddd;  /* Adds borders to the table cells */
      padding: 8px;            /* Adds padding to the table cells */
      text-align: center;      /* Centers the content in the cells */
    }

    th {
      background-color: #f2f2f2; /* Adds a light gray background to table headers */
      color: black;              /* Text color for the headers */
    }

    tr:nth-child(even) {
      background-color: #f9f9f9;  /* Adds alternating row color for even rows */
    }

    tr:hover {
      background-color: #ddd;  /* Highlights row on hover */
    }

    caption {
      font-size: 1.5em;        /* Caption font size */
      margin: 10px 0;          /* Margin around the caption */
      text-align: center;      /* Centers the caption */
    }