path {
    stroke: #fff;
    fill: #71948b !important;
    transition: fill .3s ease;
    transform-origin: center center;
}

.pds-location {
    fill: #134c3e !important;
}

.pds-location::after {
    content: '>';
    position: absolute;
    height: 100%;
    width: 100%;
    inset: 0;
}

.pds-location-dot {
    fill: #e8d3ac !important;
    stroke: rgba(0, 0, 0, 0);
    transition: all .3s ease;
    fill-opacity: 1;
    filter: drop-shadow(rgba(0, 0, 0, 0.09) 0px 32px 16px);
}

path.pds-location:hover {
    fill: #e8d3ac !important;
    cursor: pointer;
}

.pds-location:hover~circle {
    opacity: 0;
    visibility: hidden;
}

#pds-locations-map {
    display: block;
    width: 100%;
    height: 100%;
}

#details-box {
    opacity: 100%;
    border-radius: 8px;
    font-size: 24px;
    position: relative;
    color: white;
    font-family: "Poppins";
    background-color: rgba(0, 0, 0, 0);
    width: fit-content;
    transition: opacity .3s ease;
    z-index: 1;
}

.loc-panel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 15px !important;
    position: relative;
    transition: 150ms background-size ease-in;
    border: 1px solid #000000;
    border-radius: 15px;
    background-size: 500%;
    background-position-x: -3px;
    flex-direction: column; /* Stack the elements vertically */
}

.loc-panel:hover {
    background-size: 150%;
    background-color: rgb(3, 82, 62);
    color: white !important;
    font-family: 'Source Sans Pro Italic Bold', sans-serif;
    font-size: 20px !important;
}

.loc-panel:hover p:nth-of-type(1) {
    color: white !important;
    font-family: 'Source Sans Pro Italic Bold', sans-serif;
    font-size: 20px !important;
}

.loc-panel:hover .area-served,
.loc-panel:hover .serving,
.loc-panel:hover .phone-icon,
.loc-panel:hover .phone-number,
.loc-panel:hover .align-center {
    color: white !important;
    font-family: 'Source Sans Pro Italic', sans-serif;
    font-size: 16px;
}

.loc-panel:hover .phone-icon .owner {
    color: white !important;
    font-family: 'Source Sans Pro Italic', sans-serif;
    font-size: 16px !important;
}

.collapse .show{
    background-color: red;
}

.loc-panel:hover a {
    color: white !important;
    font-family: 'Source Sans Pro Italic', sans-serif;
    font-size: 16px;
    text-decoration: underline; /* Optional for hover effect */
}

.loc-panel::before {
    content: '';
    /* background-image: url('/images/location-pin.svg'); */
    height: 16px;
    width: 16px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(50%, -50%);
}

.loc-panel p {
    color: #0e1111;
    padding: 2px;
    margin-bottom: 0px !important;
    /* margin-left: 32px; */
}

.phone-icon-img {
    width: 16px;
    height: 16px;
    background-image: url('/assets/icons/telephone-fill.svg'); /* Default icon */
    background-size: cover;
    display: inline-block; /* Keeps it aligned inline with text */
}

/* Change icon on .loc-panel hover */
.loc-panel:hover .phone-icon-img {
    background-image: url('/assets/icons/telephone.svg'); /* Hover icon */
    filter: invert(1) brightness(2); 
}

#pds-map-modal-body {
    /* height: calc(100vh - 130px); */
    overflow-y: scroll;
    background: rgba(255, 255, 255, 0.825);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.map-container {
    text-align: center !important;
}

svg {
    max-width: 100% !important;
    height: auto !important;
}

/* State Border Styling */
.state-border {
    border: 2px solid #134c3e; /* Border around each state */
    border-radius: 8px;
    padding: 15px;
    background-color: #f9f9f9;
    transition: background-color 0.3s ease;
}

/* State hover effect */
.state-border:hover {
    background-color: #e8d3ac;
}

/* Location Border Styling */
.location-border {
    border: 1px solid #000000; /* Border around each location */
    border-radius: 15px;
    padding: 8px;
    margin-bottom: 8px;
    text-align: center; /* Centers the text inside the border */
    display: flex;
    flex-direction: column; /* Stack items vertically */
    justify-content: center; /* Centers vertically */
    align-items: center; /* Centers horizontally */
}

.state-city-border{
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}

.state-city-header{
    text-align: center;
    margin: 0;   
    border-radius: 4px;
}

/* Location hover effect */
.location-border:hover {
    background-color: rgb(97, 157, 77);
}

.state-select {
    width: 320px !important; 
    margin: 0 auto !important; 
    background-color: #134c3e !important;
     text-align: center !important;
     border: 0 !important;
     color: white !important; 
}

