*{font-family: "Pliant", sans-serif;}

html, body{
	margin: 0 auto;
	padding: 0 ;
	display: grid;
	place-items: center;
	width: 100%;            /* 100% rather than vw here to avoid horizontal scrollbar */
}

header{
	margin-top: 30px;
	height:70px;
	text-align:center;
	line-height:70px;
	font-size:30px;
	font-family: "Gabarito", sans-serif;
	color:white;
	background-color: #8B0000 ; /* #AE535A */
	width: 50%;
	border-radius: 25px 25px 0px 0px;
}

/* drop-down menu */

nav{
	width: 50%;
	height:50px;
	margin-bottom:30px;
	padding: 0;
	background-color: #E3735E;         /* #f1f1f1 */
	top: 0px;
	position:sticky;
	border-radius: 0px 0px 25px 25px;
}

nav ul{
	margin: 0 auto;
	padding: 0;
	display: flex;
  flex-direction: row;
  justify-content: center;  /* justify moves items on the main axis and align on the second axis */
}

nav li{
	list-style: none;
	display: inline-block;   /* inline-block does not add a line-break after the element, so the element can sit next to other elements */
	width:  33.3%;
	text-align:center;
	margin: 0 auto;
	padding: 0;

}

nav a{
	text-decoration: none; /* enleve le soulignement des liens*/
	color: black;
	height:100%;
	display: block;
	text-align: center;
	vertical-align: middle;
	line-height: 50px;       /* The same as div height */

}

nav a:hover {                    /* hover changes the presentation when the mouse is selecting element*/
  color: white;
}

.dropdown-menu {
  display: none;
  position: absolute;
  flex-direction: column;
  list-style: none;
  background-color: #E3735E;
  width: 16.7%;                     /* 100% divived in 6 panels */
  border-radius: 0px 0px 25px 25px;
}

.dropdown-menu li {
  width: 100%;
}

.dropdown-menu li a {
  display: block;
  text-decoration: none;
}

.dropdown-menu li a:hover {
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-menu {
  display: block;
}

/* End drop-down menu */

/* page content */

#content{                          /* content is designed with id rather than class bc it appears only one and take the entire page*/
	padding: 30px;   
	overflow-wrap:anywhere;        /* overflow-wrap: break-word is not compatible with box-sizing: border-box */
	box-sizing: border-box;          /* the width is calculated from box border and not box content */
	width:50%;
	text-align: left;
	border:solid;
	border-color: #E3735E ; /* sky blue #85c1e9 */
	border-radius: 25px;
}

/* titles */

h1{
}

h2{
	padding-top: 10px;
}

/* tables */

.datagrid {
	font: 13px; 
	background: #fff; 
	overflow: visible;              /* overflow: scroll puts an ugly bar in chrome */
	border: 2px solid #FFE4C4; /* #FFD59A a darker yellow */
	border-radius: 3px;
}

.datagrid table{
	border-collapse: collapse;       /* adjacent cells share the same border */
	text-align: left;
	table-layout:fixed;
	width: 100%;
}
	
.datagrid table td, 

.datagrid table th { 
	padding: 6px 3px; }

.datagrid table thead th {                      /* columns titles */
	background-color: #FFE4C4; 
	color:black; 
	font-weight: bold; 
	border-left: 1px #FFE4C4;
	padding-left: 10px;
	padding-block: 7px;} 
	
.datagrid table thead th:first-child { 
	border: none; }
	
.datagrid table tbody td {                     /* columns contents */
	color: black; 
	border-left: 1px solid #FFE4C4;
	font-weight: normal;
	padding-left: 10px; 
	padding-block: 7px;}
	
.datagrid table tbody .alt td { 
	background: #DFFFDE; 
	color: #FFE4C4; }
	
.datagrid table tbody td:first-child { 
	border-left: none; }
	
.datagrid table tbody tr:last-child td { border-bottom: none; }

/* End tables */

/* Forms */

.form_container {
  display: grid;
  place-items: left;
  margin-top: 0px;
  margin-bottom: 25px;

}

input[type=text] {
  width: 30%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  font-size: 16px;
}

select {                      
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  margin: 8px 0;
  background-color: #f1f1f1;
  font-size: 15px;
}

input[type=button], input[type=submit] {
  background-color:	#664A3D ;  /* ligth brown"  */
  border: none;
  color: white ;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

/* End forms */

/* boxplots */

.bar-chart1{
	width: 100%;
}

.bar-chart2{
	width: 100%;
}

/* End boxplots */

/* iframe */

#iframe_genome{
	width: 100%;
	height: 500px;
	margin: 0;
	padding: 0;
	border: none; 
}

.image_beetle_heatmap{
	width: 100%;
	display:block;
}


/* BLAST results */

#blast_res{
	table-layout:fixed;
	width: 100%;
}

