/* dependable.css */


/* uncomment for debugging */
/* * { outline: 1px solid red; } */

@import 'css/offerings.css';

/* set the typeface here. */
/* no other styling applied */
body {
    font-family: "Charter", sans-serif;
    font-size: 14px;
    /* line-height: normal; */
    line-height: 1.27;
    -webkit-font-smoothing: auto;
    background-color: #fdfbf7;
}

div.nu-sticky-short-title {
    position: sticky;
    top: 0px;
    z-index: 10;
    background-color: #fdfbf7;
}

div.nu-live-gpt-summary {
    min-height: 25ex;
    overflow-y: scroll;
    margin-top: 1ex;
    margin-bottom: 1ex;
    margin-left: 1rem;
    margin-right: 1rem;
}

div.nu-gpt-takeaways {
    min-height: 25ex;
    margin-top: 1ex;
    margin-bottom: 1ex;
    margin-left: 1rem;
    margin-right: 1rem;
}

/* small simple footer for copyright notice */
.nu-footer {
    background-color: #f1f1f1;
    text-align: left;
    padding: 0px;
    margin: 0px;

    height: 1rem;               /* fix height at 1rem */
    overflow-y: hidden;
}

.nu-footer p {
    padding: 0px;
    margin: 0px;
    font-size: 70%;
    margin-left: 1em;
}



/* navigation bar */
.nu-topnav {
    display: flex;
    align-items: stretch;        /* cross-axis (vertical) alignment */
    overflow: hidden;

    background-color: #36454F;

    height: 2.5rem;                /* fix height at 3rem */
    overflow-y: hidden;
}

.nu-topnav a {
    display: flex;
    align-items: center;

    text-align: center;
    padding-left: 1.25em;
    padding-right: 1.25em;

    text-decoration: none;      /* no underline for links*/

    color: #f2f2f2;
}

.nu-topnav a:hover {
    background-color: #94acbf;
    color: #000;
}

/* special class for the tree logo */
.nu-topnav .nu-logo {
    height: 2rem;
    margin-left: 0.5rem;
    margin-right:0.5rem;
}

.nu-topnav .nu-logo a {
    height: 2.5rem;             /* match topnav */
    overflow-y: hidden;
    padding: 0px;
}

.nu-search-bar-sizing {
    width: 40%;
    box-sizing: border-box;
    margin-bottom: auto;
    margin-top: 1rem;
    padding: 0.4em 0.6em;
}


.nu-search-bar-style {
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #fffdf9;
    color: #36454F;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: "Source Sans 3", sans-serif;
    font-weight: 400;           /* 400=regular, 600=semibold, 700=bold */
}

.nu-search-bar-style:focus {
    outline: none;
    border-color: #326750;
    box-shadow: 0 0 0 2px rgba(50, 103, 80, 0.2);
}

.nu-search-bar {
    width: 90%;
    margin-bottom: auto;
    margin-top: 1rem;
}

.dd-search-bar {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-left: 1rem;
    margin-right: 0rem;
    margin-bottom: auto;
}

.dd-search-bar-input {
    width: calc(100% - 40px - 0.5em - 1.5em);
}

.dd-clear-search-button-div {
    /* width: 2.5em;               /\* not rem *\/ */
    margin-left: 0.5em;
}

.dd-clear-search-button {
    width: 40px;
    height: 37px;
    margin: 0px;
    padding: 0px;
    --bs-btn-bg: #36454F;
}

.dd-article-seg-controller {
    margin-left: 1rem;
    margin-top: .5rem;
    margin-bottom: .5rem;
}

div.citation-network-deep-dive {
    color: #fcfcfc;
    margin-top: 0.75em;
    display: inline-block;
    padding: 0rem;
}

.citation-network-deep-dive a {
    text-decoration: none;
    background-color: #326750;
    color: #fcfcfc;

    border-radius: 0.5em;
    font-weight: bold;

    padding: 0.5em;
    padding-left:0.75em;
    padding-right:0.75em;
}

.citation-network-deep-dive a:hover {
    background-color: #36454F;
}

/* treemap plot */
.treemap {
    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    height: calc(80vh - 3.5rem);
    width: 80%;
    margin: 0

    background-color: #faa;
}


