div.users-tree { line-height: initial; } .edges { font-family: monospace; line-height: initial; } div.main-container { width: 600px; } div.ips-row { margin-bottom: 0px; display: flex; align-items: stretch; flex-direction: row; justify-content: center; max-height: 54px; /*line-height: 0;*/ } div.ips-cell { display: inline-flex; flex-direction: column; justify-content: center; background-color: #fffcff; width: 54px; height: 54px; margin: 0px; border-bottom: 1px solid lightgray; border-right: 1px solid lightgray; text-align: center; position: relative; overflow: hidden; } div.ips-cell.ips-top { border-top: 1px solid #aaa; } div.ips-cell.ips-left { border-left: 1px solid #aaa; } div.ips-cell.ips-right,div.ips-ver-half { border-right: 1px solid #aaa; } div.ips-cell.ips-bottom,div.ips-hor-half { border-bottom: 1px solid #aaa; } div.name { /* max-height: 52px; */ font-size: small; font-weight: bold; text-decoration: none; } /* black #444 blue darkblue purple purple red darkred green darkgreen */ .c-black { color: #444; } .c-red { color: #ff4141; } .c-gold { color: #ffb400; } .c-blue { color: #3d7bc7; } .c-purple { color: #c55bba; } .c-green { color: #36ae36; } .color-sample { font-size: x-large; padding-bottom: 1px; border-bottom: 2px solid rgba(0,0,0,0); cursor: pointer; } .color-sample.selected { border-bottom: 2px solid black; } [disabled] .color-sample { color: lightgrey; } [disabled] .color-sample.selected { border-bottom: 2px solid lightgrey; } span.ip { position: absolute; bottom: 2px; right: 0.5em; color: #aaa; font-weight: bold; font-size: x-small; } span.lock { position: absolute; bottom: 2px; left: 0.7em; color: #aaa; font-size: small; } span.leased { position: absolute; bottom: 2px; left: 0.6em; color: #66BB6A; font-size: x-small; } div.ips-cell.dhcp-pool { background-color: #bed; } div.ips-cell.dhcp-pool.hover { background-color: #acdccc; } div.ips-cell.hover { background-color: #f6f0f6; } div.ips-cell.unusable { background-image: url(../img/unusable.png) }