.ebform {
  flex-direction: column;
  display: flex;
  position: relative;
}

.ebform.nodecoration {
  box-shadow: none;
  background: none;
  border: none;
  padding: 0;
}

.ebform .title {
  margin-bottom: .66em;
  font-size: 1.66em;
  font-weight: 400;
}

.ebform .description {
  border: 1px solid var(--panel-border-color);
  opacity: .75;
  background-color: #fff;
  border-radius: .5em;
  margin-bottom: .6em;
  padding: .5em .5em 0;
}

.ebform .description p {
  margin-bottom: .6em;
}

.ebform fieldset .description {
  margin: .5em;
}

.ebform .description em {
  color: inherit;
  font-style: italic;
  font-weight: inherit;
}

.ebform fieldset {
  max-width: 100%;
  margin-bottom: 1.33em;
}

.ebform fieldset.optional {
  margin-bottom: .33em;
}

.ebform fieldset > div {
  flex-direction: column;
  padding: .15em 0;
  display: flex;
}

.ebform fieldset.optional > div {
  display: none;
}

.ebform fieldset.optional.visible > div {
  display: block;
}

.ebform fieldset.optional > legend:before {
  content: "> ";
  color: #0000;
  background-image: url("../../img/icon/arrow-right.svg");
  background-position: -.55em;
  background-repeat: no-repeat;
  background-size: 2.2em;
  width: 1.25em;
  display: inline-block;
}

.ebform fieldset.optional.visible > legend:before {
  background-image: url("../../img/icon/arrow-down.svg");
  background-position: -.65em;
}

.ebform fieldset legend {
  border-bottom: 1px solid var(--panel-border-color);
  width: 100%;
  margin-left: -2.8em;
  padding: 0 0 0 3em;
  font-size: 110%;
  font-weight: 400;
}

.ebform fieldset.optional legend:hover {
  border-color: var(--panel-border-color);
  background-color: #fff;
}

.ebform label {
  flex-direction: column;
  max-width: 100%;
  margin: .25em 0;
  display: flex;
}

.ebform fieldset div input, .ebform fieldset select {
  max-width: 100%;
  min-height: 1.66em;
}

.ebform fieldset select {
  width: 100%;
  height: 2.1em;
}

.ebform input[type="submit"] {
  width: fit-content;
  margin-top: .33em;
}

.ebform input[type="radio"] {
  flex-shrink: 0;
  margin: .3em;
  display: inline-block;
}

.ebform label > div > input[type="radio"]:first-child {
  margin-left: 0;
}

.ebform label > div.required > input[type="radio"]:first-child {
  margin-left: .5em;
}

.ebform textarea {
  min-height: 5.2em;
}

.ebform textarea.json {
  min-height: 8em;
}

.ebform textarea.code {
  color: #333;
  font-family: monospace;
}

.ebform option.null {
  color: var(--text-disabled-color);
  font-style: italic;
}

.ebform .placeholder {
  color: var(--text-disabled-color);
  font-size: .93em;
  display: block;
}

.ebform .placeholder a {
  color: var(--link-disabled-color);
}

.ebform .read-only > div {
  background-color: var(--background-light-color);
  border: 1px solid var(--panel-border-color);
  word-break: break-word;
  border-radius: .3em;
  max-width: fit-content;
  padding: .3em .5em;
  font-weight: 300;
}

.ebform .read-only em {
  color: #cc0013;
}

.ebform input:required, .ebform select:required, .ebform textarea:required, .ebform .required-field-legend, .ebform label.required > div.tox-tinymce, .ebform div.required {
  border-left: .22em solid var(--required-color);
  border-radius: .3em;
  padding-left: .33em;
}

.ebform .required-field-legend {
  border-left-style: solid;
  border-radius: .2em;
  margin: .1em 0 1em .1em;
  padding-right: .3em;
}

.ebform .required-field-legend:before {
  background-color: var(--panel-background-color);
  color: #0000;
  content: "x";
  width: .3em;
  display: block;
  position: absolute;
  top: 0;
  left: -.5em;
}

.ebform label.required > div.tox-tinymce {
  padding-left: 0;
}

.ebform div[type="checkboxgroup"] {
  flex-flow: wrap;
  align-items: center;
  display: flex;
}

.ebform div[type="checkboxgroup"] > span {
  margin: .33em 0;
  padding-right: 1em;
  display: inline-flex;
}

.ebform .read-only div[type="checkboxgroup"] {
  background: none;
  border: none;
  padding: 0;
}

.ebform .read-only div[type="checkboxgroup"] > span {
  background-color: var(--background-light-color);
  border: 1px solid var(--panel-border-color);
  border-radius: .3em;
  margin: .2em .33em .33em 0;
  padding: 0 .4em;
}

.ebform div[type="checkboxgroup"] > span > input {
  margin-right: .5em;
}

.ebform label > .localization {
  display: block;
}

