/* this is a custom css stylesheet */

* {
    margin: 0;
}

html,
body {
    height: 100%;
}

body {
    /*	font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif; */
    line-height: 1.5;
    font-size: 16px;
}

a {
    color: #3680c1;
}

#content p,
#content li {
    font-size: 16px;
}

.post-image {
    max-width: 100%;
    height: auto;
    /* border: 1px solid #ccc; */
    padding: 20px;
}


/* Styles for placeholder navbar - before navbar kicks in */

navbar {
  /*  height: 71px; */
    background-color: #414141;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
}


/* Remove Border from Navbar in Deployment */

#mainnav {
    border: none;
}

#content h1 {
    margin-top: 15px;
    margin-bottom: 25px;
}

h2 {
    margin-top: 30px;
    margin-bottom: 15px;
}

h2.organism {
    font-size: 24px;
    font-weight: 400;
}

h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

h4 {
    margin-top: 20px;
    margin-bottom: 10px;
}

figure {
    padding: 15px;
}

figure img {
    border: 1px solid #333;
}

img.help {
    padding: 10px;
}

#intro .featured {
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

.featured img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.featured h4 {
    padding-top: 15px;
    padding-bottom: 10px;
    text-align: center;
}

.btn-head {
    text-align: center;
}

.bg-info,
.bg-success,
.bg-warning,
.bg-danger,
.info {
    padding: 15px;
}

ul {
    margin: 1em 0;
    padding-left: 1.5em; /* Ensures indentation for nested lists */
}

ul ul {
    margin-top: 0.5em; /* Space between bullets and subbullets */
    margin-bottom: 0.5em;
}

li {
    margin-bottom: 0.5em; /* Adds space between each bullet */
}

li ul li {
    margin-bottom: 0.3em; /* Adds smaller space between subbullets */
}


/* Overriding Bootstrap 5's Implementation(added by the Navbar Dependencies) with Bootstrap 3's Implementation (default facebase implementation)*/

.bg-warning {
    background-color: #fcf8e3 !important;
}

.info {
    background-color: #d9edf7;
}

.teaser {
    display: block;
    padding: 15px 20px;
    color: #fff;
    text-align: center;
    background-color: #008bcc;
    font-size: 1.2em;
    letter-spacing: 1px;
}

.teaser a {
    color: #fff;
    font-weight: bold;
    text-decoration: underline;
}

a.anchor {
    display: block;
    position: relative;
    top: 0;
    visibility: hidden;
}

h2.anchor {
    display: block;
    position: relative;
    top: 0;
}

#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-bottom: -70px;
}

.btn.btn-success {
    background: #1285bf none repeat scroll 0 0;
    border-color: #1285bf;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    text-transform: uppercase;
    margin-top: 1rem;
    margin-bottom: 1rem;
    list-style: none;
    background-color: #e9ecef;
    border-radius: 0.25rem;
}

#breadcrumbs a {
    padding: 0 5px;
}

#content {
    padding-bottom: 90px;
    /* width: 1300px;*/
}

.stat-container {
    display: flex;
    justify-content: space-between;
    padding-right: 20px;
    padding-bottom: 5px;
}

.stat-header {
    font-size: 16px;
}

.lead.announce {
    text-align: center;
    margin-top: 20px;
    padding-right: 40px;
    padding-left: 40px;
    font-size: 1.12em;
}

.masthead {
    margin-top: 10px;
}

.banner {
    padding: 10px;
    text-align: center;
}

.banner-left {
    padding: 10px;
    text-align: left;
}

.banner-right {
    padding: 10px;
    text-align: right;
}

.banner-right .nobullets {
    list-style-type: none;
}

.innercontent {
    padding: 20px 10%;
    font-size: 1.2em;
    line-height: 1.5;
}

.facebase-intro {
    margin-bottom: 20px;
}

.facebase-intro h3 {
    margin-top: 0px;
}

.home .panel-primary {
    border-color: transparent;
}

.home h3 {
    margin-top: 0;
    text-align: left;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 20px;
}

.home h1 {
    /*    margin-top: 30px; */
}

.home h3.organism {
    font-size: 1.5em;
}

