/* Field */
.field
{
	margin-bottom: 20px;
	padding: 5px 0 0 0;
	border: 1px solid var(--light-grey);
	background-color: var(--white);
	border-radius: .25rem;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}

.form fieldset .field:last-child:not([class*=" gs-"]):not([class*=" gm-"]):not([class*=" gl-"]):not([class*=" gf-"]) , 
.fieldset .field:last-child:not([class*=" gs-"]):not([class*=" gm-"]):not([class*=" gl-"]):not([class*=" gf-"]) { margin-bottom: 0; }

/* Label */
.field label , .max-length
{
	width: auto;
	padding: 0 5px;
	position: absolute;
	top: -10px;
	font-size: .75em;
	line-height: 1.3em;
	color: var(--light-black);
	background-color: var(--light-grey);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	z-index: 1;
}

.field.focus-in label , .field.focus-in .max-length
{
	color: var(--white);
	background-color: var(--blue);
}

.field.valid label , .field.valid .max-length
{
	color: var(--white);
	background-color: var(--light-green);
}

.field.invalid label , .field.invalid .max-length
{
	color: var(--white);
	background-color: var(--red);
}

.field label { max-width: calc(100% - 20px); }
.field.have-max-length label { max-width: calc(100% - 95px); }
[dir="rtl"] .field label , [dir="ltr"] .max-length { right: 10px; }
[dir="ltr"] .field label , [dir="rtl"] .max-length { left: 10px; }
.field label span { color: var(--red); }
.field.focus-in label span , .field.valid label span , .field.invalid label span { color: var(--white); }
[dir="rtl"] .field label span { padding-right: 2px; }
[dir="ltr"] .field label span { padding-left: 2px; }

/* Second Div */
.field > div:nth-child(2) { padding: 0; }
.field > div:nth-child(2) .calendar-float { float: none; }

/* Max Length */
.max-length span:nth-child(2)
{
	opacity: .5;
	padding: 0 3px;
}

.max-length span:last-child
{
	opacity: .5;
	font-size: .8em;
}

/* Input */
.field input , .field textarea , .spacer-field > div:nth-child(2)
{
	width: 100%;
	padding: 0 12px;
	font-size: 1em;
	line-height: 1.875em;
	color: var(--black);
	background-color: transparent;
	border: 0;
	border-radius: .25rem;
}

/* Textarea */
.textarea-field textarea
{
	height: 80px;
	min-height: 80px;
	resize: none;
	outline: none;
	-webkit-transition: none;
	transition: none;
	overflow: hidden;
}

/* Password */
.password-visibility
{
	cursor: pointer;
	width: 1.875em;
	position: absolute;
	top: 0;
	line-height: 1.875em;
	color: var(--light-black);
	background-color: var(--white);
	border-radius: .25rem;
	text-align: center;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}

.show-password .password-visibility { color: var(--brown); }
[dir="rtl"] .password-visibility { left: 0; }
[dir="ltr"] .password-visibility { right: 0; }
.password-visibility:hover { color: var(--grey); }
.show-password .password-visibility:hover { color: var(--light-brown); }

/* Focus */
.field input:focus , .field textarea:focus
{
	outline: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.field.focus-in { border-color: var(--blue); }

/* Valid */
.field.valid { border-color: var(--light-green); }

/* InValid */
.field input:invalid , .field textarea:invalid
{
	outline: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.field.invalid { border-color: var(--red); }

/* Disabled */
.text-field input[disabled] , .text-field input.disabled ,
.text-field textarea[disabled] , .text-field textarea.disabled
{
	color: var(--disabled);
	background-color: var(--disabled-background);
}

/* Icon */
[dir="rtl"] .field.has-icon input { padding-right: 1.875em; }
[dir="ltr"] .field.has-icon input { padding-left: 1.875em; }

.field.has-icon .field-icon
{
	width: 1.875em;
	position: absolute;
	top: 0;
	font-size: .9em;
	line-height: 1.875em;
	text-align: center;
	color: var(--grey);
}

[dir="rtl"] .field.has-icon .field-icon { right: 0; }
[dir="left"] .field.has-icon .field-icon { left: 0; }