* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}
body { 
    font-family: Arial, sans-serif; 
    line-height: 1.3;  
    color: #002B6B; 
    height: 200vh; 
}
form{ 
    width: 40%; 
    margin: 30px auto; 
    box-sizing: border-box; 
    border: 2px solid #19B34A; 
    border-radius: 5px; 
    padding: 20px; 
    background-color: #fefefe;
}
form img{ 
    width: 40%; 
    box-sizing: border-box; 
    display: block; 
    margin: auto;  
}
form h2{ 
    text-align: center; 
    padding-bottom: 30px; 
}
form .formgroup{ 
    margin-top: 20px;
}
form label{ 
    display: block; 
    font-size: 12px;
}
form label span{ 
    position: relative; 
    top: 5px; 
    background-color: #fefefe; 
    padding: 5px 10px; 
    border-radius: 5px; 
}
form input{ 
    width: 100%; 
    font-size: 16px; 
    padding: 15px 10px 10px 10px; 
    border: 1px solid #32CD32; 
    outline: none; 
    border-radius: 5px; 
    color:  #002B6B;
}
#fname{ 
    text-transform: capitalize; 
}
#lname{ 
    text-transform: capitalize; 
}
select{ 
    width: 100%; 
    box-sizing: border-box; 
    padding: 10px; 
    font-size: 16px; 
    border: 1px solid #32CD32; 
    border-radius: 5px; 
    color: #002B6B;
}
.loginfooter{ 
    display: flex; 
    justify-content: space-between; 
    margin-top: 10px; 
}
form .showpassword{ 
    display: flex; 
    margin-top: 10px; 
    font-size: 12px; 
    padding: 0; 
}
.showpassword input{ 
    width: 15px; 
    margin: 0px; 
    padding: 0px;
}
.showpassword p{ 
    padding-left: 5px; 
}
.loginfooter a{ 
    text-decoration: none; 
    font-size: 12px; 
    padding-top: 10px; 
}
form button{ 
    text-align: center; 
    display: block; 
    margin: 30px auto; 
    width: 80%; 
    padding: 10px; 
    border-radius: 50px; 
    font-size: 25px;
    background: #32CD32; 
    border: none; 
    color:  #002B6B;
}
form button:hover{ 
    border: 1px solid #32CD32; 
    background: white; 
    cursor: pointer;
}
.footer{ 
    text-align: center; 
    font-size: 12px; 
}

#none{ display: none; }

.alertBox{ 
    width: 40%; 
    border: 2px solid green; 
    border-radius: 5px;  
    padding: 20px; 
    margin: 30px auto; 
    text-align: center;  
}
.alertBox p{ 
    padding-bottom: 30px; 
    color: green; 
}
.alert a{ 
    text-decoration: none; 
    padding: 10px 30px; 
    background: blue; 
    color: white; 
    border-radius: 50px; 
}



/* Tablet */
@media (max-width: 992px) {
    form{ width: 50%; }
}
/* Mobile */
@media (max-width: 768px) {
    form{ width: 65%; }
    .alertBox{ width: 80%; }
}

@media (max-width: 500px) {
    form{ width: 95%; }
}