#map_customizer { display: flex; justify-content: center; flex-direction: row-reverse; align-items: flex-start; margin-bottom: 65px; } #posterarea { display: inline-block; width: calc(95% - 400px - 40px); flex: 1; } @media (min-width: 1000px) { #posterarea { flex: 1; } } @media (max-width: 1000px) { #posterarea { margin-bottom: 5%; } #map_customizer { flex-wrap: wrap; } } @media (max-width: 600px) { #posterarea { width: calc(95% - 40px); } } #map_wrapper_outter { transform-origin: top center; position: relative; margin: auto; width: calc(var(--poster_width) + 2px); height: calc(var(--poster_height) + 2px); line-height: normal; } @media (min-width: 600px) { #map_wrapper_outter { padding: 0 27px 27px 0; } } #map_wrapper_outter .leaflet-top { transform-origin: top right; left: -50px; } #map_wrapper { position: relative; margin-left: auto; margin-right: auto; } #mapsettings { width: 400px; background: #f7f7f3; min-height: 315px; position: relative; } @media (min-width: 1000px) { #mapsettings { margin-right: 5%; min-height: 715px; } } @media (max-width: 1000px) { #mapsettings { width: 100%; } } #mapsettings .fas:hover { color: rgba(0, 0, 0, 0.41); } .accordion { width: auto; display: block; list-style: none; margin: 0; margin: 20px 20px 70px 20px; } @media (min-width: 1000px) { .accordion-item { border-top: 1px solid #e5e5e5; } .accordion-item:nth-child(1) { border-top: none; } } .accordion-tabs { list-style: none; display: none; justify-content: space-around; margin: 10px 0 0 0; color: rgba(0, 0, 0, 0.41); border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .accordion-tabs li { margin: 20px 0 !important; float: left; margin: initial; cursor: pointer; } @media (max-width: 1000px) { .accordion-tabs { display: flex; } .accordion-thumb { display: none; } } .accordion-thumb { margin: 0; padding: 1rem 0 0.8rem 0; cursor: pointer; font-weight: normal; color: rgba(0, 0, 0, 0.41); } .accordion-thumb::before { content: ""; display: inline-block; height: 7px; width: 7px; margin-top: -4px; margin-right: 1rem; margin-left: 0.5rem; vertical-align: middle; border-right: 1px solid; border-bottom: 1px solid; transform: rotate(-45deg); transition: transform 0.2s ease-out; } .accordion-panel { margin: 0; padding-bottom: 0.8rem; padding: 0 2rem; display: none; } .accordion-item.is-active .accordion-thumb::before { transform: rotate(45deg); } .accordion .is-active h4 { color: rgba(0, 0, 0, 1); } .accordion-tabs .is-active { color: rgba(0, 0, 0, 1); border-bottom: 1px solid black; } .customize-button { display: inline-block; margin: 5px 10px 10px 0; align-self: center; padding: 10px 30px 9px 30px; color: #000; font-family: arial; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; text-align: center; background: #fff; border-radius: 10px; transition: all 0.1s ease-in-out; cursor: pointer; outline: 1px solid rgb(226, 226, 226); } .customize-button:hover, .customize-button-active { background: #fff; outline: 1px solid black; } .customize-button:active { transform: scale(1.025); } .areamask{ display: block; margin: 5px 10px 10px 0; align-self: center; padding: 10px 10px 9px 10px; color: #000; font-family: arial; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; background: #fff; transition: all 0.1s ease-in-out; cursor: pointer; outline: 1px solid rgb(226, 226, 226); } .areamask > span { color: #ccc; display: block; font-size: 8px; line-height: initial; } .map-settings-colors .customize-button:hover .tooltiptext { font-family: "Montserrat"; font-weight: 400; font-size: 10px; line-height: normal; background-color: rgba(0, 0, 0, 1); color: #fff; text-align: center; padding: 5px 5px; border-radius: 6px; width: 90px; margin-top: 13px; margin-left: -30px; position: absolute; letter-spacing: normal; text-transform: none; z-index: 1; } .map-settings-colors .customize-button:hover .tooltiptext::before { content: " "; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent black transparent; } .map-settings-colors .customize-button { color: transparent; border-radius: 100%; padding: 0; width: 40px; height: 40px; overflow: hidden; } .maplabels label { display: inline !important; } .map-settings-colors .customize-button .filter-background { height: 100%; width: 100%; border-radius: 100%; } .map-settings-colors .customize-button:hover, .map-settings-colors .customize-button-active { outline: 2px solid black; outline-offset: 2px; } .map-settings-texts .fa-field-icon { position: relative; z-index: 2; width: 30px; height: 30px; text-align: center; vertical-align: middle; line-height: 30px; } .map-settings-texts input[type=text] { height: 30px; width: calc(100% - 35px); margin-bottom: 15px; border: none; background: #fff; padding: 0 0 0 5px !important; } .map-settings-texts input[type=text]:read-only { color: lightgrey; } .map-settings-texts #customizeheadline_wrap{ margin-bottom: 15px; } #externalcode { width: calc(100% - 30px); font-size: 10px !important; line-height: normal !important; min-height: 10px; border: 0px; padding-right: 20px; overflow: hidden; } .outputfield { display: none; margin-top: 20px; } .outputfield .fa-field-icon { position: relative; z-index: 2; background-color: rgb(226, 226, 226); width: 30px; text-align: center; vertical-align: middle; height: auto; display: flex; align-items: center; justify-content: center; } .outputfield .fa-field-icon .tooltiptext { font-family: "Montserrat"; font-weight: 400; font-size: 12px; line-height: normal; visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; width: 120px; bottom: 105%; left: 50%; margin-left: -60px; position: absolute; z-index: 1; } .outputfield .fa-field-icon:hover .tooltiptext { visibility: visible; } .outputfield .fa-field-icon .tooltiptext::after { content: " "; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; } .measurements { pointer-events: none; font-size: 12px; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; color: #cecece; } @media (max-width: 600px) { .measurements { display: none; } } .measurements .width { position: absolute; bottom: 0; width: calc(100% - 27px); text-align: center; } .measurements .widtharrow::before { content: ""; width: 0; height: 0; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-right: 10px solid #cecece; position: absolute; left: -10px; top: -2px; } .measurements .widtharrow { position: absolute; left: 10px; bottom: 16px; width: calc(100% - 47px); height: 0; border-bottom: 2px solid #cecece; } .measurements .widtharrow::after { content: ""; width: 0; height: 0; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 10px solid #cecece; position: absolute; right: -10px; top: -2px; } .measurements .height { text-align: center; writing-mode: vertical-rl; height: 100%; float: right; } .measurements .heightarrow::before { content: ""; width: 0; height: 0; border-left: 3px solid transparent; border-bottom: 10px solid #cecece; border-right: 3px solid transparent; position: absolute; top: -10px; left: -2px; } .measurements .heightarrow { position: relative; float: right; top: 10px; height: calc(100% - 47px); width: 0; border-right: 2px solid #cecece; } .measurements .heightarrow::after { content: ""; width: 0; height: 0; border-right: 3px solid transparent; border-top: 10px solid #cecece; border-left: 3px solid transparent; position: absolute; bottom: -10px; left: -2px; } .lds-dual-ring { position: absolute; pointer-events: none; z-index: 9999; top: 0; left: 0; bottom: 0; right: 0; margin: auto; display: none; width: 80px; height: 80px; } .lds-dual-ring .inner { content: " "; display: block; width: 64px; height: 64px; margin: 8px; border-radius: 50%; border: 6px solid #fff; border-color: #fff transparent #fff transparent; animation: lds-dual-ring 1.2s linear infinite; } @keyframes lds-dual-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #addtocart { margin-top: 30px; width: 100%; position: absolute; bottom: 0; left: 0; right: 0; background: black; text-align: center; color: #fff; height: 50px; line-height: 50px; font-weight: 600; cursor: pointer; border: none; padding: inherit; border-radius: unset; -webkit-border-radius: unset; padding-right: 24px; } #addtocart * { color: #fff; font-size: 17px; } #addtocart .fa-spinner { margin-right: 10px; visibility: hidden; } #addtocart .fa-cart-plus { font-size: 17px; margin-left: 5px; font-size: medium; } #addtocart #atoctext { margin-right: 20px; display: inline-block; font-size: 14px; vertical-align: top; } .loader { font-family: "Font Awesome 5 Free"; -webkit-animation: fa-spin 2s infinite linear; animation: fa-spin 2s infinite linear; font-size: smaller; display: block; width: 22px; height: 22px; position: absolute; right: 68px; margin: 6px 0; text-decoration: none; filter: alpha(opacity=80); opacity: 0.8; text-align: center; font-weight: 900; line-height: 18px; font-size: smaller; } .loader:before { content: "\f110" !important; } #afterbuttonnotes { font-size: 12px; text-align: center; padding-top: 20px; position: absolute; bottom: -60px; width: 100%; height: 60px; } #afterbuttonnotes .pricenotes { display: block; margin-bottom: 30px; } .mapgenpopup { position: fixed; top: 0px; left: 0px; background: rgba(0, 0, 0, 0.75); width: 100%; height: 100%; display: none; z-index: 4000; } .mapgenpopup-content { width: 90%; overflow: auto; max-width: 700px; margin: 0 auto; box-sizing: border-box; padding: 40px; margin-top: 100px; box-shadow: 0px 2px 6px rgba(0, 0, 0, 1); border-radius: 3px; background: #fff; position: relative; } .mapgenclose-button { width: 40px; height: 40px; line-height: 40px; position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.8); font-size: 20px; text-align: center; color: #fff; text-decoration: none; z-index: 8000; } .mapgenclose-button:hover { background: rgba(0, 0, 0, 1); } .leaflet-bar a, .leaflet-bar a:hover { background-color: rgba(255, 255, 255, 0.8); } .starsdatetime>input { background: white; font-family: Montserrat; font-size: 15px !important; text-transform: none; display: inline-block; width: auto; padding: 0 0 0 5px !important; margin: 0 !important; border: none !important; height: 30px !important; font-weight: normal; } .starsdatetime>input#starsdate { width: 140px; } #zodiacs label { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 75px; background: #fff; height: 50px; margin: 6px; font-size: 12px; padding: 4px; line-height: 12px; transition: all 0.1s ease-in-out; } #zodiacs label:hover { outline: 1px solid black; outline-offset: 2px; background: #f7f7f7; } #zodiacs .zd_active { outline: 2px solid black !important; outline-offset: 0px !important; } #zodiacs { display: flex; width: 100%; flex-wrap: wrap; margin: 10px 0 20px -7px; } .zodiacinfotitle{ margin-top: 20px; } #zodiacs img { width: 12px; margin-bottom: 8px; } #zodiacs input { display: none; } #zodiacs label span { text-align: center; } #zodiacs label .tooltiptext { display: none; font-family: "Montserrat"; font-weight: 400; font-size: 10px; line-height: normal; background-color: rgba(0, 0, 0, 1); color: #fff; text-align: center; padding: 5px 5px; border-radius: 6px; width: 210px; margin-top: 124px; margin-left: 0; position: absolute; letter-spacing: normal; text-transform: none; z-index: 1; } #zodiacs label:hover.zdnotvisible .tooltiptext { display: block; } #zodiacs .tooltiptext::before { content: " "; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent black transparent; } #zodiacs .zodiactitle { font-weight: 600; } #zodiacs .zodiactime { font-size: 9px; } #patch_1 { fill: none; } #starmap { stroke: white; stroke-width: 1px; } .zodiac_active { stroke: white; stroke-width: 2.5px; } .zodiac_active_highlight { stroke: white; stroke-width: 5px; } #zodiacinfo{ display: block; } .normal { display: block; } .hidden { display: none; } .customize-button.customize-button-active[data-design="star_zodiac"] ~ .normal{ display: none; } .customize-button.customize-button-active[data-design="star_zodiac"]~ .hidden { display: block; } .bg-aquarius { width: 12px; height: 12px; background: url('css_sprites.png') -4px -4px; } x .bg-aries { width: 12px; height: 12px; background: url('css_sprites.png') -24px -4px; } x .bg-cancer { width: 12px; height: 12px; background: url('css_sprites.png') -4px -24px; } x .bg-capricorn { width: 12px; height: 12px; background: url('css_sprites.png') -24px -24px; } x .bg-gemini { width: 12px; height: 12px; background: url('css_sprites.png') -44px -4px; } x .bg-leo { width: 12px; height: 12px; background: url('css_sprites.png') -44px -24px; } x .bg-libra { width: 12px; height: 12px; background: url('css_sprites.png') -4px -44px; } x .bg-pisces { width: 12px; height: 12px; background: url('css_sprites.png') -24px -44px; } x .bg-sagittarius { width: 12px; height: 12px; background: url('css_sprites.png') -44px -44px; } x .bg-scorpio { width: 12px; height: 12px; background: url('css_sprites.png') -64px -4px; } x .bg-taurus { width: 12px; height: 12px; background: url('css_sprites.png') -64px -24px; } x .bg-virgo { width: 12px; height: 12px; background: url('css_sprites.png') -64px -44px; } #mapsettings [type=checkbox] { width: 1rem; height: 1rem; color: black; vertical-align: middle; -webkit-appearance: none; background: none; border: 0; outline: 0; flex-grow: 0; border-radius: 50%; background-color: #FFFFFF; transition: background 300ms; cursor: pointer; } #mapsettings [type=checkbox]::before { content: ""; color: transparent; display: block; width: inherit; height: inherit; border-radius: inherit; border: 0; background-color: transparent; background-size: contain; box-shadow: inset 0 0 0 1px #CCD3D8; } #mapsettings [type=checkbox]:checked { background-color: currentcolor; } #mapsettings [type=checkbox]:checked::before { box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath d='M15.88 8.29L10 14.17l-1.88-1.88a.996.996 0 1 0-1.41 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0z' fill='%23fff'/%3E %3C/svg%3E"); } #mapsettings [type=checkbox]:disabled { background-color: #CCD3D8; opacity: 0.84; cursor: not-allowed; } .toggle { --togglewidth: 30px; --toggleheight: calc(var(--togglewidth) / 2); --toggleborder-radius: calc(var(--toggleheight) / 2); display: inline-block; cursor: pointer; } .toggle__input { display: none; } .toggle__fill { display: inline-block; margin: 0px 5px -2px 5px; position: relative; width: var(--togglewidth); height: var(--toggleheight); border-radius: var(--toggleborder-radius); background: #ddd; transition: background 0.2s; } .toggle__fill::after { content: ""; position: absolute; top: 0; left: 0; height: var(--toggleheight); width: var(--toggleheight); background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); border-radius: var(--toggleborder-radius); transition: transform 0.2s; } .toggle__input:checked~.toggle__fill { background: #000; } .toggle__input:checked~.toggle__fill::after { transform: translateX(var(--toggleheight)); } .customize-caption { font-size: 15px; color: #000; margin: 5px 0; } .map-settings-styles{ padding: 0 0 0 2rem; } .map-settings-styles .instruction{ font-weight: bold; display: inline-block; margin-bottom: 10px; } .style-first-step, .style-second-step, .style-third-step { margin-bottom: 20px; } .style-second-step, .style-third-step{ filter: blur(5px); pointer-events: none; user-select: none; transition: 0.5s all; } .previewselector{ display: flex; } .style-first-step .customize-button{ width: 120px; padding: 10px; margin:5px; text-transform: initial; line-height: normal; align-self: stretch; background:rgba(0, 0, 0, 0.1) } .buttonpreview{ display: inline-block; background: white; color: black; width: 120px; height: 160px; outline: 1px black solid; outline-offset: -6px; margin-bottom:5px; } .buttonpreview > .circle{ width: 80px; height: 80px; background: #0f3f57; margin: 20px; border-radius: 40px; background: url(/wp-content/uploads/customizer/img/preview_stars4.jpg); } .buttonpreview.zodiac >.circle { background: url(/wp-content/uploads/customizer/img/preview_stars3.jpg); margin: 20px 20px 10px 20px; } .buttonpreview > .text{ width: 80px; margin: 0px 20px 0 20px; font-size: 7px; line-height: 7px; text-align: center; } .buttonpreview > .text>span { display: block; background: black; font-size: 6px; line-height: initial; text-align: center; width: fit-content; margin: 3px auto; pointer-events: none; user-select: none; } .buttonpreview > .text > span:nth-child(2){ font-size: 5px } .buttonpreview > .text > span:nth-child(3) { margin-top: 1px; font-size: 3px } .hiddentext{ display: none; } .gracefulnote{ display: none; margin-bottom: 15px; background: antiquewhite; padding: 5px 0 5px 5px; line-height: 25px; width: calc(100% - 35px); } .gracefulnote > span { font-family: 'gracefulfont'; font-size: 25px; line-height: 20px; margin-left: 3px; position: relative; top: 4px; } #customizefields{ display: none; }