.subfield span:not(.slapos-parameter) {
  font-weight: normal;
  font-style: italic;
  padding-left: 7px;
  color: rgb(94, 127, 141)
}
.subfield select { margin-bottom: 10px;}

.subfield textarea {width: 250px; height: 60px;}

.subfield .error {
  color: #E82525;
  font-weight: 700;
}

.input button {margin-left: 10px;}

.bt_close, .subfield .slapos-parameter-dict-key span.bt_close{
  padding: 0 6px;
  display: block;
  float: right;
  text-overflow:clip;
  white-space:nowrap;
  overflow: hidden;
  font-size: 1.5em;
  border-radius: 2px;
}
.bt_close:hover {
  background: #c9c9c9;
  color: #fff;
}

.display-none {
  display: none;
}

.non-editable > div.input {border: 1px solid rgb(201, 201, 201); padding: 5px; background: white; font-weight: normal;
margin: 5px 0 10px; max-height: 250px; width: 80%;}

textarea.slapos-parameter {
  width: 400px;
  height: 100px;
}

label.slapos-parameter-dict-key::before {
  content: "\25BC  Parameter Entry: ";
}
label.slapos-parameter-dict-key-colapse::before {
  content: "\25BA   Parameter Entry: ";
}
div.slapos-parameter-dict-key {
  margin-top: 10px;
  margin-left: 6px;
  background: rgb(245, 245, 245);
  border: 1px solid rgb(230, 230, 230);
  padding: 5px;
}

/* cleanup */
fieldset > .subfield > label:not(.slapos-parameter-dict-key) {
  color: rgb(112, 125, 136);
}
fieldset > div.subfield {
  padding-left: 15px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.field input ~ span,
.subfield input ~ span {
  position: relative;
  top: -27px;
  pointer-events: none;
  cursor: text;
}
.field input:not(:placeholder-shown) ~ span:not(.error),
.subfield input:not(:placeholder-shown) ~ span:not(.error),
.field select:not(:placeholder-shown) ~ span:not(.error),
.subfield select:not(:placeholder-shown) ~ span:not(.error) {
  visibility: hidden;
}
.field input ~ span:not(.error),
.subfield input ~ span:not(.error),
.field select ~ span:not(.error),
.subfield select ~ span:not(.error) {
  opacity: .7;
}
.field input:focus ~ span,
.subfield input:focus ~ span,
.field select:focus ~ span,
.subfield select:focus ~ span {
  visibility: hidden;
}
.subfield .input {
  margin-bottom: -15px;
}
.subfield .error {
  float: right;
  margin-right: 30px;
}
.subfield .input textarea {
  margin-bottom: 16px;
}

.slapos-parameter-dict-key {
  cursor: pointer;
  font-style: italic;
  color: #000;
}

label.slapos-parameter-dict-key {
  text-transform: capitalize;
}
label.slapos-parameter-dict-key ~ div.input label {
  color: rgb(112, 125, 136);
}
.slapos-parameter-dict-key label {
  color: rgb(112, 125, 136);
}
/* add button */
.slapos-parameter-dict-key ~ .subfield .input {
  position: relative;
  margin-bottom: 0;
}
.input .add-sub-form {
  position: absolute;
  right: 10px;
  top: 0;
  bottom: 0;
  text-decoration: none;
  cursor: pointer;
  color: #000;
  margin: 0;
}
.add-sub-form:before {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px'><path fill='#000' d='m6,17.16589l12.55862,0l0,-15.274l12.88276,0l0,15.274l12.55862,0l0,15.66822l-12.55862,0l0,15.274l-12.88276,0l0,-15.274l-12.55862,0l0,-15.66822z' fill-opacity='0.5'/></svg>");
  background-size: contain;
  content: "";
  width: 16px;
  height: 16px;
  position: absolute;
  background-repeat: no-repeat;
  top: 8px;
  left: 4px;
}

.subfield {
  padding-top: 3px;
  min-height: 5em;
}

.subfield select {
  margin-bottom: 0;
}
.subfield .input select + span {
  position: relative;
  top: -1.9em;
  opacity: .7;
}

select.readonly {
  background: #EEE; 
  pointer-events: none;
  touch-action: none;
}

div.slap_json_form {
    display: block;
    margin-inline-start: 2px;
    margin-inline-end: 2px;
    padding-block-start: 0.35em;
    padding-inline-start: 0.75em;
    padding-inline-end: 0.75em;
    padding-block-end: 0.625em;
    min-inline-size: min-content;
    border-width: 2px;
    border-style: groove;
    border-color: threedface;
    border-image: initial;
}