@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap");
.wpfnl * {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.wpfnl *:focus {
box-shadow: none;
outline: none;
}
.wpfnl *:not(i) {
font-family: "Roboto", sans-serif;
}
.wpfnl p {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: "Roboto", sans-serif;
}
.wpfnl a,
.wpfnl p,
.wpfnl span,
.wpfnl section,
.wpfnl label,
.wpfnl div {
font-size: 14px;
color: #7A8B9A;
font-weight: 400;
line-height: 1.4;
}
.wpfnl a {
text-decoration: none;
color: #6E42D3;
}
.wpfnl a:hover {
color: #4C25A5;
}
.wpfnl h1, .wpfnl h2, .wpfnl h3, .wpfnl h4, .wpfnl h5, .wpfnl h6, .wpfnl p, .wpfnl figur, .wpfnl a {
margin: 0px;
}
.wpfnl h1, .wpfnl h2, .wpfnl h3, .wpfnl h4, .wpfnl h5, .wpfnl h6 {
font-weight: normal;
-webkit-font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures;
}
.wpfnl a:hover,
.wpfnl a:focus,
.wpfnl input:focus,
.wpfnl button:focus,
.wpfnl a:active {
text-decoration: none;
outline: none;
outline-offset: 0px;
box-shadow: none;
}
.wpfnl ul {
list-style: none;
margin: 0;
padding: 0;
}
.wpfnl img {
display: block;
max-width: 100%;
}
.wp-funnels_page_edit_funnel #wpcontent,
.wpfunnels_page_edit_funnel #wpcontent {
padding-left: 0;
}
.wpfunnels_page_edit_funnel #wpfunnels-app,
.wp-funnels_page_edit_funnel #wpfunnels-app {
margin: 0;
}
#wpfunnels-app:has([data-tour=yes]) {
pointer-events: none;
}
.wpfnl {
background: #f6f5fa;
position: relative;
overflow-x: hidden;
}
.wpfnl::-webkit-scrollbar {
width: 3px;
}
.wpfnl::-webkit-scrollbar-track {
background: #f2f5f8;
}
.wpfnl::-webkit-scrollbar-thumb {
background-color: #6E42D3;
border-radius: 20px;
}
.wpfnl input[type=time],
.wpfnl input[type=date],
.wpfnl input[type=search],
.wpfnl input[type=url],
.wpfnl input[type=tel],
.wpfnl input[type=number],
.wpfnl input[type=password],
.wpfnl input[type=email],
.wpfnl input[type=text],
.wpfnl textarea,
.wpfnl select {
font-size: 14px;
color: #7A8B9A;
padding: 5px 15px;
height: 36px;
width: 100%;
min-width: 190px;
border-radius: 6px;
display: block;
border: 1px solid #E5E8F3;
}
.wpfnl input[type=time]::-webkit-input-placeholder, .wpfnl input[type=time]::-moz-placeholder, .wpfnl input[type=time]:-ms-input-placeholder,
.wpfnl input[type=date]::-webkit-input-placeholder,
.wpfnl input[type=date]::-moz-placeholder,
.wpfnl input[type=date]:-ms-input-placeholder,
.wpfnl input[type=search]::-webkit-input-placeholder,
.wpfnl input[type=search]::-moz-placeholder,
.wpfnl input[type=search]:-ms-input-placeholder,
.wpfnl input[type=url]::-webkit-input-placeholder,
.wpfnl input[type=url]::-moz-placeholder,
.wpfnl input[type=url]:-ms-input-placeholder,
.wpfnl input[type=tel]::-webkit-input-placeholder,
.wpfnl input[type=tel]::-moz-placeholder,
.wpfnl input[type=tel]:-ms-input-placeholder,
.wpfnl input[type=number]::-webkit-input-placeholder,
.wpfnl input[type=number]::-moz-placeholder,
.wpfnl input[type=number]:-ms-input-placeholder,
.wpfnl input[type=password]::-webkit-input-placeholder,
.wpfnl input[type=password]::-moz-placeholder,
.wpfnl input[type=password]:-ms-input-placeholder,
.wpfnl input[type=email]::-webkit-input-placeholder,
.wpfnl input[type=email]::-moz-placeholder,
.wpfnl input[type=email]:-ms-input-placeholder,
.wpfnl input[type=text]::-webkit-input-placeholder,
.wpfnl input[type=text]::-moz-placeholder,
.wpfnl input[type=text]:-ms-input-placeholder,
.wpfnl textarea::-webkit-input-placeholder,
.wpfnl textarea::-moz-placeholder,
.wpfnl textarea:-ms-input-placeholder,
.wpfnl select::-webkit-input-placeholder,
.wpfnl select::-moz-placeholder,
.wpfnl select:-ms-input-placeholder {
color: #7A8B9A;
}
.wpfnl input[type=time]:focus,
.wpfnl input[type=date]:focus,
.wpfnl input[type=search]:focus,
.wpfnl input[type=url]:focus,
.wpfnl input[type=tel]:focus,
.wpfnl input[type=number]:focus,
.wpfnl input[type=password]:focus,
.wpfnl input[type=email]:focus,
.wpfnl input[type=text]:focus,
.wpfnl textarea:focus,
.wpfnl select:focus {
outline: none;
box-shadow: none;
border-color: #E5E8F3;
color: #7A8B9A;
}
.wpfnl input[type=time]:hover,
.wpfnl input[type=date]:hover,
.wpfnl input[type=search]:hover,
.wpfnl input[type=url]:hover,
.wpfnl input[type=tel]:hover,
.wpfnl input[type=number]:hover,
.wpfnl input[type=password]:hover,
.wpfnl input[type=email]:hover,
.wpfnl input[type=text]:hover,
.wpfnl textarea:hover,
.wpfnl select:hover {
color: #7A8B9A;
}
.wpfnl input[type=time][readonly],
.wpfnl input[type=date][readonly],
.wpfnl input[type=search][readonly],
.wpfnl input[type=url][readonly],
.wpfnl input[type=tel][readonly],
.wpfnl input[type=number][readonly],
.wpfnl input[type=password][readonly],
.wpfnl input[type=email][readonly],
.wpfnl input[type=text][readonly],
.wpfnl textarea[readonly],
.wpfnl select[readonly] {
cursor: not-allowed;
background-color: #eee;
}
.wpfnl textarea {
resize: none;
min-height: 130px;
padding: 11px 15px;
}
.wpfnl select {
max-width: inherit;
}
.wpfnl a,
.wpfnl svg path,
.wpfnl button[type=submit],
.wpfnl input[type=button],
.wpfnl input[type=submit],
.wpfnl .btn-default,
.wpfnl .transition-3ms,
.wpfnl .steps-settings .product-options__tab-nav li a:after,
.steps-settings .product-options__tab-nav li .wpfnl a:after {
transition: all 0.3s ease;
}
.wpfnl .transition-5ms {
transition: all 0.5s ease;
}
.wpfnl input[type=submit],
.wpfnl button[type=submit],
.wpfnl .btn-default {
display: inline-block;
border: none;
height: 38px;
font-size: 14px;
line-height: 38px;
color: #fff;
font-weight: 500;
padding: 0 30px;
min-width: 130px;
cursor: pointer;
text-align: center;
letter-spacing: 0.2px;
border-radius: 10px;
text-transform: capitalize;
background-color: #6E42D3;
}
.wpfnl input[type=submit]:hover,
.wpfnl button[type=submit]:hover,
.wpfnl .btn-default:hover {
background-color: #4C25A5;
color: #fff;
}
.wpfnl label,
.wpfnl .label {
font-weight: 500;
font-size: 14px;
line-height: 15px;
color: #363B4E;
}
.wpfnl .wp-switch-editor {
float: left;
box-sizing: content-box;
position: relative;
top: 1px;
background: #f0f0f1;
color: #646970;
cursor: pointer;
font-size: 13px;
line-height: 1.46153846;
height: 20px;
margin: 5px 0 0 5px;
padding: 3px 8px 4px;
border: 1px solid #dcdcde;
}
.wpfnl .fw-400 {
font-weight: 400;
}
.wpfnl .fw-500 {
font-weight: 500;
}
.wpfnl .pos-relative {
position: relative;
}
.wpfnl .roboto {
font-family: "Roboto", sans-serif;
}
.wpfnl .overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.wpfnl .pro-tag {
background: #4CBB17;
box-shadow: 0px 3px 3px rgba(175, 175, 206, 0.3);
border-radius: 3px;
font-weight: 400;
font-size: 13px;
line-height: 15px;
color: #fff;
display: inline-block;
text-transform: capitalize;
padding: 2px 4px 3px;
}
.wpfnl .pro-tag a {
color: #fff;
line-height: 1;
font-size: 13px;
}
.wpfnl #wpfnl-pro-modal {
display: none;
}
.wpfnl .quick-toastify-successful-notification .quick-toastify-alert-toast {
z-index: 9999999999;
}
.wpfnl .no-product-notice {
font-size: 11px;
font-style: italic;
font-weight: 500;
text-transform: none;
display: block;
color: #f34252;
}
.wpfnl .wpfnl-selected-item {
border: 1px solid #e4e6eb;
border-radius: 4px;
font-size: 13px;
line-height: 1;
letter-spacing: -0.01em;
color: #667085;
display: inline-block;
padding: 3px 25px 5px 6px;
margin: 3px;
position: relative;
}
.wpfnl .wpfnl-selected-item .remove-item {
padding: 2px 5px 2px;
cursor: pointer;
position: absolute;
top: 0;
right: 0;
height: 100%;
border-left: 1px solid #e4e6eb;
display: flex;
align-items: center;
justify-content: center;
}
.wpfnl .wpfnl-selected-item .remove-item svg {
width: 8px;
height: 8px;
}
@media screen and (max-width: 782px) {
.wpfnl input[type=text],
.wpfnl input[type=password],
.wpfnl input[type=date],
.wpfnl input[type=datetime],
.wpfnl input[type=datetime-local],
.wpfnl input[type=email],
.wpfnl input[type=month],
.wpfnl input[type=number],
.wpfnl input[type=search],
.wpfnl input[type=tel],
.wpfnl input[type=time],
.wpfnl input[type=url],
.wpfnl input[type=week] {
min-height: auto;
}
}
.wpfnl .hints {
font-size: 13px;
font-style: italic;
color: #7A8B9A;
margin-top: 4px;
display: inline-block;
}
.wpfnl .top-align {
align-items: flex-start;
}
.wpfnl .top-align label {
padding-top: 10px;
}
.wpfnl .not-clickable-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(4px);
z-index: 999;
display: none;
flex-flow: column;
align-items: center;
justify-content: center;
}
.wpfnl .not-clickable-overlay.template-importing {
background-color: rgba(255, 255, 255, 0);
backdrop-filter: blur(0);
}
.wpfnl .not-clickable-overlay .import-message {
color: #ffffff;
font-size: 24px;
font-weight: 500;
display: none;
}
.wpfnl .wpfnl-notice {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 20px 24px;
font-size: 14px;
line-height: 1.5;
color: #363B4E;
border-radius: 10px;
border: 1px solid #F68524;
background: rgba(246, 133, 36, 0.1);
}
.wpfnl .wpfnl-notice svg {
flex-shrink: 0;
margin-top: 2px;
}
.wpfnl .wpfnl-notice .wpfnl-notice-content {
flex: 1;
}
.wpfnl .wpfnl-notice .wpfnl-notice-content strong {
display: block;
font-weight: 500;
color: #363B4E;
margin-bottom: 4px;
font-size: 16px;
}
.wpfnl .wpfnl-notice .wpfnl-notice-content p {
margin: 0;
line-height: 1.4;
color: #363B4E;
}
.wpfnl .upgrade-to-pro-hoverlay {
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.6);
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
z-index: 1;
}
.wpfnl .upgrade-to-pro-hoverlay .btn-default {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background: #2fcf5c;
padding: 10px 15px;
line-height: 1;
height: auto;
font-size: 14px;
border-radius: 10px;
}
.wpfnl .upgrade-to-pro-hoverlay .btn-default circle {
fill: #fff;
}
.wpfnl .upgrade-to-pro-hoverlay .btn-default path {
fill: #2fcf5c;
}
.wpfnl .upgrade-to-pro-hoverlay .btn-default:hover {
background: #1a8939;
}
.wpfnl .wpfnl-field-description {
display: block;
max-width: 460px;
margin-top: 5px;
padding-right: 20px;
color: #7A8B9A;
font-size: 13px;
font-weight: 400;
line-height: 1.45;
}
.wpfnl .wpfnl-pro-note {
width: 100%;
margin: 10px 0 0;
padding: 8px 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border: 1px solid #d3c5f2;
border-radius: 6px;
background: #f2eefc;
color: #48494e;
font-size: 13px;
font-weight: 400;
line-height: 1.4;
}
.wpfnl .wpfnl-pro-note .wpfnl-pro-note__link {
display: inline-flex;
align-items: center;
gap: 5px;
flex-shrink: 0;
color: #6E42D3;
font-weight: 600;
text-decoration: none;
box-shadow: none;
}
.wpfnl .wpfnl-pro-note .wpfnl-pro-note__link:hover, .wpfnl .wpfnl-pro-note .wpfnl-pro-note__link:focus {
color: #6E42D3;
text-decoration: underline;
box-shadow: none;
}
body.wpfunnels-body #wpcontent {
padding-left: 0;
}
.wpfnl-switcher {
position: relative;
}
.wpfnl-switcher input[type=checkbox] {
display: none;
}
.wpfnl-switcher label {
display: block;
position: relative;
cursor: pointer;
outline: none;
user-select: none;
width: 40px;
height: 22px;
border-radius: 50px;
background-color: #CDC9DB;
transition: all 0.3s ease;
}
.wpfnl-switcher label:after {
content: "";
width: 16px;
height: 16px;
filter: drop-shadow(0px 2px 2px rgba(193, 193, 218, 0.45));
background-color: #ffffff;
border-radius: 100%;
position: absolute;
top: 3px;
left: 3px;
transition: all 0.3s ease;
}
.wpfnl-switcher input[type=checkbox]:checked + label {
border-color: #6E42D3;
background-color: #6E42D3;
}
.wpfnl-switcher input[type=checkbox]:checked + label:after {
margin-left: 18px;
filter: none;
}
.wpfnl-switcher.sm label {
width: 28px;
height: 16px;
}
.wpfnl-switcher.sm label:after {
width: 10px;
height: 10px;
top: 3px;
left: 3px;
}
.wpfnl-switcher.sm input[type=checkbox]:checked + label:after {
margin-left: 12px;
}
.wpfnl-switcher.extra-sm label {
width: 28px;
height: 16px;
border: none;
background-color: #BEC8D0;
}
.wpfnl-switcher.extra-sm label:after {
width: 10px;
height: 10px;
top: 3px;
left: 3px;
}
.wpfnl-switcher.extra-sm input[type=checkbox]:checked + label:after {
margin-left: 12px;
}
.ab-testing-stats .stats-wrapper tbody .wpfnl-switcher label, .wpfnl-webhook-drawer .webhook-list-wrapper .webhook-single-list .status-field .wpfnl-switcher label, .step-condition-drawer .enable-disable-switcher .wpfnl-switcher label, .steps-page__header-right .funnel-stats label, .steps-page__header-center .enable-gbf label {
width: 26px;
height: 16px;
border: none;
background: #BEC8D0;
}
.ab-testing-stats .stats-wrapper tbody .wpfnl-switcher label:after, .wpfnl-webhook-drawer .webhook-list-wrapper .webhook-single-list .status-field .wpfnl-switcher label:after, .step-condition-drawer .enable-disable-switcher .wpfnl-switcher label:after, .steps-page__header-right .funnel-stats label:after, .steps-page__header-center .enable-gbf label:after {
width: 14px;
height: 14px;
top: 1px;
left: 1px;
}
.ab-testing-stats .stats-wrapper tbody .wpfnl-switcher input[type=checkbox]:checked + label, .wpfnl-webhook-drawer .webhook-list-wrapper .webhook-single-list .status-field .wpfnl-switcher input[type=checkbox]:checked + label, .step-condition-drawer .enable-disable-switcher .wpfnl-switcher input[type=checkbox]:checked + label, .steps-page__header-right .funnel-stats input[type=checkbox]:checked + label, .steps-page__header-center .enable-gbf input[type=checkbox]:checked + label {
background: #6E42D3;
}
.ab-testing-stats .stats-wrapper tbody .wpfnl-switcher input[type=checkbox]:checked + label:after, .wpfnl-webhook-drawer .webhook-list-wrapper .webhook-single-list .status-field .wpfnl-switcher input[type=checkbox]:checked + label:after, .step-condition-drawer .enable-disable-switcher .wpfnl-switcher input[type=checkbox]:checked + label:after, .steps-page__header-right .funnel-stats input[type=checkbox]:checked + label:after, .steps-page__header-center .enable-gbf input[type=checkbox]:checked + label:after {
margin-left: 10px;
}
.wpfnl-checkbox input[type=checkbox] {
display: none;
}
.wpfnl-checkbox.no-title label {
height: 14px;
}
.wpfnl-checkbox label {
font-size: 12px;
line-height: 14px;
font-weight: 400;
color: #7A8B9A;
position: relative;
padding-left: 29px;
display: inline-block;
text-transform: capitalize;
cursor: pointer;
}
.wpfnl-checkbox label:before {
content: "";
position: absolute;
left: 0;
top: -3px;
width: 18px;
height: 18px;
border-radius: 4px;
border: 1px solid #bdc7eb;
background-color: #f6f6f8;
transition: all 0.3s ease;
}
.wpfnl-checkbox label:after {
content: "";
position: absolute;
left: 5px;
top: 3px;
width: 9px;
height: 4px;
transform: rotate(-45deg);
border-bottom: 2px solid #fff;
border-left: 2px solid #fff;
transition: all 0.3s ease;
opacity: 0;
visibility: hidden;
}
.wpfnl-checkbox input[type=checkbox]:checked + label::before {
background-color: #6E42D3;
border-color: #6E42D3;
}
.wpfnl-checkbox input[type=checkbox]:checked + label::after {
opacity: 1;
visibility: visible;
}
.wpfnl-radiobtn input[type=radio] {
display: none;
}
.wpfnl-radiobtn.no-title label {
height: 16px;
}
.wpfnl-radiobtn label {
font-size: 12px;
line-height: 14px;
font-weight: 400;
color: #7A8B9A;
position: relative;
padding-left: 29px;
display: inline-block;
text-transform: capitalize;
cursor: pointer;
}
.wpfnl-radiobtn label::before {
content: "";
position: absolute;
left: 0;
top: -3px;
width: 18px;
height: 18px;
border-radius: 100%;
background: #F7F7FA;
border: 1px solid #bdc7eb;
transition: all 0.3s ease;
}
.wpfnl-radiobtn label::after {
content: "";
position: absolute;
left: 4px;
top: 1px;
width: 10px;
height: 10px;
border-radius: 100%;
background: #6E42D3;
transform: scale(0);
transition: all 0.3s ease;
}
.wpfnl-radiobtn input[type=radio]:checked + label::before {
border-color: #6E42D3;
}
.wpfnl-radiobtn input[type=radio]:checked + label::after {
transform: scale(1);
}
.wpfnl-tooltip {
display: inline-block;
position: relative;
padding: 0px 3px 2px;
height: 15px;
}
.wpfnl-tooltip p {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
background: #525252;
color: #fff;
padding: 7px 10px;
border-radius: 3px;
font-size: 13px;
line-height: 1.4;
min-width: 240px;
text-align: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
margin: 0;
}
.wpfnl-tooltip p:before {
content: "";
position: absolute;
left: 50%;
bottom: -4px;
width: 10px;
height: 10px;
background: #525252;
margin-left: -5px;
transform: rotate(45deg);
}
.wpfnl-tooltip:hover p {
opacity: 1;
visibility: visible;
}
.wpfnl-pagination {
display: flex;
align-items: center;
justify-content: center;
}
.wpfnl-pagination .nav-link {
width: 30px;
height: 30px;
border-radius: 6px;
background-color: transparent;
font-size: 16px;
color: #363b4e;
font-weight: 400;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
margin: 0 6px;
}
.wpfnl-pagination .nav-link.active, .wpfnl-pagination .nav-link:hover {
background-color: #6E42D3;
color: #fff;
box-shadow: 0px 10px 16px rgba(97, 103, 116, 0.15);
}
.wpfnl-pagination .nav-link.next, .wpfnl-pagination .nav-link.prev {
background-color: #ffffff;
}
.wpfnl-pagination .nav-link.next:hover, .wpfnl-pagination .nav-link.prev:hover {
background-color: #6E42D3;
}
.wpfnl-pagination .nav-link.next:hover svg path, .wpfnl-pagination .nav-link.prev:hover svg path {
fill: #fff;
}
.wpfnl-loader {
border: 2px solid #8265c5;
border-radius: 50%;
border-top: 2px solid #fff;
width: 13px;
height: 13px;
animation: spin 0.7s linear infinite;
display: none;
margin-left: 4px;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.select2-container.select2-container--default.select2-container--open {
background: #ffffff;
border-radius: 10px;
width: 248px;
border: 1px solid #E5E8F3;
z-index: 99;
}
.select2-container.select2-container--default.select2-container--open .select2-search--dropdown {
display: block;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
.select2-container.select2-container--default.select2-container--open .select2-search__field {
width: 100%;
background: #fff;
border: 1px solid #E5E8F3;
padding: 0 8px;
}
.select2-container.select2-container--default.select2-container--open .select2-search__field:focus {
border-color: #E5E8F3;
box-shadow: none;
outline: none;
}
.select2-container.select2-container--default.select2-container--open .select2-dropdown {
background-color: transparent;
border: none;
border-radius: unset;
box-sizing: border-box;
display: block;
position: relative;
width: 100% !important;
}
.select2-container.select2-container--default.select2-container--open .select2-results__message {
margin-bottom: 0;
}
.select2-container.select2-container--default.select2-container--open .select2-results__option {
border-top: 1px solid #E5E8F3;
padding: 10px 15px;
margin: 0;
cursor: pointer;
}
.select2-container.select2-container--default.select2-container--open .select2-results__option--highlighted {
background: #eee;
color: #3c434a;
}
.select2-container.select2-container--default.select2-container--open .select2-results__options {
margin: 0;
max-height: 210px;
overflow: auto;
}
.select2-container.select2-container--default.select2-container--open .select2-results__options::-webkit-scrollbar {
width: 3px;
}
.select2-container.select2-container--default.select2-container--open .select2-results__options::-webkit-scrollbar-track {
background: #f2f5f8;
}
.select2-container.select2-container--default.select2-container--open .select2-results__options::-webkit-scrollbar-thumb {
background-color: #6E42D3;
border-radius: 20px;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
float: none !important;
cursor: pointer;
margin-right: 3px;
}
.wpfnl .wpfnl-alert {
color: #383d41;
font-size: 13px;
font-weight: 500;
border-radius: 10px;
cursor: default;
display: none;
}
.wpfnl .wpfnl-alert.box {
background-color: #e2e3e5;
padding: 8px 20px;
border: 1px solid #d6d8db;
}
.wpfnl .wpfnl-alert.wpfnl-success {
color: #269c41;
}
.wpfnl .wpfnl-alert.wpfnl-success.box {
background-color: #d4edda;
border-color: #c3e6cb;
}
.wpfnl .wpfnl-alert.wpfnl-error {
color: #d63342;
}
.wpfnl .wpfnl-alert.wpfnl-error.box {
background-color: #f8d7da;
border-color: #f5c6cb;
}
.wpfnl .wpfnl-alert.wpfnl-warn {
color: #856404;
}
.wpfnl .wpfnl-alert.wpfnl-warn.box {
background-color: #fff3cd;
border-color: #ffeeba;
}
.wpfnl-hamburger {
display: block;
width: 20px;
height: 14px;
border-top: 2px solid #6E42D3;
border-bottom: 2px solid #6E42D3;
position: relative;
cursor: pointer;
}
.wpfnl-hamburger:before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
background: #6E42D3;
margin-top: -1px;
}
ul.wpfnl-dropdown {
display: flex;
flex-flow: column;
gap: 2px;
position: absolute;
background: #fff;
right: 0;
top: 37px;
width: 220px;
border-radius: 10px;
border: 1px solid #EBEDF0;
box-shadow: 0 6px 8px 0 rgba(191, 191, 191, 0.1);
z-index: 5;
padding: 9px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
ul.wpfnl-dropdown:after {
content: "";
position: absolute;
right: 21px;
top: -6px;
width: 10px;
height: 10px;
background: white;
transform: rotate(45deg);
z-index: 0;
border-top: 1px solid #E5E8F3;
border-left: 1px solid #E5E8F3;
}
ul.wpfnl-dropdown li a {
font-size: 14px;
line-height: 15px;
color: #7A8B9A;
font-weight: 400;
margin: 0;
padding: 7px 9px;
display: flex;
flex-flow: row;
align-items: center;
position: relative;
z-index: 1;
border-radius: 10px;
}
ul.wpfnl-dropdown li a svg {
margin-right: 6px;
width: 19px;
height: 19px;
}
ul.wpfnl-dropdown li a:hover {
background: #F6F8FA;
color: #7A8B9A;
}
.wpfnl-delete-alert-wrapper {
position: fixed;
top: 0;
right: 0;
padding: 15px;
width: calc(100% - 160px);
height: 100%;
background: rgba(21, 17, 29, 0.3);
backdrop-filter: blur(4px);
z-index: 999;
display: none;
flex-flow: row wrap;
align-items: center;
justify-content: center;
}
.wpfnl-delete-alert-wrapper.show-alert {
display: flex;
}
.wpfnl-delete-alert-wrapper.hide-alert {
display: none;
}
.wpfnl-delete-alert-wrapper .wpfnl-delete-confirmation {
background: #fff;
box-shadow: 0 1px 34px rgba(0, 0, 0, 0.06);
border-radius: 10px;
padding: 30px 20px;
width: 100%;
max-width: 420px;
text-align: center;
animation: wpfnl-bounce 0.3s;
}
.wpfnl-delete-alert-wrapper .wpfnl-delete-confirmation h3 {
font-size: 16px;
font-weight: 500;
}
.wpfnl-delete-alert-wrapper .icon {
width: 50px;
height: 50px;
border: 2px solid #e65555;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
border-radius: 100%;
}
.wpfnl-delete-alert-wrapper .icon svg {
width: 18px;
height: 18px;
}
.wpfnl-delete-alert-wrapper .icon svg path {
stroke: #e65555;
}
.wpfnl-delete-alert-wrapper .wpfnl-delete-confirm-btn {
display: flex;
flex-flow: row;
align-items: center;
justify-content: center;
margin-top: 30px;
}
.wpfnl-delete-alert-wrapper .wpfnl-delete-confirm-btn li {
margin: 0 10px;
}
.wpfnl-delete-alert-wrapper .wpfnl-delete-confirm-btn .btn-default {
height: 41px;
line-height: 42px;
padding: 0 20px;
min-width: 110px;
border-radius: 5px;
}
.wpfnl-delete-alert-wrapper .wpfnl-delete-confirm-btn .btn-default.yes {
background-color: #e65555;
}
.wpfnl-delete-alert-wrapper .wpfnl-delete-confirm-btn .btn-default.yes:hover {
background-color: #de6464;
}
.wpfnl-delete-alert-wrapper .wpfnl-delete-confirm-btn .btn-default.cancel {
background-color: #eee;
color: #333;
}
.wpfnl-delete-alert-wrapper .wpfnl-delete-confirm-btn .btn-default.cancel:hover {
background-color: #e2e2e2;
}
.delete-alert-new-ui .wpfnl-delete-confirmation {
position: relative;
max-width: 514px;
background: #F6F5FA;
border-radius: 14px;
padding: 0;
text-align: left;
}
.delete-alert-new-ui .icon {
width: 46px;
height: 46px;
border: none;
margin: 0;
border-radius: 100%;
box-shadow: 0px 1px 1px #DADADA;
background: #fff;
position: absolute;
right: -12px;
top: -12px;
cursor: pointer;
}
.delete-alert-new-ui .icon svg path {
stroke: #A7A8B3;
}
.delete-alert-new-ui .wpfnl-delete-confirm-body {
padding: 26px 20px 26px 26px;
}
.delete-alert-new-ui .wpfnl-delete-confirm-body h3 {
font-weight: 500;
font-size: 18px;
line-height: 1.2;
color: #2D3149;
display: flex;
align-items: center;
gap: 7px;
}
.delete-alert-new-ui .wpfnl-delete-confirm-body h3 svg {
position: relative;
top: -2px;
}
.delete-alert-new-ui .wpfnl-delete-confirm-body h3 svg path {
fill: #EC5956;
}
.delete-alert-new-ui .wpfnl-delete-confirm-body p {
color: #9398A5;
margin-top: 4px;
}
.delete-alert-new-ui .wpfnl-delete-confirm-btn {
justify-content: flex-end;
margin-top: 0;
border-top: 1px solid #E2E2E2;
padding: 20px 28px;
gap: 14px;
}
.delete-alert-new-ui .wpfnl-delete-confirm-btn .btn-default {
font-size: 15px;
height: 40px;
line-height: 41px;
padding: 0 18px;
min-width: auto;
border-radius: 10px;
}
.delete-alert-new-ui .wpfnl-delete-confirm-btn .btn-default.cancel {
background-color: transparent;
color: #2D3149;
border: 1px solid #E4E6EB;
}
.delete-alert-new-ui .wpfnl-delete-confirm-btn .btn-default.yes {
background-color: #6E42D3;
}
.delete-alert-new-ui .wpfnl-delete-confirm-btn .btn-default.yes:hover {
background-color: #4C25A5;
}
.folded .wpfnl-delete-alert-wrapper {
width: calc(100% - 36px);
}
@keyframes wpfnl-bounce {
0% {
transform: scale(0.7);
}
45% {
transform: scale(1.05);
}
80% {
transform: scale(0.95);
}
100% {
transform: scale(1);
}
}
.funnel-loader {
position: relative;
width: 100px;
height: 100px;
margin: 0 auto;
transform-style: preserve-3d;
transform: perspective(500px) rotateX(60deg);
}
.funnel-loader span {
position: absolute;
display: block;
border: 4px solid #6E42D3;
box-sizing: border-box;
border-radius: 100%;
box-shadow: 0 5px 0 #6E42D3, inset 0 5px 0 #6E42D3;
animation: funnel-animate 2s ease-in-out infinite;
}
.funnel-loader span:nth-child(1) {
top: 0;
left: 0;
bottom: 0;
right: 0;
animation-delay: 0.6s;
}
.funnel-loader span:nth-child(2) {
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
animation-delay: 0.5s;
}
.funnel-loader span:nth-child(3) {
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
animation-delay: 0.4s;
}
.funnel-loader span:nth-child(4) {
top: 30px;
left: 30px;
bottom: 30px;
right: 30px;
animation-delay: 0.3s;
}
.funnel-loader span:nth-child(5) {
top: 40px;
left: 40px;
bottom: 40px;
right: 40px;
animation-delay: 0.2s;
}
@keyframes funnel-animate {
0% {
transform: translateZ(-50px);
}
50% {
transform: translateZ(50px);
}
100% {
transform: translateZ(-50px);
}
}
@media only screen and (max-width: 960px) {
.wpfnl-delete-alert-wrapper {
width: calc(100% - 35px);
}
}
@media only screen and (max-width: 782px) {
.wpfnl-delete-alert-wrapper {
width: 100%;
}
}
.dot-wrapper span {
color: #fff;
font-size: 16px;
animation-duration: 1.5s;
animation-iteration-count: infinite;
}
.dot-wrapper span.dot-one {
animation-name: flashOne;
margin-left: 2px;
}
.dot-wrapper span.dot-two {
animation-name: flashTwo;
}
.dot-wrapper span.dot-three {
animation-name: flashThree;
}
@keyframes flashOne {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes flashTwo {
0% {
opacity: 0;
}
25% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes flashThree {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
75% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.wpfnl .ui-widget-header .ui-icon {
background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTYgMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggc3Ryb2tlPSIjN0E4QjlBIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS42NyIgZD0iTTEyLjY2NSA4SDMuMzMybTAgMGw0LjY2NyA0LjY2N00zLjMzMiA4bDQuNjY3LTQuNjY3Ii8+PC9zdmc+);
background-position: center;
}
.wpfnl .ui-widget-header .ui-datepicker-next .ui-icon {
background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTYgMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggc3Ryb2tlPSIjN0E4QjlBIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS42NyIgZD0iTTMuMzM1IDhoOS4zMzNtMCAwbC00LjY2NyA0LjY2N00xMi42NjggOEw4LjAwMSAzLjMzMyIvPjwvc3ZnPg==);
}
.wpfnl .ui-datepicker {
width: 290px;
z-index: 4 !important;
}
.wpfnl .ui-datepicker.ui-widget-content {
border: none;
box-shadow: none;
}
.wpfnl .ui-datepicker .ui-datepicker-header {
background: transparent;
border: none;
padding: 0;
margin-bottom: 4px;
}
.wpfnl .ui-datepicker .ui-datepicker-prev,
.wpfnl .ui-datepicker .ui-datepicker-next {
top: 4px;
width: 24px;
height: 24px;
background: #ffffff !important;
cursor: pointer;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.09);
border-radius: 6px;
border: 1px solid #F1F0F5;
}
.wpfnl .ui-datepicker .ui-datepicker-prev-hover,
.wpfnl .ui-datepicker .ui-datepicker-next-hover {
top: 4px;
}
.wpfnl .ui-datepicker .ui-datepicker-next {
right: 4px;
}
.wpfnl .ui-datepicker .ui-datepicker-next-hover {
right: 4px;
}
.wpfnl .ui-datepicker .ui-datepicker-prev {
left: 4px;
}
.wpfnl .ui-datepicker .ui-datepicker-prev-hover {
left: 4px;
}
.wpfnl .ui-datepicker .ui-datepicker-title select {
line-height: 1.1;
margin: 1px 2px;
border: none;
box-shadow: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.09);
}
.wpfnl .ui-datepicker table {
margin: 0;
}
.wpfnl .ui-datepicker td span,
.wpfnl .ui-datepicker td a {
display: block;
padding: 9px 7px 7px;
height: 32.5px;
width: 32.5px;
text-align: center;
text-decoration: none;
border-radius: 50%;
outline: none;
margin: 0;
color: #2D3149;
font-size: 12px;
font-weight: 500 !important;
}
.wpfnl .ui-datepicker .ui-state-default,
.wpfnl .ui-datepicker .ui-widget-content .ui-state-default,
.wpfnl .ui-datepicker .ui-widget-header .ui-state-default {
border: none !important;
background: transparent;
font-weight: normal;
color: #2D3149;
position: relative;
z-index: 1;
}
.wpfnl .ui-datepicker .ui-state-default:hover,
.wpfnl .ui-datepicker .ui-state-hover,
.wpfnl .ui-datepicker .ui-widget-content .ui-state-hover,
.wpfnl .ui-datepicker .ui-state-active,
.wpfnl .ui-datepicker .ui-widget-content .ui-state-highlight {
background: #6E42D3;
color: #fff;
}
.wpfnl .ui-datepicker .ui-priority-secondary,
.wpfnl .ui-datepicker .ui-widget-content .ui-priority-secondary {
opacity: 1;
color: #9b9b9b !important;
}
.wpfnl .ui-datepicker .ui-state-disabled span {
cursor: not-allowed;
}
.wpfnl .ui-datepicker .in-range {
position: relative;
}
.wpfnl .ui-datepicker .in-range:before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
z-index: 1;
background: rgba(110, 66, 211, 0.12);
height: 28px;
width: 100%;
}
.wpfnl .ui-datepicker .in-range[title=Start]:before {
border-radius: 50px 0 0 50px;
opacity: 0;
}
.wpfnl .ui-datepicker .in-range[title=End]:before {
border-radius: 0 50px 50px 0;
}
.wpfnl .ui-datepicker .in-range[title=Start] > a, .wpfnl .ui-datepicker .in-range[title=End] > a {
background: #6E42D3 !important;
color: #fff !important;
border-radius: 50%;
}
.wpfnl .ui-datepicker .in-range:last-child:before {
border-radius: 0 50px 50px 0;
}
.wpfnl .ui-datepicker .in-range:first-child:before {
border-radius: 50px 0 0 50px;
}
.wpfnl .ui-datepicker .in-range[title=Start] + .in-range:before {
left: -9px;
width: calc(100% + 9px);
}
.wpfnl .ui-datepicker .in-range[title=End]:first-child:before {
opacity: 0;
}
.wpfnl-custom-selectbox {
position: relative;
}
.wpfnl-custom-selectbox .selectbox-selected-value {
position: relative;
width: 100%;
border: 1px solid #ebedf0;
border-radius: 6px;
padding: 13px 33px 13px 12px;
background-color: transparent;
text-align: left;
font-weight: 400;
font-size: 14px;
line-height: 1.21;
color: #6a707c;
cursor: pointer;
}
.wpfnl-custom-selectbox .selectbox-selected-value:before {
content: url(data:image/svg+xml,%3Csvg%20fill%3D%22none%22%20viewBox%3D%220%200%2012%207%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20stroke%3D%22%23A7A8B3%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.8%22%20d%3D%22M11%201L6%206%201%201%22%2F%3E%3C%2Fsvg%3E);
width: 12px;
display: block;
position: absolute;
right: 15px;
top: 50%;
margin-top: -9px;
transition: all 0.3s ease;
}
.wpfnl-custom-selectbox .selectbox-options {
width: 100%;
max-width: 300px;
position: absolute;
background: #fff;
right: 0;
top: calc(100% + 8px);
border: 1px solid #E5E8F3;
z-index: 5;
transition: all 0.3s ease;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.06);
border-radius: 6px;
padding: 8px;
opacity: 0;
visibility: hidden;
}
.wpfnl-custom-selectbox.show-options .selectbox-options {
opacity: 1;
visibility: visible;
}
.wpfnl-custom-selectbox.show-options .selectbox-selected-value:before {
transform: rotate(-180deg);
}
.wpfnl-custom-selectbox .selectbox-search {
padding: 8px 8px 14px;
}
.wpfnl-custom-selectbox .selectbox-search .search-icon {
position: absolute;
top: 24px;
left: 25px;
}
.wpfnl-custom-selectbox .selectbox-search input[type=search] {
font-weight: 400;
height: 34px;
padding: 6px 15px 4px 36px;
}
.wpfnl-custom-selectbox .list-title {
font-weight: 500;
font-size: 12px;
line-height: 15px;
letter-spacing: 1px;
text-transform: uppercase;
color: #667085;
border-top: 1px solid #ebedf0;
border-bottom: 1px solid #ebedf0;
border-radius: 0;
background: #f9fafb;
position: relative;
padding: 8px 18px;
left: -8px;
width: calc(100% + 16px);
cursor: text;
margin-bottom: 10px;
}
.wpfnl-custom-selectbox .options-tag,
.wpfnl-custom-selectbox .options-list {
max-height: 200px;
overflow: auto;
}
.wpfnl-custom-selectbox .options-tag::-webkit-scrollbar,
.wpfnl-custom-selectbox .options-list::-webkit-scrollbar {
width: 5px;
}
.wpfnl-custom-selectbox .options-tag::-webkit-scrollbar-track,
.wpfnl-custom-selectbox .options-list::-webkit-scrollbar-track {
background: #f2f5f8;
}
.wpfnl-custom-selectbox .options-tag::-webkit-scrollbar-thumb,
.wpfnl-custom-selectbox .options-list::-webkit-scrollbar-thumb {
background-color: #c1c1c1;
border-radius: 20px;
}
.wpfnl-custom-selectbox .single-option {
display: block;
padding: 8px 10px;
border-radius: 6px;
transition: all 0.3s ease;
}
.wpfnl-custom-selectbox .single-option:hover {
background: #f6f8fa;
}
.wpfnl-custom-selectbox .single-option label {
line-height: 1.3;
display: block;
}
.wpfnl-selectbox {
max-width: 270px;
width: 100%;
border-radius: 6px;
border: 1px solid #EEF0F3;
background: #FFF;
position: relative;
cursor: pointer;
}
.wpfnl-selectbox .selected-option {
color: #363B4E;
font-size: 14px;
line-height: 1;
letter-spacing: -0.14px;
padding: 13px 30px 11px 14px;
}
.wpfnl-selectbox .selected-option:before {
content: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTAgNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBzdHJva2U9IiM3QThCOUEiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xIDFsNCA0IDQtNCIvPjwvc3ZnPg==");
width: 10px;
position: absolute;
right: 14px;
top: 50%;
line-height: 1;
transform: translateY(-50%);
}
.wpfnl-selectbox .selectable-options {
width: 100%;
list-style-type: none;
padding: 8px;
font-size: 16px;
position: absolute;
left: 0;
top: calc(100% + 8px);
z-index: 1;
border-radius: 6px;
border: 1px solid #EBEDF0;
background: #FFF;
box-shadow: 0px 18px 22px 0px rgba(73, 59, 104, 0.1);
max-height: 230px;
overflow-y: auto;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.wpfnl-selectbox .selectable-options::-webkit-scrollbar {
width: 3px;
height: 3px;
}
.wpfnl-selectbox .selectable-options::-webkit-scrollbar-track {
background: #f2f5f8;
}
.wpfnl-selectbox .selectable-options::-webkit-scrollbar-thumb {
background-color: #CBCBCB;
border-radius: 20px;
}
.wpfnl-selectbox .selectable-options li {
padding: 11px 12px 9px;
color: #363B4E;
font-size: 14px;
font-weight: 400;
line-height: 1;
letter-spacing: -0.14px;
border-radius: 6px;
}
.wpfnl-selectbox .selectable-options li:hover {
background: #F6F5FA;
}
.wpfnl-selectbox .selectable-options li.selected {
background: #F6F5FA;
font-weight: 500;
}
.wpfnl-selectbox.show-options .add-step-dropdown,
.wpfnl-selectbox.show-options .selectable-options {
opacity: 1;
visibility: visible;
}
.wpfnl-toast-alert {
position: fixed;
top: 150px;
right: 20px;
z-index: 9999;
max-width: 360px;
min-width: 250px;
-webkit-animation: fadeinout 3s ease-in-out forwards;
animation: fadeinout 3s ease-in-out forwards;
}
.wpfnl-toast-alert .wpfnl-toast-alert-wrapper .toast-alert-box {
background: #ffffff;
border: 1px solid #039855;
box-shadow: 0px 7px 30px rgba(16, 5, 46, 0.08);
border-radius: 10px;
display: flex;
flex-flow: row wrap;
align-items: center;
padding: 15px;
gap: 10px;
}
.wpfnl-toast-alert .wpfnl-toast-alert-wrapper .toast-alert-box .alert-text {
width: calc(100% - 34px);
position: relative;
padding-left: 25px;
}
.wpfnl-toast-alert .wpfnl-toast-alert-wrapper .toast-alert-box .alert-text::before {
content: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTggMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzAzOTg1NSIgZD0iTTkgMThBOSA5IDAgMTA5IDBhOSA5IDAgMDAwIDE4eiIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTYuMTkgMTMuMzlMMi44OTggOS44NjdhMS4yMDMgMS4yMDMgMCAwMS4wNTctMS42OTYgMS4yMDMgMS4yMDMgMCAwMTEuNjk3LjA1N2wyLjUzOSAyLjcxNyA0LjAxOC0zLjc1NGMuMDM3LS4wMzQuMDc0LS4wNjUuMTEzLS4wOTRsMS44OS0xLjc2NWExLjIwMyAxLjIwMyAwIDAxMS42OTYuMDU3IDEuMjAzIDEuMjAzIDAgMDEtLjA1NyAxLjY5NmwtNS43NzMgNS4zOTMtLjAwNi0uMDA2LTEuOTk2IDEuODY2LS44ODYtLjk0OHoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");
position: absolute;
left: 0;
top: 0;
height: 18px;
width: 18px;
display: block;
}
.wpfnl-toast-alert .wpfnl-toast-alert-wrapper .toast-alert-box .cross-icon {
width: 24px;
height: 24px;
background: #ffffff;
border: 1px solid #e4e6eb;
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.wpfnl-toast-alert .wpfnl-toast-alert-wrapper .toast-alert-box .cross-icon svg path {
fill: #686f7f;
}
.wpfnl-toast-alert .wpfnl-toast-alert-wrapper .toast-alert-box .cross-icon:hover {
background: #e4e6eb;
}
@-webkit-keyframes fadeinout {
0% {
opacity: 0;
top: 150px;
}
80%, 20% {
opacity: 1;
top: 125px;
}
100% {
opacity: 0;
top: 80px;
}
}
@keyframes fadeinout {
0% {
opacity: 0;
top: 150px;
}
80%, 20% {
opacity: 1;
top: 125px;
}
100% {
opacity: 0;
top: 80px;
}
}
.wpfnl-modal .wpfnl-modal__header {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-between;
padding: 12px 15px;
border-radius: 15px 15px 0 0;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
position: relative;
}
.wpfnl-modal .wpfnl-modal__header .title h2 {
font-weight: 500;
font-size: 16px;
line-height: 1.3;
color: #363B4E;
}
.wpfnl-modal .wpfnl-modal__header .wpfnl-modal-close {
height: 28px;
width: 28px;
background: #F6F6F8;
border: 1px solid #E5E8F3;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
border-radius: 100%;
cursor: pointer;
}
.wpfnl-modal .wpfnl-modal__header .wpfnl-modal-close svg path {
stroke: #6E42D3;
}
.wpfnl-modal .wpfnl-modal__body {
background: #F2F5F8;
padding: 23px 25px 0px;
overflow: auto;
height: calc(100% - 52px);
}
.wpfnl-modal .wpfnl-modal__body::-webkit-scrollbar {
width: 5px;
}
.wpfnl-modal .wpfnl-modal__body::-webkit-scrollbar-track {
background: #f2f5f8;
}
.wpfnl-modal .wpfnl-modal__body::-webkit-scrollbar-thumb {
background-color: #6E42D3;
border-radius: 20px;
}
.wpfnl-modal .wpfnl-modal__body .choose-step-type label {
font-weight: 500;
font-size: 13px;
line-height: 15px;
color: #363B4E;
margin-bottom: 9px;
display: inline-block;
}
.wpfnl-modal .wpfnl-modal__body .choose-step-type select {
height: 36px;
border-radius: 5px;
padding: 4px 15px;
max-width: 100%;
}
.wpfnl-modal .wpfnl-modal__body .choose-step-type select:focus {
border-color: #6E42D3;
}
.wpfnl-modal .wpfnl-modal__body .wpfnl-create-step__filter-nav {
margin-bottom: 30px;
margin-left: 5px;
border-bottom: 1px solid #E1E1EB;
}
.wpfnl-modal .wpfnl-modal__body .wpfnl-create-step__filter-nav > li {
padding: 5px 0 10px;
cursor: pointer;
margin-right: 22px;
text-transform: capitalize;
font-weight: 500;
font-size: 14px;
line-height: 16px;
color: #7A8B9A;
position: relative;
}
.wpfnl-modal .wpfnl-modal__body .wpfnl-create-step__filter-nav > li:before {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 100%;
height: 2px;
background: #6E42D3;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.wpfnl-modal .wpfnl-modal__body .wpfnl-create-step__filter-nav > li:hover, .wpfnl-modal .wpfnl-modal__body .wpfnl-create-step__filter-nav > li.active {
color: #6E42D3;
}
.wpfnl-modal .wpfnl-modal__body .wpfnl-create-step__filter-nav > li.active:before {
opacity: 1;
visibility: visible;
}
.wpfnl-modal .wpfnl-modal__body .wpfnl-create-step__filter-nav > li .pro-tag {
position: absolute;
top: -9px;
right: -10px;
font-size: 10px;
padding: 0 4px;
}
.wpfnl-modal .wpfnl-modal__body .wpfnl-create-step__filter-nav > li.disabled {
font-weight: 400;
color: rgba(122, 139, 154, 0.5);
}
.wpfnl-modal .wpfnl-modal__body .wpfnl-create-step__filter-nav > li.disabled:hover {
color: rgba(122, 139, 154, 0.5);
}
.wpfnl-modal .wpfnl-modal__footer {
padding: 15px 20px;
border-top: 1px solid #E5E8F3;
}
.wpfnl-modal .wpfnl-modal__footer .step-save-btn {
display: flex;
flex-flow: row;
align-items: center;
justify-content: flex-end;
}
.wpfnl-modal .wpfnl-modal__footer .step-save-btn .wpfnl-alert {
margin-right: 10px;
}
.wpfnl-modal .wpfnl-modal__footer .step-save-btn a.btn-default {
background: transparent;
border: 1px solid #E5E8F3;
color: #363B4E;
width: 110px;
padding: 0 20px;
margin-right: 10px;
}
.wpfnl-modal .wpfnl-modal__footer .step-save-btn a.btn-default:hover {
background: rgba(0, 0, 0, 0.04);
}
.wpfnl-modal .wpfnl-modal__footer .step-save-btn button {
width: 110px;
padding: 0 20px;
border: 1px solid transparent;
display: flex;
flex-flow: row;
align-items: center;
justify-content: center;
}
.wpfnl-dashboard__nav {
background: #fff;
box-shadow: 1px 0px 2px rgba(190, 190, 215, 0.14);
position: relative;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 0 24px;
}
.wpfnl-dashboard__nav .wpfnl-dashboard__nav-ul {
display: flex;
align-items: center;
gap: 24px;
}
.wpfnl-dashboard__nav .wpfnl-dashboard__nav-li {
display: block;
position: relative;
}
.wpfnl-dashboard__nav .wpfnl-dashboard__nav-li:last-child {
margin-bottom: 0;
}
.wpfnl-dashboard__nav .wpfnl-dashboard__nav-li a {
display: block;
text-align: center;
font-weight: 400;
font-size: 14px;
line-height: 1;
color: #707070;
padding: 23px 3px;
text-decoration: none;
}
.wpfnl-dashboard__nav .wpfnl-dashboard__nav-li a svg {
display: block;
margin: 0 auto 8px;
}
.wpfnl-dashboard__nav .wpfnl-dashboard__nav-li a:hover {
color: #6E42D3;
}
.wpfnl-dashboard__nav .wpfnl-dashboard__nav-li.active:after {
content: "";
position: absolute;
left: 0px;
bottom: -2px;
height: 2px;
width: 100%;
background: #6E42D3;
z-index: 1;
}
.wpfnl-dashboard__nav .wpfnl-dashboard__nav-li.active a {
color: #6E42D3;
}
.wpfnl-dashboard__nav .logo {
display: block;
}
.wpfnl-dashboard__nav .logo a {
display: block;
text-align: center;
}
.wpfnl-dashboard__nav .logo a svg {
display: block;
margin: 0 auto;
}
.wpfnl-dashboard__nav .wpfnl-dashboard__nav-right {
display: flex;
align-items: center;
margin-inline-start: auto;
}
.dashboard-nav__content {
position: relative;
width: calc(100% - 280px);
margin: 0 auto;
}
.dashboard-nav__content .import-funnel-modal {
position: fixed;
top: 0;
left: 160px;
width: calc(100% - 160px);
height: 100%;
background: rgba(21, 17, 29, 0.3);
backdrop-filter: blur(6px);
z-index: 99;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.dashboard-nav__content .import-funnel-modal.show-modal {
opacity: 1;
visibility: visible;
}
.dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner {
width: 100%;
height: 100%;
padding: 32px;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
}
.dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper {
background: #F6F5FA;
border-radius: 15px 0px 15px 15px;
width: 100%;
max-width: 540px;
position: relative;
padding: 24px 30px 20px;
}
.dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper .import-funnel-modal-title {
font-weight: 600;
font-size: 18px;
line-height: 1.18;
color: #363B4E;
margin-bottom: 13px;
}
.dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper .close-modal {
border: none;
width: 40px;
height: 40px;
position: absolute;
top: -16px;
right: -16px;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 100px;
background: #ffffff;
box-shadow: 0px 1px 1px 0px #DADADA;
}
.dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper form {
position: relative;
}
.dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper form input[type=file] {
position: absolute;
width: 100%;
height: 206px;
top: 0;
left: 0;
opacity: 0;
}
.dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper form input[type=file]::-webkit-file-upload-button {
background: #F9F9FA;
border: 1px solid #C9D0E9;
border-radius: 6px;
padding: 9px 17px;
margin-right: 12px;
cursor: pointer;
}
.dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper form .import-label {
border-radius: 8px;
padding: 50px 30px;
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23AFADB6FF' stroke-width='2' stroke-dasharray='3%2c 7' stroke-dashoffset='-6' stroke-linecap='round'/%3e%3c/svg%3e");
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
}
.dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper form .import-label h4 {
color: #2D3149;
font-size: 15px;
line-height: 1;
font-weight: 600;
margin-bottom: 1px;
}
.dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper form .import-label h4 .primary-color {
color: #6E42D3;
font-weight: 600;
}
.dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper form .upload-success-icon,
.dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper form .upload-icon {
width: 50px;
height: 50px;
background: #6e42d3;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
border-radius: 100%;
margin-bottom: 16px;
}
.dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper form .upload-success-icon {
display: none;
background: #239654;
}
.dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper form .upload-success-icon svg {
position: relative;
top: 1px;
left: 1px;
}
.dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper form .file-added .upload-success-icon {
display: flex;
}
.dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper form .file-added .upload-icon {
display: none;
}
.dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper form .button-area {
display: flex;
flex-flow: row;
align-items: center;
justify-content: flex-end;
border-top: 1px solid #E4E6EB;
margin-top: 30px;
padding: 20px 30px 0;
gap: 12px;
position: relative;
left: -30px;
width: calc(100% + 60px);
}
.dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper form .button-area .btn-default {
padding: 8px 21px 6px;
height: 40px;
line-height: 1;
border-radius: 10px;
box-shadow: 0px 9px 14px 0px rgba(193, 183, 232, 0.5);
min-width: auto;
border: 1px solid transparent;
}
.dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper form .button-area .btn-default .wpfnl-loader {
position: relative;
top: 2px;
}
.dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper form .button-area .cancel {
position: relative;
top: inherit;
right: inherit;
border-color: #E4E6EB;
width: auto;
background: transparent;
box-shadow: none;
color: #3C3F47;
}
.dashboard-nav__content .import-funnel-modal .import-funnel-modal-inner .import-funnel-modal-wrapper form .button-area .cancel:hover {
background: #f1f1f1;
}
.dashboard-nav__content .upgrade-to-pro {
margin-top: 20px;
}
.dashboard-nav__content .upgrade-to-pro .upgrade-to-pro-wrapper {
display: flex;
align-items: start;
width: 100%;
padding: 20px;
border-radius: 10px;
border: 1px solid rgba(238, 129, 52, 0.5);
background: #FFFAF6;
}
.dashboard-nav__content .upgrade-to-pro .upgrade-to-pro-wrapper .warning-icon-wrapper {
margin-right: 15px;
}
.dashboard-nav__content .upgrade-to-pro .upgrade-to-pro-wrapper .warning-icon {
display: inline-block;
vertical-align: middle;
}
.dashboard-nav__content .upgrade-to-pro .upgrade-to-pro-wrapper .upgrade-to-pro-content {
flex-grow: 1;
color: #d9534f;
font-size: 16px;
line-height: 1.5;
}
.dashboard-nav__content .upgrade-to-pro .upgrade-to-pro-wrapper .upgrade-to-pro-content .upgrade-to-pro-message {
color: #667085;
font-family: Roboto;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 24px;
max-width: 636px;
}
.dashboard-nav__content .upgrade-to-pro .upgrade-to-pro-wrapper .upgrade-to-pro-content .upgrade-to-pro-message h3 {
color: #373B4D;
font-family: Roboto;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin-bottom: 10px;
}
.dashboard-nav__content .upgrade-to-pro .upgrade-to-pro-wrapper .upgrade-to-pro-action {
display: flex;
align-items: center;
margin-left: 20px;
}
.dashboard-nav__content .upgrade-to-pro .upgrade-to-pro-wrapper .upgrade-to-pro-action .btn-upgrade-to-pro {
background-color: #6f42c1;
text-decoration: none;
font-weight: 500;
color: #FFF;
text-align: center;
font-family: Inter;
font-size: 16px;
font-style: normal;
padding: 10px 20px;
border-radius: 7px;
}
.dashboard-nav__content .upgrade-to-pro .upgrade-to-pro-wrapper .upgrade-to-pro-action .btn-upgrade-to-pro:hover {
background-color: #563d7c;
}
body.folded .dashboard-nav__content .import-funnel-modal {
left: 36px;
}
.wpfnl-dashboard__header {
box-shadow: 0 1px 2px 0 rgba(190, 190, 215, 0.2);
background: #fff;
width: 100%;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-between;
padding: 20px 20px 20px 30px;
border-left: 1px solid #ebedf7;
}
.wpfnl-dashboard__header.overview-header {
box-shadow: none;
background: transparent;
padding: 20px 0 0;
border-left: none;
}
.wpfnl-dashboard__header .wpfnl-dashboard-header-left {
display: flex;
align-items: center;
justify-content: center;
}
.wpfnl-dashboard__header .title h1 {
font-weight: 500;
font-size: 18px;
line-height: 21px;
color: #363B4E;
text-transform: capitalize;
}
.wpfnl-dashboard__header .title .subtitle {
font-size: 13px;
display: inline-block;
}
.wpfnl-dashboard__header .funnel-search {
margin-right: 20px;
}
.wpfnl-dashboard__header .funnel-search .search-group {
position: relative;
width: 230px;
}
.wpfnl-dashboard__header .funnel-search .search-group svg {
position: absolute;
top: 9px;
left: 12px;
}
.wpfnl-dashboard__header .funnel-search .search-group input {
padding-left: 40px;
border-radius: 10px;
font-size: 13px;
box-shadow: 0 1px 2px 0 rgba(190, 190, 215, 0.2);
border: none;
height: 39px;
}
.wpfnl-dashboard__header .funnel-search .search-group input::-webkit-input-placeholder {
color: #7A8B9A;
}
.wpfnl-dashboard__header .funnel-search .search-group input::-moz-placeholder {
color: #7A8B9A;
}
.wpfnl-dashboard__header .funnel-search .search-group input:-ms-input-placeholder {
color: #7A8B9A;
}
.wpfnl-dashboard__header .funnel-search .search-group input:-moz-placeholder {
color: #7A8B9A;
}
.wpfnl-dashboard__header .wpfnl-dashboard-links-wrapper {
margin-right: 20px;
}
.wpfnl-dashboard__header .wpfnl-dashboard-links-wrapper a.wpfnl-trash-all-funnels,
.wpfnl-dashboard__header .wpfnl-dashboard-links-wrapper a.wpfnl-all-funnels {
margin-right: 16px;
}
.wpfnl-dashboard__header .wpfnl-dashboard-links-wrapper a.wpfnl-trash-all-funnels:last-child,
.wpfnl-dashboard__header .wpfnl-dashboard-links-wrapper a.wpfnl-all-funnels:last-child {
margin-right: 0;
}
.wpfnl-dashboard__header .wpfnl-dashboard-links-wrapper a.wpfnl-trash-all-funnels span,
.wpfnl-dashboard__header .wpfnl-dashboard-links-wrapper a.wpfnl-all-funnels span {
color: #2D3149;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 1;
letter-spacing: -0.14px;
}
.wpfnl-dashboard__header .wpfnl-dashboard-links-wrapper a.wpfnl-trash-all-funnels span.wpfnl-count,
.wpfnl-dashboard__header .wpfnl-dashboard-links-wrapper a.wpfnl-all-funnels span.wpfnl-count {
border-radius: 10px;
background: #FFF;
padding: 6px 8px;
color: #7A8B9A;
font-family: Inter;
font-size: 10px;
font-style: normal;
font-weight: 500;
line-height: 8px;
letter-spacing: -0.1px;
margin-left: 3px;
display: inline-block;
}
.wpfnl-dashboard__header .wpfnl-dashboard-links-wrapper a.wpfnl-trash-all-funnels.active span,
.wpfnl-dashboard__header .wpfnl-dashboard-links-wrapper a.wpfnl-all-funnels.active span {
color: #573BFF;
}
.wpfnl-dashboard__header .wpfnl-dashboard-links-wrapper a.wpfnl-trash-all-funnels.active span.wpfnl-count,
.wpfnl-dashboard__header .wpfnl-dashboard-links-wrapper a.wpfnl-all-funnels.active span.wpfnl-count {
background: rgba(87, 59, 255, 0.1);
}
.wpfnl-dashboard__header a.import-export {
background: #FFFFFF;
box-shadow: 0px 1px 2px rgba(190, 190, 215, 0.2);
border-radius: 8px;
font-weight: 400;
font-size: 14px;
line-height: 1.21;
text-align: center;
color: #363B4E;
padding: 12px 20px 10px;
display: flex;
align-items: center;
gap: 5px;
margin-right: 14px;
cursor: pointer;
}
.wpfnl-dashboard__header a.import-export .pro-tag-icon {
width: 20px;
height: 20px;
}
.wpfnl-dashboard__header a.import-export svg {
display: block;
position: relative;
top: -1px;
}
.wpfnl-dashboard__header a.import-export path {
transition: all 0.3s ease;
}
.wpfnl-dashboard__header a.import-export:hover {
color: #6E42D3;
}
.wpfnl-dashboard__header a.import-export:hover path {
fill: #6E42D3;
}
.wpfnl-dashboard__header a.import-export:hover .pro-tag-icon path {
fill: #FFF;
}
.wpfnl-dashboard__header a.import-export.wpfnl-export-all-funnels {
margin-left: auto;
}
.wpfnl-dashboard__header a.import-export#wpfnl-export-all-pro {
margin-left: auto;
}
.wpfnl-dashboard__header a.import-export.disabled {
opacity: 0.5;
pointer-events: none;
cursor: not-allowed;
}
.wpfnl-dashboard__header a.import-export.disabled svg path {
stroke: #363B4E;
}
.wpfnl-dashboard__header a.pro-import-button {
background: #FFFFFF;
box-shadow: 0px 1px 2px rgba(190, 190, 215, 0.2);
border-radius: 8px;
font-weight: 400;
font-size: 14px;
line-height: 1.21;
text-align: center;
color: #363B4E;
padding: 12px 20px 10px;
display: flex;
align-items: center;
gap: 5px;
margin-right: 14px;
cursor: pointer;
}
.wpfnl-dashboard__header a.pro-import-button .pro-tag-icon {
width: 20px;
height: 20px;
}
.wpfnl-dashboard__header a.pro-import-button svg {
display: block;
position: relative;
top: -1px;
}
.wpfnl-dashboard__header a.pro-import-button path {
transition: all 0.3s ease;
}
.wpfnl-dashboard__header a.pro-import-button:hover {
color: #6E42D3;
}
.wpfnl-dashboard__header a.pro-import-button:hover path {
fill: #6E42D3;
}
.wpfnl-dashboard__header a.pro-import-button:hover .pro-tag-icon path {
fill: #FFF;
}
.wpfnl-dashboard__header a.pro-import-button.wpfnl-export-all-funnels {
margin-left: auto;
}
.wpfnl-dashboard__header a.pro-import-button#wpfnl-export-all-pro {
margin-left: auto;
}
.wpfnl-dashboard__header .btn-default.disabled,
.wpfnl-dashboard__header .add-new-funnel-btn {
font-weight: 400;
height: 40px;
line-height: 41px;
border-radius: 10px;
}
.wpfnl-dashboard__header .add-new-funnel-btn svg {
position: relative;
top: 1px;
margin-right: 3px;
}
.wpfnl-dashboard__header .add-new-funnel-btn svg path {
stroke: #fff;
}
.wpfnl-dashboard__header .add-new-funnel-btn.disabled {
opacity: 0.5;
pointer-events: none;
cursor: not-allowed;
}
.wpfnl-dashboard__header .add-new-funnel-btn.disabled svg {
margin-right: 6px;
}
.wpfnl-dashboard__header .wpfnl-ai-funnel-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, #6E42D3 0%, #9B6BFF 100%);
color: #fff !important;
border: none;
padding: 8px 18px;
border-radius: 10px;
font-size: 14px;
font-weight: 500;
height: 40px;
line-height: 41px;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none !important;
margin-left: 8px;
white-space: nowrap;
}
.wpfnl-dashboard__header .wpfnl-ai-funnel-btn:hover {
background: linear-gradient(135deg, #5C35B5 0%, #8A5AEE 100%);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(110, 66, 211, 0.35);
color: #fff !important;
}
.wpfnl-dashboard__header .wpfnl-ai-funnel-btn:active {
transform: translateY(0);
}
.wpfnl-dashboard__header .wpfnl-ai-funnel-btn svg {
flex-shrink: 0;
}
.wpfnl-dashboard__inner-content {
min-height: 425px;
margin: 24px auto 30px;
}
.wpfnl-dashboard__inner-content.no-funnel .funnel-list__wrapper {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
background-color: transparent;
border-radius: 0;
}
.wpfnl-dashboard__inner-content.no-funnel .no-funnel-wrapper {
background: transparent;
width: 100%;
}
.wpfnl-dashboard__inner-content.no-funnel .no-funnel-wrapper .no-funnel {
color: #363B4E;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 0.88;
}
.wpfnl-dashboard__inner-content.no-funnel .no-trash-wrapper {
text-align: center;
background: #FFF;
filter: drop-shadow(0px 1px 1px rgba(182, 185, 191, 0.3));
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 40px;
padding: 170px 0px;
border-radius: 10px;
}
.wpfnl-dashboard__inner-content.no-funnel .no-trash-wrapper .no-funnel {
font-family: "Roboto";
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 16px;
color: #363B4E;
}
.wpfnl-dashboard__inner-content.no-funnel .create-new-funnel {
display: flex;
flex-flow: row wrap;
gap: 16px;
}
.wpfnl-dashboard__inner-content.no-funnel .create-new-funnel .btn-default {
font-size: 15px;
padding: 0 20px;
height: 44px;
line-height: 44px;
display: flex;
align-items: center;
gap: 7px;
box-shadow: 0px 2px 4px rgba(223, 223, 249, 0.25);
border-radius: 10px;
min-width: auto;
border: 1px solid transparent;
}
.wpfnl-dashboard__inner-content.no-funnel .create-new-funnel .btn-default.import-export {
background: transparent;
color: #363B4E;
border-color: #E4E2EB;
filter: drop-shadow(0px 2px 4px rgba(223, 223, 249, 0.25));
}
.wpfnl-dashboard__inner-content.no-funnel .create-new-funnel .btn-default.import-export:hover {
background: #fff;
}
.wpfnl-dashboard__inner-content.no-funnel .create-new-funnel .btn-default.pro-import-button {
background: transparent;
color: #363B4E;
border-color: #E4E2EB;
filter: drop-shadow(0px 2px 4px rgba(223, 223, 249, 0.25));
}
.wpfnl-dashboard__inner-content.no-funnel .create-new-funnel .btn-default.pro-import-button:hover {
background: #fff;
}
.wpfnl-dashboard__inner-content.no-funnel a.wpfnl-trash-all-funnels {
font-family: "Inter";
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 17px;
letter-spacing: -0.01em;
color: #EC5956;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
margin-top: 15px;
}
.wpfnl-dashboard__inner-content.no-funnel a.wpfnl-trash-all-funnels path {
stroke: #EC5956;
}
.wpfnl-dashboard__inner-content.no-funnel .no-funnel-info {
width: 100%;
border-radius: 10px;
background-color: #FFF;
box-shadow: 0 1px 1px rgba(182, 185, 191, 0.3);
padding: 70px 80px;
display: flex;
gap: 30px;
align-items: center;
}
.wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .info-content {
flex: 1;
}
.wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .info-title {
color: #1D2327;
font-size: 24px;
font-weight: 500;
line-height: 1.3;
margin: 0 0 5px 0;
}
.wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .info-description {
margin: 0 0 18px 0;
color: #707070;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
max-width: 330px;
}
.wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .info-features {
list-style: none;
margin: 0 0 28px 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .feature-item {
display: flex;
align-items: center;
gap: 10px;
color: #1F2937;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
margin: 0;
padding-left: 22px;
position: relative;
}
.wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .feature-item svg {
position: absolute;
left: 0;
top: 6px;
width: 14px;
height: auto;
}
.wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .info-links {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 20px;
row-gap: 10px;
}
.wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .info-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: #6E42D3;
font-size: 15px;
font-weight: 500;
line-height: 1;
text-decoration: none;
transition: opacity 0.2s ease;
}
.wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .info-link svg {
display: block;
flex-shrink: 0;
}
.wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .info-link:hover {
text-decoration: underline;
}
.wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .info-link:focus {
outline: 2px solid #6E42D3;
outline-offset: 2px;
border-radius: 4px;
}
.wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .video-wrapper {
flex-shrink: 0;
height: 100%;
}
.wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .video-preview {
position: relative;
width: 570px;
height: 100%;
border-radius: 10px;
cursor: pointer;
transition: transform 0.2s ease;
}
.wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .video-preview:before {
content: "";
position: absolute;
inset: -20px;
border: 1px solid #F6F5FA;
border-radius: 14px;
}
.wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .video-preview:after {
content: "";
position: absolute;
inset: -40px;
border: 1px solid #F6F5FA;
border-radius: 14px;
}
.wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .video-preview:focus {
outline: 3px solid #6E42D3;
outline-offset: 2px;
}
.wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .video-poster {
width: 100%;
height: auto;
object-fit: cover;
display: block;
border-radius: 14px;
}
.wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .play-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.3);
transition: background 0.2s ease;
border-radius: 14px;
z-index: 1;
}
.video-preview:hover .wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .play-overlay {
background: rgba(0, 0, 0, 0.4);
}
.wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .play-button {
width: 57px;
height: 57px;
border-radius: 50%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
box-shadow: 0 0 0 10px #e7e7e7;
position: relative;
}
.wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .play-button:before {
content: "";
position: absolute;
inset: -11px;
border-radius: 50%;
background: transparent;
border: 1px solid #fff;
}
.wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .play-button svg {
margin-left: 4px;
display: block;
}
.video-preview:hover .wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .play-button {
background: rgb(110, 66, 211);
transform: scale(1.1);
}
.wpfnl-dashboard__inner-content.no-funnel .video-popup-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
padding: 20px;
opacity: 0;
visibility: hidden;
transition: all 0.5s ease;
}
.wpfnl-dashboard__inner-content.no-funnel .video-popup-overlay.show {
opacity: 1;
visibility: visible;
}
.wpfnl-dashboard__inner-content.no-funnel .video-popup-content {
position: relative;
width: 100%;
max-width: 760px;
border-radius: 16px;
background: #fff;
padding: 20px;
}
.wpfnl-dashboard__inner-content.no-funnel .video-popup-close {
position: absolute;
top: -20px;
right: -20px;
width: 40px;
height: 40px;
background: rgb(255, 255, 255);
border: none;
border-radius: 50%;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
z-index: 10;
box-shadow: 1px 1px 7px rgba(34, 34, 34, 0.2784313725);
}
.wpfnl-dashboard__inner-content.no-funnel .video-popup-close:focus {
outline: 2px solid #fff;
outline-offset: 2px;
}
.wpfnl-dashboard__inner-content.no-funnel .video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.wpfnl-dashboard__inner-content.no-funnel .video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 14px;
}
.wpfnl-dashboard__inner-content.no-funnel .visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.wpfnl-dashboard__inner-content.no-funnel .video-popup-fade-enter-active,
.wpfnl-dashboard__inner-content.no-funnel .video-popup-fade-leave-active {
transition: opacity 0.3s ease;
}
.wpfnl-dashboard__inner-content.no-funnel .video-popup-fade-enter-from,
.wpfnl-dashboard__inner-content.no-funnel .video-popup-fade-leave-to {
opacity: 0;
}
.wpfnl-ai-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
.wpfnl-ai-modal-overlay.active {
opacity: 1;
visibility: visible;
}
.wpfnl-ai-modal-wrapper {
background: #fff;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
max-height: 90vh;
overflow-y: auto;
position: relative;
animation: wpfnlAiModalSlideIn 0.3s ease;
}
@keyframes wpfnlAiModalSlideIn {
from {
opacity: 0;
transform: translateY(20px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.wpfnl-ai-modal-close {
position: absolute;
top: 16px;
right: 16px;
z-index: 10;
}
.wpfnl-ai-modal-close-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: #f3f4f6;
cursor: pointer;
transition: all 0.2s ease;
}
.wpfnl-ai-modal-close-btn:hover {
background: #e5e7eb;
}
.wpfnl-ai-modal-close-btn svg {
width: 12px;
height: 12px;
}
.wpfnl-ai-upsell {
width: 580px;
max-width: 95vw;
padding: 40px;
}
.wpfnl-ai-modal-header {
text-align: center;
margin-bottom: 28px;
}
.wpfnl-ai-modal-header-icon {
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.wpfnl-ai-heading {
font-size: 22px;
font-weight: 700;
color: #1a1a2e;
margin: 0 0 10px;
}
.wpfnl-ai-sub-heading {
font-size: 14px;
color: #6b7280;
line-height: 1.6;
margin: 0;
max-width: 460px;
margin-left: auto;
margin-right: auto;
}
.wpfnl-ai-credit-indicator {
background: #f8f7ff;
border: 1px solid #e8e4f7;
border-radius: 10px;
padding: 20px;
margin-bottom: 24px;
}
.wpfnl-ai-credit-bar-wrapper {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}
.wpfnl-ai-credit-label {
font-size: 13px;
font-weight: 600;
color: #374151;
white-space: nowrap;
}
.wpfnl-ai-credit-bar {
flex: 1;
height: 8px;
background: #e5e7eb;
border-radius: 4px;
overflow: hidden;
}
.wpfnl-ai-credit-bar-fill {
height: 100%;
background: linear-gradient(90deg, #6E42D3, #9B6BFF);
border-radius: 4px;
transition: width 0.4s ease;
}
.wpfnl-ai-credit-count {
font-size: 12px;
color: #6b7280;
white-space: nowrap;
}
.wpfnl-ai-credit-note {
font-size: 12px;
color: #9ca3af;
margin: 0;
line-height: 1.4;
}
.wpfnl-ai-features-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 8px;
}
.wpfnl-ai-feature-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px;
background: #fafafa;
border-radius: 8px;
border: 1px solid #f0f0f0;
transition: border-color 0.2s ease;
}
.wpfnl-ai-feature-item:hover {
border-color: #e0d8f0;
}
.wpfnl-ai-feature-item strong {
display: block;
font-size: 13px;
font-weight: 600;
color: #1a1a2e;
margin-bottom: 2px;
}
.wpfnl-ai-feature-item p {
font-size: 12px;
color: #6b7280;
margin: 0;
line-height: 1.4;
}
.wpfnl-ai-feature-icon {
flex-shrink: 0;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: #f0ecfa;
border-radius: 8px;
}
.wpfnl-ai-modal-footer {
text-align: center;
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid #f0f0f0;
}
.wpfnl-ai-upgrade-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #6E42D3 0%, #9B6BFF 100%);
color: #fff !important;
border: none;
padding: 12px 28px;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
text-decoration: none !important;
transition: all 0.2s ease;
}
.wpfnl-ai-upgrade-btn:hover {
background: linear-gradient(135deg, #5C35B5 0%, #8A5AEE 100%);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(110, 66, 211, 0.35);
color: #fff !important;
}
.wpfnl-ai-upgrade-btn svg {
width: 18px;
height: 18px;
}
.wpfnl-ai-footer-note {
font-size: 12px;
color: #9ca3af;
margin: 10px 0 0;
}
.wpfnl-ai-wizard {
width: 640px;
max-width: 95vw;
padding: 0;
}
.wpfnl-ai-wizard-content {
padding: 36px 40px;
}
.wpfnl-ai-wizard-progress {
margin-bottom: 32px;
}
.wpfnl-ai-wizard-progress-bar {
height: 6px;
background: #e5e7eb;
border-radius: 3px;
overflow: hidden;
margin-bottom: 8px;
}
.wpfnl-ai-wizard-progress-fill {
height: 100%;
background: linear-gradient(90deg, #6E42D3, #9B6BFF);
border-radius: 3px;
transition: width 0.4s ease;
}
.wpfnl-ai-wizard-step-indicator {
font-size: 12px;
color: #9ca3af;
font-weight: 500;
}
.wpfnl-ai-wizard-step {
display: none;
}
.wpfnl-ai-wizard-step.active {
display: block;
animation: wpfnlAiStepFadeIn 0.3s ease;
}
@keyframes wpfnlAiStepFadeIn {
from {
opacity: 0;
transform: translateX(15px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.wpfnl-ai-wizard-step-header {
margin-bottom: 24px;
}
.wpfnl-ai-wizard-step-header h3 {
font-size: 20px;
font-weight: 700;
color: #1a1a2e;
margin: 0 0 6px;
}
.wpfnl-ai-wizard-step-header p {
font-size: 14px;
color: #6b7280;
margin: 0;
line-height: 1.5;
}
.wpfnl-ai-option-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
}
.wpfnl-ai-option-grid--three {
grid-template-columns: 1fr 1fr 1fr;
}
.wpfnl-ai-option-card {
cursor: pointer;
margin: 0;
}
.wpfnl-ai-option-card input[type=radio] {
display: none;
}
.wpfnl-ai-option-card:hover .wpfnl-ai-option-card-inner {
border-color: #c4b5e3;
background: #faf8ff;
}
.wpfnl-ai-option-card input[type=radio]:checked + .wpfnl-ai-option-card-inner {
border-color: #6E42D3;
background: #f5f0ff;
box-shadow: 0 0 0 3px rgba(110, 66, 211, 0.12);
}
.wpfnl-ai-option-card-inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 20px 12px;
background: #fafafa;
border: 2px solid #e5e7eb;
border-radius: 10px;
transition: all 0.2s ease;
min-height: 90px;
justify-content: center;
}
.wpfnl-ai-option-icon {
font-size: 24px;
margin-bottom: 8px;
display: block;
line-height: 1;
}
.wpfnl-ai-option-label {
font-size: 13px;
font-weight: 600;
color: #374151;
display: block;
line-height: 1.3;
}
.wpfnl-ai-option-desc {
font-size: 11px;
color: #9ca3af;
margin-top: 4px;
display: block;
line-height: 1.3;
}
.wpfnl-ai-custom-input {
margin-top: 12px;
}
.wpfnl-ai-custom-input input[type=text] {
width: 100%;
padding: 10px 14px;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 14px;
color: #374151;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
}
.wpfnl-ai-custom-input input[type=text]:focus {
border-color: #6E42D3;
box-shadow: 0 0 0 3px rgba(110, 66, 211, 0.1);
}
.wpfnl-ai-custom-input input[type=text]::placeholder {
color: #9ca3af;
}
.wpfnl-ai-wizard-nav {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid #f0f0f0;
gap: 12px;
}
.wpfnl-ai-wizard-back {
display: inline-flex;
align-items: center;
gap: 4px;
background: #f3f4f6 !important;
color: #374151 !important;
border: 1px solid #d1d5db !important;
padding: 8px 16px;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.wpfnl-ai-wizard-back:hover {
background: #e5e7eb !important;
}
.wpfnl-ai-wizard-skip {
background: none;
border: none;
color: #9ca3af;
font-size: 13px;
cursor: pointer;
padding: 8px 12px;
transition: color 0.2s ease;
margin-left: auto;
}
.wpfnl-ai-wizard-skip:hover {
color: #6b7280;
text-decoration: underline;
}
.wpfnl-ai-wizard-next,
.wpfnl-ai-wizard-generate {
display: inline-flex;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, #6E42D3 0%, #9B6BFF 100%) !important;
color: #fff !important;
border: none !important;
padding: 9px 20px;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.wpfnl-ai-wizard-next:hover,
.wpfnl-ai-wizard-generate:hover {
background: linear-gradient(135deg, #5C35B5 0%, #8A5AEE 100%) !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(110, 66, 211, 0.3);
}
.wpfnl-ai-wizard-generate .wpfnl-loader {
display: none;
}
.wpfnl-ai-wizard-generate.loading .wpfnl-loader {
display: inline-block;
}
.wpfnl-ai-automation-section {
background: #faf8ff;
border: 1px solid #e5e0f5;
border-radius: 12px;
padding: 20px;
}
.wpfnl-ai-automation-section-header {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 16px;
}
.wpfnl-ai-automation-section-icon {
font-size: 24px;
line-height: 1;
flex-shrink: 0;
margin-top: 2px;
}
.wpfnl-ai-automation-section-text h4 {
font-size: 15px;
font-weight: 600;
color: #1a1a2e;
margin: 0 0 4px;
}
.wpfnl-ai-automation-section-text p {
font-size: 13px;
color: #6b7280;
margin: 0;
line-height: 1.5;
}
.wpfnl-ai-automation-choice {
display: flex;
flex-direction: column;
gap: 10px;
}
.wpfnl-ai-automation-radio {
cursor: pointer;
display: block;
margin: 0;
}
.wpfnl-ai-automation-radio input[type=radio] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.wpfnl-ai-automation-radio-inner {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
background: #fff;
border: 2px solid #e5e7eb;
border-radius: 10px;
transition: all 0.2s ease;
}
.wpfnl-ai-automation-radio:hover .wpfnl-ai-automation-radio-inner {
border-color: #c4b5e3;
}
.wpfnl-ai-automation-radio input[type=radio]:checked + .wpfnl-ai-automation-radio-inner {
border-color: #6E42D3;
background: #f5f0ff;
box-shadow: 0 0 0 3px rgba(110, 66, 211, 0.1);
}
.wpfnl-ai-automation-radio-indicator {
flex-shrink: 0;
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid #d1d5db;
margin-top: 2px;
position: relative;
transition: all 0.2s ease;
}
.wpfnl-ai-automation-radio-indicator::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
width: 8px;
height: 8px;
border-radius: 50%;
background: #6E42D3;
transition: transform 0.15s ease;
}
.wpfnl-ai-automation-radio input[type=radio]:checked + .wpfnl-ai-automation-radio-inner .wpfnl-ai-automation-radio-indicator {
border-color: #6E42D3;
}
.wpfnl-ai-automation-radio input[type=radio]:checked + .wpfnl-ai-automation-radio-inner .wpfnl-ai-automation-radio-indicator::after {
transform: translate(-50%, -50%) scale(1);
}
.wpfnl-ai-automation-radio-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.wpfnl-ai-automation-radio-text strong {
font-size: 14px;
font-weight: 600;
color: #1a1a2e;
}
.wpfnl-ai-automation-radio-text span {
font-size: 12px;
color: #6b7280;
line-height: 1.4;
}
.wpfnl-ai-automation-credit-note {
display: none;
align-items: flex-start;
gap: 8px;
margin-top: 14px;
padding: 10px 14px;
background: #fffbeb;
border: 1px solid #fde68a;
border-radius: 8px;
}
.wpfnl-ai-automation-credit-note.visible {
display: flex;
}
.wpfnl-ai-automation-credit-note .wpfnl-ai-automation-credit-icon {
flex-shrink: 0;
font-size: 14px;
line-height: 1;
}
.wpfnl-ai-automation-credit-note p {
font-size: 12px;
color: #92400e;
margin: 0;
line-height: 1.5;
}
.wpfnl-ai-mint-info-section {
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 20px;
}
.wpfnl-ai-mint-info-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.wpfnl-ai-mint-info-header h4 {
font-size: 15px;
font-weight: 600;
color: #374151;
margin: 0;
}
.wpfnl-ai-mint-info-icon {
font-size: 22px;
line-height: 1;
}
.wpfnl-ai-mint-info-desc {
font-size: 13px;
color: #6b7280;
line-height: 1.6;
margin: 0 0 14px;
}
.wpfnl-ai-mint-features-list {
list-style: none;
padding: 0;
margin: 0 0 16px;
}
.wpfnl-ai-mint-features-list li {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
font-size: 13px;
color: #374151;
line-height: 1.4;
}
.wpfnl-ai-mint-features-list li svg {
flex-shrink: 0;
}
.wpfnl-ai-install-mint-link {
display: inline-flex;
align-items: center;
gap: 4px;
color: #6E42D3 !important;
font-size: 13px;
font-weight: 600;
text-decoration: none !important;
transition: color 0.2s ease;
}
.wpfnl-ai-install-mint-link:hover {
color: #5C35B5 !important;
text-decoration: underline !important;
}
.wpfnl-ai-install-mint-link svg {
flex-shrink: 0;
}
@media (max-width: 768px) {
.wpfnl-ai-upsell {
padding: 24px;
}
.wpfnl-ai-features-grid {
grid-template-columns: 1fr;
}
.wpfnl-ai-wizard-content {
padding: 24px;
}
.wpfnl-ai-option-grid {
grid-template-columns: 1fr 1fr;
}
.wpfnl-ai-option-grid--three {
grid-template-columns: 1fr;
}
.wpfnl-ai-wizard-nav {
flex-wrap: wrap;
}
.wpfnl-ai-wizard-skip {
order: 3;
width: 100%;
text-align: center;
margin-left: 0;
}
.wpfnl-ai-automation-section,
.wpfnl-ai-mint-info-section {
padding: 16px;
}
}
@media (max-width: 480px) {
.wpfnl-ai-option-grid {
grid-template-columns: 1fr;
}
.wpfnl-ai-funnel-btn {
margin-left: 0;
margin-top: 8px;
}
}
@media only screen and (min-width: 1921px) {
.wpfnl-dashboard {
min-height: calc(108vh - 120px);
}
}
@media only screen and (max-width: 1699px) {
.wpfnl-dashboard {
min-height: calc(113vh - 120px);
}
.dashboard-nav__content {
width: calc(100% - 80px);
}
.wpfnl-dashboard .no-funnel-info {
width: calc(100% - 380px);
padding: 20px;
gap: 20px;
}
.wpfnl-dashboard .no-funnel-info .video-preview {
width: 370px;
}
.wpfnl-dashboard .no-funnel-info .video-poster {
height: 311px;
}
}
@media only screen and (max-width: 1399px) {
.wpfnl-dashboard__header.overview-header {
padding: 24px 0 0;
}
.dashboard-nav__content {
width: calc(100% - 48px);
}
.dashboard-nav__content .upgrade-to-pro .upgrade-to-pro-wrapper .upgrade-to-pro-action .btn-upgrade-to-pro {
font-size: 15px;
min-width: 150px;
}
.wpfnl-dashboard .no-funnel-info .info-link {
font-size: 14px;
}
.wpfnl-dashboard__inner-content.no-funnel .no-funnel-info {
padding: 30px 50px 30px 40px;
}
.wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .video-preview {
width: 420px;
}
.wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .video-preview:before {
inset: -12px;
}
.wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .video-preview:after {
inset: -24px;
}
}
@media only screen and (max-width: 1199px) {
.wpfnl-dashboard__nav .wpfnl-dashboard__nav-ul {
gap: 18px;
}
.dashboard-nav__content .upgrade-to-pro .upgrade-to-pro-wrapper .upgrade-to-pro-action .btn-upgrade-to-pro {
min-width: 135px;
padding: 10px 15px;
font-size: 14px;
}
.dashboard-nav__content .upgrade-to-pro .upgrade-to-pro-wrapper .upgrade-to-pro-content .upgrade-to-pro-message h3 {
font-size: 16px;
}
.wpfnl-dashboard__header.overview-header {
padding: 20px 0 0;
}
.wpfnl-dashboard__header .wpfnl-dashboard-header-left:not(.trash-funnels-header) {
flex-direction: column;
align-items: flex-start;
gap: 11px;
}
.overview-header .wpfnl-dashboard__inner-content {
margin-top: 0px;
}
.wpfnl-dashboard__inner-content.no-funnel .no-trash-wrapper {
padding: 100px 0;
}
.wpfnl-dashboard__inner-content.no-funnel .no-funnel-info {
padding: 20px 36px 24px 24px;
}
.wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .video-preview {
width: 330px;
}
.wpfnl-dashboard__inner-content.no-funnel .no-funnel-info .video-preview:after {
opacity: 0;
}
}
@media only screen and (max-width: 960px) {
.dashboard-nav__content .import-funnel-modal {
left: 34px;
width: calc(100% - 34px);
}
}
@media only screen and (max-width: 782px) {
.dashboard-nav__content .import-funnel-modal {
left: 0;
width: 100%;
}
}
.wpfnl-sc-analytics-overview {
margin-top: 20px;
margin-bottom: 24px;
background: #fff;
border: 1px solid #E4E6EB;
border-radius: 10px;
overflow: hidden;
transition: max-height 0.3s ease;
}
.wpfnl-sc-analytics-overview.collapsed .wpfnl-sc-analytics-cards {
display: none;
}
.wpfnl-sc-analytics-overview.collapsed .wpfnl-sc-analytics-toggle .toggle-arrow {
transform: rotate(180deg);
}
.wpfnl-sc-analytics-overview .wpfnl-sc-analytics-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
padding: 24px 20px;
}
.wpfnl-sc-analytics-overview .wpfnl-sc-analytics-card {
display: flex;
align-items: center;
gap: 16px;
padding: 0 20px;
border-right: 1px solid #E4E6EB;
}
.wpfnl-sc-analytics-overview .wpfnl-sc-analytics-card:first-child {
padding-left: 0;
}
.wpfnl-sc-analytics-overview .wpfnl-sc-analytics-card:last-child {
border-right: none;
}
.wpfnl-sc-analytics-overview .wpfnl-sc-analytics-card__icon .icon-wrap {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, #FFF3EC 0%, #FFE8D9 100%);
border: 1px solid #FDDCC9;
}
.wpfnl-sc-analytics-overview .wpfnl-sc-analytics-card__icon .icon-wrap--purple {
background: linear-gradient(135deg, #F3EEFF 0%, #E8DDFB 100%);
border-color: #D8C9F5;
}
.wpfnl-sc-analytics-overview .wpfnl-sc-analytics-card__icon .icon-wrap--orange {
background: linear-gradient(135deg, #FFF3EC 0%, #FFE8D9 100%);
border-color: #FDDCC9;
}
.wpfnl-sc-analytics-overview .wpfnl-sc-analytics-card__icon .icon-wrap--green {
background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
border-color: #A7F3D0;
}
.wpfnl-sc-analytics-overview .wpfnl-sc-analytics-card__content .card-title {
display: block;
color: #7A8B9A;
font-size: 13px;
font-weight: 400;
line-height: 1.3;
margin-bottom: 4px;
}
.wpfnl-sc-analytics-overview .wpfnl-sc-analytics-card__content .card-value {
display: block;
color: #2D3149;
font-size: 22px;
font-weight: 600;
line-height: 1.2;
}
.wpfnl-sc-analytics-overview .wpfnl-sc-analytics-toggle {
display: flex;
justify-content: center;
padding: 8px 0;
border-top: 1px solid #E4E6EB;
cursor: pointer;
}
.wpfnl-sc-analytics-overview .wpfnl-sc-analytics-toggle__btn {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid #E4E6EB;
background: #fff;
cursor: pointer;
transition: background 0.2s;
}
.wpfnl-sc-analytics-overview .wpfnl-sc-analytics-toggle__btn:hover {
background: #F5F6FA;
}
.wpfnl-sc-analytics-overview .wpfnl-sc-analytics-toggle .toggle-arrow {
transition: transform 0.3s ease;
}
@media only screen and (max-width: 1199px) {
.wpfnl-sc-analytics-overview .wpfnl-sc-analytics-cards {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.wpfnl-sc-analytics-overview .wpfnl-sc-analytics-card {
border-right: none;
padding-left: 0;
}
}
@media only screen and (max-width: 600px) {
.wpfnl-sc-analytics-overview .wpfnl-sc-analytics-cards {
grid-template-columns: 1fr;
}
}
.wpfnl-tpl-shimmer-block {
border-radius: 8px;
animation: shimmer-animation 1.6s infinite linear;
background: linear-gradient(to right, #eff1f3 4%, #e2e2e2 25%, #eff1f3 36%);
background-size: 1000px 100%;
}
.wpfnl-tpl-shimmer-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.wpfnl-tpl-shimmer-card {
border-radius: 12px;
overflow: hidden;
padding: 12px;
background: #f7f7fb;
}
.wpfnl-tpl-shimmer-card-img {
height: 140px;
border-radius: 8px;
margin-bottom: 10px;
}
.wpfnl-tpl-shimmer-card-text {
height: 16px;
width: 80%;
margin-bottom: 8px;
}
.wpfnl-tpl-shimmer-card-badge {
height: 22px;
width: 40%;
border-radius: 20px;
}
.wpfnl-tpl-filter-shimmer {
width: 100%;
padding-top: 8px;
}
.create-funnel-shimmer-overlay {
background: #fff;
display: flex;
flex-direction: column;
width: 100%;
min-height: 100%;
}
.create-funnel-shimmer-overlay .wpfnl-tpl-shimmer-header-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 24px;
background: #fff;
box-shadow: 0px 1px 2px rgba(190, 190, 215, 0.4);
flex-shrink: 0;
}
.create-funnel-shimmer-overlay .wpfnl-tpl-shimmer-title {
height: 28px;
width: 220px;
}
.create-funnel-shimmer-overlay .wpfnl-tpl-shimmer-btn {
height: 36px;
width: 120px;
border-radius: 8px;
}
.create-funnel-shimmer-overlay .wpfnl-tpl-shimmer-body {
display: flex;
flex: 1;
}
.create-funnel-shimmer-overlay .wpfnl-tpl-shimmer-sidebar {
width: 247px;
flex-shrink: 0;
padding: 19px 20px;
background: #fff;
box-shadow: 1px 0px 2px rgba(190, 190, 215, 0.14);
}
.create-funnel-shimmer-overlay .wpfnl-tpl-shimmer-sidebar-title {
height: 20px;
width: 80%;
margin-bottom: 24px;
border-radius: 6px;
}
.create-funnel-shimmer-overlay .wpfnl-tpl-shimmer-sidebar-item {
height: 44px;
border-radius: 8px;
margin-bottom: 14px;
}
.create-funnel-shimmer-overlay .wpfnl-tpl-shimmer-content {
flex: 1;
padding: 40px;
overflow: hidden;
}
.create-funnel-shimmer-overlay .wpfnl-tpl-shimmer-wrap,
.create-funnel-shimmer-overlay .wpfnl-tpl-shimmer-header {
display: none;
}
.shimmer-line {
height: 20px;
margin-top: 20px;
background: #777;
}
.shimmer-line-br {
border-radius: 8px;
}
.shimmer-line-full {
width: 100%;
}
.shimmer-line-80 {
width: 80%;
}
.shimmer-line-60 {
width: 60%;
}
.shimmer-line-40 {
width: 40%;
}
.shimmer-line-20 {
width: 20%;
}
.shimmer-line-10 {
width: 10%;
}
.shimmer-circle {
background: #777;
border-radius: 50%;
}
.shimmer-circle-lg {
height: 129px;
width: 129px;
}
.shimmer-circle-md {
height: 65px;
width: 65px;
}
.shimmer-circle-sm {
height: 33px;
width: 33px;
}
.shimmer-circle-x-sm {
height: 17px;
width: 17px;
}
.shimmer-wrapper, .shimmer-wrapper-center {
width: 100%;
height: 100%;
padding: 10px;
animation: shimmer-full-view 0.5s forwards cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.shimmer-wrapper-center {
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
align-items: center;
}
@keyframes shimmer-full-view {
0% {
background-position: -1000px 0;
}
100% {
background-position: 1000px 0;
}
}
@keyframes shimmer-animation {
0% {
background-position: -1000px 0;
}
100% {
background-position: 1000px 0;
}
}
.shimmer-animate {
animation: shimmer-animation 4s infinite linear;
background: linear-gradient(to right, #eff1f3 4%, #e2e2e2 25%, #eff1f3 36%);
background-size: 1000px 100%;
}
.step-template-showcase-modal .steps-template__filter-wrapper .pro-free__filter, .template-library-modal .funnel-templates-header .pro-free__filter {
border-radius: 50px;
box-shadow: none;
border: 1px solid #E5E8F3;
margin-left: 15px !important;
background: #ffffff;
display: inline-flex;
align-items: center;
}
.step-template-showcase-modal .steps-template__filter-wrapper .pro-free__filter li, .template-library-modal .funnel-templates-header .pro-free__filter li {
color: #363B4E;
font-size: 14px;
padding: 9px 18px;
font-weight: 400;
text-transform: capitalize;
cursor: pointer;
position: relative;
border-right: 1px solid #E5E8F3;
z-index: 1;
display: flex;
flex-flow: row;
align-items: center;
}
.step-template-showcase-modal .steps-template__filter-wrapper .pro-free__filter li:first-child, .template-library-modal .funnel-templates-header .pro-free__filter li:first-child {
border-radius: 50px 0 0 50px;
}
.step-template-showcase-modal .steps-template__filter-wrapper .pro-free__filter li:last-child, .template-library-modal .funnel-templates-header .pro-free__filter li:last-child {
border-radius: 0 50px 50px 0;
}
.step-template-showcase-modal .steps-template__filter-wrapper .pro-free__filter li svg, .template-library-modal .funnel-templates-header .pro-free__filter li svg {
position: relative;
top: -1px;
margin-right: 8px;
}
.step-template-showcase-modal .steps-template__filter-wrapper .pro-free__filter li.active, .template-library-modal .funnel-templates-header .pro-free__filter li.active {
background-color: #6E42D3;
color: #ffffff;
}
.step-template-showcase-modal .steps-template__filter-wrapper .pro-free__filter li.active svg path, .template-library-modal .funnel-templates-header .pro-free__filter li.active svg path {
stroke: #fff;
}
.wpfnl-drawing-window .drawflow .drawflow-node .node-wrapper .create-step-name-modal, .step-template-showcase-modal .create-step-name-modal, .template-library-modal .create-funnel-name-modal {
position: absolute;
top: 200px;
left: calc(50% - 123px);
background: #ffffff;
width: 410px;
z-index: 999;
transform: translate(-50%, -50%);
padding: 28px 30px 30px;
border-radius: 10px;
box-shadow: 0 1px 2px 0 rgba(190, 190, 215, 0.2);
transition: all 0.3s ease;
opacity: 0;
visibility: hidden;
}
.wpfnl-drawing-window .drawflow .drawflow-node .node-wrapper .show.create-step-name-modal, .step-template-showcase-modal .show.create-step-name-modal, .template-library-modal .show.create-funnel-name-modal {
opacity: 1;
visibility: visible;
top: 250px;
}
.wpfnl-drawing-window .drawflow .drawflow-node .node-wrapper .create-step-name-modal .modal-header, .step-template-showcase-modal .create-step-name-modal .modal-header, .template-library-modal .create-funnel-name-modal .modal-header {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.wpfnl-drawing-window .drawflow .drawflow-node .node-wrapper .create-step-name-modal .modal-header .title, .step-template-showcase-modal .create-step-name-modal .modal-header .title, .template-library-modal .create-funnel-name-modal .modal-header .title {
font-size: 16px;
line-height: normal;
font-weight: 500;
}
.wpfnl-drawing-window .drawflow .drawflow-node .node-wrapper .create-step-name-modal .modal-header .close, .step-template-showcase-modal .create-step-name-modal .modal-header .close, .template-library-modal .create-funnel-name-modal .modal-header .close {
position: absolute;
border: none;
right: -11px;
top: -13px;
display: flex;
width: 40px;
height: 40px;
padding: 8px;
justify-content: center;
flex-flow: column;
align-items: center;
border-radius: 100px;
background: #FFF;
box-shadow: 0px 1px 1px 0px #DADADA;
cursor: pointer;
}
.wpfnl-drawing-window .drawflow .drawflow-node .node-wrapper .create-step-name-modal .modal-header .close svg, .step-template-showcase-modal .create-step-name-modal .modal-header .close svg, .template-library-modal .create-funnel-name-modal .modal-header .close svg {
display: block;
width: 18px;
height: 18px;
}
.wpfnl-drawing-window .drawflow .drawflow-node .node-wrapper .create-step-name-modal .modal-body input[type=text], .step-template-showcase-modal .create-step-name-modal .modal-body input[type=text], .template-library-modal .create-funnel-name-modal .modal-body input[type=text] {
font-size: 14px;
color: #363B4E;
border-radius: 6px;
border-color: #E2E2E2;
height: 40px;
margin-bottom: 15px;
}
.wpfnl-drawing-window .drawflow .drawflow-node .node-wrapper .create-step-name-modal .modal-body input[type=text]:-webkit-autofill, .step-template-showcase-modal .create-step-name-modal .modal-body input[type=text]:-webkit-autofill, .template-library-modal .create-funnel-name-modal .modal-body input[type=text]:-webkit-autofill {
-webkit-box-shadow: 0 0 0 30px #ffffff inset;
box-shadow: 0 0 0 30px #ffffff inset;
-webkit-text-fill-color: #363B4E !important;
}
.wpfnl-drawing-window .drawflow .drawflow-node .node-wrapper .create-step-name-modal .modal-body input[type=text]::-webkit-input-placeholder, .step-template-showcase-modal .create-step-name-modal .modal-body input[type=text]::-webkit-input-placeholder, .template-library-modal .create-funnel-name-modal .modal-body input[type=text]::-webkit-input-placeholder {
color: #7A8B9A;
}
.wpfnl-drawing-window .drawflow .drawflow-node .node-wrapper .create-step-name-modal .modal-body input[type=text]::-moz-placeholder, .step-template-showcase-modal .create-step-name-modal .modal-body input[type=text]::-moz-placeholder, .template-library-modal .create-funnel-name-modal .modal-body input[type=text]::-moz-placeholder {
color: #7A8B9A;
}
.wpfnl-drawing-window .drawflow .drawflow-node .node-wrapper .create-step-name-modal .modal-body input[type=text]:-ms-input-placeholder, .step-template-showcase-modal .create-step-name-modal .modal-body input[type=text]:-ms-input-placeholder, .template-library-modal .create-funnel-name-modal .modal-body input[type=text]:-ms-input-placeholder {
color: #7A8B9A;
}
.wpfnl-drawing-window .drawflow .drawflow-node .node-wrapper .create-step-name-modal .modal-body input[type=text]:-moz-placeholder, .step-template-showcase-modal .create-step-name-modal .modal-body input[type=text]:-moz-placeholder, .template-library-modal .create-funnel-name-modal .modal-body input[type=text]:-moz-placeholder {
color: #7A8B9A;
}
.wpfnl-drawing-window .drawflow .drawflow-node .node-wrapper .create-step-name-modal .modal-body button[type=submit], .step-template-showcase-modal .create-step-name-modal .modal-body button[type=submit], .template-library-modal .create-funnel-name-modal .modal-body button[type=submit] {
border-radius: 10px;
background: #6E42D3;
box-shadow: 0px 9px 14px 0px rgba(193, 183, 232, 0.5);
width: 100%;
height: 40px;
line-height: 1;
padding: 14px 30px;
}
.step-template-showcase-modal .wpfnl-step__single-template .template-action, .template-library-modal .wpfnl-step__single-template .template-action, .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template .template-action {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 13px 15px;
background: rgba(38, 33, 51, 0.6);
z-index: 1;
border-radius: 10px 10px 0 0;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
gap: 14px;
-webkit-backdrop-filter: blur(7px);
backdrop-filter: blur(7px);
transition: all 0.3s ease;
opacity: 0;
visibility: hidden;
}
.step-template-showcase-modal .wpfnl-step__single-template .template-action .btn-default, .template-library-modal .wpfnl-step__single-template .template-action .btn-default, .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template .template-action .btn-default {
margin: 0;
padding: 11px 19px 9px;
height: auto;
width: 100px;
min-width: auto;
font-size: 15px;
line-height: 1;
font-weight: 500;
border-radius: 8px;
border: 1px solid #F2F2F2;
background-color: transparent;
color: #fff;
}
.step-template-showcase-modal .wpfnl-step__single-template .template-action .btn-default:hover, .template-library-modal .wpfnl-step__single-template .template-action .btn-default:hover, .template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template .template-action .btn-default:hover {
background-color: #fff;
border-color: #fff;
color: #363B4E;
}
.template-library-modal {
position: fixed;
top: 32px;
left: 160px;
width: calc(100% - 160px);
height: 100%;
background: #F6F5FA;
z-index: 99;
}
.template-library-modal .templates-title-wrapper {
margin-bottom: 22px;
display: flex;
flex-flow: row;
align-items: center;
width: 100%;
}
.template-library-modal .templates-title-wrapper .title {
line-height: 18px;
text-transform: capitalize;
font-size: 18px;
color: #0e2244;
font-weight: 500;
}
.template-library-modal .wpfnl-create-funnel__inner-content {
height: 100%;
}
.template-library-modal .wpfnl-create-funnel__templates-wrapper {
width: 100%;
max-height: 890px;
height: 100%;
overflow: auto;
}
.template-library-modal .wpfnl-create-funnel__templates-wrapper::-webkit-scrollbar {
width: 5px;
}
.template-library-modal .wpfnl-create-funnel__templates-wrapper::-webkit-scrollbar-track {
background: #f2f5f8;
}
.template-library-modal .wpfnl-create-funnel__templates-wrapper::-webkit-scrollbar-thumb {
background-color: #BCC0C3;
border-radius: 20px;
}
.template-library-modal .funnel-templates-header {
background: #FFFFFF;
box-shadow: 0px 1px 2px rgba(190, 190, 215, 0.4);
padding: 15px 24px;
position: relative;
}
.template-library-modal .funnel-templates-header .template-library-filter-wrapper {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-between;
width: 100%;
}
.template-library-modal .funnel-templates-header .template-library-filter-wrapper.is-store-checkout .pro-free__filter {
margin-left: auto !important;
}
.template-library-modal .funnel-templates-header .back-form-modal {
height: 38px;
width: 38px;
border: 1px solid #EEF0F3;
margin-right: 15px;
border-radius: 10px;
background: #FFFFFF;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
cursor: pointer;
}
.template-library-modal .funnel-templates-header .back-form-modal svg {
position: relative;
left: -1px;
}
.template-library-modal .funnel-templates-header .header-title {
font-weight: 500;
font-size: 16px;
line-height: 1.3;
color: #363B4E;
}
.template-library-modal .funnel-templates-header .sync-library-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 38px;
padding: 0 16px;
border: 1px solid #EEF0F3;
border-radius: 50px;
background: #FFFFFF;
color: #363B4E !important;
font-size: 14px;
font-weight: 400;
cursor: pointer;
margin-left: 12px;
transition: border-color 0.2s, color 0.2s;
}
.template-library-modal .funnel-templates-header .sync-library-btn span {
color: inherit;
}
.template-library-modal .funnel-templates-header .sync-library-btn svg {
flex-shrink: 0;
}
.template-library-modal .funnel-templates-header .sync-library-btn:hover:not(:disabled) {
border-color: #b3b8c7;
color: #1a1f2e;
}
.template-library-modal .funnel-templates-header .sync-library-btn:disabled {
opacity: 0.65;
cursor: not-allowed;
}
.template-library-modal .funnel-templates-header .sync-library-btn .spinning {
animation: sync-spin 1s linear infinite;
}
@keyframes sync-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.template-library-modal .funnel-templates-header .wpfnl-template-header-title-wrapper {
display: flex;
align-items: center;
}
.template-library-modal .funnel-templates-header .template-type-filter {
display: block;
width: auto;
margin-left: auto;
border: 1px solid #EEF0F3;
height: 38px;
border-radius: 50px;
color: #363B4E;
letter-spacing: -0.01em;
-moz-appearance: none; /* Firefox */
-webkit-appearance: none; /* Safari and Chrome */
appearance: none;
background: transparent;
background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTIgNyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBzdHJva2U9IiM3QThCOUEiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiBkPSJNMTAuODEzIDFsLTQuNSA0LjUtNC41LTQuNSIvPjwvc3ZnPg==");
background-repeat: no-repeat;
background-position-x: calc(100% - 15px);
background-position-y: 13px;
background-size: 12px 12px;
padding-top: 0px;
}
.template-library-modal .funnel-templates-header .funnel-global-import {
min-width: 152px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.template-library-modal .funnel-templates-header .funnel-global-import .btn-default {
height: 40px;
line-height: 41px;
position: relative;
padding: 0 20px;
min-width: auto;
box-shadow: 0px 10px 16px rgba(97, 103, 116, 0.15);
border-radius: 8px;
}
.template-library-modal .funnel-templates-header .funnel-global-import .btn-default .btn-text {
position: relative;
z-index: 1;
color: #fff;
font-weight: 500;
}
.template-library-modal .funnel-templates-header .funnel-global-import .btn-default .pro-tag {
position: absolute;
top: -21px;
right: 10px;
}
.template-library-modal .funnel-templates-header .funnel-global-import .global-import-progress {
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 100%;
background: #8b5ef3;
border-radius: 10px;
z-index: 0;
transition: all 0.4s linear;
}
.template-library-modal .funnel-templates-header .responsive-switcher {
border: 1px solid #E4E6EB;
border-radius: 8px;
margin-left: -10%;
}
.template-library-modal .funnel-templates-header .responsive-switcher button {
background: transparent;
border: none;
padding: 10px 10px;
border-right: 1px solid #E4E6EB;
cursor: pointer;
}
.template-library-modal .funnel-templates-header .responsive-switcher button:last-child {
border-right: none;
}
.template-library-modal .funnel-templates-header .responsive-switcher button.active svg path,
.template-library-modal .funnel-templates-header .responsive-switcher button.active svg rect {
stroke: #6E42D3;
}
.template-library-modal .funnel-templates-header .responsive-switcher button.active svg circle {
fill: #6E42D3;
}
.template-library-modal .funnel-templates-header .responsive-switcher button.active.tablet-view svg path, .template-library-modal .funnel-templates-header .responsive-switcher button.active.mobile-view svg path {
fill: #6E42D3;
}
.template-library-modal .funnel-templates-body {
display: flex;
flex-flow: row wrap;
height: calc(100% - 78px);
}
.template-library-modal .funnel-templates-sidebar {
background: #FFFFFF;
box-shadow: 1px 0px 2px rgba(190, 190, 215, 0.14);
width: 247px;
padding: 19px 20px;
}
.template-library-modal .funnel-templates-sidebar .sidebar-tab-nav {
display: flex;
margin-bottom: 24px;
}
.template-library-modal .funnel-templates-sidebar .sidebar-tab-nav > span {
font-size: 14px;
line-height: 1.3;
font-weight: 600;
color: #292C2F;
flex: 1;
text-align: center;
display: block;
border-bottom: 1px solid #E4E6EB;
padding-bottom: 15px;
cursor: pointer;
position: relative;
}
.template-library-modal .funnel-templates-sidebar .sidebar-tab-nav > span:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #6E42D3;
display: none;
}
.template-library-modal .funnel-templates-sidebar .sidebar-tab-nav > span.active {
color: #6E42D3;
}
.template-library-modal .funnel-templates-sidebar .sidebar-tab-nav > span.active:before {
display: block;
}
.template-library-modal .funnel-templates-sidebar .category-filter-wrapper {
height: 720px;
padding-right: 8px;
overflow: auto;
}
.template-library-modal .funnel-templates-sidebar .category-filter-wrapper::-webkit-scrollbar {
width: 5px;
}
.template-library-modal .funnel-templates-sidebar .category-filter-wrapper::-webkit-scrollbar-track {
background: #f2f5f8;
}
.template-library-modal .funnel-templates-sidebar .category-filter-wrapper::-webkit-scrollbar-thumb {
background-color: #BCC0C3;
border-radius: 20px;
}
.template-library-modal .funnel-templates-sidebar .category-filter-wrapper ul li {
font-weight: 500;
font-size: 14px;
line-height: 1.3;
letter-spacing: -0.01em;
color: #363B4E;
background: #FFFFFF;
border: 1px solid #EEF0F3;
border-radius: 8px;
padding: 12px 16px;
margin-bottom: 14px;
cursor: pointer;
display: flex;
align-items: center;
gap: 7px;
transition: all 0.3s ease;
}
.template-library-modal .funnel-templates-sidebar .category-filter-wrapper ul li.active, .template-library-modal .funnel-templates-sidebar .category-filter-wrapper ul li:hover {
color: #6E42D3;
border-color: #6E42D3;
box-shadow: 0px 20px 16px rgba(189, 193, 200, 0.2);
}
.template-library-modal .funnel-templates-sidebar .category-filter-wrapper ul li svg {
position: relative;
top: -1px;
display: block;
min-width: 20px;
}
.template-library-modal .funnel-templates-sidebar .wpfnl-create-step__filter-nav {
width: 100%;
min-height: auto;
background: transparent;
box-shadow: none;
padding: 0;
align-self: stretch;
}
.template-library-modal .funnel-templates-content {
width: calc(100% - 247px);
height: 100%;
overflow-y: auto;
position: relative;
padding: 40px;
box-sizing: border-box;
}
.template-library-modal .funnel-templates-content .not-clickable-overlay {
z-index: 9;
}
.template-library-modal .funnel-templates-content .template-cat-filter-loader {
position: absolute;
inset: 0;
z-index: 100;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(2px);
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease, visibility 0.15s ease;
pointer-events: none;
}
.template-library-modal .funnel-templates-content .template-cat-filter-loader .wpfnl-loader {
display: block;
width: 50px;
height: 50px;
margin: 0;
position: sticky;
top: 50%;
border-width: 3px;
border-top-width: 3px;
flex-shrink: 0;
}
.template-library-modal .funnel-templates-content .template-cat-filter-loader.show-loader {
opacity: 1;
visibility: visible;
pointer-events: all;
}
.template-library-modal .no-sidebar .funnel-templates-content {
width: 100%;
}
.template-library-modal .wpfnl-create-funnel__templates {
position: relative;
min-height: 370px;
display: flex;
flex-flow: row wrap;
gap: 40px;
}
.template-library-modal .wpfnl-create-funnel__templates .wpfnl-create-funnel__loader {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #f6f6f8;
display: flex;
flex-flow: column;
align-items: center;
justify-content: flex-start;
z-index: 9;
}
.template-library-modal .wpfnl-create-funnel__templates .wpfnl-create-funnel__loader .wpfnl-loader {
display: block;
width: 40px;
height: 40px;
margin-top: 12%;
}
.template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template {
width: calc(25% - 30px);
position: relative;
}
.template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template .freemium-tag {
position: absolute;
top: 10px;
right: 10px;
z-index: 1;
padding: 3px 8px 4px;
background-color: #2FCF5C;
font-size: 10px;
border-radius: 5px;
}
.template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template.create__from-scratch {
background-color: transparent;
border: 2px dashed #A1A1B6;
border-radius: 10px;
}
.template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template.create__from-scratch .funnel-limit-notice,
.template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template.create__from-scratch .btn-default {
height: 48px;
line-height: 49px;
width: 100%;
max-width: 194px;
padding: 0 8px;
border-radius: 12px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 9px 14px 0px rgba(193, 183, 232, 0.5);
}
.template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template.create__from-scratch .funnel-limit-notice svg,
.template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template.create__from-scratch .btn-default svg {
margin-right: 2px;
}
.template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template.create__from-scratch .funnel-limit-notice path,
.template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template.create__from-scratch .btn-default path {
stroke: #fff;
}
.template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template.create__from-scratch .pro-tag {
position: absolute;
top: -23px;
right: 11px;
}
.template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template.create__from-scratch .wpfnl-single-remote-wrapper {
opacity: 0;
visibility: hidden;
}
.template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template.create__from-scratch .funnel-limit-notice {
max-width: 100%;
text-align: center;
padding: 15px;
height: auto;
line-height: normal;
border-radius: 0;
box-shadow: none;
}
.template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template.create__from-scratch .funnel-limit-notice p {
color: #d24d4d;
line-height: 1.6;
}
.template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template.show-step-preview {
width: 100%;
margin: 0;
background: transparent;
border-radius: 0;
}
.template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template .wpfnl-single-remote-wrapper {
position: relative;
background: #ffffff;
border-radius: 10px;
height: 100%;
transition: all 0.3s ease;
}
.template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template .wpfnl-single-remote-template {
position: relative;
}
.template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template .template-image-wrapper {
background-repeat: no-repeat;
background-size: 100% auto;
background-position: top center;
border-radius: 10px 10px 0 0;
position: relative;
overflow: hidden;
}
.template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template .template-image-wrapper:before {
content: "";
display: block;
padding-top: 100%;
}
.template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template .template-img {
width: 100%;
border-radius: 10px 10px 0 0;
height: 350px;
object-fit: contain;
}
.template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template .importar-loader {
background: rgba(38, 33, 51, 0.6);
-webkit-backdrop-filter: blur(7px);
backdrop-filter: blur(7px);
}
.template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template .funnel-template-info {
text-align: center;
padding: 14px;
background: #ffffff;
border-radius: 0 0 10px 10px;
position: relative;
border-top: 1px solid #E5E8F3;
}
.template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template .funnel-template-info .title {
color: #363B4E;
padding: 0;
min-height: auto;
display: block;
font-weight: 500;
transition: all 0.3s ease;
}
.template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template .funnel-template-info .steps {
color: #7A8B9A;
letter-spacing: -0.01em;
font-size: 12px;
}
.template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template:hover .wpfnl-single-remote-wrapper {
box-shadow: 0px 20px 20px rgba(190, 190, 215, 0.2);
}
.template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template:hover .template-action {
opacity: 1;
visibility: visible;
}
.template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper {
gap: 40px;
position: relative;
width: 100%;
display: flex;
flex-flow: row wrap;
align-items: flex-start;
}
.template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-step__single-template {
width: calc(20% - 32px);
}
.template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper {
margin: auto;
width: 100%;
}
.template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-steps-wrapper {
display: flex;
align-items: center;
width: 100%;
justify-content: center;
gap: 10px;
margin-bottom: 40px;
}
.template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-steps-wrapper .wpfnl-template-step {
width: 80px;
text-align: center;
}
.template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-steps-wrapper .wpfnl-template-step span {
border-radius: 6px;
background: #FFF;
box-shadow: 0px 53px 32px 0px rgba(0, 0, 0, 0.02), 0px 6px 13px 0px rgba(0, 0, 0, 0.04), 0px 1px 3px 0px rgba(143, 143, 143, 0.2), 0px 0px 0px 1px #EAEAEA, 0px -2.4px 0px 0px rgba(61, 61, 61, 0.04) inset;
padding: 3px;
cursor: pointer;
display: block;
border: 1px solid transparent;
min-height: 80px;
}
.template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-steps-wrapper .wpfnl-template-step span img {
width: 70px;
height: 70px;
}
.template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-steps-wrapper .wpfnl-template-step p {
color: #6B7589;
font-size: 12px;
margin-top: 10px;
text-transform: capitalize;
}
.template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-steps-wrapper .wpfnl-template-step.active span {
border-color: #6E42D3;
}
.template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-steps-wrapper .wpfnl-template-step.active p {
color: #6E42D3;
}
.template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-step-preview {
width: 100%;
background: #FFF;
margin: auto;
}
.template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-step-preview .wpfnl-preview-checkout-placeholder {
min-height: 650px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px 0;
}
.template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-step-preview.mobile {
width: 425px;
}
.template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-step-preview.tablet {
width: 768px;
}
.template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-step-preview.mobile, .template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-step-preview.tablet {
padding: 50px 10px 60px;
box-shadow: 0 14px 28px 0 rgba(0, 0, 0, 0.0588235294);
border-radius: 30px;
position: relative;
}
.template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-step-preview.mobile .wpfnl-template-iframe-wrapper, .template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-step-preview.tablet .wpfnl-template-iframe-wrapper {
border: 1px solid rgba(15, 12, 9, 0.1);
}
.template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-step-preview .wpfnl-template-iframe-wrapper {
position: relative;
}
.template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-step-preview .wpfnl-template-iframe-wrapper .wpfnl-loader-wrapper {
position: absolute;
width: 100%;
height: 100%;
top: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(38, 27, 103, 0.2);
}
.template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-step-preview .wpfnl-template-iframe-wrapper .wpfnl-loader-wrapper.active {
display: flex;
}
.template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-step-preview .wpfnl-template-iframe-wrapper .wpfnl-loader-wrapper .wpfnl-loader {
display: block;
width: 50px;
height: 50px;
}
.template-library-modal .wpfnl-create-funnel__templates .step-title-wrapper {
position: absolute;
top: 0;
left: 0;
}
.template-library-modal .wpfnl-create-funnel__templates .step-title-wrapper .title {
font-weight: 500;
font-size: 18px;
line-height: 1;
color: #363B4E;
}
.template-library-modal .wpfnl-create-funnel-layout {
width: 100%;
background: #F6F5FA;
border-radius: 14px;
max-width: 1093px;
position: fixed;
top: 50% !important;
left: calc(50% + 80px);
transform: translate(-50%, -50%);
height: 80%;
max-height: 690px;
}
.template-library-modal .wpfnl-create-funnel-layout.store-checkout-layout {
height: auto;
max-height: none;
max-width: 520px;
padding: 25px;
}
.template-library-modal .wpfnl-create-funnel-layout.store-checkout-layout .store-checkout-confirm-body {
height: auto;
}
.template-library-modal .wpfnl-create-funnel-layout.store-checkout-layout .store-checkout-modal-title {
font-size: 20px;
font-weight: 600;
color: #2D3149;
margin: 0 0 10px;
line-height: 1.3;
}
.template-library-modal .wpfnl-create-funnel-layout.store-checkout-layout .store-checkout-modal-subtitle {
font-size: 14px;
font-weight: 600;
color: #2D3149;
margin: 0 0 14px;
}
.template-library-modal .wpfnl-create-funnel-layout.store-checkout-layout .store-checkout-feature-list {
list-style: none;
padding: 0;
margin: 0 0 18px;
display: flex;
flex-direction: column;
gap: 10px;
}
.template-library-modal .wpfnl-create-funnel-layout.store-checkout-layout .store-checkout-feature-list li {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: #6B7280;
}
.template-library-modal .wpfnl-create-funnel-layout.store-checkout-layout .store-checkout-feature-list li svg {
flex-shrink: 0;
}
.template-library-modal .wpfnl-create-funnel-layout.store-checkout-layout .store-checkout-modal-desc {
font-size: 13px;
color: #6B7280;
line-height: 1.6;
margin: 0 0 24px;
}
.template-library-modal .wpfnl-create-funnel-layout.store-checkout-layout .button-area {
margin-top: 0;
}
.template-library-modal .wpfnl-create-funnel-layout.store-checkout-layout .store-checkout-modal-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
.template-library-modal .wpfnl-create-funnel-layout.store-checkout-layout .store-checkout-modal-actions .btn-cancel {
display: inline-flex;
align-items: center;
justify-content: center;
height: 38px;
padding: 0 24px;
font-size: 14px;
font-weight: 500;
color: #6E42D3;
background: transparent;
border: 1.5px solid #6E42D3;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
min-width: 100px;
}
.template-library-modal .wpfnl-create-funnel-layout.store-checkout-layout .store-checkout-modal-actions .btn-cancel:hover {
background: #f5f0ff;
}
.template-library-modal .wpfnl-create-funnel-layout.store-checkout-layout .store-checkout-modal-actions .btn-create-store-checkout {
min-width: 180px;
height: 38px;
line-height: 38px;
padding: 0 24px;
}
.template-library-modal .wpfnl-create-funnel-layout.store-checkout-layout .store-checkout-modal-actions .btn-create-store-checkout:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.template-library-modal .wpfnl-create-funnel-layout .close {
position: absolute;
border: none;
right: -11px;
top: -13px;
display: flex;
width: 40px;
height: 40px;
padding: 8px;
justify-content: center;
flex-flow: column;
align-items: center;
border-radius: 100px;
background: #FFF;
box-shadow: 0px 1px 1px 0px #DADADA;
cursor: pointer;
}
.template-library-modal .wpfnl-create-funnel-layout .wpfnl-form-group {
margin-bottom: 23px;
}
.template-library-modal .wpfnl-create-funnel-layout .wpfnl-form-group > label {
color: #2D3149;
font-size: 15px;
font-weight: 500;
line-height: 1.3;
margin-bottom: 7px;
display: block;
}
.template-library-modal .wpfnl-create-funnel-layout .modal-body {
height: 100%;
}
.template-library-modal .wpfnl-create-funnel-layout .modal-body input[type=text] {
margin-bottom: 0;
border-radius: 8px;
background: #FFF;
box-shadow: 0px 1px 1px 0px rgba(182, 185, 191, 0.3);
border: none;
font-weight: 300;
}
.template-library-modal .wpfnl-create-funnel-layout .modal-body button[type=submit] {
width: auto;
}
.template-library-modal .wpfnl-create-funnel-layout .layout-title {
color: #2D3149;
font-size: 15px;
font-weight: 500;
line-height: 1.3;
margin-bottom: 9px;
}
.template-library-modal .wpfnl-create-funnel-layout form {
height: 100%;
}
.template-library-modal .wpfnl-create-funnel-layout .funnels-layout-wrapper {
display: flex;
flex-flow: row wrap;
gap: 20px;
border-bottom: 1px solid #E5E1F1;
padding-bottom: 20px;
margin-bottom: 20px;
overflow: auto;
height: 100%;
max-height: calc(100% - 176px);
}
.template-library-modal .wpfnl-create-funnel-layout .single-layout {
width: calc(33.3333333333% - 14px);
position: relative;
}
.template-library-modal .wpfnl-create-funnel-layout .single-layout .pro-tag {
position: absolute;
right: 24px;
top: 24px;
z-index: 2;
border-radius: 5px;
background: #2FCF5C;
box-shadow: 0px 4px 6px 0px #E0DEE5;
font-size: 12px;
font-weight: 700;
line-height: 1;
padding: 3px 6px;
}
.template-library-modal .wpfnl-create-funnel-layout .single-layout-inner {
border-radius: 16px;
border: 1px solid #EBE9F5;
box-shadow: 0px 8px 8px 0px rgba(226, 223, 237, 0.3);
padding: 10px;
display: block;
background: #fff;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
overflow: hidden;
}
.template-library-modal .wpfnl-create-funnel-layout .single-layout-inner:before {
content: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgNjMgNTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iNDIuNSIgY3k9IjkuNSIgcj0iNDIuNSIgZmlsbD0iIzZFNDJEMyIvPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF80ODRfMTMpIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNDAuNDg5IDE3LjU5NmExLjc0NSAxLjc0NSAwIDAwLTIuNDY4IDBMMjYuOTE1IDI4LjcwMmwtNC45MzYtNC45MzZhMS43NDUgMS43NDUgMCAxMC0yLjQ2OCAyLjQ2OGw2LjE3IDYuMTdjLjM0LjM0Ljc4Ny41MTEgMS4yMzQuNTExLjQ0NyAwIC44OTMtLjE3IDEuMjM0LS41MTFsMTIuMzQtMTIuMzRhMS43NDUgMS43NDUgMCAwMDAtMi40Njh6Ii8+PC9nPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDBfNDg0XzEzIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwaDIydjIySDB6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOSAxNCkiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=");
position: absolute;
right: -2px;
top: -2px;
display: block;
width: 58px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.template-library-modal .wpfnl-create-funnel-layout .single-layout-inner.is-pro {
cursor: not-allowed;
}
.template-library-modal .wpfnl-create-funnel-layout .single-layout-inner.is-pro:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.4588235294);
border-radius: 16px;
z-index: 1;
}
.template-library-modal .wpfnl-create-funnel-layout .single-layout.active .single-layout-inner {
border-color: #6E42D3;
}
.template-library-modal .wpfnl-create-funnel-layout .single-layout.active .single-layout-inner::before {
opacity: 1;
visibility: visible;
}
.template-library-modal .wpfnl-create-funnel-layout .inner-box {
border-radius: 16px;
background: #CEE4DD;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
height: 185px;
padding: 15px;
}
.template-library-modal .wpfnl-create-funnel-layout .inner-box svg {
max-width: 100%;
}
.template-library-modal .wpfnl-create-funnel-layout .layout2 .inner-box {
background-color: #F3E8FF;
}
.template-library-modal .wpfnl-create-funnel-layout .layout3 .inner-box {
background-color: rgba(167, 204, 245, 0.3019607843);
}
.template-library-modal .wpfnl-create-funnel-layout .layout4 .inner-box {
background-color: #FDF2CB;
}
.template-library-modal .wpfnl-create-funnel-layout .layout5 .inner-box {
background-color: #E5F0FC;
}
.template-library-modal .wpfnl-create-funnel-layout .layout6 .inner-box {
background-color: #FFEAE1;
}
.template-library-modal .wpfnl-create-funnel-layout input[type=radio]:checked + .single-layout-inner {
border-color: #6E42D3;
}
.template-library-modal .wpfnl-create-funnel-layout .button-area {
text-align: right;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: flex-end;
gap: 10px;
}
.template-library-modal .wpfnl-create-funnel-layout .button-area .wpfnl-alert.box {
padding: 10px 20px;
}
#create-funnel-loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 99;
opacity: 0;
visibility: hidden;
margin-left: -50px;
margin-top: -50px;
}
#create-funnel-loader.show {
opacity: 1;
visibility: visible;
}
.create-funnel-loader-overlay#create-funnel-loader {
background: #ffffff;
position: fixed;
left: 160px;
top: 0;
width: calc(100% - 160px);
height: 100%;
z-index: 100;
display: none;
margin: 0;
}
.create-funnel-loader-overlay#create-funnel-loader.show {
display: block;
}
.create-funnel-loader-overlay#create-funnel-loader.create-funnel-shimmer-overlay {
display: flex;
}
.create-funnel-loader-overlay#create-funnel-loader .wpfnl-loader {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
margin: 0;
}
body.folded .create-funnel-loader-overlay#create-funnel-loader {
left: 36px;
width: calc(100% - 36px);
}
.wpfnl-missing-plugin-notice {
width: 60% !important;
background: #fff;
border-color: transparent !important;
padding: 30px;
border-radius: 10px;
}
.wpfnl-missing-plugin-notice .wpfnl-notice-title {
font-size: 20px;
font-weight: 500;
color: #0e2244;
margin-bottom: 10px;
}
.wpfnl-missing-plugin-notice .wpfnl-notice-notice-body span, .wpfnl-missing-plugin-notice .wpfnl-notice-notice-body p {
color: #0e2244;
font-size: 16px;
line-height: 1.6;
}
.wpfnl-missing-plugin-notice .wpfnl-notice-notice-body p {
margin-bottom: 10px;
}
.wpfnl-missing-plugin-notice .wpfnl-notice-notice-body p.note {
margin-bottom: 0;
}
.wpfnl-missing-plugin-notice .wpfnl-notice-notice-body p b {
font-weight: 500;
}
.wpfnl-missing-plugin-notice .wpfnl-notice-notice-body a {
font-size: 16px;
font-weight: 500;
color: #6E42D3;
}
.wpfnl-missing-plugin-notice .wpfnl-notice-notice-body a:hover {
text-decoration: none;
}
.wpfnl-missing-plugin-notice .wpfnl-notice-notice-body .dot-wrapper span {
margin-left: 0px;
font-weight: 700;
}
.wpfnl-missing-plugin-notice .wpfnl-notice-notice-body .wpfnl-plugin-installation-error {
color: #d24d4d;
display: block;
margin-top: 10px;
font-style: italic;
font-size: 14px;
}
.wpfnl-missing-plugin-notice .wpfnl-notice-notice-body .wpfnl-plugin-installation-error a {
font-size: 14px;
}
.wpfnl-missing-plugin-notice .wpfnl-notice-notice-body .wpfnl-plugin-installation-error a:hover {
text-decoration: underline;
}
.importar-loader {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(51, 51, 51, 0.7);
transition: all 0.3s ease;
cursor: default;
z-index: 2;
border-radius: 10px 10px 0 0;
}
.importar-loader .title-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.importar-loader .title {
text-transform: capitalize;
font-size: 16px;
color: #fff;
}
.folded .template-library-modal {
left: 36px;
width: calc(100% - 36px);
}
@media only screen and (max-width: 1699px) {
.template-library-modal .wpfnl-create-funnel__templates {
gap: 30px;
}
.template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template {
width: calc(25% - 23px);
}
.template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-step__single-template .template-action .btn-default,
.template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template .template-action .btn-default {
padding: 9px 12px 7px;
font-size: 14px;
}
.template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template.create__from-scratch .btn-default {
max-width: 174px;
}
.template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper {
gap: 30px;
}
.template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-step__single-template {
width: calc(20% - 24px);
}
}
@media only screen and (max-width: 1399px) {
.template-library-modal .funnel-templates-content {
padding: 30px;
}
.template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template {
width: calc(33.3333333333% - 20px);
}
.template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-step__single-template {
width: calc(25% - 23px);
}
.template-library-modal .wpfnl-create-funnel-layout {
max-width: 913px;
}
.template-library-modal .wpfnl-create-funnel-layout .inner-box {
height: 175px;
}
}
@media only screen and (max-width: 1199px) {
.template-library-modal .funnel-templates-content {
padding: 20px;
}
.template-library-modal .funnel-templates-sidebar {
padding: 19px 15px;
}
.template-library-modal .wpfnl-create-funnel__templates {
gap: 20px;
}
.template-library-modal .wpfnl-create-funnel__templates .create-funnel__single-template {
width: calc(50% - 10px);
}
.funnel-templates-content .wpfnl-step__templates-wrapper .wpfnl-step__single-template {
width: calc(50% - 10px);
}
.template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper {
gap: 20px;
}
.template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-step__single-template {
width: calc(33.3333333333% - 14px);
}
.wpfnl-missing-plugin-notice {
width: calc(50% - 30px) !important;
padding: 20px;
}
.template-library-modal .wpfnl-create-funnel-layout {
max-width: 780px;
max-height: 585px;
}
.template-library-modal .wpfnl-create-funnel-layout .single-layout {
width: calc(33.3333333333% - 8px);
}
.template-library-modal .wpfnl-create-funnel-layout .funnels-layout-wrapper {
gap: 12px;
max-height: calc(100% - 180px);
}
.template-library-modal .wpfnl-create-funnel-layout .single-layout-inner {
border-radius: 10px;
padding: 5px;
}
.template-library-modal .wpfnl-create-funnel-layout .inner-box {
height: 145px;
border-radius: 8px;
}
.template-library-modal .wpfnl-create-funnel__templates .steps-preview-wrapper .wpfnl-template-preview-wrapper .wpfnl-template-step-preview.desktop {
width: 992px;
transform: scale(0.7);
transform-origin: left top;
margin-left: 10%;
}
}
@media only screen and (max-width: 960px) {
.template-library-modal {
left: 36px;
width: calc(100% - 36px);
}
.template-library-modal .wpfnl-create-funnel-layout {
left: calc(50% + 20px);
}
}
.step-template-showcase-modal .wpfnl-step__single-template, .template-library-modal .wpfnl-step__single-template {
position: relative;
background: #ffffff;
width: calc(25% - 30px);
border-radius: 10px;
box-shadow: 0px 1px 2px rgba(190, 190, 215, 0.2);
transition: all 0.3s ease;
}
.step-template-showcase-modal .create__from-scratch.wpfnl-step__single-template, .template-library-modal .create__from-scratch.wpfnl-step__single-template {
border: 2px dashed #A1A1B6;
box-shadow: none !important;
background: transparent;
}
.step-template-showcase-modal .create__from-scratch.wpfnl-step__single-template:hover, .template-library-modal .create__from-scratch.wpfnl-step__single-template:hover {
box-shadow: none !important;
}
.step-template-showcase-modal .create__from-scratch.wpfnl-step__single-template .btn-default, .template-library-modal .create__from-scratch.wpfnl-step__single-template .btn-default {
height: 48px;
line-height: 49px;
width: 100%;
max-width: 194px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 12px;
padding: 0 15px;
box-shadow: 0px 9px 14px 0px rgba(193, 183, 232, 0.5);
}
.step-template-showcase-modal .create__from-scratch.wpfnl-step__single-template .btn-default svg, .template-library-modal .create__from-scratch.wpfnl-step__single-template .btn-default svg {
margin-right: 3px;
}
.step-template-showcase-modal .create__from-scratch.wpfnl-step__single-template .btn-default svg path, .template-library-modal .create__from-scratch.wpfnl-step__single-template .btn-default svg path {
stroke: #fff;
}
.step-template-showcase-modal .create__from-scratch.wpfnl-step__single-template .step-template-info, .template-library-modal .create__from-scratch.wpfnl-step__single-template .step-template-info,
.step-template-showcase-modal .create__from-scratch.wpfnl-step__single-template .template-preview-image,
.template-library-modal .create__from-scratch.wpfnl-step__single-template .template-preview-image {
opacity: 0;
visibility: hidden;
}
.step-template-showcase-modal .wpfnl-step__single-template .importar-loader, .template-library-modal .wpfnl-step__single-template .importar-loader {
background: rgba(38, 33, 51, 0.6);
-webkit-backdrop-filter: blur(7px);
backdrop-filter: blur(7px);
}
.step-template-showcase-modal .wpfnl-step__single-template .template-preview-image, .template-library-modal .wpfnl-step__single-template .template-preview-image {
position: relative;
}
.step-template-showcase-modal .wpfnl-step__single-template .step-image-wrapper, .template-library-modal .wpfnl-step__single-template .step-image-wrapper {
border-radius: 10px 10px 0 0;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center 0;
position: relative;
overflow: hidden;
}
.step-template-showcase-modal .wpfnl-step__single-template .step-image-wrapper:before, .template-library-modal .wpfnl-step__single-template .step-image-wrapper:before {
content: "";
display: block;
padding-top: 100%;
}
.step-template-showcase-modal .wpfnl-step__single-template .template-img, .template-library-modal .wpfnl-step__single-template .template-img {
width: 100%;
height: 350px;
object-fit: contain;
border-radius: 10px 10px 0px 0px;
transition: all 0.3s ease;
}
.step-template-showcase-modal .wpfnl-step__single-template .step-template-info, .template-library-modal .wpfnl-step__single-template .step-template-info {
border-radius: 0 0 10px 10px;
position: relative;
border-top: 1px solid #E5E8F3;
}
.step-template-showcase-modal .wpfnl-step__single-template .step-template-info .title, .template-library-modal .wpfnl-step__single-template .step-template-info .title {
margin-bottom: 0;
font-size: 14px;
line-height: 1.2;
color: #363B4E;
font-weight: 500;
padding: 19px 15px 17px;
text-align: center;
text-transform: capitalize;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.step-template-showcase-modal .wpfnl-step__single-template:hover, .template-library-modal .wpfnl-step__single-template:hover {
box-shadow: 0px 20px 20px rgba(190, 190, 215, 0.2);
}
.step-template-showcase-modal .wpfnl-step__single-template:hover .template-action, .template-library-modal .wpfnl-step__single-template:hover .template-action {
opacity: 1;
visibility: visible;
}
.step-template-showcase-modal .wpfnl-create-step_inner-content {
width: 100%;
height: 100%;
}
.step-template-showcase-modal .wpfnl-create-step__template-wrapper {
position: relative;
min-height: 400px;
max-height: 100%;
overflow: auto;
display: flex;
flex-flow: row wrap;
align-items: flex-start;
}
.step-template-showcase-modal .wpfnl-create-step__template-wrapper::-webkit-scrollbar {
width: 5px;
}
.step-template-showcase-modal .wpfnl-create-step__template-wrapper::-webkit-scrollbar-track {
background: #f2f5f8;
}
.step-template-showcase-modal .wpfnl-create-step__template-wrapper::-webkit-scrollbar-thumb {
background-color: #d9dce0;
border-radius: 20px;
}
.step-template-showcase-modal .steps-template__filter-wrapper {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: flex-start;
width: 100%;
background: #FFFFFF;
box-shadow: 0px 1px 2px rgba(190, 190, 215, 0.31);
padding: 15px 24px;
position: relative;
}
.step-template-showcase-modal .steps-template__filter-wrapper .wpfnl-modal-close {
background: #FFFFFF;
border-radius: 10px;
height: 38px;
width: 38px;
margin-right: 15px;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
cursor: pointer;
border: 1px solid #EEF0F3;
}
.step-template-showcase-modal .steps-template__filter-wrapper .step-showcase-title {
font-weight: 500;
font-size: 16px;
line-height: 1.5;
color: #363B4E;
text-transform: capitalize;
}
.step-template-showcase-modal .steps-template__filter-wrapper .pro-free__filter {
margin-left: auto !important;
}
.step-template-showcase-modal .wpfnl-create-step__filter-nav {
width: 228px;
min-height: 835px;
background: #FFFFFF;
box-shadow: 1px 0px 2px rgba(190, 190, 215, 0.14);
padding: 24px;
align-self: stretch;
}
.step-template-showcase-modal .wpfnl-create-step__filter-nav .filter-nav-item {
height: 44px;
line-height: 44px;
font-weight: 500;
color: #363B4E;
padding: 0 16px;
margin: 0 0 15px 0;
text-align: left;
box-shadow: none;
border: 1px solid #EEF0F3;
border-radius: 8px;
text-transform: capitalize;
cursor: pointer;
position: relative;
transition: all 0.3s ease;
background: #fff;
display: flex;
align-items: center;
gap: 8px;
}
.step-template-showcase-modal .wpfnl-create-step__filter-nav .filter-nav-item .pro-tag-icon {
position: static;
margin-top: 6px;
margin-left: -4px;
}
.step-template-showcase-modal .wpfnl-create-step__filter-nav .filter-nav-item svg {
position: relative;
top: -1px;
}
.step-template-showcase-modal .wpfnl-create-step__filter-nav .filter-nav-item svg path {
transition: all 0.3s ease;
}
.step-template-showcase-modal .wpfnl-create-step__filter-nav .filter-nav-item.disabled {
cursor: not-allowed;
color: #939393;
background: #dcdbe3;
}
.step-template-showcase-modal .wpfnl-create-step__filter-nav .filter-nav-item.active {
border-color: #6E42D3;
color: #6E42D3;
box-shadow: 0px 20px 16px rgba(189, 193, 200, 0.2);
}
.step-template-showcase-modal .wpfnl-create-step__filter-nav .filter-nav-item.active.step-checkout path, .step-template-showcase-modal .wpfnl-create-step__filter-nav .filter-nav-item.active.step-landing path {
fill: #6E42D3;
stroke: #6E42D3;
}
.step-template-showcase-modal .wpfnl-create-step__filter-nav .filter-nav-item.active.step-downsell path, .step-template-showcase-modal .wpfnl-create-step__filter-nav .filter-nav-item.active.step-upsell path, .step-template-showcase-modal .wpfnl-create-step__filter-nav .filter-nav-item.active.step-custom path, .step-template-showcase-modal .wpfnl-create-step__filter-nav .filter-nav-item.active.step-thankyou path {
fill: #6E42D3;
}
.step-template-showcase-modal .wpfnl-create-step__filter-nav .pro-tag {
position: absolute;
top: -6px;
right: -2px;
}
.step-template-showcase-modal .create-step-name-modal {
left: 50%;
}
.step-template-showcase-modal .wpfnl-step__templates-wrapper-before {
padding: 30px 35px;
width: calc(100% - 228px);
box-shadow: none;
}
.step-template-showcase-modal .wpfnl-step__templates-wrapper-before .step-counter {
font-size: 20px;
line-height: 1.2;
font-weight: 600;
color: #363B4E;
margin-bottom: 24px;
text-transform: capitalize;
}
.step-template-showcase-modal .wpfnl-step__templates-wrapper {
display: flex;
flex-flow: row wrap;
gap: 40px;
}
.step-template-showcase-modal .wpfnl-step__single-template .template-action {
flex-flow: row;
}
@media only screen and (max-width: 1699px) {
.step-template-showcase-modal .wpfnl-step__templates-wrapper {
gap: 30px;
}
.step-template-showcase-modal .wpfnl-step__templates-wrapper .wpfnl-step__single-template {
width: calc(25% - 23px);
}
.step-template-showcase-modal .wpfnl-step__templates-wrapper .wpfnl-step__single-template .template-action .step-btn {
padding: 9px 12px 7px;
font-size: 14px;
}
.step-template-showcase-modal .wpfnl-step__templates-wrapper .wpfnl-step__single-template.create__from-scratch .btn-default {
max-width: 174px;
}
}
@media only screen and (max-width: 1399px) {
.step-template-showcase-modal .wpfnl-step__templates-wrapper .wpfnl-step__single-template {
width: calc(33.3333333333% - 20px);
}
.step-template-showcase-modal.wpfnl-ab-steps-modal .wpfnl-step__templates-wrapper .wpfnl-step__single-template,
.step-template-showcase-modal .wpfnl-ab-steps .wpfnl-step__templates-wrapper .wpfnl-step__single-template {
width: calc(25% - 23px);
}
}
@media only screen and (max-width: 1199px) {
.step-template-showcase-modal .wpfnl-create-step__filter-nav {
width: 198px;
padding: 20px;
}
.step-template-showcase-modal .wpfnl-step__templates-wrapper-before {
padding: 20px 20px;
width: calc(100% - 198px);
}
.step-template-showcase-modal .wpfnl-step__templates-wrapper {
gap: 20px;
}
.step-template-showcase-modal .wpfnl-step__templates-wrapper .wpfnl-step__single-template {
width: calc(33.3333333333% - 14px);
}
.step-template-showcase-modal.wpfnl-ab-steps-modal .wpfnl-step__templates-wrapper .wpfnl-step__single-template,
.step-template-showcase-modal .wpfnl-ab-steps .wpfnl-step__templates-wrapper .wpfnl-step__single-template {
width: calc(33.3333333333% - 14px);
}
}
@media only screen and (max-width: 991px) {
.step-template-showcase-modal .wpfnl-step__templates-wrapper .wpfnl-step__single-template {
width: calc(50% - 10px);
}
.step-template-showcase-modal.wpfnl-ab-steps-modal .wpfnl-step__templates-wrapper .wpfnl-step__single-template,
.step-template-showcase-modal .wpfnl-ab-steps .wpfnl-step__templates-wrapper .wpfnl-step__single-template {
width: calc(50% - 10px);
}
}
.funnel-list__wrapper {
height: 100%;
background-color: #ffffff;
border-radius: 10px;
}
.funnel-list__wrapper .funnel__single-list {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-between;
padding: 14px 24px 14px 60px;
position: relative;
border-bottom: 1px solid #EBEDF0;
gap: 12px;
}
.funnel-list__wrapper .funnel__single-list:last-child {
margin-bottom: 0;
}
.funnel-list__wrapper .funnel__single-list .bulk-action-wrapper {
position: absolute;
top: 0;
left: 60px;
width: calc(100% - 60px);
display: none;
align-items: center;
gap: 10px;
z-index: 3;
background: #ffffff;
padding: 8px 0 6px;
height: 100%;
border-radius: 0 10px 0 0;
}
.funnel-list__wrapper .funnel__single-list .bulk-action-wrapper .bulk-delete-toggler {
font-weight: 400;
font-size: 12px;
line-height: 1.2;
letter-spacing: -0.01em;
padding: 7px 11px;
min-width: auto;
height: auto;
border-radius: 50px;
position: relative;
background-color: #6E42D3;
}
.funnel-list__wrapper .funnel__single-list .bulk-action-wrapper .bulk-delete-toggler:before {
content: "";
position: absolute;
right: 27px;
top: 0;
height: 100%;
width: 1px;
background: #9373EA;
}
.funnel-list__wrapper .funnel__single-list .bulk-action-wrapper .bulk-delete-toggler > svg {
margin-left: 16px;
}
.funnel-list__wrapper .funnel__single-list .bulk-action-wrapper .bulk-delete-toggler.show-dropdown .wpfnl-dropdown {
opacity: 1;
visibility: visible;
}
.funnel-list__wrapper .funnel__single-list .bulk-action-wrapper .bulk-delete-toggler .wpfnl-dropdown li a:hover {
background: #F6F8FA;
color: #7A8B9A;
}
.funnel-list__wrapper .funnel__single-list .bulk-action-wrapper .bulk-delete-toggler .wpfnl-dropdown li rect,
.funnel-list__wrapper .funnel__single-list .bulk-action-wrapper .bulk-delete-toggler .wpfnl-dropdown li path {
stroke: #7A8B9A;
}
.funnel-list__wrapper .funnel__single-list .bulk-action-wrapper .bulk-delete-toggler .wpfnl-dropdown li .wpfnl-bulk-export path {
stroke: transparent;
}
.funnel-list__wrapper .funnel__single-list .bulk-action-wrapper .selected-funnel-count, .funnel-list__wrapper .funnel__single-list .bulk-action-wrapper > p {
color: #363B4E;
font-weight: 500;
}
.funnel-list__wrapper .funnel__single-list .wpfnl-checkbox label:before {
border-color: #E4E6EB;
background-color: #fff;
border-radius: 5px;
}
.funnel-list__wrapper .funnel__single-list.list-header {
padding: 15px 24px 15px 60px;
}
.funnel-list__wrapper .funnel__single-list.list-header .list-cell {
line-height: 1;
transform: translateY(1px);
}
.funnel-list__wrapper .funnel__single-list .funnel-list__bulk-action {
position: absolute;
left: 24px;
top: 50%;
transform: translateY(-50%);
z-index: 2;
}
.funnel-list__wrapper .funnel__single-list .wpfnl-name {
padding-right: 15px;
padding-left: 45px;
position: relative;
width: 240px;
}
.funnel-list__wrapper .funnel__single-list .wpfnl-name .builder-logo {
position: absolute;
left: 0;
top: 50%;
width: 30px;
word-break: break-all;
display: block;
transform: translateY(-50%);
}
.funnel-list__wrapper .funnel__single-list .wpfnl-name .builder-logo svg {
display: block;
}
.funnel-list__wrapper .funnel__single-list .wpfnl-name .name {
font-weight: 500;
font-size: 14px;
line-height: 16px;
color: #363B4E;
}
.funnel-list__wrapper .funnel__single-list .wpfnl-name .name:hover {
color: #6E42D3;
}
.funnel-list__wrapper .funnel__single-list .wpfnl-name .steps {
font-size: 12px;
line-height: 16px;
color: #7A8B9A;
display: block;
text-transform: capitalize;
}
.funnel-list__wrapper .funnel__single-list .wpfnl-intigrations {
display: flex;
flex-flow: row wrap;
align-items: center;
gap: 8px;
width: 375px;
}
.funnel-list__wrapper .funnel__single-list .wpfnl-intigrations .automation-tag {
border: 1px solid #E5E8F3;
border-radius: 6px;
font-size: 12px;
line-height: 1.5;
color: #7A8B9A;
padding: 2px 8px;
display: flex;
flex-flow: row;
align-items: center;
justify-content: center;
position: relative;
}
.funnel-list__wrapper .funnel__single-list .wpfnl-intigrations .automation-tag svg {
margin-right: 6px;
display: block;
}
.funnel-list__wrapper .funnel__single-list .wpfnl-intigrations .automation-tag .tooltip {
background: #0C1015;
border-radius: 6px;
position: absolute;
bottom: calc(100% + 10px);
left: 0;
padding: 7px 10px;
color: #fff;
width: 144px;
z-index: 4;
font-size: 13px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.funnel-list__wrapper .funnel__single-list .wpfnl-intigrations .automation-tag .tooltip:before {
content: "";
position: absolute;
left: 13px;
bottom: -4px;
width: 10px;
height: 10px;
background: #0C1015;
transform: rotate(45deg);
border-radius: 2px;
}
.funnel-list__wrapper .funnel__single-list .wpfnl-intigrations .automation-tag:hover .tooltip {
opacity: 1;
visibility: visible;
}
.funnel-list__wrapper .funnel__single-list .wpfnl-creation-date {
width: 135px;
}
.funnel-list__wrapper .funnel__single-list .wpfnl-creation-date .post-date {
line-height: 1.14;
display: block;
}
.funnel-list__wrapper .funnel__single-list .wpfnl-status {
width: 75px;
}
.funnel-list__wrapper .funnel__single-list .wpfnl-status .post-status {
font-size: 12px;
line-height: 1.25;
color: #2D3149;
font-weight: 500;
text-transform: capitalize;
background: rgba(122, 139, 154, 0.15);
border-radius: 100px;
display: inline-block;
padding: 5px 10px 4px;
}
.funnel-list__wrapper .funnel__single-list .wpfnl-status.published .post-status {
background: rgba(35, 150, 84, 0.1);
color: #239654;
}
.funnel-list__wrapper .funnel__single-list .list-action {
display: flex;
flex-flow: row;
align-items: center;
width: 80px;
gap: 9px;
}
.funnel-list__wrapper .funnel__single-list .list-action > a {
display: flex;
flex-flow: row;
align-items: center;
font-weight: 500;
font-size: 14px;
line-height: 1.2;
text-transform: capitalize;
padding: 3px 4px;
}
.funnel-list__wrapper .funnel__single-list .list-action > a svg {
display: block;
}
.funnel-list__wrapper .funnel__single-list .list-action > a svg path {
transition: all 0.3s ease;
}
.funnel-list__wrapper .funnel__single-list .list-action > a.disabled {
opacity: 0.5;
cursor: not-allowed;
text-decoration: none;
}
.funnel-list__wrapper .funnel__single-list .list-action > a.edit:hover path {
fill: #6E42D3;
}
.funnel-list__wrapper .funnel__single-list .list-action > a.view:hover path {
fill: #6E42D3;
stroke: #6E42D3;
}
.funnel-list__wrapper .funnel__single-list .list-action .more-action {
position: relative;
padding: 3px 4px;
cursor: pointer;
}
.funnel-list__wrapper .funnel__single-list .list-action .more-action svg {
display: block;
}
.funnel-list__wrapper .funnel__single-list .list-action .more-action .duplicate svg {
width: 18px;
}
.funnel-list__wrapper .funnel__single-list .list-action .more-action .duplicate .pro-tag-icon {
margin-left: 7px;
}
.funnel-list__wrapper .funnel__single-list .list-action .more-action .duplicate .pro-tag-icon path {
stroke: initial;
}
.funnel-list__wrapper .funnel__single-list .list-action ul.more-actions {
right: -22px;
}
.funnel-list__wrapper .funnel__single-list .list-action ul.more-actions .wpfnl-loader {
border-width: 1px;
border-top-color: transparent;
width: 10px;
height: 10px;
margin-left: 6px;
}
.funnel-list__wrapper .funnel__single-list .list-action .more-action.show-actions ul.more-actions {
top: 27px;
opacity: 1;
visibility: visible;
}
.funnel-list__wrapper .funnel__single-list .list-action .wpfnl-dropdown li a:hover {
background: #F6F8FA;
color: #7A8B9A;
}
.funnel-list__wrapper .funnel__single-list .list-action .wpfnl-dropdown li rect,
.funnel-list__wrapper .funnel__single-list .list-action .wpfnl-dropdown li path {
stroke: #7A8B9A;
}
.funnel-list__wrapper .funnel__single-list .list-action .wpfnl-dropdown li .wpfnl-export-funnel path {
stroke: transparent;
}
.funnel-list__wrapper .funnel__single-list.funnel-disabled {
border-bottom-color: #e3e3e3;
}
.funnel-list__wrapper .funnel__single-list.funnel-disabled::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
cursor: not-allowed;
z-index: 2;
background: rgba(32, 32, 32, 0.0784313725);
}
.funnel-list__wrapper .funnel__single-list.funnel-disabled .list-cell {
opacity: 0.5;
}
.funnel-list__wrapper .funnel__single-list.funnel-disabled .list-action > a.disabled {
opacity: 1;
}
.funnel-list__wrapper .funnel__single-list .funnel-alert {
border: 1px solid #e3d7ff;
background: linear-gradient(to right, #eff6ff, #eef2ff);
border-radius: 8px;
padding: 9px 12px;
width: 100%;
}
.funnel-list__wrapper .funnel__single-list .funnel-alert .funnel-alert-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.funnel-list__wrapper .funnel__single-list .funnel-alert .funnel-alert-left {
display: flex;
align-items: center;
gap: 12px;
}
.funnel-list__wrapper .funnel__single-list .funnel-alert .funnel-icon {
background: #dbeafe;
padding: 8px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
}
.funnel-list__wrapper .funnel__single-list .funnel-alert .funnel-icon svg {
width: 20px;
height: 20px;
color: #2563eb;
}
.funnel-list__wrapper .funnel__single-list .funnel-alert .funnel-alert-content {
display: flex;
flex-direction: column;
}
.funnel-list__wrapper .funnel__single-list .funnel-alert .funnel-alert-title {
font-size: 14px;
font-weight: 600;
color: #111827;
margin: 0;
}
.funnel-list__wrapper .funnel__single-list .funnel-alert .funnel-alert-description {
font-size: 12px;
color: #4b5563;
margin: 0;
}
.funnel-list__wrapper .funnel__single-list .funnel-alert .funnel-activate-btn {
background: #6E42D3;
color: #ffffff;
border: none;
border-radius: 6px;
padding: 7px 13px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
}
.funnel-list__wrapper .funnel__single-list .funnel-alert .funnel-activate-btn:hover {
background: #5b36b0;
}
.funnel-list__wrapper .funnel__single-list .funnel-alert .funnel-activate-btn:disabled {
opacity: 0.5;
pointer-events: none;
}
.funnel-list__wrapper .list-footer {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-between;
padding: 17px 24px;
}
.funnel-list__wrapper .list-footer .pagination-number p {
display: flex;
align-items: center;
gap: 10px;
white-space: nowrap;
}
.funnel-list__wrapper .list-footer .pagination-number p strong {
color: #363B4E;
}
.funnel-list__wrapper .list-footer .pagination-number p select {
width: 56px;
min-width: auto;
padding: 2px 8px;
height: 32px;
}
@media only screen and (max-width: 1399px) {
.funnel-list__wrapper .funnel__single-list .wpfnl-name {
width: 200px;
}
.funnel-list__wrapper .funnel__single-list .wpfnl-intigrations {
width: 220px;
}
}
@media only screen and (max-width: 1199px) {
.wpfnl-dashboard__header a.import-export {
background: transparent;
box-shadow: none;
padding: 0;
}
.wpfnl-dashboard__header .btn-default.disabled,
.wpfnl-dashboard__header .add-new-funnel-btn {
padding: 0 18px;
}
.funnel-list__wrapper .funnel__single-list {
padding: 10px 15px 10px 45px;
gap: 8px;
}
.funnel-list__wrapper .funnel__single-list .funnel-list__bulk-action {
left: 15px;
}
.funnel-list__wrapper .funnel__single-list .wpfnl-name {
padding-right: 10px;
}
.funnel-list__wrapper .funnel__single-list .wpfnl-creation-date {
width: 74px;
}
.funnel-list__wrapper .funnel__single-list .wpfnl-intigrations {
width: 136px;
}
.funnel-list__wrapper .funnel__single-list .list-action {
width: 73px;
gap: 3px;
}
.funnel-list__wrapper .funnel__single-list .list-action > a {
margin-right: 0;
width: 28px;
text-indent: -999px;
overflow: hidden;
}
.funnel-list__wrapper .funnel__single-list .list-action > a.edit {
margin-right: 0;
}
}
@media only screen and (max-width: 782px) {
.wpfnl-dashboard__header {
padding: 18px 20px 19px 30px;
}
}
.remote-funnel-header {
display: flex;
flex-flow: row wrap;
align-items: center;
background: #FFFFFF;
border-bottom: 1px solid #E5E8F3;
position: relative;
padding: 15px 15px 5px;
}
.remote-funnel-header .single-item {
margin: 0 10px 10px 0;
}
.remote-funnel-header .single-item select {
padding-right: 30px;
}
.remote-funnel-header .single-item .template-image-remove,
.remote-funnel-header .single-item .template-image-upload {
background: #F7F7FA;
color: #363B4E;
border: 1px solid #E5E8F3;
}
.remote-funnel-header .single-item.template-preview-image {
display: flex;
align-items: center;
flex-flow: row wrap;
max-width: 510px;
}
.remote-funnel-header .single-item.template-preview-image input[type=text] {
width: 200px;
margin-right: 10px;
}
.remote-funnel-header .single-item.template-preview-image .btn-default {
margin-right: 10px;
white-space: pre;
}
.remote-funnel-header .single-item.template-preview-image .btn-default:last-child {
margin-right: 0;
}
.remote-funnel-header .btn-default {
border-radius: 6px;
padding: 0 20px;
min-width: auto;
}
.steps-page__header {
display: flex;
flex-flow: row wrap;
align-items: center;
background: #FFFFFF;
box-shadow: 0px 1px 2px rgba(190, 190, 215, 0.14);
position: relative;
justify-content: flex-start;
padding: 15px 13px 15px 24px;
}
.steps-page__header-left {
display: flex;
flex-flow: row wrap;
align-items: center;
}
.steps-page__header-left .wpfnl-logo a {
display: block;
padding: 16px 25px;
border-right: 1px solid #E5E8F3;
}
.steps-page__header-left .wpfnl-logo a svg {
width: 26px;
display: block;
}
.steps-page__header-left .back-link {
font-weight: 400;
font-size: 14px;
color: #7A8B9A;
text-transform: capitalize;
padding: 0;
text-align: center;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
box-shadow: none;
height: 38px;
width: 38px;
border: 1px solid #EEF0F3;
margin-right: 15px;
border-radius: 10px;
}
.steps-page__header-left .back-link svg {
display: block;
margin: 0 auto;
}
.steps-page__header-left .back-link:hover {
color: #6E42D3;
}
.steps-page__header-left .add-step-condtion-area {
display: flex;
flex-flow: row wrap;
align-items: center;
border-right: 1px solid #E5E8F3;
}
.steps-page__header-left .add-step-condtion-area li {
position: relative;
}
.steps-page__header-left .add-step-condtion-area li .wpfnl-tooltip2 {
position: absolute;
left: 0;
top: calc(100% + 35px);
width: 305px;
padding: 10px 32px 10px 15px;
margin: 0;
background: #6e42d3;
color: #fff;
border-radius: 10px;
text-align: left;
z-index: 1;
opacity: 0;
visibility: hidden;
transition: all 0.5s ease 1.5s;
}
.steps-page__header-left .add-step-condtion-area li .wpfnl-tooltip2:before {
content: "";
position: absolute;
left: 20px;
top: -6px;
width: 13px;
height: 13px;
background: #6e42d3;
transform: rotate(45deg);
}
.steps-page__header-left .add-step-condtion-area li .wpfnl-tooltip2.show-tooltip {
top: calc(100% + 15px);
opacity: 1;
visibility: visible;
}
.steps-page__header-left .add-step-condtion-area li .wpfnl-tooltip2 .close-tooltip {
position: absolute;
right: 13px;
top: 11px;
cursor: pointer;
}
.steps-page__header-left .add-step-condtion-area li > button {
display: block;
border: none;
height: 60px;
padding: 0 20px;
background: transparent;
font-size: 14px;
font-weight: 500;
color: #363B4E;
cursor: pointer;
position: relative;
}
.steps-page__header-left .add-step-condtion-area li > button svg {
margin-right: 5px;
}
.steps-page__header-left .add-step-condtion-area li > button.add-new-step {
background-color: #F6F5FA;
color: #6E42D3;
}
.steps-page__header-left .add-step-condtion-area li > button.add-new-step:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: #6E42D3;
border-radius: 60px 60px 0 0;
}
.steps-page__header-left .add-step-condtion-area li > button.add-new-step svg {
margin-right: 5px;
}
.steps-page__header-left .add-step-condtion-area li > button.create-condition:hover {
color: #6E42D3;
}
.steps-page__header-left .add-step-condtion-area li > button.create-condition:hover path {
stroke: #6E42D3;
}
.steps-page__header-left .add-step-condtion-area li .steps-dropdown {
position: absolute;
box-shadow: 0px 10px 30px rgba(21, 21, 69, 0.0784313725);
border-radius: 0px 0px 10px 10px;
top: 100%;
left: 0;
width: 100%;
z-index: 9;
background: #F6F5FA;
border: 1px solid #fff;
padding: 10px 13px 12px;
transition: all 0.3s ease;
opacity: 0;
visibility: hidden;
}
.steps-page__header-left .add-step-condtion-area li .steps-dropdown > li {
background: #FFFFFF;
box-shadow: 0px 1px 2px rgba(190, 190, 215, 0.2);
border-radius: 5px;
font-weight: 500;
font-size: 14px;
line-height: 1.4;
color: #8594A2;
margin-bottom: 10px;
text-transform: capitalize;
padding: 7px 13px 6px;
text-align: center;
cursor: pointer;
width: 100%;
transition: all 0.3s ease;
}
.steps-page__header-left .add-step-condtion-area li .steps-dropdown > li:last-child {
margin-bottom: 0;
}
.steps-page__header-left .add-step-condtion-area li .steps-dropdown > li:hover {
background: #6E42D3;
color: #fff;
}
.steps-page__header-left .add-step-condtion-area li .steps-dropdown > li.disabled {
cursor: not-allowed;
color: white;
background: #B6B2CA;
}
.steps-page__header-left .add-step-condtion-area li .steps-dropdown > li .pro-tag {
position: absolute;
top: -6px;
right: -2px;
}
.steps-page__header-left .add-step-condtion-area li.show-steps-dropdown > button.add-new-step svg {
transform: rotate(180deg);
}
.steps-page__header-left .add-step-condtion-area li.show-steps-dropdown .steps-dropdown {
opacity: 1;
visibility: visible;
}
.steps-page__header-left .add-step-condtion-area li > .mrm-trigger-action-btn, .steps-page__header-left .add-step-condtion-area li > .global-funnel-btn {
border-left: 1px solid #E5E8F3;
}
.steps-page__header-left .steps-page__fnl-name {
display: flex;
flex-flow: row wrap;
align-items: center;
}
.steps-page__header-left .steps-page__fnl-name label {
padding-right: 7px;
font-size: 14px;
}
.steps-page__header-left .steps-page__fnl-name input {
height: 28px;
font-size: 12px;
padding: 3px 10px;
width: 230px;
min-height: auto;
min-width: auto;
}
.steps-page__header-left .steps-page__fnl-name .funnel-name {
max-width: 230px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.steps-page__header-left .steps-page__fnl-name .fnl-name-btn {
min-width: auto;
padding: 0 7px;
width: 30px;
height: 26px;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.04) !important;
border: 1px solid #e0e0e0;
border-radius: 3px;
cursor: pointer;
margin-left: 10px;
}
.steps-page__header-left .steps-page__fnl-name .fnl-name-btn svg {
display: block;
}
.steps-page__header-left .steps-page__fnl-name .fnl-name-btn.funnel-name-edit svg {
fill: #6E42D3;
}
.steps-page__header-left .steps-page__fnl-name .fnl-name-btn.funnel-name-submit {
display: none;
}
.steps-page__header-left .steps-page__fnl-name .fnl-name-btn.funnel-name-submit svg {
stroke: #6E42D3;
}
.steps-page__header-left .steps-page__fnl-name .funnel-name-input {
display: none;
}
.steps-page__header-left .steps-page__fnl-name .funnel-name-submit-btn {
display: none;
}
.steps-page__header-left .copy-clipboard {
display: flex;
flex-flow: row wrap;
align-items: center;
margin-left: 20px;
position: relative;
}
.steps-page__header-left .copy-clipboard .link-icon {
width: 28px;
border: 1px solid #E5E8F3;
height: 28px;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
border-right: 0;
border-radius: 6px 0 0 6px;
}
.steps-page__header-left .copy-clipboard input[readonly] {
height: 28px;
font-size: 12px;
padding: 2px 10px;
border-radius: 0;
width: 160px;
background: #fff;
min-height: auto;
min-width: auto;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.steps-page__header-left .copy-clipboard button {
border: none;
background: #ececee;
color: #363B4E;
height: 28px;
display: inline-block;
padding: 0 10px;
text-transform: capitalize;
font-size: 12px;
font-weight: 500;
border-radius: 0 6px 6px 0;
cursor: pointer;
}
.steps-page__header-left .copy-clipboard .copied-msg {
color: #6E42D3;
font-weight: 500;
position: absolute;
top: 7px;
right: -46px;
font-size: 13px;
display: none;
}
.steps-page__header-center {
display: flex;
align-items: center;
flex-flow: row wrap;
gap: 40px;
}
.steps-page__header-center .steps-page__fnl-name {
display: flex;
flex-flow: row wrap;
align-items: center;
position: relative;
}
.steps-page__header-center .steps-page__fnl-name label {
padding-right: 7px;
font-size: 14px;
cursor: text;
}
.steps-page__header-center .steps-page__fnl-name input[type=text] {
line-height: 1;
font-size: 16px;
font-weight: 500;
color: #363B4E;
background: #fff;
border-radius: 10px;
border: 1px solid #6E42D3;
}
.steps-page__header-center .steps-page__fnl-name input[type=text]:hover {
color: #363B4E;
}
.steps-page__header-center .steps-page__fnl-name .funnel-name {
max-width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 16px;
font-weight: 500;
line-height: 1.1;
color: #363B4E;
position: relative;
padding-right: 25px;
}
.steps-page__header-center .steps-page__fnl-name .funnel-name:after {
content: "";
position: absolute;
right: 0;
top: 0;
width: 17px;
height: 17px;
cursor: pointer;
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNyAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00LjE2NjY3IDEuNjY2NjdDMi43ODU5NiAxLjY2NjY3IDEuNjY2NjcgMi43ODU5NiAxLjY2NjY3IDQuMTY2NjdWMTIuNUMxLjY2NjY3IDEzLjg4MDcgMi43ODU5NiAxNSA0LjE2NjY3IDE1SDEyLjVDMTMuODgwNyAxNSAxNSAxMy44ODA3IDE1IDEyLjVWNy41QzE1IDcuMDM5NzUgMTUuMzczMSA2LjY2NjY3IDE1LjgzMzMgNi42NjY2N0MxNi4yOTM2IDYuNjY2NjcgMTYuNjY2NyA3LjAzOTc1IDE2LjY2NjcgNy41VjEyLjVDMTYuNjY2NyAxNC44MDEyIDE0LjgwMTIgMTYuNjY2NyAxMi41IDE2LjY2NjdINC4xNjY2N0MxLjg2NTQ4IDE2LjY2NjcgMCAxNC44MDEyIDAgMTIuNVY0LjE2NjY3QzAgMS44NjU0OCAxLjg2NTQ4IDAgNC4xNjY2NyAwSDkuMTY2NjdDOS42MjY5MiAwIDEwIDAuMzczMSAxMCAwLjgzMzMzM0MxMCAxLjI5MzU3IDkuNjI2OTIgMS42NjY2NyA5LjE2NjY3IDEuNjY2NjdINC4xNjY2N1oiIGZpbGw9IiM3QThCOUEiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMi42Nzk3IDAuNjg0MDY3QzEzLjExNzcgMC4yNDYwNjcgMTMuNzExNyAwIDE0LjMzMTIgMEMxNC45NTA2IDAgMTUuNTQ0NiAwLjI0NjA2NyAxNS45ODI2IDAuNjg0MDY3QzE2LjQyMDYgMS4xMjIwNyAxNi42NjY3IDEuNzE2MTIgMTYuNjY2NyAyLjMzNTU0QzE2LjY2NjcgMi45NTQ5NyAxNi40MjA2IDMuNTQ5MDMgMTUuOTgyNiAzLjk4NzAzTDE1LjMzIDQuNjM5NjRDMTUuMDA0NiA0Ljk2NTA4IDE0LjQ3NjkgNC45NjUwOCAxNC4xNTE1IDQuNjM5NjRMMTIuMDI3IDIuNTE1MkMxMS43MDE2IDIuMTg5NzYgMTEuNzAxNiAxLjY2MjEzIDEyLjAyNyAxLjMzNjY4TDEyLjY3OTcgMC42ODQwNjdaTTEwLjg0ODUgMy42OTM3MUMxMC41MjMxIDMuMzY4MjcgOS45OTU0IDMuMzY4MjcgOS42Njk5OSAzLjY5MzcxTDUuOTUyMjMgNy40MTE1QzUuODQ1NDMgNy41MTgyNSA1Ljc2OTY3IDcuNjUyMDggNS43MzMwNCA3Ljc5ODU4TDUuMDI0ODkgMTAuNjMxM0M0Ljk1Mzg5IDEwLjkxNTIgNS4wMzcwOSAxMS4yMTU2IDUuMjQ0MDggMTEuNDIyNkM1LjQ1MTA2IDExLjYyOTYgNS43NTE0NyAxMS43MTI4IDYuMDM1NDUgMTEuNjQxOEw4Ljg2ODA3IDEwLjkzMzdDOS4wMTQ1NyAxMC44OTcgOS4xNDg0IDEwLjgyMTMgOS4yNTUxNSAxMC43MTQ0TDEyLjk3MyA2Ljk5NjY3QzEzLjI5ODQgNi42NzEyNSAxMy4yOTg0IDYuMTQzNTkgMTIuOTczIDUuODE4MTZMMTAuODQ4NSAzLjY5MzcxWiIgZmlsbD0iIzdBOEI5QSIvPgo8L3N2Zz4K);
}
.steps-page__header-center .steps-page__fnl-name .fnl-name-btn {
min-width: auto;
padding: 1px 7px 0;
width: 30px;
height: 28px;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
background: #F6F5FA !important;
border: 1px solid #e0e0e0;
border-radius: 6px;
cursor: pointer;
margin-left: 10px;
}
.steps-page__header-center .steps-page__fnl-name .fnl-name-btn svg {
display: block;
}
.steps-page__header-center .steps-page__fnl-name .fnl-name-btn.funnel-name-edit svg {
fill: #6E42D3;
}
.steps-page__header-center .steps-page__fnl-name .fnl-name-btn.funnel-name-submit {
display: none;
}
.steps-page__header-center .steps-page__fnl-name .fnl-name-btn.funnel-name-submit svg {
stroke: #6E42D3;
}
.steps-page__header-center .steps-page__fnl-name .fnl-name-btn.funnel-name-cancel {
display: none;
margin-left: 5px;
}
.steps-page__header-center .steps-page__fnl-name .fnl-name-btn.funnel-name-cancel svg {
position: relative;
top: 2px;
}
.steps-page__header-center .steps-page__fnl-name .funnel-name-input {
display: none;
}
.steps-page__header-center .steps-page__fnl-name .funnel-name-submit-btn {
display: none;
}
.steps-page__header-center .steps-page__fnl-name .wpfnl-alert {
display: block;
position: absolute;
font-size: 12px;
white-space: nowrap;
bottom: -16px;
left: 0;
}
.steps-page__header-center #wpfnl-change-funnel-name[data-tour=yes] {
position: relative;
z-index: 4;
}
.steps-page__header-center #wpfnl-change-funnel-name[data-tour=yes] .funnel-name-edit {
color: #FFF;
}
.steps-page__header-center .enable-gbf {
display: flex;
align-items: center;
font-weight: 500;
position: relative;
}
.steps-page__header-center .enable-gbf::before {
content: "";
position: absolute;
left: -20px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 20px;
background-color: #E9E6F4;
}
.steps-page__header-center .enable-gbf .pro-tag-icon {
position: static;
margin-top: 3px;
margin-right: 4px;
}
.steps-page__header-center .enable-gbf .title {
margin-right: 10px;
line-height: 1.1;
}
.steps-page__header-right {
display: flex;
flex-flow: row;
align-items: center;
margin-left: auto;
}
.steps-page__header-right .funnel-stats {
display: flex;
border-right: 1px solid #E5E8F3;
padding-right: 20px;
margin-right: 5px;
font-weight: 500;
align-items: center;
}
.steps-page__header-right .funnel-stats .pro-tag-icon {
position: static;
margin-top: 3px;
margin-right: 4px;
}
.steps-page__header-right .funnel-stats .title {
margin-right: 10px;
line-height: 1.1;
}
.steps-page__header-right .saving-text {
color: #848994;
font-size: 14px;
font-weight: 400;
line-height: 1;
margin-right: 20px;
position: relative;
top: 2px;
}
.steps-page__header-right .draft-publish-toggle {
display: flex;
align-items: center;
border-radius: 10px;
border: 1px solid #E5E8F3;
margin-right: 40px;
position: relative;
}
.steps-page__header-right .draft-publish-toggle:after {
content: "";
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 24px;
background: #DEE2E6;
}
.steps-page__header-right .draft-publish-toggle > span {
color: #2D3149;
font-size: 14px;
font-weight: 500;
line-height: 1;
display: block;
padding: 10px 17px;
border-radius: 10px;
}
.steps-page__header-right .draft-publish-toggle > span.active {
background-color: #6E42D3;
color: #fff;
}
.steps-page__header-right .wpfnl-header-actions {
display: flex;
align-items: center;
gap: 10px;
}
.steps-page__header-right .wpfnl-header-action {
text-align: center;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
box-shadow: none;
height: 38px;
width: 38px;
border: 1px solid #EEF0F3;
border-radius: 8px;
position: relative;
padding: 5px;
}
.steps-page__header-right .wpfnl-header-action svg {
display: block;
}
.steps-page__header-right .wpfnl-header-action .action-tooltip {
position: absolute;
top: calc(100% + 20px);
left: 50%;
transform: translateX(-50%);
border-radius: 8px;
background: #10052E;
box-shadow: 0 2px 15px 0 rgba(22, 28, 32, 0.08);
color: #E8E8E9;
font-size: 13px;
font-weight: 400;
line-height: 1;
display: block;
padding: 10px 14px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
white-space: nowrap;
z-index: 1;
}
.steps-page__header-right .wpfnl-header-action .action-tooltip:before {
content: "";
position: absolute;
top: 0px;
left: 50%;
width: 10px;
height: 10px;
background: #10052E;
transform: rotate(45deg) translateX(-50%);
border-radius: 2px;
}
.steps-page__header-right .wpfnl-header-action:hover .action-tooltip {
opacity: 1;
visibility: visible;
top: calc(100% + 10px);
z-index: 2;
}
.steps-page__header-right .btn-default {
min-width: auto;
position: relative;
padding: 0 21px;
}
.steps-page__header-right .btn-default .wpfnl-loader {
display: inline-block;
position: relative;
top: 2px;
right: 0;
}
.steps-page__header-right .btn-default:disabled,
.steps-page__header-right .btn-default[disabled] {
color: rgba(64, 64, 64, 0.4);
cursor: not-allowed;
background-color: rgba(183, 183, 183, 0.4);
}
.steps-page__header-right .dropdown-option {
position: relative;
text-align: center;
padding: 7px 12px;
display: inline-block;
margin-left: 6px;
cursor: pointer;
}
.steps-page__header-right .dropdown-option svg {
display: block;
}
.steps-page__header-right .dropdown-option ul.wpfnl-dropdown {
right: -14px;
top: 50px;
}
.steps-page__header-right .dropdown-option ul.wpfnl-dropdown .pro-tag {
margin-left: 4px;
}
.steps-page__header-right .dropdown-option ul.wpfnl-dropdown li:first-child {
border-radius: 10px 10px 0 0;
}
.steps-page__header-right .dropdown-option ul.wpfnl-dropdown li:last-child {
border-radius: 0 0 10px 10px;
}
.steps-page__header-right .dropdown-option ul.wpfnl-dropdown a svg {
width: 19px;
height: 19px;
}
.steps-page__header-right .dropdown-option ul.wpfnl-dropdown .pro-tag-icon {
position: static;
margin-left: 6px;
}
.steps-page__header-right .dropdown-option ul.wpfnl-dropdown .pro-tag-icon svg {
width: 18px;
height: 18px;
}
.steps-page__header-right .dropdown-option ul.wpfnl-dropdown .pro-tag-icon svg:hover path {
stroke: inherit;
fill: inherit;
}
.steps-page__header-right .dropdown-option.show ul.wpfnl-dropdown {
top: 38px;
opacity: 1;
visibility: visible;
}
.steps-page__header-right .dropdown-option[data-tour=yes] {
z-index: 4;
background-color: #ffffff;
}
.steps-page__header-right .funnel-stats[data-tour=yes] {
position: relative;
z-index: 4;
}
.steps-page__header-right .funnel-stats[data-tour=yes] .title {
color: #FFF;
}
.steps-page__header-right .preview-funnel[data-tour=yes] {
position: relative;
z-index: 4;
}
.steps-page__header-right .preview-funnel[data-tour=yes] svg circle, .steps-page__header-right .preview-funnel[data-tour=yes] svg path {
stroke: #FFF;
}
@media only screen and (max-width: 1199px) {
.steps-page__header {
padding-right: 10px;
}
.steps-page__header-left .back-link {
width: 44px;
}
.steps-page__header-left .add-step-condtion-area li button {
padding: 0 14px;
}
.steps-page__header-right .funnel-stats {
border-right: none;
padding-right: 0;
}
.steps-page__header-right .btn-default {
padding: 0 20px;
}
.steps-page__header-center .steps-page__fnl-name label {
display: none;
}
.steps-page__header-center .steps-page__fnl-name .wpfnl-alert {
left: 0;
}
}
@media only screen and (max-width: 991px) {
.steps-page__header-center .steps-page__fnl-name input[type=text] {
width: 200px;
}
}
@media only screen and (max-width: 870px) {
.steps-page__header {
padding-right: 15px;
}
.steps-page__header-left .copy-clipboard .link-icon {
display: none;
}
}
.funnel-window .wpfnl-canvas-analytics {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 60px;
background: #FFF;
box-shadow: 0 1px 2px 0 rgba(190, 190, 215, 0.14);
padding: 18px 15px;
border-top: 1px solid rgba(190, 190, 215, 0.14);
transition: padding 0.2s ease;
}
.funnel-window .wpfnl-canvas-analytics.is-collapsed {
padding: 0 5px;
}
.funnel-window .wpfnl-canvas-analytics .analytics-toggle-btn {
position: absolute;
right: 20px;
top: 100%;
transform: translateY(-1px);
width: 28px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 0 0 5px 5px;
background: #fff;
box-shadow: 0 2px 5px 0 rgba(190, 190, 215, 0.31);
z-index: 1;
}
.funnel-window .wpfnl-canvas-analytics .analytics-toggle-btn:hover {
background: #f0eefa;
}
.funnel-window .wpfnl-canvas-analytics .analytics-toggle-btn__chevron {
transition: transform 0.2s ease;
display: block;
transform-origin: center center;
}
.funnel-window .wpfnl-canvas-analytics .analytics-toggle-btn__chevron.is-up {
transform: rotate(180deg);
}
.funnel-window .wpfnl-canvas-analytics .analytics-items {
display: flex;
align-items: center;
justify-content: center;
gap: 60px;
}
.funnel-window .wpfnl-canvas-analytics .analytics-item {
text-align: center;
position: relative;
}
.funnel-window .wpfnl-canvas-analytics .analytics-item:before {
content: "";
position: absolute;
right: -30px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 20px;
background-color: #D9D6E3;
}
.funnel-window .wpfnl-canvas-analytics .analytics-item:last-child:before {
display: none;
}
.funnel-window .wpfnl-canvas-analytics .analytics-label {
color: #848994;
font-size: 12px;
font-weight: 400;
line-height: 1;
}
.funnel-window .wpfnl-canvas-analytics .analytics-value {
color: #2D3149;
font-size: 14px;
font-weight: 500;
line-height: 1;
margin-top: 8px;
}
.steps-page__header-mode {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
z-index: 1;
}
.vf-mode-switcher {
display: flex;
flex-flow: row nowrap;
align-items: center;
background: #ffffff;
border: 1px solid #e0e3ed;
border-radius: 8px;
flex-shrink: 0;
}
.vf-mode-btn {
display: flex;
align-items: center;
justify-content: center;
height: 30px;
padding: 0 18px;
border: none;
border-radius: 0;
background: transparent;
color: #98a2b3;
font-size: 13px;
font-weight: 500;
line-height: 1;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
white-space: nowrap;
position: relative;
}
.vf-mode-btn:first-child {
border-radius: 7px 0 0 7px;
}
.vf-mode-btn:last-child {
border-radius: 0 7px 7px 0;
}
.vf-mode-btn + .vf-mode-btn {
border-left: 1px solid #e0e3ed;
}
.vf-mode-btn:hover:not(.vf-mode-btn--active) {
background: #f6f5fa;
color: #667085;
}
.vf-mode-btn--active {
background: #f1ecfb;
color: #6e42d3;
font-weight: 600;
}
.vf-mode-switcher--rail {
flex-flow: column nowrap;
border-radius: 6px;
border-color: #eaecf0;
}
.vf-mode-switcher--rail .vf-mode-btn {
width: 100%;
height: 30px;
padding: 0 10px;
font-size: 12px;
}
.vf-mode-switcher--rail .vf-mode-btn:first-child {
border-radius: 5px 5px 0 0;
}
.vf-mode-switcher--rail .vf-mode-btn:last-child {
border-radius: 0 0 5px 5px;
}
.vf-mode-switcher--rail .vf-mode-btn + .vf-mode-btn {
border-left: none;
border-top: 1px solid #eaecf0;
}
@media screen and (max-width: 1280px) {
.steps-page__header-mode {
position: static;
transform: none;
margin-left: auto;
}
}
.funnel-window {
display: flex;
flex-direction: column;
height: calc(100vh - 32px);
overflow: hidden;
}
.funnel-window .wpfnl-canvas-zoom-control {
display: flex;
align-items: center;
row-gap: 6px;
z-index: 2;
padding: 0;
position: absolute;
top: 50px;
right: 16px;
flex-flow: column;
}
.funnel-window .wpfnl-canvas-zoom-control .zoom-controls {
display: flex;
align-items: center;
flex-direction: column;
gap: 0px;
background: #ffffff;
padding: 0;
flex-shrink: 0;
border-radius: 6px;
border: 1px solid #eaecf0;
}
.funnel-window .wpfnl-canvas-zoom-control .zoom-level,
.funnel-window .wpfnl-canvas-zoom-control .full-screen,
.funnel-window .wpfnl-canvas-zoom-control .zoom-out,
.funnel-window .wpfnl-canvas-zoom-control .zoom-in {
border: none;
border-bottom: 1px solid #EEF0F3;
width: 34px;
height: 34px;
background: transparent;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
}
.funnel-window .wpfnl-canvas-zoom-control .zoom-level .action-tooltip,
.funnel-window .wpfnl-canvas-zoom-control .full-screen .action-tooltip,
.funnel-window .wpfnl-canvas-zoom-control .zoom-out .action-tooltip,
.funnel-window .wpfnl-canvas-zoom-control .zoom-in .action-tooltip {
position: absolute;
top: 50%;
right: calc(100% + 12px);
transform: translateY(-50%);
border-radius: 8px;
background: #10052E;
box-shadow: 0 2px 15px 0 rgba(22, 28, 32, 0.08);
color: #E8E8E9;
font-size: 12px;
font-weight: 400;
line-height: 1;
padding: 8px 12px;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease, right 0.2s ease;
white-space: nowrap;
z-index: 10;
pointer-events: none;
}
.funnel-window .wpfnl-canvas-zoom-control .zoom-level .action-tooltip:after,
.funnel-window .wpfnl-canvas-zoom-control .full-screen .action-tooltip:after,
.funnel-window .wpfnl-canvas-zoom-control .zoom-out .action-tooltip:after,
.funnel-window .wpfnl-canvas-zoom-control .zoom-in .action-tooltip:after {
content: "";
position: absolute;
top: 50%;
right: -4px;
width: 8px;
height: 8px;
background: #10052E;
transform: translateY(-50%) rotate(45deg);
border-radius: 2px;
}
.funnel-window .wpfnl-canvas-zoom-control .zoom-level:hover .action-tooltip,
.funnel-window .wpfnl-canvas-zoom-control .full-screen:hover .action-tooltip,
.funnel-window .wpfnl-canvas-zoom-control .zoom-out:hover .action-tooltip,
.funnel-window .wpfnl-canvas-zoom-control .zoom-in:hover .action-tooltip {
opacity: 1;
visibility: visible;
right: calc(100% + 8px);
}
.funnel-window .wpfnl-canvas-zoom-control .zoom-in {
border-bottom: none;
}
.funnel-window .wpfnl-canvas-zoom-control .zoom-level {
font-weight: 500;
font-size: 10px;
line-height: 1.2;
color: #7A8B9A;
text-align: center;
}
.funnel-window .wpfnl-canvas-zoom-control[data-tour=yes] {
z-index: 4;
}
.wpfnl-drawflow-window.is-expand-mode {
position: fixed;
inset: 0;
z-index: 99999;
background: #f6f5fa;
}
.wpfnl-drawflow-window.is-expand-mode .drawflow-window-header {
display: none;
}
.wpfnl-drawflow-window.is-expand-mode .funnel-window {
height: 100vh;
}
.wpfnl-drawflow-window.is-expand-mode .wpfnl-drawing-wrapper {
height: 100vh;
}
.wpfnl-drawflow-window.is-expand-mode .wpfnl-drawing-window {
height: 100vh;
}
.wpfnl-drawflow-window.is-expand-mode .wpfnl-vertical-flow-view {
height: 100vh;
}
.wpfnl-drawflow-window.is-expand-mode .expand-mode-exit-btn {
position: absolute;
top: 12px;
left: 16px;
z-index: 10;
display: flex;
align-items: center;
gap: 5px;
background: #ffffff;
border: 1px solid #eaecf0;
border-radius: 6px;
padding: 6px 12px;
cursor: pointer;
font-size: 12px;
font-weight: 500;
color: #7a8b9a;
transition: background 0.15s ease, color 0.15s ease;
}
.wpfnl-drawflow-window.is-expand-mode .expand-mode-exit-btn svg {
width: 10px;
height: 10px;
flex-shrink: 0;
}
.wpfnl-drawflow-window.is-expand-mode .expand-mode-exit-btn svg path {
stroke: #7a8b9a;
}
.wpfnl-drawflow-window.is-expand-mode .expand-mode-exit-btn:hover {
background: #f6f5fa;
color: #344054;
}
.wpfnl-drawflow-window.is-expand-mode .expand-mode-exit-btn:hover svg path {
stroke: #344054;
}
body.wpfnl-builder-expand {
overflow: hidden;
}
body.wpfnl-builder-expand #wpadminbar,
body.wpfnl-builder-expand #adminmenuwrap,
body.wpfnl-builder-expand #adminmenuback {
display: none !important;
}
.wpfnl-box {
background: #FFFFFF;
box-shadow: 0px 2px 4px rgba(223, 223, 249, 0.25);
border-radius: 6px;
padding: 25px 30px;
margin-bottom: 20px;
}
.wpfnl-box:last-child {
margin-bottom: 0;
}
.wpfnl-box.transparent {
background: transparent;
box-shadow: none;
padding: 4px 0px;
}
.wpfnl-field-wrapper {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: flex-start;
margin-bottom: 30px;
}
.wpfnl-field-wrapper:last-child {
margin-bottom: 0;
}
.wpfnl-field-wrapper > label {
width: 240px;
padding-right: 10px;
}
.wpfnl-field-wrapper > label.has-tooltip {
display: flex;
flex-flow: row;
align-items: center;
justify-content: flex-start;
}
.wpfnl-field-wrapper > label.has-tooltip .wpfnl-tooltip {
margin-left: 10px;
}
.wpfnl-field-wrapper .wpfnl-fields {
max-width: 410px;
width: calc(100% - 240px);
}
.wpfnl-field-wrapper .wpfnl-fields select {
margin-right: 0;
}
.steps-settings .steps-settings__tab-nav {
display: flex;
flex-flow: row wrap;
align-items: center;
margin: 25px 0 22px;
}
.steps-settings .steps-settings__tab-nav li a {
color: #7A8B9A;
font-weight: 500;
position: relative;
display: flex;
align-items: center;
padding: 0 18px;
height: 42px;
line-height: 43px;
border: 1px solid transparent;
border-radius: 8px;
cursor: pointer;
transition: none;
}
.steps-settings .steps-settings__tab-nav li a svg {
display: block;
margin-right: 8px;
position: relative;
}
.steps-settings .steps-settings__tab-nav li .pro-tag {
position: absolute;
top: -10px;
right: 15px;
}
.steps-settings .steps-settings__tab-nav li.disabled .pro-tag-icon {
position: static;
margin-left: 6px;
margin-top: -3px;
}
.steps-settings .steps-settings__tab-nav li.active:not(.disabled) a {
color: #363B4E;
border-color: #6E42D3;
background-color: #ffffff;
box-shadow: 0 20px 16px 0 rgba(189, 193, 200, 0.2);
}
.steps-settings .steps-settings__tab-nav li.active:not(.disabled) a .icon.stroke {
stroke: #6E42D3;
}
.steps-settings .steps-settings__tab-nav li.active:not(.disabled) a .icon.order-bump-icon path {
fill: #6E42D3;
}
.steps-settings .steps-settings__tab-nav li.active:not(.disabled) a[href="#general"] path {
stroke: #6E42D3;
}
.steps-settings .steps-settings__tab-nav li.active:not(.disabled).nav-settings rect,
.steps-settings .steps-settings__tab-nav li.active:not(.disabled).nav-settings circle,
.steps-settings .steps-settings__tab-nav li.active:not(.disabled).nav-settings path, .steps-settings .steps-settings__tab-nav li.active:not(.disabled).nav-stats rect,
.steps-settings .steps-settings__tab-nav li.active:not(.disabled).nav-stats circle,
.steps-settings .steps-settings__tab-nav li.active:not(.disabled).nav-stats path {
stroke: #6E42D3;
}
.steps-settings .steps-settings__tab-nav li.declare-winner.active a path {
stroke: #6E42D3;
}
.steps-settings .steps-settings__tab-nav li.reset {
margin-left: auto;
margin-right: 40px;
}
.steps-settings .steps-settings__tab-nav li.reset button {
font-size: 14px;
line-height: 1;
font-weight: 500;
color: #7A8B9A;
border: none;
background: transparent;
display: flex;
align-items: center;
cursor: pointer;
}
.steps-settings .steps-settings__tab-nav li.reset button svg {
display: block;
margin-left: 8px;
position: relative;
top: -1px;
}
.steps-settings .steps-settings__tab-nav li.reset button.reseting svg {
animation: spin 0.9s linear infinite;
}
.steps-settings .steps-settings__tab-nav li.nav-tag {
margin-left: auto;
}
.steps-settings .steps-settings__tab-nav li.nav-tag span {
color: #8292A0;
background: #F7F7FA;
border-radius: 30px;
display: inline-block;
padding: 6px 17px;
}
.steps-settings .step-settings__single-tab-content {
display: none;
}
.steps-settings .step-settings__single-tab-content #wpfnl-choose-offer[data-tour=yes],
.steps-settings .step-settings__single-tab-content #gbf-product-quantity[data-tour=yes],
.steps-settings .step-settings__single-tab-content #discount-options[data-tour=yes] {
position: relative;
z-index: 4;
border: 1px solid #FFF;
}
.steps-settings .step-settings__single-tab-content:first-child {
display: block;
}
.steps-settings .step-settings__single-tab-content .checkout-edit-field-tab__content-wrapper .pro-tag {
padding: 14px 35px;
text-align: center;
margin-top: 30px;
box-shadow: none;
border-radius: 10px;
}
.steps-settings .single__settings-box.transparent .wpfnl-field-wrapper > label {
width: 250px;
}
.steps-settings .single__settings-box .select2-hidden-accessible {
display: none;
}
.steps-settings .single__settings-box .select2-container--default {
width: 100% !important;
border: 1px solid #E5E8F3;
border-radius: 4px;
padding: 8px;
display: block;
}
.steps-settings .single__settings-box .select2-selection__rendered {
font-size: 13px;
display: block;
}
.steps-settings .single__settings-box .select2-selection__rendered .select2-selection__clear {
background: #f8d7da;
display: inline-block;
padding: 0 3px;
line-height: 14px;
color: #ec4050;
margin-right: 2px;
border-radius: 100%;
cursor: pointer;
}
.steps-settings .single__settings-box.select-product .wpfnl-field-wrapper {
align-items: flex-start;
}
.steps-settings .single__settings-box.select-product .wpfnl-field-wrapper label {
position: relative;
top: 21px;
}
.steps-settings .single__settings-box.select-product .wpfnl-field-wrapper .btn-default {
height: 26px;
line-height: 26px;
font-size: 12px;
padding: 0 10px;
min-width: auto;
margin-right: 6px;
border: 1px solid transparent;
}
.steps-settings .single__settings-box.select-product .wpfnl-field-wrapper .btn-default.create-product {
background: #f6f6f8;
color: #363B4E;
}
.steps-settings .single__settings-box.select-product .wpfnl-field-wrapper .btn-default.create-product:hover {
color: #6E42D3;
}
.steps-settings .single__settings-box.select-product .products-wrapper {
border: 1px solid #E5E8F3;
box-sizing: border-box;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
}
.steps-settings .single__settings-box.select-product .single-product {
display: flex;
margin-bottom: 10px;
}
.steps-settings .single__settings-box.select-product .single-product:last-child {
margin-bottom: 0;
}
.steps-settings .single__settings-box.select-product .single-product .select2-container--default {
width: calc(100% - 46px) !important;
}
.steps-settings .single__settings-box.select-product .single-product button {
background: #FAFAFB;
border: 1px solid #E5E8F3;
box-sizing: border-box;
border-radius: 4px;
width: 36px;
height: 36px;
margin-left: 10px;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.steps-settings .single__settings-box.select-product .single-product button:hover {
background-color: #f8d7da;
border-color: #f5c6cb;
}
.steps-settings .single__settings-box.select-product .single-product button:hover svg path {
stroke: #ec4050;
}
.steps-settings .wpfnl-product-options {
padding: 0;
}
.steps-settings .product-options__tab-nav {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: flex-start;
border-bottom: 1px solid #F4F4F9;
padding: 0 40px;
}
.steps-settings .product-options__tab-nav li {
margin-right: 35px;
}
.steps-settings .product-options__tab-nav li:last-child {
margin-right: 0;
}
.steps-settings .product-options__tab-nav li a {
font-weight: 500;
font-size: 13px;
line-height: 15px;
color: #7A8B9A;
padding: 15px 0;
display: block;
position: relative;
}
.steps-settings .product-options__tab-nav li a:after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 100%;
height: 2px;
background: transparent;
}
.steps-settings .product-options__tab-nav li a:hover, .steps-settings .product-options__tab-nav li.active a {
color: #6E42D3;
}
.steps-settings .product-options__tab-nav li a:hover:after, .steps-settings .product-options__tab-nav li.active a:after {
background: #6E42D3;
}
.steps-settings .product-options__single-tab-content {
display: none;
padding: 30px 40px;
}
.steps-settings .product-options__single-tab-content:first-child {
display: block;
}
.steps-settings .product-options__single-tab-content .wpfnl-field-wrapper {
margin-bottom: 25px;
}
.steps-settings .product-options__single-tab-content .wpfnl-field-wrapper:last-child {
margin-bottom: 0;
}
.steps-settings .settings-content__footer {
padding: 23px 0 20px;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: flex-end;
gap: 14px;
}
.steps-settings .settings-content__footer .back2-edit {
background: #fff;
color: #363B4E;
}
.steps-settings .settings-content__footer .back2-edit:hover {
background: rgba(0, 0, 0, 0.04);
}
.steps-settings .settings-content__footer #save-order-bump[hide-btn=yes] {
display: none;
}
.steps-settings .settings-content__footer .btn-default {
display: flex;
flex-flow: row;
align-items: center;
justify-content: center;
line-height: 1;
height: auto;
min-width: auto;
padding: 14px 20px 12px;
letter-spacing: -0.01em;
border-radius: 8px;
filter: drop-shadow(0px 10px 16px rgba(97, 103, 116, 0.15));
}
.steps-settings .settings-content__footer .btn-default .wpfnl-loader {
display: block;
}
.steps-settings .settings-content__footer .btn-default[data-tour=yes] {
position: relative;
z-index: 4;
border: 1px solid #FFF;
}
.steps-settings .settings-content__footer .cancel {
border: 1px solid #EEF0F3;
background: transparent;
color: #363B4E;
}
.steps-settings .settings-content__footer .cancel:hover {
background: #EEF0F3;
}
.steps-settings .settings-content__footer .wpfnl-alert {
display: block;
border-radius: 8px;
padding: 10px 20px;
}
.steps-settings.downsell .steps-settings__tab-nav li a svg,
.steps-settings.upsell .steps-settings__tab-nav li a svg {
position: relative;
top: 1px;
}
.steps-settings.downsell .steps-settings__tab-nav li.conditonal-redirect.active a svg path,
.steps-settings.upsell .steps-settings__tab-nav li.conditonal-redirect.active a svg path {
fill: #6E42D3;
stroke: none;
}
.steps-settings.downsell .wpfnl-field-wrapper .single-product svg,
.steps-settings.upsell .wpfnl-field-wrapper .single-product svg {
display: none;
}
.steps-settings.downsell .single__settings-box,
.steps-settings.upsell .single__settings-box {
border: 1px solid #E5E8F3;
box-shadow: none;
}
.steps-settings.downsell .single__settings-box .select2-container--default,
.steps-settings.upsell .single__settings-box .select2-container--default {
border: 1px solid #E5E8F3;
border-radius: 6px;
padding: 4px 8px 2px;
display: block;
}
.steps-settings.downsell .single__settings-box .select2-container--default .select2-selection--single,
.steps-settings.upsell .single__settings-box .select2-container--default .select2-selection--single {
background-color: #fff;
border: none;
border-radius: 0;
}
.steps-settings.downsell .single__settings-box .select2-container--default .select2-selection--single .select2-selection__arrow,
.steps-settings.upsell .single__settings-box .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 26px;
position: absolute;
top: 4px;
right: 1px;
width: 20px;
}
.steps-settings.downsell .offer-discount-area .wpfnl-box,
.steps-settings.upsell .offer-discount-area .wpfnl-box {
box-shadow: none;
border-radius: 10px;
}
.steps-settings.downsell .offer-discount-area .non-input-field,
.steps-settings.upsell .offer-discount-area .non-input-field {
cursor: not-allowed;
background-color: #F6F5FA;
font-size: 14px;
color: #7A8B9A;
padding: 13px 15px;
height: 44px;
width: 100%;
min-width: 190px;
border-radius: 6px;
display: block;
border: 1px solid #EBEDF0;
}
.steps-settings.downsell .offer-discount-area .hints.mobile,
.steps-settings.upsell .offer-discount-area .hints.mobile {
display: none;
}
.steps-settings.downsell .settings-content__footer .wpfnl-loader,
.steps-settings.upsell .settings-content__footer .wpfnl-loader {
display: block;
}
.steps-settings.downsell .settings-content__footer .wpfnl-alert,
.steps-settings.upsell .settings-content__footer .wpfnl-alert {
display: block;
}
.steps-settings.downsell .wpfnl-fields.price-range,
.steps-settings.upsell .wpfnl-fields.price-range {
display: flex;
flex-flow: row wrap;
}
.steps-settings.downsell .wpfnl-fields.price-range .price-to,
.steps-settings.downsell .wpfnl-fields.price-range .price-from,
.steps-settings.upsell .wpfnl-fields.price-range .price-to,
.steps-settings.upsell .wpfnl-fields.price-range .price-from {
width: 50%;
}
.steps-settings.downsell .wpfnl-fields.price-range .price-to > label,
.steps-settings.downsell .wpfnl-fields.price-range .price-from > label,
.steps-settings.upsell .wpfnl-fields.price-range .price-to > label,
.steps-settings.upsell .wpfnl-fields.price-range .price-from > label {
margin-bottom: 5px;
display: block;
}
.steps-settings.downsell .wpfnl-fields.price-range .price-to .wpfnl-fields,
.steps-settings.downsell .wpfnl-fields.price-range .price-from .wpfnl-fields,
.steps-settings.upsell .wpfnl-fields.price-range .price-to .wpfnl-fields,
.steps-settings.upsell .wpfnl-fields.price-range .price-from .wpfnl-fields {
width: 100%;
}
.steps-settings.downsell .wpfnl-fields.price-range .price-to .wpfnl-fields input[type=number],
.steps-settings.downsell .wpfnl-fields.price-range .price-from .wpfnl-fields input[type=number],
.steps-settings.upsell .wpfnl-fields.price-range .price-to .wpfnl-fields input[type=number],
.steps-settings.upsell .wpfnl-fields.price-range .price-from .wpfnl-fields input[type=number] {
min-width: auto;
}
.steps-settings.downsell .wpfnl-fields.price-range .price-from,
.steps-settings.upsell .wpfnl-fields.price-range .price-from {
padding-right: 10px;
}
.steps-settings.downsell .wpfnl-fields.price-range .price-to,
.steps-settings.upsell .wpfnl-fields.price-range .price-to {
padding-left: 10px;
}
.steps-settings.thank-you .single__settings-box {
border: 1px solid #E5E8F3;
box-shadow: none;
border-radius: 10px;
}
.steps-settings.thank-you .enabled-thankyou-page-redirection {
margin-top: 24px;
background-color: #F6F5FA;
padding: 24px;
border-radius: 10px;
}
.steps-settings.thank-you .redirect-thankyou-page {
margin-top: 24px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
background-color: #F6F5FA;
border-radius: 10px;
}
.steps-settings.thank-you .redirect-thankyou-page .single-page-option {
position: relative;
}
.steps-settings.thank-you .redirect-thankyou-page .single-page-option > input[type=radio] {
display: none;
}
.steps-settings.thank-you .redirect-thankyou-page .single-page-option .option-label {
border-radius: 10px;
border: 1px solid #E4E0F0;
background-color: #FFF;
cursor: pointer;
padding: 24px;
display: block;
height: 100%;
}
.steps-settings.thank-you .redirect-thankyou-page .single-page-option .radio-point {
position: absolute;
top: 16px;
right: 16px;
}
.steps-settings.thank-you .redirect-thankyou-page .single-page-option .radio-point circle:first-child {
transform: scale(0);
transform-origin: center;
transition: all 0.3s ease;
}
.steps-settings.thank-you .redirect-thankyou-page .single-page-option > input[type=radio]:checked + .option-label {
border-color: #6E42D3;
}
.steps-settings.thank-you .redirect-thankyou-page .single-page-option > input[type=radio]:checked + .option-label .radio-point circle:first-child {
transform: scale(1);
}
.steps-settings.thank-you .redirect-thankyou-page .single-page-option h4 {
color: #363B4E;
font-size: 16px;
font-weight: 500;
line-height: 1.37;
margin-bottom: 8px;
max-width: 95%;
}
.steps-settings.thank-you .redirect-thankyou-page .single-page-option p {
color: #525562;
font-size: 14px;
font-weight: 400;
line-height: 1.4;
}
.steps-settings.thank-you .settings-content__footer .wpfnl-loader {
display: none;
}
.steps-settings.thank-you .settings-content__footer .wpfnl-alert {
display: none;
}
@media only screen and (max-width: 1400px) {
.wpfnl-box {
padding: 20px 20px;
}
}
@media only screen and (max-width: 1199px) {
.steps-settings .product .single__settings-box .wpfnl-field-wrapper label {
width: 150px;
}
.steps-settings .product .single__settings-box .wpfnl-field-wrapper .wpfnl-fields {
width: calc(100% - 150px);
}
.steps-settings .steps-settings__tab-nav li.reset {
margin-right: 0;
}
}
.step-settings__single-tab-content .product-mode-selection,
.checkout-product-setting-tab__content-wrapper .product-mode-selection {
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
border: 1px solid #EEF0F3;
background: #fff;
}
.step-settings__single-tab-content .product-mode-selection .pms-header,
.checkout-product-setting-tab__content-wrapper .product-mode-selection .pms-header {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 16px;
}
.step-settings__single-tab-content .product-mode-selection .pms-title,
.checkout-product-setting-tab__content-wrapper .product-mode-selection .pms-title {
font-size: 16px;
font-weight: 600;
color: #111827;
line-height: 1.4;
}
.step-settings__single-tab-content .product-mode-selection .pms-subtitle,
.checkout-product-setting-tab__content-wrapper .product-mode-selection .pms-subtitle {
font-size: 14px;
color: #6b7280;
line-height: 1.4;
}
.step-settings__single-tab-content .product-mode-selection .pms-cards,
.checkout-product-setting-tab__content-wrapper .product-mode-selection .pms-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.step-settings__single-tab-content .product-mode-selection .pms-card,
.checkout-product-setting-tab__content-wrapper .product-mode-selection .pms-card {
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
padding: 16px;
border: 1.5px solid #e5e7eb;
border-radius: 10px;
cursor: pointer;
background: #fff;
transition: border-color 0.15s, background 0.15s;
}
.step-settings__single-tab-content .product-mode-selection .pms-card.pms-card--active,
.checkout-product-setting-tab__content-wrapper .product-mode-selection .pms-card.pms-card--active {
border-color: #7c6ff7;
background: #f0effe;
}
.step-settings__single-tab-content .product-mode-selection .pms-radio-input,
.checkout-product-setting-tab__content-wrapper .product-mode-selection .pms-radio-input {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}
.step-settings__single-tab-content .product-mode-selection .pms-card-top,
.checkout-product-setting-tab__content-wrapper .product-mode-selection .pms-card-top {
display: flex;
align-items: center;
gap: 10px;
}
.step-settings__single-tab-content .product-mode-selection .pms-card-icon,
.checkout-product-setting-tab__content-wrapper .product-mode-selection .pms-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 8px;
flex-shrink: 0;
}
.step-settings__single-tab-content .product-mode-selection .pms-card-icon.pms-card-icon--assign,
.checkout-product-setting-tab__content-wrapper .product-mode-selection .pms-card-icon.pms-card-icon--assign {
background: #ede9ff;
color: #6c5ce7;
}
.step-settings__single-tab-content .product-mode-selection .pms-card-icon.pms-card-icon--smart,
.checkout-product-setting-tab__content-wrapper .product-mode-selection .pms-card-icon.pms-card-icon--smart {
background: #d1fae5;
color: #059669;
}
.step-settings__single-tab-content .product-mode-selection .pms-card-name,
.checkout-product-setting-tab__content-wrapper .product-mode-selection .pms-card-name {
font-size: 14px;
font-weight: 600;
color: #111827;
flex: 1;
}
.step-settings__single-tab-content .product-mode-selection .pms-radio-dot,
.checkout-product-setting-tab__content-wrapper .product-mode-selection .pms-radio-dot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid #d1d5db;
flex-shrink: 0;
transition: border-color 0.15s, background 0.15s;
}
.step-settings__single-tab-content .product-mode-selection .pms-radio-dot.pms-radio-dot--checked,
.checkout-product-setting-tab__content-wrapper .product-mode-selection .pms-radio-dot.pms-radio-dot--checked {
border-color: #7c6ff7;
background: #7c6ff7;
}
.step-settings__single-tab-content .product-mode-selection .pms-radio-inner,
.checkout-product-setting-tab__content-wrapper .product-mode-selection .pms-radio-inner {
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
}
.step-settings__single-tab-content .product-mode-selection .pms-card-desc,
.checkout-product-setting-tab__content-wrapper .product-mode-selection .pms-card-desc {
font-size: 13px;
color: #6b7280;
line-height: 1.5;
margin: 0;
}
.step-settings__single-tab-content,
.checkout-product-setting-tab__content-wrapper {
/* Conditional Funnel dummy/upgrade preview */
}
.step-settings__single-tab-content .conditional-funnel-preview,
.checkout-product-setting-tab__content-wrapper .conditional-funnel-preview {
position: relative;
overflow: hidden;
padding: 0;
background: #f5f6fa;
}
.step-settings__single-tab-content .conditional-funnel-dummy,
.checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy {
pointer-events: none;
user-select: none;
padding: 20px;
}
.step-settings__single-tab-content .conditional-funnel-dummy .dummy-condition-wrapper,
.checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-condition-wrapper {
display: flex;
flex-direction: column;
gap: 0;
}
.step-settings__single-tab-content .conditional-funnel-dummy .dummy-condition-row,
.checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-condition-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
background: #fff;
border-radius: 8px;
padding: 20px 24px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.step-settings__single-tab-content .conditional-funnel-dummy .dummy-condition-left,
.step-settings__single-tab-content .conditional-funnel-dummy .dummy-condition-right,
.checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-condition-left,
.checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-condition-right {
display: flex;
flex-direction: column;
}
.step-settings__single-tab-content .conditional-funnel-dummy .dummy-condition-left .wpfnl-form-group,
.step-settings__single-tab-content .conditional-funnel-dummy .dummy-condition-right .wpfnl-form-group,
.checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-condition-left .wpfnl-form-group,
.checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-condition-right .wpfnl-form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.step-settings__single-tab-content .conditional-funnel-dummy .dummy-condition-left label,
.step-settings__single-tab-content .conditional-funnel-dummy .dummy-condition-right label,
.checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-condition-left label,
.checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-condition-right label {
font-size: 13px;
font-weight: 500;
color: #363b4e;
}
.step-settings__single-tab-content .conditional-funnel-dummy .required-star,
.checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .required-star {
color: #e74c3c;
}
.step-settings__single-tab-content .conditional-funnel-dummy .dummy-select,
.checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-select {
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
border: 1px solid #dde1e7;
border-radius: 6px;
padding: 10px 14px;
font-size: 13px;
color: #7a8b9a;
}
.step-settings__single-tab-content .conditional-funnel-dummy .dummy-select-text,
.checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-select-text {
color: #7a8b9a;
}
.step-settings__single-tab-content .conditional-funnel-dummy .dummy-input,
.checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-input {
width: 100%;
border: 1px solid #dde1e7;
border-radius: 6px;
padding: 10px 14px;
font-size: 13px;
color: #363b4e;
background: #fff;
}
.step-settings__single-tab-content .conditional-funnel-dummy .dummy-tag-field,
.checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-tag-field {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
background: #fff;
border: 1px solid #dde1e7;
border-radius: 6px;
padding: 8px 14px;
min-height: 42px;
}
.step-settings__single-tab-content .conditional-funnel-dummy .dummy-tag,
.checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-tag {
display: inline-flex;
align-items: center;
background: #f0f1f5;
border-radius: 4px;
padding: 2px 8px;
font-size: 12px;
color: #363b4e;
}
.step-settings__single-tab-content .conditional-funnel-dummy .dummy-connector,
.checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-connector {
display: flex;
justify-content: center;
height: 32px;
position: relative;
}
.step-settings__single-tab-content .conditional-funnel-dummy .dummy-connector-line,
.checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-connector-line {
width: 1px;
height: 100%;
background: #c5cad4;
}
.step-settings__single-tab-content .conditional-funnel-dummy .dummy-add-condition,
.checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-add-condition {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 0;
}
.step-settings__single-tab-content .conditional-funnel-dummy .dummy-add-line,
.checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-add-line {
width: 1px;
height: 20px;
background: #c5cad4;
}
.step-settings__single-tab-content .conditional-funnel-dummy .dummy-add-btn,
.checkout-product-setting-tab__content-wrapper .conditional-funnel-dummy .dummy-add-btn {
width: 32px;
height: 32px;
border-radius: 50%;
background: #6a3fc8;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: default;
box-shadow: 0 2px 8px rgba(106, 63, 200, 0.35);
}
.step-settings__single-tab-content .conditional-funnel-upgrade-overlay,
.checkout-product-setting-tab__content-wrapper .conditional-funnel-upgrade-overlay {
position: absolute;
inset: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.78);
border-radius: 10px;
}
.step-settings__single-tab-content .conditional-funnel-upgrade-overlay .upgrade-overlay-content,
.checkout-product-setting-tab__content-wrapper .conditional-funnel-upgrade-overlay .upgrade-overlay-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
gap: 12px;
padding: 32px 24px;
max-width: 420px;
background: rgba(255, 255, 255, 0.9215686275);
height: 100%;
}
.step-settings__single-tab-content .conditional-funnel-upgrade-overlay .upgrade-lock-icon,
.checkout-product-setting-tab__content-wrapper .conditional-funnel-upgrade-overlay .upgrade-lock-icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: #f1f3f5;
margin-bottom: 4px;
}
.step-settings__single-tab-content .conditional-funnel-upgrade-overlay .upgrade-overlay-content p,
.checkout-product-setting-tab__content-wrapper .conditional-funnel-upgrade-overlay .upgrade-overlay-content p {
font-size: 13px;
color: #7a8b9a;
line-height: 1.6;
margin: 0;
}
.step-settings__single-tab-content .product-accordion__wrapper,
.checkout-product-setting-tab__content-wrapper .product-accordion__wrapper {
position: relative;
}
.step-settings__single-tab-content .product-area,
.checkout-product-setting-tab__content-wrapper .product-area {
background: #FFFFFF;
border-radius: 10px;
border: 1px solid #EEF0F3;
}
.step-settings__single-tab-content .product-head,
.checkout-product-setting-tab__content-wrapper .product-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 16px 16px 30px;
border-bottom: 1px solid #EEF0F3;
}
.step-settings__single-tab-content .product-head .title,
.checkout-product-setting-tab__content-wrapper .product-head .title {
font-weight: 600;
font-size: 16px;
line-height: 1;
color: #363B4E;
text-transform: capitalize;
margin-right: 10px;
}
.step-settings__single-tab-content .product-head .product-right,
.checkout-product-setting-tab__content-wrapper .product-head .product-right {
display: flex;
align-items: center;
gap: 15px;
row-gap: 8px;
}
.step-settings__single-tab-content .product-head .create-product-btn,
.checkout-product-setting-tab__content-wrapper .product-head .create-product-btn {
margin-left: auto;
margin-right: 10px;
}
.step-settings__single-tab-content .product-head .create-product-btn .btn-default,
.checkout-product-setting-tab__content-wrapper .product-head .create-product-btn .btn-default {
background: none;
color: #6e42d3;
padding: 0px;
border-bottom: 1px solid #6e42d3;
border-radius: 0px;
min-width: auto;
line-height: 1;
height: auto;
}
.step-settings__single-tab-content .product-head .wpfnl-tooltip,
.checkout-product-setting-tab__content-wrapper .product-head .wpfnl-tooltip {
margin-left: 5px;
margin-right: 10px;
}
.step-settings__single-tab-content .product-head .add-product-btn .btn-default,
.checkout-product-setting-tab__content-wrapper .product-head .add-product-btn .btn-default {
height: 40px;
line-height: 41px;
background: #F7F7FA;
border: 1px solid #E5E8F3;
color: #363B4E;
padding: 0 16px;
}
.step-settings__single-tab-content .product-head .add-product-btn .btn-default:disabled, .step-settings__single-tab-content .product-head .add-product-btn .btn-default[disabled=disabled],
.checkout-product-setting-tab__content-wrapper .product-head .add-product-btn .btn-default:disabled,
.checkout-product-setting-tab__content-wrapper .product-head .add-product-btn .btn-default[disabled=disabled] {
opacity: 0.7;
cursor: not-allowed;
}
.step-settings__single-tab-content .product-head .add-product-btn .btn-default.wpfnl-btn-primary-color,
.checkout-product-setting-tab__content-wrapper .product-head .add-product-btn .btn-default.wpfnl-btn-primary-color {
background: #6E42D3;
border-color: #6E42D3;
color: #FFFFFF;
}
.step-settings__single-tab-content .product-head .add-product-btn .btn-default.wpfnl-btn-primary-color svg path,
.checkout-product-setting-tab__content-wrapper .product-head .add-product-btn .btn-default.wpfnl-btn-primary-color svg path {
stroke: #FFFFFF;
}
.step-settings__single-tab-content .product-head .add-product-btn .btn-default .add-product-icon,
.checkout-product-setting-tab__content-wrapper .product-head .add-product-btn .btn-default .add-product-icon {
position: relative;
display: inline-block;
width: 18px;
height: 18px;
}
.step-settings__single-tab-content .product-head .add-product-btn .btn-default .icon-tabler-arrow-narrow-left,
.checkout-product-setting-tab__content-wrapper .product-head .add-product-btn .btn-default .icon-tabler-arrow-narrow-left {
transform: rotate(-90deg);
position: relative;
top: 5px;
display: none;
animation: scrollDown1 1.5s ease infinite;
stroke: none;
}
.step-settings__single-tab-content .product-head .add-product-btn .btn-default .product-adding .icon-tabler-arrow-narrow-left,
.checkout-product-setting-tab__content-wrapper .product-head .add-product-btn .btn-default .product-adding .icon-tabler-arrow-narrow-left {
display: block;
}
.step-settings__single-tab-content .product-head .add-product-btn .btn-default .product-adding .plus-icon,
.checkout-product-setting-tab__content-wrapper .product-head .add-product-btn .btn-default .product-adding .plus-icon {
display: none;
}
.step-settings__single-tab-content .product-head .add-product-btn .btn-default.product-added,
.checkout-product-setting-tab__content-wrapper .product-head .add-product-btn .btn-default.product-added {
border-color: #6E42D3;
background-color: #6E42D3;
color: #fff;
}
.step-settings__single-tab-content .product-head .add-product-btn .btn-default.product-added .plus-icon path,
.checkout-product-setting-tab__content-wrapper .product-head .add-product-btn .btn-default.product-added .plus-icon path {
stroke: #fff;
}
.step-settings__single-tab-content .product-head .add-product-btn .btn-default.product-added .icon-tabler-arrow-narrow-left,
.checkout-product-setting-tab__content-wrapper .product-head .add-product-btn .btn-default.product-added .icon-tabler-arrow-narrow-left {
stroke: #fff;
}
.step-settings__single-tab-content .product-head .add-product-btn button[data-tour=yes],
.checkout-product-setting-tab__content-wrapper .product-head .add-product-btn button[data-tour=yes] {
position: relative;
z-index: 4;
}
.step-settings__single-tab-content .product-head .create-product-button button[data-tour=yes],
.checkout-product-setting-tab__content-wrapper .product-head .create-product-button button[data-tour=yes] {
position: relative;
z-index: 4;
}
@keyframes scrollDown1 {
0% {
transform: rotate(-90deg) translateX(15px);
opacity: 0;
}
50% {
transform: rotate(-90deg) translateX(0px);
opacity: 1;
}
100% {
transform: rotate(-90deg) translateX(-15px);
opacity: 0;
}
}
.step-settings__single-tab-content .accordion-footer .accordion-col,
.step-settings__single-tab-content .accordion-head .accordion-col,
.checkout-product-setting-tab__content-wrapper .accordion-footer .accordion-col,
.checkout-product-setting-tab__content-wrapper .accordion-head .accordion-col {
color: #7A8B9A;
font-size: 14px;
font-weight: 400;
line-height: 1;
text-transform: capitalize;
letter-spacing: 0.35px;
}
.step-settings__single-tab-content .accordion-head,
.checkout-product-setting-tab__content-wrapper .accordion-head {
background-color: #F6F5FA;
padding: 15px 30px;
}
.step-settings__single-tab-content .accordion-footer,
.step-settings__single-tab-content .product-single__accordion-head,
.step-settings__single-tab-content .accordion-head,
.checkout-product-setting-tab__content-wrapper .accordion-footer,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-head,
.checkout-product-setting-tab__content-wrapper .accordion-head {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-between;
}
.step-settings__single-tab-content .accordion-footer .product-name,
.step-settings__single-tab-content .product-single__accordion-head .product-name,
.step-settings__single-tab-content .accordion-head .product-name,
.checkout-product-setting-tab__content-wrapper .accordion-footer .product-name,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-name,
.checkout-product-setting-tab__content-wrapper .accordion-head .product-name {
width: 340px;
}
.step-settings__single-tab-content .accordion-footer .product-price,
.step-settings__single-tab-content .product-single__accordion-head .product-price,
.step-settings__single-tab-content .accordion-head .product-price,
.checkout-product-setting-tab__content-wrapper .accordion-footer .product-price,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-price,
.checkout-product-setting-tab__content-wrapper .accordion-head .product-price {
width: 77px;
cursor: text;
}
.step-settings__single-tab-content .accordion-footer .product-quantity,
.step-settings__single-tab-content .product-single__accordion-head .product-quantity,
.step-settings__single-tab-content .accordion-head .product-quantity,
.checkout-product-setting-tab__content-wrapper .accordion-footer .product-quantity,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-quantity,
.checkout-product-setting-tab__content-wrapper .accordion-head .product-quantity {
width: 80px;
}
.step-settings__single-tab-content .accordion-footer .total-price,
.step-settings__single-tab-content .product-single__accordion-head .total-price,
.step-settings__single-tab-content .accordion-head .total-price,
.checkout-product-setting-tab__content-wrapper .accordion-footer .total-price,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-head .total-price,
.checkout-product-setting-tab__content-wrapper .accordion-head .total-price {
width: 120px;
text-align: right;
}
.step-settings__single-tab-content .accordion-footer .total-price span,
.step-settings__single-tab-content .product-single__accordion-head .total-price span,
.step-settings__single-tab-content .accordion-head .total-price span,
.checkout-product-setting-tab__content-wrapper .accordion-footer .total-price span,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-head .total-price span,
.checkout-product-setting-tab__content-wrapper .accordion-head .total-price span {
color: #363B4E;
font-size: 14px;
line-height: 14px;
}
.step-settings__single-tab-content .accordion-footer .product-action,
.step-settings__single-tab-content .product-single__accordion-head .product-action,
.step-settings__single-tab-content .accordion-head .product-action,
.checkout-product-setting-tab__content-wrapper .accordion-footer .product-action,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-action,
.checkout-product-setting-tab__content-wrapper .accordion-head .product-action {
width: 60px;
text-align: right;
}
.step-settings__single-tab-content .product__single-accordion,
.checkout-product-setting-tab__content-wrapper .product__single-accordion {
border-top: 1px solid #EEF0F3;
position: relative;
}
.step-settings__single-tab-content .product__single-accordion.ui-sortable-helper,
.checkout-product-setting-tab__content-wrapper .product__single-accordion.ui-sortable-helper {
background: #ececec;
}
.step-settings__single-tab-content .product-single__accordion-head,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-head {
padding: 14px 30px;
position: relative;
}
.step-settings__single-tab-content .product-single__accordion-head .accordion-col,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-head .accordion-col {
font-size: 14px;
line-height: 16px;
color: #7A8B9A;
}
.step-settings__single-tab-content .product-single__accordion-head .accordion-col span,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-head .accordion-col span {
color: #7A8B9A;
}
.step-settings__single-tab-content .product-single__accordion-head .accordion-col select,
.step-settings__single-tab-content .product-single__accordion-head .accordion-col input,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-head .accordion-col select,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-head .accordion-col input {
font-size: 14px;
line-height: 16px;
color: #363B4E;
}
.step-settings__single-tab-content .product-single__accordion-head .accordion-col select::placeholder,
.step-settings__single-tab-content .product-single__accordion-head .accordion-col input::placeholder,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-head .accordion-col select::placeholder,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-head .accordion-col input::placeholder {
color: #363B4E;
}
.step-settings__single-tab-content .product-single__accordion-head .accordion-col select:-ms-input-placeholder,
.step-settings__single-tab-content .product-single__accordion-head .accordion-col input:-ms-input-placeholder,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-head .accordion-col select:-ms-input-placeholder,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-head .accordion-col input:-ms-input-placeholder {
color: #363B4E;
}
.step-settings__single-tab-content .product-single__accordion-head .accordion-col select::-ms-input-placeholder,
.step-settings__single-tab-content .product-single__accordion-head .accordion-col input::-ms-input-placeholder,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-head .accordion-col select::-ms-input-placeholder,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-head .accordion-col input::-ms-input-placeholder {
color: #363B4E;
}
.step-settings__single-tab-content .product-single__accordion-head .product-name ul,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-name ul {
display: flex;
align-items: center;
}
.step-settings__single-tab-content .product-single__accordion-head .product-name ul .product-img a,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-name ul .product-img a {
display: block;
}
.step-settings__single-tab-content .product-single__accordion-head .product-name ul .product-img img,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-name ul .product-img img {
width: 36px;
height: 36px;
object-fit: cover;
border-radius: 50%;
}
.step-settings__single-tab-content .product-single__accordion-head .product-name ul .product-title,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-name ul .product-title {
padding-left: 12px;
width: calc(100% - 50px);
}
.step-settings__single-tab-content .product-single__accordion-head .product-name ul .product-title .title,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-name ul .product-title .title {
font-weight: 500;
font-size: 14px;
line-height: 16px;
color: #363B4E;
}
.step-settings__single-tab-content .product-single__accordion-head .product-name ul .product-title .title:hover,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-name ul .product-title .title:hover {
text-decoration: underline;
}
.step-settings__single-tab-content .product-single__accordion-head .product-name ul .product-title .price,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-name ul .product-title .price {
display: block;
font-size: 12px;
line-height: 14px;
color: #363B4E;
margin-top: 4px;
}
.step-settings__single-tab-content .product-single__accordion-head .product-quantity input[type=number],
.checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-quantity input[type=number] {
min-width: auto;
border-color: #EEF0F3;
border-radius: 8px;
padding: 5px 10px;
height: 30px;
width: 63px;
}
.step-settings__single-tab-content .product-single__accordion-head .product-action,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-action {
display: flex;
}
.step-settings__single-tab-content .product-single__accordion-head .product-action .product-edit,
.step-settings__single-tab-content .product-single__accordion-head .product-action .product-delete,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-action .product-edit,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-action .product-delete {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: flex-end;
background: transparent;
border: none;
cursor: pointer;
}
.step-settings__single-tab-content .product-single__accordion-head .product-action .product-edit svg,
.step-settings__single-tab-content .product-single__accordion-head .product-action .product-delete svg,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-action .product-edit svg,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-action .product-delete svg {
display: block;
}
.step-settings__single-tab-content .accordion-footer,
.checkout-product-setting-tab__content-wrapper .accordion-footer {
border-top: 1px solid #EEF0F3;
padding: 14px 30px;
justify-content: flex-end;
}
.step-settings__single-tab-content .accordion-footer .total-price,
.checkout-product-setting-tab__content-wrapper .accordion-footer .total-price {
display: flex;
justify-content: flex-end;
color: #363B4E;
font-size: 16px;
font-weight: 600;
line-height: 1;
}
.step-settings__single-tab-content .accordion-footer .total-price span,
.checkout-product-setting-tab__content-wrapper .accordion-footer .total-price span {
letter-spacing: 0.857143px;
font-weight: 700;
margin-left: 4px;
font-size: 12px;
}
.step-settings__single-tab-content .product__single-accordion .product-single__accordion-body,
.checkout-product-setting-tab__content-wrapper .product__single-accordion .product-single__accordion-body {
display: none;
}
.step-settings__single-tab-content .product__single-accordion.active,
.checkout-product-setting-tab__content-wrapper .product__single-accordion.active {
background: rgba(110, 66, 211, 0.07);
border-top-color: transparent;
}
.step-settings__single-tab-content .product__single-accordion.active::before,
.checkout-product-setting-tab__content-wrapper .product__single-accordion.active::before {
background-color: #6E42D3;
}
.step-settings__single-tab-content .product-single__accordion-body,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-body {
padding: 0 25px 25px;
}
.step-settings__single-tab-content .product-single__accordion-body-content,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-body-content {
display: flex;
flex-flow: row wrap;
background: #fff;
box-shadow: 0px 2px 4px rgba(223, 223, 249, 0.25);
border-radius: 10px;
}
.step-settings__single-tab-content .product-single__accordion-body-content .subtext-settings,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-body-content .subtext-settings {
width: 50%;
padding: 20px 60px 20px 25px;
border-right: 1px solid #E5E8F3;
}
.step-settings__single-tab-content .product-single__accordion-body-content .subtext-settings .wpfnl-field-wrapper,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-body-content .subtext-settings .wpfnl-field-wrapper {
align-items: flex-start;
}
.step-settings__single-tab-content .product-single__accordion-body-content .subtext-settings .wpfnl-field-wrapper label,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-body-content .subtext-settings .wpfnl-field-wrapper label {
margin-top: 11px;
}
.step-settings__single-tab-content .product-single__accordion-body-content .highlights,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-body-content .highlights {
width: 50%;
padding: 20px 20px 20px 60px;
}
.step-settings__single-tab-content .product-single__accordion-body-content .wpfnl-field-wrapper label,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-body-content .wpfnl-field-wrapper label {
width: 145px;
}
.step-settings__single-tab-content .product-single__accordion-body-content .wpfnl-fields,
.checkout-product-setting-tab__content-wrapper .product-single__accordion-body-content .wpfnl-fields {
max-width: 100%;
width: calc(100% - 145px);
}
.step-settings__single-tab-content .no-product-notice,
.checkout-product-setting-tab__content-wrapper .no-product-notice {
text-align: center;
padding: 15px 10px;
}
.step-settings__single-tab-content .wpfnl-discount-settings,
.checkout-product-setting-tab__content-wrapper .wpfnl-discount-settings {
border: 1px solid #EEF0F3;
box-shadow: none;
border-radius: 10px;
margin-top: 30px;
padding: 30px;
}
.step-settings__single-tab-content .wpfnl-discount-settings .non-input-field,
.checkout-product-setting-tab__content-wrapper .wpfnl-discount-settings .non-input-field {
cursor: not-allowed;
background-color: #F6F5FA;
font-size: 14px;
color: #7A8B9A;
padding: 13px 15px;
height: 44px;
width: 100%;
min-width: 190px;
border-radius: 6px;
display: block;
border: 1px solid #EBEDF0;
}
.step-settings__single-tab-content .wpfnl-discount-settings[data-tour=yes] #discount-options,
.checkout-product-setting-tab__content-wrapper .wpfnl-discount-settings[data-tour=yes] #discount-options {
z-index: 4;
position: relative;
}
.step-settings__single-tab-content .wpfnl-single-settings-control,
.checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-between;
gap: 15px;
border-bottom: 1px solid #EEF0F3;
padding: 24px 0;
}
.step-settings__single-tab-content .wpfnl-single-settings-control:first-child,
.checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control:first-child {
padding-top: 0;
}
.step-settings__single-tab-content .wpfnl-single-settings-control:last-child,
.checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control:last-child {
border-bottom: none;
padding-bottom: 0;
}
.step-settings__single-tab-content .wpfnl-single-settings-control.wpnfl-align-top,
.checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control.wpnfl-align-top {
align-items: flex-start;
}
.step-settings__single-tab-content .wpfnl-single-settings-control .settings-control-title,
.checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control .settings-control-title {
width: calc(55% - 15px);
}
.step-settings__single-tab-content .wpfnl-single-settings-control .settings-control-title h4,
.checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control .settings-control-title h4 {
color: #363B4E;
font-size: 16px;
font-weight: 500;
line-height: 1.3;
}
.step-settings__single-tab-content .wpfnl-single-settings-control .settings-control-title p,
.checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control .settings-control-title p {
color: #525562;
font-size: 14px;
font-weight: 400;
line-height: 1.4;
margin-top: 3px;
}
.step-settings__single-tab-content .wpfnl-single-settings-control .settings-control-field,
.checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control .settings-control-field {
width: 45%;
max-width: 250px;
display: flex;
flex-flow: column;
align-items: flex-end;
gap: 12px;
}
.step-settings__single-tab-content .wpfnl-single-settings-control .settings-control-field > input:not([type=checkbox], [type=radio]), .step-settings__single-tab-content .wpfnl-single-settings-control .settings-control-field > select,
.checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control .settings-control-field > input:not([type=checkbox], [type=radio]),
.checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control .settings-control-field > select {
width: 250px;
height: 44px;
border-radius: 10px;
border-color: #EBEDF0;
margin-left: auto;
color: #525562;
}
.step-settings__single-tab-content .wpfnl-single-settings-control .settings-control-field .settings-control-price,
.checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control .settings-control-field .settings-control-price {
width: 250px;
height: 44px;
border-radius: 10px;
border-color: #EBEDF0;
margin-left: auto;
background: #F6F5FA;
padding: 10px 15px;
display: flex;
flex-flow: column;
justify-content: center;
}
.step-settings__single-tab-content .wpfnl-single-settings-control .settings-control-field .wpfnl-switcher .pro-tag-icon,
.checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control .settings-control-field .wpfnl-switcher .pro-tag-icon {
position: absolute;
top: 0;
left: -30px;
}
.step-settings__single-tab-content .wpfnl-single-settings-control .settings-control-field .wpfnl-checkbox,
.checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control .settings-control-field .wpfnl-checkbox {
position: relative;
}
.step-settings__single-tab-content .wpfnl-single-settings-control .settings-control-field .wpfnl-checkbox .pro-tag-icon,
.checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control .settings-control-field .wpfnl-checkbox .pro-tag-icon {
position: absolute;
top: 0;
left: -30px;
}
.step-settings__single-tab-content .wpfnl-single-settings-control .div-to-append-range-calender,
.checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control .div-to-append-range-calender {
position: absolute;
}
.step-settings__single-tab-content .wpfnl-single-settings-control .div-to-append-range-calender .ui-datepicker,
.checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control .div-to-append-range-calender .ui-datepicker {
border: 1px solid #eef0f3;
border-radius: 10px;
padding: 8px;
}
.step-settings__single-tab-content .wpfnl-single-settings-control .div-to-append-range-calender .ui-datepicker .ui-datepicker-title,
.checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control .div-to-append-range-calender .ui-datepicker .ui-datepicker-title {
display: flex;
}
.step-settings__single-tab-content .wpfnl-single-settings-control .div-to-append-range-calender .ui-datepicker .ui-datepicker-title select,
.checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control .div-to-append-range-calender .ui-datepicker .ui-datepicker-title select {
width: auto;
min-width: max-content;
flex: 1;
height: 28px;
min-height: auto;
margin: 0;
}
.step-settings__single-tab-content .wpfnl-single-settings-control.enable-discount,
.checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control.enable-discount {
border-bottom: 0;
padding-bottom: 0;
}
.step-settings__single-tab-content .wpfnl-single-settings-control.discount .settings-control-field,
.checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control.discount .settings-control-field {
flex-flow: row;
width: 100%;
max-width: 100%;
justify-content: flex-end;
}
.step-settings__single-tab-content .wpfnl-single-settings-control.discount .settings-control-field label,
.checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control.discount .settings-control-field label {
display: block;
margin-bottom: 6px;
}
.step-settings__single-tab-content .wpfnl-single-settings-control.discount .settings-control-field input[type=text],
.checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control.discount .settings-control-field input[type=text] {
height: 44px;
}
.step-settings__single-tab-content .wpfnl-single-settings-control.no-border,
.checkout-product-setting-tab__content-wrapper .wpfnl-single-settings-control.no-border {
padding-bottom: 0;
border-bottom: none;
}
.step-settings__single-tab-content .no-product,
.checkout-product-setting-tab__content-wrapper .no-product {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
padding: 30px 24px;
gap: 14px;
}
.step-settings__single-tab-content .no-product p,
.checkout-product-setting-tab__content-wrapper .no-product p {
color: #363B4E;
font-size: 16px;
font-weight: 500;
line-height: 1;
}
.step-settings__single-tab-content .disable-payment-gateways .settings-control-field,
.checkout-product-setting-tab__content-wrapper .disable-payment-gateways .settings-control-field {
gap: 10px;
align-items: flex-start;
max-width: 140px;
}
.step-settings__single-tab-content .disable-payment-gateways .settings-control-field.is-not-pro,
.checkout-product-setting-tab__content-wrapper .disable-payment-gateways .settings-control-field.is-not-pro {
max-width: max-content;
}
.step-settings__single-tab-content .wpfnl-additional-replacement-options,
.step-settings__single-tab-content .checkout-product-options,
.checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options,
.checkout-product-setting-tab__content-wrapper .checkout-product-options {
margin-top: 30px;
border-radius: 10px;
padding: 26px 30px 30px;
border: 1px solid #EEF0F3;
box-shadow: none;
}
.step-settings__single-tab-content .wpfnl-additional-replacement-options .additional-options,
.step-settings__single-tab-content .checkout-product-options .additional-options,
.checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .additional-options,
.checkout-product-setting-tab__content-wrapper .checkout-product-options .additional-options {
width: 100%;
margin-right: 12px;
}
.step-settings__single-tab-content .wpfnl-additional-replacement-options .wpfnl-checkbox label:before,
.step-settings__single-tab-content .checkout-product-options .wpfnl-checkbox label:before,
.checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .wpfnl-checkbox label:before,
.checkout-product-setting-tab__content-wrapper .checkout-product-options .wpfnl-checkbox label:before {
border-color: #CDD2E6;
}
.step-settings__single-tab-content .wpfnl-additional-replacement-options .wpfnl-checkbox input[type=checkbox]:checked + label::before,
.step-settings__single-tab-content .checkout-product-options .wpfnl-checkbox input[type=checkbox]:checked + label::before,
.checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .wpfnl-checkbox input[type=checkbox]:checked + label::before,
.checkout-product-setting-tab__content-wrapper .checkout-product-options .wpfnl-checkbox input[type=checkbox]:checked + label::before {
border-color: #6E42D3;
}
.step-settings__single-tab-content .wpfnl-additional-replacement-options .wpfnl-checkbox.disabled label:before,
.step-settings__single-tab-content .checkout-product-options .wpfnl-checkbox.disabled label:before,
.checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .wpfnl-checkbox.disabled label:before,
.checkout-product-setting-tab__content-wrapper .checkout-product-options .wpfnl-checkbox.disabled label:before {
border-color: #E5E8F3 !important;
background-color: rgba(0, 0, 0, 0.2196078431) !important;
cursor: not-allowed;
}
.step-settings__single-tab-content .wpfnl-additional-replacement-options .wpfnl-checkbox.disabled label::after,
.step-settings__single-tab-content .checkout-product-options .wpfnl-checkbox.disabled label::after,
.checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .wpfnl-checkbox.disabled label::after,
.checkout-product-setting-tab__content-wrapper .checkout-product-options .wpfnl-checkbox.disabled label::after {
display: none;
}
.step-settings__single-tab-content .wpfnl-additional-replacement-options .option-title,
.step-settings__single-tab-content .checkout-product-options .option-title,
.checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .option-title,
.checkout-product-setting-tab__content-wrapper .checkout-product-options .option-title {
margin-bottom: 18px;
color: #7A8B9A;
font-size: 14px;
font-weight: 600;
line-height: 1;
letter-spacing: 1.68px;
text-transform: uppercase;
}
.step-settings__single-tab-content .wpfnl-additional-replacement-options .options-wrapper,
.step-settings__single-tab-content .checkout-product-options .options-wrapper,
.checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .options-wrapper,
.checkout-product-setting-tab__content-wrapper .checkout-product-options .options-wrapper {
padding: 0 !important;
}
.step-settings__single-tab-content .wpfnl-additional-replacement-options .options-wrapper #checkout-coupon[data-tour=yes],
.step-settings__single-tab-content .wpfnl-additional-replacement-options .options-wrapper #auto-coupon[data-tour=yes],
.step-settings__single-tab-content .wpfnl-additional-replacement-options .options-wrapper #enable-quantity-selection[data-tour=yes],
.step-settings__single-tab-content .checkout-product-options .options-wrapper #checkout-coupon[data-tour=yes],
.step-settings__single-tab-content .checkout-product-options .options-wrapper #auto-coupon[data-tour=yes],
.step-settings__single-tab-content .checkout-product-options .options-wrapper #enable-quantity-selection[data-tour=yes],
.checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .options-wrapper #checkout-coupon[data-tour=yes],
.checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .options-wrapper #auto-coupon[data-tour=yes],
.checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .options-wrapper #enable-quantity-selection[data-tour=yes],
.checkout-product-setting-tab__content-wrapper .checkout-product-options .options-wrapper #checkout-coupon[data-tour=yes],
.checkout-product-setting-tab__content-wrapper .checkout-product-options .options-wrapper #auto-coupon[data-tour=yes],
.checkout-product-setting-tab__content-wrapper .checkout-product-options .options-wrapper #enable-quantity-selection[data-tour=yes] {
position: relative;
z-index: 4;
}
.step-settings__single-tab-content .wpfnl-additional-replacement-options .options-wrapper #disable-payments[data-tour=yes],
.step-settings__single-tab-content .checkout-product-options .options-wrapper #disable-payments[data-tour=yes],
.checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .options-wrapper #disable-payments[data-tour=yes],
.checkout-product-setting-tab__content-wrapper .checkout-product-options .options-wrapper #disable-payments[data-tour=yes] {
position: relative;
z-index: 4;
}
.step-settings__single-tab-content .wpfnl-additional-replacement-options .options-wrapper #disable-payments[data-tour=yes] label,
.step-settings__single-tab-content .checkout-product-options .options-wrapper #disable-payments[data-tour=yes] label,
.checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .options-wrapper #disable-payments[data-tour=yes] label,
.checkout-product-setting-tab__content-wrapper .checkout-product-options .options-wrapper #disable-payments[data-tour=yes] label {
color: #fff;
}
.step-settings__single-tab-content .wpfnl-additional-replacement-options select#choose-coupon,
.step-settings__single-tab-content .checkout-product-options select#choose-coupon,
.checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options select#choose-coupon,
.checkout-product-setting-tab__content-wrapper .checkout-product-options select#choose-coupon {
display: none;
}
.step-settings__single-tab-content .wpfnl-additional-replacement-options .coupon-box,
.step-settings__single-tab-content .checkout-product-options .coupon-box,
.checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .coupon-box,
.checkout-product-setting-tab__content-wrapper .checkout-product-options .coupon-box {
height: 44px;
width: 250px;
border-radius: 6px;
position: relative;
display: flex;
position: relative;
}
.step-settings__single-tab-content .wpfnl-additional-replacement-options .coupon-box .search-icon,
.step-settings__single-tab-content .checkout-product-options .coupon-box .search-icon,
.checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .coupon-box .search-icon,
.checkout-product-setting-tab__content-wrapper .checkout-product-options .coupon-box .search-icon {
position: absolute;
left: 12px;
top: 13px;
z-index: 100;
}
.step-settings__single-tab-content .wpfnl-additional-replacement-options .coupon-box .search-icon svg,
.step-settings__single-tab-content .checkout-product-options .coupon-box .search-icon svg,
.checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .coupon-box .search-icon svg,
.checkout-product-setting-tab__content-wrapper .checkout-product-options .coupon-box .search-icon svg {
display: block;
}
.step-settings__single-tab-content .wpfnl-additional-replacement-options .coupon-box .select2.select2-container.select2-container--default,
.step-settings__single-tab-content .checkout-product-options .coupon-box .select2.select2-container.select2-container--default,
.checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .coupon-box .select2.select2-container.select2-container--default,
.checkout-product-setting-tab__content-wrapper .checkout-product-options .coupon-box .select2.select2-container.select2-container--default {
width: 100% !important;
border: none;
}
.step-settings__single-tab-content .wpfnl-additional-replacement-options .coupon-box .select2-container--default .select2-selection--single,
.step-settings__single-tab-content .checkout-product-options .coupon-box .select2-container--default .select2-selection--single,
.checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .coupon-box .select2-container--default .select2-selection--single,
.checkout-product-setting-tab__content-wrapper .checkout-product-options .coupon-box .select2-container--default .select2-selection--single {
background-color: transparent;
border: none;
height: auto;
}
.step-settings__single-tab-content .wpfnl-additional-replacement-options .coupon-box .select2-selection__rendered,
.step-settings__single-tab-content .checkout-product-options .coupon-box .select2-selection__rendered,
.checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .coupon-box .select2-selection__rendered,
.checkout-product-setting-tab__content-wrapper .checkout-product-options .coupon-box .select2-selection__rendered {
padding: 12px 15px 11px 35px;
width: 100%;
border-radius: 10px;
white-space: pre;
overflow: hidden;
text-overflow: ellipsis;
display: block;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
line-height: normal;
border: 1px solid #e9e7e7;
background: #ffffff;
}
.step-settings__single-tab-content .wpfnl-additional-replacement-options .wpfnl-additional-replacement-options,
.checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .wpfnl-additional-replacement-options {
margin-top: 0;
}
.step-settings__single-tab-content .wpfnl-additional-replacement-options .variation-options .wpfnl-field-wrapper,
.checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .variation-options .wpfnl-field-wrapper {
width: 100%;
}
.step-settings__single-tab-content .wpfnl-additional-replacement-options .variation-options .wpfnl-field-wrapper .wpfnl-fields,
.checkout-product-setting-tab__content-wrapper .wpfnl-additional-replacement-options .variation-options .wpfnl-field-wrapper .wpfnl-fields {
width: 100%;
max-width: 270px;
}
.step-settings__single-tab-content .enabled-replace-settings,
.checkout-product-setting-tab__content-wrapper .enabled-replace-settings {
margin-top: 24px;
display: grid;
grid-template-columns: repeat(3, 1fr);
background-color: #F6F5FA;
gap: 20px;
padding: 20px 24px;
border-radius: 10px;
}
.step-settings__single-tab-content .enabled-replace-settings .single-replace-option,
.checkout-product-setting-tab__content-wrapper .enabled-replace-settings .single-replace-option {
position: relative;
}
.step-settings__single-tab-content .enabled-replace-settings .single-replace-option > input[type=radio],
.checkout-product-setting-tab__content-wrapper .enabled-replace-settings .single-replace-option > input[type=radio] {
display: none;
}
.step-settings__single-tab-content .enabled-replace-settings .single-replace-option .option-label,
.checkout-product-setting-tab__content-wrapper .enabled-replace-settings .single-replace-option .option-label {
border-radius: 10px;
border: 1px solid #E4E0F0;
background-color: #FFF;
cursor: pointer;
padding: 24px;
display: block;
height: 100%;
}
.step-settings__single-tab-content .enabled-replace-settings .single-replace-option .radio-point,
.checkout-product-setting-tab__content-wrapper .enabled-replace-settings .single-replace-option .radio-point {
position: absolute;
top: 16px;
right: 16px;
}
.step-settings__single-tab-content .enabled-replace-settings .single-replace-option .radio-point circle:first-child,
.checkout-product-setting-tab__content-wrapper .enabled-replace-settings .single-replace-option .radio-point circle:first-child {
transform: scale(0);
transform-origin: center;
transition: all 0.3s ease;
}
.step-settings__single-tab-content .enabled-replace-settings .single-replace-option > input[type=radio]:checked + .option-label,
.checkout-product-setting-tab__content-wrapper .enabled-replace-settings .single-replace-option > input[type=radio]:checked + .option-label {
border-color: #6E42D3;
}
.step-settings__single-tab-content .enabled-replace-settings .single-replace-option > input[type=radio]:checked + .option-label .radio-point circle:first-child,
.checkout-product-setting-tab__content-wrapper .enabled-replace-settings .single-replace-option > input[type=radio]:checked + .option-label .radio-point circle:first-child {
transform: scale(1);
}
.step-settings__single-tab-content .enabled-replace-settings .single-replace-option h4,
.checkout-product-setting-tab__content-wrapper .enabled-replace-settings .single-replace-option h4 {
color: #363B4E;
font-size: 16px;
font-weight: 500;
line-height: 1.37;
margin-bottom: 8px;
max-width: 95%;
}
.step-settings__single-tab-content .enabled-replace-settings .single-replace-option p,
.checkout-product-setting-tab__content-wrapper .enabled-replace-settings .single-replace-option p {
color: #525562;
font-size: 14px;
font-weight: 400;
line-height: 1.4;
}
.step-settings__single-tab-content.product .product-head .product-search {
margin-left: 0;
}
@media only screen and (max-width: 1499px) {
.checkout-product-setting-tab__content-wrapper .product-single__accordion-body-content .subtext-settings {
padding: 20px;
}
.checkout-product-setting-tab__content-wrapper .product-single__accordion-body-content .highlights {
padding: 20px;
}
.checkout-product-setting-tab__content-wrapper .product-single__accordion-body-content .wpfnl-field-wrapper label {
width: 111px;
}
.checkout-product-setting-tab__content-wrapper .product-single__accordion-body-content .wpfnl-fields {
width: calc(100% - 111px);
}
}
@media only screen and (max-width: 1299px) {
.step-settings__single-tab-content .wpfnl-additional-replacement-options,
.checkout-product-setting-tab__content-wrapper .checkout-product-options {
padding: 20px;
}
.step-settings__single-tab-content .wpfnl-additional-replacement-options .options-wrapper,
.checkout-product-setting-tab__content-wrapper .checkout-product-options .options-wrapper {
padding: 15px;
}
}
@media only screen and (max-width: 1199px) {
.checkout-product-setting-tab__content-wrapper .product-single__accordion-head .product-name,
.checkout-product-setting-tab__content-wrapper .accordion-footer .product-name,
.checkout-product-setting-tab__content-wrapper .accordion-head .product-name {
width: 220px;
}
.checkout-product-setting-tab__content-wrapper .product-single__accordion-body-content {
display: block;
}
.checkout-product-setting-tab__content-wrapper .product-single__accordion-body-content .subtext-settings {
width: 100%;
}
.checkout-product-setting-tab__content-wrapper .product-single__accordion-body-content .highlights {
padding: 0 20px 20px;
width: 100%;
}
.step-settings__single-tab-content .wpfnl-additional-replacement-options,
.checkout-product-setting-tab__content-wrapper .checkout-product-options {
display: block;
}
.step-settings__single-tab-content .wpfnl-additional-replacement-options .additional-options,
.checkout-product-setting-tab__content-wrapper .checkout-product-options .additional-options {
width: 100%;
margin-right: 0;
margin-bottom: 24px;
}
.step-settings__single-tab-content .wpfnl-additional-replacement-options .variation-options,
.checkout-product-setting-tab__content-wrapper .checkout-product-options .variation-options {
width: 100%;
margin-left: 0;
}
.step-settings__single-tab-content .wpfnl-additional-replacement-options .options-wrapper,
.checkout-product-setting-tab__content-wrapper .checkout-product-options .options-wrapper {
height: auto;
}
}
@media only screen and (max-width: 991px) {
.checkout-product-setting-tab__content-wrapper .product-head .product-search {
width: 190px;
}
}
.order-bump-accordion-wrapper {
border: 1px solid #EEF0F3;
border-radius: 10px;
}
.order-bump-accordion-wrapper .order-bump-header {
display: flex;
align-items: center;
justify-content: space-between;
background: #FFFFFF;
border-radius: 10px 10px 0px 0px;
padding: 15px 24px;
border-bottom: 1px solid #EEF0F3;
}
.order-bump-accordion-wrapper .order-bump-header .title {
font-weight: 500;
font-size: 16px;
line-height: 19px;
color: #363B4E;
text-transform: capitalize;
margin-right: 10px;
}
.order-bump-accordion-wrapper .order-bump-header .btn-default {
position: relative;
}
.order-bump-accordion-wrapper .order-bump-header .btn-default .pro-tag-icon {
position: static;
margin-left: 4px;
transform: translateY(5px);
display: inline-block;
}
.order-bump-accordion-wrapper .order-bump-header .btn-default:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.order-bump-accordion-wrapper .order-bump-header .btn-default:disabled:hover {
background-color: #6E42D3;
}
.order-bump-accordion-wrapper .order-bump-accordion-header {
width: 100%;
background: #FFFFFF;
box-shadow: 0px 1px 2px rgba(190, 190, 215, 0.2);
border-bottom: 1px solid transparent;
border-radius: 10px;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
}
.order-bump-accordion-wrapper .order-bump-accordion-header .title-area {
padding: 14px 0;
cursor: pointer;
width: calc(100% - 67px);
}
.order-bump-accordion-wrapper .order-bump-accordion-header .title-area .title {
font-weight: 500;
color: #363B4E;
}
.order-bump-accordion-wrapper .order-bump-accordion-header .title-area .title small {
color: #7A8B9A;
font-weight: 400;
}
.order-bump-accordion-wrapper .order-bump-accordion-header .title-area .icon {
width: 9px;
height: 9px;
display: inline-block;
border: 2px solid #363B4E;
border-top: none;
border-left: none;
transform: rotate(45deg);
transform-origin: center;
position: relative;
top: -1px;
margin-right: 12px;
transition: transform 0.3s ease;
}
.order-bump-accordion-wrapper .order-bump-accordion-header .action-area {
display: flex;
align-items: center;
}
.order-bump-accordion-wrapper .order-bump-accordion-header .action-area .wpfnl-switcher.has-loader {
display: flex;
align-items: center;
}
.order-bump-accordion-wrapper .order-bump-accordion-header .action-area .wpfnl-switcher.has-loader .wpfnl-loader {
display: inline-block;
margin-left: 0;
margin-right: 5px;
}
.order-bump-accordion-wrapper .order-bump-accordion-header .action-area button {
border: none;
cursor: pointer;
text-align: center;
padding: 0 6px;
display: inline-block;
height: 30px;
line-height: 30px;
background-color: transparent;
margin: 0 0 0 2px;
}
.order-bump-accordion-wrapper .order-bump-accordion-header .action-area button.delete-checkout-field svg {
width: 20px;
height: 20px;
}
.order-bump-accordion-wrapper .order-bump-body {
border-radius: 0 0 10px 10px;
}
.order-bump-accordion-wrapper .order-bump-body .wpfnl-order-bump-modal-header,
.order-bump-accordion-wrapper .order-bump-body .wpfnl-order-bump-modal-footer {
display: none;
}
.order-bump-accordion-wrapper .order-bump-body .order-bump-table-header {
background-color: #F6F5FA;
display: grid;
grid-template-columns: 9fr 1fr 1fr;
padding: 15px 24px;
border-bottom: 1px solid #EEF0F3;
}
.order-bump-accordion-wrapper .order-bump-body .order-bump-table-header .oder-bump-table-header-text {
color: #7A8B9A;
font-family: Roboto;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: capitalize;
}
.order-bump-accordion-wrapper .order-bump-body .order-bump-table-header .oder-bump-table-header-text.order-bump-actions {
margin-left: auto;
padding-right: 5px;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump {
margin-bottom: 0;
box-shadow: none;
border-bottom: 1px solid #EEF0F3;
border-radius: 0;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump:last-child {
border-radius: 0 0 10px 10px;
border-bottom: none;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump .order-bump-accordion-header {
padding: 0 24px;
border-radius: 0;
display: grid;
grid-template-columns: 9fr 1fr 1fr;
border: none;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump .order-bump-accordion-header .action-area {
justify-content: flex-end;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump:last-child .order-bump-accordion-header {
border-radius: 0 0 10px 10px;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal {
position: absolute;
width: 100%;
max-height: 300%;
top: 7px;
background: #fff;
left: 0px;
z-index: 2;
padding: 24px;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .wpfnl-order-bump-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .wpfnl-order-bump-modal-header .drawer-title {
display: flex;
align-items: center;
gap: 10px;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .wpfnl-order-bump-modal-header .drawer-title .wpfnl-back-icon {
border-radius: 10px;
border: 1px solid #EBEDF0;
background: #FFF;
display: flex;
align-items: center;
justify-content: center;
padding: 7px;
cursor: pointer;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .wpfnl-order-bump-modal-header .drawer-title p {
color: #363B4E;
font-family: Roboto;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .wpfnl-order-bump-modal-header .wpfnl-drawer-close {
border-radius: 10px;
border: 1px solid #EBEDF0;
cursor: pointer;
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .wpfnl-order-bump-modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 30px;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .wpfnl-order-bump-modal-footer .wpfnl-button-wrapper {
display: flex;
align-items: center;
gap: 14px;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .wpfnl-order-bump-modal-footer .wpfnl-button-wrapper button.outline {
color: #000;
background: none;
border: 1px solid #E4E6EB;
padding: 11px 20px;
min-width: auto;
line-height: normal;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .wpfnl-order-bump-modal-footer .wpfnl-button-wrapper button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .order-bump-accordion-content.show-content {
padding: 0;
border-radius: 10px;
border: 1px solid #EEF0F3;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .order-bump-accordion-content.show-content .order-bump-settings-area {
width: 60%;
margin-right: 0;
background: #fff;
border-bottom-left-radius: 8px;
border-right: 1px solid #EEF0F3;
align-self: stretch;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .order-bump-accordion-content.show-content .order-bump-settings-area .order-bump-settings.enable-order-bump {
padding: 14px 20px;
border-right: 1px solid #EBEDF0;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .order-bump-accordion-content.show-content .order-bump-settings-area .order-bump-settings.enable-order-bump .wpfnl-field-wrapper {
gap: 10px;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .order-bump-accordion-content.show-content .order-bump-template-preview-area .wpfnl-order-bump__template-style1 {
border: none;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .order-bump-accordion-content.show-content .order-bump-template-preview-area div[class^=wpfnl-order] {
max-width: calc(100% - 40px);
margin: 0 auto;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal[data-tour=yes] {
z-index: inherit;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump #ob-template-select[data-tour=yes] {
z-index: 4;
position: relative;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump #wpfnl-save-ob[data-tour=yes] {
z-index: 4;
position: relative;
opacity: 1;
border: 1px solid #fff;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump #ob-position-select[data-tour=yes] {
z-index: 4;
position: relative;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .discount-settings #wpfnl-product-replace .wpfnl-fields .wpfnl-checkbox label[data-tour=yes] {
z-index: 4;
position: relative;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump #product-title[data-tour=yes] {
z-index: 4;
position: relative;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal[data-tour=no] {
z-index: 1;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump #ob-template-select[data-tour=no] {
z-index: 1;
position: relative;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump #wpfnl-save-ob[data-tour=no] {
z-index: 1;
position: relative;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump #ob-position-select[data-tour=no] {
z-index: 1;
position: relative;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .discount-settings #wpfnl-product-replace .wpfnl-fields .wpfnl-checkbox label[data-tour=no] {
z-index: 1;
position: relative;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump #product-title[data-tour=yes] {
z-index: 4;
position: relative;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .upload-product-image .wpfnl-fields {
width: calc(100% - 180px);
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump .order-bump-settings .wpfnl-field-wrapper .vc-color-wrap {
border-radius: 50%;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.no-more-one {
border-radius: 0 0 10px 10px;
}
.order-bump-accordion-wrapper .order-bump-body .reset-arrow-color,
.order-bump-accordion-wrapper .order-bump-body .reset-obbg {
margin-left: 1px;
padding: 4px 5px;
position: relative;
top: -1px;
border: none;
border-radius: 3px;
background: transparent;
color: #fff;
font-size: 12px;
line-height: 1;
cursor: pointer;
}
.order-bump-accordion-wrapper .order-bump-body .reset-arrow-color svg,
.order-bump-accordion-wrapper .order-bump-body .reset-obbg svg {
width: 16px;
height: 16px;
display: block;
}
.order-bump-accordion-wrapper .order-bump-body .reset-arrow-color {
top: 3px;
}
.wpfnl-back-icon {
border-radius: 10px;
border: 1px solid #EBEDF0;
background: #FFF;
display: flex;
align-items: center;
justify-content: center;
padding: 7px !important;
cursor: pointer;
margin-right: 10px;
}
.wpfnl-checkbox label:before {
border: 1px solid #EBEDF0;
background-color: none;
}
.checkout-order-bump-setting-tab__content-wrapper {
background: #FFFFFF;
border: 1px solid transparent;
box-shadow: 0px 5px 20px rgba(148, 135, 180, 0.15);
border-radius: 10px;
margin-bottom: 15px;
}
.checkout-order-bump-setting-tab__content-wrapper:last-child {
margin-bottom: 0;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-accordion-content {
display: none;
flex-flow: row wrap;
align-items: flex-start;
padding: 24px;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-accordion-content.show-content {
display: flex;
}
.checkout-order-bump-setting-tab__content-wrapper.no-order-bump {
text-align: center;
padding: 12px 24px;
}
.checkout-order-bump-setting-tab__content-wrapper.no-more-one {
padding: 18px 24px;
color: #272727;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-between;
}
.checkout-order-bump-setting-tab__content-wrapper.no-more-one .hints {
color: #272727;
margin: 0;
width: calc(100% - 168px);
font-style: normal;
padding-right: 14px;
}
.checkout-order-bump-setting-tab__content-wrapper.no-more-one .hints .highlight-color {
color: #ee5f5a;
}
.checkout-order-bump-setting-tab__content-wrapper.no-more-one .hints .pro-tag {
color: #ffffff;
}
.checkout-order-bump-setting-tab__content-wrapper.no-more-one .pro-link {
font-weight: 500;
text-decoration: underline;
color: #6e42d3;
width: 168px;
}
.checkout-order-bump-setting-tab__content-wrapper.expanded-orderbump .order-bump-accordion-header {
box-shadow: none;
border-bottom-color: #6E42D3;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.checkout-order-bump-setting-tab__content-wrapper.expanded-orderbump .order-bump-accordion-header .title-area .icon {
top: 1px;
transform: rotate(-135deg);
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings {
border-top: 1px solid #E5E8F3;
}
.checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper {
margin-bottom: 25px;
}
.checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper:last-child {
margin-bottom: 0;
}
.checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper label {
font-size: 14px;
line-height: 16px;
}
.checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper select {
padding: 5px 9px;
}
.checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper.no-title-checkbox .hints.mobile {
display: none;
}
.checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper > label {
width: 250px;
position: relative;
padding-right: 30px;
}
.checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper > label .color-picker {
position: absolute;
right: 10px;
top: -4px;
line-height: 1;
}
.checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper .vc-color-wrap {
width: 25px;
}
.checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper.top-align .color-picker {
top: 6px;
}
.checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper.orderbump-bg .vc-color-wrap {
position: relative;
top: -5px;
}
.checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper > label.has-tooltip .wpfnl-tooltip {
top: -2px;
}
.checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper .wpfnl-fields {
width: 50%;
}
.checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper .wpfnl-fields select {
border: 1px solid #EBEDF0;
padding-top: 3px;
}
.checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper .wpfnl-fields .icp__input {
border-radius: 0 !important;
border: 1px solid #e5e5e5;
background: #000000;
}
.checkout-order-bump-setting-tab__content-wrapper .wpfnl-box {
padding: 30px 0;
margin: 0;
box-shadow: none;
background: transparent;
border-radius: 0;
}
.checkout-order-bump-setting-tab__content-wrapper .hints {
word-break: break-word;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .enable-order-bump {
border-top: none;
padding-bottom: 30px;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .enable-order-bump .wpfnl-fields input {
width: 97%;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area > .title {
position: relative;
font-weight: 500;
font-size: 16px;
line-height: 19px;
color: #363B4E;
background-color: #F7F7FA;
padding: 18px 30px 18px 30px;
border-radius: 10px 10px 0 0;
border-bottom: 1px solid #EEF0F3;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-coupon .coupon,
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-product {
border: 1px solid #E9E9EF;
border-radius: 6px;
height: 36px;
position: relative;
display: flex;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-coupon .coupon .wpfnl-ob-replace-product-search,
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-coupon .coupon .wpfnl-ob-product-search,
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-product .wpfnl-ob-replace-product-search,
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-product .wpfnl-ob-product-search {
display: none;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-coupon .coupon svg,
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-product svg {
position: absolute;
left: 10px;
top: 10px;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-coupon .coupon .select2-container--default .select2-selection--single .select2-selection__arrow,
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-product .select2-container--default .select2-selection--single .select2-selection__arrow {
display: none;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-coupon .coupon .select2.select2-container.select2-container--default,
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-product .select2.select2-container.select2-container--default {
width: 100% !important;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-coupon .coupon .select2-container--default .select2-selection--single,
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-product .select2-container--default .select2-selection--single {
background-color: transparent;
border: none;
height: auto;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-coupon .coupon .select2-selection__rendered,
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-product .select2-selection__rendered {
padding: 8px 12px 7px;
width: 100%;
border-radius: 6px;
white-space: pre;
overflow: hidden;
text-overflow: ellipsis;
display: block;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
line-height: normal;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-coupon .coupon .select2-selection__rendered .select2-selection__placeholder,
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-product .select2-selection__rendered .select2-selection__placeholder {
color: #7A8B9A;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-coupon .coupon.product-selected .select2-selection__rendered,
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-product.product-selected .select2-selection__rendered {
display: flex;
align-items: center;
flex-flow: row-reverse;
justify-content: space-between;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-coupon .coupon .select2-container.select2-container--default.select2-container--open,
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-product .select2-container.select2-container--default.select2-container--open {
border: none;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-coupon .coupon .select2-selection__clear,
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-product .select2-selection__clear {
cursor: pointer;
padding: 0 2px;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-product[data-tour=yes] {
z-index: 4;
position: relative;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .wpfnl-ob-replace-product {
height: auto;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .wpfnl-ob-replace-product .select2-selection__rendered {
display: flex;
flex-flow: row wrap;
gap: 6px;
padding: 5px 7px 5px;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .wpfnl-ob-replace-product .select2-selection__rendered .select2-selection__clear {
display: none;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .wpfnl-ob-replace-product .select2-selection__choice {
border: 1px solid #EBEDF0;
display: inline;
padding: 7px 4px 7px 10px;
border-radius: 6px;
color: #363B4E;
font-size: 13px;
display: inline-flex;
gap: 5px;
flex-flow: row-reverse;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .wpfnl-ob-replace-product .select2-selection__choice .select2-selection__choice__remove {
padding: 0px 6px;
line-height: 1;
display: flex;
align-items: center;
cursor: pointer;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .wpfnl-ob-replace-product input.select2-search__field {
width: auto !important;
padding: 0 8px;
height: auto;
min-width: 80px;
border: none;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .wpfnl-replace-products-radio-btn {
background-color: #F6F5FA;
border-radius: 10px;
padding: 20px;
margin-top: 16px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .wpfnl-replace-products-radio-btn .single-page-option {
position: relative;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .wpfnl-replace-products-radio-btn .single-page-option > input[type=radio] {
display: none;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .wpfnl-replace-products-radio-btn .single-page-option .option-label {
border-radius: 10px;
border: 1px solid #E4E0F0;
background-color: #FFF;
cursor: pointer;
padding: 12px 16px;
display: block;
height: 100%;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .wpfnl-replace-products-radio-btn .single-page-option .radio-point {
position: absolute;
top: 11px;
right: 16px;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .wpfnl-replace-products-radio-btn .single-page-option .radio-point circle:first-child {
transform: scale(0);
transform-origin: center;
transition: all 0.3s ease;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .wpfnl-replace-products-radio-btn .single-page-option > input[type=radio]:checked + .option-label {
border-color: #6E42D3;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .wpfnl-replace-products-radio-btn .single-page-option > input[type=radio]:checked + .option-label .radio-point circle:first-child {
transform: scale(1);
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .wpfnl-replace-products-radio-btn .single-page-option h4 {
color: #363B4E;
font-size: 14px;
font-weight: 500;
line-height: 1.37;
margin-bottom: 0;
max-width: 95%;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .wpfnl-replace-products-radio-btn .single-page-option p {
color: #525562;
font-size: 14px;
font-weight: 400;
line-height: 1.4;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .upload-product-image .icon-wrapper {
display: inline-flex;
flex-flow: column;
justify-content: center;
align-items: center;
gap: 8px;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .upload-product-image .image-label {
box-sizing: border-box;
border-radius: 10px;
height: 160px;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
text-align: center;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
cursor: pointer;
border: 1px dashed #CCC3E1;
background-color: transparent;
background-image: none;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .upload-product-image .image-label .title {
display: block;
line-height: 16px;
transition: all 0.3s ease;
color: #363B4E;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 14px;
letter-spacing: -0.14px;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .upload-product-image .image-label .title .wpfnl-link-text {
color: #6E42D3;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .upload-product-image .image-label .hints {
font-style: normal;
margin: 0;
color: #7A8B9A;
width: 100%;
display: block;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .upload-product-image .image-label.img-uploaded {
border-color: transparent;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .upload-product-image .image-label.img-uploaded .icon-wrapper {
background: rgba(0, 0, 0, 0.4);
width: 100%;
height: 100%;
border-radius: 10px;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
flex-wrap: wrap;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .upload-product-image .image-label.img-uploaded:hover .icon-wrapper {
opacity: 1;
visibility: visible;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .upload-product-image .image-label.img-uploaded:hover .title {
color: #ffffff;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .upload-product-image .image-label.img-uploaded:hover path {
fill: #ffffff;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .upload-product-image .image-label.img-uploaded .hints {
color: #fff;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .select-coupon .coupon .wpfnl-ob-coupon-search {
display: none;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area .non-input-field {
cursor: not-allowed;
background-color: #F6F5FA;
font-size: 14px;
color: #7A8B9A;
padding: 13px 15px;
height: 44px;
width: 100%;
min-width: 190px;
border-radius: 6px;
display: block;
border: 1px solid #EBEDF0;
}
.checkout-order-bump-setting-tab__content-wrapper .wpfnl-pre-purchase-upsell {
width: 100%;
justify-content: space-between;
}
.checkout-order-bump-setting-tab__content-wrapper .wpfnl-pre-purchase-upsell .wpfnl-tooltip {
position: relative;
top: 3px;
}
.checkout-order-bump-setting-tab__content-wrapper .wpfnl-pre-purchase-upsell .wpfnl-fields {
width: auto;
}
.checkout-order-bump-setting-tab__content-wrapper .wpfnl-pre-purchase-upsell .pro-tag-icon {
transform: translateY(7px);
display: inline-block;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-template-preview-area {
width: 40%;
position: sticky;
top: 0px;
padding-bottom: 24px;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-template-preview-area .preview-header {
padding: 14px 20px;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-template-preview-area .preview-header h4 {
text-transform: capitalize;
font-family: Roboto;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-template-preview-area .preview-header h4 span {
color: #363B4E;
font-weight: 600;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-tabs {
display: flex;
gap: 30px;
border-bottom: 1px solid #EEF0F3;
background-color: #F9FAFB;
border-radius: 8px 8px 0 0;
width: 100%;
padding: 0 30px;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-tabs .ob-tab-button {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 0;
background: transparent;
border: none;
cursor: pointer;
font-size: 14px;
font-weight: 500;
color: #6B7280;
transition: all 0.2s ease;
white-space: nowrap;
position: relative;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-tabs .ob-tab-button::before {
content: "";
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 2px;
background-color: transparent;
transition: background-color 0.2s ease;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-tabs .ob-tab-button svg {
width: 18px;
height: 18px;
color: #9CA3AF;
transition: color 0.2s ease;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-tabs .ob-tab-button:first-child {
border-radius: 8px 0 0 0;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-tabs .ob-tab-button:hover {
color: #374151;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-tabs .ob-tab-button:hover svg {
color: #6E42D2;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-tabs .ob-tab-button.active {
color: #6E42D2;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-tabs .ob-tab-button.active::before {
background-color: #6E42D2;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-tabs .ob-tab-button.active svg {
color: #6E42D2;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category {
padding: 26px 30px;
animation: fadeIn 0.3s ease-in;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category:last-child {
border-bottom: none;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .category-title {
color: #363B4E;
font-size: 16px;
font-weight: 500;
line-height: 1;
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 26px;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-wrapper {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
gap: 16px;
row-gap: 24px;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-wrapper .single-ob-settings {
width: calc(50% - 8px);
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-wrapper .single-ob-settings.full-width {
width: 100%;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-wrapper .ob-product-description .mce-tinymce div.mce-toolbar-grp {
padding-left: 35px;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-wrapper .ob-product-description .quicktags-toolbar {
padding: 5px 2px 5px 45px;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-wrapper .ob-product-description .ob-settings-input {
position: relative;
margin-top: 20px;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-wrapper .ob-product-description .color-picker {
position: absolute;
top: 46px;
left: 13px;
z-index: 9;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-wrapper .ob-product-description .vc-color-wrap {
margin: 0;
width: 20px;
height: 20px;
border-radius: 50%;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-wrapper .ob-product-replace .wpfnl-tooltip {
position: relative;
top: 3px;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-wrapper .ob-product-replace .wpfnl-tooltip p {
color: #ffffff;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-title {
color: #363B4E;
font-size: 14px;
font-weight: 500;
line-height: 1;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 3px;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-title .wpfnl-tooltip {
padding-bottom: 0;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-title .wpfnl-tooltip svg {
display: block;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-input select,
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-input input[type=password],
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-input input[type=url],
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-input input[type=number],
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-settings-input input[type=text] {
border-radius: 8px;
height: 40px;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-color-picker-wrapper {
display: flex;
align-items: center;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-color-picker-wrapper .vc-color-wrap.transparent {
height: 40px;
width: 40px;
border-radius: 6px;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .ob-color-picker-wrapper input[type=text] {
max-width: max-content;
min-width: auto;
border-radius: 6px;
background: #F6F5FA;
width: 120px;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .fields-with-color {
border: 1px solid #E5E8F3;
border-radius: 8px;
display: flex;
align-items: center;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .fields-with-color input[type=text] {
width: calc(100% - 40px);
border: none;
height: 38px !important;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .fields-with-color .color-picker {
width: 40px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-left: 1px solid #E5E8F3;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category .fields-with-color .color-picker .vc-color-wrap {
width: 20px;
height: 20px;
border-radius: 50%;
margin: 0;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details {
border-bottom: 1px solid #EEF0F3;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .offer-selection-mode {
display: flex;
gap: 15px;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .offer-selection-mode .ob-settings-title {
margin-bottom: 0;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .offer-selection-mode .radio-option {
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
position: relative;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .offer-selection-mode .radio-option input[type=radio] {
cursor: pointer;
margin: 0;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .offer-selection-mode .radio-option input[type=radio]:checked {
border-color: #6E42D3;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .offer-selection-mode .radio-option input[type=radio]:checked::before {
background-color: #6E42D3;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .offer-selection-mode .radio-option span {
font-size: 14px;
color: #363B4E;
font-weight: 400;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .offer-selection-mode .radio-option .recommended-badge {
background: #ded3f8;
color: #6e42d3;
font-size: 12px;
font-weight: 400;
padding: 2px 8px;
border-radius: 4px;
margin-left: 4px;
letter-spacing: 0.5px;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .auto-match-settings {
width: 100%;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
gap: 16px;
row-gap: 20px;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-filter-options {
display: flex;
align-items: flex-start;
gap: 30px;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-filter-options .checkbox-group {
display: flex;
flex-direction: column;
gap: 7px;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-filter-options .checkbox-option {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-filter-options .checkbox-option input[type=checkbox] {
width: 18px;
height: 18px;
cursor: pointer;
margin: 0;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-filter-options .checkbox-option input[type=checkbox]:checked::before {
margin: -0.12rem 0 0 -0.2rem;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-filter-options .checkbox-option span {
font-size: 14px;
color: #363B4E;
user-select: none;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-fallback-behavior .wpfnl-ob-fallback-product-search.select2-hidden-accessible {
border: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
height: 1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
white-space: nowrap !important;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-fallback-behavior input[type=radio] {
cursor: pointer;
margin: 0;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-fallback-behavior input[type=radio]:checked {
border-color: #6E42D3;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-fallback-behavior input[type=radio]:checked::before {
background-color: #6E42D3;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-fallback-behavior .fallback-options {
display: flex;
flex-direction: column;
gap: 16px;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-fallback-behavior .fallback-options .radio-option {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
border: 1px solid #E5E8F3;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
background: #FFFFFF;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-fallback-behavior .fallback-options .radio-option:hover {
border-color: #6E42D3;
background: #F9F7FD;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-fallback-behavior .fallback-options .radio-option .radio-content {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-fallback-behavior .fallback-options .radio-option .radio-content .radio-title {
font-size: 14px;
color: #363B4E;
font-weight: 500;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-fallback-behavior .fallback-options .radio-option .radio-content .radio-subtitle {
font-size: 13px;
color: #7A8B9A;
font-weight: 400;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-fallback-behavior .default-product-select {
margin-top: 6px;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-fallback-behavior .default-product-select > label {
font-weight: 400;
font-size: 13px;
margin-bottom: 4px;
display: block;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-fallback-behavior .select2-container.select2-container--default {
background: #ffffff;
border-radius: 10px;
border: 1px solid #E5E8F3;
z-index: 99;
display: block;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-fallback-behavior .select2-container.select2-container--default .select2-selection--single {
height: 34px;
border-radius: 8px;
border: none;
box-sizing: border-box;
cursor: pointer;
display: block;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-fallback-behavior .select2-container.select2-container--default .select2-selection__rendered {
padding-top: 7px;
line-height: 1;
display: block;
padding-left: 8px;
padding-right: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.product-details .ob-fallback-behavior .select2-container.select2-container--default .select2-selection__arrow {
top: 3px;
right: 3px;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.color-customization .ob-settings-wrapper .single-ob-settings {
width: calc(33.3333333333% - 11px);
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.conditional-rules .ob-settings-wrapper .enable-conditional .wpfnl-tooltip {
position: relative;
top: 3px;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.conditional-rules .ob-settings-wrapper .enable-conditional .wpfnl-tooltip p {
color: #ffffff;
}
.checkout-order-bump-setting-tab__content-wrapper {
/* Upgrade overlay - full screen backdrop */
}
.checkout-order-bump-setting-tab__content-wrapper .ob-upgrade-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.checkout-order-bump-setting-tab__content-wrapper {
/* Upgrade modal card */
}
.checkout-order-bump-setting-tab__content-wrapper .ob-upgrade-modal {
position: relative;
background: #fff;
border-radius: 16px;
padding: 36px 32px 32px;
max-width: 420px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.checkout-order-bump-setting-tab__content-wrapper .ob-upgrade-modal-close {
position: absolute;
top: 14px;
right: 16px;
background: none;
border: none;
font-size: 18px;
color: #667085;
cursor: pointer;
line-height: 1;
padding: 4px;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-upgrade-modal-close:hover {
color: #344054;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-upgrade-modal-icon {
margin-bottom: 16px;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-upgrade-modal-title {
font-size: 20px;
font-weight: 700;
color: #101828;
margin: 0 0 12px;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-upgrade-modal-desc {
font-size: 14px;
color: #667085;
margin: 0 0 24px;
line-height: 1.6;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-upgrade-modal-btn {
display: inline-block;
background: linear-gradient(135deg, #7A3CF6 0%, #5B21E6 100%);
color: #fff !important;
padding: 12px 28px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: opacity 0.2s ease;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-upgrade-modal-btn:hover {
opacity: 0.9;
text-decoration: none;
color: #fff !important;
}
.checkout-order-bump-setting-tab__content-wrapper {
/* Locked auto-match label styling */
}
.checkout-order-bump-setting-tab__content-wrapper .ob-automatch-locked {
opacity: 0.6;
}
.checkout-order-bump-setting-tab__content-wrapper {
/*-----Rule Groups Styles-----*/
}
.checkout-order-bump-setting-tab__content-wrapper .rule-groups-container {
width: 100%;
}
.checkout-order-bump-setting-tab__content-wrapper .rule-groups-container .rule-group {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 8px;
}
.checkout-order-bump-setting-tab__content-wrapper .rule-groups-container .rule-group-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 12px 5px;
border-bottom: 1px solid #E5E7EB;
}
.checkout-order-bump-setting-tab__content-wrapper .rule-groups-container .rule-group-body {
padding: 20px;
}
.checkout-order-bump-setting-tab__content-wrapper .rule-groups-container .btn-create-rule-group {
margin-top: 20px;
}
.checkout-order-bump-setting-tab__content-wrapper .rule-group-title {
font-size: 14px;
font-weight: 600;
color: #374151;
margin: 0;
}
.checkout-order-bump-setting-tab__content-wrapper .btn-delete-rule-group {
background: transparent;
border: none;
color: #EF4444;
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.2s;
}
.checkout-order-bump-setting-tab__content-wrapper .btn-delete-rule-group:hover {
opacity: 0.7;
}
.checkout-order-bump-setting-tab__content-wrapper .rule-condition {
margin-bottom: 12px;
}
.checkout-order-bump-setting-tab__content-wrapper .condition-row {
display: flex;
gap: 12px;
align-items: flex-end;
background: #F9FAFB;
padding: 16px;
border-radius: 6px;
border: 1px solid #E5E7EB;
}
.checkout-order-bump-setting-tab__content-wrapper .condition-row input[type=text],
.checkout-order-bump-setting-tab__content-wrapper .condition-row input[type=number],
.checkout-order-bump-setting-tab__content-wrapper .condition-row select {
padding: 3px 12px !important;
min-width: auto;
}
.checkout-order-bump-setting-tab__content-wrapper .condition-row .arco-select-view {
font-size: 14px;
background: #fff;
border: 1px solid #D1D5DB;
border-radius: 4px;
}
.checkout-order-bump-setting-tab__content-wrapper .condition-row .arco-select-view .arco-select-view-inner {
padding: 0;
}
.checkout-order-bump-setting-tab__content-wrapper .condition-row .arco-select-view .arco-select-view-inner .arco-select-view-input {
height: auto;
min-height: auto;
width: 100% !important;
padding: 0;
height: 32px;
}
.checkout-order-bump-setting-tab__content-wrapper .condition-row .arco-select-view .arco-select-view-inner .arco-select-view-tag {
font-size: 11px;
line-height: 1.2;
padding: 4px;
}
.checkout-order-bump-setting-tab__content-wrapper .condition-field,
.checkout-order-bump-setting-tab__content-wrapper .condition-operator,
.checkout-order-bump-setting-tab__content-wrapper .condition-value {
display: flex;
flex-direction: column;
gap: 6px;
}
.checkout-order-bump-setting-tab__content-wrapper .condition-field {
flex: 0 0 240px;
}
.checkout-order-bump-setting-tab__content-wrapper .condition-operator {
flex: 0 0 180px;
}
.checkout-order-bump-setting-tab__content-wrapper .condition-value {
flex: 0 0 130px;
}
.checkout-order-bump-setting-tab__content-wrapper .condition-field label,
.checkout-order-bump-setting-tab__content-wrapper .condition-value label {
font-size: 12px;
font-weight: 500;
color: #6B7280;
}
.checkout-order-bump-setting-tab__content-wrapper .condition-field select,
.checkout-order-bump-setting-tab__content-wrapper .condition-operator select,
.checkout-order-bump-setting-tab__content-wrapper .condition-value input,
.checkout-order-bump-setting-tab__content-wrapper .condition-value select {
width: 100%;
padding: 8px 12px;
border: 1px solid #D1D5DB;
border-radius: 4px;
font-size: 14px;
color: #374151;
background: #fff;
}
.checkout-order-bump-setting-tab__content-wrapper .condition-field select:focus,
.checkout-order-bump-setting-tab__content-wrapper .condition-operator select:focus,
.checkout-order-bump-setting-tab__content-wrapper .condition-value input:focus,
.checkout-order-bump-setting-tab__content-wrapper .condition-value select:focus {
outline: none;
border-color: #6E42D2;
box-shadow: 0 0 0 3px rgba(110, 66, 210, 0.1);
}
.checkout-order-bump-setting-tab__content-wrapper .condition-actions {
display: flex;
gap: 8px;
align-items: center;
position: relative;
top: -6px;
}
.checkout-order-bump-setting-tab__content-wrapper .btn-drag-handle,
.checkout-order-bump-setting-tab__content-wrapper .btn-delete-condition {
background: transparent;
border: none;
color: #6B7280;
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.2s;
}
.checkout-order-bump-setting-tab__content-wrapper .btn-drag-handle:hover {
color: #374151;
}
.checkout-order-bump-setting-tab__content-wrapper .btn-delete-condition {
color: #EF4444;
}
.checkout-order-bump-setting-tab__content-wrapper .btn-delete-condition:hover {
opacity: 0.7;
}
.checkout-order-bump-setting-tab__content-wrapper .logic-separator {
display: flex;
align-items: center;
justify-content: center;
margin: 12px 0;
position: relative;
}
.checkout-order-bump-setting-tab__content-wrapper .logic-separator.and-label:before {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -13px;
height: calc(100% + 26px);
width: 2px;
background: #e5e7eb;
z-index: 0;
}
.checkout-order-bump-setting-tab__content-wrapper .logic-label {
background: #F3F4F6;
color: #6B7280;
font-size: 12px;
font-weight: 600;
padding: 4px 12px;
border-radius: 12px;
border: 1px solid #E5E7EB;
position: relative;
z-index: 1;
}
.checkout-order-bump-setting-tab__content-wrapper .or-separator {
margin: 24px 0;
}
.checkout-order-bump-setting-tab__content-wrapper .or-separator::before,
.checkout-order-bump-setting-tab__content-wrapper .or-separator::after {
content: "";
position: absolute;
top: 50%;
width: 45%;
height: 1px;
background: #E5E7EB;
}
.checkout-order-bump-setting-tab__content-wrapper .or-separator::before {
left: 0;
}
.checkout-order-bump-setting-tab__content-wrapper .or-separator::after {
right: 0;
}
.checkout-order-bump-setting-tab__content-wrapper .or-label {
background: #FEF3C7;
color: #D97706;
border-color: #FCD34D;
}
.checkout-order-bump-setting-tab__content-wrapper .btn-add-condition {
background: transparent;
border: 1px dashed #D1D5DB;
color: #6E42D2;
font-size: 14px;
font-weight: 500;
padding: 10px 16px;
border-radius: 6px;
cursor: pointer;
width: 100%;
margin-top: 12px;
transition: all 0.2s;
}
.checkout-order-bump-setting-tab__content-wrapper .btn-add-condition:hover {
background: rgba(110, 66, 210, 0.05);
border-color: #6E42D2;
}
.checkout-order-bump-setting-tab__content-wrapper .btn-create-rule-group {
background: transparent;
border: 2px dashed #D1D5DB;
color: #2563EB;
font-size: 14px;
font-weight: 600;
padding: 12px 20px;
border-radius: 8px;
cursor: pointer;
width: 100%;
transition: all 0.2s;
}
.checkout-order-bump-setting-tab__content-wrapper .btn-create-rule-group:hover {
background: rgba(37, 99, 235, 0.05);
border-color: #2563EB;
}
.checkout-order-bump-setting-tab__content-wrapper .wpfnl-pro-orderbump-banner {
display: flex;
align-items: center;
justify-content: space-between;
background: #faf9fb;
border: 1px solid #d3c2fa;
border-radius: 10px;
padding: 24px;
box-sizing: border-box;
}
.checkout-order-bump-setting-tab__content-wrapper .wpfnl-pro-orderbump-banner .wpfnl-pro-orderbump-banner-content {
display: flex;
flex-direction: column;
gap: 6px;
}
.checkout-order-bump-setting-tab__content-wrapper .wpfnl-pro-orderbump-banner .wpfnl-pro-orderbump-banner-title {
font-size: 16px;
font-weight: 600;
color: #23272F;
}
.checkout-order-bump-setting-tab__content-wrapper .wpfnl-pro-orderbump-banner .wpfnl-pro-orderbump-banner-desc {
font-size: 14px;
color: #4B5563;
line-height: 1.5;
max-width: 520px;
}
.checkout-order-bump-setting-tab__content-wrapper .wpfnl-pro-orderbump-banner .wpfnl-pro-orderbump-banner-cta {
background: #6E42D3;
color: #fff;
font-weight: 600;
font-size: 13px;
border: none;
border-radius: 6px;
padding: 12px 18px;
text-decoration: none;
transition: background 0.2s;
box-shadow: 0 1px 2px rgba(244, 99, 27, 0.08);
cursor: pointer;
white-space: nowrap;
margin-left: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.checkout-order-bump-setting-tab__content-wrapper .wpfnl-pro-orderbump-banner .wpfnl-pro-orderbump-banner-cta:hover {
background: #6434d4;
color: #fff;
text-decoration: none;
}
@media (max-width: 700px) {
.checkout-order-bump-setting-tab__content-wrapper .wpfnl-pro-orderbump-banner {
flex-direction: column;
align-items: flex-start;
padding: 18px 12px;
}
.checkout-order-bump-setting-tab__content-wrapper .wpfnl-pro-orderbump-banner .wpfnl-pro-orderbump-banner-cta {
margin-left: 0;
margin-top: 16px;
width: 100%;
justify-content: center;
}
}
.arco-trigger-popup {
width: 230px !important;
}
.arco-select-dropdown .arco-select-option {
padding: 8px 6px !important;
margin: 0;
}
.arco-select-dropdown .arco-select-option-checkbox .arco-checkbox-label {
line-height: 1.3;
}
@media only screen and (max-width: 1599px) {
.checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper .wpfnl-fields {
width: 50%;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-fields-with-color,
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-product-description,
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .upload-product-image .wpfnl-fields {
width: calc(100% - 250px);
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-category.color-customization .ob-settings-wrapper .single-ob-settings {
width: calc(50% - 8px);
}
}
@media only screen and (max-width: 1350px) and (min-width: 1200px) {
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .order-bump-accordion-content.show-content .order-bump-settings-area {
width: 55%;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-template-preview-area {
width: 45%;
}
.checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper::not('.no-title-checkbox') {
margin-bottom: 18px;
display: block;
}
.checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper.no-title-checkbox > label {
width: auto;
margin-bottom: 0;
padding-right: 10px;
padding-top: 4px;
display: inline-block;
}
.checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper.no-title-checkbox .wpfnl-fields {
width: 50%;
max-width: 410px;
}
.checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper.no-title-checkbox .hints.desktop {
display: none;
}
.checkout-order-bump-setting-tab__content-wrapper .wpfnl-field-wrapper.no-title-checkbox .hints.mobile {
display: block;
}
}
@media only screen and (max-width: 1199px) {
.checkout-order-bump-setting-tab__content-wrapper .order-bump-settings-area {
width: 100%;
margin-right: 0;
margin-bottom: 30px;
}
.checkout-order-bump-setting-tab__content-wrapper .order-bump-template-preview-area {
width: 100%;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .order-bump-accordion-content.show-content .order-bump-settings-area {
width: 100%;
border-radius: 10px 10px 0 0;
margin-bottom: 0;
border-bottom: 1px solid #EEF0F3;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .order-bump-accordion-content.show-content .order-bump-settings-area .order-bump-settings.enable-order-bump {
border-radius: 0px;
}
.order-bump-accordion-wrapper .order-bump-body .checkout-order-bump-setting-tab__content-wrapper.single-order-bump.expanded-orderbump .wpfnl-order-bump-create-modal .order-bump-accordion-content.show-content .order-bump-template-preview-area .preview-header {
border-radius: 0px;
}
.checkout-order-bump-setting-tab__content-wrapper .ob-settings-tabs {
gap: 20px;
padding: 0 21px;
}
}
.edit-field-tabNcontent {
border: 1px solid #E5E8F3;
border-radius: 10px;
}
.checkout-edit-field-tab__content-wrapper .edit-field-settings__tab-nav {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: flex-start;
padding: 23px 20px 23px 0;
border-bottom: 1px solid #E5E8F3;
}
.checkout-edit-field-tab__content-wrapper .edit-field-settings__tab-nav li {
padding: 0 15px;
}
.checkout-edit-field-tab__content-wrapper .edit-field-settings__tab-nav li:last-child {
margin-right: 0;
}
.checkout-edit-field-tab__content-wrapper .edit-field-settings__tab-nav li a {
font-size: 14px;
color: #7A8B9A;
height: 44px;
line-height: 44px;
display: block;
position: relative;
}
.checkout-edit-field-tab__content-wrapper .edit-field-settings__tab-nav li a:hover {
color: #363B4E;
}
.checkout-edit-field-tab__content-wrapper .edit-field-settings__tab-nav li a:before {
content: "";
position: absolute;
top: -24px;
left: 0;
width: 100%;
height: 3px;
background: #6E42D3;
border-radius: 0 0 50px 50px;
visibility: hidden;
opacity: 0;
}
.checkout-edit-field-tab__content-wrapper .edit-field-settings__tab-nav li.active a {
color: #6E42D3;
}
.checkout-edit-field-tab__content-wrapper .edit-field-settings__tab-nav li.active a:before {
visibility: visible;
opacity: 1;
}
.checkout-edit-field-tab__content-wrapper .edit-field-settings__tab-nav li.add-new-checkout-field-btn {
margin-left: 20px;
padding: 0;
}
.checkout-edit-field-tab__content-wrapper .edit-field-settings__tab-nav li.add-new-checkout-field-btn .btn-default {
line-height: 39px;
}
.checkout-edit-field-tab__content-wrapper .edit-field-settings__tab-nav li.add-new-checkout-field-btn svg {
margin-right: 5px;
}
.checkout-edit-field-tab__content-wrapper .edit-field-settings__tab-nav li.restore-btn {
margin-left: auto;
padding: 0;
}
.checkout-edit-field-tab__content-wrapper .edit-field-settings__tab-nav li.restore-btn .btn-default {
line-height: 39px;
background: #F7F7FA;
color: #363B4E;
border: 1px solid #E5E8F3;
}
.checkout-edit-field-tab__content-wrapper .edit-field-settings__tab-nav li.restore-btn .btn-default.error {
color: #d63342;
background-color: #f8d7da;
border-color: #f5c6cb;
}
.checkout-edit-field-tab__content-wrapper .edit-field-settings__tab-nav li.restore-btn .btn-default.success {
color: #269c41;
background-color: #d4edda;
border-color: #c3e6cb;
}
.checkout-edit-field-tab__content-wrapper .edit-field-settings__tab-nav li.restore-btn .wpfnl-loader {
display: inline-block;
}
.checkout-edit-field-tab__content-wrapper .settings-content__footer .btn-default:disabled {
cursor: not-allowed;
opacity: 0.7;
display: flex;
align-items: center;
gap: 10px;
}
.checkout-edit-field-tab__content-wrapper .wpfnl-additional-replacement-options {
position: relative;
}
.edit-field-settings__single-tab-content {
display: none;
position: relative;
}
.edit-field-settings__single-tab-content .checkout-edit-field {
background: #FFFFFF;
box-shadow: 0px 2px 4px rgba(223, 223, 249, 0.25);
border-radius: 0px 10px 10px 10px;
}
.edit-field-settings__single-tab-content:first-child {
display: block;
}
.edit-field-settings__single-tab-content .single-tab-header {
display: flex;
flex-flow: row;
align-items: center;
padding: 25px;
justify-content: space-between;
}
.edit-field-settings__single-tab-content .single-tab-header .tab-title {
font-weight: 500;
font-size: 16px;
line-height: 19px;
color: #363B4E;
text-transform: capitalize;
}
.edit-field-settings__single-tab-content .single-tab-header .restore-btn {
margin-left: auto;
margin-right: 10px;
}
.edit-field-settings__single-tab-content .single-tab-header .restore-btn .wpfnl-alert {
margin-right: 6px;
}
.edit-field-settings__single-tab-content .single-tab-header .restore-btn .wpfnl-loader {
position: relative;
top: 2px;
}
.edit-field-settings__single-tab-content .single-tab-header .btn-default {
height: 40px;
line-height: 41px;
min-width: 100px;
}
.edit-field-settings__single-tab-content .checkout-field-header {
position: sticky;
top: 0;
z-index: 2;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-between;
padding: 20px 20px 20px 77px;
border-bottom: 1px solid #E5E8F3;
background: #F7F7FA;
}
.edit-field-settings__single-tab-content .checkout-field-header .field-item {
font-size: 12px;
line-height: 14px;
letter-spacing: 0.857143px;
text-transform: uppercase;
color: #7A8B9A;
}
.edit-field-settings__single-tab-content .checkout-field-header.bottom {
border-bottom: 0;
border-radius: 0 0 10px 10px;
}
.edit-field-settings__single-tab-content .checkout-field-header .field-hamburger,
.edit-field-settings__single-tab-content .checkout__single-field .field-hamburger {
width: 25px;
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
}
.edit-field-settings__single-tab-content .checkout-field-header .field-name,
.edit-field-settings__single-tab-content .checkout__single-field .field-name {
width: 160px;
padding-right: 10px;
}
.edit-field-settings__single-tab-content .checkout-field-header .field-type,
.edit-field-settings__single-tab-content .checkout__single-field .field-type {
width: 75px;
padding-right: 10px;
}
.edit-field-settings__single-tab-content .checkout-field-header .field-label,
.edit-field-settings__single-tab-content .checkout__single-field .field-label {
width: 150px;
padding-right: 10px;
}
.edit-field-settings__single-tab-content .checkout-field-header .field-placeholder,
.edit-field-settings__single-tab-content .checkout__single-field .field-placeholder {
width: 250px;
padding-right: 10px;
}
.edit-field-settings__single-tab-content .checkout-field-header .field-validation,
.edit-field-settings__single-tab-content .checkout__single-field .field-validation {
width: 94px;
padding-right: 10px;
}
.edit-field-settings__single-tab-content .checkout-field-header .field-required,
.edit-field-settings__single-tab-content .checkout__single-field .field-required {
width: 74px;
padding-right: 10px;
}
.edit-field-settings__single-tab-content .checkout-field-header .field-status,
.edit-field-settings__single-tab-content .checkout__single-field .field-status {
width: 65px;
padding-right: 10px;
}
.edit-field-settings__single-tab-content .checkout-field-header .field-action,
.edit-field-settings__single-tab-content .checkout__single-field .field-action {
width: 57px;
}
.edit-field-settings__single-tab-content .checkout__single-field {
position: relative;
padding: 25px 20px 25px 65px;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #E5E8F3;
cursor: all-scroll;
min-height: 81px;
}
.edit-field-settings__single-tab-content .checkout__single-field:last-child {
border-bottom: 0;
}
.edit-field-settings__single-tab-content .checkout__single-field.ui-sortable-helper {
background-color: #F7F7FA;
}
.edit-field-settings__single-tab-content .checkout__single-field .field-item {
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: #363B4E;
word-break: break-all;
}
.edit-field-settings__single-tab-content .checkout__single-field .hamburger-bar {
display: block;
width: 18px;
height: 14px;
border-top: 2px solid #CDD2E6;
border-bottom: 2px solid #CDD2E6;
position: relative;
cursor: all-scroll;
}
.edit-field-settings__single-tab-content .checkout__single-field .hamburger-bar:before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 2px;
margin-top: -1px;
background: #CDD2E6;
}
.edit-field-settings__single-tab-content .checkout__single-field .field-required,
.edit-field-settings__single-tab-content .checkout__single-field .field-status {
display: flex;
align-items: center;
}
.edit-field-settings__single-tab-content .checkout__single-field .field-action {
display: flex;
}
.edit-field-settings__single-tab-content .checkout__single-field .field-action button {
border: none;
cursor: pointer;
text-align: center;
padding: 0 6px;
display: inline-block;
height: 30px;
line-height: 30px;
background-color: transparent;
margin: 0;
}
.edit-field-settings__single-tab-content .checkout__single-field .field-action button svg {
width: 20px;
height: 20px;
display: block;
}
.checkout-edit-field__settings-option {
background: #FFFFFF;
border-radius: 10px;
margin-top: 30px;
border: 1px solid #E5E8F3;
}
.checkout-edit-field__settings-option .settings-title {
font-weight: 700;
font-size: 14px;
line-height: 16px;
padding: 20px 25px;
color: #363B4E;
border-bottom: 1px solid #E5E8F3;
background: #F7F7FA;
border-radius: 10px 10px 0 0;
}
.checkout-edit-field__settings-option .options-wrapper {
padding: 30px 25px;
display: flex;
flex-flow: row wrap;
align-items: flex-start;
position: relative;
}
.checkout-edit-field__settings-option .options-wrapper::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
height: calc(100% - 60px);
width: 1px;
background: #E5E8F3;
transform: translateY(-50%);
}
.checkout-edit-field__settings-option .options-wrapper .single-option {
margin-bottom: 20px;
width: 50%;
}
.checkout-edit-field__settings-option .options-wrapper .single-option:last-child {
margin-bottom: 0;
}
.checkout-edit-field__settings-option .options-wrapper .single-option:nth-child(odd) {
padding-right: 50px;
}
.checkout-edit-field__settings-option .options-wrapper .single-option:nth-child(even) {
padding-left: 60px;
}
.checkout-edit-field__settings-option .options-wrapper .single-option .wpfnl-checkbox label {
font-size: 14px;
line-height: 16px;
color: #363B4E;
padding-left: 33px;
}
.dradndrop-icon .st0 {
fill: none;
stroke: #7A8B9A;
stroke-width: 5;
stroke-miterlimit: 10;
}
.dradndrop-icon .st1 {
fill: none;
stroke: #7A8B9A;
stroke-width: 5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 18.3682, 8.1636;
}
.dradndrop-icon .st2 {
fill: #7A8B9A;
}
.dradndrop-icon .st3 {
fill: none;
stroke: #7A8B9A;
stroke-width: 5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
stroke-dasharray: 18, 8;
}
.checkout-edit-field-tab__content-wrapper {
padding-bottom: 30px;
}
.checkout-edit-field-tab__content-wrapper .edit-field-drawer form {
height: 100%;
}
.checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body {
padding: 20px 20px 24px;
max-height: calc(100% - 80px);
overflow: auto;
}
.checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body::-webkit-scrollbar {
width: 5px;
}
.checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body::-webkit-scrollbar-track {
background: #f2f5f8;
}
.checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body::-webkit-scrollbar-thumb {
background-color: #6E42D3;
border-radius: 20px;
}
.checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body .wpfnl-field-wrapper {
display: block;
margin-bottom: 22px;
}
.checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body .wpfnl-field-wrapper:last-child {
margin-bottom: 0;
}
.checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body .wpfnl-field-wrapper.field-type-options .options-label {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body .wpfnl-field-wrapper.field-type-options .options-label > label {
font-weight: 500;
font-size: 14px;
line-height: 16px;
color: #000000;
display: inline-block;
}
.checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body .wpfnl-field-wrapper.field-type-options .options-label .btn-default {
min-width: auto;
border-radius: 4px;
padding: 0;
width: 40px;
background: #f0e9ff;
border: 1px solid #d5c6f9;
}
.checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body .wpfnl-field-wrapper.field-type-options .wpfnl-fields {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body .wpfnl-field-wrapper.field-type-options .wpfnl-fields input[type=text] {
width: calc(50% - 30px);
min-width: auto;
}
.checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body .wpfnl-field-wrapper.field-type-options .wpfnl-fields.fullwidth input[type=text] {
width: calc(50% - 4px);
}
.checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body .wpfnl-field-wrapper.field-type-options .wpfnl-fields .btn-default {
min-width: auto;
border-radius: 4px;
padding: 0;
width: 40px;
background: #f0e9ff;
border: 1px solid #d5c6f9;
}
.checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body .wpfnl-field-wrapper.field-type-options .wpfnl-fields .btn-default.remove {
background: #f8d7da;
border-color: #f5c2c7;
}
.checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body .wpfnl-field-wrapper .wpfnl-fields {
max-width: inherit;
width: 100%;
}
.checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body .wpfnl-field-wrapper > label {
font-weight: 500;
font-size: 14px;
line-height: 16px;
color: #000000;
display: block;
padding: 0;
margin: 0 0 10px 0;
width: 100%;
}
.checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body .wpfnl-field-wrapper input[type=text],
.checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body .wpfnl-field-wrapper select {
border-radius: 4px;
height: 40px;
}
.checkout-edit-field-tab__content-wrapper .edit-field-drawer .drawer-body .wpfnl-field-wrapper .wpfnl-checkbox label {
font-size: 14px;
line-height: 16px;
color: #000000;
padding-left: 33px;
}
.checkout-edit-field-tab__content-wrapper .edit-field-drawer .field-footer {
padding: 24px;
text-align: center;
}
.checkout-edit-field-tab__content-wrapper .edit-field-drawer .field-footer .btn-default {
height: 40px;
line-height: 41px;
width: 100%;
}
.checkout-edit-field-tab__content-wrapper .edit-field-drawer .field-footer .btn-default .wpfnl-loader {
position: relative;
top: 2px;
display: inline-block;
}
.checkout-edit-field-tab__content-wrapper .edit-field-drawer .field-footer .btn-default:disabled {
cursor: not-allowed;
opacity: 0.7;
display: flex;
align-items: center;
gap: 10px;
justify-content: center;
}
.checkout-edit-field-tab__content-wrapper .edit-field-drawer .field-footer .wpfnl-alert {
text-align: center;
margin-top: 10px;
display: block;
}
@media only screen and (max-width: 1499px) {
.edit-field-settings__single-tab-content .single-tab-header {
padding: 25px 20px;
}
.edit-field-settings__single-tab-content .checkout-field-header {
padding: 25px 20px 25px 57px;
}
.edit-field-settings__single-tab-content .checkout__single-field {
padding: 25px 20px 25px 57px;
}
.edit-field-settings__single-tab-content .checkout-field-header .field-hamburger,
.edit-field-settings__single-tab-content .checkout__single-field .field-hamburger {
left: 20px;
}
.edit-field-settings__single-tab-content .checkout-field-header .field-placeholder,
.edit-field-settings__single-tab-content .checkout__single-field .field-placeholder {
width: 160px;
}
.edit-field-settings__single-tab-content .checkout-field-header .field-name,
.edit-field-settings__single-tab-content .checkout__single-field .field-name {
width: 140px;
}
.edit-field-settings__single-tab-content .checkout-field-header .field-label,
.edit-field-settings__single-tab-content .checkout__single-field .field-label {
width: 100px;
}
}
@media only screen and (max-width: 1299px) {
.edit-field-settings__single-tab-content .checkout-edit-field {
background: transparent;
box-shadow: none;
border-radius: 0;
}
.edit-field-settings__single-tab-content .single-tab-header {
box-shadow: 0px 2px 4px rgba(238, 238, 245, 0.47);
background-color: #ffffff;
padding: 15px 20px;
border-radius: 0px 10px 10px 10px;
}
.edit-field-settings__single-tab-content .checkout-field-header {
display: none;
}
.edit-field-settings__single-tab-content .checkout__single-field {
display: block;
padding: 15px 20px 15px 57px;
background-color: #ffffff;
margin-top: 20px;
border-radius: 10px;
border-bottom: none;
}
.edit-field-settings__single-tab-content .checkout__single-field .field-item:not(.field-hamburger) {
padding-right: 0;
width: 100%;
display: flex;
flex-flow: row wrap;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid #f0f1f3;
}
.edit-field-settings__single-tab-content .checkout__single-field .field-item:not(.field-hamburger):last-child {
margin-bottom: 0;
border-bottom: none;
padding-bottom: 0;
}
.edit-field-settings__single-tab-content .checkout__single-field .field-item:not(.field-hamburger):before {
content: attr(data-label);
vertical-align: middle;
width: 95px;
font-weight: 500;
}
.checkout-edit-field__settings-option .options-wrapper::before {
height: calc(100% - 50px);
}
.checkout-edit-field__settings-option .settings-title {
padding: 20px 20px;
}
.checkout-edit-field__settings-option .options-wrapper {
padding: 25px 20px;
}
.checkout-edit-field__settings-option .options-wrapper .single-option:nth-child(odd) {
padding-right: 20px;
}
.checkout-edit-field__settings-option .options-wrapper .single-option:nth-child(even) {
padding-left: 20px;
}
}
@media only screen and (max-width: 1199px) {
.checkout-edit-field__settings-option .options-wrapper {
padding: 25px 20px;
}
.checkout-edit-field__settings-option .options-wrapper::before {
display: none;
}
.checkout-edit-field__settings-option .options-wrapper .single-option {
width: 100%;
}
.checkout-edit-field__settings-option .options-wrapper .single-option:nth-child(odd) {
padding-right: 0;
}
.checkout-edit-field__settings-option .options-wrapper .single-option:nth-child(even) {
padding-left: 0;
}
}
.wpfunnels-addons {
background: #f6f5fa;
}
.wpfunnels-addons .addons-content {
background: #F6F5FA;
padding: 40px 30px;
}
.wpfunnels-addons .section-title {
margin: 0 0 20px;
color: #363B4E;
font-size: 24px;
font-weight: 600;
line-height: 1.3;
}
.wpfunnels-addons .wpfunnels-addons-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.wpfunnels-addons .wpfunnels-addons-card {
background: #ffffff;
border-radius: 10px;
padding: 20px;
position: relative;
transition: all 0.3s ease;
box-shadow: 0 1px 1px rgba(182, 185, 191, 0.3);
}
.wpfunnels-addons .wpfunnels-addons-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
.wpfunnels-addons .wpfunnels-addons-card .badge {
position: absolute;
top: 12px;
right: 12px;
padding: 4px 9px;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
line-height: 1;
background-color: #ececec;
}
.wpfunnels-addons .wpfunnels-addons-card .badge.hot {
background-color: #7742E6;
color: #ffffff;
}
.wpfunnels-addons .wpfunnels-addons-card .addons-icon {
margin-bottom: 16px;
width: 46px;
height: 46px;
border-radius: 50%;
border: 1px solid #ECF1F6;
display: flex;
align-items: center;
justify-content: center;
}
.wpfunnels-addons .wpfunnels-addons-card .addons-icon svg {
display: block;
}
.wpfunnels-addons .wpfunnels-addons-card .addons-title {
margin: 0 0 7px;
color: #2D3149;
font-size: 16px;
font-weight: 500;
line-height: 1.3;
}
.wpfunnels-addons .wpfunnels-addons-card .addons-description {
margin: 0 0 20px;
color: #6E7A85;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
}
.wpfunnels-addons .wpfunnels-addons-card .addons-description .guide-link {
color: #6E42D3;
font-weight: 500;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
transition: all 0.2s ease;
}
.wpfunnels-addons .wpfunnels-addons-card .addons-description .guide-link svg {
display: inline-block;
vertical-align: middle;
}
.wpfunnels-addons .wpfunnels-addons-card .addons-description .guide-link:hover {
text-decoration: underline;
}
.wpfunnels-addons .wpfunnels-addons-card .addons-cta-button {
padding: 6px 14px;
font-size: 14px;
font-weight: 500;
line-height: 1.4;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 8px;
border: 1px solid #6E42D3;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
text-decoration: none;
background: #ffffff;
color: #6E42D3;
}
.wpfunnels-addons .wpfunnels-addons-card .addons-cta-button:hover {
background: #6E42D3;
color: #ffffff;
}
.wpfunnels-addons .wpfunnels-addons-card .addons-cta-button.activate-button {
background: #ffffff;
color: #6E42D3;
border: 1px solid #6E42D3;
}
.wpfunnels-addons .wpfunnels-addons-card .addons-cta-button.activate-button:hover {
background: #6E42D3;
color: #ffffff;
}
.wpfunnels-addons .wpfunnels-addons-card .addons-cta-button.active-status {
color: #10B981;
border: 1px solid #10B981;
cursor: default;
}
.wpfunnels-addons .wpfunnels-addons-card .addons-cta-button.active-status:hover {
background: transparent;
color: #10B981;
}
@media (max-width: 1280px) {
.wpfunnels-addons .wpfunnels-addons-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.wpfunnels-addons .wpfunnels-addons-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 1399px) {
.wpfunnels-addons .addons-content {
padding: 20px 0px;
}
.wpfunnels-addons .wpfunnels-addons-grid {
gap: 20px;
}
}
.wpfunnels-setup {
background: #F6F5FA;
margin: 0;
padding: 0;
}
.wpfunnels-setup * {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wpfunnels-setup #wpfunnels_setup_wizard {
height: 100vh;
width: 100%;
margin: 0 auto;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard {
display: flex;
align-items: stretch;
position: relative;
height: 100vh;
width: 100%;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar {
width: 260px;
background: #FFF;
height: 100vh;
position: sticky;
top: 0;
box-shadow: 1px 0px 2px rgba(190, 190, 215, 0.14);
display: flex;
flex-direction: column;
flex-shrink: 0;
padding: 30px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar .wpfnl-mm-setup-wizard-branding {
border-bottom: 1px solid #EAE9EE;
padding: 0 0 30px 0;
display: flex;
align-items: center;
gap: 12px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar .wpfnl-mm-setup-wizard-branding .wpfnl-mm-setup-wizard-logo {
width: 36px;
height: 27px;
flex-shrink: 0;
object-fit: contain;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar .wpfnl-mm-setup-wizard-branding .wpfnl-mm-setup-wizard-brand-name {
font-size: 22px;
color: #111827;
line-height: 16px;
font-weight: 700;
letter-spacing: 0px;
font-family: "Inter", sans-serif;
margin: 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar .wpfnl-mm-setup-wizard-steps {
padding: 30px 0;
flex: 1;
display: flex;
flex-direction: column;
gap: 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar .wpfnl-mm-setup-wizard-steps .wpfnl-mm-setup-wizard-step {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 11px;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 100px;
margin-bottom: 12px;
border: 1px solid transparent;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar .wpfnl-mm-setup-wizard-steps .wpfnl-mm-setup-wizard-step:last-child {
margin-bottom: 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar .wpfnl-mm-setup-wizard-steps .wpfnl-mm-setup-wizard-step.active {
background: #F6F5FA;
border: 1px solid #6E42D3;
padding: 8px 10px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar .wpfnl-mm-setup-wizard-steps .wpfnl-mm-setup-wizard-step.active .wpfnl-mm-setup-wizard-step-number {
background: #6E42D3;
color: #FFF;
font-weight: 700;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar .wpfnl-mm-setup-wizard-steps .wpfnl-mm-setup-wizard-step.active .wpfnl-mm-setup-wizard-step-label {
color: #6E42D3;
font-weight: 500;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar .wpfnl-mm-setup-wizard-steps .wpfnl-mm-setup-wizard-step.completed .wpfnl-mm-setup-wizard-step-number {
background: transparent;
color: rgba(122, 140, 154, 0.7);
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar .wpfnl-mm-setup-wizard-steps .wpfnl-mm-setup-wizard-step.completed .wpfnl-mm-setup-wizard-step-number svg {
width: 20px;
height: 20px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar .wpfnl-mm-setup-wizard-steps .wpfnl-mm-setup-wizard-step.completed .wpfnl-mm-setup-wizard-step-label {
color: rgba(122, 140, 154, 0.7);
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar .wpfnl-mm-setup-wizard-steps .wpfnl-mm-setup-wizard-step .wpfnl-mm-setup-wizard-step-number {
width: 24px;
height: 24px;
border-radius: 16px;
background: #EDE5FF;
color: #6E42D3;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
font-family: "DM Sans", sans-serif;
line-height: 12px;
flex-shrink: 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar .wpfnl-mm-setup-wizard-steps .wpfnl-mm-setup-wizard-step .wpfnl-mm-setup-wizard-step-label {
font-size: 16px;
color: #6D707D;
font-family: "DM Sans", sans-serif;
font-weight: 400;
letter-spacing: -0.16px;
line-height: normal;
white-space: nowrap;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar .wpfnl-mm-setup-wizard-exit {
margin-top: auto;
padding: 0;
text-align: left;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar .wpfnl-mm-setup-wizard-exit .wpfnl-mm-setup-wizard-exit-link {
font-size: 15px;
color: #7A8C9A;
text-decoration: none;
font-family: "DM Sans", sans-serif;
font-weight: 400;
line-height: 18px;
transition: color 0.3s ease;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-sidebar .wpfnl-mm-setup-wizard-exit .wpfnl-mm-setup-wizard-exit-link:hover {
color: #6E42D3;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-help-btn {
position: fixed;
bottom: 40px;
right: 54px;
z-index: 100;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-help-btn .wpfnl-mm-help-btn-circle {
width: 34px;
height: 34px;
border-radius: 100px;
background: #201F22;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 1px 2px rgba(190, 190, 215, 0.16);
transition: all 0.3s ease;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-help-btn .wpfnl-mm-help-btn-circle svg {
width: 16px;
height: 16px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-help-btn .wpfnl-mm-help-btn-circle:hover {
background: #363B4E;
transform: scale(1.05);
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content {
flex: 1;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 80px 20px 24px;
position: relative;
overflow-y: auto;
background: #EFEEF1;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content * {
font-family: "DM Sans", sans-serif;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal-buttons {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal-buttons .wpfnl-mm-btn {
padding: 10px 24px;
border-radius: 10px;
font-size: 16px;
font-weight: 500;
line-height: 24px;
cursor: pointer;
transition: all 0.3s ease;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal-buttons .wpfnl-mm-btn.wpfnl-mm-btn-secondary {
background: #FFF;
color: #363B4E;
border: 1px solid #ECEBF0;
min-width: 87px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal-buttons .wpfnl-mm-btn.wpfnl-mm-btn-secondary:hover {
border-color: #6E42D3;
color: #6E42D3;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal-buttons .wpfnl-mm-btn.wpfnl-mm-btn-primary {
background: #6E42D3;
color: #FFF;
letter-spacing: 0.2px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal-buttons .wpfnl-mm-btn.wpfnl-mm-btn-primary svg {
width: 17px;
height: 12px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal-buttons .wpfnl-mm-btn.wpfnl-mm-btn-primary:hover {
background: #5c36b3;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal-buttons .wpfnl-mm-btn.wpfnl-mm-btn-primary:disabled {
background: #ccc;
cursor: not-allowed;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal-buttons .wpfnl-mm-btn-group {
display: flex;
gap: 12px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal-consent {
display: flex;
justify-content: center;
margin-top: 30px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal-consent .wpfnl-mm-checkbox {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
user-select: none;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal-consent .wpfnl-mm-checkbox input[type=checkbox] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal-consent .wpfnl-mm-checkbox input[type=checkbox]:checked ~ .wpfnl-mm-checkbox-checkmark {
background: #6E42D3;
border-color: #6E42D3;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal-consent .wpfnl-mm-checkbox input[type=checkbox]:checked ~ .wpfnl-mm-checkbox-checkmark:after {
display: block;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal-consent .wpfnl-mm-checkbox .wpfnl-mm-checkbox-checkmark {
width: 16px;
height: 16px;
border: 1px solid #ab91e6;
border-radius: 4px;
background: #FFF;
flex-shrink: 0;
position: relative;
transition: all 0.3s ease;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal-consent .wpfnl-mm-checkbox .wpfnl-mm-checkbox-checkmark:after {
content: "";
position: absolute;
display: none;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
left: 5px;
top: 2px;
width: 3px;
height: 7px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal-consent .wpfnl-mm-checkbox .wpfnl-mm-checkbox-label {
font-size: 14px;
font-weight: 500;
color: #7A8C9A;
line-height: 20px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal {
width: 100%;
max-width: 908px;
display: flex;
flex-direction: column;
gap: 0;
position: relative;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal .wpfnl-mm-choose-goal-header {
text-align: center;
margin-bottom: 30px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal .wpfnl-mm-choose-goal-header .wpfnl-mm-choose-goal-title {
font-size: 24px;
font-weight: 600;
font-family: "DM Sans", sans-serif;
color: #363B4E;
line-height: 30px;
letter-spacing: -0.6px;
margin: 0 0 10px 0;
max-width: 592px;
margin-left: auto;
margin-right: auto;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal .wpfnl-mm-choose-goal-header .wpfnl-mm-choose-goal-subtitle {
font-size: 15px;
font-weight: 400;
font-family: "DM Sans", sans-serif;
color: #6E7A85;
line-height: 19px;
margin: 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal .wpfnl-mm-choose-goal-container {
border-radius: 20px;
padding: 60px 30px;
display: flex;
flex-direction: column;
align-items: center;
gap: 35px;
margin-bottom: 25px;
background: #FFF;
box-shadow: 0 20px 25px -5px rgba(143, 130, 196, 0.05), 0 8px 10px -6px rgba(143, 130, 196, 0.08);
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal .wpfnl-mm-choose-goal-container .wpfnl-mm-choose-goal-cards {
display: grid;
gap: 20px;
grid-template-columns: repeat(3, 1fr);
width: 100%;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal .wpfnl-mm-choose-goal-container .wpfnl-mm-choose-goal-cards .wpfnl-mm-goal-card {
background: #FFF;
border: 1px solid #F6F5FA;
border-radius: 16px;
padding: 20px 10px 24px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal .wpfnl-mm-choose-goal-container .wpfnl-mm-choose-goal-cards .wpfnl-mm-goal-card:hover {
border-color: #EDE5FF;
box-shadow: 0px 4px 12px rgba(110, 66, 211, 0.1);
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal .wpfnl-mm-choose-goal-container .wpfnl-mm-choose-goal-cards .wpfnl-mm-goal-card.active {
border-color: #6E42D3;
box-shadow: 0 20px 30px rgba(199, 191, 217, 0.3019607843);
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal .wpfnl-mm-choose-goal-container .wpfnl-mm-choose-goal-cards .wpfnl-mm-goal-card .wpfnl-mm-goal-card-checkmark {
position: absolute;
top: 12px;
right: 12px;
width: 24px;
height: 24px;
background: #6E42D3;
border-radius: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal .wpfnl-mm-choose-goal-container .wpfnl-mm-choose-goal-cards .wpfnl-mm-goal-card .wpfnl-mm-goal-card-checkmark svg {
width: 16px;
height: 16px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal .wpfnl-mm-choose-goal-container .wpfnl-mm-choose-goal-cards .wpfnl-mm-goal-card .wpfnl-mm-goal-card-icon svg {
display: block;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal .wpfnl-mm-choose-goal-container .wpfnl-mm-choose-goal-cards .wpfnl-mm-goal-card .wpfnl-mm-goal-card-content .wpfnl-mm-goal-card-title {
font-size: 16px;
font-weight: 700;
font-family: "DM Sans", sans-serif;
color: #363B4E;
line-height: 13px;
margin: 0 0 10px 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-goal .wpfnl-mm-choose-goal-container .wpfnl-mm-choose-goal-cards .wpfnl-mm-goal-card .wpfnl-mm-goal-card-content .wpfnl-mm-goal-card-description {
font-size: 15px;
font-weight: 400;
color: #6E7A85;
line-height: 1.5;
margin: 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-buttons-container {
display: flex;
align-items: center;
justify-content: space-between;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-buttons-container .wpfnl-mm-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: 8px;
font-weight: 500;
font-size: 14px;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-buttons-container .wpfnl-mm-btn-primary {
background: #6E42D3;
color: white;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-buttons-container .wpfnl-mm-btn-primary:hover:not(:disabled) {
background: #5B35B8;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-buttons-container .wpfnl-mm-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-buttons-container .wpfnl-mm-btn-secondary {
background: white;
color: #363B4E;
border-radius: 10px;
border: 1px solid #ECEBF0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-buttons-container .wpfnl-mm-btn-secondary:hover:not(:disabled) {
border-color: #D1D5DB;
background: #F9FAFB;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-buttons-container .wpfnl-spinner {
animation: spin 0.8s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup {
width: 100%;
max-width: 940px;
display: flex;
flex-direction: column;
gap: 24px;
position: relative;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-header {
text-align: center;
margin-bottom: 20px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-header .wpfnl-mm-setup-title {
font-size: 24px;
font-weight: 700;
color: #363B4E;
line-height: 35px;
margin: 0 0 8px 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-header .wpfnl-mm-setup-subtitle {
font-size: 15px;
font-weight: 400;
color: #6E7A85;
line-height: 15px;
margin: 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section {
background: #FFF;
border-radius: 20px;
box-shadow: 0 20px 25px -5px rgba(143, 130, 196, 0.05), 0 8px 10px -6px rgba(143, 130, 196, 0.08);
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-woo-notice {
background: #EBF5FF;
border: 1px solid #B3D9FF;
border-radius: 12px;
padding: 16px 20px;
display: flex;
align-items: flex-start;
gap: 12px;
width: 100%;
margin-top: 16px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-woo-notice .wpfnl-mm-woo-notice-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
margin-top: 2px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-woo-notice .wpfnl-mm-woo-notice-icon svg {
width: 20px;
height: 20px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-woo-notice .wpfnl-mm-woo-notice-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-woo-notice .wpfnl-mm-woo-notice-content .wpfnl-mm-woo-notice-title {
font-size: 14px;
font-weight: 600;
font-family: "DM Sans", sans-serif;
color: #0073E6;
line-height: 18px;
margin: 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-woo-notice .wpfnl-mm-woo-notice-content .wpfnl-mm-woo-notice-text {
font-size: 13px;
font-weight: 400;
font-family: "DM Sans", sans-serif;
color: #1E4D7A;
line-height: 18px;
margin: 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
padding: 45px 109px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-woo-detection {
gap: 24px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-setup-plugins-card {
border-radius: 12px;
border: 1.5px solid #F1EFF7;
background: #FFF;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
position: relative;
width: 110px;
height: 100px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-setup-plugins-card.selected {
box-shadow: 0 20px 30px 0 rgba(199, 191, 217, 0.3);
border-color: #239654;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-setup-plugins-card .wpfnl-setup-plugin-selected {
position: absolute;
background: #239654;
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
top: 5px;
right: 5px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-setup-plugins-card .wpfnl-setup-plugin-name {
color: #6E7A85;
font-size: 14px;
font-weight: 400;
line-height: 1;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-page-builders .wpfnl-setup-plugins-card {
cursor: pointer;
width: auto;
min-width: 110px;
padding: 10px 12px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-page-builders .wpfnl-setup-plugins-card.selected {
border-color: #6E42D3;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-page-builders .wpfnl-setup-plugins-card.disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: auto;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-page-builders .wpfnl-setup-plugins-card.disabled:hover {
border-color: #F1EFF7;
box-shadow: none;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-page-builders .wpfnl-setup-plugins-card.disabled.selected {
border-color: #F1EFF7;
box-shadow: none;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-page-builders .wpfnl-setup-plugins-card .wpfnl-setup-plugin-selected {
background: #6E42D3;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-page-builders .wpfnl-setup-plugins-card .wpfnl-setup-pro-badge {
position: absolute;
top: 5px;
right: 5px;
background: #f68524;
color: #fff;
font-size: 9px;
font-weight: 600;
line-height: 1;
padding: 3px 6px;
border-radius: 4px;
white-space: nowrap;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-page-builders .wpfnl-setup-plugins-card img {
width: 30px;
height: 30px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins {
padding: 45px 30px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-setup-plugins-card {
cursor: pointer;
width: 100%;
min-width: unset;
padding: 16px 20px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
text-align: center;
background: transparent;
border: 1px solid #F1EFF7;
border-radius: 14px;
transition: all 0.3s ease;
height: 100%;
width: auto;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-setup-plugins-card:hover {
border-color: #E8E4F3;
background: #FEFEFE;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-setup-plugins-card.selected {
border-color: #6E42D3;
box-shadow: 0 20px 30px rgba(199, 191, 217, 0.3);
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-setup-plugins-card .wpfnl-setup-plugin-selected {
background: #6E42D3;
top: 12px;
right: 12px;
width: 24px;
height: 24px;
box-shadow: 0px 2px 6px rgba(110, 66, 211, 0.3);
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-setup-plugins-card .wpfnl-setup-plugin-selected svg {
width: 16px;
height: 16px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-setup-plugins-card img {
width: 48px;
height: 48px;
flex-shrink: 0;
object-fit: contain;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-setup-plugins-card .wpfnl-setup-plugin-info {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
min-width: 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-setup-plugins-card .wpfnl-setup-plugin-name {
font-size: 15px;
font-weight: 600;
color: #363B4E;
line-height: 1.4;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-setup-plugins-card .wpfnl-setup-plugin-description {
font-size: 14px;
font-weight: 400;
color: #6E7A85;
line-height: 1.5;
max-width: 240px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-setup-section-title {
font-size: 16px;
font-weight: 500;
color: #363B4E;
line-height: 18px;
margin: 0;
text-align: center;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-woo-status {
display: flex;
gap: 10px;
align-items: center;
width: 100%;
justify-content: center;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-mm-woo-status {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
width: 100%;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-setup-plugins-card:only-child {
grid-column: 1/-1;
max-width: 50%;
margin: 0 auto;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-mm-status-card {
width: 110px;
height: 100px;
border: 1.5px solid #F1EFF7;
border-radius: 12px;
background: #FFF;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
position: relative;
cursor: pointer;
transition: all 0.3s ease;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-mm-status-card.active {
border-color: #239654;
box-shadow: 0px 20px 30px rgba(199, 191, 217, 0.3);
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-mm-status-card.active .wpfnl-mm-status-card-checkmark {
display: flex;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-mm-status-card .wpfnl-mm-status-card-checkmark {
position: absolute;
top: 10px;
right: 10px;
width: 18px;
height: 18px;
background: #239654;
border-radius: 100px;
display: none;
align-items: center;
justify-content: center;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-mm-status-card .wpfnl-mm-status-card-checkmark svg {
width: 16px;
height: 16px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-mm-status-card .wpfnl-mm-status-card-icon {
width: 28px;
height: 24px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-mm-status-card .wpfnl-mm-status-card-icon svg {
width: 100%;
height: 100%;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content.wpfnl-mm-essential-plugins .wpfnl-mm-status-card .wpfnl-mm-status-card-label {
font-size: 14px;
font-weight: 400;
font-family: "DM Sans", sans-serif;
color: #6E7A85;
line-height: 13px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-builders-grid {
display: grid;
grid-template-columns: repeat(6, 110px);
gap: 10px;
justify-content: center;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-builders-grid .wpfnl-mm-builder-card {
width: 110px;
height: 100px;
border: 1px solid #F1EFF7;
border-radius: 10px;
background: #FFF;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
position: relative;
cursor: pointer;
transition: all 0.3s ease;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-builders-grid .wpfnl-mm-builder-card:hover {
border-color: #EDE5FF;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-builders-grid .wpfnl-mm-builder-card.active {
border: 1.5px solid #6E42D3;
border-radius: 14px;
box-shadow: 0px 20px 30px rgba(199, 191, 217, 0.3);
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-builders-grid .wpfnl-mm-builder-card.active .wpfnl-mm-builder-card-checkmark {
display: flex;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-builders-grid .wpfnl-mm-builder-card .wpfnl-mm-builder-card-checkmark {
position: absolute;
top: 10px;
right: 10px;
width: 18px;
height: 18px;
background: #6E42D3;
border-radius: 100px;
display: none;
align-items: center;
justify-content: center;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-builders-grid .wpfnl-mm-builder-card .wpfnl-mm-builder-card-checkmark svg {
width: 16px;
height: 16px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-builders-grid .wpfnl-mm-builder-card .wpfnl-mm-builder-card-icon {
width: 30px;
height: 30px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-builders-grid .wpfnl-mm-builder-card .wpfnl-mm-builder-card-label {
font-size: 14px;
font-weight: 400;
font-family: "DM Sans", sans-serif;
color: #6E7A85;
line-height: 13px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-plugins-grid {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-plugins-grid .wpfnl-mm-plugin-card {
min-width: 86px;
height: 44px;
border: 1px solid #F1EFF7;
border-radius: 12px;
background: #FFF;
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
position: relative;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-plugins-grid .wpfnl-mm-plugin-card .wpfnl-mm-plugin-badge {
position: absolute;
top: -8px;
right: -8px;
background: #239654;
color: #FFF;
font-size: 10px;
font-weight: 700;
font-family: "DM Sans", sans-serif;
padding: 5px;
border-radius: 5px;
line-height: 24px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-plugins-grid .wpfnl-mm-plugin-card .wpfnl-mm-plugin-icon {
display: flex;
align-items: center;
justify-content: center;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-plugins-grid .wpfnl-mm-plugin-card .wpfnl-mm-plugin-icon img, .wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-plugins-grid .wpfnl-mm-plugin-card .wpfnl-mm-plugin-icon svg {
max-width: 100%;
height: auto;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-plugins-note {
display: flex;
align-items: flex-start;
gap: 7px;
padding-top: 22px;
border-top: 1px solid #EAE9EE;
margin-top: 0;
width: 100%;
justify-content: center;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-plugins-note svg {
width: 16px;
height: 16px;
flex-shrink: 0;
margin-top: 2px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-section .wpfnl-mm-setup-section-content .wpfnl-mm-plugins-note p {
font-size: 14px;
font-weight: 400;
font-family: "DM Sans", sans-serif;
color: #7A8C9A;
line-height: 15px;
margin: 0;
max-width: 588px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-page-builder-info {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
border-top: 1px solid #F1EFF7;
padding: 20px 20px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-page-builder-info svg {
flex-shrink: 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-page-builder-info p {
margin: 0;
color: #E4781B;
font-size: 14px;
font-weight: 400;
line-height: 1.3;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-page-builder-info strong {
font-weight: 600;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-columns {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 16px;
align-items: start;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-columns .wpfnl-mm-setup-section-content {
padding: 28px 20px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-columns .wpfnl-mm-page-builders .wpfnl-mm-woo-status {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
width: 100%;
justify-content: unset;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-columns .wpfnl-mm-page-builders .wpfnl-setup-plugins-card {
width: 100%;
min-width: unset;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-columns .wpfnl-mm-essential-plugins .wpfnl-mm-woo-status {
grid-template-columns: 1fr;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-setup .wpfnl-mm-setup-columns .wpfnl-mm-essential-plugins .wpfnl-setup-plugins-card:only-child {
max-width: 100%;
grid-column: auto;
margin: 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel {
width: 100%;
max-width: 1049px;
display: flex;
flex-direction: column;
gap: 15px;
position: relative;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-header {
text-align: center;
margin-bottom: 15px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-header .wpfnl-mm-build-funnel-title {
font-size: 24px;
font-weight: 700;
font-family: "DM Sans", sans-serif;
color: #363B4E;
line-height: 35px;
letter-spacing: -1px;
margin: 0 0 8px 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-header .wpfnl-mm-build-funnel-subtitle {
font-size: 15px;
font-weight: 400;
font-family: "DM Sans", sans-serif;
color: #6E7A85;
line-height: 15px;
margin: 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-container {
display: flex;
gap: 3px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-form {
width: 461px;
background: #FFF;
border-radius: 16px;
padding: 40px;
display: flex;
flex-direction: column;
min-height: 482px;
gap: 30px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-fields {
display: flex;
flex-direction: column;
gap: 40px;
flex: 1;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-field {
display: flex;
flex-direction: column;
gap: 9px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-label {
font-size: 15px;
font-weight: 500;
font-family: "DM Sans", sans-serif;
color: #363B4E;
letter-spacing: -0.44px;
line-height: 16px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-label .required {
color: red;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-label .optional {
font-weight: 400;
color: #7A8C9A;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-dropdown {
position: relative;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-dropdown .wpfnl-mm-build-funnel-dropdown-trigger {
height: 46px;
background: #FFF;
border: 1px solid #F1EFF7;
border-radius: 8px;
padding: 0 16px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: all 0.3s ease;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-dropdown .wpfnl-mm-build-funnel-dropdown-trigger .placeholder {
font-size: 14px;
font-family: "DM Sans", sans-serif;
color: #7A8C9A;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-dropdown .wpfnl-mm-build-funnel-dropdown-trigger .selected-value {
font-size: 14px;
font-family: "DM Sans", sans-serif;
color: #363B4E;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-dropdown .wpfnl-mm-build-funnel-dropdown-trigger .dropdown-icon {
transition: transform 0.3s ease;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-dropdown.open .wpfnl-mm-build-funnel-dropdown-trigger {
border-color: #6E42D3;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-dropdown.open .wpfnl-mm-build-funnel-dropdown-trigger .dropdown-icon {
transform: rotate(180deg);
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-dropdown .wpfnl-mm-build-funnel-dropdown-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #FFF;
border: 1px solid #F1EFF7;
border-radius: 8px;
margin-top: 4px;
z-index: 100;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
max-height: 270px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-dropdown .wpfnl-mm-build-funnel-dropdown-item {
padding: 12px 16px;
font-size: 14px;
font-family: "DM Sans", sans-serif;
color: #363B4E;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
transition: background 0.2s ease;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-dropdown .wpfnl-mm-build-funnel-dropdown-item:hover {
background: #F6F5FA;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-dropdown .wpfnl-mm-build-funnel-dropdown-item.selected {
background: #F6F5FA;
color: #6E42D3;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-hint {
font-size: 12px;
font-family: "Inter", sans-serif;
color: #7A8C9A;
line-height: 16px;
margin: 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-revenue {
margin-top: auto;
padding: 16px 20px;
background: #F6F5FA;
border: 1px dashed #6E42D3;
border-radius: 8px;
display: none;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-revenue .wpfnl-mm-build-funnel-revenue-label {
font-size: 14px;
font-family: "DM Sans", sans-serif;
color: #7A8C9A;
margin: 0 0 4px 0;
font-weight: 500;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-revenue .wpfnl-mm-build-funnel-revenue-value {
font-size: 16px;
font-family: "DM Sans", sans-serif;
font-weight: 500;
color: #363B4E;
margin: 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-revenue .wpfnl-mm-build-funnel-revenue-value .total {
color: #6E42D3;
font-weight: 700;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-preview {
flex: 1;
background: #FFF;
border-radius: 16px;
min-height: 484px;
display: flex;
flex-direction: column;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-tabs {
display: flex;
align-items: center;
justify-content: center;
padding: 20px 20px 0;
gap: 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-tab {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
cursor: pointer;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-tab .wpfnl-mm-build-funnel-tab-icon {
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid #F1EFF7;
display: flex;
align-items: center;
justify-content: center;
color: #6E7A85;
transition: all 0.3s ease;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-tab .wpfnl-mm-build-funnel-tab-label {
font-size: 12px;
font-family: "Inter", sans-serif;
font-weight: 500;
color: #6E7A85;
text-align: center;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-tab.active .wpfnl-mm-build-funnel-tab-icon {
border: 1.5px solid #6E42D3;
color: #6E42D3;
box-shadow: 0px 20px 30px rgba(199, 191, 217, 0.3);
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-tab.active .wpfnl-mm-build-funnel-tab-label {
color: #363B4E;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-tab-line {
width: 22px;
height: 1px;
background: #E5E5E5;
margin: 0 8px;
margin-bottom: 24px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-preview-content {
flex: 1;
padding: 20px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-preview-image {
width: 100%;
height: 100%;
min-height: auto;
background: #F6F5FA;
border-radius: 16px;
overflow: hidden;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 16px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-preview-image img {
width: 100%;
height: 350px;
object-fit: cover;
object-position: top center;
border-radius: 10px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-preview-placeholder,
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-preview-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
min-height: 400px;
color: #7A8C9A;
text-align: center;
padding: 40px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-preview-placeholder svg,
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-preview-empty svg {
margin-bottom: 16px;
opacity: 0.5;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-preview-placeholder p,
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-preview-empty p {
font-size: 14px;
font-family: "DM Sans", sans-serif;
margin: 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-preview-placeholder h4,
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-preview-empty h4 {
font-size: 18px;
font-family: "DM Sans", sans-serif;
font-weight: 600;
color: #363B4E;
margin: 0 0 8px 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-buttons {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-buttons .wpfnl-mm-btn-skip {
background: transparent;
color: #7A8C9A;
font-weight: 500;
font-size: 15px;
padding: 10px;
border: none;
cursor: pointer;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-build-funnel .wpfnl-mm-build-funnel-buttons .wpfnl-mm-btn-skip:hover {
color: #6E42D3;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template {
width: 100%;
max-width: 940px;
display: flex;
flex-direction: column;
gap: 0;
position: relative;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-setup-header {
text-align: center;
margin-bottom: 24px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-setup-header .wpfnl-mm-setup-title {
font-size: 24px;
font-weight: 700;
font-family: "DM Sans", sans-serif;
color: #363B4E;
line-height: 35px;
letter-spacing: -1px;
margin: 0 0 8px 0;
height: 30px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-setup-header .wpfnl-mm-setup-subtitle {
font-size: 15px;
font-weight: 400;
font-family: "DM Sans", sans-serif;
color: #6E7A85;
line-height: 15px;
margin: 0;
height: 19px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-templates-grid {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
align-items: center;
background: #FFF;
border-radius: 16px;
padding: 40px 45px;
margin-bottom: 15px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card {
width: 259px;
height: 305px;
background: #FFF;
border: 1px solid #F1EFF7;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
box-shadow: 0px 20px 20px 0px rgba(190, 190, 215, 0.15);
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card:hover {
border-color: #C4B5F4;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card:hover .wpfnl-mm-template-card-overlay {
opacity: 1;
visibility: visible;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card .wpfnl-mm-template-card-preview {
width: 100%;
height: 237px;
position: relative;
overflow: hidden;
background: #F6F5FA;
border-radius: 10px 10px 0 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card .wpfnl-mm-template-card-preview img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card .wpfnl-mm-template-card-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 237px;
background: rgba(38, 33, 51, 0.44);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
border-radius: 10px 10px 0 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card .wpfnl-mm-template-card-overlay .wpfnl-mm-btn-import,
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card .wpfnl-mm-template-card-overlay .wpfnl-mm-btn-preview {
height: 30px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 12px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card .wpfnl-mm-template-card-overlay .wpfnl-mm-btn-import {
background: #FFF;
color: #363B4E;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card .wpfnl-mm-template-card-overlay .wpfnl-mm-btn-import:hover {
background: #F6F5FA;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card .wpfnl-mm-template-card-overlay .wpfnl-mm-btn-preview {
background: transparent;
color: #FFF;
border: 1px solid #F2F2F2;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card .wpfnl-mm-template-card-overlay .wpfnl-mm-btn-preview:hover {
background: rgba(255, 255, 255, 0.1);
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card .wpfnl-mm-template-card-checkmark {
position: absolute;
top: 12px;
right: 12px;
width: 24px;
height: 24px;
background: #FFF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
box-shadow: 0 2px 10px 1px rgba(143, 130, 196, 0.431372549);
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card .wpfnl-mm-template-card-suggested {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px 3px 6px;
border-radius: 100px;
background: #6E42D3;
color: #FFF;
font-size: 10px;
font-weight: 600;
font-family: "DM Sans", sans-serif;
line-height: 1.4;
letter-spacing: 0.1px;
box-shadow: 0 2px 6px rgba(110, 66, 211, 0.35);
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card .wpfnl-mm-template-card-suggested svg {
flex-shrink: 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card.wpfnl-mm-template-card--suggested:not(.active) {
border-color: #C4B5F4;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card .wpfnl-mm-template-card-divider {
width: 100%;
height: 1px;
background: #F1EFF7;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card .wpfnl-mm-template-card-body {
padding: 16px 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 4px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card .wpfnl-mm-template-card-title {
font-size: 14px;
font-weight: 500;
font-family: "Roboto", sans-serif;
color: #363B4E;
line-height: normal;
margin: 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card .wpfnl-mm-template-card-steps {
font-size: 12px;
font-weight: 400;
font-family: "Inter", sans-serif;
color: #7A8B9A;
line-height: 12px;
letter-spacing: -0.12px;
}
@keyframes wpfnl-skeleton-shimmer {
0% {
background-position: -600px 0;
}
100% {
background-position: 600px 0;
}
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-skeleton-block {
background: linear-gradient(90deg, #f0eef8 25%, #e4e0f2 50%, #f0eef8 75%);
background-size: 600px 100%;
animation: wpfnl-skeleton-shimmer 1.4s ease-in-out infinite;
border-radius: 6px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-templates-skeleton {
pointer-events: none;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card--skeleton {
cursor: default;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card--skeleton .wpfnl-mm-template-card-preview {
border-radius: 10px 10px 0 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card--skeleton .wpfnl-mm-skeleton-title {
width: 120px;
height: 14px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-choose-template .wpfnl-mm-template-card--skeleton .wpfnl-mm-skeleton-steps {
width: 60px;
height: 10px;
margin-top: 2px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete {
width: 100%;
max-width: 785px;
display: flex;
flex-direction: column;
gap: 28px;
align-items: center;
position: relative;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-header {
text-align: center;
max-width: 631px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-header .wpfnl-mm-complete-title {
font-size: 24px;
font-weight: 700;
font-family: "DM Sans", sans-serif;
color: #363B4E;
line-height: 35px;
letter-spacing: -1px;
margin: 0 0 8px 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-header .wpfnl-mm-complete-subtitle {
font-size: 15px;
font-weight: 400;
font-family: "DM Sans", sans-serif;
color: #6E7A85;
line-height: 22px;
margin: 0;
max-width: 534px;
margin-left: auto;
margin-right: auto;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-video-wrapper {
width: 100%;
padding: 10px;
background: #FFF;
border-radius: 16px;
box-shadow: 0px 2px 3px rgba(147, 130, 171, 0.05), 0px 4px 5px rgba(85, 85, 85, 0.04), 0px 4px 5px rgba(85, 85, 85, 0.03), 0px 16px 16px rgba(85, 85, 85, 0.02);
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-video-wrapper .wpfnl-mm-complete-video {
width: 100%;
height: 382px;
border-radius: 16px;
background: #F6F5FA;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-video-wrapper .wpfnl-mm-complete-video .wpfnl-mm-complete-video-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-video-wrapper .wpfnl-mm-complete-video .wpfnl-mm-complete-video-bg .wpfnl-mm-complete-video-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-video-wrapper .wpfnl-mm-complete-video .wpfnl-mm-complete-video-bg .wpfnl-mm-complete-video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(60, 37, 111, 0) 37.658%, rgba(75, 52, 129, 0.3) 74.038%);
border-radius: 16px;
cursor: pointer;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-video-wrapper .wpfnl-mm-complete-video .wpfnl-mm-complete-video-iframe {
width: 100%;
height: 100%;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-video-wrapper .wpfnl-mm-complete-video .wpfnl-mm-complete-video-player {
position: absolute;
bottom: 18px;
left: 20px;
right: 20px;
display: flex;
align-items: center;
gap: 12px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-video-wrapper .wpfnl-mm-complete-video .wpfnl-mm-complete-video-player .wpfnl-mm-complete-play-btn {
width: 16px;
height: 16px;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-video-wrapper .wpfnl-mm-complete-video .wpfnl-mm-complete-video-player .wpfnl-mm-complete-play-btn svg {
width: 16px;
height: 16px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-video-wrapper .wpfnl-mm-complete-video .wpfnl-mm-complete-video-player .wpfnl-mm-complete-progress-bar {
flex: 1;
height: 9px;
background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
border-radius: 100px;
overflow: hidden;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-video-wrapper .wpfnl-mm-complete-video .wpfnl-mm-complete-video-player .wpfnl-mm-complete-progress-bar .wpfnl-mm-complete-progress-fill {
width: 0%;
height: 100%;
background: #6E42D3;
border-radius: 100px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
width: 100%;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-actions .wpfnl-mm-complete-buttons {
display: flex;
gap: 12px;
align-items: center;
justify-content: center;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-actions .wpfnl-mm-btn {
padding: 10px 20px;
border-radius: 10px;
font-size: 16px;
line-height: 24px;
cursor: pointer;
transition: all 0.3s ease;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-actions .wpfnl-mm-btn.wpfnl-mm-btn-secondary {
background: #FFF;
color: #363B4E;
border: 1px solid #ECEBF0;
font-weight: 700;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-actions .wpfnl-mm-btn.wpfnl-mm-btn-secondary:hover {
border-color: #6E42D3;
color: #6E42D3;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-actions .wpfnl-mm-btn.wpfnl-mm-btn-primary {
background: #6E42D3;
color: #FFF;
font-weight: 600;
letter-spacing: 0.2px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-actions .wpfnl-mm-btn.wpfnl-mm-btn-primary svg {
width: 17px;
height: 12px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-actions .wpfnl-mm-btn.wpfnl-mm-btn-primary:hover {
background: #5c36b3;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-actions .wpfnl-mm-complete-info {
padding: 10px;
text-align: center;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-mm-setup-wizard-content .wpfnl-mm-complete .wpfnl-mm-complete-actions .wpfnl-mm-complete-info p {
font-size: 14px;
font-weight: 400;
color: #7A8C9A;
line-height: 22px;
margin: 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-wizard-welcome {
width: 100%;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-wizard-welcome .wpfnl-wizard-welcome-content {
width: 100%;
max-width: 918px;
margin: 0 auto;
padding: 40px 30px 0;
border-radius: 20px;
background: #FFF;
box-shadow: 0 20px 25px -5px rgba(143, 130, 196, 0.05), 0 8px 10px -6px rgba(143, 130, 196, 0.08);
overflow: hidden;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-wizard-welcome .wpfnl-wizard-welcome-title {
color: #363B4E;
text-align: center;
font-size: 34px;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.6px;
text-align: center;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-wizard-welcome .wpfnl-wizard-welcome-subtitle {
color: #6E7A85;
font-size: 15px;
font-weight: 400;
line-height: 1.4;
text-align: center;
margin-top: 4px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-wizard-welcome .wpfnl-mm-choose-goal-buttons {
justify-content: center;
margin-top: 24px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-wizard-welcome .welcome-image {
margin: 0;
display: block;
transform: translateX(30px);
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-wizard-welcome .welcome-image img {
display: block;
margin-left: auto;
margin-top: 67px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container {
padding: 40px 30px 30px;
border-radius: 20px;
background: #FFF;
box-shadow: 0 20px 25px -5px rgba(143, 130, 196, 0.05), 0 8px 10px -6px rgba(143, 130, 196, 0.08);
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-search {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 24px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-search .wpfnl-product-sync-search-wrapper {
flex: 1;
position: relative;
display: flex;
align-items: center;
gap: 0px;
padding: 10px 14px;
border: 1px solid #EEF0F3;
border-radius: 8px;
background: #FFF;
transition: all 0.3s ease;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-search .wpfnl-product-sync-search-wrapper:focus-within {
border-color: #6E42D3;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-search .wpfnl-product-sync-search-wrapper svg {
flex-shrink: 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-search .wpfnl-product-sync-search-wrapper .wpfnl-product-sync-search-input {
flex: 1;
border: none !important;
outline: none;
font-size: 14px;
color: #7A8B9A;
background: transparent;
box-shadow: none !important;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-search .wpfnl-product-sync-search-wrapper .wpfnl-product-sync-search-input::placeholder {
color: #9CA3AF;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-search .wpfnl-create-product-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 12px 20px;
border: none;
border-radius: 10px;
color: #6E42D3;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
background: rgba(110, 66, 211, 0.12);
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-search .wpfnl-create-product-btn path {
transition: all 0.3s ease;
stroke: #5B35B8;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-search .wpfnl-create-product-btn:hover {
background: #5B35B8;
border-color: #5B35B8;
color: #fff;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-search .wpfnl-create-product-btn:hover path {
stroke: #fff;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-search .wpfnl-create-product-btn svg {
display: block;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-label {
margin-bottom: 16px;
color: #7A8B9A;
font-size: 14px;
font-weight: 400;
line-height: 1;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-cards {
display: flex;
flex-direction: column;
gap: 12px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-card {
display: flex;
align-items: center;
gap: 14px;
padding: 20px;
border: 1px solid #F1EFF7;
border-radius: 12px;
background: #FFF;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-card .wpfnl-product-sync-radio {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-card:hover {
border-color: #D1D5DB;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-card.active {
border-color: #6E42D3;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-card .wpfnl-product-image {
width: 67px;
height: 67px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #F1EFF7;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-card .wpfnl-product-image img {
display: block;
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 8px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-card .wpfnl-product-image svg {
width: 32px;
height: 32px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-card .wpfnl-product-sync-card-content {
display: flex;
flex-direction: column;
width: calc(100% - 82px);
padding-right: 30px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-card .wpfnl-product-sync-card-title {
margin: 0;
color: #363B4E;
font-size: 14px;
font-weight: 700;
line-height: 1.3;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-card .wpfnl-product-sync-card-description {
margin: 0;
color: #6E7A85;
font-size: 15px;
font-weight: 400;
line-height: 1.4;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-card .wpfnl-product-sync-card-price {
margin: 3px 0 0 0;
color: #363B4E;
font-size: 15px;
font-weight: 700;
line-height: 1;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-card .wpfnl-product-sync-card-checkbox {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-card .wpfnl-product-sync-card-checkbox .wpfnl-product-sync-checkbox-circle {
width: 24px;
height: 24px;
border-radius: 50%;
border: 1px solid #D1D5DB;
background: #FFF;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-card .wpfnl-product-sync-card-checkbox .wpfnl-product-sync-checkbox-circle svg {
width: 14px;
height: 14px;
display: none;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-card .wpfnl-product-sync-radio:checked ~ .wpfnl-product-sync-card-checkbox .wpfnl-product-sync-checkbox-circle {
background: #6E42D3;
border-color: #6E42D3;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-card .wpfnl-product-sync-radio:checked ~ .wpfnl-product-sync-card-checkbox .wpfnl-product-sync-checkbox-circle svg {
display: block;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-skeleton {
display: flex;
flex-direction: column;
gap: 12px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-skeleton-card {
display: flex;
align-items: center;
gap: 14px;
padding: 20px;
border: 1px solid #F1EFF7;
border-radius: 12px;
background: #FFF;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-skeleton-pulse {
background: linear-gradient(90deg, #F3F4F6 25%, #E5E7EB 50%, #F3F4F6 75%);
background-size: 200% 100%;
animation: wpfnl-skeleton-shimmer 1.5s ease-in-out infinite;
border-radius: 6px;
}
@keyframes wpfnl-skeleton-shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-skeleton-image {
width: 67px;
height: 67px;
border-radius: 8px;
flex-shrink: 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-skeleton-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
padding-right: 30px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-skeleton-title {
height: 14px;
width: 50%;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-skeleton-description {
height: 12px;
width: 70%;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-skeleton-price {
height: 14px;
width: 30%;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-skeleton-checkbox {
width: 24px;
height: 24px;
border-radius: 50%;
flex-shrink: 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-state-error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
text-align: center;
border: 1px solid #FEE2E2;
border-radius: 12px;
background: #FEF2F2;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-state-error .wpfnl-product-sync-error-icon {
margin-bottom: 12px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-state-error .wpfnl-product-sync-error-icon svg {
display: block;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-state-error .wpfnl-product-sync-error-text {
margin: 0 0 16px;
color: #991B1B;
font-size: 14px;
font-weight: 500;
line-height: 1.5;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-state-error .wpfnl-product-sync-retry-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 18px;
border: 1px solid #DC2626;
border-radius: 8px;
background: #FFF;
color: #DC2626;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-state-error .wpfnl-product-sync-retry-btn:hover {
background: #DC2626;
color: #FFF;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-state-error.wpfnl-product-sync-template-error {
flex-direction: row;
padding: 14px 20px;
margin-top: 12px;
gap: 10px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-state-error.wpfnl-product-sync-template-error .wpfnl-product-sync-error-icon {
margin-bottom: 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-state-error.wpfnl-product-sync-template-error .wpfnl-product-sync-error-text {
margin: 0;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-state-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 20px;
text-align: center;
border: 1px dashed #D1D5DB;
border-radius: 12px;
background: #FAFAFA;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-state-empty .wpfnl-product-sync-empty-icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: #F3F4F6;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-state-empty .wpfnl-product-sync-empty-title {
margin: 0 0 6px;
color: #363B4E;
font-size: 15px;
font-weight: 600;
line-height: 1.3;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-state-empty .wpfnl-product-sync-empty-subtitle {
margin: 0 0 20px;
color: #6E7A85;
font-size: 13px;
font-weight: 400;
line-height: 1.5;
max-width: 300px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-state-empty .wpfnl-product-sync-create-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 22px;
border: none;
border-radius: 10px;
background: #6E42D3;
color: #FFF;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-product-sync-container .wpfnl-product-sync-state-empty .wpfnl-product-sync-create-btn:hover {
background: #5B35B8;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-generate-funnel-container {
border-radius: 20px;
background: #FFF;
box-shadow: 0 20px 25px -5px rgba(143, 130, 196, 0.05), 0 8px 10px -6px rgba(143, 130, 196, 0.08);
display: flex;
align-items: center;
justify-content: center;
height: 508px;
position: relative;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-generate-funnel-container .wpfnl-generate-funnel-canvas {
width: 100%;
height: auto;
max-width: 580px;
border-radius: 20px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-generate-funnel-container .wpfnl-generate-funnel-canvas img {
width: 100%;
height: 100%;
border-radius: 20px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-generate-funnel-container .generate-funnel-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 20px;
background: rgba(75, 52, 129, 0.4);
backdrop-filter: blur(0);
border: 1px solid #fff;
padding: 20px;
display: flex;
flex-flow: column;
align-items: center;
justify-content: flex-end;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-generate-funnel-container .generate-funnel-overlay .generated-notice {
border-radius: 12px;
background: #FFF;
box-shadow: 0 4px 4px 0 rgba(151, 145, 166, 0.3);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
color: #6E7A85;
font-size: 16px;
font-weight: 400;
line-height: 1;
padding: 13px 20px;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-generate-funnel-container.generating .generate-funnel-overlay {
justify-content: center;
backdrop-filter: blur(5px);
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-generate-funnel-container {
/* HTML:
*/
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-generate-funnel-container .generate-loader {
width: 50px;
aspect-ratio: 1;
display: grid;
border-radius: 50%;
background: linear-gradient(0deg, rgba(244, 230, 230, 0.5) 30%, rgba(255, 255, 255, 0) 0 70%, rgb(255, 255, 255) 0) 50%/8% 100%, linear-gradient(90deg, rgba(255, 255, 255, 0.25) 30%, rgba(255, 255, 255, 0) 0 70%, rgba(255, 255, 255, 0.75) 0) 50%/100% 8%;
background-repeat: no-repeat;
animation: l23 1s infinite steps(12);
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-generate-funnel-container .generate-loader::before,
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-generate-funnel-container .generate-loader::after {
content: "";
grid-area: 1/1;
border-radius: 50%;
background: inherit;
opacity: 0.915;
transform: rotate(30deg);
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-generate-funnel-container .generate-loader::after {
opacity: 0.83;
transform: rotate(60deg);
}
@keyframes l23 {
100% {
transform: rotate(1turn);
}
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
justify-content: center;
align-items: center;
display: flex;
z-index: 999999;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-modal-overlay .wpfnl-modal-wrapper {
width: 80%;
background: #FFF;
padding: 25px;
height: 80%;
border-radius: 10px;
position: relative;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-modal-overlay .wpfnl-modal-close-btn {
position: absolute;
right: -14px;
top: -14px;
background: #ffffff;
box-shadow: 0px 1px 1px #dadada;
border-radius: 100px;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-modal-overlay #wpfnl-create-product {
width: 100%;
height: 100%;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-modal-overlay #wpfnl-create-product iframe {
height: 100%;
}
.wpfunnels-setup .wpfnl-mm-setup-wizard .wpfnl-modal-overlay .wpfnl-loader {
border: 2px solid #8265c5;
border-radius: 50%;
border-top: 2px solid #fff;
width: 50px;
height: 50px;
animation: spin 0.7s linear infinite;
display: block;
margin-left: 4px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
background: #fff;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.wpfunnels-setup {
/* ==========================================================================
Setup wizard shell — top bar + centered body + progress footer.
Replaces the former left-sidebar chrome. Uses the existing WPFunnels
brand tokens (#6E42D3 / DM Sans) so the wizard stays consistent with the
rest of the admin.
========================================================================== */
}
.wpfunnels-setup .wpfnl-wz {
font-family: "DM Sans", sans-serif;
background: #F6F5FA;
display: flex;
flex-direction: column;
height: 100%;
min-height: 100vh;
color: #363B4E;
-webkit-font-smoothing: antialiased;
}
.wpfunnels-setup .wpfnl-wz *, .wpfunnels-setup .wpfnl-wz *::before, .wpfunnels-setup .wpfnl-wz *::after {
box-sizing: border-box;
}
.wpfunnels-setup .wpfnl-wz {
/* ---------- Top bar ---------- */
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-top {
flex-shrink: 0;
height: 60px;
background: #FFFFFF;
border-bottom: 1px solid #ECEBF0;
padding: 0 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-logo {
display: flex;
align-items: center;
gap: 9px;
flex: 1 0 0;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-logo-mark {
width: 26px;
height: 26px;
display: block;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-logo-text {
font-size: 15px;
font-weight: 700;
letter-spacing: -0.2px;
color: #363B4E;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-step-label {
margin: 0;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
}
.wpfunnels-setup .wpfnl-wz {
/* Balances the logo column so the step counter stays centered — see the
template comment. The visible chip lives on the button inside it. */
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-exit-slot {
flex: 1 0 0;
display: flex;
justify-content: flex-end;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-exit {
display: inline-flex;
align-items: center;
gap: 8px;
background: none;
border: 0;
padding: 8px 4px;
cursor: pointer;
font-family: inherit;
font-weight: 700;
white-space: nowrap;
color: #363B4E;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-exit svg {
flex-shrink: 0;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-exit:focus-visible {
outline: 2px solid #6E42D3;
outline-offset: 2px;
border-radius: 4px;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-exit-text {
font-size: 12px;
}
.wpfunnels-setup .wpfnl-wz {
/* ---------- Body ---------- */
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-body {
flex: 1 1 auto;
overflow-y: auto;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 40px 24px 24px;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-center {
width: 100%;
max-width: 960px;
margin: auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.wpfunnels-setup .wpfnl-wz {
/* ---------- Welcome step ----------
This step has no wizard footer — its own "Get started" button is the
primary action — so it stretches to fill the body. The hero group takes
the free space via auto margins, which centers it and leaves the consent
opt-in resting on the bottom edge rather than floating under the CTA. */
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-welcome {
align-self: stretch;
margin: 0;
/* .wpfnl-wz-center caps at 960px; the one-line subtitle alone runs ~930px,
which leaves almost no margin. The higher specificity here (two chained
classes) reliably wins over that single-class rule regardless of source
order, giving both lines real breathing room. */
max-width: 1040px;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-welcome-main {
margin: auto 0;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-welcome .wpfnl-wz-consent {
margin-top: 0;
padding-top: 24px;
/* Long enough that both new copy strings need the full center column
width (960px) to have a shot at fitting on one line; narrower windows
still wrap gracefully since neither has white-space: nowrap. */
max-width: none;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-welcome .wpfnl-wz-sub {
/* The new copy runs ~930px wide at 15px — needs the full center column
(960px) to have a shot at one line, same reasoning as the consent text
above it. */
max-width: none;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-welcome .wpfnl-wz-h1 {
font-size: 34px;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-h1 {
font-size: 26px;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.4px;
color: #363B4E;
margin: 0 0 10px;
padding: 0;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-sub {
font-size: 15px;
line-height: 1.7;
color: #7A8B9A;
margin: 0 0 24px;
max-width: 560px;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-error {
background: #FEF2F2;
border: 1px solid #FECACA;
color: #B91C1C;
font-size: 14px;
border-radius: 8px;
padding: 10px 16px;
margin: 0 0 20px;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-empty {
font-size: 14px;
color: #6E7A85;
max-width: 420px;
line-height: 1.7;
}
.wpfunnels-setup .wpfnl-wz {
/* ---------- Hero artwork ----------
welcome-image.png is 1450x832 RGBA line art that carries its own soft
purple wash out to the edges of the canvas. It is illustration, not a
screenshot, so it gets no frame — a border/radius/shadow would box the
artwork's own transparent bounds and read as a pasted-in thumbnail.
It sits directly on the page and blends into it. */
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-art {
width: 100%;
max-width: 900px;
margin: 4px 0 20px;
border: 0;
background: none;
box-shadow: none;
/* Capped by viewport height, not just width — this is the tallest single
element on the welcome step, and the step has no footer to borrow space
from, so on a short viewport it must be the thing that shrinks. 54vh
only binds below ~950px of viewport height; taller screens fall back to
the artwork's true size (900x516) via max-width instead. width: auto +
both max- constraints keeps the aspect ratio intact either way. */
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-art img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 54vh;
margin: 0 auto;
}
.wpfunnels-setup .wpfnl-wz {
/* ---------- Buttons ---------- */
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: "DM Sans", sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 1;
padding: 12px 24px;
border-radius: 8px;
border: 1px solid transparent;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
min-width: 132px;
text-decoration: none;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-btn:focus-visible {
outline: 2px solid #6E42D3;
outline-offset: 2px;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-btn.is-hidden {
visibility: hidden;
pointer-events: none;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-btn--lg {
padding: 14px 34px;
font-size: 15px;
border-radius: 9999px;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-btn--primary {
background: #6E42D3;
color: #fff;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-btn--primary:hover:not(:disabled) {
background: #5B35B8;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-btn--ghost {
background: transparent;
border-color: #ECEBF0;
color: #6E7A85;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-btn--ghost:hover:not(:disabled) {
border-color: #6E42D3;
color: #6E42D3;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-btn--danger {
background: #EF4444;
color: #fff;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-btn--danger:hover:not(:disabled) {
background: #DC2626;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-btn--placeholder {
visibility: hidden;
pointer-events: none;
}
.wpfunnels-setup .wpfnl-wz {
/* ---------- Spinner ---------- */
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-spinner {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid rgba(255, 255, 255, 0.4);
border-top-color: #fff;
border-radius: 50%;
animation: wpfnl-wz-spin 0.7s linear infinite;
}
.wpfunnels-setup .wpfnl-wz {
/* ---------- Footer ---------- */
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-footer {
flex-shrink: 0;
background: #FFFFFF;
border-top: 1px solid #ECEBF0;
padding: 16px 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-footer-actions {
display: flex;
align-items: center;
gap: 4px;
}
.wpfunnels-setup .wpfnl-wz {
/* Quiet text action beside the primary button — deliberately low
emphasis so it reads as an escape hatch, not an alternative path. */
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-skip {
background: none;
border: 0;
padding: 12px 16px;
cursor: pointer;
font-family: inherit;
font-size: 14px;
font-weight: 600;
color: #6E7A85;
transition: color 0.2s ease;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-skip:hover:not(:disabled) {
color: #363B4E;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-skip:focus-visible {
outline: 2px solid #6E42D3;
outline-offset: 2px;
border-radius: 6px;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-skip:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.wpfunnels-setup .wpfnl-wz {
/* ---------- Template grid ---------- */
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 20px;
width: 100%;
text-align: left;
}
.wpfunnels-setup .wpfnl-wz {
/* Held inert while the funnel builds — the grid stays on screen for
context, but the selection must not change mid-flight. */
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-grid.is-busy {
pointer-events: none;
opacity: 0.6;
transition: opacity 0.2s ease;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-card {
background: #FFFFFF;
border: 1.5px solid #ECEBF0;
border-radius: 12px;
padding: 12px;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-card:hover {
border-color: #C4B5F4;
transform: translateY(-2px);
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-card.is-active {
border-color: #6E42D3;
box-shadow: 0 4px 16px rgba(110, 66, 211, 0.12);
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-card:focus-visible {
outline: 2px solid #6E42D3;
outline-offset: 2px;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-card.is-skeleton {
cursor: default;
pointer-events: none;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-thumb {
position: relative;
border-radius: 8px;
overflow: hidden;
background: #F6F5FA;
aspect-ratio: 4/3;
margin-bottom: 12px;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
display: block;
}
.wpfunnels-setup .wpfnl-wz {
/* Sits inside the thumb, which is `overflow: hidden`, so the pill clips
to the rounded corner rather than overhanging the card. */
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-badge {
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
border-radius: 8px 0 8px 0;
background: #6E42D3;
color: #fff;
font-size: 12px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-badge svg {
flex-shrink: 0;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-card.is-suggested {
border-color: #C4B5F4;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-preview {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%) translateY(6px);
opacity: 0;
background: rgba(54, 59, 78, 0.92);
color: #fff;
border: 0;
border-radius: 9999px;
padding: 7px 18px;
font-family: inherit;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-card:hover .wpfnl-wz-template-preview,
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-preview:focus-visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-title {
font-size: 14.5px;
font-weight: 600;
color: #363B4E;
margin: 0 0 4px;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-meta {
font-size: 12.5px;
color: #6E7A85;
margin: 0;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-skeleton-line {
height: 12px;
border-radius: 4px;
background: linear-gradient(90deg, #EFEEF3 25%, #F7F6FA 50%, #EFEEF3 75%);
background-size: 200% 100%;
animation: wpfnl-wz-shimmer 1.4s ease infinite;
margin-bottom: 8px;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-skeleton-line.is-short {
width: 45%;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-template-card.is-skeleton .wpfnl-wz-template-thumb {
background: linear-gradient(90deg, #EFEEF3 25%, #F7F6FA 50%, #EFEEF3 75%);
background-size: 200% 100%;
animation: wpfnl-wz-shimmer 1.4s ease infinite;
}
.wpfunnels-setup .wpfnl-wz {
/* ---------- Template preview modal ----------
PreviewTemplate.vue's own component — its styling never changed, only
moved here. Previously scoped under `.wpfnl-mm-setup-wizard-content`,
a wrapper the sidebar-based wizard used that no longer exists in the
DOM, so none of it was reaching the modal. */
}
.wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
padding: 40px;
backdrop-filter: blur(4px);
}
.wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal {
background: #FFF;
border-radius: 16px;
width: 100%;
max-width: 1399px;
height: 90vh;
display: flex;
flex-direction: column;
box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-header {
padding: 24px 32px;
border-bottom: 1px solid #EAE9EE;
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-header .wpfnl-mm-preview-modal-title {
font-size: 20px;
font-weight: 700;
font-family: "DM Sans", sans-serif;
color: #363B4E;
margin: 0;
line-height: 24px;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-header .wpfnl-mm-preview-device-switcher {
display: flex;
gap: 4px;
background: #F6F5FA;
border-radius: 8px;
padding: 4px;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-header .wpfnl-mm-preview-device-switcher .wpfnl-mm-device-btn {
width: 36px;
height: 36px;
border: none;
background: transparent;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
color: #7A8C9A;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-header .wpfnl-mm-preview-device-switcher .wpfnl-mm-device-btn svg {
width: 16px;
height: 16px;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-header .wpfnl-mm-preview-device-switcher .wpfnl-mm-device-btn:hover {
background: rgba(110, 66, 211, 0.1);
color: #6E42D3;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-header .wpfnl-mm-preview-device-switcher .wpfnl-mm-device-btn.active {
background: #FFF;
color: #6E42D3;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
}
.wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-header .wpfnl-mm-preview-modal-actions {
display: flex;
align-items: center;
gap: 16px;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-header .wpfnl-mm-preview-modal-actions .wpfnl-mm-btn-import-modal {
padding: 12px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
background: #6E42D3;
color: #FFF;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.2s ease;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-header .wpfnl-mm-preview-modal-actions .wpfnl-mm-btn-import-modal svg {
width: 16px;
height: 12px;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-header .wpfnl-mm-preview-modal-actions .wpfnl-mm-btn-import-modal:hover {
background: #5c36b3;
transform: translateY(-1px);
box-shadow: 0px 4px 12px rgba(110, 66, 211, 0.3);
}
.wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-header .wpfnl-mm-preview-modal-actions .wpfnl-mm-preview-close-btn {
width: 32px;
height: 32px;
background: transparent;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
color: #7A8C9A;
border: 1px solid #7A8B9A;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-header .wpfnl-mm-preview-modal-actions .wpfnl-mm-preview-close-btn:hover {
background: #F6F5FA;
color: #363B4E;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body {
flex: 1;
display: flex;
overflow: hidden;
flex-direction: column;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body .wpfnl-mm-preview-steps {
width: 180px;
border-right: 1px solid #EAE9EE;
padding: 20px;
display: flex;
gap: 12px;
overflow-y: auto;
flex-shrink: 0;
width: 100%;
align-items: center;
justify-content: center;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body .wpfnl-mm-preview-steps .wpfnl-mm-preview-step-card {
cursor: pointer;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body .wpfnl-mm-preview-steps .wpfnl-mm-preview-step-card.active .wpfnl-mm-preview-step-thumbnail {
border-color: #6E42D3;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body .wpfnl-mm-preview-steps .wpfnl-mm-preview-step-card .wpfnl-mm-preview-step-thumbnail {
aspect-ratio: 16/10;
background: #F6F5FA;
border-radius: 8px;
border: 2px solid transparent;
overflow: hidden;
transition: all 0.2s ease;
width: 78px;
height: 78px;
padding: 3px;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body .wpfnl-mm-preview-steps .wpfnl-mm-preview-step-card .wpfnl-mm-preview-step-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body .wpfnl-mm-preview-steps .wpfnl-mm-preview-step-card .wpfnl-mm-preview-step-thumbnail:hover {
border-color: #E5E7EB;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body .wpfnl-mm-preview-steps .wpfnl-mm-preview-step-card .wpfnl-mm-preview-step-type {
padding: 8px;
font-size: 12px;
font-weight: 500;
font-family: "DM Sans", sans-serif;
color: #363B4E;
text-align: center;
margin: 0;
background: #FFF;
text-transform: capitalize;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body .wpfnl-mm-preview-content {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
background: #F6F5FA;
overflow: auto;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body .wpfnl-mm-preview-content .wpfnl-mm-preview-device-frame {
width: 100%;
height: 100%;
background: #FFF;
border-radius: 12px;
overflow: hidden;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body .wpfnl-mm-preview-content .wpfnl-mm-preview-device-frame.image-preview .wpfnl-mm-preview-iframe-wrapper {
overflow-x: hidden;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body .wpfnl-mm-preview-content .wpfnl-mm-preview-device-frame .wpfnl-mm-preview-iframe-wrapper {
width: 100%;
height: 100%;
position: relative;
overflow: auto;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body .wpfnl-mm-preview-content .wpfnl-mm-preview-device-frame .wpfnl-mm-preview-iframe-wrapper .wpfnl-mm-preview-checkout-placeholder {
min-height: 650px;
display: flex;
align-items: center;
justify-content: center;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body .wpfnl-mm-preview-content .wpfnl-mm-preview-device-frame .wpfnl-mm-preview-iframe-wrapper iframe {
width: 100%;
height: 100%;
border: none;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body .wpfnl-mm-preview-content .wpfnl-mm-preview-device-frame .wpfnl-mm-preview-iframe-wrapper .wpfnl-mm-preview-loader {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.9);
z-index: 10;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body .wpfnl-mm-preview-content .wpfnl-mm-preview-device-frame .wpfnl-mm-preview-iframe-wrapper .wpfnl-mm-preview-loader .wpfnl-mm-loader {
border: 3px solid #E5E7EB;
border-top-color: #6E42D3;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body .wpfnl-mm-preview-content.tablet .wpfnl-mm-preview-device-frame {
max-width: 768px;
margin: 0 auto;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-mm-preview-modal-overlay .wpfnl-mm-preview-modal .wpfnl-mm-preview-modal-body .wpfnl-mm-preview-content.mobile .wpfnl-mm-preview-device-frame {
max-width: 375px;
margin: 0 auto;
}
.wpfunnels-setup .wpfnl-wz {
/* ---------- Consent ---------- */
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-consent {
display: inline-flex;
align-items: flex-start;
gap: 10px;
margin-top: 20px;
max-width: 440px;
text-align: left;
cursor: pointer;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-consent input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-consent-box {
flex-shrink: 0;
width: 17px;
height: 17px;
margin-top: 1px;
border: 1.5px solid #C9CDD6;
border-radius: 4px;
background: #FFFFFF;
position: relative;
transition: background 0.2s ease, border-color 0.2s ease;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-consent-box::after {
content: "";
position: absolute;
left: 5px;
top: 1.5px;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg) scale(0);
transition: transform 0.15s ease;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-consent input:checked + .wpfnl-wz-consent-box {
background: #6E42D3;
border-color: #6E42D3;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-consent input:checked + .wpfnl-wz-consent-box::after {
transform: rotate(45deg) scale(1);
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-consent input:focus-visible + .wpfnl-wz-consent-box {
outline: 2px solid #6E42D3;
outline-offset: 2px;
}
.wpfunnels-setup .wpfnl-wz .wpfnl-wz-consent-text {
font-size: 13px;
line-height: 1.6;
color: #6E7A85;
}
.wpfunnels-setup .wpfnl-wz {
/* Sits inside the