/* Forms inherit style from normal content, and make sure content is well away from the edges */
form {
  width      : 95%;
  min-width  : 320px;
  padding-top: 1rem;
  align-self : center;
}

/* Padding for link to converter website. */
#visit {
  padding-left: 0.125rem;
}

/* Width management for select boxes and forms */

.med-width {
  width    : 100%;
  max-width: 25rem;
}

.large-width {
  width    : 100%;
  max-width: 50rem;
}

/* Invalid input fields switch to alternate background */

input:invalid {
  background-color: var(--ifm-color-primary);
  color           : var(--ifm-hero-text-color);
}

/* How to indicate text which has a tooltip on mouseover */
.mouseover-tooltip::before {
  display         : inline-flex;
  justify-content : center;
  align-items     : center;
  content         : "i";
  background-color: var(--ifm-color-info);
  color           : var(--ifm-hero-text-color);
  font-family     : serif;
  font-weight     : bold;
  width           : 1rem;
  height          : 1rem;
  border-radius   : 0.5rem;
  margin-right    : 0.125rem;
}

/* Dotted underline to indicate text that will show a tooltip on mouseover */
.mouseover {
  text-decoration: underline dotted;
}

/* Style the popup tooltips */
.tooltip {
  --bs-tooltip-opacity: 1;
  max-width           : 17.5rem !important;
}

.tooltip-inner {
  max-width: 17.5rem !important;
}

.tooltip-on-light {
  --bs-tooltip-bg   : var(--ifm-color-primary);
  --bs-tooltip-color: var(--ifm-hero-text-color);
}

.tooltip-on-dark {
  --bs-tooltip-bg   : var(--ifm-color-primary);
  --bs-tooltip-color: var(--ifm-font-color-base);
}

[data-theme='dark'] .tooltip-on-light,
[data-theme='dark'] .tooltip-on-dark {
  --bs-tooltip-bg   : var(--ifm-color-primary-lightest);
  --bs-tooltip-color: var(--ifm-font-color-base);
}

/* Converter details, user input and file conversion initially not displayed. */
.init-hidden {
  display: none
}

/* File upload prompt */
input#fileToUpload {
  margin-right: 0.25rem;
}

/* Images that appear as icons alongside text */
.text-icon {
  height: 1rem;
  color : var(--ifm-font-color-base);
  fill  : var(--ifm-font-color-base);
  stroke: var(--ifm-font-color-base);
  filter: invert(100%);
}

button:disabled .text-icon {
  filter: invert(50%);
}

[data-theme='dark'] .text-icon {
  filter: invert(100%);
}

/* Small vertical space. */
.smallGap {
  padding: 0.125rem;
}

/* Medium vertical space. */
.medGap {
  padding: 1rem;
}

/* Large vertical space. */
.largeGap {
  padding: 8rem;
}

/* Flex styling for pages */
.flex-panel-display {
  display        : flex;
  flex-direction : row;
  align-items    : flex-start;
  justify-content: space-between;
}

@media (max-width: 950px) {
  .flex-panel-display {
    display: block;
  }
}

.flex-panel {
  flex   : 1 1 50%;
  padding: 1rem;
}

.instructions-panel {
  flex  : 1 1 35%;
  margin: 0;
}

