@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700');
@import url('https://fonts.googleapis.com/css?family=Cairo');
/********************************************************************Common css***********************************************/
/************************************* Reset Styles ********************************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
td, div {
	vertical-align: top;
}
* {
	outline: none;
}
li, ol {
	list-style-type: none;
	list-style-image: none;
	list-style: none;
}
img {
	border: 0px; max-width:100%; width:100%;
}
textarea {
	resize: none;
}
input:focus, select:focus, textarea:focus, button:focus {
	outline: none;
}
a {
	text-decoration: none;
}
input, textarea, select, body {
	font-size: 14px;
	font-family: 'Montserrat', sans-serif;
}
/************************************* Reset End Styles ********************************/
/**************************************Grid styles*****************************/
.container {
	margin: 0 auto;
}
*, *:after, *:before {
	box-sizing: border-box;
}

@media (max-width:768px) {
.container {
	margin: 0 10px;
}
}

@media (min-width:768px) {
.container {
	width: 750px;
}
}

@media (min-width:992px) {
.container {
	width: 970px;
}
}

@media (min-width:1200px) {
.container {
	width: 1140px;
}
}
.container-fluid {
	margin-right: auto;
	margin-left: auto;
	padding-left: 15px;
	padding-right: 15px;
}
.row {
	margin-left: -15px;
	margin-right: -15px;
}
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
	clear: both;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
	position: relative;
	min-height: 1px;
	padding-left: 15px;
	padding-right: 15px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
	float: left;
}
.col-xs-12 {
	width: 100%;
}
.col-xs-11 {
	width: 91.66666667%;
}
.col-xs-10 {
	width: 83.33333333%;
}
.col-xs-9 {
	width: 75%;
}
.col-xs-8 {
	width: 66.66666667%;
}
.col-xs-7 {
	width: 58.33333333%;
}
.col-xs-6 {
	width: 50%;
}
.col-xs-5 {
	width: 41.66666667%;
}
.col-xs-4 {
	width: 33.33333333%;
}
.col-xs-3 {
	width: 25%;
}
.col-xs-2 {
	width: 16.66666667%;
}
.col-xs-1 {
	width: 8.33333333%;
}

@media (min-width:768px) {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
	float: left;
}
.col-sm-12 {
	width: 100%;
}
.col-sm-11 {
	width: 91.66666667%;
}
.col-sm-10 {
	width: 83.33333333%;
}
.col-sm-9 {
	width: 75%;
}
.col-sm-8 {
	width: 66.66666667%;
}
.col-sm-7 {
	width: 58.33333333%;
}
.col-sm-6 {
	width: 50%;
}
.col-sm-5 {
	width: 41.66666667%;
}
.col-sm-4 {
	width: 33.33333333%;
}
.col-sm-3 {
	width: 25%;
}
.col-sm-2 {
	width: 16.66666667%;
}
.col-sm-1 {
	width: 8.33333333%;
}
}

@media (min-width:992px) {
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
	float: left;
}
.col-md-12 {
	width: 100%;
}
.col-md-11 {
	width: 91.66666667%;
}
.col-md-10 {
	width: 83.33333333%;
}
.col-md-9 {
	width: 75%;
}
.col-md-8 {
	width: 66.66666667%;
}
.col-md-7 {
	width: 58.33333333%;
}
.col-md-6 {
	width: 50%;
}
.col-md-5 {
	width: 41.66666667%;
}
.col-md-4 {
	width: 33.33333333%;
}
.col-md-3 {
	width: 25%;
}
.col-md-2 {
	width: 16.66666667%;
}
.col-md-1 {
	width: 8.33333333%;
}
}

@media (min-width:1200px) {
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
	float: left;
}
.col-lg-12 {
	width: 100%;
}
.col-lg-11 {
	width: 91.66666667%;
}
.col-lg-10 {
	width: 83.33333333%;
}
.col-lg-9 {
	width: 75%;
}
.col-lg-8 {
	width: 66.66666667%;
}
.col-lg-7 {
	width: 58.33333333%;
}
.col-lg-6 {
	width: 50%;
}
.col-lg-5 {
	width: 41.66666667%;
}
.col-lg-4 {
	width: 33.33333333%;
}
.col-lg-3 {
	width: 25%;
}
.col-lg-2 {
	width: 16.66666667%;
}
.col-lg-1 {
	width: 8.33333333%;
}
}
.clearfix:before, .clearfix:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after, .clearContainer:after {
	content: " ";
	display: table;
}
.clearfix:after, .container:after, .container-fluid:after, .row:after, .clearContainer:after {
	clear: both;
}
/**************************************Grid End Styles*****************************/
/************************************* Common Styles ********************************/
.rightAlign {
	text-align: right;
}
.centerAligned {
	text-align: center;
}
.centeredBlock {
	margin-left: auto;
	margin-right: auto;
	float: none;
}
.fullWidth {
	width: 100%;
}
.floatLeft {
	float: left;
}
.floatRight {
	float: right;
}
.posRelative {
	position: relative;
}
.absolutePos {
	position: absolute;
}
.textDecorationNone {
	text-decoration: none;
}
.textDecorationUnderline {
	text-decoration: underline;
}
.fontWeightBold {
	font-weight: bold;
}
.clearBoth {
	clear: both;
}
.clearRight {
	clear: right;
}
input, textarea, select, body, .smallTop a, .mainMenu a {
	color: #868686;
}
body, .pageBody:after, .editable:after  {
	transition: all linear 200ms;
	-moz-transition: all linear 200ms;
	-webkit-transition: all linear 200ms;
	-ms-transition: all linear 200ms;
}
/************************************* Common End Styles ********************************/
/***********Dropdown Styles************/
.dropDownImage {
	float: left;
	margin-right: 10px;
	margin-top: 3px;
}
.dropDownImage img {
	display: block;
}
.dropDownImage + .dropDownText {
	padding-left: 27px;
	display: block;
}
.dropDownToggle {
	position: relative;
	padding-right: 14px;
}
.dropDown {
	display: inline-block;
	position: relative;
	text-align: left;
}
.dropDownToggle {
	display: block;
}
.dropDownMenu {
	display: none;
	position: absolute;
	top: 100%;
	white-space: nowrap;
	z-index: 111;
}
.dropDownMenu li {
}
.dropDownToggle:after {
	display: block;
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
}
.noPad {
	padding-left: 0;
	padding-right: 0;
}
/***********Dropdown End Styles************/
/************************************* Website Styles ********************************/
.header {
	background-color: #16528f;
	padding: 0 40px;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 5;
}
.logoHolder {
	width: 310px;
	float: left;
	padding: 15px 0;
}
.logoHolder img {
	width: 200px;
}
.pageTitle {
	width: calc(100% - 620px);
	float: left;
	color: #fff;
	font-size: 14px;
	text-transform: uppercase;
	padding: 24px 15px;
}
.lagSelector {
	width: 310px;
	float: left;
	padding: 18px 0;
	text-align: right;
	background-image: url(../images/lan-arrow.svg);
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 10px auto;
}
.lagSelector select {
	padding: 0 20px 0 0;
	background-color: transparent;
	border: 0 none;
	color: #ffff;
}
.lagSelector select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.lagSelector select option {
	color: #333;
	padding:5px;
}
.lanSelectorHolder {
	position: relative;
}
.leftMenu {
	position: fixed;
	width: 350px;
	background-color: #0b2947;
	left: 0;
	top: 0;
	height: 100%;
	margin-top: 65px;
	overflow:auto;
}
.personalInfo {
	padding: 30px 40px;
	background-color: #3a77b7;
}
.businessInfo {
	padding: 30px 40px;
}
.lagSelector a {
	color: #fff;
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 10px auto;
	padding-right: 15px;
}
.lagSelector a.mainLangSelector {
	background-image: url(../images/lan-arrow.svg);
}
.lagSelector ul {
	position: absolute;
	right: 0;
	top: 100%;
	padding: 10px;
	background-color: #3a77b7;
	margin-top: 5px;
	z-index: 99;
	display: none;
	width: 60px;
}
.lagSelector ul li {
	text-align: left;
}
.lagSelector ul li a {
	padding: 3px 0;
	display: block;
}
.userName {
	color: #fff;
	margin-bottom: 25px;
	position: relative;
}
.userName:hover .uploadPhotoIcon {
	text-decoration: underline;
}
.userPP{
	background-image: url(../images/profile.svg);
	background-position: left center;
	background-repeat: no-repeat;
	background-size:cover;
	width:50px;
	height:50px;
	display:inline-block;
	vertical-align:middle;
	margin-right:20px;
	border-radius:50%;
}
.empName {
	color: #fff;
	font-weight: 700;
	margin-bottom: 5px;
	font-size: 16px;
}
.empNum {
	opacity: 1;
	color: rgba(255,255,255,0.8)
}
.userNameInfo {
	margin-bottom: 15px;
}
.uploadPhotoIcon {
	font-size: 14px;
	color: #fff;
	opacity: 0.8;
	background-image: url(../images/camera-icon.svg);
	background-position: left center;
	padding-left: 20px;
	background-repeat: no-repeat;
	background-size:12px auto;
}
.imageUpload {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 80%;
	opacity: 0;
	z-index: 5;
	cursor: pointer;
}
.userActions li a {
	padding: 7px 0 7px 20px;
	color: rgba(255,255,255,0.8);
	font-size: 12px;
	display: block;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 13px auto;
}
.userActions li a:hover {
	text-decoration: underline;
}
.userActions li a.changePass {
	background-image: url(../images/lock.svg);
}
.userActions li a.logout {
	background-image: url(../images/logout.svg);
}
.businessInfo ul li {
	margin-bottom: 20px;
}
.businessInfo ul li h3 {
	color: rgba(255,255,255,0.6);
	font-size: 12px;
	margin-bottom: 10px;
}
.infoText, .infoText a {
	color: rgba(255,255,255,0.5);
	font-size: 14px;
}
.infoText a{
	color:rgba(255,255,255,0.5) !important;	
}
.editable {
	position: relative;
	cursor: pointer;
}
.editable:after {
	background-image: url(../images/edit.svg);
	content: "";
	width: 14px;
	height: 14px;
	position: absolute;
	right: 0;
	top: 5px;
	display: block;
}
.editable:hover:after{
	opacity:0.5;	
}
.cr {
	position: absolute;
	bottom: 0;
	padding: 25px 40px;
	text-align: center;
	font-size: 10px;
	color: #fff;
	opacity: 0.3;
}
.cr a {
	color: #fff;
	text-decoration: underline;
}
.cp {
	margin-bottom: 5px;
}
.cr a:hover {
	text-decoration: none;
}
.centerContent {
	padding: 25px 15px;
	background-color: #f1f2f2;
	float: left;
	width: calc(100% - 690px);
	margin-left: 350px;
	margin-top: 65px;
}
.filterHolder {
	margin-bottom: 15px;
}
.dateSelector {
	background-position: 95% center;
	background-image: url(../images/arrow-down.svg);
	background-size: 15px auto;
	background-repeat: no-repeat;
	display: inline-block;
	margin-right: 15px;
	vertical-align: middle;
}
.filterBtn {
	display: inline-block;
	vertical-align: middle;
}
.filterBtn input {
	color: #ffffff;
	font-size: 14px;
	text-transform: uppercase;
	background-color: #3a77b7;
	border: 0 none;
	padding: 8px 15px;
	display: block;
	cursor: pointer;
}
.filterBtn input:hover {
	background-color: #0b2947;
	cursor: pointer;
}
.dateSelector select {
	padding: 5px 28px 5px 5px;
	background-color: transparent;
	border: 0 none;
	min-width: 110px;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	color:#4d4d4d;
}
.dateSelector.yearSelector select {
	min-width: 70px;
}
.salaryEnity {
	background-image: #fff;
	border: 1px solid #d9d9d9;
	padding: 27px 24px;
	background-color: #fff;
	margin-bottom: 25px;
}
.salaryEnity h3 {
	color: #999999;
	font-size: 18px;
	margin-bottom: 20px;
	text-transform: uppercase;
	font-weight:normal;
}
.incomeInNumbers {
	font-weight: 700;
	font-size: 38px;
	color: #16528f;
	margin-bottom: 5px;
}
.currency {
	color: #3a77b7;
	font-weight: 700;
	font-size: 21px;
}
.additions .incomeInNumbers {
	font-size: 20px;
	font-weight: normal;
}
.additions .currency {
	font-size: 18px;
	font-weight: normal;
}
.additions .salaryHolder {
	width: 25%;
	margin-right: 2%;
	float: left;
}
.chartHolder {
	width: 73%;
	float: left;
}
.legendHolder {
	width: 60%;
	float: left;
	margin-right: 5%;
}
.chart-responsive {
	width: 35%;
	float: left;
}
.salaryNumber {
	display: inline-block;
	vertical-align: middle;
	font-weight: bold;
	text-align: right;
	margin-right: 10px;
	width: 46%;
	color:#4D4D4D;
}
.salaryNumber span {
	display: inline-block;
}
.salaryType {
	display: inline-block;
	vertical-align: middle;
	width: 48%;
	color:#666;
}
.chart-legend li {
	margin-bottom: 5px;
	position: relative;
	padding-left: 18px;
	padding-bottom: 5px;
	border-bottom: 1px solid #f1f1f1;
}
.chart-legend li .salaryNumber span{
	margin-right:10px;	
}
.chart-legend li:after {
	content: "";
	width: 15px;
	height: 15px;
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -8px;
}
.chart-legend li.class1:after {
	background-color: #144a80;
}
.chart-legend li.class2:after {
	background-color: #3a77b7;
}
.chart-legend li.class3:after {
	background-color: #53a8e0;
}
.chart-legend li.class4:after {
	background-color: #1d8a6a;
}
.chart-legend li.class5:after {
	background-color: #31b590;
}
.chart-legend li.class6:after {
	background-color: #ffde00;
}
.chart-legend li.class7:after {
	background-color: #ff6940;
}
.chart-legend li.class8:after {
	background-color: #e62b46;
}
.chart-legend li.class9:after {
	background-color: #5d308a;
}
.chart-legend li.class10:after {
	background-color: #964091;
}
.chart-legend li.class11:after {
	background-color: #e94190;
}
.chart-legend li.class12:after {
	background-color: #445e78;
}
.chart-legend li.class13:after {
	background-color: #283745;
}
.chart-legend li.class14:after {
	background-color: #606060;
}
.chart-legend li.class15:after {
	background-color: #A0A0A0;
}
.chart-legend li.class16:after {
	background-color: #E0E0E0;
}
.lastRow {
	margin-bottom: 0;
}
.prevData {
	position: fixed;
	width: 340px;
	background-color: #fff;
	right: 0;
	top: 0;
	height: 100%;
	margin-top: 65px;
	border-left: 1px solid #d9d9d9;
	padding: 25px 15px;
}
.prevData h3 {
	margin-bottom: 20px;
	padding: 0 20px;
	font-weight:normal;
}
.prevYearsList {
	position: relative;
	padding: 24px 0;
}
.prevYearsList:after {
	content: "";
	border-left: 1px solid #d9d9d9;
	height: 100%;
	left: 0;
	position: absolute;
	width: 2px;
	top: 0;
}
.prevYearsList li {
	padding-left: 23px;
	margin-bottom: 20px;
	position: relative;
}
.prevYearsList li:after {
	width: 12px;
	height: 12px;
	content: "";
	top: 50%;
	left: -6px;
	position: absolute;
	background-color: #d9d9d9;
	border-radius: 50%;
	margin-top: -6px;
}
.prevYearsList li .salMonth {
	color: #808080;
	font-size: 14px;
	margin-bottom: 5px;
}
.prevYearsList li .salAmount {
	color: #16528f;
	font-size: 18px;
}
.prevYearsList li .salAmount span {
	display: inline-block;
	/*width: 130px;*/
}
.viewSal {
	background-image: url(../images/view-sal.svg);
	width: 17px;
	height: 12px;
	position: absolute;
	right: 0;
	bottom: 50%;
	margin-bottom:-6px;
}
.viewSal:hover{
	background-image: url(../images-ar/ico-view-hover.svg);	
}
.popupHolder {
	background-color: rgba(13,42,70,0.8);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	display: none;
}
.openPopup .popupHolder {
	display: block;
}
.popupInner {
	width: 550px;
	margin: 0 auto;
	background-color: #fff;
	padding: 45px 30px;
	position: absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	-o-transform:translate(-50%,-50%);
}
.popupTitle {
	color: #666666;
	font-size: 14px;
	margin-bottom: 15px;
	font-weight: bold;
}
.closePopup {
	background-image: url(../images/close-popup.svg);
	position: absolute;
	left: 50%;
	top: -60px;
	display: block;
	width: 40px;
	background-size: 100% auto;
	background-repeat: no-repeat;
	height: 40px;
	margin-left: -20px;
}
.fornBtns a {
	display: inline-block;
}
.fornBtns .updateBtn {
	background-color: #57c5d5;
	display: inline-block;
}
.popupHolder .formRow {
	width: 100%;
	margin-right: 0;
	float: none;
}
.inputHolder {
	background-color: #f2f2f2;
	margin-bottom: 10px;
}
.inputHolder input {
	width: 100%;
	border: 0 none;
	background-color: transparent;
	font-size: 14px;
	padding: 18px;
}
.required {
	font-size: 11px;
	color: #16528f;
	font-weight: 100;
	margin-bottom: 15px;
}
.applyBtn {
	text-align: right;
}
.applyBtn input, .applyBtn a {
	display: inline-block;
	padding: 15px 40px;
	text-transform: uppercase;
	color: #fff;
	background-color: #3a77b7;
	border: 0 none;
}
.applyBtn input:hover, .applyBtn a:hover {
	cursor: pointer;
	background-color: #16528f;
}
.loginPage {
	background-color: #16528f;
	width: 100%;
	height: 100vh;
	position: relative;
}
.loginPage .backBtn{
	float:left; 
	padding:18px 0;	
	margin-left:40px;
}
.loginPage .backBtn a{
	color:#fff;
}
.loginPage .backBtn a:before{
    background-image: url(../images/back-white.svg);
}
.loginBox {
	width: 500px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}
