.inputDialog,
.editorDialog {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100vw;
    height: 100vh;
    background-color: #ffffffAA;
    z-index: 1020;

    display: grid;
    justify-content: center;
    align-content: center;
}

.inputDialog .container,
.editorDialog .container {
    width: 85vw;
    height: 70vh;
    border-radius: 0px 0px 0px 10px;
    background-color: silver;
    box-shadow: 0px 0px 3px black;

    display: grid;
    grid-template-rows: auto 1fr auto;
}

.inputDialog header,
.editorDialog header {
    background-color: gray;
    color: whitesmoke;
    padding: 5px;
    box-shadow: 0px 2px 2px #00000080;
}

.inputDialog main,
.editorDialog main {
    width: 100%;
    height: 100%;
    padding: 10px;
}

.inputDialog main,
.editorDialog main {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto 1fr;
}

/* .inputDialog textarea {
    width: 100%;
    height: 100%;
    resize: none;
} */

.inputDialog footer,
.editorDialog footer {
    border-top-left-radius: 10px;
    border-top: 1px solid gray;
    padding: 5px;

    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-rows: 1fr;
    gap: 10px;
}

.inputDialog .btn,
.editorDialog .btn {
    width: 150px;
    padding: 3px;
    margin-top: 5px;
    border: 1px solid black;
    border-radius: 5px;
    display: inline-block;
    justify-self: end;
    text-align: center;
    user-select: none;
    cursor: pointer;
}

.inputDialog .btn:hover,
.editorDialog .btn:hover {
    background-color: gray;
}