/*
 * CSS Grid Document - Form - version 2.0 - cssgrid.com.br ©
 */

/*
 * #----- Elements -----#
 */

.cssform input[type="text"],
.cssform input[type="password"],
.cssform input[type="email"],
.dftheme input[type="date"],
.dftheme input[type="number"],
.dftheme input[type="tel"],
.cssform select,
.cssform textarea{border:2px solid;font-size:1em;height:auto;line-height:1.2;margin:0 0 1px 0;padding:1rem;width:100%}
.dftheme input[type="date"]{ padding: 0.8rem 1rem; }
.cssform select{padding:0.75rem 1rem}

.cssform textarea{transition:height 0.2s;-webkit-transition:height 0.2s;-moz-transition:height 0.2s;max-width:100%;min-width:100%}

.cssform input[type="radio"],
.cssform input[type="checkbox"]{margin:0 10px}

.cssform .inputfile input[type="text"],
.cssform .inputfile input[type="button"]{margin:0}

.cssform .inputfile input[type="text"]{display:table-cell;float:left;width:70%}

.cssform .inputfile input[type="button"]{display:table-cell;float:right;padding:8px;width:30% !important}

.cssform .inputfile input[type="file"]{filter:alpha(opacity=00);font-size:220px;left:0;opacity:0;-moz-opacity:0;-webkit-opacity:0;position:absolute;top:0;width:100%;z-index:100}

/*
 * #----- Button -----#
 */

.cssform input[type="submit"],
.cssform input[type="button"],
.cssform input[type="reset"]{padding:10px 30px;transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out}

/*
 * #----- Essential -----#
 */

.cssform .optionblock{border:1px solid;display:table;line-height:1.2;margin:0 0 1px 0;width:100%}
.cssform .inputfile{border:1px solid;display:block;margin:0 0 1px 0;padding:10px;position:relative;overflow:hidden;width:100%}
.cssform .inputfalse{display:table;position:relative;width:100%;z-index:1}
.cssform .optionblock label{padding:8px 0;display:table-cell;width:100%}
.cssform .titform{margin:0 0 30px 0;padding:15px}
.cssform .rowform{margin:0 0 10px 0;padding:0}
.cssform .endform{border-top:1px solid;margin:30px 0 0 0;padding:15px}
.cssform .uluploads{margin:10px 0}
.cssform .uluploads li{border-bottom:1px dashed;display:block;font-size:0.75em;line-height:1.6;padding:10px;vertical-align:top}
.cssform .uluploads li .upoptions{display:block;padding:10px 0 0 0}
.cssform .uluploads li .upoption{border:1px solid;display:inline-block;line-height:1.5;margin:0 0 1px 1px;padding:4px 8px;text-align:center;transition:all 0.1s ease-in-out;-moz-transition:all 0.1s ease-in-out;-webkit-transition:all 0.1s ease-in-out;vertical-align:bottom}
.cssform .uluploads li .titfile{display:block;font-weight:bold}

/*
 * #----- Validation -----#
 */

.cssform .lbltxt{display:block;font-size:0.875em;line-height:2.7;padding:0 5px;text-align:right}
.cssform .brief{display:block;font-size:0.75em;line-height:1.2;padding:5px}
.cssform .required, .cssform .notRequired{border:1px solid;display:block;font-size:0.75em;line-height:1.5;margin:0 0 1px 0;padding:0 5px;text-align:center;width:100%}

/*
 * #----- Default Theme -----#
 */

.dftheme{}

.dftheme .titform{background-color:#999;color:#FFF}

.dftheme .optionblock,
.dftheme .inputfile,
.dftheme .uluploads li{background:#FFF;border-color:#CCC}

.dftheme .endform{background-color:#DDD;border-color:#BCBCBC}

.dftheme .lineForm { margin-bottom: 24px; margin-bottom: 1.5rem; }

@media (max-width:480px){
	.dftheme .lineForm { margin-bottom: 16px; margin-bottom: 1rem; }
}

.dftheme input[type="text"],
.dftheme input[type="password"],
.dftheme input[type="email"],
.dftheme input[type="date"],
.dftheme input[type="tel"],
.dftheme select,
.dftheme .gender,
.dftheme textarea{background-color:#FFF;border-color:#1d3e8b;color:#1d3e8b; -webkit-border-radius:3px; border-radius:3px;}

.dftheme input[type="text"]:focus,
.dftheme input[type="password"]:focus,
.dftheme input[type="email"]:focus,
.dftheme select:focus,
.dftheme textarea:focus{border-color:#1d3e8b;color:#1d3e8b}

.dftheme input[type="submit"],
.dftheme input[type="button"],
.dftheme input[type="reset"]{background-color:#1d3e8b;color:#FFF;-webkit-border-radius:3px;border-radius:3px; font-size: 20px; font-size: 1.25rem;}

@media (min-width:640px){
	.dftheme input[type="submit"],
	.dftheme input[type="button"],
	.dftheme input[type="reset"]{ float: right; }
}

.dftheme input[type="submit"]:hover,
.dftheme input[type="button"]:hover{background-color:#82b571;}

.dftheme input[type="reset"]{color:#666;background-color:#FFF}
.dftheme input[type="reset"]:hover{color:#C00;background-color:#FFF}

.dftheme .uluploads li .delete{color:#F00;background-color:#FCC;border-color:#F00}
.dftheme .uluploads li .delete:hover{color:#FFF;background-color:#F00}

.dftheme .uluploads li .normal{color:#666;background-color:#EEE;border-color:#666}
.dftheme .uluploads li .normal:hover{color:#FFF;background-color:#666}

.dftheme .lbltxt{color:#666}

.dftheme .brief{color:#093}

.dftheme .required{background-color:#FCC;border-color:#C00;color:#C00}

.dftheme ::placeholder{color:#777}
.dftheme ::-moz-placeholder{color:#777}
.dftheme ::-webkit-input-placeholder{color:#777}

/*
 * #----- Clear -----#
 */

.rowform:before,
.rowform:after{content:'\0020';display:block;height:0;overflow:hidden;visibility:hidden;width:0}

.rowform:after{clear:both}

.rowform{zoom:1}

/*
 * #----- Mobile -----#
 */

@media all and (max-width: 720px){
	.responsive .cssform [class*="grid_"]{float:none;margin-right:0;width:auto}

	.responsive .cssform input[type="submit"],
	.responsive .cssform input[type="button"],
	.responsive .cssform input[type="reset"],
	.responsive .cssform .uluploads li a.upoption{float:none;margin-left:0;margin-right:0;width:100%}

	.responsive .cssform .titform{text-align:center}

	.responsive .dftheme .lbltxt{background-color:#CCC;text-align:left}
}


/*
 * #----- Error -----#
 */

label.error { background-color: #ffe5e5; border: 1px solid red; color: red; font-size: 12px; padding: 7px 10px; -webkit-border-radius: 3px; border-radius: 3px; display: block; position: relative; }
label.error:before {
	content: "";
	display: block;
	width: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid red;
	position: absolute;
	top: -6px;
}
label.error:after {
	content: "";
	display: block;
	width: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid #ffe5e5;
	position: absolute;
	top: -5px;
}
label.error[for="acceptTerms"] { margin-top: 10px; }