/* Local Styles */
 :root
{
  --borderRadius: 0.425em;
  --borderWidth: 0.125em;
}

 /* Colors */

 :root
 {
   --white: #fff;
   --gray-lightest: #eee;
   --gray-light: #ccc;
   --gray-dark: #444;
   --gray-darkest: #222;
   --black: #000;

   --red: #f30;
   --green: #0b0;
   --blue: #06f;

   --text-strong: var(--black);
   --text: var(--gray-darkest);
   --text-subtle: var(--gray-dark);

   --negative: var(--red);
   --positive: var(--green);
   --neutral: var(--blue);

   --bg-subtle: var(--gray-light);
   --bg: var(--gray-lightest);
   --bg-strong: var(--white);
 }

 @media (prefers-color-scheme: dark)
 {
   :root
   {
      --text-strong: var(--white);
      --text: var(--gray-lightest);
      --text-subtle: var(--gray-light);

      --bg-subtle: var(--gray-dark);
      --bg: var(--gray-darkest);
      --bg-strong: var(--black);
   }
 }

/* Layout containers */

*,
*::before,
*::after
{
  box-sizing: border-box;
}

fieldset
{
    display: contents;
}

.form-group,
.control-group
{
  display: flex;
  flex-direction: column;
  gap: 0.125em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.text,
.textarea,
.select,
.radio,
.file
{
  flex-direction: row;
  flex-wrap: wrap;
}

.text .label,
.textarea .label,
.select .label,
.radio .label,
.file .label
{
  align-content: center;
}

.text .control,
.textarea .control,
.select .control,
.radio .control,
.file .control
{
  order: 3;
  flex: 1 0 100%;
}

.text .meta,
.textarea .meta,
.select .meta,
.radio .meta,
.file .meta
{
  order: 2;
  flex: 1 1 auto;
  justify-content: end;
}

.label,
.control,
.meta,
.meta-container
{
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  line-height: 1.3;
}

.meta-container {
  flex-direction: column;
  width: 100%;
  gap: 0.25em;
}

.label
{
  order: 1;
}

.control
{
  order: 2;
  position: relative;
}

.meta, .meta-container
{
  order: 3;
}

.label,
legend
{
  font-size: 1em;
  color: var(--text);
}

/* Inline */

.inline
{
  flex-direction: row;
  flex-wrap: wrap;
  display: inline-flex;
}

.inline .control-group
{
  flex: 1 1 auto;
  margin: 0;
}

/* Allow positioning tweaks via classes */

.top
{
  align-self: start;
}

.end
{
  justify-self: end;
}

.bottom
{
  align-self: end;
}

.start
{
  justify-self: start;
}

.center
{
  justify-self: center;
}

.middle
{
  align-self: center;
}

/* Generic form elements */

.control input,
.control select,
.control radio,
.control textarea,
.control button
{
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  background-color: var(--bg-strong);
  color: var(--text-strong);
  border: var(--borderWidth) solid var(--bg-subtle);
  border-radius: var(--borderRadius);
  padding: 0.5em;
}

.control input:disabled,
.control select:disabled,
.control radio:disabled,
.control textarea:disabled,
.control button:disabled
{
    font-style: italic;
    color: var(--bg-subtle);
    cursor: not-allowed !important;
    opacity: 0.5;
}

.control input,
.control select,
.control radio,
.control textarea
{
  width: 100%;
}

/* Help/Error Text */

.meta
{
  color: var(--text-subtle);
}

/* Styling for form controls with errors */
.control-group.with-errors input,
.control-group.with-errors select,
.control-group.with-errors radio,
.control-group.with-errors textarea,
.error input,
.error select,
.error radio,
.error textarea
{
  border-color: var(--negative) !important;
}

.control-group.with-errors label,
.control-group.with-errors legend,
.control-group.with-errors .errortext,
.error label,
.error legend,
.error .errortext
{
  color: var(--negative);
}

/* Base styles for help and error text */
.helptext,
.errortext
{
  width: 100%;
  font-size: 0.85em;
  margin-top: 0.25em;
}

/* Error text specific styling */
.errortext,
.errorlist
{
  visibility: visible !important;
  position: relative !important;
  pointer-events: all !important;
  color: var(--negative);
}

/* Hide helptext when there's an error */
.error .helptext
{
  visibility: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
}

.errorlist {
  color: var(--negative);
  list-style-type: none;
  padding: 0;
  margin: 0.25em 0;
  font-size: 0.85em;
}

/* Style errors in checkbox fields */
.checkbox .meta.errortext {
  width: 100%;
  flex-basis: 100%;
  display: block;
}

.helptext
{
  filter: opacity(0%);
  transition: filter 250ms ease-out;
}

.control-group:hover .helptext,
.control-group:has(input:focus) .helptext,
.control-group:has(select:focus) .helptext,
.control-group:has(textarea:focus) .helptext
{
  filter: opacity(100%);
}

/* Text (and other) */

.control input,
.control textarea
{
  font-family: mono, monospace;
  font-variant-ligatures: none;
}

/* Radio and Checkbox */
.checkbox
{
  flex-flow: row;
}

.checkbox .label
{
  order: 2;
}

.checkbox .control
{
  order: 1;
}

.checkbox .meta-container {
  order: 3;
  flex: 1 1 100%;
  padding-left: 1em;
}

.checkbox .meta
{
  flex: 1 1 100%;
  justify-content: start;
  align-content: start;
}

.radio input,
.checkbox input
{
  height: 2em;
  width: 2em;
  padding: 0;
  border: var(--borderWidth) solid var(--bg-subtle);
  background-color: var(--bg-strong);
  position: relative;
}

/* Style radio group containers */
ul.radioselect {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

/* Style radio options in a group */
ul.radioselect li {
  display: flex;
  align-items: center;
  margin-right: 1em;
}

/* Use small radio buttons in radio groups by default */
ul.radioselect li input[type="radio"] {
  height: 1.5em;
  width: 1.5em;
}

/* Adjust radio dot for smaller radio buttons in groups */
ul.radioselect li input[type="radio"]:checked::after {
  height: 0.4em;
  width: 0.4em;
}

/* New smaller inputs for checkboxes and radio buttons */
.checkbox.small input,
.radio.small input {
  height: 1.5em;
  width: 1.5em;
}

.checkbox input
{
  border-radius: calc(var(--borderRadius) * .5);
}

.radio input::after,
.checkbox input::before,
.checkbox input::after
{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  height: .5em;
  width: .5em;
  transform: translate(-50%, -50%);
  background-color: var(--text-subtle);
  opacity: 0;

}

.radio input:checked::after,
.checkbox input:checked::before,
.checkbox input:checked::after
{
  opacity: 1;
}

.radio input,
.radio input:checked::after
{
  border-radius: 100%;
}

.checkbox input:checked::before
{
  content: "";
  height: 1.5em;
  width: 1.5em;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: currentColor;
  color: var(--green);
  -webkit-mask-image: url("../images/checkmark.18241a8c02a8.svg");
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
}

/* Adjust checkmark and radio dot size for small inputs */
.checkbox.small input:checked::before {
  height: 1.2em;
  width: 1.2em;
}

.radio.small input:checked::after {
  height: 0.4em;
  width: 0.4em;
}

/* Remove the after pseudo-element that creates the X appearance */
.checkbox input:checked::after
{
  display: none;
}

/* Button */

.button .control button,
.button .control input
{
  background-color: var(--text);
  color: var(--bg-strong);
  border-color: var(--bg-strong);
  font-weight: 700;
  padding: 0.5em 1em;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  min-height: 2.5em;
  line-height: 1.2;
  box-sizing: border-box;
  /* margin: 0.25em; */
}

.button.submit
{
    justify-content: center;
}

.button .control
{
    display: flex;
    align-items: center;
}

/* Select/dropdown */

.select select
{
  padding: 0.5em 2em 0.5em .5em;
  border: var(--borderWidth) solid var(--bg-subtle);
}

/* Fix for Select2 dropdowns in dark mode */
@media (prefers-color-scheme: dark) {
  .select2-container--default .select2-selection--single,
  .select2-container--default .select2-selection--multiple {
    background-color: var(--bg) !important;
    border-color: var(--bg-subtle) !important;
  }

  .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text) !important;
  }

  .select2-dropdown {
    background-color: var(--bg) !important;
    border-color: var(--bg-subtle) !important;
  }

  .select2-container--default .select2-results__option {
    color: var(--text) !important;
  }

  .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--bg-subtle) !important;
  }

  .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--neutral) !important;
    color: var(--bg-strong) !important;
  }

  .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--bg-strong) !important;
    color: var(--text) !important;
    border-color: var(--bg-subtle) !important;
  }

  /* Fix for HTML5 date input calendar button visibility in dark mode */
  input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.8;
    cursor: pointer;
  }

  input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
  }
}

