dialog h1 {
    padding-top: 0;
}

dialog {
    border: 1px solid grey;
    border-radius: 1em;
    width: max-content;
    margin: 3em auto;
    box-shadow: 0 6px 13px -6px #8080809c;
    position: fixed;
    background-color: white;
    min-width: 20em;
    max-width: calc(100% - 8em);
    max-height: calc(100% - 7em);
    display: flex;
    flex-direction: column;
    padding: 0;
}
dialog button[type="submit"] {
    position: absolute;
    right: 3em;
}
dialog {
    margin: auto;
}
.dialog-content {
    padding: 2em 2.5em 2.5em;
    overflow: auto;
}



.toast-message {
    font-size: 1.1em;
    transition: all 200ms;
    position: fixed;
    top: 5.5em;
    right: 1em;
    text-align: right;
    border-radius: 1.5em;
    padding: 0.5em 2em 0.5em 2em;
    max-width: 24em;
}
.toast-hide {
    transform: translateX(calc(100% + 1em));
}

.toast-message::before {
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    padding-right: 0.5em;
}
.toast-success {
    background-color: lightgreen;
}
.toast-success::before {
    content: "\f058 ";
}
.toast-info {
    background-color: lightblue;
}
.toast-info::before {
    content: "\f05a ";
}
.toast-warning {
    background-color: #ffcd7a;
}
.toast-warning::before {
    content: "\f06a ";
}
.toast-error {
    background-color: #ff8c8c;
}
.toast-error::before {
    content: "\f057 ";
}

@media (max-width: 750px) {
    dialog {
        max-width: calc(100% - 1em);  
    }
}