body.single-photo-wizard-sticky { overflow: hidden; }
body.single-photo-wizard-sticky .single-photo-wizard-wrapper { position: fixed; z-index: 2; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden auto; background-color: #ffffff; }

.v-hidden { visibility: hidden; }
.d-none { display: none !important; }

.single-photo-wizard { position: relative; }

.steps-headers.sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 1; background-color: #ffffff; padding: 12px; box-shadow: 0 -3px 12px 0px rgb(0 0 0 / 34%); }
 
.steps-headers { padding: 12px 0; position: absolute; left: 0; right: 0; }
.steps-headers .steps-list { list-style: none; display: flex; justify-content: space-around; margin: auto; overflow-y: hidden; }
.steps-headers .steps-list li { position: relative; background-color: #ededed; font-weight: bold; padding: 20px 12px 20px 44px; width: 100%; }
.steps-headers .steps-list li:not(:nth-of-type(1)):before { content: ''; position: absolute; height: 0; width: 0; display: block; left: 1%; top: 50%; transform: translateY(-50%); border-top: 40px solid transparent; border-bottom: 40px solid transparent; border-left: 27px solid #ffffff; margin-top: 0; z-index: 1; }
.steps-headers .steps-list li:after { content: ''; position: absolute; height: 0; width: 0; display: block; left: 100%; top: 50%; transform: translateY(-50%); border-top: 40px solid transparent; border-bottom: 40px solid transparent; border-left: 27px solid #ededed; margin-top: 0; z-index: 2; }
.steps-headers .steps-list li.active { color: #ffffff; background-color: #99b2de; }
.steps-headers .steps-list li.active:after { border-left-color: #99b2de; }
.steps-headers .steps-list li:last-of-type { margin-right: 30px; }
.steps-headers .steps-list li:hover { background-color: #99b2de; color: #ffffff; }
.steps-headers .steps-list li:hover:after { border-left-color: #99b2de; }
.steps-headers .steps-list li span { margin-left: 16px; }

.steps-content { padding-top: 93px; padding-bottom: 74px; width: 100%; }
.steps-content [data-step] { display: none; }
.steps-content [data-step].active { display: block; }
.steps-content [data-step="2"] > div.row { margin-bottom: 40px; }
.steps-content [data-step] .addon-description { margin-bottom: 24px; }
.steps-content [data-step] .addon-section-wrapper .row { margin-bottom: 20px; }
.steps-content [data-step] .addon-section-wrapper .alert { background-color: #ededed; padding: 28px; margin-top: 20px; border-left: 10px solid #99b2de; }
.steps-content [data-step] .addon-wrapper { background-color: #e9e9e9; padding: 30px; }
.steps-content [data-step] .addon-wrapper .item-full { display: flex; align-items: center; }
.steps-content [data-step] .addon-wrapper .item-full img { width: 30%; height: 100%; }
.steps-content [data-step] .addon-wrapper .item-full .content { margin-left: 24px; }
.steps-content [data-step] .addon-wrapper .item-full .content .option { background-color: #ffff; padding: 24px; display: flex; align-items: center; }
.steps-content [data-step] .addon-wrapper .item-full .content .option label { flex-grow: 1; display: flex; justify-content: space-between; margin-left: 20px; }
.steps-content [data-step] .addon-wrapper .item .item-wrapper { position: relative; background-color: #ffff; border-radius: 8px; overflow: hidden; border: 3px solid #00000029; height: 100%; }
.steps-content [data-step] .addon-wrapper .item input { display: none; }
.steps-content [data-step] .addon-wrapper .item input:checked + .item-wrapper { border-color: #99b2de; }
.steps-content [data-step] .addon-wrapper .item input:checked + .item-wrapper .fa-check { display: block; background-color: #99b2de; color: #ffff; padding: 8px; position: absolute; right: 0; border-radius: 0px 0px 0px 10px; }
.steps-content [data-step] .addon-wrapper .item .item-wrapper .fa-check { display: none; }
.steps-content [data-step] .addon-wrapper .item .item-wrapper:hover { border-color: #99b2de; }
.steps-content [data-step] .addon-wrapper .item .item-wrapper img { width: 100%; height: 150px; object-fit: cover; }
.steps-content [data-step] .addon-wrapper .item .item-wrapper .caption { padding: 10px; text-align: center; }
.steps-content [data-step] .preview-wrapper { color: #000000; }
.steps-content [data-step] .preview-wrapper .preview-image { height: 100%; position: relative; }
.steps-content [data-step] .preview-wrapper .preview-image #imagePreview { width: 100%; height: 100%; margin: auto; display: block; }
.steps-content [data-step] .preview-wrapper .order-summary { list-style: none; margin: 0; padding: 20px; background-color: #ececec; }
.steps-content [data-step] .preview-wrapper .order-summary li { display: flex; justify-content: space-between; margin-bottom: 12px; font-weight: bold; }
.steps-content [data-step] .preview-wrapper .order-summary li .price,
.steps-content [data-step] .preview-wrapper .order-summary li .addon-price { margin-left: 24px; flex-shrink: 0; }
.steps-content [data-step] .preview-wrapper .order-summary .total { display: flex; justify-content: space-between; font-size: 36px; font-weight: bold; }
.steps-content [data-step] .preview-wrapper .usp-section { margin-top: 30px; }

/* Preview Image */
#swal2-content { position: relative; }
.preview-loader { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; background-color: #f7f7f7; }
.preview-loader img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50% !important; background-color: #ffffff; }
.preview-loader .loader-2,
.preview-loader .loader-3 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }

.steps-footer.sticky { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1; background-color: #ffffff; padding: 12px; box-shadow: 0 3px 12px 0px rgb(0 0 0 / 34%); }
.steps-footer { padding: 12px 0; position: absolute; left: 0; right: 0; bottom: 0; }
.steps-footer .button-wrapper { height: 50px; }
.steps-footer .button-wrapper .prev { display: none; }
.steps-footer .button-wrapper .next { float: right; }
.steps-footer .button-wrapper .finish { float: right; display: none; }

.uploader { background-color: #ededed; height: 30vw; display: flex; align-items: center; justify-content: center; }
.uploader form button { position: relative; overflow: hidden; }
.uploader form button input { position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; }

[data-step="1"] .alert { display: none; background-color: #ffec3e; padding: 14px; text-align: center; }
[data-step="1"] .alert i { margin-left: 4px; }

.preview { display: flex; width: 100%; height: 100%; overflow: hidden; }
.preview .controls { height: 100%; background-color: #6d6d6d; box-shadow: 0 10px 77px -15px rgb(0 0 0 / 34%); }
.preview .controls ul { height: 100%; margin: 0; list-style: none; color: #ffff; }
.preview .controls ul li { padding: 15px; display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 85px; cursor: pointer; }
.preview .controls ul li:hover { background-color: #4f4f4f; }
.preview .controls ul li.go-back { display: none; }
.preview .controls ul li span { margin-top: 12px; }
body.cutout-area-active .preview .controls ul li.cutout-area { background-color: #4f4f4f; }
.preview .image { position: relative; padding: 15px; height: 100%; flex-grow: 1; display: flex; justify-content: center; }
.preview .image img.image-preview { max-height: 100%; margin: auto; box-shadow: 0 10px 77px -15px rgb(0 0 0 / 34%); }
.preview .image .image-wrapper { position: relative; display: flex; }
.preview .image .image-wrapper .resolution-overlay { display: none; height: 100%; width: 100%; position: absolute; background-color: #ffffff63; top: 0; bottom: 0; }
.preview .image .image-wrapper .resolution-overlay .message { position: absolute; top: 50%; width: 100%; text-align: center; transform: translateY(-50%); background-color: #0000008c; color: #ffffff; }
.preview .image .preview-image-wrapper { display: none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #f7f7f7; padding: 15px; }
.preview .cutout-outer { display: none; position: absolute; height: 100%; width: 100%; border-color: #00000085; border-style: solid;     top: 50%; transform: translateY(-50%); }
body.cutout-area-active .preview .cutout-outer { display: block; }
.preview .cutout-inner { background-color: transparent; border: 1px dashed #f49b1d; height: 100%; }
.single-photo-wizard.preview-active .preview .controls ul li { display: none; }
.single-photo-wizard.preview-active .preview .controls ul li.go-back { display: flex; }
.single-photo-wizard.preview-active .preview .image .preview-image-wrapper { display: block; }
#uploadPreview { height: auto; width: auto; max-height: 100%; max-width: 100%; margin: auto; display: block; }

/* .variation-prices ul { list-style: none; margin: 0; } */
.variation-wrapper { background-color: #ededed; padding: 20px; }
.variation-wrapper.inactive { height: 0; overflow: hidden; padding: 0; }
.variation-wrapper .usp-sidebar { background-color: #ffffff; padding: 20px; font-size: 16px; }
.variation-wrapper .heading { font-weight: bold; margin: 12px 0; display: block; font-size: 20px; }
.variation-wrapper [name="orientation"] { width: 100%; padding: 5px 0; border: none; }
.variation-wrapper .variation-prices label { display: none; font-size: 15px; padding: 8px 20px; background-color: #ffffff; font-weight: 700; align-items: center; }
.variation-wrapper .variation-prices label.active { display: flex; }
.variation-wrapper .variation-prices label .name { flex-grow: 1; margin-left: 20px; }
.variation-wrapper .variation-prices label .name .label { font-size: 13px; font-weight: normal; border: 1px solid; padding: 2px 8px; margin-left: 4px; }
.variation-wrapper .total { display: flex; justify-content: space-between; font-size: 36px; font-weight: bold; padding: 12px; }

table.variations { display: none; }
.woocommerce-variation { display: none !important; }

.mobile-steps-headers { display: none; position: absolute; left: 0; right: 0; top: 0; }
.mobile-steps-headers.sticky { display: block; position: fixed; top: 0; z-index: 1; background-color: #ffffff; padding: 12px; box-shadow: 0 -3px 12px 0px rgb(0 0 0 / 34%); }
.mobile-steps-headers .step-heading { margin: 0; margin-bottom: 16px; }
.mobile-steps-headers .step-heading li { display: none; font-size: 22px; text-align: center; font-weight: 700; }
.mobile-steps-headers .step-heading li.active { display: block; }

.steps-progress { display: flex; list-style: none; margin: 0; }
.steps-progress li.active { background-color: #82c7d6; }
.steps-progress li { height: 8px; background-color: #e2e2e2; width: 100%; margin: 0 3px; }

.mobile-steps-footer { display: none; position: absolute; left: 0; right: 0; bottom: 0; }
.mobile-steps-footer.sticky { display: block; position: fixed; bottom: 0; left: 0; right: 0; z-index: 99; background-color: #ffffff; padding: 12px; box-shadow: 0 3px 12px 0px rgb(0 0 0 / 34%); }
.mobile-steps-footer .button-wrapper { display: flex; }
.mobile-steps-footer .button-wrapper .close,
.mobile-steps-footer .button-wrapper .prev { margin-right: 10px; display: none; }
.mobile-steps-footer .button-wrapper .proceed { margin-left: 10px; display: none; }
.mobile-steps-footer .button-wrapper .next,
.mobile-steps-footer .button-wrapper .choose-format,
.mobile-steps-footer .button-wrapper .save,
.mobile-steps-footer .button-wrapper .upload,
.mobile-steps-footer .button-wrapper .finish { width: 100%; display: none; }
.mobile-steps-footer .button-wrapper .next { float: right; }
.mobile-steps-footer .button-wrapper .next span { width: 95%; display: inline-block; }
.mobile-steps-footer .button-wrapper .next i { width: 5%; display: inline-block; }

.usp-section .back-product-page { display: block; margin: auto; margin-bottom: 20px; }
.usp-section ul { list-style: none; margin: 0; margin-bottom: 22px; }
.usp-section ul li i { margin-right: 12px; color: #99b2de; font-size: 28px; }
.usp-section .col { width: 100%; }
[data-step="3"] .usp-section .col { padding: 30px; background-color: #fcf8c8; }
.steps-content .product-size { display: none; }

#fb-root { display: none !important; }

.uploadcare--button.uploadcare--preview__back,
.uploadcare--button.uploadcare--dialog__close { color: #a3bae1; }

@media (min-width: 768px) and (max-width: 991px) {
    .uploader { height: 50vw; }
}

@media (min-width: 768px) {
    .mobile-steps-headers { display: none; }
}

@media (max-width: 767px) {
    .steps-content .row [class*="col-"] { margin-bottom: 20px; }
    .steps-headers { display: none; }
    .steps-footer { display: none; }
    /* [mobile-step]:not(.active) { display: none; } */
    .mobile-steps-footer { display: block; }
    .uploader { height: 100%; min-height: 270px; }
    .preview { flex-direction: column; }
    .preview .controls ul { display: flex; }
    .preview-wrapper h2 { padding-left: 15px; padding-right: 15px; margin-top: 20px; }
    .steps-content.container { padding-left: 0; padding-right: 0; }
    .steps-content [data-step] .preview-wrapper .preview-image #imagePreview { width: 100%; height: auto; }
    .steps-content .product-size { display: block; text-align: center; margin-top: 20px; }
    [data-step="0"] { height: 78vh; overflow-y: auto; }
    [data-step="1"] > .row { position: relative; }
    [data-step="1"] > .row > .variation { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ffffff; }
    [data-step="1"] > .row > .variation.active { display: block; }
    .variation-wrapper .total { display: none; }
    .preview .image img.image-preview { max-height: 50vh; }

    .preview .controls ul { justify-content: space-around; }
    .preview .controls ul li { font-size: 16px; padding: 16px 5px 5px 5px; flex-grow: 1; }
    .preview .controls ul li span { margin-top: 3px; }
}

@media (max-width: 575px) {
    
    .mobile-steps-headers { padding: 6px; }
    .mobile-steps-headers .step-heading { margin-bottom: 7px; }
    .mobile-steps-headers .step-heading li { font-size: 18px; }
    /* .steps-content .row .addon { padding-left: 0; padding-right: 0; } */
    .steps-content .row .addon .addon-wrapper { font-size: 16px; }
    .steps-content .row [class*="col-"] { margin-bottom: 0; }
    .steps-content { padding-top: 68px; padding-bottom: 58px; }
    .steps-content [data-step] .addon-heading { line-height: normal; font-size: 22px; }
    .steps-content [data-step] .addon-description { margin-bottom: 12px; }
    .steps-content [data-step] .option { line-height: normal; }
    .steps-content [data-step] .addon-wrapper { padding: 15px; }
    .steps-content [data-step] .addon-wrapper .addon-row { display: flex; overflow-x: auto; }
    .steps-content [data-step] .addon-wrapper .addon-row .addon-item { flex: 0 0 41%; padding-right: 0; }
    .steps-content [data-step] .addon-wrapper .item .item-wrapper img { height: 100px; }
    .steps-content [data-step] .addon-wrapper .item .item-wrapper .caption { font-size: 16px; line-height: normal; padding: 10px 2px; }
    .steps-content [data-step] .addon-wrapper .item-full { flex-direction: column; }
    .steps-content [data-step] .addon-wrapper .item-full img { width: 100%; }
    .steps-content [data-step] .addon-wrapper .item-full .content { margin-left: 0; margin-top: 20px; }
    .steps-content [data-step] .preview-wrapper .order-summary { font-size: 16px; }
}