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

:root, :root[data-theme="white"] {
    --main-color: white;
    --main-textColor: black;
    --container-border-top: 1px solid #e6e6e6;
    --secondary-color: #f5f5f5;
    --main-search-placeholder: #A6A6A6;
    --category-clothes: #F5F5F5;
    --category-food: #FFC5BF;
    --category-stocks: #FFEEC5;
    --category-wc: #F7E8FF;
    --menubar-bars: #ffffff80;
    --menubar-active: #679F73;
    --main-svg-color: black;
    --button-green: #679F73;
    --button-secondary: #e0f3e4;
    --search-resultCard: #F3F3F3;
    --counter-color: #00000063;
    --closeroute-svg: #dcdbdb;
    --routePicker-background: #F5F5F5;
    --routePicker-border: 1px solid #dddddd;
    --map-background: #fff;
    --map-highlighted-fill: rgb(112 181 127 / 33%);
    --map-highlighted-stroke: rgb(31 171 117);
}
:root[data-theme="dark"] {
    --main-color: #171614;
    --main-textColor: white;
    --container-border-top: 1px solid #333333;
    --secondary-color: #222222;
    --main-search-placeholder: #A6A6A6;
    --category-clothes: #2A2A2A;
    --category-food: #7C2E26;
    --category-stocks: #756130;
    --category-wc: #6A3684;
    --menubar-bars: #00000075;
    --menubar-active: #487752;
    --main-svg-color: white;
    --button-green: #487752;
    --button-secondary: #263327;
    --search-resultCard: #222222;
    --counter-color: #6b6a69;
    --closeroute-svg: #3f3f3f;
    --routePicker-background: #222222;
    --routePicker-border: 1px solid #383838;
    --map-background: #211f1f;
    --map-highlighted-fill: rgb(124 255 152 / 33%);
    --map-highlighted-stroke: rgb(42 233 159);
}

@media (prefers-color-scheme: dark) {
    :root {
        --main-color: #171614;
        --main-textColor: white;
        --container-border-top: 1px solid #333333;
        --secondary-color: #222222;
        --main-search-placeholder: #A6A6A6;
        --category-clothes: #2A2A2A;
        --category-food: #7C2E26;
        --category-stocks: #756130;
        --category-wc: #6A3684;
        --menubar-bars: #00000075;
        --menubar-active: #487752;
        --main-svg-color: white;
        --button-green: #487752;
        --button-secondary: #263327;
        --search-resultCard: #222222;
        --counter-color: #6b6a69;
        --closeroute-svg: #3f3f3f;
        --routePicker-background: #222222;
        --routePicker-border: 1px solid #383838;
        --map-background: #211f1f;
        --map-highlighted-fill: rgb(124 255 152 / 33%);
        --map-highlighted-stroke: rgb(42 233 159);
    }
}

html, body {
    height: 100%;
    margin: 0;
}
.mapContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--map-background);
}
.mapContainer > svg {
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
}
.storeLabel {
    font-size: 10px;
    pointer-events: none;
}

body {
    display: flex;
    justify-content: center;
    background-color: black;
    font-family: "Manrope", sans-serif;
}
p {
    margin: 0;
}