.loginForm {
	background-color: #ffffff;
	padding: 50px;
}
.loginLogoHolder img {
	width: 100%;
	display: block;
}
.loginLogoHolder {
	padding: 0 50px;
	margin-bottom: 60px;
}
.forgotPass {
	text-align: right;
	margin-bottom: 15px;
}
.forgotPass a {
	color: #3a77b7;
	font-size: 12px;
}
.forgotPass a:hover {
	text-decoration: underline;
}
.loginPage .cr {
	position:absolute;
	left: 50%;
	transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
}
.loginForm h1 {
	color: #666666;
	font-size: 12px;
	margin-bottom: 20px;
}
.loginPage .lagSelector {
	width: auto;
	margin-right: 40px;
	position: relative;
	float: right;
}
.loginHead .loginLogoHolder {
	display: none;
}
.print {
	float: right;
	width:23px;
	height: 17px;
	background-image: url(../images/print.svg);
	display: block;
	background-repeat: no-repeat;
	margin-top: 7px;
}
.print:hover{
	opacity:0.8;	
}
.viewPrevYears {
	display: none;
}
.mobileIndex {
	display: none;
}
.theContent .dateSelector {
	background-image: none;
}
.theContent .filterBtn {
	display: none;
}
.theContent .print {
	display: none;
}
.theContent .legendHolder {
	margin-right: 0;
	width: 100%;
}
.theContent .salaryType {
	direction: rtl;
	text-align: left;
	float:left;
	width:65%;
}
.theContent .salaryEnity{padding:15px; width:100%;}
.theContent #NetIncomeTitle {float:left; margin-right:15px;}
.theContent .additions{width:49%; margin-right:2%; float:left;}
.theContent .additions.lastRow{margin-right:0;}
.theContent .additions .salaryHolder, .theContent .chartHolder{width:100%; float:none;}
.theContent .salaryHolder{margin-bottom:0;}
.theContent .salaryHolder .incomeInNumbers{display:inline-block; vertical-align:middle; font-size:18px;}
.theContent .salaryHolder .currency{display:inline-block; vertical-align:middle; font-size:15px !important;}
.theContent .chart-legend li:after{display:none;}
.theContent .chart-legend li{padding-left:0; display:inline-block; width:100%;}
.theContent .salaryNumber{text-align:right; float:right; margin-right:0; width:35%; font-size:0;}
.theContent .chart-legend li .salaryNumber span{width:75px; font-size:12px; margin-right:0;}
.theContent .incomeInNumbers{margin-bottom:0;}
.theContent .incomeLeft .salaryHolder{margin-bottom:15px;}


