.card-body {
	padding:0.1rem;
}

input[type="text"], input[type="password"], input[type="email"] {
    height: 2em;
    border: solid 1px #667764;
}

button {
	background-color: #eee;
	border: 1px solid #ccc;
	color: #444;
	padding: 3px 10px;
	text-align: center;
	display: inline-block;
    text-decoration: none;
    text-shadow: 0 1px rgba(255, 255, 255, .75);
	border-radius: 3px;
	height: 2em;
    vertical-align: baseline;
    font-size: 11px;
    font-weight: bold;
   /* font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;*/
}
input, optgroup {
	margin: 2px;
	vertical-align: baseline;
}
input[type='checkbox'] {
	vertical-align: baseline;
	height: auto;
	margin: 2px;
}

[type=submit], [type=button] {
	border-radius: 0.3em;
}

select {
    height: 1.9em;
    background: #fff;
	font-size: 14px;
}

select[multiple] {
	height: 138px;
}

/* ----------
BUTTON NAVIGATION STRIPS
---------- */
.navbar {
	padding: 0;
}
/** unapproved menu change
.dropdown-item a:hover {
	display:inline-block !important;
	text-align:center;
}
**/

.navbar {
	 background: #7d8e7b;
  /* IE10 Consumer Preview */ 
  background-image: -ms-linear-gradient(top, #7d8e7b 0%, #5f705d 100%);
  /* Mozilla Firefox */ 
  background-image: -moz-linear-gradient(top, #7d8e7b 0%, #5f705d 100%);
  /* Opera */ 
  background-image: -o-linear-gradient(top, #7d8e7b 0%, #5f705d 100%);
  /* Webkit (Safari/Chrome 10) */ 
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #7d8e7b), color-stop(1, #5f705d));
  /* Webkit (Chrome 11+) */ 
  background-image: -webkit-linear-gradient(top, #7d8e7b 0%, #5f705d 100%);
  /* W3C Markup, IE10 Release Preview */ 
  background-image: linear-gradient(to bottom, #7d8e7b 0%, #5f705d 100%);
}
.dropdown-item a {
    color: white;
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}
@media (max-width: 990px) {
	.dropdown-item {
	padding: 0px; margin:0px
	}
	.dropdown-item a {
	padding: 0.25rem 1.5rem
	}
}

@media (min-width: 991px) {
.navbar, .butnNav li, .nav-item ul li  {
  /* Fallback background */
  background: #7d8e7b;
  /* IE10 Consumer Preview */ 
  background-image: -ms-linear-gradient(top, #7d8e7b 0%, #5f705d 100%);
  /* Mozilla Firefox */ 
  background-image: -moz-linear-gradient(top, #7d8e7b 0%, #5f705d 100%);
  /* Opera */ 
  background-image: -o-linear-gradient(top, #7d8e7b 0%, #5f705d 100%);
  /* Webkit (Safari/Chrome 10) */ 
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #7d8e7b), color-stop(1, #5f705d));
  /* Webkit (Chrome 11+) */ 
  background-image: -webkit-linear-gradient(top, #7d8e7b 0%, #5f705d 100%);
  /* W3C Markup, IE10 Release Preview */ 
  background-image: linear-gradient(to bottom, #7d8e7b 0%, #5f705d 100%);
}


.navbar .navbar-nav .nav-item ul .dropdown-item a:hover {
 /* background-color: #7d8e7b;
  color: #f0e68c !important;*/
 /* background-color: #7c7f76 !important;
    color: white !important;*/
    background-image: radial-gradient( #fff4f4 0%, #568050 200%);
    /* background-color: white; */
    align-content: center;
    /* margin: 0 auto; */
    /* display: inline-block; */
    transition: all;
    color: black !important;
    transition: all;
   
  text-decoration: none;
}
}
.navbar .navbar-nav {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.navbar .navbar-nav .nav-item {
  display: inline-block;
  /* Mildly hacky way to have dropdowns work on hover on desktop
  ===============================================================*/ }
      
.navbar .navbar-nav .nav-item .nav-link {
  height: 40px;
  color: #fff;
  white-space: nowrap;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}
.navbar .navbar-nav .nav-item:hover .nav-link {
  color: #f0e68c !important;
  background-color: #7d8e7b;
}

.navbar .navbar-nav .nav-item:hover .nav-link {
    color: black !important;
     background-color:transparent;
     text-decoration:underline;
     
}
@media (min-width: 991px) {
.navbar .navbar-nav .nav-item ul {
  position: absolute;
  list-style: none;
  top: -9999px;
  -ms-flex-item-align: start;
  align-self: start;
  padding: 0;
  margin: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}

.navbar .navbar-nav .nav-item ul .dropdown-item {
  padding: 0;
  margin: 0;
}
.navbar .navbar-nav .nav-item ul .dropdown-item a {
  margin: 0;
  padding: 0.5rem 1rem;
  display: inline-block;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}
.navbar .navbar-nav .nav-item ul .dropdown-item  {transition:all}
.navbar .navbar-nav .nav-item ul .dropdown-item a:hover {
 /* background-color: #7d8e7b;
  color: #f0e68c !important;*/
 /* background-color: #7c7f76 !important;
    color: white !important;*/
    background-image: radial-gradient( #fff4f4 0%, #568050 200%);
    /* background-color: white; */
    align-content: center;
    /* margin: 0 auto; */
    /* display: inline-block; */
    transition: all;
    color: black !important;
    transition: all;
   
  text-decoration: none;
}
.navbar .navbar-nav .nav-item:hover .nav-link {
    color: #f0e68c !important;
     background-color:transparent;
     text-decoration:none;
     
}
.navbar .navbar-nav .nav-item:hover ul, .navbar .navbar-nav .nav-item.show ul {
  top: auto;
  left: auto;
  z-index: 9999;
}
/*
.navbar .navbar-nav .nav-item:last-child ul {
  -ms-flex-item-align: end;
  align-self: flex-end;
}*/ 
}

.butnNav li font.strain {
  font-size: 10px;
}

.dropdown-menu {
  margin-top: -1px !important;
}
.dropdown-toggle::after {
  margin-left: 0px;
}
.dropdown-menu li font.strain {
    font-size: 10px;
}

/* ALIGN DROPDOWN MENU HERE */
.butnNav li ul li {
	position: relative;
	top:10px;
	left:-12px;
	border:0;
}

.butnNav li:last-child {
	border-right:1px solid #6c6f65;
}
.butnNav ul li:last-child {
	border-right:0!important;
}    

#header {width: 100% !important}



.search_div {
height: 2.5em;
    top: -0.5em;
    position: relative;
    margin-bottom: 1em
}
#searchValue {height: 35px; top: 1em;}
#moduleSearch {height: 35px;
    margin-bottom: 0px;
    top: 3px;
    
    border: solid 1px black;}
@media (max-width: 767px) {
	#moduleSearch { top: 5px}
	#searchSubmit { top: 5px !important}
}   

#searchValue {
	margin: 0px 10px 0px;
    height: 35px;
    top: 11px;
}
@media (max-width:500px) {
	.search_div {margin-bottom:0px}
}
 
#searchSubmit {
    top: 3px;
    position: relative;
    HEIGHT: 35PX;
}
#search {
	float: right;
	padding-bottom: 0px;
    margin-bottom: 0px;
    right: 3px;
    margin-top:-3em;
    width: 100%
}

@media (max-width: 700px) {
	#logo {top:-1.8em; position:relative}
	
}

#logo {z-index: 100}
@media (max-width: 500px) {
	
	#searchvalue {width: 200px !important}
	#moduleSearch {width: 125px !important;    left: 5px;}
	.logo {
    vertical-align: baseline;
    width: 73%;
   
    position: relative;
}
}
@media (min-width: 700px) {
	#search {max-width:80%}
}
@media (max-width: 400px) {
	#searchvalue {width: 167px !important}
	
}
#contact {width: 100%; }

#contact {top: -7px;
    position: relative;}
  @media (min-width: 300px) and (max-width:600px) {
  #contact { width: 75%}
  }  
 

@media (max-width:800px) {
	#nich  {margin-top: 0.5em;
    margin-bottom: 0.5em;}
}
@media (max-width: 400px) {
	#nich {max-width: 90%;
    height: auto;
    margin-top: 1em;
    margin-bottom: 1em;}
}
.socialwrap { width: 8em; float:left}
.social {clear: none;
    float: left !important;}
 .versionno { margin-top: 0.25em}
.fundstatement {
    top: 0.5em;
    position: relative;
}
#search_mini_suggest {
	top: 0.55em;
	padding: 0.1em 0em 0.1em 0em;
    max-height: 400px;
	overflow-y: auto;
}
#search_suggest {
	max-height: 300px;
	overflow-y: auto;
}

/*.geneTabTable {background-color:#ccc}*/
/*.networkicon {background: #dad9d9 !important}*/
@media (max-width: 800px) {
	.dataTable {
	    width: 100% !important;
	    overflow-x: auto;
	}
}

.dataTable {
   
    overflow-x: auto;
   /* display: block;*/}
#geneData { border:none; ;padding-bottom:2em}

/*@media (hover: none) and (pointer: coarse) {*/
  
@media (max-width:800px) {
#geneData {width:110%}
.dataTable {  width: 100% !important; overflow-x:auto}
}
.dataTable, .geneTabTable, .objectName   {max-width:1400px}
@media only screen and (max-width: 959px) and (min-width: 768px) {
.genepagebody { width:96% !important}
}
#sideBar .biggerspacing {line-height: 1.2em}

.suggest_link {
 background-color:#FFF;
 padding:2px 6px 2px 6px;
 font-weight:normal;
}
.suggest_link_more {
 background-color:#CCC;
 padding:2px 6px 2px 6px;
 font-weight:bold;
}
.suggest_link_over {
 background-color:#aea;
 padding:2px 6px 2px 6px;
 font-weight:normal;
}
.suggest_panel {
	max-height: 200px;
	display: inline-block;
	overflow-y: auto;
}
body {line-height: 1em}


@media (max-width: 800px) {
#nich {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    /* margin-left: 5em; */
    max-width: 64%;
    height: auto !important;
    float: left;
    clear: both;
    display: inline-block;
}
}

a:hover:not(.nav-link), a:visited:hover:not(.nav-link) {
	color:#319478 !important;
	text-decoration: underline;
}

.butnNav a:hover {
color: #f0e68c !important;
text-decoration: none;
}

.dropdown-item a:hover, .dropdown-item a:visited:hover {
	color: black !important;
	
	}


#mainPage.hasSideBar { width:68%}

@media (max-width: 1200px) {	
.grid-container {
	grid-template-columns: repeat(2, 1fr) !important;
}
}

@media (max-width: 500px) {	
.grid-container {
	grid-template-columns: repeat(1, 1fr) !important;
}
}

.btn-primary {
    color: #fff;
    background-color: #667663;
    border-color: #697966;
    padding-bottom: 1.84em;
    /* margin-bottom: 2; */
    border-radius: 2em;
    top: 0.1em;
    background: #ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%);
    border: solid 1px black;
}
.btn-primary:hover {
    color: #fff;
    background-color:  #549e47;
    border-color: #212529;
}

btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #549e47;
    border-color: green;
}
@media only screen and (max-width: 767px) and (min-width: 480px) {
.genepagebody { width: 95% !important}
} 
@media only screen and (max-width: 767px) {
	#mainpage { width: 100% !important}
}

#mainPage a.literaturelink {
	color:#136411;
	text-decoration:underline;
}
/*
.literaturelink {
	color:#136411;
	text-decoration:underline;
}
*/

.iframewrap {z-index:0}


/*.navbar .navbar-nav .nav-item ul .dropdown-item a:hover {
    background-color: #232d22;
}*/
.homepagesearcinput { margin-top: -1px}
.navbar {margin-bottom: 1em}
#resourcepagetree {line-height: 1.3em}

/* Side bar */
a.sidelink:hover {
	color: #319478 !important;
	text-decoration: underline !important;
}
a.sidelink {
	color: #647562 !important;
	text-decoration: none !important;
	line-height: 1.2em;
}

/* --- Gene Page --- */
tr.classHeader {
	vertical-align: top;
}

/* --- Gene Edit Pages --- */
tr.datarow:hover {
	background-color: LightGreen;
}
input.shortBtn {
	height:16px;
	line-height: 0px;
	vertical-align: middle;
}
input.mediumBtn {
	height:26px;
	width: 55px;
	line-height: 0px;
	vertical-align: middle;
}
input.disabledBtn {
	color: white;
	pointer-events: none;
	height:26px;
	line-height: 0px;
	vertical-align: middle;
}

/* ------------
Phenotype Pages and New Gene Expression Search
--------------- */

.phenopage * {
	box-sizing: border-box;
}

/* AJAX Suggest */
.phenopage #keyword_suggest {	
	position: absolute;
	background-color: #FFFFFF;
	text-align: left;
	border: 0px solid #000000;
	z-index:100;
	
	max-height: 400px;
	overflow-x: hidden;
	overflow-y: auto;
}
.phenopage .suggest_link {
	background-color: #FFFFFF;
	padding: 0px;
	width: 100%;
}
.phenopage .suggest_link_over {
	padding: 0px;
	width: 100%;
}
.phenopage .hidetext {
	width: 2px;
	overflow: hidden;
	color: transparent;
}

