﻿@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');
@font-face {
	font-family: 'lets_go_digitalregular';
	src: url('../fonts/lets_go_digital_regular-webfont.eot');
	src: url('../fonts/lets_go_digital_regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/lets_go_digital_regular-webfont.woff') format('woff'), url('../fonts/lets_go_digital_regular-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
html {
	height: 100%;
	margin: 0;
	padding: 0;
}
.clear-fix {
	clear: both;
}
body {
	font-family: 'Roboto', sans-serif;
	margin: 0;
	background: #fff;
}
 *::-webkit-scrollbar-track {
 background-color: #F5F5F5;
}
 *::-webkit-scrollbar {
 width: 4px;
 height: 4px;
 background-color: #F5F5F5;
}
 *::-webkit-scrollbar-thumb {
 background-color: #ff3737;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: 500;
}
select, input, label, p {
	font-weight: 400;
}
a {
	color: #a0a0a0;
	text-decoration: none;
}
.wrap {
	width: 100%;
}
.site-wrap {
	top: 122px;
	position: absolute;
	bottom: 0;
	height: 83%;
	width: 100%;
	z-index: -10;
}
.text-wrap {
	word-wrap: break-word;
	overflow: hidden;
	-ms-word-break: break-all;
	word-break: break-word;
}
.grd-col-truncate {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.header-logo-left {
	display: block;
	float: left;
}
.header-logo-right {
	display: block;
	float: right;
}
.section-logo {
	/* float: left; */
	/* height: 60px; */
	/* line-height: 60px; */
	width: 100%;
	z-index: 999999;
	position: relative;
	background-color: #fff;
	padding: 7px 0;
	display: flow-root;
}
.section-logo:after, .section-logo>.header-container:after {
	content: '';
	clear: both;
	display: block;
}
.section-logo>img {
}
.header-container {
	margin: 0 auto;
	width: 98%;
}
.container {
	margin: 0 auto;
	width: 98%;
}
.main {
	bottom: 0;
	float: left;
	height: auto;
	margin-bottom: auto;
	min-height: 500px;
	width: 100%;
}
.form-label {
	text-align: left;
	width: 100%;
}
.form-label p {
	color: #a0a0a0;
	font-size: 13px;
	margin: 0;
	width: auto;
}
.form-heading {
	color: #b1191b;
	font-weight: 600;
}
.heading-text {
	color: #333;
	margin-top: 0;
	font-size: 15px;
	background-color: #eee;
	border-bottom: 3px solid #ddd;
	padding: 14px 13px;
	text-transform: uppercase;
	letter-spacing: 0.8px;
}
.form-row {
	line-height: 30px;
	margin: 10px 0;
	width: 800px;
	font-size: 14px;
	color: #a0a0a0;
}
.form-control {
	height: 20px;
	border-radius: 2px;
	border: 1px solid #ddd;
	padding: 5px 10px 5px 10px;
	font-size: 13px;
	/* border-bottom: 1px solid #777; */
	font-weight: 400;
	outline: none;
	color: #555555;
	font-family: 'Roboto', sans-serif;
}
.form-control:focus, active {
	border: 1px solid #ffc5c5;
}
.pop-up-form-control {
	height: 15px;
	border-radius: 4px;
	border: 1px solid #d6d6d6;
	padding: 5px 10px 5px 10px;
	font-size: 14px;
	font-weight: 200;
	outline: none;
	color: #000;
}
.pop-up-form-control:focus, active {
	border: 1px solid #ffc5c5;
}
.form-row .text-area {
	border: 1px solid #d8d8d8;
	color: #5c5c5c;
	font-size: 12px;
	line-height: 20px;
	margin: 0;
	overflow-y: auto;
	padding: 1%;
}
.code-caption {
	color: #a0a0a0;
	font-size: 11px;
	margin-left: 10px;
	margin-top: 7px;
}
.form-btn-holder {
	height: 55px;
	line-height: 55px;
	width: 515px;
}
.form-btn:focus {
	-webkit-box-shadow: 0px 0px 2px 1px rgba(59,104,237,1);
	-moz-box-shadow: 0px 0px 2px 1px rgba(59,104,237,1);
	box-shadow: 0px 0px 2px 1px rgba(59,104,237,1);
}
.form-row > label {
	color: #a0a0a0;
	cursor: pointer;
	font-size: 14px;
	line-height: 25px;
}
.form-btn {
	/* background: url(../images/btn-red-bg.jpg); */
	background-size: auto 100%;
	outline: 0;
	border-radius: 3px;
	font-size: 12px;
	color: #fff;
	cursor: pointer;
	padding: 5px 13px;
	text-transform: uppercase;
	font-weight: 500;
	font-family: 'Roboto', sans-serif;
	background-color: #0099ff;
	border: 1px solid #0193f5;
	border-bottom: 3px solid #0580d2;
	transition: all .5s;
}
.form-btn:hover {
	/* background: url(../images/btn-red-hover-bg.jpg); */
	/*background-size: auto 100%;*/
	/* background-color: #1f99cc; */
	opacity: .8;
}
.btn-blue {
	outline: 0;
	border-radius: 3px;
	font-size: 12px;
	color: #fff;
	padding: 5px 13px;
	transition: all .5s;
	font-weight: 500;
	font-family: 'Roboto', sans-serif;
	background-color: #0099ff;
	border: 1px solid #0193f5;
	border-bottom: 3px solid #0580d2;
	cursor: pointer;
}
.btn-blue:hover {
	opacity: .8;
}
.btn-green {
	outline: 0;
	border-radius: 3px;
	font-size: 12px;
	color: #fff;
	padding: 5px 13px;
	transition: all .5s;
	font-weight: 500;
	font-family: 'Roboto', sans-serif;
	background-color: #19b84e !important;
	border: 1px solid #14ab46;
	border-bottom: 3px solid #13983f;
	cursor: pointer;
}
.btn-green:hover {
	opacity: .8;
}
.btn-red {
	outline: 0;
	border-radius: 3px;
	font-size: 12px;
	color: #fff;
	padding: 5px 13px;
	transition: all .5s;
	font-weight: 500;
	font-family: 'Roboto', sans-serif;
	background-color: #ff3737 !important;
	border: 1px solid #ef3232;
	border-bottom: 3px solid #b93535;
	cursor: pointer;
}
.btn-red:hover {
	opacity: .8;
}
.search-area {
	width: 100%;
	height: 30px;
	margin: 8px 0 8px 0;
	line-height: 30px;
	float: left;
}
.search-input-control {
	width: 11%;
	height: 16px;
	margin-right: 5px;
	font-size: 11px;
	border-radius: 2px;
	border: 1px solid #d6d6d6;
	outline: 0;
	display: inline-block;
}
.search-input-control:focus {
	border: 1px solid #ffabb1;
}
.search-control {
	float: right;
	text-align: right;
	width: 86%;
}
.radio-control {
	float: left;
	width: 14%;
}
.radio-control p {
	display: inline-block;
	font-size: 11px;
	margin: 0;
	padding-right: 5px;
}
.radio-control input[type="radio"] {
	display: inline-block;
	margin: 0;
	vertical-align: middle;
}
.search-select-control {
	width: 11%;
	margin-right: 5px;
	font-size: 11px;
	height: 20px;
	border-radius: 2px;
	border: 1px solid #ddd;
	color: #555555;
	outline: 0;
	display: inline-block;
}
.search-select-control:focus {
	border: 1px solid #ffabb1;
}
.search-btn {
	background: none;
	background-size: auto 100%;
	border: 0;
	outline: 0;
	color: #fff;
	cursor: pointer;
	vertical-align: middle;
	width: 35px;
	height: 18px;
	line-height: 18px;
	margin-right: 5px;
	border-radius: 20px;
	text-transform: uppercase;
	background-color: #00a9ff;
	font-size: 11px;
	font-weight: 500;
	font-family: 'Roboto', sans-serif;
	transition: all .5s;
}
.search-btn:hover {
	/* background: none; */
	/* background-color: #1f99cc; */
	background-size: auto 100%;
	/* transition: all .7s; */
	opacity: .8;
}
.search-control p {
	display: inline-block;
	font-size: 11px;
	margin: 0;
	padding-right: 5px;
	width: auto;
}
.grid-header {
	float: left;
	margin-top: 10px;
	width: 100%;
}
.grid-header-text {
	border-bottom: 1px solid #deeded;
	color: #3d3d3d;
	font-weight: 400;
	margin: 0;
}
.gridview-container {
	float: left;
	width: 100%;
	margin-bottom: 50px;
}
.gridview {
	color: #8C8C8C;
	border: 0 !important;
	border-collapse: collapse;
}
.gridview td {
	border: 0
}
.gridview-cell-header {
	padding-left: 5px;
	border-top: 3px solid #e0751f;
	text-transform: uppercase;
	padding: 0px 7px;
	font-weight: 500;
	margin: 0;
}
.grid-child .gridview-cell-header {
	border-top: 3px solid #506991!important;
}
.grid-child .gridview-row-header {
	background-color: #607ba7;
}
.gridview-cell {
	padding-left: 5px;
}
.grid-row td, .grid-alternaterow td {
	padding: 0px 7px;
	border-bottom: 1px solid #e4e0e0!important;
	border-left: 0px !important;
	border-right: 0px !important;
	border-top: 1px solid #e4e0e0!important;
}
.gridview-row-header th {
	border-top: 3px solid #e0751f!important;
	border-left: 0px !important;
	border-right: 0px !important;
	border-bottom: 0px !important;
}
.grid-row {
	background-color: #fff;
	height: 45px;
	font-size: 11px;
	color: #274848;
}
.grid-alternaterow {
	background-color: #f7f7f7;
	height: 45px;
	font-size: 11px;
	color: #274848;
}
.gridview-row-header {
	background-color: #f78223;
	color: #fff;
	font-size: 11px;
	height: 45px;
	margin: 0;
}
.gridview-row-header-center {
	text-align: center !important;
}
.grid-btn {
	background: none;
	background-size: auto 100%;
	border: 0;
	outline: 0;
	border-radius: 20px;
	font-size: 11px;
	color: #fff;
	cursor: pointer;
	padding: 3px 10px 2px 10px;
	text-transform: uppercase;
	background-color: #00a9ff;
	font-weight: 500;
	font-family: 'Roboto', sans-serif;
	transition: all .5s;/* line-height: 15px; */
}
.btn-image-gray {
	/* background: url(../images/btn-gray-bg.png); */
	background-size: auto 100%;
	border-radius: 3px;
	font-size: 14px;
	color: #777;
	cursor: pointer;
	padding: 4px 10px;
	/* border: 1px solid #D6D6D6; */
	outline: 0;
	box-shadow: none !important;
	transition: all .5s;
	background-color: #ddd !important;
	border: 1px solid #d8d8d8;
	border-bottom: 3px solid #ccc;
	text-transform: uppercase;
	font-weight: 500;
	font-family: 'Roboto', sans-serif;
}
.update-btn {
	text-transform: uppercase;
	background-image: url(../images/update-15x15.png)!important;
	background-color: #0099ff !important;
	background-size: 12px !important;
	background-position: 13% 50% !important;
	background-repeat: no-repeat !important;
	padding: 4px 7px 4px 25px !important;
	font-size: 10px !important;
	border-radius: 2px !important;
	font-weight: 600;
	transition: all .5s;
}
.cust-his-btn {
	background-image: url(../images/cust-his-btn.png)!important;
}
.cust-his-btn:hover {
	background-image: url(../images/cust-his-btn-hover.png)!important;
}
.update-btn:hover {
	opacity: .8;
}
.btn-image-red {
	outline: 0;
	border-radius: 3px;
	font-size: 14px;
	color: #fff;
	cursor: pointer;
	padding: 4px 10px;
	box-shadow: none !important;
	text-transform: uppercase;
	background-color: #0099ff;
	border: 1px solid #0193f5;
	border-bottom: 3px solid #0580d2;
	transition: all .5s;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
}
.btn-image-gray:hover {
	/*background: url(../images/btn-gray-hover-bg.png);*/
	background-size: auto 100%;
	opacity: .8;
}
.btn-image-red:hover {
	/*background: url(../images/btn-red-hover-bg.jpg);
	background-size: auto 100%;*/
	opacity: .8;
}
.btn-image-red:focus {
	-webkit-box-shadow: 0px 0px 2px 1px rgba(59,104,237,1);
	-moz-box-shadow: 0px 0px 2px 1px rgba(59,104,237,1);
	box-shadow: 0px 0px 2px 1px rgba(59,104,237,1);
}
.btn-image-gray:focus {
	-webkit-box-shadow: 0px 0px 2px 1px rgba(59,104,237,1);
	-moz-box-shadow: 0px 0px 2px 1px rgba(59,104,237,1);
	box-shadow: 0px 0px 2px 1px rgba(59,104,237,1);
}
.grid-btn:hover {
	/* background: none; */
	/* background-color: #1f99cc; */
	background-size: auto 100%;
	/* transition: all .7s; */
	opacity: .8;
}
.gridview table a:hover {
	background: #b1191b none repeat scroll 0 0;
}
.grid-bottom-control {
	float: left;
	margin: 0;
	padding: 0;
	width: 100%;
}
.grid-btn:focus {
	-webkit-box-shadow: 0px 0px 2px 1px rgba(59,104,237,1);
	-moz-box-shadow: 0px 0px 2px 1px rgba(59,104,237,1);
	box-shadow: 0px 0px 2px 1px rgba(59,104,237,1);
}
.search-btn:focus {
	-webkit-box-shadow: 0px 0px 2px 1px rgba(59,104,237,1);
	-moz-box-shadow: 0px 0px 2px 1px rgba(59,104,237,1);
	box-shadow: 0px 0px 2px 1px rgba(59,104,237,1);
}
.grid-count {
	font-size: 13px;
	text-align: right;
	margin-top: 5px;
	margin-bottom: 25px;
	width: 100%;
	float: left;
}
div#divCount {
	text-align: right!important;
	font-size: 11px!important;
	padding: 10px 10px!important;
	box-sizing: border-box;
}
select:focus {
	border-color: #fa9397;
	outline: medium none;
}
footer {
	background-color: #eee;
	border-top: 1px solid #e6e1e1;
	bottom: 0;
	font-size: 12px;
	text-align: center;
	width: 100%;
	position: fixed;
}
i.fa.fa-angle-down {
	margin-left: 5px;
}
/*login-page*/



.full-width {
	background: url(../images/login-bg.jpg);
	width: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	height: 100%;
	top: 0;
	bottom: 0;
	position: absolute;
	min-width: 1000px;
}
.form-area {
	width: 400px;
	float: right;
	position: relative;
	height: 100%;
	right: 7%;
}
.main-logo {
	width: 45%;
	margin: auto;
	padding: 0;
	float: left;
	position: relative;
	height: 100%;
	display: block;
	left: 5%;
}
.main-logo img {
	width: 100%;
	margin-top: auto;
	margin-bottom: auto;
	vertical-align: middle;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
}
.login-form {
	width: 400px;
	background: #fff;
	/* border: 1px solid #D4D4D4; */
	border-radius: 5px;
	vertical-align: middle;
	top: 0;
	bottom: 0;
	margin-top: auto;
	margin-bottom: auto;
	position: absolute;
	height: 423px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0px 0px 6px 3px rgba(0, 0, 0, 0.16);
}
.form-logo img {
	padding: 4%;
}
.form-logo {
	background-color: #F4F4F4;
	border-bottom: 1px solid #E4E4E4;
	width: 100%;
	border-radius: 5px 5px 0px 0px;
	text-align: center;
}
.login-control {
	width: 100%;
	background-color: #fff;
	border-radius: 0 0 5px 5px;
}
.login-control .btn-control {
	padding: 2% 10% 0% 10%;
	margin: 0;
}
.login-form-control {
	width: 100%;
	box-sizing: border-box;
	border-width: 1px;
	padding: 10px 20px 10px 49px;
	margin-top: 5%;
	/* border-bottom: 2px solid #8a8a8a; */
	background-position: left center;
	background-size: contain;
	border-radius: 2px;
	border: 1px solid #ddd;
	outline: none;
	color: #555555;
	font-family: 'Roboto', sans-serif;
}
.username {
	background-image: url(../images/user-name.png);
	background-repeat: no-repeat;
}
.password {
	background-image: url(../images/key.png);
	background-repeat: no-repeat;
}
.pin {
	background-image: url(../images/pin.png);
	background-repeat: no-repeat;
}
.login-control input[type="text"]:focus {
	border: 1px solid #E76060;
	outline: 0;
}
.text-control {
	padding: 10% 10% 7% 10%;
	margin: 0;
}
.resetpass-ys, .resetpass-no {
	padding-right: 5px;
	border-radius: 3px;
	padding: 8px 16px;
	height: 30px !important;
	color: #fff;
	cursor: pointer;
	transition: all .5s;
	text-transform: uppercase;
	font-weight: 500;
	font-family: 'Roboto', sans-serif;
	line-height: 12px;
}
.resetpass-no {
	background-color: #ff3737 !important;
	border: 1px solid #ef3232;
	border-bottom: 3px solid #b93535;
}
.resetpass-ys {
	background-color: #0099ff;
	border: 1px solid #0193f5;
	border-bottom: 3px solid #0580d2;
}
.login-btn {
	padding: 8px 0 8px 0;
	color: #fff;
	border-radius: 3px;
	font-size: 16px;
	cursor: pointer;
	text-transform: uppercase;
	font-weight: 600;
	background-color: #0099ff;
	border: 1px solid #0193f5;
	border-bottom: 3px solid #0580d2;
	font-family: 'Roboto', sans-serif;
	letter-spacing: 1px;
	transition: all .5s;
	background-image: url(../images/login-icon.png);
	background-repeat: no-repeat;
	background-position: 34% 50%;
}
.login-btn:hover {
	opacity: .8;
}
.login-btn:focus, active {
	outline: 0;
}
.btn-control {
	padding: 5% 10% 0% 10%;
	margin: 0;
}
.forgotpassword-control {
	color: #333;
	margin-top: 10px;
	font-size: 14px;
	text-decoration: none;
	vertical-align: top;
}
.label-control {
	padding: 5% 10% 15% 10%;
	margin: 0;
}
/* ==========================================================================
  Navigation
   ========================================================================== */
.navigation {
	background-color: #fff;
	color: #fff;
	font-size: 14px;
	height: 60px;
	width: 100%;
	line-height: 60px;
	border-top: 1px solid #f1f1f1;
	border-bottom: 1px solid #f1f1f1;
	box-shadow: 0px 1px 9px 0px rgba(0, 0, 0, 0.22);
}
.nav {
	display: inline-block;
	float: left;
	height: 60px;
	line-height: 60px;
	list-style: outside none none;
	margin: 0;
	padding: 0;
	text-align: left;
	width: 85%;
}
.nav li {
	cursor: pointer;
	display: inline-block;
	float: left;
}
.nav li a {
	color: #666;
	text-decoration: none;
	text-transform: uppercase;
	padding: 0 10px 0 18px;
	transition: all .5s;
}
.nav>li>a {
	font-weight: 500;
}
.nav li:hover {
	background-color: #42b4f7;
	transition: all .5s;
	color: #fff;
}
.nav li:hover a {
	color: #fff;
}
.inner-submenu {
	/* display: none; */
	position: absolute;
	left: 100%;
	background-color: #2c81b3;
	top: 0;
	padding: 0;
	width: 90%;
	visibility: hidden;
	opacity: 0;
	transform: translateX(-8em);
	z-index: -9999999;
	transition: all .5s;
}
.inner-submenu li:hover {
	background-color: #2876a5 !important;
}
ul.submenu li:hover .inner-submenu {
	/* display: block; */
	visibility: visible;
	opacity: 1;
	transform: translateX(0em);
	transition: all .5s;
}
.submenu {
	background-color: #308fc7;
	line-height: 35px;
	list-style: outside none none;
	padding: 0;
	position: absolute;
	left: auto;
	/* margin-left: -22px; */
	visibility: hidden;
	opacity: 0;
	transform: translateY(-8em);
	z-index: -267;
	transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
	width: 19em;
	font-size: 13px;
}
.nav li:hover .submenu {
	visibility: visible;
	opacity: 1;
	z-index: 1;
	transform: translateY(0%);
	transition-delay: 0s, 0s, 0.3s;/* box-shadow: 0px 5px 4px 2px rgba(0, 0, 0, 0.18); */
}
.submenu li {
	/* border-left: 4px solid #ff4f57; */
	display: block;
	float: none;
}
.submenu li a {
	border: 0 none !important;
	margin: 0 0 0 25px;
	padding: 0;
	color: #fff;
}
.submenu li:hover {
	background-color: #2c81b3;/* border-left: 0px solid #ab131a; */
}
.submenu li:hover a {
/*color: #fff*/
}
nav li:hover .submenu li {
	display: block;
	padding: 0 10px;
	position: relative;
}
.user-nav {
	float: right;
	height: 60px;
	line-height: 60px;
	margin: 0;
	padding: 0;
	width: 15%;
	text-align: right;
}
.user-nav li {
	cursor: pointer;
	display: inline-block;
	list-style: outside none none;
	text-align: right;
	border-left: 1px solid #f1f1f1;
}
.user-nav li a {
	color: #666;
	padding: 0 10px;
	text-decoration: none;
	width: 100%;
	text-transform: uppercase;
}
.user-nav li a img {
	vertical-align: middle;
	margin: 0 6px 0 0;
}
.user-submenu {
	background-color: #308fc7;
	display: block;
	line-height: 35px;
	text-align: left;
	padding: 0;
	margin: 0;
}
.user-submenu li {
	background-color: #308fc7;
	display: none;
	text-align: left;
	width: 100%;
	border: 0;
}
.user-submenu li a {
	border: 0 none;
	color: #fff;
}
.user-nav li:hover {
	color: #ccc;
}
.user-nav li:hover .user-submenu li {
	display: block;
	position: relative;
}
.user-submenu li:hover {
	background-color: #2c81b3;
}
li.master-ico ul.submenu>li:last-child, li.manage-voc-ico ul.submenu>li:last-child {
	background-color: rgba(0, 0, 0, 0.27);
}
/* =============================
	   NEW MENU WITH ICONS
============================= */
ul.nav li a::before {
	margin-left: -10px;
	margin-right: 8px;
	vertical-align: middle;
	background-repeat: no-repeat;
	background-position: left center;
	width: 20px;
	height: 20px;
	display: inline-block;
	content: '';
	transition: all .5s;
}
ul.nav li:hover>a::before {
	transition: all .5s;
}
ul.nav .manage-voc-ico>a::before {
	background-image: url(../images/nav/manage-ico-14x14.png);
}
ul.nav .manage-voc-ico:hover>a::before {
	background-image: url(../images/nav/manage-ico-hover-14x14.png);
}
ul.nav .master-ico>a::before {
	background-image: url(../images/nav/master-ico-14x14.png);
}
ul.nav .master-ico:hover>a::before {
	background-image: url(../images/nav/master-ico-hover-14x14.png);
}
ul.nav .archive-ico>a::before {
	background-image: url(../images/nav/archive-ico-14x14.png);
}
ul.nav .cticmt-ico>a::before {
	background-image: url(../images/nav/cticmt-ico-14x14.png);
}
ul.nav .archive-ico:hover>a::before {
	background-image: url(../images/nav/archive-ico-hover-14x14.png);
}
ul.nav .report-ico>a::before {
	background-image: url(../images/nav/report-ico-14x14.png);
}
ul.nav .report-ico:hover>a::before {
	background-image: url(../images/nav/report-ico-hover-14x14.png);
}
ul.nav .setting-ico>a::before {
	background-image: url(../images/nav/setting-ico-14x14.png);
}
ul.nav .setting-ico:hover>a::before {
	background-image: url(../images/nav/setting-ico-hover-14x14.png);
}
ul.nav .chat-ico>a::before {
	background-image: url(../images/nav/chat-ico-14x14.png);
}
ul.nav .chat-ico:hover>a::before {
	background-image: url(../images/nav/chat-ico-hover-14x14.png);
}
ul.nav .myinfo-ico>a::before {
	background-image: url(../images/nav/myinfo-ico-14x14.png);
}
ul.nav .myinfo-ico:hover>a::before {
	background-image: url(../images/nav/myinfo-ico-hover-14x14.png);
}
ul.nav .sms-voc-ico>a::before {
	background-image: url(../images/nav/sms-voc-14x14.png)
}
ul.nav .unassigned-voc-ico>a::before {
	background-image: url(../images/nav/unassign-voc-14x14.png)
}
ul.nav .pending-action-ico>a::before {
	background-image: url(../images/nav/pending-voc-14x14.png)
}
ul.nav .pending-reg-ico>a::before {
    background-image: url(../images/nav/pending-reg-voc-14x14.png);
}
ul.nav .open-voc-ico>a::before {
	background-image: url(../images/nav/open-voc-14x14.png)
}
ul.nav .overdue-voc-ico>a::before {
	background-image: url(../images/nav/overdue-voc-14x14.png)
}
ul.nav .followup-voc-ico>a::before {
	background-image: url(../images/nav/followup-voc-14x14.png)
}
ul.nav .email-voc-ico>a::before {
	background-image: url(../images/nav/email-voc-14x14.png)
}
ul.nav .unallocated-voc-ico>a::before {
	background-image: url(../images/nav/unallocated-voc-14x14.png)
}
ul.nav .formy-action-ico>a::before {
	background-image: url(../images/nav/formy-action-voc-14x14.png)
}
ul.nav .escalated-voc-ico>a::before {
	background-image: url(../images/nav/escalated-voc-14x14.png)
}
ul.nav .dashboard-ico>a::before {
	background-image: url(../images/nav/dash-board-14x14.png)
}
ul.nav .master-ico .submenu li a[href="model"]::before {
	background-image: url(../images/nav/model-ico-14x14.png)
}
ul.nav .master-ico .submenu li a[href="zone"]::before {
	background-image: url(../images/nav/zone-ico-14x14.png)
}
ul.nav .master-ico .submenu li a[href="state"]::before {
	background-image: url(../images/nav/state-ico-14x14.png)
}
ul.nav .master-ico .submenu li a[href="city"]::before {
	background-image: url(../images/nav/city-ico-14x14.png)
}
ul.nav .master-ico .submenu li a[href="agent"]::before {
	background-image: url(../images/nav/agent-ico-14x14.png)
}
ul.nav .master-ico .submenu li a[href="tkm-contact"]::before {
	background-image: url(../images/nav/tkmcontact-ico-14x14.png)
}
ul.nav .master-ico .submenu li a[href="area-manager"]::before {
	background-image: url(../images/nav/areamanager-ico-14x14.png)
}
ul.nav .master-ico .submenu li a[href="territory-manager"]::before {
	background-image: url(../images/nav/territory-manager-ico-14x14.png)
}
ul.nav .master-ico .submenu li a[href="email-Template"]::before {
	background-image: url(../images/nav/email-template-ico-14x14.png)
}
ul.nav .master-ico .submenu li a[href="sms-Template"]::before {
	background-image: url(../images/nav/sms-template-ico-14x14.png)
}
ul.nav .master-ico .submenu li a[href="users"]::before {
	background-image: url(../images/nav/users-ico-14x14.png)
}
ul.nav .master-ico .submenu li a[href="keyword"]::before {
	background-image: url(../images/nav/keyword-ico-14x14.png)
}
ul.nav .master-ico .submenu li a[href="dealer-repository"]::before {
	background-image: url(../images/nav/dealer-repository-ico-14x14.png)
}
ul.nav .report-ico .submenu li a::before {
	background-image: url(../images/nav/all-india-voc-rpt-14x14.png)
}
ul.nav .report-ico .submenu li a[href="zonal-voc-rpt"]::before {
	background-image: url(../images/nav/zonal-voc-rpt-14x14.png)
}
ul.nav .report-ico .submenu li a[href="agent-rpt"]::before {
	background-image: url(../images/nav/agent-rpt-ico-14x14.png)
}
ul.nav .report-ico .submenu li a[href="cac-tat-rpt"]::before {
	background-image: url(../images/nav/cac-tat-rpt-14x14.png)
}
ul.nav .setting-ico .submenu li a[href="general-config"]::before {
	background-image: url(../images/nav/general-config-ico-14x14.png)
}
ul.nav .setting-ico .submenu li a[href="mail-configuration"]::before {
	background-image: url(../images/nav/mail-configuration-14x14.png)
}
/* ==========================================================================
  Loader
   ========================================================================== */
#loader {
	position: absolute;
	width: 500px;
	height: 244px;
	border: 0;
	display: none;/*z-index: 1100;*/
}
.mask {
	position: absolute;
	/*z-index: 998;*/
	background-color: #000000;
	display: none;
}

@media only screen and (min-width: 1018px) and (max-width: 1500px) {
header {
	float: left;
	width: 100%;
	position: fixed;
	top: 0;
	background: #fff;
	z-index: 1;
}
.navigation {
/* float: left; */
}
}

@media only screen and (min-width: 320px) and (max-width: 1024px) {
.site-wrap {
	width: 1000px !important;
}
.container {
	width: 965px;
}
.left-navigations {
	width: 200px !important;
}
.workspace {
	width: 78% !important;
}
body {
	float: left;
}
.navigation {
	display: inline-table;
}
}

@media only screen and (min-width: 320px) and (max-width: 1017px) {
header {
	display: inline-block;
	width: 1000px;
}
}

@media only screen and (min-width: 320px) and (max-width: 1010px) {
header {
	position: relative !important;
}
}
/* ==========================================================================
  Workspace
   ========================================================================== */
.workspace {
	box-shadow: 25px -1px 32px -32px rgba(189, 189, 189, 0.67) inset;
	padding: 0 1%;
	width: 80%;
	float: right;
	min-height: 525px;
}
.left-navigations {
	float: left;
	width: 18%;
	font-size: 14px;
	margin: 0px 0px 0px 0px;
	font-weight: bold;
	height: 490px;
	position: fixed;
	height: 78%;
	z-index: 1000;
	background: #fff;
	overflow-x: hidden;
	overflow-y: auto;
}
.left-navigation-header {
	width: 95%;
	display: block;
	height: 35px;
	line-height: 35px;
	background: #f78223;
	padding: 0px 0px 0 5%;
	color: #fff;
	font-weight: 500;
}
.horizontal-form {
	width: 100%;
}
.form-section {
	float: left;
	height: 30px;
	width: 30%;
	padding: 17px 0;
}
.form-section-btn {
	float: left;
	height: 65px;
	line-height: 65px;
	text-align: center;
	width: 5%;
}
.workspace-search-btn {
	background: none;
	background-size: auto 100%;
	border: 0;
	outline: 0;
	border-radius: 20px;
	color: #fff;
	cursor: pointer;
	padding: 5%;
	width: 50px;
	height: 33px;
	/* line-height: 28px; */
	background-color: #00a9ff;
	font-size: 14px;
	font-weight: 500;
	font-family: 'Roboto', sans-serif;
	transition: all .5s;
}
.workspace-search-btn:hover {
	/* background: none; */
	/* background-color: #1f99cc; */
	background-size: auto 100%;
	/* transition: all .5s; */
	opacity: .8;
}

@media only screen and (min-width: 320px) and (max-width: 1010px) {
.left-navigations {
	position: relative;
	z-index: -10;
	max-height: 459px;
}
}

@media only screen and (min-width: 1010px) and (max-width: 1024px) {
.left-navigations {
	height: 77% !important;
}
}
/*++++++++++++++++++++++++++++++++CHAT
======================================*/




.chat-box-header {
	background-color: #4e4e4e;
	display: block;
	width: 100%;
}
.chat-box-container {
	border-radius: 5px;
	display: table;
	margin: 0 auto;
	width: 550px;
	box-shadow: 0px 5px 7px 1px rgba(0, 0, 0, 0.21);
}
.chat-form-heading {
	background-color: #e6e2e2;
	height: 25px;
	line-height: 27px;
	cursor: move;
	border-radius: 7px 6px 0 0;
}
.chat-form-heading span {
	font-size: 13px;
	font-weight: 500;
	color: #717171;
	margin: 0 0 0 20px;
}
.user-online {
	width: 8px;
	height: 8px;
	background: #67bb59;
	border-radius: 5px;
	border: 1px solid #fff;
	position: absolute;
	bottom: 0;
	right: 0;
}
.chat-box-header {
}
.chat-heading-text {
	color: #fff;
	/* float: left; */
	margin: 0;
	text-align: left;
	width: 100%;
	text-indent: 20px;
	font-size: 14px;
	padding: 10px 0;
	font-weight: 500;
	text-transform: uppercase;
}
.chat-area {
	margin: 0;
	padding: 0;
	width: 100%;
}
.online-community {
	background-color: #fff;
	float: left;
	height: 353px;
	margin: 0;
	overflow-y: auto;
	padding: 0;
	width: 30%;
	border-right: 1px solid #eee;
	box-sizing: border-box;
	overflow-x: hidden;
}
.message-area {
	float: left;
	height: 352px;
	margin: 0;
	padding: 0;
	width: 70%;
	overflow-y: auto;
	background-color: #f6f6f6;
}
.chat-controls-area {
	float: left;
	margin: 0;
	padding: 2%;
	width: 100%;
	box-sizing: border-box;
	background: #e9e9e9;
	border-top: 1px solid #dde6fb;
}
.chat-btn-icon {
	margin-right: 5px;
}
.send-msg {
	width: 81.5%;
	display: inline-block;
}
.send-msg > input[type="text"] {
	padding: 8px 20px;
	border-radius: 40px;
}
.send-btn {
	display: inline-block;
	margin-left: 10px;
}
.chat-icon {
	color: #fff;
	float: left;
	text-align: center;
	width: 10%;
}
.chat-close i {
	color: #fff;
	font-weight: 100 !important;
	font-size: 13px;
}
.chat-close {
	color: #fff;
	cursor: pointer;
	float: right;
	text-align: center;
	width: 5%;/* background-color: #d2cece; */
}
.chat-window-size {
	color: #fff;
	cursor: pointer;
	float: right;
	text-align: center;
	width: 5%;/* background-color: #d2cece; */
}
.chat-close-btn {
	color: #fff;
	text-decoration: none;
}
.user-available {
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	-moz-border-right-colors: none;
	-moz-border-top-colors: none;
	background: #FFFFFF none repeat scroll 0 0;
	border-color: rgba(204, 204, 204, 0.19);
	border-image: none;
	border-style: solid;
	border-width: 1px 0;
	cursor: pointer;
	font-size: 12px;
	height: 32px;
	line-height: 32px;
	outline: 0 none;
	padding: 8px 0 8px 5px;
	border-left: 2px solid #DEE2E7;
}
.user-available:visited {
	background: #ccc none repeat scroll 0 0;
}
.user-icon {
	background-image: url(../images/user-name.png);
	border-radius: 20px;
	color: #ffffff;
	float: left;
	height: 30px;
	line-height: 18px;
	text-align: center;
	width: 30px;
	font-size: 15px;
	border: 2px solid #fff;
	margin-left: 20px;
	position: relative;
	background-position: center;
}
.user-name {
	float: left;
	font-weight: 500;
	margin-left: 5px;
	width: 90px;
	white-space: nowrap;
	overflow: hidden !important;
	text-overflow: ellipsis;
	color: #444;
}
.user-available:hover {
	background-color: #0099ff;
	border-left: 0;
	color: #fff;
}
.user-active .user-name, .user-available:hover .user-name {
	color: #fff
}
.user-active {
	background-color: #0099ff !important;
	color: #fff;
}
.chat-btn {
	border-radius: 34px;
	color: #fff;
	cursor: pointer;
	font-size: 12px;
	margin: 0;
	outline: 0 none;
	padding: 10px 15px;
	text-decoration: none;
	background-color: #0099ff;
	border: 1px solid #0193f5;
	border-bottom: 3px solid #0580d2;
	font-family: 'Roboto', sans-serif;
	transition: all .5s;
	text-transform: uppercase;
	font-weight: 500;
}
.chat-btn:hover {
	/* background: #C31118 none repeat scroll 0 0; */
	opacity: .8;
}
.available-user {
	list-style: outside none none;
	margin: 0;
	padding: 0;
	width: 100%;
}
.available-user li {
	margin: 0;
	padding: 10px 0;
	width: 100%;
	background: #dee2e7;
	border: 0;
}
.chat-reply-message > .chat-by {
	color: #FCFCFC !important;
}
.chat-by {
	font-size: 12px;
	font-weight: 700;
	color: #212121;
}
.chat-user-message {
	background: #FFFFFF;
	padding: 5px;
	width: 80%;
	margin: 10px 15px;
	text-align: left;
	float: left;
	border-radius: 3px;
}
.chat-reply-message {
	background: #4E4E4E;
	padding: 5px;
	width: 80%;
	margin: 10px 15px;
	text-align: left;
	float: right;
	border-radius: 3px;
}
.chat-message {
	font-size: 12px;
	padding: 5px 5px;
	color: #212121;
	border-top: 1px solid#889BAD;
}
.chat-reply-message > .chat-message {
	color: #FCFCFC;
}
.chat-time {
	float: right;
}
/* ==========================================================================
  allocate-popup
   ========================================================================== */
.pop-up {
	width: 800px;
	margin: 0 auto;
	border: 1px solid #ccc;
	border-width: 1px;
	border-radius: 5px;
	background-color: #ffffff;
	-webkit-box-shadow: 0px 0px 38px 0px rgba(87, 87, 87, 0.88);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	-moz-box-shadow: 0px 0px 38px 0px rgba(87, 87, 87, 0.88);  /* Firefox 3.5 - 3.6 */
	/*box-shadow: 0px 0px 13px 0px rgba(204, 204, 204, 0.71);  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */

	box-shadow: 0px 0px 38px 0px rgba(87, 87, 87, 0.88);
	margin-top: 0%;
}
.popup-form-row {
	float: left;
	height: auto;
	line-height: 30px;
	margin: 5px 0px;
	width: 100%;
}
.pop-up-label {
	color: #3d3d3d;
	float: left;
	font-size: 13px;
	width: 87px;
}
.pop-up-form {
	float: left;
	margin: 10px 0 0;
	width: 100%;
}
.popup-btn-holder {
	border-top: 1px solid rgba(204, 204, 204, 0.46);
	float: left;
	height: auto;
	padding: 10px 2%;
	text-align: right;
	width: 96%;
}
.pop-up-form-left {
	width: 49%;
	float: left;
	display: block;
}
.pop-up-form-bottom {
	display: table;
	width: 100%;
}
/* ==========================================================================
   POPUP COMMON STYLE
   ========================================================================== */	
.popup-logo {
	margin: 10px 0;
	text-align: center;
}
.popup-heading-text {
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	-moz-border-right-colors: none;
	-moz-border-top-colors: none;
	background: #ffffff none repeat scroll 0 0;
	border-color: #d8d8d8;
	border-image: none;
	border-style: solid;
	border-width: 1px 0;
	box-shadow: 0 2px 17px -4px rgba(204, 204, 204, 0.71);
	font-size: 20px;
	font-weight: 600;
	margin: 0;
	padding: 5px 0;
	text-align: center;
}
.popup-heading {
	background: #f4f4f4 none repeat scroll 0 0;
	padding: 10px 0 0;
	width: 100%;
}
.pop-wrap {
	margin: 1% 2%;
}
.sm-pop-wrap {
	margin: 0 4%;
}
.popup-label {
	color: #3d3d3d;
	font-size: 12px;
	margin: 10px 0;
}
/* ==========================================================================
   Allocate VOC popup
   ========================================================================== */	

.select-area {
	border: 1px solid #ccc;
	margin-top: 4%;
	width: 100%;
}
.pop-up-select {
	cursor: pointer;
}
.file-attachment {
	border: 1px solid #E2E2E2;
	padding: 0px 16px 0px 5px;
	position: relative;
	background: #f5f5f5;
}
.file-attachment:after {
	content: "";
	display: block;
	background: url(../images/file-bg-20x9.png) no-repeat 100%;
	width: 19px;
	height: 15px;
	position: absolute;
	bottom: -4px;
	right: -1px;
}
.file-attachment a {
	color: #6D6D6D;
	font-size: 12px;
	font-weight: bold;
}
.popup-accordion {
	display: table;
	border: 1px solid #E2E2E2;
	margin: 10px 0;
	border-radius: 3px;
	background: #FFF;
	width: 99.4%;
	float: left;
}
/* ==========================================================================
   VOC-Allocate popup
   ========================================================================== */	
.form-left {
	float: left;
	margin: 15px 0;
	overflow-y: auto;
	width: 49%;
}
.form-right {
	float: left;
	margin-left: 1%;
	width: 50%;
}
ul.popup-tabs {
	border-bottom: 1px solid #999999;
	border-left: 1px solid #999999;
	float: left;
	height: 32px;
	list-style: outside none none;
	margin: 10px 0 0;
	padding: 0;
	width: 100%;
}
ul.popup-tabs li {
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	-moz-border-right-colors: none;
	-moz-border-top-colors: none;
	background: #eeeeee none repeat scroll 0 0;
	border-color: #999999 #999999 #999999 -moz-use-text-color;
	border-image: none;
	border-style: solid solid solid none;
	border-width: 1px 1px 1px medium;
	cursor: pointer;
	float: left;
	font-size: 14px;
	height: 31px;
	line-height: 31px;
	margin: 0;
	overflow: hidden;
	padding: 0 21px;
	position: relative;
}
ul.popup-tabs li:hover {
	background: #cccccc none repeat scroll 0 0;
}
ul.popup-tabs li.active {
	background: #ffffff none repeat scroll 0 0;
	border-bottom: 1px solid #ffffff;
}
.tab_container {
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	-moz-border-right-colors: none;
	-moz-border-top-colors: none;
	background: #ffffff none repeat scroll 0 0;
	border-color: -moz-use-text-color #999999 #999999;
	border-image: none;
	border-style: none solid solid;
	border-width: medium 1px 1px;
	clear: both;
	float: left;
	margin-bottom: 15px;
	width: 100%;
}
.tab_content {
	display: none;
	font-size: 1.2em;
	padding: 20px;
}
.success {
	width: 100%;
	height: 20px;
	border-radius: 4px;
	background: #c6e8b8;
	padding: 8px 0 6px 0px;
	margin-top: 20px;
	font-size: 14px;
	color: #5f9b46;
	font-weight: bold;
	border: 1px #d6e9c6 solid;
}
.critical {
	width: 100%;
	height: 20px;
	border-radius: 4px;
	background: #f2dede;
	padding: 8px 0 6px 0px;
	margin-top: 20px;
	font-size: 14px;
	color: #a94442;
	font-weight: bold;
	border: 1px #ebccd1 solid
}
.warning {
	width: 100%;
	height: 20px;
	border-radius: 2px;
	background: #f7f898;
	padding: 8px 0 6px 0px;
	margin-top: 20px;
	font-size: 14px;
	color: #968709;
	font-weight: bold;
	border: 1px #faebcc solid;
}
div#divMessage i.fa {
	vertical-align: middle;
	margin: 0 5px 0 7px;
}
/* Report*/
/*.report-row {
	margin: 3px 0;
	height: 50px;
	line-height: 50px;
}*/
/*.report-input-block {
	width: 99%;
	margin: 10px 0;
	border: 7px solid #EFEFEF;
	border-radius: 5px;
	float: left;
}*/
/*.report-label {

	float: left;
	margin-left: 2%;
	color: #8E8E8E;
}
.report-control-block {
	float: left;
	margin-left: 1%;
}*/
/*.report-block {
	float: left;
	margin-right: 1%;
}
.report-btn-holder {
	width: 100%;
	margin: 0;
	text-align: right;
}*/
/*.report-btn {
	background: #DE2835;
	text-decoration: none;
	color: #fff;
	margin: 0 1% 0 0;
	border-radius: 4px;
	font-weight: 200;
	font-size: 14px;
	border: 0;
	outline: 0;
	cursor: pointer;
	height: 30px;
}
.report-btn:hover {
}
.report-control {
	height: 25px;
	border-radius: 4px;
	border: 1px solid #d6d6d6;
	font-size: 14px;
	font-weight: 200;
	outline: none;
	color: #000;
	width: 96%;
	padding-left: 3%;
}*/
/*.report-control:focus, active {
	border: 1px solid #FFC5C5;
}*/
/* Report Ends*/

/* ==========================================================================
   Break popup
   ========================================================================== */	
.breaktime {
	font-family: 'lets_go_digitalregular'!important;
	font-size: 80px !important;
	width: 100%;
	height: 115px;
	line-height: 115px;
	text-align: center;
}
.breaktime>div {
	display: inline-block;
	font-family: 'lets_go_digitalregular';
	font-size: 80px;
	color: #3d3d3d;
}
.breaktime>span {
	display: inline-block;
	font-family: 'lets_go_digitalregular';
	font-size: 80px;
	color: #3d3d3d;
}
/* Break Ends*/
	
	
.btn-left {
	float: left;
}
.btn-right {
	float: right;
}
.attach-btn {
	background-image: url(../images/attachment-icon.png);
	background-size: auto 60%;
	outline: 0;
	border-radius: 3px;
	font-size: 13px;
	color: #fff;
	cursor: pointer;
	padding: 7px 7px 7px 40px;
	background-repeat: no-repeat;
	background-position: 5% 50%;
	/* background-color: #ff3737; */
	transition: all .5s;
	text-transform: uppercase;
	font-weight: 500;
	font-family: 'Roboto', sans-serif;
	background-color: #ff3737;
	border: 1px solid #f35555;
	border-bottom: 3px solid #d42b2b;
}
.attach-btn:hover {
	/* background-color: #FD8282; */
	opacity: .8;
}
.file-attact-btn-popup {
	border-right: 0;
	border-radius: 3px 0 0 3px;
}
.file-attact-txt-popup {
	border-left: 0;
	border-radius: 0px 3px 3px 0;
}
.cc-btn {
	border: 0;
	outline: 0;
	border-radius: 0 3px 3px 0;
	font-size: 14px;
	color: #fff;
	cursor: pointer;
	padding: 5px 10px;
	background-color: #FF5454;
}
.cc-btn:hover {
	background-color: #FD8282;
}
.cc-txt-popup {
	border-radius: 4px 0 0 4px;
	border-right: 0;
}
.voc-action {
	border: 1px solid #ccc;
	box-shadow: 0 0 20px 6px rgba(0, 0, 0, 0.31);
	display: table;
	margin: auto;
	width: 1024px;
	position: absolute;
	background-color: #ffffff;/* height: 99%; */
}
.voc-action-heading {
	background: #f4f4f4;
	padding: 5px 0;
	border-bottom: 1px solid #ccc;
	width: 100%;
}
.action-row {
	width: 222px;
	float: left;
	padding-right: 10px;
}
.action-form-wrap {
	display: table;
	margin: 0 2% 2% 2%;
}
.action-btn-holder {
	border-top: 1px solid rgba(204, 204, 204, 0.46);
	float: left;
	height: auto;
	padding: 10px 2%;
	text-align: right;
	width: 96%;
}
.action-btn-right {
	float: right;
	width: auto;
	margin: 0;
	padding: 0;
}
.action-btn-left {
	float: left;
	width: auto;
	margin: 0;
	padding: 0;
}
.action-btn {
	background-image: url(../images/addition-icon.png);
	background-size: auto 60%;
	/*border: 0;*/
	outline: 0;
	border-radius: 3px;
	/*font-size: 14px;*/
	color: #fff;
	cursor: pointer;
	padding: 5px 7px 5px 40px;
	background-repeat: no-repeat;
	background-position: 5% 50%;
	/*	background-color: #FF5454;*/
	font-size: 12px;
	background-color: #0099ff;
	border: 1px solid #0193f5;
	border-bottom: 3px solid #0580d2;
	font-weight: 700;
	transition: all .5s;
}
.action-btn:hover {
	/*background-color: #FD8282;*/
	opacity: .8;
}
.selecttextjoint-control>select {
	border-radius: 3px 0 0 3px !important;
}
.selecttextjoint-control> input[type="text"] {
	border-left: 0 !important;
	border-radius: 0 3px 3px 0 !important;
}
.textselectjoint-control>select {
	border-left: 0 !important;
	border-radius: 0 3px 3px 0 !important;
}
.textselectjoint-control>input[type="text"] {
	border-radius: 3px 0 0 3px !important;
}
.action-voc-head {
	width: 100%;
	margin: 0;
	box-shadow: 0 2px 17px -4px rgba(204, 204, 204, 0.71);
	padding: 8px 0;
	background: #fff;
	display: table;
}
.action-voc-head-left {
	display: inline-block;
	font-weight: 500;
	text-align: center;
	/* margin: 0 15px; */
	float: left;
	color: #444;
}
.action-head-right {
	display: inline-block;
	/* text-align: right; */
	margin: 0 9px;
	float: right;
	font-weight: 500;
	color: #444;
}
.action-voc-wrap {
	padding: 0 15px;
	text-align: center;
}
.action-date-text {
	width: 50px;
	display: inline-block;
}
.action-reff-text {
	width: 115px;
	display: inline-block;
}
.action-reff-no {
	display: inline-block;
}
.action-date {
	display: inline-block;
}
.voc-logo {
	margin: 10px 0;
	text-align: center;
}
.grid-btn-sm {
	background: url(../images/btn-red-bg.jpg);
	background-size: auto 100%;
	border: 0;
	outline: 0;
	border-radius: 3px;
	font-size: 12px;
	color: #fff;
	cursor: pointer;
	padding: 3px 11px;
	vertical-align: middle;
}
.grid-btn-sm:hover {
	background: url(../images/btn-red-hover-bg.jpg);
	background-size: auto 100%;
}
/* ==========================================================================
   ACtion VOC-POPUP
   ========================================================================== */	