/* Styling for project autocomplete results */
.select2-container--default .select2-results__option .autocomplete-result {
  display: block;
  padding: 5px;
  border-radius: 4px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.select2-container--default .select2-selection__rendered .autocomplete-result {
  display: inline;
  padding: 0;
}

/* the auto-select boxes render their own control so I'm disabling this one. Maybe there's a way to insert this only on ones that need it? */
/* .select .control::after
{
  content: "";
  position: absolute;
  height: 1em;
  width: 1em;
  top: 50%;
  left: 100%;
  transform: translate(-125%, -40%);
  background-color: var(--text-strong);
  pointer-events: none;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0.514in" height="0.319in"><path fill-rule="evenodd" d="M20.022,21.778 C20.464,21.602 20.880,21.338 21.238,20.980 L35.622,6.595 C37.031,5.186 37.031,2.902 35.622,1.494 L35.532,1.403 C34.123,-0.005 31.839,-0.005 30.431,1.403 L18.609,13.623 L7.088,1.881 C5.679,0.472 3.395,0.472 1.986,1.881 C0.578,3.290 0.578,5.574 1.986,6.983 L16.033,21.029 C17.112,22.108 18.702,22.353 20.022,21.778 Z"/></svg>');
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
} */

/* File Chooser */

.control-group.clearablefile .control,
.control-group.file .control
{
  display: grid;
  place-content: center;
  border: var(--borderWidth) dashed var(--bg-subtle);
  background-color: var(--bg-strong);
  padding: 1em;
  border-radius: var(--borderRadius);

}

.control-group.clearablefile .control input
{
  border: 0;
  background: inherit;
}

.control-group.clearablefile .control input::after
{
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
}

/* .control-group.file
{
  border: var(--borderWidth) dashed var(--bg-subtle);
  border-radius: var(--borderRadius);
  padding: 1em;
  display: inline-grid;
  place-items: center;
  background: var(--bg-strong);
  position: relative;
}

.control-group.file .label
{
  position: unset;
}

.control-group.file label
{
  background-color: var(--text);
  color: var(--bg-strong);
  border-color: var(--bg-strong);
  font-weight: 700;
  border-radius: var(--borderRadius);
  padding: 0.25em 1em;
}

.control-group.file label::after
{
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
}

.control-group.file input
{
  position: absolute;
  visibility: hidden;
  pointer-events: none;
} */

/* Login */

.login.inline
{
  justify-content: end;
}
.login.inline .label,
.login.inline .control
{
  flex: 1 1 auto;
}

.login.inline .button
{
  flex: 0 1 auto;
  flex-direction: row;
  top: -.125em;
  position: relative;
  align-items: center;
}

.login .control-group.inline
{
  align-items: center;
}

/* Address Form */

.form-group.address
{
  grid-template-columns: repeat(12, 1fr);
}

.form-group.address .control-group
{
  grid-column: 1 / span 12;
}

.form-group.address .control-group.city
{
  grid-column: 1 / span 7;
}

.form-group.address .control-group.state
{
  grid-column: 8 / span 5;
}

.form-group.address .control-group.zip
{
  grid-column: 1 / span 5;
}

.form-group.address .control-group.country
{
  grid-column: 6 / span 7;
}

/* Catalog Assets */

.form-group.catalog-assets
{
  justify-self: stretch;
  margin: 1em 0;
}

.form-group.catalog-assets .control-group
{
  grid-template-columns: 1fr 4fr 1fr;
  align-items: center;
  column-gap: 0.5em;
}

.form-group.catalog-assets .control-group .label
{
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  text-align: right;
}

.form-group.catalog-assets .control-group .control
{
  grid-column: 2;
  grid-row: 1;
}

.form-group.catalog-assets .control-group .helptext
{
  grid-column: 2;
  grid-row: 2;
}

.form-group.catalog-assets.required .control-group::after
{
  content: "REQUIRED";
  display: block;
  grid-column: 3;
  grid-row: 1;
  background-color: var(--text-subtle);
  color: var(--bg-strong);
  padding: 0.25em .5em;
  border-radius: var(--borderRadius);
  font-size: 0.85em;
  font-weight: bold;
  justify-self: start;
}

/* Help tooltips */
.help-tooltip {
  position: relative;
  display: inline-block;
  margin-left: 0.5em;
  cursor: help;
  color: var(--text-subtle);
  vertical-align: middle;
}

.help-tooltip:hover {
  color: var(--text);
}

.help-tooltip::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--gray-darkest);
  color: var(--white);
  padding: 0.5em 0.75em;
  border-radius: var(--borderRadius);
  font-size: 0.875em;
  line-height: 1.4;
  white-space: nowrap;
  max-width: 300px;
  white-space: normal;
  width: max-content;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  pointer-events: none;
  margin-bottom: 0.25em;
}

.help-tooltip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 0.25em solid transparent;
  border-top-color: var(--gray-darkest);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  pointer-events: none;
}

.help-tooltip:hover::before,
.help-tooltip:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .help-tooltip::before {
    background-color: var(--gray-lightest);
    color: var(--gray-darkest);
  }

  .help-tooltip::after {
    border-top-color: var(--gray-lightest);
  }
}