.tvd-page { flex: 1; display: flex; flex-direction: column; justify-content: stretch; .tvd-top { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; .tvd-inputs { display: flex; align-items: center; .tvd-input-group { display: flex; align-items: center; margin: 0 15px; & > span { margin-right: 5px; } } } } .tvd-main { height: 100%; display: flex; overflow: hidden; align-items: stretch; flex-flow: row nowrap; .tvd-left { position: relative; flex: 1; > .tvd-tr-table, > .tvd-bl-table { position: absolute; //pointer-events: none; transition: opacity .25s ease-out; opacity: 1; &:hover { opacity: 0; } &.tvd-tr-table { right: 10px; top: 0; } &.tvd-bl-table { bottom: 35px; left: 55px; } } } .tvd-right { flex: 1; display: flex; align-items: flex-end; padding-left: 10px; flex-direction: column; justify-content: stretch; .tvd-npt-filter { margin-bottom: 10px; > span { margin: 0 10px; } } } } } .empty-wrapper { height: 100%; display: flex; align-items: center; justify-content: center; } .tl-pie { display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; height: 100%; & .tl-pie-chart { flex-grow: 1; & .lines { pointer-events: none; } } } .tl-pie-part { transition: transform .1s ease-in-out; }