.popup-logo-alternate {
	display: table-cell;
	text-align: center;
	padding: 5px 0;
	width: 20%;
	border-left: 4px solid #882D2D;
	box-shadow: -4px 0px 0px 0px rgb(255, 147, 147);
}
.popup-heading-text-alternate {
	display: table-cell;
	padding: 0;
	vertical-align: middle;
	font-weight: 700;
	text-indent: 15px;
	background: #E63434;
	color: #fff;
	font-size: 20px;
}
.popup-heading-alternate {
	display: table;
	table-layout: fixed;
	width: 100%;
	background: #f4f4f4 none repeat scroll 0 0;
	border-bottom: 1px solid #B3B3B3;
	box-shadow: 0 2px 17px -4px rgba(204, 204, 204, 0.71);
	margin-bottom: 20px;
}
.popup-logo-alternate img {
	width: 70%;
}
.icon-btn {
	font-size: 12px;
	background-color: #E42929 !important;
	border: 1px solid #e94c4c;
	border-radius: 3px;
	padding: 5px 5px 5px 5px;
	color: #fff;
	border-bottom: 3px solid #8c1911;
	cursor: pointer;
	text-indent: 20px;
}
.icon-btn:hover {
	/*background-color: #D84949 !important;*/
	opacity: .8;
}
.cancel-btn {
	padding-right: 5px;
	font-size: 11px;
	background-color: #ff3737 !important;
	border: 1px solid #ef3232;
	border-radius: 3px;
	padding: 5px 9px 5px 22px;
	color: #fff;
	border-bottom: 3px solid #d42b2b;
	cursor: pointer;
	transition: all .5s;
	text-transform: uppercase;
	font-weight: 500;
	font-family: 'Roboto', sans-serif;
}
.cancel-btn:hover {
	/* background-color: #DBDBDB !important; */
	opacity: .8;
}
.hangup-icon {
	background: url('../images/hangup-icon-30x30.png') no-repeat;
	background-position: 4px 50%;
	background-size: 14px;
	background-color: #ff0c0c !important;
	border: 1px solid #da0808;
	border-bottom: 3px solid #bd0f0f;
}
.hangup-icon:hover {
	background-color: #ea0101 !important;
	border: 1px solid #d40202;
	border-bottom: 3px solid #ab0000;
}
.hold-icon {
	background: url('../images/hold-icon-30x30.png') no-repeat;
	background-position: 4px 50%;
	background-size: 14px;
	background-color: #067ecc !important;
	border: 1px solid #0775bd;
	border-bottom: 3px solid #0569ab;
}
.hold-icon:hover {
	background-color: #0a6fb1 !important;
	border: 1px solid #09639e;
	border-bottom: 3px solid #055b94;
}
.release-icon {
	background: url('../images/release-icon-30x30.png') no-repeat;
	background-position: 4px 50%;
	background-size: 14px;
	background-color: #26945a !important;
	border: 1px solid #20824e;
	border-bottom: 3px solid #1e7748;
}
.release-icon:hover {
	background-color: #258c56 !important;
	border: 1px solid #1e824d;
	border-bottom: 3px solid #19633c;
}
.dial-icon {
	background: url('../images/dial-icon-30x30.png') no-repeat;
	background-position: 4px 50%;
	background-size: 14px;
	background-color: #3f9632 !important;
	border: 1px solid #37882b;
	border-bottom: 3px solid #307326;
}
.dial-icon:hover {
	background-color: #348228 !important;
	border: 1px solid #2c6b22;
	border-bottom: 3px solid #2a6521;
}
.cancel-icon {
	background: url('../images/cancel-icon-30x30.png') no-repeat;
	background-position: 4px 50%;
	background-size: 16px;
}
.save-draft-icon {
	background: url(../images/savedraft-30x30.png) no-repeat;
	background-position: 6px 50%;
	background-size: 15px;
	background-color: #19b84e !important;
	border: 1px solid #14ab46;
	border-bottom: 3px solid #13983f;
	transition: all .5s;
	text-transform: uppercase;
	font-weight: 500;
	font-family: 'Roboto', sans-serif;
}
.send-icon {
	background: url(../images/sendmail-30x30.png) no-repeat;
	background-position: 6px 50%;
	background-size: 19px;
	text-indent: 23px;
	padding-right: 5px;
	font-size: 11px;
	background-color: #ff3737 !important;
	border: 1px solid #ef3232;
	border-radius: 3px;
	/* padding: 5px 9px 5px 22px; */
	color: #fff;
	border-bottom: 3px solid #d42b2b;
	cursor: pointer;
	transition: all .5s;
	text-transform: uppercase;
	font-weight: 500;
	font-family: 'Roboto', sans-serif;
}
.forward-icon {
	background: url(../images/forward-30x30.png) no-repeat;
	background-position: 6px 50%;
	background-size: 16px;
	padding-right: 5px;
	font-size: 11px;
	background-color: #ff3737 !important;
	border: 1px solid #ef3232;
	border-radius: 3px;
	/* padding: 5px 9px 5px 22px; */
	color: #fff;
	border-bottom: 3px solid #d42b2b;
	cursor: pointer;
	transition: all .5s;
	text-transform: uppercase;
	font-weight: 500;
	font-family: 'Roboto', sans-serif;
}
.escalate-icon {
	background: url('../images/forward-30x30.png') no-repeat;
	background-position: 6px 50%;
	background-size: 16px;
	padding-right: 5px;
	font-size: 11px;
	background-color: #ff3737 !important;
	border: 1px solid #ef3232;
	border-radius: 3px;
	/* padding: 5px 9px 5px 22px; */
	color: #fff;
	border-bottom: 3px solid #d42b2b;
	cursor: pointer;
	transition: all .5s;
	text-transform: uppercase;
	font-weight: 500;
	font-family: 'Roboto', sans-serif;
}
.register-icon {
	background: url(../images/register-30x30.png) no-repeat;
	background-position: 12% 50%;
	background-size: 16px;
	padding-right: 5px;
	font-size: 11px;
	background-color: #ff3737 !important;
	border: 1px solid #ef3232;
	border-radius: 3px;
	/* padding: 5px 9px 5px 22px; */
	color: #fff;
	border-bottom: 3px solid #d42b2b;
	cursor: pointer;
	transition: all .5s;
	text-transform: uppercase;
	font-weight: 500;
	font-family: 'Roboto', sans-serif;
}
.template-icon {
	width: 50px;
	background-image: url('../images/template-30x30.png');
	padding: 9px 7px;
	font-size: 10px;
	background-position: 50%;
	background-size: 20px;
	text-indent: 44px;
}
.done-btn {
	font-size: 12px;
	background-color: #19b84e !important;
	border: 1px solid #14ab46;
	border-radius: 3px;
	padding: 5px 5px 5px 23px;
	color: #fff;
	border-bottom: 3px solid #13983f;
	cursor: pointer;
	font-weight: 700;
	transition: all .5s;
}
.done-btn:hover {
	opacity: 0.8;
}
.done-icon {
	background: url('../images/done-24x24.png') no-repeat;
	background-position: 10% 50%;
	background-size: 12px;
}
.view-btn {
	font-size: 10px;
	padding: 3px 6px 3px 20px;
	color: #fff;
	cursor: pointer;
	margin: 0 auto;
	vertical-align: middle;
	background-color: #ff9900 !important;
	border: 1px solid #f19103;
	border-bottom: 3px solid #d48104;
	border-radius: 3px;
	text-transform: uppercase;
	font-weight: 700;
	transition: all .5s;
}
.view-btn:hover {
	/*background-color: #b1930b !important;
	border-bottom: 3px solid #a0850b;*/    opacity: .8;
}
.view-icon {
	background: url('../images/view-27x27.png') no-repeat;
	background-size: contain;
}
/*===============================
    increment-decrement-button
 ================================*/

.increment-decrement-block {
	float: left;
	width: 15px;
	height: 20px;
	border-bottom: 1px solid #909090;
	border-top: 1px solid #909090;
	border-right: 1px solid #909090;
	background: #ccc;
	position: relative;
	border-radius: 0 3px 3px 0;
	cursor: pointer;
}
.decrement-increment-txtbox {
	text-align: center;
	float: left;
	border-radius: 3px 0 0 3px;
	border: 1px solid #BBB;
	height: 18px;
}
.increment-btn {
	height: 10px;
	width: 15px;
	text-align: center;
	border-bottom: 1px solid #B1ACAC;
	color: #545454;
	top: 0px;
	position: absolute;
}
.decrement-btn {
	height: 10px;
	width: 15px;
	text-align: center;
	color: #545454;
	position: absolute;
	bottom: 5px;
}
/*===============================
    dashboard grid
 ================================*/

.dashbord-container {
	background: #fff;
	color: #111;
	margin: 20px 20px;
	padding: 1px;
	box-shadow: 0px 3px 10px -4px rgba(0, 0, 0, 0.58);
}
.grd-dashboard {
	border: 1px solid #dddddd;
	margin: 10px;
	border-collapse: collapse;
}
.grd-dashboard-row {
	background-color: #fff;
	font-size: 12px;
}
.grd-dashboard-row-header {
	background-color: #eee;
	font-size: 13px;
	text-align: left;
	font-weight: normal;
	height: 55px;
	border-bottom: 3px solid #961212;
}
.grd-dashboard-alternaterow {
	background-color: #f1f1f1;
	font-size: 12px;
	border: 1px solid #ddd;
}
.grd-dashboard-cell-header {
	padding-right: 3px;
}
.grd-dashboard-cell-header-left {
	padding-left: 3px;
}
.grd-dashboard-footer {
	margin: 10px;
	border-radius: 3px;
	font-size: 12px;
	text-align: right;
	padding: 4px;
	background-color: rgb(150, 18, 18);
	color: #fff;
}
.grd-dashboard-paging > td {
	border: 0px !important;
	padding: 0;
}
.grd-dashboard-paging > td > table {
	width: auto !important;
	display: table;
	border: none !important;
	margin: 2px;
	float: right;
}
.grd-dashboard-paging > td > table > tbody > tr > td > span {
	background: rgba(150, 18, 18, 0.72);
	color: #fff;
	width: 20px;
	display: block;
	border-radius: 3px;
	text-align: center;
}
.grd-dashboard-paging > td > table > tbody > tr > td > a {
	background: #961212;
	color: #fff;
	width: 20px;
	display: block;
	border-radius: 3px;
	text-align: center;
}
/*===============================
    dashboard main
 ================================*/

