.atomCanvas {
	/*width: 100vw;
	height: 100vh;*/
	top:  0;
	left:  0;
	position: absolute;
}

.element {
	text-align: center;
}

.element span[element=true] {
	transition: text-shadow 1s linear;
	cursor: pointer;
}

.element span:hover[element=true] {
	color: #1a3f84;
	text-shadow: 5px 0px 5px #1f1f1f94;
}

.stability {
	text-align: center;
	margin: 0;
}

.particle {
	display: inline-block;
	bottom: 10px;
	position: absolute;
	text-align: center;
	user-select: none;
}

.particleName {
	transform: translate(-50%,0);
}

.particleImg {
	margin-right: 5px;
	padding: 3px;
	background-color: #797979;
	border-radius: 90px;
}

.particleCount {
	margin: 0;
}

body {
	background-color: #e6e0e0;
}

.buttonGroup {
	float: right;
	display: table;
    font-size: 0;
}

.minusButton {
	background-color: red;
	margin: 0;
	padding: 1px 10px;
	color: white;
	text-align: center;
	vertical-align: middle;
	font-size: 20px;
	display: inline-block;
	border-color: darkred;
	border-width: 2px;
	border-style: solid;
	cursor: pointer;

}

.plusButton {
	background-color: #1ad41a;
	margin: 0;
	padding: 1px 8px;
	color: white;
	text-align: center;
	vertical-align: middle;
	font-size: 20px;
	display: inline-block;
	border-color: #299829;
	border-width: 2px;
	border-style: solid;
	cursor: pointer;

}

.resetButton {
	background-color: #b5b5b5;
	margin: 0;
	padding: 1px 8px;
	color: #505050;
	text-align: center;
	vertical-align: middle;
	font-size: 20px;
	display: inline-block;
	border-color: #868686;
	border-width: 2px;
	border-style: solid;
	cursor: pointer;
}

.buttonGroup button:not(:first-child) {
	border-left: none;
}

.buttonGroup button:not(:last-child) {
	border-right: none;
}

.buttonGroup button:first-child {
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px;
}

.buttonGroup button:last-child {
	border-top-right-radius: 2px;
	border-bottom-right-radius: 2px;
}

.menu {
	background-color: #e0ba5f;
	border-radius: 10px;
	border-width: 5px;
	border-color: #c58d3d;
	border-style: solid;
	display: grid;
	width: 28.5vw;
	height: 53vh;
	padding: 0 10px;
	position: absolute;
	top: 5px;
	left: 5px;

	transition-timing-function: linear;
	transition-property: opacity, width, height;
	transition-duration: 0.5s;
}


.subMenu p {
	font-weight: bold;
	text-align: center;
	font-family: "Comic Sans MS", cursive, sans-serif;
}

.menuTitle {
	font-size: 20px;
}

.subMenu {
	white-space: nowrap;
	overflow: hidden;
}

.subMenu:not(:last-child){
	border-width: 3px;
	border-color: #c58d3d;
	border-style: solid;
	border-left: none;
	border-right: none;
	border-top: none;
}

.subMenu .menuValue {
	font-size: 35px;
	font-family: "Lucida Console", Monaco, monospace;
	border-style: dashed;
	border-width: 2px;
	border-radius: 15px;
	margin: auto;
	min-width: 50px;
	max-width: max-content;
	border-color: black;
	background-color: #e8cc65;
}

.menuValue[id=charge][value^="-"] {
	color: #001af3;
}

.menuValue[id=charge][value="0"] {
	color: black;
}

.menuValue[id=charge]:not([value^="-"]):not([value="0"]) {
	color: #e00000;
}

.periodicTable {
	background-color: lightgrey;
	margin-top: 5px;
	user-select: none;
}

.periodicTable tr {
	border-width: 2px;
	border-style: solid;
	border-color: black;
}

.periodicTable td {
	border-width: 2px;
	border-style: solid;
	border-color: black;
	min-width: 1.4em;
	text-align: center;
	vertical-align: middle;
	font-size: 15px;
	font-family: "Times New Roman";

}

.periodicTable td:not(:empty) {
	cursor: pointer;
}

.periodicTable td:not(:empty)[element=false]:hover {
	background-color: #a7a7a7;
}

