.container { position: relative; min-height: 430px; font-size: 14px; padding: 20px 0; display: flex; flex-direction: column; } .header { display: flex; line-height: 40px; } .title { flex: 1; font-weight: 600; font-size: 16px; } .heading { font-size: 14px; text-align: center; width: 100px; } .row { position: relative; height: 30px; line-height: 30px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; overflow: hidden; } .label { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; flex: 2; } .label:empty { color: #b3b3b3; } .label:empty:before { content: 'Unknown'; } .value { width: 50px; text-align: right; margin-right: 10px; font-weight: 600; } .percent { position: relative; width: 50px; color: #6e6e6e; border-left: 1px solid #8e8e8e; padding-left: 10px; z-index: 1; } .bar { position: absolute; top: 0; left: 0; height: 30px; opacity: 0.1; background: #2680eb; z-index: -1; } .body { position: relative; flex: 1; } .body:empty:before { content: 'No data available'; color: #b3b3b3; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }