/* Forms and Fields */
	
	.area-form{
		background-color:rgba(167, 166, 166, 0.1);
		border-radius: .6em;
	}
	form{
		margin:0;
		/* background-color: red; */
	
	}	
	.field-group{
		/* border:2px dashed red;  UTILS*/
		width: 100%;
		margin: .2em 0 .6em 0;
		
	}
	.field-group input[type="button"]{
		margin: 1.2em 0 0 0 !important;
	}
	.field-group-flex{
		display: flex;
		flex-wrap: wrap;
		margin: 1em 0 1em 0;
	}
	/*
	.field-group-flex-item{
		flex: 1;
		box-sizing: border-box;
		flex-basis: 50%;
	}
	*/
	.field-group-flex-item{
	flex: 1;
	box-sizing: border-box;
	flex-basis: 45%;
	padding: .2em;
	margin: 0 .2em 0 0;
}
	.fg-small{
		width: 25% ;
		flex-basis:25%;
	}
	.fg-small-rest{
		width: 74% ;
		flex-basis:74%;
	}
	.fg-half{
		width: 49%;
		flex-basis:49%;
	}
	.fg-full{
		width: 100% ;
		flex-basis:100%;
	}
	
	fieldset{
		border: none;
		margin: 0;
		padding: 0;
	}
	legend{
		box-sizing: border-box;
		color: inherit;
		display: table;
		max-width: 100%;
		padding: 0;
		white-space: normal;
		font-size: 1.2em;
		font-weight: 600;
		padding: 0 .5em 0 .5em;
	}

	label{
		font-size: .9rem;
		font-weight: 600;
		margin: 5px;
		color: #000;
	}

	/*
	button, input, optgroup, select, textarea,input[type="text"],input[type="password"]{
		width: 95%;
		font-size: .9em;
		font-weight: lighter;
		margin: .4em;
		padding: .4em;
		border-radius: .4em;
		border-color: var(--inputs-border-color);
	}
	*/
button, input, optgroup, select, textarea,input[type="text"],input[type="password"],input[type="date"]{
	width: 100%;
	font-size: .9em;
	font-weight: lighter;
	margin: .4em 0 .4em 0 !important;
	padding: .5em !important;
	border-radius: 0em;
	border-color: var(--inputs-border-color);
	border-style: solid;
}

button:focus, input:focus, optgroup:focus, select:focus, textarea:focus,input[type="text"]:focus,input[type="date"]:focus,input[type="password"]:focus,select:focus{
	background-color:rgb(252, 253, 241);
	border-radius: 0em;
	border-style: solid;
}

.form-normal-button{
	background: rgba(9, 5, 247, 0.6);
	transition: background-color 0.3s;
	border-radius: 6px;
	color: #fff;
	text-align: center;
	font-weight: bold;
}
	.form-normal-button:active,
	.form-normal-button:focus,
	.form-normal-button:hover {
	border: 0;
	background: rgba(7, 7, 7, 0.9);
	text-decoration:none;
	color:#E7AF21;
}

p.fnote{
	margin:.5em 0 .5em 0 !important;
}
/* Contador de caracteres */

	#charcount, #remaining{
		font-size:10px;
		color:#FF0000;
	}
		
/* Properties */
		
