@charset "UTF-8";
:root {
  --solid: #000;
  --liquid: #00D;
  --gas: #900;
  --unknown: #676;
  --heat-gradient: linear-gradient(to right, rgb(100,100,255), rgb(238, 238, 238), yellow, orange, red);
  --body-bg: rgb(243, 246, 248);
  --body-bg-trans: rgba(243, 246, 248, 0);
  --blocks: rgb(255, 255, 255);
  --text: 0,0,0;
  --darkshadow: rgba(0, 0, 0, 0.24);
  --lightshadow: rgba(0, 0, 0, 0.12);
  --hovered: #f5f8fa;
  --selected: #DDD;
  --group: white;
  --invert: 0;
  --nodata: hsl(0, 0%, 90%);
  --lock: 1;
  --element-pad: 0.05rem;
  --base-vw: 1.8;
  --sidebar-shrink: 1;
  --margin: 0.3rem;
  --min: 768px;
  --square-vw: 18;
  --minfont: calc(var(--base-vw) * var(--min) / var(--sidebar-shrink) / 100);
  --property-rows: 6;
  --row-height: calc((var(--square) - var(--2margin)) / var(--property-rows));
  --groups: 18;
  --grid-space: calc(5 * var(--aspect-ratio)); /* HACK: these are too complex */
  --icon-height: 1rem;
  --tab-height: calc(var(--icon-height) + var(--2margin));
  --border-width: calc(var(--gridgap) / 1);
  --track-height: var(--2margin);
  --periods: 1em;
  --button-size: calc(2 * var(--track-height));
  --bordercolor: rgba(var(--text), 0.12);
  --logo-ratio: calc(280 / 121.1);
  --rtl: 1;
  --tab-active: rgb(2,118,253);
  --tab-hover: rgb(45,190,252);
  --tab-inactive: #999;
  /*** Derived ***/
  --2margin: calc(var(--margin) * 2);
  --gridgap: calc(var(--grid-space) * var(--sidebar-shrink) / var(--groups));
  --fixedgridgap: var(--gridgap); /* HACK: these are too complex */
  --fixedborderwidth: var(--border-width);
  --groupfactor: calc(1 + (var(--groups) - 18) / 18);
  --alkali: #8031BA;
  --alkaline: #EE2A37;
  --lanthanoid: #927500;
  --actinoid: #039980;
  --transition: #FE9D09;
  --poor: #FF5E27;
  --metalloid: #3C9DFF;
  --nonmetal: #5A3EF6;
  --noble: #005D88;
  --boop: #68AF47;
  --zaphod: #6B84D3;
  --mxyzptlk: #A95051;
  --snorri: #FF518D;
  --wasabi: hsl(110, 90%, 55%);
  --yolo: hsl(70, 95%, 60%);
  --kazoom: hsl(180, 85%, 55%);
  --pangolinus: hsl(95, 90%, 58%);
  --frobnar: hsl(255, 90%, 70%);
  --smeeble: hsl(25, 95%, 60%);
  --gloop: hsl(195, 95%, 60%);
  --nyanstar: hsl(315, 90%, 65%);
  --bloopus: hsl(145, 95%, 55%);
  --wiggles: hsl(165, 95%, 55%);
  --hippomajor: hsl(20, 95%, 60%);
  --derpheus: hsl(200, 85%, 60%);
  --moo: hsl(240, 90%, 70%);
  --flarn: hsl(330, 95%, 75%);
  --squanch: hsl(45, 95%, 60%);
  --jibberwock: hsl(10, 95%, 60%);
  --flerbnar: hsl(275, 90%, 65%);
  --galumph: hsl(130, 95%, 60%);
  --taterus: hsl(60, 95%, 65%);
  --muffinbelt: hsl(90, 95%, 60%);
  --exowobble: hsl(120, 95%, 58%);
  --zorkon: hsl(160, 90%, 60%);
  --blipnox: hsl(200, 90%, 65%);
  --crinklestar: hsl(30, 95%, 60%);
  --oinkara: hsl(350, 90%, 68%);
  --spaghettius: hsl(0, 95%, 60%);
  --bubbletron: hsl(185, 90%, 58%);
  --naptune: hsl(210, 85%, 65%);
  --shipwrecka: hsl(240, 85%, 65%);
  --puddlethump: hsl(260, 85%, 60%);
  --glimmeroid: hsl(280, 85%, 65%);
  --twinklor: hsl(305, 85%, 65%);
  --zombozo: hsl(0, 0%, 55%);
  --wibble: hsl(80, 95%, 58%);
  --jibjab: hsl(225, 90%, 65%);
  --kablooey: hsl(150, 95%, 60%);
  --menkent: hsl(295, 90%, 58%);
  --acrux: hsl(302, 90%, 65%);
  --regor: hsl(97, 95%, 60%);
  --kausmed: hsl(264, 90%, 58%);
  --dubhe: hsl(226, 90%, 60%);
  --diphda: hsl(160, 95%, 65%);
  --zubeneschamali: hsl(310, 95%, 70%);
  --peacock: hsl(68, 95%, 62%);
  --navi: hsl(221, 90%, 60%);
  --alphecca: hsl(86, 95%, 62%);
  --mucephei: hsl(208, 90%, 62%);
  --aldebaran: hsl(93, 95%, 68%);
  --sadalmelik: hsl(92, 95%, 62%);
  --bellatrix: hsl(128, 95%, 60%);
  --situla: hsl(346, 90%, 55%);
  --merga: hsl(339, 95%, 55%);
  --megrez: hsl(252, 90%, 70%);
  --alpheratz: hsl(311, 95%, 58%);
  --arcturus: hsl(262, 85%, 65%);
  --sadalsuud: hsl(25, 95%, 60%);
  --mirach: hsl(10, 95%, 65%);
  --alnilam: hsl(113, 95%, 62%);
  --alderamin: hsl(61, 90%, 60%);
  --gacrux: hsl(114, 95%, 70%);
  --unukalhai: hsl(91, 95%, 68%);
  --betelgeuse: hsl(19, 90%, 60%);
  --cursa: hsl(247, 90%, 62%);
  --ascella: hsl(311, 90%, 60%);
  --mizar: hsl(99, 90%, 62%);
  --naos: hsl(166, 95%, 55%);
  --phact: hsl(190, 95%, 70%);
  --menkar: hsl(120, 95%, 68%);
  --avior: hsl(271, 90%, 70%);
  --elnath: hsl(332, 90%, 60%);
  --shaula: hsl(107, 95%, 58%);
  --deneb: hsl(136, 95%, 68%);
  --kochab: hsl(234, 90%, 60%);
  --rasalhague: hsl(152, 95%, 70%);
  --suhail: hsl(274, 85%, 55%);
  --ankaa: hsl(281, 85%, 60%);
  --rasalas: hsl(309, 85%, 65%);
  --saiph: hsl(350, 95%, 55%);
  --alioth: hsl(98, 95%, 65%);
  --taygeta: hsl(339, 95%, 60%);
  --phecda: hsl(75, 95%, 68%);
  --alphard: hsl(92, 90%, 70%);
  --regulus: hsl(317, 95%, 60%);
  --markab: hsl(233, 95%, 70%);
  --castor: hsl(243, 90%, 65%);
  --vega: hsl(16, 90%, 55%);
  --denebola: hsl(68, 90%, 60%);
  --eltanin: hsl(178, 85%, 68%);
  --marfak: hsl(109, 90%, 68%);
  --zubenelgenubi: hsl(224, 85%, 68%);
  --sabik: hsl(349, 95%, 60%);
  --vindemiatrix: hsl(139, 90%, 60%);
  --alnitak: hsl(123, 90%, 58%);
  --skat: hsl(68, 95%, 70%);
  --rana: hsl(184, 90%, 55%);
  --segin: hsl(118, 95%, 60%);
  --alnair: hsl(302, 85%, 55%);
  --algol: hsl(124, 90%, 60%);
  --nocategory: #EEE;
  --divider: #CEF;
  --divideroutline: #AAF;
  --dividerhover: #BBF;
}

:root[dir=rtl] {
  --rtl: -1;
  --heat-gradient: linear-gradient(to left, rgb(100,100,255), var(--blocks), yellow, orange, red);
}

.KeyRegion {
  --margin: calc(0.3rem * var(--sidebar-shrink));
  --2margin: calc(var(--margin) * 2);
}