.periodicTable td:empty {
	border: none;
}

.periodicTable td[element=true] {
	background-color: #6dafa2;
}

.closeButton {
	position: absolute;
	top: 15px;
	left: 15px;
	padding: 1px;
	display: inline-block;
	border-radius: 10px;
	border-style: solid;
	border-color: #6b6b6b;
	border-width: 3px;
	background-color: lightgrey;
	cursor: pointer;
	user-select: none;
}

.closeButton:hover {
	background-color: #cccccc;
	transform: scale(1.05,1.05);
}

.translateButton {
	position: absolute;
	top: 15px;
	right: 15px;
	padding: 1px;
	display: inline-block;
	border-radius: 10px;
	border-style: solid;
	border-color: #6b6b6b;
	border-width: 3px;
	background-color: lightgrey;
	cursor: pointer;
	user-select: none;
}

.translateButton:hover {
	background-color: #cccccc;
	transform: scale(1.05,1.05);
}

.helpButton {
	position: absolute;
	top: 45px;
	right: 15px;
	padding: 1px;
	display: inline-block;
	border-radius: 10px;
	border-style: solid;
	border-color: #6b6b6b;
	border-width: 3px;
	background-color: lightgrey;
	cursor: pointer;
	user-select: none;
}

.helpButton:hover {
	background-color: #cccccc;
	transform: scale(1.05,1.05);
}

.symbol {
	text-align: center;
	vertical-align: middle;
}
table.symbol {
	margin-left: auto;
	margin-right: auto;
	border-style: solid;
	border-width: 2px;
	height: 2.5em;
	min-width: 2.5em;
	max-width: max-content;
}

td.symbol {
	border: none;
	font-size: 20px;
	padding-top: 0;
	padding-bottom: 0;
	width: 60%;
	text-align: left;
}

td.symbolNum {
	font-size: 15px;
	width: 40%;
	text-align: right;
}

.ion {
	display: inline-block;
	left: 80vw;
	top: 5vh;
	position: absolute;
}

.ion[id=ion][value^="-"] {
	color: #001af3;
}

.ion[id=ion][value="0"] {
	color: black;
}

.ion[id=ion]:not([value^="-"]):not([value="0"]) {
	color: #e00000;
}

.isotope {
	display: inline-block;
	left: 80vw;
	top: 11vh;
	position: absolute;
    background-color: antiquewhite;
}

.origin {
	display: inline-block;
	left: 80vw;
	top: 17vh;
	position: absolute;
    background-color: antiquewhite;
}

.isotope:not(:empty) {
    border: 5px;
    border-color: lightgrey;
    border-style: solid;
    border-radius: 5px;
}

.origin:not(:empty) {
    border: 5px;
    border-color: lightgrey;
    border-style: solid;
    border-radius: 5px;
}

canvas {
	z-index: -1;
}

:not(canvas) {
	z-index: 1;
}

div.settings {
	display: inline-grid;
	text-align: center;
	vertical-align: middle;
	left: 5vw;
	top: 55vh;
	position: absolute;
}

.styled-checkbox {
  position: absolute;
  opacity: 0;
}

.styled-checkbox + label:before {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}

.styled-checkbox + label {
    position: relative;
    cursor: pointer;
    padding: 0;
}

.styled-checkbox + label:before {
    content: '';
    margin-right: 10px;
    display: inline-block;
    vertical-align: text-top;
    width: 20px;
    height: 20px;
    background: white;
}

.styled-checkbox:hover + label:before {
    background: #f35429;
}

.styled-checkbox:focus + label:before {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.22);
}

.styled-checkbox:checked + label:before {
    background: #f35429;
}
  
.styled-checkbox:disabled + label {
    color: #b8b8b8;
    cursor: auto;
}

.styled-checkbox:disabled + label:before {
    box-shadow: none;
    background: #ddd;
}

.styled-checkbox:checked + label:after {
    content: '';
    position: absolute;
    left: 5px;
    top: 9px;
    background: white;
    width: 2px;
    height: 2px;
    box-shadow: 
      2px 0 0 white,
      4px 0 0 white,
      4px -2px 0 white,
      4px -4px 0 white,
      4px -6px 0 white,
      4px -8px 0 white;
    transform: rotate(45deg);
}


