#parser-input,
#parser-format
{
 display:flex;
 flex-wrap:nowrap;
 align-items:center;
 gap:0.5em
}

#parser-input
{
 flex-direction:row
}

#VLFileDropper
{
 flex-basis:100%;
 flex-grow:9999
}

#parser-format
{
 flex-direction:column
}

.area.area-format
{
 max-width:50ch;
 display:flex;
 margin:0.5em auto;
 padding:0.25em
}

.area-format select
{
 flex:1;
 font-size:1.5rem;
 text-align-last:center
}

#parser-format input
{
 max-width:5ch;
 text-align:center
}

#parser-output summary
{
 cursor:pointer;
 padding:0.25em
}

.area
{
 margin:0.5em;
 padding:0
}

.area-download
{
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:0.5em
}

.area-download>:not(.VLButton)
{
 flex-basis:100%;
 font-size:1.25rem;
 font-weight:normal;
 line-height:1.5;
 border:0;
 text-align:center;
 color:var(--grey8)
}

label
{
 display:flex;
 align-items:center;
 width:100%;
 gap:0.5em
}

label > span,
label > :is(input, select)
{
 font-size:0.75rem;
 line-height:1
}

label > span
{
 flex-grow:1;
 flex-basis:15ch
}

label > :is(input, select)
{
 flex-grow:1;
 flex-basis:100%
}

.area .summary-suffix .VLButton
{
 margin-left:2em;
 display:none
}

.area details[open] .summary-suffix .VLButton
{
 display:inline-block
}

.area-filters :nth-child(2n of .filter-row)
{
 background-color:var(--grey2)
}

.filter-row
{
 display:flex;
 flex-direction:row;
 align-items:flex-start;
 border-radius:var(--UI-small-border-radius);
 margin-block:0.25em;
 padding-block:0.25em
}

.filter-values
{
 flex:1;
 display:grid;
 grid-template-columns:min-content min-content 1fr min-content;
 gap:0.25em;
 align-items:flex-start
}

.filter-values :focus
{
 outline:1px solid var(--blue3)
}

.error-message
{
 padding:0.5em 1em;
 margin:1em 0;
 font-size:0.75rem;
 border-left:4px solid var(--error-border-color);
 border-top-left-radius:4px;
 border-bottom-left-radius:4px;
 background-color:var(--error-background-color);
 color:var(--error-color)
}