/*** FIELDS & BOXES ***/

.field, .fbox, .fbsmall, .fselect {
font-size: 1em;
font-style: normal;
font-weight: var(--normal);
color: var(--anthracite);
display: block;
padding: 0 0.5em;
border-radius: 0.5em;
}

.field, .button {
height: 2.3em;
line-height: 2.3em;
}

.fieldsmall, .buttonsmall {
display: block;
padding: 0 0.25em;
height: 1.8em;
line-height: 1.8em;
border-radius: 0.5em;
}

.fselect { height: 1.8em; }

.fbox {
height: 7em;
}

.fbsmall {
height: 5em;
}

.longform, .longred {
width: 100%;
}

.shortform, .shortred {
width: 48px;
}

.miniform, .minired {
width: 100%;
max-width: 100px;
}

.midiform, .midired {
width: 100%;
max-width: 250px;
}

.demiform, .demired {
width: 100%;
max-width: 400px;
}

.longform, .shortform, .midiform, .miniform, .demiform {
background-color: var(--white);
border: 1px solid var(--grey);
}

/* RED */

.lfred { border: 1px solid var(--red) !important;}

.longred, .shortred, .midired, .minired, .demired, .field-red {
background-color: var(--white);
border: 1px solid var(--red);
color: var(--anthracite);
}

.longform:hover, .longform:focus, .shortform:hover, .shortform:focus, .midiform:hover, .midiform:focus , .miniform:hover, .miniform:focus , .demiform:hover, .demiform:focus {
border: 1px solid var(--purple);
color: var(--purple);
outline: 0;
}

.longred:hover, .longred:focus, .shortred:hover, .shortred:focus, .midired:hover, .midired:focus, .minired:hover, .minired:focus, .demired:hover, .field-red:focus, .field-red:hover, .demired:focus {
color: var(--purple);
outline: 0;
}

/* FORMCHECK */

.buttonsmall.is-dirty { background-color: var(--red) !important; }
select.is-invalid, input[type="text"].is-invalid  { border: 1px solid var(--red); }
select.is-invalid:focus, input[type="text"].is-invalid:focus { outline: 2px solid var(--red); }
[data-radio-group].is-invalid label { color: var(--red); }
[data-radio-group].is-invalid input[type="checkbox"].fcheck + label span, [data-radio-group].is-invalid input[type="radio"].fcheck + label span { border: 1px solid var(--red); }
textarea.is-invalid { border: 1px solid var(--red); }
textarea.is-invalid:focus { outline: 2px solid var(--red); }
.tokenize.is-invalid .field { border: 1px solid var(--red); }
.tokenize.is-invalid .field:focus { outline: 2px solid var(--red); }

/*** BUTTONS ***/

.button, .buttonsmall {
width: auto;
font-family: var(--header);
font-style: normal;
font-weight: var(--bold);
color: var(--white);
display: inline-block;
white-space: nowrap;
text-decoration: none;
text-transform: lowercase;
background-color: var(--orange);
padding: 0 1em;
border: 0;
border-radius: 0.5em;
}

.button { font-size: 1.1em; }

.button:hover, .buttonsmall:hover {
background-color: var(--purple);
}


/*** CHECKBOXES ***/

.fcspan {
display: inline-block;
margin-bottom: 5px;
}

input[type="checkbox"].fcheck, input[type="radio"].fcheck {
    display:none;
}

input[type="checkbox"].fcheck + label span, input[type="radio"].fcheck + label span {
    display:inline-block;
    width:22px;
    height:22px;
	border: 1px solid var(--anthracite);
	border-radius: 0.25em;
	cursor: pointer;
	vertical-align: middle;
	margin-top: -3px;
	background-color: var(--white) !important;
	background-size: 16px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}

input[type="checkbox"].check-red + label span, input[type="radio"].check-red + label span {
border: 1px solid var(--red) !important;
}
input[type="checkbox"].check-red + label, input[type="radio"].check-red + label {
color: var(--red);
}

input[type="checkbox"].fcheck + label span:hover, input[type="radio"].fcheck + label span:hover {
    border: 1px solid var(--purple);
}
input[type="checkbox"].fcheck:checked + label span, input[type="radio"].fcheck:checked + label span {
    background: url('../images/checked.purple.png') center center no-repeat;
	background-size: 16px;
}


/*** FIELDMARGINS ***/

.fieldmargin {
margin-bottom: 14px;
}

.fieldmtop {
margin-top: 14px;
}

.fieldmright, .fieldmrm {
margin-right: 14px;
display: inline-block !important;
}

.fieldmrl {
display: inline-block !important;
}


/*** VARIOUS ***/

::placeholder {
color: var(--lightgrey);
font-weight: var(--normal);
}

.subtext, .sublabel {
display: block;
padding-bottom: 14px;
color: var(--grey);
}

.sublabel {
padding-left: 5px;
padding-right: 5px;
}




/*** RESPONSIVE ***/


@media only screen and (max-width: 1080px) {
.field, .button { height: 2.2em; line-height: 2.2em; }
.fieldsmall, .buttonsmall { height: 1.7em; line-height: 1.7em; }
.fselect { height: 1.1em; }
.fbox { height: 10em; }
}


@media only screen and (max-width: 768px) {
.field, .fbsmall, .button { height: 2.1em; line-height: 2.1em; }
}


@media only screen and (max-width: 680px) {
.fieldmrm { margin-right: 0px; }
}


@media only screen and (max-width: 480px) {
.field, .fbsmall, .button { height: 2em; line-height: 2em; }
.fieldsmall, .buttonsmall { height: 1.6em; line-height: 1.6em; }
.fbox { height: 9em; }
.fieldmright { margin-right: 0.6em; }	
}