/* 
Pastels: fbb4ae b3cde3 ccebc5 decbe4 fed9a6 ffffcc e5d8bd fddaec f2f2f2
 */

:root {
  --title-bg:steelblue;
  --table-header-bg: #083370;    /* #006699; */
  --div-bg011:#fbb4ae;    /* lite green */
  --div-bg012:#b3cde3;   /* golden yellow */
  --div-bg013:#ccebc5;
  --div-bg014:#decbe4;
  --div-bg015:#fed9a6;
  --div-bg016:#ffffcc;
  --div-bg017:#e5d8bd;
  --div-bg018:#fddaec;
  --div-bg019:#f2f2f2;
  --div-bg01:#8dd3c7;
  --div-bg02:#ffffb3;
  --div-bg03:#bebada;
  --div-bg04:#fb8072;
  --div-bg05:#80b1d3;
  --div-bg06:#fdb462;
  --div-bg07:#b3de69;
  --div-bg08:#fccde5;
  --div-bg09:#d9d9d9;    /* grey */
  --div-bg10:#bc80bd;
  --div-bg11:#ccebc5;
  --div-bg12:#ffed6f;
  --table-row-even1: #fbb4ae;
  --table-row-even2: #e5d8bd;
  --table-row-even3: #ccebc5;
  --table-row-odd1: #decbe4;
  --table-row-odd2: #fed9a6;
  --table-row-odd3: #ffffcc;
  
 
}

* {
  margin:0;
  padding:0;
  border:0;
  list-style: none;
  box-sizing: border-box;
   font-family: Sans-Serif;
  
}
a { text-decoration: none; }
p {
   text-indent: 45px;
}
.center {
    text-align:center;
}
.small {
    font-size: small;
}
.xsmall {
    font-size: x-small;
}
#wrapper {
  border: 1px solid #000;
  width: 1350px;
  margin: auto;
}
.page-content {
  padding:15px 5px;
  margin: 5px;
  /* background: white; */
  min-height: 500px;
  
}
.intro-content{
   padding: 30px 80px;
   word-spacing: 4px;
   line-height: 140%;
   font-size: 18px;
}

input[type="radio"] {
  -ms-transform: scale(1.2); /* IE 9 */
  -webkit-transform: scale(1.2); /* Chrome, Safari, Opera */
  transform: scale(1.2);
}

.title{
   padding: 14px 0 10px 0px;  
   
   background: var(--title-bg);
   font-size: 20px;
   text-align: center;
   color: white;
   border:1px solid black;
}

/* 
.title{
   background:tan;
   width:100%;
   text-align: center;
}
 */
/* header images masthead */
#masthead {
  width:1350px;
  background: #013366;
  
}
#masthead img {
  height:50px;
  padding:0;
  margin:0;
  
} 
/* Clear floats after image containers */
#masthead::after {
  content: "";
  clear: both;
  display: table;

}
hr{
   display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

 /* Three image containers (use 25% for four, and 50% for two, etc) */
.columnXX {
  float: left;
  width: 50%;
  padding: 0px;
}
#header-image-col1 {
  float: left;
  width: 75%;
  padding: 0;
  /* overflow:auto; */
}

#header-image-col2 {
  float:right;
  margin:5px 10px;
  height: 20px;
}

#header-image-col2 a img{
    width: auto;
    height: 100%; 
}
.float-right{
   float: right;
}
.float-left{
   float: left;
}
.right-justify{
   text-align: right;
}
.left-justify{
   text-align: left;
}
/*    End of header images CSS */
 .back_btn{
   position:absolute;
   font-size:13px;
   padding:3px 5px;
 }
 .back_btn a{
   color:orange;
 }  
 #download_browser_text_excel {
  float:right;
  top:2px;
  font-size:12px;
}  
#footer {
   border:1px solid black;
   padding:10px 30px;
   margin:5px;
} 


