/* New Style.css */

/* FONT-FACE */

@font-face {
    font-family: "roboto";
    src: url("/asset/font/Roboto-condensed-medium.woff2") format("woff2"),
        url("/asset/font/roboto-medium-webfont.woff") format("woff");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "roboto";
    src: url("/asset/font/roboto-regular-webfont.woff2") format("woff2"),
        url("/asset/font/roboto-regular-webfont.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "roboto-condensed-medium";
    src: url("/asset/font/Roboto-condensed-medium.woff2") format("woff2"),
        url("/asset/font/Roboto-condensed-medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
}

/* ROOT */

:root {
    --specialColor6: #003087;
    --specialColor7: #c5effc;
    --primaryFontRoboto: "roboto", sans-serif;
    --secondaryFontRobotoCondensed: "roboto-condensed-medium", sans-serif;
    --fontDefault: "roboto", sans-serif;
    --fontSpecial: "roboto-condensed-medium", sans-serif;
    --btnBorder: 2px solid var(--specialColor6);
    --fontWeightDefaultRegular: 400;
    --fontWeightMedium: 500;
    --mapViewWidth: 70%;
    --listViewWidth: 30%;
}

@media only screen and (min-width: 0px) and (max-width: 900px) {
    #root {
        margin-top: 80px;
    }
}

body * {
    scrollbar-color: initial;
    font-family: var(--primaryFontRoboto);
    font-weight: var(--fontWeightDefaultRegular);
}

button,
.btn {
    font-family: var(--secondaryFontRobotoCondensed);
}

/* HEADER */

.header .backBtn,
.header .homeBtn {
    font-family: var(--secondaryFontRobotoCondensed);
    font-size: 14px;
    text-transform: uppercase;
}

@media only screen and (min-width: 0px) and (max-width: 900px) {
    .header {
        height: 80px;
        position: fixed;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    }
}

/* TOP AREA */
.top-area {
    background-color: var(--specialColor7);
}

@media only screen and (min-width: 0px) and (max-width: 900px) {
    .top-area {
        min-height: 132px;
        align-items: center;
        padding-block: 10px;
        padding-inline: 7%;
        gap: 0 15px;
        position: relative;
        top: 0;
        z-index: auto;
    }
}

/* INPUT */
.rt-autocomplete-wrapper .input-container {
    border: none !important;
    border-bottom: var(--btnBorder) !important;
    background-color: #ffffff00 !important;
}

.autocompleteContainer
    .rt-autocomplete-wrapper
    .rt-autocomplete
    .input-container
    input,
.autocompleteContainer
    .rt-autocomplete-wrapper
    .rt-autocomplete
    .input-container
    .icon {
    background-color: var(--specialColor7) !important;
}

.rt-autocomplete-wrapper .rt-autocomplete .input-container .search-icon img {
    filter: brightness(0) saturate(100%) invert(14%) sepia(29%) saturate(5940%)
        hue-rotate(198deg) brightness(99%) contrast(101%);
    width: 20px !important;
    height: 20px !important;
}

.rt-autocomplete-wrapper
    .rt-autocomplete
    .input-container
    .icon[disabled].icon[disabled] {
    opacity: 1;
}

.rt-autocomplete-wrapper .input-container input::placeholder {
    color: var(--specialColor6);
    font-size: 16px;
}

.rt-autocomplete-wrapper .rt-autocomplete {
  border: none !important;
}

.rt-autocomplete-wrapper .rt-autocomplete.rt-autocomplete--open .predictions {
    z-index: 1;
}

/* BUTTON */

.top-area button.top-area-button.nearestBtn {
    background-color: var(--specialColor6);
    font-family: var(--secondaryFontRobotoCondensed);
}

.top-area button.top-area-button {
    border-radius: 100vmax;
}

.top-area button.top-area-button.filters {
    color: var(--specialColor6);
    border: var(--btnBorder);
    background-color: var(--specialColor7);
}
.top-area button.top-area-button.filters span {
    font-weight: var(--fontWeightMedium);
    font-size: var(--fontSizeDefault);
}
.top-area button.top-area-button span {
    font-weight: var(--fontWeightMedium);
    font-size: var(--fontSizeDefault);
    text-transform: lowercase;
}

.top-area button.top-area-button span::first-letter {
    text-transform: uppercase;
}

.top-area button.top-area-button span {
    text-transform: lowercase;
    font-family: var(--secondaryFontRobotoCondensed);
}

/* MAP AREA */

.map-area {
    background-color: var(--specialColor7);
}

/* LIST VIEW */

.list-view,
.directions-pane--visible .directions-pane {
    border-radius: 2em 0 0 0;
}

@media only screen and (min-width: 0px) and (max-width: 900px) {
    .list-view,
    .directions-pane--visible .directions-pane {
        border-radius: 0;
    }
}

@media only screen and (min-width: 0px) and (max-width: 1255px) {
    .store-card section .btn {
        width: 100%;
        margin: 7px 0;
    }
}

/* RADIUS BAR */

.list-view .radius-bar ul li.radius--selected {
    border-bottom: 4px solid var(--specialColor6);
}

.list-view .radius-bar ul li {
    color: var(--specialColor6);
}

.list-view .radius-bar span {
    color: var(--specialColor6);
}

/* STORE CARD */

.store-card {
    border-radius: 2em;
    border: var(--btnBorder);
    -webkit-box-shadow: none;
    box-shadow: none;
}

.store-card section span {
    color: var(--specialColor6);
}

.store-card section span a {
    color: var(--specialColor6);
}

.telefono img {
    display: none;
}

.telefono > a {
    display: flex;
    flex-direction: row;
    align-content: center;
}

.store-card section span.telefono > a::before {
    content: "";
    background-image: url(/asset/img/icon/tel-icon.svg);
    display: block;
    width: 9px;
    height: 21px;
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 8px;
    background-position: center;
}

.store-card section .inThisStore {
    border-top: 1px solid var(--specialColor6);
}

.store-card section .inThisStore .openSub {
    color: var(--specialColor6);
}

.openSub::after,
.store-card section .inThisStore .servicesList li img {
    filter: brightness(0) saturate(100%) invert(14%) sepia(29%) saturate(5940%)
        hue-rotate(198deg) brightness(99%) contrast(101%);
}

.store-card section .btn.infoBtn {
    background-color: var(--specialColor6);
    color: #fff;
    border: var(--btnBorder);
    text-transform: inherit;
    font-size: var(--fontSizeDefault);
    font-weight: var(--fontWeightMedium);
    text-align: center;
}

.store-card section .btn.indicazioniBtn {
    display: inline-flex;
    align-items: center;
    color: var(--specialColor6);
    color: var(--specialColor6);
    border: var(--btnBorder);
    text-transform: inherit;
    font-size: var(--fontSizeDefault);
    font-weight: var(--fontWeightMedium);
    justify-content: center;
}
.store-card section .btn {
    border-radius: 100vmax;
    padding: 10px 20px;
    text-align: center;
}

.store-card section .btn.indicazioniBtn img {
    display: none;
}

@media only screen and (min-width: 0px) and (max-width: 900px) {
    .store-card:last-of-type {
        border-bottom: var(--btnBorder);
    }
}

@media only screen and (min-width: 0px) and (max-width: 900px) {
    .store-card:last-of-type {
        border-bottom: var(--btnBorder);
    }
}

.store-locator .scroll-button-wrapper {
    left: 27.3%;
}

@media only screen and (min-width: 0px) and (max-width: 1024px) {
    .store-locator .scroll-button-wrapper {
        left: 25.2%;
    }
}

@media only screen and (min-width: 0px) and (max-width: 900px) {
    .store-locator .scroll-button-wrapper {
        left: auto;
        right: 40px;
        bottom: 20px;
    }
}
/* PLUS & MINUS OPENSUB ICON */

.openSub.sel::after {
    background-image: url("/asset/img/icon/minus-icon.svg");
    margin-top: 5px;
    transition: none;
}
.openSub::after {
    content: "";
    background-image: url("/asset/img/icon/plus-icon.svg");
    width: 26px;
    height: 26px;
    background-repeat: no-repeat;
    right: 0;
    top: 0;
    position: absolute;
    background-size: 15px;
    transition: none;
}

/* INFO WINDOW */

.gm-style .gm-style-iw-c {
    border-radius: 1.5em;
}

.info-window-body .info-window-container .info-window-btnGroup .btn.btnBlack {
    font-family: var(--secondaryFontRobotoCondensed);
    font-size: var(--fontSizeDefault);
    font-weight: var(--fontWeightMedium);
    background-color: var(--specialColor6);
    border-radius: 100vmax;
}

.info-window-body .info-window-container .info-window-btnGroup .btn,
.info-window-body .info-window-container .info-window-btnGroup .btn.btnBlack {
    text-transform: lowercase;
}

.info-window-body
    .info-window-container
    .info-window-btnGroup
    .btn::first-letter,
.btn.btnBlack::first-letter {
    text-transform: uppercase;
}

.info-window-body .info-window-container .info-window-btnGroup .btn {
    font-family: var(--secondaryFontRobotoCondensed);
    font-size: var(--fontSizeDefault);
    font-weight: var(--fontWeightMedium);
    background-color: #fff;
    color: var(--specialColor6);
    border: var(--btnBorder);
    border-radius: 100vmax;
}

.info-window-body .info-window-container .info-window-extra {
    color: var(--specialColor6);
}

.info-window-body .info-window-container .info-window-extra ul li a {
    color: var(--specialColor6);
}

.info-window-extra .telNum > img {
    display: none;
}
.info-window-body .info-window-container .info-window-extra ul li a::before {
    content: "";
    background-image: url(/asset/img/tel-icon.svg);
    display: block;
    width: 9px;
    height: 21px;
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 8px;
    background-position: center;
}

/* MAP VIEW */
#google_map {
    border-radius: 0 2em 0 0;
}

