*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,body{
    width: 100%;
    height:100%;
}    
#complete{ width:2000px; height:100%;justify-content:center; background:white;background-size: cover;}
#titlebox{width: 2000px;height: 200px;background:#173161;  background-size: cover;}
#menu{position: relative;background:#173161; width: 2000px;height:7%;}

#wrapper{ position:relative; display:flex; align-items:start; width:2000px; height:1000px;background: white}    
#wrapper4search{ position:relative; display:flex; align-items:start; width:2000px; height:1000px;background: white} 

!clr{width: 0; height: 0; clear:both; overflow: hidden;margin: 0 auto;}
.space_between{width: 50px; height: 1000px;background-color: white;}
.space_between4search{width: 330px; height: 1000px;background-color: white;}

.horizontal_space{width: 2000px; height:10px; background-color: white;}
body{background: #f2f3f3}
pre{white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap;  white-space: -o-pre-wrap; word-wrap: break-word;       }
input[type='submit'],input[type='reset'],input[type='button']{padding: 2px 7px; display: inline_block;}
input[type='text']{border-bottom: 1px solid #ccc; border-left: 2px solid #999; border-top: 2px solid #999; padding: 2px; height: 20px;}
textarea{border-bottom: 1px solid #ccc; border-left: 2px solid #999; border-top: 2px solid #999; padding: 2px; }
select{border-bottom: 1px solid #ccc; border-left: 2px solid #999; border-top: 2px solid #999; padding: 2px; }
td a{ text-decoration: underline; }
.bigTitle{font-size: 20px; color: #79939b;}

#container{ width: 100vw;height:100%; margin: 0 auto; font: 15px/25px arial,sans-serif; color: black;background: white url('./images/background_afrbase.png');backround-size:cover;}
#header{
  background-image: url("");
  margin-bottom:3px;
  height: 10vw;
  #width: 1000px;
  width: 100%;
  #max-width: 100%;
  #padding: 0;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;

}





.nav{
  left: 800px;
  top: 200px;
  color:white;}
.nav a{display: block;}
ul.nav-main>li:hover{background: white; color:#173161;}
ul.nav-main>li{float:left; padding: 0 6.5px;  color: white;font-size: 20px}
div.hidden-box{ width: 140px; border-top: 0; position: absolute; display:none; background:white; top: 28px; color:#173161}
.hidden-box>ul{ list-style-type: none; cursor: pointer;}
.hidden-box li:hover{ background: #173161; color: white;}
.hidden-box li{padding: 0 6.5px; color:#173161;}
.hidden-box li a{display: block; width: 140px;}



div.hidden-box{ width: 140px; border-top: 0; display:none; background:white; top: 28px; color:#173161}
.hidden-box>ul{ list-style-type: none; cursor: pointer;}
.hidden-box li:hover{ background: #173161; color: white;}
.hidden-box li{padding: 0 6.5px; color:#173161;}
.hidden-box li a{display: block; width: 140px;}

/* .hidden-loc-index{left:  11.13%}
.hidden-loc-us{left: 28.77%}
.hidden-loc-info{left: 466.5px;} */
/*home*/
.main{align-self: center;  float: left; width: 1200px; height:1000px; padding: 20px 20px; background: antiquewhite;}
.verticalspace{width: 100px; height:315px; background-color: antiquewhite;}
#main2{ width: 1000px; height:500px;  padding: 20px 20px; box-shadow: 4px 3px 2px #888888;background: #173161;margin-left: 80px;}
.main4search{width:600px;height:940px; margin-top: 30px; padding:0 20px; box-shadow: 4px 3px 2px ;background: antiquewhite;border-radius: 9px; color:#4b4c4c;}
.order{position: relative;background:white; width: 2000px;height:10%;}
/*.wel{color: #e1524b; font-size: 28px; margin: auto; width: 400px; font-weight: bold;}*/
.intro{line-height:23px; text-align: justify; margin-top: 10px; }
.cite{margin-top: 20px;}
.guide1{margin: 0 0 0 20px 0 0 0  0 20px 0 ;color:#e1524b; font-weight: 600; }

#graphs{ justify-items: center;}
.chartbox1{width:300px;height:400px; display: inline-block;}
.chartbox2{width:380px;height:400px; display: inline-block;box-align:center;}
.chartbox3{width:320px;height:380px; display: inline-block;box-align:right;}
.plotcenter{display: block; margin-left: auto; margin-right: auto;}
#tool{align-self: center;}
#indexBrowser li{float: left; height: 210px; }
/*#indexBrowser li:first-of-type{margin-right: 20px;}*/
/*#indexBrowser li:last-of-type{margin-left: 35px;}*/
.siderBar{width: 190px; padding:0 20px; box-shadow: 4px 3px 2px #888888; margin: 30px 0 0 30px; background: white; border-radius: 9px; color:#4b4c4c}
.left{width: 300px;height:940px;margin-top: 30px; padding:0 20px; box-shadow: 4px 3px 2px #888888; background:antiquewhite;border-radius: 9px; color:#4b4c4c}
.left4search{width: 300px;height:940px;margin-top: 30px; padding:0 20px; box-shadow: 4px 3px 2px #888888; background:antiquewhite;border-radius: 9px; color:#4b4c4c}
.right{width:300px;height:940px; margin-top: 30px; padding:0 20px; box-shadow: 4px 3px 2px ;background: antiquewhite;border-radius: 9px; color:#4b4c4c;}
.right4search{width:300px;height:940px; margin-top: 30px; padding:0 20px; box-shadow: 4px 3px 2px ;background: antiquewhite;border-radius: 9px; color:#4b4c4c;}
.siderTitle{font-size: 20px; color: navy; padding-top: 15px; }

.setting{
	  display: grid;
	  grid-template-columns: 100px 150px 200px;
	  text-align: center;


	}
	.column {
	  padding: 16px;
	  height: 250px;
	  margin: 5px;}
/*search*/

.searchTitle{background: #e7e9f0; font-size: 1px; text-align: center; border-radius: 12px; color:#173161; padding: 5px 20px; position: absolute; top: -22px; left: 20px;}
#searchByKeyword{border: 2px solid #173161; position: relative; margin-top: 30px;  padding: 30px 25px;}
#searchByKeyword input[type='text']{width: 300px;}
#searchByKeyword input[type='submit']{margin-left: 5px;}
#searchByKeyword p{margin-top: 15px; color:#525c68; line-height: 23px; }
#explain p{background: #ece8e8; padding: 5px; }



/*contact* *download */
.box1{margin-top: 30px;padding: 30px 20px; background: white; color: #79939b; font-size: 14px;box-shadow: 4px 3px 2px #888888;}
.box1 td:first-of-type, .box2 td:first-of-type{
        /* [disabled]text-align: left; */
        padding-right: 10px;
}
.box1 td{padding: 3px 5px 3px 0px; color:#525c68;}
.box2{position: relative;padding: 10px 25px 20px 25px; }
.box2 td{padding: 3px 5px 3px 0px;}
.box2,.box3 p,li{color:#525c68;}
.box2 a,span{color:#e1524b;}
.box2 li{list-style-position: inside;}
/* #API tr:first-of-type{background: #eadcdc;} */
#API td{padding: 2px 10px; color:#525c68; border: 1px solid #bcbcbc; }
#API table{ margin: 10px 0;}

/*submit*/
.box3{position: relative; padding: 10px 25px 20px 25px; }
.box3 td{padding: 3px 30px 3px 0px;}
.box3 span{color: #e1524b;}
.box3 input[type='text']{width: 300px;}
.box3 textarea{width:420px; height: 70px; }

/*blast*/
.blast,#blast2,#blast3{border: 2px solid #173161; position: relative; margin-top: 30px;  padding: 30px 25px;}
#example1,#example2,#example3{cursor: pointer; font-family: aril;}
#blast3{display: none;}
.box11{float: left; width: 550px;}
.box4,.box5,.box6,.box7{float: left}
.box7{ padding-left: 30px;}
.box6{width: 150px;  border-right: 1px dashed #b4b4b4;}
.box5{margin-top: 10px;}
.box8{width: 300px; float: right;}
.box8 input[type='text'],.box7 input[type='text']{width: 50px;}
#FTdescription{width: 300px; padding: 5px; display: none; font-style: italic; background: #dcebf8; margin-top: 25px;}
/*browser*/
.box9{width: 650px; margin-top:5px; float: left;  padding-left: 10px; font-size: 14px;}

/*search-browser-result*/
#location_Detail1 td,#location_Detail2 td{padding-left: 5px; color:#525c68; border : 1px solid #bcbcbc; }
#table1{margin-top: 10px;}
#table1 td{padding-left: 5px; color:#525c68; border-collapse:collapse;}

/*visualize*/
.box10{width:63%; float:left; position:relative;border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; border-left: 2px solid #999; border-top: 2px solid #999; height: 380px; }
#cytoscape{width:85%; height: 85%; margin-left:2.5%; margin-top:1.5%; }
#layoutSelect{width:32%; float: right;}
#layoutSelect input{display: block; margin-top: 5px; padding: 3px 7px; }
#win{position: absolute; top: 40%; left:30%; font-size: 13px; background: white; border: 1px solid #b4b4b4; display: none; min-width: 420px; padding-bottom: 20px;}
#win h3{background:#173161;}
#win span{margin-left: 85%; cursor:default; background: white;  padding: 2px 5px; border-radius: 6px; line-height: 27px;}
#win table{width: 90%; margin:0 auto; line-height: 30px;}
#detailTable td{border: 2px groove white; padding: 0 0 0 10px;  border-collapse:collapse;  border: 1px solid #bcbcbc;}
#detailTable img{margin:auto auto;}
#showEdge{position: absolute; background: white; font-size: 13px; top: 30%; left: 20%; padding: 10px; border: 1px solid #b4b4b4; display: none; line-height: 20px;}





#specise,#location{display: block; position: absolute; }
.pic{ float: left; position: relative; width:300px; height:300px; }

/*footer*/
#footer{height: 90px; background:#0a2346; margin-top: 30px;     }
.copy{ width: 2000px; height: 28px; margin:0 auto; color: white; padding-top: 40px; align-items: center;}
#textSeq{width: 500px;; height: 90px;}