.radius-container {
    visibility: hidden; /* Hide the container initially */
}

/*
.version {
	position: absolute;
	top: 10px;
	left: 10px;
	font-size: 10px;
	color: #555;
}
*/

.version {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 10px;
    color: #555;
    background-color: #f0f0f0;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.street-view {
    position: absolute;
    top: 70px; /* Adjust according to your desired placement within the form */
    right: 0; /* Position the box to the right relative to the form */
    margin-right: 50px;
    font-size: 10px;
    color: #000;
    background-color: #f0f0f0;
/*    padding: 150px 200px; */
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    
    /* Make it responsive */
    max-width: 100%; /* Ensure it doesn't overflow the container */
    overflow: auto; /* Add scrollbars if content overflows */
    max-height: 600px; /* Limit the height for scrollability */
    box-sizing: border-box; /* Ensure padding and borders are included in width */
}



/* Center the box vertically on the screen and align it left */
.abs-view {
    margin-left: 50px;
    width: 600px;
    height: 450px;
    border: 1px solid #d9d1d1;
    background-color: #f0f0f0;
    position: absolute;
    left: 0;
    top: 24.3%;
    transform: translateY(-50%);
    padding: 2px;
    box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
}

.abs-view h2 {
    text-align: center;
    font-size: 18px;
    margin-bottom: 10px; /* Add space between heading and content */
    font-weight: bold;
}

.abs-view p {
    display: flex;
    justify-content: space-between; /* This creates space between the label and value */
    margin: 5px 0; /* Add spacing between each text line */
    font-size: 16px; /* Adjust the font size */
    text-align: left; /* Align text to the left */
    text-indent: 20px;
    padding-top: 10px;
}

/* Optional: Style the span elements to bold or highlight the values */
.abs-view span {
    font-weight: bold;
    text-align: right; /* Right-align the span (values) */
    width: 50%; /* Adjust as needed for spacing */
    margin-right: 20px;
}


.sortable {
    cursor: pointer;
    position: relative;
}
.sortable::after {
    content: ' \25B2\25BC';  /* Unicode for up and down arrows */
    position: absolute;
    right: 0;
}
.sorted-asc::after {
    content: ' \25B2';  /* Unicode for up arrow */
}
.sorted-desc::after {
    content: ' \25BC';  /* Unicode for down arrow */
}

.copy-button {
    position: inherit;
    float: right;
/*    right: px;
    top: 200px;
    padding: 5px 10px; */
    background-color: #007bff;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 3px;
}

.map-button {
    position: relative;
    float: left;
    margin-left: 10px;  /* Adjust margin as needed */
    background-color: #007bff;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 3px;
    padding: 5px 10px;  /* Add padding for better button size */
    font-size: 14px;  /* Adjust font size if needed */
}

.copy-text {
    position: absolute;
    right: 10px;
    top: 10px;
    padding: 5px 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 3px;
}

.info-label {
    position: inherit;
    float: left;
/*    right: px;
    top: 200px;
    padding: 5px 10px; */
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 3px;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevents horizontal scrolling */
 /*   background: url('images/sydney-background.png') no-repeat center center fixed; */ 
    position: relative;    
    background-color: #e6f7ff; /* Soft blue background color */
    font-family: Arial, sans-serif;  
}

