/* Fall back colors? Eg educator, talks & interviews */
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  line-height: 0;
}
.clearfix:after {
  clear: both;
}
.hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.input-block-level {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#khanType {
  /* Used to style the topic title on a topic page, eg
  "Introduction to algebra" on /math/algebra/introduction-to-algebra.
  Also used for the tutorial title on tutorial landing pages.
  Not restricted to styling the titles of "Topic" entities. */
}
.vertical-shadow {
  border: 1px solid #ccc;
  border-bottom: 1px solid #aaa;
  box-shadow: 0 1px 3px #ccc;
}
html.page-container-min-width-zero body,
html.page-container-min-width-zero #page-container {
  min-width: 0;
}
.periodic-table-element-info {
  height: 106px;
  left: 50%;
  margin-left: -361px;
  margin-top: 199px;
  position: absolute;
  top: 0;
  width: 538px;
  z-index: 1050;
}
.periodic-table-body {
  padding: unset;
  display: block;
}
.periodic-table-body .periodic-table-grid {
  display: grid;
  grid-template-columns: repeat(18, 40px);
  grid-gap: 2px;
}
.periodic-table-body .periodic-table-grid.main-table {
  grid-template-rows: repeat(8, min-content);
  grid-template-areas: "g  g  g   g   g   g   g   g   g   g   g   g   g  g  g  g  g  g" "H  .  key key key key key key key key key key .  .  .  .  .  He" "Li Be key key key key key key key key key key B  C  N  O  F  Ne" "Na Mg key key key key key key key key key key Al Si P  S  Cl Ar" "K  Ca Sc  Ti  V   Cr  Mn  Fe  Co  Ni  Cu  Zn  Ga Ge As Se Br Kr" "Rb Sr Y   Zr  Nb  Mo  Tc  Ru  Rh  Pd  Ag  Cd  In Sn Sb Te I  Xe" "Cs Ba lx  Hf  Ta  W   Re  Os  Ir  Pt  Au  Hg  Tl Pb Bi Po At Rn" "Fr Ra ax  Rf  Db  Sg  Bh  Hs  Mt  Ds  Rg  Cn  Nh Fl Mc Lv Ts Og";
  margin-bottom: 15px;
}
.periodic-table-body .periodic-table-grid.lanthanide-actinide-table {
  grid-template-rows: repeat(2, min-content);
  grid-template-areas: ". . La Ce Pr Nd Pm Sm Eu Gd Tb Dy Ho Er Tm Yb Lu" ". . Ac Th Pa U  Np Pu Am Cm Bk Cf Es Fm Md No Lr";
}
.periodic-table-body .periodic-table-grid .periodic-table-cell {
  line-height: 1.2;
  padding: 2px;
  text-align: center;
  vertical-align: middle;
  position: relative;
}
.periodic-table-body .periodic-table-grid .periodic-table-cell .atomic-num {
  font-size: 12px;
}
.periodic-table-body .periodic-table-grid .periodic-table-cell .symbol {
  font-weight: bold;
  font-size: 18px;
}
.periodic-table-body .periodic-table-grid .periodic-table-cell .weight {
  font-size: 11px;
}
.periodic-table-body .periodic-table-grid .periodic-table-cell.marker {
  background-color: #ddd;
}
.periodic-table-body .periodic-table-grid .periodic-table-cell.periodic-table-group-number {
  padding: 0.4em 0;
}
.periodic-table-body .periodic-table-grid .periodic-table-cell.non-metal {
  background-color: #d0bbd8;
}
.periodic-table-body .periodic-table-grid .periodic-table-cell.other-metal {
  background-color: #9eb5c6;
}
.periodic-table-body .periodic-table-grid .periodic-table-cell.metalloid {
  background-color: #f4e4d7;
}
.periodic-table-body .periodic-table-grid .periodic-table-cell.transition-metal {
  background-color: #9cdceb;
}
.periodic-table-body .periodic-table-grid .periodic-table-cell.unknown {
  background-color: #ddd;
}
.periodic-table-body .periodic-table-grid .periodic-table-cell.cutoff::before,
.periodic-table-body .periodic-table-grid .periodic-table-cell.cutoff::after {
  content: " ";
  display: block;
  position: absolute;
  background-color: black;
}
.periodic-table-body .periodic-table-grid .periodic-table-cell.cutoff::before {
  width: 2px;
  top: -2px;
  left: -2px;
  bottom: -2px;
}
.periodic-table-body .periodic-table-grid .periodic-table-cell.cutoff::after {
  height: 2px;
  bottom: -2px;
  left: -2px;
  right: -2px;
}
.periodic-table-body .periodic-table-grid .periodic-table-key {
  display: flex;
  align-items: center;
}
.periodic-table-body .periodic-table-grid .periodic-table-key > div {
  flex-grow: 1;
}
.periodic-table-body .periodic-table-grid .periodic-table-key .periodic-table-legend {
  display: flex;
  justify-content: center;
}
.periodic-table-body .periodic-table-grid .periodic-table-key .periodic-table-legend ul {
  width: fit-content;
}
.periodic-table-body .periodic-table-grid .periodic-table-key .periodic-table-legend li {
  display: flex;
  align-items: center;
}
.periodic-table-body .periodic-table-grid .periodic-table-key .periodic-table-legend .periodic-table-legend-item {
  height: 24px;
  width: 24px;
  margin: 5px;
}
.periodic-table-body .periodic-table-grid .periodic-table-key .periodic-table-legend .periodic-table-legend-item.non-metal {
  background-color: #d0bbd8;
}
.periodic-table-body .periodic-table-grid .periodic-table-key .periodic-table-legend .periodic-table-legend-item.other-metal {
  background-color: #9eb5c6;
}
.periodic-table-body .periodic-table-grid .periodic-table-key .periodic-table-legend .periodic-table-legend-item.metalloid {
  background-color: #f4e4d7;
}
.periodic-table-body .periodic-table-grid .periodic-table-key .periodic-table-legend .periodic-table-legend-item.transition-metal {
  background-color: #9cdceb;
}
.periodic-table-body .periodic-table-grid .periodic-table-key .periodic-table-example {
  display: flex;
  justify-content: center;
}
.periodic-table-body .periodic-table-grid .periodic-table-key .periodic-table-example > div {
  display: grid;
  grid-template-areas: "example-atomic-num    right-arrow0  atomic-num-label" "example-symbol        right-arrow1  symbol-label" "example-weight        right-arrow2  weight-label" "hover-hint            hover-hint    hover-hint ";
  grid-template-columns: 80px 1.2em 1fr;
  grid-template-rows: repeat(4, min-content);
}
.periodic-table-body .periodic-table-grid .periodic-table-key .periodic-table-example > div .example-atomic-num {
  grid-area: example-atomic-num;
  font-size: calc(12px*2);
  padding-top: 4px;
}
.periodic-table-body .periodic-table-grid .periodic-table-key .periodic-table-example > div .example-symbol {
  grid-area: example-symbol;
  font-weight: bold;
  font-size: calc(18px*2);
}
.periodic-table-body .periodic-table-grid .periodic-table-key .periodic-table-example > div .example-weight {
  grid-area: example-weight;
  font-size: calc(11px*2);
  padding-bottom: 4px;
}
.periodic-table-body .periodic-table-grid .periodic-table-key .periodic-table-example > div .example-atomic-num,
.periodic-table-body .periodic-table-grid .periodic-table-key .periodic-table-example > div .example-symbol,
.periodic-table-body .periodic-table-grid .periodic-table-key .periodic-table-example > div .example-weight {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #d0bbd8;
  line-height: 1.2;
}
.periodic-table-body .periodic-table-grid .periodic-table-key .periodic-table-example > div .atomic-num-label {
  grid-area: atomic-num-label;
}
.periodic-table-body .periodic-table-grid .periodic-table-key .periodic-table-example > div .symbol-label {
  grid-area: symbol-label;
}
.periodic-table-body .periodic-table-grid .periodic-table-key .periodic-table-example > div .weight-label {
  grid-area: weight-label;
}
.periodic-table-body .periodic-table-grid .periodic-table-key .periodic-table-example > div .atomic-num-label,
.periodic-table-body .periodic-table-grid .periodic-table-key .periodic-table-example > div .symbol-label,
.periodic-table-body .periodic-table-grid .periodic-table-key .periodic-table-example > div .weight-label {
  display: flex;
  align-items: center;
  line-height: 1;
}
.periodic-table-body .periodic-table-grid .periodic-table-key .periodic-table-example > div .periodic-table-example-right-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}
.periodic-table-body .periodic-table-grid .periodic-table-key .periodic-table-example > div .hover-hint {
  grid-area: hover-hint;
  font-size: 12px;
  text-align: center;
  margin-top: 10px;
}