a.HtmlItemInline,
a.HtmlItemBlock {
    text-decoration: none;
}

a.HtmlItemInline:hover,
a.HtmlItemBlock:hover {
    background-color: #e52115;
    border-radius: 0;
}

.HtmlItemInline > * {
    display: inline;
}

.HtmlItemInline > label {
    margin-left: 0.2em;
}

.HtmlItemInline img {
    height: 1em;
    vertical-align: middle;
    margin-right: 0.3em;
}


.HtmlItemBlock {
    background-color: #fff1;
    padding: 0.25em;
    border-radius: 0.3em;
    display: block;
}
@media (prefers-color-scheme: light) {
    .HtmlItemBlock {
        background-color: #fff9;
    }
}

.HtmlItemBlock > * {
    display: block;
}

.HtmlItemBlock .HtmlItemHead {
    text-align: center;
}

.HtmlItemBlock .HtmlItemStatus {
    display: inline-block;
    margin-right: 0.5em;
}

.HtmlItemBlock label {
    margin-bottom: 0.3em;
    margin-top: 0.1em;
    color: #eee;
    display: inline-block;
}

@media (prefers-color-scheme: light) {
    .HtmlItemBlock label {
        color: #333;
    }
}

.HtmlItemBlock img {
    display: block;
}

div.HtmlItemGrid {
    width: 85%;
    padding: 0;
    margin-bottom: 5em;
    margin-left: auto;
    margin-right: auto;
}

div.HtmlItemGrid > .HtmlItemBlock {
    margin: 0.5em;
    display: inline-block;
}

div.HtmlItemGrid > .HtmlItemBlock img {
    height: 10em;
}

div.HtmlItemStatusOffline,
div.HtmlItemStatusDeprecated {
    color: var(--color-red);
}

div.HtmlItemStatusOnline,
div.HtmlItemStatusActive {
    color: var(--color-green);
}