.Dark {
  --bordercolor: rgba(var(--text), 0.2);
  --solid: #b5b5b5;
  --liquid: #99F;
  --gas: #F44;
  --unknown: #777;
  --nodata: #333;
  --body-bg: rgb(0, 0, 0);
  --body-bg-trans: rgba(0, 0, 0, 0);
  --blocks: #191919;
  --text: 222, 222, 222;
  --darkshadow: rgba(255, 255, 255, 0.24);
  --lightshadow: rgba(255, 255, 255, 0.12); /* needed by safari */
  --hovered: #141D26;
  --selected: #393939;
  --group: white;
  --invert: 1;
  --tab-active: #588ffe;
  --tab-inactive: #999;
  --alkali: #8031BA;
  --alkaline: #EE2A37;
  --lanthanoid: #927500;
  --actinoid: #039980;
  --transition: #FE9D09;
  --poor: #FF5E27;
  --metalloid: #3C9DFF;
  --nonmetal: #5A3EF6;
  --noble: #005D88;
  --boop: #68AF47;
  --zaphod: #6B84D3;
  --mxyzptlk: #A95051;
  --snorri: #FF518D;
  --wasabi: hsl(110, 90%, 55%);
  --yolo: hsl(70, 95%, 60%);
  --kazoom: hsl(180, 85%, 55%);
  --pangolinus: hsl(95, 90%, 58%);
  --frobnar: hsl(255, 90%, 70%);
  --smeeble: hsl(25, 95%, 60%);
  --gloop: hsl(195, 95%, 60%);
  --nyanstar: hsl(315, 90%, 65%);
  --bloopus: hsl(145, 95%, 55%);
  --wiggles: hsl(165, 95%, 55%);
  --hippomajor: hsl(20, 95%, 60%);
  --derpheus: hsl(200, 85%, 60%);
  --moo: hsl(240, 90%, 70%);
  --flarn: hsl(330, 95%, 75%);
  --squanch: hsl(45, 95%, 60%);
  --jibberwock: hsl(10, 95%, 60%);
  --flerbnar: hsl(275, 90%, 65%);
  --galumph: hsl(130, 95%, 60%);
  --taterus: hsl(60, 95%, 65%);
  --muffinbelt: hsl(90, 95%, 60%);
  --exowobble: hsl(120, 95%, 58%);
  --zorkon: hsl(160, 90%, 60%);
  --blipnox: hsl(200, 90%, 65%);
  --crinklestar: hsl(30, 95%, 60%);
  --oinkara: hsl(350, 90%, 68%);
  --spaghettius: hsl(0, 95%, 60%);
  --bubbletron: hsl(185, 90%, 58%);
  --naptune: hsl(210, 85%, 65%);
  --shipwrecka: hsl(240, 85%, 65%);
  --puddlethump: hsl(260, 85%, 60%);
  --glimmeroid: hsl(280, 85%, 65%);
  --twinklor: hsl(305, 85%, 65%);
  --zombozo: hsl(0, 0%, 55%);
  --wibble: hsl(80, 95%, 58%);
  --jibjab: hsl(225, 90%, 65%);
  --kablooey: hsl(150, 95%, 60%);
  --menkent: hsl(295, 90%, 58%);
  --acrux: hsl(302, 90%, 65%);
  --regor: hsl(97, 95%, 60%);
  --kausmed: hsl(264, 90%, 58%);
  --dubhe: hsl(226, 90%, 60%);
  --diphda: hsl(160, 95%, 65%);
  --zubeneschamali: hsl(310, 95%, 70%);
  --peacock: hsl(68, 95%, 62%);
  --navi: hsl(221, 90%, 60%);
  --alphecca: hsl(86, 95%, 62%);
  --mucephei: hsl(208, 90%, 62%);
  --aldebaran: hsl(93, 95%, 68%);
  --sadalmelik: hsl(92, 95%, 62%);
  --bellatrix: hsl(128, 95%, 60%);
  --situla: hsl(346, 90%, 55%);
  --merga: hsl(339, 95%, 55%);
  --megrez: hsl(252, 90%, 70%);
  --alpheratz: hsl(311, 95%, 58%);
  --arcturus: hsl(262, 85%, 65%);
  --sadalsuud: hsl(25, 95%, 60%);
  --mirach: hsl(10, 95%, 65%);
  --alnilam: hsl(113, 95%, 62%);
  --alderamin: hsl(61, 90%, 60%);
  --gacrux: hsl(114, 95%, 70%);
  --unukalhai: hsl(91, 95%, 68%);
  --betelgeuse: hsl(19, 90%, 60%);
  --cursa: hsl(247, 90%, 62%);
  --ascella: hsl(311, 90%, 60%);
  --mizar: hsl(99, 90%, 62%);
  --naos: hsl(166, 95%, 55%);
  --phact: hsl(190, 95%, 70%);
  --menkar: hsl(120, 95%, 68%);
  --avior: hsl(271, 90%, 70%);
  --elnath: hsl(332, 90%, 60%);
  --shaula: hsl(107, 95%, 58%);
  --deneb: hsl(136, 95%, 68%);
  --kochab: hsl(234, 90%, 60%);
  --rasalhague: hsl(152, 95%, 70%);
  --suhail: hsl(274, 85%, 55%);
  --ankaa: hsl(281, 85%, 60%);
  --rasalas: hsl(309, 85%, 65%);
  --saiph: hsl(350, 95%, 55%);
  --alioth: hsl(98, 95%, 65%);
  --taygeta: hsl(339, 95%, 60%);
  --phecda: hsl(75, 95%, 68%);
  --alphard: hsl(92, 90%, 70%);
  --regulus: hsl(317, 95%, 60%);
  --markab: hsl(233, 95%, 70%);
  --castor: hsl(243, 90%, 65%);
  --vega: hsl(16, 90%, 55%);
  --denebola: hsl(68, 90%, 60%);
  --eltanin: hsl(178, 85%, 68%);
  --marfak: hsl(109, 90%, 68%);
  --zubenelgenubi: hsl(224, 85%, 68%);
  --sabik: hsl(349, 95%, 60%);
  --vindemiatrix: hsl(139, 90%, 60%);
  --alnitak: hsl(123, 90%, 58%);
  --skat: hsl(68, 95%, 70%);
  --rana: hsl(184, 90%, 55%);
  --segin: hsl(118, 95%, 60%);
  --alnair: hsl(302, 85%, 55%);
  --algol: hsl(124, 90%, 60%);
  --divider: #00A;
  --divideroutline: #00D;
  --dividerhover: #00B;
}

/*** Undone in interactive ***/
.KeyRegion > :not(.SeriesState) {
  display: none;
}

/* Hidden properties, must be done early */
.DataRegion .Resets,
.DataRegion .Compounds {
  display: none !important;
}

* {
  box-sizing: border-box; /* Admit it, IE got this right and the initial standard was dumb */
}

.NoTransitions * {
  transition: all 0.05s linear !important;
}

html, body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background-color: var(--body-bg);
  color: rgb(var(--text));
}

body {
  margin: 0;
}

/*** Anchors ***/
.Dark a[href]:not(figure *) {
  color: var(--tab-active);
}

.Dark a:visited:not(figure *) {
  color: var(--group);
}

footer a,
.KeyRegion a,
.Group > a {
  text-decoration: inherit;
}

main :not(data) > a[href]:hover {
  outline: medium solid var(--tab-hover);
  outline-offset: 0.09rem;
}

footer a:hover {
  text-decoration: underline;
}

a[href^="#"]:hover {
  outline: none;
}

/*** Reset ***/
dd {
  margin: 0;
}

article#PropertyClass ul, ol {
  list-style-type: none;
  padding-inline-start: 0;
}

/*** Box shadows ***/
header,
.Raised + label,
.adsbygoogle[data-adsbygoogle-status=done],
article#PropertyClass ol,
input[type=search],
[value=expandedconfig] + li > output > b::before,
article#PropertyClass ul > li {
  background-color: var(--blocks);
  box-shadow: 0 1px 3px var(--lightshadow), 0 1px 2px var(--darkshadow);
}

.Raised + label:hover,
.Raised:focus + * {
  box-shadow: 0 2px 4px var(--lightshadow), 0 2px 3px var(--darkshadow);
}

figure {
  box-shadow: 0 1px 3px var(--lightshadow), 0 1px 2px var(--darkshadow), inset 0 1px 3px rgba(0, 0, 0, 0.12), inset 0 1px 2px rgba(0, 0, 0, 0.24);
}

.Raised:checked + label {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.24), inset 0 1px 2px rgba(0, 0, 0, 0.48);
}

.Expand {
  box-shadow: 0 19px 38px var(--darkshadow), 0 15px 12px var(--lightshadow);
}

figure > iframe {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12), inset 0 1px 2px rgba(0, 0, 0, 0.24);
}

/*** Header ***/
body > h1 {
  display: none;
}

header {
  font-size: 0.9em;
  font-weight: 500;
  letter-spacing: -0.02em;
}

header, nav {
  display: flex;
}

.Logo + label img {
  display: block;
}

header label {
  display: flex;
  align-items: center;
}

header label > a,
header label > a[href]:hover {
  text-decoration: inherit;
  color: inherit !important;
}

header svg + a {
  margin-inline-start: calc(var(--margin) / 2);
}

