#periodicTable {
  position: relative;
  top: 302px;
  left: 525px;
  /* display: none; */
  width: 950px;
  height: 555px;
  box-sizing: border-box;
  background-color: white;
  border: 5px solid #06c;
  border-radius: 15px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  cursor: pointer;
}
#dragtable{
  position: absolute;
  width:1024px;
  height:615px;
  top: 79px;
  left: 0px;
  display: none;
  z-index: 222;
}

.tableContainer {
  position: relative;
  top: 80px;
  display: grid;
  grid-gap: 0;
  grid-template-columns: repeat(18, 1fr);
  grid-template-rows: repeat(10, 40px);
  max-width: 800px;
  margin: 1em auto;
}

.tableContainer h2 {
  font-size: 0.5em;
}

#close_btton {
  width: 0.1px;
  height: 0.1px;
  outline: none;
  background-color: #fff;
  margin-left: -3px;
}

.element {
  float: none;
  padding: 0;
  margin: 0;
  font-family: Arial, sans-serif;
  text-align: center;
  background: #ccc;
  border: 1px solid #222;
  font-size: 0.7em;
}

.element:focus {
  outline: 1px solid blue;
  outline-offset: -2px;
}

#periodicTable .controlBtnBottom {
  position: absolute;
  bottom: -35px;
  left: 87px;
  display: block;
  width: 625px;
  margin: 0px auto;
}

#periodicTable .controlBtnBottom ul li {
  list-style: none;
  display: inline-block;
  /* margin-right: 20px; */
  font-size: 16px;
  font-weight: bold;
  color: #06f;
  height: 18px;
}

#periodicTable .controlBtnBottom ul li:last-child {
  margin-right: 0px;
}

#periodicTable .controlBtnBottom ul li .circleUnActiveRed {
  position: relative;
  top: 0px;
  left: 0px;
  width: 5px;
  height: 5px;
  display: inline-block;
  border: 3px solid rgb(255, 0, 0);
  border-radius: 50px;
}

.metalPropertyContainer, .ElectronegativityContainer {
  display: none;
}

#periodicTable .bottomBtnShowDiv {
  position: absolute;
  bottom: 89px;
  left: 212px;
  /* display: block; */
  width: 600px;
  margin: 0px auto;
}

#periodicTable .metalPropertyContainer ul li {
  list-style: none;
  display: inline-block;
  margin-right: 20px; 
  font-size: 16px; 
}

.PeriodicbottomBtn{
  font-size: 16px;
  /* outline: none; */
  transform: scale(1);
}
.PeriodicbottomBtn:hover, .PeriodicbottomBtn:focus{
  /* outline: none; */
  transform: scale(1.05);
}
.PeriodicbottomBtn:hover .scaleText:hover, .PeriodicbottomBtn:focus .scaleText {
  /* font-size: 17px; */
  /* transform: scale(2); */
  /* -ms-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  transition: all 0.3s ease-in-out 0.2s; */
}
.controlBtnBottom ul .bottomBtnC_0{
  width: 190px;
}
.controlBtnBottom ul .bottomBtnC_1{
  width: 115px;
}
.controlBtnBottom ul .bottomBtnC_2{
  width: 165px;
}
.controlBtnBottom ul .bottomBtnC_3{
  width: 150px;
}

#periodicTable .metalPropertyContainer ul .metalPropertyList_0 .metalPropertyListBgColor {
  position: relative;
  top: 5px;
  width: 20px;
  height: 20px;
  display: inline-block;
  background-color: rgb(255, 247, 214);
  margin-right: 5px;
  border: 1px solid #000;
}

#periodicTable .metalPropertyContainer ul .metalPropertyList_1 .metalPropertyListBgColor {
  position: relative;
  top: 5px;
  width: 20px;
  height: 20px;
  display: inline-block;
  background-color: rgb(132, 207, 132);
  margin-right: 5px;
  border: 1px solid #000;
}

#periodicTable .metalPropertyContainer ul .metalPropertyList_2 .metalPropertyListBgColor {
  position: relative;
  top: 5px;
  width: 20px;
  height: 20px;
  display: inline-block;
  background-color: rgb(132, 158, 206);
  margin-right: 5px;
  border: 1px solid #000;
}

#periodicTable .subShellPerpertyContainer {
  display: none;
}

