# Task estimates table

<style>
#doc {
width: 100vw;
}

.sc-table {
position: relative;
width: 100%;
}

.sc-container {
display: flex;
}

.sc-legend-top {
margin: 0 0 0 25px;
border-bottom: 1px solid #ddd;
text-align: center;
}

.sc-legend-left {
display: flex;
flex: 0 0 25px;
align-items: center;
border-right: 1px solid #ddd;
}

.sc-legend-left__text {
position: absolute;
display: inline-block;
transform: rotate(-90deg) translate(-50%, 0);
transform-origin: left top;
}

.sc-content {
flex: 1 0;
}

.sc-row {
display: flex;
}

.sc-cell {
display: flex;
justify-content: center;
align-items: center;
flex: 1 0;
margin: 2px;
}

.sc-cell.--score {
height: 60px;
font-size: 3rem;
}

.sc-cell.--green {
color: #fff;
background-color: #71ad46
}

.sc-cell.--yellow {
color: #fff;
background-color: #ffc201;
}

.sc-cell.--red {
color: #fff;
background-color: #ee7d31;
}

</style>

<div class="sc-table">
<div class="sc-legend-top">
Критичность (кол-во и грубость нарушений)
</div>
<div class="sc-container">
<div class="sc-legend-left">
<div class="sc-legend-left__text">
Частота использования
</div>
</div>
<div class="sc-content">
<div class="sc-row">
<div class="sc-cell">
</div>
<div class="sc-cell">
Незначительно
</div>
<div class="sc-cell">
Средне
</div>
<div class="sc-cell">
Критично
</div>
</div>
<div class="sc-row">
<div class="sc-cell">
Редко
</div>
<div class="sc-cell --score --green">
2
</div>
<div class="sc-cell --score --green">
3
</div>
<div class="sc-cell --score --yellow">
5
</div>
</div>
<div class="sc-row">
<div class="sc-cell">
Средне
</div>
<div class="sc-cell --score --green">
3
</div>
<div class="sc-cell --score --yellow">
5
</div>
<div class="sc-cell --score --red">
13
</div>
</div>
<div class="sc-row">
<div class="sc-cell">
Часто
</div>
<div class="sc-cell --score --yellow">
5
</div>
<div class="sc-cell --score --yellow">
8
</div>
<div class="sc-cell --score --red">
21
</div>
</div>
</div>
</div>
</div>