h3.sidebarheader {
    font-size: 1.2em;
    margin-top: 0;
}

.stat-number span {
    font-size: 1em;
}

.home .well h3 {
    text-align: center;
}

.home .well .gallery .panel.image-panel {
    width: 190px;
}

.data-announce {
    padding: 10px;
    font-size: 1.2em;
}

.media-right {
    float: right;
}

#content .jumbotron p {
    font-size: 1.2em;
    margin-bottom: 0;
    font-weight: normal;
}

.bibliography .btn-group {
    padding-bottom: 10px;
}

#data-summary.row,
#species-summary.row {
    margin: 0;
}

#data-summary div.col-md-4,
#species-summary div.col-md-4 {
    padding-left: 5px;
    padding-right: 5px;
}

.jumbotron .thumbnail {
    border: 0px;
    border-radius: 0px;
    margin: 0 0 10px 0;
    padding: 0px;
}

.home h2 {
    margin-top: 0;
    margin-bottom: 15px;
    text-align: left;
}

#data-search {
    display: flex;
    justify-content: end;
    padding-bottom: 20px;
}

.home #data-search {
    padding-bottom: 0;
    width: 70%;
    min-width: 300px;
    margin: 0 auto;
}

.search-form .input-group-btn {
    width: auto;
}

input::placeholder {
    font-style: italic;
}

#content .center-click {
  text-align: center;
  font-size: 1.2em;
  text-decoration: underline;
}

.gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 20px;
    justify-content: space-evenly;
    margin-bottom: 15px;
}

.gallery img {
    width: 100px;
    margin: 0 auto;
}

.gallery .caption {
    text-align: center;
    max-width: 140px;
}

.gallery .panel-body {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.gallery .panel-body h3 {
    height: 40px;
}

.statistics {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 450px;
}


/* next couple rules had weird conflict */

.home p {
    font-size: 18px;
}

.browserlist p a {
    font-weight: bold;
}


/*
.browserlist {
    padding-top: 40px;
    padding-bottom: 40px;
    font-size: 16px;
    line-height: 1.5;
    color: #555;
    text-align: center;
    background-color: #fff;
    border-bottom: 1px solid #e5e5e5;
}
*/

.browserlist h3 {
    margin-bottom: 5px;
    font-weight: 400;
    color: #333;
    font-size: 20px;
    padding-bottom: 10px;
}

.home .button-set {
    border-radius: 5px;
    /*display: inline-block; */
    padding: 20px 25px;
    margin: 20px 0 0 0;
}

.home .button-set.one {
    background: #fff;
    padding-bottom: 0;
    padding-top: 0;
}

.home .button-set.two {
    background: #fff;
    padding-bottom: 0;
    padding-top: 0;
}

#intro .button-set.one .browser {
    background-image: url(/assets/img/fb-human-home.jpg);
    background-size: 93%;
    background-repeat: no-repeat;
    background-position: center 50px;
    height: 370px;
}

#intro .button-set.signup,
#intro .button-set.resource-hub {
    margin-top: 5px;
    padding: 10px 25px;
    font-size: 0.8em;
    text-align: center;
    background-color: #525252;
    color: #fff;
}

#intro .button-set.resource-hub {
    background-color: #298ec2;
}

#intro .button-set.signup p,
#intro .button-set.resource-hub p {
    padding: 0;
    margin: 0 auto;
}

#intro .button-set.resource-hub a.btn.btn-success {
    background-color: #525252;
}

.home .well.browserintro {
    min-height: 360px;
    display: inline-block;
}

#intro .well {
    padding: 15px 5px 0;
    background-color: #fff;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}

#intro .well h4 {
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 18px;
}

#intro .well p {
    padding-top: 5px;
    margin: 0 auto 10px;
    width: 100%;
}

#intro .well p:last-child {
    margin-bottom: 0;
}

#intro .well p.search-all {
    padding-top: 10px;
    margin-bottom: 10px;
}

#intro .learn {
    border: 1px solid #e3e3e3;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 15px;
}

