.VLPanel
{
 --close-color:var(--grey8);
 --close-color-hover:var(--blue4);
 --close-size:16px;
 --background-color:var(--grey1);
 --border-width:1px;
 --border-style:solid;
 --border-color:var(--grey3);
 --border-radius:var(--UI-small-border-radius);
 --title-color:var(--grey3-on);
 --title-background-color:var(--grey3);
 position:relative;
 width:0;
 height:0;
 background-color:var(--background-color);
 border:var(--border-width) var(--border-style) var(--border-color);
 border-radius:var(--border-radius);
 overflow:hidden;
 box-shadow:var(--box-shadow)
}

.VLPanel.VLPanel-show .VLPanel-close
{
 opacity:1
}

.VLPanel.VLPanel-show
{
 width:100%;
 height:100%;
 overflow:auto
}

.VLPanel h1
{
 font-size:1rem;
 line-height:1;
 font-weight:bold;
 margin:0;
 padding:0.5em;
 border-top-left-radius:var(--border-radius);
 border-top-right-radius:var(--border-radius);
 background-color:var(--title-background-color);
 color:var(--title-color)
}

.VLPanel h2
{
 display:inline-block;
 font-size:1rem;
 line-height:1;
 font-weight:normal;
 margin:0;
 padding:0
}

* :has(>.VLPanel-show)>:not(.VLPanel)
{
 display:none;
}

.VLPanel-close
{
 width:var(--close-size);
 height:var(--close-size);
 display:inline-block;
 cursor:pointer;
 position:absolute;
 top:1ch;
 right:1ch;
 opacity:0
}

.VLPanel .VLPanel-close:before,
.VLPanel .VLPanel-close:after
{
 content:'';
 position:absolute;
 top:50%;
 left:50%;
 width:100%;
 height:2px;
 background-color:var(--close-color);
 transform-origin:center center
}

.VLPanel .VLPanel-close:before
{
 transform:translate(-50%, -50%) rotate(45deg);
}

.VLPanel .VLPanel-close:after
{
 transform:translate(-50%, -50%) rotate(-45deg);
}

.VLPanel .VLPanel-close:hover:before,
.VLPanel .VLPanel-close:hover:after
{
 color:var(--close-color-hover)
}