/*
                        READ ME FIRST

      Please, before adding CSS at the end of this document,
      refer to the following table of contents. Chances are that the
      stuff you need to customize is arleady here!!

      CTRL+K , CTRL+0    to collapse all

      - NORMALIZATION                (CSS reset, overrides user-agent default styles) 
      - MODULE OVERRIDES
          - N1ED Editor
          - Font Awesome
          - Bootstrap
      - MAIN NAV
      - UTILITY NAV         
      - CUSTOM CONTENT
          - Homepage Header
          - Content Type | Article
          - View | Latest Articles
          - View | Webinars
          - Tag Badges
          - Related Resources Card
          - Block Tools Menu (the menu under the search bar)
          - Scrollspy content type
          - Root Nodes Backgrounds
          - Cards for Branch Node views
          - Featured Nodes
          - Search Page
          - Process List
          - News and Event 
      - UTILITY CLASSES
      - MISCELLANEOUS
 */

/* --
/* --
/* -- NORMALIZATION -- */
a[target="_blank"]:not(.site-logo):not(.btn):not(.d-block):not(.noIcon):after {
  content: "\f35d";
  font-size: 0.6em;
  display: inline;
  position: relative;
  top: -0.5em;
  margin: 0 3px;
}
a[target="_blank"]:after {
  font-family: "Font Awesome 5 Free";
  display: inline-block;
  font-weight: bold;
}
a {
  color: var(--bs-new_blue);
}
a.noColor {
  color: initial;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  position: relative;
}
h4,
h5,
.h5 {
  font-weight: bold !important;
}
h6 {
  margin-bottom: 20px;
  font-size: 1.75em;
}
h6:after,
.underlined:after {
  content: "";
  display: inline-block;
  width: 200px;
  border-bottom: 2px solid var(--bs-third);
  bottom: -10px;
  left: 0;
  position: absolute;
}

blockquote {
  padding: 1.25rem;
  border: 1px solid #e9ecef;
  border-left-width: 0.25rem;
  border-radius: 0.25rem;
  border-left-color: var(--bs-fourth);
  margin: 1.25rem 1.25rem 1.25rem 0;
  box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%) !important;
}
blockquote p:last-child {
  margin-bottom: 0;
}

ul:not([class]) li,
ol:not([class]) li {
  margin-top: 8px;
}

/* --
/* --
/* -- MODULES OVERRIDES -- */
[data-n1ed-block-category="grid"],
[data-n1ed-block-category="grid"] .container,
[data-bootstrap-contains="containers"],
[data-bootstrap-contains="containers"] > .container {
  padding-left: 0;
  padding-right: 0;
}

.icon-frame {
  background: var(--bs-primary);
  display: inline-block;
  border-radius: 50%;
  color: #fff;
  padding: 1.1em;
  position: relative;
  z-index: 0;
}
.icon-frame > i {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 50px;
  height: 50px;
  transform: translate3d(
    0,
    0,
    2px
  ); /* This is needed for z-index bug on safari */
}
.icon-frame > i:last-child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-45%, -45%, 1px);
  color: #51718f;
  z-index: -1;
}
.fa,
.fas {
  font-weight: 900 !important;
}

.alert:not([aria-label="Status message"]) {
  border: 0;
  border-radius: 0;
  padding: 1em 2em 1em 4em;
  border-left: 8px solid;
  /*box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%) !important;*/
}
.alert:not([aria-label="Status message"]):after {
  content: "";
  position: absolute;
  left: 10px;
  top: 0;
  font-family: "Font Awesome 5 Free";
  justify-content: space-around;
  font-size: 2em;
  display: flex;
  align-items: center;
  height: 100%;
}
.alert[aria-label="Status message"]:after {
  content: "";
  display: none;
}
.alert.alert-info:after {
  content: "\f05a";
}
.alert.alert-success:after {
  content: "\f058";
}
.alert.alert-warning:after {
  content: "\f071";
}
.alert.alert-danger:after {
  content: "\f057";
}
.alert a {
  text-decoration: underline;
}
.alert.animate {
  animation: animate 1s linear 1s 3;
}

