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;
}

.list > ul > li {
    display: grid;
    grid-template-columns: 7fr 6em 10em;
    min-height: 3em;
}

.list > ul > li > item {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--column-width-min), 1fr));
}

.hotels {
    button#add, select[name=route] {
        float: right;
    }

    td.distances {
        text-align: right;
    }

    place {
        float: left;
        font-style: italic;
        padding-right: 0.5em;
    }

    .highway .distance {
        font-size: 0.7em;
        color: gray;
    }

    a {
        color: black;
    }

    > ul > li {
        padding: 1em;
        cursor: hand;
    }

    li:hover {
        background-color: #e4e4e4 !important;
    }

    li:nth-child(even) {
        background-color: #f5f5f5;
    }

    div.chargers a::before {
        content: "⚡️";
        display: inline-block;
        text-decoration: none;
        padding-right: 0.2em;
    }

    span.adjacency {
        padding: 0 1em;
        font-size: 0.7em;
        color: gray;
    }

    div.bookings a::before {
        content: "📆";
        display: inline-block;
        text-decoration: none;
        padding-right: 0.2em;
    }
}

#map-container {
    width: 400px;
    height: 300px;
}

dialog#hotel {
    &[open] {
        display: grid;
        padding-top: 2em;
    }

    section.controls {
        position: absolute;
        width: 100%;

        button {
            float: right;
            margin: 0.5em;
        }

        button#save, button#cancel {
            display: none;
        }
    }

    section.edit {
        display: none;

        input {
            width: 90%;
        }

        > fieldset {
            border-color: #f7f7f7;

            fieldset {
                border-color: white;
            }
        }
    }

    &.editing {
        section.display {
            display: none;
        }

        section.controls {
            button#edit, button#close {
                display: none;
            }

            button#save, button#cancel {
                display: inline-block;
            }

            button.remove {
                margin-left: auto;
            }
        }

        section.edit {
            display: block;
        }

        li {
            display: flex;
        }

        .error {
            display: none;
        }

        .save-failed .error.save-failed, .load-failed .error.load-failed {
            display: block;
        }

        .error[for]:not([hidden]) {
            display: block;
        }

        input[type=radio] {
            width: auto;
        }

        button {
            display: block;
        }
    }

    grid-template-columns: repeat(auto-fit, minmax(10em, 400px));

    label {
        display: block;
        margin-top: 0.5em;
        font-size: 0.8em;
        color: gray;
    }

    #visits .date {
        padding-left: 0.5em;
        font: monospace;
    }

    #visits .name {
        padding-left: 0.5em;
        color: gray;
    }

    a {
        display: block;
    }
}

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 (min-width: 800px) {
    .hotel-name {
        --column-width-min: 10em;
    }

    .highway {
        --column-width-min: 6em;
    }

    .distances {
        --column-width-min: 10em;
    }

    .options {
        --column-width-min: 10em;
    }
}

@media screen and (max-width: 800px) and (min-width: 600px) {
    .hotels .address {
        font-size: 0.7em;
    }

    .hotels ul li:first-child .hotel-name div:last-child {
        display: none;
    }
}

@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;
        }

        > ul {
            padding-left: 0;
        }

        > ul > li {
            grid-template-columns: 100%;
        }

        thead, > ul > li:first-child {
            display: none;
        }

        tr, > ul > li {
            margin-bottom: 15px;
            border: 1px solid #ddd;
        }

        td, > ul > li div[data-label] {
            position: relative;
            padding-left: 4.5em !important;
            text-align: left;
            min-height: 1em;
        }

        td::before, > ul > li  div[data-label]::before {
            content: attr(data-label);
            position: absolute;
            left: 10px;
            font-weight: bold;
        }
    }
}