/* INPUTS*/
body {
  --input-openlist-bg: #2d2d2d;
  --input-openlist-border-radius: 4px;
  --input-padding-left: 15px;
  --input-padding-offset: var(--input-padding-left);
  --input-padding-top: 15px;
  --input-dropdown-padding: 15px;
  --input-height: 2em;
  --input-border-width: 0px;
  --input-border: solid var(--input-border-width) rgb(0 0 0 / 25%);
  --input-border-active: solid var(--input-border-width) rgb(0 0 0 / 25%);
  --input-border-radius: calc(var(--input-height) / 2);
  --input-icon-color: var(--ci-color);
  --input-icon-hover-color: var(--ci-color);
  --input-color: var(--ci-color);
}

div[input-type],
.pseudoinput,
.styledlikeinputtype {
  outline: var(--input-border);
  height: var(--input-height);
  width: fit-content;
  width: -moz-fit-content;
  border-radius: var(--input-openlist-border-radius);
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  margin-left: calc(-1 * var(--input-padding-offset));
  padding-left: var(--input-padding-left);
  /* margin-right: calc(-1 * var(--input-padding-left)); */
  padding-right: var(--input-padding-left);
}

div[input-type]:last-child,
.styledlikeinputtype:last-child {
  margin-bottom: 0;
}

*[input-name][input-type][is-invalid] {
  outline: red solid 4px;
  outline-offset: -2px;
  z-index: 999;
}

div[input-type] *::placeholder {
  color: inherit;
  opacity: 0.4;
}

div[input-type][input-value=""]:not([onreset-callback]) .resetbutton {
  display: none;
}

div[input-type] .resetbutton {
  position: absolute;
  top: 50%;
  right: 1em;
  transform: translate(-100%, -50%);
  -webkit-mask-image: var(--icon-close);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-image: var(--icon-close);
  mask-size: contain;
  mask-repeat: no-repeat;
  width: 0.75em;
  height: 0.75em;
  background: var(--ci-color);
  cursor: pointer;
}

div[input-type][hide-reset-button] .resetbutton {
  display: none
}

div[input-type][input-value=""] .resetbutton {
  display: none;
}

/* dropdown */
div[input-type="dropdown"] {
  padding-right: 0;
  box-sizing: content-box;
  width: fit-content;
  width: -moz-fit-content;
  max-width: 100%;
}

div[input-type="dropdown"][is-expanded] {
  z-index: 9999999999;
}

div[input-type="dropdown"] .inputlabel,
div[input-type="dropdown"] .currentvalue {
  position: relative;
  line-height: inherit;
}

div[input-type="dropdown"] .currentvalue {
  white-space: nowrap;
  line-height: var(--line-height);
  padding-top: calc((var(--input-height) - var(--line-height))/2);
  height: 100%;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  padding-right: 3em;
}

div[input-type="dropdown"][hide-reset-button] .currentvalue {
  padding-right: 2em;
}

div[input-type="dropdown"] .dropdownitem {
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  height: var(--line-height);
  width: 100%;
  margin-right: calc(2em + var(--input-padding-left));
}

div[input-type="dropdown"] .dropdownitem[is-current] {

}

div[input-type="dropdown"] .dropdownitem[is-hidden-by-neighbour-value] {
  display: none;
}

div[input-type="dropdown"][is-expanded] .currentvalue {
  /* display: none; */
  opacity: 0;
  pointer-events: none;
  /* width: var(--scrollcont-width); */
}

div[input-type="dropdown"]:not([input-value=""]):not([is-expanded]) .inputlabel {
  opacity: 0;
  pointer-events: none;
}

div[input-type="dropdown"][input-value=""] .inputlabel {
  display: block;
}

div[input-type="dropdown"] .dropdownarrow {
  position: absolute;
  top: 50%;
  right: calc(var(--input-dropdown-padding)/2);
  width: 0.75em;
  height: 0.75em;
  transform: translate(-50%, -50%) rotate(180deg);


  --svgicon-url:
    var(--utils-icon-up);
}

div[input-type="dropdown"] .dropdownitems {
  margin-left: calc(-1 * var(--input-dropdown-padding));
  margin-top: calc(-1 * var(--input-height));
  top: 0;
  left: 0;
  display: block;
  background: var(--bg-color);
  outline: var(--input-border-active);
  border-bottom-left-radius: var(--input-openlist-border-radius);
  border-bottom-right-radius: var(--input-openlist-border-radius);
  padding-left: var(--input-dropdown-padding);
  z-index: 9;
  pointer-events: none;
  opacity: 0;
  position: absolute;
  height: var(--input-height);
  overflow: hidden;
  transition: none;
  box-sizing: content-box;
  line-height: var(--line-height);
}

