/* This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. */ mappress-map poi { display: none; } .mapp-layout { border: 1px solid lightgray; box-sizing: border-box; display: block; max-width: none; /* Some themes limit, e.g. 2020 */ min-width: 200px; opacity: 1 !important; /* Some themes set to 0 */ padding: 0px !important; /* Some themes set */ } mappress-map.mapp-layout { display: flex !important; /* Some themse override */ flex-direction: column; position: relative; /* Needed for filters with web component */ } .mapp-layout * { box-sizing: border-box; color: black; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 13px; } /* WP block editor interferes */ .mapp-layout p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } /* GT .aligncenter interferes w/all text */ .mapp-layout.aligncenter { text-align: left; } .mapp-canvas { user-select: none; } .mapp-wrapper { min-height: 50px; position: relative; } /* Responsive content */ .mapp-content { display: flex; flex-direction: column; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .mapp-main { display: flex; flex: 1; overflow: hidden; position: relative; } .mapp-content .mapp-main .mapp-canvas img { border: none; max-width: none; /* 2021 interferes with pegman */ padding: 0; /* 2011 pads img tags, which interferes with map markers and tiles */ } .mapp-hidden { display: none; } /* ----------------------------------------------------------------------------------- Prevent theme conflicts with Google maps. The !important modifier is used because some themes use high-priority (very specific) selectors that interfere. ----------------------------------------------------------------------------------- */ /* Map controls are rendered here, not on the canvas */ .mapp-canvas-panel { flex: 1; height: 100%; margin: 0px; overflow: hidden !important; padding: 0px !important; position: relative; /* Need for initial dialog position */ } .mapp-canvas { height: 100%; word-wrap: normal; /* 2013 sets break-word, which interferes w/Google copyright in IE only */ } .mapp-canvas img { background: none; box-shadow: none !important; /* 2012 */ border-radius: 0px !important; /* 2012 */ visibility: inherit !important; } .leaflet-container .leaflet-control-attribution * { font-size: 8px; } /* Prevent theme interference with leaflet */ .leaflet-popup-close-button { box-shadow: none !important; /* 2016, 2017 */ text-decoration: none !important; /* 2019 */ } a.leaflet-control-zoom-in, .leaflet-control-zoom-out { text-decoration: none !important; } .mapp-spinner-overlay { align-items: center; background-color: #c0c0c0; justify-content: center; opacity: 0.5; padding: 10px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10001; } /* https://icons8.com/preloaders/en/circular# */ .mapp-spinner { background: transparent url(../images/loading.gif) no-repeat center center; background-size: 64px; display: inline-block; height: 64px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 10002; width: 64px; } /* ----------------------------------------------------------------------------------- Controls Leaflet needs the inner div to get size right, so google was done the same way ----------------------------------------------------------------------------------- */ .mapp-google-control { background-color: white; box-shadow: rgb(0 0 0 / 30%) 0px 1px 4px -1px; position: absolute; } .mapp-google-control > div { background-position: center; background-repeat: no-repeat; height: 40px; opacity: 0.6; width: 40px; } .mapp-google-control:hover { background-color: #f4f4f4; } .mapp-google-control:hover > div { opacity: 1; } .mapp-leaflet-control { border: 2px solid rgba(0,0,0,0.2); border-radius: 4px; position: absolute; z-index: 1000; } .mapp-leaflet-control > div { background-color: white; background-position: center; background-repeat: no-repeat; border-radius: 2px; height: 30px; line-height: 30px; opacity: 1; width: 30px; } .mapp-leaflet-control:hover > div { background-color: #f4f4f4; opacity: 1; } .mapp-google-fullscreen, .mapp-leaflet-fullscreen { top: 10px; right: 10px; } .mapp-google-fullscreen > div, .mapp-leaflet-fullscreen > div { background-image: url('../images/fullscreen.svg'); background-size: 18px 18px; } .mapp-google-geolocate, .mapp-leaflet-geolocate { bottom: 120px; right: 10px; } .mapp-mini .mapp-google-geolocate, .mapp-mini .mapp-leaflet-geolocate { bottom: auto; top: 60px; } .mapp-google-geolocate > div { background-image: url('../images/geolocate.svg'); background-size: 18px 18px; } .mapp-leaflet-geolocate > div { background-image: url('../images/geolocate.svg'); background-size: 14px 14px; } /* ----------------------------------------------------------------------------------- Sidebar ----------------------------------------------------------------------------------- */ .mapp-sidebar { background-color: white; border-right: 1px solid lightgray; display: flex; flex-direction: column; max-width: 55%; position: relative; transition-property: all; transition-duration: .1s; width: 0; } .mapp-sidebar.mapp-sidebar-open { width: 300px; } /* List toggle, left layout only */ .mapp-sidebar-toggle { align-items: center; background-color: white; border: 1px solid lightgray; cursor: pointer; display: flex; height: 40px; justify-content: center; margin: auto; position: absolute; top: 0; left: 100%; bottom: 0; width: 20px; z-index: 1000; } .mapp-sidebar-toggle::before { width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid black; content: ''; } .mapp-sidebar-open .mapp-sidebar-toggle::before { width: 0; height: 0; border-left: none; border-right: 6px solid black; } /* Sidebar inline */ .mapp-sidebar.mapp-sidebar-inline { border: none; border-top: 1px solid lightgray; display: flex; max-height: 350px; max-width: none; width: auto; } .mapp-sidebar-inline .mapp-sidebar-toggle { display: none; } .mapp-sidebar-inline .mapp-directions { max-width: none; width: auto; } .mapp-sidebar-inline .mapp-list { display: flex; flex: 1; flex-direction: column; } /* ----------------------------------------------------------------------------------- POI List (new) Structure: .mapp-list .mapp-list-header .mapp-items .mapp-item (one for each POI) .mapp-list-footer .mapp-paginate ----------------------------------------------------------------------------------- */ .mapp-list { display: flex; flex-direction: column; flex: 1; overflow: hidden; position: relative; } .mapp-list .mapp-list-header { border-bottom: 1px solid lightgray; display: flex; flex-direction: column; padding: 5px; position: relative; /* Needed to scroll list for selection */ } .mapp-list-count { padding: 5px; text-align: center; } .mapp-list .mapp-items { flex: 1; overflow: auto; } .mapp-list .mapp-item { align-items: center; border-bottom: 1px solid lightgray; display: flex; cursor: pointer; overflow: hidden; padding: 10px; } .mapp-list .mapp-item.mapp-selected { background-color: #eaeaea; } .mapp-list .mapp-item:hover { background-color: #eaeaea; } .mapp-list .mapp-info { flex: 1; } .mapp-list .mapp-info .mapp-template { align-items: center; display: flex; } .mapp-list .mapp-title { flex: 1; } .mapp-list .mapp-item .mapp-icon { border: none; /* 2011 */ max-width: 32px !important; /* 2012 tries to override */ max-height: 32px; margin: 0 5px; padding: 0; /* 2011 */ } .mapp-list-footer { border-top: 1px solid lightgray; display: flex; justify-content: center; padding: 10px; } .mapp-list .mapp-dir-wrapper { margin-top: 10px; } /* Make directions look like a link */ .mapp-list .mapp-dir { color: #4272db; cursor: pointer; white-space: nowrap; } /* ----------------------------------------------------------------------------------- Pagination For: poi list, library picker, and style modal ----------------------------------------------------------------------------------- */ .mapp-paginate { align-items: center; display: flex; } /* Frontend buttons are divs to prevent theme interference w/styling */ .mapp-paginate-button { align-items: center; background-color: #eee; border: 1px solid lightgray; border-radius: 5px; cursor: pointer; display: inline-flex; font-size: 16px; height: 25px; justify-content: center; margin: 0 2px; width: 20px; } .mapp-paginate-button.mapp-disabled { color: #aaa; } .mapp-paginate-count { display: inline-block; min-width: 60px; text-align: center; } /* ----------------------------------------------------------------------------------- Header - min-height to prevent popins ----------------------------------------------------------------------------------- */ .mapp-header { align-items: center; background-color: white; border-bottom: 1px solid lightgray; display: flex; gap: 5px; min-height: 45px; } /* ----------------------------------------------------------------------------------- Search ----------------------------------------------------------------------------------- */ .mapp-search-container { display: flex; flex: 1; padding: 5px; position: relative; } /* ----------------------------------------------------------------------------------- React autocomplete ----------------------------------------------------------------------------------- */ .mapp-autocomplete { align-items: center; display: flex; flex: 1; } .mapp-autocomplete-wrapper { display: flex; flex: 1; position: relative; } .mapp-autocomplete input.mapp-places { background-color: white !important; /* Algolia uses 240,240,240 */ border: none; border: 1px solid #bbb ; box-shadow: none ; color: black ; flex: 1; line-height: 25px; margin: 0 ; padding: 5px 10px; } /* Set button height to match input */ .mapp-autocomplete .mapp-submit-button { height: 100%; padding: 0 10px; } /* Themes like to set img padding/margin */ .mapp-autocomplete .mapp-submit-button img { margin: 0 !important; } .mapp-autocomplete-list { background-color: white; border: 1px solid lightgray; box-shadow: 0px 1px 2px grey; cursor: pointer; overflow-x: hidden; overflow-y: auto; position: absolute; top: 100%; width: 100%; z-index: 10000; } .mapp-autocomplete-item { background-color: inherit; border-bottom: 1px solid lightgray; border-top: none; border-right: none; border-left: none; box-shadow: none; color: inherit; cursor: inherit; font: inherit; margin: 0; padding: 8px; } .mapp-autocomplete-item:hover, .mapp-autocomplete-item.mapp-selected { background-color: #eaeaea; } .mapp-autocomplete-item { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } /* ----------------------------------------------------------------------------------- Filters mapp-filters mapp-filter mapp-filter-button mapp-filter-dropdown-position mapp-filter-content mapp-filter-values mapp-filters-toolbar ----------------------------------------------------------------------------------- */ .mapp-filters { display: flex; } .mapp-filters-spinner { background: transparent url(../images/spinner-2x.gif) no-repeat center center; height: 24px; width: 24px; margin-left: 10px; margin-right: 10px; } .mapp-filter { display: flex; flex-direction: column; /* position: relative; -- individual */ } .mapp-filter-button { align-items: center; display: flex; justify-content: center; } .mapp-filter-dropdown { background-color: white; display: none; flex-direction: column; } .mapp-filter-open .mapp-filter-dropdown { display: flex; } .mapp-filter-values { line-height: normal; min-width: 100%; overflow: auto; padding: 5px 10px; } .mapp-filter-values .mapp-control { display: block; } .mapp-filter-toolbar { align-items: center; border-top: 1px solid lightgray; display: flex; justify-content: space-between; padding: 10px; } .mapp-filter-toolbar .mapp-filter-count { color: #777; margin-right: 5px; min-width: 100px; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .mapp-filter-values .mapp-filter-label { font-weight: bold; padding: 10px 0; text-transform: capitalize; white-space: nowrap; } .mapp-filter-values label { align-items: center; color: #666; display: flex; font-weight: normal; /* 2017 */ margin-bottom: 5px; margin-right: 10px; } .mapp-filter-values img.mapp-icon { display: inline; /* 2020 sets display to block */ margin-right: 5px; } /* Many selectors, to override styles from GT editor, theme */ .mapp-content .mapp-filters .mapp-filter-values input[type="text"] { border: 1px solid gray; border-radius: 0; box-shadow: none; line-height: 1; margin: initial; max-width: none; outline: none; padding: 5px; } .mapp-content .mapp-filters .mapp-filter-values input[type="radio"], .mapp-filter-values input[type="checkbox"] { border-radius: 0; box-shadow: none; line-height: 1; margin: initial; margin-right: 10px; outline: none; } .mapp-content .mapp-filters .mapp-filter-values select { border: 1px solid gray; border-radius: 0; box-shadow: none; line-height: 1; margin: initial; max-width: none; outline: none; padding: 5px; width: 100%; } /* Filters in header/sidebar ------------------ */ .mapp-header .mapp-filter { margin-right: 5px; } .mapp-header .mapp-filter .mapp-filter-dropdown { background-color: white; border: 1px solid lightgray; max-height: calc(100% - 45px); position: absolute; top: 45px; right: 0; z-index: 10000; } .mapp-sidebar .mapp-filters { border-bottom: 1px solid lightgray; flex-direction: column; overflow: hidden; z-index: 1003; } .mapp-sidebar .mapp-filter-button { border: none; border-bottom: 1px solid lightgray; } .mapp-sidebar .mapp-filter-dropdown { border-bottom: 1px solid lightgray; } .mapp-sidebar .mapp-filter-all .mapp-filter-dropdown { line-height: normal; padding: 5px; position: absolute; top: 35px; bottom: 0; right: 0; left: 0; z-index: 10000; } /* ------------------------------------------------------------------------------------------------------------ Infobox - This applies only to Infoboxes! Google standard infoWindow / Leaflet popup use class .mapp-iw instead .mapp-ib-wrapper - positioning element .mapp-ib-content - box + tip .mapp-ib - box only, with border .mapp-iw - infowindow (popup content) .mapp-ib-tip - triangle tip ----------------------------------------------------------------------------------------------------------- */ /* Positioning element: width prevents clipping, height must be zero or it'll obscure canvas */ .mapp-ib-wrapper { bottom: 0; display: flex; left: 0; max-height: 60%; /* Based on map size */ max-width: 90%; /* Based on map size */ overflow: hidden; position: absolute; } .mapp-ib-content { display: flex; flex-direction: column; line-height: 0; /* Prevent font from distorting tip */ overflow: hidden; z-index: 1005; /* Needed for Leaflet, above menu icon, below menu */ } /* In fullscreen Google sets map z-index very high */ :fullscreen ~ .mapp-ib-wrapper { z-index: 10000000000; } :-webkit-full-screen ~ .mapp-ib-wrapper { z-index: 10000000000; } :-moz-full-screen ~ .mapp-ib-wrapper { z-index: 10000000000; } :-ms-fullscreen ~ .mapp-ib-wrapper { z-index: 10000000000; } .mapp-ib { background-color: white; border: 1px solid lightgray; box-sizing: border-box; display: flex; flex-direction: column; line-height: normal; outline: none; overflow: hidden; box-shadow: 0 0px 7px 0px rgba(0,0,0,0.20); } .mapp-ib-tip { display: flex; flex: 0 0 auto; left: 50%; position: relative; top: -1px; width: 0; } .mapp-ib-tip:before { border: 10px solid transparent; border-top: 10px solid white; border-bottom: none; content: ""; left: -10px; position: relative; width: 0; } /* ----------------------------------------------------------------------------------- Popup contents ----------------------------------------------------------------------------------- */ .mapp-iw { display: flex; flex-direction: column; min-width: 200px; overflow: hidden; } /* Selectivity needed to override GT editor */ .mapp-ib .mapp-iw * { font-size: 13px; } /* Override common theme / user agent styles that interfere */ .mapp-content .mapp-iw * { line-height: normal; } .mapp-iw p { margin: 0 !important; padding: 0; } /* Try to constrain oembeds to container */ .mapp-iw iframe { max-height: 100%; max-width: 100%; } /* Override theme link styles */ .mapp-iw a, .mapp-iw a:link, .mapp-iw a:active, .mapp-iw a:visited, .mapp-iw a:hover { border: none !important; box-shadow: none !important; /* 2016, 2017 */ color: #4272db !important; margin: 0; padding: 0; text-decoration: none !important; } .mapp-iw .mapp-info { display: flex; flex: 1; flex-direction: column; min-height: 100px; /* Used when IB is very small and thumbnail is on top */ overflow: hidden; padding: 10px; } .mapp-iw .mapp-info .mapp-template { display: flex; flex: 1; flex-direction: column; overflow: hidden; } .mapp-iw .mapp-title { font-weight: bold; padding-bottom: 10px; } .mapp-iw .mapp-body { flex: 1; overflow: auto; overflow-wrap: break-word; } .mapp-iw .mapp-dir-wrapper { margin-top: 10px; } /* Make directions look like a link */ .mapp-iw .mapp-dir { color: #4272db; cursor: pointer; padding-top: 10px; white-space: nowrap; } /* Workarounds for IE, which doesn't like flex */ .mapp-ie .mapp-iw { display: block; overflow: auto; } .mapp-ie .mapp-iw .mapp-body { flex: none; } /* Data table */ .mapp-iw .mapp-table { margin-top: 10px; } .mapp-iw .mapp-label { font-weight: 500; } .mapp-iw .mapp-cell { padding: 2px 10px; } /* ----------------------------------------------------------------------------------- Thumbnail gallery ----------------------------------------------------------------------------------- */ .mapp-iw .mapp-thumbnail { cursor: pointer; } .mapp-thumbnail { align-items: center; display: flex; justify-content: center; overflow: hidden; position: relative; } /* Display block removes extra whitespace @ bottom */ .mapp-thumbnail img { display: inline-block; object-fit: cover; } .mapp-thumbnail .mapp-gallery-previous, .mapp-thumbnail .mapp-gallery-next { align-items: center; background-color: white; border: 1px solid gray; border-radius: 40px; color: black; cursor: pointer; display: flex; font-size: 20px; height: 24px; justify-content: center; opacity: 0.5; position: absolute; top: 50%; transform: translateY(-50%); width: 24px; } .mapp-thumbnail .mapp-gallery-previous:hover, .mapp-thumbnail .mapp-gallery-next:hover { opacity: 1.0; } .mapp-thumbnail .mapp-gallery-previous { left: 5px; } .mapp-thumbnail .mapp-gallery-next { right: 5px; } .mapp-thumbnail .mapp-gallery-previous:after { content: "<"; } .mapp-thumbnail .mapp-gallery-next:after { content: ">"; } /* ----------------------------------------------------------------------------------- Popup Thumbnail styles ----------------------------------------------------------------------------------- */ .mapp-iw.mapp-thumb-top .mapp-thumbnail { text-align: center; } /* When thumbnails are on top AND an image is present, limit info section width to width of the image */ .mapp-iw.mapp-thumb-top.mapp-has-thumb .mapp-info { min-width: 100%; width: 0; } .mapp-iw.mapp-thumb-left .mapp-thumbnail, .mapp-iw.mapp-thumb-right .mapp-thumbnail { align-items: center; } /* Limit info section to height of featured image. */ .mapp-iw.mapp-thumb-left .mapp-info, .mapp-iw.mapp-thumb-right .mapp-info { min-width: 150px; } .mapp-iw.mapp-thumb-left { flex-direction: row; } .mapp-iw.mapp-thumb-right { flex-direction: row-reverse; } /* ----------------------------------------------------------------------------------- List thumbnail styles. Thumbnail is prepended before item content. ----------------------------------------------------------------------------------- */ /* Fill the .mapp-thumbnail container, where fixed dimensions are applied */ .mapp-list .mapp-thumbnail img, .mapp-list .mapp-thumbnail .mapp-embed, .mapp-list .mapp-thumbnail iframe { height: 100%; width: 100%; } /* Default is flex horizontal, use block to position image at top */ .mapp-list.mapp-thumb-top .mapp-item { display: block; padding: 10px; } .mapp-list.mapp-thumb-top .mapp-thumbnail { height: 150px; margin-bottom: 10px; text-align: center; } .mapp-list.mapp-thumb-left .mapp-thumbnail { height: 100px !important; width: 100px !important; margin-right: 10px; } .mapp-list.mapp-thumb-left .mapp-item { align-items: start; } .mapp-list.mapp-thumb-left .mapp-info .mapp-template { flex-direction: row-reverse; } .mapp-list.mapp-thumb-right .mapp-item { align-items: start; flex-direction: row-reverse; } .mapp-list.mapp-thumb-right .mapp-thumbnail { height: 100px !important; width: 100px !important; margin-left: 10px; } /* ----------------------------------------------------------------------------------- IB Animations ----------------------------------------------------------------------------------- */ @keyframes floatdown { from { margin-top: 0 } to { margin-top: 5px } } @keyframes floatup { from { margin-top: 0 } to { margin-top: -5px } } .mapp-ib-wrapper.mapp-ib-float { animation: floatup 0.4s forwards; } /* ----------------------------------------------------------------------------------- Mini view ----------------------------------------------------------------------------------- */ /* In mini view place the list under the map so it can scroll UP */ .mapp-mini .mapp-main { flex-direction: column-reverse; } .mapp-mini .mapp-sidebar { bottom: 0; height: 0; left: 0; max-width: none; position: absolute; right: 0; transition-property : all; transition-duration: .3s; width: auto; z-index: 10000; } .mapp-mini .mapp-sidebar.mapp-sidebar-open { height: 100%; } .mapp-button.mapp-view-list, .mapp-button.mapp-view-map { align-items: center; border: none; justify-content: center; text-transform: uppercase; } .mapp-view-list img, .mapp-view-map img { height: 16px !important; /* GT editor interferes */ margin-right: 5px; } .mapp-mini .mapp-directions { max-width: none; width: auto; } .mapp-footer { background-color: #f5f5f5; border-top: 1px solid lightgray; } /* ----------------------------------------------------------------------------------- Markers ----------------------------------------------------------------------------------- */ .mapp-marker { cursor: pointer; filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.4)); position: absolute; touch-action: none; /* For dragdrop */ } /* Label */ .mapp-marker img:nth-child(2) { height: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50%; } /* Image transforms base */ .mapp-marker img { transform-origin: 50% 100%; transition: transform .2s; width: 100%; } /* Scale image */ .mapp-marker-scale img { transform-origin: 50% 100%; transform: scale(1.2); perspective: 1001px; } /* Scale label - combine transforms */ .mapp-marker-scale img:nth-child(2) { transform: translate(-50%, -50%) scale(1.5); } .mapp-marker-circle { overflow: visible !important; } .mapp-marker-circle::before { background-color: rgba(255,255,255,0.7); border: 3px solid white; border-radius: 50%; box-sizing: border-box; content: ""; left: -25%; top: -25%; width: 150%; height: 150%; position: absolute; z-index: -1; } /* ----------------------------------------------------------------------------------- Directions ----------------------------------------------------------------------------------- */ .mapp-directions { padding: 10px; } .mapp-directions input { border: 1px solid gray; /* 2020 */ padding: 3px; } .mapp-directions .mapp-dir-toolbar { margin-top: 10px; } .mapp-directions .mapp-dir-from, .mapp-directions .mapp-dir-to { width: 80% ; line-height: normal ; } .mapp-directions .mapp-dir-from { margin-bottom: 10px; } .mapp-directions .mapp-dir-arrows { background: transparent url('../images/directions.png') no-repeat center center; background-position: -10px -489px; cursor: pointer; display: inline-block; height: 12px; margin: 0; padding: 0; position: relative; top: 10px; left: 5px; vertical-align: middle; width: 10px; } /* ----------------------------------------------------------------------------------- Custom controls ----------------------------------------------------------------------------------- */ /* Extra selectivity because iframe defaults contents to color black */ .mapp-main .mapp-menu-toggle { background: white url('../images/menu-2x.png') no-repeat center center; background-size: 24px 24px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; color: #777; cursor: pointer; height: 40px; outline: none; outline: none; /* Prevent focus outline */ position: absolute; top: 10px; left: 10px; bottom: 0; right: 0; width: 40px; z-index: 1000; } .mapp-menu { background-color: white; border: 1px solid lightgray; color: #606060; cursor: default; display: flex; flex-direction: column; overflow: auto; padding: 5px 0 5px 0; position: absolute; top: 50px; left: 10px; width: 150px; z-index: 1010; } .mapp-menu-items { flex: 1; } .mapp-menu-item { cursor: pointer; line-height: 20px; padding: 5px 10px 5px 10px; } .mapp-menu-item:hover { background-color: #eaeaea; color: black; } .mapp-menu-item.mapp-active { background-color: #eaeaea; color: black; font-weight: bold; } .mapp-menu-separator { padding: 0; border-bottom: 1px solid lightgray; } .mapp-menu-footer{ padding: 5px 10px; text-align: right; } .mapp-menu-help:hover { opacity: 1; } /* ----------------------------------------------------------------------------------- Dialog / modal ----------------------------------------------------------------------------------- */ .mapp-dialog { max-width: 90vw; max-height: 90vh; overflow: hidden; padding: 0; } /* Used to prevent scrolling on underlying body */ .mapp-dialog-noscroll { overflow: hidden; } /* Must wait until open, otherwise flash of content */ .mapp-dialog[open] { display: flex; flex-direction: column; } .mapp-dialog::backdrop { background-color: black; opacity: 0.6; } @media screen and (max-width: 650px) { .mapp-dialog { height: 100vh; max-height: none; max-width: none; width: 100vw; } } .mapp-dialog-title { font-size: 20px; padding: 15px; } .mapp-dialog-content { display: flex; flex-direction: column; flex: 1; overflow: hidden; padding: 0 15px; } .mapp-dialog-toolbar { align-items: center; display: flex; justify-content: space-between; padding: 15px; border-top: 1px solid lightgray; } .mapp-dialog-toolbar > div { display: flex; gap: 5px; } .mapp-dialog-nopad .mapp-dialog-title, .mapp-dialog-nopad .mapp-dialog-content, .mapp-dialog-nopad .mapp-dialog-toolbar { padding: 0; } .mapp-dialog-close { color: black; cursor: pointer; display: inline-block; font-family: sans-serif; font-size: 36px; line-height: 36px; position: absolute; text-align: center; top: 10px; right: 10px; z-index: 1; } .mapp-dialog-close:hover { color: rgb(0,124,186); } /* ----------------------------------------------------------------------------------- Mashup modal: ----------------------------------------------------------------------------------- */ .mapp-dialog.mapp-modal { height: 80vh; max-height: 900px; max-width: 1024px; width: 80vw; } .mapp-modal-title { margin-bottom: 15px; } .mapp-modal-title h1 { margin: 0; padding: 0 0 15px 0; } .mapp-modal-template { display: flex; flex: 1; flex-direction: row; } /* Featured image displays on the left by default */ .mapp-modal-featured { max-width: 40%; } .mapp-modal-featured img { height: 100% !important; object-fit: cover; width: 100% !important; max-width: none !important; } .mapp-modal-article { display: flex; flex: 1; flex-direction: column; overflow: auto; padding: 20px; } .mapp-modal-meta { display: flex; font-size: 12px; justify-content: space-between; margin-top: 50px; } .mapp-modal-spinner-wrapper { transform: translate(-200%, -200%); width: 5px; height: 5px; } /* https://www.w3schools.com/howto/howto_css_loader.asp */ .mapp-modal-spinner { background: transparent url(../images/spinner-2x.gif) no-repeat center center; height: 40px; width: 40px; margin-left: 10px; margin-right: 10px; position: absolute; top: 50%; left: 50%; } /* ----------------------------------------------------------------------------------- Iframe maps ----------------------------------------------------------------------------------- */ /* Newer component iframe doesn't need position absolute because wrapper uses aspect-ratio instead of padding-bottom */ .mapp-component-iframe { background-color: rgba(221,221,221,1); /* #ddd */ border: none; max-height: none !important; /* 2021 restricts */ overflow: hidden; z-index: 1; } /* Non-component iframe. Size only works with position absolute AND h/w=100%; z-index because 2020 page breaks appear over map */ .mapp-iframe { background-color: rgba(221,221,221,1); /* #ddd */ border: none; height: 100%; max-height: none !important; /* 2021 restricts */ overflow: hidden; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; z-index: 1; } .mapp-iframe-html, .mapp-iframe-body { box-sizing: border-box; color: black; font-family: sans-serif; font-size: 13px; height: 100%; margin: 0; padding: 0; } .mapp-iframe-body .mapp-wrapper { height: 100% !important; padding-bottom: 0 !important; } /* ----------------------------------------------------------------------------------- Errors overlay ----------------------------------------------------------------------------------- */ .mapp-errors-overlay { background-color: black; opacity: 0.7; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1100; /* Just over mapp-ib */ } .mapp-errors { background-color: white; border: 2px solid gray; color: black !important; overflow: auto; padding: 10px; position: absolute; top: 10%; left: 10%; bottom: 10%; right: 10%; z-index: 1101; } .mapp-errors * { font-size: 14px !important; } .mapp-errors-header { font-size: 18px !important; font-weight: bold !important; margin-bottom: 15px; text-align: center; } .mapp-errors-section { margin: 5px 0; } .mapp-errors-title { display: inline-block; border-bottom: 2px solid red; font-weight: 600 !important; margin: 10px 0; } .mapp-errors-toolbar { text-align: center; } .mapp-errors-apikey { background-color: #007CBA; border: 1px solid gray; color: white; cursor: pointer; display: inline-block; margin-top: 20px; padding: 10px; } .mapp-errors-apikey:hover { background-color: #006ba1; } .mapp-errors-apikey:active { box-shadow: inset 0 0 0 1px #fff, 0 0 0; } /* ----------------------------------------------------------------------------------- Compliance ----------------------------------------------------------------------------------- */ .mapp-layout > .cmplz-placeholder-element { height: auto !important; } .mapp-layout.mapp-has-iframe { position: relative; } .mapp-layout.mapp-has-iframe iframe, .mapp-layout.mapp-has-iframe div.cmplz-blocked-content-container, .mapp-layout.mapp-has-iframe [data-placeholder_class_index] { border: none; height: 100%; max-height: none !important; /* 2021 restricts */ overflow: hidden; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; z-index: 1; } /* ----------------------------------------------------------------------------------- Tables ----------------------------------------------------------------------------------- */ .mapp-table { border-collapse: collapse; display: table; table-layout: fixed; } .mapp-table .mapp-row { display: table-row; } .mapp-table .mapp-cell { display: table-cell; } .mapp-table .mapp-label { display: table-cell; } /* ----------------------------------------------------------------------------------- Generic controls ----------------------------------------------------------------------------------- */ div.mapp-control { display: inline-block; } .mapp-control > label { align-items:center; display: inline-flex; } .mapp-label-left { margin-right: 5px; } .mapp-label-right { margin-left: 5px; } .mapp-label-top { margin-bottom: 3px; } /* Nested components (checkboxes & radios) */ .mapp-control-checkbox label, .mapp-control-radio label { margin-right: 20px; } /* Try to remove some WP styling */ .mapp-control input[type="radio"], .mapp-control input[type="checkbox"] { margin: 0; } .mapp-help-text { font-style: italic; padding: 5px 0; } .mapp-help-link { display: inline-block; text-decoration: none; vertical-align: baseline; } .mapp-help-warning { border: 1px solid lightgray; border-left: 4px solid #dba617; margin-top: 10px; padding: 10px; } .mapp-help-error { border: 1px solid lightgray; border-left: 4px solid #d63638; margin-top: 10px; padding: 10px; } /* ----------------------------------------------------------------------------------- Misc ----------------------------------------------------------------------------------- */ .mapp-align-left { float: left; } .mapp-align-right { float: right; } .mapp-align-center { margin-left: auto; margin-right: auto; } .mapp-align-default {} .mapp-close { color: gray; cursor: pointer; display: inline-block; font-family: sans-serif; font-size: 18px; font-weight: bold; height: 20px; line-height: 20px; position: absolute; text-align: center; top: 0px; right: 0px; width: 20px; z-index: 1; } .mapp-close:after { content: "x"; } .mapp-close:hover { color: black; } img.mapp-icon, .mapp-icon img { box-shadow: none !important; /* 2012 applies box shadow to all images */ filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.4)); height: 32px; width: 32px; vertical-align: middle; } *[data-mapp-action] { cursor: pointer; } .mapp-max { width: 100%; } .mapp-caret:after { content: ""; display: inline-block; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid black; border-bottom: none; margin-left: 5px; vertical-align: middle; } /* Pseudo-buttons, to avoid theme styles */ .mapp-button, .mapp-link-button, .mapp-submit-button { align-items: center; cursor: pointer; display: flex; justify-content: center; line-height: normal; padding: 10px; white-space: nowrap; } .mapp-link-button { color: #4285F4; } .mapp-button { background-color: white; border: 1px solid lightgray; user-select: none; } .mapp-button:hover { background-color: #eee; } .mapp-submit-button { background-color: #4d90fe; border: 1px solid lightgray; color: white; } .mapp-submit-button:hover { background-color: #357ae8; } .mapp-button-disabled { color: #aaa; pointer-events: none; } .mapp-button-busy:after { background: transparent url(../images/spinner-2x.gif) no-repeat center center; background-size: 20px 20px; content: ''; height: 20px; margin-left: 10px; opacity: 0.5; width: 20px; } .mapp-button-caret:after { content: ''; display: inline-block; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid black; border-bottom: none; margin-left: 10px; } .mapp-button-disabled.mapp-button-caret:after { border-top: 5px solid #aaa; }