.c-matrix-desktop img {
    max-width: 152px;
    max-height: 152px;
}

.matrix-column-scroll {
    overflow-y: auto;
    max-height: 100%;
}

.matrix-constant-sum-sum-label,
.matrix-constant-sum-total-label {
    padding-top: 12px;
}

.matrix-constant-sum-sum-label {
    border-top: 2px solid lightgrey;
}

.matrix {
    display: grid;
    grid-template-areas:
        "angle head-columns"
        "body body";
    grid-template-columns: 200px 1fr;
    grid-auto-rows: minmax(38px, auto);
    margin: 0 15px;
}

.matrix-angle {
    grid-area: angle;
    position: sticky;
    top: 0;
    background: white;
    z-index: 3;
}
.matrix-head-items {
    grid-area: head-columns;
    position: sticky;
    top: 0;
    background: white;
    overflow: hidden;
}
.matrix-body {
    grid-area: body;
    overflow-x: auto;
}

.matrix-body-item {
    display: grid;
    grid-template-areas:
        "row-head row-body";
    grid-template-columns: 200px 1fr;
    grid-auto-rows: minmax(0px, auto);
    min-width: 100%;
    width: fit-content;
}
.matrix-body-item-head {
    grid-area: row-head;
    padding: 10px 10px 10px 8px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: sticky;
    left: 0;
    background-color: white;
    user-select: none;
    overflow: hidden;
    word-break: break-word;
    z-index: 2;
}

.matrix-body-item-head p:last-child {
    margin-bottom: 0px;
}

.matrix-body-item-body {
    grid-area: row-body;
}

.matrix-control-l, .matrix-control-r {
    position: sticky;
    top: 0;
    display: none;
    background-color: white;
}

.head-items {
    display: flex;
    padding: 0;
    max-height: 168px;
}
.head-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    width: 100%;
    min-width: 156px;
    overflow: hidden;
    overflow-y: auto;
    padding: 7px 4px;
    user-select: none;
    word-break: break-word;
    -webkit-overflow-scrolling: touch;
}

.head-item p:last-child {
    margin-bottom: 0px;
}

.matrix-body-item-head.--fancy,
.head-item.--fancy {
    display: block;
}
.body-items {
    display: flex;
    padding: 0;
    height: 100%;
}
.body-item {
    flex: 1 1;
    min-width: 156px;
    padding: 0 4px;
    padding-top: 6px;
    text-align: center;
}

.body-item-title-sum {
    border-top: 2px solid lightgrey;
}

.body-item-title-sum.tiger-coloring {
    border-top: 2px solid white;
}

.body-item input[type=radio] {
    width: 20px;
    height: 34px;
    margin: 0;
}

.body-item input[type=checkbox] {
    width: 20px;
    height: 34px;
}

.tiger-coloring {
    background-color: #cccccc;
}

.tiger-coloring--alt {
    background-color: #ffffff;
}

.matrix-body .help-block {
    margin-top: 0;
    margin-bottom: 0;
}

.matrix-body-item.matrix-set-error > .matrix-body-item-head,
.matrix-body-item.matrix-set-error > .matrix-body-item-body {
    background-color: rgb(255, 202, 202);
}

.body-item.matrix-set-error,
.js-body-item.matrix-set-error,
.head-item.matrix-set-error,
.js-head-item.matrix-set-error{
    background-color: rgb(255, 202, 202);
}

.matrix-control-l.matrix-set-error {
    border-bottom: 2px solid rgb(255, 202, 202);
}
.matrix-control-r.matrix-set-error {
    border-bottom: 2px solid rgb(255, 202, 202);
}

@container (max-width: 575px) {
    .matrix {
        grid-template-areas:
        "angle control-l head-columns control-r"
        "body body body body";
        grid-template-columns: 140px 30px 1fr 30px;
        margin: 0 15px;
        border: thin solid rgba(0, 0, 0, 0);
    }

    .head-item.matrix-set-error,
    .js-head-item.matrix-set-error {
        border-radius: 4px 4px 0 0;
    }

    .matrix-control-l {
        grid-area: control-l;
        justify-content: flex-start;
        padding-left: 5px;
    }
    .matrix-control-r {
        grid-area: control-r;
        justify-content: flex-end;
        padding-right: 4px;
    }
    .matrix-control-l, .matrix-control-r {
        display: flex;
        align-items: flex-end;
        padding-bottom: 8px;
        border-bottom: 2px solid rgba(0, 0, 0, 0);
    }
    .matrix-body {
        grid-area: body;
        overflow-x: hidden;
    }

    .matrix-body-item {
        grid-template-columns: 140px 1fr;
    }

    .control {
        position: sticky;
        bottom: 0;
        display: flex;
        align-items: center;
        width: 20px;
        height: 20px;
        border-radius: 10px;
        transform: scale(1.5);
        cursor: pointer;
    }
    .control:hover {
        background-color: lightgrey;
    }

    .head-items {
        gap: 60px;
    }
    .head-item {
        min-width: 80px;
    }

    .body-item {
        min-width: 146px;
        background-color: #ffffff;
    }

    .body-item.matrix-set-error,
    .js-body-item.matrix-set-error,
    .head-item.matrix-set-error,
    .js-head-item.matrix-set-error{
        background-color: unset;
    }

    .contains-error {
        border: thin solid #ff0000;
    }
}