#periodicTable .subShellPerpertyContainer ul li {
  list-style: none;
  display: inline-block;
  margin-right: 20px;
  font-size: 18px;
  width: 100px;
  font-style: italic;
}

#periodicTable .subShellPerpertyContainer ul .subShellPerpertyList_0 .subShellPerpertyListBgColor {
  position: relative;
  top: 5px;
  width: 20px;
  height: 20px;
  display: inline-block;
  background-color: rgb(156, 215, 156);
  margin-right: 5px;
  border: 1px solid #000;
}

#periodicTable .subShellPerpertyContainer ul .subShellPerpertyList_1 .subShellPerpertyListBgColor {
  position: relative;
  top: 5px;
  width: 20px;
  height: 20px;
  display: inline-block;
  background-color: rgb(255, 109, 74);
  margin-right: 5px;
  border: 1px solid #000;
}

#periodicTable .subShellPerpertyContainer ul .subShellPerpertyList_2 .subShellPerpertyListBgColor {
  position: relative;
  top: 5px;
  width: 20px;
  height: 20px;
  display: inline-block;
  background-color: rgb(255, 182, 90);
  margin-right: 5px;
  border: 1px solid #000;
}

#periodicTable .subShellPerpertyContainer ul .subShellPerpertyList_3 .subShellPerpertyListBgColor {
  position: relative;
  top: 5px;
  width: 20px;
  height: 20px;
  display: inline-block;
  background-color: rgb(206, 162, 206);
  margin-right: 5px;
  border: 1px solid #000;
}

#periodicTable .ElectronegativityContainer {
  font-size: 18px;
}

.metalPropertyContainer.active, .subShellPerpertyContainer.active, .ElectronegativityContainer.active {
  display: block !important;
}

.PeriodicbottomBtn.active .circleUnActiveRed {
  background-color: rgb(255, 0, 0);
}

#periodicTable .periodicTableModelWin {
  position: absolute;
  display: none;
  width: 500px;
  left: 110px;
  height: 104px;
  top: -40px;
  padding: 0px 5px 10px 20px;
  pointer-events: none;
}

#periodicTable .periodicBoxLeft {
  width: 90px;
  height: 100px;
  float: left;
  border: 3px solid rgb(102, 102, 102);
  text-align: center;
}

#periodicTable .periodicBoxLeft .topNum {
  display: block;
  font-size: 1.1em;
  font-weight: bold;
  margin-top: 5px;
  color: #000;
}

#periodicTable .periodicBoxLeft .boxTxt {
  display: block;
  font-size: 2.4em;
  font-weight: bold;
  color: #0066CC;
  padding-top: 2px;
}

#periodicTable .periodicBoxLeft .baseNum {
  display: block;
  font-size: 1.1em;
  font-weight: bold;
  color: #000;
  padding-top: 5px;
}

#periodicTable .periodicTableModelWin .periodicBoxRight {
  position: relative;
  display: inline-block;
  width: 374px;
  padding: 0px 15px 0px;
}

#periodicTable .periodicBoxRTitle {
  display: block;
  text-align: right;
  width: 141px;
  color: #0066CC;
  font-size: 1.3em;
  font-weight: bold;
}

#periodicTable .periodicBoxRTxt1 {
  display: inline-block;
  text-align: right;
  width: 152px;
  color: #000;
  font-size: 1.2em;
  line-height: 1.3;
}

#periodicTable .periodicBoxRTxt2 {
  display: inline-block;
  text-align: left;
  width: auto;
  color: #0066CC;
  padding-left: 5px;
  font-size: 1.2em;
  line-height: 1.3;
}

#periodicTable .element.active {
  /* background-color: #fffb6b !important; */
  background-color: #e7d167 !important;
  box-shadow: inset 0px 0px 0px 2px #dab99b;
  outline: none;
}
#periodicTable .element:focus {
  /* background-color: #fffb6b !important; */
  background-color: #e7d167 !important;
  box-shadow: inset 0px 0px 0px 2px #dab99b;
  outline: none;
}
#periodicTable .element::not(:focus) {
  /* background-color: #cea2ce;
  box-shadow: none; */
}

#periodicTable .element:focus {
  /* outline: none;
  outline-offset: unset; */
}

/* #periodicTable .element:hover {
  background-color: #e7d167 !important;
  box-shadow: inset 0px 0px 0px 2px #dab99b;
} */