/* Style the tabs */
.phenopage .tab {
	float: left;
	border: 1px solid #ccc;
	background-color: #7c8d7a;
	width: 20%;
	height: 620px;
	border-radius: 0px;
}
/* Style the buttons inside the tab */
.phenopage .tab button {
  display: block;
  background-color: inherit;
  color: white;
  padding: 8px;
  width: 100%;
  border: none;
  outline: none;
  text-align: right;
  cursor: pointer;
  transition: 0.3s;
  font-size: small;
  text-shadow: none;
  height: 35px;
}
.phenopage .tabheader {
  display: block;
  background-color: inherit;
  color: white;
  padding: 5px;
  width: 100%;
  border: none;
  outline: none;
  text-align: center;
  font-size: larger;
  font-weight: bold;
}
.phenopage .tabsubheader {
  display: block;
  background-color: inherit;
  color: #f0e68c;
  padding: 5px;
  width: 100%;
  border: none;
  outline: none;
  text-align: center;
  font-size: medium;
  font-weight: bold;
}

.phenosearch .tabsubheader {
  text-align: left;
}

/* Change background color of buttons on hover */
.phenopage .tab button:hover {
  background-color: #61725f;
}

/* Create an active/current "tab button" class */
.phenopage .tab button.active {
  background-color: #004d00;
  color: #f0e68c;
}

