div.dt-searchPanes { display:flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-content: flex-start; align-items: stretch; height: 200px; div.pane { position: relative; flex: 1; margin: 1em 0.5%; border: 1px solid #ccc; border-radius: 3px; button[type=button] { display: none; } &.filtering { button[type=button] { display: block; position: absolute; right: 6px; top: 6px; border: 1px solid #999; background: rgba(0,0,0,0.1); border-radius: 16px; cursor: pointer; &:hover { background: rgba(0,0,0,0.2); } } } div.title { box-sizing: border-box; height: 36px; padding: 9px 0.35em; font-size: 1.1em; background-color: #e8e9eb; border-bottom: 1px solid rgba(0, 0, 0, 0.15); } div.scroller { position: absolute; top: 36px; bottom: 0; left: 0; right: 0; overflow: auto; ul { list-style: none; margin: 0; padding: 0; li { position: relative; margin: 0; padding: 0; cursor: pointer; &:nth-child(odd) { background: rgba(0,0,0,0.03); } &.selected { background: #3276b1; color: white; } span.label { display: inline-block; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 85%; vertical-align: middle; padding: 0.2em 0.3em; } span.count { display: inline-block; width: 14%; margin-right: 1%; font-size: 0.8em; text-align: center; background-color: rgba(50,118,177, 0.5); border-radius: 3px; } } } } } }