body::before {
    position: absolute;
    background: rgba(0, 0, 0, 0.9); /* 80% transparency */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.content {
    position: relative;
    z-index: 2; /* Ensure content is above the overlay */
    color: white;
    text-align: center;
    font-size: 24px;
}

h1 {
    text-align: center;
    margin-top: 10px;
    font-size: 1.5em;
    color: #016ABC;
}

p {
    text-align: center;
    font-size: 16px;
}

.btn-search {
    width: 180px;
    height: 50px;
    background: #B9DDDF;
    color: #000;
    border: 1px solid #eee;
    border-radius: 10px;
    margin: 0 30px; /* Adds space between the buttons */
    box-shadow: 5px 5px 5px #eee;
    text-shadow: none;
}

.btn-search:hover {
    background: #177e44;
    color: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 5px 5px 5px #eee;
    text-shadow: none;
}

.btn-clear {
    width: 180px;
    height: 50px;
    background: #B9DFFF;
    color: #000;
    border: 1px solid #eee;
    border-radius: 10px;
    margin: 0 30px; /* Adds space between the buttons */
    box-shadow: 5px 5px 5px #eee;
    text-shadow: none;
}

.btn-clear:hover {
    background: #016ABC;
    color: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 5px 5px 5px #eee;
    text-shadow: none;
}


#custom-labels {
    margin-right: 10px;
    white-space: nowrap;
    line-height: 2;
    margin-left: 5px;
}




.hidden {
    display: none;
}

.form-container {
    font-family: sans-serif;
    font-size: 14px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 15px;
    column-gap: 40px;
    max-width: 900px;
    margin: 0 auto;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    padding: 20px;
    padding-left: 125px;
    border-radius: 5px;
    text-align: left;
    align-items: center; /* Center items vertically */
}

.search-selection-box, .output-selection-box {
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 8px;
    background-color: #f9f9f9;
}

.output-selection-box {
    margin-top: 40px; /* Adds a distinct gap between the two sections */
}

.form-item-triple {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}





.button-container {
    grid-column: 1 / -1; /* Span all columns */
    display: flex;
    justify-content: flex-start; /* Align to the left */
    padding-top: 10px;
    padding-left: 150px;
    padding-right: 10px
}

@media (max-width: 768px) {
    .form-container {
        grid-template-columns: 1fr; /* Stack columns vertically on smaller screens */
        margin-left: 0; /* Ensure it starts from the left */
        padding-left: 10px; /* Adjust padding to your needs */
        padding-right: 10px; /* Adjust padding to your needs */        
    }
    .button-container {
        grid-template-columns: 1fr; /* Stack columns vertically on smaller screens */
        margin-left: 0; /* Ensure it starts from the left */
        padding-left: 0px; /* Adjust padding to your needs */
        padding-right: 0px; /* Adjust padding to your needs */       
    }    
    .btn-clear {
        margin: 0 0;     
    }
    .btn-search {
        margin: 0 10px;     
    }
}

input:focus {
    border-color: black;
    border-width: 1px;
    outline: none;
}

input:focus-visible {
    outline:1px solid black;
    outline-offset: -1px;
}

.form-input:focus {
    background: #ffffff;
}

.form-title {
    grid-column: span 3;
    font-size: 1.5em;
    margin-bottom: 5px;
}

.form-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.form-item-full {
    display: flex;
    flex-direction: column;
    grid-column: span 3;
}

.form-item-half {
    display: flex;
    flex-direction: column;
    width: 60%;
    align-items: flex-start;
}

.form-item.horizontal {
    flex-direction: row; /* Change to row to align items horizontally */
    align-items: center; /* Center items vertically */
    margin-top: 6px; /* Add space above the input field */
}


.custom-select {
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #ffffff;
    cursor: pointer;
    padding: 10px;
    padding-right: 30px; /* Add padding to the right for the arrow */
    width: 100%; /* Ensure it takes up the full width */
    box-sizing: border-box;
    position: relative; /* Needed to position the dropdown correctly */
    white-space: nowrap; /* Prevent text from breaking onto the next line */

}

.selected-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dropdown-arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg); /* Rotate the arrow by 45 degrees */
    font-size: 14px; /* Adjust the size of the arrow */
    color: #110f0f; /* Arrow color */
    font-weight: 900;
}

.dropdown-options {
    display: none;
    position: absolute; /* Position absolutely within the .form-item-selector */
    top: 100%; /* Position it directly below the select field */
    left: 5px;
    text-align: center;
    width: 100%; /* Match the width of the select field */
    background-color: #f5f2f2;
    
    border: 1px solid #ccc;
    border-radius: 3px;
    z-index: 1000; /* Ensure it appears above other content */
    box-shadow: 3px 3px 3px rgba(0.2, 0.2, 0.2, 0.2);
}