.flex-panel-display hr {
  margin             : -0.5rem 25% 0.5rem 25%;
  height             : 1px;
  border-top-style   : none;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

/* Control for elements to only appear on big/small screens */
.big-screen-only {
  display: block;
}

.small-screen-only {
  display: none;
}

@media (max-width: 950px) {

  .big-screen-only {
    display: none;
  }

  .small-screen-only {
    display: block;
  }
}

/* Grid for textarea label/elements. */
.access-options {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  column-gap           : 2rem;
}

.access-option-container {
  padding-left   : 0 1rem 0 1rem;
  display        : flex;
  flex-direction : column;
  justify-content: flex-end;
}

.access-lm,
.access-dm {
  display: none;
}

[data-theme="light"] .access-nm {
  display: none;
}

[data-theme="light"] .access-lm {
  display: block;
}

[data-theme="dark"] .access-nm {
  display: none;
}

[data-theme="dark"] .access-dm {
  display: block;
}

/* Classes to force specific styling for exceptional cases */
.no-left-margin {
  margin-left: 0 !important;
}

/* Convert button and loading spinner */
.convert-button-and-spinner {
  display       : flex;
  flex-direction: row;
  align-items   : center;
}

.loading-spinner {
  display: none;
  color  : var(--ifm-color-primary);
  scale  : 75%;
}

div#noChart {
  border         : 1px solid #ccc;
  background     : #eee;
  display        : flex;
  justify-content: center;
  align-items    : center;
  color          : gray;
  font-size      : 150%;
  border-radius  : 6px;
  flex-direction : column;
}

#copySuccess {
  color: green;
}

#copyFailure {
  color: red;
}

.formControl {
  display       : flex;
  flex-direction: column;
  margin-bottom : 0.6em;
}

.spreadWidth {
  display: flex;
}

.spreadWidth>* {
  flex       : 1;
  margin-left: 0.5em;
  display    : flex;
}

.spreadWidth>*:first-child {
  margin-left: 0;
}

input.valueField {
  width : 100px;
  margin: 2px;
}

button#addNewValueField {
  width: fit-content;
}

#plotDesign {
  background-color: white;
  width           : 800px;
  height          : 600px;
  max-width       : calc(100vw - 350px);
  max-height      : calc(100vh - 220px);
}

div#plotDesign>svg {
  width : 100%;
  height: 100%;
}

.plotDesignHeader {
  display        : flex;
  justify-content: space-between;
}

.plotDesignHeader>* {
  align-self: start;
}

.plotDesignSections {
  display: flex;
}

select {
  padding: 3px;
  border : 2px inset #767676;
}

dialog#variabilityPlotDialog {
  background: var(--ifm-background-color);
  color     : var(--ifm-font-color-base);
}

dialog#variabilityPlotDialog summary {
  background   : var(--ifm-bg-color-button);
  color        : var(--ifm-hero-text-color);
  padding      : 4px 12px 4px 12px;
  margin       : 4px 0 4px 0;
  border       : 2px outset #767676;
  border-radius: 4px;
}

dialog#variabilityPlotDialog summary:hover {
  background: var(--ifm-bg-color-button-hover);
}

dialog#variabilityPlotDialog details[open] summary {
  background: var(--ifm-bg-color-button-active);
}

#variabilityChart {
  width           : 640px;
  height          : 480px;
  background-color: white;
}

div#variabilityChart svg {
  width : 100%;
  height: 100%;
}

[data-theme='dark'] #variabilityChart {
  margin: 0.5rem 0;
}

.intro {
  display: flex;
}

.intro>p {
  flex-shrink: 1;
}

.intro>button {
  flex-shrink: 0;
  width      : fit-content;
  height     : fit-content;
}

.plotDesignOptions input[type=color] {
  width: 100%;
}

.plotDesignOptions {
  width      : 196px;
  padding    : 0 1px;
  margin-left: 16px;
  max-height : calc(100vh - 200px);
  overflow-y : auto;
}

#outsideRangeWarning,
#zeroRangeWarning {
  margin-top   : 8px;
  margin-bottom: 8px;
  padding      : 16px;
  background   : #ffa;
  border       : 2px solid gray;
}

[data-theme="dark"] #outsideRangeWarning,
[data-theme="dark"] #zeroRangeWarning {
  background: var(--ifm-color-info-darkest);
}

.boxCoords input {
  width: 88px;
}

dialog#variabilityPlotDialog .symbolSelector>div {
  width     : 160px;
  height    : 224px;
  overflow-y: scroll;
}