/* Define brand */
:root,
[data-md-color-scheme="default"] {
  --md-default-bg-color: rgb(250, 250, 250);
  --md-primary-fg-color: rgb(255, 255, 255);
  --md-primary-fg-color--light: #5FFFD7;
  --md-primary-fg-color--dark: #89CFF0;
  --md-primary-bg-color: rgba(0, 0, 0, .75);
  --md-primary-bg-color--light: rgba(0, 0, 0, .54);
  --md-accent-fg-color: #89CFF0;
  --pg-light-border: rgb(229, 231, 235);
  --hb-hero-color: rgb(45, 45, 45);
}

:root,
[data-md-color-scheme="slate"] {
  --md-default-bg-color: rgb(26, 26, 27);
  --md-primary-fg-color: rgb(15, 15, 15);
  --md-primary-fg-color--light: #5FFFD7;
  --md-primary-fg-color--dark: #50C878;
  --md-primary-bg-color: rgba(0, 0, 0, .75);
  --md-primary-bg-color--light: rgba(0, 0, 0, .54);
  --md-accent-fg-color: #50C878;
  --pg-light-border: rgb(47, 47, 47);
  --hb-hero-color: #3B9E7F;
}

/* Better contrast link colors for light mode */
[data-md-color-scheme="default"]>* {
  --md-typeset-a-color: #0056b3;
  /* Deep Blue */
}

/* Better contrast link colors for dark mode */
[data-md-color-scheme="slate"]>* {
  --md-typeset-a-color: #89CFF0;
  /* Soft Light Blue */
}


.md-grid {
  margin-left: auto;
  margin-right: auto;
  max-width: 68rem;
}

.md-nav__title {
  font-size: 0.8rem;
  font-weight: 600;
  color: #808080;
}


:root {
  --md-admonition-icon--description: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.75 1.5a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25H1.75zM0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25V1.75zm9.22 3.72a.75.75 0 0 0 0 1.06L10.69 8 9.22 9.47a.75.75 0 1 0 1.06 1.06l2-2a.75.75 0 0 0 0-1.06l-2-2a.75.75 0 0 0-1.06 0zM6.78 6.53a.75.75 0 0 0-1.06-1.06l-2 2a.75.75 0 0 0 0 1.06l2 2a.75.75 0 1 0 1.06-1.06L5.31 8l1.47-1.47z"/></svg>')
}

.md-typeset .admonition.description,
.md-typeset details.description {
  border-color: rgb(30, 144, 255);
}

.md-typeset .description>.admonition-title,
.md-typeset .description>summary {
  background-color: rgba(30, 144, 255, 0.3);
  border-color: rgb(30, 144, 255);
}

.md-typeset .description>.admonition-title::before,
.md-typeset .description>summary::before {
  background-color: rgb(30, 144, 255);
  -webkit-mask-image: var(--md-admonition-icon--description);
  mask-image: var(--md-admonition-icon--description);
}

:root {
  --md-admonition-icon--guard: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8.533.133 5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667l5.25-1.68a1.748 1.748 0 0 1 1.066 0Zm-.61 1.429.001.001-5.25 1.68a.251.251 0 0 0-.174.237V7c0 1.36.275 2.666 1.057 3.859.784 1.194 2.121 2.342 4.366 3.298a.196.196 0 0 0 .154 0c2.245-.957 3.582-2.103 4.366-3.297C13.225 9.666 13.5 8.358 13.5 7V3.48a.25.25 0 0 0-.174-.238l-5.25-1.68a.25.25 0 0 0-.153 0ZM9.5 6.5c0 .536-.286 1.032-.75 1.3v2.45a.75.75 0 0 1-1.5 0V7.8A1.5 1.5 0 1 1 9.5 6.5Z"/></svg>')
}

.md-typeset .admonition.guard,
.md-typeset details.guard {
  border-color: rgb(60, 60, 60);
}

.md-typeset .guard>.admonition-title,
.md-typeset .guard>summary {
  background-color: rgba(60, 60, 60, 0.2);
  border-color: rgb(60, 60, 60);
}

.md-typeset .guard>.admonition-title::before,
.md-typeset .guard>summary::before {
  background-color: rgb(60, 60, 60);
  -webkit-mask-image: var(--md-admonition-icon--guard);
  mask-image: var(--md-admonition-icon--guard);
}

:root {
  --md-admonition-icon--deploy: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M352 256c0 22.2-1.2 43.6-3.3 64H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64h185.4c2.2 20.4 3.3 41.8 3.3 64zm28.8-64h123.1c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6 78.3 20.7 142 77.5 171.9 151.6zm-149.1 0H167.7c6.1-36.4 15.5-68.6 27-94.7 10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5 11.6 26 20.9 58.2 27 94.7zm-209 0H18.6c30-74.1 93.6-130.9 172-151.6-25.5 34.2-45.3 87.7-55.3 151.6zM8.1 192h123.1c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64H8.1C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zm186.6 254.6c-11.6-26-20.9-58.2-27-94.6h176.6c-6.1 36.4-15.5 68.6-27 94.6-10.5 23.6-22.2 40.7-33.5 51.5-11.2 10.7-20.5 13.9-27.8 13.9s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6-78.4-20.7-142-77.5-172-151.6h116.7zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6 25.5-34.2 45.2-87.7 55.3-151.6h116.6z"/></svg>')
}