/* Pill BUTTONS */
.button{
  padding:2px 5px;
  border:1px solid black;
  background:grey;
  font-size:10px;
  color:white;
}
.pill {
  padding: 0px 4px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 0px 0px;
  cursor: pointer;
  font-size:11px;
  border-radius: 16px;
}
.pill-md{
   font-size:13px;
   padding: 1px 5px;
}
.pill-lg{
   font-size:14px;
   padding: 2px 6px;
   min-width:100px;
}
.pill-brown {
  background-color: brown;
  border: 1px solid black;
  color: white;
}
.pill-indigo {
  background-color: indigo;
  border: 1px solid black;
  color: white;
}
.pill-khaki {
  background-color: khaki;
  border:  1px solid black;;
  color: black;
}
.pill-lightseagreen {
  background-color: lightseagreen;
  border:  1px solid black;;
  color: black;
}
.pill-mediumorchid {
  background-color: MediumOrchid;
  border:  1px solid black;;
  color: white;
}
.pill-midnightblue {
  background-color: midnightblue;
  border:  1px solid black;;
  color: white;
}
.pill-slateblue {
  background-color: SlateBlue;
  border:  1px solid black;;
  color: white;
}
.pill-orange {
  background-color: orange;
  border: 1px solid black;
  color: black;
}
.pill-green {
  background-color: green;
  border: 1px solid black;
  color: white;
}

/* For genome table AND Taxon Table alphabet srch */
#row1 {
  display: flex;                  /* establish flex container */
  flex-direction: row;            /* default value; can be omitted */
  flex-wrap: nowrap;              /* default value; can be omitted */
  justify-content: space-between; /* switched from default (flex-start, see below) */
  padding:20px 0;
  width:100%;
  
}
#column_left1{
   padding:10px;
   width:auto;
}
#column_middle1{
   padding:0 5px;
   width:32%;
}
#column_right1 {
  padding:10px 30px;
}
/*row2 and col2 is just  For Taxon Table inner srch */
#row2 {
  display: flex;                  /* establish flex container */
  flex-direction: row;            /* default value; can be omitted */
  flex-wrap: nowrap;              /* default value; can be omitted */
  justify-content: space-between; /* switched from default (flex-start, see below) */
  
}
#column_left2 {
  margin:10px 0 0 0;
}
/* Clear floats after the columns */
#column_right2 {
  /* float: right; */
}


.red-text{
  color:red;
}
.orange-text{
  color:orange;
}
.red{
  background:red;
}
.yellow{
   color:yellow;
}
.blue-text{
  color:blue;
}
.blue{
  background:lightblue;
  width:100%;
}
.blue a{
  
  width:100%;
}
.green-text{
  color:green;
}
.gray{
  background:lightgray;
}
.dropdown{
  border:1px solid brown;
  padding:1px;
  border-radius: 3px;
}

/* Loader for tables:taxon, genome, phage */
#loader {
  border: 12px solid #f3f3f3;
  border-radius: 50%;
  border-top: 12px solid #444444;
  width: 70px;
  height: 70px;
  margin-top:180px;
  animation: spin 1s linear infinite;
}
  
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
  
.center-loader {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
/* End Loader */

.filter-title{
  font-weight:bold;
}
.alpha-list {
  letter-spacing: 2px;
}
.alpha-select{
   
}


#alert_flash_message_success{
    background:green;
    color:white;
    border:1px solid black;
    padding:5px;
    position:relative;
}
#alert_flash_message_fail{
    background: #E10000;   /* orange; */
    color: lightgrey;
    border:1px solid black;
    padding:5px;
    position:relative;
    height:50px;
    overflow: auto;
}
.greyed{
   background:lightgrey;
   color:darkgrey;
}
.error{
   font-size: 15px;
   width:50%;
   height: 100px;
   border:3px solid orange;
   background:lightgrey;
   color: black;
   padding: 30px;
   position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    
    margin: auto;
   
}
.link{
   color:blue;
   cursor:pointer;
}
.small-link{
   font-size:12px;
}