.dashboard-main {
	width: 100%;
	display: table;
	margin: 30px 0 70px 0;/*min-width:1259px;*/
}
.dashboard-left {
	width: 75%;
	display: inline-table;
	float: left;
}
.dashboard-right {
	width: 25%;
	display: inline-table;
	float: left;
}
.dashbord-bg {
	background-color: #f1f1f1;
	margin: auto;
	display: table;
	width: 98%;
}
.dashboard-head {
	background-color: #961212;
	border-radius: 3px;
	margin: 15px 20px;
	padding: 10px;
}
.dashboard-head h3 {
	margin: 0;
	padding: 0;
	font-size: 14px;
	text-transform: uppercase;
	color: #fff;
	font-weight: normal;
	/*width: 50%;*/
	display: inline-table;
}
.sort-view-btn {
	/*width: 40%;*/
	display: inline-table;
	float: right;
	margin-left: 0;
}
.sort-btn {
	border: 1px solid #fff;
	text-align: center;
	font-size: 12px;
	display: inline-table;
	width: 120px;
	height: 20px;
	line-height: 20px;
	border-radius: 2px;
	/* color: #fff; */
	margin-left: 2px;
}
.sort-btn:hover, .sort-btn:visited, .sort-btn:active {
	background-color: rgb(193, 0, 0);
}
.search-bg {
	width: 94%;
	display: table;
	background-color: #961212;
	margin: 10px auto;
}
.search-bg p {
	color: #fff;
	text-transform: uppercase;
	font-size: 14px;
	margin: 5px 0;
}
.row {
	width: 90%;
	margin: 25px auto;
}
.dash-selectgrp {
	width: 100%;
	height: 30px;
	font-size: 14px;
	border: 0;
	padding: 0;
	text-indent: 5px;
}
.dash-selectgrp:focus, active {
	border: 0;
}
dash-selectgrp>select:focus {
	border: 0;
	outline: 0;
}
/*===============================
   End of Dashboard 
 ================================*/