#intro .button-set.one .btn {
    font-size: 16px;
    /*line-height: 17px;
    padding: 12px 30px; */
    transition: all 0.2s ease 0s;
    letter-spacing: 0.05em;
    text-shadow: none;
    text-transform: uppercase;
    border-radius: 3px;
    color: #fff;
    -moz-user-select: none;
    cursor: pointer;
    display: inline-block;
    font-weight: 400;
    margin-bottom: 0;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

#intro .button-set .divider {
    display: inline-block;
    font-size: 18px;
    font-style: italic;
    margin: 0 10px;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2);
}

#organism h3 {
    text-align: center;
}

#organism h3 a {
    text-decoration: none;
}

.welcome-img {
    margin-top: 10px;
}

.office-hours-img {
    margin-left: 15px;
    width: 550px;
}

.input-group-btn.info-page-btn {
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.info-row-item {
    height: 350px;
}

.info-panel-body {
    height: 100%;
}

.info-panel2-body {
    height: 198px;
}

.info-panel2-body p {
    /* Overwrite "--num-lines" variable by passing this as inline style if and when required required */
    --num-lines: 5;
    display: -webkit-box;
    -webkit-line-clamp: var(--num-lines);
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.info-panel3-body {
    height: 150px;
}

.panel-primary {
    border-color: #727272;
    border-color: #fff;
}

.panel1 {
    height: 338px;
}

.info-row-item .panel2 {
    height: 100%;
}

.panel2 img.media-object {
    height: 100%;
    margin-top: -15px;
    margin-right: -15px;
    margin-left: 15px;
}

.human-facial-scan ul {
    overflow-y: scroll;
    height: 120px;
}

@media (max-width: 1199px) and (min-width: 765px),
(max-width: 580px) {
    .media-right {
        float: none;
    }
    .panel2 img.media-object {
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 5px;
    }
    .human-controlled-access {
        height: 400px;
    }
}

@media (max-width: 1199px) and (min-width: 765px) {
    .info-panel2-body {
        height: 375px;
    }
    .info-panel3-body {
        height: 200px;
    }
}

@media (max-width: 765px) {
    .info-panel3-body,
    .info-panel2-body.no-image {
        height: fit-content;
        max-height: 300px;
    }
}

@media (max-width: 580px) {
    .info-panel2-body {
        height: fit-content;
        max-height: 460px;
    }
}

.panel3 {
    height: 100%;
}

.info-row-item .panel-default {
    height: 100%;
}

.panel-featured {
    height: 100%;
}

.panel-scroll {
    overflow-y: auto;
    overflow-x: scroll;
    scrollbar-width: none;
    padding: 5px 5px 5px 5px;
}

.img-container {
    background-color: #000;
}

.img-container img {
    margin: 0 auto;
}

h2.resource-header {
    padding-bottom: 15px;
}

#data-search .form-control {
    height: 40px;
    font-size: 16px;
}

#data-search .btn {
    font-size: 16px;
    line-height: 1.55;
    height: 40px;
    padding-left: 20px;
    padding-right: 20px;
}

#fb-video {
    padding-top: 20px;
    padding-left: 25px;
}

#fb-video p {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 10px;
    font-size: 1.25em;
}

#featured .home-caption p {
    margin-top: 30%;
}

#featured .panel {
    margin-bottom: 0;
}

#matrix {
    padding-top: 70px;
    padding-bottom: 50px;
    margin: 0 auto;
}

#data-types ul {
    padding-left: 0;
    list-style: none;
    font-size: 1.2em;
    line-height: 1.6;
}

#pubs {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 10px;
}

#pubs h3 {
    padding-top: 0px;
}

#pubs .news-heading {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

#pubs .news-cta {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

#pubs .news-item {
    display: flex;
    flex-direction: row;
}

#pubs .news-item p {
    flex: 0 0 6.25em;
    line-height: 1.4;
}

#pubs p {
    font-size: 0.95em;
    line-height: 41px;
    margin: 0px;
}

#pubs .panel {
    margin-bottom: 5px;
}

#pubs .list-group-item a {
    font-size: 14px;
}

#pubs .list-group-item a {
    font-weight: bold;
}

#pubs .panel.panel-primary {
    padding: 10px;
}

#pubs ol.bibliography {
    list-style: none;
    padding-left: 0;
}

