/*  ---------------------------------------------------------
	1. General reset
	2. Common site styles
	3. Styles for responsive breakpoints
	---------------------------------------------------------*/
/*  ---------------------------------------------------------
	1. General reset
	---------------------------------------------------------*/
* { max-height: 100000px;}
body {
	min-width: 320px;
	line-height: 17px;
}
a:hover,
a:focus,
a:active {
	outline: none;
}
@-webkit-viewport {width: device-width;}
@-moz-viewport {width: device-width;}
@-ms-viewport {width: device-width;}
@-o-viewport {width: device-width;}
@viewport {width: device-width;}
/* placeholder input styles */
::-webkit-input-placeholder { color: #333;}
:-moz-placeholder { color: #333;}
::-moz-placeholder {
	color: #333;
	opacity: 1;
}
:-ms-input-placeholder { color: #333;}
/*  ---------------------------------------------------------
	2. Сommon site styles
	---------------------------------------------------------*/
/* main container styles */
#wrapper{
	overflow: hidden;
	background: url(../images/bg-body.jpg) no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
}
/* main informative part styles */
#main{
	overflow: hidden;
}
#content {
	overflow: hidden;
}
.main-section {
	/*height: 100vh;*/
}
.main-section.login {
	-webkit-background-size: cover;
	background-size: cover;
}
#sidebar {
	background: #3c4b64;
	width: 12%;
	padding: 68px 0 15px;
	float: left;
	position: fixed !important;
	height: 130%;
	left: 0;
	top: 0 !important;
	bottom: 0;
}
.btn-logout {
	position: absolute;
	bottom: 20px;
	right: 30px;
	font-size: 14px;
	line-height: 17px;
	font-weight: 100;
	color: #008571;
	text-align: center;
	transition:all 0.4s ease;
}
.btn-logout .image-holder {
	margin: 0 0 5px;
}
.btn-logout .image-holder img {
	display: block;
	margin: 0 auto;
}
.btn-logout .text {
	display: block;
}
.btn-logout:hover {
	color: #008571;
	transition:all 0.4s ease;
}
.post-holder {
	overflow: hidden;
}
.post-holder .post-block {
	overflow: hidden;
	margin: 0 0 10px;
	/*border:1px solid #000;*/
	border-radius:4px;
	background: #efefef;
}
.post-holder .post-block.add {
	margin: 0 0 10px 40px;
}
.post-holder .post-block .image-holder {
	float: left;
    width: 80px;
    height: 80px;
    margin: 0 5px 10px;
    background: #d7d7d7;
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
    border-radius: 100%;
    position: relative;
}
.post-holder .post-block .ico-holder {
	float: left;
    width: 80px;
  
    margin: 0 5px 10px;
  
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
    border-radius: 100%;
    position: relative;
}

.post-holder .post-block .image-holder h5 {
	margin:0;
    text-align:center;
    padding:2px 0 0;
}
.post-holder .post-block .image-holder img {
	display: block;
    width: 100%;
    height: auto;
}
.post-holder .post-block .post-text {
	overflow: hidden;
	padding: 10px 15px;
	background: #fff;
}
.post-holder .post-block .post-text p {margin: 0 0 5px;}
.post-holder .post-block .post-text textarea {
	border: none;
	width: 100%;
	border: none;
	min-height:70px;
	border:1px solid #eb661a;
	padding: 5px;
}
.post-holder .post-block .post-text .by {
	display: block;
	margin: 0 0 5px;
}
.post-holder .post-block footer {
	overflow: hidden;
	padding: 10px 0;
}
.post-holder .post-block footer time {
	float: left;
	font-size: 13px;
	line-height: 16px;
	color:#666;
}
.post-holder .post-block footer input[type=submit]{
	float: right;
	background: #eb661a;
	color:#fff;
	padding:5px;
	min-width:100px;
	border: none;
	border:1px solid #c7391a;
    margin-left:2px;
}
/* page logo styles */
.logo {
	width: 82px;
	height: 82px;
	margin: 0 auto 15px;
}
.logo a {
	display: block;
	height: 100%;
}
.logo img {
	display: block;
	width:100%;
}
#sidebar .sidelist {
	margin: 0 -10px 0 0;
	text-align: center;
	font-size: 14px;
	line-height: 17px;
	font-weight: 300;
}
.navbar-collapse {
	padding: 0;
}
#sidebar .sidelist li {
	display: block;
	margin: 0 0 2px;
}
#sidebar .sidelist li .image-holder {
	display: block;
	margin: 0 0 5px;
}
#sidebar .sidelist li .image-holder img {
	margin: 0 auto;
	display: block;
}
#sidebar .sidelist li .text-holder {
	display: block;
}
#sidebar .sidelist li .image-holder img.hover {
	display: none;
}
#sidebar .sidelist li a.active img.normal,
#sidebar .sidelist li a:hover img.normal {
	display: none;
}
#sidebar .sidelist li a.active img.hover,
#sidebar .sidelist li a:hover img.hover {
	display: block;
}
#sidebar .sidelist li a {
	display: block;
	padding: 4px;
	color: #008571;
	position: relative;
}
#sidebar .sidelist li a.active,
#sidebar .sidelist li a:hover {
	background: #fff;
	color: #1f3549;
}
#sidebar .sidelist li a.active:after,
#sidebar .sidelist li a:hover:after {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -15px;
	width: 15px;
	background: #ff503f;
	content: '';
}
.detail-block {
	overflow: hidden;
    padding: 68px 0 0 12%;
}
.detail-block.login {
    padding:110px 0 0;
}
.detail-block.denied {
	height: 100%;
}
.detail-holder.denied {
	/*height:calc(100vh - 68px);*/
	white-space:nowrap;
	text-align: center;
}
.detail-holder.denied:after {
	content: "";
	display: inline-block;
	height: 100%;
	margin: 0 0 0 -5px;
	overflow: hidden;
	vertical-align: middle;
	width: 1px;
}
.user-section.denied {
	display: inline-block;
	vertical-align: middle;
	white-space:normal;
}
/* header styles */
#header {
	background: #3c4b64;
	padding: 15px 10px;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 999;
}
#header:after {
	display: block;
	content: '';
	clear: both;
}
#header h1 {
	font-size: 30px;
	line-height: 33px;
	color: #008571;
	float: left;
	margin: 2px 0;
	font-weight: 900;
}
#header .account-holder {
	text-align: right;
}
#header .account-frame {
	display: inline-block;
	vertical-align: middle;
	margin: 0 0 0 15px;
}
#header .notification-holder {
	display: inline-block;
	vertical-align: middle;
}
#header .note-holder {
	display: inline-block;
	vertical-align: middle;
    text-align:center;
    margin-right:50px;
    padding-left:2px;
}
#header .note-holder span{
	
    color:#fff;
    display: inline-block;
    vertical-align: middle;
    font-size: 15px;
    line-height: 18px;
    margin: 0 0 0 10px;
}

#header .account-holder .user-image {
	width: 38px;
	height: 38px;
	overflow: hidden;
	border:2px solid #9d9c9c;
	border-radius: 100%;
	display: inline-block;
	vertical-align: middle;
}
#header .account-holder .user-image img {
	display: block;
	width: 100%;
	height: auto;
}
#header .account-holder .welcome,
#header .account-holder .name {
	display: inline-block;
	vertical-align: middle;
	font-size: 15px;
	line-height: 18px;
	font-style: italic;
	margin: 0 0 0 10px;
	
}
	#header .account-holder .welcome{
		color:#fff;
	}
	.account-holder .open-close {
		display: inline-block;
		vertical-align: middle;
		position: relative;
		z-index: 99;
		margin: 0;
	}
.account-holder .open-close li {
	position: relative;
}
.account-holder .open-close .name {
	font-size: 15px;
	line-height: 18px;
	font-weight: 700;
	color: #f00;
	position: relative;
	padding: 0 15px 0 0;
	display: block;
	margin: 0;
}
.account-holder .name:after {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	right: 0;
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 5px 0 5px;
	border-color: #5E6E82 transparent transparent transparent;
}
.account-holder .open-close.active .name:after {
	border-color: #0fa34d transparent transparent transparent;
}
.account-holder .open-close li .slide {
	position: absolute;
	top: 100%;
	left: 50%;
	transform:translateX(-50%);
	-webkit-transform:translateX(-50%);
	min-width:135px;
	padding: 24px 0 0;
	display: none;
}
#header .account-holder .name {
	position: relative;
	margin: 0;
	font-style: normal;
}
.account-holder .open-close li:hover .slide {
	display: block;
}
.account-holder .edit-list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	line-height: 17px;
	text-align: left;
	background: rgba(238, 238, 238, 0.9);
	-webkit-box-shadow: 0 0 5px 1px #666;
	-moz-box-shadow: 0 0 5px 1px #666;
	box-shadow: 0 0 5px 1px #666;
}
.account-holder .edit-list li {
	display: block;
	border-top:1px solid #ccc;
}
.account-holder .edit-list li:first-child {
	border: none;
}
.account-holder .edit-list li a {
	color: #1f3549;
	display: block;
	padding: 5px 10px;
}
.account-holder .edit-list li a:hover {
	background: #1f3549;
	color: #fff;
}
.jcf-scrollable {
	/*height: calc(100vh - 68px);
	overflow:auto;*/
}
.detail-holder {
	padding: 4px 15px;
}
.report-holder {
	overflow: hidden;
	margin: 0 0 20px;
}
.report-holder .btn-report {
	float: right;
	min-width:150px;
	border:2px solid #eceff1;
	font-size: 14px;
	line-height: 17px;
	color: #1f3549;
	font-weight: 700;
	padding: 10px 10px;
   
}
.report-holder .report-form {
	overflow: hidden;
}
.jcf-range {
	width: 100%;
	margin: 0;
}
.jcf-range .jcf-range-wrapper {
	height: 2px;
	border-radius: 0;
	background: #7cc7ff;
	margin: 0;
}
.columns-container {
	padding: 0 0 1px;
	overflow: hidden;
	border-bottom:2px solid #d2d2d2;
}
.columns-container .columns-holder {
	letter-spacing: -5px;
	margin: 0 -5px;
}
.columns-container .columns-holder .column {
	letter-spacing: normal;
	display: inline-block;
	vertical-align: top;
	padding: 0 5px;
	width: 16.1%;
     margin-bottom:3px;
}
.columns-container .columns-holder a {
	height:80px;
	display: block;
	white-space:nowrap;
	text-align: center;
	color: #fff;
}
.columns-container .columns-holder a.blue {
	background: #2b7bec;
}
.columns-container .columns-holder a.green {
	background: #10a24f;
}
.columns-container .columns-holder a.red {
	background: #f82627;
}
.columns-container .columns-holder a.yello {
	background: #ffd700;
}
.columns-container .columns-holder a.orange {
	background: #f47a27;
}
.columns-container .columns-holder a.white {
	background: #fff;
}
.columns-container .columns-holder a:after {
	content: "";
	display: inline-block;
	height: 100%;
	margin: 0 0 0 -5px;
	overflow: hidden;
	vertical-align: middle;
	width: 1px;
}
.columns-container .columns-holder .text-holder {
	display: inline-block;
	vertical-align: middle;
	white-space:normal;
}
.columns-container .columns-holder .number {
	font-size: 30px;
	line-height: 33px;
	font-weight: 600;
	color: #fff;
	display: block;
	margin: 0 0 10px;
}
.columns-container .columns-holder .text {
	font-size: 14px;
	line-height: 17px;
	display: block;
	margin: 0 0 10px;
}
#chartdiv {
	width: 100%;
	height: 330px;
}
#chartdiv img {
	display: block;
	width: 100%;
	height: auto;
}
.login-section {
	-webkit-background-size: cover;
	background-size: cover;
	height: calc(100vh - 110px);
	position: relative;
}
.login-holder {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.login-frame{
	display: table;
	width: 100%;
	height: 100%;
}
.login-form {
	display: table-cell;
	vertical-align: middle;
}
.login-form .form-holder {
	max-width:350px;
	margin: 0 auto;
}
.login-form .form-holder.password {
	max-width:300px;
}
.login-form .user-image {
	float: left;
	border:3px solid #84989f;
	margin: 0 20px 0 0;
}
.login-form .user-image img {
	display: block;
}
.login-form .login-details {
	padding: 0 10px 10px;
}
.login-form .login-details.add {
	text-align:center;
}
.login-form.add {
	display:block;
	max-width:300px;
	margin:0 auto;
}
.modal-dialog.add {
	width:400px;
}
.login-form .login-details.add .btn-help,
.login-form .login-details.add h2 {
	color:#014961;
}
.login-form .login-details.add .btn-submit {
	margin:0 auto;
}
.login-form .login-details h2{
	overflow: hidden;
	font-size: 18px;
	line-height: 21px;
	font-weight: 700;
	text-transform: uppercase;
	margin: 0 0 15px;
}
.login-form .login-details .form-group {
	margin: 0;
}
.login-form .login-details .form-group h3 {
	display: block;
	font-size: 18px;
	line-height: 21px;
	font-weight: 700;
	color: #2c2c2c;
	margin: 0 0 15px;
	text-align: center;
}
.login-form .login-details .input-group {
	margin: 0 0 20px;
	width:100%;
	padding:0;
}
.login-form .login-details .btn-help {
	font-size: 12px;
	line-height: 15px;
	display: inline-block;
	vertical-align: top;
	color: #fff;
	text-transform: uppercase;
	font-weight: 700;
}
.login-form .login-details .input-group .RadComboBox {
	display: block;
}
#ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder1_cmbWorkStation {
	width: 100% !important;
}
.login-form .login-details .btn-submit {
	display: block;
	font-size: 14px;
	line-height: 17px;
	background: #e55b38;
	color: #fff;
	border: none;
	border-radius: 4px;
	-moz-box-shadow: 0 1px 1px rgba(0,0,0,.4);
	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.4);
	padding: 10px 10px;
	min-width:120px;
	transition:all 0.4s ease;
	text-align: center;
}
.login-form .login-details .btn-submit:hover {
	transition:all 0.4s ease;
	background: #ef4316;
}
.detail-holder h2 {
	font-size: 26px;
	line-height: 29px;
	color: #1f3549;
	margin: 0 0 40px;
	font-weight: 900;
}
.encryption {
    display:block;
    font-size:16px;
    line-height:19px;
    font-weight:700;
    text-align:center;
    margin:0 0 25px;
    color:#CD853F;
}
.encryption span {
    display:inline-block;
    vertical-align:top;
    border:1px solid #F0E68C;
    padding:6px 10px;
    background:#F0E68C;
    border-radius:3px;
}
.user-section.reports h2 {
	font-size: 18px;
	line-height: 21px;
	font-weight: 600;
	margin: 0 0 10px;
}
.detail-holder h4 {
	font-size: 20px;
	line-height: 23px;
	color: #1f3549;
	margin: 0 0 10px;
	font-weight: 700;
}
.blocks-outer {
	position: relative;
}
.legend-list {
	margin: 0;
	position: absolute;
	top: 0;
	right: 0;
	font-size: 16px;
	line-height: 19px;
	font-weight: 700;
	color: #1f3549;
}
.legend-list li {
	position: relative;
	padding: 0 0 0 40px;
	margin: 0 0 10px;
}
.legend-list li:before {
	position: absolute;
	top: 50%;
	left: 0;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	width: 20px;
	height: 20px;
	background: #0fa34d;
	content: '';
}
.legend-list li.two:before {
	background: #f82627;
}
.legend-list li.three:before {
	background: #f87827;
}
.legend-list li.four:before {
	background: #6f2da8;
}