/*===============================
   REPORT
 ================================*/
.report-row {
	margin: 3px 0;
	height: 50px;
	line-height: 50px;
}
.report-input-block {
	width: 99%;
	margin: 30px 0;
	border: 7px solid #EFEFEF;
	border-radius: 5px;
	float: left;
}
.report-label {
	float: left;
	margin-left: 3%;
	color: #8E8E8E;
	font-size: 14px;
}
.report-control-block {
	float: left;
	margin-left: 1%;
}
.report-block {
	float: left;
	margin-right: 1%;
}
.report-btn-holder {
	width: 100%;
	margin: 0;
	text-align: right;
}
.report-btn {
	text-decoration: none;
	color: #fff;
	margin: 0 1% 0 0;
	border-radius: 4px;
	outline: 0;
	cursor: pointer;
	height: 30px;
	font-size: 12px;
	background-color: #0099ff;
	border: 1px solid #0193f5;
	border-bottom: 3px solid #0580d2;
	font-weight: 700;
	transition: all .5s;
}
.report-btn:hover {
	opacity: .8;
}
.report-control {
	height: 25px;
	border-radius: 4px;
	border: 1px solid #d6d6d6;
	font-size: 14px;
	font-weight: 200;
	outline: none;
	color: #000;
	width: 96%;
	padding-left: 3%;
}
.report-control:focus, active {
	border: 1px solid #FFC5C5;
}
.date-picker {
	width: 120px;
	border: 1px solid #ccc;
	border-radius: 3px 0 0 3px;
	padding: 5px 5px;
	float: left;
	background: url(../images/calender-icon35x35.png) no-repeat 100% 50%;
	background-size: 28px;
	box-sizing: border-box;
}
.time-picker {
	width: 94px;
	border: 1px solid #ccc;
	border-radius: 0 3px 3px 0;
	padding: 5px;
	float: left;
	border-left: 0;
	background: url(../images/time-icon35x35.png) no-repeat 100% 50%;
	background-size: 28px;
	box-sizing: border-box;
}
.ajax__calendar {
	line-height: normal;
}
.dxtvControl .dxtv-subnd {
	margin-left: 18px!important;
}
.dxtvControl .dxtv-ndImg {
	padding: 0 0 0 0!important;
	margin: 3px 2px 0px 4px !important;
}
.dxtvControl .dxtv-elbNoLn, .dxtvControl .dxtv-elb {
	width: 24px!important;
	height: 21px !important;
}
/* Report Ends*/
/* browser compatibility start*/
.browser-alert {
	font-size: 24px;
	padding: 30px 0;
	color: rgba(203, 23, 23, 1);
	font-weight: 800;
	text-align: center;
}
/* browser compatibility Ends*/




/* ==================================
		FOOTER NOFIFICATION
===================================*/


/* ==================================
		FOOTER NOFIFICATION
===================================*/



.footer-notification {
	color: #fff;
	bottom: 0;
	position: fixed;
	background-repeat: no-repeat;
	background-position: 50px 50%;
	width: 100%;
	height: auto;
	padding: 12px 5px;
	font-size: 13px;
	font-weight: bold;
	border-radius: 0;
	border: 0;
	text-indent: 76px;
}
.footer-notification.success {
	background-color: #0fa65d;
	background-image: url(../images/noti-sucss-20x20.png)
}
.footer-notification.critical {
	background-color: #e8332c;
	background-image: url(../images/noti-criti-20x20.png)
}
.footer-notification.warning {
	background-color: #ffa500;
	background-image: url(../images/noti-warn-20x20.png)
}
.footer-notification.followup {
	background-color: #e07d12;
	background-image: url(../images/noti-follow-20x20.png)
}
.footer-notification .close-notification {
	right: 0px;
	width: 20px;
	margin-right: 20px;
	float: right;
}
.footer-notification>div {
	padding: 0 0 0 80px;
	width: 85%;
	text-indent: -80px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.footer-notification>div, .footer-notification>.close-notification {
	display: inline-block;
	vertical-align: middle;
}
.footer-notification .close-notification img {
	display: block;
}
i.fa.fa-link {
	text-align: right;
	padding-left: 10px;
}
a.link-msg {
	text-decoration: underline;
	color: #222;
	font-weight: bold;
}
.cboFollowUp {
	background-color: #ab131a;
	color: #fff;
	border: none;
}
/* ==========================================================================
   Pending-action-counter
   ========================================================================== */

.pending-action {
	background-color: #2d2d2d;
	position: fixed;
	bottom: 0;
	right: 0;
	padding-right: 10px;
	border-left: 5px solid #212020;
}
.count-pending {
	color: #222;
}
.pending-block {
	padding: 0px 3px;
	text-align: center;
	color: #222;
	font-size: 20px;
	float: left;
	margin: 6px 0 0 8px;
}
.count-pa {
	color: #fff;
	text-align: center;
	font-size: 38px;
	width: 115px;
	height: 39px;
	line-height: 42px;
	margin: 0 auto;
	text-overflow: ellipsis;
	overflow: hidden;
	word-wrap: initial;
	font-family: 'lets_go_digitalregular'!important;
	word-break: initial !important;
}
.pending-block img {
	vertical-align: middle;
}
.grd-his-item {
	padding: 0 8px;
	background-image: url(../images/grd-his-item.png);
	background-repeat: no-repeat;
	background-position: left center;
	transition: all .5s;
}
.grd-his-item:hover {
	background-image: url(../images/grd-his-item-hover.png);
	transition: all .5s;
}
input#chkAssignAll {
	padding: 0;
	margin: 0;
	width: 12px;
	vertical-align: middle;
}
div#divSelectAll {
	border: 1px solid #ddd;
	background: rgb(255,255,255);
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%);
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5', GradientType=0 );
	border-radius: 2px;
	padding: 0px 10px 0 5px;
}
.select-all-block input.form-btn {
	display: inline-block;
	/*padding: 9px 10px;*/
	/*font-size: 11px;*/
	/*line-height: 16px;*/
/*	margin-left: -4px;*/
	vertical-align: bottom;
}
.select-all-block {
	width: auto;
}
.select-all-block input#chkSelectAll {
	margin: 0px 0 0px 0 !important;
}
/*===============================
===============DASH BOARD
===============================*/

