.template-form {
margin: 1em 0;
overflow: hidden;
width: 500px;
max-width: 100%;
}
.template-form-field {
clear: both;
margin: .5em 0;
overflow: hidden;
}
.template-form-input {
background: white;
border: 1px solid #a2a9b1;
min-height: 1.5em;
padding: .5em;
}
.template-form-input:empty:before {
content: attr( data-placeholder );
color: #a2a9b1;
}
.template-form-field[data-type="hidden"] {
display: none;
}
.template-form-field[data-type="stars"] .template-form-input,
.template-form-field[data-type="radio"] .template-form-input,
.template-form-field[data-type="section"] .template-form-input {
display: none;
}
.template-form-field[data-type="content"] .template-form-input {
min-height: 4.5em;
}
.template-form-field[data-required] .template-form-label {
font-weight: bold;
}
.template-form-stars {
float: left;
margin-right: 1em;
}
.template-form-stars img {
cursor: pointer;
vertical-align: sub;
}
.template-form-radio > span {
background: white;
border: 1px solid #a2a9b1;
border-radius: 50%;
box-sizing: border-box;
display: inline-block;
margin-right: .3em;
padding: 2px;
vertical-align: middle;
width: 20px;
height: 20px;
}
.template-form-radio > span > span {
border-radius: 50%;
display: inline-block;
vertical-align: top;
width: 14px;
height: 14px;
}
.template-form-radio > span:hover > span,
.template-form-radio.selected > span > span {
background: #a2a9b1;
}
.template-form-suggestions {
border: 1px solid #a2a9b1;
background: white;
position: absolute;
z-index: 1;
}
.template-form-suggestions div {
cursor: pointer;
padding: .5em;
}
.template-form-suggestions div:hover {
background: #f8f9fa
}
.template-form-label {
overflow: hidden;
}
.template-form-send {
float: right;
}
.template-form-message {
background: #5abbb6;
display: none;
padding: 1em;
margin: 1em 0;
}
.template-form-error {
background: #f7931d;
margin: 1em 0;
padding: 1em;
}