/* invoice */
* {
box-sizing: border-box;
transition: 0.25s ease-in-out;
}
#invoice {
max-width: 500px;
}
#invoice label {
display: block;
height: 45px;
margin: 10px 0;
position: relative;
overflow: visible;
}
#invoice #delivery {
height: auto;
}
#invoice label input, #invoice label textarea {
display: block;
position: absolute;
top: 0px;
z-index: 1;
border: none;
outline: none;
background: #e3e8ec;
padding: 20px;
margin: 0;
border-radius: 3px;
font-family: helvetica neue, helvetica, arial, sans-serif;
font-size: 18px;
line-height: 18px;
font-weight: 200;
width: 100%;
height: 40px;
}
#invoice label input:focus, #invoice label textarea:focus {
background: #f5f5f5;
}
#invoice label input.codepen:focus ~ .text,
#invoice label textarea.codepen:focus ~ .text,
#invoice label input.complete:focus ~ .text {
color: #e3e8ec;
}
#invoice label input.complete ~ .text {
color: #a8b0b6;
}
#invoice label input.codepen {
padding: 20px 20px 20px 110px;
}
#invoice label input.codepen ~ .text, #invoice label textarea.codepen ~ .text {
border-radius: 3px 0 0 3px;
}
#invoice label input.codepen:focus,
#invoice label textarea.codepen:focus,
#invoice label input.codepen.complete,
#invoice label input.codepen.error {
padding: 20px 20px 20px 55px;
}
#invoice label input.codepen:focus ~ .text,
#invoice label textarea.codepen:focus ~ .text,
#invoice textarea input.codepen:focus ~ .text,
#invoice label input.codepen.complete:focus ~ .text {
color: black;
font-size: 14px;
}
#invoice label input.codepen.complete ~ .text {
background: #90ee90;
color: #4b555b;
font-size: 14px;
}
#invoice label input.codepen.error ~ .text {
background: #ff6961;
color: #fbfbfb;
font-size: 14px;
}
#invoice label input.codepen.error ~ .error-message {
position: relative;
z-index: 1;
text-align: right;
line-height: 40px;
padding-right: 10px;
color: #ff6861;
}
#invoice label .text {
display: block;
position: absolute;
top: 0px;
left: 0;
z-index: 2;
padding: 9px;
}
#additional-info {
flex-direction: column;
height: 250px;
padding: 40px;
border: 0px solid;
border-radius: 20px;
background-color: #e3e8ec44;
}
#total {
justify-content: flex-end;
}