/*
Pure CSS Float Labels v2.0
with Bootstrap5 and Select2 support
by Adam Culpepper | @adamculpepper
https://floatlabels.com
https://github.com/adamculpepper/pure-css-float-labels
*/

:root {
	/* Non-bootstrap styles */
	--floatlabels-input-default-height:38px;
	--floatlabels-input-default-padding:0.75rem;

	/* Bootstrap 5 styles */
	--floatlabels-input-bootstrap5-sm-height:31px;
	--floatlabels-input-bootstrap5-lg-height:48px;
	--floatlabels-input-bootstrap5-sm-padding:0.50rem;
	--floatlabels-input-bootstrap5-lg-padding:1.00rem;
}

.float-label {position:relative;}
.float-label > label {
	opacity:0.75;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	font-size:inherit;
	cursor:text;
	pointer-events:none;
	transition:all 100ms linear;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	-webkit-touch-callout:none; /* iOS Safari */
	  -webkit-user-select:none; /* Safari */
	   -khtml-user-select:none; /* Konqueror HTML */
	     -moz-user-select:none; /* Old versions of Firefox */
	      -ms-user-select:none; /* Internet Explorer/Edge */
	          user-select:none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
}

.float-label > select,
.float-label > input:focus,
.float-label > textarea:focus,
.float-label > input:not(:placeholder-shown),
.float-label > textarea:not(:placeholder-shown) {padding-bottom:0;}

.float-label > input:focus ~ label,
.float-label > textarea:focus ~ label,
.float-label > input:not(:placeholder-shown) ~ label,
.float-label > textarea:not(:placeholder-shown) ~ label,
.float-label > select ~ label {
	opacity:0.50;
	font-size:75%;
	margin-top:-0.50rem;
}

.float-label input,
.float-label select:not([multiple]),
.float-label label {height:var(--floatlabels-input-default-height); line-height:var(--floatlabels-input-default-height);}

.float-label input,
.float-label select,
.float-label textarea,
.float-label label {padding-left:var(--floatlabels-input-default-padding); padding-right:var(--floatlabels-input-default-padding);}


/* Non-Bootstrap 5 */
.float-label input:not(.form-control),
.float-label select:not(.form-control):not(.form-select),
.float-label textarea:not(.form-control) {padding-top:0.75rem;}

.float-label :not(.form-control):not(.form-select) + label {padding-top:0;}


/* Bootstrap 5 */
.float-label input.form-control {padding-top:0.50rem;}
.float-label select.form-control,
.float-label select.form-select {padding-top:0.30rem;}

.float-label input.form-control,
.float-label select.form-control,
.float-label select.form-select,
.float-label .form-control + label,
.float-label .form-select + label {
	/*height:var(--floatlabels-input-bootstrap5-height);
	line-height:var(--floatlabels-input-bootstrap5-height);*/
	padding-left:var(--floatlabels-input-default-padding);
	padding-right:var(--floatlabels-input-default-padding);
}

.float-label input.form-control-sm,
.float-label select.form-control-sm,
.float-label select.form-select-sm,
.float-label .form-control-sm + label,
.float-label .form-select-sm + label {
	height:var(--floatlabels-input-bootstrap5-sm-height);
	line-height:var(--floatlabels-input-bootstrap5-sm-height);
	padding-left:var(--floatlabels-input-bootstrap5-sm-padding);
	padding-right:var(--floatlabels-input-bootstrap5-sm-padding);
}

.float-label input.form-control-lg,
.float-label select.form-control-lg,
.float-label select.form-select-lg,
.float-label .form-control-lg + label,
.float-label .form-select-lg + label {
	height:var(--floatlabels-input-bootstrap5-lg-height);
	line-height:var(--floatlabels-input-bootstrap5-lg-height);
	padding-left:var(--floatlabels-input-bootstrap5-lg-padding);
	padding-right:var(--floatlabels-input-bootstrap5-lg-padding);
}

.float-label .form-control:focus + label,
.float-label .form-control:not(:placeholder-shown) + label,
.float-label .form-select:focus + label,
.float-label .form-select:not(:placeholder-shown) + label {line-height:100%; margin-top:0.25rem;}


/* Bootstrap 5 fixes */
.float-label.input-group label,
.float-label .input-group label,
.input-group .float-label label {z-index:3;}

.float-label.input-group .btn,
.float-label .input-group .btn,
.input-group .float-label .btn {padding-top:0; padding-bottom:0;}












.float-label input,
.float-label select,
.float-label textarea {/*padding-top:5%; padding-bottom:0;*/} /* remove this padding on the input. maybe replace with transform? */
.float-label .form-control[readonly] + label,
/* .float-label .form-control:placeholder-shown:not(:focus) + label {opacity:0.50; font-size:inherit;} */
/* .float-label .form-control + label,
.float-label input.form-control + label {top:1px;} */
/* .float-label input.form-control:placeholder-shown:not(:focus) + label {top:50%; transform:translateY(-50%);} */
.float-label input.form-control:-webkit-autofill + label {} /* just the mere presence of this empty style fixes issue #6. strange. */
.float-label input.form-control:-moz-autofill + label {} /* untested: firefox fix; */