.ebform label > .localization > div {
  margin-bottom: .15em;
  position: relative;
}

.ebform label > .localization > div > img {
  opacity: .7;
  border: .05em solid #666;
  border-radius: .2em;
  width: 1.8em;
  margin-top: .4em;
  position: absolute;
  left: .4em;
}

.ebform label > .localization > div > input, .ebform label > .localization > div > span {
  width: 100%;
  padding-left: 2.65em;
}

.ebform label > .localization > div > span {
  margin-top: .33em;
  display: inline-block;
}

.ebform .qr-code > svg {
  border-radius: var(--button-border-radius);
  border: 1px solid #ccc;
}

.ebform label.image img {
  background: #888 url("../../img/shared/transparent-background-tile.png");
  border: 1px solid #aaa;
  border-radius: .3em;
  max-height: 16em;
}

.ebform label.image > div {
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
  display: flex;
}

.ebform label.image div.preview {
  position: relative;
}

.ebform label.image .preview .delete {
  cursor: pointer;
  background: url("../../img/icon/delete-red.svg") center / 1.5em no-repeat;
  width: 2em;
  height: 2em;
  display: none;
  position: absolute;
  top: 0;
  right: 0;
}

.ebform label.image .preview:hover .delete {
  display: block;
}

.ebform label .htmlpreview {
  flex-direction: column;
  align-items: flex-end;
  display: flex;
}

.ebform label .htmlpreview button {
  width: fit-content;
  font-size: 90%;
}

.eb-form-html-preview-overlay {
  opacity: .98;
  text-align: center;
  z-index: 100000;
  background-color: #666;
  padding: 22%;
  font-size: 3em;
  font-weight: 500;
  position: fixed;
  inset: 0;
}

.eb-form-html-preview-overlay > iframe {
  background-color: #fff;
  border: 1px solid #333;
  width: 25em;
  max-width: 100%;
  height: 100%;
  margin-left: -12.5em;
  display: block;
  position: fixed;
  top: 0;
  left: 50%;
}

.eb-form-html-preview-overlay .closer {
  color: #333;
  cursor: pointer;
  background: none;
  border-radius: .2em;
  justify-content: center;
  align-items: center;
  width: 1.3em;
  height: 1.3em;
  margin-left: 23.5em;
  font: 500 .5em / 1 IconsFont;
  display: flex;
  position: absolute;
  top: .2em;
  left: 50%;
}

.eb-form-html-preview-overlay .closer:hover {
  background-color: #ddd;
}

.ebform.filter {
  border-radius: .6em;
  flex-flow: wrap;
  align-items: center;
  width: fit-content;
  margin-bottom: .33em;
  padding: .2em .3em .2em .2em;
}

.ebform.filter .title {
  display: none;
}

.ebform.filter fieldset {
  border: none;
  flex-direction: row;
  margin: 0;
  padding: 0;
  display: block;
}

.ebform.filter fieldset > div {
  flex-direction: row;
  padding: 0;
}

.ebform.filter fieldset legend {
  display: none;
}

.ebform.filter label {
  float: left;
  flex-flow: wrap;
  width: fit-content;
  margin: .2em .1em;
  padding-left: .13em;
  display: flex;
}

.ebform.filter label > span {
  width: fit-content;
  min-width: fit-content;
  margin: 0 .3em;
  padding: 0;
}

.ebform.filter label > div {
  width: auto;
}

.ebform.filter input[type="submit"] {
  margin: 0;
  padding: 0 .5em;
}

.ebform.filter input[type="search"] {
  background-image: url("../../img/icon/search-gray.svg");
  background-position: .2em;
  background-repeat: no-repeat;
  background-size: 1.2em;
  width: 100%;
  padding-left: 1.6em;
}

.ebform.filter select {
  max-width: 14em;
}

.ebform.filter select.value-selected {
  background-color: #faffaf;
}

.ebform div[role="application"] {
  align-items: initial;
  border-radius: .3em;
  padding-left: 0;
  display: flex;
}

.ebform .suggest {
  position: relative;
  overflow: visible;
}

.ebform .suggest .suggestions {
  border: 1px solid var(--panel-border-color);
  cursor: pointer;
  background-color: #fff;
  border-radius: .3em;
  position: absolute;
  top: 3.6em;
  left: 0;
}

.ebform.filter .suggest {
  max-width: 11em;
}

.ebform.filter .suggest .suggestions {
  left: 1.25em;
}

.ebform .suggest .suggestions li {
  border: 1px solid #0000;
  border-radius: .2em;
  padding: .1em .4em;
}

.ebform .suggest .suggestions .selected {
  background-color: var(--panel-background-focused-color);
  border-color: var(--border-focused-light-color);
}