.top-area button.top-area-button.filters p {
    filter: brightness(0) saturate(100%) invert(19%) sepia(20%) saturate(6306%)
        hue-rotate(206deg) brightness(96%) contrast(98%);
}

@media only screen and (min-width: 0px) and (max-width: 900px) {
    #google_map {
        border-radius: 0;
    }

    .store-card section .btn.indicazioniBtn {
        padding: 10px 20px;
    }

    .top-area button.top-area-button.filters {
        border-radius: 20px;
    }

    .autocompleteContainer {
        margin-left: var(--rowMarginPadding);
    }

    .top-area > * {
        margin: 1em;
    }
}

/* SIDEBAR FILTER */

.filters-pane .filters-list .titleGroup {
    color: var(--specialColor6);
    background-color: var(--specialColor7);
}

.filters-pane .filters-list .buttonBottomGroup button.btnBlack,
.filters-pane .filters-list .buttonBottomGroup button.btnClose {
    font-family: var(--secondaryFontRobotoCondensed);
    font-size: var(--fontSizeDefault);
    font-weight: var(--fontWeightMedium);
    border-radius: 100vmax;
}

.filters-pane .filters-list .buttonBottomGroup button.btnBlack {
    background-color: var(--specialColor6);
    text-transform: lowercase;
}
.filters-pane .filters-list .buttonBottomGroup button.btnBlack::first-letter {
    text-transform: uppercase;
}

