.navbar_logo
{
  text-decoration: none;
  float: left;
  height: 18px;
  padding: 10px;
  font-size: 18px;
  line-height: 20px;
  color: #777;
}
a.navbar_logo:hover
{
  color: #777;
}
.map_box
{
  height: auto;
  aspect-ratio: 1/1;
  z-index:0;
}
.square
{  
  aspect-ratio: 1/1;
}
.info_parent{
 background-color: #f5f3f8;
  position: relative;
  width:100%;
  min-height:305px;
}
.object_cards_container
{
  text-align: center;
}
.section
{
  border: 1px solid blue;
  border-radius: 5px;
  padding: 5px;
  margin-top: 10px;
  background-color:#f5f3f8;
  box-sizing:border-box;
}
table.card_table {
  font-size: 0.7em;
  border-collapse: collapse;
  width: 95%;
  border-bottom: 1px solid black;
}

table.card_table tr {
  border-bottom: 1px solid black;
}

table.card_table th,
table.card_table td {
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.card-ratio
{
  text-align: center; 
  vertical-align: middle;
  font-size: 20px;

}
.tabs-container {
  display: flex;
  flex-wrap: wrap; /* Allow tabs to wrap */
  gap: 5px; /* Add space between tabs */
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 2px solid #ddd;
}

.tabs-container li {
  margin: 0;
}

.tabs-container a {
  text-decoration: none;
  display: block;
  padding: 10px 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #f9f9f9;
  color: #333;
  transition: background-color 0.3s ease;
}

.tabs-container a:hover {
  background-color: #e9e9e9;
}

.tabs-container a.active {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

.tab-content {
  margin-top: 20px;
  display: none; /* Hide all tab contents by default */
}

.tab-content.active {
  display: block; /* Show active tab content */
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #f9f9f9;
}
.navbar-link
{
  text-decoration: none;
  color: white;  
  text-decoration: none;
}
.object_card
{
  display:inline-block;
  background: #ECEAF0;
  border-radius: 2px;
  border-color: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  vertical-align: top;/*Fix for different     height elements*/
  margin: 10px;
  text-align: left;
  width:300px;
  height:300px;
  position: relative;
}
.padding
{
  padding: 5px;
  text-align:justify;
}
.object_card_hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.object_card:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.object_card_header{
  background: rgb(142, 134, 255);
  border: 1px solid #005;
  border-radius: 3px 3px 0 0;
}
.object_card_name{
  margin-top:3px;
  margin-bottom:0px;
  padding: 3px;
  font-size:15px;
}
.object_card_image{
  background: #003;
  padding:5px;
  width:130px;
  height:130px;
}
.object_card_cell
{
  padding-bottom: 2px;
  padding-top: 2px;
  border-bottom: 1px solid rgb(161, 161, 161);
}
.object_card_footer
{
  position: absolute;
    bottom: 0.2em;
}
.info_text{
  position: absolute;
  height: 100%;
  width: 100%;
  top:0;
  left:0;
  display: block;
  background-color: #f5f3f8;
  z-index: 999;
  border: 1px;
  border-color: #000;
  display: none;
}
.navbar_text
{
  float: left;
  font-size: 15px;
  line-height: 20px;
}
.navbar_value
{
  float: left;
  font-size: 10px;
  line-height: 20px;
}
.circle {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  display: inline-block;
}
/* Base table style */
.gene-table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
  font-family: sans-serif;
}

.gene-table th, .gene-table td {
  border: 1px solid #ccc;
  padding: 6px 10px;
}

/* Expression level classes */
.expr-0 {
  background-color: #1a237e;  /* deep blue */
  color: #ffffff;
}
.expr-1 {
  background-color: #283593;
  color: #ffffff;
}
.expr-2 {
  background-color: #3949ab;
  color: #ffffff;
}
.expr-3 {
  background-color: #5c6bc0;
  color: #ffffff;
}
.expr-4 {
  background-color: #7986cb;
  color: #000000;
}
.expr-5 {
  background-color: #9fa8da;
  color: #000000;
}
.expr-6 {
  background-color: #ffeb3b;  /* yellow */
  color: #000000;
}
.expr-7 {
  background-color: #ffb300;  /* amber */
  color: #000000;
}
.expr-8 {
  background-color: #f4511e;  /* orange-red */
  color: #ffffff;
}
.expr-9 {
  background-color: #b71c1c;  /* deep red */
  color: #ffffff;
}
.bluw-0 { background-color: #e3f2fd; color: #000; } /* very light blue */
.bluw-1 { background-color: #bbdefb; color: #000; }
.bluw-2 { background-color: #90caf9; color: #000; }
.bluw-3 { background-color: #64b5f6; color: #000; }
.bluw-4 { background-color: #42a5f5; color: #fff; }
.bluw-5 { background-color: #2196f3; color: #fff; }
.bluw-6 { background-color: #1e88e5; color: #fff; }
.bluw-7 { background-color: #1976d2; color: #fff; }
.bluw-8 { background-color: #1565c0; color: #fff; }
.bluw-9 { background-color: #0d47a1; color: #fff; } /* very dark blue */
.red-0 { background-color: #ffebee; color: #000; } /* very light red */
.red-1 { background-color: #ffcdd2; color: #000; }
.red-2 { background-color: #ef9a9a; color: #000; }
.red-3 { background-color: #e57373; color: #000; }
.red-4 { background-color: #ef5350; color: #fff; }
.red-5 { background-color: #f44336; color: #fff; }
.red-6 { background-color: #e53935; color: #fff; }
.red-7 { background-color: #d32f2f; color: #fff; }
.red-8 { background-color: #c62828; color: #fff; }
.red-9 { background-color: #b71c1c; color: #fff; } /* very dark red */