.ui {
    width: 100%;
    max-width: 500px;
    background-color: var(--map-background);
    position: relative;
}
.ui .bottomContainer {
    position: absolute;
    bottom: 0;
    width: 100%;
}
.ui .bottomContainer .statusBar {
    border-top: 1px solid #e6e6e6;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: repeat(4, 4fr);
    background: white;
}
.ui .bottomContainer .statusBar .button {
    display: flex;
    justify-content: center;
}
.ui .bottomContainer .statusBar .button svg path {
    fill: #999999;
}
.ui .bottomContainer .statusBar .button[selected] svg path {
    fill: #000000;
}
.ui .bottomContainer .contents {
    padding-top: 16px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 14px;
    border-top: var(--container-border-top);
    border-radius: 32px 32px 0px 0px;
    background-color: var(--main-color);
    transition: 0.2s;
}
.ui .bottomContainer .contents .centred {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}
.ui .bottomContainer .contents .centred .line {
    width: 35px;
    height: 4px;
    background-color: #DDDDDD;
    border-radius: 10px;
}
.ui .bottomContainer .contents .input-container {
    padding: 13px 20px;
    background-color: var(--secondary-color);
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 9px;
}
.ui .bottomContainer .contents .input-container svg path {
    fill: #a6a6a6;
}
.ui .bottomContainer .contents .input-container input {
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    background: none;
    border: none;
    outline: none;
    font-size: 16px;
    width: 100%;
}
.ui .bottomContainer .contents .input-container p {
    color: var(--main-search-placeholder);
    font-weight: 500;
}
.ui .bottomContainer .contents .input-container input::placeholder {
    color: #a6a6a6;
}
.ui .bottomContainer .contents .suggestions {
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 190px;
    width: 100%;
}
.ui .bottomContainer .contents .suggestions .card {
    display: flex;
    justify-content: center;
    border-radius: 16px;
}
.ui .bottomContainer .contents .suggestions .card .flexed {
    display: flex;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 8px;
}
.ui .bottomContainer .contents .suggestions .card .flexed p {
    font-size: 13px;
    font-weight: 500;
    color: var(--main-textColor);
}

.ui .searchContainer {
    position: absolute;
    width: 100%;
    height: calc(100% - 44px);
    background: var(--main-color);
    bottom: 0;
    z-index: 1;
    border-top: var(--container-border-top);
    border-radius: 32px 32px 0px 0px;
    display: none;
}
.ui .searchContainer[active] {
    display: block;
}
.ui .searchContainer .contents {
    padding: 16px;
    height: calc(100% - 44px);
}
.ui .searchContainer .contents .searchInput {
    display: flex;
    gap: 8px;
}
.ui .searchContainer .contents .searchInput .clearInputBtn[disabled] {
    display: none;
}
.ui .searchContainer .contents .searchInput .input {
    display: flex;
    align-items: center;
    padding: 13px 16px;
    background-color: var(--secondary-color);
    color: var(--main-textColor);
    border-radius: 16px;
    gap: 9px;
    width: 100%;
    transition: 0.2s;
    height: 22px;
}
.ui .searchContainer .contents .searchInput .input:focus-within {
    border: 1px solid #679F73;
    height: 20px;
}
.ui .searchContainer .contents .searchInput .input svg:first-child, .ui .searchContainer .contents .searchInput .input svg:last-child {
    flex-shrink: 0;
}
.ui .searchContainer .contents .searchInput .input input {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--main-textColor);
    font-family: 'Manrope';
    font-size: 15px;
    outline: none;
    font-weight: 500;
}
.ui .searchContainer .contents .searchInput .filters {
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--secondary-color);
    border-radius: 16px;
    flex-shrink: 0;
}
.ui .searchContainer .contents .bottom {
    position: absolute;
    width: calc(100% - 32px);
    bottom: 16px;
}
.ui .searchContainer .filters.searchButton {
    transition: 0.2s;
}
.ui .searchContainer .filters.searchButton:not([disabled]) {
    background-color: var(--button-green) !important;
}
.ui .searchContainer .filters.searchButton[disabled] {
    background-color: var(--secondary-color);
    pointer-events: none;
}
.ui .searchContainer .contents .bottom .button-blue {
    border: none;
    font-family: 'Manrope';
    font-weight: 500;
    font-size: 16px;
    background: var(--button-green);
    color: white;
    width: 100%;
    padding-top: 12px;
    padding-bottom: 14px;
    border-radius: 16px;
    transition: 0.2s;
}
.ui .searchContainer .contents .bottom .button-blue[disabled] {
    background: #cbcbcb;
}

.ui .searchContainer .contents .searchResults {
    display: none;
}
.ui .searchContainer .contents .searchResults[active] {
    display: block;
}

