/* LAYOUT */
.osm-wrapper {
    display:flex;
    flex-wrap:wrap;
    width:100%;
    max-width:100%;
    background:#fff;
    border-radius:6px;
    box-sizing:border-box;
}
.osm-wrapper * { box-sizing:border-box;font-size:14px; }

/* LEFT PANEL */
.osm-left {
    width:356px;
    flex:1 1 300px;
    min-width:280px;
    padding:20px;
}

.osm-title {
    margin:0 0 10px;
    font-size: 40px;
    line-height: 44px;
    font-family: "EB Garamond", Georgia, serif;
    color:#263F47;
}

.osm-desc { 
    font-size:1rem;
    color:#7a7a7a;
    margin-bottom:20px; 
    font-family:"Roboto";
}

.osm-label { 
    margin-top:18px;
    margin-bottom:6px;
    display:block;
    font-weight:600;
    font-size:14px; 
    color:#284149; 
    direction: ltr;
    line-height: 1.7;
    white-space: initial; 
}

.ListSearch{
    border-right:1px solid #e2e6ea;
    overflow-y:auto;
    max-height:405px;
}
#osm_list_results::-webkit-scrollbar-thumb {
    background: red !important; /* green thumb */
    border-radius: 10px;
}

/* INPUT */
.osm-input-group { position:relative; }
.osm-input {
    width:100%;
    padding: 6px 12px;
    padding-right:36px;
    border:1px solid #969696;
    border-radius:6px;
    font-size:14px;
}
.osm-input-icon {
    position:absolute;
    right:10px;
    top:9px;
    font-size:17px;
    color:#777;
}

/* SLIDER */
.osm-label-slider{ color:#284149; }
#osm_radius_value{ font-weight:700; }

/* .osm-slider-wrap { margin: 10px 0 20px; } */

/* RANGE SLIDER TRACK */
.osm-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 4px;
    background: linear-gradient(
        to right,
        #2d6f6f 0%,
        #2d6f6f var(--val, 60%),
        #d9e4e4 var(--val, 60%),
        #d9e4e4 100%
    );
    outline: none;
    cursor: pointer;
}

/* THUMB */
.osm-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 26px;
    height: 26px;                                                  
    background: #55acaa;
    border-radius: 50%;
    border: 2px solid #2d6f6f;
    cursor: pointer;
}
.osm-slider::-moz-range-thumb {
    width: 26px;
    height: 26px;
    background: #55acaa;
    border-radius: 50%;
    border: 2px solid #2d6f6f;
    cursor: pointer;
}

.osm-scale {
    display: flex;
    justify-content: space-between;
/*     margin-top: 6px; */
    padding: 0 5px;
    font-size: 12px;
    color: #444;
}

/* BUTTONS */
.osm-button {
    width:100%;
    padding:9px;
    font-size:16px;
    border:1px solid #336766 !important;
    border-radius:6px;
    margin-top:15px;
    cursor:pointer;
    background:#55acaa !important;
    color:#fff;
}
.osm-button:hover { background:#237468; }

.osm-reset {
    color:#55acaa;
    cursor:pointer;
}

/* MAP */
.osm-map-area { flex:2 1 320px; min-width:280px; }
#osm_map { width:100%;height:750px; }

/* RESULT LIST */
.osm-results{
	padding: 14px 0 0 0 ;
}

.osm-item {
    padding: 0px 0 5px 0 ;
}
.osm-title-list {
    font-size: 16px;
    font-weight: 600;
    color: #808285;
    margin-bottom: 8px;
}

.osm-row { 
	display:flex;
	align-items:center;
}

.osm-icon {
    font-size: 16px;
    color: #2b6b6b;
    margin-right: 6px;
	line-height:2px !important;
}

.osm-text{
    font-size: 13px !important;
    color: #263f47 !important;
    font-style: italic !important;
	line-height:26px !important;
}
.osm-zip-link{
	text-decoration:none !important;
	color:#263f47 !important;
}

/* Leaflet Popup */
.leaflet-popup-content-wrapper {
    background: #55acaa !important;
    border-radius: 1px !important;
    width: 350px !important;
    max-width: 350px !important;
    padding: 0 !important;
    overflow: hidden !important;
}
.leaflet-popup-content {
    margin: 0 !important;
    padding: 8px 20px !important;
    width: 100% !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600;
}
.leaflet-popup-close-button {
    color: #fff !important;
    font-size: 22px !important;
    margin: 8px !important;
}

.leaflet-popup.leaflet-zoom-animated {
    left: -180px !important;
}

/* Distance Badge */
.osm-badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    line-height: 1;
    vertical-align: baseline;
    white-space: nowrap;
    text-align: center;
    background-color: #55acaa;
    border-radius: 10px;
}

/*Osm Search suggations address */
.osm-suggestions {
    position: absolute;
    background: #fff;
    width: 100%;
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-top: none;
    z-index: 9999;
    display: none;
}

.osm-suggestion-item {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
	display: flex;
    border-bottom: 1px solid #eee;
}

.osm-suggestion-title {
	font-size: 15px;
    font-weight: normal;
    color: #000000;
	line-height: 1.7;
	display: flex;
    justify-content: space-between;
}

.osm-suggestion-address {
    font-size: 11px;
    color: #2d2d2d;
	line-height: 1.7;
}

.osm-suggestion-item:hover {
    background: #f7f7f7;
}

.osm-suggestion-left-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.osm-suggestion-content {
    flex: 1;
}
.search-nearby{
	font-weight: normal;
    font-size: 12px;
	color:#000;
}
.ListSearch::-webkit-scrollbar {
    width: 8px;
}

.ListSearch::-webkit-scrollbar-track {
    background: #d8efeb;
    border-radius: 10px;
}

.ListSearch::-webkit-scrollbar-thumb {
    background: #0a875a;
    border-radius: 10px;
}

.ListSearch::-webkit-scrollbar-thumb:hover {
    background: #066746;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
    .osm-wrapper { flex-direction:column; }

    /* .osm-left stops being its own box on mobile so its children (title,
       search box, slider, button...) become direct flex items alongside the
       map — that's what lets the map be inserted right after the Search
       button instead of only ever being fully above or fully below the
       whole sidebar. */
    .osm-left { display:contents; }
    .osm-title { order:1; }
    .osm-desc { order:2; }
    .osm-label { order:3; }
    .osm-input-group { order:4; }
    #osm_warning { order:5; }
    label.osm-slider-wrap { order:6; }
    div.osm-slider-wrap { order:7; }
    .osm-button { order:8; }
    .osm-reset { order:9; }
    .osm-map-area { order:10; }
    .ListSearch { order:11; }

    .osm-map-area { width:100%; flex-basis:auto; margin-top:16px; }
    .ListSearch { border-right:none; border-bottom:1px solid #e2e6ea; max-height:405px; }
    #osm_map { height:420px; }
}

@media (max-width: 480px) {
    .osm-title { font-size:28px; line-height:32px; }
    .leaflet-popup-content-wrapper { width:260px !important; max-width:80vw !important; }
    .leaflet-popup.leaflet-zoom-animated { left:-130px !important; }
}