#blast_res_gen{
	table-layout:auto;
	width: 100%;
	border-collapse: separate; /* Border separate is necessary for border-spacing to work */
  border-spacing: 10px; 
}

/* end BLAST */

/* seqs mRNA, CDS and prot */

#all_seqs {
	display:flex;
	flex-wrap:wrap;       /* make inner elements go to next line when line is full */    
}

.seq_line {
	display:flex;
	flex: 1 1 100%;
}

.seq_tabs {             /* point for class, hashtag for id */
	flex-grow: 1;
	flex-shrink: 1;
	min-width: 75px;
	box-sizing: border-box;    
	outline:none;
	cursor:pointer;
	height: 50px;
	margin-top:5px;
	padding-left: 10px;
	margin-right: 5px;
	line-height: 50px;
	background-color: rgb(254, 216, 177, 0.3);
}

.seq_tab{
	padding-left:10px;
	padding-top:10px;
	padding-bottom:10px;
	padding-right:10px;
	border-color: rgb(254, 216, 177, 0.3);
}

.download_button {
	box-sizing: border-box;  
	height: 50px;
	width: 75px;
	background-color: rgb(254, 216, 177, 0.3);
	margin-top:5px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* end seqs */

/* Hidden fields GO */

.go-parent {
}

.go-hidden{
	display: none;
}

.go-parent:hover 
.go-hidden {
	display: inline-block;
	z-index: 2;
	position: absolute;
	width: 40%;
	padding: 10px;
}

.go-hidden2 {
	background-color: rgb(254, 216, 177)
}

.go-hidden3 {
	background-color: rgb(252, 211, 197)
}

/* Hidden fields Keggs */

.kegg-hidden {
	display: none;
}

.kegg-parent:hover 
.kegg-hidden {
	display: inline-block;
	z-index: 2;
	position: absolute;
	width: 40%;
	padding: 10px;
	background-color: rgb(254, 216, 177)
}

/* End hidden fields GO */

/* Convert ID page */
#idconv_page {
	display:flex;
}

.convchoices {
  display: flex;
  gap: 16px;
}

.convchoice {
	display:flex;
	width: 160px;
}

.convchoice select {
	height: 30px;
	padding: 0;
	text-align: center;          /* center horizontally */
	text-align-last: center;     /* needed for some browsers to center selected option */
}

.idfield textarea {
	padding: 10px;
}

#idconv_explain {
	margin-top: 8px;
	margin-left: 25px;
	padding-top: 15px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	border-radius: 25px 25px 25px 25px;
	background-color: rgb(237, 168, 154, 0.3);
	align-self: flex-start;
}

#image_lightbulb {
	width: 30px;
	display:block;
}

.res_idcor {
	border-radius: 25px 25px 25px 25px;
	background-color: #F2F0EF;
	min-height: 100px;
	padding: 15px;
}

.res_idcor table td,
.res_idcor table th {
  padding: 0px 20px;  /* add space between the two columns, but not btw rows */
}

.res_idcor table tbody tr:first-child td {
  padding-top: 10px; /* add space btw the headers and the rest */
}
/* End convert ID page */

/* Convert orthologs page */
.orthochoice {
	display:flex;
	width: 215px;
}

.orthochoice select { 
	height: 33px;
	padding: 0;
	text-align: center;          /* center horizontally */
	text-align-last: center;     /* needed for some browsers to center selected option */
}
/* End convert orthologs page */

/* adjust to all screen size */ 
/* needs to be after the style blocks it is overriding */ 

@media screen and (max-width: 1600px) {
  header, footer, #content {
    width: 60%; 
  }
}
/* My bacbook air behave like a 1416.5 px width screen */

@media screen and (max-width: 1200px) {
  header, nav, #content {
    width: 75%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}

@media screen and (max-width: 1000px) {
  header, nav, #content {
    width: 90%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}

@media screen and (max-width: 500px) {
	header{
		width: 95%;
		margin-top: 20px;
	}
	nav{
		width: 95%;
		margin-bottom: 20px;
	}
	
	#content {
		width: 95%;
  }

/* Headers */
	h1{
	font-size: 1.5em;                  /* the default is 2em */ 
	}

	h2{
	font-size: 1.2em;                  /* the default is 1.5em */ 
	}
}

/* Convert ID page */
@media (max-width: 500px) {          /* for mobiles */
  #idconv_page {
    flex-direction: column;          /* Responsive breakpoint — stack vertically on narrow screens */
  }

  #idconv_explain {
		margin-left: 0;              /* <-- remove margin when stacked */
		margin-top: 20px;
	}

.id-textarea {
  width: 93%;                        /* avoid that the text field is larger that screen */  
}

}