.loading { margin: auto; width: 100%; display: flex; text-align: center; justify-content: center; height: 100vh; align-items: center; } #tv-wrapper { height: 100vh; overflow: hidden; position: relative; } .chart-holder { height: calc(100vh - 270px); min-height: 525px; padding-left: 20px; width: 98.5%; padding-top: 20px; @media(min-width: 992px){ padding-top: 10px; } @media(min-height: 800px){ padding-top: 60px !important; } } .blockchain-wrapper { display: flex; height: 100%; min-height: 240px; position: relative; top: -20px; @media(min-height: 800px) { top: 10px; } .position-container { position: absolute; left: 50%; bottom: 170px; } .chart-holder { height: calc(100% - 220px); } #divider { width: 3px; height: 175px; left: 0; top: -40px; background-image: url('/resources/divider-new.png'); background-repeat: repeat-y; position: absolute; img { position: absolute; left: -100px; top: -28px; } } @media (min-width: 1920px) { .position-container { transform: scale(1.3); bottom: 210px; } .chart-holder { height: calc(100% - 280px); } } } :host ::ng-deep .ct-legend { top: 20px !important; display: flex; flex-direction: column-reverse; @media(min-height: 800px){ padding-top: 40px !important; } } .tv-container { display: flex; margin-top: 0px; flex-direction: column; }