.cssProgress {
	width: 100%;
	margin-bottom: 0px;
	margin-top: 0px;
}
.cssProgress .cssProgress-bar {
	display: block;
	float: left;
	width: 0%;
	height: 100%;
	background: #3798d9;
	box-shadow: inset 0px -1px 2px rgba(0, 0, 0, 0.1);
	-webkit-transition: width 0.8s ease-in-out;
	transition: width 0.8s ease-in-out;
	position: relative;
}
.cssProgress .cssProgress-label {
	position: absolute;
	overflow: hidden;
	left: 0px;
	right: 0px;
	color: #fff;
	font-size: 0.7em;
	text-align: center;/* text-shadow: 0px 1px rgba(0, 0, 0, 0.3); */
}
.cssProgress .cssProgress-success {
	background-color: #11ce4b !important;
}
.cssProgress .cssProgress-stripes, .cssProgress .cssProgress-active, .cssProgress .cssProgress-active-right {
	background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.125) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.125) 50%, rgba(255, 255, 255, 0.125) 75%, transparent 75%, transparent);
	background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.125) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.125) 50%, rgba(255, 255, 255, 0.125) 75%, transparent 75%, transparent);
	background-size: 35px 35px;
}
.cssProgress .cssProgress-active-right {
	-webkit-animation: cssProgressActiveRight 2s linear infinite;
	-ms-animation: cssProgressActiveRight 2s linear infinite;
	animation: cssProgressActiveRight 2s linear infinite;
}
@-webkit-keyframes cssProgressActive {
 0% {
 background-position: 0 0;
}
 100% {
 background-position: 35px 35px;
}
}
@-ms-keyframes cssProgressActive {
 0% {
 background-position: 0 0;
}
 100% {
 background-position: 35px 35px;
}
}
@keyframes cssProgressActive {
 0% {
 background-position: 0 0;
}
 100% {
 background-position: 35px 35px;
}
}
@-webkit-keyframes cssProgressActiveRight {
 0% {
 background-position: 0 0;
}
 100% {
 background-position: -35px -35px;
}
}
@-ms-keyframes cssProgressActiveRight {
 0% {
 background-position: 0 0;
}
 100% {
 background-position: -35px -35px;
}
}
@keyframes cssProgressActiveRight {
 0% {
 background-position: 0 0;
}
 100% {
 background-position: -35px -35px;
}
}
.progress-mode {
	background-color: #EEE;
	box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
}
.progress-mode .cssProgress-bar {
	height: 10px;
}
.progress-mode .cssProgress-label {
	line-height: 10px;
	font-size: 9px;
}
.selected-dateinfo {
	color: #fff;
	font-size: 11px;
	text-align: right;
	width: 100%;
	margin-top: 0.75rem;
    margin-bottom: 0.25rem;
	display: inline-block;
}
.selected-from, .selected-to {
	display: inline-block;
	margin: 0 0px 0 10px;
}
canvas {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
.dashboard-container {
	display: flow-root;
	margin-bottom: 70px;
}
.dashboard-container .span-1, .dashboard-container .span-2, .dashboard-container .span-3, .dashboard-container .span-4, .dashboard-container .span-5, .dashboard-container .span-6, .dashboard-container .span-7, .dashboard-container .span-8, .dashboard-container .span-9, .dashboard-container .span-10, .dashboard-container .span-11, .dashboard-container .span-12 {
	position: relative;
	float: left;
	min-height: 1px;
	padding-right: 10px;
	padding-left: 10px;
	box-sizing: border-box;
}
.dashboard-container .row {
	width: 100%;
	margin: 0;
	padding: 0;
}
.dashboard-container .row:after {
	clear: both;
}
.dashboard-container .row:before {
	content: '';
	display: table;
}
.dashboard-container .span-12 {
	width: 100%;
}
.dashboard-container .span-11 {
	width: 91.66666667%;
}
.dashboard-container .span-10 {
	width: 83.33333333%;
}
.dashboard-container .span-9 {
	width: 75%;
}
.dashboard-container .span-8 {
	width: 66.66666667%;
}
.dashboard-container .span-7 {
	width: 58.33333333%;
}
.dashboard-container .span-6 {
	width: 50%;
}
.dashboard-container .span-5 {
	width: 41.66666667%;
}
.dashboard-container .span-4 {
	width: 33.33333333%;
}
.dashboard-container .span-3 {
	width: 25%;
}
.dashboard-container .span-2 {
	width: 16.66666667%;
}
.dashboard-container .span-1 {
	width: 8.33333333%;
}
.diagram-block {
	width: 100%;
	display: block;
	padding: 10px 0;
	box-sizing: border-box;
	margin-top: 8px;
}
.diagram-tbl-head h2 {
	padding: 0;
	font-size: 16px;
	color: #fff;
	margin: 0;
}
.diagram-tbl-head>h2, .diagram-tbl-head>.sort-view-btn {
	display: inline-block;
	vertical-align: middle;
}
.diagram-tbl-head>.sort-view-btn>.form-control {
	height: 25px;
	margin-top: -5px;
	font-size: 12px;
	line-height: 25px;
	padding: 4px 4px;
}
.diagram-tbl-head {
	background-color: #59c1fd;
	padding: 8px 10px;
	box-sizing: border-box;
	margin-top: 0.83em;
	margin-bottom: 0;
}
.diagram-head {
	font-size: 14px;
	background-color: #f1f1f1;
	color: #444;
	padding: 7px 10px;
	box-sizing: border-box;
	border-bottom: 3px solid #dad7d7;
}
.dash-board-tbl tr:first-child th:before {
	content: '';
}
.dash-board-tbl th:not(:last-child) {
	border-right: 1px dotted #ccc !important;
}
.dash-board-tbl td:not(:last-child) {
	border-right: 1px dotted #ccc !important;
}
.dash-board-tbl tr {
	height: 28px;
}
.dotted-tbl {
	border-collapse: collapse;
}
.dotted-tbl tr {
	height: 10px;
}
.dotted-tbl td:not(:last-child) {
	border-right: 1px dotted #ccc !important;
}
.dotted-tbl td {
	padding: 0px 0px;
	color: #fff;
	font-size: 12px;
	border-collapse: collapse;
}
/*===============================
===============CUSTOMISED CONTROLS
===============================*/

div#trvMenu {
	width: 100% !important;
}
.dxtvControl .dxtv-ndTxt {
	color: #666666 !important;
	font-weight: 500;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	padding: 4px 3px !important;
	margin: 0px 0px 0px 4px !important;
}
.dxtvControl .dxtv-ndSel, .dxtvControl .dxtv-ndHov {
	border: 0;
	padding: 1px !important;
	background-color: #fff !important;
}
.dxtvControl .dxtv-ndTxt:hover {
	color: #E9181C!important;
}
.dxWeb_rpHeaderTopLeftCorner, .dxWeb_rpHeaderTopRightCorner, .dxWeb_rpBottomLeftCorner, .dxWeb_rpBottomRightCorner, .dxWeb_rpTopLeftCorner, .dxWeb_rpTopRightCorner, .dxWeb_rpGroupBoxBottomLeftCorner, .dxWeb_rpGroupBoxBottomRightCorner, .dxWeb_rpGroupBoxTopLeftCorner, .dxWeb_rpGroupBoxTopRightCorner, .dxWeb_mHorizontalPopOut, .dxWeb_mVerticalPopOut, .dxWeb_mVerticalPopOutRtl, .dxWeb_mSubMenuItem, .dxWeb_mSubMenuItemChecked, .dxWeb_mScrollUp, .dxWeb_mScrollDown, .dxWeb_tcScrollLeft, .dxWeb_tcScrollRight, .dxWeb_tcScrollLeftHover, .dxWeb_tcScrollRightHover, .dxWeb_tcScrollLeftPressed, .dxWeb_tcScrollRightPressed, .dxWeb_tcScrollLeftDisabled, .dxWeb_tcScrollRightDisabled, .dxWeb_nbCollapse, .dxWeb_nbExpand, .dxWeb_splVSeparator, .dxWeb_splVSeparatorHover, .dxWeb_splHSeparator, .dxWeb_splHSeparatorHover, .dxWeb_splVCollapseBackwardButton, .dxWeb_splVCollapseBackwardButtonHover, .dxWeb_splHCollapseBackwardButton, .dxWeb_splHCollapseBackwardButtonHover, .dxWeb_splVCollapseForwardButton, .dxWeb_splVCollapseForwardButtonHover, .dxWeb_splHCollapseForwardButton, .dxWeb_splHCollapseForwardButtonHover, .dxWeb_pcCloseButton, .dxWeb_pcPinButton, .dxWeb_pcRefreshButton, .dxWeb_pcCollapseButton, .dxWeb_pcMaximizeButton, .dxWeb_pcSizeGrip, .dxWeb_pcSizeGripRtl, .dxWeb_pPopOut, .dxWeb_pPopOutDisabled, .dxWeb_pAll, .dxWeb_pAllDisabled, .dxWeb_pPrev, .dxWeb_pPrevDisabled, .dxWeb_pNext, .dxWeb_pNextDisabled, .dxWeb_pLast, .dxWeb_pLastDisabled, .dxWeb_pFirst, .dxWeb_pFirstDisabled, .dxWeb_tvColBtn, .dxWeb_tvColBtnRtl, .dxWeb_tvExpBtn, .dxWeb_tvExpBtnRtl, .dxWeb_fmFolder, .dxWeb_fmFolderLocked, .dxWeb_fmCreateButton, .dxWeb_fmMoveButton, .dxWeb_fmRenameButton, .dxWeb_fmDeleteButton, .dxWeb_fmRefreshButton, .dxWeb_fmDwnlButton, .dxWeb_fmCreateButtonDisabled, .dxWeb_fmMoveButtonDisabled, .dxWeb_fmRenameButtonDisabled, .dxWeb_fmDeleteButtonDisabled, .dxWeb_fmRefreshButtonDisabled, .dxWeb_fmDwnlButtonDisabled, .dxWeb_fmThumbnailCheck, .dxWeb_ucClearButton, .dxWeb_isPrevBtnHor, .dxWeb_isNextBtnHor, .dxWeb_isPrevBtnVert, .dxWeb_isNextBtnVert, .dxWeb_isPrevPageBtnHor, .dxWeb_isNextPageBtnHor, .dxWeb_isPrevPageBtnVert, .dxWeb_isNextPageBtnVert, .dxWeb_isPrevBtnHorDisabled, .dxWeb_isNextBtnHorDisabled, .dxWeb_isPrevBtnVertDisabled, .dxWeb_isNextBtnVertDisabled, .dxWeb_isPrevPageBtnHorDisabled, .dxWeb_isNextPageBtnHorDisabled, .dxWeb_isPrevPageBtnVertDisabled, .dxWeb_isNextPageBtnVertDisabled, .dxWeb_isDot, .dxWeb_isDotDisabled, .dxWeb_isDotSelected, .dxWeb_isPlayBtn, .dxWeb_isPauseBtn, .dxWeb_igCloseButton, .dxWeb_igNextButton, .dxWeb_igPrevButton, .dxWeb_igPlayButton, .dxWeb_igPauseButton, .dxWeb_igNavigationBarMarker {
	background-image: url(../images/DXR.png)!important;
}
.dxtvControl .dxtv-ln {
	background: url(../images/DXR-line.png) repeat-y!important;
}
.dxtvControl .dxtv-elb {
	background: url(../images/DXR-line2.png) no-repeat!important;
}
.dxtvControl .dxtv-nd>span[style="color:White;background-color:Red;"] {
	background-color: #3bc760 !important;
	border-radius: 2px;
	color: #fff !important;
}
.dxtv-ln.dxtv-subnd .dxtv-nd>span[style="color:Red;font-weight:bold;"] {
	color: #1b1f1c !important;
	font-weight: bold;
}
/*=============================================
		PAGING
=============================================*/
.pager-container, .pager table {
	border-top: 0px !important;
	border-bottom: 0px !important;
	border-left: 0px !important;
	border-right: 0px !important;
}
.pager-container td, .pager td, tr.pager {
	margin: 0;
	padding: 0 !important;
	background-color: #fff !important;
	border: 0 !important;
}
.pager table {
	display: inline-block;
	padding: 4px 5px;
}
.pager {
	background-color: #fff !important;
	padding: 13px 0;
}
.pager span {
	background-color: #ff3737;
	color: #fff;
}
.pager span, .pager a {
	margin: 0 5px 0 0px;
	padding: 2px 6px;
	font-size: 10px;
	font-weight: 600;
	box-shadow: 0 0px 1px 0 rgba(0,0,0,0.10)!important;
	border-width: 0px 0px 2px 1px;
	border-style: solid;
	border-color: rgba(0, 0, 0, 0.09);
	border-radius: 2px;
	transition: all .5s;
}
.pager a {
	color: #5d5958;
}
.pager td a:hover {
	color: #ffffff !important;
	background-color: #ff3737;
}
.pager>span>span {
	background-color: #f2f2f2;
	border-radius: 3px;
}
/*===============================
===============STYLED CHECKBOX
===============================*/