.ui .searchContainer .contents .searchResults {
    margin-top: 15px;
    overflow-y: auto;
    height: calc(100% - 105px);
    border-radius: 16px;
}
.ui .searchContainer .contents .searchResults .card, #stockList .card {
    padding: 12px 10px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    transition: 0.2s;
    background: var(--secondary-color);
    position: relative;
}

.ui .searchContainer .contents .searchResults .card img, #stockList .card img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}
.ui .searchContainer .contents .searchResults .card p.name, #stockList .card p.name {
    font-size: 16px;
    color: var(--main-textColor);
}
.ui .searchContainer .contents .searchResults .card p.description, #stockList .card p.description {
    color: #999999;
    font-size: 12px;
}

.ui .searchContainer .searchSuggestions {
    display: none;
}
.ui .searchContainer .searchSuggestions[active] {
    display: block;
}
.ui .searchContainer .suggestions {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}
.ui .searchContainer .searchSuggestions .banner {
    width: 100%;
    margin-top: 16px;
    margin-bottom: 32px;
}
.ui .searchContainer .suggestions .card {
    display: flex;
    justify-content: center;
    border-radius: 16px;
}
.ui .searchContainer .suggestions .card .flexed {
    display: flex;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 8px;
}
.ui .searchContainer .suggestions .card .flexed p {
    font-size: 13px;
    font-weight: 500;
    color: var(--main-textColor);
}


.ui .bottomContainer .contents #home,
.ui .bottomContainer .contents #shopsResult,
.ui .bottomContainer .contents #shopInfo,
.ui .bottomContainer .contents #routeInfo,
.ui .bottomContainer .contents #shopsCategoryResult,
.ui .bottomContainer .contents #parkingInfo,
.ui .bottomContainer .contents #parkingPicked,
.ui .bottomContainer .contents #parkingSelected,
.ui .bottomContainer .contents #routeInfoParking,
.ui .bottomContainer .contents #stockShopsResult,
.ui .bottomContainer .contents #settings,
.ui .bottomContainer .contents #stockPost {
    display: none;
}

.ui .bottomContainer .contents #shopsResult {
    margin-top: 0px;
}
.ui .bottomContainer .contents #shopsResult p.resultInfo, .ui .bottomContainer .contents #stockShopsResult p.resultInfo {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
    color: var(--main-textColor);
}
.ui .bottomContainer .contents #shopsResult p.resultInfo count, .ui .bottomContainer .contents #stockShopsResult p.resultInfo count, #routeETA, #parkingRouteETA {
    color: var(--counter-color);
    margin-left: 8px;
}
#routeETA, #parkingRouteETA {
    font-weight: 500;
    font-size: 18px;
}

.ui .bottomContainer .contents[screen="home"] #home {
    display: block;
}
.ui .bottomContainer .contents[screen="shopsResult"] #shopsResult {
    display: block;
}
.ui .bottomContainer .contents[screen="shopInfo"] #shopInfo {
    display: block;
}
.ui .bottomContainer .contents[screen="routeInfo"] #routeInfo {
    display: block;
}
.ui .bottomContainer .contents[screen="shopsCategoryResult"] #shopsCategoryResult {
    display: block;
}
.ui .bottomContainer .contents[screen="parkingInfo"] #parkingInfo {
    display: block;
}
.ui .bottomContainer .contents[screen="parkingPicked"] #parkingPicked {
    display: block;
}
.ui .bottomContainer .contents[screen="parkingSelected"] #parkingSelected {
    display: block;
}
.ui .bottomContainer .contents[screen="routeInfoParking"] #routeInfoParking {
    display: block;
}
.ui .bottomContainer .contents[screen="stockShopsResult"] #stockShopsResult {
    display: block;
}
.ui .bottomContainer .contents[screen="settings"] #settings {
    display: block;
}
.ui .bottomContainer .contents[screen="stockPost"] #stockPost {
    display: block;
}

