@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');

*{
    box-sizing:border-box;
}

body{
    font-family:"Poppins", sans-serif;
    margin:0px;
    padding:0px;
    background-color: #9b59b6;
    display:flex;
    align-items:center;
    min-height: 100vh;
    justify-content:center;
}

.container {
    background-color: #fff;
    border-radius:10px;
    box-shadow:0 2px 5px rgb(0,0,0,0.5);
    width:400px;
    max-width:100%;
}

.header {
    background-color: #f7f7f7;
    border-bottom: 1px solid #f0f0f0;
    padding:20px 40px;
    border-radius:10px;
}

.header h2 {
    margin:0;
}

.form {
    padding:30px 40px;
}

.form-control {
    margin-bottom:10px;
    padding-bottom:20px;
    position:relative;
}

.form-control label {
    display:inline-block;
    margin-bottom:5px;
}

.form-control input {
    border:2px solid #f0f0f0;
    border-radius:4px;
    display:block;
    font-size:14px;
    padding:10px;
    font-family:inherit;
    width:100%;
}

.form-control.success input {
    border-color:#2ecc71;
}

.form-control.error input {
    border-color:#e74c3c;
}

.form-control.success i.fa-check-circle {
    visibility:visible;
    color:#2ecc71;
}

.form-control.error i.fa-exclamation-circle {
    visibility:visible;
    color:#e74c3c;
}

.form-control.error small {
    visibility:visible;
    color:#e74c3c;
}

.form-control i{
    position: absolute;
    top:45px;
    right:15px;
    visibility: hidden;
}

.form-control small {
    position:absolute;
    bottom:0;
    left:0;
    visibility: hidden;
}

.form button {
    background-color: #8e44ad;
    width:100%;
    color:#fff;
    font-size:1rem;
    display:block;
    padding: 10px;
    border:2px solid #8e44ad;
    border-radius:4px;
    margin:20px 0;
}

input::placeholder {
    color:#d4d4d4;
}