#pubs ol.bibliography li {
    margin-bottom: 10px;
}

#pubs ol.bibliography li p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 0;
}

#pubs ol.bibliography li p.h4 {
    font-size: 1em;
}

#pubs ol.bibliography .btn-group.btn-group-sm {
    display: none;
}

.slider-size {
    height: 450px;
    /* This is your slider height */
}

.carousel-inner>.item {
    transition: left 0.6s ease-in-out 0s;
}

.carousel {
    width: 100%;
    margin: 0 auto;
    /* center your carousel if other than 100% */
}

.carousel .item {
    height: 214px;
    /*padding: 10px; */
}

.carousel-inner {
    /*padding-bottom: 30px;
     width: 80%; */
    width: 100%;
    margin: 0 auto;
}

.carousel-indicators {
    /* bottom: 0; */
}

.carousel-indicators .active {
    background-color: #333;
}

.carousel-indicators li {
    border-color: #333;
}

.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-prev,
.carousel-control .icon-next {
    font-size: 1.75em;
}

.carousel .item {
    /* background-color: #fff; */
    /* padding: 10px 20px; */
    border-radius: 6px;
}

.feat-pub .thumbnail {
    border: 1px solid #999;
    border-radius: 6px;
    margin: 0 20px 10px 0;
    width: 170px;
}

.feat-pub h4 {
    font-size: 1.25em;
    margin-top: 10px;
    /*	margin-left: 190px; */
}

#pubs h4 {
    line-height: 1.25;
}

#pubs h4 small {
    font-size: 90%;
    padding-top: 5px;
}

#pubs .feat-pub p.journal {
    color: #777;
    margin-bottom: 5px;
    font-size: 0.9em;
}

.carousel-control {
    color: #333;
    bottom: 60px;
    opacity: 0.7;
    text-shadow: inherit;
    font-size: inherit;
    width: 50px;
}

.carousel-control:hover,
.carousel-control:focus {
    color: #ccc;
}

.carousel-control.left,
.carousel-control.right {
    background: transparent;
}

.data-btn {
    padding: 10px 0;
}

.data-btn a {
    display: block;
    margin: 0 auto;
    /*width: 80%; */
    /*box-shadow: 2px 2px 0px #3071a9;*/
    -moz-box-shadow: 3px 3px 3px #666;
    -webkit-box-shadow: 3px 3px 3px #666;
    box-shadow: 3px 3px 3px #666;
    position: relative;
    top: 0px;
    right: 0;
    bottom: 0;
    left: 0px;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    transition: all 300ms;
}

.data-btn a:hover {
    -moz-box-shadow: 2px 2px 2px #666;
    -webkit-box-shadow: 2px 2px 2px #666;
    box-shadow: 2px 2px 2px #666;
    top: 1px;
    left: 1px;
}

.data-btn.center-block {
    padding: 5px 0 10px 0;
}

#pubs .frontpage .list-group-item {
    padding-left: 0;
}


/* Resources Hub */

#resources h4:first-child {
    margin-top: 0;
}

#resources h4 {
    color: #111;
    display: block;
    font-size: 14px;
    position: relative;
    text-align: center;
    z-index: 1;
}

#resources h4:before {
    border-top: 1px dotted #666;
    content: "";
    position: absolute;
    top: 7px;
    left: 0;
    width: 100%;
    z-index: -1;
}

#resources h4 span {
    background: #fdfdfd;
    padding: 0 10px;
    font-style: italic;
    color: #666;
}

#content .resources ul {
    padding-inline-start: 20px;
}

#content .resources li {
    font-size: 14px;
    padding-top: 5px;
}


/* DAR Request Access Instructions */

.dar-request p {
    font-size: 16px;
}

.dar-request li {
    font-size: 16px;
    padding: 5px 0;
}

.dar-request img {
    border: 1px #ccc solid;
}


/* Phase/Cards on /contributing/ page */

.container.phases {
    padding: 20px;
}

.row.phase-cards {
    justify-content: space-between;
}

.cards {
    border: 1px solid lightgray;
    padding: 20px;
    text-align: center;
    height: 300px;
}

.cards i {
    display: block;
    margin-bottom: 10px;
}

