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; }
.bootstrap-select .dropdown-menu li a span.space-group, .bootstrap-select .dropdown-menu li a span.mpid, .bootstrap-select .dropdown-menu li a span.chemical-formula { display: inline-block; margin: 0 0.2em; color: var(--gray); }
.bootstrap-select .dropdown-menu li a span.mpid { color: var(--main-color); font-size: 1.2em; }

.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); }

.hsl-container { display: flex; align-items: center; justify-content: center; }
.hsl-container > .hsl-primitive-coordinates, .hsl-container > .hsl-conventional-coordinates { color: #6c757d !important; margin-left: 1em; }

/* 元素周期表 */
.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; }

#collapseInfo { position: relative; }

#results0, #results1, div.chart, div.info, div.legend { margin: 1em auto; background-color: white; padding: 1em; border-radius: 1em; }
div.chart, div.info, div.legend { width: fit-content; }
div.info { position: absolute; left: 0; right: 0; }
div.legend { position: absolute; right: 0; }
/* div.info, div.legend { float: left; margin: 1em; } */
div.chart, div.axis { width: 100%; width: calc(100% - 2em); height: 100vh; }

div.legend > table > tr > th.head { text-align: center; }
div.legend > table > tr > td.body > span.color { display: inline-block; margin: .25em; padding: .5em; width: 10em; text-shadow: 1px 1px white, 1px -1px white, -1px 1px white, -1px -1px white; }

.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; font-size: var(--height); line-height: var(--height); }
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; position: absolute; top: -15%; width:33%; height: var(--height); text-align: center; overflow: hidden; }
.zoom-box > .plus { right: 66%; cursor: zoom-in; }
.zoom-box > .minus { left: 66%; cursor: zoom-out; }
.zoom-box > .plus:before { content: "+"; }
.zoom-box > .minus:before { content: "-"; }

.chart > svg text { cursor: default; user-select: none; }
.chart > svg > path.axis.zero { stroke-dasharray: 5 5; stroke-dashoffset: 5; }

/* 轴线 */
g.axis > path {stroke: black;stroke-width: 1;}
g.axis > text {fill: black;}

/* 轴线标签 */
g.mark > path { stroke: #0000000f; stroke-width: 1; }
g.mark > text { transform: translate(-20px, 0px); font-size: 24px; text-anchor: end; dominant-baseline: middle; }

/* 高对称点 */
g.hsp > path { stroke: black; stroke-width: 1; }
g.hsp > text { transform: translate(0,-10px); font-size: 24px; text-anchor: middle; dominant-baseline: hanging; }

g.mark > text, g.hsp > text { paint-order: stroke; fill: gray; stroke: white; stroke-width: 10px; }

/* 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-width: 1; pointer-events: none; }
g.curve > circle { r: 4; fill: transparent; stroke-width: 2; }
g.curve > circle.acc { fill: var(--color); stroke: white; --color: blue; }
g.curve > circle.hsp { fill: var(--color); stroke: white; --color: gray; }
g.curve > circle:hover { fill: white; stroke: var(--color); }
g.curve > circle.acc:hover { fill: var(--color); stroke: white; }
g.curve > circle.hsp:hover { fill: var(--color); stroke: white; }

body.chart-zoomed .chart> svg.original { pointer-events: none; }
body.chart-zoomed .chart> svg.zoomed g.curve > path { stroke-width: 3px; }
body.chart-zoomed .chart> svg.zoomed g.curve > circle {r: 12;}

@media (min-width: 2400px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl {
        max-width: 2280px;
    }
}

@media (min-width: 3600px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl {
        max-width: 3420px;
    }
}

/* 加载蒙版 */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loading-overlay .loading-content {
    text-align: center;
    color: white;
    user-select: none;
}
.loading-overlay .loading-content p {
    margin-top: 1em;
    font-size: 1.2em;
}