/* --
/* --
/* -- MAIN NAV -- */
.menu--main .btn{
  --bs-btn-hover-bg: var(--bs-light);
}
.menu--main .menu-level-0 > li:has(a:hover) > div:last-child > div,
.menu--main .menu-level-0 > li > div:last-child > div:hover{
  display: block;
}
.menu--main button:not(.collapsed) i::before{
  content: "\f077";
}
.menu--main .menu-level-1{
  column-count: 3;
  column-gap: 6em;
  column-width: 350px;
}
.menu--main .menu-level-1 > li{
  break-inside: avoid-column;
}
.custom-entry{
  border: 1px solid var(--bs-white);
}
.custom-entry.bg-info{
  outline: 4px solid rgba(var(--bs-info-rgb), .25)
}
.custom-entry.bg-warning{
  outline: 4px solid rgba(var(--bs-warning-rgb), .75)
}
@media (min-width: 768px) {
  .menu--main .menu-level-0 > li > a.is-active::before,
  .menu--main .menu-level-0 > li > div:first-child > a:hover::before {
    content: "";
    position: absolute;
    left: calc(50% - 10px);
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 10px solid transparent !important;
    border-right: 10px solid transparent !important;
    border-bottom: 10px solid var(--bs-fourth) !important;
  }
}


.menu--tools .nav {
  flex-direction: row;
  justify-content: flex-end;
}
.menu--tools .nav-item:not(:last-child) {
  border-right: 1px solid;
}
.menu--tools .nav-item a {
  padding: 0 15px !important;
  margin: -5px 0;
}
.menu--tools .nav-item:last-child a {
  padding-right: 0 !important;
}
.menu--tools .nav-item:first-child a:after {
  font-family: "Font Awesome 5 Free";
  content: "\f023";
  margin-left: 10px;
  font-size: 0.8em;
  font-weight: 700;
}
.menu--tools .nav-item:last-child a {
  color: var(--bs-danger);
}

/* --
/* --
/* -- CUSTOM CONTENT -- */
.homepage_header {
  background-image: url(/sites/default/files/flmngr/header-img.jpg);
  background-size: cover;
}
.homepage_header h1 {
  font-weight: bold;
}
.homepage_header .h4.text-fourth {
  font-weight: bold;
}
.homepage_header .h4.mb-4 > a {
  color: #000;
}

main:has(.node--type-article) #block-bootstrap5-subtheme-page-title h1:before {
  content: "";
  width: 20px;
  height: 22px;
  border: 3px double var(--bs-fourth);
  display: inline-block;
  background: var(--bs-fourth);
  background-clip: content-box;
}

[about*="/learning"] .views-exposed-form,
[about^="/news-events"] .views-exposed-form{
  /*
      Hiding the exposed form (lol). Filtering is done trough URL params instead.
      But the form still needs to be exposed by the view, or the URL params wont work.
  */
  display: none;
}
[about^="/news-events"] .container:first-child{
  margin-bottom: 50px;
}

[about^="/news-events"] .container:first-child .panel-panel-inner{
  border: 1px solid rgba(var(--bs-primary-rgb), 0.5) !important;
  height: 100%;
  color: #08233d;
  background-color: #cfd8e0;
  border-radius: 10px;
  padding: 1.5rem 2rem;
}
[about^="/news-events"] .container:first-child .col:last-child .panel-panel-inner{
  background: #fff;
}
[about^="/news-events"] .container .col-lg-4 > div{
  display: flex;
  align-items: center;
}
[about^="/news-events"] .row-cols-lg-2 > div:first-child{
  border-right: 1px solid var(--bs-gray-300);
}
@media (max-width: 992px) {
  [about^="/news-events"] article .container:first-child > .row > .col:first-child{
      margin-bottom: 1.25rem;
  }
}

.webinarCard > div:first-child{
  background-image: url("/sites/default/files/flmngr/upcoming-events.jpg");
  background-size: cover;
  background-position: 50% 100%;
}
.webinarCard .list-group{
  max-height: 160px;
  overflow-y: scroll;
}

#relatedResources {
  position: relative;
  background: linear-gradient(
    0deg,
    rgba(238, 150, 75, 0.2) 0%,
    rgba(255, 255, 255, 1) 100%
  );
}
#relatedResources:before {
  content: "";
  opacity: 0.08;
  background-size: 100%;
  background-position: center 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
