.main {
  margin:2em 0 5em;
}
::-webkit-input-placeholder{
	color:#555 !important;
	font-size:1em !important;
}

.content-panel
{
    width: 60%;
    float: left;
    border:1px solid #333;
    border-radius: 5px;
    min-height: 300px;
    padding: 5px;
    margin-bottom: 5px;
    font-family: Verdana;
    background: #fffcec;
    line-height: 15pt;
    font-size: 13px;
}
.content-panel h1
{
    font-size: 15px;
    text-decoration: underline;
    font-weight: 700;
}
.content-panel p
{
    font-size: 13px;
}


.login-panel
{
    width: 40%;
    float: right;
}


.login_type_div{
    width: 75%;
    margin: 0 auto;
    position: relative;
    border-radius: 5px;
    float: right;
    background: #6d7d96;
    height: 37px;
    font-size: 20px;
    padding: 5px;
    text-align: center;
    margin-bottom: 5px;
}
.login_type_div select{
    width: 47%;
    margin: 0 auto;
}


.login {
    width: 75%;
    margin: 0 auto;
    background:#b5c5dd;
    padding-left: 3em;
    padding-right: 3em;
    padding-top: 1px;
    padding-bottom: 10px;
    position: relative;
    border-radius: 5px;
    float: right;
    margin-bottom: 10px;
}
.login h1 {
    text-align: center;
    font-size: 2em;
    margin: 1em 0;
    color: #555;
	font-family: 'PT Sans Narrow', sans-serif;
}
.login-top {
    background: #127DA7;
    position: absolute;
    width: 7%;
    top: -42px;
    left: 162px;
    padding: 1.7em 1.7em;
    padding-left: 1.7em;
    padding-right: 1.7em;
    border-radius: 50px;
    text-align: center;
}
.login-bottom .billdate {
    font-size: 1.2em;
    width: 100%;
    padding: .4em .4em;
    outline: none;
	background: #eaeaea;
    border: none;
	border-radius: 5px;
	text-align: center;
	font-family: 'PT Sans Narrow', sans-serif;
    margin-bottom: 15px;
}

.login-bottom .username {
    font-size: 1.2em;
    width: 100%;
    padding: .4em .4em;
    outline: none;
    background: #eaeaea;
    border: none;
    border-radius: 5px;
    text-align: center;
    font-family: 'PT Sans Narrow', sans-serif;
    margin-bottom: 15px;
            
}
.login-bottom .phone_login {
    font-size: 1.2em;
    width: 100%;
    padding: .4em 0.4em;
    outline: none;
    background: #eaeaea;
    border: none;
    border-radius: 5px;
    text-align: center;
    font-family: 'PT Sans Narrow', sans-serif;
    margin-bottom: 15px;
}

.login-bottom .password {
    font-size: 1.2em;
    width: 100%;
    padding: .4em 0.4em;
    outline: none;
    background: #eaeaea;
    border: none;
    border-radius: 5px;
    text-align: center;
    font-family: 'PT Sans Narrow', sans-serif;
    margin-bottom: 15px;
}
.login-bottom .btnLogin {
    font-size: 1.5em;
    padding: .3em .3em;
    width: 45%;
    border: none;
    text-transform: capitalize;
    outline: none;
    border-radius: 5px;
    background: #127DA7;
    color: #fff;
    cursor: pointer;
    font-family: 'PT Sans Narrow', sans-serif;
    margin: 0 auto;
    display: block;
    
}
.password {
    //margin: 1.5em 0;
}
.login-bottom p {
    font-size: 1em;
    text-align: center;
    margin-top: 2em;
    color: #555;
}
.login-bottom  a {
	text-decoration:none;
}
.login-bottom a p:hover {
    color: #127DA7;
}
.footer {
    text-align: center;
    padding: 3em 0;
}
.footer p {
    font-size: .9em;
    color: #fff;
    margin: 0px;
}
.footer p a:hover {
    color: #fff;
}
.footer p a {
    color: #fff;
}

/*responsive*/
@media(max-width:1440px){
.login-top {
   left: 149px;
}
}
@media(max-width:1366px){
.login-top {
    left: 135px;
    width: 22%;
}
}
@media(max-width:1280px){
.login-top {
    left: 136px;
    width: 9%;
    padding: 1.5em 1.5em;
}
}
@media(max-width:1080px){
    
    .login_type_div{
        width: 70%;
    }    
.login {
    width: 70%;
}
.login-top {
    left: 136px;
    width: 8%;
}
.login h1 {
   font-size: 1.8em;
}
.login-bottom p {
    font-size: .95em;
}
}
@media (max-width: 991px){
    .login_type_div{
        width: 80%;
    }    
    
.login 
{
        width: 80%;
}
.login-bottom input[type="text"] {
    width: 100%;
	font-size: .95em;
}
.login-bottom input[type="password"] {
    width: 87%;
	font-size: .95em;
}
.login-bottom input[type="submit"] {
    font-size: 1.4em;
}
.main {
}
}
@media (max-width: 640px){
    
.content-panel
{
    width: 100%;
    float: left;
}
.login-panel
{
    width: 100%;
    float: left;
}
.login_type_div{
    width: 56%;
    float: none;
}    
    
.login {
    width: 66%;
    float: none;
}
.login-bottom input[type="text"] {
    width: 100%;
    font-size: .95em;
}
.login-bottom input[type="password"] {
    width: 100%;
	font-size: .95em;
}
.login-bottom input[type="submit"] {
    font-size: 1.2em;
    width: 40%;
}
}
@media (max-width: 480px){
    .login_type_div{
        width: 70%;
    }    
    
.login {
    width: 100%;
	padding: 2.5em;
}
.login-top {
    left: 126px;
    padding: 1.5em;
}
.login-bottom input[type="submit"] {
    font-size: 1.3em;
    padding: .2em .2em;
}
.login-bottom p {
    font-size: .85em;
}
.login-bottom input[type="text"] {
    width: 100%;
}
}
@media (max-width: 320px){
    .login_type_div{
        width: 70%;
    }    
    
.login {
    width: 100%;
    padding: 1.5em;
}
.login-top {
    left: 92px;
    padding: 1.5em;
}
.main {
}
.footer {
    text-align: center;
    padding: 1em 0;
}
.login-bottom p {
    font-size: .8em;
}
}