/* Styling for entire site */


/* Reset padding and margin defaults defined by user agent stylesheet */
* {
    padding: 0;
    margin: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    /*height: 90vh;*/
    /*margin-top:70%;*/
    /*background-color: #f2f2f2;*/
    background-color: #FFFFFF;
    /*padding-top: 80px;*/  /* fixes overlap with fixed-top navbar */
    /*padding-bottom: 50px;*/
    /*padding-bottom: 58px;*/ /* fixes overlap with footer */
    margin:0;
    padding:0;
    height:100%;
    display: flex;
  flex-direction: column;
}

body > * {
  flex-shrink: 0;
}

html {
  /*height: 90vh;*/
  /*padding-bottom: 50px;*/
  /*overflow:hidden;*/
   margin:0;
   padding:0;
   height:100%;
   display: flex;
  flex-direction: column;
}

#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}

#home-bg{
    background-image: url('images/home-bg.jpg');
    height: 200px;
    width: 100%;
    margin-left:0%;    
    resize: horizontal;
    align-content: left;
}

/*#home-bg div{
    height: 80%;
    width:90%;
    padding-top: 30px;
    margin-left:65px;
    vertical-align: middle;
}*/

#home-bg div h2, #home-bg div h3, #home-bg div h5{
    font-family: "Helvetica Neue", Arial, sans-serif,
    align-content: center;
    vertical-align: middle;
    text-align: center;
}

.section-header {
    background-color: #c9bcdb;
    margin: 0;
    border-left: 2px solid rgb(54, 52, 52);
    width: 310px;
    padding: 10px;
}

/* for miRNA entries */
.row-title {
    font-weight: bold;
    /* border-bottom: 1px solid rgb(128, 124, 124); */
}

.row-title u {
    text-decoration: none;
    border-bottom: 5px solid rgb(76, 160, 181);
}

footer {
    background-color: #040562;
    color: white;
    text-align: center;*/
    position:absolute;
   bottom:0;
   width:100%;
   height:60px;
}

.footerWrap {
    width:100%;
    /*position:fixed;*/
}
.footer {
    background-color: #040562;
    color: white;
    text-align: center;*/
    position:absolute;
   bottom:0;
   width:100%;
   height:70px;

}

.navbar.navbar-expand-lg{
    /*padding: 10px;*/
    /*margin: auto;
    width: 100%;*/
    padding:2%;
    justify-content:space-between;
    /*display:flex;
}

.navbar.navbar-expand-lg.navbar-collapse{
    /*flex:5;*/
}

.navbar.navbar-expand-lg.navbar-search{
    /*flex:4*/    
}

.container-fluid.content{
    margin: auto;
    width: 100%;
    /*height:85vh;*/
    background-color: #FFFFFF
}

.content {
    padding: 20px 20px 20px 20px;
}

p {
    margin-bottom: 20px;
}

ul {
    margin: 0 0 30px 20px;  /* top, right, bottom, left */
}

/*.vote-button, .cluster-button {
    color: rgb(250, 250, 250);
    background-color: #040562;
    padding: 2px 5px 0 5px;
}*/

.searchbutton, .expander, .collapser {
  background-color: rgba(51, 51, 51, 0.05);
  border-radius: 8px;
  border-width: 0;
  color: #333333;
  cursor: pointer;
  display: inline-block;
  font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  list-style: none;
  margin: 0;
  padding: 10px 12px;
  text-align: center;
  transition: all 200ms;
  vertical-align: baseline;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.cluster-button {
    margin: 0 0 0 10px;
}

.mature-button {
    margin: 0 0 0 0px;
    padding: 0px 6px 0px 6px;
    transform: translate(10px,-5px);
    font-size:16px
}

.section-button {
    margin: 0 0 0 4px;
    padding: 2px 2px 0 2px;
    font-size:12px
}

table.dataTable tbody th, table.dataTable tbody td {
  padding-left:5px;
  border-collapse:collapse;
}

.gff-list, .link-list, .hairpin-list {
    list-style: none;
}

.gff-list li {
    width: 100px;
    display: inline-block;
}

.databaseLogo {
    max-height: 40px;
    max-width: 140px;
}

/*.goto::before {
    display: block;
    content: " ";
    margin-top: -200px;
    height: 200px;
    visibility: hidden;
    pointer-events: none;
}*/

#hairpinSequenceAndReads {
    overflow-x: auto;
    white-space: nowrap;
    padding: 0px 40px 20px 40px;
    background-color: #0406620c;
}

.hairpin {
    overflow-x: scroll;
    padding: 20px 40px 30px 40px;
    background-color: #0406620c;;
}

.help-button {
    background-color: #040562;
}

/* #modalButton {
    width: 100px;
    display: inline-block;
}

#modalBody {
    width: 750px;
    align-content: center;
} */


/* NAVBAR & FOOTER */

nav {
    background-color: #040562;
}

#mirbaseLogo {
    max-height: 150px;
    max-width: 150px;
}

#uomLogo {
    width: 150px;
    float: left;
}

#paginationNav{
    background-color: 	#FFFFFF;
}

#navbarNav {
    width: 100px;
}

.nav-link {
    color: white;
}

.nav-link:hover {
    color: #ffe168;
}

.nav-tabs {
    border-style: none;
}


.nav-tabs .nav-link.active {
    background-color: white;
    border-style: none;
    color: #040562;
    width: 110%
}

.nav-tabs .nav-link:hover {
    border-color: white;
    width: 110%
}



.searchbox {
    float: right;
    position: static;
    width: 150%;
    
}

.fa-bars, .fa-search {
    color: #ffe168;
}

#search-icon {
    color: black;
}

