dialog[open]
{
    display: flex;
}

.modal_dialog
{
    border:none !important;
    outline: none !important;
    
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 15px;
    background: #FFF;
    max-width: 100vw;
    max-height: 100vh;
    box-sizing: border-box;

    overflow: hidden;

    /* border: 5px solid blue !important; */

    *
    {
        box-sizing: border-box;
    }

    &::backdrop
    {
        background-color: rgba(134, 134, 134, 0.9);
    }

    .md_container
    {
        /* border: 5px solid red !important; */

        display: flex;
        flex-direction: column;
        /* height: -webkit-fill-available; */
        overflow: hidden;

        .md_header
        {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0px;
        }

        h2
        {
            margin: 0px;
            padding: 0px 16px;
        }

        .md_subheader
        {
            display: flex;
            justify-content: space-between;
            position: relative;
            padding: 8px 0px;
            border-top: 1px solid #E3E3E3;
            background: #FFF;
            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);

            .md_subheader_l
            {

            }
            .md_subheader_c
            {

            }
            .md_subheader_r
            {

            }
        }

        .md_body
        {
            display: flex;
            gap: 4px;

            padding: 8px 0px;
            overflow: auto;
            flex-grow: 1;

            &::-webkit-scrollbar {
                width: 10px;
            }
       
            /* Track */
            &::-webkit-scrollbar-track {
                box-shadow: inset 0 0 5px grey; 
                border-radius: 5px;
            }
        
            /* Handle */
            &::-webkit-scrollbar-thumb {
                background: rgb(218, 218, 218); 
                border-radius: 10px;
            }
        
            /* Handle on hover */
            &::-webkit-scrollbar-thumb:hover {
                background: rgb(255, 189, 189); 
            }
        }

        .md_footer
        {
            padding: 8px 0px;
        }        
    }
}