dialog[data-html-dialog="modal"] {
    border: 0;
    border-radius: 0.35rem;
    box-shadow: 0 0 1rem hsla(0, 0%, 0%, 0.5);
    min-width: 30ch;
    max-height: 90vh;
}
dialog[data-html-dialog="modal"]::backdrop {
    background-color: hsla(0, 0%, 30%, 0.3);
}

dialog[data-html-dialog="modal"] header.html-dialog-header-content {
    padding: .5rem;
    position: relative;
    border-bottom: 1px solid hsla(0, 0%, 0%, 0.15);
}
dialog[data-html-dialog="modal"] header .html-dialog-header-title {
    color: hsla(0, 0%, 50%, 1);
    text-align: center;
    text-transform: capitalize;
    font-size: x-large;
}
dialog[data-html-dialog="modal"] header .html-dialog-header-loading {
    text-align: center;
}

dialog[data-html-dialog="modal"] div.html-dialog-content {

}

dialog[data-html-dialog="modal"] footer.html-dialog-footer-content {
    text-align: right;
    padding: 1rem .5rem 0 .5rem;
    border-top: 1px solid hsla(0, 0%, 0%, 0.15);
}
dialog[data-html-dialog="modal"] footer > a {
    width: 5rem;
}

dialog[data-html-dialog="menu-dialog"] {
    min-width: 10rem;
    max-width: 20rem;
    margin-top: 0.125rem;
    margin-bottom: 0.125rem;
    border: 1px solid #dddbda;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    background: white;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16);
}
dialog[data-html-dialog="menu-dialog"] a {
    color: #0070d2;
    text-decoration: none;
    display: block;
    padding: 0.5rem 1.2em;
}
dialog[data-html-dialog="menu-dialog"] a:hover {
    background-color: #f1f1f1;
}

.html-dialog-btn {
    position: relative;
    display: inline-block;
    border: 1px solid transparent;
    border-radius: .25rem;
    padding: 0 .5rem; /*top-bottom right-left*/
    background-color: white;
    color: darkgray;
    line-height: 1.875rem;
    white-space: normal;
    font-family: inherit;
    text-overflow: ellipsis;
    text-decoration: none;
    text-align: center;
    text-justify: auto;
    margin-left: .5rem;
    margin-right: .5rem;
    cursor: pointer;
    overflow: hidden;
}

.html-dialog-btn_transparent {
    background-color: transparent !important;
    fill: hsla(0, 0%, 50%, 1);
    color: hsla(0, 0%, 50%, 1);
    width: 1.5rem;
    height: 1.5rem;
}
.html-dialog-btn_transparent:hover {
    box-shadow: 0 0 .5rem hsla(0, 0%, 50%, 1);
}

.html-dialog-btn_close-modal {
    position: absolute;
    top: -.75rem;
    right: -1.25rem;
}

.html-dialog-btn_icon {
    position: absolute;
    max-width: .875rem;
    max-height: .875rem;
    fill: currentColor;
}
.html-dialog-message_icon {
    position: absolute;
    max-width: 3rem;
    max-height: 3rem;
    fill: hsla(38, 100%, 58%, 1); /* #FFB028 */
}
.html-dialog-grid {
    display: grid;
    padding: 1rem;
}
.html-dialog-grid_message {
    grid-template-columns: 1fr 4fr;
}
.html-dialog-btn_icon-close-modal {
    top: .25rem;
    left: .25rem;
}

.html-dialog_no-click {
    pointer-events: none;
}