.legend-list li.five:before {
	background: #DE3163;
}

.attendance-block.first {
	min-height: 180px;
	padding: 10px 15px;
	max-width: 245px;
	margin: 0 auto;
	padding: 10px 15px;
}
.attendance-block.first.green {
  background:none;
}
.attendance-block {
	min-height: 220px;
	padding: 1px 15px;
}
.anonymous-block {
	min-height:120px;
	padding: 1px 15px;
}

.attendance-block.green {
	background: #0fa34d;
}
.attendance-block.red {
	background: #f82627;
}
.attendance-block.orange {
	background: #f87827;
}
.attendance-block.Maternity {
	background: #DE3163;
}
.attendance-block.Leave {
	background: #6f2da8;
}
.attendance-block.pending-req{
    background-color:#008571;
}

.attendance-block .image-holder {
	width: 80px;
	height: 80px;
	border-radius: 100%;
	border: 3px solid rgba(0,0,0,.18); /* stroke */
	background: #d7d7d7;
	margin: -45px auto 0;
	white-space:nowrap;
	text-align: center;
	overflow: hidden;
}
.attendance-block .image-holder img {
	max-width:100%;
	max-height:100%;
	display: block;
}
.attendance-block .image-holder:after {
	content: "";
	display: inline-block;
	height: 100%;
	margin: 0 0 0 -5px;
	overflow: hidden;
	vertical-align: middle;
	width: 1px;
}
.attendance-block .image-holder span {
	font-size: 40px;
	line-height: 43px;
	color: #fff;
	display: inline-block;
	vertical-align: middle;
	white-space:normal;
}
.attendance-block .name {
	display: block;
	text-align: center;
	color: #fff;
	font-size: 15px;
	line-height: 18px;
	font-weight: 900;
}
.attendance-block .designation {
	display: block;
	text-align: center;
	color: #fff;
	font-size: 14px;
	line-height: 17px;
}
.attendance-block .detail-list {
	margin: 0;
	font-size: 14px;
	line-height: 17px;
	color: #fff;
	padding: 12px 0 7px;
}
.attendance-block .detail-list li {
	display: block;
	margin: 0 0 5px;
	overflow: hidden;
}
.attendance-block .detail-list li .title {
	float: left;
	margin: 0 10px 0 0;
	min-width:80px;
}
.attendance-block .detail-list li .holder {
	overflow: hidden;
}
.attendance-block .detail-list li .holder .text {
	color: #fff;
}
.blocks-outer .columns-holder {
	letter-spacing: -5px;
	margin: 0 -5px;
}
.blocks-outer .columns-holder .column {
	letter-spacing: normal;
	display: inline-block;
	vertical-align: top;
	padding: 0 5px;
	margin: 60px 0 0;
	width: 20%;
}
.jcf-scrollbar-vertical {
	width: 16px;
	background: #1f3549 url(../images/scroll-image.png) 50%  repeat-y;
}
.jcf-scrollbar-vertical .jcf-scrollbar-dec, .jcf-scrollbar-vertical .jcf-scrollbar-inc {
	background: #00907a;
}
.jcf-scrollbar-vertical .jcf-scrollbar-handle {
	width: 16px !important;
	height: 16px !important;
	border-radius: 100%;
	background: #fff;
}
.user-section {
	overflow: hidden;
}
.user-section.reports {
    padding:0 0 0 155px;
}
.user-section .access-denied {
	overflow: hidden;
	width: 285px;
	margin: 0 auto 20px;
}
.user-section .access-denied img {
	display: block;
	width: 100%;
	height: auto;
}
.user-section .btn-holder {
	text-align: center;
}
.user-section .btn-back {
	display: inline-block;
	vertical-align: top;
	font-size: 16px;
	line-height: 19px;
	font-weight: 700;
	color: #ff503f;
	position: relative;
	padding: 0 0 0 60px;
}
.user-section .btn-back:before {
	position: absolute;
	left: 0;
	top: 50%;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	content: '<- - -';
	font-size: 25px;
	font-weight: 900;
	color: #ff503f;
}
.user-section .btn-back:hover:before,
.user-section .btn-back:hover {
	color: #566781;
}
.user-section .user-sidebar .user-holder {
	text-align: center;
}
.user-section .user-sidebar {
	float: left;
	max-width: 265px;
	margin: 0 15px 0 0;
}
.user-section .user-sidebar .image-holder {
	width: 160px;
	height: 160px;
	margin: 0 auto 10px;
	background: #d7d7d7;
	white-space:nowrap;
	text-align: center;
	overflow: hidden;
    border-radius:100%;
    position:relative;
}
.user-sidebar .user-holder .image-holder .SapID {
    left: 0;
    right: 0;
    font-weight: bold;
    position: absolute;
    /*background: teal;*/
    bottom: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
}

.user-section .user-sidebar .image-holder:after {
	content: "";
	display: inline-block;
	height: 100%;
	margin: 0 0 0 -5px;
	overflow: hidden;
	vertical-align: middle;
	width: 1px;
}
.user-section .user-sidebar .image-holder img {
	display: block;
	width: 100%;
	height: auto;
}
.user-section .user-sidebar .image-holder .alphabet {
	display: inline-block;
	vertical-align: middle;
	white-space:normal;
	font-size: 80px;
	line-height: 80px;
	color: #fff;
}
.user-section .user-holder .name {
	font-size: 15px;
	line-height: 18px;
	font-weight: 900;
	color: #1f3549;
	display: block;
	margin: 0 0 5px;
}
.user-section .user-holder .designation {
	font-size: 14px;
	line-height: 17px;
	color: #1f3549;
	display: block !important;
	margin: 0 0 5px;
    max-width:150px;
}

.Recent.user-holder {
	text-align: center;
}
.Recent .user-sidebar {
	float: left;
	max-width: 265px;
	margin: 0 15px 0 0;
}
.Recent .image-holder {
	width: 110px;
	height:110px;
	margin: 0 auto 10px;
	background: #d7d7d7;
	white-space:nowrap;
	text-align: center;
	overflow: hidden;
    border-radius:100%;
    position:relative;
    border:2px solid #fff;
}
.Recent .image-holder:after {
	content: "";
	display: inline-block;
	height: 100%;
	margin: 0 0 0 -5px;
	overflow: hidden;
	vertical-align: middle;
	width: 1px;
}
.Recent .image-holder img {
	display: block;
	width: 100%;
	height: auto;
}
.Recent .image-holder .alphabet {
	display: inline-block;
	vertical-align: middle;
	white-space:normal;
	font-size: 80px;
	line-height: 80px;
	color: #fff;
}
.Recent {
    min-height: 247px;
    background: #008080;
    margin:5px 0;
    padding:0 0 5px;
}
.Recent h3{
    font-size:18px;
    line-height:21px;
    font-weight:bold;
    color:#fff;
    margin:0 0 8px;
    padding:10px 10px;
    text-align:center;
    background:#1f3549;
}
.Recent .user-holder .image-holder .checkInTime{
   
    left: 0;
    right: 0;
    font-weight:bold;  
    position: absolute;
    background: teal;
    bottom: 12px;
    color: #fff;
}
    .Recent ul {
        letter-spacing:-5px;
        text-align:center;
        padding: 10px 5px;
    }