/* [required] attribute based required field indicators */
.float-label .form-control[required] + label:after,
.float-label > select.form-select[required] + .select2-container + label:after,
.float-label > select.form-control[required] + .select2-container + label:after {content:'*'; font-size:0.75rem; margin-left:5px; transition:all 300ms;}

/* [disabled] and [readonly] styles */
.float-label .form-control[readonly],
.float-label .form-control[disabled],
.float-label .form-control[disabled] + label {opacity:0.5; cursor:not-allowed;}

/* [readonly]'s :placeholder-shown state sucks so... here's a fix */
.float-label .form-control[readonly] + label {color:inherit; font-size:0.75rem;}
.float-label .form-control[readonly]:placeholder-shown:not(:focus) + label:after {color:inherit;}

/* Textarea + select (multiple) elements */
.float-label textarea.form-control,
.float-label select.form-select[multiple],
.float-label select.form-control[multiple] {padding-top:20px;}

.float-label textarea.form-control + label,
.float-label select.form-control[multiple] + label {backdrop-filter:blur(5px); width:calc(100% - 20px); padding-top:0.2rem; padding-bottom:0.2rem;}
.float-label textarea.form-control + label:before,
.float-label select.form-control[multiple] + label:before {content:''; display:block; width:100%; width:100%; height:100%; background-color:#fff; position:absolute; top:0; left:1px; z-index:-1;}
.float-label textarea.form-control + label,
.float-label select.form-control[multiple] + label {backdrop-filter:blur(0);}
.float-label textarea.form-control:placeholder-shown:not(:focus) + label:before,
.float-label select.form-control[multiple]:placeholder-shown:not(:focus) + label:before {background-color:transparent;}

/* Select elements */
.float-label select.form-select,
.float-label select.form-control {padding-left:0.50rem;}
.float-label select.form-select option[selected][disabled],
.float-label select.form-control option[selected][disabled] {display:none;}

/* Hide placeholders since we're taking care of those with label elements */
.float-label ::-webkit-input-placeholder {color:transparent!important;}
.float-label :-moz-placeholder {color:transparent!important;} /* Firefox 18- */
.float-label ::-moz-placeholder {color:transparent!important;} /* Firefox 19+ */
.float-label :-ms-input-placeholder {color:transparent!important;}
.float-label ::placeholder {color:transparent!important;}

/* Missing placeholder error messages */
.float-label input.form-control[placeholder = ''],
.float-label input.form-control:not([placeholder]),
.float-label textarea.form-control[placeholder = ''],
.float-label textarea.form-control:not([placeholder]) {border:1px solid red;}
.float-label input.form-control[placeholder = ''] + label:after,
.float-label input.form-control:not([placeholder]) + label:after,
.float-label textarea.form-control[placeholder = ''] + label:after,
.float-label textarea.form-control:not([placeholder]) + label:after {margin-left:10px; color:red;}
.float-label input.form-control[placeholder = ''] + label:after,
.float-label input.form-control:not([placeholder]) + label:after,
.float-label textarea.form-control[placeholder = ''] + label:after,
.float-label textarea.form-control:not([placeholder]) + label:after {content:'placeholder missing!';}

/* ------------------------------ */

/* Select2 Support */

/* Normalize Select2 for Bootstrap 4 */
.float-label > select + .select2-container {position:relative;}
.float-label > select + .select2-container .select2-selection {height:auto; border:0;}
.float-label > select + .select2-container .select2-selection .select2-selection__rendered {
	height: calc(1.5em + .75rem + 2px);
	line-height:calc(1.5em + .75rem + 2px);
	padding:.375rem .75rem;
	border:1px solid rgba(0, 0, 0, 0.20);
	border-radius:4px;
}

.float-label > select[disabled] + .select2-container,
.float-label > select[disabled] + .select2-container + label {opacity:0.5;}
.float-label > select[disabled] + .select2-container .select2-selection {cursor:not-allowed;}

.select2-container--default .select2-selection--single .select2-selection__arrow {height:100%; top:0;}

/*.float-label > select + label.select2-float-label {
	opacity:1;
	position:absolute;
	left:0.85rem;
	top:50%;
	transform:translateY(-50%);
	font-size:1rem;
	transition:all 0.30s;
	color:#bbb;
	margin-bottom:0;
	pointer-events:none;
}*/

/*.float-label > select + .select2-selection__placeholder {
	position:absolute;
	top:50%;
	transform:translateY(-50%);
}*/

/*.float-label > select + .select2-has-value label.select2-float-label,
.float-label > select + .select2-container--open label.select2-float-label {
	top:12px;
	font-size:0.75rem;
	color:red;
	border:1px solid red;
}*/

/* Hide Select2's placeholder since we're taking care of the placeholder from here on */
/*.float-label > select + .select2-has-opened .select2-selection__placeholder,
.float-label > select + .select2-container--open .select2-selection__placeholder {opacity:0;}*/

/* fix Mac visual bug */
/* class applies to select element itself, not a wrapper element */
/*select.form-control {
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
	padding:8px 10px;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E");
	background-position:right .75rem center;
	background-size:13px 26px;
	background-repeat:no-repeat;
}
select.form-control[size] {border:5px solid red;}*/