table.dataTable td.dt-control::before {
    content: "expand_circle_down";
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 8px;  /* Adjust size as needed */
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
    color: #1b5180; /* Add this line to change the color */

  }
  
  table.dataTable tr.dt-hasChild td.dt-control:before {
    content: 'expand_circle_down'; /* Material expand circle down icon */
    transform: rotate(180deg); /* Rotate the icon when the row is expanded */
  }
  
  
  
  td.dt-control {
    text-align: center;
    cursor: pointer;
  }
  
  td.dt-control::before {
    content: '';
  }
  
  td.dt-control span.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-size: 1.2em;
    vertical-align: middle;
  }
  
  tr.shown td.dt-control span.material-symbols-outlined {
    transform: rotate(180deg); /* Rotate the icon when the row is expanded */
  }
  .material-icons-outlined::before {
    content: "expand_circle_down";
  }



  @media screen and (max-width: 767px) {
    .dataTables_wrapper.mobile-optimized {
      font-size: 5px; /* Adjust this value as needed */
    }
    
    .dataTables_wrapper.mobile-optimized th,
    .dataTables_wrapper.mobile-optimized td {
      padding: 5px; /* Reduce padding to save space */
    }
  }
  
  .dataTable td {
    padding-right: 1px; /* Adjust value as needed */
  }


  table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  background-color: rgba(0, 0, 0, 0.1) !important;
}


div.dataTables_filter {
  padding-bottom: 7px;
}

table.dataTable thead th {
  border: 0.5px solid #ddd; /*  Add a 1px solid border */
  border-top: 0.5px solid #ddd; /* Make the bottom border slightly thicker */
}


.two-column-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.column {
  flex: 1;
  padding: 2px
  ;
}

.column:first-child {
  flex: 0 0 33.33%; /* Left column takes 1/3 of the width */
}

.column:last-child {
  flex: 0 0 66.66%; /* Right column takes 2/3 of the width */
}

#titleContainer {
  margin-left: 20px; /* Adjust the left margin to shift it to the left */
}

#googleMapsLink {
  text-align: center;
  margin-top: 5px; /* Adjust this value to your preference */
}

/* Increase font size for table content */
table.dataTable td, 
table.dataTable th {
  font-size: 14px; /* Increased from default */
  line-height: 1.3;
  white-space: normal; /* Allow text to wrap */
  /* word-wrap: break-word; Break long words if needed */
  padding: 3px 2px; /* Reduced horizontal padding */
}

/* Reduce spacing between columns */
table.dataTable {
  border-collapse: collapse; /* Collapse borders to reduce spacing */
}

table.dataTable th, 
table.dataTable td {
  border-right: 1px solid #ddd; /* Thin border between columns */
}

/* Center all header titles and remove overflow/ellipsis */
table.dataTable thead th {
  text-align: center;
  white-space: normal; /* Allow text to wrap instead of using ellipsis */
  overflow: visible; /* Remove overflow hidden */
  text-overflow: clip; /* Remove ellipsis */
  padding: 4px 2px; /* Maintain some padding for readability */
}

/* Special styling for Price and Score headers to center the symbols */
table.dataTable thead th:nth-child(6) {
  padding-left: 6px; /* Add extra padding on the left to center the £ symbol */
}

table.dataTable thead th:nth-child(7) {
  padding-left: 6px; /* Add extra padding on the left to center the ★ symbol */
}