.Recent ul li{
    letter-spacing:normal;
    max-width:120px;
    overflow:hidden;
    vertical-align:top;
}
.Recent .name {
	font-size: 15px;
	line-height: 18px;
	font-weight:700;
	color: #040e17;
	display: block;
	margin: 0 0 3px;
}
.Recent .designation {
	font-size: 12px;
	line-height: 15px;
	color: #fff;
	display: block !important;
	margin: 0 0 3px;
    max-width:150px;
}
    .Recent .sap-code {
        color:#fff;
        font-size:12px;
        line-height:15px;
    }
.chart-heading h3 {
    font-size: 18px;
    line-height: 21px;
    font-weight: bold;
    color: #fff;
    margin: 5px 0 8px;
    padding: 10px 10px;
    text-align: center;
    background: #1f3549;
    
}

.user-section .user-holder .designation.team {
    max-width:100%;
}
.user-section .user-holder .designation span {
    display:block !important;
}
.user-section .user-holder .sap-code {
	font-size: 14px;
	line-height: 17px;
	color: #fff;
	display: block;
	margin: 0 0 5px;
}
.user-section .user-holder .sap-code span {
	display: inline-block;
	vertical-align: top;
	font-weight: 700;
}
.user-section .user-holder .btn-mark {
	width: 160px;
	display: block;
	margin: 0 auto 5px;
	background: #00D27A;
	padding: 12px;
	text-align: center;
	font-size: 15px;
	line-height: 18px;
	color: #fff;
	transition: all 0.4s ease;
	border: none !important;
}
.user-section .user-holder .btn-mark.leave {
	background:#ff503f;
}
.user-section .user-holder .btn-mark.leave:hover {
	 background: #008571;
}
.user-section .user-holder .btn-mark:hover {
	transition:all 0.4s ease;
	background: #1f3549;
}
.user-section .user-holder time {
	display: block;
	margin: 0;
	font-size: 15px;
	line-height: 18px;
}
.user-section .user-holder time span {
	display: inline-block;
	vertical-align: top;
}
.attendance-block .block-holder {
	margin: 0 0 10px;
}
.attendance-block .block-holder.dashboard {
	
}
.attendance-block .block-holder.dashboard .detail-list.add {
	/*color: #fff;*/
}
.attendance-block .block-holder.dashboard .detail-list.add li {
	/*background: #008571;*/
	padding: 5px;
	/*border-top:1px solid #efefef*/;
	margin: 0;
}
.attendance-block .block-holder.dashboard .detail-list.add li:first-child {
	border: none;
}
.attendance-block .block-holder.dashboard .detail-list.add li .title {
	width:150px;
	position: relative;
}
.attendance-block .block-holder.dashboard .detail-list.add li .title:after {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	height: 100%;
	width: 1px;
	background: #fff;
	content: '';
}
.attendance-block h3 {
	font-size: 15px;
	line-height: 18px;
	font-weight: 700;
	color: #1f3549;
	border-bottom:1px solid #d2d7db;
	padding: 0 0 5px;
	margin: 0 0 10px;
}
.attendance-block h3 time {
	display: inline-block;
	vertical-align: top;
	text-transform: none;
	font-size: 10px;
	line-height: 13px;
	margin: 3px 0;
}
.attendance-block .detail-list.add {
	padding: 0;
	color: #000;
}
.attendance-block .detail-list.add li .title {
	min-width:100px;
}
.attendance-block .detail-list.add li .holder .text {
	font-weight: 700;
	color: #000;
}
.user-section .user-details {
	overflow: hidden;
}
.user-section .user-details .reports-holder {
	overflow: hidden;
}
.user-section .user-details .reports-holder h3 {
	font-size: 20px;
	line-height: 23px;
	color: #1f3549;
	display: block;
	margin: 0 0 10px;
} 
.reports-table .buttons-holder {
	overflow: hidden;
}
.reports-table .buttons-holder .btns {
	display: inline-block;
	vertical-align: top;
	background: #008571;
	padding: 5px;
	text-align: center;
	font-size: 14px;
	line-height: 17px;
	color: #fff;
	transition:all 0.4s ease;
	border:none !important;
	width:90px;
}
.reports-table .buttons-holder .btns:hover {
	background: #1f3549;
}
.reports-table {
	width: 100%; 
	border-collapse: collapse; 
}
.reports-table tr {
	overflow: hidden;
}
	.reports-table tr th {
		overflow: hidden;
		font-size: 14px;
		line-height: 17px;
		font-weight: 700;
		padding: 12px 6px;
		text-transform: uppercase;
		color: #5E6E82;
		background: #EDF2F9;
		text-align: center;
	}
.reports-table.leave tr th.one {
	min-width:100px;
}
.reports-table.leave tr th.five {
	width: 200px;
}
	.reports-table tr td {
		overflow: hidden;
		font-size: 14px;
		line-height: 17px;
		font-weight: 400;
		color: #000;
		background: #D4DDE7;
		padding: 12px 6px;
		text-align: center;
	}
	.reports-table tr:nth-child(even) td {
		background: #E2FBEA;
	}