.printedPaper {
	padding: 15px;
}
.has-error {
	color: red;
	font-size: 12px;
}
.loginForm .has-error {
	display: block;
	margin-bottom: 10px;
}
#boxscroll2 {
	height: calc(100vh - 140px);
	width: 100%;
	overflow: auto;
	padding: 0 20px;
}
.changePasswordPopUp, .EmailPopup {
	display: none;
}
.hidden {
	display: none;
}
.chart-legend li.basicSalary:after {
	background-color: #f56954;
}
.chart-legend li.benefit:after {
	background-color: #00a65a;
}
.chart-legend li.NSSF:after {
	background-color: #f39c12;
}
.chart-legend li.pension:after {
	background-color: #00c0ef;
}
.chart-legend li.transportation:after {
	background-color: #3c8dbc;
}
.chart-legend li.taxes:after {
	background-color: #f56954;
}
.chart-legend li.insurance:after {
	background-color: #f39c12;
}
.chart-legend li.syndicate:after {
	background-color: #00c0ef;
}
.chart-legend li.deathInsurance:after {
	background-color: #3c8dbc;
}
.chart-legend li.subscription:after {
	background-color: #3c3dbc;
}



.tooltip .tooltiptext {
            visibility: hidden;
            background-color: #0b2947;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            /*padding: 5px 0;*/
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -60px;
            opacity: 0;
            transition: opacity 1s;
            width: 100%;
        }

            .tooltip .tooltiptext::after {
                content: "";
                position: absolute;
                top: 100%;
                left: 50%;
                margin-left: -5px;
                border-width: 5px;
                border-style: solid;
                border-color: #555 transparent transparent transparent;
            }

        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }

        .tooltip .tooltiptext li {
            padding-bottom: 10px;
            padding-top: 10px;
        }

        .tooltiptext .chart-legend li:after {
            display: none;
        }

        .emailInfo, .phoneInfo {
            display: none;
        }
        .yearlyCurrency {
            color: #3a77b7;
            font-size: 14px;
            display: inline;
        }
















