nav.main {
    width: 100%;
    background: black;
    margin-bottom: 1em;

    input#menu-toggle {
        display: none;
    }

    label[for=menu-toggle] {
        display: none;
        vertical-align: middle;
        margin: 0 0.3em;
    }

    #menu-expanded {
        display: none;
    }

    a {
        display: inline-block;
        padding: 0.5em;
        color: white;
        text-decoration: none;
    }

    a:hover {
        background-color: darkgray;
    }
}

nav.main a.active {
    background-color: lightgray;
    display: inline-block !important;
}

.loading {
    width: 100%;
}

.loading .progress {
    width: 100%;
    text-align: center;
    font-style: italic;
}

.loading.loaded .progress {
    display: none;
}

.loading {
    table, form, .failed {
        display: none;
    }
}

.loading.loaded {
    table {
        display: table;
    }

    form {
        display: block;
    }
}

.loading.failed {
    .progress {
        display: none;
    }

    .failed {
        display: block;
    }
}

.users table th {
    text-align: left;
}

.users table {
    td, th {
        padding: 0.5em 1em;
    }
}

.users table tbody tr:hover td {
    background: #eeeeee;
    cursor: pointer;
}

form th, form td {
    vertical-align: top;
}

.spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background: radial-gradient(farthest-side,#b7b7b7 94%,#0000) top/3.8px 3.8px no-repeat,
           conic-gradient(#0000 30%,#b7b7b7);
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 3.8px),#000 0);
    animation: spinner-c7wet2 1.2s infinite linear;
}

@keyframes spinner-c7wet2 {
    100% {
        transform: rotate(1turn);
    }
}

dialog {
    border-width: 1px;
    border-radius: 8px;
    padding: 1em;
    width: 80%;
    height: 90%;
}

dialog > form > textarea {
    display: block;
    width: 100%;
}

.error {
    color: #7f0000;
}

@media screen and (max-width: 600px) {
    nav.main {
        > a {
            display: none;
        }

        label[for=menu-toggle] {
            display: inline-block;
        }

        input#menu-toggle:checked ~ div#menu-expanded {
            display: block;
            position: absolute;
            background: black;
            z-index: 1;

            a {
                display: block !important;
                padding: 0.5em;
                color: white;
                text-decoration: none;
            }
        }
    }

    .list {
        table, thead, tbody, th, td, tr {
            display: block;
        }
        
        thead {
            display: none;
        }
        
        tr {
            margin-bottom: 15px;
            border: 1px solid #ddd;
        }
        
        td {
            position: relative;
            padding-left: 4em !important;
            text-align: left;
            min-height: 1em;
        }
        
        td:before {
            content: attr(data-label);
            position: absolute;
            left: 10px;
            width: 45%;
            font-weight: bold;
        }
    }
}