.modal {
    display: none;

    --modal-bg: #fff;
    --modal-ba: 30px;
    &.open{
        display: block;
    }
    .overlay{
        --bg: #0000009C;
        --backdrop-filter: none;

        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--bg);
        backdrop-filter: var(--backdrop-filter);
        z-index: 10000000;
    }
    .modal_body{
        position: fixed;
        background: var(--modal-bg);
        box-shadow: 0 3px 14px rgba(74, 58, 255, 0.03), 0 -2px 4px rgba(20, 20, 43, 0.12), 0 12px 44px rgba(20, 20, 43, 0.34);
        border-radius: var(--modal-ba);

        width: var(--modal-width);
        height: var(--modal-height);
        padding: var(--modal-padding);

        left: calc(50% - (var(--modal-width) / 2));
        top: calc(50% - (var(--modal-height) / 2));
        z-index: 1000000000;

        box-sizing: border-box;
    }
}