/* css.gg icons — hardcoded from https://css.gg */
.gg-chevron-right {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(var(--ggs, 1));
  width: 22px;
  height: 22px;
  border: 2px solid transparent;
  border-radius: 100px;
}
.gg-chevron-right::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 10px;
  height: 10px;
  border-bottom: 2px solid;
  border-right: 2px solid;
  transform: rotate(-45deg);
  right: 6px;
  top: 4px;
}

.gg-chevron-down {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(var(--ggs, 1));
  width: 22px;
  height: 22px;
  border: 2px solid transparent;
  border-radius: 100px;
}
.gg-chevron-down::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 10px;
  height: 10px;
  border-bottom: 2px solid;
  border-right: 2px solid;
  transform: rotate(45deg);
  left: 4px;
  top: 2px;
}

.gg-layout-grid-small {
  transform: scale(var(--ggs, 1));
}
.gg-layout-grid-small,
.gg-layout-grid-small::after,
.gg-layout-grid-small::before {
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 10px;
  height: 2px;
  border-left: 6px double;
  border-right: 2px solid;
}
.gg-layout-grid-small::after,
.gg-layout-grid-small::before {
  content: "";
  position: absolute;
  left: -6px;
}
.gg-layout-grid-small::after {
  bottom: 4px;
}
.gg-layout-grid-small::before {
  top: 4px;
}

.gg-edit-flip-h {
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  transform: scale(var(--ggs, 1));
  background: linear-gradient(to left, currentColor 22px, transparent 0)
    no-repeat center/2px 22px;
}
.gg-edit-flip-h::after,
.gg-edit-flip-h::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 6px;
  height: 14px;
  border: 2px solid;
  top: 2px;
}
.gg-edit-flip-h::before {
  border-right: 0;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.gg-edit-flip-h::after {
  opacity: 0.5;
  border-left: 0;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  right: 0;
}

.gg-hashtag {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(var(--ggs, 1));
  width: 8px;
  height: 16px;
  border-left: 2px solid;
  border-right: 2px solid;
}
.gg-hashtag::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 16px;
  height: 8px;
  border-top: 2px solid;
  border-bottom: 2px solid;
  left: -6px;
  top: 4px;
}

.gg-calendar-due {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(var(--ggs, 1));
  width: 18px;
  height: 18px;
  border: 2px solid;
  border-radius: 3px;
}
.gg-calendar-due::after,
.gg-calendar-due::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  border-radius: 6px;
  background: currentColor;
}
.gg-calendar-due::before {
  top: 2px;
  width: 10px;
  height: 2px;
  left: 2px;
}
.gg-calendar-due::after {
  width: 4px;
  height: 4px;
  bottom: 3px;
  left: 5px;
}

.gg-calendar-dates {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(var(--ggs, 1));
  width: 18px;
  height: 18px;
  border: 2px solid;
  border-radius: 3px;
}
.gg-calendar-dates::after,
.gg-calendar-dates::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  border-radius: 3px;
  height: 2px;
  left: 2px;
}
.gg-calendar-dates::before {
  background: currentColor;
  width: 2px;
  box-shadow: 4px 0 0, 8px 0 0, 0 4px 0, 4px 4px 0, 8px 4px 0;
  top: 6px;
}
.gg-calendar-dates::after {
  width: 10px;
  top: -4px;
  box-shadow: 0 6px 0 0;
}

.gg-format-separator {
  transform: scale(var(--ggs, 1));
}
.gg-format-separator,
.gg-format-separator::after {
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 3px;
  background: currentColor;
}
.gg-format-separator::after {
  content: "";
  position: absolute;
  top: -12px;
  left: 3px;
  opacity: 0.5;
  width: 12px;
  box-shadow: 0 4px 0 0, 0 8px 0 0, 0 16px 0 0;
}