header > label svg,
nav > label svg {
  height: var(--tab-height);
}

.Raised + label svg {
  height: var(--icon-height);
}

.Logo + label img {
  width: calc(var(--tab-height) * var(--logo-ratio));
}

.Button + label {
  margin: calc(1.25 * var(--margin)) var(--margin);
}

.Raised + label {
  padding: 0 var(--margin);
  border-radius: var(--margin);
  background-color: var(--body-bg);
}

.Logo + label,
.WideButton + label,
nav > label {
  padding: 0 var(--2margin);
}

header > input:last-of-type + label {
  padding-inline-end: var(--margin);
}

header label {
  color: var(--tab-inactive);
}

header input + :hover,
header :focus + label {
  color: var(--tab-hover);
  background-color: var(--body-bg);
}

header :checked + label {
  color: var(--tab-active);
  background-color: var(--body-bg);
}

header .Flat + label {
  background-color: unset;
}

nav :checked + label {
  box-shadow: inset 0 -0.25em currentColor;
}

.Raised:checked + label {
  background-color: var(--tab-active);
  color: var(--blocks);
}

.Toggle.Left + label {
  margin-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.Toggle.Right + label {
  margin-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

header input:last-of-type + label,
.WideButton + label {
  margin-inline-start: auto;
}

.MenuButton + label {
  display: none;
}

/*** SVG ***/
header svg > g {
  stroke-width: 5;
  stroke: currentColor;
  fill: currentColor;
}

.Magnify g,
.Toggle + label g {
  stroke-width: 9;
}

nav :checked + * polyline,
nav :checked + * polygon,
nav :checked + * rect,
nav :checked + * circle,
nav :checked + * path,
nav :checked + * line {
  stroke: var(--body-bg);
}

nav :checked + * circle,
nav :checked + * path,
nav :checked + * polygon,
nav :checked + * rect {
  fill: currentColor;
}

.FillMask {
  fill: var(--blocks);
}

input + label:hover .FillMask {
  fill: var(--body-bg);
}

:checked + * .Dots circle {
  stroke: currentColor;
}

/*** Side/topbar ***/
main {
  display: flex;
}

main > article {
  display: flex !important;
  flex-direction: column;
  flex-grow: 1; /* sidebar zh */
}

aside {
  display: flex;
  flex-basis: var(--square);
  overflow: hidden;
}

.Collapse aside,
.Reset aside {
  opacity: 0;
  flex-basis: 0;
  visibility: hidden;
}

/* Side bar, landscape */
.Sidebar {
  --square-vw: 20;
}

@media (max-width: 1200px) { /* iPad width or so */
  .Sidebar {
    --square-vw: 24;
  }
}
.Sidebar .DataRegion {
  flex-grow: 1;
  flex-basis: 0; /* basis 0 plus grow 1 expands to height of sibling! */
}

.Sidebar .DataRegion > * {
  display: initial;
}

.Sidebar main {
  flex-direction: row;
  min-width: 0;
}

.Sidebar aside {
  flex-direction: column;
  flex-shrink: 0;
  min-width: 0;
}

.Sidebar aside figure {
  align-self: center;
  font-size: 2.1em;
  height: 3.5em;
  width: 3.5em;
  flex: unset;
}

.Sidebar aside ul > li {
  min-height: 2.5em;
  padding: 0 calc(var(--margin) * 1.5);
}

.Sidebar main > article {
  transition: width 0.3s linear;
  min-width: 0;
  display: flex;
}

.Sidebar:not(.Reset):not(.Collapse) {
  --sidebar-shrink: calc(1 - (var(--square-vw) + 2) / 100); /* 2% breathing room */
}

.Sidebar[data-wide="15"] aside > figure {
  display: none;
}

.Sidebar[data-wide="15"] .Sidebar.Collapse,
.Sidebar.Reset {
  --sidebar-shrink: 1;
}

.Sidebar canvas {
  height: unset;
}

/*** CloseUp box ***/
figure {
  border: var(--margin) solid rgba(var(--text), 0.08);
}

figure a {
  color: inherit;
  text-decoration: inherit;
}

figure:hover a {
  color: var(--tab-active);
  text-decoration: revert;
}

aside figure {
  font-size: 2.8em;
  padding: var(--margin);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  text-shadow: 0 1px 2px rgba(var(--text), 0.2);
  flex: 0 0 calc(var(--square) - var(--2margin));
  min-width: 0;
  white-space: nowrap;
}

figure > output {
  min-width: 0;
}

figure > output,
figure > small {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  line-height: 1;
}

figure > small {
  min-width: 1.2em; /* HACK: magic number */
}

/*** Radio button boxes ***/
article#PropertyClass ul {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-template-rows: repeat(var(--property-rows), 1fr);
  grid-gap: 0 var(--2margin);
  margin: 0;
  scrollbar-width: none;
}

article#PropertyClass ul.CompoundResults {
  display: initial;
}

article#PropertyClass ul::-webkit-scrollbar {
  display: none;
}

.CompoundResults > li {
  flex-wrap: wrap;
}

article#PropertyClass ul > li > select {
  margin-inline-end: calc(-1 * var(--margin));
  font: inherit;
  border: none;
  color: GrayText;
  background-color: unset;
}

article#PropertyClass ul > li > label > select {
  color: inherit;
  font: inherit;
  border: none;
  background-color: var(--body-bg); /* MAYBE */
}

article#PropertyClass ul > li > a {
  text-align: end; /* push 2nd compounds right */
}

article#PropertyClass ul > li > output {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

article#PropertyClass ul > li.HideStart > output {
  direction: rtl;
  text-align: left;
}

article#PropertyClass ul > li:hover > output {
  direction: unset;
  white-space: initial;
  overflow: initial;
  text-align: end;
}

article#PropertyClass ul > li > a ~ a {
  flex-basis: 100%;
}

article#PropertyClass ul > li {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* push sidebar compounds right */
  padding: 0 var(--2margin);
  break-inside: avoid;
  outline: 0 solid var(--tab-hover);
}

article#PropertyClass aside ul > li {
  min-height: var(--row-height);
}

.DataRegion ul > li > label {
  margin-inline-end: var(--margin);
  white-space: nowrap;
  flex-grow: 1;
}

article#PropertyClass ul > li:hover {
  background-color: var(--hovered);
}

article#PropertyClass ul > input:checked + li {
  background-color: var(--selected);
}

article#PropertyClass ul:not(.CompoundResults) > li:hover {
  outline-width: var(--fixedgridgap);
  z-index: 2;
}

article#PropertyClass ul:not(.CompoundResults) > input:focus + li {
  outline-width: var(--fixedgridgap);
  outline-color: LinkText;
  z-index: 3;
}

.DataRegion ul > li > * {
  overflow-wrap: break-word;
  hyphens: auto;
}

.KeyRegion ul > li {
  overflow-wrap: anywhere;
}

/*** Unit selects ***/
.electric > select:not(.electric),
.thermal > select:not(.thermal),
.specific > select:not(.specific),
.vaporization > select:not(.vaporization),
.fusion > select:not(.fusion) {
  display: none;
}

/*** Properties ***/
.Properties {
  grid-auto-columns: 32fr 33fr 35fr; /* BUG: find less jittery values for russian: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns */
}

/*** Slider ***/
.Slider {
  position: sticky;
  left: var(--margin);
  display: flex;
  overflow: hidden;
  align-items: center;
  margin-inline-start: var(--margin);
}

[dir=rtl] .Slider {
  left: unset;
  right: var(--margin);
}

.Slider > div,
.Slider > label {
  margin: var(--margin) var(--2margin);
}

.Slider input[type=button] {
  padding: 0 0.1em;
  font-size: inherit;
}

.RangeNumbers {
  display: flex;
  align-items: baseline;
  margin: auto;
  white-space: nowrap;
}

.RangeNumbers > input {
  margin-inline-start: var(--margin);
}

.RangeNumbers > label {
  margin-inline-end: var(--margin);
}

input[type=number]:out-of-range {
  background-color: #FCC;
}

.Slider {
  flex-basis: 0;
  visibility: hidden;
  opacity: 0;
}

.Reset .SliderTemp,
.Property .series .SliderTemp,
.Property .name .SliderTemp,
.Property .state .SliderTemp,
.Property .melt .SliderTemp,
.Property .boil .SliderTemp,
.Property .discover .SliderYear {
  flex-basis: 2.1em;
  visibility: visible;
  opacity: 1;
}

.Property .name ol > li,
.Isotope .isoname ol > li.Tope,
.Isotope ol > li:not(.Tope) {
  cursor: pointer;
}

[type=number] {
  width: 7ch;
  text-align: end;
  font-size: inherit;
  border: none;
  border-bottom: thin solid GrayText;
  background-color: inherit;
  color: inherit;
}

[type=number]::-webkit-inner-spin-button {
  margin-left: 0.5ch;
}

[type=range] {
  flex-grow: 1;
}

[type=range]::-webkit-slider-runnable-track {
  border: thin solid ButtonShadow;
}

[type=range]::-webkit-slider-thumb {
  padding: var(--track-height) 0;
  margin: calc(var(--track-height) / -2) 0;
}

[type=range]::-moz-range-track {
  height: var(--track-height);
  border: thin solid ButtonShadow;
}

[type=range]::-moz-range-thumb {
  padding: calc(var(--track-height) / 2) 0;
}

.TempRange::-webkit-slider-runnable-track {
  background: var(--heat-gradient);
}

.YearRange::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--blocks), 75%, LinkText);
}

.TempRange::-moz-range-track {
  background: var(--heat-gradient);
}

.YearRange::-moz-range-track {
  background: linear-gradient(to right, var(--blocks), 75%, LinkText);
}

/*** Table ***/
article#PropertyClass ol {
  display: grid !important;
  transform-style: preserve-3d; /* create stacking context for isotopes */
  padding: calc(var(--margin) * 1.5) var(--2margin) var(--2margin) var(--margin);
}

article#PropertyClass ol {
  grid-template-columns: repeat(var(--groups), minmax(0, 1fr));
}

.Legend,
ol > li {
  white-space: nowrap;
  padding-top: var(--element-pad);
  padding-bottom: var(--element-pad);
}

article#PropertyClass ol li > *,
.Legend > *,
figure > output > * {
  line-height: 1;
  display: block;
  font-style: normal;
  font-weight: normal;
}

figure abbr, li > abbr {
  font-weight: 600;
}

/*** Element boxes ***/
figure b,
ol > * > b {
  font-size: 0.65em;
  font-weight: normal;
  speak: never;
}

@media (max-width: 600px) {
  article#PropertyClass ol > * > abbr {
    font-size: 0.5em;
    font-weight: bold;
  }
  em, data {
    font-size: 0.6em;
    font-weight: bold !important;
    text-align: right;
  }
}
@media (min-width: 601px) and (max-width: 800px) {
  article#PropertyClass ol > * > abbr {
    font-size: 0.6em;
    font-weight: bold;
  }
  em, data {
    font-size: 0.6em;
    font-weight: bold !important;
    text-align: right;
  }
}
@media (min-width: 800px) and (max-width: 2000px) {
  article#PropertyClass ol > * > abbr {
    font-size: 0.63em;
    font-weight: bold;
  }
  em, data {
    font-size: 0.63em;
    font-weight: bold !important;
    text-align: right;
  }
}
@media (min-width: 2000px) {
  article#PropertyClass ol > * > abbr {
    font-size: 0.75em;
    font-weight: bold;
  }
  em, data {
    font-size: 0.75em;
    font-weight: bold !important;
    text-align: right;
  }
}
data {
  text-overflow: ellipsis;
  overflow: hidden;
}

/* adds up to 1.45em just like 0.9+0.55 */
small {
  font-size: 0.38em;
  text-align: end;
}

/*** Table interior ***/
.Period, .Group {
  color: var(--group);
  background-color: #305DA8;
  line-height: 1;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: clamp(8px, 2vw, 16px);
}

.Period {
  align-self: center;
  text-align: right;
  padding-right: calc(var(--margin) / 2);
  z-index: 2;
}

.Removed6, .Removed7 {
  margin-right: var(--fixedgridgap);
}

.Group > a {
  font-size: 0.5em;
  display: block;
}

.Group {
  text-align: center;
  font-weight: bold;
}

.Parentheses {
  font-size: 0.7em;
  margin: var(--margin) var(--2margin);
  align-self: center;
}

.Label57to71,
.Label89to103 {
  font-size: 0.65em;
  align-self: center;
  text-align: center;
}

/*** Grid Positioning ***/
.KeyRegion {
  grid-column: 1/span 17;
  grid-row: 2/span 3;
}

[data-wide="15"] .KeyRegion {
  grid-column-end: span 14;
}

.G3 {
  grid-column-start: calc(var(--groups) - 14);
}

.WideGap,
.WideKeyRegion {
  display: none;
}

.VerticalInner {
  grid-column-start: 4;
  grid-row: 7/span 5;
}

.Legend {
  grid-column-start: 3;
  grid-row-start: 2;
}

.OldSlider {
  grid-column-end: span 5;
  grid-row-start: 2;
}

.PosterLogo {
  grid-column: 1/span 3;
  grid-row: 9/span 3;
}

.Parentheses {
  grid-column-end: span calc(var(--groups) - 3);
}

.Removed6, .Removed7,
.Label57to71,
.Label89to103 {
  grid-column-start: 4;
  pointer-events: none;
}

/*
li.Lanthanoid, .Removed6 {
    grid-row-start: 10;
}

li.Actinoid, .Removed7 {
    grid-row-start: 11;
}
*/
.Label57to71 {
  grid-row-start: 7;
  z-index: 2;
}

.Label89to103 {
  grid-row-start: 8;
  z-index: 2;
}

/*** Input/accessibility ***/
header input[type=radio],
.SearchConsole input[type=radio],
ul input[type=radio],
header input[type=checkbox] {
  position: absolute;
  opacity: 0;
  clip-path: polygon(0 0);
}

.RangeNumbers label,
.Unknown output.Unknown {
  background-color: inherit;
  color: GrayText;
}

button {
  font-size: 1em;
}

/*** Ads ***/
.Notice {
  display: flex;
  align-items: center;
  max-width: 100%;
  min-height: 93px;
  overflow: hidden;
  color: GrayText;
  padding-top: 1px;
  padding-bottom: 2px;
}

.Notice > div {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  justify-content: space-between;
}

.Notice > div > button {
  margin: 0 var(--margin);
  align-self: flex-start;
}

.Notice > div > button::after {
  content: "✕";
}

.Notice > div > span {
  text-align: center;
}

.Notice > div > span::before {
  content: "«Ad";
}

.adsbygoogle {
  display: block;
  height: 90px;
  flex-grow: 1;
  text-align: center;
  margin: 0 var(--margin);
  z-index: 1 !important;
}

blockquote {
  padding: 0 calc(2 * var(--2margin));
  font-size: min(0.8em, 32px);
  margin: 0;
}

blockquote > form {
  display: inline;
}

blockquote > form > * {
  font-size: inherit;
}

ins[data-adsbygoogle-status=done] + blockquote,
ins:not([data-adsbygoogle-status]) ~ div {
  display: none;
}

/*** Search ***/
.SearchConsole {
  position: absolute;
  margin: var(--margin);
  transform: translateX(calc(var(--rtl) * -50%));
  visibility: hidden;
  white-space: nowrap;
}

/*** Footer ***/
addr {
  flex-basis: 100%;
  color: GrayText;
  margin: var(--2margin) 0;
  font-size: 0.6em;
  text-align: center;
}

addr a {
  color: inherit;
}

footer select {
  font: inherit;
}

footer label {
  color: var(--tab-active);
  vertical-align: text-top;
}

footer > dl {
  break-inside: avoid;
}

footer dt {
  font-size: 0.9em;
  margin-bottom: var(--margin);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

footer dd {
  font-size: 0.8em;
  line-height: 1;
  margin: var(--margin) 0;
}

footer svg {
  width: 1em;
  margin-inline-end: 0.3em;
  vertical-align: bottom;
}

.FullScreen footer {
  display: none;
}

/*** Series Colors ***/
.Alkali .Alkali,
figure.Alkali {
  background-color: var(--alkali);
}

.Alkaline .Alkaline,
figure.Alkaline {
  background-color: var(--alkaline);
}

.Lanthanoid .Lanthanoid,
figure.Lanthanoid {
  background-color: var(--lanthanoid);
}

.Actinoid .Actinoid,
figure.Actinoid {
  background-color: var(--actinoid);
}

.Transition .Transition,
figure.Transition {
  background-color: var(--transition);
}

.Poor .Poor,
figure.Poor {
  background-color: var(--poor);
}

.Metalloid .Metalloid,
figure.Metalloid {
  background-color: var(--metalloid);
}

.Nonmetal .Nonmetal,
figure.Nonmetal {
  background-color: var(--nonmetal);
}

.Noble .Noble,
figure.Noble {
  background-color: var(--noble);
}

.Unknown .Unknown,
figure.Unknown {
  background-color: var(--nocategory);
}

/*** Funny & Whimsical Astronomical Names ***/
.Boop .Boop,
figure.Boop {
  background-color: var(--boop);
}

.Zaphod .Zaphod,
figure.Zaphod {
  background-color: var(--zaphod);
}

.Mxyzptlk .Mxyzptlk,
figure.Mxyzptlk {
  background-color: var(--mxyzptlk);
}

.Snorri .Snorri,
figure.Snorri {
  background-color: var(--snorri);
}

.Wasabi .Wasabi,
figure.Wasabi {
  background-color: var(--wasabi);
}

.Yolo .Yolo,
figure.Yolo {
  background-color: var(--yolo);
}

.Kazoom .Kazoom,
figure.Kazoom {
  background-color: var(--kazoom);
}

.Pangolinus .Pangolinus,
figure.Pangolinus {
  background-color: var(--pangolinus);
}

.Frobnar .Frobnar,
figure.Frobnar {
  background-color: var(--frobnar);
}

.Smeeble .Smeeble,
figure.Smeeble {
  background-color: var(--smeeble);
}

.Gloop .Gloop,
figure.Gloop {
  background-color: var(--gloop);
}

.Nyanstar .Nyanstar,
figure.Nyanstar {
  background-color: var(--nyanstar);
}

.Bloopus .Bloopus,
figure.Bloopus {
  background-color: var(--bloopus);
}

.Wiggles .Wiggles,
figure.Wiggles {
  background-color: var(--wiggles);
}

.HippoMajor .HippoMajor,
figure.HippoMajor {
  background-color: var(--hippomajor);
}

.Derpheus .Derpheus,
figure.Derpheus {
  background-color: var(--derpheus);
}

.Moo .Moo,
figure.Moo {
  background-color: var(--moo);
}

.Flarn .Flarn,
figure.Flarn {
  background-color: var(--flarn);
}

.Squanch .Squanch,
figure.Squanch {
  background-color: var(--squanch);
}

.Jibberwock .Jibberwock,
figure.Jibberwock {
  background-color: var(--jibberwock);
}

.Flerbnar .Flerbnar,
figure.Flerbnar {
  background-color: var(--flerbnar);
}

.Galumph .Galumph,
figure.Galumph {
  background-color: var(--galumph);
}

.Taterus .Taterus,
figure.Taterus {
  background-color: var(--taterus);
}

.MuffinBelt .MuffinBelt,
figure.MuffinBelt {
  background-color: var(--muffinbelt);
}

.ExoWobble .ExoWobble,
figure.ExoWobble {
  background-color: var(--exowobble);
}

.Zorkon .Zorkon,
figure.Zorkon {
  background-color: var(--zorkon);
}

.Blipnox .Blipnox,
figure.Blipnox {
  background-color: var(--blipnox);
}

.CrinkleStar .CrinkleStar,
figure.CrinkleStar {
  background-color: var(--crinklestar);
}

.Oinkara .Oinkara,
figure.Oinkara {
  background-color: var(--oinkara);
}

.Spaghettius .Spaghettius,
figure.Spaghettius {
  background-color: var(--spaghettius);
}

.Bubbletron .Bubbletron,
figure.Bubbletron {
  background-color: var(--bubbletron);
}

.Naptune .Naptune,
figure.Naptune {
  background-color: var(--naptune);
}

.Shipwrecka .Shipwrecka,
figure.Shipwrecka {
  background-color: var(--shipwrecka);
}

.Puddlethump .Puddlethump,
figure.Puddlethump {
  background-color: var(--puddlethump);
}

.Glimmeroid .Glimmeroid,
figure.Glimmeroid {
  background-color: var(--glimmeroid);
}

.Twinklor .Twinklor,
figure.Twinklor {
  background-color: var(--twinklor);
}

.Zombozo .Zombozo,
figure.Zombozo {
  background-color: var(--zombozo);
}

.Wibble .Wibble,
figure.Wibble {
  background-color: var(--wibble);
}

.Jibjab .Jibjab,
figure.Jibjab {
  background-color: var(--jibjab);
}

.Kablooey .Kablooey,
figure.Kablooey {
  background-color: var(--kablooey);
}

.Menkent .Menkent,
figure.Menkent {
  background-color: var(--menkent);
}

.Acrux .Acrux,
figure.Acrux {
  background-color: var(--acrux);
}

.Regor .Regor,
figure.Regor {
  background-color: var(--regor);
}

.Kausmed .Kausmed,
figure.Kausmed {
  background-color: var(--kausmed);
}

.Dubhe .Dubhe,
figure.Dubhe {
  background-color: var(--dubhe);
}

.Diphda .Diphda,
figure.Diphda {
  background-color: var(--diphda);
}

.Zubeneschamali .Zubeneschamali,
figure.Zubeneschamali {
  background-color: var(--zubeneschamali);
}

.Peacock .Peacock,
figure.Peacock {
  background-color: var(--peacock);
}

.Navi .Navi,
figure.Navi {
  background-color: var(--navi);
}

.Alphecca .Alphecca,
figure.Alphecca {
  background-color: var(--alphecca);
}

.Mucephei .Mucephei,
figure.Mucephei {
  background-color: var(--mucephei);
}

.Aldebaran .Aldebaran,
figure.Aldebaran {
  background-color: var(--aldebaran);
}

.Sadalmelik .Sadalmelik,
figure.Sadalmelik {
  background-color: var(--sadalmelik);
}

.Bellatrix .Bellatrix,
figure.Bellatrix {
  background-color: var(--bellatrix);
}

.Situla .Situla,
figure.Situla {
  background-color: var(--situla);
}

.Merga .Merga,
figure.Merga {
  background-color: var(--merga);
}

.Megrez .Megrez,
figure.Megrez {
  background-color: var(--megrez);
}

.Alpheratz .Alpheratz,
figure.Alpheratz {
  background-color: var(--alpheratz);
}

.Arcturus .Arcturus,
figure.Arcturus {
  background-color: var(--arcturus);
}

.Sadalsuud .Sadalsuud,
figure.Sadalsuud {
  background-color: var(--sadalsuud);
}

.Mirach .Mirach,
figure.Mirach {
  background-color: var(--mirach);
}

.Alnilam .Alnilam,
figure.Alnilam {
  background-color: var(--alnilam);
}

.Alderamin .Alderamin,
figure.Alderamin {
  background-color: var(--alderamin);
}

.Gacrux .Gacrux,
figure.Gacrux {
  background-color: var(--gacrux);
}

.Unukalhai .Unukalhai,
figure.Unukalhai {
  background-color: var(--unukalhai);
}

.Betelgeuse .Betelgeuse,
figure.Betelgeuse {
  background-color: var(--betelgeuse);
}

.Cursa .Cursa,
figure.Cursa {
  background-color: var(--cursa);
}

.Ascella .Ascella,
figure.Ascella {
  background-color: var(--ascella);
}

.Mizar .Mizar,
figure.Mizar {
  background-color: var(--mizar);
}

.Naos .Naos,
figure.Naos {
  background-color: var(--naos);
}

.Phact .Phact,
figure.Phact {
  background-color: var(--phact);
}

.Menkar .Menkar,
figure.Menkar {
  background-color: var(--menkar);
}

.Avior .Avior,
figure.Avior {
  background-color: var(--avior);
}

.Elnath .Elnath,
figure.Elnath {
  background-color: var(--elnath);
}

.Shaula .Shaula,
figure.Shaula {
  background-color: var(--shaula);
}

.Deneb .Deneb,
figure.Deneb {
  background-color: var(--deneb);
}

.Kochab .Kochab,
figure.Kochab {
  background-color: var(--kochab);
}

.Rasalhague .Rasalhague,
figure.Rasalhague {
  background-color: var(--rasalhague);
}

.Suhail .Suhail,
figure.Suhail {
  background-color: var(--suhail);
}

.Ankaa .Ankaa,
figure.Ankaa {
  background-color: var(--ankaa);
}

.Rasalas .Rasalas,
figure.Rasalas {
  background-color: var(--rasalas);
}

.Saiph .Saiph,
figure.Saiph {
  background-color: var(--saiph);
}

.Alioth .Alioth,
figure.Alioth {
  background-color: var(--alioth);
}

.Taygeta .Taygeta,
figure.Taygeta {
  background-color: var(--taygeta);
}

.Phecda .Phecda,
figure.Phecda {
  background-color: var(--phecda);
}

.Alphard .Alphard,
figure.Alphard {
  background-color: var(--alphard);
}

.Regulus .Regulus,
figure.Regulus {
  background-color: var(--regulus);
}

.Markab .Markab,
figure.Markab {
  background-color: var(--markab);
}

.Castor .Castor,
figure.Castor {
  background-color: var(--castor);
}

.Vega .Vega,
figure.Vega {
  background-color: var(--vega);
}

.Denebola .Denebola,
figure.Denebola {
  background-color: var(--denebola);
}

.Eltanin .Eltanin,
figure.Eltanin {
  background-color: var(--eltanin);
}

.Marfak .Marfak,
figure.Marfak {
  background-color: var(--marfak);
}

.Zubenelgenubi .Zubenelgenubi,
figure.Zubenelgenubi {
  background-color: var(--zubenelgenubi);
}

.Sabik .Sabik,
figure.Sabik {
  background-color: var(--sabik);
}

.Vindemiatrix .Vindemiatrix,
figure.Vindemiatrix {
  background-color: var(--vindemiatrix);
}

.Alnitak .Alnitak,
figure.Alnitak {
  background-color: var(--alnitak);
}

.Skat .Skat,
figure.Skat {
  background-color: var(--skat);
}

.Rana .Rana,
figure.Rana {
  background-color: var(--rana);
}

.Segin .Segin,
figure.Segin {
  background-color: var(--segin);
}

.Alnair .Alnair,
figure.Alnair {
  background-color: var(--alnair);
}

.Algol .Algol,
figure.Algol {
  background-color: var(--algol);
}

.Sirius .Sirius,
figure.Sirius {
  background-color: var(--sirius);
}

.Procyon .Procyon,
figure.Procyon {
  background-color: var(--procyon);
}

.Spica .Spica,
figure.Spica {
  background-color: var(--spica);
}

.Mirfak .Mirfak,
figure.Mirfak {
  background-color: var(--mirfak);
}

.Wezen .Wezen,
figure.Wezen {
  background-color: var(--wezen);
}

.Almaaz .Almaaz,
figure.Almaaz {
  background-color: var(--almaaz);
}

.Pollux .Pollux,
figure.Pollux {
  background-color: var(--pollux);
}

.Zosma .Zosma,
figure.Zosma {
  background-color: var(--zosma);
}

.Electra .Electra,
figure.Electra {
  background-color: var(--electra);
}

.Sterope .Sterope,
figure.Sterope {
  background-color: var(--sterope);
}

.Atrias .Atrias,
figure.Atrias {
  background-color: var(--atrias);
}

.Izar .Izar,
figure.Izar {
  background-color: var(--izar);
}

.Almach .Almach,
figure.Almach {
  background-color: var(--almach);
}

.Hamal .Hamal,
figure.Hamal {
  background-color: var(--hamal);
}

.Rukbat .Rukbat,
figure.Rukbat {
  background-color: var(--rukbat);
}

.Kitalpha .Kitalpha,
figure.Kitalpha {
  background-color: var(--kitalpha);
}

.Biham .Biham,
figure.Biham {
  background-color: var(--biham);
}

.Achernar .Achernar,
figure.Achernar {
  background-color: var(--achernar);
}

.Nihal .Nihal,
figure.Nihal {
  background-color: var(--nihal);
}

.Tarazed .Tarazed,
figure.Tarazed {
  background-color: var(--tarazed);
}

.Schedar .Schedar,
figure.Schedar {
  background-color: var(--schedar);
}

.Caph .Caph,
figure.Caph {
  background-color: var(--caph);
}

.Dschubba .Dschubba,
figure.Dschubba {
  background-color: var(--dschubba);
}

.Errai .Errai,
figure.Errai {
  background-color: var(--errai);
}

.Zaurak .Zaurak,
figure.Zaurak {
  background-color: var(--zaurak);
}

.Mirzam .Mirzam,
figure.Mirzam {
  background-color: var(--mirzam);
}

.Angetenar .Angetenar,
figure.Angetenar {
  background-color: var(--angetenar);
}

.Tureis .Tureis,
figure.Tureis {
  background-color: var(--tureis);
}

.Alkaid .Alkaid,
figure.Alkaid {
  background-color: var(--alkaid);
}

.Rasalgethi .Rasalgethi,
figure.Rasalgethi {
  background-color: var(--rasalgethi);
}

.TaniaAustralis .TaniaAustralis,
figure.TaniaAustralis {
  background-color: var(--taniaaustralis);
}

.TaniaBorealis .TaniaBorealis,
figure.TaniaBorealis {
  background-color: var(--taniaborealis);
}

.Mintaka .Mintaka,
figure.Mintaka {
  background-color: var(--mintaka);
}

.Hadar .Hadar,
figure.Hadar {
  background-color: var(--hadar);
}

.Azha .Azha,
figure.Azha {
  background-color: var(--azha);
}

.Sargas .Sargas,
figure.Sargas {
  background-color: var(--sargas);
}

.Alhena .Alhena,
figure.Alhena {
  background-color: var(--alhena);
}

.Altair .Altair,
figure.Altair {
  background-color: var(--altair);
}

.Barnard .Barnard,
figure.Barnard {
  background-color: var(--barnard);
}

.Becrux .Becrux,
figure.Becrux {
  background-color: var(--becrux);
}

.Cebalrai .Cebalrai,
figure.Cebalrai {
  background-color: var(--cebalrai);
}

.Chara .Chara,
figure.Chara {
  background-color: var(--chara);
}

.Enif .Enif,
figure.Enif {
  background-color: var(--enif);
}

.Fomalhaut .Fomalhaut,
figure.Fomalhaut {
  background-color: var(--fomalhaut);
}

.Matar .Matar,
figure.Matar {
  background-color: var(--matar);
}

.RigelKent .RigelKent,
figure.RigelKent {
  background-color: var(--rigelkent);
}

.Saturn .Saturn,
figure.Saturn {
  background-color: var(--saturn);
}

.Skut .Skut,
figure.Skut {
  background-color: var(--skut);
}

.Sualocin .Sualocin,
figure.Sualocin {
  background-color: var(--sualocin);
}

.VerticalInner {
  background-color: var(--divider);
  border-color: var(--divideroutline);
}

/*** Series Legend ***/
.state .Series > * {
  background-color: transparent;
}

.Series {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
  font-size: 0.7em;
  min-width: 0;
  overflow-wrap: anywhere;
}

.Series > * {
  padding: 0.15em;
  display: flex; /* expands A to fill container */
}

.Series > * > a {
  flex-grow: 1;
}

.Series > dt {
  font-weight: 600;
}

.Series > dt:not(.Metalloid):hover {
  background-color: var(--selected);
}

.Series > dd {
  writing-mode: vertical-rl;
  grid-row-end: span 2;
}

.Series > dd > a {
  display: block;
  max-height: 16em; /* Firefox eats line breaks otherwise */
}

/*
.Series > .Metals {
    grid-column-end: span 5;
    text-align: center;
    border-top-left-radius: var(--margin);
    border-color: rgb(var(--text));
}

.Series > .Metalloid {
    grid-row-end: span 3;
    writing-mode: vertical-rl;
}

.Series > .Nonmetals {
    grid-column-end: span 2;
    text-align: center;
    border-top-right-radius: var(--margin);
    border-color: rgb(var(--text));
}

.Series > .Lanthanoid,
.Series > .Actinoid {
    writing-mode: initial;
    grid-row-end: span 1;
}
*/
/*** State of Matter Legend ***/
dl {
  margin: 0;
}

.StateKey {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.StateKey > div {
  display: flex;
  align-items: baseline;
}

.StateKey dt {
  width: 1.4em;
  line-height: 1.4;
  box-sizing: content-box;
  text-align: center;
  font-weight: 600;
}

.StateKey dd {
  margin-inline-start: var(--margin);
  white-space: nowrap;
}

/*** State of Matter Colors ***/
dt.Solid, dt.Solid + dd,
.Solid > abbr {
  color: var(--solid);
}

dt.Liquid, dt.Liquid + dd,
.Liquid > abbr {
  color: var(--liquid);
}

dt.Gas, dt.Gas + dd,
.Gas > abbr {
  color: var(--gas);
}

dt.UnknownState, dt.UnknownState + dd,
.UnknownState > abbr {
  color: var(--unknown);
}

@keyframes solid {
  to {
    background-color: var(--solid);
    color: var(--blocks);
  }
}
@keyframes liquid {
  to {
    background-color: var(--liquid);
    color: var(--blocks);
  }
}
@keyframes gas {
  to {
    background-color: var(--gas);
    color: var(--blocks);
  }
}
@keyframes unknown {
  to {
    background-color: var(--unknown);
    color: var(--blocks);
  }
}
.Solid, .Solid > abbr {
  animation: solid 0s step-start;
}

.Liquid, .Liquid > abbr {
  animation: liquid 0s step-start;
}

.Gas, .Gas > abbr {
  animation: gas 0s step-start;
}

.UnknownState,
.UnknownState > abbr {
  animation: unknown 0s step-start;
}

li.White, li.White > abbr {
  color: white !important;
}

li.Black, li.Black > abbr {
  color: black !important;
}

.Reset .Delay:not(.Shine) li,
.Property .series .Delay li,
.Property .name .Delay li {
  animation-duration: 1s;
}

#Ptable li > abbr {
  animation-duration: inherit;
  animation-iteration-count: inherit;
}

.Solid .Solid,
.Liquid .Liquid,
.Gas .Gas,
.UnknownState .UnknownState {
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

.state dt {
  animation-fill-mode: forwards;
}

html:not(.Property):not(.Reset) abbr,
.Property article:not(.name):not(.series):not(.melt):not(.boil) abbr {
  color: rgb(var(--text));
}

/*** Borders and Gaps ***/
article#PropertyClass ol > li,
.Series > dd, .Series > .Metalloid,
.CompoundDragTarget li {
  border-color: var(--bordercolor);
}
article#PropertyClass ol > li {
    min-width: 0; /* allow shrinking inside grid cell */
    overflow: hidden; /* prevent overflow from text */
    text-overflow: ellipsis; /* optional: show ... for long text */
    white-space: nowrap; /* keep label in one line */
}

.StateOfMatter dt,
.PropertyKey > dl,
.Blocks dt,
.ConfigBlocks > div > div > div,
.CompoundDragTarget li,
.Series > *,
.VerticalInner {
  border-width: var(--border-width);
  border-style: solid;
}

.Series > .Nonmetals,
.Series > .Metals {
  border-bottom: none;
}

.Legend {
  border-color: transparent;
}

.Legend,
article#PropertyClass ol > li:not(.Tope) {
  border-width: var(--fixedborderwidth);
  border-style: solid;
  outline: 0 solid var(--tab-hover);
}

