html,
body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

@keyframes window {
    0% {
        transform: scale(.3);
        filter: blur(.9rem);
        opacity: .2;
    }

    100% {
        transform: scale(1);
        filter: blur(0);
        opacity: 1;
    }
}

.dialog {
    border-radius: .5rem;
    z-index: 10;
    display: block;
    position: absolute;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    margin: 10px;
    text-align: center;
    animation: 400ms ease window;
    transition: opacity 200ms ease, transform 200ms ease, filter 180ms linear;
}

.dialog-title {
    border-bottom: 1.5px solid #000;
    text-align: center;
    border-radius: .5rem .5rem 0 0;
    color: #fff;
    background-color: rgba(0, 0, 0, .6);
    font-size: 8pt;
    font-weight: bold;
    padding: 2px 6px;
    cursor: move;
    /* zoom: 1.02; */
    transform: scale(1.008);
}

.dialog-content:not(.dialog.menu .dialog-content) {
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 8px;
    padding: 4px 10px;
    text-align: center;
}

@media (prefers-color-scheme: light) {
    .dialog-content * {
        color: #000;
    }

    .dialog {
        /* border: 2px solid #fff; */
        /* background-color: rgba(137, 183, 255, .1); */
        /* box-shadow: 8px 8px 20px 0 rgb(55 99 170 / 10%), -8px -8px 20px 0 #fff !important; */
        box-shadow: 8px 8px 24px 0 rgb(55 49 70 / 15%);
        /* background: linear-gradient(0deg, #fff, #f9faff) !important; */
        background: rgba(255, 255, 255, .7);
    }
}

@media (prefers-color-scheme: dark) {
    .dialog-content * {
        color: #000;
    }

    .dialog {
        background-color: rgba(64, 64, 64, .7);
        -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .4);
        -moz-box-shadow: 0 4px 6px rgba(0, 0, 0, .4);
        box-shadow: 0 4px 6px rgba(0, 0, 0, .4);
    }
}

.dialog.menu .dialog-content {
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 8px;
    border-radius: 0 0 .6rem .6rem;
}

.dialog.menu {
    min-width: 6.6rem;
}

.dialog ul {
    padding: 0;
    position: relative;
    top: -10px;
}

.dialog ul li {
    cursor: pointer;
    padding: 2px 8px 2px 8px;
    /* margin-bottom: 4px; */
    /* width: 100%; */
}

.dialog ul li:hover {
    background: rgba(255, 255, 255, .1);
}

.dialog.menu .dialog-content ul {
    height: 127px;
}

.dialog.menu .dialog-content {
    padding-top: .8rem;
}

.dialog.menu {
    position: absolute;
    top: calc(100vh - 12.7rem);
    left: 0;
}

.dialog * {
    font-size: 12px;
}

.dialog-title a:not(.v86.dialog .dialog-title a) {
    cursor: pointer;
    text-decoration: none;
    position: absolute;
    right: 6px;
}

.v86.dialog .dialog-title a {
    cursor: pointer;
    text-decoration: none;
    position: absolute;
    border-radius: 50%;
    height: 9px;
    width: 9px;
    margin-top: 3.6px;
    line-height: 8.5px;
    font-size: 8px;
    font-weight: 600;
    color: transparent;
    transition: all 20ms ease-in-out;
}

/* .v86.dialog .dialog-title a:hover~a,
.v86.dialog .dialog-title a:hover,
.v86.dialog .dialog-title a:hover+a,
.v86.dialog .dialog-title a:hover+a::first-letter, */
.v86.dialog .dialog-title:hover a {
    color: rgba(18, 18, 18, .6);
}

.v86.dialog .dialog-title a:last-of-type {
    left: 6px;
    background: #ee5a3e;
    border: 1px solid #d13e31;
}

.v86.dialog .dialog-title a:first-of-type {
    left: 20px;
    background: #f4bd3f;
    border: 1px solid #d8a540;
}

.v86.dialog .dialog-title a:nth-of-type(2) {
    left: 34px;
    background: #52c444;
    border: 1px solid #40a62c;
}

.v86.dialog .dialog-title a:active {
    filter: brightness(.7) contrast(1.2);
}