.fpd-modal-overlay {
    position: absolute !important;
    width: 100% !important;
    bottom: 0 !important;
    right: 0 !important;
    top: 0 !important;
    left: 0 !important;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
    overflow: auto;

    > .fpd-modal-inner {
        display: flex;
        align-items: center;
        background: #fff;
        width: 450px;
        max-width: 100%;
        min-height: 200px;
        position: absolute;
        left: 50%;
        top: 30%;
        padding: 40px;
        z-index: 10020;
        max-width: 100%;
        transform: translateX(-50%);
        box-sizing: border-box;
        border-radius: var(--fpd-border-radius);

        > .fpd-modal-close {
            position: absolute;
            right: 15px;
            top: 15px;
            font-size: 16px;
            cursor: pointer;
            opacity: 0.6;
            transition: opacity 200ms ease-out;

            &:hover {
                opacity: 1;
            }
        }

        > .fpd-modal-content {
            flex: 1 100%;
            text-align: center;
            color: rgba(0,0,0,0.7);
            line-height: 22px;
            word-break: break-word;
        }
    }
    
    &.fpd-fullscreen > .fpd-modal-inner {
        width: 100%;
        height: 100%;
        top: 0;
        overflow: auto;
        border-radius: 0;
    }

    &.fpd-modal-internal {
        z-index: 10000000000;
    }
}

.fpd-modal-overlay.fpd-modal-product-designer,
.fpd-overflow-hidden .fpd-modal-overlay {
    position: fixed !important;
}

/* Modal Types */

.fpd-modal-internal[data-type="prompt"] input {
    width: 100%;
    display: block;
}

.fpd-modal-internal[data-type="prompt"] {
    text-align: center;
}

.fpd-modal-internal[data-type="confirm"] {
    text-align: center;
}

.fpd-modal-internal .fpd-confirm-msg {
    margin-bottom: 10px;
}

/* Modal Product Designer */

.fpd-modal-product-designer {

    display: none;
    pointer-events: none;
    overflow: hidden !important;

    &.fpd-show {
        display: block;
        pointer-events: all;
    }

    > .fpd-modal-inner {

        padding: 0;

        > .fpd-wrapper {
            flex: 1 100%;
            margin: 0 0 !important;
            height: 100%;
            box-shadow: none !important;

            fpd-main-bar {
                height: ~"calc(100% - var(--fpd-actions-bar-height))" !important;
            }

            &.fpd-layout-small {

                fpd-main-wrapper {
                    height: ~"calc(100% - var(--fpd-actions-bar-height) - var(--fpd-sidebar-nav-width))" !important;
                }

            }
        }

    }

}

body.fpd-modal-mode-active:not(.fpd-modal-designer-visible) {

    fpd-element-toolbar {
        display: none !important;
    }

}

//Modules

.fpd-container .fpd-modal-content {

    fpd-module-save-load {
        padding: 0;


        .fpd-saved-designs {
            max-height: 200px;
        }

    }

}