.filters-pane .filters-list .buttonBottomGroup button.btnClose {
    color: var(--specialColor6);
    border: var(--btnBorder);
    text-transform: uppercase;
}
.filters-pane .filters-list .buttonBottomGroup button.btnClose > img {
    display: none;
}

.openSubList,
.filters-pane .filters-list .titleGroup .deleteAll,
.filters-pane .filters-list .subList li {
    color: var(--specialColor6);
}

.filters-pane .filters-list .subList li:before {
    border: 1px solid var(--specialColor6);
    filter: brightness(0) saturate(100%) invert(19%) sepia(20%) saturate(6306%)
        hue-rotate(206deg) brightness(96%) contrast(98%);
}

.filters-pane .filters-list .buttonBottomGroup button {
    border: none;
    background-color: var(--specialColor6);
    border-radius: 100vmax;
}

/*  DIRECTION PANEL */

.directions-pane {
    z-index: 1;
    width: calc(var(--listViewWidth) - 20px);
}

.inputGroup div .rt-autocomplete-wrapper .input-container {
    border-radius: 100vmax;
    border: none !important;
    background-color: #f6f5f5 !important;
}

.inputGroup div .rt-autocomplete-wrapper .input-container input {
    background-color: inherit;
}

.inputGroup
    div
    .rt-autocomplete-wrapper
    .rt-autocomplete
    .input-container
    .icon
    img {
    display: none;
}

