form.userform {
    max-width: 100%;
    width: 400px;
    font-size: 1rem;
}

@media (max-width: 1400px){
     form.userform {
     	font-size: 18px;
    }   
}

div.field {
    margin: 1em 0 0.5rem;
}

.userform fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    max-width: 100%;
    display: block;
    width: 400px;
    box-sizing: border-box;
    overflow: hidden;
}

.userform fieldset.optionset.checkboxset {
    display: flex;
    flex-flow: wrap;
    margin: 2em 0 2.5em;
}

.userform fieldset.optionset.checkboxset > legend {
    font-weight: normal;
}

.userform fieldset.optionset.checkboxset .middleColumn > * {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
}

.userform fieldset.optionset.checkboxset .middleColumn > * > input.checkbox {
    width: 1.1em;
    height: 1em;
    font-size: 2em;
    margin-right: 0.5em;
}

.userform fieldset.optionset.checkboxset .middleColumn > * > input.checkbox + label {
    font-size: 0.7em;
    line-height: 1.4;
}

form.userform label {
    margin-bottom: 0;
    display: inline-block;
}

form.userform label.left {
    display: block;
    font-weight: normal;
    line-height: 1.4;
    font-size: 1em;
}

form.userform input[type="checkbox"] + label.left {
    line-height: 1.4em;
}

form.userform label.right {
    font-size: 1em;
    color: #888;
}

form.userform input.text,
form.userform textarea,
form.userform select 
{
    width: 400px;
    max-width: 100%;
    padding: 0.3em;
    font-size: 0.8em;
    background-color: #fff;
    border: 1px solid #dad9d9;
    box-sizing: border-box;
}

form.userform textarea {
	font-size: 0.8em;
}


    
form.userform input.text:focus,
form.userform textarea:focus,
form.userform .textajaxuniquetext:focus,
form.userform select:focus 
{
    outline:none;
}

form.userform input[disabled], 
form.userform textarea[disabled]
{
    background-color: #f7f7f7;
    border: 1px solid #dad9d9;
}

form.userform textarea {
    resize: vertical;
}


.field .checkbox:not(.field),
.field .radio:not(.field) 
{
    /* float: left; */
    width: 2em;
    height: 2em;
    margin-right: 1em;
    margin-top: 0;
    padding: 0;
}

.checkbox label.right,
.radio label.right 
{
    float: left;
}

form.userform .message {
    background-color: #fef4ba;
    padding: 0.5em 1em;
    border: 1px solid #e8c805;
    border-radius: 3px;
}

form.userform .good {
    background-color: #ecf9d0;
    border-color: #8fbe00;
}

form.userform .bad, 
form.userform .required.message, 
form.userform .error 
{
        background-color: var(--highlighting-color);
        border-color: var(--highlighting-color);
        color: #FFFFFF;
        font-weight: normal;
        font-size: 0.8em;
        max-width: 100%;
        width: 100%;
        display: block;
        box-sizing: border-box;
    }


/* ACTIONS */
.Actions {
    margin-bottom: 1em;
}

a.btn, 
button, 
input[type="submit"], 
input[type="reset"], 
.Actions .action 
{
    background: var(--highlighting-color);
    color: #fff;
    display: inline-block;
    border-radius: 3px;
    padding: 0.5em 1em;
    margin-top: 0.7em;
    margin-bottom: 0.5em;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    font-size: 1em;
    margin-right: 0.5em;
    float: left;
}

a.btn:hover, 
button, 
input[type="submit"]:hover, 
.Actions .action:hover 
{
    background: #04a10a;
    color: #fff;
}

a.btn {
    line-height: 1.4;
    margin-bottom: 1em;
}

.FormHeading {
    clear: both;
    padding-top: 1em;
}

.checkbox label.right {
    font-size: 1em;
}

form.userform .requiredField label.left:after, 
form.userform .requiredField legend.left:after 
{
    color: var(--highlighting-color);
    content: "*";
    font-size: 1.2em;
    font-weight: normal;
    padding-left: 0.3em;
}

/* Radio / Checkbox */
form.userform .checkboxset ul,
form.userform .optionset ul 
{
    margin: 0;
}

form.userform .checkboxset li,
form.userform .optionset li 
{
    margin-bottom: 0.5em;
    list-style-type:none;
}

form.userform div.checkbox:after { /* clearfix */
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

form.userform .checkbox .checkbox { 
    clear: both; 
}

form.userform .checkbox .middleColumn {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    height: 2em;
}

/* Messages */
span.message {
    margin: 0.5em 0;
    display: block;
	width: 400px;
    max-width: 100%;
    clear: left;
}

div.holder-required {
}

form input.holder-required {
    border: 1px solid #cf0000;
}

input:invalid,
textarea:invalid 
{
    border-radius: 0px;
}

.no-boxshadow input:invalid,
.no-boxshadow textarea:invalid 
{
    background-color: #f0dddd
}