*{
    margin: 0;
    padding: 0;
}
body{
background: #2A7B9B;
background: linear-gradient(90deg, rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);
margin: 0;
display: flex;

}

.myform{
 background: #020024;
background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 0%, rgba(0, 212, 255, 1) 88%);

border-radius: 10px;
padding: 30px;
height: fit-content;
/* display: flex; */
width: 400px;
justify-content: center;
align-content: center;
margin: 2vh auto 0 auto;
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    
    

}
button{
    background: #3F5EFB;
background: radial-gradient(circle, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
    border-radius: 10px;
    /* border: 2px solid; */
    padding: 5px;
    width: 100%;
     cursor: pointer;
    font-size: 15px;
    
}

h2{
    margin: 0;
    background: #3F5EFB;
background: radial-gradient(circle, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);

    text-align: center;
    color:black;
    border-radius: 10px;
    margin-bottom: 10px;
   
}
.input-group{
    display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
    margin-bottom: 10px;

}

.input-group input{
    border-radius: 5px;
    font-size:small;
    margin-top: 5px;
    padding: 2px;
    border: 2px solid #3F5EFB;
    width: 170px;
}
.input-group label{
    font-size:medium;
    font-weight: 500;
    margin-left: 20px;
    margin-right: 10px;


}

.input-group input:focus{

    outline-color: violet;
}

.input-group .error{
     /* border-color:rgba(252, 70, 107, 1) ; */
    color: rgba(252, 70, 107, 1);
    font-size: 10px;
    margin-top: 2px;
    margin-left: 5px;
    
}

.input-group.success input{

    border-color: #57C785;
   


}

.input-group.error input{
    border-color:rgba(252, 70, 107, 1) ;
   
}

.input-group i{
    visibility: hidden;
    position: absolute;

}