/* ================================== */
/* FORMS */
/* ================================== */
input{
	padding: 10px;
	background-color: #fafafa;
	border: 1px solid #e0e0e0;
	transition: all 200ms;
	border-radius: 8px;
}
input:hover{
	border: 1px solid #cacaca;
}
input::placeholder{
	color: #686868;
}
input:focus{
	background-color: white;
	box-shadow: 0 0 5px 0px rgba(0,0,0,0.1);
	border: 1px solid rgba(0,0,0,0.1);
	transition: all 200ms;
	outline: none;
}
.pf.form input{
	font-size: 14px;
}
.pf.form .field > label,.pf.input > label{
	display: block;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 5px;
	margin-left: 5px;
}
.pf.input.full,.pf.input.full input,.pf.form .field input{
	display: block;
	width: 100%;
}
.pf.form{
	margin: 0;
}
.pf.input,.pf.form .field,.pf.form .fields{
	margin-bottom: 10px;
}
.pf.form .field.error input{
	background-color: #FEE2E2;
	border: 1px solid #FECACA;
}
.pf.form .field.error input::placeholder{
	color: #c74242;
}
.pf.form .field.error label{
	color: #c96e6e;
}

.pf.form .fields .pf.input{
	margin-bottom: 0;
}

.pf.form .fields .field{
	margin-bottom: 0;
}

.pf.form .two.fields{
	display: flex;
	justify-content: space-between;
}
.pf.form .two.fields .field{
	width: calc(50% - 5px);
}
.pf.form .two.fields .field:first-child{
	margin-right: 5px;
}
.pf.form .two.fields .field:last-child{
	margin-left: 5px;
	margin-right: 0;
}

.pf.form .three.fields{
	display: flex;
}
.pf.form .three.fields .field{
	margin-left: 2px;
	margin-right: 2px;
	width: 33%;
}
.pf.form .three.fields .field:first-child{
	margin-left: 0;
}
.pf.form .three.fields .field:last-child{
	margin-right: 0;
}

/* ================================== */
/* INPUT */
/* ================================== */
.pf.input.fluid{
	width: 100%;
	display: block;
	position: relative;
}
.pf.input{
	position: relative;
}
.pf.input.fluid input{
	width: 100%;
}
.pf.input.icon i, .pf.input.icon img{
	position: absolute;
	top: 13px;
	left: 15px;
	color: gray;
	font-size: 13px;
}
.pf.input.icon img{
	width: 20px;
	left: 10px;
	top: 11px;
	fill: #94d31b;
}
.pf.input.icon input{
	display: block;
	padding-left: 35px;
}
input.circular{
	border-radius: 100px;
	padding: 10px 15px;
}

.pf.input.action{
	display: flex;
}
.pf.input.action input{
	flex-grow: 100;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.pf.input.action .pf.button{
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	display: inline;
	min-width: 50px;
	padding-left: 15px;
}