.dropdown-option {
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dropdown-option:hover {
    background-color: #d3d3d3; /* Customize hover color */
}

.map-overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 50vh; /* Full screen height */
    width: 100vw; /* Full screen width */
    background-color: rgba(0, 0, 0, 0.5); /* Optional background overlay */
/*    z-index: 1000; /* Ensure it's on top of other elements */
}

/* Style for the "Close Map" button */
.close-map-btn {
    background-color: #007BFF;  /* Blue background */
    color: white;               /* White text */
    border: none;               /* No border */
    padding: 10px 20px;         /* Padding for the button */
    font-size: 16px;            /* Larger font size for better readability */
    font-weight: bold;          /* Make the text bold */
    border-radius: 5px;         /* Rounded corners */
    cursor: pointer;            /* Pointer cursor on hover */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Slight shadow for visibility */
    transition: background-color 0.3s ease;   /* Smooth background color transition */

    /* Absolute positioning to float over the map */
    position: absolute;         /* Positioning the button over the map */
    top: 20px;                  /* Distance from the top */
    right: 20px;                /* Distance from the right */
    z-index: 1000;              /* Ensure the button stays above other elements */
    
    /* Safari/WebKit specific */
    -webkit-transition: background-color 0.3s ease;
    -webkit-appearance: none;
}

/* Hover effect for the button */
.close-map-btn:hover {
    background-color: #0056b3;  /* Darker blue on hover */
}

/* Style for the "Close All Info" button */
#close-info-btn {
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1000;
}



.gm-style .gm-style-iw {
   font-size: 13px;
   font-family: sans-serif;
   flex-direction: row;
   line-height: 1.2;
   align-items: center;
   border-radius: 6px;
   padding: 4px;
}



/* Introduce a gap after the radius selection that spans the entire row 
.form-item-gap {
    height: 1.5em; 
    grid-column: 1 / -1; 
}

*/

/* Adjust the output selection boxes */
.output-container {
    display: contents; /* Ensures the grid layout is inherited */
}

custom-hr {
    height: 4px;
    border: none;
    width: 85%;
    margin: 10px 0 0 50px;
    background-color: #c5c5c5;
}

.form-item-gap {
    height: 1.5em;
    grid-column: 1 / -1; 
    padding-bottom: 5px;
    padding-top: 20px;
    margin-left: 10%;
    font-size: 18px;
    font-weight: 500;
    margin: 0 0 0 5%;
    text-align: center;
    padding-right: 140px;
}






#exactSearch {
    vertical-align: middle; /* Align checkbox with text */
}

label[for="exactSearch"] {
    font-size: 0.9em; /* Half size of default font */
    white-space: nowrap; /* Prevent label from wrapping */
    cursor: pointer; /* Change cursor to pointer on hover */
    margin-right: 5px; /* Add space between label and checkbox */
    margin-top: 20px;
    position: relative; /* For tooltip positioning */
}

/* Tooltip styling */
label[for="exactSearch"]:hover::after {
    content: attr(data-tooltip);
    white-space: pre-line; /* Preserve whitespace and line breaks */
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    top: -40px; /* Adjust position above the label */
    left: 0;
    font-size: 0.8em;
    z-index: 1000;
}


/* Tooltip styling 
label[for="exactSearch"]:hover::after {
    content: attr(data-tooltip); /* Use the data-tooltip attribute as tooltip content
    white-space: pre-line; /* Preserve whitespace and line breaks
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    top: -25px; /* Position above the label
    left: 0;
    white-space: nowrap;
    font-size: 0.9em;
/*    z-index: 1000; 
}
*/

/* Hide spinners on input of type number */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield; /* Firefox */
    appearance: none; /* For standard compatibility */
}
  
