---
# System prepended metadata

title: Task estimates table

---

# 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>
