.matrix {
    position: relative;

    width: 100%;

    border-bottom: 1px solid #DEDEDE;

    color: #212121;
    font-size: 14px;
}

.matrix__loader {
    width: 100%;
    height: 20vh;

    background-image: url('../images/loading.gif');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 32px 32px;
}

.matrix__container {
    display: flex;
    flex-direction: row;

    max-width: 100%;

    padding-bottom: 48px;

    overflow-y: hidden;

    > * + * {
        margin-left: 2px;
    }
}

.matrix__column {
    display: flex;
    flex-direction: column;

    > * + * {
        margin-top: 2px;
    }
}

.matrix__cell {
    display: flex;
    flex-direction: column;

    max-width: 115px;
    min-width: 115px;
    min-height: 52px;

    background-color: #F6F6F6;
}

.matrix__cell_header {
    justify-content: center;
    align-items: center;

    background-color: #E6E6E6;

    font-size: 14px;
    font-family: 'OpenSansSemibold';
    text-align: center;
}

.matrix__cell_subtechnique {
    align-items: center;

    background-color: #E4E4E4;
}

.matrix__technique {
    display: flex;
    justify-content: center;
    align-items: center;

    height: 100%;

    padding: 4px;

    text-align: center;
    word-break: break-word;
}

.matrix__arrow {
    position: relative;

    width: 100%;
    min-height: 18px;

    background-color: #989898;

    transition: background-color 200ms ease;
}

.matrix__arrow::before {
    content: '';

    position: absolute;

    width: 100%;
    height: 100%;

    background-image: url("../images/down.png");
    background-position: 50% 50%;
    background-size: 20%;
    background-repeat: no-repeat;

    transition: transform 200ms ease;
}

.matrix__arrow_active::before {
    transform: rotate(180deg);
}

.matrix__arrow:hover,
.matrix__arrow_active {
    background-color: #666667;

    cursor: pointer;
}

.matrix__subtechnique-container {
    height: 0;

    margin-top: 0;

    transform: scaleY(0);
    transform-origin: top;
    transition: transform 200ms ease;

    > * + * {
        margin-top: 2px;
    }
}

.matrix__subtechnique-container.show {
    height: auto;

    transform: scaleY(1);
}

.matrix__subtechnique-label {
    margin-top: 4px;

    color: #666667;
}

.matrix__subtechnique {
    padding: 4px;
    margin-top: 8px;

    text-align: center;
    word-break: break-word;
}

.matrix__technique:hover,
.matrix__subtechnique:hover {
    text-decoration: underline;

    cursor: pointer;
}

.matrix__no-data {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;

    margin-bottom: 24px;

    color: #545B61;
    text-align: center;
}

.matrix_collapse {
    display: none;
}