select{cursor:pointer;}
.inputHolder{position:relative;}
.inputHolder input{color:#333;}
.inputHolder .has-error{position:absolute; right:8px; top:19px;}
#loader-wrapper {
            font-size: 20px;
            color: #fff;
            text-align: center;
        }

        .logoLoading {
            width: 35px;
        }

        #loader-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
            opacity: 0.8;
        }

        #loader {
            display: block;
            position: relative;
            left: 50%;
            top: 50%;
            width: 200px;
            height: 200px;
            margin: -100px 0 0 -100px;
            padding-top: 22px;
            padding-left: 22px;
            z-index: 1001;
            box-sizing: border-box;
        }

        .logoLoading {
            -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
            animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
        }



        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(0deg); /* IE 9 */
                transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
            }

            100% {
                -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(360deg); /* IE 9 */
                transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
            }
        }

        @keyframes spin {
            0% {
                -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(0deg); /* IE 9 */
                transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
            }

            100% {
                -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(360deg); /* IE 9 */
                transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
            }
        }

        #loader-wrapper .loader-section {
            position: fixed;
            top: 0;
            width: 50%;
            height: 100%;
            background-color: rgba(13,42,70,0.8);
            z-index: 1000;
            -webkit-transform: translateX(0); /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(0); /* IE 9 */
            transform: translateX(0); /* Firefox 16+, IE 10+, Opera */
        }

            #loader-wrapper .loader-section.section-left {
                left: 0;
            }

            #loader-wrapper .loader-section.section-right {
                right: 0;
            }

        /* Loaded */
        .loaded #loader-wrapper .loader-section.section-left {
            -webkit-transform: translateX(-100%); /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(-100%); /* IE 9 */
            transform: translateX(-100%); /* Firefox 16+, IE 10+, Opera */
            -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
            transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
        }

        .loaded #loader-wrapper .loader-section.section-right {
            -webkit-transform: translateX(100%); /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(100%); /* IE 9 */
            transform: translateX(100%); /* Firefox 16+, IE 10+, Opera */
            -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
            transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
        }

        .loaded #loader {
            opacity: 0;
            -webkit-transition: all 0.3s ease-out;
            transition: all 0.3s ease-out;
        }

        .loaded #loader-wrapper {
            visibility: hidden;
            -webkit-transform: translateY(-100%); /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateY(-100%); /* IE 9 */
            transform: translateY(-100%); /* Firefox 16+, IE 10+, Opera */
            -webkit-transition: all 0.3s 1s ease-out;
            transition: all 0.3s 1s ease-out;
        }

        /* JavaScript Turned Off */
        .no-js #loader-wrapper {
            display: none;
        }

        .no-js h1 {
            color: #222222;
        }

        #content {
            margin: 0 auto;
        }
