/* Utilities */ .mrc-w-100 { width: 100% !important; } .mrc-mb-0 { margin-bottom: 0; } .mrc-mt-0 { margin-top: 0; } .merchant-animated-buttons .merchant-button-flash:hover { -webkit-animation: merchant-flash 1s infinite both; animation: merchant-flash 1s infinite both; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .merchant-animated-buttons .merchant-button-bounce:hover { -webkit-animation: merchant-bounce 0.3s alternate; animation: merchant-bounce 0.3s alternate; -webkit-animation-iteration-count: 4; animation-iteration-count: 4; } .merchant-animated-buttons .merchant-button-zoom-in:hover { -webkit-transform: scale(1.2); transform: scale(1.2); } .merchant-animated-buttons .merchant-button-shake:hover { -webkit-animation: merchant-shake 0.3s; animation: merchant-shake 0.3s; -webkit-animation-iteration-count: 2; animation-iteration-count: 2; } .merchant-animated-buttons .merchant-button-pulse:hover { -webkit-animation: merchant-pulse 1.5s ease-in-out infinite both; animation: merchant-pulse 1.5s ease-in-out infinite both; } .merchant-animated-buttons .merchant-button-jello-shake:hover { -webkit-animation: merchant-jello-shake 1.5s infinite both; animation: merchant-jello-shake 1.5s infinite both; } .merchant-animated-buttons .merchant-button-wobble:hover { -webkit-animation: merchant-wobble 1.5s ease-in-out infinite both; animation: merchant-wobble 1.5s ease-in-out infinite both; } .merchant-animated-buttons .merchant-button-vibrate:hover { -webkit-animation: merchant-vibrate 0.3s linear 4 both; animation: merchant-vibrate 0.3s linear 4 both; } .merchant-animated-buttons .merchant-button-swing:hover { -webkit-animation: merchant-swing 2s ease-in-out infinite alternate; animation: merchant-swing 2s ease-in-out infinite alternate; } .merchant-animated-buttons .merchant-button-tada:hover { -webkit-animation: merchant-tada 1s infinite both; animation: merchant-tada 1s infinite both; } @-webkit-keyframes merchant-flash { 0%, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes merchant-flash { 0%, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @-webkit-keyframes merchant-bounce { to { -webkit-transform: scale(1.2); transform: scale(1.2); } } @keyframes merchant-bounce { to { -webkit-transform: scale(1.2); transform: scale(1.2); } } @-webkit-keyframes merchant-shake { 33% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 67% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } to { -webkit-transform: rotate(10deg); transform: rotate(10deg); } } @keyframes merchant-shake { 33% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 67% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } to { -webkit-transform: rotate(10deg); transform: rotate(10deg); } } @-webkit-keyframes merchant-pulse { 0% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: center center; transform-origin: center center; } 10% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-transform: scale(0.91); transform: scale(0.91); } 17% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: scale(0.98); transform: scale(0.98); } 33% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-transform: scale(0.87); transform: scale(0.87); } 45% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: scale(1); transform: scale(1); } } @keyframes merchant-pulse { 0% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: center center; transform-origin: center center; } 10% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-transform: scale(0.91); transform: scale(0.91); } 17% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: scale(0.98); transform: scale(0.98); } 33% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-transform: scale(0.87); transform: scale(0.87); } 45% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes merchant-jello-shake { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes merchant-jello-shake { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } @-webkit-keyframes merchant-wobble { 0%, to { -webkit-transform: translateX(0); transform: translateX(0); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } 15% { -webkit-transform: translateX(-30px) rotate(-6deg); transform: translateX(-30px) rotate(-6deg); } 30% { -webkit-transform: translateX(15px) rotate(6deg); transform: translateX(15px) rotate(6deg); } 45% { -webkit-transform: translateX(-15px) rotate(-3.6deg); transform: translateX(-15px) rotate(-3.6deg); } 60% { -webkit-transform: translateX(9px) rotate(2.4deg); transform: translateX(9px) rotate(2.4deg); } 75% { -webkit-transform: translateX(-6px) rotate(-1.2deg); transform: translateX(-6px) rotate(-1.2deg); } } @keyframes merchant-wobble { 0%, to { -webkit-transform: translateX(0); transform: translateX(0); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } 15% { -webkit-transform: translateX(-30px) rotate(-6deg); transform: translateX(-30px) rotate(-6deg); } 30% { -webkit-transform: translateX(15px) rotate(6deg); transform: translateX(15px) rotate(6deg); } 45% { -webkit-transform: translateX(-15px) rotate(-3.6deg); transform: translateX(-15px) rotate(-3.6deg); } 60% { -webkit-transform: translateX(9px) rotate(2.4deg); transform: translateX(9px) rotate(2.4deg); } 75% { -webkit-transform: translateX(-6px) rotate(-1.2deg); transform: translateX(-6px) rotate(-1.2deg); } } @-webkit-keyframes merchant-vibrate { 0% { -webkit-transform: translate(0); transform: translate(0); } 20% { -webkit-transform: translate(-2px, 2px); transform: translate(-2px, 2px); } 40% { -webkit-transform: translate(-2px, -2px); transform: translate(-2px, -2px); } 60% { -webkit-transform: translate(2px, 2px); transform: translate(2px, 2px); } 80% { -webkit-transform: translate(2px, -2px); transform: translate(2px, -2px); } to { -webkit-transform: translate(0); transform: translate(0); } } @keyframes merchant-vibrate { 0% { -webkit-transform: translate(0); transform: translate(0); } 20% { -webkit-transform: translate(-2px, 2px); transform: translate(-2px, 2px); } 40% { -webkit-transform: translate(-2px, -2px); transform: translate(-2px, -2px); } 60% { -webkit-transform: translate(2px, 2px); transform: translate(2px, 2px); } 80% { -webkit-transform: translate(2px, -2px); transform: translate(2px, -2px); } to { -webkit-transform: translate(0); transform: translate(0); } } @-webkit-keyframes merchant-swing { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 20% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } 40% { -webkit-transform: rotate(-3deg); transform: rotate(-3deg); } 60% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } 80% { -webkit-transform: rotate(-3deg); transform: rotate(-3deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes merchant-swing { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 20% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } 40% { -webkit-transform: rotate(-3deg); transform: rotate(-3deg); } 60% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } 80% { -webkit-transform: rotate(-3deg); transform: rotate(-3deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @-webkit-keyframes merchant-tada { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes merchant-tada { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } .merchant-pcr-app * { outline: none; border: none; -webkit-box-sizing: border-box; box-sizing: border-box; } .merchant-pcr-app input:focus, .merchant-pcr-app input.pcr-active, .merchant-pcr-app button:focus, .merchant-pcr-app button.pcr-active { -webkit-box-shadow: none; box-shadow: none; } .merchant-pcr-app .pcr-palette:focus, .merchant-pcr-app .pcr-slider:focus { -webkit-box-shadow: none; box-shadow: none; } .merchant-pcr-app { position: fixed; z-index: 999999; top: 0; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-radius: 0.1em; opacity: 0; visibility: hidden; -webkit-transition: opacity 0.2s, visibility 0s 0.2s; transition: opacity 0.2s, visibility 0s 0.2s; -webkit-box-shadow: 0 0.15em 1.5em 0 rgba(0, 0, 0, 0.1), 0 0 1em 0 rgba(0, 0, 0, 0.03); box-shadow: 0 0.15em 1.5em 0 rgba(0, 0, 0, 0.1), 0 0 1em 0 rgba(0, 0, 0, 0.03); background: #fff; } .merchant-pcr-app.visible { visibility: visible; opacity: 1; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; } .merchant-pcr-app .pcr-swatches { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .merchant-pcr-app .pcr-swatches > button { cursor: pointer; font-size: 1em; position: relative; z-index: 1; width: 20px; height: 20px; margin: 0; padding: 0; background: none; } .merchant-pcr-app .pcr-swatches > button::before { position: absolute; content: ""; top: 0; left: 0; bottom: 0; right: 0; background-image: url('data:image/svg+xml;utf8, '); background-size: 6px; border-radius: 20px; border: 1px solid transparent; z-index: -1; } .merchant-pcr-app .pcr-swatches > button::after { content: ""; position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; border-radius: 20px; border: 1px solid rgba(0, 0, 0, 0.3); background: var(--pcr-color); } .merchant-pcr-app .pcr-interaction { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 5px; } .merchant-pcr-app .pcr-interaction input { font-size: 11px; border-radius: 3px; } .merchant-pcr-app .pcr-interaction input:focus { border-color: #3858E9; } .merchant-pcr-app .pcr-interaction .pcr-result { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin: 0; width: 100%; max-width: 100%; } .merchant-pcr-app .pcr-interaction .pcr-clear { cursor: pointer; margin: 0; padding: 0 10px; border-radius: 3px; color: #fff; background-color: #3858E9; text-transform: uppercase; } .merchant-pcr-app .pcr-selection .pcr-picker { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: absolute; height: 16px; width: 16px; border-radius: 16px; background-color: #fff !important; -webkit-box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2); box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2); } .merchant-pcr-app .pcr-selection .pcr-color-palette, .merchant-pcr-app .pcr-selection .pcr-color-chooser, .merchant-pcr-app .pcr-selection .pcr-color-opacity { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; cursor: -webkit-grab; cursor: grab; } .merchant-pcr-app .pcr-selection .pcr-color-palette:active, .merchant-pcr-app .pcr-selection .pcr-color-chooser:active, .merchant-pcr-app .pcr-selection .pcr-color-opacity:active { cursor: -webkit-grabbing; cursor: grabbing; } .merchant-pcr-app[data-theme=merchant] { width: 250px; max-width: 95vw; padding: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 10px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .merchant-pcr-app[data-theme=merchant] .pcr-selection { display: grid; grid-gap: 10px; grid-template-columns: 1fr 4fr; grid-template-rows: 5fr auto auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 150px; width: 100%; align-self: flex-start; } .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview { grid-area: 2/1/4/1; height: 100%; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview .pcr-last-color { display: none; } .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview .pcr-current-color { position: relative; width: 32px; height: 32px; border-radius: 32px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.3); background-color: var(--pcr-color); } .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview .pcr-current-color::before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml;utf8, '); background-size: 6px; border-radius: 100%; z-index: -1; } .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette { grid-area: 1/1/2/3; width: 100%; height: 100%; z-index: 1; } .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette .pcr-picker { width: 18px; height: 18px; border: 2px solid #fff; -webkit-box-shadow: 0 0 1px 2px #000, inset 0 0 1px 1px #000; box-shadow: 0 0 1px 2px #000, inset 0 0 1px 1px #000; background-color: transparent !important; } .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette .pcr-palette { width: 100%; height: 100%; } .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette .pcr-palette::before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml;utf8, '); background-size: 8px; z-index: -1; } .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser { grid-area: 2/2/2/2; } .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity { grid-area: 3/2/3/2; } .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser, .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity { height: 12px; margin-right: 10px; } .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser .pcr-picker, .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity .pcr-picker { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser .pcr-slider, .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity .pcr-slider { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser .pcr-slider { background: -webkit-gradient(linear, left top, right top, from(red), color-stop(#ff0), color-stop(lime), color-stop(cyan), color-stop(blue), color-stop(#f0f), to(red)); background: linear-gradient(to right, red, #ff0, lime, cyan, blue, #f0f, red); } .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity .pcr-slider { background: -webkit-gradient(linear, left top, right top, from(transparent), to(black)), url('data:image/svg+xml;utf8, '); background: linear-gradient(to right, transparent, black), url('data:image/svg+xml;utf8, '); background-size: 100%, 6px; } /* Buttons */ .button-tertiary { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; padding: 0.4375rem 1rem; font-size: 0.875rem; font-weight: 600; line-height: 1.5; white-space: nowrap; text-transform: none; text-decoration: none; color: #212b36; background-color: #fff; border: 1px solid #c4cdd5; border-radius: 0.25rem; -webkit-transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1); transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1); transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1); transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1); } .button-tertiary:hover, .button-tertiary:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; } /* Botiga Dashboard Tabs Nav Items */ .merchant-tabs-nav { padding: 0 20px; margin-bottom: -100%; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } .merchant-tabs-nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0; } .merchant-tabs-nav .merchant-tabs-nav-item .merchant-tabs-nav-link { position: relative; font-size: 14px; line-height: 20px; padding: 16px; color: #6D7175; text-decoration: none; -webkit-transition: ease color 300ms; transition: ease color 300ms; outline: none; -webkit-box-shadow: none; box-shadow: none; } .merchant-tabs-nav .merchant-tabs-nav-item .merchant-tabs-nav-link:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background-color: transparent; border-radius: 4px 4px 0 0; } .merchant-tabs-nav .merchant-tabs-nav-item.active .merchant-tabs-nav-link { color: #3858E9; font-weight: 500; } .merchant-tabs-nav .merchant-tabs-nav-item.active .merchant-tabs-nav-link:after { background-color: #3858E9; } .merchant-tabs-nav .merchant-tabs-nav-item:hover .merchant-tabs-nav-link, .merchant-tabs-nav .merchant-tabs-nav-item:focus .merchant-tabs-nav-link, .merchant-tabs-nav .merchant-tabs-nav-item:active .merchant-tabs-nav-link { color: #3858E9; } .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 18px; font-weight: 600; line-height: 26px; padding: 9px 16px; border-bottom: 0; color: #1e1e1e; -webkit-transition: ease color 200ms; transition: ease color 200ms; } .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link svg { margin-right: 8px; } .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link svg path { -webkit-transition: ease fill 200ms; transition: ease fill 200ms; } .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link:after { content: none; } .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link:before { content: ""; position: absolute; top: 0; left: 0; background-color: transparent; width: 4px; height: 100%; border-radius: 0 4px 4px 0; opacity: 0; visibility: hidden; -webkit-transition: ease opacity 200ms; transition: ease opacity 200ms; } .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:hover .merchant-tabs-nav-link, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:focus .merchant-tabs-nav-link, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:active .merchant-tabs-nav-link { color: #757575; } .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:hover .merchant-tabs-nav-link svg path, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:focus .merchant-tabs-nav-link svg path, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:active .merchant-tabs-nav-link svg path { fill: #757575; } .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:hover .merchant-tabs-nav-link:before, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:focus .merchant-tabs-nav-link:before, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:active .merchant-tabs-nav-link:before { background-color: #e1e1e1; opacity: 1; visibility: visible; } .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item.active .merchant-tabs-nav-link { color: #3858E9; } .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item.active .merchant-tabs-nav-link svg path { fill: #3858E9; } .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item.active .merchant-tabs-nav-link:before { background-color: #3858E9; opacity: 1; visibility: visible; } .merchant-tabs-nav.merchant-tabs-nav-vertical { padding: 0; margin-left: -20px; } .merchant-tabs-nav.merchant-tabs-nav-vertical ul { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 0; } .merchant-tabs-nav.merchant-tabs-nav-no-negative-margin { margin-bottom: 0; -webkit-transform: none; transform: none; } /* Botiga Tabs Content */ .merchant-tab-content { display: none; } .merchant-tab-content.active { display: block; } .toplevel_page_merchant { background-color: #F4F6F8; } .toplevel_page_merchant #wpbody-content > .updated, .toplevel_page_merchant #wpbody-content > .notice { display: none; } .merchant-top-bar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; background-color: #FFF; margin: 0 0 30px -20px; padding: 18px 20px; } .merchant-top-bar * { -webkit-box-sizing: border-box; box-sizing: border-box; } .merchant-top-bar * *:before, .merchant-top-bar * *:after { -webkit-box-sizing: border-box; box-sizing: border-box; } .merchant-top-bar .merchant-top-bar-infos { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .merchant-top-bar .merchant-top-bar-infos .merchant-top-bar-info-item { position: relative; padding: 0 10px; } .merchant-top-bar .merchant-top-bar-infos .merchant-top-bar-info-item + .merchant-top-bar-info-item:before { content: ""; position: absolute; top: 50%; left: 0; height: 17px; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-left: 1px solid #F0F0F0; } .merchant-top-bar .merchant-version { font-size: 13px; line-height: 13px; color: #97A3B6; } .merchant-top-bar .merchant-version strong { position: relative; top: 1px; } .merchant-top-bar .merchant-version .merchant-badge { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-left: 5px; font-size: 9px; line-height: 10px; } .merchant-top-bar .merchant-notifications { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 27px; height: 27px; border: 1px solid #DFDFDF; border-radius: 35px; } .merchant-top-bar .merchant-notifications:focus { -webkit-box-shadow: none; box-shadow: none; } .merchant-top-bar .merchant-notifications .merchant-notifications-count { position: absolute; top: -8px; right: -7px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 16px; height: 16px; color: #FFF; background-color: #FA1212; border-radius: 35px; font-size: 10px; line-height: 1; } .merchant-top-bar .merchant-notifications.read .merchant-notifications-count { display: none; } .merchant-top-bar .merchant-website { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; font-size: 13px; line-height: 16px; color: #3858E9; text-decoration: none; } /* Notifications Sidebar */ .merchant-notifications-sidebar { position: fixed; top: 96px; right: 0; width: 100%; max-width: 500px; height: calc(100vh - 92px); background-color: #FFF; -webkit-box-shadow: -10px 12px 14px rgba(0, 0, 0, 0.05); box-shadow: -10px 12px 14px rgba(0, 0, 0, 0.05); opacity: 0; visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); -webkit-transition: ease transform 300ms, ease opacity 300ms; transition: ease transform 300ms, ease opacity 300ms; z-index: 1000; } .merchant-notifications-sidebar.opened { opacity: 1; visibility: visible; -webkit-transform: none; transform: none; } .merchant-notifications-sidebar.closing { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .merchant-notifications-sidebar .merchant-notifications-sidebar-close { position: absolute; top: 15px; right: 15px; -webkit-transition: ease opacity 300ms; transition: ease opacity 300ms; } .merchant-notifications-sidebar .merchant-notifications-sidebar-close:hover { opacity: 0.7; } .merchant-notifications-sidebar .merchant-notifications-sidebar-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; background-color: #EAEEF2; padding: 20px 22px; } .merchant-notifications-sidebar .merchant-notifications-sidebar-header .merchant-notifications-sidebar-header-icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 40px; height: 40px; background-color: #FFF; border: 1px solid #EBEDEF; border-radius: 35px; } .merchant-notifications-sidebar .merchant-notifications-sidebar-header .merchant-notifications-sidebar-header-icon svg { position: relative; top: -2px; } .merchant-notifications-sidebar .merchant-notifications-sidebar-header .merchant-notifications-sidebar-header-content h3 { font-size: 16px; line-height: 26px; font-weight: 600; color: #3858E9; margin: 0; } .merchant-notifications-sidebar .merchant-notifications-sidebar-header .merchant-notifications-sidebar-header-content p { font-size: 13px; line-height: 18px; color: #757575; margin: 0; } .merchant-notifications-sidebar .merchant-notifications-sidebar-tabs { position: relative; } .merchant-notifications-sidebar .merchant-notifications-sidebar-tabs:after { content: ""; position: absolute; bottom: -10px; left: 20px; width: calc(100% - 40px); border-bottom: 1px solid #F0F0F1; } .merchant-notifications-sidebar .merchant-notifications-sidebar-tabs + .merchant-notifications-sidebar-body { max-height: calc(100vh - 232px); } .merchant-notifications-sidebar .merchant-notifications-sidebar-body { padding: 20px; overflow-y: auto; max-height: calc(100vh - 230px); } .merchant-notifications-sidebar .merchant-notifications-sidebar-body::-webkit-scrollbar { width: 5px; } .merchant-notifications-sidebar .merchant-notifications-sidebar-body::-webkit-scrollbar-track { background: #e2e2e2; } .merchant-notifications-sidebar .merchant-notifications-sidebar-body::-webkit-scrollbar-thumb { background-color: #CCC; } /* Notifications (card) */ .merchant-notification .merchant-notification-date { display: block; font-size: 13px; line-height: 18px; color: #757575; } .merchant-notification .merchant-notification-date + .merchant-notification-content { margin-top: 20px; } .merchant-notification .changelog-tag { display: inline-block; font-size: 10px; line-height: 18px; color: #FFF; padding: 0px 10px; background-color: #CCC; border-radius: 3px; text-transform: uppercase; font-weight: 600; margin-bottom: 5px; } .merchant-notification .changelog-tag.changelog-added { background-color: #73B189; } .merchant-notification .changelog-tag.changelog-changed { background-color: #F6CA45; } .merchant-notification .changelog-tag.changelog-fixed { background-color: #967BE3; } .merchant-notification .changelog-description { display: block; font-size: 13px; line-height: 21px; font-weight: 400; color: #757575; margin-top: 5px; } .merchant-notification .merchant-notification-content ul { margin: 0; } .merchant-notification .merchant-notification-content ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; font-size: 16px; line-height: 26px; font-weight: 600; color: #101517; } .merchant-notification .merchant-notification-content ul li + li { margin-top: 15px; padding-top: 15px; border-top: 1px solid #E7E7E7; } .merchant-notification + .merchant-notification { margin: 20px -20px 0px; padding: 20px 20px 0px; border-top: 1px solid #E7E7E7; } .merchant-wrap { padding-left: 5px; padding-right: 5px; } .merchant-wrap * { -webkit-box-sizing: border-box; box-sizing: border-box; } .merchant-wrap * *:before, .merchant-wrap * *:after { -webkit-box-sizing: border-box; box-sizing: border-box; } .merchant-modules-panel { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 20px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .merchant-modules-header { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 30px; } .merchant-modules-header-left, .merchant-modules-header-right { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 10px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .merchant-admin-hand-icon { width: 24px; height: auto; margin-left: 7px; position: relative; top: 2px; } .merchant-modules-header-heading { font-size: 24px; line-height: 34px; font-weight: 500; color: #101517; } .merchant-modules-header-subheading { font-size: 16px; line-height: 1.35em; color: #7B7B7B; font-weight: 400; } .merchant-modules-header-status { margin-top: 20px; margin-bottom: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 20px; } .merchant-modules-header-status-box { min-width: 175px; display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 10px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 20px; font-size: 14px; font-weight: 500; color: #101517; background-color: #fff; -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15); border-radius: 4px; } .merchant-modules-header-status-box span { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 5px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .merchant-modules-header-status-box strong { color: #101517; font-size: 40px; line-height: 1em; } .merchant-modules-header-image { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .merchant-modules-header-image svg { width: 300px; } @media (max-width: 1400px) { .merchant-modules-header-image img { max-width: 450px; margin-top: 20px; } } .merchant-modules-header-shortlinks { margin: 20px 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-radius: 4px; border: 2px solid #F0F0F1; background-color: #fff; border-radius: 4px; } .merchant-modules-header-shortlinks li { margin: 0 15px; border-bottom: 1px solid #EFEFEF; } .merchant-modules-header-shortlinks li:last-child { border-bottom: none; margin-bottom: 5px; } .merchant-modules-header-shortlinks li:first-child { margin-top: 5px; } .merchant-modules-header-shortlinks a { font-size: 14px; display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 8px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; color: #757575; text-decoration: none; padding: 10px 0; } .merchant-modules-header-shortlinks a:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; } .merchant-modules-header-shortlinks span { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .merchant-modules-header-shortlinks strong { color: #101517; font-weight: 500; } .merchant-modules-box { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 20px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 20px; background-color: #fff; -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15); border-radius: 4px; } .merchant-modules-box-heading { font-size: 20px; font-weight: 500; line-height: 30px; color: #101517; } .merchant-modules-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 20px; } .merchant-modules-list-item { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 10px; padding: 20px; text-decoration: none; border: 2px solid #F0F0F1; background-color: #fff; border-radius: 4px; -webkit-transition: all 0.2s; transition: all 0.2s; } .merchant-modules-list-item.merchant-module-deactivated-by-bp { text-transform: uppsercase; } .merchant-modules-list-item.merchant-module-deactivated-by-bp .merchant-modules-list-item-icon, .merchant-modules-list-item.merchant-module-deactivated-by-bp .merchant-modules-list-item-content { opacity: 0.5; } .merchant-modules-list-item:hover { -webkit-box-shadow: 0px 8px 12px 0px rgba(240, 240, 241, 0.7); box-shadow: 0px 8px 12px 0px rgba(240, 240, 241, 0.7); } .merchant-modules-list-item:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; } .merchant-badge { color: #99A5B8; padding: 3px 6px; border: 1px solid #DFDFDF; border-radius: 2px; font-weight: 700; } .merchant-badge.merchant-badge-pro { color: #3858e9; border-color: #3858e9; } .merchant-pro-badge.merchant-pro-tooltip { position: relative; } .merchant-pro-badge.merchant-pro-tooltip:before { content: attr(data-tooltip-message); position: absolute; right: -30px; bottom: calc(100% + 11px); color: #FFF; font-size: 11px; line-height: 16px; padding: 3px 6px; background-color: #1E1E1E; white-space: nowrap; opacity: 0; visibility: hidden; -webkit-transform: translate3d(0, 6px, 0); transform: translate3d(0, 6px, 0); -webkit-transition: ease opacity 300ms, ease transform 300ms; transition: ease opacity 300ms, ease transform 300ms; z-index: 2; } .merchant-pro-badge.merchant-pro-tooltip:after { content: ""; position: absolute; bottom: calc(100% + 3px); right: 10px; width: 0; height: 0; border-style: solid; border-width: 4px 4px 4px 4px; border-color: #1E1E1E transparent transparent transparent; opacity: 0; visibility: hidden; -webkit-transform: translate3d(0, 6px, 0); transform: translate3d(0, 6px, 0); -webkit-transition: ease opacity 300ms, ease transform 300ms; transition: ease opacity 300ms, ease transform 300ms; z-index: 2; } .merchant-pro-badge.merchant-pro-tooltip:hover:before, .merchant-pro-badge.merchant-pro-tooltip:hover:after { opacity: 1; visibility: visible; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .merchant-modules-list-item-badge-wrapper { position: absolute; top: 20px; right: 20px; } .merchant-modules-list-item-removed-by-bp .merchant-pro-badge { padding: 3px 7px; color: #FFF; border: 1px solid #212121; background-color: #212121; border-radius: 3px; font-size: 10px; line-height: 1.2; font-weight: 400; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; top: -2px; text-transform: uppercase; } .merchant-modules-list-item-removed-by-bp .merchant-pro-badge:before { font-weight: 400; text-transform: none; } .merchant-modules-list-item-woo-required .merchant-pro-badge { padding: 1px 2px; color: #674399; border: 1px solid #674399; border-radius: 3px; font-size: 9px; line-height: 1.2; font-weight: 700; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; top: -2px; } .merchant-modules-list-item-woo-required .merchant-pro-badge:before { font-weight: 400; } .merchant-modules-list-item-woo-required + .merchant-modules-list-item-upsell { right: 53px; } .merchant-modules-list-item-icon { display: -webkit-box; display: -ms-flexbox; display: flex; } .merchant-modules-list-item-icon svg { width: 18px; height: 26px; fill: #787C82; } .merchant-modules-list-item-icon svg.stroke-based { fill: none; stroke: #787C82; } .merchant-modules-list-item-content { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 8px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .merchant-modules-list-item-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; grid-gap: 5px; font-size: 16px; line-height: 26px; font-weight: 500; color: #101517; } .merchant-modules-indicator { width: 10px; height: 10px; border-radius: 10px; background-color: #3c8733; } .merchant-modules-list-item-desc { color: #757575; font-size: 13px; line-height: 20px; max-width: 400px; } .merchant-module-page { display: -webkit-box; display: -ms-flexbox; display: flex; } .merchant-module-page-back a { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 5px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: all 0.2s; transition: all 0.2s; text-decoration: none; color: #1D2327; font-weight: 500; } .merchant-module-page-back a:focus, .merchant-module-page-back a:active { -webkit-box-shadow: none; box-shadow: none; outline: none; } .merchant-module-page-content { width: 50%; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 20px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .merchant-module-page-body { display: -webkit-box; display: -ms-flexbox; display: flex; } .merchant-module-page-preview { width: 50%; margin-left: 20px; } .merchant-module-page-body.has-preview .merchant-module-page-setting-box { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; grid-gap: 20px; } .merchant-module-page-body.has-preview .merchant-module-page-setting-title, .merchant-module-page-body.has-preview .merchant-module-page-setting-fields { width: 100%; } .merchant-module-page-ajax-form { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 20px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .merchant-module-page-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #fff; -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15); border-radius: 4px; } .merchant-module-page-header-content { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 20px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 30px; } .merchant-module-page-header-placeholder { width: 40%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-item-align: end; align-self: flex-end; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 40px 60px 0 60px; } .merchant-module-page-header-placeholder img { max-width: 100%; max-height: 300px; } body.merchant-has-admin-preview .merchant-module-page-header-content { width: 100%; } body.merchant-has-admin-preview .merchant-module-page-header-placeholder { display: none; } body.merchant-has-admin-preview .merchant-module-page-desc { max-width: none; } .merchant-module-page-heading { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 12px; } .merchant-module-page-info { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 10px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .merchant-module-page-title { font-size: 32px; line-height: 40px; font-weight: 500; color: #101517; display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 15px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .merchant-module-page-title svg { width: 28px; height: 28px; fill: #787C82; } .merchant-module-page-desc { font-size: 18px; line-height: 28px; font-weight: normal; color: #757575; max-width: none; } .merchant-module-page-actions { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 10px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .merchant-module-page-actions-inner { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 15px; } .merchant-module-page-button { cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 7px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 14px 25px; font-size: 16px; line-height: 1em; font-weight: 500; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-decoration: none; border-radius: 4px; border: none; color: #fff; border: 1px solid transparent; background-color: #3858E9; } .merchant-module-page-button:focus, .merchant-module-page-button:hover { outline: none; -webkit-box-shadow: none; box-shadow: none; color: #fff; } .merchant-module-page-button svg { width: 8px; height: 8px; } .merchant-module-deactivate { display: none; } .merchant-module-action { position: relative; } .merchant-module-action.merchant-enabled .merchant-module-activate { display: none; } .merchant-module-action.merchant-enabled .merchant-module-deactivate { display: block; } .merchant-module-deactivate-dropdown { cursor: pointer; position: absolute; top: 100%; left: 0; padding: 5px; white-space: nowrap; border-radius: 8px; background-color: #fff; font-size: 14px; line-height: 16px; margin: 0; -webkit-box-shadow: 0 3px 6px -3px rgba(23, 24, 24, 0.08), 0 8px 20px -4px rgba(23, 24, 24, 0.12); box-shadow: 0 3px 6px -3px rgba(23, 24, 24, 0.08), 0 8px 20px -4px rgba(23, 24, 24, 0.12); opacity: 0; pointer-events: none; -webkit-transition: all 0.1s; transition: all 0.1s; } .merchant-module-deactivate-dropdown.merchant-show { opacity: 1; pointer-events: auto; margin-top: 10px; } .merchant-module-dropdown { position: absolute; overflow: hidden; top: 100%; left: 0; min-width: 275px; white-space: nowrap; border-radius: 8px; background-color: #fff; font-size: 13px; line-height: 14px; margin: 0; -webkit-box-shadow: 0 3px 6px -3px rgba(23, 24, 24, 0.08), 0 8px 20px -4px rgba(23, 24, 24, 0.12); box-shadow: 0 3px 6px -3px rgba(23, 24, 24, 0.08), 0 8px 20px -4px rgba(23, 24, 24, 0.12); opacity: 0; pointer-events: none; -webkit-transition: all 0.1s; transition: all 0.1s; z-index: 1; } .merchant-module-dropdown.merchant-show { opacity: 1; pointer-events: auto; margin-top: 10px; } .merchant-module-dropdown ul { margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .merchant-module-dropdown ul li { cursor: pointer; position: relative; margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; white-space: nowrap; padding: 15px 15px 0 15px; color: #202223; -webkit-transition: all 0.2s; transition: all 0.2s; } .merchant-module-dropdown ul li:before { content: ""; position: absolute; z-index: 1; top: 0; left: 0; bottom: 0; width: 0; opacity: 0; -webkit-transition: all 0.2s; transition: all 0.2s; background-color: #3858E9; } .merchant-module-dropdown ul li:hover { background-color: #F2F7FE; } .merchant-module-dropdown ul li:hover:before { opacity: 1; width: 3px; } .merchant-module-dropdown ul li span { width: 100%; padding-bottom: 15px; border-bottom: 1px solid #eee; } .merchant-module-dropdown ul li:last-child span { border-bottom: none; } .merchant-module-dropdown-close { cursor: pointer; } .merchant-module-question-title { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 15px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; white-space: nowrap; padding: 15px 15px 5px 15px; font-size: 14px; line-height: 16px; color: #202223; font-weight: 500; } .merchant-module-question-title i { width: auto; height: auto; font-size: 24px; line-height: 1; } .merchant-module-question-answer-title { display: none; grid-gap: 15px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; white-space: nowrap; padding: 15px; font-size: 14px; line-height: 16px; color: #202223; font-weight: 500; } .merchant-module-question-answer-title i { width: auto; height: auto; font-size: 20px; line-height: 1; } .merchant-module-question-answer-title.merchant-show { display: -webkit-box; display: -ms-flexbox; display: flex; } .merchant-module-question-answer-form { padding: 5px 15px 15px 15px; display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 10px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .merchant-module-question-answer-form textarea { width: 100%; height: 100px; padding: 12px; line-height: 1em; width: 100%; max-width: 100%; min-height: auto; border: 1px solid #D6D6D6; } .merchant-module-question-answer-form textarea:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; border-color: #3858E9; } .merchant-module-question-answer-form button { -ms-flex-item-align: end; align-self: flex-end; padding: 8px 10px; font-size: 13px; font-weight: 400; } .merchant-module-question-answer-thank-you-text { padding: 5px 15px 15px 15px; } .merchant-module-question-thank-you-dropdown .merchant-module-question-answer-title { display: -webkit-box; display: -ms-flexbox; display: flex; } .merchant-module-page-button-action-deactivate { border-radius: 8px; padding: 12px 16px; display: -webkit-box; display: -ms-flexbox; display: flex; justify-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-decoration: none; color: #d82c0d; } .merchant-module-page-button-action-deactivate:hover { background-color: #fff4f4; } .merchant-module-page-button-deactivate { color: #3858E9; border-color: #3858E9; background-color: transparent; } .merchant-module-page-button-deactivate:focus, .merchant-module-page-button-deactivate:hover { color: #3858E9; } .merchant-module-page-button-deactivate.merchant-show .merchant-module-deactivate-dropdown { pointer-events: auto; } .merchant-module-page-actions-links { display: -webkit-box; display: -ms-flexbox; display: flex; } .merchant-module-page-link { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 5px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 10px; font-size: 13px; font-weight: 500; text-decoration: none; color: #3858E9; } .merchant-module-page-link span { text-decoration: underline; } .merchant-module-page-link:focus, .merchant-module-page-link:hover { outline: none; -webkit-box-shadow: none; box-shadow: none; color: #3858E9; } body.merchant-module-disabled .merchant-module-page-link-preview { pointer-events: none; color: #CCC; } body.merchant-module-disabled .merchant-module-page-link-preview span { text-decoration: none; } body.merchant-module-disabled .merchant-module-page-link-preview svg path { fill: #CCC; } .merchant-module-page-ajax-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: fixed; z-index: 10000; overflow: hidden; padding-left: 20px; padding-right: 20px; top: 32px; left: 160px; right: 0; height: 56px; opacity: 0; pointer-events: none; background-color: #1d2327; -webkit-transition: opacity 0.3s cubic-bezier(0, 0, 0.42, 1); transition: opacity 0.3s cubic-bezier(0, 0, 0.42, 1); } .merchant-module-page-ajax-header.merchant-show { opacity: 1; pointer-events: auto; } .merchant-module-page-ajax-header.merchant-saving { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .merchant-module-page-ajax-header.merchant-saving i { opacity: 1; } .merchant-module-page-ajax-header.merchant-saving span { opacity: 0; } .merchant-module-page-ajax-header.merchant-saving .merchant-module-page-ajax-buttons { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; } .merchant-module-page-ajax-notice { font-size: 14px; font-weight: 500; color: #e3e5e7; } .merchant-module-page-ajax-buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; grid-gap: 15px; } .merchant-module-save-button { position: relative; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 14px; line-height: 16px; border: 0; border-radius: 4px; min-width: 60px; min-height: 36px; padding-left: 16px; padding-right: 16px; color: #fff; background-color: #3858E9; } .merchant-module-save-button i { position: absolute; width: auto; height: auto; font-size: 20px; opacity: 0; -webkit-animation: merchant-spin 1.5s infinite linear; animation: merchant-spin 1.5s infinite linear; } @-webkit-keyframes merchant-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes merchant-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } .merchant-module-discard-button { cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 14px; line-height: 16px; min-width: 36px; min-height: 36px; color: #fff; text-decoration: none; } .merchant-module-discard-button:hover { color: #fff; opacity: 0.75; } .merchant-module-discard-button:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; } .merchant-module-page-preview-browser-top { background: #323232; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 45px; padding-left: 9px; } .merchant-module-page-preview-browser-top-circle { background: #616161; width: 12px; height: 12px; border-radius: 50%; display: block; margin-left: 7px; } .merchant-module-page-preview-browser { border-top-left-radius: 5px; border-top-right-radius: 5px; overflow: hidden; -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.1215686275); box-shadow: 0 0 50px rgba(0, 0, 0, 0.1215686275); margin-bottom: -29px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .merchant-module-page-preview-browser-inner { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; position: relative; display: block; } .merchant-module-page-preview-box { overflow: hidden; position: sticky; top: 45px; } .merchant-module-page-settings, .merchant-module-page-preview-box { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 30px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 30px; background-color: #fff; -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15); border-radius: 4px; } .merchant-module-page-setting-box { display: -webkit-box; display: -ms-flexbox; display: flex; } .merchant-module-page-setting-box.merchant-module-page-setting-box-style-2 { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; grid-gap: 20px; } .merchant-module-page-setting-box.merchant-module-page-setting-box-style-2 .merchant-module-page-setting-title, .merchant-module-page-setting-box.merchant-module-page-setting-box-style-2 .merchant-module-page-setting-fields { width: 100%; } .merchant-module-page-preview-title, .merchant-module-page-setting-title { margin-top: 10px; padding-right: 50px; font-size: 20px; font-weight: 500; color: #2F2F2F; } .merchant-module-page-setting-title { width: 40%; } .merchant-module-page-setting-subtitle { margin-top: 20px; font-size: 13px; font-weight: 400; color: #757575; } .merchant-module-page-setting-fields { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 24px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 60%; padding: 30px; border-radius: 4px; border: 2px solid #F0F0F1; background-color: #fff; } .merchant-module-page-setting-field { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 10px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .merchant-module-page-setting-field.merchant-show { display: -webkit-box; display: -ms-flexbox; display: flex; } .merchant-module-page-setting-field.merchant-hide { display: none; } .merchant-module-page-setting-field-title { font-size: 14px; font-weight: 500; color: #2F2F2F; } .merchant-module-page-setting-field-desc { font-size: 13px; font-weight: 400; color: #777; } .merchant-module-page-setting-field-desc a { color: #3858E9; } .merchant-module-page-setting-field-desc a:focus { -webkit-box-shadow: none; box-shadow: none; } .merchant-license-form-wrapper .merchant-license-form { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; grid-gap: 10px; } .merchant-license-form-wrapper .merchant-license-form input { width: 400px; max-width: 100%; padding-left: 36px; min-height: 36px; } .merchant-license-form-wrapper .merchant-license-form input::-webkit-input-placeholder { opacity: 0.75; } .merchant-license-form-wrapper .merchant-license-form input::-moz-placeholder { opacity: 0.75; } .merchant-license-form-wrapper .merchant-license-form input:-ms-input-placeholder { opacity: 0.75; } .merchant-license-form-wrapper .merchant-license-form input::-ms-input-placeholder { opacity: 0.75; } .merchant-license-form-wrapper .merchant-license-form input::placeholder { opacity: 0.75; } .merchant-license-form-wrapper .merchant-license-form button { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 2px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 1em; min-height: 36px; padding: 10px 40px !important; background-color: transparent; color: #3858E9; border-color: #3858E9; } .merchant-license-form-wrapper .merchant-license-form button:hover, .merchant-license-form-wrapper .merchant-license-form button:focus, .merchant-license-form-wrapper .merchant-license-form button:active { color: #FFF; background-color: #3452da; border-color: #3452da; } .merchant-license-form-wrapper .merchant-license-form button.merchant-license-button-deactivate { color: #d82c0d; border-color: #d82c0d; } .merchant-license-form-wrapper .merchant-license-form button.merchant-license-button-deactivate:hover, .merchant-license-form-wrapper .merchant-license-form button.merchant-license-button-deactivate:focus, .merchant-license-form-wrapper .merchant-license-form button.merchant-license-button-deactivate:active { color: #FFF; background-color: #d82c0d; border-color: #d82c0d; } .merchant-license-form-wrapper .merchant-license-key-input { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; } .merchant-license-form-wrapper .merchant-license-key-input i { position: absolute; z-index: 1; top: 50%; left: 10px; -webkit-transform: translateY(-50%); transform: translateY(-50%); margin-top: -1px; font-size: 20px !important; color: #5C5F62; } .mechant-license-response-wrapper, .merchant-dashboard-license-success { display: block; margin-top: 10px; color: #757575; } .mechant-license-response-wrapper span, .merchant-dashboard-license-success span { margin-left: 5px; } .merchant-module-page-setting-field-text input, .merchant-module-page-setting-field-number input, .merchant-module-page-setting-field-text_readonly input { padding: 12px; line-height: 1.3em; width: 100%; max-width: 100%; min-height: auto; border: 1px solid #D6D6D6; } .merchant-module-page-setting-field-text input:focus, .merchant-module-page-setting-field-number input:focus, .merchant-module-page-setting-field-text_readonly input:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; border-color: #3858E9; } .merchant-module-page-setting-field-textarea_multiline textarea, .merchant-module-page-setting-field-textarea textarea, .merchant-module-page-setting-field-textarea_code textarea { padding: 12px; line-height: 1em; width: 100%; max-width: 100%; min-height: 120px; border: 1px solid #D6D6D6; } .merchant-module-page-setting-field-textarea_multiline textarea:focus, .merchant-module-page-setting-field-textarea textarea:focus, .merchant-module-page-setting-field-textarea_code textarea:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; border-color: #3858E9; } .merchant-code-snippets-textarea textarea, .merchant-code-snippets-textarea_code textarea { min-height: 200px; } .merchant-module-page-setting-field-radio div, .merchant-module-page-setting-field-radio_alt div, .merchant-module-page-setting-field-checkbox div { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 30px; } .merchant-module-page-setting-field-radio label, .merchant-module-page-setting-field-radio_alt label, .merchant-module-page-setting-field-checkbox label { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 12px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .merchant-module-page-setting-field-radio span, .merchant-module-page-setting-field-radio_alt span, .merchant-module-page-setting-field-checkbox span { font-size: 14px; font-weight: 400; color: #1D2327; } .merchant-module-page-setting-field-radio input, .merchant-module-page-setting-field-radio_alt input, .merchant-module-page-setting-field-checkbox input { -ms-flex-negative: 0; flex-shrink: 0; margin: 0; width: 20px; height: 20px; border: 1px solid #D6D6D6; background-color: #fff; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: none; transition: none; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: none; box-shadow: none; } .merchant-module-page-setting-field-radio input:checked, .merchant-module-page-setting-field-radio_alt input:checked, .merchant-module-page-setting-field-checkbox input:checked { -webkit-transition: none; transition: none; } .merchant-module-page-setting-field-radio input:checked::before, .merchant-module-page-setting-field-radio_alt input:checked::before, .merchant-module-page-setting-field-checkbox input:checked::before { content: ""; margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: none; transition: none; } .merchant-module-page-setting-field-radio input[type=checkbox], .merchant-module-page-setting-field-radio_alt input[type=checkbox], .merchant-module-page-setting-field-checkbox input[type=checkbox] { border-radius: 6px; } .merchant-module-page-setting-field-radio input[type=checkbox]:focus, .merchant-module-page-setting-field-radio_alt input[type=checkbox]:focus, .merchant-module-page-setting-field-checkbox input[type=checkbox]:focus { border-color: #fff; -webkit-box-shadow: 0 0 0 2px #3858E9; box-shadow: 0 0 0 2px #3858E9; } .merchant-module-page-setting-field-radio input[type=checkbox]:checked, .merchant-module-page-setting-field-radio_alt input[type=checkbox]:checked, .merchant-module-page-setting-field-checkbox input[type=checkbox]:checked { border-color: #fff; background-color: #3858E9; } .merchant-module-page-setting-field-radio input[type=checkbox]:checked::before, .merchant-module-page-setting-field-radio_alt input[type=checkbox]:checked::before, .merchant-module-page-setting-field-checkbox input[type=checkbox]:checked::before { width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg width='11' height='9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m10.7.89-6 8.07-3.77-2.8.75-1L4.44 7.2 9.69.14l1 .75Z' fill='%23fff'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 3px 4px; } .merchant-module-page-setting-field-radio input[type=radio], .merchant-module-page-setting-field-radio_alt input[type=radio], .merchant-module-page-setting-field-checkbox input[type=radio] { border-radius: 100%; } .merchant-module-page-setting-field-radio input[type=radio]:focus, .merchant-module-page-setting-field-radio_alt input[type=radio]:focus, .merchant-module-page-setting-field-checkbox input[type=radio]:focus { border-color: #fff; -webkit-box-shadow: none; box-shadow: none; } .merchant-module-page-setting-field-radio input[type=radio]:checked, .merchant-module-page-setting-field-radio_alt input[type=radio]:checked, .merchant-module-page-setting-field-checkbox input[type=radio]:checked { border-color: #3858E9; background-color: #fff; -webkit-box-shadow: 0 0 0 1px #3858E9; box-shadow: 0 0 0 1px #3858E9; } .merchant-module-page-setting-field-radio input[type=radio]:checked::before, .merchant-module-page-setting-field-radio_alt input[type=radio]:checked::before, .merchant-module-page-setting-field-checkbox input[type=radio]:checked::before { width: 12px; height: 12px; border-radius: 12px; background-color: #3858E9; } @media (max-width: 1300px) { .merchant-module-page-setting-field-radio div { grid-gap: 20px; } } .merchant-module-page-setting-field-radio span { opacity: 0.8; } .merchant-module-page-setting-field-radio input[type=radio]:checked + span { opacity: 1; } .merchant-module-page-setting-field-radio_alt div { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 10px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .merchant-module-page-setting-field-radio_alt label span { font-size: 14px; font-weight: 400; color: #1D2327; } .merchant-module-page-setting-field-radio_alt p { margin: 0; color: #757575; } .merchant-module-page-setting-field-radio_alt .merchant-module-page-setting-field-inner { grid-gap: 30px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .merchant-module-page-setting-field-content { max-width: 60vw; } .merchant-module-page-setting-field-content a { color: #3858E9; } .merchant-module-page-setting-field-content a:focus { -webkit-box-shadow: none; box-shadow: none; } .merchant-tag-pre-orders { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 16px; } .merchant-tag-pre-orders a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0; padding: 8px 26px; font-size: 14px; line-height: 20px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; min-width: 145px; font-weight: 500; text-decoration: none; border-radius: 4px; color: #202223; border: 1px solid #C9CCCF; background-color: #fff; } .merchant-tag-pre-orders a:focus, .merchant-tag-pre-orders a:active { outline: none; -webkit-box-shadow: none; box-shadow: none; } .merchant-tag-pre-orders p { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; grid-gap: 16px; font-size: 14px; line-height: 20px; margin: 0; padding: 0; } .merchant-tag-pre-orders p i { -ms-flex-negative: 0; flex-shrink: 0; } .merchant-module-page-setting-field-select select, .merchant-module-page-setting-field-select_ajax select, .merchant-module-page-setting-field-select_size_chart select { padding: 12px 20px 12px 12px; line-height: 1.3em; width: 100%; max-width: 100%; min-height: auto; border-radius: 6px; color: #2F2F2F; border: 1px solid #D6D6D6; } .merchant-module-page-setting-field-select select:hover, .merchant-module-page-setting-field-select_ajax select:hover, .merchant-module-page-setting-field-select_size_chart select:hover { color: #2F2F2F; } .merchant-module-page-setting-field-select select:focus, .merchant-module-page-setting-field-select_ajax select:focus, .merchant-module-page-setting-field-select_size_chart select:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; border-color: #3858E9; } .merchant-module-page-setting-field-select select option, .merchant-module-page-setting-field-select_ajax select option, .merchant-module-page-setting-field-select_size_chart select option { color: #2F2F2F; } .merchant-module-page-setting-field-select .select2-container .select2-selection--single, .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--single, .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--single { height: 44px !important; } .merchant-module-page-setting-field-select .select2-container .select2-selection--single .select2-selection__rendered, .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--single .select2-selection__rendered, .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--single .select2-selection__rendered { line-height: 41px !important; } .merchant-module-page-setting-field-select .select2-selection__arrow, .merchant-module-page-setting-field-select_ajax .select2-selection__arrow, .merchant-module-page-setting-field-select_size_chart .select2-selection__arrow { height: 43px !important; } .merchant-module-page-setting-field-hook_select .merchant-module-page-setting-field-hook_select-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 15px; } .merchant-module-page-setting-field-hook_select .merchant-module-page-setting-field-hook_select-wrapper .merchant-module-page-setting-field-select { width: 100%; } .merchant-module-page-setting-field-hook_select .merchant-module-page-setting-field-hook_select-wrapper .merchant-module-page-setting-field-number { width: 100px; } .merchant-module-page-setting-field-choices input { display: none; } .merchant-module-page-setting-field-choices input:checked + figure { border-color: #3858E9; } .merchant-module-page-setting-field-choices label { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; } .merchant-module-page-setting-field-choices label:hover .merchant-tooltip { opacity: 1; visibility: visible; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } .merchant-module-page-setting-field-choices figure { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0; padding: 2px; border-radius: 4px; border: 2px solid transparent; } .merchant-module-page-setting-field-choices .merchant-tooltip { position: absolute; z-index: 10; left: 50%; bottom: calc(100% + 12px); padding: 3px 12px; font-size: 11px; white-space: nowrap; opacity: 0; visibility: hidden; -webkit-transform: translate3d(-50%, 6px, 0); transform: translate3d(-50%, 6px, 0); -webkit-transition: all 0.2s; transition: all 0.2s; border-radius: 3px; color: #f7f7f7; background-color: #212121; } .merchant-module-page-setting-field-choices .merchant-tooltip:after { content: ""; position: absolute; left: 50%; bottom: -12px; border: 6px solid transparent; border-top-color: #212121; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } .merchant-module-page-setting-field-choices .merchant-choices { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 10px; } .merchant-module-page-setting-field-choices .merchant-choices svg { width: 20px; height: 20px; } .merchant-module-page-setting-field-buttons input { display: none; } .merchant-module-page-setting-field-buttons input:checked + span { color: #fff; background-color: #3858E9; } .merchant-module-page-setting-field-buttons label { display: -webkit-box; display: -ms-flexbox; display: flex; } .merchant-module-page-setting-field-buttons span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0; padding: 10px 15px; border-radius: 2px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; min-width: 120px; font-weight: 500; } .merchant-module-page-setting-field-buttons .merchant-buttons { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; padding: 3px; border: 1px solid #D6D6D6; border-radius: 4px; } .merchant-module-page-setting-field-buttons .merchant-button-underline span { text-decoration: underline; } .merchant-module-page-setting-field-buttons .merchant-button-line-through span { text-decoration: line-through; } .merchant-module-page-setting-field-buttons .merchant-button-overline span { text-decoration: overline; } .merchant-module-page-setting-field-buttons_alt input { display: none; } .merchant-module-page-setting-field-buttons_alt input:checked + span { color: #fff; background-color: #3858E9; } .merchant-module-page-setting-field-buttons_alt label { display: -webkit-box; display: -ms-flexbox; display: flex; } .merchant-module-page-setting-field-buttons_alt label:hover { position: relative; z-index: 10; } .merchant-module-page-setting-field-buttons_alt span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0; padding: 10px 15px; border-radius: 2px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; min-width: 120px; font-weight: 500; border-radius: 4px; border: 1px solid #D6D6D6; background-color: #fff; } .merchant-module-page-setting-field-buttons_alt .merchant-buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; grid-gap: 5px; padding: 3px; } .merchant-animated-buttons .merchant-buttons { display: grid; grid-template-columns: repeat(5, 1fr); } .merchant-animated-buttons span { width: 100%; } @media (max-width: 1470px) { .merchant-animated-buttons .merchant-buttons { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1050px) { .merchant-animated-buttons .merchant-buttons { grid-template-columns: repeat(2, 1fr); } } /* Sortable Field */ .merchant-sortable { max-width: 300px; } .merchant-sortable ul.ui-sortable li { position: relative; overflow: hidden; padding: 0; color: #1E1E1E; border: 1px solid #ddd; border-radius: 2px; text-transform: capitalize; line-height: 36px; cursor: -webkit-grab; cursor: grab; } .merchant-sortable ul.ui-sortable li .dashicons { width: 36px; height: 36px; -ms-flex-preferred-size: 36px; flex-basis: 36px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box; } .merchant-sortable ul.ui-sortable li .dashicons:before { font-size: 16px; line-height: 1em; } .merchant-sortable ul.ui-sortable li .dashicons.dashicons-menu { float: left; padding: 0; margin: 0 10px 0 0; border: none; border-right: 1px solid #ddd; } .merchant-sortable ul.ui-sortable li .dashicons.dashicons-visibility { float: right; color: #3858E9; padding: 0; margin: 0 0 0 10px; border: none; border-left: 1px solid #ddd; } .merchant-sortable ul.ui-sortable li .dashicons.visibility { cursor: pointer; } .merchant-sortable ul.ui-sortable li.invisible { color: #6E7780; border: 1px solid #CAD2F6; background-color: #EBEEFB; } .merchant-sortable ul.ui-sortable li.invisible .dashicons.dashicons-visibility:before { content: "\f530"; } /* Sortable Repeater Field */ .merchant-module-page-setting-field-flexible_content .merchant-module-page-setting-field-title { margin-bottom: 10px; } .merchant-sortable-repeater-control { max-width: 100%; } .merchant-sortable-repeater-control .sortable { list-style-type: none; margin: 0; padding: 0; } .merchant-sortable-repeater-control .sortable input[type=text] { width: 100%; margin: 0; border-radius: 4px 0 0 4px; border: 1px solid #D6D6D6; padding: 12px; line-height: 1.3em; } .merchant-sortable-repeater-control .sortable input[type=text]:focus { border-color: #3858E9; outline: none; -webkit-box-shadow: none; box-shadow: none; } .merchant-sortable-repeater-control .sortable div { cursor: -webkit-grab; cursor: grab; margin-bottom: 7px; } .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0; width: 44px; height: auto; font-size: 1.3em; line-height: 34px; color: #d4d4d4; background: #fff; padding: 0; vertical-align: top; margin-left: -1px; border: 1px solid #D6D6D6; text-decoration: none; } .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete .dashicons-no-alt { width: 100%; text-decoration: none; margin: 0; font-weight: 600; color: #50575e; font-size: 1.1em; line-height: 34px; height: auto; } .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete:hover, .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; } .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete:hover .dashicons-no-alt, .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete:focus .dashicons-no-alt { color: #a7a7a7; } .merchant-sortable-repeater-control .repeater { display: -webkit-box; display: -ms-flexbox; display: flex; } .merchant-sortable-repeater-control .repeater .dashicons-menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0; width: 44px; height: auto; font-size: 1.3em; line-height: 34px; background: #fff; padding: 0; vertical-align: top; margin-left: -1px; border: 1px solid #D6D6D6; } .merchant-sortable-repeater-control .repeater .dashicons-menu:hover { color: #a7a7a7; } .merchant-sortable-repeater-control .customize-control-sortable-repeater-add { color: #3858E9; border-color: #3858E9; background-color: transparent; margin-top: 10px; padding: 4px 19px; } .merchant-sortable-repeater-control .customize-control-sortable-repeater-add:hover, .merchant-sortable-repeater-control .customize-control-sortable-repeater-add:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; background-color: #ffffff; } .merchant-sortable-repeater-control.disable-sorting .dashicons-menu { display: none; } /* Flexible Content Field */ .merchant-flexible-content-control { max-width: 100%; } .merchant-flexible-content-control .sortable { list-style-type: none; margin: 0; padding: 0; } .merchant-flexible-content-control .sortable input[type=text] { width: 100%; margin: 0; border-radius: 4px 0 0 4px; border: 1px solid #D6D6D6; padding: 8px; line-height: 1.3em; } .merchant-flexible-content-control .sortable input[type=text]:focus { border-color: #3858E9; outline: none; -webkit-box-shadow: none; box-shadow: none; } .merchant-flexible-content-control .customize-control-flexible-content-move { cursor: -webkit-grab; cursor: grab; } .merchant-flexible-content-control .customize-control-flexible-content-delete { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0; width: 40px; height: auto; font-size: 1.3em; line-height: 34px; color: #d4d4d4; background: #fff; padding: 0; vertical-align: top; margin-left: -1px; text-decoration: none; } .merchant-flexible-content-control .customize-control-flexible-content-delete .dashicons-no-alt { width: 100%; text-decoration: none; margin: 0; font-weight: 600; color: #50575e; font-size: 1.1em; line-height: 34px; height: auto; } .merchant-flexible-content-control .customize-control-flexible-content-delete:hover, .merchant-flexible-content-control .customize-control-flexible-content-delete:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; } .merchant-flexible-content-control .customize-control-flexible-content-delete:hover .dashicons-no-alt, .merchant-flexible-content-control .customize-control-flexible-content-delete:focus .dashicons-no-alt { color: #a7a7a7; } .merchant-flexible-content-control .merchant-flexible-content.empty { border: 2px dashed #dcdcde; min-height: 100px; margin-bottom: 10px; } .merchant-flexible-content-control.default-style .layout { background: white; border: 1px solid #c3c4c7; border-left: 3px solid #3858e9; } .merchant-flexible-content-control.default-style .layout .layout-header { padding: 8px 15px; } .merchant-flexible-content-control.default-style .layout .layout-body { padding: 15px; } .merchant-flexible-content-control.table-style .layout .layout-header { padding-bottom: 8px; margin-bottom: 15px; } .merchant-flexible-content-control.table-style .layout .layout-body { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .merchant-flexible-content-control.table-style .layout .layout-body .merchant-module-page-setting-field-title { display: none; } .merchant-flexible-content-control .layouts { display: none; } .merchant-flexible-content-control .layout { margin-bottom: 20px; } .merchant-flexible-content-control .layout .layout-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom: 1px solid #f3f3f3; } .merchant-flexible-content-control .layout .layout-count { border-radius: 50%; width: 24px; height: 23px; border: 1px solid #949494; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-size: 12px; font-weight: bold; margin-right: 10px; } .merchant-flexible-content-control .layout .layout-title { font-size: 14px; font-weight: bold; } .merchant-flexible-content-control .layout .layout-actions { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0; padding: 0; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .merchant-flexible-content-control .layout .layout-body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; grid-gap: 20px; } .merchant-flexible-content-control .layout .layout-field.flex-grow { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .merchant-flexible-content-control .layout .dashicons-menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0; width: 40px; height: auto; font-size: 1.3em; line-height: 34px; background: #fff; padding: 0; vertical-align: top; margin-left: -1px; } .merchant-flexible-content-control .layout .dashicons-menu:hover { color: #a7a7a7; } .merchant-flexible-content-control .customize-control-flexible-content-add-wrapper { position: relative; display: inline-block; } .merchant-flexible-content-control .customize-control-flexible-content-add-list { opacity: 0; visibility: hidden; position: absolute; background-color: #ffffff; border: 1px solid #c3c4c7; border-left: 3px solid #3858e9; -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1019607843); box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1019607843); width: 180px; bottom: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; left: 50%; -webkit-transform: translate(-50%, 10px); transform: translate(-50%, 10px); padding: 3px 3px 3px 5px; } .merchant-flexible-content-control .customize-control-flexible-content-add-list.active { z-index: 10; opacity: 1; visibility: visible; -webkit-transform: translate(-50%, -15px); transform: translate(-50%, -15px); -webkit-transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97); transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97); } .merchant-flexible-content-control .customize-control-flexible-content-add-list:before { right: calc(50% - 12px); bottom: -14px; border-width: 14px 14px 0 15px; border-color: #c3c4c7 transparent transparent transparent; } .merchant-flexible-content-control .customize-control-flexible-content-add-list:after { content: ""; right: calc(50% - 10px); bottom: -12px; border-width: 12px 12px 0 13px; border-color: #ffffff transparent transparent transparent; } .merchant-flexible-content-control .customize-control-flexible-content-add-list:before, .merchant-flexible-content-control .customize-control-flexible-content-add-list:after { position: absolute; z-index: -1; content: ""; border-style: solid; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; transition-property: -webkit-transform; -webkit-transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; } .merchant-flexible-content-control .customize-control-flexible-content-add { display: block; -ms-flex-negative: 0; flex-shrink: 0; padding: 10px; text-decoration: none; } .merchant-flexible-content-control .customize-control-flexible-content-add:hover { background: #f0f0f1; } .merchant-flexible-content-control .customize-control-flexible-content-add-button { color: #3858E9; border-color: #3858E9; background-color: transparent; margin-top: 10px; padding: 4px 19px; } .merchant-flexible-content-control .customize-control-flexible-content-add-button:hover, .merchant-flexible-content-control .customize-control-flexible-content-add-button:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; background-color: #ffffff; } .merchant-flexible-content-control.disable-sorting .dashicons-menu { display: none; } .flexible-content-template { display: none; } .merchant-module-page-setting-field-range .merchant-range { position: relative; width: 100%; width: 300px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .merchant-module-page-setting-field-range input[type=range] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: calc(100% - 105px); height: 2px; border-radius: 5px; outline: none; padding: 0; margin: 0; background-color: #ddd; background-image: -webkit-gradient(linear, left top, right top, from(#3858E9), color-stop(0%, #3858E9), color-stop(0%, #ddd), to(#ddd)); background-image: linear-gradient(to right, #3858E9 0%, #3858E9 0%, #ddd 0%, #ddd 100%); } .merchant-module-page-setting-field-range input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: #3858E9; cursor: pointer; -webkit-transition: background 0.15s ease-in-out; transition: background 0.15s ease-in-out; } .merchant-module-page-setting-field-range input[type=range]::-webkit-slider-thumb:hover { background: #3858E9; } .merchant-module-page-setting-field-range input[type=range]:active::-webkit-slider-thumb { background: #3858E9; } .merchant-module-page-setting-field-range input[type=range]::-moz-range-thumb { width: 15px; height: 15px; border: 0; border-radius: 50%; background: #3858E9; cursor: pointer; -moz-transition: background 0.15s ease-in-out; transition: background 0.15s ease-in-out; } .merchant-module-page-setting-field-range input[type=range]::-moz-range-thumb:hover { background: #3858E9; } .merchant-module-page-setting-field-range input[type=range]:active::-moz-range-thumb { background: #3858E9; } .merchant-module-page-setting-field-range input[type=range]:focus::-webkit-slider-thumb { -webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 6px #3858E9; box-shadow: 0 0 0 3px #fff, 0 0 0 6px #3858E9; } .merchant-module-page-setting-field-range input[type=range]::-moz-range-track { border: 0; background: #d7dcdf; } .merchant-module-page-setting-field-range input[type=number] { padding: 12px 25px 12px 10px; line-height: 1.3em; width: 100%; max-width: 85px; min-height: auto; border: 1px solid #D6D6D6; } .merchant-module-page-setting-field-range input[type=number]:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; border-color: #3858E9; } .merchant-module-page-setting-field-range .merchant-range-unit { color: #3858E9; position: absolute; z-index: 1; right: 10px; font-size: 11px; line-height: 1em; } .merchant-module-page-setting-field-color input { padding: 0 10px; line-height: 1em; width: 100%; max-width: 254px; min-height: auto; border: 1px solid #D6D6D6; } .merchant-module-page-setting-field-color input:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; border-color: #3858E9; } .merchant-module-page-setting-field-color .merchant-color { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 10px; } .merchant-module-page-setting-field-color .merchant-color-picker { cursor: pointer; width: 36px; height: 36px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px; } .merchant-module-page-settings-dimensions { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 10px; } .merchant-module-page-settings-dimensions > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .merchant-module-page-settings-dimensions label { color: gray; font-size: 12px; margin-top: 7px; } .merchant-module-page-settings-dimensions input { max-width: 70px; width: 100%; font-size: 12px; border: 1px solid #D6D6D6; } .merchant-module-page-settings-unit { margin-bottom: 10px; } .merchant-module-page-settings-unit select { font-size: 13px; border: 0; } .merchant-module-page-settings-devices { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .merchant-module-page-settings-devices button { border: 0; background: transparent; padding: 0; cursor: pointer; } .merchant-module-page-settings-devices button.active { color: #3858e9; } .merchant-module-page-settings-devices button:hover { color: #3858e9; } .merchant-module-page-settings-devices button i { font-size: 14px; line-height: 20px; width: auto; } .merchant-module-page-settings-device-container:not(.active) { display: none; } .merchant-module-page-setting-field-responsive_dimensions .merchant-module-page-setting-field-inner { max-width: 320px; } .merchant-module-page-setting-field-responsive_dimensions .merchant-module-page-settings-devices { margin-bottom: -30px; margin-top: 0; } .merchant-module-page-setting-field-warning { padding: 8px 10px; font-size: 14px; line-height: 1.6; color: #1D2327; border-radius: 4px; border: 1px solid #D72C0D; background-color: #FFF4F4; } .merchant-module-page-setting-field-info { padding: 8px 10px; font-size: 14px; line-height: 1.6; color: #1D2327; border-radius: 4px; border: 1px solid #0d65d7; background-color: #e6effa; } .merchant-module-page-setting-field-divider { border-bottom: 1px solid #F0F0F1; } .merchant-module-page-setting-field-divider .merchant-module-page-setting-field-title { font-size: 16px; } .merchant-module-page-setting-field-gallery .merchant-gallery-images { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 5px; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 15px; } .merchant-module-page-setting-field-gallery .merchant-gallery-images:empty { display: none; } .merchant-module-page-setting-field-gallery .merchant-gallery-image { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 4px; padding: 2px; border: 1px solid #eee; background-color: #fff; } .merchant-module-page-setting-field-gallery .merchant-gallery-image img { cursor: -webkit-grab; cursor: grab; width: 100%; height: 100%; max-height: 75px; -o-object-fit: cover; object-fit: cover; } .merchant-module-page-setting-field-gallery .merchant-gallery-image.ui-sortable-helper img { cursor: -webkit-grabbing; cursor: grabbing; } .merchant-module-page-setting-field-gallery .merchant-gallery-image i { cursor: pointer; position: absolute; z-index: 1; top: 5px; right: 5px; width: 16px; height: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #fff; background-color: #c5280c; font-size: 14px; line-height: 1em; border-radius: 16px; opacity: 0; -webkit-transition: all 0.2s; transition: all 0.2s; } .merchant-module-page-setting-field-gallery .merchant-gallery-image:hover i { opacity: 1; } .merchant-module-page-setting-field-gallery .merchant-gallery-button { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; padding: 0.4375rem 1rem; font-size: 0.875rem; font-weight: 600; line-height: 1.5; white-space: nowrap; text-transform: none; text-decoration: none; color: #212b36; background-color: #fff; border: 1px solid #c4cdd5; border-radius: 0.25rem; -webkit-transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1); transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1); transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1); transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1); } .merchant-module-page-setting-field-gallery .merchant-gallery-button:hover, .merchant-module-page-setting-field-gallery .merchant-gallery-button:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; } .merchant-module-page-setting-field-gallery .ui-sortable-placeholder { visibility: visible !important; border: 1px dashed #ddd; background-color: #f9f9f9; border-radius: 4px; } .merchant-module-page-setting-field-upload .merchant-upload-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 5px; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 15px; } .merchant-module-page-setting-field-upload .merchant-upload-wrapper:empty { display: none; } .merchant-module-page-setting-field-upload .merchant-upload-image { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 4px; padding: 2px; border: 1px solid #eee; background-color: #fff; } .merchant-module-page-setting-field-upload .merchant-upload-image img { cursor: -webkit-grab; cursor: grab; width: 100%; height: 100%; max-height: 75px; -o-object-fit: cover; object-fit: cover; } .merchant-module-page-setting-field-upload .merchant-upload-image i { cursor: pointer; position: absolute; z-index: 1; top: 5px; right: 5px; width: 16px; height: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #fff; background-color: #c5280c; font-size: 14px; line-height: 1em; border-radius: 16px; opacity: 0; -webkit-transition: all 0.2s; transition: all 0.2s; } .merchant-module-page-setting-field-upload .merchant-upload-image:hover i { opacity: 1; } .merchant-module-page-setting-field-upload .merchant-upload-button { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; padding: 0.4375rem 1rem; font-size: 0.875rem; font-weight: 600; line-height: 1.5; white-space: nowrap; text-transform: none; text-decoration: none; color: #212b36; background-color: #fff; border: 1px solid #c4cdd5; border-radius: 0.25rem; -webkit-transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1); transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1); transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1); transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1); } .merchant-module-page-setting-field-upload .merchant-upload-button:hover, .merchant-module-page-setting-field-upload .merchant-upload-button:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; } .merchant-module-page-setting-field-switcher .merchant-toggle-switch { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .merchant-module-page-setting-field-switcher input { display: none; } .merchant-module-page-setting-field-switcher input:checked + .toggle-switch-label .toggle-switch-inner { margin-left: 0; background: #3858E9; } .merchant-module-page-setting-field-switcher input:checked + .toggle-switch-label .toggle-switch-switch { right: 1px; } .merchant-module-page-setting-field-switcher .toggle-switch { float: right; position: relative; width: 36px; margin-top: 2px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .merchant-module-page-setting-field-switcher .toggle-switch-label { position: relative; display: inline-block; overflow: hidden; cursor: pointer; border-radius: 20px; padding: 0; margin: 0; width: 36px; } .merchant-module-page-setting-field-switcher .toggle-switch-inner { display: block; width: 200%; margin-left: -100%; background: #c8c8c8; height: 18px; } .merchant-module-page-setting-field-switcher .toggle-switch-switch { display: block; width: 12px; height: 12px; margin: 3px; background-color: #fff; position: absolute; top: 0; bottom: 0; right: 18px; border-radius: 20px; -webkit-transition: all 0.1s ease-in 0s; transition: all 0.1s ease-in 0s; } .merchant-module-alert { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: rgba(0, 0, 0, 0.6); opacity: 0; visibility: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; -webkit-transition: all 0.2s; transition: all 0.2s; } .merchant-module-alert.merchant-show { -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto; pointer-events: auto; opacity: 1; visibility: visible; } .merchant-module-alert-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 640px; max-width: 90%; border-radius: 4px; background-color: #fff; } .merchant-module-alert-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 20px 30px; } .merchant-module-alert-header strong { font-size: 18px; line-height: 1em; } .merchant-module-alert-header a { position: relative; right: -5px; display: -webkit-box; display: -ms-flexbox; display: flex; color: #212121; text-decoration: none; -webkit-transition: all 0.2s; transition: all 0.2s; } .merchant-module-alert-header a:hover { opacity: 0.6; } .merchant-module-alert-header a:focus, .merchant-module-alert-header a:active { outline: none; -webkit-box-shadow: none; box-shadow: none; } .merchant-module-alert-header i { font-size: 32px; line-height: 1em; width: auto; height: auto; } .merchant-module-alert-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; grid-gap: 20px; padding: 0 30px 30px 30px; } .merchant-module-alert-content p { margin: 0; padding: 0; font-size: 15px; font-weight: 500; color: #757575; } .merchant-module-alert-content figure { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0; padding: 0; } .merchant-module-alert-content img { max-width: 100%; } .merchant-module-alert-footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding: 30px; } .merchant-module-alert-footer a { font-weight: bold; font-size: 14px; padding: 10px 15px; text-decoration: none; border-radius: 4px; color: #212121; border: 1px solid #e5e5e5; } .merchant-module-alert-footer a:focus, .merchant-module-alert-footer a:active { outline: none; -webkit-box-shadow: none; box-shadow: none; } .merchant-module-page-setting-field-inner.disabled .merchant-color-picker { pointer-events: none; opacity: 0.8; } .merchant-module-page-setting-field-inner.disabled .merchant-toggle-switch { opacity: 0.5; } .merchant-module-page-setting-field-inner.disabled .merchant-range { opacity: 0.5; } .merchant-module-page-setting-field-inner.disabled .merchant-module-page-settings-devices { opacity: 0.5; } /* Utils */ .merchant-height-auto { height: auto; } /* Admin Footer Text */ .merchant-admin-page .merchant-admin-footer-text-link { display: inline-block; padding-right: 5px; color: #3858E9; } .merchant-admin-page .merchant-admin-footer-text-link:hover, .merchant-admin-page .merchant-admin-footer-text-link:active, .merchant-admin-page .merchant-admin-footer-text-link:visited { color: #3858E9; } .merchant-admin-page-module #wpfooter { display: none; } .merchant-admin-page-module #wpbody-content { padding-bottom: 30px; } .merchant-module-footer-text { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 5px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; margin-top: 37px; } .merchant-module-footer-text i { color: #3858E9; } /* Responsive */ @media (max-width: 991px) { .merchant-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; grid-gap: 20px; } .merchant-modules-header-shortlinks { margin: 0; } .merchant-modules-header { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; grid-gap: 20px; } .merchant-module-page-header-content { width: 100%; } .merchant-module-page-desc { max-width: none; } .merchant-module-page-header-placeholder { display: none; } .merchant-modules-header-image { display: none; } .merchant-modules-list { grid-template-columns: repeat(1, minmax(0, 1fr)); } .merchant-modules-header-status { margin-bottom: 0; } .merchant-module-page-setting-box { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; grid-gap: 20px; } .merchant-module-page-setting-title, .merchant-module-page-setting-fields { width: 100%; } .merchant-module-page-body { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .merchant-module-page-content { width: 100%; } .merchant-module-page-preview { margin-left: 0; margin-bottom: 20px; width: 100%; } }