body {
  font-family: 'Poppins';
  background: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));/*, url("../img/MID.png");*/
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Poppins';
}

a {
  color: #1E86B3;
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
  font-weight: bold;
}
a:hover {
  color: #114B64;
  text-decoration: underline;
}

p {
  line-height: 1.75;
}

.text-faded {
  color: rgba(255, 255, 255, 0.3);
}

.site-heading {
  margin-top: 0rem;
  margin-bottom: 0rem;
  text-transform: uppercase;
  line-height: 1;
  font-family: 'Poppins';
}

.site-heading .site-heading-upper {
  display: block;
  font-size: 2rem;
  font-weight: 800;
}

.site-heading .site-heading-lower {
  font-size: 5rem;
  font-weight: 100;
  line-height: 4rem;
}

.page-section {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.section-heading {
  text-transform: uppercase;
}

.section-heading .section-heading-upper {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  padding-bottom:.5rem;

}

.section-heading .section-heading-lower {
  display: block;
  font-size: 3rem;
  font-weight: 100;
}

.bold {
  font-weight: 300 !important;
}

.section-heading .section-heading-under {
  display: block;
  font-size: 1rem;
  text-transform: none;
  font-weight: 300;
  margin-top:.5rem;
}

.bg-faded {
  background-color: rgba(255, 255, 255, 0.85);
}

#mainNav {
  background-color: rgba(12, 54, 74, 0.89);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  font-family: 'Poppins';
}

#mainNav .navbar-brand {
  color: #ffffff;
}

#mainNav .navbar-nav .nav-item .nav-link {
  color: #ffffff;
  font-weight: 800;
}

#mainNav .navbar-nav .nav-item.active .nav-link {
  color: #FFF8DC !important;
  font-weight: 900;
  text-decoration: underline;
}

#mainNav .navbar-nav .nav-item .nav-link {
font-size: 1.1rem;
}
#mainNav .navbar-nav .nav-item .nav-link:hover {
color: #DFB1AA;
text-decoration: none;
}
#mainNav .navbar-nav .nav-item.active .nav-link:hover {
color: #ffffff;
text-decoration: underline;
}

@media (max-width: 992px) {  
    .brand-logo {
        height: 25px; 
    }
}


.btn-xl {
  font-weight: 700;
  font-size: 0.8rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.intro {
  position: relative;
}

@media (min-width: 992px) {
  .intro .intro-img {
    width: 75%;
    float: left;
  }
  .intro .intro-text {
    left: 600;
    width: 60%;
    margin-top: 3rem;
    background-color: rgba(24, 64, 8);
    color: cornsilk;
    position: absolute;
  }
  .intro .intro-text .intro-button {
    width: 100%;
    left: 0;
    position: absolute;
    bottom: -2rem;
  }
}

@media (min-width: 1200px) {
  .intro .intro-text {
    width: 45%;
  }
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}

#page-content {
    flex: 1 0 auto;
}

footer {
    flex-shrink: 0;
}



.cta-small {
  padding-top: 3rem;
  padding-bottom: 0rem;
  background-color: rgb(242, 245, 240);
}