/*********************************************************************************************************/
.centerContent.fullWidth {width: calc(100% - 350px); min-height: calc(100vh - 65px);}
.centerContent > h3{font-size:16px; color:#16528f; font-family: 'Montserrat', sans-serif; font-weight:700; text-transform:uppercase; margin-bottom:20px;}
.dashboardList li{display:inline-block; width:24%; margin-right:10px; background:#ffffff; border:1px solid #e5e5e5; padding:63px 20px 63px; position:relative;}
.dashboardList li:last-child{margin-right:0;}
.iconImg{display:block; margin-bottom:20px; width: 35px; height: 35px;}
.iconImg img{display:block; height:100%;}
.boardTitle{display:block; font-size:14px; color:#4d4d4d; font-family: 'Montserrat', sans-serif; font-weight:700;}
.arrowLink{position:absolute; right:15px; bottom:20px; background-image:url(../images-ar/arrow-right.svg); width:20px; height:15px; background-repeat:no-repeat; background-size:100%; transition: all linear 200ms;
	-moz-transition: all linear 200ms; -webkit-transition: all linear 200ms; -ms-transition: all linear 200ms;}	
.dashboardList ul li:hover .arrowLink{right:8px;}
.loansList{display:inline-block; width:100%;}
.loansList .salaryEnity{float:left; width:49%; margin-right:2%; }
.loansList .salaryEnity:nth-child(2n){margin-right:0;}
.salaryEnity h3 span {float: right;color: #3a77b7;font-size: 13px;text-transform: none;font-weight: 800;	font-family: 'Montserrat', sans-serif; position: relative;}
.salaryEnity h3 span:before{content:''; position:absolute; display:block; width:7px; height:7px; border-radius:50%; background:#3a77b7; left:-10px; top:5px;}
.incomeInNumbers span{display:inline-block; margin-left:10px; color:#d71813; font-size:14px; font-family: 'Montserrat', sans-serif;}	
.loanInfo {display: block; margin-top: 20px; font-family: 'Montserrat', sans-serif; font-weight:500;}
.loanRow {display: block; margin-bottom: 5px;}
.leftInfo {display: inline-block; text-align: left; color: #4d4d4d; font-size: 14px; }
.rightInfo{display: inline-block; float:right; text-align: right; color: #808080; font-size: 14px;}


.leavesList .salaryEnity {float:left; width: 32%; margin-right:2%;}
.leavesList .salaryEnity:nth-child(3n+1){margin-right:0;}
.leavesList .salaryEnity.highlighted {width: 100%;display: block;margin-right: 0;margin-bottom: 30px;}
.leavesList .salaryEnity h3{font-size:14px;}
.memosText{font-size:12px; font-family: 'Montserrat', sans-serif; font-weight:500; margin-bottom:20px;}
.memosList ul{display:inline-block; width:100%;}
.memosList ul li{width:18%; margin-right:6px; float:left; position:relative; border: 1px solid #e5e5e5;}
.memosList ul li:nth-child(5n){margin-right:0;}
.memosList ul li a{display:block;}
.memoInfo {padding: 9px 15px;background: #e5e5e5;left: 0;right: 0;}
.memoTitle {font-size: 14px;color: #4d4d4d;font-weight: 500;margin-bottom: 8px;}
.memoDate {font-size: 12px;font-weight: 500;color: #808080;}
.backBtn{display:block; margin-bottom:20px;}
.backBtn a{display:inline-block; padding-left:15px; position:relative; text-transform:uppercase; color:#4d4d4d; font-size:13px; text-decoration:underline;}
.backBtn a:hover{text-decoration:none;}
.backBtn a:before{position:absolute; content:''; background-image:url(../images/back.svg); width:6px; height:10px; left:0; top:3px;}
.leavesList .salaryEnity:nth-child(4n){margin-right:0;}
.linkRedirect{position:absolute; content:''; top:0; left:0; right:0; bottom:0; width:100%; height:100%; z-index:5;}
.autoHeight{height:auto !important;}