/*mobile style for matrix carousel view*/
.matrix-carousel .card-header {
    word-break: break-word;
}
.matrix-carousel .card-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px;
    background-color: #ffffff;
}

.matrix-carousel .card-item {
    display: grid;
    grid-template-areas: "title input" "error error";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0px 6px;
    border: thin solid lightgrey;
    padding: 4px;
    border-radius: 8px;
    background-color: white;
}

.matrix-carousel .card:last-child {
    margin-right: 0;
}

.matrix-carousel .item-title {
    grid-area: title;
    padding: 4px;
    word-break: break-word;
}

.matrix-carousel .item-input {
    grid-area: input;
}

.matrix-carousel .item-input input[type="number"] {
    appearance: none;
    -moz-appearance: textfield;
}

.matrix-carousel .item-error {
    grid-area: error;
    color: #DD403A;
    font-size: 0.75em;
    height: 0px;
    overflow: hidden;
    text-align: right;
    margin-top: 0px;
}

.matrix-carousel .item-error.show {
    height: auto;
    margin-top: 6px;
}

.matrix-carousel .card-footer {
    display: grid;
    grid-template-areas: "footer-title footer-input" "footer-error footer-error";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0px 6px;
    padding: 4px;
    font-size: .9em;
}

.matrix-carousel .card-footer-first {
    margin-top: 6px;
    padding-top: 6px;
    border-top: thin solid #bababa;
}

.matrix-carousel .footer-item-title {
    grid-area: footer-title;
}

.matrix-carousel .footer-item-input {
    grid-area: footer-input;
    text-align: right;
}

.matrix-carousel .footer-item-error {
    grid-area: footer-error;
    color: #DD403A;
    font-size: 0.9em;
    height: 0px;
    overflow: hidden;
    text-align: right;
}

.matrix-carousel .footer-item-error.show {
    height: auto;
    margin-top: 6px;
}

/*mobile style for matrix tabs view*/
.matrix-tabs .tab-header {
    word-break: break-word;
}
.matrix-tabs .tab-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0px 4px;
    background-color: #ffffff;
    border-top: thin solid lightgrey;
    box-shadow: 1px 1px 1px lightgray;
}

.matrix-tabs .tab-item {
    display: grid;
    grid-template-areas: "title input" "error error";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0px 6px;
    border: thin solid lightgrey;
    padding: 4px;
    border-radius: 8px;
    background-color: white;
}

.matrix-tabs .tab-item:first-of-type {
    margin-top: 4px;
}

.matrix-tabs .tab-item:last-of-type {
    margin-bottom: 6px;
}

.matrix-tabs .tab-error {
    border: thin solid #DD403A;
    border-bottom: none;
}

.matrix-tabs .tab-error:last-of-type {
    border-bottom: thin solid #DD403A;
}

.matrix-tabs .tab-error:not(:has(+ .tab-error)) {
    border-bottom: thin solid #DD403A;
}

.matrix-tabs .item-title {
    grid-area: title;
    padding: 4px;
    word-break: break-word;
}

.matrix-tabs .item-input {
    grid-area: input;
}

.matrix-tabs .item-input input[type="number"] {
    appearance: none;
    -moz-appearance: textfield;
}

.matrix-tabs .item-error {
    grid-area: error;
    color: #DD403A;
    font-size: 0.75em;
    height: 0px;
    overflow: hidden;
    text-align: right;
}

.matrix-tabs .item-error.show {
    height: auto;
    margin-top: 6px;
}

.matrix-tabs .tab-footer {
    display: grid;
    grid-template-areas: "footer-title footer-input" "footer-error footer-error";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0px 6px;
    padding: 4px;
    font-size: .9em;
}

.matrix-tabs .tab-footer-first {
    border-top: thin solid #bababa;
}

.matrix-tabs .footer-item-title {
    grid-area: footer-title;
}

.matrix-tabs .footer-item-input {
    grid-area: footer-input;
    text-align: right;
}

.matrix-tabs .footer-item-error {
    grid-area: footer-error;
    color: #DD403A;
    font-size: 0.9em;
    height: 0px;
    overflow: hidden;
    text-align: right;
}

.matrix-tabs .footer-item-error.show {
    height: auto;
    margin-top: 6px;
}