body {
			counter-reset: element;
			background-color: #e9ebec !important; 
			/*RGB(255,255,255) rgb(248, 246, 238) !important; */
			
		}
		
		.Grid_header_text_div_desc {
		    /* display: inline; */
		    background: url(../../static/image/grid_desc.gif) no-repeat bottom right;
		    padding-right: 10px;
		}					
		
		.Grid_header_text_div_asc {
		    /* display: inline; */
		    background: url(../../static/image/grid_asc.gif) no-repeat top right;
		    padding-right: 10px;			
   		}		
		
		
		.main-research {
			padding-top: 10px;
		}		

		.periodic-table {
			display: grid;
			grid-column-gap: .5vw;
			grid-row-gap: .5vw;
			padding-left: 0;
			grid-template-columns: repeat(18, 1fr);

		}
		
		.periodic-table>li {
		cursor: pointer;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		position: relative;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		justify-content: center;
		align-items: center;
		border-radius: 3px;
		font-weight: 400;
		font-family: '-apple-system', 'Helvetica Neue', Roboto, 'Segoe UI', sans-serif;
		color: #676010; /*black*/
		-webkit-transition: color .3s,background-color .3s,font-size .3s,opacity .3s,background-image .3s,-webkit-transform .3s;
		transition: color .3s,background-color .3s,font-size .3s,opacity .3s,background-image .3s,-webkit-transform .3s;
		transition: color .3s,background-color .3s,font-size .3s,transform .3s,opacity .3s,background-image .3s;
		transition: color .3s,background-color .3s,font-size .3s,transform .3s,opacity .3s,background-image .3s,-webkit-transform .3s
		}
		.periodic-table>li abbr {
			cursor: pointer
		}

		.periodic-table>li:hover {
			opacity: .7
		}

		.periodic-table>li>div {
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: 3px;
			z-index: 100;
			-webkit-transition: opacity .3s,background-color .3s;
			transition: opacity .3s,background-color .3s
		}
		.periodic-table abbr {
			position: relative;
			z-index: 101
		}
		.periodic-table>.active {
			z-index: 1000;
			-webkit-box-shadow: 0 0 2px 0 rgba(0,0,0,.1),0 4px 4px 0 rgba(0,0,0,.1),0 8px 8px 0 rgba(0,0,0,.1),0 16px 16px 0 rgba(0,0,0,.1);
			box-shadow: 0 0 2px 0 rgba(0,0,0,.1),0 4px 4px 0 rgba(0,0,0,.1),0 8px 8px 0 rgba(0,0,0,.1),0 16px 16px 0 rgba(0,0,0,.1);
			background-clip: content-box,border-box;
			-webkit-transform: scale(1.1);
			transform: scale(1.1);
			background-color: #C0C0C0;
		}
		.periodic-table>li .active {
			background-color: #C0C0C0;
		}

		.periodic-table>.recover {
			-webkit-transform: scale(1);
			transform: scale(1)
		}
		.periodic-table>li .recover {
			-webkit-transform: scale(1);
			transform: scale(1)
		}

		.periodic-table>li:before {
			content: "";
			padding-bottom: 100%
		}

		.periodic-table>li abbr {
			font-size: 1.0em;
			text-decoration: none
		}

		#helium {
			grid-column-start: 18
		}

		#aluminium,#boron {
			grid-column-start: 13
		}

		#cerium, #thorium {
			grid-column-start: 4
		}

		.periodic-table>li:nth-child(n+58):nth-last-child(n+48) {
			grid-row-start: 8
		}

		.periodic-table>li:nth-child(n+90):nth-last-child(n+16) {
			grid-row-start: 9
		}

		.periodic-table:before {
			display: block;
			content: "";
			grid-row: 8/10;
			grid-column: 1/4
		}

		@media (min-width:990px){
		.periodic-table>li:after {
			z-index: 102;
			display: inline-block;
			counter-increment: element;
			content: counter(element);
			position: absolute;
			top: 2px;
			left: 3px;
			font-size: .5em;
			color:#fff;
			font-family: Roboto Condensed,sans-serif;
			-webkit-transition: color .3s;
			transition: color .3s
		}}
		.nonmetal{
			background: rgb(52,159,244);
		}
		.nonmetal:hover{
			background: rgb(52,180,244);
		}

		.alkali{
			background: #dca764; /*#f75a42; */
		}
		.alkali:hover{
			background: rgb(247,111,66);
		}

		.alkalin{
			background: #f19739; /*#ff8300;*/
		}
		.alkalin:hover{
			background: rgb(255,152,0);
		}

		.transition {
			background: #17a2b8; /*#296fd8;*/
		}
		.transition:hover{
			background: rgb(41,132,216);
		}
		.transition abbr {
			color: #820505fa;
			font-size: 1.6em;
			font-weight: 700;
		}
		
		.metalloid{
			background: #f29b76;
		}
		.metalloid:hover{
			background: rgb(242,177,118);
		}

		.poor{
			background: rgb(90,182,94);
		}
		.poor:hover{
			background: rgb(90,203,94);
		}

		.halogen {
			background: #5b6eda; /*rgb(77,93,186); */
		}
		
		.halogen:hover{
			background: rgb(77,114,186);
		}

		.noble{
			background: rgb(144 131 167); /*rgb(114,72,188);*/
		}
		.noble:hover{
			background: rgb(114,93,188);
		}

		.noble abbr {
			color: #282829; /*rgb(77,93,186); */
		}

		.lanthanoid{
			background: #e04872; /*#ec466b;*/
		}
		.lanthanoid:hover{
			background: rgb(236,91,107);
		}

		.actinoid{
			background: #b35a5a; /*#666df7; */
		}
		.actinoid:hover{
			background: rgb(102,130,247);
		}

		#btn2 {
			font-weight:600;
			color: #fff;
			font-family: '-apple-system', 'Helvetica Neue', Roboto, 'Segoe UI', sans-serif;
		}

		#btn1 {
			font-weight:600 ;
			color: #fff;
			font-family: '-apple-system', 'Helvetica Neue', Roboto, 'Segoe UI', sans-serif;
		}

		#clear {
			cursor: pointer
		}

		.is-invalid {
			background-image: none !important;
		}

		.navbar {

			/*
			background-image:url(/static/image/logo1.png);			
			background-image:url(/elecstruct/materials/top_01.jpg);
			*/
		}

		.logotext span {
			color: #000000;
			font-weight:700;
			font-size: 38px;
			font-family: Roboto Condensed,sans-serif;
		}
		
		.logo {
		    width: auto;
		    height: 70px;
		    margin-top: 3px;  
		    margin-bottom: 3px;
		    max-width: 100%;
		    max-height: 100%;
		    object-fit: cover;
		}			

		.logotext p {
			margin-top: -10px;
		}

		.logotext p small {
			font-family: Roboto Condensed,sans-serif;
		}

		.home a {
			font-weight:500;			
			color:#FFFF !important;  /* color:#000 !important; */
			font-family:'-apple-system', 'Helvetica Neue', Roboto, 'Segoe UI', sans-serif;
		}

		.home a p {
			font-size:16px;
		}		

		.app a {
			font-weight:500;
			font-size:16px;
			font-family:'-apple-system', 'Helvetica Neue', Roboto, 'Segoe UI', sans-serif;
			cursor: pointer;	
		}

		#apps {
			color: #fff !important; /*color: #000 !important;*/ 	
		}

		.about a {
			color:#FFFF !important; /*color: #000 !important;*/
		}

		.about a p {
			font-weight:500;
			font-size:16px;
			font-family:'-apple-system', 'Helvetica Neue', Roboto, 'Segoe UI', sans-serif;
		}

		.state a {
			color: #000 !important;
		}

		.state a p {
			font-weight:500;
			font-size:16px;
			font-family:'-apple-system', 'Helvetica Neue', Roboto, 'Segoe UI', sans-serif;
		}

		#length {
			font-size:1.2rem !important;
			font-weight:bolder;
			font-size: inherit;
			color: inherit;
			font-family: Roboto Condensed,sans-serif;
		}

		#leng {
			font-size: inherit;
			color: inherit;
			font-family: Roboto Condensed,sans-serif;
			font-weight:300
		}

		#formula {
			font-size:1.2rem !important;
			font-weight:bolder;
			font-size: inherit;
			color: inherit;
			font-family: Roboto Condensed,sans-serif;
		}

		#table1 {
			background:#f6f9ff;
			cursor:pointer
		}
		
		.navbar {
			
			/*
			background-image:url(../image/logo.png);
			background-image:url(/elecstruct/materials/top_01.jpg);
			*/
		}


		#foot {
			/*
			background-image:url(../image/logo.png);
			background-image:url(/elecstruct/materials/top_01.jpg);
			*/
			
		}

		#foottext p {
			color:#000;
			font-size:14px;
			font-weight: 360;
			margin-bottom:0px;			
			font-family: microsoft Yahei;


			
		}