html {
    height: 100%;
}
body {
    height: 100%;
    /* padding-top: 9rem; */
    font-family: "Eina 03 Regular", Arial, sans-serif;
}

.main-wrap {
    height: 100%;
}
.main-content {
    height: 100%;
}

.content-wrap {
    flex-grow: 1;
    position: relative;
}

#page-content {
    margin-top: 2rem;
    height: 100%;
}

/* BEGIN - pre-footer and footer */
.pre-footer {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
}

.footer {
    background-color: #005c50;
    margin-top: auto;
}
.footer-content {
    padding: 12px 0;
}

.footer-home-link.btn {
        display: flex;
        align-items: center;
        padding-top: 16px;
        font-size: 0.9rem;
        --bs-btn-bg: #005c50;
        --bs-btn-color: #FFFFFF;
        --bs-btn-border-color: #005c50;
        --bs-btn-hover-color: #E75300;
        --bs-btn-hover-border-color: #005c50;
        --bs-btn-hover-bg: #005c50;
        --bs-btn-active-color: #E75300;
        --bs-btn-active-bg: #005c50;
        --bs-btn-active-border-color: #005c50;
        --bs-btn-disabled-bg: #ccc;
        --bs-btn-disabled-border-color: #ccc;
}

.footer-copyright {
    color: #fff;
    gap: 24px;
    align-items: center;
}
.footer-copyright a {
    color: #fff;
    text-decoration: none;
}
.footer-copyright a:hover {
    text-decoration: underline;
}
/* END - pre-footer and footer */

/* Override bootstrap styles for toast alerts */
.toast {
    --bs-toast-font-size: 1rem;
    --bs-toast-bg: #FFFFFF;
}

.selectBoxFit {
    width: 100%; /* Set the dropdown width to 100% of the container */
    padding: 5px; /* Adjust padding as needed */
}

.navbar-text {
    color: #55565A
}

.navbar-text > a {
    color: #006E62;
    font-weight: bold;
    text-decoration: none;
}

/* Override bootstrap styles for navbar toggler */
.navbar-toggler {
    --bs-navbar-toggler-border-color: #006E62;
    width: 40px;
    height: 40px;
}