.ui .bottomContainer .contents #shopsResult .card, .ui .bottomContainer .contents #shopsCategoryResult .card, .ui .bottomContainer .contents #stockShopsResult .card {
    padding: 10px 10px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    transition: 0.2s;
    background-color: var(--search-resultCard);
    position: relative;
}
.ui .bottomContainer .contents #shopsResult .card:last-child, .ui .bottomContainer .contents #shopsCategoryResult .card:last-child, .ui .bottomContainer .contents #stockShopsResult .card:last-child {
    margin-bottom: 4px;
}
.ui .bottomContainer .contents #shopsResult .card img, .ui .bottomContainer .contents #shopsCategoryResult .card img, .ui .bottomContainer .contents #stockShopsResult .card img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}
.ui .bottomContainer .contents #shopsResult .card p.name, .ui .bottomContainer .contents #shopsCategoryResult .card p.name, .ui .bottomContainer .contents #stockShopsResult .card p.name {
    font-size: 16px;
    color: var(--main-textColor);
}
.ui .bottomContainer .contents #shopsResult .card p.description, .ui .bottomContainer .contents #shopsCategoryResult .card p.description, .ui .bottomContainer .contents #stockShopsResult .card p.description {
    color: #999999;
    font-size: 12px;
}
.ui .bottomContainer .contents #shopsResult .card button.route, .ui .bottomContainer .contents #shopsCategoryResult .card button.route, .ui .bottomContainer .contents #stockShopsResult .card button.route {
    padding: 10px 20px;
    margin-left: auto;
    border: none;
    background: var(--button-green);
    color: white;
    font-family: 'Manrope';
    font-size: 12px;
    border-radius: 12px;
}

.ui .bottomContainer .contents #shopInfo .linear, .ui .bottomContainer .contents #shopsCategoryResult .linear {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    position: relative;
}
.ui .bottomContainer .contents #shopInfo .linear p.openClose {
    margin-left: auto;
    font-size: 14px;
    color: #999999;
    font-weight: 400;
}
.ui .bottomContainer .contents #shopInfo .linear .back, .ui .bottomContainer .contents #shopsCategoryResult .linear .back,  .ui .bottomContainer .contents #shopsResult .back, #stockShopsResult .back, #parkingInfo .back, #parkingPicked .back, #settings .back {
    position: absolute;
    bottom: 64px;
    gap: 2px;
    padding: 4px 10px;
    font-size: 14px !important;
    font-weight: 600;
    -webkit-box-shadow: 0px 0px 14px 0px rgba(34, 60, 80, 0.2);
    -moz-box-shadow: 0px 0px 14px 0px rgba(34, 60, 80, 0.2);
    box-shadow: 0px 0px 14px 0px rgba(34, 60, 80, 0.2);
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--main-color);
    color: var(--main-textColor);
    transition: 0.2s;
}
#settings .back {
    bottom: 168px;
}
#parkingInfo .back {
    bottom: 67px;
}
#parkingInfo .back p {
    font-size: 14px;
}
#parkingPicked .back {
    bottom: 132px;
}
#parkingInfo, #parkingPicked, #settings {
    position: relative;
}
.ui .bottomContainer .contents #shopsCategoryResult .linear .back {
    bottom: 52px;
}
.ui .bottomContainer .contents #shopsResult .linear .back, #stockShopsResult .linear .back {
    bottom: 48px;
}
.ui .bottomContainer .contents #shopsResult .linear, #stockShopsResult .linear {
    position: relative;
}
.ui .bottomContainer .contents #shopInfo .linear img.shopPic {
    width: 38px;
    height: 38px;
    object-fit: contain;
}
.ui .bottomContainer .contents #shopInfo .linear p.name {
    font-size: 16px;
    font-weight: 600;
    max-width: 100%;
    white-space: nowrap;
    color: var(--main-textColor);
    display: flex;
    align-items: center;
}
.ui .bottomContainer .contents #shopInfo .linear p.description {
    font-size: 12px;
    color: var(--main-textColor);
}
.ui .bottomContainer .contents #shopInfo img.banner {
    width: 100%;
    margin-bottom: 16px;
    border-radius: 16px;
    height: 192px;
    object-fit: cover;
}
.ui .bottomContainer .contents #shopInfo button.route {
    border: none;
    font-family: 'Manrope';
    font-weight: 500;
    font-size: 16px;
    background: var(--button-green);
    color: white;
    width: 100%;
    padding-top: 12px;
    padding-bottom: 14px;
    border-radius: 16px;
}

