/* 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(--psdi-light-text-color-body);
  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(--psdi-light-text-color-body);
}

.tooltip-on-dark {
  --bs-tooltip-bg   : var(--ifm-background-color);
  --bs-tooltip-color: var(--psdi-dark-text-color-body);
}

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

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

/* Buttons that are initially disabled */
input.button.init-disabled {
  background-color: var(--psdi-bg-color-secondary);
  color           : gray
}

/* 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;
}

.flex-panel-display:has(.instructions-panel) {
  border       : 1px solid var(--psdi-border-color-dark);
  border-radius: 1rem;
  margin-bottom: 2rem;
}

[data-theme='dark'] .flex-panel-display:has(.instructions-panel) {
  border: 1px solid var(--psdi-border-color-light);
}

@media (max-width: 700px) {
  .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: 700px) {

  .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;
}

/* Select boxes for accessibility options */
.access-option-container select {
  min-width: 5rem;
  width    : 100%;
}

.access-option-container select option:checked {
  background-color: var(--ifm-background-color);
  color           : var(--ifm-font-color-base);
}

select#light-colour,
select#dark-background,
select#light-colour option,
select#dark-background option,
select#light-colour option:checked,
select#dark-background option:checked {
  background-color: var(--ifm-color-primary);
  color           : var(--ifm-hero-text-color);
}

select#size option {
  font-size: var(--psdi-default-font-size);
}

select#font option {
  font-family: var(--psdi-default-font);
}

select#dark-colour option {
  color: var(--psdi-default-dark-text-color-body);
}

select#light-colour option {
  background-color: var(--ifm-color-primary);
  color           : var(--psdi-default-light-text-color-body);
}

select#light-background option {
  background-color: var(--psdi-default-background-color);
}

select#dark-background option {
  background-color: var(--psdi-default-color-primary);
  color           : var(--psdi-light-text-color-body);
}

/* 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;
}

#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;
}

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

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

.plotDesignSections {
    display: flex;
}

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

dialog#variabilityPlotDialog summary { 
    background: var(--psdi-bg-color-primary);
    color: white;
    padding: 4px 12px 4px 12px;
    margin: 4px 0 4px 0;
    border: 2px inset #767676; 
    border-radius: 4px;
}

#variabilityChart {
    max-width: 800px;
    max-height: 600px;
    overflow: auto;
}

.intro {
    display: flex;
}

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

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