﻿
/* Making the label break the flow */
.floating-label {
    position: absolute;
    top: 0;
    left: 0;
    user-select: none;
    z-index: 2;
}

/* Hide the browser-specific focus styles */
.floating-label-field {
    color: rgba(44, 62, 80, .75);
    border-width: 0;
    z-index: 3;
}

    .floating-label-field:focus {
        outline: 0;
        box-shadow: 0;
    }

    .floating-label-field::placeholder {
        color: rgba(44, 62, 80, .5);
    }

/* Make the label and field look identical on every browser */
.floating-label,
.floating-label-field {
    font: inherit;
    line-height: 1;
    display: block;
    width: 100%;
}

.floating-label-field,
.floating-label-wrap {
    position: relative;
    /*margin-bottom:14px;*/
}
.floating-label-wrap {
    margin-bottom: 14px;
}

/* Input Style #1 */
.floating-label-field--s1 {
    transition: border-color .25s ease-in-out;
    color: rgba(0, 0, 0, .75);
    border-bottom: 3px solid rgba(0, 0, 0, .05);
    background-color: transparent;
}

    .floating-label-field--s1 + .floating-label {
        transition: transform .25s, opacity .25s ease-in-out;
        transform-origin: 0 0;
        opacity: .5;
    }

    .floating-label-field--s1:focus,
    .floating-label-field--s1:not(:placeholder-shown) {
        border-color: rgba(0, 0, 0, .1);
    }

        .floating-label-field--s1:focus + .floating-label,
        .floating-label-field--s1:not(:placeholder-shown) + .floating-label {
            transform: translate(.25em, -30%) scale(.8);
            opacity: .25;
        }

    .floating-label-field--s1:valid:not(:placeholder-shown) {
        border-color: rgba(46, 213, 115, .3);
    }

    .floating-label-field--s1:invalid {
        border-color: rgba(255, 71, 87, .3);
    }

/* Input Style #2 */
.floating-label-field--s2 {
    transition: background-color .25s ease-in-out;
    border: 2px solid #fff;
    border-radius: 5px;
    background-color: #fff;
}

    .floating-label-field--s2 + .floating-label {
        visibility: hidden;
        transition: transform .25s, visibility .5s, opacity .5s ease-in-out;
        opacity: 0;
    }

    .floating-label-field--s2:focus + .floating-label,
    .floating-label-field--s2:not(:placeholder-shown) + .floating-label {
        visibility: visible;
        transform: translateY(-80%);
        opacity: .8;
    }

    .floating-label-field--s2:valid:not(:placeholder-shown) {
        border-color: #adefc8;
        background-color: #adefc8;
    }

    .floating-label-field--s2:invalid {
        border-color: #ffe0e3;
        background-color: #ffe0e3;
    }

.floating-label-field--s3 {
    padding: 1.5em;
    transition: border-color .25s ease-in-out;
    color: rgba(0, 0, 0, .75);
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 5px;
    background-color: transparent;
}
input.floating-label-field--s3 
{
	padding: 1.5em!important;
}
    .floating-label-field--s3 + .floating-label {
        position: absolute;
        top: 11px;
        /*top: .75em;*/
        left: .75em;
        display: inline-block;
        width: auto;
        margin: 0;
        padding: .5em;
        transition: transform .25s, opacity .25s, padding .25s ease-in-out;
        transform-origin: 0 0;
        color: rgba(0, 0, 0, .8);
        font-size:15px;
    }

    .floating-label-field--s3:focus,
    .floating-label-field--s3:not(:placeholder-shown) {
        border-color: rgba(0, 0, 0, .1);
    }

        .floating-label-field--s3:focus + .floating-label,
        .floating-label-field--s3:not(:placeholder-shown) + .floating-label {
            z-index: 3;
            /*padding: .75em;*/
            padding:8px;
            transform: translate(0, -25px) scale(.9);
            /*transform: translate(0, -2em) scale(.9);*/
            color: rgba(0, 0, 0, .75);
            background-color: white;
        }

    /* Common Styles */
    /* Identical inputs on all browsers */
    .floating-label-field--s1:not(textarea),
    .floating-label-field--s2:not(textarea),
    .floating-label-field--s3:not(textarea) {
        max-height: 4em;
    }

.floating-label-field--s1,
.floating-label-field--s1 + .floating-label,
.floating-label-field--s2,
.floating-label-field--s2 + .floating-label {
    padding: 1.5em;
}

    .floating-label-field--s1 + .floating-label,
    .floating-label-field--s2 + .floating-label {
        z-index: 2;
    }

    .floating-label-field--s1::placeholder,
    .floating-label-field--s3::placeholder {
        color: transparent;
    }

select.floating-label-field--s3 {
    padding: 1.1em .1em 1.1em 1.5em;
  /*  padding: 1.5em .1em 1.1em 1.5em;*/
    height:64px;
}

@media screen and (min-width: 1240px) {
	.invoice-line-items label.floating-label
	{
		display:none!important;
	}
}

.floating-label-wrap.show-placeholder .floating-label-field::placeholder
,.floating-label-wrap.disabled .floating-label-field::placeholder
{
	color: rgba(44, 62, 80, .5)!important;
}
.floating-label-wrap.show-placeholder .floating-label
,.floating-label-wrap.disabled .floating-label
{
	z-index: 3;
	padding: 8px;
	transform: translate(0, -25px) scale(.9);
	color: rgba(0, 0, 0, .75);
	background-color: white;
}

.floating-label-wrap.disabled input
,.floating-label-wrap.disabled select
,.floating-label-wrap.disabled textarea
{
	color: #888;
	border: none;	
	-webkit-appearance:none;
	-moz-appearance:none;
	resize: none;
	 -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;    
}
.floating-label-wrap.disabled select::-ms-expand {
	display: none;
}
.floating-label-wrap.disabled	input::-webkit-outer-spin-button,
,.floating-label-wrap.disabled	input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
,.floating-label-wrap.disabled input[type=number] {
	-moz-appearance: textfield;
}