/* sunburst plot */
.sunburst {
    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    /* keep these for the real plot */
    /* NB: 3.5rem = 2.5 for nav and 1 for footer */
    /* NB: 10ex for title and button */
    width:min(100%, calc(100vh - 3.5rem - 5ex));
    aspect-ratio:1;
    /* if aspect-ratio is not well-supported, work out height
       exactly... needs a separate one for vertical layout... */
}

.sunburst-button {
    display: block;
    margin-top: auto;
    margin-left: auto;
    margin-right: 0;
    margin-bottom: 0;
    padding: 1em;
}


.nu-full-img {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

#live-sunburst {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

#ds-live-sunburst {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

#q-live-sunburst {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

#qs-live-sunburst {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

#live-sunburst-dd {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

#live-treemap {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

.deepdive-button {
    position:absolute;
    bottom:0;
    right:0;

    margin:0em;
    margin-bottom:0.33em;
    padding:0;
}

.deepdive-button a {
    text-decoration:none;
    background-color: #326750;
    padding:0.33em;
    padding-left:0.5em;
    padding-right:0.5em;
    border-radius:0.5em;
    color: #fcfcfc;
    font-weight:bold;
    border-radius: 0.5em;
}

.deepdive-button a:hover {
    background-color: #36454F;
}

.engine-seg-controller {
    margin: 0.5em;
    flex-basis: auto;
    flex-shrink: 0;
    flex-grow: 0;
}

.engine-dropdown {
    width: 12em;
    margin: 0.5em;
    flex-basis: auto;
    flex-shrink: 0;
    flex-grow: 0;
}

.nu-ls-gallery-seg-controller-div {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    flex: initial;
    flex-shrink: 0;
}

@media (max-width: 600px){
    .nu-ls-gallery-seg-controller-div {
        margin-top: 2ex;
    }
}

div.suggested-dd-list{

}

.live-search-bar {
    margin: 0.5em;
    flex: 0;
    width: 80%;
}



/* abstract card */
.nu-topic-abstract {
    padding: 0.5em;
    margin-top: 20px;
    /* border-style: solid; */ /* for debugging */
}

.nu-topic-abstract h4, p {
    padding: 0em;
    margin: 0em;
    margin-bottom: 1ex;
}



.nu-suggested-dive-card {
    padding: 0.5em;
    margin-top: 20px;
}

#lastitem.nu-suggested-dive-card {
    margin-bottom: 20px;        /* bottom margin on last card */
}

/* card header: arrow, URL, and info */
.suggested-dive-header {
    display: flex;
    flex-direction: row;
}

.suggested-dive-header a {
    text-decoration: none;
    color: #326750;
    font-weight: bold;
}



/* article snippet card */
.nu-article-card {
    padding: 0.5em;
    margin-top: 20px;
    /* border-style: solid; */ /* for debugging */
}

#lastitem.nu-article-card {
    margin-bottom: 20px;        /* bottom margin on last card */
}

/* card header: arrow, URL, and info */
.cardheader {
    display: flex;
    flex-direction: row;
}

.cardheader a {
    text-decoration: none;
    color: #326750;
    font-weight: bold;
}

.cardheader .nu-author-link {
    margin-right: 1em;
    font-weight: normal;
}

.cardheader a.nu-author-link:hover {
    color: #36454F;
    font-weight: bold;
}

.cardheader span {
    padding: 0em;
    /* display: inline-block; */
}

.cardheader .cardinfo, .cardheader .cardanchor {
    flex: 0 0 auto;
}

.cardheader .cardanchor {
    margin-right: 0.5em;
    margin-left: auto;
}

.cardheader .cardinfo {
    margin-left: 0.5em;
    max-width: 12em;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-style: italic;
    color: #326750;
}

