/*


*/
/**
	Code for fancy input fields
*/

.formcontent{display:grid; width:100%; margin:0 auto; }
.formcontent * {box-sizing: border-box;}

.fancy-input {
  position: relative;
  margin: 10px auto;
  width: 100%;
  max-width: 1000px;
}
.fancy-input .label {
  position: absolute;
  top: 16px;
  left: 0;
  font-size: 1em;
  color: #888888;

  font-weight: 500;
  transform-origin: 0 0;
  transition: all 0.2s ease;
}
.fancy-input .border {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: #1a7e1b;
  transform: scaleX(0);
  transform-origin: middle 0;
  transition: all 0.5s ease;
}
.fancy-input input {
  -webkit-appearance: none;
  width: 100%;
  border: 0;
  font-family: inherit;
  padding: 12px 0 5px;
  height: 48px;
  font-size: 1em;
  font-weight: 500;
  border-bottom: 1px solid #888888;
  background: none;
  border-radius: 0;
  color: #223254;
  transition: all 0.15s ease;
}
.fancy-input input:hover {
   background: rgba(34,50,84,0.03);
}
.fancy-input input:not(:placeholder-shown) + span {
  color: #5a667f;
  transform: translateY(-26px) scale(0.75);
}
.fancy-input input:focus {
  background: none;
  outline: none;
}
.fancy-input input:focus + span {
  color: #1a7e1b;
  transform: translateY(-26px) scale(0.75);
}
.fancy-input input:focus + span + .border {
  transform: scaleX(1);
}
/**
	Code for a large fancy checkbox
	Create a custom checkbox
	code from W3C schools
*/

.fancy-checkbox{
  display: block;
  position: relative;
  padding-left: 7px;
  margin: 20px 0;
  cursor: pointer;
  font-size: 1em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkmark {
  position: absolute;
  top: 2px;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #EEE;
}

/* On mouse-over, add a grey background color */
.fancy-checkbox:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.fancy-checkbox input:checked ~ .checkmark {
  /*background-color: #1a7e1b;*/
	background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.fancy-checkbox input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.fancy-checkbox .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.fancy-radio, .fancy-radio-donate {
  display: block;
  position: relative;
  padding-left: 35px;
	margin-top: 12px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 1em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.fancy-radio-donate {
	margin-top: 0px;
}
/* Hide the browser's default radio button */
.fancy-radio input,
.fancy-radio-donate input{
	position: absolute;
  opacity: 0;
  cursor: pointer;
}
.inline-radio{
	padding:0;
	display:flex;
}
/* Create a custom radio button */
.radiomark {
  position: absolute;
  top: 5px;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #ddd;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.fancy-radio:hover input ~ .radiomark,
.fancy-radio-donate:hover input ~ .radiomark {
  background-color: #2196F3;
}

/* When the radio button is checked, add a blue background */
.fancy-radio input:checked ~ .radiomark,
.fancy-radio-donate input:checked ~ .radiomark{
  /*background-color: #1a7e1b;*/
	background-color:#D82690;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radiomark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.fancy-radio input:checked ~ .radiomark:after,
.fancy-radio-donate input:checked ~ .radiomark {
  display: block;
}

/* Style the indicator (dot/circle) */
.fancy-radio .radiomark:after,
.fancy-radio-donate .radiomark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

.fancy-radio-question{margin:20px 0;}

.fancy-slct{width:100%; height:40px; font-family:Georgia; font-size:1.15em; color:#888; margin:10px 0}
.fancy-select-label{color:#888888;margin-top:15px}
.fancy-txtr{font-family:Georgia;font-size:1em;border-radius:5px;border-color:#ccc;min-height:100px;margin-bottom:20px;margin-top:5px}
.fancy-txtr:focus{outline:none}
.fancy-txtr-label{color:#888888;margin-top:20px}
.fancy-submit{
			margin:10px 10px 10px 0;
			color:#FFFFFF;
			font-size: 1.1em;
			padding:5px 10px;
			height:50px;
			max-width:200px;
			background:#D82690;
			border:0;
			cursor:pointer;
			border-radius:5px;
			float:right;
}