/* FORM */
#formWrapper{width: 70%; margin: 0rem auto;}

fieldset{border-style: dotted; border-color: var(--color-charcoal-light); border-width: 1px 0px 0px 0px; margin-bottom: 2.5rem;}
fieldset:last-child{border-style: none;}
.fField{margin-top: 1rem;}
label{font-size: 1.5rem; margin-top: 15px; color: var(--color-charcoal-light);}

textarea, input[type="text"], input[type="password"], input[type="number"], select, option{font-family: var(--font); color: var(--color-charcoal); 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-light); border-width: 1px; border-radius: 5px; background-color: #FFFFFF; box-shadow: 2px 2px 2px rgba(0,0,0,0.1);}

textarea:focus, input:focus, option:focus{
	box-shadow: 0 0 5px rgba(170, 212, 62, 0.3);
	padding: 1.2rem;
	border: 1px solid rgba(170, 212, 62, 0.85);
	outline: none;}

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

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


.ui-datepicker table {
    font-size: 1.6rem !important; /*.9em - from jquery-ui.css*/
}
.ui-datepicker{
	width: auto !important;
}
.ui-datepicker .ui-datepicker-title {
    font-size: 1.6rem !important;
}


/*Button Charcoal General link button*/
.buttonSubmit {
	display: inline-block;
	font-size: 2.2rem;
	font-weight: 400;
	color: var(--color-white);
	text-decoration: none;
	background-color: var(--color-charcoal-dark); 
	padding: .8rem 1.8rem;
	margin: 2rem auto;
	box-shadow: 0px .2rem .5rem rgba(0,0,0,0.4);
	transition: all .5s;
	cursor: pointer;
  }
  .buttonSubmit:link {color: var(--color-white); text-decoration: none;} 
  .buttonSubmit:visited {color: var(--color-white); text-decoration: none;}
  .buttonSubmit:active {color: var(--color-white); text-decoration: none;}
  .buttonSubmit:hover{background-color: var(--color-green); box-shadow: 0px 2px 4px rgba(0,0,0,0.2);}



/*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-size: 10px; color: var(--color-charcoal-light); font-weight: bold; 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*/
.error{font-size: 1.2rem; color: var(--color-error) !important; 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); font-size: 1.7rem;}
/*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 */