.col-md-12{
    /*border-radius: 25px;
    border: 1px solid #cccccc;*/
    text-align:center;
}

@-webkit-keyframes push-on-hover {
  50% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes push-on-hover {
  50% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.push-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.push-on-hover:hover, .push-on-hover:focus, .push-on-hover:active {
  -webkit-animation-name: push-on-hover;
  animation-name: push-on-hover;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/*.col-md-12:hover {
  background-color: yellow;
}*/

#sections-home{
/*    resize: horizontal;
    margin-top: 15px;
    padding-top: 25px;
    margin-left:5px;
    margin-right:0 !important;
    align-items: center;
    justify-content: center;
    resize: horizontal;
    width:49%;
    border-radius: 15px;
    border: 1px solid #cccccc;
    float:left;*/
    margin-left:-20px;
    display:flex;
    padding-top:50px;
}

/*#sections-home div{
    flex:1;
}*/

#search-sections-home{
    /*order:1;*/
    display:flex;
    flex-direction:column;
    flex:2;
}

#home-box-1 {
    display:flex;
}

#home-box-2 {
    display:flex;
}

#search-sections-home div{
    flex:1;
}

#browse-downloads-button-home{
    display:flex;
    flex-direction:column;
    flex:1;
}

@media (min-width: 481px) {
  .hidden-br {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .normal-nav {
    display: none !important;
  }
}

@media (min-width: 481px) {
  .hidden-nav {
    display: none !important;
  }
}

.fa-twitter {
    color: #eeeff0;
}

/* Used for hairpin sequence/structure on hairpin detail page
See https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar */

/* Forces scrollbar to always appear */
.frame{
    overflow:auto;
}

.frame::-webkit-scrollbar {
    -webkit-appearance: none;
}

.frame::-webkit-scrollbar:horizontal {
    height: 10px;
}

.frame::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid #afafc2;
    background-color: #040562;
}

.frame::-webkit-scrollbar-track {
    background-color: #afafc2;
    border-radius: 8px;
}

.table #navigation-tr td:last-of-type{
    /*display: flex;*/
    width: 80%;
    height: auto;
    padding: 20px;
    justify-content: centre;
}

.table #navigation-tr td:last-of-type nav {
    /*display: flex;*/
    width: 80%;
    justify-content: center;
}

.table #navigation-tr td {
    background: #ffffff !important;
}

.mb-full-results{
    display:flex;
    justify-content: center;


}

.mb-full-results#ResultSections{
    flex:1 !important;
    flex-grow: 1;
}

.mb-full-results#ResultsAll{
    flex:1 !important;
    width:100%;
}


#ResultSections {
                padding-top:70px;
                float:left;
                width:30%;
                margin-bottom:9.8% !important;
            }

#ResultsAll{
                padding-left:5px;
                float:left;
                width:100%;
            }

.changefontsize {
    font-size: 1.8vw; 
}


.alive_results_table {
     text-align:center;
     font-size: 1.4vw;
}

#cluster_form select, #cluster_form div {
    display: inline;
    vertical-align: top;
    line-height: 28px;
}

.outer-div {
  /*width: 100%;*/
  background-color: #f2f2f2
  min-height:100%;
  position:relative;
  padding-left: 5%;
  padding-right:5%;
  flex-grow: 1;
}

/*#ResultSections, #results-fam, #ResultsAll{
    background-color: #FFFFFF
}*/

/*#ResultSections {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}*/

/*#ResultSections:after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(80% - 10px);
  height: 100%;
  border-right: 1px solid red;
}*/

#sectionsTable, th, td {
  padding: 5px;
}

.mb-full-home{
   /*display:inline-block;*/
   /*overflow:auto;*/
   /*height:50vh;*/
   /*height:50vh;*/
   display:flex;
   flex-direction:column;
}

.mb-full-home div:not(#home-bg){
   /*display:inline-block;*/
   /*overflow:auto;*/
   /*height:83.5vh;*/
   /*height:82.5vh;*/
   /*flex:1;*/
}


.container-fluid.flex-div-filler{
   /*display:inline-block;*/
   /*overflow:auto;*/
   /*height:83.5vh;*/
   /*height:82.5vh;*/
   flex:1;
}

#inner-div {
  margin: 0 auto;
  width: 90%;
  padding: 3px;
  background-color: #8ebf42
}

.borderless td, .borderless th, .borderless thead {
    border: none;
}

.img_container,{
    text-align: center;
    horizontal-align: middle;
    padding-bottom: 50px;
}


.col_annotation{
     position:relative;
     width:100%;     
     padding-left:15px}

.col_annotation{
     -ms-flex-preferred-size:0;
     flex-basis:0;
     -ms-flex-positive:1;
     flex-grow:1;
     max-width:100%}

.form-wrapper{
    display: flex;
}

.parent {
  text-align: left;
}

.child {
  display: inline-block;  
}

#row-title-structure {
   left:10px;
   font-weight:bold;
}

.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9; 
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}

.by-sequence {
     height:70vh;
     overflow: auto;
}

.toggled-on .toggle-content {
    margin-top: 0px;
    padding-right: 20px;
    border-radius: 5px; 
}

.toggle-content {
}

.toggle-content p {
}

.toggled-on .fa-angle-down {
    display: none; 
}

.toggle-title {
    cursor: pointer;
    position: absolute;
    padding-top: 30px;
    translate: 0px -260%;
    color: blue;
    background-color: #040562;
    border-radius: 5px;
}

.toggle-title i {
    position: absolute;
    left: 35%;
    top: -10%;
    font-size: 2.5em; 
}

.toggled-off .toggle-content {
    display: none; 
}

.toggled-off .fa-angle-up {
    display: none; 
}


div.dataTables_length {
  margin-top: 1em;
}