.list-table {
	width: 100%; 
	border-collapse: collapse; 
}
.list-table tr {
	overflow: hidden;
}
.list-table tr th {
	overflow: hidden;
	font-size: 14px;
	line-height: 17px;
	font-weight: 700;
	padding: 12px 6px;
	text-transform: uppercase;
	color: #fff;
	background: #1f3549;
	text-align: center;
}
.list-table tr td {
	overflow: hidden;
	font-size: 14px;
	line-height: 17px;
	font-weight: 400;
	color: #000;
	background: #ededed;
	padding: 12px 6px;
	text-align: center;
}
.list-table tr:nth-child(even) td {
	background: #dfdede;
}
.list-table tr td .image-holder {
	height: 50px;
	line-height: 47px;
}
.list-table tr td .image-holder a {
	vertical-align:baseline;
}
.list-table tr td .image-holder img {
	vertical-align: middle;
	max-width:100%;
	max-height:100%;
	-moz-box-shadow: 0 0 3px #666;
	-webkit-box-shadow: 0 0 3px #666;
	box-shadow: 0 0 3px #666;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
}
.leave-form {
	overflow: hidden;
	max-width:500px;
	margin: 0 auto;
}
.leave-form.reports {
	max-width:850px;
}
.leave-form.reports .fields-holder {
	letter-spacing: -5px;
	margin: 0 -10px;
}
.leave-form.reports .fields-holder .field-frame {
	letter-spacing: normal;
	display: inline-block;
	vertical-align: top;
	width: 33.3%;
	padding: 0 0;
}
.leave-form.change {
	overflow: hidden;
	max-width:400px;
	margin: 0 auto;
}
.leave-form .fields-holder {
	margin: 0;
	overflow: hidden;
}
.leave-form .fields-holder .field-frame {
	overflow: hidden;
	margin: 0 0 10px;
}
.leave-form .fields-holder .field-frame .input-holder .form-control:focus {
	outline: 0 none !important;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
.leave-form .fields-holder .field-frame label {
	font-size: 15px;
	line-height: 18px;
	color: #014961;
	font-weight: 700;
	float: left;
	margin: 0 10px 0 0;
	min-width:75px;
}
.leave-form.reports .fields-holder .field-frame label {
	margin: 8px 10px;
}
.leave-form.change .fields-holder .field-frame label {
	min-width:135px;
	margin: 8px 10px 8px 0;
}
.leave-form .fields-holder .field-frame .input-holder {overflow: hidden;} 
.leave-form .fields-holder .field-frame .input-holder ~ div {
    width:100% !important;
}
.leave-form .fields-holder .field-frame .input-holder .form-control {
    height:inherit !important;
    width:100% !important;
}
.leave-form .fields-holder.add .field-frame {
	width: 50%;
}
.leave-form .fields-holder.add .field-frame.other {
	width: 100%;
}
.leave-form .fields-holder.add .field-frame .checkbox label {margin: 0;}
.leave-form .fields-holder.add .field-frame .input-holder .file-holder {
	letter-spacing:-5px;
}
.leave-form .fields-holder .field-frame textarea.form-control {
	min-height: 70px;
	resize: none;
}
.leave-form .fields-holder .field-frame input[type=submit] {
	display: block;
	font-size: 15px;
	line-height: 18px;
	background: #008571;
	color: #fff;
	border: none;
	border-radius: 4px;
	-moz-box-shadow: 0 1px 1px rgba(0,0,0,.4);
	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.4);
	padding: 9px 10px;
	min-width:120px;
	margin: 0 auto;
	transition:all 0.4s ease;
	text-align: center;
}
.leave-form .fields-holder .field-frame input[type=submit]:hover {
	transition:all 0.4s ease;
	background: #1f3549;
}
.leave-form.change .fields-holder .field-frame input[type=submit] {
	position: relative;
	margin:0;
	left: 145px;
}
#RadCaptcha1_ctl00,
#RadCaptcha1_CaptchaLinkButton {
	display: inline-block !important;
	font-size: 14px;
	font-weight: 700;
	line-height: 17px;
	vertical-align: top;
}
#RadCaptcha1_ctl01 img {
	display: block;
	margin: 0 0 5px;
}
.thankyou-msg {
	color: #e55b38 !important;
	display: block;
	font-size: 13px;
	line-height: 16px;
}
#RadCaptcha1_CaptchaTextBox {
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
	color: #555;
	display: block;
	font-size: 14px;
	height: 34px;
	line-height: 1.42857;
	padding: 6px 12px;
	transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
	width: 100%;
}
.RadComboBox_Default .rcbInput {
	background:none;
}
.modal-dialog {
	max-width:500px;
	width:inherit;
}
.modal-content {
	overflow: hidden;
	padding: 0 0 15px;
}
.modal-header {
	padding: 10px 15px 0;
	border: none;
}
.modal-header button.close {
	color: #0d6cac;
	opacity: 0.8;
}
.login-form.update {
	display: block;
	margin: 0 auto;
}
.login-form.update .login-details .btn-submit {
	background: #014961;
}
.login-form.update .login-details .btn-submit:hover {
	background: #008571;
}
.login-form .form-control {
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}
.login-form .input-group-addon {
	min-width:42px;
}
.popup-holder {
	position: relative;
}
.popup-holder:after {
	display: block;
	content: '';
	clear: both;
}
#RequiredFieldValidator2,
#RequiredFieldValidator1 {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
}
.popup-holder .popup {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width:200px;
	width: 100%;
	z-index: 99;
	padding:0;
}
.popup-holder .popup.login {
	top:0;
	left:100%;
	padding:0 5px;
}
.popup-box {
	background: #3186a3;
	padding: 30px 10px 10px;
	position: relative;
}
.popup-box .close {
	color: #fff;
	opacity: 1;
	position: absolute;
	top: 5px;
	right: 5px;
}
.popover-list {
	margin: 0;
	color: #fff;
}
.popover-list li {
	display: block;
	position: relative;
	padding: 0 0 0 10px;
	margin:0 0 10px;
}
.popover-list li:before {
	position: absolute;
	top: 6px;
	left: 0;
	content: '';
	width: 6px;
	height: 6px;
	background: #fff;
}
/* custom-select styles */
.custom-select {
	position: relative;
	margin: 0;
	color: #999;
	z-index: 9;
}
.custom-select:after {
	display: block;
	content: '';
	clear: both;
}
.custom-select.open,
.custom-select.active { z-index: 10;}
.custom-select > .form-control {
	display: block;
	position: relative;
	font-weight: normal;
	text-align: left;
	padding-right: 30px;
	margin: 0;
	z-index: 10;
	color: #999;
}
.custom-select.active > .form-control,
.custom-select.open > .form-control,
.custom-select.selected > .form-control { color: #555;}
/* .custom-select > .form-control:before {
	content:"";
	position: absolute;
	top: -1px;
	left: -1px;
	bottom: -1px;
	right: -1px;
	border-radius: 3px;
	border: 2px solid transparent;
	pointer-events: none;
	z-index: 10;
}
.custom-select.active > .form-control:before,*/
.custom-select.active > .form-control:after { border-color: #333;} 
.custom-select > .form-control:hover { cursor: pointer;}
.custom-select > .form-control:after {
	width: 10px;
	height: 10px;
	content:"";
	border-width: 0 0 3px 3px;
	border-style: solid;
	border-color: #999;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	position: absolute;
	top: 50%;
	right: 19px;
	margin: -6px 0 0;
	z-index: 9;
}
.custom-select > strong label {
	margin: 0;
	font-weight: normal;
	pointer-events: none;
	display: block;
	overflow: hidden;
}
.custom-select.open ul,
.custom-select.active > ul { display: block !important;}
.custom-select.bottom > ul {
	top: auto;
	bottom: 100%;
	border-radius: 3px 3px 0 0;
	border-width: 1px 1px 0;
}
.custom-select > ul {
	border-radius: 0 0 3px 3px;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 9;
	margin: 0;
	background: #fff;
	font-size: 14px;
	line-height: 18px;
	border:1px solid #3299bb;
	overflow-y: auto;
	overflow-scrolling: touch;
	-webkit-overflow-scrolling: touch;
	display: none;
}
.custom-select > ul li {
	padding: 0 !important;
	border: none !important;
}
.custom-select > ul a {
	display: block;
	padding: 8px 11px;
	color: #999;
}
.custom-select > ul a:hover {
	color: #fff;
	background: #3299bb;
}

/* Car booking styles */

.car-registration-block{
    background-image:url(../images/car-booking-main.jpg);
    min-height:580px;
    
}

.car-booking-main{
    padding:25px;
}
h1.headerh1{
    text-align:center;
    display:block;
    margin:auto;
} 
.car-booking-main .car-box{
    background-color:#FFFFFF;
    border:1px solid #ccc;
    border-radius:4px;
    display:block;
    min-height:200px;
    position:relative;
    margin:10px;
}
.car-booking-main .car-box .img-holder{
    position:absolute;
    height:100px;
    width:100px;
    margin:auto;
    left:50px;
    right:50px;
    top:50px;
    bottom:50px;
}
.car-booking-main .car-box .img-holder img {
    
  height:100%;
  width:100%;    
    }
.car-booking-main .car-box span{
    display:block;
    text-align:center;
    color:#2E2E2E;
    font-weight:bold;
    margin-top:5px;
    font-size:x-large;
    position:absolute;
    bottom:15px;
    left:50px;
    right:50px;
    margin:auto;
}
.btn-car-booking{
    width: 160px;
    display: block;
    margin: 0 auto 5px;
    background: #008571;
    padding: 12px;
    text-align: center;
    font-size: 15px;
    line-height: 18px;
    color: #fff;
    transition: all 0.4s ease;
    border: none !important;
}
.btn-cancel-booking{
    width: 160px;
    display: block;
    margin: 0 auto 5px;
    background: #008571;
    padding: 12px;
    text-align: center;
    font-size: 15px;
    line-height: 18px;
    color: #fff;
    transition: all 0.4s ease;
    border: none !important;
}
/* end booking styles */

/* popup styles */
.popup {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99;
	white-space: nowrap;
	overflow-x: hidden;
	overflow-y: auto;
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
	transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
}
.popup.in,
.popup.active,
.popup.in .overlay,
.popup.active .overlay,
.overlay.active {
	visibility: visible;
	opacity: 1;
}
.popup:after {
	width: 1px;
	height: 100%;
	content:"";
	display: inline-block;
	vertical-align: middle;
}
.overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.5);
	visibility: hidden;
	opacity: 0;
	z-index: 99;
	transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
}
.popup .box-holder {
	width: 100%;
	display: inline-block;
	vertical-align: middle;
	white-space:normal;
	padding: 30px 15px;
	position: relative;
	z-index: 9;
}
.popup .box {
	max-width: 500px;
	padding: 0 15px 15px;
	margin: 0 auto;
	background: #fff;
	position: relative;
	pointer-events: auto;
}
.popup .box header {
	position: relative;
	padding: 10px;
	background: #1f3549;
	border-bottom: 1px solid #e1e1e1;
	margin: 0 -15px 10px;
}
.popup .btn-colse {
	width: 15px;
	height: 15px;
	text-indent: -9999px;
	overflow: hidden;
	position: absolute;
	top: 50%;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	right: 30px;
	background: url(../images/icon-close.png) no-repeat;

	z-index: 999;
}
.popup .btn-colse:hover { opacity: 0.8;}
.popup .box .text {
	display: block;
	font-size: 16px;
	line-height: 19px;
	font-weight: 700;
	margin: 0 0 10px;
	text-align: center;
}
.popup .box .buttons-holder {
	text-align: center;
}
.popup .box .buttons-holder .btn {
	min-width: 160px;
	display: inline-block;
	vertical-align: top;
	background: #008571;
	padding: 12px;
	text-align: center;
	font-size: 15px;
	line-height: 18px;
	color: #fff;
	transition:all 0.4s ease;
	border:none !important;
}
.popup .box .buttons-holder .btn.one {
	background: #1f3549;
}
.popup .box .buttons-holder .btn:hover {
	transition:all 0.4s ease;
	background: #1f3549;
}
.popup h2 {
	font-size: 20px;
	line-height: 23px;
	margin: 0;
	padding: 0 40px 0 0;
	color: #008571;
}
.popup h2 span {
	display: inline-block;
	vertical-align: top;
	position: relative;
	padding: 0 0 0 20px;
}
.popup h2 span:before {
	position: absolute;
	top: 50%;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	content: '';
	left: 0;
	width: 15px;
	height: 14px;
	background: url(../images/icon-warning.png) no-repeat;
}
.popup .box .form-control {
	min-height:70px;
	resize:none;
}
.registration-block .form-holder {
    /*background: #efefef;*/
    padding: 20px;
}
.registration-block .form-holder h4 {
	text-align: center;
	font-size: 18px;
	line-height: 21px;
	display: block;
}
.registration-block .fields-outer {
	
	margin: 0 -10px;
}
.registration-block .fields-outer .holder-field {
	letter-spacing: normal;
	width: 32.3%;
	display: inline-block;
	vertical-align: top;
	padding: 0 10px;
}
.registration-block .fields-outer .holder-field.full {
	width: 66.7%;
}
.registration-block .fields-outer .holder-field label {
	display:block;
	margin:0 0 4px 3px;
	font-weight: normal;
}
.registration-block .fields-outer .holder-field .frame-field {
	overflow: hidden;
	padding: 3px;
}

    .registration-block .form-holder .form-title {
        font-size: 18px;
        line-height: 21px;
        font-weight: 500;
        text-transform: uppercase;
        margin: 0 0 20px;
        display: block;
    }

    .registration-block .form-holder .form-control,
    .registration-block .form-holder .form-group {
        width: 100%;
        font-size: 15px;
        line-height: 18px;
        font-weight: 300;
        color: #2b3f47;
        background: #fff;
        border: 1px solid #c1d1d7;
        padding: 10px 15px;
        transition: all 0.4s ease;
        color: #2b3f47;
    }
	.registration-block .form-holder textarea {
		min-height:100px;
		resize:none;
	}

        .registration-block .form-holder .form-control:focus,
        .registration-block .form-holder .form-group:focus {
            -moz-box-shadow: inset 0 0 3px #2b3f47;
            -webkit-box-shadow: inset 0 0 3px #2b3f47;
            box-shadow: inset 0 0 3px #2b3f47;
            transition: all 0.4s ease;
        }

    .registration-block .form-holder .form-control {
        height: inherit;
        padding: 6px 15px;
        border-radius: 0;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        margin: 0 0 15px;
    }
    .registration-block .form-holder .btn-add {
        font-size: 15px;
        line-height: 18px;
        font-weight: 600;
        color: #fff;
        background: #f0b000;
        border: 1px solid #c1d1d7 !important;
        padding: 10px 15px;
        transition: all 0.4s ease;
        color: #fff;
        display: block;
        width: 250px;
        margin:0 0 15px;
    }

        .registration-block .form-holder input[type=submit]:hover {
            color: #2b3f47;
            transition: all 0.4s ease;
        }
