@keyframes fnAutoFill {
  to {
    font-family: inherit;
    font-size: inherit;
  }
}
:root {
  --notice-size: 1em;
  --notice-closer-size: var(--notice-size);
  --notice-pad: calc(var(--notice-size) * 0.8);
  --notice-color: #61787c;
  --notice-back: #313e48;
  --notice-border-color: #7a7a7a5c;
}
:where(.notice-box) {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}
:where(.notice-box) .notice {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  gap: 2px;
  align-items: flex-start;
  position: relative;
  border-radius: 4px;
  padding: var(--notice-pad);
  background: var(--notice-back);
  border: 1px solid var(--notice-border-color);
  color: var(--notice-color);
  font-size: var(--notice-size);
}
:where(.notice-box) .notice :not(.dismiss) {
  flex: 1 1 auto;
}
:where(.notice-box) .notice .dismiss {
  display: none;
}
:where(.notice-box) .notice .dismiss:hover {
  opacity: 1;
}
:where(.notice-box) .notice.is-dismissable .dismiss {
  display: inline-flex;
}
:where(.notice-box) .notice.is-dismissable .dismiss:not(.miss) {
  display: none;
}
:where(.notice-box) .notice p {
  margin: 0;
  padding: 0;
}
:where(.notice-box) .notice p + p {
  margin-top: 0.5em;
}
:where(.notice-box) .notice-warning {
  --notice-back: #534c39;
  --notice-color: #997e5e;
  --notice-border-color: #5f5340;
}
:where(.notice-box) .notice-success {
  --notice-back: #545f44;
  --notice-color: #92b188;
  --notice-border-color: #547127;
}
:where(.notice-box) .notice-info {
  --notice-back: #415463;
  --notice-color: #88a1b5;
  --notice-border-color: #455d65;
}
:where(.notice-box) .notice-error {
  --notice-back: #371616;
  --notice-color: #936e6e;
  --notice-border-color: #451a1a52;
}
:where(.component-row) {
  display: grid;
  box-sizing: border-box;
  grid-template-areas: "label" "component" "help";
  grid-template-rows: auto;
  justify-content: stretch;
  gap: 0.4em;
  font-size: 1em;
  width: 100%;
}
:where(.component-row) > .component-label {
  display: inline-flex;
  width: auto;
  grid-area: label;
  position: relative;
  font-size: 0.84em;
  color: #ffffff99;
}
:where(.component-row) > .component-label > .component-box {
  box-sizing: border-box;
  width: 100%;
}
:where(.component-row).required > .component-label:after,
:where(.component-row) > .component-label.required:after {
  margin-left: 0.4em;
  display: inline-block;
  font-size: 0.9em;
  content: '*';
  color: #ed8565;
  position: relative;
}
:where(.component-row) > .component {
  grid-area: component;
}
:where(.component-row) > .component-help {
  margin-top: 0.4em;
  grid-area: help;
}
:where(.component-help) {
  font-size: 0.8em;
  color: #6f7983;
}
:root {
  --cmp-prefix-pad: 2.4em;
  --cmp-prefix-inset: 1px auto 1px 1px;
  --cmp-suffix-pad: 2.4em;
  --cmp-suffix-inset: 1px 1px 1px auto;
}
:where(.component) {
  display: flex;
  position: relative;
}
:where(.component):has(>.component-box, >.component-help) {
  display: grid;
  grid-template-areas: "cmp-box" "cmp-help";
  grid-template-rows: auto;
  justify-content: stretch;
  gap: 0.4em;
}
:where(.component):has(>.component-box, >.component-help) > .component-box {
  grid-area: cmp-box;
}
:where(.component):has(>.component-box, >.component-help) > .component-help {
  grid-area: cmp-help;
}
:where(.component) .component-box {
  position: relative;
  z-index: 1;
}
:where(.component) .component-labeled {
  display: flex;
  gap: 1em;
  align-items: center;
}
:where(.component) .component-labeled__input {
  flex: 0 0 auto;
}
:where(.component) .component-labeled__label {
  flex: 1 1 auto;
}
:where(.component):has(.component-labeled) {
  --site-link-color: #a18a5d;
  --site-link-hover-color: #d9bb8c;
  margin-bottom: 1em;
}
:where(.component):has(.component-labeled) .component-help {
  padding-left: 5.5em;
}
:where(.component) .before,
:where(.component) [before],
:where(.component) before,
:where(.component) .prefix,
:where(.component) .after,
:where(.component) [after],
:where(.component) after,
:where(.component) .suffix {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  background: #00000033;
  padding: 0 0.6em;
  border: none;
  height: 100%;
  z-index: 10;
  gap: 0.3em;
}
a:where(.component) .before,
a:where(.component) [before],
a:where(.component) before,
a:where(.component) .prefix,
a:where(.component) .after,
a:where(.component) [after],
a:where(.component) after,
a:where(.component) .suffix,
:where(.component) .before.as-link,
:where(.component) [before].as-link,
:where(.component) before.as-link,
:where(.component) .prefix.as-link,
:where(.component) .after.as-link,
:where(.component) [after].as-link,
:where(.component) after.as-link,
:where(.component) .suffix.as-link {
  pointer-events: all;
  background: none;
  cursor: pointer;
}
button:where(.component) .before,
button:where(.component) [before],
button:where(.component) before,
button:where(.component) .prefix,
button:where(.component) .after,
button:where(.component) [after],
button:where(.component) after,
button:where(.component) .suffix,
:where(.component) .before.as-button,
:where(.component) [before].as-button,
:where(.component) before.as-button,
:where(.component) .prefix.as-button,
:where(.component) .after.as-button,
:where(.component) [after].as-button,
:where(.component) after.as-button,
:where(.component) .suffix.as-button {
  pointer-events: all;
  background: #00000033;
  cursor: pointer;
}
div:where(.component) .before,
div:where(.component) [before],
div:where(.component) before,
div:where(.component) .prefix,
div:where(.component) .after,
div:where(.component) [after],
div:where(.component) after,
div:where(.component) .suffix {
  pointer-events: none;
  font-size: 0.8em;
  background: none;
}
:where(.component) .before,
:where(.component) [before],
:where(.component) before,
:where(.component) .prefix {
  inset: var(--cmp-prefix-inset);
}
:where(.component) .after,
:where(.component) [after],
:where(.component) after,
:where(.component) .suffix {
  inset: var(--cmp-suffix-inset);
}
:where(.component):has(.before, [before], before, .prefix) input,
:where(.component):has(.before, [before], before, .prefix) textarea,
:where(.component):has(.before, [before], before, .prefix) select,
:where(.component):has(.before, [before], before, .prefix) .control {
  padding-left: var(--cmp-prefix-pad);
}
:where(.component):has(.after, [after], after, .suffix) input input,
:where(.component) textarea input,
:where(.component) select input,
:where(.component) .control input,
:where(.component):has(.after, [after], after, .suffix) input textarea,
:where(.component) textarea textarea,
:where(.component) select textarea,
:where(.component) .control textarea,
:where(.component):has(.after, [after], after, .suffix) input select,
:where(.component) textarea select,
:where(.component) select select,
:where(.component) .control select,
:where(.component):has(.after, [after], after, .suffix) input .control,
:where(.component) textarea .control,
:where(.component) select .control,
:where(.component) .control .control {
  padding-right: var(--cmp-suffix-pad);
}
:where(.component) .dimmed {
  opacity: 0.8;
}
.chunks {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  align-items: stretch;
  justify-content: stretch;
  gap: 3px;
}
.chunks .chunk {
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  gap: 3px;
  align-items: stretch;
  justify-content: stretch;
}
.chunks .chunk > button {
  flex: 1 1 0%;
}
:root {
  --checked-size: 1em;
}
.boxes {
  margin-bottom: 1em;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: auto;
  gap: 1em;
}
.boxes .component {
  margin: 0;
}
.boxes.boxes-50 {
  grid-template-columns: repeat(2, 1fr);
}
.boxes.boxes-30 {
  grid-template-columns: repeat(3, 1fr);
}
.boxes.boxes-25 {
  grid-template-columns: repeat(4, 1fr);
}
.boxes.boxes-20 {
  grid-template-columns: repeat(5, 1fr);
}
.boxes.boxes-nogap {
  gap: 0;
}
.boxes.boxes-gap-05 {
  gap: 0.5em;
}
.boxes.boxes-gap-1 {
  gap: 1em;
}
@media only screen and (min-width: 0) and (max-width: 767px) {
  .boxes {
    grid-template-columns: repeat(1, 1fr);
  }
}