body { background-color: lightgray; }

.collapse { transition: none !important; }

:root { --font-size: 24px; --border-radius: 5px; --side: 44px; --main-color: #000d4d; --glow-color: #6680ff; --disabled-color: #000933; --black: #000; --gray: #808080; }

/* overset */
span.tex-overset { position: relative; }
span.tex-overset::before { content: attr(value); position: absolute; left: 0.06em; top: -0.7em; }

.table-container { margin: 1em .4em; padding: .4em; background-color: white; width: auto; border-radius: var(--border-radius); }
.table-container > .table { width: 100%; }
.table-container > .table > caption { caption-side: top; text-align: center; }
.table-container > .table th.idx { width: 2em; }

/* bootstrap-select */
.bootstrap-select .dropdown-menu li:first-child { margin-top: 0.4em; }
.bootstrap-select .dropdown-menu li a span.text:empty { min-height: 1em; }
/* fake bootstrap-select */
.bootstrap-select .dropdown-toggle input.filter-option-inner-inner { padding: 0; pointer-events: none; }

.table-container > .table > caption.more { caption-side: bottom; }
#collapseSearch { margin-bottom: 1em; }

/* emergent particle */
.emergent-particle-table { display: flex; flex-direction: row; flex-wrap: wrap; --padding: 5px; }
.emergent-particle-table .emergent-particle { position: relative; display: inline-flex;  background: var(--main-color); height: var(--side); margin: 5px 8px; padding: 5px 30px; }
.emergent-particle-table .emergent-particle { color: white; border-radius: var(--border-radius); font-size: var(--font-size); cursor: pointer; user-select: none; }
.emergent-particle-table .emergent-particle::before { content: ""; position: absolute; left: 12px; top: 0px; display: block; width: 0.5em; height: 1em; border: 0 solid transparent; border-width: 0 0.26em 0.26em 0; transform-style: preserve-3d; transform: rotate(45deg); }
.emergent-particle-table .emergent-particle:hover { color: var(--main-color); background-color: white; box-shadow: 0 0 5px 5px var(--glow-color); }
.emergent-particle-table .emergent-particle.selected::before { border-color: white; }
.emergent-particle-table .emergent-particle.selected:hover:before { border-color: var(--main-color); }

/* 元素周期表 */
.periodic-table { position: relative; margin: auto; overflow: auto; width: max-content; height: max-content; --side: 44px; --margin: 5px; --segment-size: 10px; }
.periodic-table > .content { display: block; min-width: max-content; }
.periodic-table .period { display: block; clear: both; margin-bottom: var(--margin); height: calc(var(--side) + 2 * var(--margin)); }
.periodic-table .period::after { content: ""; display: block; clear: both; }
.periodic-table .period:last-of-type { margin-bottom: 0; }
.periodic-table .period-devider { height: 40px; }
.periodic-table .period > .left { float: left; }
.periodic-table .period > .left > .block:first-of-type > .element:first-of-type { margin-left: var(--margin); }
.periodic-table .period > .center { width: fit-content; margin: auto; }
.periodic-table .period > .right { float: right; }
.periodic-table .period > .right > .block:last-of-type > .element:last-of-type { margin-right: var(--margin); }
.periodic-table .period .block { display: block; float: left; min-width: max-content; margin-right: 2 * var(--margin); }
.periodic-table .period .block:last-of-type { margin-right: 0; }
.periodic-table .period .block > div { position: relative; display: block; float: left; height: var(--side); line-height: var(--side); margin: var(--margin) 8px; }
.periodic-table .period .element, .periodic-table .period .persudo-element { width: var(--side); border-radius: var(--border-radius); }
.periodic-table .period .element { background: var(--main-color); color: white; cursor: pointer; user-select: none; line-height: var(--font-size); font-size: var(--font-size); text-align: center; }
/* .periodic-table .period .persudo-element{ border: 2px dashed var(--disabled-color); } */
/* 原子数 */
.periodic-table .period .element::before { content: attr(index); position: absolute; left: 5px; top: 1px; font-size: var(--segment-size); width: var(--segment-size); height: var(--segment-size); text-align: center; line-height: var(--segment-size); }
/* 选中的勾 */
.periodic-table .period .element::after { content: ""; position: absolute; right: 8px; top: 0px; font-size: var(--segment-size); width: .6em; height: 1.2em; border: 0 solid transparent; border-width: 0 0.3em 0.3em 0; transform-style: preserve-3d; transform: rotate(45deg); }
.periodic-table .period .element:hover { color: var(--main-color); background-color: white; box-shadow: 0 0 5px 5px var(--glow-color); }
.periodic-table .period .element.disabled { background-color: transparent; border: 2px dashed var(--disabled-color);  color: #333; cursor: initial; }
.periodic-table .period .element.disabled:hover { box-shadow: none; }
.periodic-table .period .element.selected::after { border-color: white; }
.periodic-table .period .element.selected:hover::after { border-color: var(--main-color); }
/* .periodic-table .period .element::after { content: attr(name); position: absolute; left: 0; top: calc(50% - var(--font-size) / 2); width: 100%; height: var(--font-size); text-align: center; line-height: var(--font-size); font-size: var(--font-size); } */

.bootstrap-select .dropdown-menu li, .bootstrap-select .dropdown-menu li a span { line-height: initial; }

.dock { position: absolute; display: flex; flex-direction: column; flex-wrap: wrap; row-gap: 15px; width: var(--width); height: var(--height); --x: 1; --y:1; --width: calc(var(--x) * (var(--side) + 16px)); --height: calc(var(--y) * (var(--side) + 10px)); }
.dock > .dock-row { display: flex; flex: 0 0; flex-direction: row; align-items: center; }
.dock > .dock-row > * { margin: 0 .4em; }
.dock > .dock-row > span { white-space: nowrap; }

#results0, #results1, div.chart, div.info, div.axis { display: flex; margin: 1em auto; background-color: white; padding: 1em; border-radius: 1em; }
div.chart { height: 100vh; }
div.chart, div.info { width: fit-content; }
#results0, #results1, div.chart, div.axis { width: 100%; width: calc(100% - 2em); }
div.axis .table-layout { width: 100%; overflow: auto; }
div.axis table tr { white-space: nowrap; }

.info-table, .wyckoff-position-table { margin: 0.75rem; }
.info-table { width: fit-content; height: fit-content; }
.info-table tr td, .info-table tr th { padding: 0.75rem; vertical-align: top; border-top: 1px solid #dee2e6; }
.info-table tr:first-of-type td, .info-table tr:first-of-type th { border-top: none;}

.info-table td.wyckoff-positions { position: relative; cursor: pointer; }
.info-table:hover td.wyckoff-positions:after { content: "🔍"; position: absolute; right: 0; bottom: 0; font-size: 48px; }

.wyckoff-position-table { width: fit-content; }
.wyckoff-position-table tr td, .wyckoff-position-table tr th { white-space: nowrap; text-align: center; padding: 0.75rem; vertical-align: top; border-top: 1px solid #dee2e6; }
.wyckoff-position-table tr:first-of-type td, .wyckoff-position-table tr:first-of-type th { border-top: none;}

.table-layout > table { table-layout: fixed; border-collapse: collapse; width: initial; }
.table-layout > table th.caption { max-width: 10em; text-align: right; }

.axis table tr:hover td { background-color: lightblue; }

tr.name th, tr.position th { border-left: 1px solid silver; text-align: center; }
tr.name th { border-top: none; }
tr.name th:first-child, tr.position th:first-child { border-left: none; }

/* tr.position th.caption, tr.irr th.caption { position: relative; } */
/* tr.position th.caption::before, tr.irr th.caption::before { content: ""; display: block; width: 4em; } */
/* tr.position th.caption > span, tr.irr th.caption > span { position: absolute; left: 0; } */
tr.position td { border-left: 1px solid silver; }
tr.position td.position { text-align: center; }

/* irr */
tr.irr td { border-left: 1px solid silver; }
td.irr.caption span.index { display: block; text-align: center; }
td.irr.caption span.index:before { content: "{"; }
td.irr.caption span.index:after { content: "}"; }

td.irr.content .content { display: block; clear: both; width: 5em; color: black; white-space: nowrap; }
td.irr.content .content > * { display: inline-block; }
td.irr.content .content span.name::after { content: ", "; }
td.irr.content .content > span.times { float: right; }

span.times { color:gray; text-align: center; }

/* table.axis td { border-bottom: 1px solid black; } */
.wyckoff-position { display: block; clear: both; width: 6em; color: black; white-space: nowrap; }
.wyckoff-position > * { display: inline-block; }
.wyckoff-position > span.position::after { content: ","; }
.wyckoff-position > span.times { float: right; }

span.times:hover { color: blue; }

tr.result { cursor: pointer; }
tr.result:hover { background-color: lightblue; }

path.shadow { stroke: transparent !important; stroke-width: 10 !important; }

.chart { position: relative; height: 50%; }
.chart > .zoom { position: absolute; left: 10px; top: 10px; cursor: pointer; z-index: 1; }
.chart > .zoom:before { content: "🔍"; left: 0; top: 0; font-size: 40px; }
.chart > .zoom:after { content: "+"; position: absolute; left: 12px; top: 2px; font-size: 30px; color: white; }
.chart > .zoom-box, .chart > svg.zoomed, .chart > .zooming { display: none; }

body.chart-zoomed { overflow: hidden; }
body.chart-zoomed .chart { position: fixed; left: 0; top: 0; width: 100%; height: 100%; margin: 0; border-radius: 0; z-index: 1; }
body.chart-zoomed .chart > .zoom-box { display: block; position: absolute; cursor: move; z-index: 1; background: #ffffff9f; border: 1px solid red; }
body.chart-zoomed .chart > svg.original { opacity: 0.2; }
body.chart-zoomed .chart > .zooming { display: block; position: absolute; left: 20px; top: 80px; font-size: 25px; }
body.chart-zoomed .chart > .zooming:before { content: attr(data-zooming); }
body.chart-zoomed .chart > .zooming:after { content: "x"; }
body.chart-zoomed .chart > svg.zoomed { display: initial; background: white; z-index: 2; }

.zoom-box > span { display: block; width:33%; height: 100%; overflow: hidden; }
.zoom-box > span:before { position: absolute; font-size: var(--font-size); top: calc(50% - var(--font-size) + 5px); width: 33%; height: 100%; text-align: center; --font-size: 50px; }
.zoom-box > .plus { float:left; cursor: zoom-in; }
.zoom-box > .minus { float:right; cursor: zoom-out; }
.zoom-box > .plus:before { content: "+"; }
.zoom-box > .minus:before { content: "-"; }

.chart > svg text { cursor: default; user-select: none; }
.chart > svg > text.mark { transform: translate(5px, 8px); font-size: 24px; }
.chart > svg > path.axis, svg > path.mark { fill: transparent; stroke: black; stroke-width: 1; }
.chart > svg > path.axis.zero { stroke-dasharray: 5 5; stroke-dashoffset: 5; }

/* ellipse:hover { fill: green; } */
/* g.state { z-index: -1; } */
g.state > path { fill:transparent; stroke: black; stroke-width: 1; }
g.state > text { transform: translate(0px, 21px); text-anchor: middle; font-size: 21px; }
g.state > circle { cx: 0; cy: 0; r: 4; fill: white; stroke: gray; }
g.state > circle.with-data { fill: lightblue; }
/* g.state.hover { } */
g.state:hover > path { stroke: blue; stroke-width: 2; }
g.state:hover > circle { stroke: blue; stroke-width: 2; }
g.state:hover > text { fill: blue; stroke: blue; }
g.state > circle:hover { stroke: red; fill: red; }

/* g.label { } */
g.label > path { d: path("M -10 0 l 10 0"); stroke: black; stroke-width: 1; }
g.label > text { transform: translate(-20px, 5px); text-anchor: end; cursor: default; user-select: none; }
g.label > circle { cx: 0; cy: 0; r: 4; fill: white; stroke: black; }
g.label:hover { fill: blue; stroke: blue;}
g.label:hover > circle { fill: blue; stroke: white; }

g.curve > path { fill: transparent; stroke: black; stroke-width: 1; }
/* g.curve > circle { r: 2; fill: white; stroke: black; } */
g.curve:hover > path { stroke: red; stroke-width: 2; }
g.curve:hover > circle { r: 4; fill: white; stroke: red; }