.ui .bottomContainer .contents #routeInfo .linear, #routeInfoParking .linear, #home .linear {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}
.ui .bottomContainer .contents #routeInfo .linear p.title, #routeInfoParking .linear p.title, #home .linear p.title {
    font-size: 20px;
    font-weight: 600;
    width: 100%;
    color: var(--main-textColor);
}
.ui .bottomContainer .contents #routeInfo .routePicker, #routeInfoParking .routePicker, #home .routePicker {
    background-color: var(--routePicker-background);
    border-radius: 16px;
    border: var(--routePicker-border);
    padding: 7px 16px;
    margin-bottom: 8px;
}
.ui .bottomContainer .contents #routeInfo .routePicker p.locate, #routeInfoParking .routePicker p.locate, #home .routePicker p.locate {
    font-size: 14px;
    font-weight: 500;
    color: #acacac;
}
.ui .bottomContainer .contents #routeInfo .routePicker p.name, #routeInfoParking .routePicker p.name, #home .routePicker p.name {
    font-size: 16px;
    font-weight: 500;
    color: var(--main-textColor);
}

.routePicker:last-child {
    margin-bottom: 4px !important;
}

/*
#home .routePicker p.locate {
    font-size: 16px;
}
#home .routePicker p.name {
    display: none;
}
#home .routePicker {
    padding: 11px 16px;
}
.ui .bottomContainer .contents .suggestions {
    bottom: 168px;
}
*/


#shopsResult .shop-info {
    width: 100%;
    flex: 2;
}

.searchBubble {
    position: absolute;
    padding: 16px;
    padding-top: 40px;
    display: flex;
    z-index: 2;
    right: 0;
}
.searchBubble .searchPointB {
    padding: 17px 16px;
    -webkit-box-shadow: 0px 0px 14px 0px rgba(34, 60, 80, 0.2);
    -moz-box-shadow: 0px 0px 14px 0px rgba(34, 60, 80, 0.2);
    box-shadow: 0px 0px 14px 0px rgba(34, 60, 80, 0.2);
    border-radius: 16px;
    background: white;
    display: flex;
    align-items: center;
}

.catName {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 100px;
    background: #4F6CEB;
    color: white;
    font-weight: 500;
    font-size: 12px;
}
#listShops {
    max-height: 208px;
    overflow-y: auto;
    border-radius: 16px;
}
#home {
    position: relative;
}

.suggestions .card[category="clothes"] {
    background: var(--category-clothes);
}
.suggestions .card[category="food"] {
    background: var(--category-food);
}
.suggestions .card[category="stocks"] {
    background: var(--category-stocks);
}
.suggestions .card[category="wc"] {
    background: var(--category-wc);
}

.menuBar {
    margin-left: auto;
}
.menuBar .bars {
    transition: 0.2s;
}
.menuBar .bars, .menuBar .buttons div {
    width: 44px;
    height: 44px;
    background: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    border-radius: 12px;
}
.menuBar .buttons div[active] {
    background: var(--button-green);
}
.menuBar .buttons div svg path {
    fill: black;
}
.menuBar .buttons div[active] svg path {
    fill: white;
}
.menuBar .buttons {
    display: none;
}

.menuBar .bars .close {
    display: none;
}
.menuBar.active .bars .close {
    display: block;
}
.menuBar.active .bars .open {
    display: none;
}
.menuBar.active .bars {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: var(--menubar-bars);
}
.menuBar.active .buttons {
    display: block;
}