.cta {
    display: flex;
    flex-direction: column;  /* allow inner content stacking */
    flex-grow: 1;            /* <-- key to fill remaining height */
    justify-content: flex-start;  /* optional: vertically center inner content */
    background-color: rgb(242, 245, 240);
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.cta.cta-nmr {
    background-color: rgb(242, 247, 250) !important;
}



.cta .cta-inner {
  position: relative;
  padding: 3rem;
  margin: 0.5rem;
  background-color: rgba(12, 54, 74);
  color: cornsilk;
  width: 100%;
}

.cta .cta-inner:before {
  border-radius: 0.5rem;
  content: '';
  position: absolute;
  top: -0.5rem;
  bottom: -0.5rem;
  left: -0.5rem;
  right: -0.5rem;
  border: 0.25rem solid rgba(255, 255, 255, 0.85);
}

.cta .cta-innerv {
  position: relative;
  padding: 3rem;
  margin: 0.5rem;
  background-color: rgba(255, 255, 255, 0.85);
}

@media (min-width: 992px) {
  .about-heading .about-heading-img {
    position: relative;
    z-index: 0;
  }
  .about-heading .about-heading-content {
    margin-top: -5rem;
    position: relative;
    z-index: 1;
  }
}

@media (min-width: 992px) {
  .product-item .product-item-title {
    position: relative;
    z-index: 1;
    margin-bottom: -3rem;
  }
  .product-item .product-item-img {
    position: relative;
    z-index: 0;
    max-width: 60vw;
  }
  .product-item .product-item-description {
    position: relative;
    z-index: 1;
    margin-top: -3rem;
    max-width: 50vw;
  }
}



@media (min-width: 992px) {
  .list-hours {
    width: 50%;
    font-size: 1.1rem;
  }
}

.address strong {
  font-size: 1.2rem;
}

.footer {
   background-color: rgba(12, 54, 74, 0.8);
}







.font-weight-light {
  font-weight: 100 !important;
}

.mbtm{
  padding-top: 5rem;
}

.mbt{
  padding-top: 2rem;
}

.mbt1{
  padding-top: 1.25rem;
}

a.link{
  color: rgba(255, 255, 255, 0.7);
}

a.link:hover{
  text-decoration: none;
  color: rgba(255, 255, 255, 0.4);
}

.section-content{
  font-family: 'Poppins' !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 28px !important;
}

ul.errorlist{
  padding-top: .75rem;
  font-style: italic;
  color: red;
}


.img-fluid-header {
  max-width: 60%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-height: 200px;
}


/* MID Logo navbar */
.logo-brand .brand-logo {
    height: 35px;
    width: auto;
    display: block;
}

/* Dropdown menu */
.dropdown-menu .dropdown-item {
    /*text-transform: uppercase;*/
    font-weight: 600;
}

.text-muted-custom {
    color: #ffffff;
    opacity: 0.80;
}

.text-good {
    color: #647D54;
}

.text-bad {
    color: #B95546;
}

.text-ppm-value{
  color: #1A749C;
  font-weight: 600;
}

.table td,
.table th {
    width: 50%;
    text-align: center;
    vertical-align: middle;
}

.fixed-table-3 {
    width: 100%;
    table-layout: fixed;
}

.fixed-table-3 th,
.fixed-table-3 td {
    width: 33.3333%;
    text-align: center;
    vertical-align: middle;
}


.table-wrapper {
    max-width: 80%;
    margin: 0 auto 2rem auto;
}

.nmr-id-table {
  table-layout: fixed !important;
}

.nmr-table-plot-margin {
    margin-bottom: 3rem !important; 
}

/* Padding Larger than bootstrap defined*/
.p-6 {
  padding: 5rem !important;
}

.pt-6,
.py-6 {
  padding-top: 5rem !important;
}

.pr-6,
.px-6 {
  padding-right: 5rem !important;
}

.pb-6,
.py-6 {
  padding-bottom: 5rem !important;
}

.pl-6,
.px-6 {
  padding-left: 5rem !important;
}






/* DROPDOWN */
.dropdown-item.active, .dropdown-item:active {
  color: #145978;
  text-decoration: none;
  background-color: #E9F6FB;
}

/* Flechita de la barra de navegacion */
.navbar .dropdown-toggle::after {
  transition: transform 0.8s ease;
}
.navbar .dropdown.show .dropdown-toggle::after {
  transform: rotate(180deg);
}







.offset-md-05 {
margin-left: 4.11111%;
}





/* Make nav-pills buttons full width */
.nav-pills .nav-link {
    width: 100%;
    margin-bottom: 10px;
    text-align: left;
}

/* Optional: highlight active tab */
.nav-pills .nav-link.active {
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}



.modal-xxl {
    max-width: 80%;
}

/* Left menu stays sticky */
#userGuideTabs {
    position: sticky;
    top: 20px;
    overflow-y: auto;
}


