.bg-light{
    background: white;
}

body{
    margin: 0;
    padding: 0;
    background: white;
    background-size: 100%;
    background-position: center;
    font-family: sans-serif;
    font-size:12px;
}


.forCenterMenu{
    width: 300px;
     top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%,-50%);
}


.login-box{
    width: 220px;
    height: 350px;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%,-50%);
    box-sizing: border-box;
    padding: 50px 20px;
    border-radius: 20px;
    box-shadow: 0px 0px 10px 0px darkblue;
    font-size:12px;
}


.avatar{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    position: absolute;
    top: -40px;
    left: calc(50% - 40px);
}

.avatar1{
    width: 70px;
    height: 70px;
        border-radius: 50%;
    position: absolute;
    
    left: calc(50% - 40px);

}

h1{
    margin: 0;
    padding: 0 0 20px;
    text-align: center;
    font-size: 16px;
}
.login-box p{
    margin: 0;
    padding: 0;
    font-weight: bold;
}
.login-box input{
    width: 100%;
    margin-bottom: 20px;
}


.login-box input[type="text"], input[type="password"]
{
    border: none;
    border-bottom: 1px solid #fff;
    background: transparent;
    outline: none;
    height: 20px;
    color: #fff;
    font-size:12;
}


.login-box input[type="submit"]
{
    border: none;
    outline: none;
    height: 24px;
    width:100px;
    background: darkgreen;
    color: #fff;
    font-size:12;
    border-radius: 20px;
    text-align: center;
}

.login-box  input[type="submit"]:hover
{
    cursor: pointer;
    background: #39dc79;
    color: #000;
}

.login-box input[type="button"]
{
    border: none;
    outline: none;
    height: 24px;
    width:100px;
    background: darkgreen;
    color: #fff;
    font-size:12;
    border-radius: 20px;
    text-align: center;
}


.login-box  input[type="button"]:hover
{
    cursor: pointer;
    background: #39dc79;
    color: #000;
}


.login-box a{
    text-decoration: none;
    font-size:12;
    color: #298FE4;
}
.login-box a:hover
{
    cursor: pointer;
     color: #33C1FF;
}

.alert-box{
    width: 180px;
    height: 30px;
    color:red;
    font-size:12px;
    text-align: center;
}

#loginbutton
{
    border: none;
    outline: none;
    height: 24px;
    width:100px;
    background: #298FE4;
    color: #fff;
    font-size:12;
    border-radius: 20px;
    text-align: center;
}


#loginbutton:hover
{
    cursor: pointer;
    background: #33C1FF;
    color: #000;
}

#clicklogin{
    text-decoration: none;
    font-size:16;
    color: lightgreen;
    font-weight: bold;
}

#clicklogin:hover
{
    cursor: pointer;
     color: greenyellow;
}

#forgotButton
{
    border: none;
    outline: none;
    height: 24px;
    width:120px;
    background: #DE9501;
    color: #fff;
    font-size:12px;
    border-radius: 20px;
    text-align: center;
}


#forgotButton:hover
{
    cursor: pointer;
    background: #FCD482;
    color: #000;
}


#idForgotPassword
{
    background:none;
}

#idForgotPassword:hover
{
    cursor: pointer;
    background: none;
    color: #DE9501;
}

ul :hover
{
    cursor:pointer;
    background: lightsteelblue;
}

li :hover
{
    background: grey;
}

.fa.fa-navicon {
  color:white;
}

.graybackground{
    border-color: lightgray;
    background: #E9ECEF;
}
.graybackground:hover{
    background: lightgray;
}


.precitexlogo{
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%,-50%);
}