/*** FIELDS & BOXES ***/

.field, .fbox, .fbsmall, .fselect {
border-radius: 5px;
padding: 10px;
font-size: 20px;
font-style: normal;
font-weight: 500;
color: var(--anthracite);
display: block;
}

.field {
height: 48px;
}

.fselect { height: 24px; }

.fbox {
height: 240px;
}

.fbsmall {
height: 100px;
}

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

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

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

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

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

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

/* RED */

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

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

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

.longred:hover, .longred:focus, .shortred:hover, .shortred:focus, .midired:hover, .midired:focus, .minired:hover, .minired:focus, .demired:hover, .demired:focus {
border: 1px solid var(--red);
background-color: var(--medred);
}


/*** BUTTONS ***/

.button {
width: auto;
height: 48px;
padding: 10px 20px;
font-size: 20px;
font-style: normal;
font-weight: var(--semibold);
color: var(--white);
background-color: var(--blue);
display: inline-block;
white-space: nowrap;
text-decoration: none;
line-height: 100%;
border: 1px solid var(--blue);
}

.button:hover {
background-color: var(--orange);
border: 1px solid var(--orange);
}


/*** 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(--lightgrey);
	border-radius: 2px;
	cursor: pointer;
	vertical-align: middle;
	margin-top: -3px;
	background-color: var(--white);
	background-size: 16px;
}

input[type="checkbox"].fcheck + label span:hover, input[type="radio"].fcheck + label span:hover {
    border: 1px solid var(--blue);
}
input[type="checkbox"].fcheck:checked + label span, input[type="radio"].fcheck:checked + label span {
    background: url('../images/checked.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: 44px; }
.fselect { height: 22px; }
.fbox { height: 200px; }
}


@media only screen and (max-width: 768px) {
.field, .fbox, .fbsmall, .button { font-size: 18px; height: 40px; padding: 8px; }
.fselect { height: 20px; }
}


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


@media only screen and (max-width: 480px) {
.field, .fbox, .fbsmall, .button { font-size: 18px; height: 36px; padding: 6px; }
.fieldmright { margin-right: 10px; }	
}



/*


.wkdel {
	background: url(../images/admindel.png) no-repeat left center;
	width: 20px;
	border: none;
	height: 20px;
	cursor: pointer; 
	background-size: 20px;
	filter: grayscale(100%);
}
.wkdel:hover {
	filter: grayscale(0%);
}

*/