/* Make nav-pills buttons full width and spaced */
.nav-pills .nav-link {
    width: 100%;
    margin-bottom: 10px;
    text-align: left;
}

/* Highlight active tab nicely */
.nav-pills .nav-link.active {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

#userGuideModal .modal-dialog {
    height: 90vh;
}

#userGuideModal .modal-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#userGuideModal .modal-body {
    flex: 1 1 auto;
    overflow: hidden;
}

#userGuideModal .modal-body .row {
    height: 100%;
}

#userGuideTabContent {
    flex-grow: 1;
    overflow-y: auto;
    min-height: 0;
}

#userGuideModal .col-md-10 {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#userGuideTabContent {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

#userGuideModal .col-md-9 {
    height: 100%;
}
html.modal-open,
body.modal-open {
    overflow: hidden !important;
    height: 100%;
}

#userGuideModal .col-md-2,
#userGuideModal #userGuideTabs {
    overflow: visible;
}


.user-guide-btn {
    display: inline-flex;
    align-items: center;      /* vertical centering */
    gap: 0.5rem;
}

.user-guide-btn img {
    height: 90%;
    width: auto;              /* keep aspect ratio */
    max-height: 1.5em;        /* safety cap (optional) */
}



.figure-caption {
  color: #6c757d;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.3;
}


.no-padding-top {
  padding-top: 0rem !important;
}
.no-padding-left {
  padding-left: 0rem !important;
}
.no-padding-bottom {
  padding-bottom: 0rem !important;
}
.no-padding-right {
  padding-right: 0rem !important;
}





.sticky-image {
    position: sticky;
    top: 60px;
    z-index: 100;
    transition: all 0.3s ease;
}

/* Inner wrapper */
.sticky-inner {
    width: 50%;
    margin-left: 25%;
    transition: transform 1s ease, opacity 1s ease;
    transform-origin: right top; /* anchor */
    
    border: 2px solid #114B64;        /* Blue BORDER */
    box-sizing: border-box;       /* important: prevents size jump */
    border-radius: 6px;
}

/* Sticky state */
.sticky-image.stuck .sticky-inner {
    transform: scale(0.75); /* shrink */
    opacity: 0.85;
}

/* Hover to temporarily grow */
.sticky-image.stuck .sticky-inner:hover {
    transform: scale(2);  /* grow back to full size */
    opacity: 1;
}

/* Image */
.sticky-inner img {
    width: 100%;
    height: auto;
    transform-origin: right center;
}


/* When sticky is active */
@supports (position: sticky) {
    .sticky-image:has(.sticky-inner) {
        align-self: flex-start;
    }

    .sticky-image.stuck .sticky-inner {
        width: 35%;
        margin-left: auto;   /* push to the right */
        transform: scale(0.85);
    }
}


/* disable shrinking on mobile */
@media (max-width: 768px) {
    .sticky-image.stuck .sticky-inner {
        width: 100%;
        transform: none;
        margin-left: 0;
    }
}



.plot-square {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.plot-square > div {
  position: absolute;
  inset: 0;
}


.plot-wrapper {
    max-width: 80%;
    margin: 0 auto 2rem auto;
}

.plot-wrapper .plotly-graph-div {
    height: 500px !important;
}



.form-control,
.form-select {
    width: 100%;
    height: calc(2.25rem + 1px);
}


.message-textarea {
  min-height: 220px; /* adjust as needed */
}


.collapse img {
  margin-top: 0.5rem;
}
button[aria-expanded="true"]::after {
  content: " ▲";
}
button[aria-expanded="false"]::after {
  content: " ▼";
}


.text-danger {
  color: #B95546 !important;
}