#periodicTable .tableContainerBgImage {
  background-image: url(../../common/assets/images/ptable/Artboard1dots@2x.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 861px;
  height: 433px;
  position: absolute;
  top: 84px;
  left: 56px;
  pointer-events: none;
}
#periodicTable  .tableContainerBgImage1{
  background-image: url(../../common/assets/images/ptable/Artboard_1dots1@2x.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 860px;
  height: 108px;
  position: absolute;
  bottom: 35px;
  left: 49px;
  pointer-events: none;
}
.atomicRadius{
  display: none;
}
#periodicTable  .tableContainerBgImage2{
  background-image: url(../../common/assets/images/ptable/Artboard_1d@2x.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 861px;
  height: 433px;
  position: absolute;
  top: 84px;
  left: 56px;
  pointer-events: none;
}
#periodicTable  .tableContainerBgImage3{
  background-image: url(../../common/assets/images/ptable/Artboard_1dd@2x.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 862px;
  height: 108px;
  position: absolute;
  bottom: 35px;
  left: 49px;
  pointer-events: none;
}
#periodicTable  .tableContainerBgImage4{
  background-image: url(../../common/assets/images/ptable/arrow1.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 280px;
  height: 18px;
  position: absolute;
  bottom: 134px;
  left: 326px;
  pointer-events: none;
}
#periodicTable  .tableContainerBgImage5{
  background-image: url(../../common/assets/images/ptable/arrow2.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 20px;
  height: 169px;
  position: absolute;
  bottom: 229px;
  right: 30px;
  pointer-events: none;
}
.ElectronegativityContainer .electron_0{
  position: absolute;
  top: -14px;
  left: 30px;
}
.ElectronegativityContainer .electron_1{
  position: absolute;
  top: -28px;
  left: 79px;
  font-size: 0.8em;
}
.ElectronegativityContainer .electron_2{
  position: absolute;
  top: -14px;
  right: 261px;
}
#periodicTable .electronegatImg{
  display: none;
}
#periodicTable .romanHover{
  position: absolute;
  top: -50px;
  left: 99px;
  width: 412px;
  height: 112px;
  background-color: #ffd9b2;
  padding: 5px;
  display: none;
}
#periodicTable .romanHover .romanTitle{
  display: block;
  font-weight: bold;
  margin-bottom: 7px;
  font-size: 1.1em;
}
#periodicTable .romanHover  .romanContent{
  font-size: 1.1em;
}
.hoverImg{
  position: absolute;
  opacity:0;
  background-image: url('../../common/assets/images/ptable/Asset_10@2x.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: none;
}
#hoverImg_1{
  height: 282px;
  top: 95px;
  left: 69px;
  width: 46px;
}
#hoverImg_2{
  height: 242px;
  top: 135px;
  left: 113px;
  width: 46px;
}
#hoverImg_3{
  height: 163px;
  top: 215px;
  left: 156px;
  width: 448px;
  background-image: url('../../common/assets/images/ptable/Asset_12@2x.png');
}
#hoverImg_13{
  height: 313px;
  top: 63px;
  left: 68px;
  width: 760px;
  background-image: url('../../common/assets/images/ptable/Asset_1highlight@2x.png');
  pointer-events: none;
}
#hoverImg_17{
  height: 200px;
  top: 136px;
  right: 114px;
  width: 47px;
}
#hoverImg_18{
  height: 283px;
  top: 94px;
  right: 70px;
  width: 47px;
}
.hoverImg_13_content1{
  position: absolute;
  top: -20px;
  right: 125px;
}
.hoverImg_13_content2{
  position: absolute;
  top: 3px;
  right: 101px;
}
.hoverImg_13_content3{
  position: absolute;
  top: 26px;
  right: 48px;
}
#row_hoverImg_1{
  position: absolute;
  top: 94px;
  left: 70px;
  width: 800px;
  height: 45px;
  pointer-events: none;
  background-image: url(../../common/assets/images/ptable/row_1.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: none;
  opacity: 0;
}
#row_hoverImg_2{
  position: absolute;
  top: 134px;
  left: 70px;
  width: 800px;
  height: 45px;
  pointer-events: none;
  background-image: url(../../common/assets/images/ptable/row_2.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: none;
  opacity: 0;
}
#row_hoverImg_3{
  position: absolute;
  top: 173px;
  left: 70px;
  width: 800px;
  height: 45px;
  pointer-events: none;
  background-image: url(../../common/assets/images/ptable/row_2.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: none;
  opacity: 0;
}
#row_hoverImg_4{
  position: absolute;
  top: 214px;
  left: 70px;
  width: 800px;
  height: 45px;
  pointer-events: none;
  background-image: url(../../common/assets/images/ptable/row_4.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: none;
  opacity: 0;
}
#row_hoverImg_5{
  position: absolute;
  top: 253px;
  left: 70px;
  width: 800px;
  height: 45px;
  pointer-events: none;
  background-image: url(../../common/assets/images/ptable/row_4.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: none;
  opacity: 0;
}
#row_hoverImg_6{
  position: absolute;
  top: 293px;
  left: 70px;
  width: 800px;
  height: 45px;
  pointer-events: none;
  background-image: url(../../common/assets/images/ptable/row_4.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: none;
  opacity: 0;
}
#row_hoverImg_7{
  position: absolute;
  top: 333px;
  left: 70px;
  width: 800px;
  height: 45px;
  pointer-events: none;
  background-image: url(../../common/assets/images/ptable/row_4.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: none;
  opacity: 0;
}
#bottomTableTxt_Hover1{
  position: absolute;
  top: 414px;
  left: 158px;
  width: 623px;
  height: 43px;
  pointer-events: none;
  background-image: url(../../common/assets/images/ptable/row_4.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: none;
  opacity: 0;
}
#bottomTableTxt_Hover2{
  position: absolute;
  top: 454px;
  left: 158px;
  width: 623px;
  height: 43px;
  pointer-events: none;
  background-image: url(../../common/assets/images/ptable/row_4.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: none;
  opacity: 0;
}
.colNo:focus, .colNo:hover, .colNo:active, .rowNo:focus, .rowNo:hover, .rowNo:active, .bottomTableTxt:focus, .bottomTableTxt:active, .bottomTableTxt:hover {
  /* outline: none;
  box-shadow: none; */
}

