dialog {
    display: none;
    opacity: 0;
    translate: 0 25vh;
    transition-property: overlay display opacity;
    transition-duration: 0.6s;
    transition-behavior: allow-discrete;
    margin: auto;
    padding: auto;
    width: 90vw;
    max-width: 500px;
    border-radius: 10px;    
}

dialog[open] {
    display: block;
    opacity: 1;
    translate: 0 0;

    @starting-style {
        opacity: 0;
        translate: 0 -25vh;
    }
}

dialog::backdrop {
    transition-property: overlay display opacity;
    transition-duration: 0.6s;  
    transition-behavior: allow-discrete;   
    opacity: 0;
    background: black;
}

dialog[open]::backdrop {
    opacity: 0.75;
}

@starting-style {
    dialog[open]::backdrop {
        opacity: 0;
    }
}

.invalid {
    color: var(--meco-red) !important;
}

#divModal {
    border: none;
    outline: none;
    background: whitesmoke;

    .modal-close {
        position: absolute;
        top: 5px;
        right: 16px;
        color: gray;
        font-size: 2em;
        padding: 10px;
        cursor: pointer;

        & v-icon {
            width: 20px;
            color: gray;
            display: inline-block;            
        }        
    }

    .modal-content {
        display: grid;
        grid-auto-rows: Auto;
        grid-gap: 24px;
        padding-inline: 16px;
        padding-block: 24px;
        text-align: center;
    
        .header {
            & h5 {                
                display: inline;
                font-style: italic;
                color: gray;
            }

            .header-icon {
                display: inline-flex;
                position: relative;
                width: 64px;
                height: 64px;
                justify-content: center;                
                padding: 10px;
                border-radius: 50%;          
                margin-bottom: 10px;                     
            }

            .header-icon.red {
                background: rgba(205, 92, 92, 0.4);

                & v-icon {
                    color: rgb(205 92 92);
                }                
            }            

            .header-icon.green {
                background: rgba(143, 188, 143, 0.3);                 

                & v-icon {
                    color: rgb(143, 188, 143);
                }                
            }

            .header-icon.blue {
                background: rgba(70, 130, 180, 0.2);

                & v-icon {
                    color: steelblue;
                }                
            }

            & v-icon {
                width: 24px;
                color: rgb(143, 188, 143);
                place-self: center;
                position: relative;
                top: 3px;
            }
        }         
       
        .modal-row.left {
            text-align: left;
        }
            
    
        .modal-row.textarea {
            grid-row: span 2;
        }  
        
        .modal-row {
            display: grid;
            position: relative;
            height: 100%;
            text-align: center;
                
    
            & input:not([type=radio]), textarea, button, select {
                display: block;
                width: 100%;
                height: 55px;
                border-radius: 16px;
                box-sizing: border-box;
                font-size: 1em;
                border: 1px solid gray;
                font-family: inherit;
                outline: 0px;        
                appearance: none;   
            }

            & input, textarea, select {
                outline: none;
                padding-left: 16px;
            }
            & textarea {
                padding-top: 16px;
                height: 134px; /* 2x 55px + 24 (gap)) */
            } 

            & v-icon {
                position: absolute;
                top: 13px;
                left: 10px;
                width: 24px;
                color: slategray;
            }    
        } 

        .modal-row.icon {
            & v-icon {
                position: absolute;
                align-self: center;
                left: 10px;
                width: 24px;
                fill: darkslategray;
            }    
            & input, select, textarea{
                padding-left: 50px;   
            }            
        }        

        .modal-row.inline {
            grid-auto-columns: 1fr;
            grid-auto-flow: column;
            grid-gap: 1rem;
        }
        
        .modal-input {
            & input, button {
                display: inline-block;
                height: 50px;
                border-radius: 16px;
                box-sizing: border-box;
                font-size: 1em;
                border: 1px solid gray;
                font-family: inherit;
                outline: 0px;        
                appearance: none;                 
            }   

            & input {
                width: 100px;
                padding-left: 24px;
                margin-right: 24px;
            }

            & button{
                width: 100%;
            }            
        }

        & input.invalid, textarea.invalid, select.invalid {
            border: 2px solid red;        
        }   

        & button {
            border: none;
            cursor: pointer;
        }

        & button.inline {
            display: inline-block;
        }

        & button.green {
            background: darkseagreen;
        }

        & button.red {
            background: salmon;
        }         

        & button.disabled {
            pointer-events: none !important;
            background: lightgray !important;
            color: dimgray !important;
        }          

        & table {
            table-layout: fixed;
            border-collapse: collapse;
        }

        & table th, table td {
            padding-block: 6px;
            vertical-align: top;            
        }

        & table th:first-child, table td:first-child {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;            
            padding-right: 10px;
        }

        & table th.wrap:first-child, table td.wrap:first-child {
            white-space: normal;
        }        

        & table h5 {
            display: inline;
            font-style: italic;
            color: gray;
        }
    }    

    .radio-list {
        font-size: 1.4em;
        padding-inline: 10px;
    }

    .radio-list label {
        display: grid; 
        grid-template-columns: 1fr 32px;        
        text-align: left;
        padding-block: 16px;
        border-bottom: 1px solid gray;
        cursor: pointer; 
    }

    .radio-list input {
        width: 28px;
        justify-self: end;
    }    

    .radio-list input:focus {
        outline: none;        
    }

    .projects {
        margin-top: 24px;
        text-align: left;       
    }

    .projects > div {
        margin-bottom: 24px;
    }

    .projects .project {
        display: grid;
        grid-template-columns: 1fr auto;        
    }

    .projects .project label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: 10px;        
    }

    .projects .project span {
        text-align: right;
    }    
}