.ebform .suggest .clear {
  opacity: .5;
  background-image: url("../../img/icon/clear.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1.5em;
  width: 1.33em;
  height: 1.33em;
  display: block;
  position: absolute;
  top: .4em;
  right: 0;
}

a.button.create {
  background-image: url("../../img/icon/add-white.svg");
  background-position: .25em;
  background-size: 1.5em;
  margin: .4em 0 .2em;
  padding-left: 2em;
  font-size: .9em;
}

a.button.create:hover {
  background-position: .184em 45%;
  background-size: 1.6em;
}

@media (width >= 768px) {
  .ebform {
    background-color: var(--panel-background-color);
    border: 1px solid var(--panel-border-color);
    border-radius: 8px;
    padding: .5em 1em 1em;
  }

  .ebform .title {
    font-size: 1.45em;
  }

  .ebform .required-field-legend {
    background-color: var(--panel-background-color);
    margin: 0;
    position: absolute;
    top: .5em;
    right: 1.66em;
  }

  .ebform fieldset, .ebform fieldset.optional.visible {
    border: 1px solid var(--panel-border-color);
    border-radius: .5em;
  }

  .ebform fieldset.optional {
    border: none;
    border-radius: 0;
  }

  .ebform fieldset > div {
    padding: 0 .5em .33em;
  }

  .ebform fieldset legend, .ebform fieldset.optional.visible legend {
    border-radius: var(--button-border-radius);
    font-size: inherit;
    font-weight: inherit;
    border: 1px solid #0000;
    width: fit-content;
    margin-left: .6em;
    padding: 0 .5em 0 .3em;
  }

  .ebform fieldset.optional legend {
    transition: margin-left var(--transition-time);
    margin-left: -.4em;
  }

  .ebform fieldset.optional.visible legend:hover {
    border-color: var(--panel-border-color);
  }

  .ebform fieldset.optional.visible legend {
    margin-left: .6em;
    padding-left: .33em;
  }

  .ebform label {
    vertical-align: middle;
    flex-direction: row;
    overflow: hidden;
  }

  .ebform label > span {
    float: left;
    text-align: right;
    width: 17%;
    min-width: 7em;
    margin-right: .66em;
  }

  .ebform.wide-labels label > span {
    width: 27%;
    min-width: 13.5em;
  }

  .ebform fieldset label > span {
    width: calc(17% - .6em);
  }

  .ebform.wide-labels fieldset label > span {
    width: calc(27% - .6em);
  }

  .ebform label > input, .ebform label > select, .ebform label > textarea, .ebform label > div {
    float: right;
    width: 82%;
  }

  .ebform.wide-labels label > input, .ebform.wide-labels label > select, .ebform.wide-labels label > textarea, .ebform.wide-labels label > div {
    width: 72%;
  }

  .ebform label > input, .ebform label > select {
    max-height: 2.13em;
  }

  .ebform label > input[type="number"] {
    max-width: 18em;
  }

  .ebform label > input[type="time"] {
    max-width: 5em;
  }

  .ebform label > input[type="datetime-local"] {
    max-width: 10em;
  }

  .ebform label > select {
    width: auto;
    max-width: 82%;
  }

  .ebform.wide-labels label > select {
    width: auto;
    max-width: 72%;
  }

  .ebform label > select, .ebform label > div {
    position: relative;
  }

  .ebform label > span {
    padding: .3em 0;
  }

  .ebform label > div {
    align-items: center;
    display: flex;
  }

  .ebform label > div[type="dbcheckboxgroup"] {
    flex-direction: column;
    align-items: flex-start;
  }

  .ebform label > div[type="dbcheckboxgroup"] > span {
    border: 1px solid #0000;
    border-radius: 5px;
    flex-direction: row;
    align-items: center;
    margin-left: -.4em;
    padding: .1em .7em .1em .5em;
    display: inline-flex;
  }

  .ebform label > div[type="dbcheckboxgroup"] > span:hover {
    background-color: #fff;
    border: 1px solid #ddd;
  }

  .ebform label > div[type="dbcheckboxgroup"] > span > input {
    min-height: 0;
    margin-right: .66em;
  }

  .ebform input[type="submit"] {
    margin-left: calc(17% + .5em);
  }

  .ebform.no-labels input[type="submit"] {
    margin-left: 0;
  }

  .ebform.wide-labels input[type="submit"] {
    margin-left: calc(27% + .5em);
  }

  .ebform.filter .title {
    width: fit-content;
    margin: 0 .1em 0 .2em;
    font-size: 1em;
    display: block;
  }

  .ebform.filter label {
    align-items: center;
  }

  .ebform.filter input[type="search"], .ebform.filter select {
    height: 1.75em;
  }

  .ebform .placeholder {
    margin-left: 1.5em;
  }

  .ebform .suggest .suggestions {
    top: 2.2em;
    left: calc(17% + .6em);
  }

  .ebform .suggest .clear {
    background-size: 1.2em;
    top: .2em;
    right: -.1em;
  }
}