﻿div.dialog-background
{
    left: 0;
    top: 0;
    position: fixed;
    background: #000a;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    backdrop-filter: blur(10px);
    
}

div.dialog
{
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0 10px #0005; 
    display: grid;
    grid-template-areas:
        "header"
        "main"
        "footer";
    grid-template-rows: auto minmax(100px, auto) auto;
}

div.dialog > header
{
    grid-area: header;
    text-align: center;
    font-size: 1.2em;
    color: #fff;
    padding: 10px;
    background: linear-gradient(90deg, #96caf6, #2678bd);
    border-radius: 4px 4px 0 0;
}
div.dialog > .dialog-content
{
    padding: 10px;   
    grid-area: main;
}
div.dialog > footer
{
    border-top: solid 1px #aaa;
    grid-area: footer;
}



input[type='file']
{
    width: 100%;
}

input[type='file']::file-selector-button
{
    margin: 10px;
    border: none;
    display: inline-block;
    background-color: #6b8bac;
    color: #fff;
    font-size: 1.0rem;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 0 0px #0006;
    transition: box-shadow 100ms ease-in-out;
}

input[type='file']::file-selector-button:hover
{
    box-shadow: 0 0 10px #0006;
}

ul.toggle
{
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    list-style: none;
}

ul.toggle > li > button
{
    border-radius: 4px;
}


ul.toggle > li > button:hover
{
    background-color: #555a;
}

ul.toggle > li.control > button
{
    background-color: #558a;
}

ul.toggle > li.control > button:hover
{
    background-color: #558d;
}

ul.toggle > li > button
{
    border: none;
    background-color: #5555;
    padding: 10px;
    height: 40px;
}

ul.toggle > li.true > button
{
    background-color: #5a58;
}

ul.toggle > li.true > button:hover
{
    background-color: #5a5a;
}

ul.toggle > li.false > button
{
    color: #555f;
}

ul.toggle > li.false > button:hover
{
    background-color: #aaad;
}