.md-typeset .admonition.deploy,
.md-typeset details.deploy {
  border-color: rgb(43, 155, 70);
}

.md-typeset .deploy>.admonition-title,
.md-typeset .deploy>summary {
  background-color: rgba(43, 155, 70, 0.1);
  border-color: rgb(0, 77, 0);
}

.md-typeset .deploy>.admonition-title::before,
.md-typeset .deploy>summary::before {
  background-color: rgb(43, 155, 70);
  -webkit-mask-image: var(--md-admonition-icon--deploy);
  mask-image: var(--md-admonition-icon--deploy);
}

:root {
  --md-admonition-icon--pdf: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M64 464h32v48H64c-35.3 0-64-28.7-64-64V64C0 28.7 28.7 0 64 0h165.5c17 0 33.3 6.7 45.3 18.7l90.5 90.5c12 12 18.7 28.3 18.7 45.3V288h-48V160h-80c-17.7 0-32-14.3-32-32V48H64c-8.8 0-16 7.2-16 16v384c0 8.8 7.2 16 16 16zm112-112h32c30.9 0 56 25.1 56 56s-25.1 56-56 56h-16v32c0 8.8-7.2 16-16 16s-16-7.2-16-16V368c0-8.8 7.2-16 16-16zm32 80c13.3 0 24-10.7 24-24s-10.7-24-24-24h-16v48h16zm96-80h32c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48h-32c-8.8 0-16-7.2-16-16V368c0-8.8 7.2-16 16-16zm32 128c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16h-16v96h16zm80-112c0-8.8 7.2-16 16-16h48c8.8 0 16 7.2 16 16s-7.2 16-16 16h-32v32h32c8.8 0 16 7.2 16 16s-7.2 16-16 16h-32v48c0 8.8-7.2 16-16 16s-16-7.2-16-16V368z"/></svg>')
}

.md-typeset .admonition.pdf,
.md-typeset details.pdf {
  border-color: rgb(236, 28, 36);
}

.md-typeset .pdf>.admonition-title,
.md-typeset .pdf>summary {
  background-color: rgb(236, 28, 36, 0.2);
  border-color: rgb(236, 28, 36);
}

.md-typeset .pdf>.admonition-title::before,
.md-typeset .pdf>summary::before {
  background-color: rgb(236, 28, 36);
  -webkit-mask-image: var(--md-admonition-icon--pdf);
  mask-image: var(--md-admonition-icon--pdf);
}

/* Table */
th,
td {
  border: 1px solid var(--md-typeset-table-color);
  border-spacing: 0;
  border-bottom: none;
  border-left: none;
  border-top: none;
  font-size: 12px;
}

th {
  background: dimgrey;
  color: white;
}

.md-typeset__table {
  line-height: 1;

}

.md-typeset__table table:not([class]) {
  font-size: .74rem;
  border-right: none;
}

.md-typeset__table table:not([class]) td,
.md-typeset__table table:not([class]) th {
  padding: 9px;
}

/* buttons */
.md-typeset .md-button {
  color: var(--md-typeset-color);
  background: none;
  border: 1px solid var(--pg-light-border);
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 3px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px -1px;
}

.md-typeset .md-button--primary {
  color: var(--md-typeset-a-color);
  background-color: var(--md-primary-fg-color);
}

.md-typeset .grid.cards> :is(ul, ol)>li,
.md-typeset .grid>.card {
  /* Firefox */
  color: var(--md-typeset-color);
  background: var(--md-primary-fg-color);
  border: 1px solid var(--pg-light-border);
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 3px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px -1px;
  transition: none;
}

.md-typeset .grid.cards>:-webkit-any(ul, ol)>li,
.md-typeset .grid>.card {
  /* Webkit */
  color: var(--md-typeset-color);
  background: var(--md-primary-fg-color);
  border: 1px solid var(--pg-light-border);
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 3px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px -1px;
  transition: none;
}

.md-typeset .grid.cards> :is(ul, ol)>li:is(:focus-within, :hover),
.md-typeset .grid>.card:is(:focus-within, :hover) {
  /* Firefox */
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 3px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px -1px;
  border-color: var(--md-accent-fg-color);
}

.md-typeset .grid.cards>:-webkit-any(ul, ol)>li:-webkit-any(:focus-within, :hover) {
  /* Webkit */
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 3px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px -1px;
  border-color: var(--md-accent-fg-color);
}

/* header font */

.md-header__topic:first-child {
  font-weight: 700;
}

.md-typeset h1 {
  font-weight: 700;
  color: grey;
}


/* Correct page icon size */
.md-nav__link svg {
  width: 22px;
}


/* Make header icons smaller */
.md-header__button.md-icon svg {
  height: 1rem;
  width: 1rem;
}

