.matrix-header {
     background-color: gray;
     color: white;
}
 .matrix-container {
     background: white;
     overflow-x: visible;
}
 .matrix-container + .matrix-container {
     margin-top: to-rem(16);
}
 .matrix-container .matrix-border {
     display: flex;
     justify-content: center;
     align-items: center;
}
 .matrix-container .matrix-title {
     border-bottom: 1px solid #dfdfdf;
     margin-bottom: 1rem;
     padding-bottom: 0.5rem;
}
 .matrix-container .scroll-indicator-group {
     white-space: nowrap;
     display: flex;
}
 .matrix-container .scroll-indicator-group .matrix-scroll-box {
     flex-grow: 1;
     display: inline-block;
}
 .matrix-container .scroll-indicator-group .scroll-indicator {
     width: 0px;
     display: inline-block;
     position: relative;
}
 .matrix-container .scroll-indicator-group .scroll-indicator .cover {
     width: 50px;
     height: 100%;
     position: absolute;
     pointer-events: none;
}
 .matrix-container .scroll-indicator-group .scroll-indicator.right .cover {
     right: 0;
}
 .matrix-container .scroll-indicator-group .scroll-indicator.left .cover {
     left: 0;
}

 .matrix {
     white-space: normal;
     line-height: 14px;
}
 .matrix.side .tactic {
     padding: 2px 5px;
     width: 1%;
     vertical-align: top;
}
 .matrix.side .tactic:first-child {
     padding: 2px 5px 2px 2px;
}
 .matrix.side .tactic:last-child {
     padding: 2px 2px 2px 5px;
}
 .matrix.side .tactic:hover:not(.name, .count) {
     background: #dfdfdf;
}
 .matrix.side .tactic:hover:not(.name, .count) .sidebar.expanded .angle {
     background: #dfdfdf;
}
 .matrix.side .tactic.name, .matrix.side .tactic.count {
     text-align: center;
     font-size: 16px;
}
 .matrix.side .tactic.name {
     font-weight: bold;
}
 .matrix.side .tactic.count {
     font-size: 13px;
     border-bottom: 1px solid black;
     padding-bottom: 5px;
     margin-bottom: 5px;
}
 .matrix.side .tactic .techniques-table {
     border-collapse: collapse;
}
 .matrix.side .tactic .techniques-table tr, .matrix.side .tactic .techniques-table td {
     padding: 0;
}
 .matrix.side .tactic .techniques-table tr {
     height: 1px;
}
 .matrix.side .tactic .supertechnique {
     border-collapse: collapse;
     padding: 0;
     margin: 0;
}
 .matrix.side .tactic .supertechnique td {
     padding: 0;
     vertical-align: top;
}
 .matrix.side .tactic .supertechnique td.technique {
     outline: 1px solid #6a7279;
     outline-offset: -1px;
}
 .matrix.side .tactic .subtechniques {
     display: flex;
     flex-direction: column;
     height: 100%;
     margin-left: -1px;
     border-left: 2px solid #6a7279;
     outline: 1px solid #6a7279;
     outline-offset: -1px;
     white-space: nowrap;
     vertical-align: top;
}
 .matrix.side .tactic .subtechniques.hidden {
     display: none;
}
 .matrix.side .tactic .subtechniques .subtechnique {
     height: 100%;
     flex-grow: 1;
}
 .matrix.side .tactic .handle {
     text-align: center;
     vertical-align: middle;
     transform: rotate(-90deg);
     color: #f2f2f2;
     width: 12px;
     height: 12px;
     font-size: 16px;
     line-height: 12px;
}
 .matrix.side .tactic .sidebar {
     min-width: 8px;
     width: 12px;
     padding: 0;
     background: #6a7279;
     cursor: pointer;
     position: relative;
     vertical-align: middle;
}
 .matrix.side .tactic .sidebar .angle {
     display: none;
}
 .matrix.side .tactic .sidebar.expanded .angle {
     margin: 0 auto;
     height: 12px;
     display: block;
     position: absolute;
     background: white;
}
 .matrix.side .tactic .sidebar.expanded .angle svg {
     fill: #6a7279;
     vertical-align: baseline;
}
 .matrix.side .tactic .sidebar.expanded .angle.top {
     top: 0px;
}
 .matrix.side .tactic .sidebar.expanded .angle.bottom {
     bottom: 0px;
}
 .matrix.flat .tactic {
     margin-right: 5px;
     width: 1%;
     vertical-align: top;
}
 .matrix.flat .tactic.name, .matrix.flat .tactic.count {
     text-align: center;
     font-size: 16px;
}
 .matrix.flat .tactic.name {
     font-weight: bold;
}
 .matrix.flat .tactic.count {
     font-size: 13px;
     border-bottom: 1px solid black;
     padding-bottom: 5px;
     margin-bottom: 5px;
}
 .matrix.flat .tactic .subtechniques-row.hidden {
     display: none;
}
 .matrix.flat .tactic .supertechnique {
     border-collapse: collapse;
     padding: 0;
     margin: 0;
}
 .matrix.flat .tactic .supertechnique td {
     padding: 0;
     vertical-align: top;
}
 .matrix.flat .tactic .supertechnique td.sidebar.technique {
     min-width: 8px;
     width: 12px;
     padding: 0;
     background: #6a7279;
     cursor: pointer;
     vertical-align: middle;
}
 .matrix.flat .tactic .supertechnique td.sidebar.technique .handle {
     text-align: center;
     vertical-align: middle;
     transform: rotate(-90deg);
     color: #f2f2f2;
     width: 12px;
     height: 9px;
     font-size: 16px;
     line-height: 12px;
}
 .matrix.flat .tactic .supertechnique td.sidebar.subtechniques svg {
     fill: #6a7279;
     vertical-align: baseline;
}
 .matrix.flat .tactic .supertechnique td.sidebar {
     border-right: 2px solid #6a7279;
}
 .matrix.flat .tactic .supertechnique td.technique {
     outline: 1px solid #6a7279;
     outline-offset: -1px;
}
 .matrix.flat .tactic .more-icon {
     transition: all ease 0.125s;
     vertical-align: top;
     transform: scale(0.5) rotate(-90deg);
     width: 12px;
     height: 12px;
}
 .matrix.flat .tactic .more-icon.expanded {
     transform: scale(0.5);
}
 .matrix .technique-cell {
     height: 100%;
     display: flex;
     align-items: center;
     background-color: white;
     font-size: 13px;
     line-height: 14px;
     outline: 1px solid transparent;
     outline-offset: -1px;
}
 .matrix .technique-cell a {
     display: block;
     width: 100%;
     height: 100%;
     padding: 7px 3px;
}
 .matrix .technique-cell:not(.colored):not(.supertechniquecell) {
     outline-color: #dfdfdf;
}