@charset "UTF-8";
@namespace url("http://www.w3.org/1999/xhtml");
@namespace m url("http://www.w3.org/1998/Math/MathML");

:root {
  --background-light: white;

  /* Stylelint prefers the rgba() notation without commas but browsers don't seem
     to understand the no-comma approach while also using var() to represent the
     three RGB entries here. Therefore, we keep using commas and disable
     the relevant stylelint rule whenever we use this approach */
  /* stylelint-disable color-function-notation */
  --background-light2: rgba(var(--brand-rgb), 8%);
  /* stylelint-enable color-function-notation */

  /* Some other recommended colors close to gray and based on the first two
     include #ededed or rgba(158, 222, 192, 0.3) */
  --font-light: rgb(244 247 252 / 100%);

  /* Google's Material Design style guide recommends using black with opacity so
     that fonts don't look completely black. The recommended opacity is 87% for
     high emphasis, 60% for medium emphasis, and 38% for inactive text. See
     https://material.io/design/color/text-legibility.html#text-backgrounds for
     more information. */
  --font-dark: rgb(0 0 0 / 87%);
  --font-medium: rgb(0 0 0 / 60%);

  /* Brand RGB colors without opacity value */
  --brand-rgb: 51, 153, 137;

  /* The main brand color */
  /* stylelint-disable color-function-notation */
  --brand: rgba(var(--brand-rgb), 100%);
  --brand-light: rgba(var(--brand-rgb), 40%);
  /* stylelint-enable color-function-notation */
  --brand-dark: rgb(28 86 77 / 100%);
}

/* This gets used for the loading screen */
.fade-in {
  animation: fadein 2s;
}

/* This gets used for the loading screen */
@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 992px is the bootstrap lg breakpoint. */
@media (min-width: 992px) {
  :root {
    /* If the browser font size is 16px then this is 18px. */
    font-size: 1.125rem;

    /* If line-height is set in root it gets overwritten because Bootstrap sets
       it in body. So, to have an effect, we need to set it in body. */
  }
}

body {
  font-family: Montserrat, sans-serif;
  background: var(--background-light);
  color: var(--font-dark);
  text-align: justify;
  font-weight: 400;
  margin-bottom: 100px;

  /* Bootstrap's default line height seems to be 1.5em, which is slightly above
     what Butterick's Practical Typography recommends as the max (1.45em) but it
     actually looks really good so we leave it like that. */
}

a {
  color: var(--brand);
  text-decoration: underline;
}

a:hover {
  color: var(--brand);
  text-decoration: none;
}

details > summary {
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

m|mtext {
  font-family: "STIX Two Text", serif;
}

m|math {
  font-family: "STIX Two Text", serif;
}

h1 {
  text-align: center;
  font-size: 3em;
  font-weight: 500;
  letter-spacing: 5px;
  padding: 5px 16px;
  background: var(--brand);

  /* Only -webkit-background-clip, not background-clip, is currently supported
     on WebKit-based browsers. */
  /* stylelint-disable property-no-vendor-prefix */
  -webkit-background-clip: text;
  /* stylelint-enable property-no-vendor-prefix */
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 20px;
  margin-bottom: 0;
}

h2,
h3,
h4,
h5,
h6 {
  text-align: center;
}

dfn {
  font-weight: 700;
  font-style: normal;
}

.loading {
  color: var(--brand);
  background: var(--background-light);
}

.subheading {
  max-width: 60ch;
  margin: auto;
  font-weight: 500;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 5px;
}

@media (max-width: 680px) {
  .subheading {
    margin-top: 5px;
    margin-bottom: 5px;
  }
}

p {
  /* this results in a text line length of around 85 characters */
  max-width: 65ch;
  margin: auto;
  margin-top: 1em;
  margin-bottom: 1em;
}

label {
  margin: 0.5rem;
}

input {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;

  /* This makes sure that the input sliders can be dragged fully to the left and
     right on all browsers. */
  padding: 0;
}

input[type="range"] {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

@media (max-width: 680px) {
  input[type="range"] {
    margin: 0;
  }
}

select {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

ul {
  max-width: 60ch;
  margin: auto;
  margin-top: 1em;
  margin-bottom: 1em;

  /* padding helps keep the text width appropriate on mobile screens at least
     as large as an iPhone 5 */
  padding-top: 0;
  padding-right: 2em;
  padding-bottom: 1em;
}

output {
  margin-top: 25px;
  margin-bottom: 30px;
}

/* These properties are the same as the p tag */
.alert {
  /* this results in a text line length of around 85 characters */
  max-width: 65ch;
  margin: auto;
  margin-top: 1em;
  margin-bottom: 1em;
}

.input-group {
  margin-bottom: 1rem;
}

.tour-step {
  border: 2px var(--brand) solid;
  text-align: left;
}

.shepherd-element[data-popper-placement^="bottom"] > .shepherd-arrow::before {
  top: -2px;
  border-top-width: 2px;
  border-top-color: var(--brand);
  border-top-style: solid;
  border-left-width: 2px;
  border-left-color: var(--brand);
  border-left-style: solid;
}

.shepherd-element[data-popper-placement^="top"] > .shepherd-arrow::before {
  top: 2px;
  border-bottom-width: 2px;
  border-bottom-color: var(--brand);
  border-bottom-style: solid;
  border-right-width: 2px;
  border-right-color: var(--brand);
  border-right-style: solid;
}

.shepherd-progress-bar {
  background-color: var(--background-light2);
  border-width: 2px;
  border-style: solid;
  border-color: var(--brand);
  border-radius: 6px;
  margin-right: 15px;
  width: 200px;
  height: 20px;
}

.shepherd-inner-bar {
  background-color: var(--brand);
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  height: 18px;
}

.btn {
  margin: 20px;
  background-color: var(--brand);
  font-size: 1rem;
  border: none;
  color: var(--font-light);
}

.btn:active {
  color: var(--font-light);
  background-color: var(--brand-dark);
}

.btn:hover {
  color: var(--font-light);
  outline: 4px double var(--brand);
}

/* Shepherd sets the top margin of paragraphs to zero. However, we want it to be
   the same as our other paragraphs. */
.shepherd-text p {
  margin-top: 1em;
}

.btn-tour:not(:disabled):hover {
  background-color: var(--brand);
  outline: 4px double var(--brand);
  color: var(--font-light);
}

@media (max-width: 680px) {
  .btn {
    font-size: 0.8em;
    margin: 4px;
  }
}

#run {
  margin-left: auto;
  margin-right: auto;

  /* 25px aligns it with the scenario risk output on desktop screens. */
  margin-top: 25px;
  margin-bottom: 40px;
  font-size: 1.25rem;
  width: 180px;
}

@media (max-width: 680px) {
  #run {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 1rem;
    width: 160px;
  }
}

#run-label {
  margin-bottom: 1em;
  margin-top: 5px;
}

