.fpd-wrapper {
    
    &.fpd-topbar,
    &.fpd-off-canvas {
        
        > fpd-main-wrapper {
            flex-basis: 100%;
        }
        
    }

    &.fpd-off-canvas {
    
        > fpd-main-wrapper {
            order: 2 !important;
        }
    }
    
    > fpd-main-wrapper {
        
        display: flex;
        overflow: hidden;
        flex: 1 0;
        min-height: 400px;
        background: var(--fpd-canvas-bg);
        transition: opacity 300ms ease-out;
        order: 3;
        position: relative;
        
        .fpd-product-stage {
            
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            direction: ltr;
            max-height: 100%;
            margin: auto;
            width: 100%;
            
            > .fpd-view-stage {
                background: rgba(255,255,255, 0.7);
                height: 100%;

                textarea {
                    left: -10000px !important;
                    top: 50% !important;
                }

            }
            
            > .fpd-zoom-image {
                position: absolute;
                top: 0;
                left: 0;
                max-width: 100%;
            }
            
        }
        
        &.fpd-drag canvas {
            cursor: grab !important;
        }

        > .fpd-warnings {
            position: absolute;
            width: 90%;
            left: 5%;
            top: 20px;
            font-size: 14px;

            > .fpd-size-warning {
                display: flex;
                flex-direction: row;
                padding: 12px;
                background: var(--fpd-yellow-color);
                color: var(--fpd-yellow-contrast-color);
                border-radius: var(--fpd-border-radius);
                border: 1px solid var(--fpd-yellow-contrast-color);
                box-shadow: 0 0 6px rgba(0,0,0,0.1);
                justify-content: space-between;
                gap: 10px;

                .fpd-btn {
                    background-color: #3f3f3f;
                    margin: 0;
                    white-space: nowrap;
                    max-height: 35px;
                }
            }
        }

        > .fpd-advanced-image-editor {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background: #fff;
            z-index: 100;

            .fpd-close {
                position: absolute;
                right: 10px;
                top: 10px;
                font-size: 16px;
                z-index: 1000;
                cursor: pointer;
                opacity: 0.6;

                &:hover {
                    opacity: 1;
                }
            }

            .fpd-done {
                position: absolute;
                background: var(--fpd-secondary-color);
                color: var(--fpd-secondary-fg-color);
                border-radius: var(--fpd-border-radius);
                padding: 6px 12px;
                right: 10px;
                bottom: 10px;
                font-size: 16px;
                z-index: 1000;
                cursor: pointer;

            }
        }
        
    }
            
}

.fpd-wrapper.fpd-layout-small {
    
    .fpd-size-warning {
        flex-direction: column !important;

        .fpd-btn {
            justify-content: center;
        }
    }
}