#searchbox { flex: 0 0 100%; } #searchbox>div { display: flex; width: 100%; border: none; background: none; } .search-button { border-radius: 0 !important; } .leaflet-container .leaflet-control-search { position: relative; float: left; background: #fff; color: #1978cf; border: 2px solid rgba(0, 0, 0, 0.2); background-clip: padding-box; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; background-color: rgba(255, 255, 255, 0.8); z-index: 1000; margin-left: 10px; margin-top: 10px; } .leaflet-control-search.search-exp { background: #fff; border: 2px solid rgba(0, 0, 0, 0.2); background-clip: padding-box; } .leaflet-control-search .search-input { display: block; flex: 1; width: auto; background: #fff; height: 22px; width: calc(100% - 30px); padding: 0 0 0 5px !important; margin: 0 !important; border: none !important; height: 30px !important; border-radius: 0 !important; max-width: none !important; } .leaflet-control-search.search-load .search-cancel { -webkit-animation: fa-spin 2s infinite linear; animation: fa-spin 2s infinite linear; font-size: smaller; } .leaflet-control-search.search-load .search-cancel:before { content: "\f110" !important; } .leaflet-control-search .search-cancel { display: block; width: 22px; height: 22px; position: absolute; right: 68px; margin: 6px 0; text-decoration: none; filter: alpha(opacity=80); opacity: 0.8; text-align: center; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: smaller; } .leaflet-control-search .search-cancel:before { content: "\f057"; } .leaflet-control-search .search-cancel:hover { filter: alpha(opacity=100); opacity: 1; } .leaflet-control-search .search-cancel span { display: none; font-size: 18px; line-height: 20px; color: #ccc; line-height: 30px; } .leaflet-control-search .search-cancel:hover span { color: #aaa; } .leaflet-control-search .search-button { display: block; float: left; width: 30px; height: 30px; font-family: "Font Awesome 5 Free"; font-weight: 900; border-radius: 4px; line-height: 30px; text-align: center; } .leaflet-control-search .search-button:before { content: "\f002"; } .leaflet-control-search .search-button:hover:before { content: "\f689"; } .leaflet-control-search .search-tooltip, .leaflet-control-search .search-alert { background-color: #fff; border-radius: 4px; left: 0; list-style: none; margin: 0; padding: 0; position: absolute; width: calc(100% - 60px); top: 110%; top: calc(100% + 6px); z-index: 1000; overflow: hidden; font-size: 15px; box-shadow: 0 0 10px 2px rgb(0 0 0 / 10%); } .leaflet-control-search .search-alert { line-height: 30px; text-align: center; } .leaflet-control-search .search-tooltip>li { cursor: default; display: block; padding: 6px 12px; color: #404040; } .leaflet-control-search .search-tooltip .search-tip-select, .leaflet-control-search .search-tooltip>li:hover { color: #404040; background-color: #f3f3f3; text-decoration: none; cursor: pointer; } .leaflet-control-search .search-tooltip>li>div { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .leaflet-control-search .search-suggestion-title { font-weight: bold; } .map-settings-search { display: flex; flex-direction: column; flex-wrap: nowrap; } .map-settings-search #locator { display: inline-block; border-left: 1px solid grey; width: 30px; height: 30px; line-height: 30px; text-align: center; cursor: pointer; } .maplabels { margin-top: 10px; }