.modal {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    --modal-bg: #fff;
    --modal-border: unset;
    --modal-width: 598px;
    --modal-height: unset;
    --modal-max-height: calc(100svh - (var(--modal-margin-top) * 2));
    --modal-margin: 30px 0;
    --modal-margin-top: 30px;
    --modal-padding: 0;
    --modal-inf-padding: 15px 30px 30px 30px;

    --modal-title-size: 18px;
    --modal-title-weight: bold;

    --modal-header_padding: 15px;
    --modal-header_margin_btm: 10px;
    --modal-header_border_bottom: 1px solid #e5e5e5;

    box-sizing: border-box;

    z-index: 10000000;

    display: none;
    &.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_container_content{
        overflow: auto;

        position: relative;
        background: var(--modal-bg);
        border: var(--modal-border);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        border-radius: 6px;

        width: var(--modal-width);
        height: var(--modal-height);
        max-height: var(--modal-max-height);
        margin: var(--modal-margin);
        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;
    }
    .modal_header{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--modal-header_margin_btm);

        padding: var(--modal-header_padding);
        background: var(--modal-bg);
        border-bottom: var(--modal-header_border_bottom);

        position: sticky;
        top: 0;
        left: 0;

        .modal_title{
            font-size: var(--modal-title-size);
            font-weight: var(--modal-title-weight);
        }
        img{
            --filter: brightness(0) saturate(100%) invert(82%) sepia(0%) saturate(1492%) hue-rotate(155deg) brightness(95%) contrast(87%);
            width: 10px;
            display: block;
            cursor: pointer;
            filter: var(--filter);
            &:hover{
                --filter: none;
            }
        }
    }
    .modal_body{
        padding: var(--modal-inf-padding);
    }
}