.infoButton {
  display: inline-flex;
  height: 40px;
  width: 150px;
  border: 2px solid #205656;
  margin: 20px 20px 20px 20px;
  color: #BFC0C0;
  text-transform: uppercase;
  text-decoration: none;
  font-size: .8em;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  letter-spacing: 1.5px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  top: 75vh;
  left: 5vw;
  background-color: #29beef;
  user-select: none;
}

a {
  color: black;
  text-decoration: none;
  letter-spacing: 1px;
}

#infoButton {
  position: absolute;
  overflow: hidden;
  cursor: pointer;
}

#infoButton a {
  position: relative;
  left: 0;
  /*transition: all .35s ease-Out;*/
  transition: all .5s ease-Out;
  transition-delay: .3s;
}

#infoArrow {
  width: 100%;
  height: 100%;
  background: #109090;
  left: -200px;
  position: absolute;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /*transition: all .35s ease-Out;*/
  transition: all .8s ease-Out;
  bottom: 0;
}

#infoButton img {
  width: 20px;
  height: auto;
}

#infoButton:hover #infoArrow {
  left: 0;
}

#infoButton:hover a {
  left: 150px;
}

label.settings {
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
}

div.electronicConf {
	position: absolute;
	display: inline-block;
	left: 74vw;
	top: 30vh;
	background-color: lightgrey;
	padding: 2px;
	min-width: 24vw;
	min-height: min-content;
	max-width: max-content;
	max-height: 51vh;
	transform-origin: top center;
	transition-property: all;
	transition-duration: 0.5s;
	transition-timing-function: linear;
	user-select: none;
	overflow: auto;

	border-style: outset;
	border-width: 3px;
	border-color: sienna;
	border-radius: 5px;
	box-shadow: grey 3px 3px;
}

.energyAxis {
	position: absolute;
	display: inline-block;
	/*left: -10px;*/
	left: 15px;
	top: 6px;
	background-color: yellowgreen;
	width: 3px;
	height: 98%;
}

.energyArrow {
	position: absolute;
	display: inline-block;
	/*left: -10px;*/
	left: 15px;
	top: 6px;
	background-color: yellowgreen;
	width: 3px;
	height: 15px;
}

.energyArrow:first-child {
	transform: rotate(45deg) translate(-6px, 0);
}

.energyArrow:nth-child(2) {
	transform: rotate(-45deg) translate(6px, 0);
}

.energyLabel {
	/*position: sticky;*/
	position: fixed;
	display: inline-block;
	/*left: -25px;*/
	/*top: 0;*/
}

table.electronicConf {
	margin-left: 25px;
	white-space: nowrap;
}

.electronicConf td {
	font-size: 15px;
	font-family: "Times New Roman";
	display: inline-block;
	width: 1em;
	height: 1em;
	text-align: center;
	vertical-align: middle;
	border-width: 1px;
	border-collapse: collapse;
}

.electronicConf td:empty {
	margin: 1px;
}

.electronicConf tr {

}

.electronicConf div {
	display: inline-block;
}

td.subShellName {
	background-color: slategrey;
	border-style: solid;
}

td.orbital {
	background-color: tan;
	border-style: solid;
}

td.orbital:not(:last-child) {
	border-right-style: dotted;
}

td.orbital:not(:first-child) {
	border-left-style: dotted;
}

.electronicConfButton {
	position: absolute;
	display: inline-block;
	text-align: center;
	left: 75vw;
	top: 25vh;
	min-width: 22vw;
	padding: 1px;
	border-radius: 10px;
	border-style: solid;
	border-color: #6b6b6b;
	border-width: 3px;
	background-color: lightgrey;
	cursor: pointer;
	user-select: none;
}

.electronicConfButton:hover {
	background-color: #cccccc;
	transform-origin: center;
	transform: scale(1.05,1.05);
}

td.xLabel {
	border-style: solid;
	border-color: transparent;
}

.note {
	bottom:0;
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 15px;
}

.contact {
	bottom:0;
	position: absolute;
	left: 1vw;
	text-align: center;
	font-size: 15px;
}

.contact a {
	color: blue;
}

.contact a:hover {
	color: mediumturquoise;
}

.description {
	display: none;
}

* {
    user-select: none;
}