/*
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;
}














/* 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;}*/