*

{

    margin: 0;

    padding: 0;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}



.register

{

    width: 90%;

    max-width: 300px;

    position: relative;

    top: 50%;

    left: 50%;

    transform: translate(-50%,50%);

    background: #fff;

    padding: 50px 60px 70px;

    text-align: center;

}

.register h1

{

    font-size: 30px;

    margin-bottom: 50px;

    color: #3c00a0;

    position: relative;

}



.register h1::after

{

    content: "";

    width: 40px;

    height: 4px;

    border-radius: 4px;

    background: #3c00a0;

    position: absolute;

    bottom: -10px;

    left: 50%;

    transform: translateX(-50%)

}



.input-field

{

    background: #d1cece;

    margin: 15px 0;

    border-radius: 3px;

    display: flex;

    align-items: center;

    max-height: 65px;

    transition: max-height 0.5s;

    overflow: hidden;



}



.input-field i

{

    margin-left: 10px;

    color: #555;



}



input

{

    width: 100%;

    background: transparent;

    border: 0;

    outline: 0;

    padding: 18px 15px;

}



form p

{

    text-align: left;

    font-size: 13px;

}



.buttons

{

    width: 100%;

    display: flex;

    justify-content: space-between;

    padding: 20px;

}



.buttons button

{

    flex-basis: 45%;

    background: #3c00a0;

    color: #fff;

    height: 40px;

    border-radius: 20px;

    border: 0;

    outline: 0;

    cursor: pointer;

    transition: background 1s;

}



.formInput

{

    height: 280px;

}



.buttons button.disable

{

    background: #d1cece;

    color: #555;

}