.nimap-locator-container { * { box-sizing: border-box; } .nimap-hidden { display: none !important; } &.nimap-layout-fullwidth { .nimap-locator-wrapper { .nimap-locator-filter-section { display: flex; justify-content: space-between; padding: 15px 0 10px 0; > div { width: -webkit-fill-available; } .nimap-search-location-wrap { .nimap-search-location-label { height: 38px; } &.nimap-search-location-layout-2col { .nimap-search-location-inner { padding-right: 10px; } } &.nimap-search-location-layout-fullwidth { .nimap-search-location-label { display: none; } .nimap-search-location-inner { width: 100%; padding-right: 10px; input { width: 100%; border-right: 1px solid #ced4da; } } } } .nimap-search-store-wrap { .nimap-search-store-label { height: 38px; } &.nimap-search-store-layout-2col { .nimap-search-store-inner { padding-right: 10px; } } &.nimap-search-store-layout-fullwidth { .nimap-search-store-label { display: none; } .nimap-search-store-inner { width: 100%; padding-right: 10px; input { width: 100%; border-right: 1px solid #ced4da; } } } } .nimap-filter-container { .nimap-filter-wrap { display: flex; justify-content: space-between; gap: 10px; height: 100%; > div { width: -webkit-fill-available; height: 100%; } .nimap-filter-category-wrap { //height: 100%; .nimap-filter-category-label { height: 38px; display: flex; flex-direction: column; justify-content: space-around; } } .nimap-filter-distance-wrap { .nimap-filter-distance-label { height: 38px; display: flex; flex-direction: column; justify-content: space-around; } } select { width: 100%; height: 38px; color: #6f6f6f; font-weight: 500; padding: 5px 10px; border-radius: 5px; border: 1px solid #ced4da; line-height: inherit; //min-height: 38px !important; margin-bottom: 0 !important; background-color: #fff !important; font-size: 15px; } input { &.nimap-filter-distance-value { width: 100%; height: 38px; color: #6f6f6f; font-weight: 500; padding: 5px 10px; border-radius: 5px; border: 1px solid #ced4da; line-height: inherit; min-height: 38px !important; margin-bottom: 0 !important; background-color: #fff !important; font-size: 15px; } } } } } .nimap-store-result-number-container { text-align: center; margin: 10px 0; &.nimap-locator-layout-2col { display: none !important; } .nimap-preloader { text-align: center; } } .nimap-store-result-wrap { &.nimap-store-result-before-wrap { display: none !important; } .nimap-detail-layout-2col { display: none !important; } .nimap-detail-hidden { display: none !important; } .nimap-list-result { display: grid; grid-row-gap: 15px; grid-column-gap: 30px; grid-template-columns: repeat(2, 1fr); .nimap-detail-container { border-radius: 6px; position: relative; overflow: hidden; transition: all .3s ease-in-out; background-color: #fff; .nimap-detail-top-wrap { overflow: hidden; position: relative; border-radius: 6px 6px 0 0; .nimap-detail-image-wrap { max-width: 100%; .nimap-store-list-thumb { width: 100%; img { height: auto; max-width: 100%; width: 100%; display: inline-block; transition: all .3s ease-in-out; &.nimap-store-no-image { display: none; } } } } .nimap-detail-category-wrap { top: 21px; left: 20px; z-index: 2; position: absolute; .nimap-category-wrap { gap: 2px; font-size: 13px; padding: 0 15px; color: #000; align-items: center; display: inline-flex; justify-content: center; border-radius: 100px; background-color: #fff; margin-right: 10px; } } } .nimap-detail-bottom-wrap { border: 1px solid #e6e6e6; border-top: none; padding: 0; border-radius: 0 0 6px 6px; > div { padding: 0 20px; margin-bottom: 8px; display: flex; } .nimap-detail-title-wrap { padding-top: 15px; font-size: larger; font-weight: bold; } .nimap-detail-opening-wrap { .nimap-detail-opening { .nimap-opening-day-wrap { } } } .nimap-detail-buttons { display: flex; justify-content: space-around; margin-bottom: 10px; > div { width: auto; padding: 0 12px; height: 40px; display: block; text-align: center; line-height: 40px; background-color: #ffffff; border: 1px solid #bebebe; border-radius: 3px; overflow: hidden; a { color: #06476d; } } } } } } } .nimap-map-canvas { height: 600px; //height: 480px; } } } &.nimap-layout-2col { .nimap-locator-wrapper { &:not(.nimap-locator-hide-search) { display: grid; grid-template-columns: 1fr 2.5fr; height: 600px; position: relative; } .nimap-locator-filter-section-container { width: 100%; position: relative; border: 1px solid #eee; } .nimap-locator-filter-section-wrap { //height: 100%; position: absolute; overflow: hidden; flex-direction: column !important; display: flex; height: auto; width: 100%; top: 0; bottom: 0; left: 0; right: 0; background-color: #fff; .nimap-locator-filter-section { padding-top: 0; > div { padding-bottom: 8px; &.nimap-filter-container { padding-bottom: unset; } } .nimap-search-location-wrap { .nimap-search-location-label { display: none; } .nimap-search-location-layout-fullwidth { .nimap-search-location-input { width: 100%; } } } .nimap-search-store-wrap { .nimap-search-store-label { display: none; } .nimap-search-store-layout-fullwidth { .nimap-search-store-input { width: 100%; } } } .nimap-filter-wrap { display: flex; max-width: 100%; justify-content: space-between; .nimap-filter-category-wrap { .nimap-filter-category-label { display: none; } select { height: 38px; color: #6f6f6f; font-weight: 500; padding: 5px 10px; border-radius: 5px; border: 1px solid #ced4da; line-height: inherit; //min-height: 38px !important; margin-bottom: 0 !important; background-color: #fff !important; font-size: 15px; } } .nimap-filter-distance-container { //max-width: 40%; .nimap-filter-distance-label { display: none; } input { height: 38px; width: 100%; color: #6f6f6f; font-weight: 500; padding: 5px 10px; border-radius: 5px; border: 1px solid #ced4da; line-height: inherit; min-height: 38px !important; margin-bottom: 0 !important; background-color: #fff !important; font-size: 15px; } .nimap-filter-distance { //width: -webkit-fill-available; } } } } .nimap-store-result-wrap { max-height: 100%; overflow: auto; overflow-x: hidden; position: relative; z-index: 0; .nimap-detail-hidden { display: none !important; } .nimap-store-result-number { //display: none; } .nimap-list-result { overflow-y: auto; //max-height: 600px; position: relative; max-height: 100%; .nimap-detail-container { position: relative; overflow: hidden; transition: all .3s ease-in-out; background-color: #fff; padding: 5px 2px; border-bottom: 1px solid #e6e6e6; .nimap-detail-top-wrap { display: flex; overflow: hidden; position: relative; //border: 1px solid #e6e6e6; padding: 0; //border-radius: 6px 6px 0 0; .nimap-detail-top-info-wrap { min-width: 70%; //> div { // padding: 0 4px; // margin-bottom: 8px; // display: flex; //} .nimap-detail-title-wrap { font-size: larger; font-weight: bold; } .nimap-detail-category-wrap { .nimap-category-wrap { gap: 2px; font-size: 13px; padding: 0 15px; color: #000; align-items: center; display: inline-flex; justify-content: center; border-radius: 100px; background-color: #ffa9a9; margin-right: 10px; } } } .nimap-detail-top-image-wrap { max-width: 30%; .nimap-detail-image-wrap { max-width: 100%; .nimap-store-list-thumb { width: 100%; img { height: auto; max-width: 100%; width: 100%; display: inline-block; transition: all .3s ease-in-out; &.nimap-store-no-image { display: none; } } } } } } .nimap-detail-bottom-wrap { //border: 1px solid #e6e6e6; //border-top: none; padding: 0; //border-radius: 0 0 6px 6px; .nimap-detail-buttons { display: flex; justify-content: space-around; margin-bottom: 10px; > div { width: auto; padding: 0 12px; height: 40px; display: block; text-align: center; line-height: 40px; background-color: #ffffff; border: 1px solid #bebebe; border-radius: 3px; overflow: hidden; a { color: #06476d; } &:hover { box-shadow: inset 0 0 0 10em rgba(255, 255, 255, 0.3); } } } } } } } } .nimap-store-result-number-container { margin-top: 8px; &.nimap-locator-layout-fullwidth { display: none; } .nimap-preloader { } } .nimap-store-result-wrap { &.nimap-store-result-after-wrap { display: none !important; } .nimap-detail-layout-fullwidth { display: none; } } } .nimap-map-canvas { height: 600px; } } .nimap-locator-wrapper { .nimap-store-result-wrap { .nimap-list-result { .nimap-detail-container { &.nimap-detail-container-focus { .nimap-detail-top-wrap { background-color: #f8f1f1; } .nimap-detail-bottom-wrap { background-color: #f8f1f1; } } .nimap-detail-top-wrap { .nimap-detail-top-info-wrap { > div { padding: 0 4px; margin-bottom: 8px; display: flex; } } } } .nimap-no-results { text-align: center; } } .nimap-pagination-container { padding-top: 3px; padding-bottom: 3px; .nimap-pagination-wrap { display: flex; justify-content: center !important; text-align: center !important; border-radius: 0.25rem; .nimap-store-pages { cursor: pointer; position: relative; display: block; padding: 0.5rem 0.75rem; margin-left: -1px; line-height: 1.25; border: 1px solid #dee2e6; &.nimap-store-page-active { background-color: #0B598A; color: #fff; cursor: unset; } } } } } .nimap-store-result-number-container { background-color: #1c788b; color: #ffffff; > div { padding: 5px 10px; } .nimap-preloader { //text-align: center; img { vertical-align: middle; margin-right: 5px; } } } } .nimap-locator-filter-section { .nimap-search-location-inner { input { height: 38px; color: #6f6f6f; font-weight: 500; padding: 5px 10px; border-radius: 5px; border: 1px solid #ced4da; line-height: inherit; //min-height: 38px !important; //margin-bottom: 0 !important; background-color: #fff !important; font-size: 15px; } &.nimap-search-location-layout-2col { display: flex; .nimap-search-location-button { height: 38px; width: 60px; display: flex; color: #ffffff; cursor: pointer; align-items: center; justify-content: center; border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; font-size: 20px; background-color: #06476d; .nimap-label { display: none; } .nimap-icon { height: unset; margin: 0; } } input { width: 100%; border-right: none; } } &.nimap-search-location-layout-fullwidth { //display: flex; .nimap-search-location-button { height: 38px; width: 100%; display: flex; color: #ffffff; cursor: pointer; align-items: center; justify-content: center; border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; //font-size: 20px; background-color: #06476d; .nimap-icon { display: none; //height: unset; //margin: 0; } } input { border-right: none; &.nimap-error { border: 1px solid #d71b43 !important; } } } } .nimap-search-store-inner { input { height: 38px; color: #6f6f6f; font-weight: 500; padding: 5px 10px; border-radius: 5px; border: 1px solid #ced4da; line-height: inherit; min-height: 38px !important; margin-bottom: 0 !important; background-color: #fff !important; font-size: 15px; } &.nimap-search-store-layout-2col { display: flex; .nimap-search-store-button { height: 38px; width: 60px; display: flex; color: #ffffff; cursor: pointer; align-items: center; justify-content: center; border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; font-size: 20px; background-color: #06476d; .nimap-label { display: none; } .nimap-icon { height: unset; margin: 0; } } input { width: 100%; border-right: none; } } &.nimap-search-store-layout-fullwidth { //display: flex; .nimap-search-store-button { height: 38px; width: 100%; display: flex; color: #ffffff; cursor: pointer; align-items: center; justify-content: center; border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; //font-size: 20px; background-color: #06476d; .nimap-icon { display: none; //height: unset; //margin: 0; } } input { border-right: none; } } } } .nimap-map-container { .nimap-map-canvas { position: relative; background: #eee; .nimap-detail-hidden { display: none !important; } .nimap-infobox { > img { z-index: 1; width: 16px; &[align="right"] { margin: 11px 10px -27px 0px !important; } } .nimap-info-window { width: 340px; position: relative; overflow: visible !important; background-color: #fff; padding: 10px; border-radius: 4px; .nimap-info-first-wrap { font-size: larger; font-weight: bold; margin-bottom: 10px; } .nimap-info-second-wrap { display: flex; margin-bottom: 10px; .nimap-info-second-detail { min-width: 50%; } .nimap-info-second-image { max-width: 50%; .nimap-store-list-thumb { width: 100%; img { max-width: 100%; } } } } } } .nimap-info-window { //width: 340px; position: relative; overflow: visible !important; background-color: #fff; .nimap-info-first-wrap { font-size: larger; font-weight: bold; margin-bottom: 10px; } .nimap-info-second-wrap { display: flex; margin-bottom: 4px; .nimap-info-second-detail { min-width: 50%; width: -webkit-fill-available; > div { margin-bottom: 6px; display: flex; } } .nimap-info-second-image { max-width: 50%; .nimap-store-list-thumb { width: 100%; img { max-width: 100%; } } } } .nimap-info-third-wrap { .nimap-info-actions { display: flex; justify-content: space-around; > div { width: auto; padding: 0 12px; height: 40px; display: block; border-radius: 3px; text-align: center; line-height: 40px; background-color: #ffffff; border: 1px solid #bebebe; overflow: hidden; a { color: #06476d; } &:hover { box-shadow: inset 0 0 0 10em rgba(255, 255, 255, 0.3); } } } } .nimap-detail-category-wrap { //top: 21px; //left: 20px; //z-index: 2; //position: absolute; .nimap-category-wrap { gap: 2px; font-size: 13px; padding: 0 10px; color: #000; align-items: center; display: inline-flex; justify-content: center; border-radius: 100px; background-color: #fff; margin-right: 10px; } } } } } .nimap-map-image { position: relative; .nimap-map-geolocation-modal { //display: none; overflow: hidden; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 99; -webkit-overflow-scrolling: touch; outline: 0; color: inherit; .nimap-map-geolocation-overlay { background-color: #000000; bottom: 0; left: 0; opacity: 0.5; position: absolute; right: 0; top: 0; z-index: 989; } .nimap-map-geolocation-dialog-wrap { width: 60%; top: 50%; margin: 0 auto; position: relative; transform: translateY(-50%); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); -webkit-transition: -webkit-transform 0.3s ease-out; -moz-transition: -moz-transform 0.3s ease-out; -o-transition: -o-transform 0.3s ease-out; transition: transform 0.3s ease-out; z-index: 990; .nimap-modal-geolocation-content { padding: 15px 18px; position: relative; background-color: #fff; border: 1px solid #999; border-radius: 6px; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); background-clip: padding-box; outline: 0; .nimap-modal-geolocation-close { cursor: pointer; position: absolute; right: 10px; top: 0; font-size: 16px; } .nimap-modal-title-geolocation-wrap { width: 100%; margin-bottom: 10px; text-align: center; //display: flex; //justify-content: space-between; } .nimap-modal-button-wrap { display: inline-block; width: 100%; .nimap-modal-geolocation-button { width: 100%; cursor: pointer; background: #06476D; color: #fff; height: 36px; border-radius: 3px; padding: 5px 10px; font-weight: 600; text-align: center; text-transform: capitalize; } } } } } } .nimap-store-result-wrap { &::-webkit-scrollbar { width: 0.5em; background-color: #f1f1f1; } &::-webkit-scrollbar-thumb { background-color: #c1c1c1; } &::-webkit-scrollbar-thumb:hover { background-color: #a1a1a1; } &::-webkit-scrollbar-button { display: none; } } .nimap-legacy-template-container { display: none; } .nimap-hidden { display: none; } } @media screen and (max-width: 768px) { .nimap-locator-container { &.nimap-layout-fullwidth { .nimap-locator-wrapper { .nimap-locator-filter-section-container { .nimap-locator-filter-section-wrap { .nimap-locator-filter-section { display: block; .nimap-search-location-wrap { .nimap-search-location-inner { padding-right: unset; } } .nimap-search-store-wrap { .nimap-search-store-inner { padding-right: unset; } } } } } .nimap-store-result-wrap { .nimap-list-result { display: block; } } } } &.nimap-layout-2col { .nimap-locator-wrapper { display: block; height: unset; .nimap-locator-filter-section-container { .nimap-locator-filter-section-wrap { display: block; position: relative; .nimap-store-result-wrap { max-height: 400px; } } } .nimap-map-canvas { max-height: 400px; } } } } } .nimap-animate-bounce { animation: nimap-bounce 2s infinite; -webkit-animation: nimap-bounce 2s infinite; -moz-animation: nimap-bounce 2s infinite; -o-animation: nimap-bounce 2s infinite; } @-webkit-keyframes nimap-bounce { 0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 40% {-webkit-transform: translateY(-20px);} 60% {-webkit-transform: translateY(-10px);} } @-moz-keyframes nimap-bounce { 0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);} 40% {-moz-transform: translateY(-30px);} 60% {-moz-transform: translateY(-15px);} } @-o-keyframes nimap-bounce { 0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);} 40% {-o-transform: translateY(-30px);} 60% {-o-transform: translateY(-15px);} } @keyframes nimap-bounce { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-20px);} 60% {transform: translateY(-10px);} }