.registration-block .fields-outer.five .holder-field {
	width:25%;
}
.checkbox label:after, 
.radio label:after {
    content: '';
    display: table;
    clear: both;
}

.checkbox .cr,
.radio .cr {
    position: relative;
    display: inline-block;
    border: 1px solid #a9a9a9;
    border-radius: .25em;
    width: 1.3em;
    height: 1.3em;
    float: left;
    margin-right: .5em;
}

.radio .cr {
    border-radius: 50%;
}

.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
    position: absolute;
}

.radio .cr .cr-icon {
    margin-left: 0.04em;
}

.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
    display: none;
}

.checkbox label input[type="checkbox"] + .cr > .cr-icon,
.radio label input[type="radio"] + .cr > .cr-icon {
    transform: scale(3) rotateZ(-20deg);
    opacity: 0;
    transition: all .3s ease-in;
}

.checkbox label input[type="checkbox"]:checked + .cr > .cr-icon,
.radio label input[type="radio"]:checked + .cr > .cr-icon {
    transform: scale(1) rotateZ(0deg);
    opacity: 1;
}

.checkbox label input[type="checkbox"]:disabled + .cr,
.radio label input[type="radio"]:disabled + .cr {
    opacity: .5;
}
.cr-icon {
	background: url(../images/done-tick.png) no-repeat;
	width: 16px;
	height: 1px;
}
.cr-icon input[type=checkbox] {
    margin-left:0 !important;
}
.reports-table.travel {
	max-width:100%;
	border:1px solid #1f3549;
    margin:0 0 10px;
    text-align:left;
}
.reports-table.travel caption {
    display:none;
}
.reports-table.travel tbody tr:first-child {

}
.reports-table.travel th {
	border-left:1px solid #fff;
    color:#fff !important;
    font-weight:700;
}
.reports-table.travel th a {
    color:#fff !important;
}
.reports-table.travel th:first-child {
	border: none;
}
.reports-table.travel tr {
	border-top:1px solid #1f3549;
}
.reports-table.travel tr:first-child {
	border: none;
}
.reports-table.travel tr td {
	border-left:1px solid #1f3549;
    border:none;
    text-align:left;
}
.reports-table.travel tr td:first-child {
	border: none;
}
.detail-holder.team  {
    padding:10px 0;
}
.detail-holder.team .user-section.reports {
    padding:0;
}
.user-section.reports.team {
    padding:0;
}
.detail-block.reset {
    padding:110px 0 0 0;
}
.buttons-holder {
    letter-spacing:-5px;
    margin:0 -5px;
}
.buttons-holder .button-tab {
    letter-spacing:normal;
    display:inline-block;
    vertical-align:top;
    width:25%;
    padding:0 5px;
}
.buttons-holder .button-tab a {
	display: block;
	font-size: 14px;
	line-height: 17px;
	background: #008571;
	color: #fff;
	border: none;
	border-radius: 4px;
	-moz-box-shadow: 0 1px 1px rgba(0,0,0,.4);
	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.4);
	padding: 10px 10px;
	min-width:120px;
	transition:all 0.4s ease;
	text-align: center;
}
.buttons-holder .button-tab a:hover {
	transition:all 0.4s ease;
	background: #ef4316;
}
.breadcrumb {
	background: none;
	padding: 0;
	margin: 0 0 10px;
}
.breadcrumb li a {
	color:#177e88;
}
.breadcrumb li.active {
	font-weight: 700;
	color:#177e88;
}
.breadcrumb > li + li::before {
	color:#177e88;
}
.navbar-default .dropdown-menu.notify-drop {
  min-width: 300px;
  background-color: #fff;
  min-height: 360px;
  max-height: 360px;
  margin-top: 23px;
}
.navbar-default .dropdown-menu.notify-drop .notify-drop-title {
  border-bottom: 1px solid #e2e2e2;
  padding: 5px 15px 10px 15px;
}
.navbar-default .dropdown-menu.notify-drop .drop-content {
  min-height: 280px;
  max-height: 280px;
  overflow-y: scroll;
}
.navbar-default .dropdown-menu.notify-drop .drop-content::-webkit-scrollbar-track
{
  background-color: #F5F5F5;
}