.ui .searchContainer .contents .bottom .button-blue {
    display: none;
}
.ui .searchContainer .contents .bottom[searchable] .button-blue {
    display: block;
}
.ui .searchContainer .contents .bottom[searchable] .suggestions {
    display: none;
}

.recFilters {
    display: flex;
    gap: 4px;
    margin-top: 16px;
}
.recFilters div {
    background-color: var(--secondary-color);
    color: var(--main-textColor);
    border-radius: 16px;
    padding: 8px;
    font-size: 12px;
    font-weight: 500;
}

#searchBubble[hidden], [hiddenelem] {
    display: none !important;
}
#shopsResult .scrollable, #stockShopsResult .scrollable {
    overflow-y: auto;
    max-height: 250px;
    border-radius: 16px;
}

#basemap {
    transition: 0.2s;
}
#basemap[opacity] {
    opacity: 0.5;
}
.mapContainer {
    transition: 0.2s;
}
.mapContainer[hide] {
    opacity: 0;
}



polygon[data-parking-id="segment1"] {
    fill: rgba(79, 108, 235, 0.5);
    stroke: #4F6CEB;
    stroke-width: 2;
}
polygon[data-parking-id="segment2"] {
    fill: rgba(236, 83, 67, 0.5);
    stroke: #EC5343;
    stroke-width: 2;
}
polygon[data-parking-id="segment3"] {
    fill: rgba(209, 202, 74, 0.5);
    stroke: #D1CA4A;
    stroke-width: 2;
}
polygon[data-parking-id="segment4"] {
    fill: rgba(103, 159, 115, 0.5);
    stroke: #679F73;
    stroke-width: 2;
}
polygon[data-parking-id="segment5"] {
    fill: rgba(232, 161, 47, 0.5);
    stroke: #E8A12F;
    stroke-width: 2;
}
polygon[data-parking-id="segment6"] {
    fill: rgba(103, 159, 115, 0.5);
    stroke: #679F73;
    stroke-width: 2;
}
polygon[data-parking-id="segment7"] {
    fill: rgba(209, 202, 74, 0.5);
    stroke: #D1CA4A;
    stroke-width: 2;
}

polygon[data-parking-id="segment1"].selected {
    fill: #4F6CEB;
}
polygon[data-parking-id="segment2"].selected {
    fill: #EC5343;
}
polygon[data-parking-id="segment3"].selected {
    fill: #D1CA4A;
}
polygon[data-parking-id="segment4"].selected {
    fill: #679F73;
}
polygon[data-parking-id="segment5"].selected {
    fill: #E8A12F;
}
polygon[data-parking-id="segment6"].selected {
    fill: #679F73;
}
polygon[data-parking-id="segment7"].selected {
    fill: #D1CA4A;
}

#parking .parking-segment-icon {
    display: none;
    pointer-events: none;
}
#parking .parking-segment-group.selected .parking-segment-icon {
    display: block;
}

#parkingInfo p {
    font-size: 16px;
    font-weight: 600;
    color: var(--main-textColor);
}

#parkingPicked p.title, #parkingSelected p.title {
    color: #999999;
    font-size: 14px;
    font-weight: 600;
}
#parkingPicked p#parkingSegment, #parkingSelected p#parkingSegmentSelected {
    font-size: 16px;
    font-weight: 600;
    color: var(--main-textColor);
}
#parkingPicked button, #parkingSelected button {
    margin-top: 24px;
    border: none;
    font-family: 'Manrope';
    font-weight: 500;
    font-size: 14px;
    background: var(--button-green);
    color: white;
    width: 100%;
    padding-top: 11px;
    padding-bottom: 13px;
    border-radius: 16px;
    transition: 0.2s;
}
#parkingSelected button.secondary {
    background: var(--button-secondary);
    color: #599266;
    margin-top: 6px;
}