.gg-radio-checked,
.gg-radio-checked::after {
  display: block;
  box-sizing: border-box;
  border-radius: 100px;
}
.gg-radio-checked {
  border: 2px solid;
  position: relative;
  transform: scale(var(--ggs, 1));
  width: 20px;
  height: 20px;
}
.gg-radio-checked::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: currentColor;
  top: 4px;
  left: 4px;
}

.gg-bulb {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(var(--ggs, 1));
  width: 16px;
  height: 16px;
  border: 2px solid;
  border-bottom-color: transparent;
  border-radius: 100px;
}
.gg-bulb::after,
.gg-bulb::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
}
.gg-bulb::before {
  border-top: 0;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  top: 10px;
  border-bottom: 2px solid transparent;
  box-shadow: 0 5px 0 -2px, inset 2px 0 0 0, inset -2px 0 0 0, inset 0 -4px 0 -2px;
  width: 8px;
  height: 8px;
  left: 2px;
}
.gg-bulb::after {
  width: 12px;
  height: 2px;
  border-left: 3px solid;
  border-right: 3px solid;
  border-radius: 2px;
  bottom: 0;
  left: 0;
}

.gg-extension-alt {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(var(--ggs, 1));
  width: 14px;
  height: 14px;
}
.gg-extension-alt::after,
.gg-extension-alt::before {
  content: "";
  display: block;
  position: absolute;
  box-sizing: border-box;
  width: 8px;
  height: 14px;
  border: 2px solid;
}
.gg-extension-alt::after {
  width: 14px;
  height: 8px;
}

.gg-extension-add {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(var(--ggs, 1));
  background:
    linear-gradient(to left, currentColor 10px, transparent 0) no-repeat 10px 2px/6px 2px,
    linear-gradient(to left, currentColor 10px, transparent 0) no-repeat 12px 0/2px 6px;
  width: 22px;
  height: 22px;
}
.gg-extension-add::after,
.gg-extension-add::before {
  content: "";
  display: block;
  position: absolute;
  box-sizing: border-box;
  width: 8px;
  height: 14px;
  border: 2px solid;
  bottom: 0;
}
.gg-extension-add::after {
  width: 14px;
  height: 8px;
}

.gg-check-r {
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  border: 2px solid;
  transform: scale(var(--ggs, 1));
  border-radius: 4px;
}
.gg-check-r::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  left: 3px;
  top: -1px;
  width: 6px;
  height: 10px;
  border-width: 0 2px 2px 0;
  border-style: solid;
  transform-origin: bottom left;
  transform: rotate(45deg);
}

.gg-flag-alt {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(var(--ggs, 1));
  width: 14px;
  height: 20px;
  border-left: 2px solid;
}
.gg-flag-alt::after,
.gg-flag-alt::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  border-bottom: 2px solid;
}
.gg-flag-alt::before {
  width: 12px;
  height: 10px;
  border-top: 2px solid;
  border-right: 2px solid transparent;
}
.gg-flag-alt::after {
  width: 8px;
  height: 8px;
  border-left: 2px solid;
  border-top-left-radius: 2px;
  border-bottom-right-radius: 2px;
  transform: rotate(45deg);
  top: 1px;
  left: 6px;
}

.gg-close {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(var(--ggs, 1));
  width: 22px;
  height: 22px;
  border: 2px solid transparent;
  border-radius: 40px;
}
.gg-close::after,
.gg-close::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 16px;
  height: 2px;
  background: currentColor;
  transform: rotate(45deg);
  border-radius: 5px;
  top: 8px;
  left: 1px;
}
.gg-close::after {
  transform: rotate(-45deg);
}

/* warning triangle: css.gg has no such icon, so it is masked in from an svg */
.warning-icon {
  display: block;
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>') center / 1.6rem 1.6rem no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>') center / 1.6rem 1.6rem no-repeat;
}

.schema-editor {
  --element-border-radius: 0.5rem;
  --element-spacing: 1rem;
  --element-height: 44px;
  --step-separation: calc(var(--element-spacing) * 2.5);
  user-select: none;
  flex: 1;
  display: flex;
  /* clip, not hidden: focusing the params form must not scroll the panes */
  overflow: clip;
}