input[type="submit"],input[type="button"],input[type="reset"],button {
	padding:.8em;
	margin:.8em;
	font-weight: 600;
	
	color:#535288;
	cursor:pointer;
	min-width: 8em;
	max-width: 12em;
	box-shadow: 0px 0px .4em rgba(109, 106, 106, 0.8);
	border: 0px solid #556f8c;
	border-radius: 2em;
	background: #f0b323;
}
input[type="reset"]{
	border: 1px solid #8c5555;
	background: #740101; 
	background: -webkit-linear-gradient(#740101,#520101); 
	background: -o-linear-gradient(#740101,#520101); 
	background: -moz-linear-gradient(#740101,#520101); 
	background: linear-gradient(#740101,#520101); 	
}
input[type="reset"]:hover{
	color:yellow;
	background: #520101; 
	background: -webkit-linear-gradient(#520101,#740101); 
	background: -o-linear-gradient(#520101,#740101); 
	background: -moz-linear-gradient(#520101,#740101); 
	background: linear-gradient(#520101,#740101); 	
}
input[type="submit"]:hover,input[type="button"]:hover,button:hover{
	color:yellow;
	background: #004e81; 
	background: -webkit-linear-gradient(#008ae6,#0099ff); 
	background: -o-linear-gradient(#008ae6,#0099ff); 
	background: -moz-linear-gradient(#008ae6,#0099ff); 
	background: linear-gradient(#008ae6,#0099ff); 	
}

	input::-webkit-input-placeholder {
		color: rgba(75, 75, 75, 0.1); 
		text-shadow: 0px -1px -0px rgba(53, 59, 66, 0.3);
	}
	
	input:-moz-placeholder {
	    color: #a1b2c3; text-shadow: 0px -1px 0px #38506b;
	}
	
	textarea::-webkit-input-placeholder  {
    	color: #a1b2c3; text-shadow: 0px -1px 0px #38506b;
	}
	
	textarea:-moz-placeholder {
	    color: #a1b2c3; text-shadow: 0px -1px 0px #38506b;
	}

	select optgroup{
		font-weight: 600;
	}

/* [+]checkboxes */

[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
	width: initial;
	vertical-align: middle;
	position: absolute;
	left: -9999px;
}
[type="checkbox"]:not(:checked) + label, [type="checkbox"]:checked + label {
  position: relative;
  padding-left: 1.9em;
  cursor: pointer;
  font-weight: lighter;
}
/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 1.25em; height: 1.25em;
  border: 2px solid var(--inputs-border-color);
  background: #fff;
  border-radius: .4em;
  box-shadow: inset 0 .2em .3em rgba(0,0,0,.1);
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after {
  content: '✔';
  position: absolute;
  left: .2em;
  font-size: 1.4em;
  line-height: 0.8;
  transition: all .2s;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before, [type="checkbox"]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
[type="checkbox"]:disabled:checked + label:after {
  color: #999;
}
[type="checkbox"]:disabled + label {
  color: #aaa;
}
/* accessibility */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
  border: 1px dashed #000;
}

/* [-]checkboxes */

/* [+]input:radio */
[type="radio"]:not(:checked), [type="radio"]:checked {
	width: initial;
	vertical-align: middle;
	position: absolute;
	left: -9999px;
}
[type="radio"]:not(:checked) + label, [type="radio"]:checked + label {
  position: relative;
  padding-left: 1.9em;
  cursor: pointer;
  font-weight: lighter;
}
/* radio aspect */
[type="radio"]:not(:checked) + label:before, [type="radio"]:checked + label:before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 1.25em; height: 1.25em;
  border: 2px solid var(--inputs-border-color);
  background: #fff;
  border-radius: .6em;
  box-shadow: inset 0 .2em .3em rgba(0,0,0,.1);
}
/* checked mark aspect */
[type="radio"]:not(:checked) + label:after, [type="radio"]:checked + label:after {
    content: '•';
    position: absolute;
    left: .1em;
    font-size: 1.6em;
    line-height: 0.9;
	transition: all .2s;
	color:var(--inputs-border-color);
}
/* checked mark aspect changes */
[type="radio"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
[type="radio"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}
/* disabled radio */
[type="radio"]:disabled:not(:checked) + label:before, [type="radio"]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
[type="radio"]:disabled:checked + label:after {
  color: #999;
}
[type="radio"]:disabled + label {
  color: #aaa;
}
/* accessibility */
[type="radio"]:checked:focus + label:before,
[type="radio"]:not(:checked):focus + label:before {
  border: 1px dashed #000;
}

/* [-]input:radio */

/*[+] form tips box*/

.form-tips-box{
	font-size: .8em !important;
	background-color: rgba(255, 255, 255, 0.65) !important;
	padding: .5em !important;
	border: 1px solid rgba(177, 174, 174, 0.71) !important;
	margin: 1em 0 1em 0 !important;
	color: #5a5d5f !important;
}

/*[-] form tips box*/

	input[type="color"]{
		min-height: 3em;
		width: 6em;
		border: none;
		outline: none;
	}

	@media screen and (min-width: 0px) and (max-width: 768px) {
		.field-group-flex-item{
			flex: none;
	}
	.fg-small,.fg-half,.fg-full,.fg-small-rest{
		width: 100%;
		flex-basis: initial !important;
	}
	fieldset{
		margin: initial;
	}
	[type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after {
		top: -.2em;
	}
	[type="radio"]:not(:checked) + label:after, [type="radio"]:checked + label:after {
		top: -.2em;
	}
}
  @media screen and (min-width: 768px) and (max-width: 1120px) {
		.fg-small,.fg-half,.fg-full,.fg-small-rest{
			width: 100%;
			flex-basis: initial !important;
		}
	
	}