:root {
    font-family: 'Arial', sans-serif;
}

.client {
    background-color: #F8F8F8;
    border: 1px solid #C0C0C0;
    border-radius: 4px;
    padding: 0.5em;
    margin: 2em 0;
}

.client > div {
    display: flex;
    justify-content: center;
    gap: 2em;
    flex-wrap: wrap;
    margin-top: 1.5em;
}

.client > span {
    font-size: 0.75em;
    color: #808080;
    position: absolute;
}

.device {
    background-color: #F0F0F0;
    border: 1px solid #C0C0C0;
    border-radius: 4px;
    padding: 1em 1.5em;
    flex: 0 1 260px;
}

.device.online {
    background-color: #E0FFE0;
    border-color: #80C080;
}

.device.inactive {
    background-color: #E0E0E0;
    border-color: #B0B0B0;
    color: #808080 !important;
}

.device .name {
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
}

.device.online .name {
    color: #008000;
}

.device .id {
    text-align: center;
    font-size: 0.75em;
    color: #808080;
}

.device .date {
    text-align: center;
    font-size: 1em;
    font-weight: bold;
    margin-top: 1em;
}

.device.online .date {
    color: #008000;
}

.device .address {
    text-align: center;
    font-size: 0.75em;
    color: #808080;
}

.device .versions {
    display: flex;
    justify-content: space-between;
}

.device:not(.inactive) .versions .deprecated {
    color: #C00000;
}

img {
    width: 1em;
    height: 1em;
    transform: translateY(0.125em);
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #000000;
        color: #F0F0F0;
    }
    .client {
        background-color: #080808;
        border-color: #202020;
    }
    .device {
        background-color: #101010;
        border-color: #202020;
    }
    .device.online {
        background-color: #002000;
        border-color: #004000;
    }
    .device.inactive {
        background-color: #181818;
        border-color: #303030;
    }
    .device.online .name {
        color: #00A000;
    }
    .device.online .date {
        color: #00A000;
    }
    .device:not(.inactive) .versions .deprecated {
        color: #E00000;
    }
}