.navbar-toggler-icon {
	width: 1.75em;
	height: 1.75em;
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba(0, 110, 97, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}

/* Custom styles for range slider elements */
.dual-range-field {
    margin-top: .25rem;
}

.form-range-hide-upper::-webkit-slider-runnable-track {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-color: transparent !important;
}

.form-range-hide-upper::-moz-range-track {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-color: transparent !important;
}

.dual-range-field input[type=range] {
    position: absolute;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    width: 90%;
    margin: 0;
}

.dual-range-field input[type=range]:first-of-type {
    pointer-events: auto;
}

.dual-range-field input[type=range]::-webkit-slider-thumb {
    pointer-events: all;
    width: 17px;
    height: 17px;
    -webkit-appearance: none;
    appearance: none;
}

.dual-range-field input[type=range]::-moz-range-thumb {
    pointer-events: all;
    width: 20px;
    height: 20px;
    border: none;
}

.slider-value {
    margin-top: 2rem;
}

/* Custom navbar styles */
.nav-btn {
    padding: 0.8rem;
}

/* Override bootstrap styles for navbar dropdown menu */
.dropdown-menu {
    --bs-dropdown-padding-y: 0;
    --bs-dropdown-border-color: #006E62;
    --bs-dropdown-border-radius: 0;
}

.btn {
    border-radius: 0;
    font-weight: bold;
}

/* To override Bootstrap colors nicely, set --bs variables
   For button states:
       - hover color is ~15% more black (K) than the default in CMYK
       - active color is ~20% more black in CMYK
       - set disabled colors to the same as default
 */
.btn-primary {
    --bs-btn-bg: #006E62;
    --bs-btn-border-color: #006E62;
    --bs-btn-hover-bg: #00473f;
    --bs-btn-hover-border-color: #00473f;
    --bs-btn-active-bg: #003b34;
    --bs-btn-active-border-color: #003b34;
    --bs-btn-disabled-bg: #006E62;
    --bs-btn-disabled-border-color: #006E62;
}

.btn-outline-primary {
    --bs-btn-color: #006E62;
    --bs-btn-border-color: #006E62;
    --bs-btn-hover-bg: #006E62;
    --bs-btn-hover-border-color: #006E62;
    --bs-btn-active-bg: #006E62;
    --bs-btn-active-border-color: #006E62;
    --bs-btn-disabled-color: #006E62;
    --bs-btn-disabled-border-color: #006E62;
}

.btn-secondary {
    --bs-btn-bg: #E75300;
    --bs-btn-border-color: #E75300;
    --bs-btn-hover-bg: #c24800;
    --bs-btn-hover-border-color: #c24800;
    --bs-btn-active-bg: #b54300;
    --bs-btn-active-border-color: #b54300;
    --bs-btn-disabled-bg: #E75300;
    --bs-btn-disabled-border-color: #E75300;
}

.btn-outline-secondary {
    --bs-btn-color: #E75300;
    --bs-btn-border-color: #E75300;
    --bs-btn-hover-bg: #E75300;
    --bs-btn-hover-border-color: #E75300;
    --bs-btn-active-bg: #E75300;
    --bs-btn-active-border-color: #E75300;
    --bs-btn-disabled-color: #E75300;
    --bs-btn-disabled-border-color: #E75300;
}

.btn-info {
    --bs-btn-bg: #008FBE;
    --bs-btn-border-color: #008FBE;
    --bs-btn-hover-bg: #007399;
    --bs-btn-hover-border-color: #007399;
    --bs-btn-active-bg: #00698c;
    --bs-btn-active-border-color: #00698c;
    --bs-btn-disabled-bg: #008FBE;
    --bs-btn-disabled-border-color: #008FBE;
}

.btn-outline-info {
    --bs-btn-color: #008FBE;
    --bs-btn-border-color: #008FBE;
    --bs-btn-hover-bg: #008FBE;
    --bs-btn-hover-border-color: #008FBE;
    --bs-btn-active-bg: #008FBE;
    --bs-btn-active-border-color: #008FBE;
    --bs-btn-disabled-color: #008FBE;
    --bs-btn-disabled-border-color: #008FBE;
}

.border-primary {
    border-color: #006E62 !important;
}

.border-secondary {
    border-color: #E75300 !important;
}

.svg-card-text {
    fill: #FFFFFF;
    font-weight: bold;
}

/* BEGIN - Header Navigation */
.nav-tabs {
    --bs-nav-tabs-border-color: #006E62;
    --bs-nav-tabs-border-width: 2px;
    --bs-nav-tabs-border-radius: 0;
    --bs-nav-tabs-link-hover-border-color: #00473f;
    --bs-nav-tabs-link-active-color: #FFFFFF;
    --bs-nav-tabs-link-active-bg: #006E62;
    --bs-nav-tabs-link-active-border-color: #006E62;
}

#navWrapper {
    --bs-nav-border-color: #dbd9d6;
    background-color: #fff;
    position: sticky;
    top:0;
    z-index: 100;
}

.nav {
    font-size: 1.25rem;
    --bs-nav-link-color: #006E62;
    --bs-nav-link-font-weight: bold;
    --bs-nav-link-hover-color: #00473f;
    
}

.nav-wrap {
    position: relative !important;
}

.navbar-brand {
    width: 100px;
    max-width: 100px;
    padding: 12px 12px 12px 0;
    border-right: 1px solid #dbd9d6;
}

.navbar-nav .nav-item a {
    display: flex;
    align-items: center;
    padding-top: 16px;
    --bs-btn-bg: transparent;
    --bs-btn-color: #1b1b1b;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #E75300;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-hover-bg: transparent;
    --bs-btn-active-color: #E75300;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-bg: #ccc;
    --bs-btn-disabled-border-color: #ccc;
}

.navbar-nav .nav-item a svg {
    display: inline-block;
    margin-left: 6px;
}

.navbar-nav .dropdown-item {
    background-color: #006E62;
    color: #FFFFFF;
}
.navbar-nav .dropdown-item:hover {
    background-color: #006E62;
    color: #FFFFFF;
}

.nav-home-link {
    display: flex;
    align-items: center;
    padding-top: 16px;
    font-size: 0.9rem;
    --bs-btn-bg: transparent;
    --bs-btn-color: #006E62;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #E75300;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-hover-bg: transparent;
    --bs-btn-active-color: #E75300;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-bg: #ccc;
    --bs-btn-disabled-border-color: #ccc;
}

.nav-my-lists-link {
    display: flex;
    align-items: center;
    padding-top: 12px;
    font-size: 1.1rem;
    --bs-btn-bg: transparent;
    --bs-btn-color: #1b1b1b;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #E75300;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-hover-bg: transparent;
    --bs-btn-active-color: #E75300;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-bg: #ccc;
    --bs-btn-disabled-border-color: #ccc;
    border-left: 1px solid #dbd9d6;
}