/* Style the tab content */
.phenopage .taboutercontent {
	float: left;
	padding: 0px 0px 0px 5px;
	width:80%;
  	height: 600px;
/*	overflow: auto;*/
}
.phenopage .tabcontent {
	float: left;
	width: 100%;
}
.phenopage .newsearch {
	float: right;
}

.phenopage div.newsearch a:link {
	color: white !important;
}

.phenopage div.newsearch a:hover {
	color: LightGreen !important;
}
.phenopage .buttonlabel {
	float: left;
}
.phenopage .buttonSearchlabel {
	color: #f0e68c;
	font-size: medium;
    float: left;
}
.phenopage .countlabel {
	float: right;
}

/* AJAX search results display */
.phenopage .column1 {
	float: left;
	width: 70%;
	padding: 0px 0px 0px 3px;
	margin: 0px;
}
.phenopage .column2 {
	float: left;
	width: 0%;
	padding: 0px 3px 0px 3px;
	margin: 0px;
}
.phenopage .column3 {
	float: right;
	width: 30%;
	padding: 0px;
	margin: 0px;
}
.phenopage .myrow {
	width: 750px;
	border-bottom: 1px lightgreen solid;
	padding: 1px 0px 1px 0px;
	margin: 0px;
}
/* Clear floats after the columns */
.phenopage .myrow:after {
	content: "";
	display: table;
	clear: both;
}