[about^="/data-management-and-sharing-policy"] #relatedResources:before{
    background: url(/sites/default/files/flmngr/abstract_bg.jpg);
}
[about^="/genomic-data-sharing-policy"] #relatedResources:before {
    background: url(/sites/default/files/flmngr/abstract_bg2.jpg);
}
[about^="/public-access-policy"] #relatedResources:before {
    background: url(/sites/default/files/flmngr/abstract-3.png);
    opacity: 0.05;
}
[about^="/other-sharing-policies"] #relatedResources:before{
  background: url(/sites/default/files/flmngr/abstract_bg4.png);
}
#relatedResourcesCard {
  max-width: 600px;
}
#relatedResourcesCard h6 {
  text-transform: uppercase;
  font-size: 1.2em;
  font-weight: bold;
}
#relatedResourcesCard .card-body p {
  padding: 20px 0;
  border-bottom: 1px solid var(--bs-gray-300);
  margin: 0;
}
#relatedResourcesCard .card-body p:last-child {
  border-bottom: none;
}

.stickedNav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99;
}
#scrollspy-nav ul {
  overflow: hidden;
  display: flex;
}
#scrollspy-nav ul li a.active {
  color: var(--bs-fourth);
}
#scrollspy-nav ul li {
  flex: 1;
  position: relative;
  text-align: center;
  z-index: 0;
  color: #000;
}
#scrollspy-nav ul li a {
  text-decoration: none;
  font-size: 0.92em;
}
#scrollspy-nav ul li span {
  width: 40px;
  height: 40px;
  line-height: 40px;
  display: block;
  font-size: 18px;
  font-weight: bold;
  background: var(--bs-secondary);
  border: 1px solid #00000090;
  border-radius: 50%;
  margin: 0 auto 10px auto;
}
#scrollspy-nav ul li a.active span {
  color: #fff;
  background: var(--bs-fourth);
  border: none;
}
#scrollspy-nav ul li a.active strong {
  color: var(--bs-fourth);
}
#scrollspy-nav ul li a::after {
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  top: 28px;
  z-index: -1;
  background: #00000090;
}
#scrollspy-nav ul li:first-child a::after {
  width: 50%;
  left: 50%;
}
#scrollspy-nav ul li:last-child a::after {
  width: 50%;
  right: 50%;
}
#scrollspy-nav ul li a.active::before,
#scrollspy-nav ul li a.active::after {
  background: var(--bs-fourth);
}

.node--type-root-node > div {
  position: relative;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 100%
  );
}
.node--type-root-node > div:before,
.node--type-root-node > div:after {
  content: "";
  background: linear-gradient(
    90deg,
    rgb(255 255 255) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
[about="/data-management-and-sharing-policy"] > div:before,
[about="/genomic-data-sharing-policy"] > div:before {
  background: url(/sites/default/files/flmngr/abstract_bg.jpg);
  opacity: 0.2;
  background-size: 100%;
  background-position: center top;
  background-repeat: no-repeat;
}
[about="/genomic-data-sharing-policy"] > div:before{
    background: url(/sites/default/files/flmngr/abstract_bg2.jpg);
    opacity: 0.1;
    background-position: center top;
}
[about="/public-access-policy"] > div:before{
    background: url(/sites/default/files/flmngr/abstract-3.png);
    opacity: 0.1;
    background-size: cover;
    background-position: center top;
}
[about="/other-sharing-policies"] > div:before{
    background: url(/sites/default/files/flmngr/abstract_bg4.png);
    opacity: 0.2;
    background-size: cover;
    background-position: center top;
}

#sharingPoliciesCards .card {
  border-bottom-width: 3px !important;
}
#sharingPoliciesCards .card .card-body:first-child > div:first-child {
  height: 180px;
  background-size: cover !important;
  background-position: 50% 50% !important;
}
#sharingPoliciesCards .card .card-body:last-child {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition: opacity 0.5s;
  opacity: 0;
}
#sharingPoliciesCards a:hover .card {
  border-bottom-color: var(--bs-new_blue) !important;
}
#sharingPoliciesCards a:hover .card-body:last-child {
  opacity: 1;
}

