.indicator-container { height: 100%; width: 100%; .indicator-body { width: 100%; height: 100%; overflow: auto; flex-flow: row wrap; // justify-content: center; align-items: center; align-content: center; margin: 0 auto; .indicator-box { float: left; display: table; border: 1px solid #ececec; padding: 8px; margin: 4px; .row { display: table-row; overflow: hidden; .cell { display: table-cell; vertical-align: middle; .over-wrapper { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } &.c-name { font-size: 18px; } &.c-key { font-size: 12px; } &.c-value { font-size: 28px; line-height: 28px; font-weight: bold; text-align: center; color: rgb(33, 83, 212); } &.c-extra { .over-wrapper { display: table; table-layout: fixed; >span { display: table-cell; font-size: 12px; &.til { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } &.val { text-align: right; white-space: nowrap; font-size: 14px; overflow: hidden; text-overflow: ellipsis; } } } } } } .indicator-name { margin-bottom: 12px; } .indicator-value { padding: 0 36px; } } } }