div[input-type="dropdown"]:not([has-label]) .dropdownitems {
  border-top-left-radius: var(--input-openlist-border-radius);
  border-top-right-radius: var(--input-openlist-border-radius);
}

div[input-type="dropdown"][is-expanded] .dropdownarrow {
  transform: translate(-50%, -50%) rotate(0deg);
  z-index: 9999999999999999;
}

div[input-type="dropdown"][is-expanded] .dropdownitems {
  opacity: 1;
  position: relative;
  pointer-events: all;
  z-index: 99999999;
  height: fit-content;
  height: -moz-fit-content;
  transition: height 0.15s;
  background: var(--input-openlist-bg);
}

div[input-type="dropdown"] .dropdowncategory~.dropdownitem {
  padding-left: var(--input-padding-left);
}

div[input-type="dropdown"] .dropdowncategory:not(:first-child) {
  margin-top: 1em;
}

div[input-type="dropdown"] .dropdownscrollcont {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc((var(--input-height) + 0.25em) * 6);
  display: grid;
  grid-row-gap: 0.25em;
  padding-top: calc((var(--input-height) - var(--line-height))/2);
  padding-bottom: calc((var(--input-height) - var(--line-height)));
  /* padding-right: calc(2em + var(--input-padding-left)); */
  --mask-padding-bottom: calc((var(--input-height) - var(--line-height))/2);
  --mask-image: linear-gradient(to bottom, transparent 0%, black var(--input-dropdown-padding), black calc(100% - var(--input-dropdown-padding)), transparent calc(100% - var(--mask-padding-bottom)));
  -webkit-mask-image: var(--mask-image);
  mask-image: var(--mask-image);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  --width-height-to-closest-slug: *[input-type]|scrollcont;
}

div[input-type="dropdown"] .dropdownscrollcont::-webkit-scrollbar {
  width: 6px;
}

div[input-type="dropdown"] .dropdownscrollcont::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 0.5em;
}

div[input-type="dropdown"] .dropdownscrollcont::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 0.5em;
}

/* textinput */
div[input-type="textinput"],
.styledlikeinputtype,
.pseudoinputtypetext {
  line-height: var(--input-height);
  outline: none;
  --input-padding-offset:
    var(--input-padding-left);
}

div[input-type="textinput"] {
  width: fit-content;
  width: -moz-fit-content;
  max-width: calc(100% + 2*var(--input-padding-left));
}

div[input-type="textinput"] input,
.styledlikeinputtype input[type="text"],
.pseudoinput .pseudoinputtext {
  display: block;
  background: none;
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  font-family: inherit;
  width: 100%;
  height: var(--input-height);
}

div[input-type="textinput"] .inputtextautosizerwrapper {
  width: fit-content;
  width: -moz-fit-content;
  max-width: 100%;
}

div[input-type="textinput"] .inputtextautosizer {
  margin-bottom: calc(-1 * var(--input-height));
  height: var(--input-height);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  max-width: 100%;
  overflow: hidden;
}

div[input-type="textinput"] .inputtextautosizer:empty:before {
  content: attr(placeholder);
}

div[input-type="textinput"] .inputtextautosizerwrapper:focus-within {
  width: 100%
}

/* searchdropdown */
div[input-type="searchdropdown"] {
  line-height: var(--input-height);
  width: fit-content;
  width: -moz-fit-content;
  max-width: 100%;
}

div[input-type="searchdropdown"][input-is-focused] {
  z-index: 19999999;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: var(--input-openlist-bg);
}

div[input-type="searchdropdown"] .inputtextautosizerwrapper {
  width: fit-content;
  width: -moz-fit-content;
  max-width: 100%;
}

div[input-type="searchdropdown"] .inputtextautosizer {
  margin-bottom: calc(-1 * var(--input-height));
  height: var(--input-height);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  max-width: 100%;
  overflow: hidden;
}

div[input-type="searchdropdown"] .inputtextautosizer:empty:before {
  content: attr(placeholder);

}

div[input-type="searchdropdown"] .inputtextautosizerwrapper:focus-within {
  width: 100%
}

div[input-type="searchdropdown"] input {
  background: none;
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  /* padding-left: var(--input-padding-left); */
  /* padding-right: var(--input-padding-left); */
  font-family: inherit;
  width: 100%;
  height: 100%;
  opacity: 0;
}