#search-form ~ h2 {
  display: none;
}
#search-form ~ .item-list > .search-results,
#search-form + .item-list {
  padding: 0;
  max-width: 1320px;
  margin: 20px auto 40px;
}
#search-form ~ .item-list > .search-results > li {
  margin-left: 0;
}

.process-list {
  list-style: none;
  counter-reset: mybullets;
  padding-left: 3em;
  position: relative;
  --orderedbulletsize: 28px;
}

.process-list > li:not(:last-child)::before,
.process-list.pl-primary > li:not(:last-child)::before {
  background: rgba(var(--bs-primary-rgb), 0.3);
}

.process-list.pl-seconadry > li:not(:last-child)::before {
  background: rgba(var(--bs-seconadry-rgb), 0.3);
}

.process-list.pl-info > li:not(:last-child)::before {
  background: rgba(var(--bs-info-rgb), 0.3);
}

.process-list.pl-success > li:not(:last-child)::before {
  background: rgba(var(--bs-success-rgb), 0.3);
}

.process-list.pl-warning > li:not(:last-child)::before {
  background: rgba(var(--bs-warning-rgb), 0.3);
}

.process-list.pl-danger > li:not(:last-child)::before {
  background: rgba(var(--bs-danger-rgb), 0.3);
}

.process-list.pl-light > li:not(:last-child)::before {
  background: rgba(var(--bs-warning-rgb), 0.3);
}

.process-list.pl-dark > li:not(:last-child)::before {
  background: rgba(var(--bs-danger-rgb), 0.3);
}

.process-list > li {
  counter-increment: mybullets;
  position: relative;
}

.process-list > li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(var(--orderedbulletsize) * -1 - 9px);
  top: calc(var(--orderedbulletsize) + 4px);
  width: 10px;
  height: calc(100% - var(--orderedbulletsize) + 6px);
}

.process-list > li::after {
  position: absolute;
  text-align: center;
  aspect-ratio: 1;
  border: 2px solid currentcolor;
  border-radius: 100%;
  font-weight: bold;
}

ol.process-list > li::after {
  content: counter(mybullets);
  top: 0;
  transform: translate(calc(-100% - var(--orderedbulletsize) * 0.65), -1px);
  width: var(--orderedbulletsize);
}

ul.process-list > li::after {
  content: "";
  top: calc(var(--orderedbulletsize) / 4);
  transform: translateX(calc(-100% - var(--orderedbulletsize) * 0.88));
  width: calc(var(--orderedbulletsize) / 2);
  background: #000;
}

/* News and Events
-------------------------*/
.view-id-featured_articles .card.upcomingEvents > .card-header {
  background-color:  #0d3b66;
}


/* --
/* --
/* -- UTILITY CLASSES -- */
.gradientUp {
  background: linear-gradient(
    180deg,
    rgba(238, 150, 75, 0.2) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}
.gradientDown {
  background: linear-gradient(
    0deg,
    rgba(238, 150, 75, 0.2) 0%,
    rgba(255, 255, 255, 1) 100%
  );
}
.gradientUpRight {
  background: linear-gradient(
    225deg,
    rgb(250, 240, 202) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.shadowHover {
  text-decoration: none !important;
  transition: box-shadow 0.5s;
}
.shadowHover:hover {
  box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%) !important;
}

.align-left {
  margin-right: 1em;
  margin-bottom: 1em;
}
.align-right {
  margin-left: 1em;
  margin-bottom: 1em;
}
article img {
  max-width: 100%;
  height: auto;
}

.extLink {
  display: inline-block;
  font-size: 0.6em;
  margin-left: 3px;
  transform: translateY(-4px);
}

.table .bg-peach td,
.table .bg-peach th,
.table .bg-peach{
  --bs-table-striped-bg: #ffe7d3;
  background-color: #ffe7d3 !important;
}

.noU {
  text-decoration: none !important;
}


/* --
/* --
/* -- MISCELLANEOUS -- */
.region{
  padding: 0 !important;
}

.field--name-field-display-option-1,
.node--type-_-leaf-node .field--name-field-generic-plain,
.node--type-_-leaf-node-untabbed- .field--name-field-generic-plain,
.node--type-_-leaf-node .field--name-field-event-host {
  display: none;
}