@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

/*body {
 font-family: 'Roboto', sans-serif;
 padding: 20px;
}*/

.branch-locator #map {
 margin-top: 20px;
 width: 100%;
}
#map {
    margin-top: 20px;
    width: 100%;
   }
.branch-locator #filters label {
 display: block;
 margin: 0 0;
}
#filters label {
    display: block;
    margin: 0 0;
   }
.branch-locator #info {
 scrollbar-width: thin;
 scrollbar-color: #888 transparent;
 scroll-behavior: smooth;
 padding-right: 1rem;
}
#info {
    scrollbar-width: thin;
    scrollbar-color: #888 transparent;
    scroll-behavior: smooth;
    padding-right: 1rem;
   }
.branch-locator #info::-webkit-scrollbar {
 width: 12px;
}
.branch-locator #info::-webkit-scrollbar-thumb {
 background: #888;
}
.branch-locator #info::-webkit-scrollbar-thumb:hover {
 background: #555;
}
.btn-link {
    font-weight: 400;
    color: #00527A;
    text-decoration: none;
}
.btn-primary {
    color: #fff;
    background-color: #00527A;
    border-color: #00527A;
}
.branch-locator a[href^="tel:"] {
 color: blue !important;
 text-decoration: underline !important;
}
.branch-locator .leaflet-popup-content {
 margin: 3px 3px 3px 3px !important;
 line-height: 1.3;
 font-size: 13px;
 font-size: 1.08333em;
 min-height: 1px;
}
.leaflet-popup-content {
    margin: 3px 3px 3px 3px !important;
    line-height: 1.3;
    font-size: 13px;
    font-size: 1.08333em;
    min-height: 1px;
   }
.branch-locator .leaflet-popup-content-wrapper {
 padding: 1px;
 text-align: left;
 border-radius: 8px !important;
}
.branch-locator .branch-list {
 list-style-type: none; /* Removes the default bullet points */
 padding: 0;
}
.branch-locator .branch-list li {
 padding: 10px 0; /* Adds some vertical padding between items */
 background: url('https://www.viacu.org/contact/assets/img/branch-icon.svg') no-repeat left center; /* Use your branch icon as bullet points */
 background-size: 30px; /* Replace 40px with your desired size */
 padding-left: 50px; /* Provide enough padding to the left to accommodate the icon */
}
.branch-list {
    list-style-type: none; /* Removes the default bullet points */
    padding: 0;
}
.branch-list li {
    padding: 10px 0!important;
    background: url(https://www.viacu.org/contact/assets/img/branch-icon.svg) no-repeat left center!important;
    background-size: 30px!important;
    padding-left: 50px!important;
}
.branch-locator .branch-link {
 color: #333;
 text-decoration: underline;
}
.branch-locator .branch-link:hover {
 color: #007bff; /* Change link color when hovered */
 text-decoration: underline;
}
.branch-link {
    color: #333;
    text-decoration: underline;
}
.branch-link:hover {
    color: #007bff; /* Change link color when hovered */
    text-decoration: underline;
}
.branch-locator .leaflet-touch .leaflet-bar a {
 color: #000 !important;
 width: 30px;
 height: 30px;
 line-height: 30px;
}
.branch-locator .leaflet-control-locate a {
 font-size: 1.4em;
 cursor: pointer;
 color: #444;
 border: none; /* Added */
 background: none; /* Added */
}
.branch-locator .leaflet-control-locate a, .branch-locator .leaflet-control-locate a::before, .branch-locator .leaflet-control-locate a span {
 box-shadow: none !important;
 border: none !important;
 /* background: none !important;*/
 text-shadow: none !important;
 color: forestgreen !important;
}
.branch-locator /* Center the icon vertically */
.input-group-append {
 display: flex;
 align-items: center;
}
.branch-locator #search-button {
 width: 40px; /* Adjust the size and spacing of the search button */
}
.branch-locator .card { /* info panel styles  */
 background-color: #f9f9f9;
 color: #333;
 font-family: 'Roboto', sans-serif;
 box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
 border-radius: 5px;
}
.card { /* info panel styles  */
    background-color: #f9f9f9;
    color: #333;
    font-family: 'Roboto', sans-serif;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
    border-radius: 5px;
}
.branch-locator .card-header {
 cursor: pointer;
}
.branch-locator .card-body {
 background: linear-gradient(to bottom, #ffffff, #f2f2f2);
}
.card-body {
    background: linear-gradient(to bottom, #ffffff, #f2f2f2);
   }
.branch-locator .leaflet-container a.leaflet-popup-close-button {
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 font-weight: 400 !important;
 color: #212529 !important;
 cursor: pointer !important;
 background-color: rgba(248, 249, 250, 0.8) !important; /* light grey */
 border: 1px solid #dee2e6 !important; /* grey border */
 padding: .375rem .75rem !important;
 font-size: 1rem !important;
 line-height: 1.5 !important;
 border-radius: .25rem !important;
 transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
 box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important; /* Box shadow */
 width: auto !important; /* This allows the button to size based on its content */
 position: absolute !important; /* Position it relative to the nearest positioned ancestor */
 right: 0px !important; /* Position it 3px to the left of the right edge */
 top: 0px !important; /* Position it 3px above the bottom edge */
 height: 35px !important; /* Increase height */
}
.branch-locator .leaflet-container a.leaflet-popup-close-button:hover {
 color: #212529 !important;
 background-color: #e2e6ea !important;
 border-color: #dae0e5 !important;
}
.leaflet-container a.leaflet-popup-close-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 400 !important;
    color: #212529 !important;
    cursor: pointer !important;
    background-color: rgba(248, 249, 250, 0.8) !important; /* light grey */
    border: 1px solid #dee2e6 !important; /* grey border */
    padding: .375rem .75rem !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    border-radius: .25rem !important;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important; /* Box shadow */
    width: auto !important; /* This allows the button to size based on its content */
    position: absolute !important; /* Position it relative to the nearest positioned ancestor */
    right: 0px !important; /* Position it 3px to the left of the right edge */
    top: 0px !important; /* Position it 3px above the bottom edge */
    height: 35px !important; /* Increase height */
   }
.leaflet-container a.leaflet-popup-close-button:hover {
    color: #212529 !important;
    background-color: #e2e6ea !important;
    border-color: #dae0e5 !important;
   }
/* Add this CSS for hiding the branch photo on mobile */
@media (max-width: 768px) { /* Adjust the max-width to your desired breakpoint for mobile */
 .card-img-top.branch-photo {
  display: none;
 }
}
.branch-locator .input-group {
 position: relative;
}
.branch-locator #clearIcon {
 position: absolute;
 right: 45px; /* Adjust based on your design, considering the width of the search-button */
 top: 50%;
 transform: translateY(-50%);
 cursor: pointer;
 font-size: 16px;
 background-color: #e8e8e8;
 border-radius: 50%;
 padding: 4px;
 line-height: 1;
 z-index: 3;
 transition: background-color 0.3s;
}
.branch-locator #clearIcon:hover {
 background-color: #d6d6d6;
}
#clearIcon {
    position: absolute;
    right: 55px; /* Adjust based on your design, considering the width of the search-button */
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 28px;
    /* background-color: #e8e8e8; */
    /* border-radius: 50%; */
    padding: 4px;
    line-height: 1;
    z-index: 3;
    transition: background-color 0.3s;
   }