@supports (not (display: grid)) and (not (display: flex)) {
  .element {
      float: left;
      min-width: 75px;
      min-height: 50px;
      margin: 3px;
  }
}

@supports (not (display: grid)) and (display: flex) {
  .wrapper {
      display: flex;
      flex-wrap: wrap;
  }

  .element {
      flex-grow: 1;
      flex-basis: 75px;
      min-height: 50px;
      margin: 3px;
  }

  .lanthanoid, .actinoid {
      visibility: hidden;
  }
}

[data-element-group="non-metal"], [data-element-group="nonmetal"] {
  background-color: #cea2ce;
}

[data-element-group="halogen"] {
  background-color: coral;
}

[data-element-group="metalloid"] {
  background-color: #ff99;
}

[data-element-group="metal"] {
  background-color: #ffcc;
}

[data-element-group="alkali-metal"] {
  background-color: #3cf;
}

[data-element-group="alkaline-earth-metal"] {
  background-color: #fc9;
}

[data-element-group="transition-metal"] {
  background-color: #6f6;
}

[data-element-group="noble-gas"] {
  background-color: #f9f;
}

[data-element-group="lanthanoid"] {
  background-color: #9fc;
}

[data-element-group="actinoid"] {
  background-color: #3cc;
}

@supports (display: grid) {
  .actinoid {
      grid-column: 3;
      grid-row: 7;
      display: none;
  }

  .lanthanoid {
      grid-column: 3;
      grid-row: 6;
      display: none;
  }

  .feature-element {
      grid-column: 3/9;
      grid-row: 2/4;
      background: #eee;
  }

  .H {
      grid-column: 1;
      grid-row: 1;
  }

  .He {
      grid-column: 18;
      grid-row: 1;
  }

  .Li {
      grid-column: 1;
      grid-row: 2;
  }

  .Be {
      grid-column: 2;
      grid-row: 2;
  }

  .B {
      grid-column: 13;
      grid-row: 2;
  }

  .C {
      grid-column: 14;
      grid-row: 2;
  }

  .N {
      grid-column: 15;
      grid-row: 2;
  }

  .O {
      grid-column: 16;
      grid-row: 2;
  }

  .F {
      grid-column: 17;
      grid-row: 2;
  }

  .Ne {
      grid-column: 18;
      grid-row: 2;
  }

  .Na {
      grid-column: 1;
      grid-row: 3;
  }

  .Mg {
      grid-column: 2;
      grid-row: 3;
  }

  .Al {
      grid-column: 13;
      grid-row: 3;
  }

  .Si {
      grid-column: 14;
      grid-row: 3;
  }

  .P {
      grid-column: 15;
      grid-row: 3;
  }

  .S {
      grid-column: 16;
      grid-row: 3;
  }

  .Cl {
      grid-column: 17;
      grid-row: 3;
  }

  .Ar {
      grid-column: 18;
      grid-row: 3;
  }

  .K {
      grid-column: 1;
      grid-row: 4;
  }

  .Ca {
      grid-column: 2;
      grid-row: 4;
  }

  .Sc {
      grid-column: 3;
      grid-row: 4;
  }

  .Ti {
      grid-column: 4;
      grid-row: 4;
  }

  .V {
      grid-column: 5;
      grid-row: 4;
  }

  .Cr {
      grid-column: 6;
      grid-row: 4;
  }

  .Mn {
      grid-column: 7;
      grid-row: 4;
  }

  .Fe {
      grid-column: 8;
      grid-row: 4;
  }

  .Co {
      grid-column: 9;
      grid-row: 4;
  }

  .Ni {
      grid-column: 10;
      grid-row: 4;
  }

  .Cu {
      grid-column: 11;
      grid-row: 4;
  }

  .Zn {
      grid-column: 12;
      grid-row: 4;
  }

  .Ga {
      grid-column: 13;
      grid-row: 4;
  }

  .Ge {
      grid-column: 14;
      grid-row: 4;
  }

  .As {
      grid-column: 15;
      grid-row: 4;
  }

  .Se {
      grid-column: 16;
      grid-row: 4;
  }

  .Br {
      grid-column: 17;
      grid-row: 4;
  }

  .Kr {
      grid-column: 18;
      grid-row: 4;
  }

  .Rb {
      grid-column: 1;
      grid-row: 5;
  }

  .Sr {
      grid-column: 2;
      grid-row: 5;
  }

  .Y {
      grid-column: 3;
      grid-row: 5;
  }

  .Zr {
      grid-column: 4;
      grid-row: 5;
  }

  .Nb {
      grid-column: 5;
      grid-row: 5;
  }

  .Mo {
      grid-column: 6;
      grid-row: 5;
  }

  .Tc {
      grid-column: 7;
      grid-row: 5;
  }

  .Ru {
      grid-column: 8;
      grid-row: 5;
  }

  .Rh {
      grid-column: 9;
      grid-row: 5;
  }

  .Pd {
      grid-column: 10;
      grid-row: 5;
  }

  .Ag {
      grid-column: 11;
      grid-row: 5;
  }

  .Cd {
      grid-column: 12;
      grid-row: 5;
  }

  .In {
      grid-column: 13;
      grid-row: 5;
  }

  .Sn {
      grid-column: 14;
      grid-row: 5;
  }

  .Sb {
      grid-column: 15;
      grid-row: 5;
  }

  .Te {
      grid-column: 16;
      grid-row: 5;
  }

  .I {
      grid-column: 17;
      grid-row: 5;
  }

  .Xe {
      grid-column: 18;
      grid-row: 5;
  }

  .Cs {
      grid-column: 1;
      grid-row: 6;
  }

  .Ba {
      grid-column: 2;
      grid-row: 6;
  }

  .Nh {
      grid-column: 17;
      grid-row: 6;
  }

  .lu {
      grid-column: 4;
      grid-row: 7;
  }

  .Hf {
      grid-column: 3;
      grid-row: 9;
  }

  .Ta {
      grid-column: 4;
      grid-row: 9;
  }

  .W {
      grid-column: 5;
      grid-row: 9;
  }

  .Re {
      grid-column: 6;
      grid-row: 9;
  }

  .Os {
      grid-column: 7;
      grid-row: 9;
  }

  .Ir {
      grid-column: 8;
      grid-row: 9;
  }

  .Pt {
      grid-column: 9;
      grid-row: 9;
  }

  .Au {
      grid-column: 10;
      grid-row: 9;
  }

  .Hg {
      grid-column: 11;
      grid-row: 9;
  }

  .Tl {
      grid-column: 12;
      grid-row: 9;
  }

  .Pb {
      grid-column: 13;
      grid-row: 9;
  }

  .Bi {
      grid-column: 14;
      grid-row: 9;
  }

  .Po {
      grid-column: 15;
      grid-row: 9;
  }

  .At {
      grid-column: 16;
      grid-row: 9;
  }

  .Rn {
      grid-column: 4;
      grid-row: 6;
  }

  .Fr {
      grid-column: 5;
      grid-row: 6;
  }

  .Ra {
      grid-column: 6;
      grid-row: 6;
  }

  .Lr {
      grid-column: 18;
      grid-row: 7;
  }

  .Rf {
      grid-column: 8;
      grid-row: 6;
  }

  .Db {
      grid-column: 9;
      grid-row: 6;
  }

  .Sg {
      grid-column: 10;
      grid-row: 6;
  }

  .Bh {
      grid-column: 11;
      grid-row: 6;
  }

  .Hs {
      grid-column: 12;
      grid-row: 6;
  }

  .Mt {
      grid-column: 13;
      grid-row: 6;
  }

  .Ds {
      grid-column: 14;
      grid-row: 6;
  }

  .Rg {
      grid-column: 15;
      grid-row: 6;
  }

  .Cn {
      grid-column: 16;
      grid-row: 6;
  }

  .uut {
      grid-column: 13;
      grid-row: 7;
  }

  .Fl {
      grid-column: 18;
      grid-row: 6;
  }

  .Mc {
      grid-column: 1;
      grid-row: 7;
  }

  .Ts {
      grid-column: 3;
      grid-row: 7;
  }

  .Og {
      grid-column: 3;
      grid-row: 10;
  }

  .Lv {
      grid-column: 2;
      grid-row: 7;
  }

  .uus {
      grid-column: 17;
      grid-row: 7;
  }

  .uuo {
      grid-column: 18;
      grid-row: 7;
  }

  .La {
      grid-column: 3;
      grid-row: 6;
  }

  .Ce {
      grid-column: 4;
      grid-row: 10;
  }

  .Pr {
      grid-column: 5;
      grid-row: 10;
  }

  .Nd {
      grid-column: 6;
      grid-row: 10;
  }

  .Pm {
      grid-column: 7;
      grid-row: 10;
  }

  .Sm {
      grid-column: 8;
      grid-row: 10;
  }

  .Eu {
      grid-column: 9;
      grid-row: 10;
  }

  .Gd {
      grid-column: 10;
      grid-row: 10;
  }

  .Tb {
      grid-column: 11;
      grid-row: 10;
  }

  .Dy {
      grid-column: 12;
      grid-row: 10;
  }

  .Ho {
      grid-column: 13;
      grid-row: 10;
  }

  .Er {
      grid-column: 14;
      grid-row: 10;
  }

  .Tm {
      grid-column: 15;
      grid-row: 10;
  }

  .Yb {
      grid-column: 16;
      grid-row: 10;
  }

  .Ac {
      grid-column: 7;
      grid-row: 6;
  }

  .Th {
      grid-column: 5;
      grid-row: 7;
  }

  .Pa {
      grid-column: 6;
      grid-row: 7;
  }

  .U {
      grid-column: 7;
      grid-row: 7;
  }

  .Np {
      grid-column: 8;
      grid-row: 7;
  }

  .Pu {
      grid-column: 9;
      grid-row: 7;
  }

  .Am {
      grid-column: 10;
      grid-row: 7;
  }

  .Cm {
      grid-column: 11;
      grid-row: 7;
  }

  .Bk {
      grid-column: 12;
      grid-row: 7;
  }

  .Cf {
      grid-column: 13;
      grid-row: 7;
  }

  .Es {
      grid-column: 14;
      grid-row: 7;
  }

  .Fm {
      grid-column: 15;
      grid-row: 7;
  }

  .Md {
      grid-column: 16;
      grid-row: 7;
  }

  .No {
      grid-column: 17;
      grid-row: 7;
  }

  .boxNum {
  }

  .topNum {
  }

  .boxTxt {
      font-weight: bold;
      font-size: 1.1em;
  }

  .baseNum {
  }
}