.result-label {
  margin-top: 20px;
  margin-bottom: 30px;
  font-size: 1.25rem;
}

.result {
  font-size: 1.25rem;
}

.tooltip-button,
.tooltip-button:hover,
.tooltip-button:active {
  color: rgba(8 32 73 / 87%);
  cursor: pointer;
}

.collapsible {
  background-color: var(--background-light);
  outline: 2px ridge var(--brand-light);
  outline-offset: -2px;
  color: var(--font-dark);
  cursor: pointer;
  padding: 10px;
  width: 100%;
  text-align: center;
  margin: 5px 0;
  font-size: 1.25rem;
  white-space: normal;
}

@media (max-width: 680px) {
  .collapsible {
    padding: 4px;
    font-size: 16px;
  }
}

.collapsible:hover {
  color: var(--font-dark);
  outline: 4px solid var(--brand-light);
  outline-offset: -4px;
}

.collapsible::after {
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.collapsible:active {
  background-color: var(--background-light2);
}

.collapsible.active {
  outline: 2px inset var(--brand-light);
  outline-offset: -2px;
  background-color: var(--background-light2);
  color: var(--font-dark);
}

.collapsible-content {
  padding: 0 18px;
  background-color: var(--background-light);
}

.equation-block {
  text-align: center;
}

@media (min-width: 680px) {
  .equation-block {
    font-size: 1.25rem;
  }
}

.equation-caption {
  margin-top: 1em;
  text-align: center;
}

/* The Shepherd tour cancel icon but modified so that it can be inlined into
   text instead of working as a button */
.cancel-icon-text {
  vertical-align: bottom;
  cursor: default;
}

.cancel-icon-text:hover {
  color: hsl(0deg 0% 50% / 75%);
}

#plots {
  transition: opacity 0.5s linear;
}

.text-warning-alt {
  color: #de751f;
}

#header {
  padding-top: 4rem;
}

nav {
  /* With a default browser size of 16px we would have a custom rem of 18px and
     the nav text would be 19.98px */
  font-size: 1.11rem;

  /* The additional pixel in the Bootstrap padding adds up. We can counteract this
     by reducing the line height which bootstrap by defaults sets to
     1.5em = 1.5 * 20px = 30px */
  line-height: 1.45rem;
}

/* Navbar code from mc.web */

.navbar ul {
  max-width: none;
  margin-right: 1em;

  /* Additional resets to make it equivalent to mc.web */
  margin-top: 0;
  margin-bottom: 0;
  padding-right: 0;
  padding-bottom: 0;
}

@media (max-width: 1200px) {
  .navbar-nav .nav-link {
    margin-left: 1em;
  }
}

.navbar-light .navbar-nav .nav-link {
  color: var(--font-dark);
}

.navbar-light .navbar-brand {
  color: var(--font-medium);
  font-size: 1.125em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.0625em;
  margin-left: 1em;
}

.navbar-light .nav-item .nav-link.active,
.navbar-light .nav-item:hover .nav-link {
  color: var(--brand);
}

/* End of navbar code from mc.web */