:root {
    --k: 1353651.53435435;
}
body {
    text-align: center;
}
main {
    display: flex;
    flex-flow: wrap;
}
main > table {
    margin: auto;
}
td {
    text-align: left
}
.member {
    border-spacing: 0;
    margin: 0;
    border: 4px solid #335;
}
.legend {
    border-spacing: 0;
}
.member td,
.legend td {
    border: 2px inset;
}
.interface {
    position: relative;
    text-align: center;
    min-width: 2em;
    height: 2em;
    mix-blend-mode: darken;
    padding: 2px;
    print-color-adjust: exact;
}
.vlan {
    background-color: hsl(calc(var(--k)*var(--pvid)) 100% 60%);
}
.trunk {
    font-weight: bold;
    border: 4px solid !important;
    border-image-slice: 1 !important;
    border-image-source: linear-gradient(127deg, red, orange, yellow, green, blue, violet) !important;
    padding: 0;
    
}
.hybrid {
    background-image: linear-gradient(135deg, hsl(calc(var(--k)*var(--tagged)) 100% 60%) 50%, hsl(calc(var(--k)*var(--untagged)) 100% 60%) 50%);
}
.shutdown {
    background-color: lightgray !important;
    background-image: none !important;
    color: gray !important;
}
.poe::before {
    content: "⚡";
    font-size: 0.7em;
    position: absolute;
    top: 0;
    left: 0;
}
.voice-vlan::after {
    content: "📞";
    font-size: 0.7em;
    position: absolute;
    bottom: 0;
    left: 0;
}
footer {
    display: flex;
    flex-flow: column;
    align-items: center;
}
#colorSlider {
    width: 33%;
}
@media print {
    #colorSliderLabel,
    #colorSlider {
        display: none;
    }
}