/* Pheno Search header and results */
.searchheader {
  float: left;
  border: 0px solid #ccc;
  background-color: #336600;
  width: 98%;
  padding: 1%;
}
.term1 {
  color: white;
  text-align: left;
  font-size: medium;
  font-weight: bold;
}
.term2 {
  color: lightgreen;
  text-align: left;
  font-size: medium;
  font-weight: bold;
}
.isGene {
	font-style: italic;
}
.searchheader a:link, .searchheader a:visited, .searchheader a:hover {
	color: #f0e68c !important;
}

.phenopage .searchresults td, th {
	padding: 3px;
}
.phenopage .searchresults th {
	background-color: #7c8d7a;
}
.phenopage .searchresults tr:hover {
	background-color: DarkSeaGreen;
}
.phenopage .searchresults td a {
	display: block;
}
.phenopage .searchresults a:hover {
	color: black !important;
}
.overview {
	margin: 0px;
	font: 14px/18px "Myriad Pro", helvetica, sans-serif;
	font-size: larger;
}
.overview label {
	font-weight: bold;
	font-size: large;
}
.overview a {
	text-decoration: underline !Important; 
}

/* Clear floats after the columns */
.myrow:after {
	content: "";
	display: table;
	clear: both;
}
.span-nowrap {
	white-space: nowrap;
}