.cards h4 {
    margin-bottom: 10px;
}

.cards p {
    margin-bottom: 10px;
}


/* Customization of Mail Chimp CSS - subscription form */

#mc_embed_signup form {
    padding: 0 0 10px 3%;
}

#mc_embed_signup .button {
    background-color: #428bca;
}

#mc_embed_signup input.email {
    min-width: 225px;
}

.newslist,
.sidelist {
    font-size: 1em;
    font-weight: bold;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.newslist li {
    margin-bottom: 10px;
}

.newslist li a {
    font-size: 0.9em;
    font-weight: normal;
}

.panel-primary>.panel-heading {
    /* background-color: #36687F; */
    background-color: #1c517d;
    /* border-color: #264959; */
    border-color: #163e61;
}

.news .panel {
    margin-bottom: 3px;
}

.metadata.dl-horizontal dt {
    width: 180px;
}

.metadata.dl-horizontal dd {
    margin-left: 220px;
}

.project-features dt {
    width: 200px;
}

.project-features dd {
    margin-left: 220px;
}

#dashboard-link {
    padding-top: 20px;
}


/* take out the following when we put dashboard-link back in */

#search-within {
    padding-top: 20px;
}

#resources {
    padding-top: 10px;
}

#resources h3 {
    padding-top: 20px;
}

#resources h4.media-heading {
    font-size: 18px;
}

p.search-all {
    padding-top: 15px;
    padding-bottom: 5px;
}

#prefooter,
.push {
    /*height: 70px; !* .push must be the same height as #footer *!*/
    clear: both;
}

#prefooter {
    /*background-color: #f5f5f5; */
    /* 	margin-top: -70px; */
    padding-top: 30px;
}

#prefooter #pubs .panel,
#prefooter #pubs .list-group-item {
    background-color: #f5f5f5;
    /* border-color: transparent; */
    font-size: 14px;
}

#footer {
    /* height: 70px; */
    background-color: #414141;
    color: #fff;
    padding: 10px;
    text-align: center;
}

.footerText {
    padding-bottom: 20px;
    margin: 0;
    color: #ccc;
    text-align: center;
}

#footer img {
    vertical-align: middle;
}

#footer.browser-footer {
    margin-top: 0;
}

.site-footer a {
    color: #fff;
    text-decoration: underline;
}

.site-footer a:hover {
    font-style: italic;
}

.acknowledge {
    margin: 0 auto;
    text-align: center;
}

.acknowledge a {
    padding: 0 10px 0 10px;
}

.site-footer {
    background-color: #000;
    font-size: 14px;
    text-align: center;
}

.site-info {
    margin: 0 auto;
    max-width: 1040px;
    padding: 30px 0;
    width: 100%;
}

.flex-footer {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.flex-footer .flex-item {
  padding: 10px;
  text-align: center;
}

@media (max-width: 768px) {
    .login {
        margin-left: 0px;
    }
}

.personnel {
    padding-right: 10px;
}


/* Search */

.search ul {
    list-style-type: none;
}

.search h3 {
    padding-top: 0;
}


/* Individual page styles */

.sitesearch-results {}

table.presentations th.presentation {
    width: 600px;
}

table.presentations th.presenter {
    width: 200px;
}

.pub-entry a {
    font-weight: bold;
    font-size: 1.1em;
}


/* news posts style */

h4.pub-date {
    font-size: 1em;
    font-style: italic;
}


/* Image navigagion */


/* Mini-sites */

#facial_norms .row {
    padding-top: 20px;
}

#facial_norms img {
    padding-right: 10px;
}

#edit-c-measurements .table>thead>tr>th,
#edit-c-measurements .table>tbody>tr>th,
#edit-c-measurements .table>tfoot>tr>th,
#edit-c-measurements .table>thead>tr>td,
#edit-c-measurements .table>tbody>tr>td,
#edit-c-measurements .table>tfoot>tr>td {
    vertical-align: middle;
}

#tdfn-notes-content h3 {
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}


/* missing bootstrap styles */

.mininav {
    background-color: #f5f5f5;
    border-radius: 4px;
    list-style: outside none none;
    margin-bottom: 20px;
    padding: 8px 15px;
}

