[data-page="database"] [data-type="index#session"] {
    grid-column: span 2;
}

@media screen and (max-width: 800px) {
    [data-page="database"] [data-type="index#session"] {
        grid-column: span 1;
    }
}

[data-type="index#session"].object-type {
    background: linear-gradient(to bottom right, rgb(2, 159, 136), rgb(89, 125, 132))
}

#conference-clock {
    font-family: monospace;
}

#conference-clock.active {
}

#conference-clock.freeze {
    background-color: rgb(39, 96, 203);
    color: white;
    padding-left: 0.5em;
}

#conference-clock.freeze::before {
    content: "";
    height: 1em;
    width: 1em;
    border-radius: 100%;
    display: inline-block;
    background: currentColor;
    transform: translateY(2px);
    margin-right: 0.5em;
}

#conference-clock.freeze:hover,
#conference-clock.freeze:active {
    background-color: rgb(66, 113, 201);
}

#conference-clock-config {
    position: fixed;
    bottom: 0.25em;
    right: 0.75em;
    top: unset;
    left: unset;
    width: 100%;
    max-width: 300px;
    padding-bottom: 2.5em;
    height: fit-content;
    border-radius: 1em;
    margin: 0;
    z-index: 10;
}

#conference-clock-config .mode {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;

    position: relative;
    padding: 0;
    border-radius: 0;
}

#conference-clock-config .mode input[type="radio"]{
    position: absolute;
    opacity: 0;
}

#conference-clock-config .mode label {
    border: solid 1px transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 3em;
    cursor: pointer;
    border-radius: 5px;
}

#conference-clock-config .mode label img {
    height: 1.75em;
    margin-right: 1ex;
}

#conference-clock-config .mode input:checked + label {
    border-color: var(--active-color);
    background-color: color-mix(in hsl, var(--active-color), black 25%);
}

#conference-clock-config .mode input[value="realtime"] + label {
    --active-color: green;
}

#conference-clock-config .mode input[value="freeze"] + label {
    --active-color: rgb(39, 96, 203);
}

#conference-clock-config fieldset {
    border: none;
    padding: 0;
}

#conference-clock-config fieldset[disabled]{
    display: none;
}