#locations-list {
    width: 300px; 
    margin: 0 auto;  
    border-color: #71948b; /* Match the border color of the dropdown */
    border-radius: 4px; /* Optional: similar rounding */
    padding: 8px; /* Add some padding */
    background-color: #ffffff; /* Match background color */
    transition: background-color 0.3s ease;
}

#locations-list ul {
    list-style-type: none;
    padding: 0;
}

#locations-list li {
    padding: 2px 0;
    border-bottom: 1px solid #71948b;
}

.state-list {
    display: flex;
    justify-content: center;  /* Centers horizontally */
    align-items: center;      /* Centers vertically */
    /* border: 1px solid black; */
    border-radius: 4px; /* Optional: similar rounding */
    width: 60%;               /* Set the container width (you can adjust the percentage) */
    max-width: 320px;          /* Optional: Limits the maximum width to 800px */
    margin: 0 auto;            /* Centers the container horizontally */
}

.pds-location-dot.highlight {
    fill: #134c3e !important; /* Change the fill color to highlight */
    stroke: #134c3e !important; /* Optional: change the stroke color */
}

.pds-location.highlight {
   fill: #e8d3ac !important; /* Change to the color or style you want */
    border: 2px solid #71948b; /* Optional: Add a border or other effect */
}

.hidden {
    display: none;
}

.bolder {
    font-weight: bolder;
    font-size: 20px;
}


.city-location {
    font-weight: bolder;
    font-size: 16px;
    
 }
 .location-info{
    margin-top: 0;
 }

 .area-served {
    font-size: 14px;        /* Adjust font size for area_served */
    color: #555;            /* Set a slightly lighter color for the area_served text */
    margin-top: 5px;        /* Space between location name and area_served */
}

.location-name {
    font-weight: bold;      /* Make the location name bold */
    font-size: 16px;        /* Adjust font size for location name */
}


.border-1px {
    border: 1px solid #000000;
  
}
.color-gray{
    background-color: #e7e4e4 !important; /* Ensure it overrides other background colors */
}

.modal-header-precision {
    background-color:rgb(3, 82, 62); /* Your desired color */
    color: white; /* Change the text color */
    padding: 15px; /* Add some padding */
    border-bottom: none; /* Remove the border */
    text-align: center; /* Center the text in the header */
    display: inline-grid !important;
}
/* .modal-header-precision .btn-close-state {
    position: absolute;
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
    padding: 0; 
} */
.modal-header-precision .btn-close-state {
    position: absolute;
    top: 10px;
    right: 0;
    transform: translateY(-50%);
    padding: 2px 5px;
    font-size: 1rem;
    border: none;
    cursor: pointer;
}

.modal-title {
    margin: 0; /* Remove default margin for better alignment */
    display: inline-block; /* Ensure the title is treated as inline block for centering */
    font-family: 'Work Sans', sans-serif;
    /* font-weight: 800; */
}

.underline {
    text-decoration: underline;
}

/* Custom dropdown styling */
.custom-dropdown {
    position: relative;
    width: 100%;
    
}

/* Style the select element */
.custom-dropdown select {
    width: 100%;
    /* padding-right: 40px; Add padding to make space for the arrow */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid white;
    border-radius: 5px;
    background-color: white;
    font-size: 16px;
    color: white;
    cursor: pointer;
    text-align-last: center;
}

/* Custom arrow for dropdown */
.custom-dropdown::after {
    content: '\25BC'; /* Unicode down arrow */
    position: absolute;
    right: 0; /* Position the arrow inside the select box */
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 20px;
    color: white;
    width: 40px;
    height: 45px;
    top: 25px;
}

/* Hover effect for the select element */
.custom-dropdown select:hover {
    border-color: #888;
}

.custom-dropdown select option {
    background-color: black; /* Set background color of the options to black */
    color: white; /* Set text color to white */
}
/* Custom dropdown styling */

.border-radius{
    border-radius: 15px;
}

.margin-0{
    margin: 0;
}

.font-italic{
    font-style: italic; 
    font-weight: normal;
}

.area-served {
    margin-top: 5px; /* Add space between the name and area_served */
    font-size: 0.9em; /* Adjust the font size if needed */
    color: #000000; /* Optional: style the text */
}

.phone-number{
    color:#000000;
}

.font-sans-pro-bold{
    font-family: 'Source Sans Pro Bold', sans-serif;
    font-weight: 800;
}

.font-sans-pro{
    font-family: 'Source Sans Pro', sans-serif;
}

.font-sans-pro-italic{
    font-family: 'Source Sans Pro Italic', sans-serif;
    font-weight: normal;
}

.loc-panel.active-panel {
    background-color:rgb(3, 82, 62);
}

.loc-panel.active-panel * {
    color: white !important;
}

.loc-panel .phone-icon-img {
    background-image: url('/assets/icons/telephone.svg'); /* Hover icon */
    filter: invert(1) brightness(2); 
}