.mininav>li {
    display: inline-block;
}

.mininav>li+li::before {
    color: #ccc;
    content: "| ";
    padding: 0 5px;
}

.mininav>.active {
    color: #777;
}

#sidebar-wrapper {
    background: #fff none repeat scroll 0 0;
    height: 100%;
    left: 295px;
    margin-left: -295px;
    position: relative;
    width: 295px;
    /* z-index: 10000; */
    border-right: 1px solid #eee;
}

.sidebar-nav {
    display: block;
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 295px;
}

.sidebar-nav .current {
    font-weight: bold;
}

p.sidebar-nav {
    margin-top: 10px;
    border-top: 2px solid #eee;
    color: #999;
    font-size: 14px;
}

.sidebar-nav li {
    line-height: 24px;
    font-size: 12px;
    text-indent: 5px;
}

p.sidebar-nav:first-child {
    border-top: none;
}

.sidebar-nav li a,
p.sidebar-nav a {
    color: #333;
    display: block;
    text-decoration: none;
}

.sidebar-nav a:hover,
p.sidebar-nav a:hover {
    background-color: #eee;
}


/* if you want a Menu button that toggles sidebar -
http://bootsnipp.com/snippets/featured/navigation-sidebar-with-toggle
#sidebar_menu li a, .sidebar-nav li a {
    background: #252525 none repeat scroll 0 0;
    border-bottom: 1px solid #1a1a1a;
    border-top: 1px solid #373737;
    color: #999;
    display: block;
    float: left;
    text-decoration: none;
    transition: background 0.5s ease 0s;
    width: 150px;
}
*/

.media-left,
.media>.pull-left {
    padding-bottom: 10px;
    padding-right: 10px;
}

.form-group.required label:after {
    content: " *";
    color: red;
}


/* FishFace styles */

.ff_tr_header {
    background-color: #d3d3d3;
}

.ff_td_header,
.table>thead>tr>th.ff_td_header {
    font-size: large;
    font-weight: bold;
    text-align: center;
    vertical-align: top;
}

.ff_td_column {
    font-size: large;
    font-weight: bold;
    text-align: center;
    vertical-align: top;
}

.img_title {
    font-size: large;
    font-weight: bold;
    text-align: left;
    vertical-align: top;
}

.ff_td_header_sub {
    font-weight: normal;
    font-style: italic;
    padding-bottom: 5px;
}

.ff-viewer-table {
    width: 100%;
}

.ff-contrib.table td {
    border-top: 0px;
}


/* Mouse Anatomy Styles */

#mouse_anatomy_panel h4 {
    margin-top: 10px;
    font-weight: 200;
}

#mouse_anatomy_panel img {
    margin: 0 auto;
}


/* Data Browser styles */


/* thumbnail gallery adjustments */

#thumbnail-box {
    overflow: auto;
}


/* Gene Summary Styles */

ul.gene-nav {
    list-style: none;
    padding: 0;
}

.gene-nav li {
    padding: 5px 0;
    font-size: 1.1em;
    font-weight: bold;
}

.gene-info .nav-tabs>li>a {
    font-weight: bold;
    font-size: 1.1em;
}

.gene-nav>li>a {
    display: block;
}

.gene-nav>li>a.active {
    color: #000;
}

.gene-info h4 {
    font-size: 1.2em;
}

.facial_landmarking li {
    padding-bottom: 10px;
}


/* Image Nav */

#image-nav.nav {
    padding: 20px 0;
}

#image-nav.nav>li>a.inactive {
    background-color: #eee;
}

.intrinsic-container {
    position: relative;
    height: 0;
    overflow: hidden;
}


/* 16x9 Aspect Ratio */

.intrinsic-container-16x9 {
    height: 500px;
    margin-bottom: 20px;
}


/* 4x3 Aspect Ratio */

.intrinsic-container-4x3 {
    padding-bottom: 75%;
}

.intrinsic-container iframe {
    top: 250px;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px #ddd solid;
}

.intrinsic-container iframe#anatomy-viewer {
    width: 100%;
}

.intrinsic-container iframe#search-results {
    height: 100%;
}