/* override language selector */
.md-select button img.twemoji {
  height: 1rem;
  vertical-align: middle;
}

.md-select__link img.twemoji {
  height: 1rem;
  vertical-align: text-bottom;
  margin-right: 1%;
}

/* Custom header + nav */
.md-header>*,
.md-tabs {
  background: none;
}

[data-md-color-scheme="slate"] .md-header>*,
[data-md-color-scheme="slate"] .md-tabs {
  color: #fff;
}

.md-header__button {
  color: var(--md-default-fg-color--light);
}

.md-header,
.md-tabs {
  /* firefox fallback */
  background-color: rgba(255, 255, 255, .95);
}

[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-tabs {
  /* firefox fallback */
  background-color: rgba(9, 9, 9, 0.95);
}

@media screen and (min-width: 60em) {
  .md-search__overlay {
    background-color: transparent;
  }

  .md-search__form {
    border: 1px solid var(--pg-light-border);
    background-color: var(--md-primary-fg-color) !important;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(0, 0, 0, 0.02) 0px 1px 2px -1px;
    border-radius: 6px;
    height: 1.4rem;
  }

  [data-md-toggle="search"]:checked~.md-header .md-search__form {
    border-radius: 6px 6px 0 0;
  }

  [dir="ltr"] .md-search__output {
    top: initial;
    border-radius: 0 0 6px 6px;
  }

  [data-md-toggle="search"]:checked~.md-header .md-search__output {
    box-shadow: 0 0 .6rem rgba(0, 0, 0, .07);
  }

  .md-search__input {
    font-size: .6rem;
  }

  .md-search__options {
    top: .05rem;
  }

  .md-search__icon,
  .md-search__input::placeholder {
    color: var(--md-default-fg-color--light) !important;
  }

  .md-search__icon svg {
    width: .75rem;
    height: .75rem;
  }
}

.md-footer {
  margin-top: 1rem;
  border-top: 1px solid var(--pg-light-border);
}

/* Wide card grids */
.md-typeset .grid.wide {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 768px) {
  .md-typeset .grid.wide {
    grid-template-columns: repeat(1, 1fr);
  }
}


/* Primary buttons */
.md-main .md-button--primary {
  color: var(--md-primary-fg-color);
  background-color: var(--hb-hero-color);
  border-color: transparent;
}

.md-typeset hr {
  margin-top: 2rem;
  margin-bottom: 2rem;
}


/* Testimonial cards */
.testimonial {
  padding: 40px 20px;
  border: 1px solid var(--pg-light-border);
  border-radius: 6px;
  background-color: var(--md-primary-fg-color);
  /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s; */

  .quote {
    font-size: 0.9rem;
    font-weight: 300;
  }

  .headshot {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    object-fit: cover;
    /* Ensures the image keeps its aspect ratio */
  }

  .author {
    font-weight: bold;
    font-size: 1rem;
  }

  .logo {
    width: 7rem;
    /* You can adjust this based on the size you want */
    object-fit: contain;
    /* Ensures the logo keeps its aspect ratio */
    transition: opacity 0.3s;
  }

  .logo:hover {
    opacity: 0.8;
  }
}

/* Accent color */
.accent {
  color: var(--md-typeset-a-color);
}

.accent a {
  font-weight: 500;
}

/* Centered item */
.centered {
  display: block;
  margin: 0 auto;
  width: fit-content;
}

/* Announcement Bar */
.md-banner {
  background-color: var(--md-typeset-a-color);
  color: var(--md-default-bg-color);
  font-weight: 700;
}

/* Logo Grids */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.flex-item {
  flex-basis: calc(50% - 10px);
}

.flex-item img {
  padding: 3rem 1rem;
}

.md-source-file {
  display: none;
}

.input {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 800px;  /* Increased to accommodate two columns */
  margin: 0 auto;
}

/* For single column layout */
.input-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.input-row label {
  width: 200px;
  margin-right: 10px;
  text-align: right;
}

.input-row input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 150px;
}

/* For two column layout */
.input-columns {
  display: flex;
  justify-content: center;
  gap: 40px;  /* Space between columns */
}

.input-column {
  text-align: right;
}

.input-field {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 16px;
  margin-bottom: 10px;
}

.input-field label {
  margin-right: 10px;
}

.input-field input {
  font-size: 16px;
  width: 80px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.chart-container {
  /* No default styles */
}


.chart-wrapper {
  border: 1px solid hsl(0, 0%, 80%);
  padding: 5px;
  border-radius: 5px;
  margin: 5px 5px;
}

.chart-wrapper-container {
  display: flex;
  flex-direction: column;
}

@media (min-width: 720px) {
  .chart-container {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 10px;
  }
  .chart-wrapper-container {
    flex-direction: row;
  }
}

.preset-button {
  background-color: #f0f0f0;
  border: none;
  color: #333;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin-left: 10px;
  cursor: pointer;
  border-radius: 4px;
}

.preset-button:hover {
  background-color: #ddd;
}