.cardheader .cardlink {
    flex: 1;
    min-width: 0;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cardheader .cardlink a:hover {
    color: #36454F;
    font-weight: bold;
    font-style: italic;
}

/* text content for card */
.cardcontent {
    padding: 0em;
    margin: 0em;
    margin-top:0.5em;
}

.cardcontent p {
    padding: 0em;
    margin: 0em;
}



/* row / column layout */

/* NB. this specifies a single-column layout, with the article
 * snippets stacked below the sunburst.  We overwrite this with a
 * two-column layout inside the media query at the end */

.nu-Page {
    display: flex;
    min-height: 100vh;
    max-width: 100vw;
    flex-direction: column;
    margin: 0px;
}

.nu-content {
    display: flex;
    flex: 1;
    overflow-y: hidden;
}

.nu-progress-bar {
    padding: 1rem;

}
.nu-column-progress-bars {
    flex: 1;
    flex-direction: column;
    order: -1;


    display: flex;
    justify-content: center;
    align-items: center;

    padding: 2rem;

    height: calc(100vh - 2.5rem);
}
.mantine-Progress-root{
    width: 90%;
    margin-bottom: 2.5rem;
}

p.nu-progress-bar-title{
    width: 90%;
    margin-bottom: 1rem;
    font-style: italic;
    font-size: 120%;
}

H5.nu-prog-bar-header {
    font-size: 100%;
}

.nu-export-button-div {
    margin-left: 1rem;
}

.nu-export-button {
    display: inline-block;
    margin-left: .2rem;
}

.nu-sunburst-export-button-div {
    position:absolute;
    bottom:0;
    left:0;

    margin:0em;
    margin-bottom:0.33em;
    padding:0;
}

.nu-sunburst-export-button {
    display: inline-block;
    margin-left: .2rem;
}

.nu-text-link {
    color: #36454F;
    margin-right: 1em;
    font-weight: normal;
}

.nu-text-link:hover {
    color: #36454F;
    font-weight: bold;
}

@media (max-width: 600px){
    .nu-column-progress-bars {
        min-height: 0;
    }
    p.nu-progress-bar-title{
        font-size: 100%;
    }
    .mantine-Progress-root{
        margin-bottom: 1.5rem;
    }
}

.nu-column-sunburst {
    flex: 1;
    flex-direction: column;
    order: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: hidden;

    height: calc(100vh - 2.5rem);
}

.nu-column-articles {
    flex: 1;
    order: 0;
    padding: 0px;
    overflow-y: auto;
    overflow-x: hidden;
}

.nu-column-live-search {
    display: flex;
    flex-direction: column;
    flex: 1;

    align-items: center;
    justify-content: start;
    margin-bottom: 0em;
}

.nu-column-carousel {
  flex: 3;
  text-align: center;
}

.nu-carousel-div-wrapper{
    display: flex;
    justify-content: center;
}

.nu-carousel-div{
    max-width: min(800px, 90%);
    text-align: center;
}

.live-search-carousel-slide {
    text-align: center;
}

.live-search-carousel-slide a{
    font-size: 1.5em;
}

.nu-ls-gallery-seg-controller-div {
    margin-bottom: 1.5ex;
}

.nu-sb-segcontroller{
    display: flex;
    flex-direction: column;

    justify-content: start;
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 1em;

}

.nu-sb-seg-div{
    width: 90%; 
    margin-bottom: auto;
    margin-top: 1rem;
    overflow-x: scroll;
    white-space: nowrap;
}


.nu-suggested-dives {
    display: flex;
    flex-direction: column;
    flex: 5;

    align-items: left;
    justify-content: start;
    padding-left: 4em;
    padding-right: 4em;
    padding-bottom: 4em;
    overflow: scroll;

}

.nu-live-search-page {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1;

    height: calc(100vh - 3.5rem);
    background-color: #fdfbf7;
}

.nu-column-upload {
    display: flex;
    flex-direction: column;

    align-items: flex-start;
    justify-content: center;
    overflow: scroll;

    height: calc(100vh - 3.5rem);
}

.nu-column-homepage {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;
    overflow: hidden;

    height: calc(100vh - 3.5rem);
    width: 100vw;
}

.nu-Page,
.nu-content {
    display: flex;
    flex-direction: column;
}

.cardheaderStacked {
    flex-direction: column;
    margin-bottom: 0.5em;
}
.cardheaderStacked .cardinfoStacked {
    margin-left: 0.5em;
    max-width: 100%;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.nu-column-authorlist {
    /* display: flex; */
    /* flex-direction: column; */
    /* align-items: flex-start; */
    /* justify-content: center; */


    height: calc(100vh - 3.5rem);
    overflow-y: auto;
    overflow-x: hidden;
}

.nu-column-about-page {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;

    text-align: justify;
    hyphens: auto;

    overflow-y: scroll;

    min-height: calc(100vh - 3.5rem);
    width: 100vw;
}

div.about_page {
    padding-bottom: 5em;
    padding-top: 3em;
    font-size: 20px;

    width: 80%;
    max-width: 40em;
    flex: 1;
}

div.about_page a {
    text-decoration: none;
    color: #326750;
    font-weight: bold;
}

h3.about_page {
    margin-top: 2em;
    font-weight: bold;
}

div.about_page dt {
    font-weight: bold;
    font-style: italic;
    margin-top: 1em;
    margin-left: 1em;
}

div.about_page dd {
    margin-left: 2em;
}

div.about_page p.about_page_tagline {
    font-size: 140%;

    font-weight: bold;
    font-style: italic;

    text-align: center;

    padding-left:1.5em;
    padding-right: 1.5em;
}

div.about_page p.about_page_intro {
    font-size: 120%;
    padding-left:1.5em;
    padding-right: 1.5em;
}

div.about_page_video {
    margin-top: 2em;
    margin-bottom: 2em;
}

div.about_page_video_container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

iframe.about_page_youtube_link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

span.lr_logo {
    /* font-variant: small-caps; */
    font-weight: bold;
    color: #326750;
}

.dd-sunburst-tooltip {
    position: absolute;
    bottom: 0.5;
    left: 0.5;
}

/* Title Styling */
.nu-dropdown-title {
    font-weight: bold;
    font-size: 16px;
    color: #333;
}

/* Mentions Styling */
.nu-dropdown-mentions {
    font-size: 14px;
    color: #666;
}

/* Percent Change Styling */
.nu-dropdown-percent-change {
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    padding-left: 5px;
}

.nu-dropdown-title-percent-container {
    display: flex;
    align-items: center;  /* Vertical alignment */
    justify-content: space-between;  /* Space title on the left, percent change on the right */

}

/* Flex container to stack the elements */
.nu-dropdown-container {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.nu-analysis-title {
    display: flex;
    align-items: center;
}

.nu-analysis-title .nu-analysis-modal-icons{
    margin-left: auto;
}

.nu-analysis-title .nu-analysis-modal-icons{
    margin-left: auto;
}

.nu-analysis-title .nu-analysis-modal-icon{
    margin: .5rem;
}

.nu-report-centered-div {
  margin: 0 auto; /* This centers the div horizontally */
  flex: 1;
}

@media (min-width: 1025px) {
    .nu-report-centered-div {
        max-width: 50%;
    }
}

.nu-report-content {
  flex: 1;
  /* NB: 3.5rem = 2.5 for nav and 1 for footer */
  height: calc(100vh - 3.5rem);
  overflow-y: scroll;

  overflow-x: hidden;
}


/* If the screen is wide enough, switch to a column view with the*/
/* sunburst and the articles shown side by side */
@media (min-width: 1025px) {
    body {
        overflow-y:hidden;
        overflow-x:hidden;
    }

    .nu-content {
        flex-direction: row;
        flex: 1;
    }
    .nu-column-sunburst {
        flex: 1;
        height: calc(100vh - 3.5rem);
    }
    .nu-column-articles {
        flex: 1;
        /* NB: 3.5rem = 2.5 for nav and 1 for footer */
        height: calc(100vh - 3.5rem);
        overflow-y: scroll;
    }

    .nu-column-live-search {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .nu-live-search-page {
        /* NB: 3.5rem = 2.5 for nav and 1 for footer */
        height: calc(100vh - 3.5rem);

    }
    .nu-column-progress-bars {
        flex: 1;
        /* NB: 3.5rem = 2.5 for nav and 1 for footer */
        height: calc(100vh - 3.5rem);
    }

    .nu-column-about-page {
        flex: 1;
        /* NB: 3.5rem = 2.5 for nav and 1 for footer */
        height: calc(100vh - 3.5rem);
        overflow-y: scroll;
    }

    .engine-dropdown {
        flex-basis: 10em;
    }
    .live-search-bar {
        flex: 1;
        width: auto;
    }
}

.report-accordion {
    padding: 3rem;
}

@media (max-width: 600px){
    .cardheader {
        flex-direction: column;
        margin-bottom: 0.5em;
    }
    .cardheader .cardinfo {
        margin-left: 0.5em;
        max-width: 100%;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}


@media screen and (width < 550px){
    nav a {
        font-size: 90%;
    }

    nav a.api-docs {
        display: none;
    }
}



/* google sign-in button */

.gsi-material-button {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-appearance: none;
  background-color: #f2f2f2;
  background-image: none;
  border: none;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #1f1f1f;
  cursor: pointer;
  font-family: 'Roboto', arial, sans-serif;
  font-size: 14px;
  height: 40px;
  letter-spacing: 0.25px;
  outline: none;
  overflow: hidden;
  padding: 0 12px;
  position: relative;
  text-align: center;
  -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
  transition: background-color .218s, border-color .218s, box-shadow .218s;
  vertical-align: middle;
  white-space: nowrap;
  width: auto;
  max-width: 400px;
  min-width: min-content;
}

.gsi-material-button .gsi-material-button-icon {
  height: 20px;
  margin-right: 12px;
  min-width: 20px;
  width: 20px;
}

.gsi-material-button .gsi-material-button-content-wrapper {
  -webkit-align-items: center;
  align-items: center;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: space-between;
  position: relative;
  width: 100%;
}

.gsi-material-button .gsi-material-button-contents {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  font-family: 'Roboto', arial, sans-serif;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

.gsi-material-button .gsi-material-button-state {
  -webkit-transition: opacity .218s;
  transition: opacity .218s;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.gsi-material-button:disabled {
  cursor: default;
  background-color: #ffffff61;
}

.gsi-material-button:disabled .gsi-material-button-state {
  background-color: #1f1f1f1f;
}

.gsi-material-button:disabled .gsi-material-button-contents {
  opacity: 38%;
}

.gsi-material-button:disabled .gsi-material-button-icon {
  opacity: 38%;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state,
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
  background-color: #001d35;
  opacity: 12%;
}

.gsi-material-button:not(:disabled):hover {
  -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
  background-color: #001d35;
  opacity: 8%;
}


/* 
 * 
 * NAVBAR 
 *
 * */

/* ---------------------------------------------------------------------- */
/* navbar: bar container at the top of the screen */

.navbar {
    /* fixed height, row-layout, items fill height */
    height: 2.5rem;
    width: 100%;

    display: flex;
    flex-direction: row;
    align-items: stretch;

    /* no padding or margin; fill container */
    padding: 0em;
    margin: 0em;

    /* charcoal with gray text */
    background-color: #36454F;
    color: #f2f2f2;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

@media print {
    .navbar {
        display: none;
    }
}


/* ---------------------------------------------------------------------- */
/* top-level elements within the navbar */

/* PLAIN text */
.dropbtn, .hamburger {
    all: unset;
}

.navbar {
  z-index: 9999;
}

.navbar a, .mobile-menu a {
    text-decoration: none;
    color: inherit;
    font-weight: inherit;
    font-shape: inherit;
    font-size: inherit;
}

/* top-level items: center content vertically */
.navbar a, .navbar div.dropdown, .hamburger, .navbar div.auth-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
}

/* separate horizontally by 2em */
.navbar a, .dropbtn, .hamburger, .navbar div.auth-links,
.mobile-menu a, .mobile-menu div.auth-links {
    padding: 0em 1em;
    margin: 0;
    border-radius: 0;
}

/* button acts like a link */
.dropbtn, .hamburger {
    cursor: pointer;
    display: inline-block;
    height: 100%;
}

/* change color on hover */
.navbar a:hover, .navbar .dropbtnlink:hover, .navbar div.auth-links:hover {
    background-color: #94acbf;
    color: #000;
    transition: all 0.2s ease-in-out;
}

/* add an arrow to buttons indicate that a dropdown exists */
.dropbtn::after {
    content: "▾";
    font-size: 0.8em;
    margin-left: 6px;
    display: inline-block;
    transition: transform 0.5s ease-in-out;
}

/* rotate caret when dropdown is open */
.dropdown:hover .dropbtn::after {
    transform: rotate(-180deg);
}


/* ---------------------------------------------------------------------- */
/* auth links flush to the right */

.navbar div.auth-links, .navbar a.auth-links {
    margin-left: auto;
}

/* use javascript to switch these when logged in */
.navbar div.auth-links.login, .navbar a.auth-links.login {
    display: flex;
}

.navbar div.auth-links.logout, .navbar a.auth-links.logout {
    display: none;
}


/* ---------------------------------------------------------------------- */
/* hamburger menu */

.hamburger {
    display: none;              /* hide by default */
    font-size: 1.7rem;
    translate: 0 -2px;
}


/* ---------------------------------------------------------------------- */
/* dropdown element appears on hover */

.dropdown {
    position: relative;
}

.dropdown-content {
    /* hide by default */
    display: block; /* keep it in the layout but invisible */
    opacity: 0;
    visibility: hidden; /* ensures it's not interactive when hidden */

    max-height: 0; /* start collapsed */
    overflow: hidden; /* hide overflowing content */
    transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out, visibility 0.5s;

    /* position it just below the navbar */
    position: absolute;
    left: 0;
    top: 100%;

    min-width: 100%;     /* makes the dropdown as wide as the parent */
    white-space: nowrap; /* prevents text from wrapping */

    background-color: #536a79;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);

    padding-bottom: 0.5em;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.dropdown-content a {
    padding: 0.5em 1em;
}

/* reveal dropdown-content on hover */
.dropdown:hover .dropdown-content {
    opacity: 1;
    visibility: visible;
    max-height: 500px; /* Large enough for the dropdown content */
}

.navbar a.hidedesktop, .navbar div.dropdown.hidedesktop {
    display: none;
}

/* ---------------------------------------------------------------------- */
/* for phone screens (<550px) */

/* hide unnecessary items from the navbar menu */
@media screen and (max-width: 550px) {
    .navbar a, .navbar div.dropdown {
        display: none;
    }
    .navbar a.showphone, .navbar div.dropdown.showphone {
        display: flex;
    }
    .hamburger {
        display: flex;
    }
}
@media screen and (min-width: 551px) and (max-width: 770px) {
    .navbar a, .navbar div.dropdown {
        display: none;
    }
    .navbar a.showphone, .navbar div.dropdown.showphone,
    .navbar a.showtablet, .navbar div.dropdown.showtablet {
        display: flex;
    }
    .hamburger {
        display: flex;
    }
}

/* create a dropdown mobile menu; hidden by default */
.mobile-menu {
    display: none;
    flex-direction: column;

    /* position immediately below navbar */
    position: absolute;
    top: 2.5rem;
    left: 0;
    width: 100%;

    padding: 0.5em 0;

    /* charcoal with gray text */
    background-color: #36454F;
    color: #f2f2f2;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

@media print {
    .mobile-menu {
        display: none;
    }
}


/* mobile menu links */
.mobile-menu a, .mobile-menu .dropdown {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    display: block;
}

.mobile-menu .dropdown-content {
    position: relative;

    padding: 0;
    padding-left: 1em;          /* indent slightly */
    border-radius: 0;

    /* hide by default */
    display: block;          /* keep it in the layout but invisible */
    opacity: 0;
    max-height: 0;              /* start collapsed */
    overflow: hidden;           /* hide overflowing content */
    visibility: hidden; /* ensures it's not interactive when hidden */
    transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out, visibility 0.5s;
}

/* reveal dropdown on hover */
.mobile-menu .dropdown:hover .dropdown-content {
    opacity: 1;
    visibility: visible;
    max-height: 500px;
}

/* HACK to isolate logo link from .navbar a styles — this link wraps
   an image, not text */
nav.navbar a.inline-logo-link {
    all: unset;
    display: inline-block;
    cursor: pointer;
}

nav.navbar img.inline-logo {
    height:100%;
    padding: 0;
    margin-top: 0em;
    margin-bottom: 0em;
    margin-left:1.5em;
    margin-right:4em;
    max-height: 40px;
}

@media (max-width: 899px) {
    nav.navbar a.inline-logo-link {
        display: none;
    }
}



/* MANTINE */ 
/* MANTINE */ 

/* Fix CodeHighlight copy button positioning and styling */
.mantine-CodeHighlight-root {
    position: relative !important;
}
.mantine-CodeHighlight-copy {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    z-index: 10 !important;
}
.mantine-CodeHighlight-copy:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}
.mantine-CodeHighlight-controls {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

.dmc-select-input {
    background-color: #f5efe3!important;
}

.dmc-dropdown{
    background-color: #faf4e8 !important;
}

.dmc-item:hover {
    background-color: #e3f2fd !important;
}

.dmc-select-input:focus {
    outline: none;
    border-color: #326750;
    box-shadow: 0 0 0 2px rgba(50, 103, 80, 0.2);
}



/* Links */
a.weblink {
    text-decoration: none;
    color: #326750;
    font-weight: bold;
    transition: background 0.1s ease-in-out, text-decoration 0.1s ease-in-out; /* Smooth transition */
    padding: 2px 5px; /* Add extra padding for larger highlight */
    margin: -2px -5px; /* Counteracts padding to prevent size shift */
}

a.weblink:hover {
    color: #1e4636; /* Darker green */
    background: rgba(50, 103, 80, 0.1); /* Subtle highlight on hover */
    border-radius: 5px;
}

a.follow-me::after {
    content: "→";
    display: inline-block;
    margin-left: 0.3em;
    transition: transform 0.2s ease-in-out; /* smooth hover effect */
}

/* External links (open in new tab) */
a.follow-me.external::after {
    content: "\00A0↗";
}

a.follow-me:hover::after {
    transform: translateX(3px); /* moves arrow slightly on hover */
}

a.follow-me.external:hover::after {
    transform: translate(2px, -2px); /* moves arrow slightly on hover */
}


div.build-advanced-report {
    margin-top: .5em;
}

form.advanced-filters {
    width: 100%;
}

form.advanced-filters label {
    font-family: "Source Sans 3", sans-serif;
    font-weight: 600;
    display: block;
    margin-bottom: 0.4em;
    margin-top: 1em;
}

form.advanced-filters details {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    border: 1px solid #ddd;
    border-radius: 6px;
    background-color: #f5f3ee;
    padding: 1em;
}

form.advanced-filters summary {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 600;
    font-size: 10pt;
    color: #326750;
    cursor: pointer;
    margin-bottom: 0.5em;
}

form.advanced-filters summary:hover {
    color: #214535;
}

form.advanced-filters textarea{
  background-color: #fdf6e3; /* Solarized Light base3 */
  color: #657b83; /* Solarized Light base00 */
  border: 1px solid #93a1a1; /* Solarized Light base1 */
  font-family: 'Consolas', 'Monaco', monospace; /* Optional: monospace font */
  height: 16ex;
}

form.advanced-filters textarea:focus {
  background-color: #fdf6e3; /* Solarized Light base3 */
  color: #657b83; /* Solarized Light base00 */
  border: 1px solid #93a1a1; /* Solarized Light base1 */
  font-family: 'Consolas', 'Monaco', monospace; /* Optional: monospace font */
  outline: none;
  border-color: #268bd2; /* Solarized blue */
  box-shadow: 0 0 5px rgba(38, 139, 210, 0.3);
}


div.error-message {
    color: #b22222;
    padding: 10px;
    border: 1px solid #b22222;
    border-radius: 8px;
    background: #ffe6e6;
}

div.warning-message {
    color: #b8860b;
    padding: 10px;
    border: 1px solid #daa520;
    border-radius: 8px;
    background: #fff8dc;
}

div.error-message p.error-message-header,
div.warning-message p.warning-message-header{
    font-family: "Source Sans 3", sans-serif;
    font-weight: 600;
    margin-top: 0px;
}

div.error-message p.error-message-content,
div.warning-message p.warning-message-content{
    font-weight: normal;
    font-family: "Inconsolata", monospace;
    margin-bottom: 0px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}


/* **************** */ 
/* Scrollbar */
/* **************** */ 

::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.1);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.2);
}