table.tabresults {
    width: 100%;
    margin-top: 2px;
}
.tabresults th {
  background-color: #7c8d7a;
}
.hlrow:hover {
	background-color: DarkSeaGreen;
}
.tabresults a:hover {
	color: black !important;
}
.phenotype label, a.phenotype {
	font-weight: bold;
}
a.phenosource  {
	color: blue;
	font-weight: bold;
}
.sourcetable a {
	text-decoration: underline;
}
.canHide {
	display: none;
}
/* Tooltip container */
.tooltipimg {
  position: relative;
  display: inline-block;
}
.tooltipimg .tooltiptext {
  visibility: hidden;
  background-color: darkgreen;
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  margin-left: 4px;
}
.tooltipimg .tooltiptextbig {
  visibility: hidden;
  background-color: darkgreen;
  color: #fff;
  width: 400px;
  padding: 5px;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  margin-left: 4px;
}

.tooltipimg:hover .tooltiptext {
  visibility: visible;
}
.tooltipimg:hover .tooltiptextbig {
  visibility: visible;
}
/* End Pheno Search header and results */

.mainTh {
	background-color: #BFBFBF;
 	color: black;
}
.outerTh {
	background-color: #D5E2B6;
	font-weight: bold;
 	color: black;
}
.innerTh {
	background-color: #DEE8C9;
 	color: black;
}
.leftTd {
	vertical-align: top;
	text-align: right;
	width: 120px;
	padding-top: 6px;
}

