/*@font-face {
  font-family: 'ProximaNova-Light';
  src: url('../fonts/ProximaNova-Light.ttf');
  src: local("?"), url('../fonts/ProximaNova-Light.otf') format("opentype"), url('../fonts/ProximaNova-Light.ttf') format("truetype"); }

*/
* {
	margin: 0;
}

html, body{margin:0; padding:0; font-family:/*ProximaNova-Light,*/ Arial, Helvetica, tahoma, verdana; font-size:13px; color:#555; line-height:20px; height:100%;}

.cl{clear:both;}
.fl{float:left; margin:0; padding:0;}
.fr{float:left; margin:0; padding:0;}
a { text-decoration: none; color:#006eb7;  }
a:hover { text-decoration: none; color: #333;  }

p{margin:0; padding:2px 0; width:100%; float:left;}

h1{font-size:20px; font-weight:bold; margin:0 0 10px 0; padding:0; color:#fa5 831;}
h2{font-size:20px; font-weight:normal; margin:10px 0; padding:0; color:#e38600;}

.page-wrap {
  height:98%;
  /* equal to footer height */
	margin-bottom: 0; 
}

.page-wrap:after {
  content: "";
  display: block;
}
.ftPannel, .page-wrap:after {
  /* .push must be the same height as footer */
	height: auto; 
}

.ftPannel {
  width:100%; padding:10px 0; background:#e0e0e0; color:#666; text-align:center; font-size:12px;
}



/*.contener{width:100%; height:auto; margin:0; padding:0;}*/

.top-area{width:100%; height:auto; margin:0; padding:0; float:none; background:#666; position:relative; z-index:99; box-shadow:0 0 8px #999;}
.top{width:1000px; height:60px; margin:0 auto; padding:0;}
.logo{width:559px; height:52px; font-size:28px; font-weight:bold; background:url(../images/logo.png) no-repeat; position:absolute; color:#fff; margin:3px 0; padding:13px 0 0 118px;  float:left;}
/*.logo:hover{margin:0 0 0 20px;}*/
.top-right {width: auto; position:relative; z-index:999; float:right; background:url(../images/top-arrow.png) no-repeat right center; margin:10px 0 0; }

.logintop-area{width:100%; height:63px; margin:0; padding:0; float:none; background:#2f9ccc; position:relative; z-index:99; box-shadow:0 0 8px #999;}
.login-left-area{width:590px; height:355px; float:left;
           
            -moz-border-radius: 30px;
            -khtml-border-radius: 30px;
            -webkit-border-radius:30px;
             margin:30px 0 0 20px;}
.login-pannel{width:300px; height:auto; margin:30px 0 0; float:right;}
.login-pannel .login-bg{width:320px; height:auto; margin:0; background:#fcfcfc; box-shadow:0 0 10px #999; border-radius:5px; border:2px solid #fff; box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.15), 0px 0px 20px 5px rgba(165, 188, 223, 0.75) inset;}
.login-pannel .login-bg .header{background:#666; text-align:center; text-transform:uppercase; font-weight:bold; padding:10px; font-size:25px; color:#fff; border-radius:5px;}
.login-box{margin:50px auto; width:80%;}

.login-pannel .login-bg a{font-size:13px; color:#006eb7; margin:5px 0; float:left;}
.login-pannel .login-bg a:hover{color:#333;}


.login-box input[type="text"] {
	font-size: 15px;
	color:#666;
	padding:5px;
	border: 1px solid #ccc;
	background:#fcfcfc; 
	border-radius:5px; 
	width:95%;
	margin:0 0 20px;
	height:20px;
	outline:none;
}

.login-box input[type="password"] {
	font-size: 15px;
	color:#666;
	padding:5px;
	border: 1px solid #ccc;
	background:#fcfcfc; 
	border-radius:5px; 
	width:95%;
	margin:0 0 20px;
	height:20px;
	outline:none;
}

.login-box input[type="button"] {
	width:auto;
	height:35px;
	background:#666 url(../images/btn-bg.png) repeat-x;
	border:2px solid #999;
	color: #fff;
	font-size: 16px;
	padding:3px 20px;
	margin:10px 0 0;
	cursor: pointer;
	border-radius:5px;
	text-shadow: 2px 2px 3px #666;
	transition: all 0.20s ease-in-out; -webkit-transition: all 0.20s ease-in-out; -moz-transition: all 0.20s ease-in-out;
	}

.login-box input[type="button"]:hover{opacity:0.8}

.logout{text-align:center; margin:100px 0}

.user_box {  width: 250px; position:relative; z-index:999; float:right;}
.user_ctrl { width: 230px; padding: 10px 10px 0 10px ; float: right; background: #F6643C; display: none; }
.user_ctrl ul { margin: 0; padding: 0; }
.user_ctrl li { display: block; list-style: none } 
.user_ctrl li a { text-decoration: none; padding: 2px 5px; line-height: 20px; color: #fff; border-bottom: 1px dotted #CCC; width: 220px; float: left; }
.user_ctrl li a:hover { background: #f2232b; }

.user_drp { width: 250px; height: 35px; float: right; background:#f55834 url(../images/top_drop.png) -251px 0 no-repeat; border-radius:0 0 7px 7px; }
.user_up { width: 250px; height: 35px; float: right; background:#f55834 url(../images/top_drop.png) 0px 0 no-repeat; border-radius:0 0 7px 7px; }
.user_name { color: #fff;	font-weight: bold; text-shadow: 1px 1px #666; }
.user_name a { padding: 10px 15px; color: #fff; display: block; }


.nav-pannel{width:100%; height:40px; background-color:#2f9ccc; margin:0; z-index:99;/* float:left; position:fixed;*/}

.main-contener{width:1000px; height:auto; margin:0 auto; padding:20px 0 30px;}
.contener-action{ background:#fff; border-radius:5px; border:1px solid #ccc; box-shadow:0 0 5px #999; margin:0 0 330px;}
.contener{ background:#fff; border-radius:5px; border:1px solid #ccc; box-shadow:0 0 5px #999; margin:0 0 25px;}
.contener .header{background:#000;  border-top-left-radius: 5px;
    border-top-right-radius: 5px; margin:1px; font-size:20px; font-weight:bold; color:#fff; padding:6px;  text-align:center;}
.contener .header-bg{background-color:#a0a0a0; font-size:20px; font-weight:bold; color:#fff; padding:6px; border-radius:5px; margin:0 0 8px; text-align:center;}
.contener .header-sm{background-color:#a0a0a0; font-size:20px; font-weight:bold; color:#fff; padding:6px; border-radius:5px; margin:0 0 20px; text-align:center;}
.contener .content-area{width:96%; height:auto;  margin:0 2%; padding:0 0 10px;}
.contener-action .content-area-action{width:96%; height:auto; min-height:125px; margin:0 2%; padding:0 0 10px;}
.contener .content-area .top-form-pannel{width:45%; height:auto; margin:0 auto;}
.contener .content-area .top-form-pannel label{width:110px; height:auto; float:left; margin:5px 10px 0 0; font-size:15px; color:#000;}

.contener .content-area .edit-left-pannel{width:48%; height:auto; margin:0; padding:0 15px 0 0; float:left; border-right:1px solid #ccc; }
.contener .content-area .edit-left-pannel label{width:160px; height:auto; float:left; margin:5px 10px 0 0; font-size:13px; color:#000;}
.contener .content-area .edit-right-pannel{width:48%; height:auto; margin:0; float:right;}
.contener .content-area .edit-right-pannel-lt{width:48%; height:auto; margin:45px 0 0; float:right;}
.contener .content-area .edit-right-pannel-lt label{width:170px; height:auto; float:left; margin:5px 10px 0 0; font-size:15px; color:#000;}
.contener .content-area .edit-right-pannel label{width:170px; height:auto; float:left; margin:5px 10px 0 0; font-size:13px; color:#000;}
.contener .content-area .edit-right-pannel .Right{height:auto; float:left; margin:5px 10px 0 0; font-size:15px; color:#000;}
.contener .content-area .edit-right-pannel .Right table{width:auto;}
.contener .content-area .edit-right-pannel .Right table label{width:auto; float:left; margin:0 10px 0 5px;}
.contener .content-area .edit-right-pannel .Right table input[type="radio"]{width:auto; float:left; margin:3px 0 0;}


.contener .content-area .form-pannel{width:100%; height:auto; margin:0;}
.contener .content-area .form-pannel label{width:162px; height:auto; float:left; margin:5px 10px 0 0; font-size:13px; color:#000;}

.contener .content-area .form-pannel .question{width:300px; float:left;}

.contener .content-area .form-pannel .left-area{width:400px; height:auto; padding:8px; border:1px solid #ccc; border-radius:5px; float:left; margin:10px 0;}
.contener .content-area .form-pannel .right-area{width:400px; height:auto; padding:8px; border:1px solid #ccc; border-radius:5px; float:right; margin:10px 0;}
.contener .content-area .form-pannel .header{background:url(../images/header-bg.png) repeat-x; font-size:18px; font-weight:normal; color:#fcfcfc; padding:5px; border-radius:0; float:left; width:97%; margin:2px 0 8px;} 
.contener .content-area .form-pannel .content-part{width:100%; height:auto; padding:0 0 0 20px; float:left;}
.contener .content-area .form-pannel .photo-area{width:98.5%; height:auto; float:left; float:left; margin:10px 0; padding:5px;}
.contener .content-area .form-pannel .photo-area-static{width:98.5%; height:auto; float:left;  border:1px solid #ccc; border-radius:5px; float:left; margin:10px 0; padding:5px; background:#f5f1f2;}

/*changed content area for register page*/
.contener .content-register-area{width:96%; height:567px; min-height:400px; margin:0 2%; padding:0 0 10px;}
.contener .content-register-area.top-form-pannel{width:45%; height:auto; margin:0 auto;}
.contener .content-register-area.top-form-pannel label{width:110px; height:auto; float:left; margin:5px 10px 0 0; font-size:15px; color:#000;}

.contener .content-register-area.edit-left-pannel{width:48%; height:auto; margin:0; padding:0 10px 0 0; float:left; border-right:1px solid #ccc;}
.contener .content-register-area.edit-left-pannel label{width:136px; height:auto; float:left; margin:5px 10px 0 0; font-size:15px; color:#000;}
.contener .content-register-area.edit-right-pannel{width:48%; height:auto; margin:0; float:right;}
.contener .content-register-area.edit-right-pannel label{width:215px; height:auto; float:left; margin:5px 10px 0 0; font-size:15px; color:#000;}
.contener .content-register-area.edit-right-pannel .Right{height:auto; float:left; margin:5px 10px 0 0; font-size:15px; color:#000;}
.contener .content-register-area.edit-right-pannel .Right table{width:auto;}
.contener .content-register-area.edit-right-pannel .Right table label{width:auto; float:left; margin:0 10px 0 5px;}
.contener .content-register-area.edit-right-pannel .Right table input[type="radio"]{width:auto; float:left; margin:3px 0 0;}


.contener .content-register-area.form-pannel{width:100%; height:auto; margin:0;}
.contener .content-register-area.form-pannel label{width:170px; height:auto; float:left; margin:5px 10px 0 0; font-size:13px; color:#000;}

.contener .content-register-area.form-pannel .question{width:300px; float:left;}

.contener .content-register-area.form-pannel .left-area{width:400px; height:auto; padding:8px; border:1px solid #ccc; border-radius:5px; float:left; margin:10px 0;}
.contener .content-register-area.form-pannel .right-area{width:400px; height:auto; padding:8px; border:1px solid #ccc; border-radius:5px; float:right; margin:10px 0;}
.contener .content-register-area.form-pannel .header{background:url(../images/header-bg.png) repeat-x; font-size:18px; font-weight:normal; color:#fcfcfc; padding:5px; border-radius:0; float:left; width:97%; margin:2px 0 8px;} 
.contener .content-register-area.form-pannel .content-part{width:100%; height:auto; padding:0 0 0 20px; float:left;}
.contener .content-register-area.form-pannel .photo-area{width:98.5%; height:auto; float:left;  border:1px solid #ccc; border-radius:5px; float:left; margin:10px 0; padding:5px;}

.checkbox{margin:10px 0 0; float:left;}
.input-text {
	font-size: 15px;
	color:#666;
	padding:5px;
	border: 1px solid #ccc;
	background:#fbfbfb url(../images/text-box-bg.png) repeat-x; 
	border-radius:5px; 
	width:265px;
	margin:0 0 8px;
	height:22px;
	outline:none;
	float:left;
	 transition: all 0.20s ease-in-out; -webkit-transition: all 0.20s ease-in-out; -moz-transition: all 0.20s ease-in-out;
}

.input-text:focus {
box-shadow:0 0 5px #006eb7;
}


.input-text-static {
	font-size: 15px;
	color:#666;
	padding:5px;
	border: 1px solid #ccc;
	background:#f5f1f2; 
	border-radius:5px; 
	width:222px;
	margin:0 0 8px;
	height:22px;
	outline:none;
	float:left;
	 transition: all 0.20s ease-in-out; -webkit-transition: all 0.20s ease-in-out; -moz-transition: all 0.20s ease-in-out;
}

.input-text-static:focus {
box-shadow:0 0 5px #006eb7;
}






.input-select {
	font-size: 15px;
	color:#666;
	padding:5px;
	border: 1px solid #ccc;
	background:#fbfbfb url(../images/text-box-bg.png) repeat-x; 
	border-radius:5px; 
	width:278px;
	margin:0px 0 8px;
	height:32px;
	outline:none;
	float:left;
	transition: all 0.20s ease-in-out; -webkit-transition: all 0.20s ease-in-out; -moz-transition: all 0.20s ease-in-out;
}

.input-select:focus {
box-shadow:0 0 5px #006eb7;
}

.input-select-sml {
	font-size: 15px;
	color:#666;
	padding:5px;
	border: 1px solid #ccc;
	background:#fbfbfb url(../images/text-box-bg.png) repeat-x; 
	border-radius:5px; 
	width:230px;
	margin:0 0 5px;
	height:32px;
	outline:none;
	float:left;
	transition: all 0.20s ease-in-out; -webkit-transition: all 0.20s ease-in-out; -moz-transition: all 0.20s ease-in-out;
}

.input-select-sml:focus {
box-shadow:0 0 5px #006eb7;
}

.input-select-sml1 {
	font-size: 15px;
	color:#666;
	padding:5px;
	border: 1px solid #ccc;
	background:#fbfbfb url(../images/text-box-bg.png) repeat-x; 
	border-radius:5px; 
	width:130px;
	margin:0 0 5px;
	height:32px;
	outline:none;
	float:left;
	transition: all 0.20s ease-in-out; -webkit-transition: all 0.20s ease-in-out; -moz-transition: all 0.20s ease-in-out;
}

.input-select-sml1:focus {
box-shadow:0 0 5px #006eb7;
}

.input-textarea {
	font-size: 15px;
	color:#666;
	padding:5px;
	border: 1px solid #ccc;
	background:#fdfdfd url(../images/text-box-bg.png) repeat-x bottom; 
	border-radius:5px; 
	width:266px;
	margin:0 0 8px;
	height:60px;
	outline:none;
	resize:none;
	float:left;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	transition: all 0.20s ease-in-out; -webkit-transition: all 0.20s ease-in-out; -moz-transition: all 0.20s ease-in-out;
}

.input-textarea:focus {
box-shadow:0 0 5px #006eb7;
color:#333;
}

.remark-input-textarea {
	font-size: 15px;
	color:#666;
	padding:5px;
	border: 1px solid #ccc;
	background:#fdfdfd url(../images/text-box-bg.png) repeat-x bottom; 
	border-radius:5px; 
	width:222px;
	margin:0 36px 5px;
	height:77px;
	outline:none;
	resize:none;
	float:left;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	transition: all 0.20s ease-in-out; -webkit-transition: all 0.20s ease-in-out; -moz-transition: all 0.20s ease-in-out;
}

.remarks-input-textarea {
	font-size: 15px;
	color:#666;
	padding:5px;
	border: 1px solid #ccc;
	background:#fdfdfd url(../images/text-box-bg.png) repeat-x bottom; 
	border-radius:5px; 
	width:732px;
    margin-left: 61px;
    padding:4px 0 22px 10px;
	outline:none;
	resize:none;
	float:left;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	transition: all 0.20s ease-in-out; -webkit-transition: all 0.20s ease-in-out; -moz-transition: all 0.20s ease-in-out;
}
#rdb_gender{width:200px; float:left;}
#rdb_gender label{width:auto;}
#rdb_gender input[type='radio']{margin:8px 5px 0 0; float:left;}

#ContentPlaceHolder1_rdb_gender {width:200px; float:left;}
#ContentPlaceHolder1_rdb_gender label{width:auto;}
#ContentPlaceHolder1_rdb_gender input[type='radio']{margin:8px 5px 0 0; float:left;}

.remark-input-textarea:focus {
box-shadow:0 0 5px #006eb7;
color:#333;
}
.dob-sml {
	width:40px !important;
	margin:0 5px 5px 0  !important;
}

.dob-sml:focus {
box-shadow:0 0 5px #006eb7;
}
.contener .content-area .form-pannel .dob-big {
	width:130px !important;
	margin:0 5px 5px 0  !important;
}
.dob-big:focus {
box-shadow:0 0 5px #006eb7;
}


.input-btn-add{width:auto; height:auto; padding:5px 15px; margin:0 0 10px 445px; background:#2f9ccc; border-radius:5px; font-size:16px; color:#fff; border:2px solid #005988; cursor:pointer;}
.input-btn-add:hover{opacity:0.8}



.button-part{width:150px; height:auto; margin:0 auto;}
.input-btn{width:auto; height:auto; padding:5px 15px; margin:32px 0 10px; background:#2f9ccc; border-radius:5px; font-size:16px; color:#fff; border:2px solid #005988; cursor:pointer;}
.input-btn:hover{opacity:0.8}

.input-GObtn{width:auto; height:auto; padding:6px 10px; margin:0 0 10px 10px; background:url(../images/btn-bg.png) repeat-x; border-radius:5px; font-size:16px; color:#fff; border:none; cursor:pointer;}
.input-GObtn:hover{opacity:0.8}

.dob-icon{width:20px; height:20px; float:left; margin: 5px 0 0;}

/*-----------------------  Dashboard CSS ----------------------*/
.dashboard{width:1000px; margin:0 auto;}
.dashboard-contener{ background:#fcfcfc; border-radius:5px; border:1px solid #ccc; margin:20px 0 10px; padding:10px;}
.dashboard-contener label{width:30px; height:auto; float:left; margin:5px 10px 0 0; font-size:13px; color:#000; font-weight:bold;}
.dashboard-contener input[type=text] {
	font-size: 15px;
	color:#666;
	padding:3px;
	border: 1px solid #b7b7b7;
	background:#fdfdfd; 
	border-radius:5px; 
	width:150px;
	margin:0 20px 5px 0;
	height:18px;
	outline:none;
	float:left;
	 transition: all 0.20s ease-in-out; -webkit-transition: all 0.20s ease-in-out; -moz-transition: all 0.20s ease-in-out;
}

.dashboard-contener input[type=text]:focus {
box-shadow:0 0 10px #ff6653;
}

.dashboard-contener select {
	font-size: 15px;
	color:#666;
	padding:3px;
	border: 1px solid #b7b7b7;
	background:#fdfdfd; 
	border-radius:5px; 
	width:95px;
	margin:0 5px;
	height:25px;
	outline:none;
	float:left;
	transition: all 0.20s ease-in-out; -webkit-transition: all 0.20s ease-in-out; -moz-transition: all 0.20s ease-in-out;
}

.dashboard-contener select:focus {
box-shadow:0 0 10px #ff6653;
} 


.dashobard_box1
{
border:1px solid #ccc;
border-bottom: 1px solid #DEDEDE;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
height:auto;
 width: 31.623931624%;
 margin:7px;
 padding:0;
 float:left;
}

.dashobard_box1 .header{
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(0,0,0,0.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,0.1)));
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(0,0,0,0.1) 100%);
background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(0,0,0,0.1) 100%);
background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(0,0,0,0.1) 100%);
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(0,0,0,0.1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#1a000000',GradientType=0 );
    height:33px; border-radius:3px; font-size:25px; font-size:13px; font-weight:bold; margin:0; padding:2px 0 4px 1px; color:#333; cursor:pointer;}


.dashobard_box1 .icon{width:35px; height:35px; padding:0 5px 0 0; float:left; margin:-10px 0 0;}
.dashobard_box1 .collapsicon{width:16px; height:16px; float:right; margin:10px 5px 5px;}

.select-lable-sml{width:92px; float:left; margin: 13px 0 0;}

.dashboard-box-content{
padding:2px;
font-size:12px;
}

.dashboard-box-content .inner-content{
height:auto;
}

/*---------------------------------End Dashboard CSS -----------------------*/


.SearchDetailTable{width:100%; border-collapse:collapse; margin:10px 0 10px;}
.SearchDetailTable td{padding:5px;}
.SearchDetailTable tr{background: #eee;}
.SearchDetailTable tr:nth-child(odd){background: #eee;}
.SearchDetailTable tr:nth-child(even){background: #fcfcfc;}
.SearchDetailTableHead{color:#fff; font-size:15px; font-weight:bold; background:#2f9ccc !important; line-height:30px;}

.photograph-box{width:auto; height:auto; padding:2%; margin:1% 2.5%; border:1px solid #fff; float:left; box-shadow:0 0 5px #ccc; border-radius:5px; color:#333; font-size:13px; text-align:center;}
.photograph-box img{width:113px; height:113px; margin:5px; padding:2px; box-shadow:0 0 5px #ccc;}

.manage-user-head{background:#ec1c24;  color:#fff; padding:0 5px; border-color:#ccc; font-weight:bold;}

/* ------------- Reoprt CSS -----------------*/

.ReoprtList-Pannel{width:500px; height:auto; margin:0 auto; padding:auto;}

.ReoprtList
{

	height:auto;
	width:600px;
	float:left;
	padding:5px 0 5px 0;
	margin:0 0 0 100px;

}

.ReoprtList ul
{
	height:auto;
	width:600px;
	margin:0;
	padding:0;
}

.ReoprtList li
{
	height:auto;
	width:595px;
	margin:0 0 5px;
	padding:0;
	float:left;
	list-style-type:none;
	border-bottom:1px solid #ccc;
	border-bottom-style:dashed;
	background:url("../images/blk-arrow.png") no-repeat left top;
}

.ReoprtList a
{
	height:auto;
	width:570px;
	margin:0;
	padding:5px 0 5px 20px;
	float:left;
	display:block;
	font-family:arial, verdana;
	font-size:13px;
	color:#213000;
	text-decoration:none;
}

.ReoprtList a:hover
{
	width:570px;
	color:#006eb7;
	text-decoration:none;
	background:url("../images/blue-arrow.png") no-repeat left top;

}


.userProfile{width:700px; height:auto;  padding:0px 0px 10px; margin:20px auto; border:1px solid #ccc; border-radius:5px;}
.userProfile .head 
{
	font: bold 18px "Arial";
	color: #006eb7;
	text-align:left;	
	padding:8px 0;
	margin: 0 0 20px 10px;
}

.userProfile img{width:130px; padding:5px; border:1px solid #ccc; float:left; margin:17px 35px 0 10px; }

.userProfile-Right{width:500px; height:auto; float:left;}
.userProfile-Right label{width:180px; height:auto; float:left; margin:5px 10px 0 0; font-size:13px; color:#000;}

.changePass{width:400px; height:auto; background:#fbfbfb; border:1px solid #ccc; border-radius:5px; margin:50px auto; padding:0; box-shadow:0 0 8px #999;}
.changePass .head 
{
    width:400px;
    border-radius:5px;
	font: bold 18px "Arial";
	color: #333;
	text-align:center;	
	background:#d1d1d1;
	padding:8px 0;
}


#calendar {
		width: 100%;
		margin:0px auto;
	}

.calender-top{width:100%; padding:5px; margin:0 0 30px; box-shadow:0 0 5px #ccc; border-radius:5px; float:left; background:#efefef;}
.calender-top label{width:75px; height:auto; float:left; margin:5px 10px 0 50px; font-size:15px; color:#000;}
.calender-Area{width:100%; padding:5px; margin:0 0 30px; box-shadow:0 0 8px #999; border-radius:5px; float:left; background:#fff;}

@media only screen and ( min-width: 768px) and ( max-width: 980px ) {
.top{width: 100%; height:60px; margin:0 auto; padding:0;}
.main-contener{width:100%; height:auto; margin:0 auto;padding:120px 0 50px 0;}
.login-left-area{width:380px; height:300px; float:left; border:1px solid #ccc; margin:40px 30px 0 10px;}
.login-pannel{width:300px; height:auto; margin:40px 20px 0 0; float:right;}
.contener .content-area{width:99%; height:auto; margin:0 1%; padding:0 0 10px;}
.contener .content-area .top-form-pannel{width:100%; height:auto; margin:0 auto;}
.contener .content-area .form-pannel .left-area{width:340px; height:auto; padding:8px; border:1px solid #ccc; border-radius:5px; float:left; margin:10px 0;}
.contener .content-area .form-pannel .right-area{width:340px; height:auto; padding:8px; border:1px solid #ccc; border-radius:5px; float:left; margin:10px 0 0 1%;}
.contener .content-area .form-pannel .content-part{width:95%; height:auto; padding:0 0 0 10px; float:left;}
.contener .content-area .top-form-pannel label{width:120px; height:auto; float:left; margin:5px 10px 0 80px; font-size:15px; color:#000;}
.calender-Area{width:98%; padding:5px; margin:0 0 30px; box-shadow:0 0 8px #999; border-radius:5px; float:left; background:#fff;}
}

@media only screen and ( max-width: 640px ) { 
.top{width: 100% !important; height:60px; margin:0 auto; padding:0;}
.top-right {width: auto; position:relative; z-index:999; float:right; background:none; }

.main-contener{width:100%; height:auto; margin:0 auto; padding:120px 0 50px 0;}
.login-left-area{width:280px; height:250px; float:left; border:1px solid #ccc; margin:40px 20px 0 10px;}
.login-pannel{width:280px; height:auto; margin:40px 10px 0 0; float:left;}
.contener .content-area{width:99%; height:auto; margin:0 1%; padding:0 0 10px;}
.contener .content-area .top-form-pannel{width:100%; height:auto; margin:0 auto;}
.contener .content-area .form-pannel .left-area{width:280px; height:auto; padding:8px; border:1px solid #ccc; border-radius:5px; float:left; margin:10px 0;}
.contener .content-area .form-pannel .right-area{width:280px; height:auto; padding:8px; border:1px solid #ccc; border-radius:5px; float:left; margin:10px 0 0 1%;}
.contener .content-area .form-pannel .content-part{width:95%; height:auto; padding:0 0 0 10px; float:left;}
.contener .content-area .top-form-pannel label{width:160px; height:auto; float:left; margin:5px 10px 0 80px; font-size:15px; color:#000;}

.contener .content-area .edit-left-pannel{width:85%; height:auto; margin:0; padding:0 0 0 10px; float:left; border:none;}
.contener .content-area .edit-left-pannel label{width:210px; height:auto; float:left; margin:5px 10px 0 0; font-size:15px; color:#000;}
.contener .content-area .edit-right-pannel{width:85%; height:auto; margin:0; padding:0 0 0 10px; float:left;}
.contener .content-area .edit-right-pannel label{width:210px; height:auto; float:left; margin:5px 10px 0 0; font-size:15px; color:#000;}


.calender-top{width:97%; padding:5px; margin:0 0 30px; box-shadow:0 0 5px #ccc; border-radius:5px; float:left; background:#efefef;}
.calender-Area{width:97%; padding:5px; margin:0 0 30px; box-shadow:0 0 8px #999; border-radius:5px; float:left; background:#fff;}

.ReoprtList
{

	height:auto;
	width:98%;
	float:left;
	padding:5px 0 5px 0;
	margin:0 0 0 2%;

}

.ReoprtList ul
{
	height:auto;
	width:100%;
	margin:0;
	padding:0;
}

.ReoprtList li
{
	height:auto;
	width:98%;
	margin:0 0 2%;
	padding:0;
	float:left;
	list-style-type:none;
	border-bottom:1px solid #ccc;
	border-bottom-style:dashed;
	background:url("../images/red-arrow.png") no-repeat left top;
}

.ReoprtList a
{
	height:auto;
	width:98%;
	margin:0;
	padding:5px 0 5px 15px;
	float:left;
	display:block;
	font-family:arial, verdana;
	font-size:13px;
	color:#213000;
	text-decoration:none;
}

.ReoprtList a:hover
{
	width:98%;
	color:#ec1c24;
	text-decoration:none;
	background:url("../images/blk-arrow.png") no-repeat left top;

}
.userProfile{width:100%; height:auto;  padding:0px 0px 10px; margin:20px auto; background:#fcfcfc; border:1px solid #ccc; border-radius:5px; box-shadow:0 0 8px #999;}
.userProfile img{width:130px; padding:5px; border:1px solid #ccc; float:left; margin:0 10px 0 0;}
.userProfile-Right{width:450px; height:auto; float:left;}
.userProfile-Right label{width:180px; height:auto; float:left; margin:5px 10px 0 0; font-size:13px; color:#000;}

.changePass{width:99%; height:300px; background:#fbfbfb; border:1px solid #ccc; border-radius:5px; margin:50px auto; padding:0; box-shadow:0 0 8px #999;}
.changePass .head 
{
    width:100%;
    border-radius:5px;
	font: bold 18px "Arial";
	color: #333;
	text-align:center;	
	background:#d1d1d1;
	padding:8px 0;
}

}


@media only screen and ( min-width: 320px) and ( max-width: 480px ) { 
.top{width: 99% !important; height:60px; margin:0 auto; padding:0;}
.main-contener{width:99%; height:auto; margin:0 auto; padding:155px 0 50px 0;}
.login-left-area{display:none !important;}
.login-pannel{width:300px; height:auto; margin:150px 10px; float:left;}
.contener .content-area{width:95%; height:auto; margin:0 1%; padding:0 0 10px;}
.contener .content-area .top-form-pannel{width:100%; height:auto; margin:0 auto;}
.contener .content-area .form-pannel .left-area{width:99%; height:auto; padding:8px; border:1px solid #ccc; border-radius:5px; float:left; margin:10px 0;}
.contener .content-area .form-pannel .right-area{width:99%; height:auto; padding:8px; border:1px solid #ccc; border-radius:5px; float:left; margin:10px 0 0 ;}
.contener .content-area .top-form-pannel label{width:35%; height:auto; float:left; margin:5px 0; font-size:15px; color:#000;}

.userProfile{width:100%; height:auto;  padding:0px 0px 10px; margin:20px auto; background:#fcfcfc; border:1px solid #ccc; border-radius:5px; box-shadow:0 0 8px #999;}
.userProfile img{display:none;}
.userProfile-Right{width:100%; height:auto; float:left;}
.userProfile-Right label{width:98%; height:auto; float:left; margin:5px 10px 0 0; font-size:13px; color:#000;}

.user_box {  width:98.5%; position:absolute; z-index:9999; float:left; margin:60px 0 0;}
.user_ctrl { width: 94%; padding: 10px 10px 0 10px ; float: left; background: #F6643C; display: none; }
.user_ctrl li a { text-decoration: none; padding:3px 5px; line-height: 20px; color: #fff; border-bottom: 1px dotted #CCC; width: 97%; float: left; }
.user_drp { width:100%; height: 35px; float: left; background:#f55834 url(../images/down-arrow.png)  no-repeat right !important; border-radius:0 0 7px 7px; }
.user_up { width:100%; height: 35px; float: left; background:#f55834 url(../images/up-arrow.png) no-repeat right  !important; border-radius:0 0 7px 7px; }

.nav-pannel{width:100%; height:46px; background:url(../images/nav-bg.png) repeat-x; margin:40px 0 0; z-index:99;/* float:left; position:fixed;*/}

}

@media only screen and ( max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi)  { 

}



.edit-left-lable-box { width:100%; float:left; 
}
.photo-area-ft-box { width:98.5%; height:auto; float:left;  border:1px solid #ccc; border-radius:5px; float:left; margin:10px 0; padding:5px;
}

.photo-fincial-ft-box { width:98.5%; height:auto; float:left;   padding:5px;
}
.photo-fincial-ft-value{width:100%; height:auto; margin:0; padding:0 10px 0 0; float:left; }
.photo-fincial-ft-value label {
    color: #000;
    float: left;
    font-size: 15px;
    height: auto;
    margin: 5px 10px 0 0;
    width: 156px;
}
.remark-text { float:left; width:11%;
}
.remark-text label{width:144px; height:auto; float:left; margin:5px 10px 0 0; font-size:15px; color:#000;}
.edit-left-purchase{width:48%; height:auto; margin:0; padding:0 15px 0 0; float:left; border-right:1px solid #ccc; }
.edit-left-purchase label{width:56px; height:auto; float:left; margin:5px 10px 0 63px; font-size:16px; color:#000;  font-weight:bold;}
.edit-left-stock{width:48%; height:auto; margin:0; padding:0 15px 0 0; float:left; border-right:1px solid #ccc; }
.edit-right-stock{width:48%; height:auto; margin:0; padding:0 0px 0 0; float:left; margin-left:18px; }
.edit-right-purchase{width:48%; height:auto; margin:0; padding:0 0px 0 0; float:left; margin-left:18px; }
.edit-right-purchase label{width:56px; height:auto; float:left; margin:5px 10px 0 63px; font-size:16px; color:#000;  font-weight:bold;}

.edit-financial{width:48%; height:auto; margin:0; padding:0 0px 0 0; float:right; margin-left:18px; }
.edit-financial label{width:56px; height:auto; float:left; margin:5px 10px 0 63px; font-size:16px; color:#000;  font-weight:bold;}

.input-purchase {
	font-size: 15px;
	color:#666;
	padding:5px;
	border: 1px solid #ccc;
	background:#fbfbfb url(../images/text-box-bg.png) repeat-x; 
	border-radius:5px; 
	width:180px;
	margin:5px 0 0px;
	height:21px;
	outline:none;
	float:left;
	 transition: all 0.20s ease-in-out; -webkit-transition: all 0.20s ease-in-out; -moz-transition: all 0.20s ease-in-out;
}

.input-purchase:focus {
box-shadow:0 0 5px #006eb7;
}
.purchase-bank-text { float:left; width:185px;
}
.left-purchase-box { width:100%; float:left; margin-bottom:3px;
}
.left-purchase-pt{width:60px; height:auto; float:left; margin:36px 10px 0 0; font-size:15px; color:#000; text-align:center;}
.left-purchase-pd{width:60px; height:auto; float:left; margin:10px 10px 0 0; font-size:15px; color:#000; text-align:center;}
.input-purchase-slt {
	font-size: 15px;
	color:#666;
	padding:5px;
	border: 1px solid #ccc;
	background:#fbfbfb url(../images/text-box-bg.png) repeat-x; 
	border-radius:5px; 
	width:180px;
	margin:4px 0 6px;
	height:34px;
	outline:none;
	float:left;
	transition: all 0.20s ease-in-out; -webkit-transition: all 0.20s ease-in-out; -moz-transition: all 0.20s ease-in-out;
}

.input-purchase-slt:focus {
box-shadow:0 0 5px #006eb7;
}
.edit-left-pannel-financial{width:48%; height:auto; margin:16px 0 0 0; padding:0 10px 0 0; float:left; border-right:1px solid #ccc; min-height:150px; }
.edit-left-pannel-financial label{width:156px; height:auto; float:left; margin:5px 10px 0 0; font-size:15px; color:#000;}

.purchase-header-bg{background-color:#a0a0a0; font-size:20px; font-weight:bold; color:#fff; padding:6px; border-radius:5px; margin:0 0 8px; text-align:center;}
/*-----------------------------tab----------*/


/*header css start*/
#tabs {
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#tabs li {
  float: left;
  margin: 0 .5em 0 0;
}

#tabs a {
  position: relative;
  background: #ddd;
  background-image: linear-gradient(to bottom, #fff, #ddd);  
  padding: .7em 3.5em;
  float: left;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  border-radius: 5px 0 0 0;
  box-shadow: 0 2px 2px rgba(0,0,0,.4);
}

#tabs a:hover,
#tabs a:hover::after,
#tabs a:focus,
#tabs a:focus::after {
  background: #fff;
}

#tabs a:focus {
  outline: 0;
}

#tabs a::after {
  content:'';
  position:absolute;
  z-index: 1;
  top: 0;
  right: -.5em;  
  bottom: 0;
  width: 1em;
  background: #ddd;
  background-image: linear-gradient(to bottom, #fff, #ddd);  
  box-shadow: 2px 2px 2px rgba(0,0,0,.4);
  transform: skew(10deg);
  border-radius: 0 5px 0 0;  
}

#tabs #current a,
#tabs #current a::after {
  background: #fff;
  z-index: 3;
}

#content {
  background: #fff;
  padding: 2em;
  height: 220px;
  position: relative;
  z-index: 2; 
  border-radius: 0 5px 5px 5px;
  box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}