.form-input {
    -webkit-appearance: none;
    appearance: none; /* For standard compatibility */
    width: 90%;
    max-width: 400px;

    /* Fix for Safari/ios fields */
    min-height: calc(0.9em + (0.8em *2) 0.6em);
    padding: 0.8em;
    font-size: 0.9em;
    font-family: sans-serif;
    outline: none;
    border: 1.5px solid #dddddd;
    border-radius: 5px;
    background: #ffffff;
    transition: background 0.5s, border-color 0.5s, color 0.5s;        
}  

.form-item label {
	width: 150px; /* Adjust width for better alignment */
	text-align: left;
	margin-right: 10px;
	margin-bottom: 6px;
	margin-left: 5px;
	white-space: nowrap; /* Prevent label text wrapping */
	position: relative; /* For tooltip */
}


.custom-item-selector {
    position: relative;
    width: 185px; /* Width of the select field */
    
}




.tooltip {
/*    visibility: hidden; */
	display: none; 
	position: absolute;
	z-index: 2;
	background-color: #333;
	color: #fff;
	text-align: left;
	border-radius: 8px;
	padding: 10px 15px 10px 15px;
	z-index: 1;
	bottom: 125%;
	left: 50%;
	margin-left: -75px;
	width: 300px;
	font-size: 14px;
	line-height: 1.5;
	white-space: normal;
}

.tooltip-text {
  background-color: #192733;

}

.tooltip::after {
  content: "";
  position: absolute;
/*   transform: rotate(45deg); */
  background-color: #192733;
  padding: 5px;
  z-index: 1;
}

label:hover .tooltip {
	display: block;
}















#top {
  top: -40px;
  left: -50%;
}

#top::after {
  top: 80%;
  left: 45%;
}

#bottom {
  top: 25px;
  left: -50%;
}

#bottom::after {
  top: -5%;
  left: 45%;
}

#left {
  top: -8px;
  right: 120%;
}

#left::after {
  top: 35%;
  left: 94%;
}

#right {
  top: -8px;
  left: 120%;
}

#right::after {
  top: 35%;
  left: -2%;
}

.hover-text {
  position: relative;
  display: inline-block;
  margin: 40px;
  font-family: Arial;
  text-align: center;
}

/* The Close Button 
.close {
    color: #aaa;
    position: absolute;
    right: 5px; 
    top: 0;
    font-size: 16px; 
    font-weight: bold;
    cursor: pointer;
}
*/

input#suburb, input#postcode {
    background-color: #edd4d45e; 
}

input#district, input#postcode {
    background-color: #edd4d45e; 
}

.form-row .form-group input#postcode {
    flex: 0 0 25%;
}

.form-row .form-group input#suburb {
    flex: 0 0 75%;
}

.form-group-wrapper {
    margin-left: 20px; /* Move elements to the left by 20px */
}


/*
.results-container {
    position: relative;
    margin-top: 20px;
}


.results-container {
    table-layout: fixed;
    max-width: 99%;
    margin: 5px auto;
    background-color: #fbfbfb;
    padding: 5px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow-x: auto;
}

*/

.results-container {
    max-width: 99%;
    margin: 5px auto;
    background-color: #fbfbfb;
    padding: 5px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow-x: auto;
}

.results-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.copy-button, .map-button {
    padding: 8px 15px;  /* Increase padding for better button size */
    font-size: 14px;  /* Standardize font size */
    background-color: #007bff;  /* Standard button color */
    color: white;  /* Button text color */
    border: 1px solid #007bff;  /* Button border color */
    border-radius: 5px;  /* Rounded corners */
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease;  /* Smooth hover effect */
    height: 38px;  /* Ensure consistent button height */
    line-height: 20px;  /* Vertical alignment of button text */
}

.copy-button:hover, .map-button:hover {
    background-color: #0056b3;  /* Darken button on hover */
}

