/* Front Form Styles  frontform.css included by mod_forms_new.php */

.frontform {width: 100%;}
.frontform, .frontform * {box-sizing: border-box}

.frontform .heading{margin-bottom: 1rem !important}

.frontform fieldset {
  border: 1px solid #ebebeb;
  padding: .5rem 1rem;
  margin-bottom: 1rem;
}

.frontform [required], .frontform .required input{background-color: aliceblue !important}
.frontform .required > label > span:after, .frontform .required > span:first-of-type:after{content: '*'}

.frontform fieldset fieldset {margin: 0 0 .5rem 0; border:0}
.frontform legend {font-weight: bold;}

.frontform .field,.frontform div.desc{max-width:100%; min-height: 1.5em; padding: 0 0 .4em;clear:both}
.frontform div.desc{padding-bottom: .6em}
.frontform span.field{display:inline-block}
.frontform label > span:first-child {display:inline-block;min-width: 8rem; margin-right: .5rem; line-height:1.5rem;}
.frontform div.field.has-button > label:last-child{margin-left:.4em}

.frontform div.field.html div{display:inline-block}

textarea.editor {
  color: black;
  display: block;
  height: 100px;
  margin-bottom: 0.4em;
  min-height: 100px;
  min-width: 98%;
}

.frontform img, .frontform input {vertical-align: middle;}
.frontform input:not([type='button']):not([type='reset']):not([type='submit']):not([type='checkbox']):not([type='radio']),  .frontform textarea,  .frontform select{width: calc(100% - 8.5rem);}
.frontform textarea.wide, .frontform input.wide {max-width: 40em;width: 80%;}
.frontform select{min-width:8rem;}
.frontform select.textbox {min-width: 13rem;}

.frontform label > [type="checkbox"], label > [type="radio"] {width: auto;}

.frontform input[type="number"], .frontform input[type="radio"],.frontform input[type="checkbox"], .frontform input.button, .frontform input.radio,
.frontform input.easyui-datebox, .frontform input.captcha {width:auto}
.frontform input[type='button'], .frontform input[type='submit'], .frontform input[type='reset']{width: auto; padding: 0 .8rem; margin: .2rem 0}

.label-special span {padding-right: 1em}

.frontform .textarea label > span:first-child {vertical-align: top}
.frontform .textfeld label > span:first-child {display:block;}

.frontform .listelement {margin:.3rem 0 .3rem}
/* Labels der Options */
.frontform .listelement label, .frontform .radio label {display: inline-block; line-height: 1; margin-right:.4rem; vertical-align: middle}
/* "Label" des Elements */
.frontform .listelement > span:first-child, .frontform .radio label>span:first-child {display: inline-block; min-width: 8rem; margin-right: .5rem; vertical-align: middle}
.frontform .list.block > label{display:block;margin:.4rem 0}

.frontform input#id_plz{ width:12%;max-width:12%; min-width: 0}
.frontform div.field.plzort label:nth-child(2) > span:first-child{display:inline-block !important; width:2%;max-width:2%; min-width: 0; margin-right: 0; padding:0}
.frontform input#id_ort{width:calc(86% - 8.5rem);max-width:calc(86% - 8.5rem); min-width: 0}

.frontform img.captcha{margin:0 .4rem .4rem 0}
.frontform input.captcha{max-width: 150px}

.frontform textarea{width:100%;}

.label-special {padding-right: 1em}

.max-100 input, .max-100 textarea, .max-100 select, input.max-100, textarea.max-100, select.max-100, a.max-100{max-width:6rem !important}
.max-300 input, .max-300 textarea, .max-300 select, input.max-300, textarea.max-300, select.max-300, a.max-300{max-width:18rem !important}
.max-400 input, .max-400 textarea, .max-400 select, input.max-400, textarea.max-400, select.max-400, a.max-400{max-width:25rem !important}

.frontform input.number{max-width:4rem !important}

div.imageselect {padding:.5rem 0}
div.imageselect span.preview{float:left; display:inline-block; width:60px; height:45px;min-height:45px;border:1px solid silver; margin: 0 .4rem 0 0; text-align: center}
div.imageselect span.preview img{max-width:100%; max-height: 100%; vertical-align: top;}
div.imageselect span.control {display: inline-block; vertical-align: top;}
div.imageselect span.buttons{display:block}


a.action, input.action{
  display:inline-block;
  width:100% !important;
  height: auto !important;
  padding: .2rem !important;
  margin:.4rem 0 .2rem 0 !important;
  text-align:center;
  line-height: 1.1rem;
  background:#0053A1;
  color:white !important;
  font-weight:600 !important;
  border:none !important;
}




@media screen and (max-width:440px)  {
   div.imageselect span.control{display: block; margin-left: 0}
  .frontform textarea, .frontform input, .frontform label {width: 100%;}
  .frontform label > span:first-child{display:block;}
  .textfeld, .absenden{width:100%;}
  .frontform input:not([type='button']):not([type='reset']):not([type='submit']):not([type='checkbox']):not([type='radio']),
  .frontform select, .frontform textarea{max-width: 100%;width:100%;}
  .frontform{max-width:95vw;}
  .frontform .textfeld > .fields > .field label span:first-child {padding-top:0;}
  .frontform .field:not(.radio) label span:first-child{display:block;padding:.4rem 0  0;}
  .frontform fieldset fieldset{padding:.5rem 0;margin:1rem 0 0;}

  .frontform input#id_plz{width:17%;max-width:17%; min-width: 0}
  .frontform input#id_ort{width:81%;max-width:81%; min-width: 0}

}