.directions-pane .wrapperPane .inputGroup div input.destination {
    background-color: #f6f5f5;
    border: none;
    color: var(--specialColor6);
    border-radius: 100vmax;
    font-size: 16px;
    font-weight: var(--fontWeightDefaultRegular);
}

.instruction,
.instruction strong {
    color: var(--specialColor6);
}

.directions-pane .wrapperPane .directionsRow button.sel {
    background-color: unset;
}

.directions-pane .wrapperPane .directionsRow button object {
    opacity: 1;
}

.directions-pane .wrapperPane .directionsRow button.sel object {
    filter: brightness(0) saturate(100%) invert(19%) sepia(20%) saturate(6306%)
        hue-rotate(206deg) brightness(96%) contrast(98%);
}

.directions-pane .wrapperPane .directionsRow button:not(.sel) {
    filter: brightness(0) saturate(100%) invert(91%) sepia(69%) saturate(1694%)
        hue-rotate(173deg) brightness(106%) contrast(96%);
}

.pointerDiv > span {
    font-family: var(--secondaryFontRobotoCondensed);
    font-size: 16px;
    font-weight: var(--fontWeightMedium);
}

.pointerDiv img,
.destination-img,
.directions-pane .wrapperPane .inputGroup div img.origin-img {
    display: none;
}

.directions-pane
    .rt-autocomplete-wrapper
    .rt-autocomplete
    .input-container::before {
    content: "";
    background-image: url(/asset/img/icon/smal-pin.svg);
    width: 25px;
    height: 26px;
    background-repeat: no-repeat;
    background-size: 20px;
    margin-left: 8px;
}

.inputGroup::after {
    content: "";
    background-image: url(/asset/img/icon/smal-store-pin.svg);
    width: 25px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: 20px;
    margin-left: 22px;
    position: relative;
    bottom: 33px;
}

.directions-pane .rt-autocomplete-wrapper input {
    padding-left: 18px !important;
}

.wrapperPane .pointerDiv::before {
    content: "";
    background-image: url(/asset/img/icon/big-pin.svg);
    width: 30px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: 30px;
    margin-right: 20px;
}

.wrapperPane .directions-instructions + .pointerDiv::before {
    background-image: url(/asset/img/icon/big-store-pin.svg);
}

/* CONSENT MODAL */

.user-consent-modal {
    border-radius: 20px;
}

.user-consent-modal__button {
    border-radius: 100vmax;
}

.user-consent-modal__button--yes,
.user-consent-modal__button--no {
    font-family: var(--secondaryFontRobotoCondensed);
    font-size: var(--fontSizeDefault);
    font-weight: var(--fontWeightMedium);
    cursor: pointer;
    text-transform: capitalize;
}

.user-consent-modal__button--yes {
    background-color: var(--specialColor6);
}

.user-consent-modal__button--no {
    background-color: #fff;
    color: var(--specialColor6);
    border: var(--btnBorder);
}

/* TOSTIFY WARNING */

.Toastify .Toastify__toast {
    border-radius: 2em;
    padding-inline: 2em;
}

@media only screen and (min-width: 0) and (max-width: 500px) {
    .Toastify .Toastify__toast {
        width: 90%;
        margin-inline: auto;
    }
}