div[input-type="searchdropdown"] input:focus,
div[input-type="searchdropdown"] .inputtextautosizer:empty+input {
  opacity: 1;
}

div[input-type="searchdropdown"] .refidholder {
  position: absolute;
  width: 100%;
  max-width: 100%;
  pointer-events: none;
}

div[input-type="searchdropdown"] .refidel {
  width: 100%;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

div[input-type="searchdropdown"][input-is-focused] .refidholder {
  display: none;
}

div[input-type="searchdropdown"] .searchlist {
  background: var(--bg-color);
  min-height: var(--line-height);
  display: none;
  flex-direction: column;
  margin-top: -2px;
  margin-left: calc(-1 * var(--input-dropdown-padding) - var(--input-border-width));
  width: calc(100% + (2 * var(--input-dropdown-padding) + 2 * var(--input-border-width)));
  border: var(--input-border-active);
  border-top: none;
  background: var(--input-openlist-bg);
  overflow: hidden;
  border-radius: 0px 0px var(--input-openlist-border-radius) var(--input-openlist-border-radius);
  padding-bottom: 8px;
  max-height: 320px;
  overflow-y: auto;
}

div[input-type="searchdropdown"] .searchlist {
  animation: none !important;
}

div[input-type="searchdropdown"] .searchlist[waiting-for-api]:empty:before {
  content: "...";
  padding: 0 var(--input-dropdown-padding);
  animation: processing 0.9s infinite;
}

div[input-type="searchdropdown"] .searchlistel {
  padding-left: var(--input-dropdown-padding);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  padding-right: var(--input-dropdown-padding);
  min-height: 2em;
}

div[input-type="searchdropdown"] .searchlistel.removerefid {
  font-size: 0.75em;
  opacity: 0.5;
  order: -1;
}

div[input-type="searchdropdown"] .searchlist .searchlistel:not(.removerefid):hover {
  --color: white;
  color: white;
  background: var(--ci-color);
}

div[input-type="searchdropdown"] .searchlistel.removerefid:hover {
  --color: red;
  color: red;
  opacity: 1;
}

div[input-type="searchdropdown"] .searchlist .searchlistel[is-current-value] {
  background: var(--ci-color);
}

div[input-type="searchdropdown"][input-is-focused] .searchlist {
  display: flex;
}


/* richtextinput */
div[input-type="richtextinput"] {
  line-height: inherit;
  font-size: inherit;
  font-family: inherit;
  height: auto;
  border-radius: 0;
}

div[input-type="richtextinput"] *[contenteditable] {
  background: none;
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  width: 100%;
  padding: var(--input-padding-left);
  min-height: calc(var(--input-height) * 2);
}

div[input-type="richtextinput"] *[contenteditable] a[href=""] {
  background: #cccccc;
}

div[input-type="richtextinput"] *[contenteditable] a {
  text-decoration: underline;
}

div[input-type="richtextinput"] .toolbar_texteditor {
  margin-right: 0;
}

div[input-type="richtextinput"] .toolbar_texteditor .colorbts {
  flex-direction: row;
  position: relative;
  right: 0;
  min-width: unset;
  max-width: unset;
  overflow: visible;
  padding: 0.25em;
  box-sizing: border-box;
}

div[input-type="richtextinput"] .toolbar_texteditor .colorbts:hover {
  height: auto;
  box-shadow: none;
}

div[input-type="richtextinput"] .toolbar_texteditor div[class^="iconbt_color"] {
  opacity: 1;
  --minmax-wh: calc(2em - 0.5em);
  margin-right: 0;
  min-width: var(--minmax-wh);
  max-width: var(--minmax-wh);
  min-height: var(--minmax-wh);
  max-height: var(--minmax-wh);
}

/* TEXT AREA */
div[input-type="textarea"] {
  border-radius: 0;
  height: auto;
}

div[input-type="textarea"] textarea {
  font-size: inherit;
  font-family: inherit;
  width: 100%;
  height: 100%;
  resize: none;
  background: transparent;
  position: relative;
  display: block;
  padding: var(--input-padding-left);
  overflow: hidden;
  box-sizing: content-box;
}

div[input-type="textarea"] textarea,
div[input-type="textarea"] textarea:focus {
  outline: 0;
  border: 0;
}

/* INPUT GROW WRAP */
div[input-type][input-name] .inputgrowwrap {
  display: grid;
}

div[input-type][input-name] .inputgrowwrap::after {
  content: attr(input-value) " ";
  white-space: pre-wrap;
  visibility: hidden;
  padding: var(--input-padding-left);
}

div[input-type][input-name] .inputgrowwrap>*,
div[input-type][input-name] .inputgrowwrap::after {
  grid-area: 1 / 1 / 2 / 2;
}

/* DATE INPUT */
div[input-type="dateinput"] {
  background: var(--bg-color);
  margin-right: calc(-1 * var(--input-padding-left) + calc(2 * var(--input-padding-offset)));
}

div[input-type="dateinput"] input {
  height: 100%;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
  outline: 0;
  /* width: 7em; */
  border: 0;
  background: transparent;
}

/* checkbox */
div[input-type="checkbox"] {
  background: transparent;
  display: flex;
  cursor: pointer;
  outline: none;
  margin-left: 0;
  padding-left: 0;
  height: auto;
}

div[input-type="checkbox"] a {
  text-decoration: underline;
}

div[input-type="checkbox"] .checkboxbox {
  width: var(--input-height);
  height: var(--input-height);
  flex-shrink: 0;
  border: var(--input-border);
  background: white;
  border-radius: var(--input-height);
}

div[input-type="checkbox"] .inputlabel {
  line-height: 1.1em;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 0.75em;
}

div[input-type="checkbox"] .checkboxbox:after {
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  ;
  mask-image: var(--input-checkbox-checked);
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-image: var(--input-checkbox-checked);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  background: transparent;
}

div[input-type="checkbox"][input-value="true"] .checkboxbox:after {
  background: var(--input-color);
}

/* media input */
div[input-type="mediainput"] {
  background: transparent;
  display: flex;
  height: auto;
}

div[input-type="mediainput"] .uploadcontainer {
  width: calc(100% - var(--input-height) - 0.5em);
}

div[input-type="mediainput"] .uploadcontainer:empty:after {
  content: attr(placeholder);
  display: block;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

div[input-type="mediainput"] .uploadcontainer .mediael {
  width: 100%;
}

div[input-type="mediainput"] a[file-type="pdf"] {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-flow: row;
  flex-wrap: nowrap;
  margin-bottom: 0.25em;
  background: white;
  border-radius: var(--input-height);
}

div[input-type="mediainput"] a[file-type="pdf"]:last-of-type {
  margin-bottom: 0em;
}

div[input-type="mediainput"] a[file-type="pdf"] .pdficon {
  width: var(--input-height);
  height: var(--input-height);
  --scope-icon-image: var(--input-mediainput-file-pdf);
  --scope-icon-size: 65%;
  margin-left: calc(var(--input-height) * 0.25);
}

div[input-type="mediainput"] a[file-type="pdf"] .filename {
  line-height: 1em;
  height: 100%;
  width: 100%;
  font-size: 0.75em;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 0.5em;
  text-overflow: ellipsis;
  overflow: hidden;
  padding-right: calc(var(--input-height) + 0.5em);
}

div[input-type="mediainput"] .uploadbt {
  position: relative;
  top: 0;
  left: 0;
  --minmax-wh: var(--input-height);
  min-width: var(--minmax-wh);
  min-height: var(--minmax-wh);
  max-width: var(--minmax-wh);
  max-height: var(--minmax-wh);
  border-radius: var(--minmax-wh);
  background: white;
  overflow: hidden;
  margin-right: 0.5em;
}

div[input-type="mediainput"] input[type="file"],
div[input-type="mediainput"] .uploadbtlabel {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  --scope-icon-image: var(--input-mediainput-upload);
  --scope-icon-size: 40%;
  cursor: pointer;
  line-height: 0px;
  font-size: 0px;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--input-icon-color);
  transition: background 0.3s;
  pointer-events: inherit;
}

.uploadbt input[type="file"]:hover,
.uploadbt .filelabel:hover {
  background: var(--input-icon-hover-color);
}

.uploadbt input[type="file"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  pointer-events: inherit;
}

div[input-type="mediainput"] .mediael .deletebt {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--input-height);
  height: var(--input-height);
  cursor: pointer;
}

div[input-type="mediainput"] .mediael .deleteicon.scopeicon {
  --scope-icon-image: var(--input-mediainput-delete);
  --scope-icon-size: 40%;
  background: var(--ci-color);
}

div[input-type="mediainput"] .mediael .deletebt[ready-to-delete] .deleteicon.scopeicon {
  background: red;
}