*{
    margin: 0px;
    padding: auto;
}
.bgLogin{
    background-color: rgb(186, 130, 238);
    font-family: Times New Roman;
}
.bgRegister{
    background-color:rgba(4, 48, 48, 0.555);
    font-family: Times New Roman;
}
h2{
    color:blueviolet;
    font-family: Times New Roman;
    font-size: 24px;
    
}

label{
    font-family: Arial;
    font-size: large;
    color:black;
    display: inline-block;
    width:150px;
}
input[type=text]{
    width: 320px;
    height: 35px;
    padding: 5px;
    margin: 2px 0;
    box-sizing: border-box;
    border: 2px solid rgb(2, 56, 2);
    border-radius: 2px;
    background-color: white;
    color: black;
    font-size: 18px;
    font-family: arial;
}

input[type=text].preEmail{
    width: 186px;
    height: 35px;
    padding: 2px;
    margin: 2px 0;
    box-sizing: border-box;
    border: 2px solid rgb(2, 56, 2);
    border-radius: 2px;
    background-color:white;
    color:blue;
    font-size: 18px;
}
input[type=text].posEmail{
    width: 130px;
    height: 35px;
    padding: 2px;
    margin: 2px 0;
    box-sizing: border-box;
    border: 2px solid rgb(2, 56, 2);
    border-radius: 2px;
    background-color:white;
    color:blue;
    font-size: 18px;
}

input[type=text]#password{
    width: 275px;
    height: 35px;
    box-sizing: border-box;
    border: 2px solid rgb(2, 56, 2);
    border-radius: 2px;
    background-color:white;
    color:black;
    font-size: 18px;
    vertical-align: top;
}

input[type=password]{
    width: 275px;
    height: 35px;
    box-sizing: border-box;
    border: 2px solid rgb(2, 56, 2);
    border-radius: 2px;
    background-color: white;
    color: black;
    font-size: 18px;
    vertical-align: top;
}
input[type=button]{
    width:40px;
    height:35px;
    border: 2px solid black;
    border-radius: 2px;
    font-size:12px;
    color:white;
    background-color:blueviolet;
    vertical-align: top;
}
input[type=button]:hover{
    font-weight: bold;
    background-color:rgb(217, 192, 240);
    color: black;
}

button#login{
    width:320px;
    height:40px;
    border: 1px solid black;
    border-radius: 2px;
    font-size:18px;
    color:white;
    background-color: blueviolet;
    
}

button#register{
    width:320px;
    height:40px;
    border: 1px solid black;
    border-radius: 2px;
    font-size:18px;
    color:white;
    background-color: green;
}
button#register02{
    width:320px;
    height:40px;
    border: 1px solid black;
    border-radius: 2px;
    font-size:18px;
    color:white;
    background-color:blueviolet;
}
button#getPass{
    width:320px;
    height:35px;
    border: 1px solid black;
    border-radius: 2px;
    font-size:18px;
    color:black;
    background-color:rgb(204, 180, 226);
}
button#return{
    width:320px;
    height:40px;
    border: 2px solid gray;
    border-radius: 6px;
    font-size:18px;
    color:white;
    background-color: green;
}

.logindiv{
    width: 35%;
    height: 50%;
    border: solid 2px;
    border-color:white;
    margin: auto;
    margin-top: 30px;
    background-color:white;
    text-align: center;
    padding-bottom: 20px;
}
.title{
    font-family: tahoma;
    font-size: 20px;
    color:white;
    background-color: blueviolet;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: auto;
}
.titleRegister{
    font-family: tahoma;
    font-size: 22px;
    color:white;
    background-color:green;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: auto;
}

.frm{
    background-color:white;
    margin:auto;
}

button#login:hover{
    font-weight: bold;
    background-color:rgb(86, 8, 160);
}

button#register:hover{
    font-weight: bold;
    background-color: rgb(165, 226, 104);
    color:black
}
button#register02:hover{
    font-size: 20px;
}
button#getPass:hover{
    font-size: 20px;
}
button#return:hover{
    font-weight: bold;
    background-color: rgb(165, 226, 104);
    color:black
}

#email{
    background-image: url(Image/Email01.jpg);
    background-repeat: no-repeat;
    background-position:right;
    background-position-x:280px;
}
#emailname{
    background-image: url(Image/Email01.jpg);
    background-repeat: no-repeat;
    background-position:right;
    background-position-x:145px;
}
#password{
    background-image: url(Image/Pass01.jpg);
    background-repeat: no-repeat;
    background-position:right;
    background-position-x:240px;
}
#IDNo{
    background-image: url(Image/Code01.png);
    background-repeat: no-repeat;
    background-position:right;
    background-position-x:270px;
}

.info01{
    width: 30%;
    height: 50%;
    border: solid 2px;
    border-color:white;
    margin: auto;
    margin-top: 100px;
    background-color:white;
    text-align: center;
    padding-bottom: 30px;
}
.titleInfo01{
    width:50%;
    font-family: tahoma;
    font-size: 25px;
    color:black;
    font-weight: bold;
    background-color:greenyellow;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    margin: auto;
    border: solid 1px;
}
.contentInfo01{
    width:50%;
    background-color:lavenderblush;
    margin:auto;
    padding-left: 20px;
    border: solid 1px;
    padding-top: 10px;
    padding-bottom: 20px;
}
p#RegisterName{
    font-size: 22px;
    font-weight: bold;
}
p#RegisterEmail{
    font-size: 22px;
    font-weight: bold;
}
p#RegisterPassword{
    font-size: 22px;
    font-weight: bold;
}
p#RegisterID{
    font-size: 22px;
    font-weight: bold;
    color:blue;
}