*, *:before, *:after {
  box-sizing:border-box;
  margin:0;
  padding:0;
}
html, body {
	 font-size: 62.5%;
  height: 100%; background:#f7f7f7;
 /* overflow: hidden;*/
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #e3e0e0 inset;
}
.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:auto; border-bottom:1px solid #e5e4e4; box-shadow:0 1px 0 #fff; background:#ffffff; padding:10px;}
/* 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;}
.logo{ width:103px; height:117px; margin-top:4px; margin-bottom:4px; margin-left:34%;}
.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-form{   
	position:absolute;left:0;width:100%;height:50%;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; font-weight:bold;}
	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) {
	html{font-size:62.5%;}
.head-top{width:100%; margin:auto; padding:0;}
.logo{ width:103px; 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;}
.addsales-details{width:100%; margin:0px auto !important; padding:10px; text-align:center; background:#fff;}
/* Login */
 .login-form{   
	position:absolute;left:0;width:100%;height:50%;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:768px) and (max-width:1024px) {
    header {
        height: auto;      
    }

    .logo {
        width: 310px;
        height: auto;
        margin: auto;
    }

    .login-row, .pass-row {
        height: 5rem;
        padding-top: 1rem;
        width: 325px;
        margin: auto;
        margin-top: auto;
        background: #e3e0e0;
        border-radius: 10px;
        margin-top: 25px;
    }
    .container {
        margin: auto; /*width:400px;*/
        padding: 30px 0 0 0;
        font-size: 30px;
        font-weight: 800;
        color: #ef7301;
        text-align: center;
    }
}
    @media(min-width:480px) and (max-width:768px) {
        html, body {
            font-size: 40%;
            height: 100%;
        }

        .head-top {
            width: 100%;
            margin: auto;
            padding: 0;
        }

       
        .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 > 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: 166px;
            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;
        }
        /* 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) {
        .login-row, .pass-row {
            height: 5rem;
            padding-top: 1rem;
            width: 360px;
            margin: auto;
            margin-top: auto;
            background: #e3e0e0;
            border-radius: 10px;
            margin-top: 25px;
        }
        .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;
        }
    }

    .box-header {
        border: 0;
        background: #505050;
    }

        .box-header h4 {
            color: #fff;
            text-align: left;
            font-family: Segoe UI;
            font-weight: lighter;
            margin-left: 13px;
        }

    .x {
        color: #fff !important;
        font-weight: lighter !important;
        opacity: 1 !important;
    }

    .padding {
        padding: 0px;
    }

    .button {
        border: 1px solid #00a0e3;
        background: #fff;
        padding: 15px;
        color: #00a0e3;
    }

        .button:hover {
            background: #00a0e3;
            color: #fff;
        }