.style-check-box>input[type="checkbox"] {
	display: none;
}
.login-from-input .style-check-box {
	padding-left: 0;
	margin-bottom: 2px;
}
.style-check-box {
	line-height: 0;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	padding: 0 0px 0 0px;
	display: inline-block;
	vertical-align: initial;
}
.grid-data .style-check-box {
	padding: 0;
}
.style-check-box + .style-check-box {
	border-top: 1px solid #f0f2f3;
}
.check-box-cb {
	display: none;
}
.style-check-box-tick {
	position: relative;
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 2px;
	border: 1px solid #d5d5d5;
	background: #e5e5e5;
}
.style-check-box-tick:before {
	content: '';
	display: none;
	position: absolute;
	top: 42%;
	left: 35%;
	margin: -2px 0 0 -2px;
	height: 3px;
	width: 7px;
	border: solid #fff;
	border-width: 0 0 2px 2px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
span.style-check-box-tick:hover {
	border-color: #70ad51;
	background: #70ad51;
}
.style-check-box>input[type="checkbox"]:checked ~ .style-check-box-tick {
	border-color: #70ad51;
	background: #70ad51;
}
.style-check-box>input[type="checkbox"]:checked ~ .style-check-box-tick:before {
	display: block;
}
/*===============================
===============CUSTOMISED POPUP+++
===============================*/

.popup-wrapper {
}
.wrapper-action {
}
.popup-wrapper.wrapper-action .form-right .heading-text {
	padding: 8px 13px;
	margin: 0;
	font-size: 14px;
}

/*===============================
===============Others+++
===============================*/

.popup-btn-holder>div {
    display: inline-block;
}

/*===============================
===============DATE PICKER+++
===============================*/

.ui-datepicker {
	width: 17em;
	padding: .2em .2em 0;
	display: none;
}
.ui-datepicker .ui-datepicker-header {
	position: relative;
	padding: .2em 0;
}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
	/* background-color: #fff !important; */
	border-radius: 15px !important;
	position: absolute;
	top: 2px;
	width: 1.8em;
	height: 1.8em;
}
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover {
	top: 1px;
}
.ui-datepicker .ui-datepicker-prev {
	left: 2px;
}
.ui-datepicker .ui-datepicker-next {
	right: 2px;
}
.ui-datepicker .ui-datepicker-prev-hover {
	left: 1px;
}
.ui-datepicker .ui-datepicker-next-hover {
	right: 1px;
}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -8px;
	top: 50%;
	margin-top: -10px;
}
.ui-datepicker .ui-datepicker-title {
	margin: -1px 2.3em !important;
	line-height: 1.8em;
	text-align: center;
}
.ui-datepicker .ui-datepicker-title select {
	font-size: 1em;
	margin: 1px 0;
}
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
	width: 45%;
}
.ui-datepicker table {
	width: 100%;
	font-size: .9em;
	border-collapse: collapse;
	margin: 0 0 .4em;
}
.ui-datepicker th {
	padding: .7em .3em;
	text-align: center;
	font-weight: normal !important;
	color: #f78223 !important;
	border: 0;
}
.ui-datepicker td {
	border: 0;
	padding: 1px;
}
.ui-datepicker td span, .ui-datepicker td a {
	display: block;
	padding: .2em;
	text-align: right;
	text-decoration: none;
}
.ui-datepicker .ui-datepicker-buttonpane {
	background-image: none;
	margin: .7em 0 0 0;
	padding: 0 .2em;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
	float: right;
	margin: .5em .2em .4em;
	cursor: pointer;
	padding: .2em .6em .3em .6em;
	width: auto;
	overflow: visible;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
	float: left;
}
/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
	width: auto;
}
.ui-datepicker-multi .ui-datepicker-group {
	float: left;
}
.ui-datepicker-multi .ui-datepicker-group table {
	width: 95%;
	margin: 0 auto .4em;
}
.ui-datepicker-multi-2 .ui-datepicker-group {
	width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
	width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
	width: 25%;
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
	border-left-width: 0;
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
	clear: left;
}
.ui-datepicker-row-break {
	clear: both;
	width: 100%;
	font-size: 0;
}
/* RTL support */
.ui-datepicker-rtl {
	direction: rtl;
}
.ui-datepicker-rtl .ui-datepicker-prev {
	right: 2px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next {
	left: 2px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-prev:hover {
	right: 1px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next:hover {
	left: 1px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane {
	clear: right;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
	float: left;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current, .ui-datepicker-rtl .ui-datepicker-group {
	float: right;
}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
	border-right-width: 0;
	border-left-width: 1px;
}
/* Icons */
.ui-datepicker .ui-icon {
	display: block;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
	left: .5em;
	top: .3em;
}




/* Component containers
----------------------------------*/
.ui-widget {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
}
.ui-widget .ui-widget {
	font-size: 1em;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
}
.ui-widget.ui-widget-content {
	border: 1px solid #ccc !important;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.13) !important;
	margin-top: 0.6rem !important;
	width: 200px;
	border-radius: 5px;
}
.ui-widget-content {
	border: 1px solid #dddddd;
	background: #ffffff;
	color: #333333;
}
.ui-widget-content a {
	color: #333333;
}
.ui-widget-header {
	border: 1px solid #666 !important;
	background: #777 !important;
	color: #ffffff !important;
	font-weight: bold;
}
.ui-widget-header a {
	color: #333333;
}
.ui-icon-circle-triangle-e {
	transform: rotate(180deg);
}
/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, 
/* We use html here because we need a greater specificity to make sure disabled
works properly when clicked or hovered */
html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
	border: 1px solid #eaeaea !important;
	background: #fff !important;
	color: #777;
	font-weight: normal;
}
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, a.ui-button, a:link.ui-button, a:visited.ui-button, .ui-button {
	color: #454545;
	text-decoration: none;
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus {
	border: 1px solid transparent;
	font-weight: normal;
	color: #2b2b2b;
}
.ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited, .ui-state-focus a, .ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited, a.ui-button:hover, a.ui-button:focus {
	color: #2b2b2b;
	text-decoration: none;
}
.ui-visual-focus {
	box-shadow: 0 0 3px 1px rgb(94, 158, 214);
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
	border: 1px solid #ff7200 !important;
	background: #f78223 !important;
	font-weight: normal;
	color: #ffffff;
}
.ui-icon-background, .ui-state-active .ui-icon-background {
	border: #003eff;
	background-color: #ffffff;
}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
	color: #ffffff;
	text-decoration: none;
}
/* Interaction Cues
----------------------------------*/
.selected-dateinfo input {
	border: 0;
	border-radius: 1px;
	width: 135px;
	text-indent: 7px;
	height: 30px;
	color: #777;
	margin-left: 0.25rem;
}
.selected-dateinfo>button {
    height: 29px;
    border: none;
    color: #fff;
    background-color: #555;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: 0.25rem;
    border-radius: 17px;
    cursor: pointer;
    border-bottom: 2px solid #222;
}

.selected-dateinfo>button:hover, .selected-dateinfo>button:focus {
    background-color: #777;
    transition: 0.5s;
    border-bottom: 2px solid #555;
	outline: none;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
	border: 1px solid #666 !important;
	background: #777 !important;
	color: #ffffff !important;
}
.ui-state-checked {
	border: 1px solid #dad55e;
	background: #fffa90;
}
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a {
	color: #777620;
}

/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
	width: 16px;
	height: 19px;
}
.ui-icon, .ui-widget-content .ui-icon {
	background-image: url("images/ui-datepicker-arrow-10x17.png");
}
.ui-widget-header .ui-icon {
	background-image: url("images/ui-datepicker-arrow-10x17.png");
}





.ui-widget-header .ui-icon {
    background-image: url(../images/ui-datepicker-arrow-10x17.png) !important;
	background-position: inherit;
	cursor: pointer;
}


.selected-dateinfo .date-picker {
	width: 120px !important;
	border: 1px solid #ccc !important;
	border-radius: 3px 0 0 3px !important;
	padding: 5px 5px;
	float: none;
	background: url(../images/calender-icon35x35.png) no-repeat 100% 50%;
	background-size: 28px;
	box-sizing: border-box;
	background-color: #fff;
}

.ui-widget:before {
    content: "";
    width: 24px;
    height: 19px;
    background-image: url(../images/date-popup-arrow-24x19.png);
    position: absolute;
    top: -13px;
    left: 0;
}

.form-error-msg {
    font-size: 10px;
    color: #dd1d10;
	height: 21px;
	display: none;
	line-height: 15px;
	text-transform: uppercase;
}