.meeting-gallery p {
    font-style: italic;
    font-size: 0.9em;
    margin: 0;
}

#video-tut img {
    width: 100%;
    height: auto;
    border: 1px #ccc solid;
}

a.playThumb {
    float: left;
    position: relative;
}

a.playThumb span {
    width: 100%;
    height: 100%;
    position: absolute;
    background: url("/images/play-btn.png") no-repeat;
    background-position: 50% 50%;
    background-size: 300%;
    border: 3px #ccc solid;
}

@media screen and (max-width: 480px) {
    a.playThumb span {
        background-size: 400%;
    }
}

/* for ClinGen POC page (/spatial/) */
.gene-gallery .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.gene-card {
  border: 1px solid #ddd;
  border-radius: 12px;
  overflow: hidden;
  text-align: center;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}

.gene-card:hover {
  transform: scale(1.03);
}

.gene-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.gene-card h3 {
  margin: 0.5em 0;
  font-size: 1.1em;
  color: #004a7c;
}


/* video grid styles for training webcast replays */

.video-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
}

.video-flex:first-of-type ~ .video-flex {
  padding-top: 15px;
}

.video-flex > div {
  flex: 1 1 calc(50% - 1.5rem);
  text-align: center;
}

.video-flex img {
  width: 100%;
  max-width: 480px;
  border-radius: 8px;
  border: 1px solid #CCC;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.video-flex span {
  display: inline-block;
  margin-top: 0.5rem;
  font-style: italic;
  color: #333;
}

@media (max-width: 768px) {
  .video-flex > div {
    flex: 1 1 100%;
  }
}



/* Extra Large Col Styles */


/*
*   CSS file with Bootstrap grid classes for screens bigger than 1600px. Just add this file after the Bootstrap CSS file and you will be able to juse col-xl, col-xl-push, hidden-xl, etc.
*
*   Author: Marc van Nieuwenhuijzen
*   Company: WebVakman
*   Site: WebVakman.nl
*
*/

@media (min-width: 1200px) and (max-width: 1599px) {
    .hidden-lg {
        display: none !important;
    }
}

.visible-xl-block,
.visible-xl-inline,
.visible-xl-inline-block,
.visible-xl {
    display: none !important;
}

