/**
 * @file
 * Styles for forms.
 */

details {
  margin-top: 1em;
  margin-bottom: 1em;
  border: 1px solid #d6d6d6;
}

details > .details-wrapper {
  padding: 0.5em 1.5em;
}

details .details-description {
  font-style: italic;
}  

summary {
  /*background: #dbdbdb;*/
  background: #f5f5f7;
  padding: 0.2em 0.5em;
  cursor: pointer;
}

label {
  display: table;
  font-weight: bold;
}

label.option {
  display: inline;
  font-weight: normal;
}

.label {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: bold;
}

/* Generelle Abstände von Form-Elementen sollen oben und unten 1em sein */
.form-item, .form-actions {
  margin-top: 1em;
  margin-bottom: 1em;
}

/* Form Actions sollen keinen Hintergrund haben */
.form-edit .form-actions {
  background-color: initial;
}

/* Abstände zwischen CheckBoxen und Radio-Buttons soll nur 0.4em sein */
.form-checkboxes .form-item,
.form-radios .form-item {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}

/* Beschreibungstexte unter Form Elementen sollen etwas kleiner in der SChriftart sein */
.form-composite > .fieldset-wrapper > .description,
.form-item .description {
  font-size: 0.85em;
}

/* Der Legend Bereich (z.B. beim Benutzerprofil "Rollen" / "Status"), soll mit etwas gestyled werden */
.form-composite > legend,
.label {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: bold;
}

/* Die Abstände von Radio-Buttons und CheckBoxen sollen etwas enger sein */
.form-checkboxes .form-item,
.form-radios .form-item {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}

/* Texte in allen Form-Feldern sollen auch die Montserrat Schriftart bekommen */
input,
textarea,
select {
  font-family: Montserrat,sans-serif;
}

/* Select-Boxen sollen wieder den CI-Konformen Rahmen und Margin/Padding, wie die Input-Boxen haben */
select {
  border: 1px solid #d6d6d6;
  margin: 2px 0;
  padding: 2px;
}

/* Die Abstände in den Input-Boxen um Texte und co */
input {
  box-sizing: border-box;
  /* Keep form elements from overflowing their containers. */
  max-width: 100%;
  margin: 2px 0;
  padding: 4px;
}

/* Textgröße in Input- und Textfeldern etwas reduziert */
input,
textarea {
  font-size: 0.929em;
}

/* Um die Input-Boxen soll ein leicht grauer Rahmen */
input.form-text,
input.form-tel,
input.form-email,
input.form-url,
input.form-search,
input.form-file,
input.form-number,
input.form-color,
textarea.form-textarea {
  color: #3b3b3b;
  border: 1px solid #d6d6d6;
}

/* Fieldsets sollen einen "normalen" Rahmen haben */
fieldset {
  min-width: 0;
  margin: 1em 0;
  padding: 0.35em 0.625em 0.75em;
  border: 1px solid #d6d6d6;
}

/* Die Pflichtfelderkennzeichnung muss separat definiert werden */
.form-required:after {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0.3em;
  content: "";
  vertical-align: super;
  background-image: url(../../icons/ee0000/required.svg);
  background-repeat: no-repeat;
  background-size: 6px 6px;
}


/* Textgröße in Form-Elementen etwas reduziert */
.form-item label,
.form-wrapper .label {
  font-size: 0.929em;
}

/* Das Kommentar-Form soll keine Abstände haben, sodass der Filter direkt darunter liegt */
.comment-form details.filter-wrapper .details-wrapper,
.comment-form .text-format-wrapper .form-item {
  margin-top: 0;
  margin-bottom: 0;
}

/* Dragable Felder (das Kreuz zum verschieben) soll schmal sein */
form .field-multiple-table .field-multiple-drag {
  width: 30px;
  padding-right: 0; /* LTR */
}