.nav-user-btn {
    display: flex;
    align-items: center;
    padding-top: 6px;
    font-size: 1.1rem;
    --bs-btn-bg: transparent;
    --bs-btn-color: #1b1b1b;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #E75300;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-hover-bg: transparent;
    --bs-btn-active-color: #E75300;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-bg: #ccc;
    --bs-btn-disabled-border-color: #ccc;
}

.nav-user-btn .initials {
    color: #fff;
    background-color: #2e6c61;
    border-radius: 100%;
    width: 33px;
    height: 33px;
    font-size: 0.9rem;
    font-weight: 400;
    display: inline-block;
    line-height: 33px;
    margin-top: -3px;
}

.nav-user-btn .name {
    display: inline-block;
    margin: 0 8px;
}

#navWrapper .user-info ul li {
    padding: 3px 12px;
    background-color: #f2f2f2;
}

.nav-my-lists-link {
    padding-top: 6px;
}

.nav-btn-drop:after {
    display: none;
}
.nav-btn-drop svg,
.nav-btn-drop svg path {
    transition: all 0.15s linear;
}
.nav-btn-drop.show svg {
    transform: rotate(180deg);
}
.nav-btn-drop.show svg path {
    fill: #E75300;
}

/* END - Header Navigation */

/* BEGIN - Home Page Main Links */
.main-links-title h1 {
    color:#006E62;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 24px;
}

.main-links-title .options {
    visibility: hidden;
}

.main-links-row {
    flex-direction: row;
    gap: 12px;
}

.main-link {
    display: block;
    padding: 28px;
    background-color: #fff;
    box-shadow: 0 0 0 #fff, 0 8px 16px rgba(0,0,70, .25);
    text-decoration: none;
    border-top: 5px solid #ccc;
    color: #1b1b1b;
    flex: 1;
}
.main-link.col1 {
    border-top-color: #3FBFAD;
    position: relative;
}
.main-link.col2 {
    border-top-color: #A5D400;
    position: relative;
}
.main-link.col3 {
    border-top-color: #008FBE;
    position: relative;
}

.main-link h3 {
    font-weight: 700;
    font-size: 1.5rem;
    transition: all 0.2s linear;
}
.main-link p {
    padding: 6px 0;
    font-weight: 500;
}
.main-link .arrowtext {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    bottom: 0;
    padding-bottom: 2rem;
}
.main-link .arrowtext span {
    color: #005c50;
    font-weight: 700;
    display: inline-block;
    transition: all 0.2s linear;
}

.main-link .arrowtext svg {
    display: inline-block;
    margin-left: 6px;
    transition: all 0.2s linear;
}
.main-link .arrowtext svg path {
    transition: all 0.2s linear;
}

/*.main-link:hover h3 {
    color: #E75300;
}*/
.main-link:hover p {
    color: #1b1b1b;
}
.main-link:hover .arrowtext span {
    color: #E75300;
}
.main-link:hover .arrowtext svg {
    margin-left: 10px;
}
.main-link:hover .arrowtext svg path {
    fill: #E75300;
}
/* BEGIN - Home Page Main Links */

/* BEGIN - Home Page "How It Works" steps */
.how-it-works {
    background-color: #006e62;
    padding: 60px 0;
    margin-top: auto;
}
.how-it-works .inner-wrap {
    padding: 12px 0 12px 24px;
}
.how-it-works h4 {
    color: #fff;
    font-weight: 700;
    margin-bottom: 20px;
}
.how-it-works .steps-row {
    
}
.step-item {
    width: 25%;
    color: #fff;
    padding-right: 24px;
    font-size: 1.25rem;
}
.step-item h1 {
    color: #a5d400;
    font-weight: 700;
    font-size: 3.5rem;
}
/* END - Home Page "How It Works" steps */

.plot-card {
    --bs-card-border-width: 0;
    --bs-card-border-radius: 0;
}

.plot-card-header {
    --bs-card-cap-color: #006E62;
    --bs-card-cap-bg: #FFFFFF;
    --bs-card-border-color: #006E62;
    --bs-card-border-width: 2px;
    border-radius: 0;
}

.form-control {
    border-radius: 0;
}
 /* Style the form - display items horizontally */
.form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