@media (min-width: 1600px) {
    .container {
        width: 1570px;
    }
    .col-xl-1,
    .col-xl-2,
    .col-xl-3,
    .col-xl-4,
    .col-xl-5,
    .col-xl-6,
    .col-xl-7,
    .col-xl-8,
    .col-xl-9,
    .col-xl-10,
    .col-xl-11,
    .col-xl-12 {
        float: left;
    }
    .col-xl-12 {
        width: 100%;
    }
    .col-xl-11 {
        width: 91.66666667%;
    }
    .col-xl-10 {
        width: 83.33333333%;
    }
    .col-xl-9 {
        width: 75%;
    }
    .col-xl-8 {
        width: 66.66666667%;
    }
    .col-xl-7 {
        width: 58.33333333%;
    }
    .col-xl-6 {
        width: 50%;
    }
    .col-xl-5 {
        width: 41.66666667%;
    }
    .col-xl-4 {
        width: 33.33333333%;
    }
    .col-xl-3 {
        width: 25%;
    }
    .col-xl-2 {
        width: 16.66666667%;
    }
    .col-xl-1 {
        width: 8.33333333%;
    }
    .col-xl-pull-12 {
        right: 100%;
    }
    .col-xl-pull-11 {
        right: 91.66666667%;
    }
    .col-xl-pull-10 {
        right: 83.33333333%;
    }
    .col-xl-pull-9 {
        right: 75%;
    }
    .col-xl-pull-8 {
        right: 66.66666667%;
    }
    .col-xl-pull-7 {
        right: 58.33333333%;
    }
    .col-xl-pull-6 {
        right: 50%;
    }
    .col-xl-pull-5 {
        right: 41.66666667%;
    }
    .col-xl-pull-4 {
        right: 33.33333333%;
    }
    .col-xl-pull-3 {
        right: 25%;
    }
    .col-xl-pull-2 {
        right: 16.66666667%;
    }
    .col-xl-pull-1 {
        right: 8.33333333%;
    }
    .col-xl-pull-0 {
        right: auto;
    }
    .col-xl-push-12 {
        left: 100%;
    }
    .col-xl-push-11 {
        left: 91.66666667%;
    }
    .col-xl-push-10 {
        left: 83.33333333%;
    }
    .col-xl-push-9 {
        left: 75%;
    }
    .col-xl-push-8 {
        left: 66.66666667%;
    }
    .col-xl-push-7 {
        left: 58.33333333%;
    }
    .col-xl-push-6 {
        left: 50%;
    }
    .col-xl-push-5 {
        left: 41.66666667%;
    }
    .col-xl-push-4 {
        left: 33.33333333%;
    }
    .col-xl-push-3 {
        left: 25%;
    }
    .col-xl-push-2 {
        left: 16.66666667%;
    }
    .col-xl-push-1 {
        left: 8.33333333%;
    }
    .col-xl-push-0 {
        left: auto;
    }
    .col-xl-offset-12 {
        margin-left: 100%;
    }
    .col-xl-offset-11 {
        margin-left: 91.66666667%;
    }
    .col-xl-offset-10 {
        margin-left: 83.33333333%;
    }
    .col-xl-offset-9 {
        margin-left: 75%;
    }
    .col-xl-offset-8 {
        margin-left: 66.66666667%;
    }
    .col-xl-offset-7 {
        margin-left: 58.33333333%;
    }
    .col-xl-offset-6 {
        margin-left: 50%;
    }
    .col-xl-offset-5 {
        margin-left: 41.66666667%;
    }
    .col-xl-offset-4 {
        margin-left: 33.33333333%;
    }
    .col-xl-offset-3 {
        margin-left: 25%;
    }
    .col-xl-offset-2 {
        margin-left: 16.66666667%;
    }
    .col-xl-offset-1 {
        margin-left: 8.33333333%;
    }
    .col-xl-offset-0 {
        margin-left: 0;
    }
    .visible-xl {
        display: block !important;
    }
    table.visible-xl {
        display: table;
    }
    tr.visible-xl {
        display: table-row !important;
    }
    th.visible-xl,
    td.visible-xl {
        display: table-cell !important;
    }
    .visible-xl-block {
        display: block !important;
    }
    .visible-xl-inline {
        display: inline !important;
    }
    .visible-xl-inline-block {
        display: inline-block !important;
    }
    .hidden-xl {
        display: none !important;
    }
}


/* Gene Expression Profiles

table td div {
	width: 10px;
  height: 10px;
  float: left;
  border: 3;
  border-style: ridge;
}
*/


/* Enamel Base */

.enamel-home-image {
    width: 100%;
    max-width: 500px;
}

.enamel-amelogenesis-image-wrapper {
    text-align: center;
}

.enamel-amelogenesis-image {
    width: 100%;
    max-width: 936px;
}

.mouse-model-table-wrapper {
    overflow-x: scroll;
}


/*
To make facebase compatible with Bootstrap 5
The Navbar injected in the build uses Bootstrap while FaceBase was built using Bootstrap 3
This causes some conflicts. The following rules have been added to resolve those conflicts
*/

.default-view .row,
.sidenav {
    display: block;
}


/*
Publications page buttons
Fishface Navbar buttons
*/

.ff-nav .btn,
.bibliography .btn {
    background-color: rgba(0, 0, 0, 0) !important;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.ff-nav .btn:hover,
.bibliography .btn:hover {
    background-color: rgba(0, 0, 0, 0.12) !important;
    border: 1px solid rgba(0, 0, 0, 0.15);
}


/*  */

.newsItem {
    display: flex;
    flex-direction: column;
}

.newsItem img,
.newsItem iframe {
    float: left !important;
    max-width: 100% !important;
}

.newsItem img {
    max-height: 500px;
    max-width: 100%;
    height: auto !important;
    width: auto !important;
}

.pagination {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.pagination a {
    text-decoration: none;
}

.pagination p {
    line-height: 2;
    margin: 0;
}

/* Trying to override View Abstract collapsing div bug */

#content .bibliography .collapse.in {
    display: block !important;
}