.form {
/* position: fixed; */
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-family: inherit;
}
.input-wrapper {
/* max-width: 360px; */
width:100%;
position: relative;
}
.input {
height: 50px;
font-size: 13px;
padding: 11px 15px;
border-radius: 4px;
border-bottom: 1px solid #CBD8E3!important;
border:none;
width: 100%;
outline: none;
box-sizing: border-box;
margin-bottom: 18px;
}
.placeholder {
pointer-events: none;
position: absolute;
font-weight: 400;
top: 18px;
left: 8px;
padding: 0 8px;
background-color: white;
border-radius: 5px;
transition: transform 250ms cubic-bezier(0.4,0,0.2,1), opacity 250ms cubic-bezier(0.4,0,0.2,1);
color: grey;
}

.input:not(:placeholder-shown).input:not(:focus) + .placeholder {
transform: scale(.75) translateY(-36px) translateX(-15%);
color: #CBD8E3;
transition: .2s ease;
}

.input:focus {
border-color: #a27332;
} 

.input:focus{
    border-bottom: 1px solid #a27332!important;
}

.input:focus + .placeholder {
transform: scale(.75) translateY(-36px) translateX(-15%);
color: #a27332;
/* border-bottom: 1px solid #a27332; */
transition: .2s ease;
} 

.input:invalid:not(:placeholder-shown){
transition: .2s ease;
border-color:#F52C5C;
}

.input:invalid:not(:placeholder-shown) + .placeholder{
transition: .2s ease;
color:#F52C5C;
}
.input:invalid:not(:placeholder-shown).input:not(:focus) + .placeholder {
transform: scale(.75) translateY(-36px) translateX(-15%);
color: #F52C5C;
transition: .2s ease;
}