.menuBar .bars svg path, .menuBar .buttons div svg path {
    fill: var(--main-svg-color);
}
.ui .searchContainer .contents .searchInput .filters svg path {
    fill: var(--main-svg-color);
}
.input svg path {
    fill: var(--main-svg-color);
}
.back svg path {
    fill: var(--main-svg-color);
}
.close svg path {
    fill: var(--closeroute-svg);
}

button.route[disabled] {
    background: var(--button-secondary) !important;
    color: #599266 !important;
}

#settings p.title {
    font-size: 20px;
    font-weight: 600;
    width: 100%;
    color: var(--main-textColor);
}
#settings .picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--routePicker-background);
    border-radius: 16px;
    margin-top: 16px;
}
#settings .picker:last-child {
    margin-bottom: 8px;
}
#settings .picker .element {
    text-align: center;
    padding: 10px 15px;
    color: var(--main-textColor);
    font-weight: 400;
    border-radius: 16px;
    transition: 0.2s;
}
#settings .picker .element[active] {
    background-color: var(--button-green);
    font-weight: 500;
    color: white;
}

.stockIcon {
    width: 16px !important;
    height: 16px !important;
    position: absolute;
}
.stockIcon.searchActive {
    top: 35px;
    left: 32px;
}
.stockIcon.searchResultsActive {
    top: 33px;
    left: 32px;
}
.stockIconInfo {
    margin-left: 4px;
    width: 16px;
    height: 16px;
}

.ui .bottomContainer .contents #shopInfo .linear {
    margin-bottom: 32px;
}

g#rooms .storeItem polygon {
    fill: var(--map-highlighted-fill);
    stroke: var(--map-highlighted-stroke);
}
g#rooms .wcItem polygon {
    fill: rgb(148 107 255 / 33%);
    stroke: rgb(144 104 253);
}

img.negatived {
    filter: invert(1);
}

.shop-info:first-child {
    margin-left: 4px;
}

p.suggestionLabel {
    margin-top: 15px;
    text-align: center;
    color: #737373;
    font-weight: 500;
}
.searchSuggestions {
    height: calc(100% - 105px);
}
.searchResults.displayed {
    display: block !important;
    height: calc(100% - 35px) !important;
    overflow-y: auto;
}

#stockPost {
    height: 90vh;
    overflow-y: auto;
}
#stockPost .title {
    display: flex;
}
#stockPost .title p.title {
    font-size: 20px;
    font-weight: 600;
    color: var(--main-textColor);
}
#stockPost .title p.date {
    font-size: 14px;
    font-weight: 500;
    color: var(--main-search-placeholder);
    margin-top: 2px;
}
#stockPost .title .closeStock {
    margin-left: auto;
}
#stockPost img.banner {
    width: 100%;
    border-radius: 16px;
}
#stockPost p.stockText {
    margin-top: 24px;
    font-size: 16px;
    font-weight: 500;
    color: var(--main-textColor);
}

#stockPost .shopsStock p.title {
    margin-top: 20px;
    font-size: 16px;
    font-weight: 500;
    color: var(--main-textColor);
    margin-bottom: 12px;
}

#routeInfo .carouselWrap { 
    overflow: hidden;
    width: 100%;
    position: relative;
    touch-action: pan-y;
    box-sizing: border-box;
    padding-left: 0px !important;
}
#routeInfo .stockSuggestions {
    bottom: 214px;
    position: absolute;
    width: 100%;
    left: 0;
}
#routeInfo #stocksCarusel {
    display: flex;
    will-change: transform;
    user-select: none;
    -webkit-user-select: none;
    width: 100%;
}
.stockSuggestions .stockBanner {
    background-color: #FF5050;
    border-radius: 20px;
    padding: 18px 24px;
}
.stockSuggestions .stockBanner p {
    font-size: 20px;
    font-weight: 500;
    color: white;
}
.closeStock svg path {
    fill: var(--main-svg-color);
}
.menuBar[hidden] {
    display: none;
}

#stockPost .postBody {
    margin-top: 16px;
    height: calc(100% - 66px);
    overflow-y: auto;
}