.schema-editor .schema-editor-panes {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 2fr 8fr 5fr;
  grid-template-rows: 1fr;
  gap: 0;
}

.schema-editor .schema-editor-palete {
  box-sizing: border-box;
  padding: 1rem;
  overflow-y: auto;
  border-right: 1px solid #ddd;
}

.schema-editor .schema-editor-tree {
  box-sizing: border-box;
  overflow-y: auto;
  padding: 1rem;
}

.schema-editor .side-pane {
  box-sizing: border-box;
  padding: 1rem;
  overflow-y: auto;
  border-left: 1px solid #ddd;
  text-align: left;
}

.schema-editor .editor-add {
  padding-right: calc(var(--element-spacing) * 4);
  margin-bottom: var(--element-spacing);
  border-radius: var(--element-border-radius);
  display: flex;
  flex-direction: row;
  align-items: center;
}

.schema-editor .editor-add:not(.disabled) {
  cursor: grab;
}

.schema-editor .editor-add.disabled {
  opacity: 0.5;
}

.schema-editor h3 {
  font-size: 2rem;
  line-height: 2;
  font-weight: 400;
  margin: 0;
}

.schema-editor .schema-editor-tree > .group-element > .group,
.schema-editor .group-addition {
  background: rgba(100, 150, 200, 0.3);
}

.schema-editor .group-element .group {
  background: rgba(100, 200, 200, 0.4);
}

.schema-editor .repeatable-group,
.schema-editor .repeatable-group-addition {
  background: rgba(233, 222, 193, 0.4);
}

.schema-editor .field-element .field,
.schema-editor .review-element .field,
.schema-editor .help-element .field,
.schema-editor .field-addition,
.schema-editor .review-addition,
.schema-editor .help-addition {
  background: rgba(240, 150, 150, 0.4);
}

.schema-editor .group-name {
  display: flex;
}

.schema-editor .element-selected > div {
  box-shadow: 0px 0px 0px 3px rgba(155,77,202,1) inset;
}

/* the drop slot is as tall as the row it stands in for, so rows below it
   don't shift when the placeholder becomes the element */
.schema-editor-tree .placeholder {
  height: var(--element-height);
  box-sizing: border-box;
  border: 3px dashed rgba(0, 0, 0, 0.1);
}

/* the dragged node keeps its content visible but dimmed, so the drop reads as
   an opacity change instead of content disappearing and reappearing */
.drag-dragged > * {
  position: relative;
}

.drag-dragged > * > * {
  opacity: 0.4;
}

.drag-dragged > *::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px dashed rgba(0, 0, 0, 0.1);
  border-radius: inherit;
  pointer-events: none;
}

/* margin, not padding: the border box is what the browser snapshots as the
   drag image, so it must wrap the node exactly */
.schema-editor .element {
  margin-bottom: var(--element-spacing);
}

.schema-editor .element > * {
  border-radius: var(--element-border-radius);
  display: flex;
}

.schema-editor .field-icon {
  position: relative;
  width: 28px;
  height: 28px;
  margin-left: 0.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 0.5rem;
}

.schema-editor .field-element .field-icon {
  opacity: 0.6;
}

.schema-editor .editor-add .field-icon {
  opacity: 0.25;
}

.schema-editor .drag-handle {
  background: rgba(0, 0, 0, 0.1);
  padding: 0 1rem;
  border-top-left-radius: var(--element-border-radius);
  border-bottom-left-radius: var(--element-border-radius);
  cursor: grab;
  margin-right: var(--element-spacing);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: var(--element-height);
}

.schema-editor .group > .drag-handle,
.schema-editor .repeatable-group > .drag-handle {
  align-self: stretch;
  margin-right: 0;
}

.schema-editor .drag-handle i {
  opacity: 0.8;
  color: rgba(0, 0, 0, 0.5);
}

.schema-editor .group > .drag-handle i,
.schema-editor .repeatable-group > .drag-handle i {
  --ggs: 1.2;
}

