.wph_form_container{
display: block;
min-height: 100px;
padding: 20px;
background: #ECECEC;
box-sizing:border-box;
font-size: 0;
}

.wph_form_container span.wph_editor_form_button{
display: block;
}

.wph_form_element{
display:inline-block;
padding: 10px;
width: 50%;
box-sizing: border-box;
font-size: 13px;
}

.wph_form_placeholder{
background: #ddd;
border: 2px dashed #ccc;
height: 50px;
width:150px;
display:inline-block;
padding:10px;
box-sizing: border-box;
top:10px;
position:relative;
}

/*label start*/
.wph_form_element label:first-child{
display: block;
font-weight: bold;
margin-bottom: 5px;
float: none;
}

[data-wph-form-template="label"].wph_form_element label{
font-size: 1.5em;
line-height: 1em;
}

/*-- required start*/
[data-wph-form-element-required="Both"].wph_form_element label:first-child:after{
content: '*';
color: red;
margin-left: 3px;
}

.wp-admin [data-wph-form-element-required="Admin only"].wph_form_element label::after{
content: '*';
color: red;
margin-left: 3px;
}

[data-wph-form-element-required="Public only"].wph_form_element label::after{
content: '*';
color: red;
margin-left: 3px;
}

.wp-admin [data-wph-form-element-required="Public only"].wph_form_element label::after{
display: none;
}
/*-- required end*/

[data-wph-form-template="label"].wph_form_element label+label{
font-size: .9em;
display:inline-block;
}

[data-wph-form-template="label"].wph_form_element label+label:empty{
display:none;
}

.wph_form_element textarea{
width: 100%;
max-width: none;
height: 150px;
box-sizing: border-box;
margin: 0;
background-color: white;
}

.wph_editor_form_elements{
padding-bottom: 4px;
}

.wph_editor_form_button{
width: 150px;
margin: 5px;
border: 1px solid #CFCFCF;
text-align: center;
background: #F2F2F2;
box-shadow: 2px 2px 4px rgba(128, 128, 128, 0.3);
border-radius: 2px;
position: relative;
display: inline-block;
padding: 8px;
}

.wph_editor_form_elements span:hover{
background: #EDEDED;
}

body .wph_form_element input[type="text"],
body .wph_form_element input[type="password"],
body .wph_form_element input[type="url"],
body .wph_form_element input[type="number"],
body .wph_form_element input[type="email"] {
max-width:100%;
width: 100%;
margin: 0 4px 0 0;
border: 1px solid #DDD;
padding: 10px;
background-color: white;
box-sizing: border-box;
margin: 0;
height: auto;
}

.wph_form_element input[type='checkbox'],
.wph_form_element input[type='radio'] {
width: auto;
vertical-align: middle;
}

.wph_form_element select {
width: 100%;
vertical-align: baseline;
}

.wph_form_element hr{
border-top: 1px solid #BEBEBE;
border-bottom: 1px solid #F2F2F2;
margin:15px 0;
padding:0;
}

.wph_form_element label {
margin-right: 15px;
max-width:100%;
font-weight: normal;
}

.wph_form_element input+label{
margin-left:5px;
display: inline-block;
}

.wph_form_element>label:first-child+label {
font-size:13px;
line-height:1.8em;
display: block;
}

.wph_form_element label+label:after {
display:none;
}

.wph_form_element[data-wph-form-template="submit"] label:first-child {
display: inline-block;
background: #DADADA;
padding: 10px 40px;
margin-top: 10px;
cursor: pointer;
}

.wph_form_element label:empty {
display: none;
}

.wph_form_element[data-wph-form-element-width="1/5"] {
width: 20%;
}

.wph_form_element[data-wph-form-element-width="1/4"] {
width: 25%;
}

.wph_form_element[data-wph-form-element-width="1/3"] {
width: 33.33%;
}

.wph_form_element[data-wph-form-element-width="1/2"] {
width: 50%;
clear: none;
margin: 0;
}

.wph_form_element[data-wph-form-element-width="2/3"] {
width: 66.66%;
}

.wph_form_element[data-wph-form-element-width="3/4"] {
width: 75%;
}

.wph_form_element[data-wph-form-element-width="1"] {
width: 100%;
}

@media screen and (max-width: 700px) {
    .wph_form_element, .wph_form_element[data-wph-form-element-width]{
        width: 100%;
    }
}

/*validation*/

[data-wph-form-validation="success"]{
outline: 1px solid #24A516;
}

[data-wph-form-validation="fail"] input, 
[data-wph-form-validation="fail"] select,
[data-wph-form-validation="fail"][data-wph-form-template="submit"] label,

body [data-wph-form-validation="fail"] input:focus, 
body [data-wph-form-validation="fail"] select:focus
{
outline: 1px solid #FD6D6D!important;
}