/***ADMIN BAR CLIP****/
@media screen and (min-width: 783px) {

    .admin-bar {

        .sf_modal {
            height: calc(100vh - 32px) !important;
            top: 32px !important;
        }
    }
}

@media screen and (max-width: 782px) {

    .admin-bar {

        .sf_modal {
            height: calc(100vh - 46px) !important;
            top: 46px !important;

            .stark_modal_window {
                height: calc(100dvh - 46px) !important;
                max-height: calc(100dvh - 46px) !important;
            }
        }

    }
}

.sf-modal-open {
    overflow: hidden;
}

.sf_modal {
    --sf-modal-overlay: rgb(0 0 0 / 12%);
    --sf-modal-backdrop-filter: blur(4px);
    --sf-modal-window-surface: rgb(72 68 92 / 60%);
    --sf-modal-window-text: var(--text, rgb(255 255 255 / 90%));
    --sf-modal-window-shadow: 0 0 0 2px rgb(0 0 0 / 13%) inset;
    --sf-modal-window-backdrop-filter: blur(30px) saturate(120%);
    --sf-modal-title-text: rgb(255 255 255 / 90%);
    --sf-modal-close-filter: none;

    --sf-border-width: 1.5px;
    --sf-border-style: solid;
    --sf-border-color: rgb(255 255 255 / 32%);

    --sf-modal-title-border:
        var(--sf-border-width)
        var(--sf-border-style)
        var(--sf-border-color);
}

.sf_modal.sf-modal-context--admin {
    --sf-modal-overlay: rgb(0 0 0 / 18%);
    --sf-modal-backdrop-filter: blur(2px);
    --sf-modal-window-surface: #fff;
    --sf-modal-window-text: #1d2327;
    --sf-modal-window-shadow: 0 1px 3px rgb(0 0 0 / 14%), 0 8px 30px rgb(0 0 0 / 16%);
    --sf-modal-window-backdrop-filter: none;
    --sf-modal-title-text: #1d2327;
    --sf-modal-close-filter: invert(1);

    --sf-border-width: 1px;
    --sf-border-style: solid;
    --sf-border-color: #d8d8d8;

    --sf-modal-title-border:
        var(--sf-border-width)
        var(--sf-border-style)
        var(--sf-border-color);
}

/***MODAL WINDOW****/
.sf-modal-open .sf_modal {
    opacity: 1 !important;
    visibility: visible !important;

    .stark_modal_window {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

.sf_modal::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    backdrop-filter: var(--sf-modal-backdrop-filter);
}

.sf_modal {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 999999;
    background: var(--sf-modal-overlay);
    align-content: center;
    opacity: 0;
    visibility: hidden;
    user-select: none;

    .stark_modal_window {
        position: relative;
        width: 500px;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: min-content minmax(0, 1fr);
        margin: 2em auto;
        height: 90vh;
        max-height: 90vh;
        min-height: 0;
        padding: 0;
        overflow: hidden;
        border-radius: 12px;
        background-clip: padding-box;
        background-color: var(--sf-modal-window-surface) !important;
        backdrop-filter: var(--sf-modal-window-backdrop-filter);
        box-shadow: var(--sf-modal-window-shadow);
        color: var(--sf-modal-window-text);
        z-index: 9;
        opacity: 0;
        visibility: hidden;

        .sf-modal-title-cont {
            position: relative;
            font-family: 'Poppins';
            margin: 0 1em;
            display: grid;
            justify-content: space-between;
            border-bottom: var(--sf-modal-title-border);
            grid-template-columns: 40px minmax(0, 1fr) min-content;
            grid-template-rows: 40px;
            grid-template-areas: 'back title close';
            z-index: 999;

            .modal-title {
                position: relative;
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                align-items: center;
                padding-top: 0;
                color: var(--sf-modal-title-text);
                font-size: 18px;
                clear: none;
                font-weight: 600;
                justify-content: center;
                z-index: 999;
                margin: 0;
                grid-area: title;
            }

            .close-modal::after {
                content: "" !important;
                margin-right: 0;
                background: url("../design/images/columns.svg");
                background-size: contain !important;
                filter: var(--sf-modal-close-filter);
                width: 20px;
                height: 20px;
                position: absolute;
                top: 10px;
                right: 10px;
            }

            .close-modal {
                width: 40px;
                height: 40px;
                cursor: pointer;
                font-size: 0;
                z-index: 999;
                grid-area: close;
            }
        }

        .stark_modal_page {
            height: 100%;
        }
    }
}

@media screen and (min-width: 901px) {
    
    .stark_modal_window.wide {
        width: calc(100% - 4em) !important;
        height: calc(100% - 4em) !important;
        max-width: 90vw !important;
        max-height: 90vh !important;
        margin: 2em;
        justify-self: center;
    }
}

@media screen and (min-width: 601px) {
    
    .stark_modal_window.flex {
        height: min-content !important;
    }
}

@media screen and (max-width: 600px) {

    .sf_modal {

        .stark_modal_window {
            width: 100% !important;
            margin: 0 !important;
            height: 100dvh !important;
            max-height: 100dvh !important;
            border-radius: 0 !important;
            box-shadow: unset !important;
            /*transition: transform 0.4s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.35s cubic-bezier(0.77, 0.2, 0.05, 1), top 0.4s;*/
            /*transform: translateY(100%);*/
        }
    }
}