.dashLine {
  position: absolute;
  top: 201px;
  left: 131px;
  width: 4px;
  height: 78px;
  background: #cea2ce;
  outline: 1px solid #000;
}

.tableTitle {
  position: absolute;
  width: 100%;
  font-size: 38px;
  font-weight: bold;
  color: #06c;
  text-align: center;
  pointer-events: none;
}

#close_button {
  color: #0066cc;
  font-weight: bold;
  right: 13px;
  top: 5px;
  position: absolute;
  cursor: pointer;
}
#close_button:hover, #close_button:focus{
  font-size: 17px;
}

.verticlNo {
  position: relative;
  top: 4px;
  left: -90px;
  display: inline-block;
  text-align: right;
}

.horizontalNo {
  position: absolute;
  top: -30px;
  width: 800px;
}

.tableNo {
  position: relative;
  font-size: 25px;
  color: #f00;
  cursor: pointer;
  font-size: 1.2em;
  line-height: 1.5;

}

.rowNo {
  /* margin-bottom: 11px; */
}
#rowNo_1{
  position: absolute;
  top: -3px;
  width: 30px;
  height: 36px;
  left: 15px;
  text-align: center;
}
#rowNo_2{
  position: absolute;
  top: 38px;
  width: 30px;
  height: 38px;
  left: 15px;
  text-align: center;
}
#rowNo_3{
  position: absolute;
  top: 77px;
  width: 30px;
  height: 38px;
  left: 15px;
  text-align: center;
}
#rowNo_4{
  position: absolute;
  top: 117px;
  width: 30px;
  height: 38px;
  left: 15px;
  text-align: center;
}
#rowNo_5{
  position: absolute;
  top: 157px;
  width: 30px;
  height: 38px;
  left: 15px;
  text-align: center;
}
#rowNo_6{
  position: absolute;
  top: 197px;
  width: 30px;
  height: 38px;
  left: 15px;
  text-align: center;
}
#rowNo_7{
  position: absolute;
  top: 237px;
  width: 30px;
  height: 38px;
  left: 15px;
  text-align: center;
}

