@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. Any component that
   sets its own style={"width": ...} in Python has that style redirected
   onto this same wrapper by Dash 4, and the input is deliberately made to
   fill it (Dash's own CSS: .dash-input-element { flex: 1 1 0 }) - correct
   and wanted there (min-mjd, ref-mag-input, etc.), so just strip the
   wrapper's own box for those, leaving the fill behavior intact.

   Components with no explicit width (the majority - every per-catalog
   search-radius field, for instance) previously relied on the browser's
   own intrinsic input sizing, which naturally shrinks or grows with
   whatever space its actual layout context provides. Dash's own CSS
   forces two things that defeat that: .dash-input-container has
   `container-type: inline-size`, a CSS containment mode that requires an
   explicitly-resolvable width (auto/content-based sizing collapses to 0
   under it); and .dash-input-element has `flex: 1 1 0`, which discards
   the input's intrinsic size in favor of always filling its wrapper.
   Undo both only for the no-width case, which lets the browser's normal
   intrinsic/shrink-to-fit sizing take over again - this reproduces each
   field's own pre-4.x width (they differ per layout context) without
   hardcoding any of them or special-casing individual fields. */
.dash-input-container.dash-input {
  display: inline-flex;
  border: none;
  background: none;
  padding: 0;
  height: auto;
}
.dash-input-container.dash-input:not([style*="width"]) {
  width: auto;
  container-type: normal;
}
.dash-input-container.dash-input:not([style*="width"]) > .dash-input-element {
  flex: none;
  width: auto;
}
.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;
}