.info-label {
    padding: 0 10px;  /* Remove vertical padding to use line-height for centering */
    font-size: 14px;  /* Match button font size */
    color: #333;  /* Text color */
    background-color: #e9ecef;  /* Light gray background */
    border-radius: 3px;  /* Slightly rounded corners */
    border: 1px solid #ccc;  /* Light border to define edges */
    text-align: left;
    margin: 0 10px;  /* Small margin between elements */
    white-space: nowrap;  /* Prevent text wrapping */
    flex-shrink: 0;  /* Prevent the label from shrinking */
    height: 38px;  /* Match the button height */
    line-height: 38px;  /* Center text vertically to match button height */
}



.results-container th, .results-container td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.results-container th {
    background-color: #f4f4f4;
}


.copy-button, .map-button, .info-label {
    margin: 0 10px;  /* Add space between buttons and label */
}


.map-button, .copy-button {
    flex-shrink: 0;  /* Prevent buttons from shrinking */
}











table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 16px; /* Increase font size for output results */
    font-family: Arial, sans-serif; /* Use Arial font */
}


th, td {
    border: 1px solid #ccc;
    padding: 5px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

/* Add alternating row colors */
tbody tr:nth-child(odd) {
    background-color: #f9f9f9; /* Light grey */
}

tbody tr:nth-child(even) {
    background-color: #fff; /* White */
}

.results-container .col-property-id {
    width: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Add or adjust your existing column width styles */
.results-container .col-district-code { width: 12px; }
.results-container .col-property-name { width: 40px; }
.results-container .col-property-id { width: 20px; }
.results-container .col-street-unit-number { width: 15px; }
.results-container .col-street-number { width: 15px; }
.results-container .col-street-name { width: 200px; }
.results-container .col-suburb { width: 150px; }
.results-container .col-postcode { width: 20px; }
.results-container .col-size-metres { width: 40px; }
.results-container .col-contract-date { width: 150px; }
.results-container .col-settlement-date { width: 150px; }
.results-container .col-purchase-price-calc { width: 120px; }
.results-container .col-zoning { width: 20px; }
.results-container .col-dwelling-type { width: 100px; }
.results-container .col-legal-description { width: 100px; }

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 2; /* Higher than other elements */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    pointer-events: none; /* Allow click-through */
    background-color: transparent; /* No background color */
}

/* Modal content */
.modal-content {
    background-color: #ccffcc; /* Light green background */
    padding: 3px; /* Reduced padding */
    margin: auto; /* Automatically center */
    position: fixed; /* Fixed positioning relative to the viewport */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust position to true center */
    width: 200px; /* Set width to 200px */
    height: 40px; /* Set height to 50px */
    border: 1px solid #0044cc; /* Solid blue border */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); /* Adding some shadow */
    border-radius: 10px; /* Slightly rounded corners */
    pointer-events: all; /* Make the content itself interactable */
    text-align: center; /* Center the text */
    color: #333333; /* Dark gray text color */
    font-weight: bold; /* Make the text bold */
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
}

/* Red text for the message */
.modal-message {
    color: #afdfb4;
    font-size: 14px; /* Smaller font size to fit the compact design */
    margin: 0; /* No margin to maximize space */
    line-height: 10px; /* Vertically center the text within the box */
}

/* Style for loading image */
img {
    vertical-align: middle; /* Align image vertically in line with text */
    height: 100%; /* Full height to match parent */
}

#suburb-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #ffffff;
/*    border: 1px solid #ccc; */
    max-height: 150px;
    overflow-y: auto;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
    z-index: 1000; /* Ensure the suggestions appear above other elements */
}

#suburb-suggestions div {
    padding: 10px;
    cursor: pointer;
}

#suburb-suggestions div:hover {
    background-color: #f2f2f2;
}

#district-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #ffffff;
/*    border: 1px solid #ccc; */
    max-height: 150px;
    overflow-y: auto;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* Ensure the suggestions appear above other elements */
}

#district-suggestions div {
    padding: 10px;
    cursor: pointer;
}

#district-suggestions div:hover {
    background-color: #f2f2f2;
}