#clearIcon:hover {
    background-color: #d6d6d6;
    color: red;
   }
.directions-btn {
 color: #000 !important;
 background-color: #EFF2FC !important;
 border-color: #cfd8f6 !important;
 font-size: 0.725rem !important;
 font-family: 'Roboto', sans-serif !important;
 font-weight: 500 !important;
}
.directions-btn:hover {
 background-color: #c4d0f6 !important;
 border-color: #c4d0f6 !important;
}
.branch-locator .mt-n6 {
 margin-top: -3.5rem !important;
}
.branch-locator .mb-3 {
 margin-bottom: 1rem !important;
}
.branch-locator .shadow {
 -webkit-box-shadow: 0px 0px 40px rgba(29, 58, 83, 0.15) !important;
 box-shadow: 0px 0px 40px rgba(29, 58, 83, 0.15) !important;
}
.branch-locator .h-30px {
 height: 30px !important;
}
.branch-locator .rounded-1 {
 border-radius: 10px !important;
}
.branch-locator .rounded-2 {
 border-radius: 20%;
}
.rounded-1 {
 border-radius: 10px !important;
}
.rounded-2 {
 border-radius: 20%;
}
.branch-locator .nav-tabs .nav-link:hover {
 border-color: #ccc !important;
 background-color: #f5f5f5 !important;
}
.branch-locator .rounded-button {
 border-radius: 50%;
 background-color: #fff;
}
.branch-locator .rounded-button:hover {
 background-color: #6366F1;
 color: #fff;
}
.branch-locator .rotate-down {
 transform: rotate(-180deg);
 transition: transform 0.3s ease-in-out;
}
.rounded-button {
    border-radius: 50%;
    background-color: #fff;
   }
.rounded-button:hover {
    background-color: #6366F1;
    color: #fff;
   }
.rotate-down {
    transform: rotate(-180deg);
    transition: transform 0.3s ease-in-out;
   }
.branch-locator .leaflet-marker-icon {
 transition: transform 0.3s, opacity 0.3s;
}
.branch-locator .marker-added {
 opacity: 1; /* Set to fully opaque */
 transform: translateY(0); /* Reset any transform */
}
.branch-locator .marker-hovered {
 transform: translateY(-10px); /* Lifted position on hover */
}