@font-face { font-family: Gotham; src: url(/static/fonts/GothamPro.otf); }
@font-face { font-family: GothamBold; src: url(/static/fonts/GothamPro-Bold.otf); }
@font-face { font-family: BenderBlack; src: url(/static/fonts/Bender-Black.otf); }



.block_map { position: relative; display: block; width: 100vw; height: calc( 100vh - 64px ); }
.block_map #gMap { position: absolute; top: 64px; left: 0; right: 0; bottom: 0; display: block; }

.block_map.noheader { width: 1072px; height: 582px; border-radius: 24px; overflow: hidden; }
.block_map.noheader #gMap { top: 0; }

.block_map .header { display: flex; height: 48px; color: #fff; background: #4d84ff; padding: 8px 0; }
.block_map .header .container { display: flex; width: 1200px; height: 48px; margin: 0 auto; }

.block_map .header h1 { height: 48px; line-height: 48px; font-size: 20px; font-family: GothamBold, sans-serif; }
.block_map .header .shift { flex: 1; }

.block_map .mapControlButton { display: block; width: 120px; height: 48px; line-height: 48px; color: #000; background: #fff; font-size: 16px; text-align: center; border-radius: 16px; cursor: pointer; }
.block_map .mapControlButton.ml8 { margin-left: 8px; }
.block_map .mapControlButton.ml26 { margin-left: 26px; }

.block_map #mapControlFilter { display: block; width: 48px; height: 48px; background: #fff; border-radius: 16px; cursor: pointer; }
.block_map #mapControlFilter img { width: 24px; height: 24px; margin: 12px; }
.block_map #mapControlFilter .filters { display: none; }

.block_map #mapControlFilter.active { position: relative; display: inline-table; width: auto; height: auto; z-index: 100; box-shadow: 0 3px 16px #1340A529; }
.block_map #mapControlFilter.active .filters { display: block; padding: 0 4px 4px; }
.block_map #mapControlFilter.active .filters .filter_item { display: block; width: 72px; height: 28px; color: #999; text-align: center; font-size: 12px; line-height: 28px; margin: 10px auto; padding: 0 10px; border: 2px solid #ccc; border-radius: 14px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.block_map #mapControlFilter.active .filters .filter_item:first-child { margin-top: 0; }
.block_map #mapControlFilter.active .filters .filter_item.active { color: #4d84ff; border: 2px solid #4d84ff; }

.block_map #mapControlLocation { display: block; width: 48px; height: 48px; background: #fff; margin-left: 8px; border-radius: 16px; cursor: pointer; overflow: hidden; }
.block_map:has( #mapControlFilter.active ) #mapControlLocation { display: none; }
.block_map #mapControlLocation img { width: 24px; height: 24px; margin: 12px; }

.block_map #mapControlAddress { position: relative; display: inline-flex; width: 258px; height: 48px; margin-left: 37px; background: #fff; border-radius: 16px; overflow: hidden; }
.block_map #mapControlAddress .top { position: relative; display: flex; width: 184px; height: 48px; padding: 0 56px 0 18px; }
.block_map #mapControlAddress input { float: left; display: block; width: 100%; height: 48px; padding: 0; font-size: 12px; line-height: 48px; border: none; overflow: hidden; }
.block_map #mapControlAddress img { position: absolute; top: 12px; right: 16px; width: 24px; height: 24px; cursor: pointer; }

.block_map #mapControlBrands { position: relative; display: inline-flex; width: 258px; height: 48px; margin-left: 8px; background: #fff; border-radius: 16px; overflow: hidden; }
.block_map #mapControlBrands .top { position: relative; display: flex; width: 184px; height: 48px; padding: 0 56px 0 18px; }
.block_map #mapControlBrands .title { float: left; display: block; width: 100%; height: 48px; color: #999; padding: 0; font-size: 12px; line-height: 48px; border: none; overflow: hidden; }
.block_map #mapControlBrands .arrow { position: absolute; top: 12px; right: 16px; width: 24px; height: 24px; cursor: pointer; transform: rotate( 90deg ); }
.block_map #mapControlBrands .search_brand { display: none; }

.block_map #mapControlBrands.complete { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.block_map #mapControlBrands.selected .title { color: #000; }

.block_map #mapControlBrands.active { flex-direction: column; height: auto; z-index: 100; box-shadow: 0 3px 16px #1340A529; }
.block_map #mapControlBrands.active .title { display: none; }
.block_map #mapControlBrands.active .search_brand { float: left; display: block; width: 100%; height: 48px; padding: 0; font-size: 12px; line-height: 48px; border: none; overflow: hidden; }
.block_map #mapControlBrands.active .arrow { transform: rotate( -90deg ); }

.block_map.noheader #mapControlFilter { position: absolute; top: 24px; left: 24px; margin-left: unset; box-shadow: 0 3px 16px #1340A529; }
.block_map.noheader #mapControlLocation { position: absolute; top: 24px; left: 90px; margin-left: unset; box-shadow: 0 3px 16px #1340A529; }
.block_map.noheader #mapControlAddress { position: absolute; top: 24px; left: 156px; margin-left: unset; box-shadow: 0 3px 16px #1340A529; }

.block_map #mapControlFull { position: absolute; bottom: 24px; right: 24px; display: block; width: 250px; height: 20px; line-height: 20px; padding: 14px 0; color: #fff; background: #ff003e; text-align: center; border-radius: 16px; font-family: GothamBold, sans-serif; }

.autocomplete-suggestions { background: #fff; padding: 12px 56px 12px 18px; margin-left: -18px; overflow-y: auto; border: none; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; box-shadow: 0 16px 16px #1340A529; }
.autocomplete-suggestions .autocomplete-suggestion { font-size: 14px; line-height: 20px; margin: 12px 0 0; padding: 0; cursor: pointer; }
.autocomplete-suggestions .autocomplete-suggestion:first-child { margin-top: 0; }

@media all and ( max-width: 767px ) {
    .block_map .header .container {
        width: calc( 100vw - 2.24rem );
    }

    .block_map .header h1 { display: none; }
    .block_map .header .mapControlButton.ml26 { margin-left: 0; }
    .block_map .header #mapControlAddress { display: none; }
    .block_map .header #mapControlBrands { display: none; }
}


.block_map .station { position: absolute; top: 96px; right: 32px; display: block; width: 228px; height: 381px; padding: 72px 11px 11px; background: #fff; border-radius: 16px; z-index: 100; overflow: hidden; }
.block_map.noheader .station { top: 24px; right: 24px; bottom: 94px; height: unset; }

.block_map .station .station_header { position: absolute; top: 0; left: 0; right: 0; display: flex; height: 32px; color: #fff; background: #4d84ff; padding: 8px 16px; }
.block_map .station .station_header img { display: block; }
.block_map .station .station_header h1 { flex: 1; display: block; height: 32px; line-height: 32px; margin: 0 7px 0 23px; text-align: center; font-size: 20px; font-family: GothamBold, sans-serif; white-space: nowrap; overflow: hidden; }
.block_map .station .station_header .close { width: 16px; height: 16px; margin: 8px 0; cursor: pointer; }


.block_map .station .station_title { display: inline-flex; width: 100%; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #4d84ff; overflow: hidden; }
.block_map .station .station_title .logo { display: block; max-width: 100px; max-height: 50px; margin-right: 12px; overflow: hidden; }
.block_map .station .station_title .right { flex: 1; overflow: hidden; }

.block_map .station .station_title .brand { display: block; width: 100%; font-size: 20px; line-height: 24px; font-family: GothamBold, sans-serif; overflow: hidden; }
.block_map .station .station_title .address { display: block; width: 100%; margin-top: 10px; font-size: 12px; line-height: 16px; overflow: hidden; }

.block_map .station .item { display: flex; width: 100%; margin: 0 0 12px; }
.block_map .station .item .name { flex: 1; display: block; text-overflow: ellipsis; font-size: 12px; line-height: 16px; overflow: hidden; }
.block_map .station .item .price { font-size: 12px; line-height: 16px; margin-left: 17px; }


@media all and ( max-width: 767px ) {
    .block_map .station {
        top: unset;
        bottom: 1.12rem;
        right: 1.12rem;
        left: 1.12rem;
        width: unset;
        height: unset;
    }

    .block_map.noheader .station { top: 24px; right: 24px; bottom: 94px; left: unset; width: 250px; height: unset; }
}