/* Add some margins for each label */
.form-inline label {
  margin: 5px 10px 5px 0;
}

/* Style the input fields */
.form-inline input {
  vertical-align: middle;
  margin: 5px 10px 5px 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}

/* Style the submit button */
.form-inline button {
  padding: 10px 20px;
  background-color: dodgerblue;
  border: 1px solid #ddd;
  color: white;
}

.form-inline button:hover {
  background-color: royalblue;
}

.big-spinner {
    width: 6rem;
    height: 6rem;
    color: #6c757d;
    border-width: .5rem;
}

.feedback-content {
    width: 225px;
}

/* Add responsiveness - display the form controls vertically instead of horizontally on screens that are less than 800px wide */
/* TODO: Use bootstrap to do this formatting */
@media (max-width: 1200px) {
    .nav-links-menu {
        display: block;
        position: absolute;
        top: 100%;
        background-color: #fff;
        border: 1px solid #333;
        width: 100%;
    }

    #navLinksWrap > div {
        flex-direction: column !important;
        justify-content: center;
    }
    #navLinksWrap > div > div {
        justify-content: center;
        width: 100%;
    }
}
@media (max-width: 800px) {
  .form-inline input {
    margin: 10px 0;
  }

  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }

  .main-links-row {
    flex-direction: column;
  }
}
@media (max-width: 990px) {
    .step-item {
        width: 50%;
    }
}
@media (max-width: 600px) {
    .footer-content {
        flex-direction: column;
    }
    .footer-content > div {
        width: 100%;
        justify-content: center;
        margin-bottom: 1rem;
    }
}

@media (max-width: 550px) {
    .step-item {
        width: 100%;
    }
    .main-links-title {
        flex-direction: column !important;
    }
    .main-links-title h1 {
        text-align: center;
    }
    .main-links-title .options {
        display: none;
    }
}

@media (max-width: 500px) {
    .navbar-nav {
        flex-direction: column !important;
    }
}

    .bi.bi-info-circle .tooltiptext{
        visibility: hidden;
        width: 500px;
        background-color: lightgrey;
        text-align: left;
        padding: 5px 10px;
        border-radius: 6px;
        position: absolute;
        z-index: 1;
        top: -5px;
        left: 130%;
    }
    .bi.bi-info-circle:hover .tooltiptext {
        visibility: visible;
    }

.landing-page-basic-accordion {
    --bs-accordion-btn-color: white;
    --bs-accordion-btn-bg: #006E62;
    --bs-accordion-active-color: white;
    --bs-accordion-active-bg: #006E62;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem #006E6250;
    --bs-accordion-border-radius: 0rem;
    --bs-accordion-inner-border-radius: 0rem;
}
.landing-page-basic-accordion-header:hover .accordion-button {
    background-color: #00473F;
}
.landing-page-saved-lists-accordion {
    --bs-accordion-btn-color: white;
    --bs-accordion-btn-bg: #E75300;
    --bs-accordion-active-color: white;
    --bs-accordion-active-bg: #E75300;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem #E7530050;
    --bs-accordion-border-radius: 0rem;
    --bs-accordion-inner-border-radius: 0rem;
}
.landing-page-saved-lists-accordion-header:hover .accordion-button {
    background-color: #C24800;
}
.landing-page-save-lists-button {
    --bs-btn-bg: #E75300;
    --bs-btn-border-color: #E75300;
    --bs-btn-hover-bg: #C24800;
    --bs-btn-hover-border-color: #C24800;
}
.accordion-button::after {
    position: absolute;
    z-index: 100;
    right: 10px;
    top: 24px;
}
.landing-page-accordion-icon {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.landing-page-text {
    color: #55565A;
}
.landing-page-accordion-body-text {
    font-size: 1.2rem;
}

.search_page_type_button:focus {
    box-shadow: 0 0 0 0.25rem #006E6250;
}

.my_lists_delete_list_button {
    --bs-btn-color: white;
    --bs-btn-hover-color: white;
    --bs-btn-bg: #E75300;
    --bs-btn-hover-bg: #C24800;
}

.my_lists_cancel_list_deletion_button {
    --bs-btn-color: white;
    --bs-btn-hover-color: white;
    --bs-btn-bg: #006E62;
    --bs-btn-hover-bg: #00473F;
}

.h4-italic {
    font-style: italic;
}

.h1-tool-heading {
    color: #006E62;
    font-weight: bold;
}

.data-recency-header {
    font-style: italic;
    font-size: medium;
}