.modal_container{
    position: fixed;
    z-index: var(--top-z-ind);
    inset: 0;

    display: none;
    &:has(.modal.open){
        display: block;
    }

    --modal-bg: var(--first-bg-clr);
    --modal-border: 1px solid var(--green-light-clr);
    --modal-box-shadow: none;

    --modal-width: 50svw;
    --modal-height: unset;

    --modal-name-font-size: 20px;
    --modal-name-font-weight: 700;
    --modal-name-color: #000;

    --modal-left-shift: 10px;
    --modal-right-shift: 10px;
    --modal-all-shift: 35px 40px 0;

    --modal-body-font-size: 14px;
    --modal-body-font-weight: 400;
    --modal-body-padding: 20px 40px;

    .overlay{
        position: absolute;
        inset: 0;

        background: hsla(0 0 0 / 0.5);

        animation: overlay-open 0.3s forwards;
    }
    .modal{
        height: var(--modal-height);
        width: var(--modal-width);

        background: var(--modal-bg);
        border: var(--modal-border);
        box-shadow: var(--modal-box-shadow);

        position: absolute;
        top: calc(var(--header-height) + 20px);
        left: calc(50svw - (var(--modal-width) / 2));

        display: none;

        border-radius: 6px;

        animation: modal-open 0.3s forwards;

        .first_line{
            display: flex;
            align-items: center;
            justify-content: space-between;

            padding: var(--modal-all-shift);
            width: 100%;
            .modal_name{
                font-size: var(--modal-name-font-size);
                font-weight: var(--modal-name-font-weight);
                color: var(--modal-name-color);
            }
        }

        .modal_body{
            padding: var(--modal-body-padding);

            font-size: var(--modal-body-font-size);
            font-weight: var(--modal-body-font-weight);

            form{
                .field_container{--margin: 0 0 20px 0;}
            }
        }

        &.open{
            display: block;
        }
    }
}

@keyframes modal-open {
    from {
        opacity: 0.7;
        scale: 0.9;

        visibility: hidden;
    }
    to {
        opacity: 1;
        scale: 1;

        visibility: visible;
    }
}

@keyframes overlay-open {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}