@charset "utf-8";
/* CSS Document */

body{background:url(../images/body-bg.jpg) repeat; padding:0px; margin:0px; font-family:Calibri; font-size:14px; color:#454545;}
a{text-decoration:underline; color:#878787;}
a:hover{text-decoration:none;}
#header{background:url(../images/header-bg.jpg) repeat; width:100%; float:left;}
.header-content{width:96%; margin:0 auto; font-size:30px; padding:10px 2%; font-weight:bold;background:url(../images/banner-1.jpg) repeat; border-bottom:3px solid #09435B; }
.header-content img{vertical-align:middle;}
.logo{color:#09435B; font-size:32px;text-shadow:0px 1px 1px #000; float:left; }
.product-name{float:right;color:#09435B; font-size:24px;text-shadow:0px 1px 1px #000; text-align:right;}
.login-content{width:400px; margin:0px auto; clear:both; padding-top:70px;}
.form-box{-moz-box-shadow: 0 0 5px #333; -webkit-box-shadow: 0 0 5px #333; box-shadow: 0 0 5px #333; background:#D0EFF4;-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; clear:both; border:2px solid #eaeaea; padding:15px 20px;text-shadow:0px 1px 1px #fff}


.shaddow{background:url(../images/shaddow.png) no-repeat; width:450px; height:59px; margin:0 auto;}
/*.textbox{background:url(../images/textbox-bg.jpg) repeat-x #FFFFFF; width:230px; border:1px solid #b9b9b9; padding:4px 4px; }*/

.textbox{font-size:12px; color:#454545; border:1px solid #b9b9b9; padding:5px 5px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin-bottom:5px; width:150px;}
.textbox-title{font-size:12px; color:#454545; border:1px solid #b9b9b9; padding:5px 5px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin-bottom:5px; width:350px;}
.textbox-lenth{font-size:12px; color:#454545; border:1px solid #b9b9b9; padding:5px 5px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin-bottom:5px; width:700px;}

.textbox-calendar{font-size:12px; color:#454545; border:1px solid #b9b9b9; padding:5px 5px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin-bottom:5px; width:80px;}
.textbox-small{font-size:12px; color:#454545; border:1px solid #b9b9b9; padding:5px 5px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin-bottom:5px; width:30px;}
.textbox-big-small{font-size:12px; color:#454545; border:1px solid #b9b9b9; padding:5px 5px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin-bottom:5px; width:50px;}
.textbox-date{font-size:12px; color:#454545; border:1px solid #b9b9b9; padding:5px 5px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin-bottom:5px; width:100px;}
.description-box{font-size:12px; color:#454545; border:1px solid #b9b9b9; padding:5px 5px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin-bottom:5px; width:150px;}

.textbox-long{font-size:12px; color:#454545; border:1px solid #b9b9b9; padding:5px 5px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin-bottom:5px; width:250px;}


.short-description-box{font-size:12px; color:#454545; border:1px solid #b9b9b9; padding:5px 5px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin-bottom:5px; width:350px; height:150px;}

.selectbox{font-size:12px; color:#454545; border:1px solid #b9b9b9; padding:5px 5px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin-bottom:5px; width:150px;}

/*.button{ background-color:#09435B; padding:0px 0px; border:1px solid #1b1b1b; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color:#FFFFFF; text-shadow:0px 1px 1px #000; font-size:14px; font-weight:bold; cursor:pointer;}*/

.button{background-color:#09435B; padding:2px 8px; border:1px solid #1b1b1b; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color:#FFFFFF; text-shadow:0px 1px 1px #000; font-weight:bold; cursor:pointer;}


.save-button{background:url(../images/button-bg.jpg) repeat-x; padding:2px 8px; border:1px solid #1b1b1b; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color:#FFFFFF; text-shadow:0px 1px 1px #000; font-weight:bold; cursor:pointer;}

.add-button{background:url(../images/button-bg.jpg) repeat-x; padding:2px 8px; border:1px solid #1b1b1b; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color:#FFFFFF; text-shadow:0px 1px 1px #000; font-weight:bold; cursor:pointer;}

.edit-button{background:url(../images/button-bg.jpg) repeat-x; padding:2px 8px; border:1px solid #1b1b1b; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color:#FFFFFF; text-shadow:0px 1px 1px #000; font-weight:bold; cursor:pointer;}

.reset-button{background:url(../images/button-bg.jpg) repeat-x; padding:2px 8px; border:1px solid #1b1b1b; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color:#FFFFFF; text-shadow:0px 1px 1px #000; font-weight:bold; cursor:pointer;}

.back-button{background:url(../images/button-bg.jpg) repeat-x; padding:2px 8px; border:1px solid #1b1b1b; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color:#FFFFFF; text-shadow:0px 1px 1px #000; font-weight:bold; cursor:pointer;}

.search-button{background:url(../images/button-bg.jpg) repeat-x; padding:2px 8px; border:1px solid #1b1b1b; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color:#FFFFFF; text-shadow:0px 1px 1px #000; font-weight:bold; cursor:pointer;}

.display-all-button{background:url(../images/button-bg.jpg) repeat-x; padding:2px 8px; border:1px solid #1b1b1b; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color:#FFFFFF; text-shadow:0px 1px 1px #000; font-weight:bold; cursor:pointer;}

.delete-button{background:url(../images/button-bg.jpg) repeat-x; padding:2px 8px; border:1px solid #1b1b1b; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color:#FFFFFF; text-shadow:0px 1px 1px #000; font-weight:bold; cursor:pointer;}


.signin{float:right;}
.div-bg{background:url(../images/div-bg.jpg) repeat-x; height:2px; margin:5px 0;}
h2{padding:0px; margin:0px; font-weight:normal;}
h2 img{vertical-align:middle;}
#footer{background:url(../images/header-bg.jpg) repeat; width:100%; float:left;}
.footer-content{width:98%; padding:10px 1%; color:#09435B; float:left;font-weight:bold;background:url(../images/banner-1.jpg) repeat;  border-top:3px solid #09435B;}
.required{color:#cc0000; padding-left:2px;}
.left{float:left;}
.right{float:right;}

#content{width:100%; float:left; clear:both; padding:10px 0px;}
#left-panel{width:23%; float:left; margin-left:2%;}
#right-content{float:left; width:71%; margin-left:1%;}
#content .right-content{float:left; width:75%; margin: 0 12%;}

#accordion {
	list-style: none;
	padding:8px 8px 0px 8px;
	width: 90%;
	background:#c2c2c2;
	 -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
	 border:1px solid #d6d6d6;
	 margin:0;
}
#accordion div {
	display: block;
	background: #BEF3FA;
	color:#000000;
	font-weight:bold;
	margin: 1px;
	cursor: pointer;
	padding: 7px 10px;
	list-style: circle;
	/*-moz-box-shadow: 0 0 2px #979797; -webkit-box-shadow: 0 0 2px #979797; box-shadow: 0 0 2px #979797;
	text-shadow:0px 1px 1px #fff;*/
}
#accordion ul {
	list-style: none;
	padding: 0 0 0 0;
	margin:0px;
}
#accordion ul{
	display: none;
	margin-bottom:10px;
}
#accordion li{
	margin-bottom:10px;
}
#accordion ul li {
	font-weight: normal;
	cursor: auto;
	background-color: #f7f7f7;
	padding: 7px 0 7px 10px;
	margin-bottom:0px;
	border-bottom:1px solid #c8c8c8;
}
#accordion a {
	text-decoration: none;
	color:#555555;
	text-shadow:0px 1px 1px #fff;
}
#accordion a:hover {
	text-decoration: underline;
}

.inner-formbox{width:96%; margin:20px auto;}
.search-box{width:98%; margin:10px auto; padding:8px 1%;}
.search-textbox{width:200px; padding:5px 8px;}
.welcome-box{width:98%; margin:1px auto 10px auto; padding:8px 1%; font-size:18px;}
.black{color:#000000;}
.welcome-rightlink{float:right;}
.welcome-rightlink img{vertical-align:middle;}
.welcome-rightlink a{text-decoration:none; color:#454545;}
.welcome-rightlink a:hover{text-decoration:none; color:#878787;}

#mytable {
	border-collapse: collapse;
	width: 100%;
	margin: 10px 0;
	font-size: 1.1em;
	border: 1px solid #c8c8c8;
}

#mytable th {
	background: url(../images/tablehead-bg.jpg) repeat-x #cdcdcd;
	color: #333;
	font-weight: bold;
	padding: 7px 11px;
	text-align: left;
	line-height: 1.2;
}

.scroll_top thead tr th{
	background: url(../images/tablehead-bg.jpg) repeat-x #cdcdcd;
	color: #333;
	font-weight: bold;
	padding: 7px 11px !important;
	text-align: left;
	line-height: 1.2;
}
.scroll_top{
	border-collapse: collapse !important;
}
.scroll_top thead{
	background:#F6F6F6;
}
.mytable1 th {
	background:#4585BA !important;
	color: #fff !important;
	font-weight: none !important;
	padding: 7px 11px;
	text-align: left;
	line-height: 1.2;
	text-shadow: none;
}

#mytable td {
	padding: 6px 11px;
	border-bottom: 1px solid #c8c8c8;
	vertical-align: top;
}

#mytable td * {
	padding: 6px 11px;
}
.mytable1 td a{
	color:#0949AD;
}
.attendance_pop_up .ui-dialog-titlebar{
background:#0D387B;
color:#fff;
}
.attendance_pop_up .ui-widget-header .ui-icon{
	background-image: url(../images/ui-icons_2e83ff_256x240.png);
}
#mytable tr.alt td {
	background: #f4f4f4;
}
.attendance_pop_up{
font-size:12px !important;
}
.mytable1 tr.alt td {
	background: #E1F3FF !important; 
}
.mytable1 tr td{
	font-size:14px !important;
	font-weight: normal !important;
}

#mytable tr.over td, tr:hover td {
	/*background: #e6e6e6;*/
}
/*calendar*/
.calendar-button{background:url(../images/calendar.png) no-repeat; border:0px; height:16px; width:15px; }



.msg {
color: #009900;
}
.alert_msg {
color: #FF0000;
}.text_orange {
color: #FF0000; font-size:14px;
}
/*Validations*/ 
.tfvHighlight
		{color: red;}
	.tfvNormal
		{font-weight: normal;}
		
.table-grid th {
background-color:#CCCCCC;
}	
.table-grid td {
border-bottom:1px dotted #CCCCCC;
}	


/* show hide */	
.slidingDiv {
	background-color:#FFFFFF;
	padding:2px;
	margin-top:10px;
	border:3px solid #CCCCCC;
	/*border-bottom:5px solid #CCCCCC;*/
	width:300px;
}

.show_hide {
	display:none;
}



.show-hide-table td{
padding:3px;
border-bottom:1px dotted #CCCCCC;
	
}

.show-hide-button {
	background:url(../images/button-bg.jpg) repeat-x; padding:2px 8px; border:1px solid #1b1b1b; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color:#FFFFFF; text-shadow:0px 1px 1px #000; font-weight:bold; cursor:pointer; text-decoration:none;
/*background-color:#CCCCCC;
height:20px;
width:50px;
padding:3px;*/
}


/***************/	


.textbox-payroll{font-size:11px; color:#454545; border:1px solid #b9b9b9; padding:0px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; margin-bottom:2px; width:50px; height:10px;}


.employee-title{font-weight:bold; background-color: #CCCCCC; text-transform:uppercase;}


#my-form {
	border-collapse: collapse;
	width: 100%;
	margin: 3px 0;
	font-size: 1.1em;
	border: 1px solid #c8c8c8;
}

#my-form th {
	background: url(../images/tablehead-bg.jpg) repeat-x #cdcdcd;
	color: #333;
	font-weight: bold;
	padding: 3px;
	text-align: left;
}

#my-form td {
	padding: 3px;
	border-bottom: 1px solid #c8c8c8;
}

#my-form td * {
	padding: 3px;
}

#my-form tr.alt td {
	background: #f4f4f4;
}

#my-form tr.over td, tr:hover td {
	/*background: #e6e6e6;*/
}
.border-right{ border-right:1px solid #c8c8c8;}
.border-left{ border-left:1px solid #c8c8c8;}

/* Tab */
#tabs {
/*font-size: 90%;*/
}
#tabs ul {
float: left;
width: 900px;
padding: 4px 0px 0px 0px;
margin:0px;
}
#tabs li {
margin-right:5px;
list-style: none;
-webkit-border-radius:3px 3px 0 0; -moz-border-radius:3px 3px 0 0; border-radius:3px 3px 0 0;
background:url(../images/tab-headbg.jpg) repeat-x;
line-height: 0.6;
padding:0px 0px;
}
#tabs li, #tabs li a {
float: left;
}
#tabs ul li.active {
background:url(../images/tab-bg.jpg) repeat-x top #df8411;

}
#tabs ul li.active a {
color: #333333;
}
#tabs div {
background:#EAEAEA;
clear: both;
padding: 0px;
min-height: 10px;
border: 1px solid #DCDCDC;
}
#tabs div h3 {
margin-bottom: 12px;
}
#tabs div p {
line-height: 150%;
}
#tabs ul li a {
text-decoration: none;
padding: 8px 15px;
color: #000;
font-weight: bold;
}
/*tabs*/
.home-table-grid {
border:1px dotted #CCCCCC;
}

.home-table-grid th {
background: url(../images/tablehead-bg.jpg) repeat-x #cdcdcd;
font-family:"Times New Roman", Times, serif;
padding:3px;
border:1px dotted #CCCCCC;
}	
.home-table-grid td {
padding:3px;
border:1px dotted #CCCCCC;
}	






table.scroll {
    /* width: 100%; */ /* Optional */
    /* border-collapse: collapse; */
    border-spacing: 0;
    border: 2px solid black;
}

table.scroll tbody,
table.scroll thead tr{
table.scroll thead { display:block; }
	  display: -ms-flexbox;
  display: -webkit-flex;
    display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flexbox;
}

table.scroll tbody {
    height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}

table.scroll tbody tr{
  display: flex;
}


#left-panel{
/*    width:0px;*/
/*    display:none;*/
}
.new_width{
    width:71% !important;
}
.old_width{
    width:98% !important;
}
#menu-button{
	padding: 6px 13px;
	text-transform: uppercase;
}
#alert{
display:inline;
}
#alert a .blink,
a .blink{
  -webkit-animation: color_change 1000ms infinite alternate;
  -moz-animation: color_change 1000ms infinite alternate;
  -ms-animation: color_change 1000ms infinite alternate;
  -o-animation: color_change 1000ms infinite alternate;
  animation: color_change 1000ms infinite alternate !important;
}

@-webkit-keyframes color_change {
    0% { background-color:black !important; }
	25% { background-color:green !important; } 
    50% { background-color:orange !important;  }
	75% { background-color:white !important; }
    100% { background-color:red !important; } 
}
@-moz-keyframes color_change {
    0% { background-color:black !important; }
	25% { background-color:green !important; } 
    50% { background-color:orange !important;  }
	75% { background-color:white !important; }
    100% { background-color:red !important; } 
}
@-ms-keyframes color_change {
    0% { background-color:black !important; }
	25% { background-color:green !important; } 
    50% { background-color:orange !important;  }
	75% { background-color:white !important; }
    100% { background-color:red !important; } 
}
@-o-keyframes color_change {
    0% { background-color:black !important; }
	25% { background-color:green !important; } 
    50% { background-color:orange !important;  }
	75% { background-color:white !important; }
    100% { background-color:red !important; } 
}
@keyframes color_change {
    0% { background-color:black !important; }
	25% { background-color:green !important; } 
    50% { background-color:orange !important;  }
	75% { background-color:white !important; }
    100% { background-color:red !important; }
}