#viewerContainer { background-color: #e5e5e5; height: 100vh; } .main-nav.navbar { position: fixed; left: 0; top: 0; padding: 0; background: #F1F1F1; color: #333; } #list-heading { width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; } #list-heading::after { content: ""; display: block; left: 50%; width: 80%; height: 1px; background-color: rgba(0, 0, 0, 0.11); transform: translateX(-50%); color: #0c5f78; position: absolute; top: 50px; } #reportsList { padding: .5rem 0; height: calc(100vh - 50px - 2em); width: 100%; overflow: auto; flex-wrap: nowrap; } .reportList_item { cursor: pointer; color: #2b2b2b; padding: 0 1rem; font-size: 15px; height: 34px; display: flex; align-items: center; transition-duration: .2s; flex-shrink: 0; } .reportList_item > span { white-space: nowrap; width: 100%; overflow: hidden; text-overflow: ellipsis; } .reportList_item:hover { color: white; background-color: #1b5166; } .reportList_item.active:hover { color: white; background-color: #1b5166; } .reportList_item.active { color: white; background-color: #3b7186; }