button.disabled { pointer-events: none; }
button input.filter-option-inner-inner { pointer-events: none; }

.hsl-container { display: flex; align-items: center; justify-content: center; }

.hsl-container > .hsl-name { font-size: x-large; }
.hsl-container > .hsl-primitive-coordinates, .hsl-container > .hsl-conventional-coordinates { color: #6c757d !important; margin-left: 1em; }

/* table.table-characters { width: 100%; table-layout: fixed; } */

/* th.operator {  } */
th.operator > div.operator { display: flex; justify-content: center; align-items: center; }

td.irrep-character { position: relative; }
td.irrep-character > div.irrep-character { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }

table.table-crossings { width: 100%; table-layout: fixed; }

th.irrep-name { width: 100px; }
/* th.kdotp-matrix { width: 800px; } */
th.pattern-name { width: 100px; }
th.band-crossing {width: 440px;}
th.emergent-particle { width: 100px; }
th.topological-charge { width: 100px; }

th.irrep-name > div.irrep-name { display: flex; }

td.kdotp-matrix { overflow-x: auto; overflow-y: clip; }
td.kdotp-matrix > div.kdotp-matrix { display: flex; width: fit-content; justify-self: center; }
td.kdotp-matrix.overflow > div.kdotp-matrix { justify-self: unset; }

td.pattern-name { position: relative; }
td.pattern-name > div.pattern-name { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }

td.band-crossing { overflow-x: auto; overflow-y: clip; }
td.band-crossing > div.band-crossing { display: flex; width: fit-content; justify-self: center; }
td.band-crossing.overflow > div.band-crossing { justify-self: unset; }

td.emergent-particle { position: relative; }
td.emergent-particle > div.emergent-particle { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }

td.topological-charge { position: relative; }
td.topological-charge > div.topological-charge { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }