@charset "UTF-8";
/* vim: set syntax=css: */
:root {
  --block-s:	#ffb3c9;
  --block-p:	#93ffda;
  --block-d:	#daf78c;
  --block-f:	#c1d0ff;
  --weight-end:	hsl(0, 100%, 47%);
  --electrons-start:	hsl(80, 70%, 95%);
  --electrons-end:	hsl(80, 53%, 33%);
  --electroneg-start:	hsl(60, 100%, 50%);
  --electroneg-end:	hsl(25, 100%, 39%);
  --meltboil-start:	hsl(240, 100%, 75%);
  --meltboil-end:	hsl(0, 100%, 47%);
  --affinity-end:	hsl(302, 100%, 42%);
  --ionize-start:	hsl(120, 100%, 50%);
  --ionize-end:	hsl(240, 100%, 69%);
  --radius-start:	hsl(180, 100%, 94%);
  --radius-end:	hsl(180, 45%, 35%);
  --hardness-end:	hsl(276, 100%, 60%);
  --modulus-start:	hsl(38, 100%, 96%);
  --modulus-end:	hsl(38, 100%, 44%);
  --density-start:	hsl(165, 100%, 91%);
  --density-end:	hsl(165, 100%, 27%);
  --conduct-start:	hsl(240, 66%, 94%);
  --conduct-end:	hsl(240, 100%, 69%);
  --heat-start:	hsl(60, 100%, 50%);
  --heat-end:	hsl(0, 100%, 50%);
  --abundance-start:	var(--blocks);
  --abundance-end:	hsl(0, 97%, 49%);
}

.Dark {
  --block-s:	#004c52;
  --block-p:	#3b5800;
  --block-d:	#5f003f;
  --block-f:	#0023bb;
  --weight-end:	hsl(0, 100%, 45%);
  --electrons-start:	hsl(20, 0%, 23%);
  --electrons-end:	hsl(80, 55%, 32%);
  --electroneg-start:	hsl(233, 97%, 31%);
  --electroneg-end:	hsl(51, 80%, 29%);
  --meltboil-start:	hsl(240, 100%, 68%);
  --meltboil-end:	hsl(0, 100%, 46%);
  --affinity-end:	hsl(302, 100%, 41%);
  --ionize-start:	hsl(294, 100%, 21%);
  --ionize-end:	hsl(52, 80%, 23%);
  --radius-start:	hsl(0, 0%, 20%);
  --radius-end:	hsl(180, 49%, 33%);
  --hardness-end:	hsl(276, 100%, 59%);
  --modulus-start:	hsl(0, 0%, 31%);
  --modulus-end:	hsl(38, 100%, 32%);
  --density-start:	hsl(0, 0%, 17%);
  --density-end:	hsl(165, 100%, 25%);
  --conduct-start:	hsl(0, 0%, 26%);
  --conduct-end:	hsl(240, 100%, 68%);
  --heat-start:	hsl(60, 100%, 13%);
  --heat-end:	hsl(0, 62%, 54%);
  --abundance-start:	hsl(0, 5%, 21%);
  --abundance-end:	hsl(0, 50%, 50%);
}

.Slider > label:hover {
  color: LinkText;
  text-decoration: underline;
}

ol > li data {
  pointer-events: none;
}

.Shine > li,
.Shine > li > abbr {
  animation: shine 0.3s ease-in-out var(--shine) 1;
}

@keyframes shine {
  50% {
    filter: brightness(1.05);
  }
}
.FullScreen,
header,
.Group, .Period,
.Slider,
.SearchConsole ul,
[draggable=true],
.ConfigBlocks,
.StateKey dt,
.NoSelect,
.PropertyKey {
  user-select: none;
}

ol > li {
  user-select: contain;
}

/*** Search ***/
.SearchActive .Dim {
  opacity: 0.2;
}

ol {
  transform: perspective(50em); /* Fix Chromium #339273 causing wild bounces */
}

.SearchAnchor {
  margin-inline-start: 50%;
}

.SearchActive ol {
  transform-origin: bottom;
  transform: perspective(50em) rotateX(calc(var(--groupfactor) * 10deg - 3deg)); /* target: 7deg normal, 17deg wide */
}

.SearchActive .SearchConsole {
  visibility: visible;
}

.SearchConsole {
  display: flex;
  align-items: baseline;
}

.SearchConsole ul {
  display: flex;
  align-items: baseline;
  opacity: 0.2;
}

.SearchConsole ul span {
  margin-inline-start: var(--2margin);
}

.SearchConsole ul.Ambiguous {
  opacity: unset;
}

.SearchConsole > input {
  border: none;
  max-width: 10em;
  padding: 0.1em 0.4em;
  font-size: 1.3em;
  color: inherit;
}

/*** Colors ***/
.Electron .s .s, .BlockS > div > div {
  background-color: var(--block-s);
}

.Electron .p .p, .BlockP > div > div {
  background-color: var(--block-p);
}

.Electron .d .d, .BlockD > div > div {
  background-color: var(--block-d);
}

.Electron .f .f, .BlockF > div > div {
  background-color: var(--block-f);
}

.Stable, .AlphaEmission, .BetaDecay, .DoubleBetaDecay, .BetaPlusDecay, .DoubleBetaPlusDecay, .ElectronCapture, .NeutronEmission, .TwoNeutronEmission, .PositronEmission, .ProtonEmission, .TwoProtonEmission, .SpontaneousFission {
  outline-color: transparent;
}

.Stable .Stable {
  outline-color: black;
}

.AlphaEmission .AlphaEmission {
  outline-color: orange;
}

.BetaDecay .BetaDecay {
  outline-color: blue;
}

.DoubleBetaDecay .DoubleBetaDecay {
  outline-color: blue;
  outline-style: double;
}

.BetaPlusDecay .BetaPlusDecay {
  outline-color: purple;
}

.DoubleBetaPlusDecay .DoubleBetaPlusDecay {
  outline-color: purple;
  outline-style: double;
}

.ElectronCapture .ElectronCapture {
  outline-color: purple;
  outline-style: dashed;
}

.NeutronEmission .NeutronEmission {
  outline-color: green;
}

.TwoNeutronEmission .TwoNeutronEmission {
  outline-color: green;
  outline-style: double;
}

.ProtonEmission .ProtonEmission {
  outline-color: red;
}

.TwoProtonEmission .TwoProtonEmission {
  outline-color: red;
  outline-style: double;
}

.SpontaneousFission .SpontaneousFission {
  outline-color: black;
  outline-style: dotted;
}

/*** Element hover ***/
ol.Hover > li:hover,
ol > li:focus,
ol > li.Active {
  outline-width: var(--fixedgridgap);
  z-index: 2;
}

ol > li.Active {
  outline-color: var(--tab-active);
  z-index: 3;
}

ol.Fanned > li:focus {
  outline-width: thick;
}

.ConfigBlocks .Active {
  outline: var(--fixedgridgap) solid var(--tab-active);
  z-index: 3;
}

li.Active.Loading,
li.Active.Loading > abbr {
  animation: element-loading 0.5s linear infinite alternate;
}

@keyframes element-loading {
  50% {
    filter: contrast(0.5);
  }
  100% {
    filter: contrast(1.5);
  }
}
/*** Tab Sliding ***/
.Reset .KeyRegion > *,
.Property .name .KeyRegion > *,
.Property .state .KeyRegion > *,
.Property .series .KeyRegion > *,
.Property .discover .KeyRegion > *,
.Reset .DataRegion > *,
.Property .DataRegion > * {
  transform: translateX(calc(var(--rtl) * 0 * 100%));
}

.Property .KeyRegion > *,
.Electron .DataRegion > * {
  transform: translateX(calc(var(--rtl) * -1 * 100%));
}

.Electron .KeyRegion > *,
.Isotope .DataRegion > * {
  transform: translateX(calc(var(--rtl) * -2 * 100%));
}

.Isotope .KeyRegion > *,
.Compound .DataRegion > * {
  transform: translateX(calc(var(--rtl) * -3 * 100%));
}

.Compound .KeyRegion > * {
  transform: translateX(calc(var(--rtl) * -4 * 100%));
}

.Property .state .Series {
  visibility: hidden;
  opacity: 0;
}

.discover .Undiscovered {
  background-color: transparent;
}

/*** Wide view ***/
:root:not([data-wide="0"]) .WideKeyRegion {
  display: block;
  grid-column: 14/span calc(var(--groups) - 18);
  grid-row: 2/span 3;
}

[data-wide="1"] [data-wide~="1"],
[data-wide="2"] [data-wide~="2"],
[data-wide="3"] [data-wide~="3"],
[data-wide="4"] [data-wide~="4"],
[data-wide="5"] [data-wide~="5"],
[data-wide="6"] [data-wide~="6"],
[data-wide="7"] [data-wide~="7"],
[data-wide="8"] [data-wide~="8"],
[data-wide="9"] [data-wide~="9"],
[data-wide="10"] [data-wide~="10"],
[data-wide="11"] [data-wide~="11"],
[data-wide="12"] [data-wide~="12"],
[data-wide="13"] [data-wide~="13"],
[data-wide="14"] [data-wide~="14"],
[data-wide="15"] [data-wide~="15"] {
  grid-row-start: auto;
}

[data-wide="15"] .VerticalInner,
[data-wide="15"] .PosterLogo,
[data-wide="15"] .Label57to71,
[data-wide="15"] .Label89to103,
[data-wide="15"] .Removed6,
[data-wide="15"] .Removed7 {
  display: none;
}

[data-wide="15"] .Parentheses {
  grid-column: 4/span 14;
  grid-row-start: 6;
}

[data-wide="15"] .KeyRegion {
  grid-row-end: span 4;
  font-size: 130%;
}

/*** Writeup ***/
.name {
  --alkali:	#ff6666;
  --alkaline:	#ffdead;
  --lanthanoid:	#ffbfff;
  --actinoid:	#ff99cc;
  --transition:	#ffc0c0;
  --poor:	#cccccc;
  --metalloid:	#cccc99;
  --nonmetal:	#f0ff8f;
  --noble:	#c0ffff;
  --nocategory:	#e8e8e8;
}

.Dark .name {
  --alkali:	#532020;
  --alkaline:	#483d2c;
  --lanthanoid:	#3e2d3e;
  --actinoid:	#64384e;
  --transition:	#5b4444;
  --poor:	#3c3a3a;
  --metalloid:	#464618;
  --nonmetal:	#5d642e;
  --noble:	#264242;
  --nocategory:	unset;
}

/*** Gapless trend visualization ***/
.Property article:not(.name):not(.discover):not(.series) .VerticalInner {
  opacity: 0;
}

.Property article:not(.name):not(.discover):not(.series) .PosterLogo {
  grid-column-end: span 3;
}

.Property article:not(.name):not(.discover):not(.series) {
  --gridgap: 0em;
  --bordercolor: transparent;
  --fixedborderwidth: var(--fixedgridgap);
}

.Label57to71:hover ~ .VerticalInner,
.Label57to71:focus ~ .VerticalInner,
.Label89to103:hover ~ .VerticalInner,
.Label89to103:focus ~ .VerticalInner,
.VerticalInner:hover {
  background-color: var(--dividerhover);
  opacity: 1 !important;
  cursor: pointer;
  z-index: 2;
}

/*** Lock ***/
:root {
  --lock:	1;
}

.Compound {
  --lock:	0;
}

@media (hover: none), (pointer: coarse) {
  .Compound {
    --lock:	8;
  }
  .CompoundDragTarget:empty::before {
    content: attr(data-placeholder-click);
  }
}
/*** Property Legend ***/
.PropertyKey > dl {
  position: relative;
  padding: var(--2margin);
  border-color: var(--selected);
  display: flex;
  justify-content: space-between;
  border-radius: var(--margin);
}

.PropertyKey > dl > legend {
  position: absolute;
  top: 0;
  margin-top: calc(-1 * var(--2margin));
  background-color: var(--blocks);
  line-height: 1;
}

.SchemeScale {
  display: flex;
}

.SchemeScale > input:disabled + li {
  opacity: 0.4;
  filter: contrast(75%);
}

.SchemeScale > li {
  flex-direction: column;
  padding: 0;
}

.SchemeScale > li > label {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  line-height: 1.8;
  padding: var(--margin) var(--2margin);
}

.SchemeScale > li > label::before {
  content: " ";
  flex-grow: 1;
  width: 5.5em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

[for=Linear]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E %3Cdefs%3E  %3Cmarker id='arrow' markerWidth='10' markerHeight='10' refX='5' refY='5' orient='auto'%3E   %3Cpolyline points='3,3 5,5 3,7' fill='none' stroke='%23555' /%3E  %3C/marker%3E %3C/defs%3E  %3Cg stroke='%23555' stroke-width='3'%3E  %3Cline x1='10' y1='100' x2='10' y2='10' marker-end='url(%23arrow)' /%3E  %3Cline x1='0' y1='90' x2='90' y2='90'  marker-end='url(%23arrow)' /%3E  %3Cline x1='20' y1='80' x2='80' y2='20' /%3E %3C/g%3E%3C/svg%3E");
}

[for=Logarithmic]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E %3Cdefs%3E  %3Cmarker id='arrow' markerWidth='10' markerHeight='10' refX='5' refY='5' orient='auto'%3E   %3Cpolyline points='3,3 5,5 3,7' fill='none' stroke='%23555' /%3E  %3C/marker%3E %3C/defs%3E %3Cg stroke='%23555' stroke-width='3'%3E  %3Cline x1='10' y1='100' x2='10' y2='10' marker-end='url(%23arrow)' /%3E  %3Cline x1='0' y1='90' x2='90' y2='90' marker-end='url(%23arrow)' /%3E  %3Cpath d='M20,80 Q20,20 80,20' fill='none' /%3E %3C/g%3E%3C/svg%3E");
}

.Dark .SchemeScale ::before {
  filter: invert(1);
}

.Colors {
  flex-direction: column;
}

.Colors > div:first-of-type {
  flex-basis: 70%;
}

.Colors > div:last-of-type {
  flex-basis: 20%;
  color: GrayText;
}

.Colors > div {
  display: flex;
  justify-content: flex-end;
  white-space: nowrap;
}

.Colors > div > :first-child {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  line-height: 1;
}

.Colors > div > :last-child {
  width: var(--track-height);
  border: thin solid ButtonShadow;
  margin-inline-start: var(--2margin);
}

.Colors input {
  height: 100%;
  width: calc(4 * var(--2margin));
}

.Colors > div > div > div > * {
  vertical-align: middle;
}

.Hide {
  visibility: hidden;
  opacity: 0;
}

/*** Electron Legend ***/
.Blocks dt {
  border-color: rgba(0, 0, 0, 0.16);
}

.ConfigBlocks {
  display: flex;
  font-size: 0.65em;
  margin: calc(-1 * var(--2margin)) 0;
  align-self: center;
}

.ConfigBlocks > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  margin: 0 0.2em;
}

.ConfigBlocks > .BlockS {
  margin-top: 1em;
}

.ConfigBlocks > .BlockD {
  margin-top: 0.33em;
}

.ConfigBlocks > .BlockF {
  margin-top: 0.66em;
}

.ConfigBlocks > div > div {
  display: flex;
  margin: 0.1em 0;
  justify-content: flex-end;
}

.ConfigBlocks > div > div > span {
  margin-right: 0.1em;
}

.ConfigBlocks > div > div > div {
  border-color: rgba(0, 0, 0, 0.16);
  margin: 0 0.1em;
  padding: 0 0.1em;
  line-height: 1;
  display: flex;
  cursor: pointer;
}

.ConfigBlocks > div > div > div::before,
.ConfigBlocks > div > div > div::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='57 195 70 191.5'%3E %3Cpath d='M109.6875 385.875 L95.9062 385.875 L95.9062 237.2344 Q78.0469 253.2656 57.9375 260.0156 L57.9375 249.8906 Q86.625 230.2031 99.4219 195.1875 L109.6875 195.1875 L109.6875 385.875 Z'/%3E%3C/svg%3E");
  visibility: hidden;
  width: 0.4em;
}

.Dark .ConfigBlocks > div > div > div::before,
.Dark .ConfigBlocks > div > div > div::after {
  filter: invert(1);
}

.ConfigBlocks > div > div > div::after {
  transform: rotate(180deg);
}

.ConfigBlocks .One::before,
.ConfigBlocks .Two::after {
  visibility: visible; /* edge bug */
}

/*** Isotope Legend ***/
.KeyRegion > .IsotopeKey {
  padding: 0; /* override padding on > * selector */
}

.IsotopeKey {
  flex-direction: column;
  overflow: hidden;
}

.IsotopeKey > * {
  min-height: 100%;
}

.IsotopeKey > div:first-child {
  display: flex;
  align-items: center;
}

.IsotopeKey > div:first-child::before,
.CompoundResults:empty::before,
.CompoundDragTarget:empty::before {
  content: attr(data-placeholder);
  margin: auto;
  color: GrayText;
  font-size: larger;
}

.DecayModes dt {
  outline-width: medium;
  outline-style: solid;
}

.DecayModes {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  align-content: space-evenly;
  align-items: center;
  visibility: hidden;
}

.DecayModes > button {
  position: absolute;
  top: var(--2margin);
  right: var(--2margin);
}

.Fanned .IsotopeKey > * {
  transform: translateY(-100%);
}

.Fanned .DecayModes {
  visibility: visible;
}

/*** CPK colors ***/
.Compound [data-atomic="1"] {
  background-color: #f1f1f1;
}

.Compound [data-atomic="2"] {
  background-color: #d1f7f7;
}

.Compound [data-atomic="3"] {
  background-color: #ffbdff;
}

.Compound [data-atomic="4"] {
  background-color: #c3ff04;
}

.Compound [data-atomic="5"] {
  background-color: #ffd2d1;
}

.Compound [data-atomic="6"] {
  background-color: #dadada;
}

.Compound [data-atomic="7"] {
  background-color: #c2bcff;
}

.Compound [data-atomic="8"] {
  background-color: #ff885d;
}

.Compound [data-atomic="9"] {
  background-color: #abfb6a;
}

.Compound [data-atomic="10"] {
  background-color: #c1f2ff;
}

.Compound [data-atomic="11"] {
  background-color: #ffb2ff;
}

.Compound [data-atomic="12"] {
  background-color: #92ff19;
}

.Compound [data-atomic="13"] {
  background-color: #f4d9d9;
}

.Compound [data-atomic="14"] {
  background-color: #ffdfb6;
}

.Compound [data-atomic="15"] {
  background-color: #ffb94b;
}

.Compound [data-atomic="16"] {
  background-color: #f5f621;
}

.Compound [data-atomic="17"] {
  background-color: #4dff40;
}

.Compound [data-atomic="18"] {
  background-color: #a1f2ff;
}

.Compound [data-atomic="19"] {
  background-color: #ffacff;
}

.Compound [data-atomic="20"] {
  background-color: #51ff23;
}

.Compound [data-atomic="21"] {
  background-color: #ececec;
}

.Compound [data-atomic="22"] {
  background-color: #e1e5ea;
}

.Compound [data-atomic="23"] {
  background-color: #dedee3;
}

.Compound [data-atomic="24"] {
  background-color: #cddbff;
}

.Compound [data-atomic="25"] {
  background-color: #efc9ff;
}

.Compound [data-atomic="26"] {
  background-color: #ffb37a;
}

.Compound [data-atomic="27"] {
  background-color: #ffc3d3;
}

.Compound [data-atomic="28"] {
  background-color: #80fd79;
}

.Compound [data-atomic="29"] {
  background-color: #ffc877;
}

.Compound [data-atomic="30"] {
  background-color: #d2d4ff;
}

.Compound [data-atomic="31"] {
  background-color: #ffcfce;
}

.Compound [data-atomic="32"] {
  background-color: #b5e1e0;
}

.Compound [data-atomic="33"] {
  background-color: #ffc3ff;
}

.Compound [data-atomic="34"] {
  background-color: #ffcb41;
}

.Compound [data-atomic="35"] {
  background-color: #ffa494;
}

.Compound [data-atomic="36"] {
  background-color: #93eeff;
}

.Compound [data-atomic="37"] {
  background-color: #f8abff;
}

.Compound [data-atomic="38"] {
  background-color: #33ff25;
}

.Compound [data-atomic="39"] {
  background-color: #94ffff;
}

.Compound [data-atomic="40"] {
  background-color: #a9f6f6;
}

.Compound [data-atomic="41"] {
  background-color: #a0f0f7;
}

.Compound [data-atomic="42"] {
  background-color: #8fefef;
}

.Compound [data-atomic="43"] {
  background-color: #8beae9;
}

.Compound [data-atomic="44"] {
  background-color: #86e7e6;
}

.Compound [data-atomic="45"] {
  background-color: #87e2f2;
}

.Compound [data-atomic="46"] {
  background-color: #8edafa;
}

.Compound [data-atomic="47"] {
  background-color: #e4e4e4;
}

.Compound [data-atomic="48"] {
  background-color: #ffe49a;
}

.Compound [data-atomic="49"] {
  background-color: #ffc9c6;
}

.Compound [data-atomic="50"] {
  background-color: #bfdbdb;
}

.Compound [data-atomic="51"] {
  background-color: #ffbeff;
}

.Compound [data-atomic="52"] {
  background-color: #ffc257;
}

.Compound [data-atomic="53"] {
  background-color: #ff9bff;
}

.Compound [data-atomic="54"] {
  background-color: #90e8fb;
}

.Compound [data-atomic="55"] {
  background-color: #f2a8ff;
}

.Compound [data-atomic="56"] {
  background-color: #62fe4d;
}

.Compound [data-atomic="57"] {
  background-color: #91f3ff;
}

.Compound [data-atomic="58"] {
  background-color: #f3f3bb;
}

.Compound [data-atomic="59"] {
  background-color: #d3f9c1;
}

.Compound [data-atomic="60"] {
  background-color: #c4fcc4;
}

.Compound [data-atomic="61"] {
  background-color: #a4ffc8;
}

.Compound [data-atomic="62"] {
  background-color: #92ffca;
}

.Compound [data-atomic="63"] {
  background-color: #69ffce;
}

.Compound [data-atomic="64"] {
  background-color: #51ffcf;
}

.Compound [data-atomic="65"] {
  background-color: #41ffd0;
}

.Compound [data-atomic="66"] {
  background-color: #36ffd0;
}

.Compound [data-atomic="67"] {
  background-color: #2cffa7;
}

.Compound [data-atomic="68"] {
  background-color: #49ff91;
}

.Compound [data-atomic="69"] {
  background-color: #58ff7b;
}

.Compound [data-atomic="70"] {
  background-color: #66fb71;
}

.Compound [data-atomic="71"] {
  background-color: #71f66d;
}

.Compound [data-atomic="72"] {
  background-color: #82efff;
}

.Compound [data-atomic="73"] {
  background-color: #95e4ff;
}

.Compound [data-atomic="74"] {
  background-color: #88e3ff;
}

.Compound [data-atomic="75"] {
  background-color: #94ddff;
}

.Compound [data-atomic="76"] {
  background-color: #9fd5ff;
}

.Compound [data-atomic="77"] {
  background-color: #a2d0ff;
}

.Compound [data-atomic="78"] {
  background-color: #e6e6f7;
}

.Compound [data-atomic="79"] {
  background-color: #ffe23a;
}

.Compound [data-atomic="80"] {
  background-color: #e1e1fa;
}

.Compound [data-atomic="81"] {
  background-color: #ffb9ae;
}

.Compound [data-atomic="82"] {
  background-color: #cbcdd7;
}

.Compound [data-atomic="83"] {
  background-color: #ffb3ff;
}

.Compound [data-atomic="84"] {
  background-color: #ffbc68;
}

.Compound [data-atomic="85"] {
  background-color: #f0c3b6;
}

.Compound [data-atomic="86"] {
  background-color: #a0dff5;
}

.Compound [data-atomic="87"] {
  background-color: #eda6ff;
}

.Compound [data-atomic="88"] {
  background-color: #86e871;
}

.Compound [data-atomic="89"] {
  background-color: #abe3ff;
}

.Compound [data-atomic="90"] {
  background-color: #6aefff;
}

.Compound [data-atomic="91"] {
  background-color: #7ce4ff;
}

.Compound [data-atomic="92"] {
  background-color: #8addff;
}

.Compound [data-atomic="93"] {
  background-color: #95d6ff;
}

.Compound [data-atomic="94"] {
  background-color: #a4cbff;
}

.Compound [data-atomic="95"] {
  background-color: #cbc0ff;
}

.Compound [data-atomic="96"] {
  background-color: #e3bdff;
}

.Compound [data-atomic="97"] {
  background-color: #f8b3ff;
}

.Compound [data-atomic="98"] {
  background-color: #ffa4ff;
}

.Compound [data-atomic="99"] {
  background-color: #ff98ff;
}

.Compound [data-atomic="100"] {
  background-color: #ff9aff;
}

.Compound [data-atomic="101"] {
  background-color: #ff97ff;
}

.Compound [data-atomic="102"] {
  background-color: #ff96f7;
}

.Compound [data-atomic="103"] {
  background-color: #ff93cf;
}

.Compound [data-atomic="104"] {
  background-color: #ff92be;
}

.Compound [data-atomic="105"] {
  background-color: #ff91b1;
}

.Compound [data-atomic="106"] {
  background-color: #ff90a2;
}

.Compound [data-atomic="107"] {
  background-color: #ff8e90;
}

.Compound [data-atomic="108"] {
  background-color: #ff8d83;
}

.Compound [data-atomic="109"] {
  background-color: #ff8c79;
}

.Dark.Compound [data-atomic="1"] {
  background-color: #777777;
}

.Dark.Compound [data-atomic="2"] {
  background-color: #587a7a;
}

.Dark.Compound [data-atomic="3"] {
  background-color: #702aa2;
}

.Dark.Compound [data-atomic="4"] {
  background-color: #3b7e00;
}

.Dark.Compound [data-atomic="5"] {
  background-color: #8c4c4e;
}

.Dark.Compound [data-atomic="6"] {
  background-color: #464646;
}

.Dark.Compound [data-atomic="7"] {
  background-color: #0022bc;
}

.Dark.Compound [data-atomic="8"] {
  background-color: #a60000;
}

.Dark.Compound [data-atomic="9"] {
  background-color: #137100;
}

.Dark.Compound [data-atomic="10"] {
  background-color: #406e7e;
}

.Dark.Compound [data-atomic="11"] {
  background-color: #5e0fa5;
}

.Dark.Compound [data-atomic="12"] {
  background-color: #008000;
}

.Dark.Compound [data-atomic="13"] {
  background-color: #634d4d;
}

.Dark.Compound [data-atomic="14"] {
  background-color: #7c5b38;
}

.Dark.Compound [data-atomic="15"] {
  background-color: #962500;
}

.Dark.Compound [data-atomic="16"] {
  background-color: #717a00;
}

.Dark.Compound [data-atomic="17"] {
  background-color: #007a00;
}

.Dark.Compound [data-atomic="18"] {
  background-color: #006878;
}

.Dark.Compound [data-atomic="19"] {
  background-color: #510097;
}

.Dark.Compound [data-atomic="20"] {
  background-color: #008100;
}

.Dark.Compound [data-atomic="21"] {
  background-color: #6c6c6c;
}

.Dark.Compound [data-atomic="22"] {
  background-color: #5a5c61;
}

.Dark.Compound [data-atomic="23"] {
  background-color: #505054;
}

.Dark.Compound [data-atomic="24"] {
  background-color: #3a4a73;
}

.Dark.Compound [data-atomic="25"] {
  background-color: #52357b;
}

.Dark.Compound [data-atomic="26"] {
  background-color: #871400;
}

.Dark.Compound [data-atomic="27"] {
  background-color: #8b3548;
}

.Dark.Compound [data-atomic="28"] {
  background-color: #006b00;
}

.Dark.Compound [data-atomic="29"] {
  background-color: #713600;
}

.Dark.Compound [data-atomic="30"] {
  background-color: #393e69;
}

.Dark.Compound [data-atomic="31"] {
  background-color: #6b3f40;
}

.Dark.Compound [data-atomic="32"] {
  background-color: #214949;
}

.Dark.Compound [data-atomic="33"] {
  background-color: #67318c;
}

.Dark.Compound [data-atomic="34"] {
  background-color: #8e4200;
}

.Dark.Compound [data-atomic="35"] {
  background-color: #6e0000;
}

.Dark.Compound [data-atomic="36"] {
  background-color: #005d74;
}

.Dark.Compound [data-atomic="37"] {
  background-color: #400082;
}

.Dark.Compound [data-atomic="38"] {
  background-color: #008100;
}

.Dark.Compound [data-atomic="39"] {
  background-color: #007e7f;
}

.Dark.Compound [data-atomic="40"] {
  background-color: #1d6f70;
}

.Dark.Compound [data-atomic="41"] {
  background-color: #006168;
}

.Dark.Compound [data-atomic="42"] {
  background-color: #005c5e;
}

.Dark.Compound [data-atomic="43"] {
  background-color: #005253;
}

.Dark.Compound [data-atomic="44"] {
  background-color: #004b4d;
}

.Dark.Compound [data-atomic="45"] {
  background-color: #004351;
}

.Dark.Compound [data-atomic="46"] {
  background-color: #003953;
}

.Dark.Compound [data-atomic="47"] {
  background-color: #5b5b5b;
}

.Dark.Compound [data-atomic="48"] {
  background-color: #81641f;
}

.Dark.Compound [data-atomic="49"] {
  background-color: #5e3433;
}

.Dark.Compound [data-atomic="50"] {
  background-color: #294142;
}

.Dark.Compound [data-atomic="51"] {
  background-color: #5b2471;
}

.Dark.Compound [data-atomic="52"] {
  background-color: #7b2f00;
}

.Dark.Compound [data-atomic="53"] {
  background-color: #640067;
}

.Dark.Compound [data-atomic="54"] {
  background-color: #005162;
}

.Dark.Compound [data-atomic="55"] {
  background-color: #35006e;
}

.Dark.Compound [data-atomic="56"] {
  background-color: #006800;
}

.Dark.Compound [data-atomic="57"] {
  background-color: #006a90;
}

.Dark.Compound [data-atomic="58"] {
  background-color: #777847;
}

.Dark.Compound [data-atomic="59"] {
  background-color: #597b4a;
}

.Dark.Compound [data-atomic="60"] {
  background-color: #497c4c;
}

.Dark.Compound [data-atomic="61"] {
  background-color: #1d7e4e;
}

.Dark.Compound [data-atomic="62"] {
  background-color: #007f50;
}

.Dark.Compound [data-atomic="63"] {
  background-color: #008052;
}

.Dark.Compound [data-atomic="64"] {
  background-color: #008052;
}

.Dark.Compound [data-atomic="65"] {
  background-color: #008053;
}

.Dark.Compound [data-atomic="66"] {
  background-color: #008053;
}

.Dark.Compound [data-atomic="67"] {
  background-color: #00812b;
}

.Dark.Compound [data-atomic="68"] {
  background-color: #007507;
}

.Dark.Compound [data-atomic="69"] {
  background-color: #006d00;
}

.Dark.Compound [data-atomic="70"] {
  background-color: #006300;
}

.Dark.Compound [data-atomic="71"] {
  background-color: #005a00;
}

.Dark.Compound [data-atomic="72"] {
  background-color: #006298;
}

.Dark.Compound [data-atomic="73"] {
  background-color: #0053a2;
}

.Dark.Compound [data-atomic="74"] {
  background-color: #004c87;
}

.Dark.Compound [data-atomic="75"] {
  background-color: #00426b;
}

.Dark.Compound [data-atomic="76"] {
  background-color: #003662;
}

.Dark.Compound [data-atomic="77"] {
  background-color: #002e5c;
}

.Dark.Compound [data-atomic="78"] {
  background-color: #626270;
}

.Dark.Compound [data-atomic="79"] {
  background-color: #806100;
}

.Dark.Compound [data-atomic="80"] {
  background-color: #57576c;
}

.Dark.Compound [data-atomic="81"] {
  background-color: #661b1b;
}

.Dark.Compound [data-atomic="82"] {
  background-color: #2c2e35;
}

.Dark.Compound [data-atomic="83"] {
  background-color: #5f0e76;
}

.Dark.Compound [data-atomic="84"] {
  background-color: #672200;
}

.Dark.Compound [data-atomic="85"] {
  background-color: #46241c;
}

.Dark.Compound [data-atomic="86"] {
  background-color: #004456;
}

.Dark.Compound [data-atomic="87"] {
  background-color: #2e0053;
}

.Dark.Compound [data-atomic="88"] {
  background-color: #004400;
}

.Dark.Compound [data-atomic="89"] {
  background-color: #00549a;
}

.Dark.Compound [data-atomic="90"] {
  background-color: #005f9c;
}

.Dark.Compound [data-atomic="91"] {
  background-color: #0052a6;
}

.Dark.Compound [data-atomic="92"] {
  background-color: #0049ad;
}

.Dark.Compound [data-atomic="93"] {
  background-color: #0041b2;
}

.Dark.Compound [data-atomic="94"] {
  background-color: #0035ba;
}

.Dark.Compound [data-atomic="95"] {
  background-color: #0028b1;
}

.Dark.Compound [data-atomic="96"] {
  background-color: #3124a0;
}

.Dark.Compound [data-atomic="97"] {
  background-color: #4711a1;
}

.Dark.Compound [data-atomic="98"] {
  background-color: #610095;
}

.Dark.Compound [data-atomic="99"] {
  background-color: #710095;
}

.Dark.Compound [data-atomic="100"] {
  background-color: #74007e;
}

.Dark.Compound [data-atomic="101"] {
  background-color: #76006e;
}

.Dark.Compound [data-atomic="102"] {
  background-color: #7e0052;
}

.Dark.Compound [data-atomic="103"] {
  background-color: #850034;
}

.Dark.Compound [data-atomic="104"] {
  background-color: #880028;
}

.Dark.Compound [data-atomic="105"] {
  background-color: #8b001f;
}

.Dark.Compound [data-atomic="106"] {
  background-color: #900015;
}

.Dark.Compound [data-atomic="107"] {
  background-color: #940004;
}

.Dark.Compound [data-atomic="108"] {
  background-color: #970000;
}

.Dark.Compound [data-atomic="109"] {
  background-color: #9a0000;
}

/*** Compound Legend ***/
.CompoundDragTarget {
  display: flex;
  flex-grow: 1;
  border: 0.25em dashed var(--selected);
  background-clip: padding-box;
  padding: var(--2margin);
  border-radius: var(--2margin);
}

.CompoundDragTarget li {
  margin: 0 var(--margin);
  width: 2.2em;
  height: 2.2em;
  font-size: 1.1em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.CompoundDragTarget li > abbr::after {
  content: attr(data-count);
  vertical-align: sub;
  font-size: 0.8em;
}

.CompoundDragTarget li > :not(abbr) {
  display: none;
}

.CompoundDragTarget.DragOver {
  background-color: var(--body-bg);
  border-color: #BBB;
}

.CompoundDragTarget > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: transparent !important;
}

.Up, .Down {
  font-size: inherit;
  color: gray;
  background-color: inherit;
  border: none;
}

.Up::before {
  content: "▲";
}

.Up {
  visibility: hidden;
}

.Down::before {
  content: "▼";
}

[data-count="0"] .Down::before {
  content: "×";
}

/*** Electrons ***/
.Electron .Legend {
  grid-column-start: auto;
}

.DataRegion > .Electrons {
  grid-template-columns: auto var(--square);
}

canvas {
  grid-row-end: span 6;
  width: 100%;
  height: 100%;
  cursor: move;
  touch-action: pinch-zoom;
}

#orbital_lmn {
  position: absolute;
  bottom: var(--margin);
  inset-inline-end: var(--margin);
  line-height: 1.1;
  white-space: pre;
  text-align: end;
}

[value=expandedconfig] + li > output > b {
  font-weight: normal;
  color: var(--gas);
  text-decoration: overline;
}

[value=expandedconfig] + li > output > b:hover::before {
  content: "Exception to Madelung energy ordering rule";
  position: absolute;
  background-color: var(--blocks);
  padding: var(--margin);
  margin-top: calc(1em + var(--margin));
  margin-inline-start: -11em;
  width: 11em;
  white-space: initial;
  direction: initial;
  cursor: initial;
}

/*** Isotopes ***/
.Tilt {
  transform: perspective(50em) rotateX(-3deg) rotateY(3deg);
  transform-origin: top left;
}

.Tope:focus ~ .Tope,
.Tope:hover ~ .Tope {
  opacity: 0.4;
}

.Tope:focus + .Tope,
.Tope:hover + .Tope,
.Tope:focus + .Tope + .Tope,
.Tope:hover + .Tope + .Tope,
.Tope:focus + .Tope + .Tope + .Tope,
.Tope:hover + .Tope + .Tope + .Tope {
  opacity: 0;
}

.Tope.Active ~ .Tope {
  pointer-events: none;
  opacity: 0;
}

.Tope ~ .Tope.Active {
  opacity: unset !important;
}

.Isotope .Tilt .Tope {
  opacity: 0.5;
}

.Fanned {
  --shiftX: 17px;
  --shiftY: 17px;
}

body:not(.SearchActive) .Fanned:not(.Tilt) {
  transform: unset;
}

ol > .Tope {
  --offset: 0;
  cursor: move;
  transform: translate3d(calc(var(--shiftX) * var(--offset)), calc(var(--shiftY) * var(--offset)), calc(var(--margin) * var(--offset)));
}

:root:not([data-wide="15"]):not([data-wide="0"]) ol > .Tope {
  opacity: 0;
}

li.Tope {
  outline: medium solid var(--bordercolor);
  position: absolute;
  width: 2.7em;
  user-select: none;
  touch-action: pinch-zoom;
}

li.Tope * {
  pointer-events: none;
}

.Tope b {
  display: none;
}

.Tope abbr {
  display: flex;
  align-items: center;
  line-height: 1.1;
}

abbr > span {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 0.75em;
  font-weight: normal;
  letter-spacing: -0.08em;
}

abbr > span > * {
  font-size: 1em;
}

.Isotope .Isotopes > input:disabled + li {
  background-color: var(--body-bg);
  color: GrayText;
}

/*** Writeup iframe ***/
.Clone {
  position: fixed;
  margin: 0;
  padding: 0;
}

.Expand {
  top: 12.5vh;
  left: 12.5vw;
  right: 12.5vw;
  bottom: 12.5vh;
}

figure iframe {
  display: none;
  border: none;
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
  opacity: 1;
  background-color: var(--body-bg);
}

.Disappear {
  top: 15vh;
  left: 15vw;
  right: 15vw;
  bottom: 15vh;
  opacity: 0;
}

.Overlay > :not(figure) {
  opacity: 0.3;
}

figure > button {
  visibility: hidden;
}

.Overlay figure > button {
  visibility: visible;
  position: fixed;
  top: 12.5vh;
  right: 12.5vw;
  margin: -1.6em;
}

.Overlay figure > button::after {
  content: "✕";
}

.ExpandDone > iframe {
  display: initial;
}

/*** Transitions ***/
.DataRegion > *,
.KeyRegion > *,
.IsotopeKey > * {
  transition: transform 0.3s ease-out;
}

figure {
  transition: background-color 0.1s linear; /* Ptable.HOVER_ELEMENT_DELAY */
}

nav input + label {
  transition: box-shadow 0.3s ease-in-out, color 0.3s linear;
}

header > input + label {
  transition: box-shadow 0.1s ease-in-out, color 0.1s linear, background-color 0.1s linear;
}

.Notice {
  transition: min-height 0.4s ease-in-out;
}

.SmoothResize aside {
  transition: all 300ms linear, visibility 0.3s linear, opacity 0.3s linear;
}

.SmoothResize .DataRegion {
  transition: font-size 0.3s linear;
}

.Slider {
  transition: flex-basis 0.3s linear, visibility 0.3s linear, opacity 0.3s linear;
}

.SmoothResize .Slider {
  transition: flex-basis 0.3s linear, visibility 0.3s linear, opacity 0.3s linear, font-size 0.3s linear;
}

.SmoothResize .SearchConsole,
.SmoothResize ol {
  transition: font-size 0.3s linear;
}

.SmoothResize body > * {
  transition: font-size 0.3s linear, padding 0.3s linear;
}

.SmoothResize header svg {
  transition: height 0.3s linear;
}

/* Search tilt */
ol {
  transition: transform 0.6s ease-out, transform-origin 0.6s step-end;
}

.SearchActive ol,
.Tilt {
  transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1), transform-origin 0.6s step-start;
}

.SearchConsole {
  transition: visibility 0.3s linear;
}

.SearchConsole input {
  transition: max-width 0.15s linear;
}

/* Dataset change */
.Series > *,
.StateOfMatter dt,
.VerticalInner {
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, opacity 0.2s linear;
}

ol > li {
  transition: transform 0.2s linear, box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color ease-in-out 0.2s, color ease-in-out 0.2s, opacity 0.6s cubic-bezier(0.2, 1, 0.3, 1), outline-width 0.1s linear, outline-color 0.1s linear;
}

ol:not(.Tilt).Fanned > li {
  transition: box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color ease-in-out 0.2s, color ease-in-out 0.2s, opacity 0.6s cubic-bezier(0.2, 1, 0.3, 1), outline-width 0.1s linear, outline-color 0.1s linear;
}

.Colors > div > div > div {
  transition: opacity 0.2s linear, visibility 0.2s linear;
}

.ConfigBlocks .Active {
  transition: outline-width 0.1s linear;
}

li > abbr {
  transition: color ease-in-out 0.2s;
}

ul > li {
  transition: background-color 0.2s ease-in-out, outline-width 0.1s linear, outline-color 0.1s linear;
}

figure > *, output span {
  transition: opacity 0.5s ease-in-out;
}

.Overlay > * {
  transition: opacity 0.15s ease-in;
}

.Clone {
  transition: all 0.15s ease-in;
}

.Overlay figure > button {
  transition: visibility 0.15s step-end;
}

footer {
  transition: transform 0.25s cubic-bezier(0, 0, 0.2, 1), visibility 0.25s linear;
}

@keyframes flash {
  50% {
    opacity: 0;
  }
}
.FlashPlaceholder .KeyRegion > div:not(.NoSelect) [data-placeholder]::before,
:not(.state) > .Flash:not(.Fanned) > li > data,
.Flash.Fanned > li.Tope > data,
.FlashHelp > .Parentheses {
  animation: flash 0.2s linear 1;
}

@media print {
  .DataRegion::before,
  .DataRegion::after,
  header, aside, footer > dl, .Slider, .Notice {
    display: none;
  }
  body > h1 {
    display: block;
    font-size: 8vmin;
    font-weight: normal;
    text-align: center;
    text-transform: uppercase;
    margin: 1vw 0;
    line-height: 1;
  }
  label > select {
    background-color: inherit !important;
  }
  html, body {
    background-color: transparent;
  }
  * {
    box-shadow: none !important;
  }
  main, ol, addr {
    margin: 0;
  }
  footer {
    padding: 0;
  }
}
/*** Undo aside, keys hidden in initial in case JS racing this file shows it before it can be styled ***/
.KeyRegion > :not(.SeriesState) {
  display: flex;
}