/* Edit Phenotypes */
select.phenSelect {
    height: 29px;
}
ul.phenUl {
	columns: 2;
	-webkit-columns: 2;
	-moz-columns: 2;
	clear: both;
}
div.suggestInputPadding {
	float: left;
	padding-top: 4px;
}
div.suggestEapInputPadding {
	float: left;
	padding-top: 4px;
	padding-right: 2px;
}
div.linedBox {
	border-style: dotted;
	border-width: 1px;
	padding: 2px;
}
td.notes {
	padding: 3px;
}
#xpo_suggest, #gene_suggest, #xao_suggest, #disease_suggest,
#background_suggest, #reagent_suggest, #target_gene_suggest, #treatment_suggest, #chemical_reagent_suggest, #start_stage_suggest,
#end_stage_suggest, #tissue_suggest, #antibody_suggest,
#gse_suggest, #manipGene_suggest, #manipTissue_suggest, #assayAntibody_suggest, #assayTissue_suggest {	
	position: absolute;
	background-color: #FFFFFF;
	text-align: left;
	border: 0px solid #000000;
	z-index:100;
	
	max-height: 300px;
	overflow-y: auto;
}
.hidetext {
	display:none;
}
.newPhenItem {
	color: green;
}
.newPhenItem:after {
	content: "*";
	color: red;
	font-size: 12px;
    font-weight:bold;
    vertical-align: top;
 	padding-left: 3px;
	position:relative;
	top: -3px;
}
#imageContainer img {
	width: 500px;
	max-width: 100%;
	height: auto !important;
}
#outerImageContainer {
	height: auto !important;
}
.msgError {
	color: red;
}
.msgSuccess {
	color: blue;
}
.phenoTH {
	background-color: #7d8e7b;
	text-align: left;
	color: white;
}
table.hlrow2 tr:hover td {
	background-color: lightGrey;
}
table.showRow .canHide {
	display: table-row;
}
table.hideRow .canHide {
	display: none;
}
table.hlrow3 tr:hover td {
	background-color: MediumSeaGreen;
}
th.secondTh {
	background-color: grey;
}
.pointer {
	cursor: pointer;
}
.displayHide {
	display: none;
	color: white;
}
.displayShow {
	display: inline;
	color: white;
}
.newTargetGene {
	color: green;
}
.newTargetGene:after {
	content: "*";
	color: red;
	font-size: 12px;
    font-weight:bold;
    vertical-align: top;
 	padding-left: 3px;
	position:relative;
	top: -3px;
}
.searchStageSelect {
	width: 90px;
	height: 2em;
}
.phenotypeHeader {
	background-color: DarkGreen !important;
}
/* ------------
End of Phenotype Pages
--------------- */

.resultsHeader {
	font-size: medium;
	font-weight: bold;
	color: #136411;
}

.form-control:focus, .custom-select:focus, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active:focus {
	box-shadow: 0 0 0 0.2rem rgb(102 119 100 / 22%);
	border-color: #667c69;
	
}

.textconfigcksection { display:none}

@media (min-width: 1200px) {
.container.footercontainer {
     max-width: 1395px; 
}
}

/* ------------
Start New Gene Expression Search Pages
--------------- */
.showDiv {
	display: inline;
}
.hideDiv {
	display: none;
}
.sgeInput {
	background-color: PaleGoldenRod !important;
	color: black;
	padding: 3px;
	border-style: solid;
	border-width: 1px;
	border-radius: 5px;
}
.filterGroup {
  text-align: left;
  padding: 5px;
  border-radius: 6px;
  border-style: ridge;
}
.filterGroupTitle {
	font-size: 1.25vw;
}
/* AJAX Suggest */
.phenopage #anatomy_suggest {	
	position: absolute;
	background-color: #FFFFFF;
	text-align: left;
	border: 0px solid #000000;
	z-index:100;
	
	max-height: 400px;
	overflow-x: hidden;
	overflow-y: auto;
}
/* End AJAX Suggest */

.tooltipimg .tooltiptextmid {
  visibility: hidden;
  background-color: darkgreen;
  color: #fff;
  width: 250px;
  padding: 5px;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  margin-left: 4px;
}
.tooltipimg:hover .tooltiptextmid {
  visibility: visible;
}
/* ------------
End New Gene Expression Search Pages
--------------- */