/* FORMS - GENERAL */
fieldset{border-style: none; margin-bottom: 1.5rem;}
fieldset.spacing{border-style: none; margin: 2rem 0rem;}
fieldset:last-child{border-style: none;}
.fField{margin-top: .8rem; color: var(--color-charcoal-dark); font-size: 1.4rem;}
.fField p{color: var(--color-charcoal-dark);}

fieldset.threeCol div.fField{width: 30%; float: left; margin-right: 3%;}
fieldset.twoCol div.fField{width: 47%; float: left; margin-right: 3%;}

div.Third{display: inline-block; width: 31%; margin-right: 1%;}

label{font-family: var(--font-bold); font-size: 1.5rem; margin-top: 14px; color: var(--color-blue);}
label.marginTop20{display: block; margin-top: 2.5rem; font-weight: bold;}

textarea, input[type="text"], input[type="password"], input[type="number"], input[type="date"], select, option{font-family: var(--font); background-color: #FFFFFF; color: var(--color-charcoal-dark); font-size: 1.5rem; width: 100%; box-sizing: border-box; padding: 1.2rem; margin: .3rem 0rem .3rem 0rem; border-style: solid; border-color: var(--color-charcoal-xlight); border-width: 1px; border-radius: .6rem; box-shadow: 2px 2px 2px rgba(0,0,0,0.1);}
.formInputRadio{font-family: var(--font); color: var(--color-charcoal); font-size: 1.5rem; margin-bottom: 1.5rem;}

input[type="radio"]{margin: 10px 0px;}

/* style the file upload */
input[type=file] {
	width: 350px;
	max-width: 100%;
	color: #444;
	padding: 5px;
	background: #fff;
	border-radius: 10px;
	border: 1px solid #555;
  }

  input[type=file]::file-selector-button {
	margin-right: 20px;
	border: none;
	background: var(--color-charcoal-dark);
	padding: 10px 20px;
	border-radius: 10px;
	color: #fff;
	cursor: pointer;
	transition: .2s;
  }
  
  input[type=file]::file-selector-button:hover {
	background: var(--color-charcoal);
  }
  
  

textarea:focus, input:focus, option:focus{
	box-shadow: 0 0 5px rgba(11, 42, 63, 0.3);
	/* padding: 1.2rem; */
	border: 1px solid rgba(32, 113, 184, 0.85);
	outline: none;}

input.countdown{width: 60px; font-size: 1rem;}
input.small{font-size: 1rem;}

#refresh{color: var(--color-blue); text-align: left; font-size: 12px; cursor: pointer; cursor: hand;}
#refresh:hover{color: var(--color-red-dark);}



/*appears beneath the box, when start typing - placeholder not showing*/
label.title{display: block; height: 10px; clear: both; width: auto; padding-top: 0px; margin: 0px; font-family: var(--font-semi); font-size: 1rem; color: var(--color-charcoal-dark); font-weight: normal; line-height: 120%; text-align: left;
	transition: all .3s;
  }

/*new //need to also select label which is an adjacent sibling (first) - must be after the input
//this is when placeholder is shown - properties are for the label.  When start typing, place holder is not shown */
textarea:placeholder-shown + label.title, input:placeholder-shown + label.title {
	opacity: 0; /*can animate this property*/
	visibility: hidden; /*properly gone, but cant animate*/
	transform: translateY(-10px);
  }

/* https://codepen.io/uncommonjoe/pen/wxvXXZ */
/* Improved at https://stackoverflow.com/questions/44480469/floating-label-not-working-when-required-attribute-removed/44480498 */

	/* .inputDiv {
	position: relative;
	margin-top: 1.4rem;
	margin-bottom: 1.4rem;} */

	/* .floating-label {
		font-size: 1.7rem;
		color: var(--color-charcoal-light);
		position: absolute;
		pointer-events: none;
		top: 0px;
		left: 12px;
		transition: all 0.1s ease;
	} */

	/* input:focus ~ .floating-label, input:not(:placeholder-shown) ~ .floating-label {
		top: -25px;
		bottom: 0px;
		left: 0px;
		font-size: 11px;
		opacity: 1;
		color: #404040;
	} */





/*Errors - Feedback*/

/*form label errors*/
p.error{margin: 0rem; font-size: 1.2rem; color: var(--color-error); text-align: left !important;} /*field required*/

/*Feedback Div*/
#errorADiv{position: absolute; top: 150; right: 2rem; min-width: 26.3rem; max-width: 26.3rem; margin: 1rem; background-color: #FFFFFF; border-style: solid; border-color: var(--color-charcoal-light); border-width: .1rem; padding: .8rem; border-radius: .8rem; z-index: 200;}
.errorA_p{font-size: 1.2rem; margin: 0rem 0rem .5rem 0rem; text-align: left;}

/*form feedback errors*/
.throw_error{font-size: 1.2rem; color: var(--color-error); margin: 0rem 0rem .5rem 0rem; text-align: left;} /*form feedback error*/
#message{text-align: left; color: var(--color-charcoal-dark); font-size: 1.5rem;}
/*form feedback error*/
  
.successMsg {
	/* background-image: url("../images/icon_Check.png");
	background-repeat: no-repeat;
	background-position: .3rem center; */
	background-color: #e0ffad;
	border-style: dotted;
	border-color: #80b641;
	border-width: 2px;
	border-radius: 5px;
	padding: 12px 15px;
	/* padding: 1rem 1rem 1rem 3.5rem;  */
}

.errorMsg {
	/* background-image: url("../images/icon_Cross.png");
	background-repeat: no-repeat;
	background-position: .3rem center; */
	background-color: #ffc3c3;
	border-style: dotted;
	border-color: #ff0000;
	border-width: 2px;
	border-radius: 5px;
	padding: 12px 15px;
	/*padding: 1rem 1rem 1rem 3.5rem; */
}
#message p{margin: 0px; font-size: 1.2rem; text-align: left; color: var(--color-charcoal);}

/*for update images forms */
.messages{font-size: 1.2rem; line-height: 120%;} 
.messageP{margin-top: 3px; font-size: 1.2rem; line-height: 120%;} /*for update images forms */