.VerticalInner {
  border-radius: var(--border-width);
  box-shadow: 0 0 0 var(--border-width) var(--divideroutline);
}

article#PropertyClass ol {
  grid-gap: var(--gridgap);
}

.Series {
  grid-gap: var(--fixedgridgap);
}

.StateOfMatter dt {
  border-color: rgb(var(--text));
}

/*** Margins ***/
header {
  margin-bottom: var(--margin);
}

.Notice {
  margin: var(--2margin) var(--margin) 0;
}

main,
article#PropertyClass ol,
figure {
  margin: var(--margin);
}

/*** Legend and Data holders ***/
.KeyRegion {
  contain: size;
}

.KeyRegion a {
  color: inherit !important;
}

.DataRegion {
  position: relative; /* for gradients */
}

.DataRegion::before {
  background: linear-gradient(to bottom, var(--body-bg), var(--body-bg-trans));
  content: "";
  position: absolute;
  height: var(--margin);
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

.DataRegion::after {
  background: linear-gradient(to top, var(--body-bg), var(--body-bg-trans));
  content: "";
  position: absolute;
  height: var(--margin);
  bottom: 0;
  left: 0;
  right: 0;
}

.KeyRegion, .DataRegion {
  display: flex;
}

.KeyRegion > * {
  display: flex;
  padding: var(--2margin);
}

.KeyRegion > :not(.IsotopeKey) {
  gap: var(--2margin);
}

.DataRegion > * {
  padding: var(--margin);
  overflow-y: auto; /*overlay*/
  font-size: 0.65em;
}

.DataRegion > *,
.KeyRegion > * {
  min-width: 100%; /* scroll-snap-align: start; */
}

.SeriesState,
.PropertyKey,
.ElectronKey,
.IsotopeKey > *,
.CompoundKey {
  justify-content: space-evenly;
}

/* PropertyKey > :not(.IsotopeKey) ? */
/* Top bar, default */
main {
  flex-direction: column;
}

aside {
  flex-direction: row;
}

/* Height-width auto scaling */
body > * {
  padding: 0 min((100% - 100 * var(--aspect-ratio)) / 5, (100% - var(--min) / var(--sidebar-shrink) * var(--groupfactor) - var(--2margin)) / 2); /* from ol min-width */
}

html {
  font-size: calc(var(--base-vw) * var(--aspect-ratio));
}

.Slider,
.DataRegion,
.SearchConsole {
  font-size: calc(var(--base-vw) * var(--aspect-ratio) * var(--sidebar-shrink));
}

/* Include groupfactor since Table shrinks when it goes wide */
ol {
  font-size: calc(var(--base-vw) * var(--aspect-ratio) * var(--sidebar-shrink) / var(--groupfactor));
  /* minfont already takes into account sidebar so undo it by multiplying so table is 768px wide minimum. */
  min-width: calc(var(--min) * var(--groupfactor) - 2 * var(--2margin));
}

:root {
  --aspect-ratio: 1vw;
  --square: calc(var(--square-vw) * var(--aspect-ratio)); /* no min/max, fit to width only */
}

@supports (font-size: min(1vw, 1vh)) {
  :root, footer {
    --square: calc(var(--square-vw) * max(var(--min) / var(--sidebar-shrink) / 100, var(--aspect-ratio)));
  }
  html {
    font-size: max(var(--base-vw) * var(--aspect-ratio), var(--minfont));
  }
  .Slider,
  .DataRegion,
  .SearchConsole {
    font-size: max(var(--base-vw) * var(--aspect-ratio) * var(--sidebar-shrink), var(--minfont));
  }
  ol {
    font-size: max(var(--base-vw) * var(--aspect-ratio) * var(--sidebar-shrink) / var(--groupfactor), var(--minfont) * var(--sidebar-shrink));
  }
  /* minfont already takes into account sidebar so undo it by multiplying so table is 768px wide minimum. */
  :root {
    --aspect-ratio: min(1vw, 1.183vh + (var(--groups) - 17) * 0.05vh);
  }
  /* 1st vh: topbar, 2nd: topbar + wide */
  .Sidebar {
    --aspect-ratio: min(1vw, 1.85vh + (var(--groups) - 17) * 0.109vh);
  }
  /* 1st vh: sidebar, 2nd: sidebar + wide */
  .Reset {
    --aspect-ratio: min(1vw, 1.51vh + (var(--groups) - 17) * 0.095vh);
  }
  /* 1st vh: reset, 2nd: reset + wide */
}
@media (max-width: 768px) { /* Also in --min */
  main > article {
    overflow-x: auto;
  }
}
@media (max-width: 1365px) { /* --min * --groupfactor */
  :root:not([data-wide="0"]) main > article {
    overflow-x: auto;
  }
}
@media (max-width: 550px), (display-mode: standalone) {
  .MenuButton + label {
    display: flex;
    padding-inline-start: var(--margin);
  }
  footer {
    /*  display: flex;
       flex-direction: column;
       visibility: hidden;
       transform: translateX(calc(var(--rtl) * -100%));
       z-index: 2;
       position: absolute;
       top: calc(1.25 * var(--2margin) + var(--tab-height));
       bottom: 0;
       font-size: 3vh;
       margin: 0;
       padding: 3vh;
       background-color: inherit;
       box-shadow: 0 19px 38px var(--darkshadow), 0 15px 12px var(--lightshadow);*/
  }
  addr {
    flex-basis: unset;
  }
  addr > span {
    display: none;
  }
  footer.Menu {
    transform: translateX(0);
    visibility: visible;
  }
}
@media (max-width: 550px) {
  /* Mobile */
  :root {
    --square: 33vh;
    --min-rows: 2.5;
    --margin: 1.7vw;
    --icon-height: 5vw;
    --track-height: var(--2margin);
    --bordercolor: transparent;
    --element-pad: 0.15em;
  }
  .KeyRegion {
    --margin: 4.5px; /* Table has a min-width on mobile of 1024 pixels? */
    --2margin: calc(var(--margin) * 2);
  }
  html, body {
    background-color: var(--blocks);
  }
  header, .Slider {
    background-color: var(--body-bg);
  }
  header, aside {
    min-width: unset;
  }
  footer > :first-child {
    display: initial;
  }
  .Notice {
    margin: var(--margin) 0;
    padding: 0;
    min-height: 100px; /* 300x100 mobile ad slot */
  }
  .adsbygoogle {
    height: 100px;
  }
  blockquote {
    font-size: min(1em, 14px);
  }
  blockquote > span {
    display: none;
  }
  aside {
    min-height: calc(var(--row-height) * var(--min-rows));
  }
  aside canvas {
    height: unset;
    touch-action: pan-y;
  }
  .Reset aside {
    --min-rows: 0;
  }
  main aside figure {
    display: none;
  }
  .DataRegion > *, .Slider {
    font-size: 120%;
    padding: 0;
  }
  nav {
    --tab-height: 6vw;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 2;
    align-items: center;
    background-color: inherit;
  }
  .adsbygoogle[data-adsbygoogle-status=done],
  nav :checked + label {
    box-shadow: none;
  }
  nav > label {
    flex-direction: column;
    text-align: center;
    flex-basis: 25%;
  }
  header > label {
    color: var(--group);
  }
  header > * > svg + a {
    display: none;
  }
  header svg + a {
    margin-inline-start: 0;
  }
  .FillMask {
    fill: var(--body-bg);
  }
  .MenuButton + label {
    margin-inline-end: auto;
  }
  .RangeNumbers input:not([data-unit=C]),
  .RangeNumbers input:not([data-unit=C]) + label {
    display: none;
  }
  /* FIX: Show temp matching their degree dropdown */
  section.SearchConsole {
    z-index: 2;
    top: 0;
    width: 100%;
    align-items: center;
    margin: 0;
    justify-content: flex-end;
    opacity: 0;
    transform: none;
  }
  div.SearchAnchor {
    margin-inline-start: unset;
  }
  .SearchActive header {
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .SearchActive .SearchConsole {
    position: fixed;
    pointer-events: none;
    opacity: 1;
    padding-inline-start: calc(3 * var(--2margin) + var(--tab-height) + var(--tab-height) * var(--logo-ratio));
    padding-inline-end: calc(4 * var(--margin) + var(--tab-height));
  }
  .SearchActive .MenuButton + label {
    margin-inline-end: 0;
  }
  .SearchActive .SearchConsole ul {
    display: none;
  }
  .SearchConsole > [type=search] {
    max-width: 0;
  }
  .SearchActive [type=search] {
    max-width: 100%;
    pointer-events: auto;
  }
  ol, nav {
    box-shadow: 0 1px 3px var(--lightshadow), 0 1px 2px var(--darkshadow);
  }
  main, main > article, ol {
    margin: 0;
  }
  .DataRegion::before {
    background: none;
    box-shadow: inset 0 0 4px var(--lightshadow), inset 0 0 3px var(--darkshadow);
    bottom: 0;
    height: unset;
    pointer-events: none;
  }
  .DataRegion::after {
    display: none;
  }
  .DataRegion ul {
    display: initial;
  }
  .Electrons #orbital_lmn {
    white-space: unset;
  }
  article .Slider {
    touch-action: pan-y pinch-zoom;
    left: 0;
    margin-inline-start: 0;
  }
  [dir=rtl] article .Slider {
    left: unset;
    right: 0;
  }
  .Slider [type=button] {
    display: none;
  }
  nav {
    height: 12vw;
  }
  header, .SearchConsole {
    height: 12vw;
    margin-bottom: 0;
  }
  footer {
    top: 12vw;
  }
  main > article {
    flex-shrink: 0;
    margin-bottom: 12vw;
  }
  ol > li > abbr,
  ol > li:not(.Tope),
  ul > input:checked + li {
    transition: none !important;
  }
  .SearchActive article ol,
  ol.Tilt {
    transform: none;
  }
}
.inline-radio {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 3rem;
  background: #fff;
  padding: 1rem 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.radio-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.radio-group h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  color: #333;
}

.radio-options {
  display: flex;
  gap: 1rem;
}

.radio-options label {
  font-size: 0.95rem;
  cursor: pointer;
}

input[type=radio] {
  margin-right: 6px;
}

/* Optional: stack elements vertically on small screens */
@media (max-width: 200px) {
  .inline-radio {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px; /* smaller gap for mobile */
    font-size: 0.55rem; /* or whatever smaller size you want */
  }
}
@media (min-width: 400px) and (max-width: 800px) {
  .inline-radio {
    font-size: 0.75rem; /* or whatever smaller size you want */
  }
}
@media (min-width: 200px) and (max-width: 400px) {
  .inline-radio {
    font-size: 0.45rem; /* or whatever smaller size you want */
  }
}
.strikethroughs {
  font-size: 0.6rem;
}

.inline-radio.strikethroughs {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: sans-serif;
  padding: 1rem;
}

.inline-radio.strikethroughs > div {
  display: flex;
  gap: 15px; /* отступы между label внутри блоков */
  flex-wrap: wrap;
  align-items: center;
}

.inline-radio.strikethroughs h3 {
  margin: 0;
  font-size: 1rem;
  white-space: nowrap;
}

.inline-radio.strikethroughs label {
  white-space: nowrap;
  align-items: center;
  font-size: 0.95rem;
  display: inline-block; /* чтобы labels не слипались */
  margin-right: 20px; /* отступ справа между метками */
  margin-bottom: 0px; /* небольшой отступ снизу, если переносится на следующую строку */
  vertical-align: middle; /* выравнивание по середине по вертикали */
}

.inline-radio.strikethroughs input[type=checkbox] {
  margin-right: 5px;
}

.disclosure {
  background-color: #f8f9fa;
  color: #333;
  font-size: 0.85rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid #ddd;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  bottom: 0;
}

.disclosure-content {
  margin: 0 auto;
  text-align: left;
}

@media (max-width: 600px) {
  .disclosure {
    font-size: 0.75rem;
    padding: 0.75rem 1rem;
  }
  .disclosure-content {
    text-align: left;
  }
}
/* 🌙 Dark Theme Support */
.Dark .inline-radio {
  background: #1e1e1e;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05);
}

.Dark .radio-group h3,
.Dark .radio-options label,
.Dark .inline-radio.strikethroughs h3,
.Dark .inline-radio.strikethroughs label {
  color: #ddd;
}

.Dark .disclosure {
  background-color: #2a2a2a;
  color: #ccc;
  border-top: 1px solid #444;
}

.header-container {
    text-align: center;
    padding: 10px;
}

.header-content {
    display: flex;
    justify-content: center; /* centers items horizontally */
    align-items: center; /* centers items vertically */
    flex-wrap: wrap; /* ensures wrapping on mobile */
    gap: 10px;
}

    .header-content h1 {
        flex: 1 1 auto;
        text-align: center; /* center the text */
        margin: 0;
    }

.companyLogo.logo {
  
    background-position: center;
    flex-shrink: 0; /* don’t let logo shrink too small */
}

 
/* Main container: row by default */
        #container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px;
    gap: 10px;
}

