#forceSaveBtn {
    background-color: #4CAF50; /* Green background */
    color: white; /* White text */
    border: none; /* No border */
    padding: 10px 20px; /* Padding around the text */
    text-align: center; /* Centered text */
    text-decoration: none; /* No underline */
    display: inline-block; /* Allow setting dimensions */
    font-size: 16px; /* Text size */
    margin: 4px 2px; /* Some margin */
    cursor: pointer; /* Pointer cursor on hover */
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s; /* Smooth background color change */
}

#forceSaveBtn:disabled {
    background-color: #cccccc; /* Grayed out when disabled */
    cursor: not-allowed; /* Not-allowed cursor when disabled */
}

.send-quote-btn {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    margin: 10px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.send-quote-btn:hover {
        background-color: #45a049; /* Slightly darker green on hover */
    }
.add-new-tier-btn {
    background-color: #4CAF50; /* Green */
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}
/* Styling for options */
#milesoptionsSelect option {
    padding: 8px;
    background-color: white;
    border-bottom: 1px solid #ddd; /* Subtle separators for options */
}
body {
    font-family: 'Roboto', sans-serif;
}
.color-block {
    position: relative; /* Adjust as needed */
    z-index: 1; /* Adjust as needed */
    width: 20px;
    height: 20px;
    border-radius: 3px;
    cursor: pointer;
}


.tier-color-picker {
    height: 40px; /* Height of the color picker */
    border: none; /* Optionally remove the border */
    cursor: pointer; /* Change cursor to indicate it's clickable */
}
.container {
    display: flex;
    justify-content: space-between;
}

.controls-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #f5f5f5; /* Example background color */
    border-bottom: 1px solid #ddd; /* Example bottom border */
}

#map {
    position: relative;
    margin-top: 0;
    padding-top: 0;
    height: 720px;
    width: calc(70% - 20px);
} 

.form-container {
    width: 30%;
    padding: 0px;
    box-sizing: border-box;
}

/* Additional styles */
.editable-title {
    cursor: pointer;
    font-size: 24px;
    margin-bottom: 20px;
}

.slider-container {
    /* Keeps slider container to the left */
    width: 200px;
}


/* Optional: additional styling for the label and slider */
.slider-container label {
    margin: 0; /* Removes default margin */
    /* Add other styling as needed */
}

.slider-container input[type="range"] {
    /* Add styling for the slider */
}
#settingsForm {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

#settingsForm label,
#settingsForm input {
    margin-bottom: 10px;
    display: block;
}

#settingsForm {
    display: none; /* Initially hidden */
    flex-basis: 35%; /* Adjust width of the form */
    margin-right: 20px; /* Space between form and map */
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f5f5f5;
}

#settingsForm label,
#settingsForm input {
    margin-bottom: 10px;
    display: block;
}

#settingsForm input {
    width: 95%; /* Adjust input width */
}

#opacitySlider {
width: 100%;
display: inline;
}
/*
.tier-price {
    display: flex; /* Use flexbox for layout */
  /*  align-items: center; /* Align items vertically */
   /* margin-bottom: 10px; /* Space between each tier option */
/*}*/


.tier-price label {
    display: block;
}

.tier-price input {
    width: 100%;
    padding: 5px;
    margin-top: 5px;
}


.color-block {
    width: 20px; /* Width of the color block */
    height: 20px; /* Height of the color block */
    border: 1px solid #000; /* Border to make the color block more visible */
    margin-right: 10px; /* Space between color block and the next element */
}

.tier-price {
    box-sizing: border-box;
    padding: 10px;
    margin: 10px 0;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tier-price span {
    word-wrap: break-word;
}

.tier-price strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%; /* Adjust as needed */
}

#mapSearch {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
    background: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    display: block;
}
.hint-box {
    /* Adjusts the width as needed, and visibility */
    flex-grow: 1;
    display: block; /* Or flex, depending on your content */
    padding: 0 20px; /* Add padding for some spacing from the slider and buttons */
}
.button-group {
    /* Aligns buttons to the right */
    display: flex;
    gap: 10px; /* Adds space between buttons */
}
#searchInput {
    position: absolute;
    top: 18px; /* Adjust this value to increase/decrease the padding from the top */
    left: 200px; /* Adjust this value to set the padding from the left side */
    width: 200px;
    height: 28px;
    padding: 5px;
    z-index: 1000; /* Ensure it appears above other elements */
    background-color: white; /* Optional: to make sure the input has a visible background */
    border: 1px solid #ccc; /* Optional: to give the input a border */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional: to give the input a shadow */
}
#optionsContainer { 
    position: absolute;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    z-index: 5;
    overflow-y: auto; /* Allows scrolling for long lists */
    width: calc(30% - 40px);
    max-height: 400px; /* Set a maximum height for scrolling */
    padding: 20px; /* Add some padding */
}

table {
    width: 100%;
    border-collapse: collapse;
}

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

th {
    background-color: #f2f2f2;
}



.what3wordscontainer {
    display: flex;
    align-items: center; /* Vertically center the content */
    justify-content: center; /* Horizontally center the content */
    text-align: center; /* Center the text within the div */
}

.what3words-icon {
    width: 24px; /* Adjust size as needed */
    height: 24px; /* Adjust size as needed */
    margin-right: 8px; /* Space between icon and text */
}

#what3wordsselect {
    font-size: 16px; /* Adjust font size as needed */
}


#what3wordsText {
    font-size: 16px; /* Adjust font size as needed */
}
.tier-price {
    text-align: left;
 /*   white-space: nowrap; /* Prevents text wrapping */
 /*   overflow: hidden;
/*    text-overflow: ellipsis; /* Adds an ellipsis for overflowed text */
    margin-bottom: 5px;
}

.editable-price {
    flex-grow: 1; /* Allow the price field to take up available space */
    margin-right: 10px; /* Space between the price field and the color input */
    padding: 5px; /* Padding for the editable price */
    border: 1px solid #ddd; /* Border for the editable price */
    min-width: 100px; /* Minimum width */
}

.options-container {
    margin-top: 20px;
    padding: 10px;
    border-radius: 4px;
}

.option-item {
    margin-bottom: 10px;
    padding: 5px;
}

.btn {
    padding: 10px; /* General padding */
    margin: 4px 2px; /* General margin */
    border: none; /* Most buttons have no border */
    border-radius: 5px; /* Rounded corners for all buttons */
    background-color: #4CAF50; /* Default green background */
    color: white; /* White text for all buttons */
    text-align: center; /* Centered text */
    cursor: pointer; /* Pointer on hover */
    font-family: 'Roboto', sans-serif; /* Consistent font */
    font-size: 16px; /* Consistent font size */
    display: inline-block; /* Allows setting dimensions */
    transition: background-color 0.3s; /* Smooth color transition */
}

/* Disabled state for buttons */
.btn:disabled {
    background-color: #cccccc; /* Grayed out */
    cursor: not-allowed; /* Not-allowed cursor */
}

/* Specific style adjustments for different buttons or contexts */
#milesoptionsSelect, #tierSelect {
    padding: 8px 12px;
    border: 1px solid #ccc;
    background-color: white;
    color: black; /* Text color for select options */
    width: 100%; /* Full width for select elements */
}

/* Applying base button style to .add-new-tier-btn and .submit-btn as well */
.add-new-tier-btn, .submit-btn {
    width: 100%; /* Full width for these buttons */
}

.btn:hover {
    background-color: #45a049; /* Darker green on hover */
}