.schema-editor .editor-add .drag-handle {
  padding: 0 1rem;
  min-height: var(--element-height);
}

.schema-editor .field,
.schema-editor .group,
.schema-editor .repeatable-group {
  display: flex;
  flex-direction: row;
}

.schema-editor .field-content,
.schema-editor .group-content {
  flex-grow: 1;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.schema-editor .field-content {
  flex-direction: row;
  align-items: center;
}

/* an invalid node warns at the end of its row */
.schema-editor .field-content .warning-icon,
.schema-editor .group-name .warning-icon {
  margin-left: auto;
  margin-right: 1.5rem;
  color: #606c76;
  opacity: 0.6;
}


.schema-editor .group-name button {
  padding: 0 calc(var(--element-spacing) / 2) 0 0;
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.schema-editor .group-fields.inline {
  width: 100% !important;
  display: flex;
  flex-wrap: wrap;
  /* base rule sets column direction, which would stack the wrapped lines */
  flex-direction: row;
  align-items: flex-start;
  column-gap: 2rem;
}

.schema-editor .group-fields.inline > .element {
  flex-grow: 1;
  flex-basis: calc((55rem - 100%) * 999);
}

.schema-editor .group-fields.inline > .group-element,
.schema-editor .group-fields.inline > .repeatable-group,
.schema-editor .review-element {
  flex-basis: 100% !important;
}

.schema-editor .button {
  padding: 0.5rem 1rem;
}

.schema-editor .button-clear {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}


.schema-editor .field,
.form-editor-preview .field {
  flex-direction: row;
  align-items: center;
}

.form-editor-preview .group,
.form-editor-preview .repeatable-group {
  flex-direction: column;
}

.schema-editor .group-fields,
.form-editor-preview .group-fields {
  display: flex;
  flex-direction: column;
  /* inset on the container, not the children: a child margin would make the
     element's border box wider than the field, which the drag image picks up */
  padding: 0 2rem;
  box-sizing: border-box;
}


/* FormToolkit field styling - vertically stacked */
.side-pane {
  width: 100%;
}
.side-pane .field {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;
  width: 100%;
  align-items: stretch;
}
.side-pane .field label,
.side-pane .field legend {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #606c76;
  text-align: left;
}
.side-pane .field p {
  text-align: left;
}
.side-pane .field .input-wrapper {
  width: 100%;
}
.side-pane .field input,
.side-pane .field select,
.side-pane .field textarea {
  margin-bottom: 0.5rem;
  width: 100%;
}
.side-pane .field input[type='color'],
.side-pane .field input[type='date'],
.side-pane .field input[type='datetime'],
.side-pane .field input[type='datetime-local'],
.side-pane .field input[type='email'],
.side-pane .field input[type='month'],
.side-pane .field input[type='number'],
.side-pane .field input[type='password'],
.side-pane .field input[type='search'],
.side-pane .field input[type='tel'],
.side-pane .field input[type='text'],
.side-pane .field input[type='url'],
.side-pane .field input[type='week'],
.side-pane .field input:not([type]),
.side-pane .field textarea,
.side-pane .field select {
  -webkit-appearance: none;
  background-color: transparent;
  border: 0.1rem solid #d1d1d1;
  border-radius: .4rem;
  box-shadow: none;
  box-sizing: border-box;
  height: 3.8rem;
  padding: .6rem 1.0rem .7rem;
  width: 100%;
  font-size: 1.6rem;
  font-family: inherit;
}
.side-pane .field input[type='color']:focus,
.side-pane .field input[type='date']:focus,
.side-pane .field input[type='datetime']:focus,
.side-pane .field input[type='datetime-local']:focus,
.side-pane .field input[type='email']:focus,
.side-pane .field input[type='month']:focus,
.side-pane .field input[type='number']:focus,
.side-pane .field input[type='password']:focus,
.side-pane .field input[type='search']:focus,
.side-pane .field input[type='tel']:focus,
.side-pane .field input[type='text']:focus,
.side-pane .field input[type='url']:focus,
.side-pane .field input[type='week']:focus,
.side-pane .field input:not([type]):focus,
.side-pane .field textarea:focus,
.side-pane .field select:focus {
  border-color: #9b4dca;
  outline: 0;
}
.side-pane .field select {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%23d1d1d1" d="M0,0l6,8l6-8"/></svg>') center right no-repeat;
  padding-right: 3.0rem;
}
.side-pane .field select:focus {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%239b4dca" d="M0,0l6,8l6-8"/></svg>');
}
.side-pane .field textarea {
  height: auto;
  min-height: 6rem;
  resize: vertical;
}
.side-pane .field input[type='checkbox'],
.side-pane .field input[type='radio'] {
  display: inline;
  height: auto;
  width: auto;
  margin-right: 0.5rem;
}
.side-pane .field input[type='checkbox'] + label,
.side-pane .field input[type='radio'] + label {
  display: inline;
  font-weight: normal;
  margin-left: 0;
  margin-bottom: 0;
}
.side-pane .field .label-inline {
  display: inline;
  font-weight: normal;
  margin-left: 0;
}
.side-pane .inline-fields {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin-bottom: 0;
  width: 100%;
}
.side-pane .inline-fields > .field {
  display: block;
  flex: 1 1 auto;
  margin-bottom: 1.5rem;
}
@media (min-width: 40rem) {
  .side-pane .inline-fields {
    flex-direction: row;
    margin-left: -1.0rem;
    width: calc(100% + 2.0rem);
  }
  .side-pane .inline-fields > .field {
    margin-bottom: inherit;
    padding: 0 1.0rem;
  }
}
.side-pane fieldset,
.side-pane legend {
  border-width: 0;
  padding: 0;
  margin: 0;
  display: block;
  text-align: left;
}
.side-pane fieldset {
  margin-top: 1rem;
}
.side-pane .field:not(.required) label::after {
  content: " (optional)";
  color: rgba(96, 108, 118, 0.5);
  font-weight: normal;
}
.side-pane .field p.errors {
  margin: 0.5rem 0 0 0;
  color: #af3b3b;
  font-size: 1.3rem;
  order: 3;
}
.side-pane .field p {
  margin: 0.25rem 0 0 0;
  color: #888;
  font-size: 1.3rem;
  order: 3;
}
.side-pane .field.with-errors input[type='color'],
.side-pane .field.with-errors input[type='date'],
.side-pane .field.with-errors input[type='datetime'],
.side-pane .field.with-errors input[type='datetime-local'],
.side-pane .field.with-errors input[type='email'],
.side-pane .field.with-errors input[type='month'],
.side-pane .field.with-errors input[type='number'],
.side-pane .field.with-errors input[type='password'],
.side-pane .field.with-errors input[type='search'],
.side-pane .field.with-errors input[type='tel'],
.side-pane .field.with-errors input[type='text'],
.side-pane .field.with-errors input[type='url'],
.side-pane .field.with-errors input[type='week'],
.side-pane .field.with-errors input:not([type]),
.side-pane .field.with-errors textarea,
.side-pane .field.with-errors select {
  border-color: #af3b3b;
}


/* ---------------------------------------------------------------------------
   Form builder sizes: the book page scrolls, so the builder needs its own
   height, and the compact layout slides the params form in from the right.
   --------------------------------------------------------------------------- */

.schema-editor {
  position: relative;
  height: min(70vh, 64rem);
}

.schema-editor--compact .schema-editor-panes {
  grid-template-columns: 3fr 9fr;
}

.schema-editor--compact .side-pane {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 2;
  width: min(32rem, 72%);
  background: #fff;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.25s ease;
}

.schema-editor--compact .side-pane.is-open {
  transform: translateX(0);
}

.form-editor-preview {
  padding: 1.5rem 0;
}

.form-editor-json pre {
  max-height: 40rem;
  overflow: auto;
  font-size: 1.2rem;
}