/* Left group (Dark switch + Sign Up) */
#left-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Right group (login, password, login button) */
#right-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

    /* Inputs styling */
    #right-group input {
        padding: 8px 12px;
        font-size: 14px;
        border-radius: 4px;
        border: 1px solid #ccc;
    }

/* Common button style */
.btnc {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Login button */
.login-btn {
    background-color: red;
    color: white;
}

    .login-btn:hover {
        background-color: darkred;
    }

/* Signup button */
.signup-btn {
    background-color: #007BFF;
    color: white;
}

    .signup-btn:hover {
        background-color: #0056b3;
    }

/* Mobile layout: stack elements in column */
@media (max-width: 700px) {
    #container {
        flex-direction: column;
        align-items: flex-start;
    }

    #left-group,
    #right-group {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

        #left-group button,
        #right-group input,
        #right-group button {
            width: 100%; /* full width on mobile */
        }
}
.Dark .header-container {
    color: #eee;
    background-color: #121212;
}

.header-container h1,
.header-container h4 {
  margin: 0.5rem 0;
}

/* Footer base */
.site-footer {
  background-color: black;
}

.et_pb_text_inner {
  font-family: var(--bs-font-sans-serif);
  font-size: 17px;
  font-weight: 400;
  text-transform: capitalize;
  font-style: italic;
  color: #FFFFFF;
  text-align: center;
}

