@keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.5;
    }
}

.inline {
  display: inline;
}

.attention {
    font-size: large;
}

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #22114C;
  text-decoration: underline;
  cursor: pointer;}
a:hover {
  color: #FCBD43; }


/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  color: #22114C;
  border: 1px solid #22114C;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #FCBD43;
  border-color: #22114C;
}
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;
  background-color: #22114C;
  border-color: #22114C;
}
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FCBD43;
  background-color: #22114C;
  border-color: #22114C;
}


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #22114C;
}

/* Dash 4 wraps dcc.Input(type="number") in a styled container div (its own
   border/background/padding) with +/- stepper buttons. Strip the wrapper's
   own box so the input's existing border/height are the only ones visible,
   restoring the pre-4.x compact, unstyled appearance.

   Dash also sets the inner input to width:100% of the wrapper. Previously,
   inputs with no explicit width style relied on the browser's natural
   ~201px default; now that same 100%-width input inside an unconstrained
   inline-flex wrapper resolves to the full width of the surrounding row
   instead. Give the wrapper that natural 201px width back as a default -
   any component that sets its own style={"width": ...} already applies
   that as an inline style on this same wrapper (Dash 4 redirects the
   style prop there), which overrides this default via normal CSS cascade
   rules, so explicitly-sized inputs are unaffected. */
.dash-input-container.dash-input {
  display: inline-flex;
  border: none;
  background: none;
  padding: 0;
  height: auto;
  width: 201px;
}
.dash-input-stepper {
  display: none;
}

#header-logo {
    height: 1.7320508076em;  /* sqrt(3) */
    width: auto;
    top: 0.4910254038em;  /* (sqrt(3) - 1) / 2 + 0.125 */
    position: relative;
}


/* Slider
--------------------------------------------------- */
.rc-slider-handle,
.rc-slider-dot-active,
.rc-slider-track {
    border: solid 2px #FCBD43;
}

.rc-slider-handle:focus,
.rc-slider-handle:hover,
.rc-slider-handle:active,
.rc-slider-handle-click-focused,
.rc-slider-handle-click-focused:focus,
.rc-slider-handle.rc-slider-handle-click-focused,
.rc-slider-handle.rc-slider-handle-click-focused:active,
.rc-slider-handle.rc-slider-handle-click-focused:focus,
.rc-slider-handle.rc-slider-handle-click-focused:focus {
    border: 2px solid #22114C;
}


/*
 Make superscript and subscript to be one bellow other
 https://stackoverflow.com/a/58628296/5437597

Example:

<div class="expression">
1.23
<span class='supsub'>
  <sup class='superscript'>+0.12</sup>
  <sub class='subscript'>-0.07</sub>
</span>
</div>
 */
.expression {
    display: flex;
    align-items: center;
}
.supsub {
    display: flex;
    flex-direction: column;
    margin-left: 2px;
    align-items: center;
}
.subscript {
    display:flex;
}
.superscript {
    display:flex;
}