.navbar-default .dropdown-menu.notify-drop .drop-content::-webkit-scrollbar
{
  width: 8px;
  background-color: #F5F5F5;
}

.navbar-default .dropdown-menu.notify-drop .drop-content::-webkit-scrollbar-thumb
{
  background-color: #ccc;
}
.navbar-default .dropdown-menu.notify-drop .drop-content > li {
  border-bottom: 1px solid #e2e2e2;
  padding: 10px;
}
.navbar-default .dropdown-menu.notify-drop .drop-content > li:nth-child(2n+0) {
  background-color: #fafafa;
}
.navbar-default .dropdown-menu.notify-drop .drop-content > li:after {
  content: "";
  clear: both;
  display: block;
}
.navbar-default .dropdown-menu.notify-drop .drop-content > li:hover {
  background-color: #fcfcfc;
}
.navbar-default .dropdown-menu.notify-drop .drop-content > li .notify-img {
  float: left;
  display: inline-block;
  width: 45px;
  height: 45px;
  margin: 0px 0px 8px 0px;
}
.navbar-default .dropdown-menu.notify-drop .allRead {
  margin-right: 7px;
}
.navbar-default .dropdown-menu.notify-drop .rIcon {
  float: right;
  color: #999;
}
.navbar-default .dropdown-menu.notify-drop .rIcon:hover {
  color: #333;
}
.navbar-default .dropdown-menu.notify-drop .drop-content > li a {
  font-size: 13px;
  font-weight: normal;
}
.navbar-default .dropdown-menu.notify-drop .drop-content > li {
  font-weight: bold;
  font-size: 11px;
  border-bottom:1px solid #ccc;
}
.navbar-default .dropdown-menu.notify-drop .drop-content > li hr {
  margin: 5px 0;
  width: 100%;
  border-color: #e2e2e2;
}
.navbar-default .dropdown-menu.notify-drop .drop-content .pd-l0 {
  padding-left: 0;
}
.navbar-default .dropdown-menu.notify-drop .drop-content > li p {
  font-size: 13px;
  line-height: 16px;
  color: #666;
  font-weight: normal;
  margin: 3px 0;
}
.navbar-default .dropdown-menu.notify-drop .drop-content > li p.time {
  font-size: 10px;
  font-weight: 600;
  top: -6px;
  margin: 8px 0px 0px 0px;
  padding: 0px 3px;
  border: 1px solid #e2e2e2;
  position: relative;
  background-image: linear-gradient(#fff,#f2f2f2);
  display: inline-block;
  border-radius: 2px;
  color: #B97745;
}
.navbar-default .dropdown-menu.notify-drop .drop-content > li p.time:hover {
  background-image: linear-gradient(#fff,#fff);
}
.navbar-default .dropdown-menu.notify-drop .notify-drop-footer {
  border-top: 1px solid #e2e2e2;
  bottom: 0;
  position: relative;
  padding: 8px 15px;
}
.navbar-default .dropdown-menu.notify-drop .notify-drop-footer a {
  color: #777;
  text-decoration: none;
}
.navbar-default .dropdown-menu.notify-drop .notify-drop-footer a:hover {
  color: #333;
}
.notification-holder .navbar-default {
	background: none;
}
.notification-holder .dropdown-toggle {
	color: #fdfeff;
	font-weight: 700;
	position: relative;
	padding: 0 0 0 40px;
}
#header .notification-holder .label {
	position: absolute;
	top: -15px;
	right: -1px;
}

.notification-holder .dropdown-toggle:before {
	position: absolute;
	top: 50%;
	left: 0;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	content: '';
	background: url(../../../images/notification.png) no-repeat;
	width: 32px;
	height: 32px;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus,
.nav > li > a:hover,
.nav > li > a:focus {
	background: none;
}
.notify-text {
	overflow: hidden;
}
.notify-text .text {
	float: left;
	width: 200px;
}
.notify-text time {
	overflow: hidden;
	font-size: 13px;
	line-height: 16px;
	color: #666;
	margin: 3px 0 0;
	display: inline-block;
}
.activity-main{
  
    background-color:#fff;
}
.activities-holder {
      padding:18px;
    margin: 0 -15px;
}
.activities-blocks {
    display: inline-block;
    vertical-align: top;
    letter-spacing: normal;
    width: 33.3%;
    padding: 0 15px;
}
.activity-box {
    display: block;
    margin: 0 0 10px;
    border: 1px solid #d1d6e1;
    padding: 5px 10px;
    background: #fff;
    position: relative;
    transition: all 0.4s ease;
}
.activity-frame {
    display: block;
    overflow: hidden;
}
.activity-frame .alphabets-icon {
    display: inline-block;
    vertical-align: middle;
    background: #5584ff;
    font-size: 14px;
    line-height: 17px;
    color: #fff;
    padding: 8px 10px;
    border-radius: 100%;
    margin: 0 15px 0 0;
}
.activity-frame .text-holder {
    overflow: hidden;
    font-size: 14px;
    line-height: 17px;
    color: #0e1a35;
    display: inline-block;
    vertical-align: middle;
    max-width: 255px;
}
.activity-frame .text-holder .name {
    display: block;
    margin: 0 0 5px;
}
.activity-frame .text-holder time {
    display: block;
    font-size: 10px;
    line-height: 13px;
    color: #8492af;
    margin: 0;
    position: relative;
    padding: 0 0 0 15px;
}

/*--------------------------------- ------------------------
	3. Styles for Responsive web design
	---------------------------------------------------------*/
@media screen and (max-width:1200px) {
	body {
		background: #243748;
	}
	.main-section {
		height:inherit;
        padding-top: 20px;
    text-align: center;
	}
	.login-form .login-details {
		padding:10px;
	}
	.login-section {
		height: 350px;
		background-size: 100% 100%;
	}
	#header h1 {
		font-size: 23px;
		line-height: 26px;
	}
	.blocks-outer .columns-holder .column {
		width: 25%;
	}
	.btn-logout {
		display: none;
	}
}
@media screen and (max-width:992px) {
	.login-section {
		height: 450px;
	}
	.blocks-outer .columns-holder .column {
		width: 33.3%;
	}
	.navbar-collapse {
		padding:0;
		border: none;
		box-shadow: none;
	}
	.navbar-toggle {
		float: left;
		border-color:#f0b000;
		margin-left: 15px;
	}
	.navbar-toggle:hover {
		background: #f0b000;
		border-color:#f0b000;
	}
	.navbar-toggle:focus {
		background: #f0b000;
		border-color:#f0b000;
	}
	.navbar-toggle .icon-bar,
	.navbar-toggle .icon-bar {
		background: #008571;
	}
	.navbar-toggle:hover .icon-bar,
	.navbar-toggle:focus .icon-bar {
		background: #008571;
	}
	#nav {
		margin: -15px 0 0;
	}
	#sidebar .sidelist {
		display: block;
		text-align: left;
		padding: 0;
		margin: 0;
		float: none;
		letter-spacing: -5px;
		overflow: hidden;
	}
	#sidebar .sidelist li {
		padding: 0;
		letter-spacing: normal;
		display: block;
	}
	#sidebar .sidelist li a.active:after,
	#sidebar .sidelist li a:hover:after {
		left: 0;
	}
	#sidebar .sidelist li .image-holder {
		min-height:40px;
	}
	#sidebar .sidelist li a {
		display: block;
		padding: 5px 10px;
		position: relative;
		z-index: 99;
		text-align: center;
	}
}
@media screen and (max-width:768px) {
    .Recent ul li {
        display:block;
        margin:0 auto 10px;
    }
    .detail-block.login {
        padding:0;
    }
    .detail-block.login {

    }
	#sidebar {
		float: none;
		width: 100%;
		padding: 10px;
        position:relative !important;
        top:0 !important;
	}
	#sidebar .sidelist li {
		display: inline-block !important;
		vertical-align: top !important;
		width: 50%;
		margin: 0 0 5px;
	}
	#nav {
		margin: -55px 0 0;
	}
	#header {
		padding: 10px;
        position:relative !important;
	}
    .detail-block {
        padding:0;
    }
	.reports-table,
	.reports-table thead,
	.reports-table tbody,
	.reports-table th,
	.reports-table td,
	.reports-table tr { 
		display: block; 
	}
	/* Hide table headers (but not display: none;, for accessibility) */
	.reports-table thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	.reports-table tr { 
		border: 1px solid #ccc;
		margin:0 0 5px;
	}
	.reports-table tr td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		text-align: right;
		font-size: 11px;
		line-height: 14px;
	}
	.reports-table td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 13px;
		left: 10px;
		padding-right: 10px; 
		white-space: nowrap;
		font-size: 11px;
		line-height: 14px;
		font-weight: 700;
        text-align:left;
	} 
    .reports-table.authorization td:nth-of-type(1):before { content: "Full Name"; }
	.reports-table.authorization td:nth-of-type(2):before { content: "Designation"; }
	.reports-table.authorization td:nth-of-type(3):before { content: "Workplace"; }
	.reports-table.authorization td:nth-of-type(4):before { content: "THROUGH SMS"; }
	.reports-table.authorization td:nth-of-type(5):before { content: "VIA WEB PORTAL/ONLINE	"; }
	.reports-table.authorization td:nth-of-type(6):before { content: "THROUGH ANDROID APP"; }
	/*
	Label the data
	*/
	.reports-table td:nth-of-type(1):before { content: "Date"; }
	.reports-table td:nth-of-type(2):before { content: "CheckIn"; }
	.reports-table td:nth-of-type(3):before { content: "CheckOut"; }
	.reports-table td:nth-of-type(4):before { content: "Hours"; }
	.reports-table td:nth-of-type(5):before { content: "CheckIn Device"; }
	.reports-table td:nth-of-type(6):before { content: "CheckOut Device"; }
	.reports-table td:nth-of-type(7):before { content: "Reason for late"; }
	.list-table,
	.list-table thead,
	.list-table tbody,
	.list-table th,
	.list-table td,
	.list-table tr { 
		display: block; 
	}
	/* Hide table headers (but not display: none;, for accessibility) */
	.list-table thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	.list-table tr { 
		border: 1px solid #ccc;
		margin:0 0 5px;
	}
	.list-table tr td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		text-align: right;
		font-size: 13px;
		line-height: 16px;
	}
	.list-table td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 12px;
		left: 10px;
		padding-right: 10px; 
		white-space: nowrap;
		font-size: 13px;
		line-height: 16px;
		font-weight: 700;
	}
	/*
	Label the data
	*/
	.list-table td:nth-of-type(1):before { content: "Picture"; }
	.list-table td:nth-of-type(2):before { content: "Name"; }
	.list-table td:nth-of-type(3):before { content: "Designation"; }
	.list-table td:nth-of-type(4):before { content: "Employee ID"; }
	.list-table td:nth-of-type(5):before { content: "Date"; }
	.list-table td:nth-of-type(6):before { content: "Check In"; }
	.blocks-outer .columns-holder .column {
		width: 50%;
	}
	.jcf-scrollable {
		height:inherit;
	}
	.popup.login {
		display:none !important;
	}
	.qr-image-holder {
		display: none;
	}
	.leave-form.reports .fields-holder .field-frame {
		display: block;
		width: 100%;
	}
	.account-holder .open-close li .slide {
		padding: 20px 0 0;
	}
    .attendance-block {
        min-height:inherit;
    }
}
@media screen and (max-width:544px) {
	#sidebar {
		padding: 10px 10px 0;
	}
	#header h1 {
		font-size: 19px;
		line-height: 22px;
		float: none;
		margin: 0 0 10px;
	}
	#qr {
		overflow: hidden;
	}
	#qr img {
		margin: 0 auto;
		display: block;
	}
	#header .account-holder {
		text-align: center;
	}
	.columns-container .columns-holder .column {
		width: 100%;
	}
	.leave-form .fields-holder .field-frame label {
		display: block;
		margin: 0 0 10px;
		float: none;
	}
	.user-section .user-sidebar {
		float: none;
		max-width:100%;
		margin: 0 0 15px;
	}
	.blocks-outer .columns-holder .column {
		width: 100%;
	}
	.legend-list {
		display: none;
	}
}