/*
 Theme Name:     Divi Child Theme
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Nutzen Sie das Child Theme um Änderungen am Divi Theme vorzunehmen. Sie können dazu den <a href="/wp-admin/theme-editor.php">Theme-Editor</a> benutzen.
 Author:         Elegant Themes
 Author URI:     http://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/


/* =Theme customization starts here
------------------------------------------------------- */

.string-meter-wrapper {
	border: 3px solid black;
	border-radius: 5px;
	background-color: #555555;
	min-height: 12rem;
	min-width: 4rem;
	max-width: 6rem;
	position:relative;
}
.string-meter-active {
	background-color: #ffde65;
	height: 50%;
	width: 100%;
	position:absolute;
	left: 0;
	bottom: 0;
}
.string-meter-percent {
	position: absolute;
	width: 100%;
	left:0;
	top:0;
	text-align:center;
	font-weight:bold;
}


form#kundenformular input:not([type="radio"]) + label {
  display: none;
}

form#kundenformular input[type="radio"] + label {
  vertical-align: middle;
  height: 2em;
  display: inline-flex;

  border: 1px solid #333;
  border-radius: 0.5em;
  padding: 0.1em 0.7em;
  margin: 0.5em;
}

form#rechnungsdaten textarea.pos_text,
form#rechnungsdaten input,
form#kundenformular input {
  height: 3em;
  margin-top: 1em;
  float: left;
  padding: 1em;
  background-color: #eee;
  border: none;
}

form#rechnungsfilter input {
  height: 3em;
  margin-right: 2em;
  margin-left: 1em;
  padding: 1em;
  background-color: #eee;
  border: none;
}

form#rechnungsfilter input:not([type="date"]) {
  width: 30em;
}


form#kundenformular input[type="radio"] {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

form#kundenformular input[type="radio"]:checked + label {
  background: #ebf5d7;
	box-shadow: none;
}

form#kundenformular input[type="radio"]:focus + label,
form#kundenformular input[type="radio"]:hover + label {
  background: #ffebe6; 
}

form#kundenformular input#firma {
  width: calc(60% - 2em);
  clear: both;
  margin-right: 2em;
}
form#kundenformular input#kd_nummer {
  width: 40%;
}
form#kundenformular input#plz,
form#kundenformular fieldset#anrede {
  width: calc(20% - 2em);
  clear: both;
  float: left;
  margin-right: 2em;
  margin-top: 1em;
}
form#kundenformular input#ort,
form#kundenformular input#name {
  width: 80%;
}
form#kundenformular input#email,
form#kundenformular input#strasse {
  width: 100%;
  clear: both;
}
form#kundenformular button {
  margin-top: 1em;
}

form#kundenformular .suggestions {
    position: absolute;
    top: 4em;
    left: 0;
    right: calc(40% + 2em);
    background-color: white;
    max-height: 150px;
    overflow-y: auto;
    z-index: 1;
}

form#kundenformular .suggestions div {
    padding: 8px;
    cursor: pointer;
}

form#kundenformular .suggestions div:hover {
    background-color: #ddd;
}

form#kundenformular .suggestions div:focus {
    background-color: #ddf;
}

form#rechnungsdaten .textlabel {
  margin: 2em 0 0 0;
  clear: both;
}
form#rechnungsdaten textarea#text_vor,
form#rechnungsdaten textarea#text_nach {
  width: 100%;
  height: 5em;
  padding: 1em;
  background-color: #eee;
  border: 1px solid black;
}

form#rechnungsdaten textarea.pos_text {
  width: calc(70% - 2em);
  min-height: 3em;
  resize: vertical;
  clear: both;
  margin-right: 2em;
}
form#rechnungsdaten input.pos_preis {
  width: 30%;
}
form#rechnungsdaten input.inp_anzahlung {
  margin: 0 0 2em 0;
}

form#rechnungsdaten #btn_add_pos,
form#rechnungsdaten #btn_clear_pos {
  margin: 0.5em 0.5em 0 0;
  float: left;
}
form#rechnungsdaten #btn_add_pos {
  clear: both;
}

.wf_rechnungsupload,
.wf_rechnungsfilter,
#wf_kundenselect,
#wf_rechnungsform {
  border: 1px solid black;
  border-radius: 1em;
  padding: 2.5em;
  background-color: #bb9;
}

#result_area,
#preview_area,
#visualize_area,
#visualize_area2 {
  margin: 1em 0;
}
#visualize_area,
#visualize_area2 {
  padding:2em;
  background-color: #ccc;
}

form#rechnungsfilter {
    margin-bottom: 2em;
}

form#rechnungsfilter .form-first-line,
form#rechnungsfilter .form-second-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 1em 0;
}

form#rechnungsfilter .form-first-line input,
form#rechnungsfilter .form-second-line input {
    margin: 0.5em;
}

form#rechnungsfilter .form-first-line label {
    display: none;
}