.collectionTimeView, .collectionTimeView-pivot { display: flex; flex-direction: row; position: absolute; height: 100%; width: 100%; overflow: hidden; .collectionTimeView-backBtn { background: green; display: inline; margin-right: 20px; } .collectionFreeform-customText { text-align: left; } .collectionFreeform-customDiv { position: absolute; } .collectionTimeView-thumb { position: absolute; width: 30px; height: 30px; transform: rotate(45deg); display: inline-block; background: gray; bottom: 0; margin-bottom: -17px; border-radius: 9px; opacity: 0.25; } .collectionTimeView-thumb-min { margin-left: 25%; } .collectionTimeView-thumb-max { margin-left: 75%; } .collectionTimeView-thumb-mid { margin-left: 50%; } .collectionTimeView-flyout { width: 400px; display: inline-block; .collectionTimeView-flyout-item { background-color: lightgray; text-align: left; display: inline-block; position: relative; width: 100%; } } .pivotKeyEntry { position: absolute; top: 5px; right: 5px; z-index: 10; pointer-events: all; padding: 5px; border: 1px solid black; } .collectionTimeView-treeView { display: flex; flex-direction: column; width: 200px; height: 100%; .collectionTimeView-addfacet { display: inline-block; width: 200px; height: 30px; background: darkGray; text-align: center; .collectionTimeView-button { align-items: center; display: flex; width: 100%; height: 100%; .collectionTimeView-span { margin: auto; } } >div, >div>div { width: 100%; height: 100%; text-align: center; } } .collectionTimeView-tree { display: inline-block; width: 100%; height: calc(100% - 30px); } } .collectionTimeView-innards { display: inline-block; width: calc(100% - 200px); height: 100%; } .collectionTimeView-dragger { background-color: lightgray; height: 40px; width: 20px; position: absolute; border-radius: 10px; top: 55%; border: 1px black solid; z-index: 2; left: -10px; } } .collectionTimeView-pivot { .collectionFreeform-customText { text-align: center; } }