.cw-fu-menu {
  paddling: 10%;
  text-align: left !important;
}

.cw-fu-menu span a {
  display: inline;
  font-style: normal;
}

.orange-button {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center; /* vertical */
  display: inline-block;
  padding: 12px 24px;
  background-color: rgb(238, 118, 42);
  color: black !important;
  text-decoration: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
  transition: background-color 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.orange-button:hover {
  background-color: #e67600; /* darker orange on hover */
}

.et_pb_image_wrap img {
  height: 260px;
  width: 335px;
}

.img_subscribe img {
  height: 43px;
  width: 179px;
}

.text_footer {
  font-family: "Montserrat", Helvetica, Arial, Lucida, sans-serif;
  font-size: 17px;
  font-weight: 400;
  text-transform: capitalize;
  color: #FFFFFF;
  text-align: center;
}

.footer-separator {
  height: 1px;
  background-color: #ccc;
  width: 80%;
  margin: 0 auto 15px auto;
}

.f2 {
  font-family: "Montserrat", Helvetica, Arial, Lucida, sans-serif;
  line-height: 1.7em;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

.made-in-colorado {
  display: flex;
  font-size: 17px;
  color: #FFFFFF;
  align-items: center;
  justify-content: center;
  font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;
  font-style: italic;
  gap: 6px;
}

.centered-div {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center; /* vertical */
  height: 200px; /* or any height you need */
  text-align: center;
  color: white;
}

.centered-div2 {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center; /* vertical */
  height: 100px; /* or any height you need */
  text-align: center;
  color: white;
}

.cw-fu-menu-head {
  font-family: "Montserrat", Helvetica, Arial, Lucida, sans-serif;
  font-weight: 600;
  font-size: 18px;
  font-style: normal;
  text-align: left !important;
  paddling: 10%;
}

.responsive-image-wrapper {
  max-width: 100%;
  padding: 20px;
  box-sizing: border-box;
  text-align: center; /* center image horizontally */
}

.responsive-image-wrapper img {
  max-width: 200px; /* ✅ LIMITS width to 250px */
  width: 100%; /* ✅ scales down if container is smaller */
  height: auto; /* ✅ keeps aspect ratio */
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.margin2 {
  margin-left: 80px;
}