/* Responsive adjustments for mobile */
@media screen and (max-width: 767px) {
  table.dataTable td, 
  table.dataTable th {
    font-size: 11px; /* Slightly smaller on mobile but still readable */
    padding: 4px 1px; /* Reduced padding for mobile */
  }
  
  /* Ensure table fits on mobile without horizontal scrolling */
  .dataTables_wrapper {
    width: 100%;
    overflow-x: hidden; /* Prevent horizontal scrolling */
  }
  
  /* Adjust column widths for better mobile display */
  table.dataTable {
    width: 100% !important;
    table-layout: fixed; /* Fixed table layout for better control */
  }
  
  /* Make columns more compact on mobile */
  table.dataTable th, 
  table.dataTable td {
    overflow: visible; /* Remove overflow hidden */
    text-overflow: clip; /* Remove ellipsis */
  }
  
  
  /* Column 2 (Name) - fit 12 chars */
  table.dataTable th:nth-child(1), 
  table.dataTable td:nth-child(1) {
    width: 22%; /* Use percentage for responsive width */
    min-width: 60px;
  }
  
  /* Column 3 (Tags) - fit 5 chars */
  table.dataTable th:nth-child(2), 
  table.dataTable td:nth-child(2) {
    width: 15%; /* Use percentage for responsive width */
    min-width: 40px;
  }
  
  /* Column 4 (Where) - fit 8 chars */
  table.dataTable th:nth-child(3), 
  table.dataTable td:nth-child(3) {
    width: 20%; /* Use percentage for responsive width */
    min-width: 55px;
  }
  
  /* Column 5 (Been) - fit 6 chars (for date) */
  table.dataTable th:nth-child(4), 
  table.dataTable td:nth-child(4) {
    width: 14%; /* Use percentage for responsive width */
    min-width: 35px;
  }
  
  /* Column 6 (Price) - fit 4 chars */
  table.dataTable th:nth-child(5), 
  table.dataTable td:nth-child(5) {
    width: 10%; /* Use percentage for responsive width */
    min-width: 30px;
    text-align: center;
    padding: 4px 0px;
  }
  
  /* Column 7 (Score) - fit 3 chars */
  table.dataTable th:nth-child(6), 
  table.dataTable td:nth-child(6) {
    width: 10%; /* Use percentage for responsive width */
    min-width: 30px;
    text-align: center;
    padding: 4px 0px;
  }
  
  /* Ensure Score header displays the icon properly */
  table.dataTable thead th:nth-child(6) {
    font-size: 12px; /* Slightly larger to ensure icon is visible */
    padding: 4px 0px;
    min-width: 25px;
    padding-left: 6px; /* Add extra padding on the left to center the ★ symbol */
  }
  
  /* Ensure Price header displays the £ symbol properly */
  table.dataTable thead th:nth-child(5) {
    font-size: 12px; /* Slightly larger to ensure symbol is visible */
    padding: 4px 0px;
    min-width: 30px;
    padding-left: 6px; /* Add extra padding on the left to center the £ symbol */
  }
}

/* Desktop adjustments to ensure table fits on screen */
@media screen and (min-width: 768px) {
  .dataTables_wrapper {
    width: 100%;
    overflow-x: hidden; /* Prevent horizontal scrolling */
  }
  
  table.dataTable {
    width: 100% !important;
    table-layout: fixed; /* Fixed table layout for better control */
  }
  
  /* Make columns more compact on desktop */
  table.dataTable th, 
  table.dataTable td {
    overflow: visible; /* Remove overflow hidden */
    text-overflow: clip; /* Remove ellipsis */
  }
  
 
  
  /* Column 2 (Name) - fit 12 chars */
  table.dataTable th:nth-child(1), 
  table.dataTable td:nth-child(1) {
    width: 25%; /* Use percentage for responsive width */
  }
  
  /* Column 3 (Tags) - fit 5 chars */
  table.dataTable th:nth-child(2), 
  table.dataTable td:nth-child(2) {
    width: 15%; /* Use percentage for responsive width */
  }
  
  /* Column 4 (Where) - fit 8 chars */
  table.dataTable th:nth-child(3), 
  table.dataTable td:nth-child(3) {
    width: 20%; /* Use percentage for responsive width */
  }
  
  /* Column 5 (Been) - fit 6 chars (for date) */
  table.dataTable th:nth-child(4), 
  table.dataTable td:nth-child(4) {
    width: 15%; /* Use percentage for responsive width */
  }
  
  /* Column 6 (Price) - fit 4 chars */
  table.dataTable th:nth-child(5), 
  table.dataTable td:nth-child(5) {
    width: 10%; /* Use percentage for responsive width */
    text-align: center;
  }
  
  /* Column 7 (Score) - fit 3 chars */
  table.dataTable th:nth-child(6), 
  table.dataTable td:nth-child(6) {
    width: 10%; /* Use percentage for responsive width */
    text-align: center;
  }
  
  /* Ensure Score header displays the icon properly */
  table.dataTable thead th:nth-child(6) {
    font-size: 14px; /* Ensure icon is visible */
    padding: 4px 1px;
    padding-left: 6px; /* Add extra padding on the left to center the ★ symbol */
  }
  
  /* Ensure Price header displays the £ symbol properly */
  table.dataTable thead th:nth-child(5) {
    font-size: 14px; /* Ensure symbol is visible */
    padding: 4px 1px;
    padding-left: 6px; /* Add extra padding on the left to center the £ symbol */
  }
}

/* Prevent zoom on DataTables search input */
.dataTables_filter input {
  font-size: 16px !important; /* Prevents zoom on iOS */
  max-height: 100%;
  -webkit-text-size-adjust: 100%;
}