table.periodictable
{ 
  table-layout: fixed;
  border-collapse: collapse;  
  margin-left: auto;
  margin-right: auto;
}

table.periodictable td { 
  width: 30px;
  height: 30px;
}

tr.periodictable {
  height: 2rem;
}

tr.periodictable td { 
  text-align: center;
  font-size: 16px;
  width: 35px;
  height: 2rem;
  padding: 5px;
  background-color: #ffffff;
 }


td.periodictable:hover { 
  background-color: #dddddd;
 }

td.periodictable { 
  border: 1px #000000 solid;
}

td.periodictableempty
{
  border: 5px #ff0000 solid;
}

.periodic-container {
    display: grid;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-template-columns: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
    grid-template-rows: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
}

.periodic-container > div {
}

.periodic-element {
    text-align: center;
    border-radius: 3px;
    font-size: 16px;
    padding: 10px;
    background-color: #eeeeee;
    display: inline-grid;
}

.periodic-element-selected {
    text-align: center;
    border-radius: 3px;
    font-size: 16px;
    padding: 10px;
    display: inline-grid;
    color: #ffffff;
    height: 52px;
    width: 52px;
    font-size: 17px;
    background-image: linear-gradient(-180deg, rgb(0, 140, 224), rgb(0, 105, 156));
}

.periodic-element:hover::before {
    background-color: #ffffff;
}

.periodic-empty {
     display: inline-grid;
}