.colNo {
  position: absolute;
  WIDTH: 44.44px;
  height: 33px;
  line-height: 40px;
  text-align: center;
  font-size: 1.2em;
}

#colNo_1 {
  left: 0px;
  top: -13px;
}

#colNo_2 {
  left: 44px;
  top: 28px;
}

#colNo_3 {
  left: 88px;
  top: 108px;
}

#colNo_4 {
  left: 133px;
  top: 108px;
}

#colNo_5 {
  left: 178px;
  top: 108px;
}

#colNo_6 {
  left: 222px;
  top: 108px;
}

#colNo_7 {
  left: 267px;
  top: 108px;
}

#colNo_8 {
  left: 311px;
  top: 108px;
}

#colNo_9 {
  left: 356px;
  top: 108px;
}

#colNo_10 {
  left: 400px;
  top: 108px;
}

#colNo_11 {
  left: 444px;
  top: 108px;
}

#colNo_12 {
  left: 488px;
  top: 108px;
}

#colNo_13 {
  left: 533px;
  top: 28px;
}

#colNo_14 {
  left: 577px;
  top: 28px;
}

#colNo_15 {
  left: 622px;
  top: 28px;
}

#colNo_16 {
  left: 666px;
  top: 28px;
}

#colNo_17 {
  left: 711px;
  top: 28px;
}

#colNo_18 {
  left: 755px;
  top: -12px;
  line-height: 39px;
}

.bottomTableTxt {
  position: absolute;
  font-size: 18px;
  color: #f00;
  text-align: right;
  width: 130px;
  cursor: pointer;
}

#bottomTableTxt1 {
  top: 320px;
  right: 717px;
}

#bottomTableTxt2 {
  top: 358px;
  right: 717px;
  width: 110px;
}

.scaleText{
  position: relative;
  top: 0px;
  left: 0px;
  /* width: 165px; */
  height: 5px;
  display: inline-block;
  transition: 0.3s;
}
#periodicTable .element:hover{
  background-color: #e7d167 !important;
  box-shadow:inset 0px 0px 0px 2px #dab99b;
}

[tabindex]:not([tabindex="-1"]):focus {
  outline: 2px solid #7c9ac9 !important;
  outline: 2px auto -webkit-focus-ring-color;
  outline-offset: -1px;
}