*, *:before, *:after {
  box-sizing:border-box;
  margin:0;
  padding:0;
}

.login-logo img {
    height: 100px;   
}


html, body {	 
  height: 100%;
 /* overflow: hidden;*/
}
.cont, .prof{
 position: relative;
  height: 100%;
background:#f7f7f7; position:relative;
  background-position:bottom; font-family:"Open Sans", Tahoma;
 }
.cont{/*background-image:url(../../images/loginbg-img.png); background-repeat:no-repeat; background-size:cover;*/ overflow:auto;}
header{ height:129px; border-bottom:1px solid #e5e4e4; box-shadow:0 1px 0 #fff;}
/* Radio Button Css*/

input[type=radio]:before {
    display: block;
    width: 17px;
    height: 17px;
    content: '';
    position: absolute;
    background-image:url(../../images/radio.png); background-position:0px -18px;
    pointer-events: none;
}

input[type=radio]:checked:before {
    background-image: url(../../images/radio.png);  background-position:0px 0px;
}

.radiostyle {
    display:inline-block; 
    width:17px;
    height:17px;
    background-color: blue;
    /*or instead of color use some image*/
}
.lablestyle{vertical-align: 4px;   padding-left: 5px;    padding-right: 40px;}
/* Radio Button End */
.addsales-heading{width:1000px; padding:10px; color:#fff; text-align:center; background:#016cb1;}
.addsales-details{width:1000px; margin:0px auto !important; padding:10px; text-align:center; background:#fff;}
@media(min-width:1024px) and (max-width:1920px) {
.head-top{width:1000px; margin:auto; padding:0;}
.head-menu{ float:right; padding-top:20px;}
.head-menu > .trade a{font-size:18px; color:#c0c0c0; text-decoration:none; float:right; padding-right:10px;}
.head-menu > .trade a:hover{font-size:18px; color:#ef7301; text-decoration:none; padding-right:10px;}
.head-menu > .top-menu{float:right; margin-top:20px;}
.head-menu > .top-menu ul { display:inline;}
.head-menu > .top-menu ul li{ display:inline-block; font-size:14px; list-style:none; color:#666;}
.head-menu > .top-menu ul li a{ display:inline-block; font-size:14px; list-style:none;  padding:0 10px 0 10px; color:#666; text-decoration:none;}
.head-menu > .top-menu ul li a:hover{ background:#ef7301; color:#fff; text-decoration:none; list-style:none;}
.container{margin:auto; line-height:25px; width:400px; padding:60px 0 0 30px; font-size:30px; font-weight:normal; color:#666; text-align:left;}
/* Login */
    
    .login-logo {
        background: rgba(120,186,49,.2);
        padding: 10px;
    }

 .login-row > span.useri{ background-image:url(../../images/user-icon.png); margin-left:25px; background-repeat:no-repeat; width:35px; height:29px; float:left;}
 .login-row > span.fpass{ background-image:url(../../images/fpass-icon.png); margin-left:17px; background-repeat:no-repeat; width:35px; height:29px; float:left;}
 .pass-row > span.passi{ background:url(../../images/pass-icon.png) no-repeat 0px 2px; margin-left:20px; width:39px; height:29px; float:left;}
 .login_input { display:inline-block;width:28rem;height:50px; font-family:"Open Sans",Tahoma; font-size:18px; font-weight:500; margin-top:-10px;padding-left:1.5rem;font-size:1.5rem; outline:none;/*background:transparent;*/color:#000; border:none; background:url(../../images/text-box-div.png); background-repeat:no-repeat; background-position:left; /*background:transparent; border-left:1px solid #e5e4e4; box-shadow:0 0 1px #fff;*/ }
	.sub-row > input{    position:relative; width:161px; height:39px; font-family:"Open Sans",Tahoma; margin: 3rem 0 2.2rem;
    color:rgba(255, 255, 255, 0.8);  background:url(../../images/login-but-bg.png) repeat-x; font-size:1.5rem; border-radius:10px; border:0px; cursor:pointer; overflow:hidden; }
	.sub-row > input:hover{ -webkit-transition:background-color 0.7s ease; -moz-transition:background-color 0.7s ease; -o-transition:background-color 0.7s ease; transition:background-color 0.7s ease; background:#ef7301;}
	form > .signup{width:341px; margin:auto;}
	form > .signup > input{float:left; margin-top:5px;}
	form > .signup > input[type="checkbox"]{zoom:1.2;}
	form > .signup > label{font-size:14px; padding-left:10px; float:left; padding-top:3px; color:#000;}
	form > .signup > span a{float:right; color:#015890; text-decoration:none; padding-top:3px; font-family:"Open Sans",Tahoma; font-size:14px;}
	form > .signup > span a:hover{float:right; color:#000; text-decoration:none; padding-top:3px;}
/*Footer*/
footer{background-color:#000; opacity:0.8; clear:both;}
#footer_content{width: 1000px; margin: 0 auto; position:relative; font-family:"Open Sans", Tahoma; color:#666; padding-top: .5em;}
.copyright {padding:.5em 0 .5em 0; font-size:13px; text-align:right;}
}
@media(min-width:769px) and (max-width:1023px) {

.head-top{width:100%; margin:auto; padding:0;}
.logo{ width:100%; height:117px; margin-top:4px; margin-bottom:4px;}
.head-menu{ float:right; padding-top:20px;}
.head-menu > .trade a{font-size:18px; color:#c0c0c0; text-decoration:none; float:right; padding-right:10px;}
.head-menu > .trade a:hover{font-size:18px; color:#ef7301; text-decoration:none; padding-right:10px;}
.head-menu > .top-menu{float:right; margin-top:20px;}
.head-menu > .top-menu ul { display:inline;}
.head-menu > .top-menu ul li{ display:inline-block; font-size:14px; list-style:none; color:#666;}
.head-menu > .top-menu ul li a{ display:inline-block; font-size:14px; list-style:none;  padding:0 10px 0 10px; color:#666; text-decoration:none;}
.head-menu > .top-menu ul li a:hover{ background:#ef7301; color:#fff; text-decoration:none; list-style:none;}
.container{margin:auto; width:400px; padding:60px 0 0 0; font-size:30px; font-weight:800; color:#ef7301; text-align:center;}
.addsales-heading{width:100%; padding:10px; color:#fff; text-align:center; background:#016cb1;}
h4.welcome-login {width:  auto !important;}
.addsales-details{width:100%; margin:0px auto !important; padding:10px; text-align:center; background:#fff;}
/* Login */
 .login-form{   
	position:absolute;left:0;width:100%;padding:1.5rem 2.5rem;text-align:center;}
 .login-row, .pass-row{
	height:5rem; padding-top:1rem;width:341px; margin:auto; background:#e3e0e0; border-radius:10px; margin-top:25px;}
 .login-row > span.useri{ background-image:url(../../images/user-icon.png); margin-left:25px; background-repeat:no-repeat; width:35px; height:29px; float:left;}
 .login-row > span.fpass{ background-image:url(../../images/fpass-icon.png); margin-left:17px; background-repeat:no-repeat; width:35px; height:29px; float:left;}
 .pass-row > span.passi{ background:url(../../images/pass-icon.png) no-repeat 0px 2px; margin-left:20px; width:39px; height:29px; float:left;}
 .login_input {
    display:inline-block;width:28rem;height:50px; font-family:"Open Sans",tahoma; font-size:18px; font-weight:500; margin-top:-10px;padding-left:1.5rem;font-size:1.5rem; outline:none;/*background:transparent;*/color:#000; border:none; background:url(../../images/text-box-div.png); background-repeat:no-repeat; background-position:left; /*background:transparent; border-left:1px solid #e5e4e4; box-shadow:0 0 1px #fff;*/ }
	.sub-row > input{    position:relative; width:161px; height:39px; font-family:"Open Sans",Tahoma; margin: 3rem 0 2.2rem;
    color:rgba(255, 255, 255, 0.8);  background:url(../../images/login-but-bg.png) repeat-x; font-size:1.5rem; border-radius:10px; border:0px; cursor:pointer; overflow:hidden; }
	.sub-row > input:hover{ -webkit-transition:background-color 0.7s ease; -moz-transition:background-color 0.7s ease; -o-transition:background-color 0.7s ease; transition:background-color 0.7s ease; background:#ef7301;}
	form > .signup{width:341px; margin:auto;}
	form > .signup > input{float:left; margin-top:5px;}
	form > .signup > input[type="checkbox"]{zoom:1.2;}
	form > .signup > label{font-size:14px; padding-left:10px; float:left; padding-top:3px; color:#000;}
	form > .signup > span a{float:right; color:#015890; padding-top:3px; text-decoration:none; font-family:"Open Sans",Tahoma; font-size:14px;}
	form > .signup > span a:hover{float:right; color:#000; padding-top:3px; text-decoration:none;}
/*Footer*/
footer{background-color:#000; opacity:0.8; clear:both;}
#footer_content{width:100%; margin: 0 auto; position:relative; font-family:"Open Sans", Tahoma; color:#666; padding-top: .5em;}
.copyright {padding:.5em .5em .5em 0; font-size:13px; text-align:right;}
}
@media(min-width:480px) and (max-width:768px) {
html, body{font-size: 40%; height:100%;}
	.head-top{width:100%; margin:auto; padding:0;}
.logo{ width:auto; height:117px; margin:auto;}
h4.welcome-login {width: auto !important;}
.head-menu{ margin-top:-111px;}
.head-menu > .trade a{font-size:18px; color:#c0c0c0; text-decoration:none; float:right; padding-right:10px;}
.head-menu > .trade a:hover{font-size:18px; color:#ef7301; text-decoration:none; padding-right:10px;}
.head-menu > .top-menu{display:none;}
.head-menu > .top-menu ul { display:inline;}
.head-menu > .top-menu ul li{ display:inline-block; font-size:14px; list-style:none; color:#666;}
.head-menu > .top-menu ul li a{ display:inline-block; font-size:14px; list-style:none;  padding:0 10px 0 10px; color:#666; text-decoration:none;}
.head-menu > .top-menu ul li a:hover{ background:#ef7301; color:#fff; text-decoration:none; list-style:none;}
section{ position:relative;}
.container{margin:auto; /*width:400px;*/ padding:30px 0 0 0; font-size:30px; font-weight:800; color:#ef7301; text-align:center;}
/* Login */
 .login-form{   
	position:relative;left:0;width:100%;height:100%;padding:1.5rem 1rem;text-align:center; margin-bottom:7em;}
 .login-row, .pass-row{
	height:7rem; padding-top:1rem;width:241px; margin:auto; background:#e3e0e0; border-radius:10px; margin-top:25px;}
 .login-row > span.useri{ background-image: url(../../images/user-icon.png);margin-left:17px; background-repeat:no-repeat; width:20px; margin-top:2px; height:29px; float:left;}
 .login-row > span.fpass{ background-image: url(../../images/fpass-icon.png);margin-left:15px; background-repeat:no-repeat; width:30px; margin-top:2px; height:29px; float:left;}
 .pass-row > span.passi{ background: url(../../images/pass-icon.png) no-repeat 0px 2px; margin-left:11px; width:26px; height:29px; margin-top 2px; float:left;}
 .login_input {display:inline-block; width:28rem; height:50px;font-family:"Open Sans",tahoma;font-size:20px; font-weight:500; margin-top: -10px; padding-left:1.5rem; font-size:2rem; outline:none;/* background: transparent; */ color:#000;
    border:none; background:url(../../images/text-box-div.png); background-repeat:no-repeat; background-position:left; }
	.sub-row > input{    position:relative; width:161px; height:39px; font-family:"Open Sans",Tahoma; margin: 3rem 0 2.2rem;
    color:rgba(255, 255, 255, 0.8);  background:url(../../images/login-but-bg.png) repeat-x; font-size:2rem; border-radius:10px; border:0px; cursor:pointer; overflow:hidden; }
	.sub-row > input:hover{ -webkit-transition:background-color 0.7s ease; -moz-transition:background-color 0.7s ease; -o-transition:background-color 0.7s ease; transition:background-color 0.7s ease; background:#ef7301;}
	form > .signup{width:310px; margin:auto;}
	form > .signup > input{float:left; margin-top:5px;}
	form > .signup > input[type="checkbox"]{zoom:1.2;}
	form > .signup > label{font-size:14px; padding-left:10px; float:left; padding-top:3px; color:#000;}
	form > .signup > span a{float:right; padding-right:10px; color:#015890; text-decoration:none; padding-top:3px; font-family:"Open Sans",Tahoma; font-size:14px;}
	form > .signup > span a:hover{float:right; padding-top:3px; padding-right:10px; color:#000; text-decoration:none;}
/*Footer*/
footer{background-color:#000; opacity:0.8; clear:both;}
#footer_content{width:100%; margin: 0 auto; position:relative; font-family:"Open Sans", Tahoma; color:#666; padding-top: .5em;}
.copyright {padding:.5em .5em .5em 0; font-size:13px; text-align:center;}
.addsales-heading{width:100%; padding:10px; color:#fff; text-align:center; background:#016cb1;}
.addsales-details{width:100%; margin:0px auto !important; padding:10px; text-align:center; background:#fff;}
}
@media(min-width:320px) and (max-width:479px) {
html, body{font-size: 40%; height:100%;}
	.head-top{width:100%; margin:auto; padding:0;}
.logo{ width:auto; height:117px; margin:auto;}
.head-menu{ margin-top:-111px;}
.head-menu > .trade a{font-size:18px; color:#c0c0c0; text-decoration:none; float:right; padding-right:10px;}
.head-menu > .trade a:hover{font-size:18px; color:#ef7301; text-decoration:none; padding-right:10px;}
.head-menu > .top-menu{display:none;}
.head-menu > .top-menu ul { display:inline;}
.head-menu > .top-menu ul li{ display:inline-block; font-size:14px; list-style:none; color:#666;}
.head-menu > .top-menu ul li a{ display:inline-block; font-size:14px; list-style:none;  padding:0 10px 0 10px; color:#666; text-decoration:none;}
.head-menu > .top-menu ul li a:hover{ background:#ef7301; color:#fff; text-decoration:none; list-style:none;}
section{ position:relative;}
.container{margin:auto; /*width:400px;*/ padding:30px 0 0 0; font-size:30px; font-weight:800; color:#ef7301; text-align:center;}
h4.welcome-login{width: auto !important;}
    /* Login */
    .login-form {
        position: relative;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 1.5rem 1rem;
        text-align: center;
        margin-bottom: 7em;
    }
 .login-row, .pass-row{
	height:7rem; padding-top:1rem;width:241px; margin:auto; background:#e3e0e0; border-radius:10px; margin-top:25px;}
 .login-row > span.useri{ background-image: url(../../images/user-icon.png);margin-left:17px; background-repeat:no-repeat; width:20px; margin-top: 2px; height:29px; float:left;}
 .login-row > span.fpass{ background-image: url(../../images/fpass-icon.png);margin-left:17px; background-repeat:no-repeat; width:20px; margin-top: 2px; height:29px; float:left;}
 .pass-row > span.passi{ background: url(../../images/pass-icon.png) no-repeat 0px 2px; margin-left:11px; width:26px; height:29px; margin-top 2px; float:left;}
 .login_input {display:inline-block; width:28rem; height:50px;font-family:"Open Sans",tahoma;font-size:20px; font-weight:500; margin-top: -10px; padding-left:1.5rem; font-size:2rem; outline:none;/* background: transparent; */ color:#000; border:none; background:url(../../images/text-box-div.png); background-repeat:no-repeat; background-position:left; }
	.sub-row > input{    position:relative; width:161px; height:39px; font-family:"Open Sans",Tahoma; margin: 3rem 0 2.2rem;
    color:rgba(255, 255, 255, 0.8);  background:url(../../images/login-but-bg.png) repeat-x; font-size:2rem; border-radius:10px; border:0px; cursor:pointer; overflow:hidden; }
	.sub-row > input:hover{ -webkit-transition:background-color 0.7s ease; -moz-transition:background-color 0.7s ease; -o-transition:background-color 0.7s ease; transition:background-color 0.7s ease; background:#ef7301;}
	form > .signup{width:310px; margin:auto;}
	form > .signup > input{float:left; margin-top:5px;}
	form > .signup > input[type="checkbox"]{zoom:1.2;}
	form > .signup > label{font-size:14px; padding-left:10px; float:left; padding-top:3px; color:#000;}
	form > .signup > span a{float:right; padding-right:10px; color:#015890; text-decoration:none; padding-top:3px; font-family:"Open Sans",Tahoma; font-size:14px;}
	form > .signup > span a:hover{float:right; padding-top:3px; padding-right:10px; color:#000; text-decoration:none;}
/*Footer*/
footer{background-color:#000; opacity:0.8; clear:both;}
#footer_content{width:100%; margin: 0 auto; position:relative; font-family:"Open Sans", Tahoma; color:#666; padding-top: .5em;}
.copyright {padding:.5em .5em .5em 0; font-size:13px; text-align:center;}
}

/*Container*/
@media(min-width:1024px) and (max-width:1920px) {
.pro-container{width:1000px; margin:auto;}
.user{font-size:14px; color:#434242; margin:6px; }
.pro{width:20%; float:left;}
.pro-img {width:100px; height:100px; border-radius:50px; overflow:hidden; background:#ccc;}
.addpro-form{width:100%; float:none; margin-bottom:20px;}
.addpro-form form label{ color:#434242; display:inline-block; width:100px; vertical-align:top; text-align:left;}
.addpro-form form span{ color:#C60;}
.addpro-form form textarea{ height:100px;}
.pro-form{width:80%; float:right; margin-bottom:50px;}
.pro-form form img{position:absolute; margin-left:90px; margin-top:0px; width:30px; height:30px;}
.pro-form form label{ font-size:14px; color:#434242; display:inline-block; width:140px; vertical-align:top;}
.pro-form form span{font-size:14px; color:#C60;}
.pro-form form input, .addpro-form form input,  .addpro-form form textarea, .pro-form form textarea, .addsales-details .salesfile input{margin-left:15px; padding:10px; outline:none; background:#ededed; border:0; width:395px; margin-bottom:10px;}
.pro-form form textarea{ height:150px;}
.pro-form form .button, .addsales-details .button{padding:10px 15px; margin-left:5px; background:#016cb1; color:#fff; cursor:pointer; text-align:center; outline:none; border:0px; position:absolute;}
.addsales-details .button{position:relative !important;}
.pro-form form .browse, .addsales-details .browse{width:311px;}
.pro-form form .can-but, .addpro-form form .can-but, .out, .suspend, .export{padding:10px 15px; margin-left:16px; background:#016cb1; color:#fff; cursor:pointer; text-align:center; outline:none; border:0px;}
.pro-form form .can-but:hover, .addpro-form form .can-but:hover, .out:hover, .suspend:hover, .export:hover{background:#015890;}
.in, .out, .active-stat, .suspend{width:100px; margin-left:14px !important;}
.pro-form form .up-but, .addpro-form form .up-but, .in, .active-stat{padding:10px 15px; margin-left:5px; background:#5ab75a; color:#fff; cursor:pointer; text-align:center; outline:none; border:0px;}
.pro-form form .up-but:hover, .addpro-form form .up-but:hover, .in:hover, .active-stat:hover{background:#4f9e4f;}
.attendance{width:1000px; margin:auto; }
.clock{width:20%; float:left; position:absolute;}
.sub-head{position:relative; width:1000px; margin:32px auto 0;}
.sub-head > ul{display:block; width:1000px; /*padding-top:44px;*/}
.sub-head > ul li.view, .sub-head > ul li.viewqnot, .sub-head > ul li.prostat, .sub-head > ul li.add, .sub-head > ul li.addq, .sub-head > ul li.empre, .sub-head > ul li.meet, .salesfile span{ list-style:none; position:relative; display:inline; font-size:14px; width:160px; margin-left:10px;  color:#fff; padding:15px 15px 15px 35px;}
.salesfile{margin-top:0px !important; margin-bottom:35px;}
.salesfile span{padding:8px 15px 9px 35px !important; }
.salesfile a{text-decoration:none;}
.salesfile span:hover{background:#4f9e4f;}
.sub-head > ul li.view, .sub-head > ul li.empre{background:#016cb1;}
.sub-head > ul li.add, .sub-head > ul li.addq, .sub-head > ul li.viewqnot, .sub-head > ul li.prostat,  .sub-head > ul li.meet,  .salesfile span{background:#5ab75a;}
.sub-head > ul li.view > i, .sub-head > ul li.viewqnot > i, .sub-head > ul li.add > i, .sub-head > ul li.addq > i, .sub-head > ul li.prostat > i,  .sub-head > ul li.meet > i, .sub-head > ul li.empre > i, .salesfile span i{position:absolute; top:9px; left:8px; height:25px; width:25px; background-image:url(../../images/white-icons.png);}
.sub-head > ul li.view > i{background-position: -3px 3px;}
.sub-head > ul li.viewqnot > i{background-position:31px 56px;}
.sub-head > ul li.prostat > i{background-position:92px 29px; height:26px; top:12px;}
.sub-head > ul li.add > i{ background-position: -32px 3px; height:26px;}
.sub-head > ul li.addq > i{ background-position: -32px 56px; height:26px;}
.sub-head > ul li.meet > i{ background-position: 89px 87px; height:28px;}
.sub-head > ul li.empre i{background-position: 29px 3px; height:28px;}
.salesfile span i {background-position: 29px 24px;}
.view-details, .add-details, .emp-report{position:relative; width:1000px; margin:auto; margin-top:40px;}
.view-details h1, .add-details h1, .emp-report h1{ font-family: "Open Sans Light", Tahoma, geneva; font-size:16px; color:#016cb1; padding-left:30px; font-weight:bold;}
.view-details h1 i{position:absolute; top:-6px; left:-3px; height:27px; width:27px; background-image:url(../../images/black-icons.png); background-position: -10px -12px;}
.add-details h1 i{position:absolute; top:-6px; left:-3px; height:27px; width:27px; background-image:url(../../images/black-icons.png); background-position: -39px -12px;}
.emp-report h1 i{position:absolute; top:-6px; left:-3px; height:27px; width:27px; background-image:url(../../images/black-icons.png); background-position: -65px -12px;}
.edit i{position:absolute;  margin-top: -10px; margin-left: -10px;/*top:-6px; left:-3px;*/ height:21px; width:22px; background-image:url(../../images/black-icons.png); background-position: -12px -46px; cursor:pointer;}
.view-details div, .add-details div, .emp-report div{margin-top:20px; font-size:13px;}
.in-out{width:15%; text-align:center;}
.photo{width:8%; text-align:center;}
.num-block{width:10%; text-align:center;}
.view-details div form input, .view-details div form select{font-family:Tahoma, geneva, "Open Sans Light"; background-color:#ededed; border:none; outline:none; font-size:13px; padding:7px;width:20%;}
.view-details div form select, .emp-report div form select{ margin-left:10px; height:35px; }
.view-details div form .submit, .emp-report div form .submit{margin-left:10px; width:140px; cursor:pointer; background:#016cb1; color:#fff; padding:10px;}
.view-details div form .submit:hover, .emp-report div form .submit:hover{background:#5ab75a;}
} 
@media(min-width:769px) and (max-width:1023px){
.sub-head{position:relative; width:100%; margin:32px auto 0;}
.sub-head > ul{display:block; width:500px; /*padding-top:44px;*/}
.sub-head > ul li.view, .sub-head > ul li.viewqnot, .sub-head > ul li.prostat, .sub-head > ul li.add, .sub-head > ul li.addq, .sub-head > ul li.empre, .sub-head > ul li.meet, .salesfile span{ list-style:none; position:relative; display:inline; font-size:14px; width:160px; margin-left:10px;  color:#fff; padding:15px 15px 15px 35px;}
.sub-head > ul li.view, .sub-head > ul li.empre{background:#016cb1;}
.sub-head > ul li.add, .sub-head > ul li.addq, .sub-head > ul li.viewqnot, .sub-head > ul li.prostat, .sub-head > ul li.meet, .salesfile span{background:#5ab75a;}
.sub-head > ul li.view > i, .sub-head > ul li.viewqnot > i, .sub-head > ul li.add > i, .sub-head > ul li.addq > i, .sub-head > ul li.prostat > i, .sub-head > ul li.meet > i, .sub-head > ul li.empre > i, .salesfile span i{position:absolute; top:9px; left:8px; height:25px; width:25px; background-image:url(../../images/white-icons.png);}
.sub-head > ul li.view > i {background-position: -3px 3px;}
.sub-head > ul li.add > i{ background-position: -32px 3px; height:26px;}
.sub-head > ul li.addq > i { background-position: -32px 56px;  height: 26px;}
.sub-head > ul li.viewqnot > i{ background-position: 31px 56px;}
.sub-head > ul li.prostat > i {background-position: -92px 29px; height:26px;}
.sub-head > ul li.meet > i{ background-position: 89px 87px; height:28px;}
.sub-head > ul li.empre > i {background-position: 29px 3px; height:28px;}
.sub-head > ul li.view, .sub-head > ul li.viewqnot .sub-head > ul li.add, .sub-head > ul li.addq, .sub-head > ul li.prostat, .sub-head > ul li.empre, .sub-head > ul li.meet, .salesfile span{ list-style:none; position:relative; display:inline; font-size:14px; width:160px; margin-left:10px;  color:#fff; padding:15px 15px 15px 35px;}
.salesfile span{padding:8px 15px 9px 35px !important; margin-left: 85px !important;}
.salesfile span i {background-position: 29px 24px;}
.salesfile a{text-decoration:none;}
.salesfile span:hover{background:#4f9e4f;}
.view-details div, .add-details div, .emp-report div{margin-top:20px; font-size:13px;}
.view-details div form input, .view-details div form select, .emp-report div form select{font-family:Tahoma, geneva, "Open Sans Light"; background-color:#ededed; border:none; outline:none; font-size:13px; padding:7px;width:20%;}
.view-details div form select, .emp-report div form select{ margin-left:10px; height:35px; }
.view-details div form .submit, .emp-report div form .submit{margin-left:10px; width:140px; cursor:pointer; background:#016cb1; color:#fff; padding:10px;}
.view-details div form .submit:hover, .emp-report div form .submit:hover{background:#5ab75a;}
.view-details, .add-details, .emp-report{position:relative; width:100%; margin:auto; margin-top:40px;}
.view-details h1, .add-details h1, .emp-report h1{ font-family: "Open Sans Light", Tahoma, geneva; font-size:16px; color:#016cb1; padding-left:30px; font-weight:bold;}
.view-details h1 i{position:absolute; top:-6px; left:-3px; height:27px; width:27px; background-image:url(../../images/black-icons.png); background-position: -10px -12px;}
.add-details h1 i{position:absolute; top:-6px; left:-3px; height:27px; width:27px; background-image:url(../../images/black-icons.png); background-position: -39px -12px;}
.emp-report h1 i{position:absolute; top:-6px; left:-3px; height:27px; width:27px; background-image:url(../../images/black-icons.png); background-position: -65px -12px;}
.edit i{position:absolute;   margin-top: -10px; margin-left: -10px;/*top:-6px; left:-3px;*/ height:21px; width:22px; background-image:url(../../images/black-icons.png); background-position: -12px -46px; cursor:pointer;}
.pro-container{width:80%; margin:auto;}
.user{font-size:14px; color:#434242; margin:6px; }
.pro{width:20%; float:left;}
.pro-img {width:100px; height:100px; border-radius:50px; overflow:hidden; background:#ccc;}
.addpro-form{width:100%; float:none; margin-bottom:20px;}
.addpro-form form label{ color:#434242; display:inline-block; width:100px; vertical-align:top; text-align:left;}
.addpro-form form span{ color:#C60;}
.addpro-form form textarea{ height:100px;}
.pro-form{width:80%; float:right; margin-bottom:80px;}
.pro-form form img{position:absolute; margin-left:90px; margin-top:0px; width:30px; height:30px;}
.pro-form form label{ font-size:14px; color:#434242; display:inline-block; width:140px; vertical-align:top;}
.pro-form form span{font-size:14px; color:#C60;}
.pro-form form input, .pro-form form textarea, .addpro-form form input,  .addpro-form form textarea, .addsales-details .salesfile input{margin-left:15px; padding:10px; outline:none; background:#ededed; border:0; width:395px; margin-bottom:10px;}
.pro-form form textarea{ height:150px;}
/*.pro-form form .button{padding:10px 15px; margin-left:5px; background:#016cb1; color:#fff; cursor:pointer; text-align:center; outline:none; border:0px; position:absolute;}*/
.pro-form form .button, .addsales-details .button{padding:10px 15px; margin-left:5px; background:#016cb1; color:#fff; cursor:pointer; text-align:center; outline:none; border:0px; position:absolute;}
.pro-form form .browse{width:311px;}
.pro-form form .can-but, .addpro-form form .can-but, .export{padding:10px 15px; margin-left:16px; background:#016cb1; color:#fff; cursor:pointer; text-align:center; outline:none; border:0px;}
.pro-form form .up-but{padding:10px 15px; margin-left:5px; background:#5ab75a; color:#fff; cursor:pointer; text-align:center; outline:none; border:0px;}
.pro-form form .can-but, .out, .suspend, .export{padding:10px 15px; margin-left:16px; background:#016cb1; color:#fff; cursor:pointer; text-align:center; outline:none; border:0px;}
.pro-form form .can-but:hover, .addpro-form form .can-but:hover, .out:hover, .suspend:hover, .export:hover{background:#015890;}
.in, .out, .active-stat, .suspend{width:100px; margin-left:14px !important;}
.pro-form form .up-but, .addpro-form form .up-but, .in, .active-stat{padding:10px 15px; margin-left:5px; background:#5ab75a; color:#fff; cursor:pointer; text-align:center; outline:none; border:0px;}
.pro-form form .up-but:hover, .addpro-form form .up-but:hover, .in:hover, .active-stat:hover{background:#4f9e4f;}
.pro-form form .can-but, .out, .suspend, .export{padding:10px 15px; margin-left:16px; background:#016cb1; color:#fff; cursor:pointer; text-align:center; outline:none; border:0px;}
.pro-form form .can-but:hover, .out:hover, .suspend:hover, .export:hover{background:#015890;}	
.attendance{width:80%; margin:auto;}
.clock{width:20%; float:left; }
}

@media(min-width:644px) and (max-width:768px){
.pro-container{width:80%; margin:auto;}
.user{font-size:14px; color:#434242; margin:20px; text-align:center; }
/*.pro{width:20%; float:left;}*/
.pro-img {width:150px; height:150px; border-radius:79px; overflow:hidden; background:#ccc; margin:auto;}
.pro-img img{margin-left:19px; margin-top:11px;}
.addpro-form{width:100%; float:none; margin-bottom:20px;}
.addpro-form form label{ color:#434242; display:inline-block; width:110px; vertical-align:top; text-align:left;}
.addpro-form form span{ color:#C60;}
.addpro-form form textarea{ height:100px;}
.pro-form{width:80%; margin:auto auto 50px;}
.pro-form form img{display:none;}
.pro-form form label{ font-size:14px; color:#434242; display:inline-block; width:140px; vertical-align:top; /*margin-left:17px;*/}
.pro-form form span{font-size:14px; color:#C60;}
.pro-form form input, .pro-form form textarea, .addpro-form form input, .addpro-form form textarea, .addsales-details .salesfile input{/*margin-left:15px;*/ padding:10px; outline:none; background:#ededed; border:0; width:320px; margin-bottom:10px;}
.pro-form form textarea{ height:150px;}
/*.pro-form form .button{padding:10px 15px; margin-left:5px; background:#016cb1; color:#fff; cursor:pointer; text-align:center; outline:none; border:0px; position:absolute;}*/
.pro-form form .button, .addsales-details .button{padding:10px 15px; margin-left:5px; background:#016cb1; color:#fff; cursor:pointer; text-align:center; outline:none; border:0px; position:absolute;}
.pro-form form .browse{width:311px;}
.pro-form form .can-but, .addpro-form form .can-but, .export{padding:10px 15px; margin-left:16px; background:#016cb1; color:#fff; cursor:pointer; text-align:center; outline:none; border:0px;}
.pro-form form .up-but{padding:10px 15px; margin-left:5px; background:#5ab75a; color:#fff; cursor:pointer; text-align:center; outline:none; border:0px;}
.pro-form form .can-but, .out, .suspend, .export{padding:10px 15px; /*margin-left:16px;*/ background:#016cb1; color:#fff; cursor:pointer; text-align:center; outline:none; border:0px;}
.pro-form form .can-but:hover, .addpro-form form .can-but:hover, .out:hover, .suspend:hover, .export:hover{background:#015890;}
.in, .out, .active-stat, .suspend{width:100px; /*margin-left:14px !important;*/}
.pro-form form .up-but, .addpro-form form .up-but, .in, .active-stat{padding:10px 15px; margin-left:5px; background:#5ab75a; color:#fff; cursor:pointer; text-align:center; outline:none; border:0px;}
.pro-form form .up-but:hover, .addpro-form form .up-but:hover, .in:hover, .active-stat:hover{background:#4f9e4f;}	
.attendance{width:80%; margin:auto;}
.sub-head{position:relative; width:100%; margin:32px auto 0;}
.sub-head > ul{display:block;/* width:500px; padding-top:44px;*/}
.sub-head > ul li.view, .sub-head > ul li.viewqnot, .sub-head > ul li.prostat, .sub-head > ul li.add, .sub-head > ul li.addq, .sub-head > ul li.empre, .sub-head > ul li.meet, .salesfile span{ list-style:none; position:relative; font-size:14px; /* display:inline; width:160px; margin-left:10px;*/  color:#fff; padding:15px 15px 15px 35px;}
.sub-head > ul li.view, .sub-head > ul li.empre{background:#016cb1;}
.sub-head > ul li.add, .sub-head > ul li.viewqnot, .sub-head > ul li.addq, .sub-head > ul li.prostat, .sub-head > ul li.meet, .salesfile span{background:#5ab75a;}
.sub-head > ul li.view > i, .sub-head > ul li.viewqnot > i, .sub-head > ul li.addq > i, .sub-head > ul li.add > i, .sub-head > ul li.prostat > i, .sub-head > ul li.empre > i, .sub-head > ul li.meet > i, .salesfile span i{position:absolute; top:9px; left:8px; height:25px; width:25px; background-image:url(../../images/white-icons.png);}
.sub-head > ul li.view > i {background-position: -3px 3px;}
.sub-head > ul li.add > i{ background-position: -32px 3px; height:26px;}
.sub-head > ul li.addq > i{ background-position: -32px 56px; height:26px;}
.sub-head > ul li.viewqnot > i{ background-position: 31px 56px;}
.sub-head > ul li.prostat > i{background-position:-92px 29px; height:26px;}
.sub-head > ul li.meet > i{background-position:89px 87px; height:28px;}
.sub-head > ul li.empre > i{background-position: 29px 3px; height:28px;}
.salesfile span{padding:8px 15px 9px 35px !important; margin-left: 85px !important;}
.salesfile span i {background-position: 29px 24px;}
.salesfile a{text-decoration:none;}
.salesfile span:hover{background:#4f9e4f;}
.view-details div, .add-details div, .emp-report div{margin-top:20px; font-size:13px;}
.view-details div form input, .view-details div form select, .emp-report div form select{font-family:Tahoma, geneva, "Open Sans Light"; background-color:#ededed; border:none; outline:none; font-size:13px; padding:7px;width:20%;}
.view-details div form select, .emp-report div form select{ margin-left:10px; height:35px; }
.view-details div form .submit, .emp-report div form .submit{margin-left:10px; width:140px; cursor:pointer; background:#016cb1; color:#fff; padding:10px;}
.view-details div form .submit:hover, .emp-report div form .submit:hover{background:#5ab75a;}
.view-details, .add-details, .emp-report{position:relative; width:100%; margin:auto; margin-top:40px;}
.view-details h1, .add-details h1, .emp-report h1{ font-family: "Open Sans Light", Tahoma, geneva; font-size:16px; color:#016cb1; padding-left:30px; font-weight:bold;}
.view-details h1 i{position:absolute; top:-6px; left:-3px; height:27px; width:27px; background-image:url(../../images/black-icons.png); background-position: -10px -12px;}
.add-details h1 i{position:absolute; top:-6px; left:-3px; height:27px; width:27px; background-image:url(../../images/black-icons.png); background-position: -39px -12px;}
.emp-report h1 i{position:absolute; top:-6px; left:-3px; height:27px; width:27px; background-image:url(../../images/black-icons.png); background-position: -65px -12px;}
.edit i{position:absolute;  margin-top: -10px; margin-left: -10px; /*top:-6px; left:-3px;*/ height:21px; width:22px; background-image:url(../../images/black-icons.png); background-position: -12px -46px; cursor:pointer;}
.addsales-heading{width:100%; padding:10px; color:#fff; text-align:center; background:#016cb1;}
.addsales-details{width:100%; margin:0px auto !important; padding:10px; text-align:center; background:#fff;}
.dataTables_wrapper{zoom:.9 !important;}
}

@media(min-width:320px) and (max-width:644px){
.pro-container{width:100%; margin:auto;}
.user{font-size:14px; color:#434242; margin:20px; text-align:center; }
/*.pro{width:20%; float:left;}*/
.pro-img {width:150px; height:150px; border-radius:79px; overflow:hidden; background:#ccc; margin:auto;}
.pro-img img{margin-left:19px; margin-top:11px;}
.addpro-form{width:100%; float:none; margin-bottom:20px;}
.addpro-form form{width:80%; margin:auto;}
.addpro-form form label{ color:#434242; display:inline-block; width:100%; vertical-align:top; text-align:left;}
.addpro-form form span{ color:#C60;}
.addpro-form form textarea{ height:100px;}
.pro-form{width:80%; /*margin-bottom:80px;*/ margin:auto auto 30px;}
.pro-form form img{display:none;}
.pro-form form label{ font-size:14px; color:#434242; display:inline-block; width:140px; vertical-align:top; /*margin-left:17px;*/}
.pro-form form span{font-size:14px; color:#C60;}
.pro-form form .button, .addsales-details .button{padding:10px 15px; width:100%; background:#016cb1; color:#fff; cursor:pointer; text-align:center; outline:none; border:0px; margin-top:10px;}
.pro-form form input, .pro-form form textarea, .addpro-form form input, .addpro-form form textarea{/*margin-left:15px;*/ padding:10px; outline:none; background:#ededed; border:0; width:100%; margin-bottom:10px;}
.pro-form form textarea{ height:150px;}
#TextBoxDiv1{margin-bottom:10px;}
.pro-form form .button{padding:10px 15px; /*margin-left:15px;*/ background:#016cb1; color:#fff; cursor:pointer; text-align:center; outline:none; border:0px; margin-bottom:20px;/* position:absolute;*/}
.pro-form form .browse{width:100%;}
.pro-form form .can-but, .addpro-form form .can-but, .export{padding:10px 15px; /*margin-left:13px;*/ background:#016cb1; color:#fff; cursor:pointer; text-align:center; outline:none; border:0px; width:100%; margin-bottom:10px;}
.pro-form form .up-but, .addpro-form form .up-but{padding:10px 15px; /*margin-left:13px;*/ background:#5ab75a; color:#fff; cursor:pointer; text-align:center; outline:none; border:0px; width:100%; margin-bottom:10px;}
.pro-form form .up-but, .addpro-form form .up-but, .in, .active-stat{padding:10px 15px; /*margin-left:5px;*/ background:#5ab75a; color:#fff; cursor:pointer; text-align:center; outline:none; border:0px;}
.pro-form form .up-but:hover, .addpro-form form .up-but:hover, .in:hover, .active-stat:hover{background:#4f9e4f;}
.pro-form form .can-but, .out, .suspend, .export{padding:10px 15px; /*margin-left:16px;*/ background:#016cb1; color:#fff; cursor:pointer; text-align:center; outline:none; border:0px;}
.pro-form form .can-but:hover, .addpro-form form .can-but:hover, .out:hover, .suspend:hover, .export:hover{background:#015890;}
.in, .out, .active-stat, .suspend{width:100px; /*margin-left:14px !important;*/}	
.attendance{width:100%; margin:auto;}
.sub-head{position:relative; width:100%; margin:32px auto 0;}
.sub-head > ul{display:block; /*width:500px; padding-top:44px;*/}
.sub-head > ul li.view, .sub-head > ul li.viewqnot, .sub-head > ul li.add, .sub-head > ul li.addq, .sub-head > ul li.prostat, .sub-head > ul li.empre, .sub-head > ul li.meet, .salesfile span{ list-style:none; position:relative; display:block; font-size:14px; width:100%;  color:#fff; padding:15px 15px 15px 35px;}
.sub-head > ul li.view, .sub-head > ul li.empre{background:#016cb1;}
.sub-head > ul li.add, .sub-head > ul li.viewqnot, .sub-head > ul li.addq, .sub-head > ul li.prostat, .sub-head > ul li.meet, .salesfile span{background:#5ab75a;}
.sub-head > ul li.view > i, .sub-head > ul li.viewqnot > i, .sub-head > ul li.add > i, .sub-head > ul li.addq > i, .sub-head > ul li.prostat > i, .sub-head > ul li.empre > i, .sub-head > ul li.meet > i, .salesfile span i{position:absolute; top:9px; left:8px; height:25px; width:25px; background-image:url(../../images/white-icons.png);}
.sub-head > ul li.view > i {background-position: -3px 3px;}
.sub-head > ul li.viewqnot > i{background-position: 31px 56px;}
.sub-head > ul li.add > i{ background-position: -32px 3px; height:26px;}
.sub-head > ul li.addq > i{ background-position: -32px -62px; height:26px;}
.sub-head > ul li.prostat > i{ background-position: -92px 29px; height:26px;}
.sub-head > ul li.meet > i{ background-position: 89px 87px; height:28px;}
.sub-head > ul li.empre > i{background-position: 29px 3px; height:28px;}
.salesfile span{padding:8px 15px 9px 35px !important; margin-left: 0px !important; margin-top:10px;}
.salesfile span i {background-position: 29px 24px;}
.salesfile a{text-decoration:none;}
.salesfile span:hover{background:#4f9e4f;}
.view-details div, .add-details div, .emp-report div{margin-top:20px; font-size:13px;/* width:100%;*/}
.view-details div form input, .view-details div form select, .emp-report div form select{font-family:Tahoma, geneva, "Open Sans Light"; background-color:#ededed; border:none; outline:none; font-size:13px; padding:7px;width:20%;}
.view-details div form select, .emp-report div form select{ margin-left:10px; height:35px; }
.view-details div form .submit, .emp-report div form .submit{margin-left:10px; width:140px; cursor:pointer; background:#016cb1; color:#fff; padding:10px;}
.view-details div form .submit:hover, .emp-report div form .submit:hover{background:#5ab75a;}
.view-details, .add-details, .emp-report{position:relative; width:100%; margin:auto; margin-top:40px;}
.view-details h1, .add-details h1, .emp-report h1{ font-family: "Open Sans Light", Tahoma, geneva; font-size:16px; color:#016cb1; padding-left:30px; font-weight:bold;}
.view-details h1 i{position:absolute; top:-6px; left:-3px; height:27px; width:27px; background-image:url(../../images/black-icons.png); background-position: -10px -12px;}
.add-details h1 i{position:absolute; top:-6px; left:-3px; height:27px; width:27px; background-image:url(../../images/black-icons.png); background-position: -39px -12px;}
.emp-report h1 i{position:absolute; top:-6px; left:-3px; height:27px; width:27px; background-image:url(../../images/black-icons.png); background-position: -65px -12px;}
.edit i{position:absolute; margin-top: -10px; margin-left: -10px; /*top:-6px; left:-3px;*/ height:21px; width:22px; background-image:url(../../images/black-icons.png); background-position: -12px -46px; cursor:pointer;}
.lablestyle{vertical-align: 4px;
    padding-left: 5px; padding-right:0;}
	.addsales-heading{width:100%; padding:10px; color:#fff; text-align:center; background:#016cb1;}
.addsales-details{width:100%; margin:0px auto !important; padding:10px; text-align:center; background:#fff;}
.dataTables_wrapper{zoom:.4 !important;}
}



body.login-bg .cont 
{ background: url(../../images/login-bg.jpg) center center;  background-size: cover; }
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #e3e0e0 inset;
}
.login_input-new {
    padding: 0;
    float: left;
    width: 100%;
    margin: 0px 0;
    border: none;
    font-size: 14px;
    height: 46px;
    padding-left: 50px;
    background: #e3e0e0; border-radius:10px; 
}
.login_input-row {
    position: relative;
}

.login_input-row {
    float: left;
    width: 100%;
    position: relative;
}

i.login-user-icon {
    position: absolute;
    left: 13px;
    top: 6px;
}

    i.login-user-icon img {
        width: 32px;
        filter: grayscale(100%);
       
    }

.login_input-row.login_input-frist {
    margin-top: 0px;
    margin-bottom: 20px;
}








    h4.welcome-login span {
        color: #5b5b5b;
    }

h4.welcome-login {
    margin: auto;
    line-height: 25px;
    width: 360px;
    padding: 60px 0 50px 0px;
    font-size: 30px;
    font-weight: normal;
    color: #666;
    text-align: center;
}
.login_input-row.login_input-checkbox-row input 
{ float: left; margin: 10px 10px 1px 0;  width: 20px;   height: 20px; }
.login_input-row.login_input-checkbox-row label 
{ 
    float: left;
    margin: 11px 0 0 0;
    font-size: 14px;
}


.login_input-submit-row {
    width: 100%;
    float: left;
    padding: 20px 0 10px 0;
}
.login_input-submit {
    padding: 14px 0px;
    width: 100%;
    background: #1c1e3a;
    border: none;
    font-size: 16px;
    color: #fff;
    border-radius: 100px;
}

input.login_input-new:focus {
    /*border-bottom: 2px #70b12a solid;*/
    outline: none;
}

.login-form {
   
    overflow: hidden;
    position: inherit !important;
    width: 360px;
    margin: 0px auto;
    border-radius: 0px;
    text-align: center;
   
   
}

    .login-form form {
        width: 100% !important;
        margin: 0px auto;
    }

.login_input-row.login_input-checkbox-row {
    margin: 10px 0 0 0;
}
.login_forgot-row {
    width: 100%;
    float: left;
    font-size: 14px;
    text-align: right;
    font-weight: 500;
    margin: 5px 0 15px 0;
}
input.back-to-login.login_input-submit 
{ margin-top: 20px; }
h4.welcome-login.forget-pass    
{ margin: 20px 0 40px 0; }

input.back-to-login.login_input-submit {
    margin-top: 20px;
    background: #5b6070;
}





.alert.alert-danger span {
    font-size: 14px; color:red; 
}


@media(min-width:1px) and (max-width:480px) {
    .login-form
    { width:90%; }
}




body.login.ensar-black-login .logo {
    padding: 25px 0 !important;
    background: #fff;
    border-bottom: 1px solid #e5e4e4;
    box-shadow: 0 1px 0 #fff; text-align:center; 
}

body.login.ensar-black-login.example1 {
    background: #f7f7f7;
}